@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:86px;

  --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:.55rem;transition:padding-block .4s var(--ease)}
/* The bar carries its own tinted glass at all times. Against the aurora a fully
   transparent header left the logo and the links floating on pale pink, which
   is where the contrast went. */
.hdr .bar{
  display:flex;align-items:center;gap:1.1rem;min-height:var(--hdr);
  padding-inline:clamp(.85rem,1.8vw,1.35rem);border-radius:99px;
  border:1px solid oklch(89% .035 var(--h) / .7);
  background:oklch(95.4% .026 var(--h) / .74);
  backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 oklch(100% 0 0 / .55);
  transition:background .4s var(--ease),border-color .4s var(--ease),
             box-shadow .4s var(--ease),min-height .4s var(--ease),
             padding .4s var(--ease);
}
.hdr.stuck{padding-block:.62rem}
.hdr.stuck .bar{
  min-height:66px;border-color:var(--line);
  background:oklch(97.2% .018 var(--h) / .86);backdrop-filter:blur(22px) saturate(1.7);
  box-shadow:0 18px 44px -30px oklch(24.3% .085 var(--h) / .6),
             inset 0 1px 0 oklch(100% 0 0 / .75);
}
.brand{display:flex;align-items:center;text-decoration:none;flex:none;min-width:0}
.brand img{height:clamp(42px,4.4vw,62px);width:auto;display:block;transition:transform .5s var(--ease),filter .5s var(--ease)}
.brand:hover img{transform:scale(1.035)}
.hdr.stuck .brand img{height:clamp(38px,3.6vw,50px)}

.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:oklch(100% 0 0 / .78);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:550;color:oklch(33% .07 var(--h));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:70px}
}

/* ---------- 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 .art{position:relative;width:78%;max-width:340px;overflow:visible}
.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/7.5;max-width:none;place-items:center}.svc-art .art{width:34%}}
@media (max-width:600px){
  .svc-art{aspect-ratio:16/9;place-items:start center;padding-top:1.2rem}
  .svc-art .art{width:54%}
  .svc-art figcaption{padding-bottom:.85rem}
}

.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}
/* The magenta hotspot sits top left, which is exactly where the heading, the
   steps and the contact details are. At its brightest it left white text at
   3.25:1. This veil is heaviest over that column and clears by the time it
   reaches the form, which carries its own glass. */
.band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,oklch(22% .09 var(--h) / .42) 0,
                             oklch(22% .09 var(--h) / .26) 34%,
                             oklch(22% .09 var(--h) / 0) 62%)}
@media (max-width:960px){
  .band::after{background:linear-gradient(180deg,oklch(22% .09 var(--h) / .4) 0,
                                          oklch(22% .09 var(--h) / .22) 55%,
                                          oklch(22% .09 var(--h) / .12) 100%)}
}
.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(56px,5.6vw,76px);width:auto;margin-bottom:1.8rem}
.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 ---------- */
/* A lightening glass let the cyan hotspot read straight through and put the
   white labels at 2.2:1. It darkens what is behind it instead, so the panel
   is a dependable backdrop wherever it lands on the gradient. */
.form{background:oklch(23% .085 var(--h) / .38);backdrop-filter:blur(16px) saturate(1.2);border:1px solid oklch(100% 0 0 / .22);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:clamp(62px,6.5vw,86px);width:auto;margin-bottom:1.25rem}
.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.
   ========================================================================== */
/* ==========================================================================
   reveal on scroll

   The stylesheet never hides anything. The starting state lives on
   .will-reveal, which only JavaScript applies, and only to elements it is
   about to observe. No script, a blocked script, a headless renderer or a
   dead observer all end up at the same place: a page that is simply visible.

   Travel is 8 to 16px. The complaint was that nothing moved, not that things
   should fly in from off screen.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .will-reveal{opacity:0;transition:opacity 180ms linear}
  .will-reveal.revealed{opacity:1}
  .will-reveal-kids>*{opacity:0;transition:opacity 180ms linear}
  .will-reveal-kids.revealed>*{opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .will-reveal{
    opacity:0;transform:translateY(var(--rise,12px));
    transition:opacity var(--dur,420ms) var(--ease) var(--wait,0ms),
               transform var(--dur,420ms) var(--ease) var(--wait,0ms);
  }
  .will-reveal.revealed{opacity:1;transform:none}
  .will-reveal-kids>*{
    opacity:0;transform:translateY(var(--rise,12px));
    transition:opacity var(--dur,420ms) var(--ease),transform var(--dur,420ms) var(--ease);
  }
  .will-reveal-kids.revealed>*{opacity:1;transform:none}

  /* the two places a settle is allowed, and only barely */
  .rv-settle.will-reveal-kids>*{transition-timing-function:cubic-bezier(.34,1.4,.64,1)}

  /* headings uncover rather than fade */
  /* the heading leads its own block by a beat. A clip-path uncover was tried
     here and pulled: it is the one effect on the page that can leave real
     content invisible if a single declaration is ever dropped. */
  .will-reveal h2{transform:translateY(6px);opacity:.001;transition:transform .55s var(--ease),opacity .45s var(--ease)}
  .will-reveal.revealed h2{transform:none;opacity:1}

  /* the one big continuous moment on the page */
  .band.revealed::before{animation:artdrift 26s var(--ease) infinite alternate}
}
@media (prefers-reduced-motion:no-preference){
  .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{.will-reveal,.will-reveal-kids>*,.motion .boot{opacity:1 !important;transform:none !important;clip-path:none !important}}

/* the four scenes are tied to scroll position, not to an on/off trigger,
   because that section is telling a short story as you descend */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .scenes.scrubbed li{
      animation:scene linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 32%;
    }
    @keyframes scene{from{opacity:0;transform:scale(.965) translateY(10px)}to{opacity:1;transform:none}}
  }
}

