/* =====================================================================
   Lumora design system. Shared by every page on itslumora.com.
   Dark is the default. Light mode is its own palette. The "stage"
   sections (.dark) always stay dark, the way Apple drops black product
   stages into light pages.
   ===================================================================== */
:root{
  --bg:#000; --bg-2:#0b0a09; --tile:#121110; --tile-2:#1a1816;
  --text:#f5f5f7; --muted:#a8a29a; --faint:#8a847b;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --accent:#f5a04a; --accent-2:#ffc987; --blue:#6d93ff;
  --ok:#5fd394; --crit:#ff7f70;
  --field:#1c1a18;
  --grad:linear-gradient(92deg,#ffd9a8 0%,#f7a14c 45%,#e8661e 100%);
  --btn:#f59a3f; --btn-hover:#ffad5c; --on-btn:#1b1006;
  --nav:rgba(12,11,10,.74);
  --radius:28px; --radius-s:18px;
  --maxw:1120px; --gutter:clamp(18px,4vw,28px);
  --ease:cubic-bezier(.22,.8,.2,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f6f5f3; --bg-2:#efede9; --tile:#fff; --tile-2:#fbfaf8;
    --text:#1d1d1f; --muted:#5f5b55; --faint:#6e6860;
    --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.14);
    --accent:#b0580c; --accent-2:#8f4508; --blue:#2458e0;
    --ok:#1b7a44; --crit:#b3261e;
    --field:#f2f0ec;
    --grad:linear-gradient(92deg,#d9731f 0%,#b4520c 55%,#8f3d06 100%);
    --nav:rgba(250,249,247,.78);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f6f5f3; --bg-2:#efede9; --tile:#fff; --tile-2:#fbfaf8;
  --text:#1d1d1f; --muted:#5f5b55; --faint:#6e6860;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.14);
  --accent:#b0580c; --accent-2:#8f4508; --blue:#2458e0;
  --ok:#1b7a44; --crit:#b3261e;
  --field:#f2f0ec;
  --grad:linear-gradient(92deg,#d9731f 0%,#b4520c 55%,#8f3d06 100%);
  --nav:rgba(250,249,247,.78);
  color-scheme:light;
}
.dark{
  --bg:#000; --bg-2:#0b0a09; --tile:#121110; --tile-2:#1a1816;
  --text:#f5f5f7; --muted:#a8a29a; --faint:#8a847b;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --accent:#f5a04a; --accent-2:#ffc987; --blue:#6d93ff;
  --ok:#5fd394; --crit:#ff7f70; --field:#1c1a18;
  --grad:linear-gradient(92deg,#ffd9a8 0%,#f7a14c 45%,#e8661e 100%);
  color-scheme:dark; background:#000; color:var(--text);
}
/* light-mode tiles get a soft shadow instead of a hairline */
:root[data-theme="light"] .tile:not(.dark .tile){box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px -20px rgba(60,40,10,.2)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .tile:not(.dark .tile){box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px -20px rgba(60,40,10,.2)}}

/* =====================================================================
   Base
   ===================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:68px}
body{
  background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:17px;line-height:1.5;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
p{text-wrap:pretty}
sup{font-size:.55em;line-height:0;vertical-align:super;color:var(--faint);font-weight:500;letter-spacing:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:780px}
.i{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
::selection{background:rgba(245,154,63,.35)}
.skip-link{position:absolute;left:-9999px;z-index:300;background:var(--btn);color:var(--on-btn);font-weight:600;padding:10px 18px;border-radius:999px;font-size:.9rem}
.skip-link:focus{position:fixed;left:14px;top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}

/* Buttons: one filled pill, one text link with a chevron */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;
  background:var(--btn);color:var(--on-btn);font-size:1rem;font-weight:600;white-space:nowrap;text-decoration:none;
  transition:background-color .25s ease,transform .25s var(--ease),box-shadow .25s ease;
}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn-sm{min-height:30px;padding:0 14px;font-size:.78rem}
.btn-quiet{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-quiet:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.more{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:500;font-size:1rem}
.more .i{width:.8em;height:.8em;stroke-width:2.4;transition:transform .3s var(--ease)}
.more:hover{text-decoration:underline;text-underline-offset:3px}
.more:hover .i,a:hover .more .i{transform:translateX(2px)}

/* =====================================================================
   Global nav (+ Apple-style local nav on product pages)
   ===================================================================== */
.gnav{position:fixed;inset:0 0 auto;z-index:200;height:52px;background:var(--nav);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);transition:background-color .3s ease}
.has-local .gnav{position:relative}
.gnav-in{max-width:1080px;height:100%;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:8px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.2em;font-size:.78rem}
.brand svg{width:20px;height:20px}
.gnav-links{display:flex;align-items:center;gap:2px;margin:0 auto}
.gnav-links a{padding:6px 11px;font-size:.78rem;color:color-mix(in srgb,var(--text) 78%,transparent);border-radius:8px;transition:color .2s ease;white-space:nowrap}
.gnav-links a:hover,.gnav-links a.is-active,.gnav-links a[aria-current="page"]{color:var(--text)}
.gnav-actions{display:flex;align-items:center;gap:6px}
.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:50%;border:0;background:transparent;cursor:pointer;color:color-mix(in srgb,var(--text) 85%,transparent);transition:background-color .2s ease,color .2s ease}
.icon-btn:hover{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.icon-btn .i{width:17px;height:17px}
.menu-btn{display:none}
.gnav .gnav-cta-m{display:none}
.menu-btn svg{overflow:visible}
.menu-btn line{transition:transform .35s var(--ease);transform-box:view-box;transform-origin:12px 12px}
.gnav.open .menu-btn .l1{transform:translateY(3px) rotate(45deg)}
.gnav.open .menu-btn .l2{transform:translateY(-3px) rotate(-45deg)}
@media (max-width:900px){
  .gnav-links{
    position:fixed;inset:52px 0 0;z-index:210;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:18px 34px;background:var(--bg);overflow-y:auto;
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
  }
  .has-local .gnav-links{position:fixed;top:52px}
  /* a backdrop-filter would trap the fixed menu panel inside the 52px bar, so drop it while open */
  .gnav.open{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .gnav.open .gnav-links{opacity:1;visibility:visible;transition:opacity .3s ease}
  .gnav-links a{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;padding:9px 0;color:var(--text);
    opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .5s var(--ease)}
  .gnav.open .gnav-links a{opacity:1;transform:none}
  .gnav.open .gnav-links a:nth-child(2){transition-delay:.03s}
  .gnav.open .gnav-links a:nth-child(3){transition-delay:.06s}
  .gnav.open .gnav-links a:nth-child(4){transition-delay:.09s}
  .gnav.open .gnav-links a:nth-child(5){transition-delay:.12s}
  .gnav.open .gnav-links a:nth-child(6){transition-delay:.15s}
  .gnav.open .gnav-links a:nth-child(7){transition-delay:.18s}
  .gnav.open .gnav-links a:nth-child(8){transition-delay:.21s}
  .gnav .gnav-cta-m{display:inline-flex;align-self:flex-start;margin-top:18px;font-size:1rem;letter-spacing:-.01em;padding:0 22px;border-radius:999px;color:var(--on-btn)}
  .gnav-actions{margin-left:auto}
  .gnav-actions .btn{display:none}
  .menu-btn{display:inline-grid}
}
.has-local.gnav-open .gnav{position:fixed;top:0}

.lnav{position:sticky;top:0;z-index:150;height:52px;background:var(--nav);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.lnav-in{max-width:1080px;height:100%;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:22px}
.lnav-title{margin-right:auto;font-size:1.15rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.lnav-links{display:flex;gap:20px}
.lnav-links a{font-size:.78rem;color:color-mix(in srgb,var(--text) 72%,transparent);transition:color .2s ease;white-space:nowrap}
.lnav-links a:hover,.lnav-links a.is-active{color:var(--text)}
@media (max-width:760px){.lnav-links{display:none}.lnav-title{font-size:1.02rem}}

/* =====================================================================
   Stages: homepage story hero + product heroes, both WebGL particles
   ===================================================================== */
.pcanvas{position:absolute;inset:0;width:100%;height:100%}
.stage-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60vmax 40vmax at 50% 80%,rgba(232,102,30,.16),transparent 70%),
    radial-gradient(40vmax 30vmax at 50% 18%,rgba(255,170,90,.05),transparent 70%)}
.stage-fallback{display:none}
.no-gl .stage-fallback{display:block;position:absolute;left:50%;top:70%;width:min(70vw,520px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,190,120,.35),rgba(232,102,30,.12) 40%,transparent 70%);filter:blur(6px)}
.pause{position:absolute;right:clamp(16px,3vw,36px);bottom:22px;z-index:3;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#f5f5f7;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .2s ease}
.pause:hover{background:rgba(255,255,255,.18)}
.pause svg{width:13px;height:13px;fill:currentColor}
.pause .play{display:none}
.motion-paused .pause .play{display:block}
.motion-paused .pause .pz{display:none}
.motion-paused .dev .browser,.motion-paused .dev .phone,.motion-paused .ribbon-box .chip,.motion-paused .float{animation-play-state:paused}
.scrim{position:relative}
.scrim::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(1000px,130vw);height:150%;translate:-50% -50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,.3) 60%,transparent);pointer-events:none}

/* homepage story stage */
.stage{position:relative;height:420vh}
.stage-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-copy{position:absolute;left:0;right:0;top:calc(52px + clamp(36px,8vh,100px));text-align:center;padding:0 var(--gutter);z-index:2}
.kicker{font-size:clamp(.95rem,.9rem + .3vw,1.2rem);font-weight:600;color:var(--accent-2);margin-bottom:14px;letter-spacing:-.01em}
.hero-copy h1,.phero h1{font-size:clamp(2.6rem,1.2rem + 5.4vw,5.3rem);letter-spacing:-.045em;line-height:1.02;font-weight:700;max-width:14ch;margin:0 auto}
.hero-copy h1 span{display:block}
.hero-copy .lead,.phero .lead{max-width:600px;margin:22px auto 0;font-size:clamp(1.05rem,.98rem + .35vw,1.3rem);color:var(--muted);line-height:1.45;font-weight:500}
.cta-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 26px;margin-top:30px}
.cta-row .more{font-size:1.06rem}
.cta-note{margin-top:16px;font-size:.88rem;color:var(--faint)}
.caps{position:absolute;left:0;right:0;bottom:clamp(64px,11vh,120px);z-index:2;pointer-events:none}
.cap{position:absolute;left:0;right:0;bottom:0;text-align:center;padding:0 var(--gutter);opacity:0}
.cap .k{font-size:.95rem;font-weight:600;color:var(--accent-2);margin-bottom:8px}
.cap h2{font-size:clamp(2rem,1.2rem + 3.2vw,3.6rem);letter-spacing:-.04em;max-width:18ch;margin:0 auto}
.cap p{margin:12px auto 0;max-width:520px;color:var(--muted);font-size:clamp(1rem,.95rem + .25vw,1.18rem);font-weight:500}
.caps .cap::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(900px,120vw);height:170%;translate:-50% -50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);pointer-events:none}
.scroll-cue{position:absolute;left:50%;bottom:24px;translate:-50% 0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.scroll-cue i{position:relative;width:1px;height:36px;background:var(--line-2);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:linear-gradient(transparent,var(--accent-2));animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:100%}}
.stage-dots{position:absolute;right:clamp(16px,3vw,36px);top:50%;translate:0 -50%;z-index:3;display:flex;flex-direction:column;gap:8px}
.stage-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.28);transition:height .5s var(--ease),background-color .3s ease}
.stage-dots i.on{height:22px;background:#fff}
@media (max-width:833px){.stage-dots{display:none}.stage{height:360vh}}

/* product-page hero: particles assemble into the page's shape */
.phero{position:relative;overflow:hidden;min-height:clamp(620px,92vh,900px);display:flex;flex-direction:column;align-items:center;
  padding:clamp(56px,10vh,120px) 0 0;text-align:center;isolation:isolate}
.phero > .wrap{position:relative;z-index:2}
.phero h1{max-width:16ch}
.phero.shape-top{justify-content:flex-end;padding:0 0 clamp(80px,12vh,130px)}
.phero .pause{z-index:4}
.phero.compact{min-height:0;padding:clamp(80px,12vw,140px) 0 clamp(64px,8vw,100px)}
.phero.compact h1{font-size:clamp(2.4rem,1.3rem + 4vw,4.4rem);max-width:20ch}
.phero.compact .ribbons-bg{position:absolute;left:0;right:0;bottom:-42%;height:84%;opacity:.6;pointer-events:none}
.phero.compact .ribbons-bg canvas{position:absolute;inset:0;width:100%;height:100%}
.byline{margin-top:18px;color:var(--muted);font-size:.95rem}
.byline a{color:var(--text);border-bottom:1px solid var(--line-2)}
.byline a:hover{color:var(--accent-2)}
.crumb{display:inline-flex;align-items:center;gap:6px;color:var(--accent-2);font-weight:600}
.crumb:hover{text-decoration:underline;text-underline-offset:3px}

/* entrance for hero copy */
.js:not(.rm) .hero-copy > *,.js:not(.rm) .phero-copy > *{animation:enter 1.2s var(--ease) both}
.js:not(.rm) .hero-copy > *:nth-child(2),.js:not(.rm) .phero-copy > *:nth-child(2){animation-delay:.08s}
.js:not(.rm) .hero-copy > *:nth-child(3),.js:not(.rm) .phero-copy > *:nth-child(3){animation-delay:.16s}
.js:not(.rm) .hero-copy > *:nth-child(4),.js:not(.rm) .phero-copy > *:nth-child(4){animation-delay:.24s}
.js:not(.rm) .phero-copy > *:nth-child(5){animation-delay:.32s}
@keyframes enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* reduced motion: no pinned scene, captions become a row */
.rm .stage{height:auto}
.rm .stage-pin{position:relative}
.rm .caps{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:40px var(--gutter) 90px;max-width:var(--maxw);margin:0 auto}
.rm .caps .cap::before{display:none}
.rm .cap{position:static;opacity:1!important;transform:none!important;visibility:visible!important;text-align:left;padding:0}
.rm .cap h2{font-size:1.6rem;margin:0}
.rm .scroll-cue,.rm .stage-dots,.rm .pause{display:none}
html:not(.js) .stage{height:auto}
html:not(.js) .caps,html:not(.js) .scroll-cue,html:not(.js) .stage-dots,html:not(.js) .pause{display:none}
@media (max-width:833px){.rm .caps{grid-template-columns:1fr}}

/* =====================================================================
   Sections
   ===================================================================== */
.section{padding:clamp(96px,12vw,160px) 0}
.section.tight{padding-top:0}
.head{text-align:center;max-width:840px;margin:0 auto clamp(44px,6vw,72px)}
.head .k,.k-label{font-size:clamp(1rem,.95rem + .3vw,1.25rem);font-weight:600;color:var(--accent);margin-bottom:10px}
.head h2{font-size:clamp(2.3rem,1.4rem + 3.6vw,4rem);letter-spacing:-.04em}
.head p{margin:18px auto 0;max-width:640px;color:var(--muted);font-size:clamp(1.05rem,1rem + .25vw,1.25rem);font-weight:500}
.band{background:var(--bg-2)}
.js:not(.rm) .rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js:not(.rm) .rv.in{opacity:1;transform:none}

.tile{position:relative;overflow:hidden;background:var(--tile);border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line)}

