@font-face{
  font-family:"Bricolage";
  src:url("fonts/bricolage.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Literata";
  src:url("fonts/literata.woff2") format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap;
}

/* ==========================================================================
   Serene Odyssey , design tokens

   Every colour is derived from the client's own logo files. Sampled hexes:
   #8127FF #BD37FF #CD3AFF #F441FF violet to magenta, #247AFF #2B55E3 blue,
   #46EDFF cyan. Those became one OKLCH hue anchor at 293 with the rest of the
   palette measured off it, so the whole page can be re-hued from one variable
   without any pair falling out of contrast.

   --h      brand hue, locked to 293, the logo's violet.
   --tint   how much colour sits in the pastel surfaces.
   --r      corner radius multiplier.
   These stay as variables because the whole palette derives from them, which is
   what keeps every measured contrast pair in step. They are not meant to be
   changed at runtime.
   ========================================================================== */
:root{
  --h:293;
  --tint:1;
  --r:1;

  /* pastel grounds, tinted toward the brand hue rather than toward warm */
  --ground:oklch(98.3% calc(.009 * var(--tint)) var(--h));
  --surface:oklch(95.8% calc(.023 * var(--tint)) var(--h));
  --surface-cy:oklch(96.9% calc(.017 * var(--tint)) calc(var(--h) - 62));
  --surface-mg:oklch(96.5% calc(.023 * var(--tint)) calc(var(--h) + 37));
  --line:oklch(91.6% calc(.031 * var(--tint)) var(--h));
  --line-soft:oklch(94.6% calc(.022 * var(--tint)) var(--h));

  /* text. measured: ink 15.9:1, body 8.7:1, muted 5.6:1 on --ground */
  --ink:oklch(24.3% .085 var(--h));
  --body:oklch(40.7% .061 var(--h));
  --muted:oklch(51.1% .061 var(--h));

  /* brand. violet carries every action: 5.4:1 on ground, white on it 5.3:1 */
  --violet:oklch(54.7% .279 var(--h));
  --violet-deep:oklch(37.4% .190 var(--h));
  --violet-wash:oklch(94.5% calc(.045 * var(--tint)) var(--h));
  --blue:oklch(51.5% .220 calc(var(--h) - 27));

  /* DISPLAY ONLY. magenta is 2.8:1 and cyan is 1.4:1 on the ground.
     They exist for gradients, glows and rules. Never set text in them. */
  --magenta:oklch(70.9% .287 calc(var(--h) + 32));
  --cyan:oklch(87.0% .134 calc(var(--h) - 87));
  /* the same two hues moved to text-safe lightness: 6.0:1 and 4.7:1 */
  --magenta-ink:oklch(51.6% .214 calc(var(--h) + 39));
  --cyan-ink:oklch(53.8% .096 calc(var(--h) - 71));

  /* drenched band */
  --night:oklch(24.3% .085 var(--h));
  --on-night:oklch(89% .055 var(--h));

  --rad-s:calc(6px * var(--r));
  --rad-m:calc(12px * var(--r));
  --rad-l:calc(20px * var(--r));
  --rad-xl:calc(30px * var(--r));

  --sh-s:0 1px 2px oklch(24.3% .085 var(--h) / .05);
  --sh-m:0 12px 30px -18px oklch(24.3% .085 var(--h) / .35);
  --sh-l:0 34px 70px -40px oklch(24.3% .085 var(--h) / .42), 0 2px 6px -3px oklch(24.3% .085 var(--h) / .06);
  --sh-glow:0 20px 60px -28px oklch(54.7% .279 var(--h) / .55);

  --display:"Bricolage",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Literata",ui-serif,Georgia,"Times New Roman",serif;

  --t--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --t-0:clamp(1.02rem,.99rem + .14vw,1.09rem);
  --t-1:clamp(1.2rem,1.11rem + .42vw,1.42rem);
  --t-2:clamp(1.5rem,1.34rem + .78vw,1.95rem);
  --t-3:clamp(1.95rem,1.61rem + 1.65vw,2.9rem);
  --t-4:clamp(2.6rem,1.95rem + 3.1vw,4.4rem);

  --gut:clamp(1.15rem,4.2vw,3.6rem);
  --maxw:1240px;
  --hdr:74px;

  --ease:cubic-bezier(.16,1,.3,1);

  /* semantic stacking order, never arbitrary numbers */
  --z-aurora:0;
  --z-raise:1;
  --z-sticky:40;
  --z-scrim:60;
  --z-drawer:70;
  --z-panel:80;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 14px);overflow-x:clip}
body{
  margin:0;background:var(--ground);color:var(--body);
  font-family:var(--text);font-size:var(--t-0);line-height:1.65;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4{
  font-family:var(--display);color:var(--ink);margin:0;
  line-height:1.06;letter-spacing:-.028em;font-weight:600;text-wrap:balance;
}
h1{font-size:var(--t-4);letter-spacing:-.035em;font-weight:550}
h2{font-size:var(--t-3)}
h3{font-size:var(--t-2)}
h4{font-size:var(--t-1);letter-spacing:-.02em}
p{margin:0;text-wrap:pretty}
a{color:var(--violet);text-underline-offset:.18em}
img,svg{max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:2px}
::selection{background:oklch(70.9% .287 calc(var(--h) + 32) / .28)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:74ch}
section{padding-block:clamp(3.4rem,7vw,6.4rem);position:relative}
section.tight{padding-block:clamp(2.4rem,4.6vw,3.8rem)}
.lede{font-size:var(--t-1);line-height:1.55;color:var(--body);max-width:62ch}
.sec-head{max-width:66ch;margin-bottom:clamp(2rem,4.5vw,3.2rem)}
.sec-head .lede{margin-top:1.1rem}
.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-panel);background:var(--ink);color:#fff;padding:.85rem 1.25rem;border-radius:0 0 var(--rad-s) 0;text-decoration:none;font-family:var(--display);font-weight:600}
.skip:focus{left:0}

/* ---------- aurora field ----------
   The logo is a gradient. The page breathes like one, quietly, behind
   everything. Transform only, so it never triggers layout. */
