/* ============================================================
   Hideal: design D  ("the manual")
   Structure and visual language modelled on agentation.com:
   a sticky top bar, one narrow reading column, dense 13/14px
   Inter throughout, and hairlines instead of boxes.
   Everything below is scoped to index.html. The older designs
   have their own stylesheets and share nothing but assets/.
   ============================================================ */

:root{
  /* ground + ink ------------------------------------------- */
  --bg:        #FDFDFC;
  --ink:       rgba(0,0,0,.85);   /* display                  */
  --head:      rgba(0,0,0,.78);   /* section headings         */
  --strong:    rgba(0,0,0,.80);   /* list items, labels       */
  --body:      rgba(0,0,0,.65);   /* running copy             */
  --muted:     rgba(0,0,0,.40);   /* the page's grey: nav rest state,
                                     captions, mono meta, markers */

  /* lines + fills ------------------------------------------ */
  --line:      rgba(0,0,0,.09);
  --line-soft: rgba(0,0,0,.055);
  --fill:      rgba(0,0,0,.025);
  --fill-2:    rgba(0,0,0,.05);
  --sk:        rgba(0,0,0,.07);   /* skeleton bars            */

  /* accents ------------------------------------------------ */
  --accent:    #E5484D;           /* mark, badges             */
  --link:      #2480ED;           /* in-copy links, pins      */

  /* type --------------------------------------------------- */
  --display: var(--sans);        /* display and body share Inter */
  --sans:  Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

  /* metrics ------------------------------------------------ */
  --col:   576px;                 /* reading column           */
  --gap:   24px;                  /* space between sections   */
  --r:     6px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:14px;
  font-weight:450;
  line-height:1.66;
  letter-spacing:-.08px;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:rgba(36,128,237,.16); }

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }

:focus-visible{
  outline:2px solid var(--link);
  outline-offset:2px;
  border-radius:3px;
}

.skip{
  position:absolute; left:-9999px; top:0;
  padding:8px 12px; font-size:12px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
}
.skip:focus{ left:12px; top:12px; z-index:60; }

.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   NAV: one sticky bar across the top, its contents aligned
   to the same column as the page body
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(253,253,252,.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.nav__in{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--col); margin:0 auto;
  padding:11px 24px;
}

.nav__logo{
  display:flex; align-items:center; gap:6px;
  flex:0 0 auto;
  color:var(--accent);
}
.nav__logo:hover{ text-decoration:none; }
.nav__logo svg{ display:block; width:15px; height:15px; }
.nav__logo span{
  font-family:var(--display);
  font-size:15px; font-weight:500;
  letter-spacing:-.2px;
  line-height:1;
  white-space:nowrap;
}

.nav__links{ display:flex; align-items:center; gap:16px; }

.nav__link{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:400; line-height:1.45;
  letter-spacing:-.01px;
  color:var(--muted);
  white-space:nowrap;
  transition:color .14s ease;
}
.nav__link:hover{ color:var(--strong); text-decoration:none; }
.nav__link.is-active{ color:rgba(0,0,0,.8); }

/* ============================================================
   COLUMN
   ============================================================ */
.doc{
  max-width:var(--col);
  margin:0 auto;
  padding:44px 24px 48px;
  display:flex; flex-direction:column; gap:14px;
}

.doc > section{ margin-top:var(--gap); scroll-margin-top:68px; }
.doc > section.is-ruled{
  padding-top:32px;
  border-top:1px solid var(--line-soft);
}

/* ---- headings ------------------------------------------- */
h1{
  margin:0 0 8px;
  font-family:var(--display);
  font-size:32px; font-weight:500;
  line-height:1.14; letter-spacing:-.64px;
  color:var(--ink);
}

h2{
  margin:0 0 18px;
  font-family:var(--sans);
  font-size:15px; font-weight:550;
  line-height:1.45; letter-spacing:-.16px;
  color:var(--head);
  display:flex; align-items:center; gap:8px;
}
h2 .tag{
  font-family:var(--mono);
  font-size:12px; font-weight:400;
  text-transform:uppercase; letter-spacing:.18px;
  color:var(--accent);
}
h3{
  margin:0 0 2px;
  font-size:13px; font-weight:500;
  line-height:1.5; letter-spacing:-.08px;
  color:rgba(0,0,0,.7);
}

p{ margin:0 0 12px; }
p:last-child{ margin-bottom:0; }

strong{ font-weight:550; color:var(--strong); }
em{ font-style:italic; }

code{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}

/* ---- lists ---------------------------------------------- */
.doc ol,
.doc ul{
  margin:8px 0 0;
  padding-left:16px;
  color:var(--strong);
}
.doc li{ margin:0; padding-left:2px; }
.doc li + li{ margin-top:2px; }
.doc li::marker{ color:var(--muted); }
.doc ul{ list-style:disc; }
.doc ol{ list-style:decimal; }

/* ============================================================
   HEADER: the display line
   ============================================================ */
.head{ padding-bottom:12px; }
.head p.lede{
  margin:0;
  max-width:52ch;
  color:var(--body);
}

/* ---- sticker: a die-cut vinyl sticker hovering over the demo's
   top-right corner. White cut-line border, orange face, a soft
   cast shadow and a gloss band; it lands with a slap and sits
   at a slight tilt. */
.demo{ position:relative; }

.sticker{
  --tilt:-7deg;
  position:absolute; top:-26px; right:-18px; z-index:5;
  cursor:default;
  display:block;
  padding:3px;                          /* the white die-cut edge */
  border-radius:14px;
  background:#fff;
  transform:rotate(var(--tilt));
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.06),
    0 1px 1px rgba(0,0,0,.08),
    0 4px 8px -2px rgba(120,40,0,.18),
    0 14px 24px -10px rgba(120,40,0,.32);
  transition:transform .22s cubic-bezier(.3,1.6,.5,1), box-shadow .22s ease;
  animation:sticker-slap .55s cubic-bezier(.2,1.4,.4,1) .25s both;
}
.sticker:hover{
  text-decoration:none;
  transform:rotate(calc(var(--tilt) + 3deg)) translateY(-2px) scale(1.04);
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.06),
    0 2px 2px rgba(0,0,0,.08),
    0 8px 14px -4px rgba(120,40,0,.22),
    0 22px 32px -12px rgba(120,40,0,.36);
}