/* feature tiles */
.feats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feats-grid.c2{grid-template-columns:repeat(2,1fr)}
.feats-grid.c4{grid-template-columns:repeat(4,1fr)}
.ft{padding:clamp(26px,3vw,36px);display:flex;flex-direction:column}
.ft .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ft .ic .i{width:22px;height:22px;stroke-width:1.7}
.ft h3{font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);letter-spacing:-.03em;margin-bottom:10px}
.ft p{color:var(--muted);font-size:1rem}
a.ft{transition:transform .6s var(--ease)}
a.ft:hover{transform:scale(1.012)}
a.ft .more{margin-top:auto;padding-top:18px}
@media (max-width:980px){.feats-grid,.feats-grid.c4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.feats-grid,.feats-grid.c2,.feats-grid.c4{grid-template-columns:1fr}}

/* big numbers */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.nums.c3{grid-template-columns:repeat(3,1fr)}
.num b{display:inline-block;font-size:clamp(2.6rem,1.6rem + 3vw,4.2rem);font-weight:700;letter-spacing:-.05em;line-height:1.05;font-variant-numeric:tabular-nums}
.num > span{display:block;margin-top:12px;color:var(--muted);font-size:1rem;font-weight:500;max-width:24ch;margin-inline:auto}
@media (max-width:833px){.nums,.nums.c3{grid-template-columns:1fr 1fr;gap:44px 20px}}
@media (max-width:480px){.nums.c3{grid-template-columns:1fr}}

