/* Generated from demo-page.css and shared.css by prepare-seo-fixes.mjs. */
@font-face { font-family:"Apfel Grotezk"; src:url("assets/fonts/ApfelGrotezk-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Apfel Grotezk"; src:url("assets/fonts/ApfelGrotezk-Mittel.woff2") format("woff2"); font-weight:500 600; font-style:normal; font-display:swap; }
@font-face { font-family:"Apfel Grotezk"; src:url("assets/fonts/ApfelGrotezk-Fett.woff2") format("woff2"); font-weight:700 900; font-style:normal; font-display:swap; }
:root { color-scheme:light; --ink:#181713; --muted:#68655d; --paper:#f8f7f2; --line:rgba(24,23,19,.11); --brand:"Apfel Grotezk",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.demo-story { position:relative; height:560vh; }
.demo-stage { position:sticky; top:0; height:100vh; min-height:620px; overflow:hidden; background:var(--paper); }
.site-header { position:absolute; z-index:20; top:0; left:50%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1500px,calc(100% - 64px)); height:94px; border-bottom:1px solid var(--line); transform:translateX(-50%); will-change:opacity,transform; }
.brand { display:inline-flex; align-items:center; justify-self:start; gap:9px; font-family:var(--brand); font-size:20px; font-weight:600; letter-spacing:-.025em; }
.brand img { width:28px; height:28px; object-fit:contain; }
.site-header nav { display:flex; align-items:center; gap:clamp(24px,3.3vw,54px); color:#3c3a35; font-size:14px; }
.primary-action { border:1px solid var(--ink); border-radius:11px; color:#fff; background:var(--ink); font-weight:600; transition:color 160ms ease,background 160ms ease; }
.primary-action:hover { color:var(--ink); background:transparent; }

.hero-copy { position:absolute; z-index:10; top:50%; left:max(48px,calc((100vw - 1500px)/2)); width:min(36vw,560px); transform:translateY(-43%); will-change:opacity,transform; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 26px; color:var(--muted); font-size:13px; }
.eyebrow span { padding:4px 7px; border-radius:5px; background:#ebe9e1; color:#4c4942; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.hero-copy h1 { max-width:620px; margin:0; font-family:var(--brand); font-size:clamp(48px,5vw,78px); font-weight:500; letter-spacing:-.055em; line-height:.99; text-wrap:balance; }
.hero-lede { max-width:470px; margin:30px 0 0; color:var(--muted); font-size:clamp(16px,1.35vw,21px); line-height:1.48; }
.primary-action { margin-top:34px; padding:16px 22px; cursor:pointer; font-size:14px; }

.demo-window { position:absolute; z-index:8; top:136px; right:max(28px,calc((100vw - 1500px)/2)); bottom:64px; left:45.5vw; overflow:hidden; border:1px solid rgba(24,23,19,.15); border-radius:24px; background:#062744; box-shadow:0 26px 80px rgba(28,35,40,.17); transform:translateZ(0); will-change:inset,border-radius,box-shadow; }
.demo-window iframe { display:block; width:100%; height:100%; border:0; background:#062744; }
.interaction-cover { position:absolute; z-index:2; inset:0; cursor:ns-resize; background:transparent; }
.interaction-cover[hidden] { display:none !important; }
.demo-window.is-live .interaction-cover { display:none; }
.demo-window.is-live { box-shadow:none; }
.scroll-note { position:absolute; z-index:11; right:42px; bottom:24px; margin:0; color:var(--muted); font-size:11px; letter-spacing:.02em; pointer-events:none; will-change:opacity; }
.scroll-note span { margin-right:5px; }

@media (max-width:900px) {
  .site-header { width:calc(100% - 36px); height:72px; grid-template-columns:1fr auto auto; }
  .brand { font-size:17px; }
  .hero-copy { top:105px; left:24px; width:calc(100% - 48px); transform:none; }
  .hero-copy h1 { max-width:650px; font-size:clamp(40px,10vw,64px); }
  .hero-lede { margin-top:20px; font-size:16px; }
  .primary-action { margin-top:22px; }
  .demo-window { top:54%; right:18px; bottom:30px; left:18px; border-radius:18px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* POST-DEMO EXPERIMENT -------------------------------------------------
   Isolated from the product intro and live iframe so this whole direction
   can be reverted by removing one markup block, this block, and the small
   progress section in demo-page.js. */
.post-demo-layer { position:absolute; z-index:30; inset:0; overflow:hidden; color:var(--ink); pointer-events:none; }
.post-demo-wash { position:absolute; inset:0; background:#f8f7f2; opacity:var(--post-wash,0); will-change:opacity; }
.post-demo-content { position:relative; z-index:1; width:min(1500px,calc(100% - 64px)); height:100%; margin:0 auto; padding:clamp(46px,6vh,76px) 0 32px; opacity:var(--post-copy-opacity,0); transform:translate3d(0,var(--post-copy-y,22vh),0); will-change:opacity,transform; }
.post-demo-eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 20px; color:#68655d; font-size:13px; }
.post-demo-eyebrow span { width:11px; height:5px; border-radius:4px; background:#5c5951; }
.post-demo-content h2 { margin:0; font-family:var(--brand); font-size:clamp(42px,4.4vw,68px); font-weight:500; letter-spacing:-.05em; line-height:.98; }
.post-demo-content h2 em { color:#69655d; font-style:normal; }
.post-demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,30px); margin-top:clamp(42px,7vh,78px); }
.post-demo-card { min-width:0; opacity:var(--card-opacity,0); transform:translate3d(0,var(--card-y,110px),0) scale(var(--card-scale,.97)); transform-origin:50% 100%; will-change:opacity,transform; }
.post-demo-visual { position:relative; display:grid; place-items:center; height:clamp(260px,39vh,420px); overflow:hidden; border-radius:20px; background:#dfe7e7; }
.post-demo-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,255,255,.38),transparent 48%,rgba(21,35,41,.08)); pointer-events:none; }
.post-demo-visual img { position:relative; z-index:1; width:auto; height:88%; max-width:72%; object-fit:contain; filter:drop-shadow(0 16px 22px rgba(25,31,32,.16)); }
.visual-capture { background:linear-gradient(145deg,#dfe9e7,#adc8cc); }
.visual-notes { background:linear-gradient(145deg,#e7e3dc,#c7d8d4); }
.visual-dock { background:linear-gradient(145deg,#dbe7e9,#b5cbd1); }
.post-demo-card h3 { margin:18px 0 0; font-size:clamp(18px,1.35vw,23px); font-weight:500; letter-spacing:-.025em; }
.post-demo-card p { max-width:420px; margin:10px 0 0; color:#6d6961; font-size:clamp(13px,1vw,16px); line-height:1.5; }
/* On mobile, the feature section lives outside the fixed-height animation host. */
@media (max-width:900px) {
  .post-demo-layer { display:none; }
}


@media (max-width:900px) {
  .post-demo-static { display:block; height:auto; opacity:1; transform:none; width:calc(100% - 36px); margin:0 auto; padding:56px 0 8px; }
  .post-demo-static .post-demo-eyebrow { margin:0 0 20px; }
  .post-demo-static h2 { margin:0; font-family:var(--brand); font-size:clamp(32px,8.5vw,48px); font-weight:500; letter-spacing:-.05em; line-height:1.02; text-wrap:balance; }
  .post-demo-static .post-demo-grid { grid-template-columns:1fr; gap:28px; margin-top:32px; }
  .post-demo-static .post-demo-card { opacity:1; transform:none; }
  .post-demo-static .post-demo-visual { height:clamp(220px,42vh,320px); border-radius:14px; }
  .post-demo-static .post-demo-card p { font-size:13px; }
}

/* Footer styling now lives in shared.css — it's the one piece of chrome
   every page on the site uses identically, so it belongs in the stylesheet
   every page already loads, not duplicated per page-type stylesheet. */

/* Purchase information follows the immersive scroll scene in ordinary document
   flow — no background override here; it inherits body's --paper, the same
   tone as the hero/demo-stage above and every other page on the site. */
.commerce-inner,.faq-inner { width:min(1180px,calc(100% - 48px)); margin:auto; }
.commerce-section { padding:112px 0 104px; scroll-margin-top:20px; }
.commerce-inner { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr); gap:clamp(56px,8vw,150px); }
.commerce-label { margin:0 0 26px; color:#716d67; font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.commerce-copy h2,.faq-inner h2 { margin:0; font-family:var(--brand); font-weight:500; letter-spacing:-.047em; line-height:1.07; }
.commerce-copy h2 { font-size:clamp(40px,4vw,60px); }
.commerce-copy>p:not(.commerce-label):not(.download-note) { max-width:560px; margin:28px 0; color:#5c5953; font-size:17px; line-height:1.6; }
.download-actions { display:flex; flex-wrap:wrap; gap:32px; margin-top:20px; }
.download-action-group { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
/* Large, fully-rounded pill — same shape and treatment whether the link is
   live or still disabled; the caption line below each button, not the
   button's own look, is what tells a visitor it isn't clickable yet. */
.download-action { display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border-radius:999px; background:#111111; color:#fff; font-size:15px; font-weight:600; }
.download-action:hover { background:#2e2e2e; }
.download-action.is-unavailable { cursor:default; }
.download-icon { display:block; flex:0 0 auto; width:18px; height:18px; filter:invert(1); }
.download-note { margin:20px 0 0; color:#595650; font-size:13px; }
.download-note[hidden] { display:none; }
.commerce-facts { border-top:1px solid #dddcd7; }
.commerce-facts>div { display:grid; grid-template-columns:36px 1fr; column-gap:14px; padding:22px 0 26px; border-bottom:1px solid #dddcd7; }
.commerce-facts span { color:#716d67; font-size:12px; }
.commerce-facts strong { font-size:17px; font-weight:550; }
.commerce-facts p { grid-column:2; max-width:380px; margin:10px 0 0; color:#66635e; font-size:14px; line-height:1.5; }
.faq-section { padding:90px 0 125px; border-top:1px solid #e5e3de; scroll-margin-top:20px; }
.faq-inner { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1fr); gap:60px; }
.faq-inner h2 { font-size:clamp(36px,3.5vw,52px); }
.faq-list { border-top:1px solid #d9d8d3; }
.faq-list details { border-bottom:1px solid #d9d8d3; }
.faq-list summary { position:relative; padding:21px 34px 21px 0; cursor:pointer; list-style:none; font-size:16px; font-weight:500; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:4px; font-size:21px; font-weight:300; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list p { max-width:650px; margin:0 0 22px; color:#65615b; font-size:14px; line-height:1.65; }
.faq-list p a { color:#181713; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px) {
  .commerce-section { padding:72px 0; }
  .commerce-inner,.faq-inner { display:block; }
  .commerce-facts { margin-top:58px; }
  .faq-section { padding:68px 0 88px; }
  .faq-list { margin-top:36px; }
  .download-actions { flex-direction:column; gap:22px; }
}

/* Keep the minimized deck seated at the bottom of its feature tile. */
.visual-dock img { position:absolute; bottom:0; left:50%; width:72%; height:auto; transform:translateX(-50%); }
.featured-section { padding:0 0 88px; }
.featured-section > .commerce-inner { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1fr); column-gap:60px; align-items:center; }
.featured-section h2 { margin:0 0 28px; font-family:var(--brand); font-size:clamp(32px,4vw,48px); font-weight:500; letter-spacing:-.04em; line-height:1.05; }
.featured-badges { display:flex; align-items:center; gap:20px; width:100%; min-width:0; overflow-x:auto; padding:4px 24px; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; -webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent); }
.featured-badges::-webkit-scrollbar { display:none; }
.featured-badges > a { display:inline-block; flex:0 0 auto; line-height:0; }
.featured-badges img { display:block; max-width:100%; height:auto; }
.featured-badges:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
@media (max-width:900px) { .featured-section { padding-bottom:68px; } .featured-section > .commerce-inner { display:block; } }





html { scroll-behavior:smooth; scroll-padding-top:24px; }
.analytics-consent { position:fixed; bottom:18px; left:18px; z-index:100; width:min(460px,calc(100% - 36px)); padding:20px; border:1px solid #d9d7d0; border-radius:14px; background:#f8f7f2; color:#181713; box-shadow:0 8px 28px #0002; font:14px/1.5 Inter,"Segoe UI",Arial,sans-serif; }
.analytics-consent[hidden] { display:none; }
.analytics-consent p { margin:0 0 14px; }
.analytics-consent a { text-decoration:underline; }
.analytics-consent div { display:flex; gap:10px; }
.analytics-consent button { flex:1; padding:10px; border:1px solid #181713; border-radius:999px; background:transparent; color:#181713; font:600 13px/1.4 Inter,"Segoe UI",Arial,sans-serif; cursor:pointer; }
.analytics-consent button[data-choice="accepted"] { background:#181713; color:white; }
.analytics-preferences { padding:0; border:0; color:inherit; background:none; text-align:left; font:inherit; cursor:pointer; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* ── Header download buttons — same two pill buttons on every page's
   header, same shape/treatment as the large pair in the pricing section.
   Hardcoded colors/font (not var(--black) or var(--brand)) since this file
   is loaded by both page-type stylesheets and shouldn't depend on which
   one defined what. */
.header-downloads { display:flex; justify-self:end; gap:8px; }
.header-download-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; color:#fff; background:#111111; font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:12px; font-weight:600; white-space:nowrap; transition:background 160ms ease; }
.header-download-btn:hover { background:#2e2e2e; }
.coming-soon-trigger { position:relative; border:0; cursor:default; font-family:inherit; }
.coming-soon-trigger:focus-visible { outline:2px solid #68655d; outline-offset:4px; }
.coming-soon-tooltip { position:absolute; z-index:50; bottom:calc(100% + 10px); left:50%; padding:8px 12px; border-radius:8px; background:#242424; color:#fff; font:500 12px/1.4 Inter,"Segoe UI",Arial,sans-serif; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; transform:translate(-50%,4px); transition:opacity 140ms ease,transform 140ms ease,visibility 140ms; }
.coming-soon-tooltip::after { content:""; position:absolute; top:100%; left:50%; border:5px solid transparent; border-top-color:#242424; transform:translateX(-50%); }
.header-download-btn .coming-soon-tooltip { top:calc(100% + 10px); bottom:auto; }
.header-download-btn .coming-soon-tooltip::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#242424; }
.coming-soon-trigger:not([data-tooltip-dismissed]):is(:hover,:focus-visible,[data-tooltip-open]) .coming-soon-tooltip { visibility:visible; opacity:1; transform:translate(-50%,0); }
@media (prefers-reduced-motion:reduce) { .coming-soon-tooltip { transition:none; } }
.header-download-btn img { display:block; flex:0 0 auto; width:13px; height:13px; filter:invert(1); }
@media (max-width:480px) { .header-download-btn span.btn-label-long { display:none; } }

/* ── Nav hover pill — a soft rounded pill slides behind whichever header
   link is hovered/focused, tracking that link's own size and position
   (set inline by nav.js). Desktop only: the mobile dropdown below lists
   links in a vertical stack, where a hover affordance has no pointer to
   track. Matches https://kobra.systems/components/navigation-menu. */
.nav-pill { display:none; }
@media (min-width:901px) {
  .site-header nav { position:relative; }
  .site-header nav a { position:relative; z-index:1; }
  .nav-pill { display:block; position:absolute; z-index:0; top:0; left:0; width:0; height:0; border-radius:999px; background:rgba(17,17,17,.07); opacity:0; pointer-events:none; transition:transform 280ms cubic-bezier(.22,1,.36,1),width 280ms cubic-bezier(.22,1,.36,1),height 280ms cubic-bezier(.22,1,.36,1),opacity 160ms ease; }
  .site-header nav.has-hover .nav-pill { opacity:1; }
}

/* ── Mobile nav — the header's nav links have no other way to reach a
   visitor below 900px (the desktop stylesheets just set display:none on
   them, with no toggle to bring them back). One hamburger button + dropdown
   panel, shared by every page. */
.menu-toggle { display:none; }
@media (max-width:900px) {
  .site-header { grid-template-columns:1fr auto; }
  .menu-toggle { display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; justify-self:end; width:34px; height:34px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }
  .menu-toggle span { display:block; width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform 160ms ease,opacity 160ms ease; }
  .menu-toggle.is-active span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .menu-toggle.is-active span:nth-child(2) { opacity:0; }
  .menu-toggle.is-active span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

  .site-header nav { position:absolute; top:100%; left:0; right:0; z-index:40; display:none; flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 24px; background:#f8f7f2; box-shadow:0 20px 34px rgba(17,17,17,.14); }
  .site-header nav.is-open { display:flex; }
  .site-header nav a { padding:13px 0; border-bottom:1px solid rgba(17,17,17,.1); font-size:15px; }
  .site-header nav a:last-child { border-bottom:0; }
  .site-header > .header-downloads { display:none; }
  .site-header nav .header-downloads { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
  .site-header nav .header-download-btn { justify-content:center; width:100%; min-height:44px; padding:12px 18px; border:0; color:#fff; font-size:14px; }
  .site-header nav .header-download-btn .btn-label-long { display:inline; }
  .site-header nav .coming-soon-tooltip { top:auto; bottom:calc(100% + 10px); }
  .site-header nav .coming-soon-tooltip::after { top:100%; bottom:auto; border-top-color:#242424; border-bottom-color:transparent; }
}

/* ── Site footer — the same footer, on every page. Previously each
   page-type stylesheet defined its own (demo-page.css's dark, full-bleed
   .site-footer vs. shared.css's plainer .global-footer), which drifted out
   of sync. This is now the only footer definition on the site. */
.site-footer { position:relative; z-index:2; min-height:min(800px,92vh); padding:16px; color:#fff; background:#f8f7f2; }
.footer-panel { position:relative; display:flex; flex-direction:column; width:100%; min-height:min(768px,calc(92vh - 32px)); overflow:hidden; padding:clamp(24px,3.5vw,56px); border-radius:28px; background:#0b0b0a; box-shadow:0 -24px 70px rgba(14,13,11,.16); }
.footer-topline { display:flex; align-items:center; justify-content:space-between; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.14); }
.footer-brand { display:inline-flex; align-items:center; gap:10px; font-family:'Apfel Grotezk',Arial,sans-serif; font-size:19px; font-weight:600; letter-spacing:-.025em; }
.footer-brand img { width:27px; height:27px; object-fit:contain; filter:invert(1); }
.footer-cta { display:inline-flex; align-items:center; gap:24px; padding:11px 14px 11px 16px; border:1px solid rgba(255,255,255,.3); border-radius:10px; font-size:12px; transition:background 160ms ease,color 160ms ease; }
.footer-cta:hover { color:#0b0b0a; background:#fff; }
.footer-columns { display:grid; grid-template-columns:minmax(320px,1.7fr) minmax(130px,.55fr) minmax(160px,.65fr); gap:clamp(30px,7vw,120px); padding:clamp(34px,6vh,72px) 0 0; }
.footer-intro h2 { margin:0; max-width:600px; font-family:'Apfel Grotezk',Arial,sans-serif; font-size:clamp(34px,4vw,62px); font-weight:500; letter-spacing:-.052em; line-height:.98; }
.footer-intro p { max-width:370px; margin:20px 0 0; color:rgba(255,255,255,.5); font-size:13px; line-height:1.55; }
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-top:4px; color:rgba(255,255,255,.48); font-size:12px; }
.footer-column p { margin:0 0 8px; color:#fff; font-weight:600; }
.footer-column a { transition:color 140ms ease; }
.footer-column a:hover { color:#fff; }
/* Both used to be position:absolute, pinned to the panel's bottom edge by a
   fixed offset — independent of how tall the flowed content above them
   (topline + columns) actually was. On any viewport short enough that the
   flowed content plus the wordmark's own height exceeded the panel's
   min-height, the wordmark and copyright overlapped the columns instead of
   sitting below them. Normal flex-flow items (footer-panel is already
   display:flex;flex-direction:column) can't overlap what's before them —
   margin-top:auto still hugs the bottom when there's room to spare. */
.footer-wordmark { flex:0 0 auto; margin-top:auto; padding-top:28px; overflow:hidden; background:linear-gradient(180deg,#fff 0%,#aaa 48%,#171717 94%); background-clip:text; color:transparent; font-family:'Apfel Grotezk',Arial,sans-serif; font-size:clamp(96px,20.5vw,350px); font-weight:500; letter-spacing:-.075em; line-height:.79; text-align:center; white-space:nowrap; }
.footer-copyright { flex:0 0 auto; margin:10px 0 0; color:rgba(255,255,255,.48); font-size:10px; text-align:right; }
@media (max-width:900px) {
  .site-footer { min-height:0; padding:10px; }
  .footer-panel { min-height:0; padding:24px; }
  .footer-columns { grid-template-columns:1fr 1fr; gap:28px; }
  .footer-intro { grid-column:1/-1; }
  .footer-wordmark { font-size:clamp(72px,18vw,160px); }
}
@media (max-width:560px) {
  .footer-columns { grid-template-columns:1fr 1fr; padding-top:30px; }
  .footer-intro h2 { font-size:38px; }
  .footer-intro p { display:none; }
  .footer-wordmark { font-size:17vw; }
}