.aurora{position:fixed;inset:-18vh -8vw;z-index:var(--z-aurora);pointer-events:none;overflow:hidden;filter:blur(64px);opacity:.5}
.aurora i{position:absolute;display:block;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-6vw;top:2vh;background:oklch(70.9% .287 calc(var(--h) + 32) / .34);animation:drift1 44s var(--ease) infinite alternate}
.aurora i:nth-child(2){width:52vw;height:52vw;right:-10vw;top:-8vh;background:oklch(54.7% .279 var(--h) / .26);animation:drift2 52s var(--ease) infinite alternate}
.aurora i:nth-child(3){width:40vw;height:40vw;left:38vw;top:24vh;background:oklch(87% .134 calc(var(--h) - 87) / .38);animation:drift3 38s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,12vh,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-11vw,16vh,0) scale(.86)}}
@keyframes drift3{to{transform:translate3d(-7vw,-11vh,0) scale(1.24)}}
/* Only these need to sit above the aurora. A blanket body>* rule would
   overwrite position:fixed on the progress bar, drawer, scrim and buttons. */
.draftbar,.hdr,main,.ticker,.ft{position:relative;z-index:var(--z-raise)}

/* ---------- confirm marker ----------
   Every fact the client has not given us is flagged in place. */
.c{border-bottom:1.5px dotted var(--magenta-ink);cursor:help}
.c::after{content:"";display:inline-block;width:.42em;height:.42em;border:1.2px solid var(--magenta-ink);margin-left:.3em;vertical-align:.32em;border-radius:1px}

/* ---------- draft bar ---------- */
.draftbar{background:var(--ink);color:var(--on-night);font-family:var(--display);font-size:.76rem;padding:.6rem 0;letter-spacing:-.005em}
.draftbar .wrap{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;align-items:center}
.draftbar b{color:#fff;font-weight:650}
.draftbar .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);display:inline-block;margin-right:.45rem}
.draftbar .c{border-color:var(--cyan)}
.draftbar .c::after{border-color:var(--cyan)}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--z-panel);pointer-events:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--magenta),var(--cyan));transition:width .1s linear}

/* ---------- header ----------
   Sits flush at the top, then detaches into a floating pill on scroll. The
   brand is the mark plus real type, because the script wordmark's own tagline
   is unreadable at any size a header can carry. */