/* dark band with flowing ribbons + steps */
.flow{position:relative;overflow:hidden;padding:clamp(100px,12vw,160px) 0 clamp(80px,10vw,130px)}
.flow-canvas{position:relative;height:clamp(220px,30vw,380px);margin:clamp(10px,2vw,30px) 0 clamp(40px,5vw,70px)}
.flow-canvas canvas{position:absolute;inset:0;width:100%;height:100%}
.flow-canvas::before,.flow-canvas::after{content:"";position:absolute;top:0;bottom:0;width:12vw;z-index:1;pointer-events:none}
.flow-canvas::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.flow-canvas::after{right:0;background:linear-gradient(-90deg,#000,transparent)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.steps.c3{grid-template-columns:repeat(3,1fr)}
.step{padding-top:20px;border-top:1px solid var(--line-2)}
.step b{display:block;font-size:.85rem;font-weight:600;color:var(--accent-2);font-variant-numeric:tabular-nums}
.step h3{margin:8px 0 8px;font-size:1.35rem;letter-spacing:-.025em}
.step p{color:var(--muted);font-size:.98rem}
@media (max-width:900px){.steps,.steps.c3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps,.steps.c3{grid-template-columns:1fr}}

/* =====================================================================
   Pricing
   ===================================================================== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plans.c2{grid-template-columns:repeat(2,1fr);max-width:880px;margin:0 auto}
.plans.c1{grid-template-columns:1fr;max-width:460px;margin:0 auto}
.plan{display:flex;flex-direction:column;padding:clamp(28px,3vw,38px)}
.plan.best{box-shadow:inset 0 0 0 2px var(--accent)}
.plan .tag{align-self:flex-start;font-size:.75rem;font-weight:600;padding:5px 11px;border-radius:99px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);margin-bottom:18px}
.plan h3{font-size:1.45rem;letter-spacing:-.03em}
.plan .amt{margin-top:14px;font-size:clamp(2.4rem,1.9rem + 1.4vw,3rem);font-weight:700;letter-spacing:-.045em;line-height:1}
.plan .amt small,.plan .amt2 small{font-size:.95rem;font-weight:500;letter-spacing:-.01em;color:var(--muted)}
.plan .from{display:block;font-size:.82rem;font-weight:500;color:var(--faint);letter-spacing:0;margin-bottom:6px}
.plan .amt2{margin-top:6px;font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.checks{margin:24px 0 28px;display:grid;gap:12px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem;color:var(--text);line-height:1.4}
.checks .i{width:17px;height:17px;margin-top:2px;color:var(--accent);stroke-width:2.4}
.plan .btn{margin-top:auto;align-self:stretch}
.plans-note{max-width:720px;margin:28px auto 0;text-align:center;color:var(--muted);font-size:.95rem}
.plans-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){.plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}.plans.c2{grid-template-columns:1fr;max-width:520px}}

/* =====================================================================
   Compare (Launch vs Studio) + device visuals
   ===================================================================== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(28px,4vw,48px) clamp(22px,3.4vw,44px) clamp(30px,4vw,44px)}
.cmp-visual{position:relative;width:100%;height:clamp(220px,24vw,290px);margin-bottom:34px}
.cmp .name{font-size:.95rem;font-weight:600;color:var(--accent);margin-bottom:8px}
.cmp h3{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);letter-spacing:-.035em;max-width:16ch}
.cmp .sub{margin-top:12px;color:var(--muted);font-size:1.05rem;max-width:36ch}
.cmp .price{margin-top:18px;font-size:1.05rem;font-weight:600}
.cmp .price small{display:block;margin-top:2px;font-size:.85rem;font-weight:500;color:var(--faint)}
.cmp .actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 22px;margin-top:22px}
.feats{width:100%;margin-top:34px;padding-top:30px;border-top:1px solid var(--line);display:grid;gap:24px}
.feats li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:1rem;font-weight:600;letter-spacing:-.015em}
.feats .i{width:30px;height:30px;color:var(--accent);stroke-width:1.5;margin-bottom:4px}
.feats span{color:var(--muted);max-width:30ch;font-weight:400;font-size:.95rem}
@media (max-width:833px){.compare{grid-template-columns:1fr}}

.dev{position:absolute;inset:0;display:grid;place-items:center}
.browser{position:relative;width:min(84%,400px);aspect-ratio:16/10.5;border-radius:12px;overflow:hidden;background:#0c0b0a;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -20px rgba(0,0,0,.6),0 0 80px -30px rgba(245,154,63,.5);animation:hover 7s ease-in-out infinite}
:root[data-theme="light"] .browser:not(.dark .browser){background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 30px 60px -24px rgba(60,40,10,.35)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .browser:not(.dark .browser){background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 30px 60px -24px rgba(60,40,10,.35)}}
.b-bar{height:22px;display:flex;align-items:center;gap:5px;padding:0 9px;border-bottom:1px solid var(--line)}
.b-bar i{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.b-bar span{margin:0 auto;font-size:.55rem;color:var(--faint);padding:1px 10px;border-radius:99px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.b-body{padding:12px 14px;display:grid;gap:9px}
.b-nav{display:flex;align-items:center;gap:6px}
.b-nav b{width:11px;height:11px;border-radius:4px;background:var(--grad)}
.b-nav s{width:20px;height:4px;border-radius:3px;background:var(--line-2);text-decoration:none}
.b-nav em{margin-left:auto;font-style:normal;font-size:.5rem;font-weight:700;color:var(--on-btn);background:var(--btn);padding:3px 8px;border-radius:99px}
.b-h{height:10px;border-radius:5px;background:color-mix(in srgb,var(--text) 85%,transparent);width:78%}
.b-h.two{width:52%;background:var(--grad)}
.b-p{height:4px;border-radius:3px;background:var(--line-2);width:64%}
.b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:3px}
.b-cards i{height:34px;border-radius:7px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.phone-wrap{position:absolute;inset:0;pointer-events:none}
.phone{position:absolute;right:max(3%,calc(50% - 240px));bottom:2%;width:clamp(76px,9vw,100px);aspect-ratio:9/19;border-radius:18px;padding:5px;background:#0c0b0a;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 24px 40px -14px rgba(0,0,0,.7);animation:hover 7s ease-in-out -3.5s infinite}
:root[data-theme="light"] .phone:not(.dark .phone){background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 24px 40px -16px rgba(60,40,10,.35)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .phone:not(.dark .phone){background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 24px 40px -16px rgba(60,40,10,.35)}}
.phone-in{height:100%;border-radius:14px;padding:14px 7px 8px;display:grid;align-content:start;gap:6px;background:color-mix(in srgb,var(--text) 4%,transparent)}
.phone-in .b-h{height:6px}
.phone-in .b-p{height:3px}
.phone-in em{justify-self:start;font-style:normal;font-size:.42rem;font-weight:700;color:var(--on-btn);background:var(--btn);padding:2px 6px;border-radius:99px;margin-top:3px}
.phone-in i{height:22px;border-radius:5px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.live{position:absolute;left:max(3%,calc(50% - 230px));top:4%;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;font-size:.72rem;font-weight:600;
  background:var(--tile-2);box-shadow:0 0 0 1px var(--line-2),0 10px 24px -10px rgba(0,0,0,.4)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
.js:not(.rm) .build .bd{opacity:0;transform:translateY(8px)}
.js:not(.rm) .build.in .bd{animation:bd .9s var(--ease) both;animation-delay:calc(.45s + var(--b,0) * 100ms)}
.js:not(.rm) .build .phone-wrap{opacity:0;transform:translateY(24px)}
.js:not(.rm) .build.in .phone-wrap{animation:bd 1.1s var(--ease) 1.05s both}
.js:not(.rm) .build .live{opacity:0;transform:scale(.8)}
.js:not(.rm) .build.in .live{animation:bd .7s var(--ease) 1.6s both}
@keyframes bd{to{opacity:1;transform:none}}
@keyframes hover{0%,100%{translate:0 0}50%{translate:0 -6px}}
.float{animation:hover 8s ease-in-out infinite}

.ribbon-box{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:radial-gradient(80% 90% at 50% 50%,#1c0f05,#000 75%)}
.ribbon-box canvas{position:absolute;inset:0;width:100%;height:100%}
.ribbon-box .mark{position:absolute;left:50%;top:50%;width:54px;height:54px;translate:-50% -50%;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 40px -6px rgba(245,154,63,.6)}
.ribbon-box .mark svg{width:24px;height:24px}
.ribbon-box .chip{position:absolute;padding:6px 12px;border-radius:99px;font-size:.72rem;font-weight:600;color:#f5f5f7;background:rgba(20,18,16,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.12);animation:hover 8s ease-in-out infinite}
.ribbon-box .c1{left:8%;top:12%}.ribbon-box .c2{right:8%;top:20%;animation-delay:-2s}.ribbon-box .c3{left:14%;bottom:12%;animation-delay:-4s}.ribbon-box .c4{right:12%;bottom:10%;animation-delay:-6s}

/* =====================================================================
   Bento tiles + their visuals (rings, message thread, checklist)
   ===================================================================== */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(300px,auto);gap:20px}
.b-audit{grid-column:1/3}.b-sms{grid-column:3;grid-row:1/3}.b-care{grid-column:1/3}
.bt{display:flex;flex-direction:column;padding:clamp(26px,3vw,38px);transition:transform .6s var(--ease)}
a.bt:hover{transform:scale(1.01)}
.bt .name{font-size:.95rem;font-weight:600;color:var(--accent);margin-bottom:8px}
.bt h3{font-size:clamp(1.55rem,1.1rem + 1.3vw,2.15rem);letter-spacing:-.035em;max-width:18ch}
.bt p{margin-top:10px;color:var(--muted);font-size:1rem;max-width:40ch}
.bt .foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap}
.bt .price{font-weight:600;font-size:1rem}
.bt .price small{color:var(--faint);font-weight:500}
.split{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;height:100%}
.split > div:first-child{display:flex;flex-direction:column;height:100%}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}.b-audit,.b-care{grid-column:1/3}.b-sms{grid-column:1/3;grid-row:auto}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.b-audit,.b-care,.b-sms{grid-column:auto}.split{grid-template-columns:1fr}.split > div:last-child{justify-self:center}}