.sticker__face{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:8px 14px 9px;
  border-radius:11px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(120% 90% at 20% 0%, #FF8A3D 0%, transparent 60%),
    linear-gradient(160deg, #FF6B1A 0%, #F24E00 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 4px rgba(150,40,0,.25);
}
/* gloss: a diagonal sheen that sweeps once after it lands */
.sticker__face::after{
  content:"";
  position:absolute; inset:-40% auto -40% -60%;
  width:45%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg);
  animation:sticker-gloss 1s ease .85s both;
  pointer-events:none;
}

.sticker__top{
  font-family:var(--mono);
  font-size:10px; font-weight:600;
  line-height:1.2;
  letter-spacing:1.4px;
  text-transform:uppercase;
  opacity:.85;
}
.sticker__main{
  font-size:16px; font-weight:750;
  line-height:1.15;
  letter-spacing:-.4px;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(150,40,0,.35);
}

@keyframes sticker-slap{
  0%  { opacity:0; transform:rotate(calc(var(--tilt) - 14deg)) scale(1.6); }
  60% { opacity:1; transform:rotate(calc(var(--tilt) + 2deg)) scale(.94); }
  100%{ opacity:1; transform:rotate(var(--tilt)) scale(1); }
}
@keyframes sticker-gloss{
  from{ left:-60%; }
  to  { left:130%; }
}

/* the phrase carried in the studio's own colour */
.hl{ color:var(--accent); }

/* hero call to action */
.cta{
  display:flex; align-items:center; gap:12px;
  margin-top:2px;
}
/* availability, sitting beside the button rather than in a top strip */
.avail{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:450; letter-spacing:-.02px;
  color:var(--muted);
}
.avail__dot{
  flex:0 0 auto;
  width:5px; height:5px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(229,72,77,.14);
}

/* ============================================================
   DEMO: an abstract product screen that builds itself
   ============================================================ */
.demo{ margin:24px 0 12px; }

.win{
  position:relative;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.win__bar{
  display:flex; align-items:center; gap:5px;
  padding:9px 10px;
  border-bottom:1px solid var(--line-soft);
  background:var(--fill);
}
.win__dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(0,0,0,.13);
}
.win__dot:nth-child(1){ background:#F5695E; }
.win__dot:nth-child(2){ background:#F6BE4F; }
.win__dot:nth-child(3){ background:#61C454; }
.win__url{
  flex:1;
  margin-left:6px;
  padding:2px 8px;
  border-radius:4px;
  background:rgba(0,0,0,.03);
  font-family:var(--mono); font-size:9px;
  color:rgba(0,0,0,.3);
}

.win__body{
  position:relative;
  display:flex;
  min-height:196px;
  padding:0;
}

.win__rail{
  flex:0 0 34px;
  display:flex; flex-direction:column; gap:7px;
  padding:12px 8px;
  border-right:1px solid var(--line-soft);
}
.win__main{
  flex:1;
  display:flex; flex-direction:column; gap:9px;
  padding:12px;
}

/* skeleton vocabulary */
.sk{ display:block; height:7px; border-radius:3px; background:var(--sk); }
.sk--sq{ height:18px; border-radius:5px; }
.sk--dot{ width:18px; height:18px; border-radius:50%; }
.sk--nav{ height:10px; border-radius:3px; }
.sk--nav.is-on{ background:rgba(0,0,0,.14); }
.sk--title{ width:88px; height:9px; background:rgba(0,0,0,.14); }

.win__head{ display:flex; align-items:center; gap:7px; }
.win__head .sk--title{ margin-right:auto; }

/* buttons: one outlined, one filled, in the product's own accent */
.ui{ display:block; flex:0 0 auto; height:17px; border-radius:5px; }
.ui--ghost{ width:36px; border:1px solid var(--line); }
.ui--cta{
  width:52px;
  background:var(--link);
  box-shadow:0 1px 2px rgba(36,128,237,.3);
}

.win__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tile{
  display:flex; flex-direction:column; gap:6px;
  padding:9px;
  border:1px solid var(--line-soft); border-radius:5px;
}
.tile > .sk:first-child{ width:60%; }
.tile__figure{ display:flex; align-items:center; gap:5px; }
.tile__figure .sk--big{ width:38px; height:11px; background:rgba(0,0,0,.11); }
/* a trend chip beside each figure */
.chip{
  flex:0 0 auto;
  width:17px; height:8px;
  border-radius:4px;
  background:rgba(38,152,86,.2);
}

.win__chart{
  height:52px;
  border:1px solid var(--line-soft); border-radius:5px;
  padding:6px;
}
.win__chart svg{ display:block; width:100%; height:100%; }

.win__rows{ display:flex; flex-direction:column; gap:8px; }
.row{ display:flex; align-items:center; gap:8px; }
.av{
  flex:0 0 auto;
  width:14px; height:14px;
  border-radius:50%;
  background:rgba(0,0,0,.1);
}
.row .sk{ flex:1 1 auto; }
.row:nth-child(2) .sk{ max-width:74%; }
.row:nth-child(3) .sk{ max-width:58%; }
.status{
  flex:0 0 auto;
  width:32px; height:11px;
  border-radius:6px;
  background:rgba(36,128,237,.16);
}
.status--alt{ background:rgba(38,152,86,.2); }

/* ── the screen assembling itself ───────────────────────────
   The frame stays put (it is the artboard) and the interface
   is built inside it, piece by piece, then cleared and built
   again. Every part shares one `build` animation on one clock
   (--dur); the only thing that differs is --d, the moment each
   piece arrives. Retime the whole sequence from --dur, or move
   a single piece by editing its --d.
   ───────────────────────────────────────────────────────── */
.win__body,
.win__bar{ --dur:16s; }

/* the shared arrival: rise, sharpen, settle */
.win__bar .win__dot,
.win__url,
.win__rail > span,
.win__head > span,
.win__tiles .tile,
.win__chart,
.win__rows .row:not(.row--new){
  animation:build var(--dur) cubic-bezier(.22,.85,.3,1.03) var(--d,0s) infinite backwards;
}

@keyframes build{
  0%      { opacity:0; transform:translateY(7px) scale(.965); filter:blur(3px); }
  4%      { opacity:1; transform:none;                        filter:blur(0); }
  84%     { opacity:1; transform:none;                        filter:blur(0); }
  90%     { opacity:0; transform:translateY(-4px) scale(.99); filter:blur(2px); }
  100%    { opacity:0; transform:translateY(7px) scale(.965); filter:blur(3px); }
}

/* the order things get built in */
.win__bar .win__dot:nth-child(1){ --d:.05s; }
.win__bar .win__dot:nth-child(2){ --d:.12s; }
.win__bar .win__dot:nth-child(3){ --d:.19s; }
.win__url                       { --d:.30s; }

.win__rail > span:nth-child(1)  { --d:.50s; }
.win__rail > span:nth-child(2)  { --d:.60s; }
.win__rail > span:nth-child(3)  { --d:.68s; }
.win__rail > span:nth-child(4)  { --d:.76s; }
.win__rail > span:nth-child(5)  { --d:.84s; }

.win__head > span:nth-child(1)  { --d:1.00s; }
.win__head > span:nth-child(2)  { --d:1.10s; }
.win__head > span:nth-child(3)  { --d:1.19s; }

.win__tiles .tile:nth-child(1)  { --d:1.28s; }
.win__tiles .tile:nth-child(2)  { --d:1.40s; }
.win__tiles .tile:nth-child(3)  { --d:1.52s; }

.win__chart                     { --d:1.74s; }

.win__rows .row:nth-child(1)    { --d:2.24s; }
.win__rows .row:nth-child(2)    { --d:2.36s; }
.win__rows .row:nth-child(3)    { --d:2.48s; }

/* the chart draws itself once its panel has landed */
.win__chart .line{
  stroke-dasharray:420;
  animation:draw-line var(--dur) cubic-bezier(.4,0,.2,1) 1.86s infinite backwards;
}
.win__chart .area{
  animation:build var(--dur) ease-out 2.02s infinite backwards;
  transform-origin:50% 100%;
}

@keyframes draw-line{
  0%       { stroke-dashoffset:420; }
  11%      { stroke-dashoffset:0; }
  84%      { stroke-dashoffset:0; opacity:1; }
  90%,100% { stroke-dashoffset:0; opacity:0; }
}


/* ── the assistant panel ────────────────────────────────────
   Same skeleton language as the dashboard, but unmistakably a
   chat: a sparkle mark, a thread, and a prompt box. Its beats
   run on the same --dur clock as the build, written straight
   as percentages (no --d offset) so the times read plainly:
     18.7–23%  panel slides in       26–34%   a prompt is typed
     34.4%     sent                  37.5–43% assistant thinks
     44–48%    the reply streams     52–55%   the dashboard changes
   ───────────────────────────────────────────────────────── */
.ai{
  position:absolute; top:0; right:0; bottom:0;
  width:20%;
  min-width:76px;
  z-index:2;
  display:flex; flex-direction:column;
  background:#fff;
  border-left:1px solid var(--line);
  box-shadow:-7px 0 18px rgba(0,0,0,.055);
  animation:ai-panel var(--dur) cubic-bezier(.22,.85,.3,1.03) infinite;
}

@keyframes ai-panel{
  0%,18.7%   { opacity:0; transform:translateX(100%); }
  23%,84%    { opacity:1; transform:translateX(0); }
  90%,100%   { opacity:0; transform:translateX(100%); }
}

/* the sparkle is what marks this as the assistant */
.spark{ display:block; flex:0 0 auto; width:11px; height:11px; color:var(--link); }
.spark svg{ display:block; width:100%; height:100%; fill:currentColor; }
.spark--sm{ width:8px; height:8px; margin-top:1px; }

.ai__head{
  display:flex; align-items:center; gap:5px;
  padding:8px 8px 7px;
  border-bottom:1px solid var(--line-soft);
}
.ai__title{ flex:1 1 auto; height:6px; }
.ai__close{
  position:relative;
  flex:0 0 auto; width:8px; height:8px;
}
.ai__close::before,
.ai__close::after{
  content:""; position:absolute; left:0; top:3.5px;
  width:8px; height:1px; border-radius:1px;
  background:rgba(0,0,0,.22);
}
.ai__close::before{ transform:rotate(45deg); }
.ai__close::after { transform:rotate(-45deg); }

.ai__thread{
  flex:1 1 auto;
  display:flex; flex-direction:column; gap:7px;
  padding:9px 8px;
  overflow:hidden;
}

/* the prompt, as a sent bubble */
.ai__msg{
  align-self:flex-end;
  width:76%; height:19px;
  border-radius:7px 7px 2px 7px;
  background:rgba(36,128,237,.13);
  animation:ai-msg var(--dur) cubic-bezier(.22,.85,.3,1.03) infinite;
}
@keyframes ai-msg{
  0%,35.4%   { opacity:0; transform:translateY(5px) scale(.96); }
  37%,84%    { opacity:1; transform:none; }
  90%,100%   { opacity:0; transform:translateY(5px) scale(.96); }
}

/* thinking, before the answer */
.ai__dots{
  display:flex; align-items:center; gap:3px;
  height:0; overflow:hidden; opacity:0;
  animation:ai-thinking var(--dur) ease-out infinite;
}
.ai__dots span{
  width:4px; height:4px; border-radius:50%;
  background:var(--link);
  animation:ai-bounce .9s ease-in-out infinite;
}
.ai__dots span:nth-child(2){ animation-delay:.12s; }
.ai__dots span:nth-child(3){ animation-delay:.24s; }

@keyframes ai-thinking{
  0%,37.3%   { height:0; opacity:0; }
  38%,42.6%  { height:6px; opacity:1; }
  43.4%,100% { height:0; opacity:0; }
}
@keyframes ai-bounce{
  0%,100% { transform:translateY(0);    opacity:.35; }
  50%     { transform:translateY(-2.5px); opacity:1; }
}

/* the answer, streaming a line at a time */
.ai__reply{ display:flex; align-items:flex-start; gap:5px; }
.ai__lines{ flex:1 1 auto; display:flex; flex-direction:column; gap:4px; }
.ai__line{
  display:block; height:5px; border-radius:3px;
  background:var(--sk);
}
.ai__line:nth-child(2){ width:86%; }
.ai__line:nth-child(3){ width:58%; }

.ai__reply .spark--sm,
.ai__line{
  animation:ai-line var(--dur) ease-out var(--d,0s) infinite backwards;
}
@keyframes ai-line{
  0%,44.2%   { opacity:0; transform:translateY(3px); }
  45.6%,84%  { opacity:1; transform:none; }
  90%,100%   { opacity:0; transform:translateY(3px); }
}

/* the prompt box */
.ai__input{
  display:flex; align-items:center; gap:3px;
  margin:0 8px 8px;
  padding:0 5px;
  height:22px;
  border:1px solid var(--line);
  border-radius:6px;
}
.ai__typed{
  width:0; height:5px; border-radius:3px;
  background:rgba(0,0,0,.17);
  animation:ai-type var(--dur) linear infinite;
}
@keyframes ai-type{
  0%,26%     { width:0; }
  26.1%      { width:0; animation-timing-function:steps(7,end); }
  33.8%      { width:60%; }
  34.3%      { width:60%; }
  34.4%,100% { width:0; }
}

/* the caret runs two animations: one says when it exists,
   the other blinks it, on separate properties so neither wins */
.ai__caret{
  width:1.5px; height:9px; border-radius:1px;
  background:var(--link);
  visibility:hidden;
  animation:ai-caret var(--dur) steps(1,end) infinite,
            ai-blink .85s steps(1,end) infinite;
}
@keyframes ai-caret{
  0%,25.4%   { visibility:hidden; }
  25.5%,34.3%{ visibility:visible; }
  34.4%,100% { visibility:hidden; }
}
@keyframes ai-blink{
  0%,49%   { opacity:1; }
  50%,100% { opacity:0; }
}

.ai__send{
  flex:0 0 auto; margin-left:auto;
  width:13px; height:13px; border-radius:50%;
  background:var(--link);
  animation:ai-send var(--dur) cubic-bezier(.3,1.4,.5,1) infinite;
}
@keyframes ai-send{
  0%,34.1%   { transform:scale(1); }
  34.7%      { transform:scale(.8); }
  35.6%,100% { transform:scale(1); }
}

/* ── what the prompt does to the dashboard ────────────────── */

/* the chart registers the change */
.flash{
  position:absolute; inset:0;
  border:1.5px solid var(--link);
  border-radius:5px;
  opacity:0; pointer-events:none;
  animation:ai-flash var(--dur) ease-out infinite;
}
@keyframes ai-flash{
  0%,51.4%   { opacity:0; box-shadow:0 0 0 0 rgba(36,128,237,.3); }
  52.6%      { opacity:1; box-shadow:0 0 0 3px rgba(36,128,237,.16); }
  57.5%,100% { opacity:0; box-shadow:0 0 0 9px rgba(36,128,237,0); }
}

/* and a row lands, tinted, then settling in with the rest */
.win__rows .row--new{
  margin:0 -4px; padding:0 4px;
  border-radius:4px;
  animation:ai-row var(--dur) cubic-bezier(.22,.85,.3,1.03) infinite,
            ai-row-tint var(--dur) ease-out infinite;
}
@keyframes ai-row{
  0%,52.8%   { opacity:0; transform:translateY(4px); }
  54.6%,84%  { opacity:1; transform:none; }
  90%,100%   { opacity:0; transform:translateY(4px); }
}
@keyframes ai-row-tint{
  0%,53%    { background:rgba(36,128,237,.13); }
  63%       { background:rgba(36,128,237,.13); }
  73%,100%  { background:rgba(36,128,237,0); }
}

/* ============================================================
   DELIVERABLE CARDS
   A tinted panel per deliverable, each holding a small abstract
   animation drawn in the same vocabulary as the hero mockup:
   skeleton shapes that rise, sharpen and settle. One clock
   (--cdur) runs them all; --cd staggers the four cards so the
   grid animates in a cascade rather than in lockstep, and --d
   orders the pieces inside a single panel.
   ============================================================ */
/* `.doc ul` is (0,1,1) and would outrank a bare `.cards`, pushing the
   whole grid 16px right of the heading. Scope it to win. */
.doc .cards{
  --cdur:11s;
  margin:0; padding:0;
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr;
  gap:26px 16px;
}
/* `.doc li` adds 2px of padding and `.doc li + li` a 2px top margin,
   both (0,1,1). A grid cell wants neither, so override at (0,2,0). */
.doc .card{ display:flex; flex-direction:column; margin:0; padding:0; }
.card__art{
  position:relative;
  margin-bottom:11px;
  aspect-ratio:3 / 2;
  border-radius:6px;
  background:rgba(0,0,0,.035);
  overflow:hidden;
}
.card h3{ margin:0 0 2px; }
.card p{ margin:0; font-size:13px; color:var(--body); }

/* the drawing area inside a panel */
/* Anchored left at the same 15px inset the hi-fi screen uses, so all
   four illustrations start on one line. Centring them instead made the
   inset track the panel width (44px desktop, 59px on a phone) while the
   hi-fi card stayed at 15px. */
.art{
  position:absolute;
  left:15px; right:15px;
  top:50%;
  transform:translateY(-50%);
  height:60%;
}

/* the shared arrival, matching the hero's `build` */
.wf,.tok,.cmp,.ship__app,.hifi__app{
  animation:pop var(--cdur) cubic-bezier(.22,.85,.3,1.03)
            calc(var(--cd,0s) + var(--d,0s)) infinite backwards;
}
/* The tail after 78% has to outlast the whole cascade, or the first
   card restarts while the last one is still leaving. The largest delay
   is 1.22s (card two's last component); the tail is 22% of 11s = 2.42s. */
@keyframes pop{
  0%      { opacity:0; transform:translateY(6px) scale(.96); filter:blur(2.5px); }
  6%      { opacity:1; transform:none;                       filter:blur(0); }
  70%     { opacity:1; transform:none;                       filter:blur(0); }
  78%     { opacity:0; transform:translateY(-4px) scale(.99); filter:blur(2px); }
  100%    { opacity:0; transform:translateY(6px) scale(.96);  filter:blur(2.5px); }
}

/* ---- 01 wireframes: dashed blocks ------------------------- */
.wire .wf{
  position:absolute;
  left:var(--x); top:var(--y);
  width:var(--w); height:var(--h);
  border:1px dashed rgba(0,0,0,.22);
  border-radius:3px;
}

/* ---- 02 design system: tokens, then components ------------- */
.sys{
  display:flex; flex-direction:column; justify-content:center; gap:13px;
}
.sys__row{ display:flex; align-items:center; gap:7px; }
.sys__row--stack{ flex-direction:column; align-items:stretch; gap:6px; }
.tok{
  width:13px; height:13px; border-radius:50%;
  background:var(--c);
}
.cmp{
  height:7px; border-radius:3px;
  background:rgba(0,0,0,.12);
}
.cmp--mid{ width:70%; }
.cmp--pill{
  width:38%; height:13px; border-radius:7px;
  background:rgba(36,128,237,.28);
}

/* ---- 03 hi-fi UI ------------------------------------------
   The top-left corner of a dashboard, zoomed in so it bleeds
   off the right and bottom of the panel. Everything starts
   blocked out (dashed, grey, unfilled) and at 34% of the
   card clock it becomes finished UI: solid borders, white
   cards, a blue action, live figures and a real chart.
   ---------------------------------------------------------- */
.hifi{ position:absolute; inset:0; }

/* anchored top-left, sized past the panel so it crops */
.hifi__app{
  position:absolute;
  left:15px; top:15px;
  right:-62px; bottom:-50px;
  display:flex;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  --d:0s;
}

.hifi__rail{
  flex:0 0 31px;
  display:flex; flex-direction:column; gap:7px;
  padding:9px 7px;
  border-right:1px solid var(--line-soft);
}
.hifi__logo{
  width:15px; height:15px; border-radius:4px;
  animation:hf-logo var(--cdur) ease-out calc(var(--cd,0s)) infinite;
}
.hifi__nav{
  height:6px; border-radius:2px;
  animation:hf-ink var(--cdur) ease-out calc(var(--cd,0s)) infinite;
}
.hifi__nav--on{
  animation-name:hf-navon;
}

.hifi__main{
  flex:1 1 auto;
  display:flex; flex-direction:column; gap:9px;
  padding:9px;
  min-width:0;
}

.hifi__head{ display:flex; align-items:center; gap:9px; }
.hifi__title{
  flex:0 0 auto;
  width:62px; height:8px; border-radius:3px;
  animation:hf-ink var(--cdur) ease-out calc(var(--cd,0s)) infinite;
}
.hifi__btn{
  flex:0 0 auto;
  width:48px; height:17px; border-radius:5px;
  animation:hf-btn var(--cdur) ease-out calc(var(--cd,0s)) infinite;
}

.hifi__tiles{ display:flex; gap:8px; }
.hifi__tile{
  position:relative;
  flex:0 0 auto;
  width:107px; height:41px;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:0 9px;
  border-radius:5px;
  animation:hf-block var(--cdur) ease-out calc(var(--cd,0s)) infinite;
}
.hifi__bar{
  width:44%; height:5px; border-radius:3px;
  background:rgba(0,0,0,.11);
}
.hifi__figure{
  width:30px; height:9px; border-radius:3px;
  animation:hf-ink var(--cdur) ease-out calc(var(--cd,0s)) infinite;
}
/* the trend chip only exists once the screen is real */
.hifi__chip{
  position:absolute; right:9px; bottom:11px;
  width:17px; height:8px; border-radius:4px;
  background:rgba(38,152,86,.24);
  opacity:0;
  animation:hf-appear var(--cdur) ease-out calc(var(--cd,0s)) infinite;
}

.hifi__chart{
  flex:0 0 auto;
  height:56px;
  padding:6px;
  border-radius:5px;
  animation:hf-block var(--cdur) ease-out calc(var(--cd,0s)) infinite;
}
.hifi__chart svg{ display:block; width:100%; height:100%; }
.hifi__area,
.hifi__line{
  opacity:0;
  animation:hf-appear var(--cdur) ease-out calc(var(--cd,0s)) infinite;
}

/* ---- the moment it stops being a wireframe ---------------- */
/* blocked-out containers become real cards */
@keyframes hf-block{
  0%,32%   { border:1px dashed rgba(0,0,0,.2); background:rgba(255,255,255,0); }
  40%,70%  { border:1px solid var(--line);     background:rgba(252,252,252,1); }
  78%,100% { border:1px dashed rgba(0,0,0,.2); background:rgba(255,255,255,0); }
}
/* grey placeholder text becomes ink */
@keyframes hf-ink{
  0%,32%   { background:rgba(0,0,0,.1); }
  40%,70%  { background:rgba(0,0,0,.22); }
  78%,100% { background:rgba(0,0,0,.1); }
}
/* the action gets its colour */
@keyframes hf-btn{
  0%,32%   { background:rgba(0,0,0,.1); }
  40%,70%  { background:var(--link); }
  78%,100% { background:rgba(0,0,0,.1); }
}
@keyframes hf-logo{
  0%,32%   { background:rgba(0,0,0,.14); }
  40%,70%  { background:var(--link); }
  78%,100% { background:rgba(0,0,0,.14); }
}
@keyframes hf-navon{
  0%,32%   { background:rgba(0,0,0,.1); }
  40%,70%  { background:rgba(36,128,237,.32); }
  78%,100% { background:rgba(0,0,0,.1); }
}
/* the things that simply do not exist in a wireframe */
@keyframes hf-appear{
  0%,34%   { opacity:0; }
  43%,70%  { opacity:1; }
  78%,100% { opacity:0; }
}

/* ---- 04 live code: a PR, merged, live ---------------------
   The client's app, with an empty dashed slot where a chart
   should be. A pull request lands over it, its checks pass,
   a cursor merges it, a deploy bar sweeps the window, the
   chart draws itself into the slot and a Live badge lands in
   the bar. On the card clock:
     PR 8%   checks pass 23%   merge 30-31%   deploy 32-38%
     chart 38%   live 45%   all out 70-78%
   ---------------------------------------------------------- */
.ship{ position:absolute; inset:0; }

/* the app: bleeds off the bottom, like the hi-fi screen */
.ship__app{
  position:absolute;
  left:24%; right:15px; top:15px; bottom:-26px;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  --d:0s;
}
.ship__bar{
  flex:0 0 17px;
  display:flex; align-items:center; gap:3px;
  padding:0 6px;
  border-bottom:1px solid var(--line-soft);
}
.ship__dot{ width:4px; height:4px; border-radius:50%; background:rgba(0,0,0,.12); }
.ship__url{ width:30%; height:5px; margin-left:6px; border-radius:3px; background:rgba(0,0,0,.07); }

/* deployed */
.ship__live{
  margin-left:auto;
  display:flex; align-items:center; gap:3px;
  height:11px; padding:0 5px 0 4px;
  border-radius:6px;
  background:rgba(42,157,99,.12);
  color:#2A9D63;
  font:600 7px/1 var(--sans);
  letter-spacing:.2px;
  animation:ship-live var(--cdur) cubic-bezier(.3,1.4,.5,1) var(--cd,0s) infinite;
}
.ship__pulse{
  position:relative;
  width:4px; height:4px; border-radius:50%;
  background:#2A9D63;
}
.ship__pulse::after{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  background:#2A9D63;
  animation:ship-pulse 1.4s ease-out infinite;
}
@keyframes ship-live{
  0%,45%   { opacity:0; transform:scale(.5); }
  49%,70%  { opacity:1; transform:none; }
  78%,100% { opacity:0; transform:none; }
}
@keyframes ship-pulse{
  0%   { transform:scale(1); opacity:.6; }
  100% { transform:scale(3.2); opacity:0; }
}

/* the deploy sweeping the window */
.ship__deploy{
  flex:0 0 2px;
  background:var(--link);
  transform-origin:left;
  animation:ship-deploy var(--cdur) cubic-bezier(.5,0,.3,1) var(--cd,0s) infinite;
}
@keyframes ship-deploy{
  0%,32%   { transform:scaleX(0); opacity:1; }
  38%      { transform:scaleX(1); opacity:1; }
  42%,100% { transform:scaleX(1); opacity:0; }
}

.ship__body{ flex:1; display:flex; min-height:0; }
.ship__rail{
  flex:0 0 22px;
  display:flex; flex-direction:column; gap:6px;
  padding:8px 6px;
  border-right:1px solid var(--line-soft);
}
.ship__nav{ height:5px; border-radius:2px; background:rgba(0,0,0,.1); }
.ship__nav--on{ background:rgba(36,128,237,.32); }
.ship__main{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:7px;
  padding:8px;
}
.ship__head{ display:flex; align-items:center; justify-content:space-between; }
.ship__title{ width:34%; height:6px; border-radius:3px; background:rgba(0,0,0,.2); }
.ship__btn{ width:18%; height:10px; border-radius:3px; background:var(--link); }

/* the slot the code fills */
.ship__chart{
  position:relative;
  flex:0 0 46%;
  border-radius:4px;
  animation:ship-slot var(--cdur) ease-out var(--cd,0s) infinite;
}
.ship__chart svg{ position:absolute; inset:6px 0 0; width:100%; height:calc(100% - 6px); }
@keyframes ship-slot{
  0%,37%   { border:1px dashed rgba(0,0,0,.2);  background:rgba(0,0,0,.02); box-shadow:0 0 0 0 rgba(36,128,237,0); }
  39%      { border:1px solid rgba(36,128,237,.5); background:#fff;   box-shadow:0 0 0 4px rgba(36,128,237,.18); }
  48%,70%  { border:1px solid var(--line);     background:#fff;      box-shadow:0 0 0 7px rgba(36,128,237,0); }
  78%,100% { border:1px dashed rgba(0,0,0,.2); background:rgba(0,0,0,.02); box-shadow:0 0 0 0 rgba(36,128,237,0); }
}
.ship__line{
  stroke-dasharray:260; stroke-dashoffset:260;
  animation:ship-line var(--cdur) cubic-bezier(.4,0,.2,1) var(--cd,0s) infinite;
}
@keyframes ship-line{
  0%,38%   { stroke-dashoffset:260; }
  47%,100% { stroke-dashoffset:0; }
}
.ship__area{ animation:ship-area var(--cdur) ease-out var(--cd,0s) infinite; }
@keyframes ship-area{
  0%,42%   { opacity:0; }
  49%,100% { opacity:1; }
}
.ship__rows{ display:flex; flex-direction:column; gap:5px; }
.ship__rows span{ height:5px; border-radius:2px; background:rgba(0,0,0,.08); }
.ship__rows span + span{ width:72%; }

/* ---- the pull request -------------------------------------- */
.pr{
  position:absolute;
  left:15px; bottom:15px;
  width:54%;
  border-radius:6px;
  display:flex; flex-direction:column; gap:5px;
  padding:7px 8px;
  background:#fff;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.08);
  font:500 8px/1.2 var(--sans);
  color:var(--ink);
  white-space:nowrap;
  animation:ship-pr var(--cdur) cubic-bezier(.22,.85,.3,1.03) var(--cd,0s) infinite;
}
@keyframes ship-pr{
  0%,8%    { opacity:0; transform:translateY(10px) scale(.95); filter:blur(2.5px); }
  12%,70%  { opacity:1; transform:none;                        filter:blur(0); }
  78%,100% { opacity:0; transform:translateY(-4px) scale(.99); filter:blur(2px); }
}
.pr i{ font-style:normal; }
.pr__top{ display:flex; align-items:center; gap:4px; font-weight:600; }
.pr__icon{
  flex:0 0 auto;
  width:10px; height:10px;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  animation:ship-merged-ink var(--cdur) ease-out var(--cd,0s) infinite;
}
@keyframes ship-merged-ink{
  0%,30.5%  { color:#2A9D63; }
  31.5%,100%{ color:#8250DF; }
}

/* checks: a spinner, then a tick */
.pr__checks{ position:relative; height:9px; color:var(--muted); font-size:7.5px; }
.ck{ position:absolute; left:0; top:0; display:flex; align-items:center; gap:4px; }
.ck--run{ animation:ship-ck-run var(--cdur) linear var(--cd,0s) infinite; }
.ck--ok { animation:ship-ck-ok  var(--cdur) linear var(--cd,0s) infinite; color:#2A9D63; }
.ck__spin{
  width:7px; height:7px;
  border:1.3px solid rgba(0,0,0,.15);
  border-top-color:#D4A72C;
  border-radius:50%;
  animation:ship-spin .7s linear infinite;
}
.ck svg{
  width:8px; height:8px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
@keyframes ship-spin{ to{ transform:rotate(360deg); } }
@keyframes ship-ck-run{
  0%,22.5% { opacity:1; }
  23%,100% { opacity:0; }
}
@keyframes ship-ck-ok{
  0%,22.5% { opacity:0; transform:scale(.8); }
  24%,100% { opacity:1; transform:none; }
}

.pr__foot{ display:flex; align-items:center; justify-content:space-between; }

/* Open, then Merged: both words sit in one cell and cross-fade.
   The Merge button is pressed, then gets out of the way. */
.pr__state,
.pr__btn{
  display:grid;
  height:12px;
  border-radius:6px;
  color:#fff;
  font-weight:600; font-size:7px;
}
.pr__state{
  padding:0 6px;
  animation:ship-state var(--cdur) ease-out var(--cd,0s) infinite;
}
.pr__btn{
  border-radius:3px;
  padding:0 7px;
  animation:ship-btn var(--cdur) ease-out var(--cd,0s) infinite;
}
.pr__btn{ place-items:center; }
.st{ grid-area:1 / 1; align-self:center; justify-self:center; }
.st--merged{ animation:ship-word-in  var(--cdur) linear var(--cd,0s) infinite; }
.st--open{ animation:ship-word-out var(--cdur) linear var(--cd,0s) infinite; }
@keyframes ship-state{
  0%,30.5%  { background:#2A9D63; }
  31.5%,100%{ background:#8250DF; }
}
@keyframes ship-btn{
  0%,22.5%  { background:rgba(42,157,99,.35); transform:none; }
  24%,29.4% { background:#2A9D63; transform:none; }
  30%       { background:#23854F; transform:scale(.9); opacity:1; }
  31.5%     { background:#23854F; transform:none;       opacity:1; }
  34%,100%  { background:#23854F; transform:scale(.9);  opacity:0; }
}
@keyframes ship-word-out{
  0%,30.5%  { opacity:1; }
  31.5%,100%{ opacity:0; }
}
@keyframes ship-word-in{
  0%,30.5%  { opacity:0; }
  31.5%,100%{ opacity:1; }
}

/* the cursor that merges it */
.pr__cursor{
  position:absolute;
  right:9px; bottom:1px;
  width:9px; height:12px;
  fill:#111; stroke:#fff; stroke-width:1.1; stroke-linejoin:round;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3));
  animation:ship-cursor var(--cdur) cubic-bezier(.45,0,.2,1) var(--cd,0s) infinite;
}
@keyframes ship-cursor{
  0%,24%   { opacity:0; transform:translate(-46px,16px); }
  25%      { opacity:1; transform:translate(-46px,16px); }
  29%      { opacity:1; transform:none; }
  30%      { opacity:1; transform:scale(.82); }
  31%      { opacity:1; transform:none; }
  34%      { opacity:1; transform:translate(4px,6px); }
  37%,100% { opacity:0; transform:translate(4px,6px); }
}

/* ============================================================
   STEPS: the process, numbered
   ============================================================ */
.doc .steps{
  margin:0; padding:0 0 0 16px;
  list-style:decimal;
}
.steps > li{ margin:0; padding:9px 0; }
.steps > li + li{ border-top:1px solid var(--line-soft); }
.steps p{ margin:0; }

/* ============================================================
   PRICE
   ============================================================ */
/* The plan card: an outer card whose own padding frames a tinted
   inset panel, with the figure and the action sitting below that
   panel on the card's ground. The footer's side padding matches
   the panel's, so the label lines up with the panel's title. */
.plan{
  margin-top:16px;
  padding:5px 5px 18px;
  border-radius:9px;
  background:rgba(0,0,0,.014);
  box-shadow:0 0 0 .5px rgba(0,0,0,.1),
             0 .5px .5px rgba(0,0,0,.05),
             0 4px 8px -3px rgba(0,0,0,.06);
}

.plan__panel{
  padding:15px 16px 17px;
  border-radius:5px;
  background:rgba(0,0,0,.04);
}
.plan__title{
  margin:0 0 11px;
  font-size:13px; font-weight:550;
  letter-spacing:-.08px;
  color:var(--ink);
}

.doc .plan__list{
  margin:0; padding:0;
  list-style:none;
  display:flex; flex-direction:column; gap:7px;
}
.plan__list li{
  display:flex; align-items:center; gap:9px;
  font-size:13px;
  color:var(--body);
}
.plan__check{
  flex:0 0 auto;
  width:15px; height:15px;
  fill:none;
  stroke:currentColor;
  color:rgba(0,0,0,.34);
  stroke-linecap:round; stroke-linejoin:round;
}
.plan__check circle{ stroke-width:1.3; }
.plan__check path{ stroke-width:1.7; }

.plan__foot{
  margin-top:18px;
  padding:0 16px;
}
.plan__sum{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.plan__label{
  font-size:12px;
  color:var(--muted);
}
.plan__price{
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--display);
  font-size:26px; font-weight:600;
  line-height:1.1; letter-spacing:-.5px;
  color:var(--ink);
}
.plan__per{
  font-family:var(--mono); font-size:12px; font-weight:400;
  letter-spacing:0;
  color:var(--muted);
}

/* ============================================================
   FORM
   ============================================================ */
/* The form reuses the plan card (.plan, .plan__panel, .plan__foot);
   these rules only lay out what sits inside it. */
.cform{ display:flex; flex-direction:column; }
.cform__panel{ display:flex; flex-direction:column; gap:12px; }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.field{ display:flex; flex-direction:column; gap:5px; }
.field label{
  font-size:12px; font-weight:500; letter-spacing:-.02px;
  color:var(--muted);
}
.field label span{ color:var(--accent); }

.field input{
  width:100%;
  padding:8px 10px;
  font-family:var(--sans); font-size:13px; font-weight:450;
  letter-spacing:-.08px;
  color:rgba(0,0,0,.82);
  background:#fff;
  border:1px solid var(--line);
  border-radius:5px;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.field input::placeholder{ color:rgba(0,0,0,.24); }
.field input:focus{
  outline:0;
  border-color:rgba(36,128,237,.55);
  box-shadow:0 0 0 3px rgba(36,128,237,.12);
}
.field input[aria-invalid="true"]{
  border-color:rgba(229,72,77,.6);
  box-shadow:0 0 0 3px rgba(229,72,77,.1);
}
.field__err{
  min-height:0; margin:0;
  font-size:12px; color:var(--accent);
}
.field__err:empty{ display:none; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px;
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:-.04px;
  color:#fff;
  background:#181818;
  border:1px solid #181818; border-radius:5px;
  cursor:pointer;
  transition:background .14s ease, opacity .14s ease;
}
.btn:hover{ background:#000; text-decoration:none; color:#fff; }
a.btn{ color:#fff; text-decoration:none; }
.btn:disabled,
.btn.is-busy{ opacity:.6; cursor:default; }
.btn--full{ width:100%; }

.cform__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.cform__foot .btn{ flex:0 0 auto; white-space:nowrap; }
.cform__note{
  margin:0;
  font-family:var(--mono); font-size:12px;
  color:var(--muted);
}

.cform__status{
  display:none;
  margin:16px 11px 0;
  padding:9px 11px;
  border-radius:5px;
  font-size:12.5px;
}
.cform__status.is-visible{ display:block; }
.cform__status.is-ok{
  color:rgba(0,0,0,.7);
  background:rgba(36,128,237,.07);
  border:1px solid rgba(36,128,237,.18);
}
.cform__status.is-err{
  color:rgba(0,0,0,.7);
  background:rgba(229,72,77,.07);
  border:1px solid rgba(229,72,77,.2);
}

/* ============================================================
   FAQ
   ============================================================ */
.qa{
  border-top:1px solid var(--line-soft);
}
.qa:last-of-type{ border-bottom:1px solid var(--line-soft); }
.qa > summary{
  position:relative;
  display:flex; align-items:center;
  padding:10px 0 10px 18px;
  font-size:13px; font-weight:500;
  letter-spacing:-.08px;
  color:rgba(0,0,0,.72);
  cursor:pointer;
  list-style:none;
}
.qa > summary::-webkit-details-marker{ display:none; }

/* two strokes make the marker: the upright one rotates flat as the
   answer opens, so + turns into – instead of snapping between glyphs */
.qa > summary::before,
.qa > summary::after{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:9px; height:1.5px;
  border-radius:1px;
  background:var(--muted);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),
             background-color .2s ease;
}
.qa > summary::before{ transform:translateY(-50%); }
.qa > summary::after { transform:translateY(-50%) rotate(90deg); }
.qa[open] > summary::after{ transform:translateY(-50%) rotate(0deg); }
.qa[open] > summary::before,
.qa[open] > summary::after{ background:var(--accent); }

.qa > summary:hover{ color:var(--ink); }

.qa__body{
  overflow:hidden;              /* clips while the height animates */
  padding:0 0 12px 18px;
  font-size:13px;
  color:var(--body);
}
.qa__body p{ margin:0; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin-top:32px;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
  font-size:12px;
  color:var(--muted);
}
.foot p{ margin:0; }
.foot a{ color:var(--muted); }
.foot__meta{
  display:flex; align-items:baseline; gap:6px;
  flex:0 0 auto;
  white-space:nowrap;
}

/* ============================================================
   FLOATING ENQUIRE BUTTON
   ============================================================ */
.fab{
  position:fixed; right:22px; bottom:22px;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(24,24,24,.94);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  z-index:30;
  transition:transform .16s ease, background .16s ease;
}
.fab:hover{ transform:translateY(-1px); background:#000; text-decoration:none; }
.fab svg{ display:block; width:16px; height:16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:560px){
  h1{ font-size:27px; }
  /* no room beside the headline: it sits above it instead */
  .sticker{ top:-24px; right:-10px; --tilt:-5deg; }
  .nav__in{ padding:10px 20px; gap:12px; }
  .nav__links{ gap:13px; }
  .cta{ flex-wrap:wrap; gap:8px 12px; }
  .plan__price{ font-size:23px; }
  .cform__row{ grid-template-columns:1fr; }
  .doc .cards{ grid-template-columns:1fr; gap:22px; }
  .win__tiles{ grid-template-columns:1fr 1fr; }
  .win__tiles .tile:last-child{ display:none; }
  .fab{ right:14px; bottom:14px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* the demo skips the build and just shows the finished screen */
  .win__bar *,
  .win__body *{ animation:none !important; }
}