.hdr{position:sticky;top:0;z-index:var(--z-drawer);padding-block:0;transition:padding-block .4s var(--ease)}
.hdr .bar{
  display:flex;align-items:center;gap:1.1rem;min-height:var(--hdr);
  padding-inline:clamp(.7rem,1.6vw,1.2rem);border:1px solid transparent;border-radius:0;
  background:transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),
             box-shadow .4s var(--ease),border-radius .4s var(--ease),
             padding .4s var(--ease);
}
.hdr.stuck{padding-block:.62rem}
.hdr.stuck .bar{
  min-height:60px;border-radius:99px;border-color:var(--line);
  background:oklch(98.3% .009 var(--h) / .72);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 18px 40px -30px oklch(24.3% .085 var(--h) / .55),
             inset 0 1px 0 oklch(100% 0 0 / .7);
}
.brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;flex:none;min-width:0}
.brand-mark{height:clamp(34px,3.4vw,44px);width:auto;display:block;transition:transform .5s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.06)}
.brand-txt{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.brand-txt b{font-family:var(--display);font-size:clamp(1.05rem,1.35vw,1.24rem);font-weight:600;color:var(--ink);letter-spacing:-.035em;white-space:nowrap}
.brand-txt span{font-family:var(--display);font-size:.575rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-top:.1rem}
@media (max-width:400px){.brand-txt span{display:none}}

.navpanel{margin-left:auto;display:flex;align-items:center;gap:.7rem}
.navwrap{position:relative}
.nav{display:flex;align-items:center;gap:.1rem}
.nav-pill{
  position:absolute;left:0;top:50%;height:2.15rem;width:0;border-radius:99px;
  background:var(--violet-wash);opacity:0;pointer-events:none;
  transform:translate3d(var(--px,0),-50%,0);
  transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s;
}
.nav a{position:relative;z-index:1;display:inline-flex;align-items:center;padding:.5rem .78rem;font-family:var(--display);font-size:.94rem;font-weight:500;color:var(--body);text-decoration:none;border-radius:99px;transition:color .22s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="true"]{color:var(--violet-deep);font-weight:600}
.hdr-cta{padding:.62rem 1.15rem;font-size:.92rem;box-shadow:0 12px 26px -16px oklch(54.7% .279 var(--h) / .75)}
.drawer-note{display:none}

.navtoggle{display:none;margin-left:auto;background:oklch(100% 0 0 / .6);border:1px solid var(--line);border-radius:99px;padding:.62rem .7rem;cursor:pointer}
.navtoggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;margin:4px 0;transition:transform .38s var(--ease),opacity .2s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:oklch(24.3% .085 var(--h) / .42);backdrop-filter:blur(4px);z-index:var(--z-scrim);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.scrim.on{opacity:1;visibility:visible}
body.locked{overflow:hidden}

@media (max-width:1040px){
  .navtoggle{display:block}
  .nav-pill{display:none}
  .navpanel{
    position:fixed;top:0;right:0;bottom:0;width:min(390px,90vw);z-index:var(--z-drawer);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;margin:0;
    background:var(--ground);border-left:1px solid var(--line);
    padding:calc(var(--hdr) + 1.6rem) var(--gut) 2.4rem;overflow-y:auto;
    transform:translateX(101%);visibility:hidden;
    transition:transform .42s var(--ease),visibility .42s;
    box-shadow:-40px 0 70px -50px oklch(24.3% .085 var(--h) / .8);
  }
  .navpanel.open{transform:none;visibility:visible}
  .navwrap{width:100%}
  .nav{flex-direction:column;align-items:stretch;gap:0}
  .nav a{display:flex;width:100%;padding:1.05rem .1rem;font-size:1.2rem;border-radius:0;border-bottom:1px solid var(--line-soft);color:var(--ink);font-weight:550}
  .nav a[aria-current="true"]{color:var(--violet)}
  .hdr-cta{margin-top:1.5rem;justify-content:center;padding:.95rem 1.3rem;font-size:1rem}
  .drawer-note{display:block;margin-top:.9rem;font-size:.82rem;color:var(--muted);text-align:center;font-family:var(--display)}
  .hdr.stuck .bar{min-height:64px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:.97rem;letter-spacing:-.01em;
  text-decoration:none;border-radius:calc(var(--rad-m) * 1.1);
  padding:.85rem 1.45rem;border:1.5px solid transparent;cursor:pointer;line-height:1.2;
  transition:background .18s,color .18s,border-color .18s,box-shadow .22s var(--ease),transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--violet);color:#fff;box-shadow:var(--sh-glow)}
.btn-primary:hover{background:var(--violet-deep);box-shadow:0 26px 60px -26px oklch(54.7% .279 var(--h) / .8)}
.btn-ghost{background:oklch(100% 0 0 / .6);color:var(--violet-deep);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--violet);background:#fff;color:var(--violet)}
.btn-light{background:#fff;color:var(--violet-deep)}
.btn-light:hover{background:var(--surface)}
.btn-outline{background:transparent;color:#fff;border-color:oklch(100% 0 0 / .45)}
.btn-outline:hover{border-color:#fff;background:oklch(100% 0 0 / .12)}
.btn-lg{padding:1rem 1.75rem;font-size:1.05rem}
.btns{display:flex;gap:.75rem;flex-wrap:wrap}

/* ==========================================================================
   hero
   ========================================================================== */
.hero{padding-block:clamp(3rem,6vw,5.4rem) clamp(2rem,4vw,3rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(2.2rem,5vw,4.6rem);align-items:center}
@media (max-width:1040px){.hero-grid{grid-template-columns:1fr;gap:2.6rem}}
.hero h1{max-width:15ch}
.hero .lede{margin-top:1.45rem;max-width:52ch}
.hero .btns{margin-top:2rem}
.hero .note{margin-top:1.15rem;font-size:var(--t--1);color:var(--muted);max-width:46ch}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line-soft);padding-block:.95rem;background:oklch(100% 0 0 / .35);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker ul{display:flex;gap:2.6rem;width:max-content;animation:slide 46s linear infinite}
.ticker:hover ul,.ticker:focus-within ul{animation-play-state:paused}
.ticker li{font-family:var(--display);font-size:.92rem;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:2.6rem;white-space:nowrap}
.ticker li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--magenta);opacity:.7;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker ul{animation:none;flex-wrap:wrap;width:auto}}

/* ---------- promises ---------- */
.promises{padding-block:clamp(2.6rem,5vw,4rem)}
.promise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.promise{padding:.2rem clamp(1rem,2.4vw,2.2rem);border-left:1px solid var(--line)}
.promise:first-child{padding-left:0;border-left:0}
.promise h3{font-size:var(--t-1);margin-bottom:.55rem}
.promise p{font-size:.97rem;color:var(--body)}
@media (max-width:820px){
  .promise-grid{grid-template-columns:1fr;gap:1.6rem}
  .promise{border-left:0;border-top:1px solid var(--line);padding:1.3rem 0 0}
  .promise:first-child{border-top:0;padding-top:0}
}

/* ---------- problem ---------- */
.problem{background:var(--surface-mg);border-block:1px solid var(--line-soft)}
.problem-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,5vw,4.5rem)}
@media (max-width:900px){.problem-grid{grid-template-columns:1fr;gap:2.2rem}}
.problem h2{max-width:13ch}
.problem .close{margin-top:1.8rem;font-family:var(--display);font-size:var(--t-1);line-height:1.4;color:var(--ink);font-weight:500;letter-spacing:-.02em;max-width:34ch;padding-top:1.5rem;border-top:2px solid var(--magenta)}
.scenes li{padding-block:1.35rem;border-top:1px solid oklch(51.6% .214 calc(var(--h) + 39) / .18);font-size:1.06rem;line-height:1.62;max-width:60ch}
.scenes li:first-child{border-top:0;padding-top:0}
.scenes li:last-child{padding-bottom:0}

/* ---------- services ---------- */
.tabs{margin-bottom:2rem;display:flex;gap:.4rem;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  position:relative;background:none;border:0;cursor:pointer;white-space:nowrap;
  font-family:var(--display);font-size:1.02rem;font-weight:550;color:var(--muted);
  padding:.75rem 1.05rem 1rem;letter-spacing:-.015em;transition:color .2s;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:-1px;height:2.5px;border-radius:3px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.tabpanel[hidden]{display:none}
.tabpanel{animation:fadein .4s var(--ease) both}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}}
.svc-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.72fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
@media (max-width:960px){.svc-grid{grid-template-columns:1fr}}
.svc-sub{font-family:var(--display);font-size:var(--t-1);color:var(--ink);font-weight:500;letter-spacing:-.02em;margin-bottom:1.7rem;max-width:44ch}
.svc-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.55rem 2.4rem}
.svc-items li>b{display:block;font-family:var(--display);font-size:1.04rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-bottom:.3rem}
.svc-items li>span{display:block;font-size:.95rem;line-height:1.58;color:var(--body)}
.svc-items li>b::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:2px;margin-right:.55rem;vertical-align:.05em;background:var(--tab-accent,var(--violet))}

/* the art panel: the client's own mark, at scale, in the tab's hue */
.svc-art{position:relative;border-radius:var(--rad-xl);overflow:hidden;aspect-ratio:1/1.06;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line)}
.svc-art::before{content:"";position:absolute;inset:-30%;background:
  radial-gradient(40% 40% at 30% 25%,var(--art-1) 0,transparent 70%),
  radial-gradient(45% 45% at 72% 70%,var(--art-2) 0,transparent 70%),
  radial-gradient(40% 40% at 60% 20%,var(--art-3) 0,transparent 65%);
  filter:blur(22px);animation:artdrift 26s var(--ease) infinite alternate}
@keyframes artdrift{to{transform:translate3d(-6%,5%,0) scale(1.12) rotate(6deg)}}
.svc-art img{position:relative;width:56%;filter:drop-shadow(0 18px 40px oklch(24.3% .085 var(--h) / .28))}
.svc-art figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.15rem;font-family:var(--display);font-size:.82rem;line-height:1.45;color:var(--ink);background:linear-gradient(transparent,oklch(100% 0 0 / .8) 45%)}
@media (max-width:960px){.svc-art{aspect-ratio:16/8;max-width:none}.svc-art img{width:24%}}
@media (max-width:600px){.svc-art{aspect-ratio:16/10}.svc-art img{width:34%}}