.ring-wrap{display:flex;flex-direction:column;align-items:center}
.rings{position:relative;width:clamp(170px,18vw,210px);aspect-ratio:1}
.rings svg{width:100%;height:100%;rotate:-90deg;overflow:visible}
.rings circle{fill:none;stroke-width:11;stroke-linecap:round}
.rings .trk{opacity:.16}
.rings .p{stroke-dasharray:0 100;transition:stroke-dasharray 1.8s var(--ease)}
.in .rings .p,.rm .rings .p,html:not(.js) .rings .p{stroke-dasharray:var(--v) 100}
.rings .r1{stroke:#f59a3f;filter:drop-shadow(0 0 6px rgba(245,154,63,.55))}
.rings .r2{stroke:#ffd28f;transition-delay:.15s}
.rings .r3{stroke:#6d93ff;transition-delay:.3s}
.legend{display:grid;gap:8px;margin-top:18px;font-size:.85rem;color:var(--muted);min-width:170px}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{width:9px;height:9px;border-radius:50%}
.legend small{margin-left:auto;padding-left:16px;font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}
.sample{font-size:.72rem;color:var(--faint);margin-top:10px}

.thread{margin:26px auto;width:100%;max-width:300px;border-radius:30px;padding:16px 14px 22px;background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--line)}
.t-top{display:flex;flex-direction:column;align-items:center;gap:5px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);font-size:.72rem;color:var(--faint)}
.t-top .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#1b1006;font-weight:700;font-size:.85rem}
.t-top b{font-size:.82rem;color:var(--text);font-weight:600}
.t-row{display:flex;flex-direction:column;gap:8px;font-size:.86rem;line-height:1.35;min-height:150px}
.sys{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--crit);font-weight:600}
.sys .i{width:13px;height:13px}
.bub{max-width:82%;padding:9px 13px;border-radius:18px}
.bub.out{align-self:flex-end;background:linear-gradient(135deg,#ffc27f,#f59a3f);color:#1b1006;border-bottom-right-radius:6px;font-weight:500}
.bub.in{align-self:flex-start;background:color-mix(in srgb,var(--text) 10%,transparent);border-bottom-left-radius:6px}
.typing{display:inline-flex;gap:4px;padding:12px 14px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.note{align-self:flex-end;font-size:.66rem;color:var(--faint);margin-top:-2px}
.js:not(.rm) .seqs .seq{opacity:0;transform:translateY(10px) scale(.96)}
.js:not(.rm) .seqs.in .seq{animation:bd .7s var(--ease) both}
.js:not(.rm) .seqs.in .seq:nth-child(1){animation-delay:.4s}
.js:not(.rm) .seqs.in .seq:nth-child(2){animation-delay:1.1s}
.js:not(.rm) .seqs.in .seq:nth-child(3){animation-delay:1.3s}
.js:not(.rm) .seqs.in .seq:nth-child(4){animation-delay:2.1s}

.month{width:clamp(230px,26vw,300px);padding:18px 20px;border-radius:20px;background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--line)}
.month-h{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:600;color:var(--faint);margin-bottom:10px}
.bar{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-bottom:12px}
.bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--grad);transform-origin:left}
.js:not(.rm) .ticks .bar i{transform:scaleX(0);transition:transform 1.8s var(--ease) .4s}
.js:not(.rm) .ticks.in .bar i{transform:scaleX(1)}
.month li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:.9rem;border-top:1px solid var(--line)}
.month li:first-child{border-top:0}
.chk{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#1b1006;flex-shrink:0}
.chk .i{width:13px;height:13px;stroke-width:3}
.js:not(.rm) .ticks .chk{transform:scale(.4);opacity:0}
.js:not(.rm) .ticks.in .chk{animation:bd .5s var(--ease) both}
.js:not(.rm) .ticks.in li:nth-child(1) .chk{animation-delay:.7s}
.js:not(.rm) .ticks.in li:nth-child(2) .chk{animation-delay:1.05s}
.js:not(.rm) .ticks.in li:nth-child(3) .chk{animation-delay:1.4s}

/* showcase: text + visual side by side */
.show{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(28px,4vw,56px)}
.show h3{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.8rem);letter-spacing:-.04em;max-width:16ch}
.show p{margin-top:14px;color:var(--muted);font-size:1.08rem;max-width:44ch}
.show .thread{margin:0 auto}
@media (max-width:833px){.show{grid-template-columns:1fr}}

