/* Tailwind WITHOUT Preflight.
   Preflight is Tailwind's base reset, and it sets `svg { display: block }`. The
   design predates Tailwind and relies on inline SVG - the hero's sparkle mark
   is an inline .88em <svg> - so Preflight forced that mark onto its own
   line and blew the <h1> out to 380px tall. The design already ships its own
   reset below (`*{box-sizing:border-box;margin:0;padding:0}`), so Preflight is
   redundant here as well as harmful.

   Importing the layers individually is the documented Tailwind v4 way to opt out
   of Preflight while keeping the theme and utilities. */
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("/assets/jarvis_frappe_cloud/fonts/inter-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Inter Variable";font-style:italic;font-display:swap;font-weight:100 900;src:url("/assets/jarvis_frappe_cloud/fonts/inter-latin-wght-italic.woff2") format("woff2")}

/* ---------------------------------------------------------------------------
   The animation system comes from the Claude Design export. The visual tokens
   now come from the Jarvis user guide so the first impression and the product
   learning experience belong to one family: warm white, precise charcoal,
   near-black actions, Inter, and one restrained violet-indigo identity ramp.

   Tailwind is imported above for stack parity with the Lens frontend, but the
   imported design is inline-styled and uses these tokens, so Tailwind emits
   almost nothing today. It is here for anything hand-written later.
   --------------------------------------------------------------------------- */