.tools{margin-top:clamp(2.4rem,4.5vw,3.4rem);padding-top:1.9rem;border-top:1px solid var(--line)}
.tools h3{font-size:var(--t-1);margin-bottom:1rem}
.tools ul{display:flex;flex-wrap:wrap;gap:.45rem}
.tools li{font-family:var(--display);font-size:.86rem;font-weight:500;color:var(--body);background:oklch(100% 0 0 / .7);border:1px solid var(--line);border-radius:99px;padding:.36rem .8rem}
.tools p{margin-top:1rem;font-size:var(--t--1);color:var(--muted);max-width:60ch}

/* ---------- process ---------- */
.process{background:var(--surface);border-block:1px solid var(--line-soft)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2.2rem);position:relative}
.step{position:relative;padding-top:2.6rem}
.step::before{content:"";position:absolute;top:11px;left:0;right:0;height:2px;background:var(--line)}
.step::after{content:"";position:absolute;top:11px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--violet),var(--magenta));transition:width .8s var(--ease)}
.step.lit::after{width:100%}
.step:last-child::before,.step:last-child::after{right:auto;width:24px}
.step.lit:last-child::after{width:24px}
.step .n{position:absolute;z-index:2;top:0;left:0;width:24px;height:24px;border-radius:50%;background:var(--ground);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-size:.7rem;font-weight:700;color:var(--muted);transition:border-color .5s,color .5s,background .5s}
.step.lit .n{border-color:var(--violet);color:#fff;background:var(--violet)}
.step h3{font-size:var(--t-1);margin-bottom:.5rem}
.step p{font-size:.95rem;line-height:1.58}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:0 0 1.9rem 2.6rem}
  .step:last-child{padding-bottom:0}
  .step::before{top:0;bottom:0;left:11px;right:auto;width:2px;height:auto}
  .step:last-child::before{height:24px;bottom:auto}
  .step::after{top:0;left:11px;width:2px;height:0;background:linear-gradient(180deg,var(--violet),var(--magenta));transition:height .8s var(--ease)}
  .step.lit::after{width:2px;height:100%}
  .step.lit:last-child::after{height:24px}
}

/* ---------- first month ---------- */
.month{background:var(--surface-cy);border-block:1px solid var(--line-soft)}
.month-rows{border-top:1px solid oklch(53.8% .096 calc(var(--h) - 71) / .22)}
.month-rows li{display:grid;grid-template-columns:auto 12rem 1fr;gap:0 1.4rem;align-items:baseline;padding:1.3rem 0;border-bottom:1px solid oklch(53.8% .096 calc(var(--h) - 71) / .22)}
.month-rows .node{width:11px;height:11px;border-radius:50%;background:var(--ground);border:2px solid var(--cyan-ink);transform:translateY(-1px);transition:background .5s,box-shadow .5s}
.month-rows li.lit .node{background:var(--cyan-ink);box-shadow:0 0 0 4px oklch(53.8% .096 calc(var(--h) - 71) / .18)}
.month-rows b{font-family:var(--display);font-size:1.02rem;font-weight:650;color:var(--ink);letter-spacing:-.02em}
.month-rows span{font-size:.99rem;line-height:1.6;max-width:62ch}
@media (max-width:760px){
  .month-rows li{grid-template-columns:auto 1fr;gap:.35rem 1rem}
  .month-rows span{grid-column:2}
}

/* ---------- plans ---------- */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:1.3rem;align-items:stretch}
.plan{
  display:flex;flex-direction:column;gap:.9rem;padding:1.8rem 1.65rem;
  background:oklch(100% 0 0 / .72);border:1px solid var(--line);border-radius:var(--rad-l);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:oklch(54.7% .279 var(--h) / .35)}
.plan.featured{border-color:var(--violet);box-shadow:var(--sh-glow);background:#fff;position:relative}
@media (min-width:940px){.plan.featured{transform:translateY(-14px)}.plan.featured:hover{transform:translateY(-19px)}}
.plan .flag{position:absolute;top:-.72rem;left:1.6rem;background:var(--violet);color:#fff;font-family:var(--display);font-size:.7rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .65rem;border-radius:99px}
.plan h3{font-size:var(--t-2)}
@media (min-width:940px){.plan h3{min-height:2.1em}}
.plan .price{font-family:var(--display);color:var(--violet-deep);line-height:1.15}
.plan .price b{font-size:clamp(1.5rem,3vw,1.85rem);font-weight:650;letter-spacing:-.035em;margin-right:.4rem}
.plan .price span{font-size:.9rem;font-weight:550;color:var(--muted)}
.plan .meta{font-size:.82rem;color:var(--muted);line-height:1.45;margin-top:-.35rem}
.plan .blurb{font-size:.95rem;line-height:1.58}
.plan>p{font-size:.96rem;line-height:1.58}
.plan .points{display:grid;gap:.55rem;margin-top:.2rem}
.plan .points li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;font-size:.93rem;line-height:1.5;align-items:start}
.plan .points svg{width:15px;height:15px;margin-top:.28rem;stroke:var(--violet);flex:none}
.plan .good{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line-soft);font-size:.85rem;color:var(--muted);font-family:var(--display)}
.plan .good b{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.plans-note{margin-top:1.6rem;font-size:.95rem;color:var(--body);max-width:66ch}

/* ---------- industries ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem}
.chips li{font-family:var(--display);font-size:1rem;font-weight:500;color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:.55rem 1.1rem;background:oklch(100% 0 0 / .6);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.chips li:hover{border-color:var(--violet);background:var(--violet-wash);transform:translateY(-2px)}

/* ---------- trust ---------- */
.trust-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem)}
@media (max-width:900px){.trust-grid{grid-template-columns:1fr;gap:2rem}}
.rules li{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;padding:1.25rem 0;border-top:1px solid var(--line)}
.rules li:first-child{border-top:0;padding-top:0}
.rules svg{grid-row:span 2;width:19px;height:19px;stroke:var(--violet);margin-top:.28rem}
.rules b{font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--ink);letter-spacing:-.018em}
.rules span{font-size:.96rem;line-height:1.58;max-width:56ch}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr;gap:1.6rem}}
.faq-aside{position:sticky;top:calc(var(--hdr) + 2rem)}
.faq-aside .lede{font-size:var(--t-0)}
@media (max-width:900px){.faq-aside{position:static}}
.faq{max-width:78ch}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:flex-start;
  padding:1.3rem 0;font-family:var(--display);font-size:1.1rem;font-weight:550;
  color:var(--ink);letter-spacing:-.02em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:20px;height:20px;margin-left:auto;margin-top:.15rem;
  background:linear-gradient(var(--violet),var(--violet)) center/2px 11px no-repeat,
             linear-gradient(var(--violet),var(--violet)) center/11px 2px no-repeat;
  transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--violet-deep)}