/* =====================================================================
   Studio service visuals (browser, terminal, AI grid, automation map)
   ===================================================================== */
.sv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sv{display:flex;flex-direction:column;padding:clamp(24px,3vw,34px);min-height:520px}
.sv-top{display:flex;justify-content:space-between;align-items:center;color:var(--faint);font-size:.85rem;font-weight:600}
.sv-top .i{width:20px;height:20px;color:var(--accent)}
.sv-vis{position:relative;flex:1;min-height:250px;display:grid;place-items:center;margin:18px 0}
.sv h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);letter-spacing:-.035em}
.sv p{margin-top:10px;color:var(--muted);font-size:1rem;max-width:42ch}
.sv p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags span{padding:6px 12px;border-radius:99px;font-size:.78rem;font-weight:500;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
@media (max-width:833px){.sv-grid{grid-template-columns:1fr}.sv{min-height:0}}

.mini-browser{width:min(86%,380px);border-radius:14px;overflow:hidden;background:#0c0907;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 35px 70px -20px rgba(0,0,0,.7),0 0 70px -24px rgba(245,120,30,.45);
  transform:perspective(900px) rotateX(6deg) rotateY(-8deg);transition:transform .9s var(--ease)}
.sv:hover .mini-browser{transform:perspective(900px) rotateX(0) rotateY(0)}
.mini-bar{height:28px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.mini-bar i{width:6px;height:6px;border-radius:50%;background:#5e554e}
.mini-bar i:first-child{background:#f59a3f}
.mini-bar span{margin:0 auto;color:#8a7f73;font-size:.62rem;letter-spacing:.08em}
.mini-site{padding:22px;background:radial-gradient(circle at 72% 62%,#6c2105,transparent 45%),linear-gradient(150deg,#080706,#150b06);color:#f5f5f7}
.mini-site span{color:#b39277;font-size:.62rem;letter-spacing:.14em;font-weight:600}
.mini-site strong{display:block;margin-top:12px;font-size:1.6rem;line-height:1;letter-spacing:-.05em}
.mini-site strong em{font-style:normal;background:linear-gradient(92deg,#ffd9a8,#f7a14c);-webkit-background-clip:text;background-clip:text;color:transparent}
.mini-site div{margin-top:20px;display:flex;gap:7px}
.mini-site b{width:56px;height:28px;border-radius:6px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

.term{width:min(90%,400px);border-radius:14px;padding:16px 0 12px;background:#050403;color:#8b8178;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px -20px rgba(0,0,0,.7);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem}
.term div{display:grid;grid-template-columns:30px 1fr;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap;overflow:hidden}
.term div span{color:#4e4944}
.term code{display:inline-block;overflow:hidden}
.term .hot{color:#ffa552;text-shadow:0 0 12px rgba(255,119,24,.5)}
.term .st{display:flex;align-items:center;gap:8px;border-bottom:0;padding-top:14px;letter-spacing:.14em;font-size:.68rem;color:#6e655d}
.term .st i{width:6px;height:6px;border-radius:50%;background:#69df9f;box-shadow:0 0 8px #69df9f;animation:blink 2s ease-in-out infinite}
.js:not(.rm) .typer code{clip-path:inset(0 100% 0 0)}
.js:not(.rm) .typer.in code{animation:type 1.1s steps(28,end) both}
.js:not(.rm) .typer.in div:nth-child(2) code{animation-delay:1.1s}
.js:not(.rm) .typer.in div:nth-child(3) code{animation-delay:2.2s;animation-duration:.7s}
@keyframes type{to{clip-path:inset(0 0 0 0)}}
.caret{display:inline-block;width:7px;height:1em;vertical-align:-2px;margin-left:2px;background:#ffa552;animation:blink 1s steps(1) infinite}

.matrix{position:relative;width:100%;height:100%;display:grid;place-items:center}
.mgrid{width:210px;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;transform:perspective(500px) rotateX(58deg) rotate(-16deg);filter:drop-shadow(0 16px 24px rgba(224,71,5,.2))}
.mgrid i{aspect-ratio:1;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,135,50,.22);background:rgba(255,91,12,.04);animation:mpulse 3.2s ease-in-out infinite;animation-delay:var(--dl,0s)}
.mgrid i.hot{background:#e75a12;box-shadow:inset 0 0 0 1px #ffbc7e,0 0 15px rgba(255,99,18,.7)}
@keyframes mpulse{50%{background:rgba(255,99,18,.18);box-shadow:inset 0 0 0 1px rgba(255,162,87,.55)}}
.mcmd{position:absolute;left:50%;top:54%;translate:-50% -50%;width:220px;padding:10px 13px;display:flex;align-items:center;gap:8px;border-radius:10px;
  font:600 .66rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:#b3a89e;background:rgba(9,6,4,.84);
  box-shadow:0 0 0 1px rgba(255,255,255,.13),0 15px 35px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mcmd span{width:6px;height:6px;border-radius:50%;background:#ff8131;box-shadow:0 0 8px #ff8131}
.mcmd b{margin-left:auto;color:#82d7a4;font-weight:600}
.mchip{position:absolute;padding:6px 11px;border-radius:9px;font-size:.72rem;font-weight:600;color:#d8cec4;background:rgba(22,16,12,.72);box-shadow:0 0 0 1px rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mchip.m1{left:10%;top:18%}.mchip.m2{right:9%;top:44%;animation-delay:-2.6s}.mchip.m3{left:20%;bottom:10%;animation-delay:-5.2s}

.nodes{position:relative;width:100%;height:100%;min-height:250px}
.nodes svg{position:absolute;inset:0;width:100%;height:100%}
.nodes .base{fill:none;stroke:rgba(255,139,48,.35);stroke-width:1.2;stroke-dasharray:5 6;animation:dash 16s linear infinite;vector-effect:non-scaling-stroke}
.nodes .pulse{fill:none;stroke:#ffc987;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:8 100;stroke-dashoffset:8;filter:drop-shadow(0 0 5px rgba(245,154,63,.9));animation:run 3.4s cubic-bezier(.55,.1,.35,1) infinite;vector-effect:non-scaling-stroke}
@keyframes dash{to{stroke-dashoffset:-220}}
@keyframes run{0%{stroke-dashoffset:8}70%,100%{stroke-dashoffset:-100}}
.node{position:absolute;width:42px;height:42px;translate:-50% -50%;display:grid;place-items:center;border-radius:13px;color:#ffad62;
  background:linear-gradient(145deg,#25140a,#0b0806);box-shadow:0 0 0 1px rgba(255,181,113,.28),0 10px 30px rgba(0,0,0,.4),0 0 22px rgba(207,65,2,.2)}
.node .i{width:18px;height:18px}
:root[data-theme="light"] .sv .nodes .base{stroke:rgba(176,88,12,.4)}

/* =====================================================================
   Work, founder, chips
   ===================================================================== */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.wk{display:block}
.wk-img{border-radius:22px;overflow:hidden;aspect-ratio:16/11;background:var(--bg-2);box-shadow:0 0 0 1px var(--line)}
.wk-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
a.wk:hover .wk-img img{transform:scale(1.045)}
.wk .kind{margin-top:18px;font-size:.85rem;font-weight:600;color:var(--accent)}
.wk h3{margin-top:4px;font-size:1.3rem;letter-spacing:-.025em}
.wk p{margin-top:6px;color:var(--muted);font-size:.96rem}
.wk .more{margin-top:10px;font-size:.95rem}
.wk .quiet{display:block;margin-top:10px;font-size:.85rem;color:var(--faint)}
@media (max-width:900px){.work{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.work{grid-template-columns:1fr}}

.about{max-width:760px;margin:0 auto;text-align:center}
.about .avatar{width:84px;height:84px;margin:0 auto 26px;border-radius:50%;display:grid;place-items:center;background:var(--tile);box-shadow:0 0 0 1px var(--line-2),0 0 60px -10px rgba(245,154,63,.55)}
.about .avatar svg{width:38px;height:38px}
.about .k{font-size:clamp(1rem,.95rem + .3vw,1.25rem);font-weight:600;color:var(--accent);margin-bottom:10px}
.about h2{font-size:clamp(2.3rem,1.4rem + 3.6vw,4rem);letter-spacing:-.04em}
.about .lead{margin-top:20px;font-size:clamp(1.15rem,1.05rem + .45vw,1.5rem);font-weight:600;line-height:1.4;letter-spacing:-.02em}
.about p.body{margin-top:18px;color:var(--muted);font-size:1.08rem}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.pills li > span,.pills a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;font-size:.9rem;font-weight:500;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.pills a:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.pills .i{color:var(--accent);width:15px;height:15px}
.chip-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px;margin:0 auto}
.chip-list li{padding:11px 18px;border-radius:99px;font-size:.98rem;font-weight:500;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--line-2)}
.qa:first-child{border-top:1px solid var(--line-2)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:clamp(1.05rem,1rem + .3vw,1.3rem);font-weight:600;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{position:relative;width:18px;height:18px;flex-shrink:0;transition:transform .45s var(--ease)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.8px;margin-top:-.9px;border-radius:2px;background:var(--text)}
.qa .pm::after{transform:rotate(90deg);transition:transform .45s var(--ease)}
.qa[open] .pm{transform:rotate(180deg)}
.qa[open] .pm::after{transform:rotate(0)}
.qa-a{overflow:hidden}
.qa-a p{padding:0 40px 26px 0;color:var(--muted);font-size:1.05rem;max-width:68ch}
.qa-a a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.faq-more{text-align:center;margin-top:36px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px}
.guide-links{max-width:820px;margin:40px auto 0;text-align:center}
.guide-links p{font-size:.95rem;font-weight:600;color:var(--faint);margin-bottom:12px}
.guide-links ul{display:grid;gap:10px;justify-items:center}
.sources-note{max-width:820px;margin:28px auto 0;font-size:.8rem;color:var(--faint);text-align:center;line-height:1.6}

/* =====================================================================
   Final call to action + forms (built by /contact-form.js)
   ===================================================================== */
.final .form-host{max-width:760px;margin:0 auto}
.final .after{margin-top:26px;text-align:center}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.field{position:relative}
.field.full{grid-column:1/-1}
.field input,.field textarea{width:100%;padding:26px 16px 10px;border-radius:14px;border:1px solid transparent;background:var(--field);font-size:1rem;transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{min-height:150px;resize:vertical;padding-top:30px}
.field label{position:absolute;left:17px;top:18px;font-size:1rem;color:var(--faint);pointer-events:none;transform-origin:left top;transition:transform .25s var(--ease),color .2s ease}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{transform:translateY(-10px) scale(.75)}
.field [aria-invalid="true"]{border-color:var(--crit)}
.field small{font-size:.85em;opacity:.8}
.chips{grid-column:1/-1;border:0;margin-bottom:6px}
.chips legend{font-size:.95rem;font-weight:600;margin:0 auto 12px;text-align:center;width:100%}
.chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chip-row label{position:relative;cursor:pointer}
.chip-row input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chip-row span{display:inline-block;padding:9px 16px;border-radius:99px;font-size:.9rem;font-weight:500;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s ease,background-color .2s ease}
.chip-row label:hover span{box-shadow:inset 0 0 0 1px var(--line-2)}
.chip-row input:checked + span{box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--field))}
.chip-row input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-foot{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:10px}
.form-foot .btn{min-width:200px}
.status{font-size:.92rem;color:var(--muted);min-height:1.3em;text-align:center}
.status.err{color:var(--crit)}
.status a{color:inherit;text-decoration:underline}
.privacy-note{font-size:.8rem;color:var(--faint);text-align:center}
.privacy-note a{text-decoration:underline}
.direct{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-top:36px}
.thanks{text-align:center;padding:48px 24px;border-radius:var(--radius);background:var(--tile)}
.thanks h3{font-size:2rem}
.thanks p{margin-top:8px;color:var(--muted)}
@media (max-width:600px){.form{grid-template-columns:1fr}}

/* =====================================================================
   Long-form text: legal pages and guides
   ===================================================================== */
.prose{max-width:720px;margin:0 auto;font-size:1.08rem;line-height:1.7}
.prose > * + *{margin-top:18px}
.prose h2{font-size:clamp(1.5rem,1.25rem + 1vw,2rem);letter-spacing:-.03em;line-height:1.15;margin-top:52px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:color-mix(in srgb,var(--text) 86%,transparent)}
.prose ul,.prose ol{padding-left:1.25em;display:grid;gap:10px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{padding-left:4px}
.prose li::marker{color:var(--accent)}
.prose ol li::marker{font-weight:700}
.prose strong,.prose b{color:var(--text);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--field);border-radius:6px;padding:1px 6px}
.prose blockquote{padding:20px 24px;border-radius:var(--radius-s);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);font-size:1rem}
.callout{padding:24px 26px;border-radius:var(--radius-s);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line),inset 4px 0 0 var(--accent)}
.callout p + p{margin-top:12px}

.answer{max-width:760px;margin:40px auto 0;padding:clamp(24px,3vw,34px);text-align:left}
.answer h2{font-size:.95rem;font-weight:600;color:var(--accent-2);letter-spacing:-.01em;margin-bottom:10px}
.answer p{font-size:1.12rem;line-height:1.6;color:var(--text)}
.answer p + p{margin-top:12px}
.help{max-width:720px;margin:56px auto 0;padding:clamp(24px,3vw,34px);display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.help h2{font-size:1.4rem;letter-spacing:-.025em;margin:0 0 6px}
.help p{color:var(--muted);font-size:1rem;max-width:48ch;margin:0}
.sources{max-width:720px;margin:44px auto 0;padding-top:24px;border-top:1px solid var(--line-2);font-size:.88rem;color:var(--faint)}
.sources h2{font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:10px}
.sources ol{padding-left:1.2em;list-style:decimal;display:grid;gap:6px}
.sources a{color:var(--faint);text-decoration:underline;text-underline-offset:3px}
.sources a:hover{color:var(--text)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,3vw,32px);transition:transform .6s var(--ease)}
a.card:hover{transform:scale(1.012)}
.card h2,.card h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);letter-spacing:-.025em;line-height:1.2}
.card p{color:var(--muted);font-size:1rem}
.card .more{margin-top:auto;padding-top:8px}
@media (max-width:760px){.cards{grid-template-columns:1fr}}

/* =====================================================================
   Footer
   ===================================================================== */
footer{background:var(--bg-2);color:var(--muted);font-size:.8rem;padding:34px 0 26px;border-top:1px solid var(--line)}
footer .wrap{max-width:1024px}
.f-note{padding-bottom:18px;border-bottom:1px solid var(--line);line-height:1.6}
.f-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.f-cols .f-h{font-size:.8rem;font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--text);margin-bottom:8px}
.f-cols ul{display:grid;gap:7px}
.f-cols a:hover,.f-cols a[aria-current="page"]{text-decoration:underline;color:var(--text)}
.f-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px}
.f-base nav{display:flex;gap:4px 0;flex-wrap:wrap}
.f-base nav a{padding:0 10px;border-left:1px solid var(--line-2)}
.f-base nav a:first-child{border-left:0;padding-left:0}
.f-base a:hover{text-decoration:underline;color:var(--text)}
@media (max-width:760px){.f-cols{grid-template-columns:1fr 1fr}}

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

/* labels inside tiles, and clearing the fixed nav on pages without a local nav */
.tile .k-label{color:var(--accent);font-weight:600;font-size:.95rem;margin:0 0 8px}
body:not(.has-local) .phero:not(.compact){padding-top:calc(52px + clamp(48px,9vh,110px))}
body:not(.has-local) .phero.compact{padding-top:calc(52px + clamp(64px,9vw,120px))}

/* product heroes: split layout on wide screens (text left, shape right),
   stacked on phones with room for the shape below the text */
.phero > .wrap{width:100%}
@media (min-width:980px){
  .phero.side{justify-content:center;text-align:left;padding-bottom:clamp(40px,6vh,80px)}
  .phero.side .phero-copy{max-width:600px}
  .phero.side h1{font-size:clamp(2.6rem,1rem + 3.4vw,4.2rem);margin:0;max-width:13ch}
  .phero.side .lead{margin-left:0;max-width:52ch}
  .phero.side .cta-row{justify-content:flex-start}
  .phero.side .scrim::before{left:22%;width:min(820px,70vw)}
}
@media (max-width:979px){
  .phero:not(.compact):not(.shape-top){padding-bottom:clamp(280px,70vw,420px)}
}
.phero.shape-top{min-height:clamp(680px,96vh,920px)}

.more .i{display:inline-block}
.ft .more{display:block;line-height:1.35}
.ft .more .i{vertical-align:-1px;margin-left:2px}