/* ==========================================================================
   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 ---------- */

/* 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}
}

/* ==========================================================================
   the three service vignettes
   Same language as the week board: rounded containers, soft fills, one accent.
   Violet is work being done, cyan is quiet volume, magenta marks one moment.
   ========================================================================== */
.art{overflow:visible}
.v-card{fill:oklch(100% 0 0 / .92);stroke:var(--line);stroke-width:1.4}
.v-rule{stroke:var(--line-soft);stroke-width:1.4}
.v-mute{fill:oklch(51.1% .061 var(--h) / .22)}
.v-bar{fill:oklch(51.1% .061 var(--h) / .3)}
.v-bar-2{fill:oklch(51.1% .061 var(--h) / .17)}
.v-on{fill:oklch(100% 0 0 / .8)}
.v-face{fill:oklch(87% .134 calc(var(--h) - 87) / .45)}
.v-row-bg{fill:transparent}
.v-check circle{fill:var(--violet)}
.v-check path{stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.v-chip rect:first-child{fill:var(--violet)}
.v-chip rect+rect{fill:oklch(100% 0 0 / .82)}
.v-in rect{fill:var(--surface);stroke:var(--line);stroke-width:1.4}
.v-out rect{fill:var(--violet)}
.v-type rect{fill:var(--surface);stroke:var(--line);stroke-width:1.4}
.v-tdot{fill:var(--cyan-ink);opacity:.55}
.v-done circle{fill:none;stroke:var(--magenta-ink);stroke-width:2.6}
.v-done path{stroke:var(--magenta-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.v-lane{fill:var(--surface)}
.v-tile{fill:oklch(100% 0 0 / .95);stroke:var(--line);stroke-width:1.4}
.v-move rect:first-child{fill:var(--violet)}
.v-won circle{fill:#fff;stroke:var(--magenta-ink);stroke-width:2.6}
.v-won path{stroke:var(--magenta-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* one verb each, so the three do not read as the same animation three times */
.v-check,.v-chip,.v-out,.v-done,.v-move,.v-tile,.v-won,.v-note,.v-in{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .art-run .v-row .v-check{animation:vpop .34s var(--ease) backwards;animation-delay:calc(.2s + var(--n) * .18s)}
  .art-run .v-row .v-row-bg{animation:vsweep .5s var(--ease) backwards;animation-delay:calc(.12s + var(--n) * .18s)}
  .art-run .v-chip{animation:vlift .45s var(--ease) backwards;animation-delay:.72s}
  .art-run .v-in{animation:vslidein .4s var(--ease) backwards;animation-delay:calc(var(--n) * .12s)}
  .art-run .v-tdot{animation:vbreathe 1.9s var(--ease) infinite;animation-delay:calc(var(--n) * .16s)}
  .art-run .v-out{animation:vslideout .45s var(--ease) backwards;animation-delay:.5s}
  .art-run .v-done{animation:vpop .4s var(--ease) backwards;animation-delay:.9s}
  .art-run .v-tile{animation:vfade .35s var(--ease) backwards;animation-delay:calc(var(--n) * .09s)}
  .art-run .v-move{animation:vshift .7s var(--ease) backwards;animation-delay:.42s}
  .art-run .v-won{animation:vpop .4s var(--ease) backwards;animation-delay:1s}
}
@keyframes vpop{0%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes vsweep{0%{fill:oklch(54.7% .279 var(--h) / 0)}45%{fill:oklch(54.7% .279 var(--h) / .1)}100%{fill:oklch(54.7% .279 var(--h) / 0)}}
@keyframes vlift{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes vslidein{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes vslideout{from{opacity:0;transform:translateX(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes vfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes vshift{0%{opacity:0;transform:translate(-84px,0) scale(.96)}25%{opacity:1}100%{opacity:1;transform:none}}
@keyframes vbreathe{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes draw{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}

/* visually hidden, still read by screen readers and crawlers */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* A frozen animation clock must never leave a drawing half built. Once the
   sequence has had its time, the entrances are cleared and every part falls
   back to its own resting state, which is simply visible. */
.art-settled .v-check,.art-settled .v-chip,.art-settled .v-in,.art-settled .v-out,
.art-settled .v-done,.art-settled .v-tile,.art-settled .v-move,.art-settled .v-won,
.art-settled .v-row-bg{animation:none !important}