.faq .a{padding:0 3rem 1.5rem 0;font-size:1rem;line-height:1.68;max-width:70ch;animation:fadein .35s var(--ease) both}

/* ==========================================================================
   drenched call to action , the one place the brand runs at full strength
   ========================================================================== */
.band{
  color:#fff;position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(70% 90% at 8% 12%,oklch(70.9% .287 calc(var(--h) + 32)) 0,transparent 62%),
    radial-gradient(70% 90% at 92% 88%,oklch(87% .134 calc(var(--h) - 87)) 0,transparent 58%),
    linear-gradient(140deg,oklch(46% .26 var(--h)),oklch(34% .21 calc(var(--h) - 12)));
}
.band::before{content:"";position:absolute;inset:-40%;z-index:-1;background:radial-gradient(45% 45% at 50% 50%,oklch(54.7% .279 var(--h) / .8),transparent 70%);animation:artdrift 30s var(--ease) infinite alternate}
.band h2,.band h3{color:#fff}
.band .lede{color:oklch(95% .035 var(--h))}
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(2.2rem,5vw,4.4rem);align-items:center}
@media (max-width:960px){.band-grid{grid-template-columns:1fr}}
.band-logo{height:clamp(48px,4.4vw,60px);width:auto;margin-bottom:1.7rem}
.band .c{border-color:oklch(87% .134 calc(var(--h) - 87))}
.band .c::after{border-color:oklch(87% .134 calc(var(--h) - 87))}
.direct{margin-top:2.2rem;display:grid;gap:.9rem;padding-top:1.8rem;border-top:1px solid oklch(100% 0 0 / .28)}
.direct div{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:.65rem;row-gap:.15rem}
.direct .k{grid-column:1/-1}
.direct p{grid-column:1/-1}
.direct .k{font-family:var(--display);font-size:.72rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:oklch(87% .134 calc(var(--h) - 87))}
.direct a{color:#fff;font-family:var(--display);font-size:1.05rem;font-weight:550;text-decoration:none;border-bottom:1px solid oklch(100% 0 0 / .35);justify-self:start}
.direct a:hover{border-color:#fff}
.direct p{font-family:var(--display);font-size:.95rem;color:oklch(95% .035 var(--h))}

/* ---------- form ---------- */
.form{background:oklch(100% 0 0 / .1);backdrop-filter:blur(14px);border:1px solid oklch(100% 0 0 / .26);border-radius:var(--rad-xl);padding:clamp(1.4rem,3vw,2.1rem);display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem;align-content:start}
.field label,.legend{font-family:var(--display);font-size:.86rem;font-weight:600;letter-spacing:-.005em;color:#fff}
.req{color:oklch(87% .134 calc(var(--h) - 87));font-weight:700}
.field input,.field select,.field textarea{
  width:100%;background:oklch(100% 0 0 / .93);border:1.5px solid transparent;
  border-radius:var(--rad-m);padding:.72rem .9rem;font-family:var(--text);font-size:.98rem;
  color:oklch(24.3% .085 var(--h));transition:border-color .18s,box-shadow .18s;
}
.field textarea{min-height:6.5rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:oklch(48% .05 var(--h))}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#fff;box-shadow:0 0 0 4px oklch(100% 0 0 / .3)}
.field .hint{font-size:.79rem;color:oklch(96% .025 var(--h));font-family:var(--display)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.frow{grid-template-columns:1fr}}
fieldset{border:0;padding:0;margin:0;display:grid;gap:.5rem}
.picks{display:flex;flex-wrap:wrap;gap:.5rem}
.pick{position:relative;display:inline-flex}
.pick input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pick span{font-family:var(--display);font-size:.88rem;font-weight:550;padding:.5rem .95rem;border-radius:99px;border:1.5px solid oklch(100% 0 0 / .38);color:#fff;transition:background .18s,border-color .18s}
.pick input:checked+span{background:#fff;color:var(--violet-deep);border-color:#fff}
.pick input:focus-visible+span{outline:3px solid #fff;outline-offset:2px}
.form .btn-light{width:100%;margin-top:.2rem}
.form .fine{font-size:.84rem;color:oklch(97% .02 var(--h));font-family:var(--display);line-height:1.55}
.form .fine.ok{color:#fff;font-weight:600}
.field.bad input,.field.bad textarea{border-color:oklch(75% .18 25)}
.err{font-size:.78rem;color:oklch(88% .14 25);font-family:var(--display)}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:var(--on-night);padding-block:clamp(2.8rem,5vw,4rem) 2rem}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:2.4rem clamp(1.6rem,4vw,3.4rem)}
@media (max-width:820px){.ft-grid{grid-template-columns:1fr 1fr}.ft-grid>*:first-child{grid-column:1/-1}}
@media (max-width:520px){.ft-grid{grid-template-columns:1fr}}
.ft img{height:52px;width:auto;margin-bottom:1.1rem}
.ft .tag{font-family:var(--display);font-size:1.02rem;color:#fff;font-weight:400;letter-spacing:-.015em;font-style:italic}
.ft .blurb{margin-top:.8rem;font-size:.92rem;max-width:38ch;line-height:1.6}
.ft h4{color:#fff;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650;margin-bottom:.9rem}
.ft ul{display:grid;gap:.5rem}
.ft a{color:var(--on-night);text-decoration:none;font-size:.92rem}
.ft a:hover{color:#fff;text-decoration:underline}
.ft-bot{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid oklch(100% 0 0 / .16);display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;font-size:.84rem;font-family:var(--display)}
.ft-bot .links{display:flex;gap:1.3rem;flex-wrap:wrap}

/* ---------- back to top ---------- */
.totop{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:var(--z-sticky);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-m);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,visibility .3s,transform .3s var(--ease)}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop svg{stroke:var(--ink)}

/* ==========================================================================
   reveal , enhances an already-visible default. Content is never gated on it.
   ========================================================================== */
/* Content is visible by default. The hidden-then-revealed state only exists
   under html.motion, which a head script sets when JavaScript is running and
   the visitor has not asked for reduced motion. If either is untrue, or if the
   observer never fires (background tab, headless renderer, print), the page is
   simply already painted. A reveal is never allowed to be the reason something
   is invisible. */
@media (prefers-reduced-motion:no-preference){
  .motion .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .motion .rv.in{opacity:1;transform:none}
  .motion .rv-kids>*{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .motion .rv-kids.in>*{opacity:1;transform:none}
  .motion .rv-kids.in>*:nth-child(2){transition-delay:.07s}
  .motion .rv-kids.in>*:nth-child(3){transition-delay:.14s}
  .motion .rv-kids.in>*:nth-child(4){transition-delay:.21s}
  .motion .rv-kids.in>*:nth-child(5){transition-delay:.28s}
  .motion .rv-kids.in>*:nth-child(6){transition-delay:.35s}

  /* the one orchestrated moment: page load */
  .motion .boot{opacity:0;transform:translateY(22px);animation:boot .9s var(--ease) forwards}
  .motion .boot-1{animation-delay:.05s}
  .motion .boot-2{animation-delay:.14s}
  .motion .boot-3{animation-delay:.23s}
  .motion .boot-4{animation-delay:.32s}
  .motion .boot-5{animation-delay:.3s}
  @keyframes boot{to{opacity:1;transform:none}}
}
@media print{.motion .rv,.motion .rv-kids>*,.motion .boot{opacity:1 !important;transform:none !important}}

/* ==========================================================================
   reckoner , the visitor's own number, multiplied
   ========================================================================== */
.reckon{background:var(--surface-mg);border-block:1px solid var(--line-soft)}
.reckon-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4.4rem);align-items:center}
@media (max-width:900px){.reckon-grid{grid-template-columns:1fr;gap:2.2rem}}
.reckon h2{max-width:16ch}
.reckon-note{margin-top:1.4rem;font-size:var(--t--1);color:var(--muted);max-width:46ch}
.reckon-box{background:oklch(100% 0 0 / .8);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:var(--rad-xl);box-shadow:var(--sh-l);padding:clamp(1.4rem,3vw,2.2rem)}
.reckon-label{display:block;font-family:var(--display);font-size:.86rem;font-weight:600;color:var(--muted)}
.reckon-big{display:block;font-family:var(--display);font-size:clamp(3.2rem,8vw,4.6rem);font-weight:600;line-height:1;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;margin:.3rem 0 .9rem}
.reckon-big::after{content:" hrs";font-size:.3em;font-weight:500;color:var(--muted);letter-spacing:-.01em}

.reckon input[type=range]{
  width:100%;height:34px;background:transparent;-webkit-appearance:none;appearance:none;cursor:grab;margin:0;
}
.reckon input[type=range]:active{cursor:grabbing}
.reckon input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--violet) var(--fill,30%),var(--line) var(--fill,30%))}
.reckon input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--line)}
.reckon input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--violet)}
.reckon input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:3px solid var(--violet);margin-top:-9px;
  box-shadow:0 4px 14px -4px oklch(54.7% .279 var(--h) / .6);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.reckon input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--violet);box-shadow:0 4px 14px -4px oklch(54.7% .279 var(--h) / .6)}