*{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--sp-4))}
  body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  :root{
    color-scheme:dark;
    --bg:#111216;--surface:#18191f;--card:#1c1d24;--bar:#0d0e12;--ink:#f1eff5;--muted:#b7b3bf;--border:#292b34;--border-strong:#3a3d48;
    --nav-bg:#0d0e12;--nav-border:#343640;--nav-shadow:0 14px 36px -26px rgba(0,0,0,.9);
    --cta:#f1eff4;--cta-fg:#17171c;--cta-hover:#ffffff;--link:#8cc8ff;
    --violet:#7545d6;--violet-light:#8ea4ff;--violet-core:#6e8bff;--violet-end:#7545d6;
    --kinetic-start:#8ea4ff;--kinetic-end:#9d70ef;
    --grad:linear-gradient(135deg,#6e8bff,#7545d6);
    --green:#4ade80;--green-ink:#7ceaa5;--amber:#fbbf24;--amber-ink:#ffd06a;--red:#f87171;
    --card-tint:rgba(255,255,255,.045);--elev:0 28px 70px -28px rgba(0,0,0,.7);
    --app-bg:#15161b;--app-sidebar:#111217;--app-soft:#22232b;--app-line:#30323c;
    --sans:'Inter Variable','Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --serif:var(--sans);
  }
  [data-theme="light"]{
    color-scheme:light;
    --bg:#f5f2ec;--surface:#ece8e0;--card:#fffdfa;--bar:#efebe4;--ink:#1b1a1f;--muted:#605d65;--border:#ddd7cd;--border-strong:#ccc5ba;
    --nav-bg:#efebe4;--nav-border:#d6d0c6;--nav-shadow:0 14px 32px -28px rgba(39,32,24,.5);
    --cta:#1c1c22;--cta-fg:#ffffff;--cta-hover:#000000;--link:#075f9f;
    --kinetic-start:#4f67d6;--kinetic-end:#7545d6;
    --green:#16a34a;--green-ink:#08783a;--amber:#d97706;--amber-ink:#914a00;--red:#cc2929;
    --card-tint:#eeeae3;--elev:0 28px 64px -28px rgba(49,42,35,.24);
    --app-bg:#fffdfa;--app-sidebar:#f0ede7;--app-soft:#f3f0ea;--app-line:#ded8cf;
  }
  body{font-family:var(--sans);font-size:15px;line-height:1.6;letter-spacing:.01em;background:var(--bg);color:var(--ink);transition:background .5s ease,color .5s ease}
  a{color:var(--violet-light);text-decoration:none}
  a:hover{color:var(--violet-core)}
  ::selection{background:var(--violet);color:#fff}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @keyframes barGrow{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
  @keyframes dashFlow{to{stroke-dashoffset:0}}
  @keyframes beat{0%,100%{transform:scale(1);box-shadow:0 18px 44px -10px rgba(117,69,214,.7)}50%{transform:scale(1.07);box-shadow:0 20px 60px -8px rgba(110,139,255,.85)}}
  @keyframes beatInline{0%,100%{transform:scale(1) translateZ(0);filter:drop-shadow(0 .06em .18em rgba(117,69,214,.5))}50%{transform:scale(1.09);filter:drop-shadow(0 .1em .3em rgba(110,139,255,.8))}}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
  @keyframes pulseRing{0%{transform:scale(.85);opacity:.75}100%{transform:scale(1.9);opacity:0}}
  @keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(117,69,214,0)}50%{box-shadow:0 0 22px 3px rgba(110,139,255,.45)}}
  [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  [data-reveal].in{opacity:1;transform:none}
  .tilt-wrap{perspective:1100px}
  .tilt{transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease}
  .job:hover{border-color:var(--violet)!important}
  .navlink{color:var(--muted);transition:color .2s ease}
  .navlink:hover{color:var(--ink)}
  .btn-primary{background:var(--cta)!important;color:var(--cta-fg)!important;box-shadow:none!important;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
  .btn-primary:hover{transform:none;background:var(--cta-hover)!important;color:var(--cta-fg)!important}
  .btn-ghost{transition:border-color .2s ease,color .2s ease,background .2s ease}
  .btn-ghost:hover{border-color:var(--violet);color:var(--ink)}
  .toggle:hover{border-color:var(--violet)}
  .skip-link{position:fixed;top:10px;left:16px;z-index:100;padding:8px 12px;border-radius:8px;background:var(--cta);color:var(--cta-fg);font-weight:600;transform:translateY(-160%)}
  .skip-link:focus{transform:translateY(0)}
  .hero-proof{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:var(--sp-6);color:var(--muted);font-size:12.5px;font-weight:500}
  .hero-proof span{display:inline-flex;align-items:center;gap:7px}
  .hero-proof span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--violet)}
  .outcome-kicker{margin-bottom:9px;color:var(--violet-light);font-size:11px;font-weight:720;letter-spacing:.09em;text-transform:uppercase}
  .outcome-title{max-width:300px;margin-inline:auto;font-size:clamp(19px,1.85vw,25px);font-weight:650;line-height:1.16;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
  .hero-secondary{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;color:var(--ink);font-size:13px;font-weight:650;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:4px}
  .hero-secondary:hover{color:var(--violet-light);text-decoration-color:currentColor}
  .footer-credit{color:var(--link)!important}
  .footer-links{flex-wrap:wrap;justify-content:flex-end}

  /* The navigation is a separate, quiet plane. It is opaque at the top so it
     does not dissolve into the hero, then gains only a little depth on scroll. */
  .site-nav{position:fixed;inset:0 0 auto;z-index:50;background:var(--nav-bg);
    border-bottom:1px solid var(--nav-border);box-shadow:none;
    transition:background-color .3s ease,border-color .3s ease,box-shadow .25s ease}
  .site-nav.is-scrolled{box-shadow:var(--nav-shadow)}
  .theme-toggle{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--border-strong);
    border-radius:10px;background:var(--card-tint);color:var(--ink);cursor:pointer;
    transition:background-color .2s ease,border-color .2s ease,color .2s ease}
  .theme-toggle:hover{background:var(--card);border-color:var(--violet)}
  .mobile-theme-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--sp-3) var(--sp-1);
    border:0;border-top:1px solid var(--border);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
  .mobile-theme-toggle>span:last-child{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--text-base)}

  /* The first viewport is one owner decision: category and outcome on the
     left, a product-faithful evidenced answer on the right. */
  .hero-section{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
  .hero-aura,.hero-vignette,.hero-fade{position:absolute;inset:0;pointer-events:none}
  .hero-aura{background:radial-gradient(circle at 51% 42%,rgba(110,139,255,.22),transparent 54%)}
  .hero-vignette{background:radial-gradient(ellipse 74% 58% at 50% 54%,var(--bg) 8%,color-mix(in srgb,var(--bg) 58%,transparent) 48%,transparent 79%)}
  .hero-fade{background:linear-gradient(0deg,var(--bg) 1%,transparent 23%)}
  [data-theme="light"] .hero-aura{background:radial-gradient(circle at 51% 42%,rgba(110,139,255,.14),transparent 56%)}
  .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.06fr;gap:var(--sp-12);align-items:center;
    min-height:100svh;padding-block:calc(var(--nav-h) + var(--sp-12)) var(--sp-12)}
  .hero-copy{text-align:left}
  .hero-stage{min-width:0;width:100%}
  .hero-category{display:inline-flex;align-items:center;gap:9px;margin-bottom:var(--sp-5);color:var(--violet-light);
    font-size:12px;font-weight:720;letter-spacing:.105em;text-transform:uppercase}
  .hero-category-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--grad);color:#fff;
    box-shadow:0 8px 20px -10px rgba(117,69,214,.8)}
  .hero-summary{max-width:530px;margin:var(--sp-5) 0 0;color:var(--muted);font-size:clamp(16px,1.18vw,18px);
    line-height:1.64;text-wrap:pretty}
  .hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-7)}
  .hero-scroll-cue{position:absolute;bottom:22px;left:50%;z-index:2;display:flex;flex-direction:column;align-items:center;
    gap:7px;color:var(--muted);transform:translateX(-50%);animation:floaty 2.8s ease-in-out infinite}

  .subscription-section{padding:clamp(44px,6vw,72px) 0;background:var(--bar);border-block:1px solid var(--nav-border)}
  .subscription-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,6vw,76px);align-items:center}
  .section-eyebrow{display:inline-block;color:var(--violet-light);font-size:11px;font-weight:720;letter-spacing:.1em;text-transform:uppercase}
  .subscription-grid h2{max-width:570px;margin-top:12px;font-size:clamp(28px,3.2vw,44px);font-weight:670;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
  .subscription-copy p{max-width:650px;color:var(--muted);font-size:clamp(15px,1.2vw,18px);line-height:1.62}
  .subscription-copy>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.subscription-copy>div span{padding:7px 10px;border:1px solid var(--border-strong);border-radius:999px;background:var(--card-tint);color:var(--ink);font-size:10.5px;font-weight:650}
  .subscription-copy small{display:block;max-width:620px;margin-top:13px;color:var(--muted);font-size:10.5px;line-height:1.5}

  .authority-section,.pricing-section,.install-section{min-height:100svh;padding:var(--section-y) 0;overflow:hidden;border-radius:0 0 30px 30px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
  .authority-section{display:flex;align-items:center;background:var(--bar);border-block:1px solid var(--nav-border)}
  .authority-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,8vw,100px);align-items:center}
  .authority-grid h2,.install-grid h2{max-width:660px;margin-top:14px;font-size:var(--display-md);font-weight:680;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
  .authority-grid p,.install-grid>div:first-child>p{max-width:630px;margin-top:20px;color:var(--muted);font-size:var(--text-lg);line-height:1.62}
  .proof-link{display:inline-flex;min-height:44px;align-items:center;margin-top:22px;color:var(--link);font-size:13px;font-weight:650;text-decoration:underline;text-underline-offset:4px}
  .authority-proof{display:grid;grid-template-columns:1fr 1fr;gap:12px}.authority-proof>div{display:flex;min-height:154px;flex-direction:column;justify-content:space-between;padding:22px;border:1px solid var(--border-strong);border-radius:17px;background:var(--card)}.authority-proof>div:first-child{grid-column:1/-1;min-height:180px;background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 16%,var(--card)),var(--card))}.authority-proof strong{font-size:clamp(34px,5vw,64px);font-weight:690;line-height:1;letter-spacing:-.05em}.authority-proof span{max-width:330px;color:var(--muted);font-size:11px;line-height:1.48}

  .pricing-section{display:flex;align-items:center;background:var(--bg);border-block:1px solid var(--border)}
  .section-heading{max-width:760px;margin-inline:auto;text-align:center}.section-heading h2{margin-top:14px;font-size:var(--display-md);font-weight:680;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}.section-heading p{max-width:660px;margin:18px auto 0;color:var(--muted);font-size:var(--text-lg);line-height:1.58}
  .pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:42px auto 0}.price-card{position:relative;min-height:300px;padding:28px;border:1px solid var(--border-strong);border-radius:20px;background:var(--card)}.price-card.is-pro{background:linear-gradient(145deg,color-mix(in srgb,var(--violet) 10%,var(--card)),var(--card) 58%)}.price-card>span{color:var(--violet-light);font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.price-card h3{margin-top:25px;font-size:clamp(27px,3vw,38px);font-weight:650;letter-spacing:-.035em}.price-card p{max-width:310px;margin-top:10px;color:var(--muted);font-size:13px;line-height:1.55}.price-placeholder{display:flex;flex-direction:column;gap:9px;margin-top:30px}.price-placeholder i{display:block;width:78%;height:9px;border-radius:99px;background:var(--app-line)}.price-placeholder i:nth-child(2){width:61%}.price-placeholder i:nth-child(3){width:70%}.pricing-note{max-width:760px;margin:20px auto 0;color:var(--muted);font-size:10.5px;line-height:1.5;text-align:center}

  .install-section{display:flex;align-items:center;background:var(--card);border-block:1px solid var(--border)}
  .install-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,8vw,96px);align-items:center}.install-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}.install-actions .btn-primary{display:inline-flex;align-items:center;min-height:50px;padding:13px 19px;border-radius:9px;font-size:14px;font-weight:650}.install-paths{display:flex;flex-direction:column;gap:14px}.install-paths article{padding:22px;border:1px solid var(--border-strong);border-radius:17px;background:var(--bg)}.install-paths article>span{color:var(--violet-light);font-size:10px;font-weight:740;letter-spacing:.09em;text-transform:uppercase}.install-paths h3{margin-top:7px;font-size:20px;letter-spacing:-.02em}.install-paths code{display:block;margin-top:11px;padding:10px 11px;overflow-x:auto;border:1px solid var(--app-line);border-radius:8px;background:var(--app-sidebar);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8.5px;white-space:nowrap}.install-paths p{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.55}

  /* The headline is two parts at deliberately different scale. The whole point
     of the cycling word is the jump from a spoken lead-in to a word that owns
     the fold; setting both at one size (as a single clamp on the <h1> does)
     flattens it into an ordinary two-line headline.

     The five owner verbs are short enough to preserve the strong scale jump
     without colliding with the animated product vignette. */
  /* Full ink, not --muted. At 25px semi-bold the muted grey (#7C7C7C in light)
     technically passes contrast but reads as a caption, so the headline's first
     half receded and the violet word had nothing to play against. Ink here sets
     up the pairing the fold actually needs: a hard dark statement, then the
     colour arriving on the word that changes. */
  .hero-lead{display:block;font-size:clamp(20px,2vw,28px);font-weight:660;
    letter-spacing:-.015em;color:var(--ink)}

  /* Each word overlays the row, and its letters are flex items, so
     justify-content is what tracks the column's text alignment - text-align
     does not position flex items. */
  .kw-word{justify-content:flex-start}
  .hero-kinetic{display:block;margin-top:.12em;font-size:clamp(38px,3.75vw,54px);
    line-height:1;letter-spacing:-.045em}

  /* Product-faithful illustrative decision workspace. */
  .decision-shell{width:100%;overflow:hidden;border:1px solid var(--border-strong);border-radius:18px;
    background:var(--app-bg);box-shadow:var(--elev);color:var(--ink)}

  /* The overview uses the decision brief as both the no-video fallback and a
     privacy-preserving poster. YouTube is not contacted until the play control
     is pressed. */
  .overview-media{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px}
  .overview-media>.decision-shell{height:100%}
  .overview-media>.decision-shell .decision-workspace,.overview-media>.decision-shell .decision-conversation{min-height:0;height:calc(100% - 53px)}
  .overview-media.has-video::after{content:"";position:absolute;inset:0;border-radius:18px;background:linear-gradient(180deg,transparent 45%,rgba(10,9,14,.58));pointer-events:none}
  .overview-play{position:absolute;right:18px;bottom:18px;z-index:2;display:flex;align-items:center;gap:11px;min-height:54px;padding:9px 14px 9px 9px;
    border:1px solid rgba(255,255,255,.24);border-radius:13px;background:rgba(17,18,22,.9);color:#fff;font:inherit;text-align:left;box-shadow:0 18px 38px -18px rgba(0,0,0,.9);cursor:pointer;backdrop-filter:blur(12px)}
  .overview-play:hover{background:#111216}
  .overview-play-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--grad);color:#fff}
  .overview-play strong,.overview-play small{display:block}.overview-play strong{font-size:12.5px}.overview-play small{margin-top:1px;color:#d7d4dc;font-size:9.5px;font-weight:500}
  .overview-media iframe{width:100%;height:100%;border:0;border-radius:18px;background:#0d0e12;box-shadow:var(--elev)}
  .decision-topbar{height:53px;display:flex;align-items:center;gap:10px;padding:0 15px;border-bottom:1px solid var(--app-line);
    background:color-mix(in srgb,var(--app-bg) 94%,var(--violet) 6%)}
  .decision-brandmark,.decision-answer-mark{display:grid;place-items:center;flex:0 0 auto;background:var(--grad);color:#fff}
  .decision-brandmark{width:29px;height:29px;border-radius:8px}
  .decision-title{display:flex;flex-direction:column;line-height:1.12}
  .decision-title strong{font-size:13.5px;font-weight:700}
  .decision-title span{color:var(--muted);font-size:10px}
  .decision-demo-label{margin-left:auto;padding:5px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);
    background:var(--card-tint);font-size:9px;font-weight:650;letter-spacing:.02em}
  .decision-workspace{display:grid;grid-template-columns:116px minmax(0,1fr);min-height:440px}
  .decision-sidebar{padding:14px 10px;border-right:1px solid var(--app-line);background:var(--app-sidebar)}
  .decision-side-item{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:7px;color:var(--muted);font-size:10px;white-space:nowrap}
  .decision-side-item span{width:13px;color:var(--muted);font-size:13px;text-align:center}
  .decision-side-item.is-active{background:var(--app-soft);color:var(--ink);font-weight:650}
  .decision-side-rule{height:1px;margin:10px 6px;background:var(--app-line)}
  .decision-side-caption{padding:0 7px 7px;color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  .decision-side-ghost{width:85%;height:7px;margin:8px;border-radius:99px;background:var(--app-line);opacity:.7}
  .decision-side-ghost.is-short{width:61%}
  .decision-conversation{position:relative;display:flex;min-width:0;min-height:440px;flex-direction:column;background:var(--app-bg)}
  .decision-chat-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:10px 15px;
    border-bottom:1px solid var(--app-line)}
  .decision-chat-heading>div{display:flex;min-width:0;flex-direction:column}
  .decision-chat-heading strong{overflow:hidden;font-size:12px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
  .decision-chat-heading span{color:var(--muted);font-size:9.5px}
  .decision-access{display:inline-flex!important;align-items:center;gap:5px;flex:0 0 auto;padding:5px 7px;border-radius:99px;
    background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green-ink)!important;font-weight:650}
  .decision-access-dot{width:5px;height:5px;border-radius:50%;background:var(--green)}
  .decision-thread{display:flex;flex:1;flex-direction:column;gap:11px;padding:16px 15px 62px;overflow:hidden}
  .decision-question{align-self:flex-end;max-width:84%;padding:10px 12px;border-radius:13px 13px 4px 13px;background:var(--grad);
    color:#fff;font-size:11px;font-weight:570;line-height:1.4;box-shadow:0 12px 24px -18px rgba(117,69,214,.9)}
  .decision-answer{display:flex;align-items:flex-start;gap:8px;max-width:100%}
  .decision-answer-mark{width:23px;height:23px;margin-top:2px;border-radius:7px}
  .decision-answer-content{min-width:0;flex:1;padding:11px 12px;border:1px solid var(--app-line);border-radius:4px 13px 13px 13px;background:var(--app-soft)}
  .decision-answer-kicker{display:block;margin-bottom:2px;color:var(--violet-light);font-size:8px;font-weight:750;letter-spacing:.095em;text-transform:uppercase}
  .decision-answer-content>strong{display:block;font-size:12px;line-height:1.35}
  .decision-answer-content>p{margin-top:4px;color:var(--muted);font-size:9.5px;line-height:1.45}
  .decision-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}
  .decision-metrics>div{min-width:0;padding:7px;border:1px solid var(--app-line);border-radius:8px;background:var(--app-bg)}
  .decision-metrics span,.decision-metrics strong{display:block}
  .decision-metrics span{overflow:hidden;color:var(--muted);font-size:7.5px;text-overflow:ellipsis;white-space:nowrap}
  .decision-metrics strong{margin-top:1px;font-size:11px;letter-spacing:-.02em}
  .decision-sources{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
  .decision-sources span{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border:1px solid var(--app-line);border-radius:6px;
    background:var(--app-bg);color:var(--muted);font-size:7.5px}
  .decision-next{display:flex;align-items:center;gap:7px;margin-top:9px;padding:8px;border:1px solid color-mix(in srgb,var(--green) 30%,var(--app-line));
    border-radius:9px;background:color-mix(in srgb,var(--green) 8%,var(--app-bg))}
  .decision-next-icon{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border-radius:7px;background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
  .decision-next>div{display:flex;min-width:0;flex:1;flex-direction:column}
  .decision-next strong{overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
  .decision-next span{color:var(--muted);font-size:7.5px}
  .decision-next b{flex:0 0 auto;padding:4px 6px;border-radius:99px;background:color-mix(in srgb,var(--amber) 14%,transparent);
    color:var(--amber-ink);font-size:7.5px}
  .decision-composer{position:absolute;right:12px;bottom:11px;left:12px;display:flex;align-items:center;justify-content:space-between;
    height:39px;padding:0 8px 0 12px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-soft);color:var(--muted);font-size:9px}
  .decision-send{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:var(--ink);color:var(--bg);font-size:14px}
  .decision-reveal{animation:decisionReveal .62s cubic-bezier(.16,1,.3,1) both}
  .decision-delay-1{animation-delay:.25s}.decision-delay-2{animation-delay:.8s}.decision-delay-3{animation-delay:1.45s}
  .decision-delay-4{animation-delay:2.05s}.decision-delay-5{animation-delay:2.65s}
  @keyframes decisionReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* The original cartoon survives as the emotional problem/relief beat rather
     than carrying the product-proof burden in the first viewport. */
  .relief-section{padding:var(--section-y) 0;border-block:1px solid var(--border);background:var(--surface)}
  .relief-grid{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:var(--sp-16)}
  .section-eyebrow{display:inline-block;color:var(--violet-light);font-size:var(--text-xs);font-weight:730;letter-spacing:.115em;text-transform:uppercase}
  .relief-grid h2{max-width:540px;margin:var(--sp-4) 0 0;font-size:var(--display-md);font-weight:670;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
  .relief-grid p{max-width:520px;margin:var(--sp-5) 0 0;color:var(--muted);font-size:var(--text-lg);line-height:1.62;text-wrap:pretty}
  .relief-creed{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:var(--sp-6);color:var(--ink);font-size:var(--text-sm);font-weight:650}
  .relief-creed span{display:inline-flex;align-items:center;gap:7px}
  .relief-creed span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--violet)}
  .relief-stage{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border:1px solid var(--border-strong);border-radius:18px;
    background:#f8f8f8;box-shadow:var(--elev)}
  [data-theme="dark"] .relief-stage{filter:brightness(.76) saturate(.88)}

  /* The cycling word's letter motion. Keyframes rather than transitions between
     two React states on purpose: a transition needs the element committed in a
     start state for one frame before flipping, and if anything re-renders in
     that gap the flip is lost and the letter is stranded invisible. An
     animation runs from the moment it is applied, so there is no gap to lose.
     `both` holds the start state through the per-letter delay and the end state
     after, which is what keeps a staggered word from flashing whole. */
  /* 1.3em, not the concept's percentage travel. A % translate is relative to
     the letter's own border box, and each letter is now padded .39em
     vertically so its background area covers the italic ascenders (the
     background-clip:text paint fix in KineticWord.tsx) - a % would silently
     scale travel with that padding. The letters' line box is 1em, so 1.3em is
     exactly the 130% the row shipped with (itself up from the concept's 115%,
     which left a letter still inside the clip at the end of its run), and em
     tracks font-size across the clamp the same way % tracked the box. */
  @keyframes kwIn{from{opacity:0;transform:translateY(1.3em) rotate(8deg)}
                  to{opacity:1;transform:translateY(0) rotate(0)}}
  /* Opacity is spent by halfway rather than over the full run. The clip is
     loose enough to hold ink, which also means a departing letter stays
     renderable long enough to climb into the lead line above it. Fading it out
     early hides it well before it gets there; the transform keeps running so
     the motion still reads as leaving rather than dissolving in place. */
  @keyframes kwOut{from{opacity:1;transform:translateY(0) rotate(0)}
                   50%{opacity:0}
                   to{opacity:0;transform:translateY(-1.3em) rotate(-6deg)}}
  @media (prefers-reduced-motion:reduce){
    .hero-kinetic *{animation:none!important}
  }

  /* The page's first breakpoint. Everything above is a fixed-width desktop
     design, so keep the query narrow in scope: below 980px the two hero
     columns cannot both hold their minimums, so stack them and re-centre the
     copy to match the rest of the page's centred sections. */
  @media (max-width:980px){
    .hero-section{min-height:auto}
    .hero-grid{grid-template-columns:1fr;gap:var(--sp-12);min-height:auto;padding-block:calc(var(--nav-h) + var(--sp-12)) var(--sp-16)}
    /* text-align rather than a centring flex column. As a flex column with
       align-items:center the <h1> shrink-wraps to its widest *static* child,
       which is the short lead line - and the cycling word's letters are
       absolutely positioned, so they contribute no intrinsic width. The row
       collapsed to ~157px and the word overflowed it by ~57px. */
    .hero-copy{text-align:center}
    .hero-cta{justify-content:center}
    .kw-word{justify-content:center}
    .hero-proof{justify-content:center}
    .hero-summary{margin-inline:auto}
    .hero-stage{max-width:720px;margin-inline:auto}
    .hero-scroll-cue{display:none}
    .relief-grid{grid-template-columns:1fr;gap:var(--sp-8)}
    .relief-grid>div:first-child{text-align:center}
    .relief-grid h2,.relief-grid p{margin-inline:auto}
    .relief-creed{justify-content:center}
    .subscription-grid{grid-template-columns:1fr;text-align:center}.subscription-grid h2,.subscription-copy p,.subscription-copy small{margin-inline:auto}.subscription-copy>div{justify-content:center}
    .authority-grid,.install-grid{grid-template-columns:1fr;gap:38px}.authority-grid>div:first-child,.install-grid>div:first-child{text-align:center}.authority-grid h2,.authority-grid p,.install-grid h2,.install-grid>div:first-child>p{margin-inline:auto}.install-actions{justify-content:center}
  }

  @media (max-width:600px){
    .hero-grid{padding-block:calc(var(--nav-h) + var(--sp-10,40px)) var(--sp-12)}
    .hero-category{font-size:10px;letter-spacing:.075em}
    .hero-kinetic{font-size:clamp(27px,8.2vw,38px)}
    .hero-summary{font-size:15.5px;line-height:1.58}
    .hero-proof{gap:7px 14px;font-size:11.5px}
    .decision-workspace{grid-template-columns:1fr;min-height:430px}
    .decision-sidebar{display:none}
    .decision-conversation{min-height:430px}
    .decision-demo-label{font-size:8px}
    .decision-thread{padding-inline:12px}
    .decision-answer-content{padding:10px}
    .relief-grid>div:first-child{text-align:left}
    .relief-grid h2,.relief-grid p{margin-inline:0}
    .relief-creed{justify-content:flex-start}
    .subscription-grid{text-align:left}.subscription-grid h2,.subscription-copy p,.subscription-copy small{margin-inline:0}.subscription-copy>div{justify-content:flex-start}
    .authority-section,.pricing-section,.install-section{min-height:auto}.authority-grid>div:first-child,.install-grid>div:first-child{text-align:left}.authority-grid h2,.authority-grid p,.install-grid h2,.install-grid>div:first-child>p{margin-inline:0}.authority-proof{grid-template-columns:1fr}.authority-proof>div:first-child{grid-column:auto}.pricing-grid{grid-template-columns:1fr}.install-actions{justify-content:flex-start}.install-paths code{font-size:7.5px}
  }

  /* Phone widths. The nav was authored desktop-only: its links and the CTA
     compete for a 430px bar, which once squeezed the conversion action into
     lines. The link cluster is marked [data-desknav]; it used to be hidden
     below 640px with nothing in its place, which left phones with no way to
     navigate. The mobile-first nav rules in the refinement layer below now
     own this: links from 768px up, a toggle + stacked menu below. */

  /* -------------------------------------------------------------------------
     design/landing-refine layer (hand-written; the export blocks above are
     untouched). One spacing scale, one type scale, one container, a working
     mobile nav, AA contrast for the shipped light theme, and focus states -
     everything inline styles cannot carry (media queries, :focus-visible).
     New rules here are mobile-first: base = narrow, min-width up.
     ------------------------------------------------------------------------- */
  :root{
    /* Spacing scale: 4/8/12/16/24/32/48/64/96. */
    --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:28px;
    --sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;--nav-h:63px;
    /* One horizontal gutter for every section: 16px at 320, 32px from ~760px. */
    --gutter:clamp(16px,4.2vw,32px);
    /* Vertical section rhythm (was 100/110/130px ad hoc). */
    --section-y:clamp(var(--sp-16),10vw,var(--sp-24));
    /* Type scale. The half-pixel sizes inside the mock-UI vignettes are left
       as authored; these tokens carry the page-level hierarchy. */
    --text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:16px;
    --text-lg:clamp(16px,1.1vw + 11px,18px); /* section body: 16 on phones, 18 from ~640px */
    --text-xl:21px;
    --display-sm:clamp(30px,3.6vw,48px);
    --display-md:clamp(32px,4.4vw,54px);
    --display-lg:clamp(38px,5.4vw,68px);
    --display-stat:clamp(34px,4vw,50px);
  }
  [data-theme="light"]{
    /* WCAG AA repairs for the shipped light theme, using existing ramp stops
       only: #9E8BFA text on #F4F4F5 measures 2.5:1, --violet-end (#6a56e8)
       4.6:1. --muted #7C7C7C measured 3.8:1 on the page bg; #6F6F6F reaches
       4.6:1 there and 5.0:1 on white cards. Dark-theme tokens untouched. */
    --violet-light:#7545d6;
    --violet-core:#6e8bff;
    --muted:#626262;
  }

  .container{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}

  /* Sticky panels move with the viewport after their normal-flow position has
     passed. Keep fragment IDs on zero-height sentinels immediately before the
     panels so repeated nav clicks always resolve to a stable document offset. */
  .section-anchor{display:block;height:0;pointer-events:none}

  /* Keyboard focus. Inline styles cannot express :focus-visible. */
  a:focus-visible,button:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

  /* 44px hit areas for bare text links without moving them: the negative
     margins collapse the padded box back to the glyph box, so nav/footer
     spacing is unchanged while the touch target grows. */
  .navlink{display:inline-flex;align-items:center;padding:12px 4px;margin:-12px -4px}

  /* Nav: one row everywhere. Below 768px the link cluster is replaced by a
     toggle + stacked menu (state lives in LandingMarkup). The tight base gap
     is what lets logo + CTA + toggle fit a 320px bar. */
  .nav-row{display:flex;align-items:center;gap:var(--sp-2)}
  nav .btn-primary{white-space:nowrap}
  .nav-cta-short{display:none}
  [data-desknav]{display:none}
  /* margin-block keeps the 44px toggle from growing the 62px bar. */
  .nav-toggle{display:grid;place-items:center;width:44px;height:44px;margin-block:-5px;
    border:1px solid var(--border);border-radius:11px;background:var(--card-tint);
    color:var(--ink);cursor:pointer}
  .nav-menu{display:flex;flex-direction:column;padding:var(--sp-2) var(--gutter) var(--sp-3);
    border-top:1px solid var(--border)}
  .nav-menu .navlink{margin:0;padding:var(--sp-3) var(--sp-1);font-size:var(--text-md)}
  @media (min-width:768px){
    .nav-row{gap:20px}
    [data-desknav]{display:flex}
    .nav-toggle,.nav-menu{display:none}
  }
  @media (max-width:359px){
    nav .btn-primary{padding-inline:12px!important}
    .nav-cta-long{display:none}.nav-cta-short{display:inline}
  }

  /* Stat band: single column on phones; the middle stat's vertical dividers
     become horizontal rules when stacked. */
  .stat-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-8);padding-block:var(--sp-12)}
  .stat-divider{border-block:1px solid var(--border);padding-block:var(--sp-6)}
  @media (min-width:768px){
    .stat-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
    .stat-divider{border-block:none;border-inline:1px solid var(--border);padding-block:0}
  }

  /* Feature slides: below 768px each slide is a single readable column and
     the decorative vignette is dropped - text + vignette stacked overflow the
     100vh sticky clip on phones, and the vignettes restate the copy rather
     than add to it. Display lives here (not inline) so the collapse can win. */
  .fgrid{display:grid;grid-template-columns:1fr;align-items:center}
  .fvisual,.fvisual-stack,.journey-visual{display:none}
  @media (min-width:768px){
    .fgrid{grid-template-columns:1.05fr .95fr;gap:var(--sp-16)}
    /* Historical mockups stay in source for design provenance, but the visible
       story now uses one consistent set of real-product-inspired screens. */
    .fvisual,.fvisual-stack{display:none}
    .journey-visual{display:block}
  }

  /* Product journey: distilled from the real Chat, File Box, Approval Board,
     Skills, Macros, and Learning screens rather than an invented AI dashboard. */
  .journey-visual{justify-self:center;width:100%;max-width:510px;overflow:hidden;border:1px solid var(--border-strong);border-radius:19px;
    background:var(--app-bg);box-shadow:var(--elev);color:var(--ink);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .journey-windowbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:49px;padding:9px 13px;border-bottom:1px solid var(--app-line);background:var(--app-bg)}
  .journey-windowbar>div{display:flex;align-items:center;gap:7px}.journey-windowbar strong{font-size:11px}.journey-windowbar>span{color:var(--muted);font-size:10px;font-weight:620}.journey-windowbar>i{justify-self:end;width:24px;height:24px;border:1px solid var(--app-line);border-radius:7px}
  .journey-sparkle{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:var(--grad);color:#fff;flex:0 0 auto}
  .journey-app{display:grid;grid-template-columns:96px 1fr;min-height:354px}
  .journey-app aside{display:flex;flex-direction:column;gap:5px;padding:12px 8px;border-right:1px solid var(--app-line);background:var(--app-sidebar)}
  .journey-app aside span{display:flex;align-items:center;gap:7px;padding:7px;border-radius:7px;color:var(--muted);font-size:9px}.journey-app aside span.is-active{background:var(--app-soft);color:var(--ink)}.journey-app aside b{font-weight:570}
  .journey-main{min-width:0;padding:17px;background:var(--app-bg)}
  .journey-status{display:inline-flex!important;align-items:center;width:max-content;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--amber) 13%,transparent);color:var(--amber-ink)!important;font-size:8.5px!important;font-weight:700}
  .journey-chat{display:flex;height:100%;min-height:320px;flex-direction:column;align-items:center}.journey-chat-empty{display:flex;flex-direction:column;align-items:center;margin:auto;color:var(--ink)}.journey-chat-empty .journey-sparkle{width:38px;height:38px;border-radius:11px}.journey-chat-empty strong{margin-top:10px;font-size:18px}.journey-chat-empty span{color:var(--muted);font-size:9px}.journey-prompt{align-self:flex-end;max-width:87%;margin-bottom:12px;padding:10px 12px;border-radius:12px 12px 4px;background:var(--grad);color:#fff;font-size:10px;font-weight:600}.journey-composer{display:flex;width:100%;justify-content:space-between;padding:11px 12px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-soft);color:var(--muted);font-size:9px}.journey-composer span{color:var(--ink);font-weight:650}
  .journey-answer{padding:4px}.journey-answer-head{display:flex;gap:10px;padding-bottom:15px;border-bottom:1px solid var(--app-line)}.journey-answer-head>div{display:flex;flex-direction:column}.journey-answer-head strong{font-size:13px}.journey-answer-head span{margin-top:2px;color:var(--muted);font-size:9px}.journey-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}.journey-metrics>div{padding:11px 9px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-soft)}.journey-metrics span,.journey-metrics strong{display:block}.journey-metrics span{color:var(--muted);font-size:8px}.journey-metrics strong{margin-top:4px;font-size:14px}.journey-sources{display:flex;flex-direction:column;gap:7px;margin-top:15px}.journey-source{padding:9px 10px;border:1px solid var(--app-line);border-radius:8px;color:var(--link);font-size:9px;font-weight:610}
  .journey-filebox{display:flex;flex-direction:column;gap:12px}.journey-drop{display:flex;flex-direction:column;align-items:center;padding:26px 12px;border:1px dashed var(--border-strong);border-radius:12px;background:var(--app-soft)}.journey-drop>span{font-size:24px}.journey-drop strong{margin-top:5px;font-size:11px}.journey-drop small{color:var(--muted);font-size:8px}.journey-file-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.journey-file-grid>div{padding:10px;border:1px solid var(--app-line);border-radius:9px}.journey-file-grid span,.journey-file-grid strong{display:block}.journey-file-grid span{color:var(--muted);font-size:8px}.journey-file-grid strong{margin-top:3px;font-size:10px}.journey-warning{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid color-mix(in srgb,var(--amber) 38%,var(--app-line));border-radius:10px;background:color-mix(in srgb,var(--amber) 8%,var(--app-bg))}.journey-warning>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber-ink);font-weight:800}.journey-warning div{display:flex;flex-direction:column}.journey-warning strong{font-size:9.5px}.journey-warning small{color:var(--muted);font-size:8px}
  .journey-approval{display:grid;grid-template-columns:108px 1fr;min-height:320px;border:1px solid var(--app-line);border-radius:11px;overflow:hidden}.journey-approval-list{display:flex;flex-direction:column;gap:6px;padding:13px 10px;border-right:1px solid var(--app-line);background:var(--app-sidebar)}.journey-approval-list span{color:var(--amber-ink);font-size:8px}.journey-approval-list strong{font-size:9.5px;line-height:1.35}.journey-approval-list small{color:var(--muted);font-size:7.5px;line-height:1.4}.journey-approval-detail{display:flex;flex-direction:column;justify-content:center;padding:17px}.journey-approval-detail h3{margin-top:13px;font-size:15px}.journey-approval-detail p{margin-top:8px;color:var(--muted);font-size:9px;line-height:1.55}.journey-approval-detail>div{display:flex;gap:7px;margin-top:16px}.journey-approval-detail>div span{padding:8px 9px;border:1px solid var(--app-line);border-radius:7px;font-size:8.5px;font-weight:650}.journey-approval-detail>div span:first-child{background:var(--cta);color:var(--cta-fg)}
  .journey-tabs{display:flex;gap:15px;padding-bottom:11px;border-bottom:1px solid var(--app-line);color:var(--muted);font-size:8.5px}.journey-tabs strong{color:var(--ink)}.journey-form{display:flex;flex-direction:column;gap:12px;margin-top:18px}.journey-form label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:8px}.journey-form label strong{padding:10px;border:1px solid var(--app-line);border-radius:8px;background:var(--app-soft);color:var(--ink);font-size:9.5px;font-weight:570;line-height:1.45}.journey-form label:nth-child(2) strong{min-height:70px}.journey-scope{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:8.5px}
  .journey-macro-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding-bottom:13px;border-bottom:1px solid var(--app-line)}.journey-macro-head>div{display:flex;flex-direction:column}.journey-macro-head strong{font-size:12px}.journey-macro-head span{color:var(--muted);font-size:8px}.journey-macro ol{display:flex;flex-direction:column;gap:8px;margin-top:14px;list-style:none}.journey-macro li{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--app-line);border-radius:9px}.journey-macro li>span{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green-ink);font-size:8px;font-weight:800}.journey-macro li>div{display:flex;flex-direction:column}.journey-macro li strong{font-size:9.5px}.journey-macro li small{color:var(--muted);font-size:8px}.journey-macro li.is-waiting{border-color:color-mix(in srgb,var(--amber) 40%,var(--app-line))}.journey-macro li.is-waiting>span{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber-ink)}
  .journey-team{display:flex;min-height:320px;flex-direction:column;justify-content:center}.journey-creed{display:flex;align-items:center;gap:9px;padding-bottom:15px;border-bottom:1px solid var(--app-line)}.journey-creed strong{font-size:12px}.journey-creed>span:last-child{margin-left:auto;color:var(--muted);font-size:8.5px}.journey-ritual{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:22px}.journey-ritual>div{display:flex;flex-direction:column;align-items:center;gap:5px}.journey-ritual>div span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;font-size:9px;font-weight:800}.journey-ritual strong{font-size:8.5px}.journey-ritual i{color:var(--muted);font-style:normal}.journey-invitations{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}.journey-invitations>div{padding:12px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-soft)}.journey-invitations span,.journey-invitations strong{display:block}.journey-invitations span{color:var(--muted);font-size:8px}.journey-invitations strong{margin-top:2px;font-size:10px}

  @media (max-width:600px){.overview-play{right:10px;bottom:10px}.overview-play small{display:none}.overview-play{min-height:48px}.overview-play-icon{width:32px;height:32px}}

  /* Trust cards: one column on phones, three up. Grid stretch keeps the three
     cards equal height in a row. */
  .cards-3{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
  @media (min-width:768px){.cards-3{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}}

  /* Evolution: the horizontal line/fill/walker only make sense as a row, so
     they exist from 768px up; below that the four eras stack flat and the
     JS-applied perspective poses are neutralised (!important because the
     march writes inline styles). */
  .evo-grid{position:relative;display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
  .evo-line,[data-evo-fill],[data-evo-walker]{display:none}
  @media (min-width:768px){
    .evo-grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
    .evo-line,[data-evo-fill],[data-evo-walker]{display:block}
  }
  @media (max-width:767px){
    [data-evo]{perspective:none!important}
    .evo-era{transform:none!important;opacity:1!important;filter:none!important}
    .footer-links{width:100%;justify-content:flex-start;gap:var(--sp-4)!important}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }

  /* Belt and braces against sideways scroll from 320px up. clip, not hidden:
     clip creates no scroll container, so position:sticky keeps working. */
  html,body{overflow-x:clip}

  .footer-cookie-settings{border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer}
  .footer-cookie-settings:hover{color:var(--ink)}

  /* Optional analytics is inert until a valid public GA4 ID is configured and
     the visitor explicitly accepts it. The same low-glare surface works in
     both themes and does not block access to the page. */
  .cookie-consent{position:fixed;right:18px;bottom:18px;left:18px;z-index:90;display:flex;align-items:center;justify-content:space-between;
    gap:var(--sp-6);max-width:1080px;margin-inline:auto;padding:16px 18px;border:1px solid var(--border-strong);border-radius:14px;
    background:var(--card);color:var(--ink);box-shadow:0 26px 70px -28px rgba(0,0,0,.6)}
  .cookie-consent[hidden]{display:none}
  .cookie-consent-copy{min-width:0}
  .cookie-consent-copy strong{display:block;font-size:14px}
  .cookie-consent-copy p{max-width:72ch;margin-top:3px;color:var(--muted);font-size:12.5px;line-height:1.5}
  .cookie-consent-copy a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
  .cookie-consent-copy>span{display:block;margin-top:4px;color:var(--muted);font-size:10.5px}
  .cookie-consent-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
  .cookie-consent-actions button{min-height:40px;padding:9px 13px;border-radius:8px;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
  .cookie-consent-actions .btn-ghost{border:1px solid var(--border-strong);background:var(--card-tint);color:var(--ink)}
  .cookie-consent-close{border:0;background:transparent;color:var(--muted)}

  /* Privacy surfaces deliberately reuse the landing tokens without loading the
     animation-heavy page. */
  .policy-page{min-height:100vh;background:var(--bg);color:var(--ink)}
  .policy-header,.policy-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);max-width:980px;margin-inline:auto;padding:18px var(--gutter)}
  .policy-header{border-bottom:1px solid var(--border)}
  .policy-header>a:last-child,.policy-footer a,.policy-footer button{color:var(--muted);font-size:13px}
  .policy-header>a:last-child:hover,.policy-footer a:hover,.policy-footer button:hover{color:var(--ink)}
  .policy-brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:17px;font-weight:700}
  .policy-brand>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--grad);color:#fff}
  .policy-main{max-width:760px;margin-inline:auto;padding:clamp(56px,8vw,96px) var(--gutter)}
  .policy-main h1{margin-top:var(--sp-3);font-size:clamp(42px,7vw,68px);line-height:1;letter-spacing:-.045em}
  .policy-intro{max-width:650px;margin-top:var(--sp-5);color:var(--muted);font-size:18px;line-height:1.6}
  .policy-date{margin-top:var(--sp-4);color:var(--muted);font-size:12px}
  .policy-content{margin-top:var(--sp-12)}
  .policy-content section+section{margin-top:var(--sp-10,40px);padding-top:var(--sp-10,40px);border-top:1px solid var(--border)}
  .policy-content h2{font-size:24px;letter-spacing:-.025em}
  .policy-content p{margin-top:var(--sp-3);color:var(--muted);font-size:15px;line-height:1.72}
  .policy-content strong{color:var(--ink)}
  .policy-content a{color:var(--link)}
  .policy-content code{padding:2px 5px;border:1px solid var(--border);border-radius:5px;background:var(--card-tint);color:var(--ink);font-size:.9em}
  .policy-table-wrap{overflow-x:auto;margin-top:var(--sp-5);border:1px solid var(--border);border-radius:10px}
  .policy-content table{width:100%;border-collapse:collapse;background:var(--card)}
  .policy-content th,.policy-content td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:13px}
  .policy-content th{color:var(--ink);font-weight:700}
  .policy-content td{color:var(--muted)}
  .policy-content tr:last-child td{border-bottom:0}
  .policy-footer{flex-wrap:wrap;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
  .policy-footer button{border:0;background:transparent;font:inherit;cursor:pointer}

  @media (max-width:720px){
    .cookie-consent{align-items:stretch;flex-direction:column;gap:12px}
    .cookie-consent-actions{justify-content:stretch;flex-wrap:wrap}
    .cookie-consent-actions button{flex:1}
  }

  /* Frappe port: operational content is server-rendered from Jarvis Marketing
     Settings while the design and interaction language remains unchanged. */
  .nav-menu[hidden],.footer-cookie-settings[hidden]{display:none!important}
  .kinetic-vanilla{display:block;min-height:1.18em;background:linear-gradient(180deg,var(--kinetic-start),var(--kinetic-end));
    background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .kinetic-vanilla.is-leaving{animation:kwOut .44s cubic-bezier(.6,0,.8,.2) both}
  .kinetic-vanilla.is-entering{animation:kwIn .54s cubic-bezier(.16,.9,.3,1) both}
  .price-card h3 small{display:inline;margin-left:7px;color:var(--muted);font-size:12px;font-weight:550;letter-spacing:0}
  .price-features{display:flex;flex-direction:column;gap:9px;margin-top:24px;list-style:none}
  .price-features li{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:12px;line-height:1.45}
  .price-features li::before{content:"✓";color:var(--violet-light);font-weight:800}
  .plan-cta{display:inline-flex;min-height:42px;align-items:center;margin-top:24px;padding:10px 14px;border:1px solid var(--border-strong);
    border-radius:8px;color:var(--ink);font-size:12px;font-weight:680}
  .plan-cta:hover{border-color:var(--violet);color:var(--violet-light)}