.reckon input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.reckon input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
.reckon input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px oklch(54.7% .279 var(--h) / .28)}
.reckon-scale{display:flex;justify-content:space-between;font-family:var(--display);font-size:.72rem;color:var(--muted);margin:-.2rem .3rem .3rem}
.reckon-outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1.3rem 0 1.5rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.reckon-outs div{display:grid;gap:.2rem}
.reckon-outs b{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2rem);font-weight:600;color:var(--violet-deep);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.reckon-outs span{font-size:.78rem;line-height:1.35;color:var(--muted);font-family:var(--display)}
@media (max-width:420px){.reckon-outs{grid-template-columns:1fr;gap:.7rem}.reckon-outs div{grid-template-columns:auto 1fr;align-items:baseline;gap:.6rem}}
.reckon-box .btn{width:100%}
.reckon-fine{margin-top:.7rem;font-size:.78rem;color:var(--muted);font-family:var(--display);text-align:center}

/* ==========================================================================
   comparison
   ========================================================================== */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rad-l);border:1px solid var(--line);background:oklch(100% 0 0 / .7)}
.cmp{width:100%;border-collapse:collapse;min-width:44rem;text-align:left}
.cmp th,.cmp td{padding:1.05rem 1.15rem;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{font-family:var(--display);font-size:.92rem;font-weight:650;color:var(--ink);letter-spacing:-.015em;border-bottom:1px solid var(--line);padding-block:.9rem}
.cmp thead .mine{color:#fff;background:var(--violet);border-radius:var(--rad-m) var(--rad-m) 0 0;border-bottom-color:transparent}
.cmp tbody th{font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--ink);width:12.5rem;letter-spacing:-.01em}
.cmp td{font-size:.92rem;line-height:1.55;color:var(--body)}
.cmp td.mine{background:var(--violet-wash);color:var(--ink);font-weight:500}
.cmp tbody tr:last-child td.mine{border-radius:0 0 var(--rad-m) var(--rad-m)}
.cmp tbody tr{transition:background .2s}
.cmp tbody tr:hover td:not(.mine){background:oklch(100% 0 0 / .55)}
@media (max-width:700px){
  .cmp{min-width:0;display:block}
  .cmp thead{display:none}
  .cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp tr{padding:1.1rem 1.1rem .4rem;border-bottom:1px solid var(--line)}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp tbody th{width:auto;font-size:1rem;padding:0 0 .7rem}
  .cmp td{padding:.55rem .8rem;border:0;border-radius:var(--rad-s);margin-bottom:.5rem;background:oklch(100% 0 0 / .6)}
  .cmp td::before{content:attr(data-col);display:block;font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
  .cmp td.mine::before{color:var(--violet-deep)}
}

/* ==========================================================================
   proof , an empty state on purpose
   ========================================================================== */
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.proof-grid li{position:relative;padding:1.5rem 1.3rem 1.3rem;border:1.5px dashed var(--line);border-radius:var(--rad-l);background:oklch(100% 0 0 / .4);display:grid;gap:.35rem;align-content:start}
.proof-grid .quote{font-family:var(--display);font-size:2.6rem;line-height:.6;color:var(--violet);opacity:.35}
.proof-grid b{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-top:.4rem}
.proof-grid span{font-size:.9rem;line-height:1.5;color:var(--muted)}

/* ---------- inline call to action ---------- */
.inline-cta{margin-left:.45rem;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);font-weight:600;font-size:.95rem;text-decoration:none;color:var(--violet);white-space:nowrap;border-bottom:1.5px solid oklch(54.7% .279 var(--h) / .35);transition:border-color .18s,color .18s}
.inline-cta:hover{color:var(--violet-deep);border-color:var(--violet-deep)}
.inline-cta svg{transition:transform .25s var(--ease)}
.inline-cta:hover svg{transform:translateX(3px)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* ---------- what happens next ---------- */
.next{margin-top:2rem;display:grid;gap:.1rem;counter-reset:n}
.next li{display:grid;grid-template-columns:auto 1fr;gap:.15rem .9rem;padding:.75rem 0;border-top:1px solid oklch(100% 0 0 / .2)}
.next li::before{
  counter-increment:n;content:counter(n);grid-row:span 2;
  width:24px;height:24px;border-radius:50%;background:oklch(100% 0 0 / .16);
  display:grid;place-items:center;font-family:var(--display);font-size:.72rem;font-weight:700;color:#fff;margin-top:.15rem;
}
.next b{font-family:var(--display);font-size:.94rem;font-weight:650;color:#fff}
.next span{font-size:.9rem;line-height:1.5;color:oklch(95% .035 var(--h))}

/* ---------- copy button ---------- */
.copy{margin-top:0;background:none;border:1px solid oklch(100% 0 0 / .34);color:#fff;border-radius:99px;font-family:var(--display);font-size:.7rem;font-weight:600;padding:.18rem .6rem;cursor:pointer;justify-self:start;transition:background .18s,border-color .18s}
.copy:hover{background:oklch(100% 0 0 / .16);border-color:#fff}
.copy.done{background:#fff;color:var(--violet-deep);border-color:#fff}

/* ---------- form extras ---------- */
.form-hd{font-family:var(--display);font-size:1.06rem;font-weight:600;color:#fff;letter-spacing:-.02em;margin-bottom:.2rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- sticky bar, small screens only ---------- */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  display:none;align-items:center;gap:1rem;padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:oklch(98.3% .009 var(--h) / .9);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.mobar span{font-family:var(--display);font-size:.92rem;font-weight:600;color:var(--ink)}
.mobar .btn{margin-left:auto;padding:.66rem 1.1rem;font-size:.92rem}
@media (max-width:760px){
  .mobar{display:flex}
  .mobar.on{transform:none}
  .totop{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
  body{padding-bottom:0}
}

/* ---------- accordion opens by height, not by a jump ---------- */
.faq details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .38s var(--ease),content-visibility .38s allow-discrete;
  transition-behavior:allow-discrete;
}
.faq details[open]::details-content{block-size:auto}
@supports not (interpolate-size:allow-keywords){
  .faq details::details-content{transition:none;block-size:auto}
}
:root{interpolate-size:allow-keywords}

/* ---------- tab panels morph rather than jump ---------- */
.tabpanel{animation:fadein .42s var(--ease) both}
@keyframes fadein{from{opacity:0;transform:translateY(10px) scale(.995)}}

/* the hours field, flashed when the reckoner fills it in */
.field select.flash{animation:flash 1.4s var(--ease)}
@keyframes flash{0%,100%{box-shadow:none}20%,60%{box-shadow:0 0 0 4px oklch(100% 0 0 / .55)}}
button[disabled]{opacity:.65;cursor:progress}

/* ==========================================================================
   the week board , the hero visual
   Forty cells, one per working hour. Nothing about it moves position: the
   cells change colour on a stagger and the caption cross-fades. No text is
   ever animated from one place to another.
   ========================================================================== */
.board{
  margin:0;background:oklch(100% 0 0 / .78);backdrop-filter:blur(22px);
  border:1px solid var(--line);border-radius:var(--rad-xl);
  box-shadow:var(--sh-l);overflow:hidden;
}
.board-hd{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.95rem 1.1rem;border-bottom:1px solid var(--line-soft)}
.board-title{font-family:var(--display);font-size:.94rem;font-weight:650;color:var(--ink);letter-spacing:-.02em}

/* segmented toggle */
.seg{position:relative;margin-left:auto;display:flex;padding:3px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.seg-pill{position:absolute;top:3px;bottom:3px;left:3px;width:var(--sw,50%);border-radius:99px;background:#fff;box-shadow:var(--sh-s);transform:translate3d(var(--sx,0),0,0);transition:transform .42s var(--ease),width .42s var(--ease)}
.seg button{position:relative;z-index:1;background:none;border:0;cursor:pointer;font-family:var(--display);font-size:.8rem;font-weight:600;color:var(--muted);padding:.36rem .85rem;border-radius:99px;transition:color .25s;white-space:nowrap}
.seg button[aria-pressed="true"]{color:var(--violet-deep)}

.board-grid{display:grid;grid-template-columns:1.2rem repeat(5,minmax(0,1fr));gap:.3rem;padding:.9rem 1.1rem .5rem}
.board-hours{display:grid;grid-template-rows:1.1rem repeat(8,1fr);gap:.18rem;font-family:var(--display);font-size:.58rem;color:var(--muted);text-align:right;padding-right:.15rem}
.board-hours span{display:grid;align-items:center;justify-items:end;line-height:1}
.board-hours span:first-child{min-height:0}
.board-day{display:grid;grid-template-rows:1.1rem repeat(8,1fr);gap:.18rem;min-width:0}
.board-day b{font-family:var(--display);font-size:.62rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.1}
.board-day i{
  display:block;border-radius:calc(4px * var(--r));min-height:1.15rem;
  border:1px solid transparent;position:relative;
  transition:background .5s var(--ease),border-color .5s var(--ease),opacity .5s var(--ease);
  transition-delay:calc(var(--i) * 9ms);
}
.board-day i.w{background:oklch(96.4% .006 var(--h));opacity:1}
.board-day i.a{background:linear-gradient(150deg,var(--violet),oklch(62.8% .277 calc(var(--h) + 18)));box-shadow:inset 0 1px 0 oklch(100% 0 0 / .22)}
.board-day i.a[data-label]::after{
  content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-size:.5rem;font-weight:650;letter-spacing:.04em;
  color:#fff;opacity:.92;transition:opacity .4s var(--ease);
  overflow:hidden;white-space:nowrap;padding-inline:.1rem;
}
/* the handed-over state */
.board.after .board-day i.a{background:transparent;border-color:oklch(54.7% .279 var(--h) / .28);border-style:dashed;opacity:1;box-shadow:none}
.board.after .board-day i.a[data-label]::after{opacity:0}
.board.after .board-day i.w{background:linear-gradient(150deg,oklch(93% .055 var(--h)),oklch(94% .04 calc(var(--h) - 70)));opacity:1;box-shadow:inset 0 1px 0 oklch(100% 0 0 / .8)}

.board-ft{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 1.1rem 1rem}
.board-stat{display:flex;align-items:baseline;gap:.45rem;flex:none}
.board-stat b{font-family:var(--display);font-size:1.9rem;font-weight:650;color:var(--violet-deep);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.board-stat span{font-family:var(--display);font-size:.78rem;color:var(--muted);font-weight:550;max-width:8rem;line-height:1.25}
.board-note{font-size:.82rem;line-height:1.45;color:var(--body);flex:1 1 12rem;transition:opacity .3s var(--ease)}
.board-note.fade{opacity:0}
.board-key{display:flex;flex-wrap:wrap;gap:.35rem 1rem;padding:.7rem 1.1rem;border-top:1px solid var(--line-soft);background:oklch(100% 0 0 / .45)}
.board-key li{display:flex;align-items:center;gap:.42rem;font-family:var(--display);font-size:.7rem;color:var(--muted);font-weight:550}
.board-key li::before{content:"";width:11px;height:11px;border-radius:3px;flex:none}
.board-key .k-a::before{background:linear-gradient(150deg,var(--violet),oklch(62.8% .277 calc(var(--h) + 18)))}
.board-key .k-w::before{background:var(--surface);border:1px solid var(--line)}
.board-key .k-h::before{border:1.5px dashed var(--violet)}
@media (max-width:520px){
  .board-grid{grid-template-columns:repeat(5,minmax(0,1fr));padding-inline:.85rem}
  .board-hours{display:none}
  .board-day i{min-height:1rem}
  .board-day i.a[data-label]::after{font-size:.44rem}
  .board-stat b{font-size:1.6rem}
}

/* ---------- sliding ink under the service tabs ---------- */
.tabs{position:relative}
.tab-ink{position:absolute;left:0;bottom:-1px;height:2.5px;width:0;border-radius:3px;background:linear-gradient(90deg,var(--violet),var(--magenta));transform:translate3d(var(--tx,0),0,0);transition:transform .42s var(--ease),width .42s var(--ease)}
.tabs button::after{display:none}

/* ---------- cursor light on the raised surfaces ---------- */
.plan,.reckon-box,.board{position:relative;isolation:isolate}
.plan::before,.reckon-box::before,.board::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(22rem 22rem at var(--mx,50%) var(--my,0%),
    oklch(70.9% .287 calc(var(--h) + 32) / .13),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease);
}
.plan:hover::before,.reckon-box:hover::before,.board:hover::before{opacity:1}

/* ---------- headings uncover rather than fade ---------- */
@media (prefers-reduced-motion:no-preference){
  .motion .rv h2,.motion .rv-kids h2{
    clip-path:inset(0 0 108% 0);
    transition:clip-path .85s var(--ease);
  }
  .motion .rv.in h2,.motion .rv-kids.in h2{clip-path:inset(-30% -30% -30% -30%)}
}

/* the board's stat swaps without moving */
.board-stat{transition:opacity .3s var(--ease)}
.board-stat.swap{opacity:.35}

/* aurora follows the pointer, gently */
.aurora{will-change:transform;transition:transform .9s cubic-bezier(.2,.7,.3,1)}

/* ---------- hero reassurance chips ---------- */
.hero-proofs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.hero-proofs li{display:inline-flex;align-items:center;gap:.42rem;font-family:var(--display);font-size:.82rem;font-weight:550;color:var(--body);background:oklch(100% 0 0 / .66);border:1px solid var(--line);border-radius:99px;padding:.4rem .8rem}
.hero-proofs svg{stroke:var(--violet);flex:none}

/* ==========================================================================
   small screens: less to scroll past
   ========================================================================== */

/* the three plans become one swipeable rail on a phone */
.plans-rail{margin-inline:0}
.rail-dots{display:none}
@media (max-width:760px){
  .plans-rail{
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .plans-rail::-webkit-scrollbar{display:none}
  .plans-grid{
    display:flex;gap:.9rem;width:max-content;padding-block:.6rem 1.1rem;
  }
  .plan{
    width:min(78vw,20rem);flex:none;scroll-snap-align:center;scroll-margin-inline:var(--gut);
  }
  .plan.featured{transform:none}
  .plan.featured:hover{transform:none}
  .rail-dots{display:flex;justify-content:center;gap:.45rem;margin-top:-.2rem}
  .rail-dots button{
    width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:var(--line);transition:background .25s,width .25s var(--ease);
  }
  .rail-dots button[aria-current="true"]{background:var(--violet);width:20px;border-radius:99px}
}

/* long sections collapse behind a control on a phone, and only on a phone */
.fold-toggle{display:none}
@media (max-width:760px){
  .fold-toggle{
    display:inline-flex;align-items:center;gap:.5rem;margin-top:-.6rem;
    background:oklch(100% 0 0 / .7);border:1px solid var(--line);border-radius:99px;
    padding:.6rem 1.1rem;cursor:pointer;font-family:var(--display);font-size:.9rem;
    font-weight:600;color:var(--violet-deep);transition:background .2s,border-color .2s;
  }
  .fold-toggle:hover{border-color:var(--violet)}
  .fold-toggle svg{transition:transform .35s var(--ease)}
  .fold-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .folded .fold-body{display:none}
  .folded .sec-head{margin-bottom:1.4rem}
}

/* a phone does not need the same air as a 27 inch monitor */
@media (max-width:760px){
  section{padding-block:clamp(2.6rem,7vw,3.4rem)}
  .sec-head{margin-bottom:1.6rem}
  .ticker{padding-block:.75rem}
  .ticker li{font-size:.86rem}
  .tools{margin-top:2rem;padding-top:1.4rem}
  .proof-grid{gap:.7rem}
  .chips{gap:.45rem}
  .chips li{font-size:.92rem;padding:.45rem .9rem}
}