/* premises.ph — the whole site's stylesheet.
 *
 * Same discipline as the platform: eight values decide the identity and
 * everything else is derived from them with colour-mix. There is no second
 * place where a colour lives. Change the eight and the site follows.
 */

:root{
  /* ===================== THE EIGHT ===================== */
  --iris:#3A4A63;      /* the brand: every primary action, every focus ring */
  --sky:#6E88A8;       /* the far end of the gradient                       */
  --ink:#0F1726;       /* all body text                                     */
  --paid:#10A97A;      /* "this is fine"                                    */
  --overdue:#E5556A;   /* "this is wrong"                                   */
  --draft:#E9A23B;     /* "this wants attention, calmly"                    */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* ============== EVERYTHING BELOW IS DERIVED ============== */
  --mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --paper:color-mix(in srgb,var(--iris) 2%,#fff);
  --soft:color-mix(in srgb,var(--iris) 5%,#fff);
  --line:color-mix(in srgb,var(--iris) 11%,#fff);
  --muted:color-mix(in srgb,var(--ink) 62%,#fff);
  --faint:color-mix(in srgb,var(--ink) 42%,#fff);
  --iris-deep:color-mix(in srgb,var(--iris) 82%,#000);
  --iris-night:color-mix(in srgb,var(--iris) 55%,#000);
  --iris-tint:color-mix(in srgb,var(--iris) 8%,#fff);
  --grad:linear-gradient(90deg,var(--iris),var(--sky));
  --grad-btn:linear-gradient(135deg,var(--iris),color-mix(in srgb,var(--iris) 88%,var(--sky)));
  --paid-tint:color-mix(in srgb,var(--paid) 10%,#fff);
  --overdue-tint:color-mix(in srgb,var(--overdue) 9%,#fff);
  --draft-tint:color-mix(in srgb,var(--draft) 11%,#fff);
  --lift-1:0 1px 2px rgba(22,34,68,.05),0 2px 6px rgba(22,34,68,.05);
  --lift-2:0 2px 4px rgba(22,34,68,.06),0 8px 20px rgba(22,34,68,.08);
  --lift-3:0 4px 8px rgba(22,34,68,.07),0 16px 40px rgba(22,34,68,.10);
  --ring:0 0 0 4px color-mix(in srgb,var(--iris) 18%,transparent);

  /* THE CHANNEL ANCHORS. Not part of the eight and never derived from them:
     each is a channel's OWN colour, whitelisted under the registry rule
     (CLAUDE.md — "every connected channel wears its own colour, one token,
     painting only that channel's verbs, never a second meaning"). These two
     paint the answer bar's doors (board 82) and nothing else on the site. */
  --wa:#1FA45B;      /* WhatsApp green — the same literal the platform uses */
  --viber:#7360F2;   /* Viber purple — joins the registry with board 82     */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.5}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

/* ------------------------------------------------------------------- the mark */
.lg{display:inline-flex;align-items:center}
/* the global img rule says height:auto, which beats the height attribute —
   so the lockup's size lives HERE, not on the tag. The attribute stays as
   data for tools/relogo.php to tell the nav from the footer. */
.lg img{display:block;width:auto;height:40px}
.foot .lg img{height:34px}

/* ---------------------------------------------------------------------- nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 28px;max-width:1300px;margin:0 auto;position:relative;z-index:6}
.nav .links{display:flex;gap:26px;font-size:14.5px;font-weight:500;color:var(--muted);flex-wrap:wrap}
.nav .links a.on{color:var(--ink);font-weight:600}
.nav.on-dark .links{color:rgba(255,255,255,.72)}
.nav.on-dark .links a.on{color:#fff}
.nav .act{display:flex;gap:11px;align-items:center}

/* -------------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 28px;
  border-radius:12px;font-size:15.5px;font-weight:600;white-space:nowrap;border:0;cursor:pointer;
  font-family:inherit;transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-sm{height:40px;padding:0 19px;font-size:14px;border-radius:10px}
.btn-g{background:var(--grad-btn);color:#fff;box-shadow:var(--lift-2)}
.btn-w{background:#fff;color:var(--iris-deep);box-shadow:0 8px 24px rgba(6,12,28,.26)}
.btn-o{border:1.5px solid rgba(255,255,255,.30);color:#fff;background:transparent}
.btn-l{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn-d{background:var(--ink);color:#fff;box-shadow:var(--lift-2)}
.btn-wide{width:100%}
.btn .dn{margin-right:8px;flex:none;opacity:.92}
.btn .play{margin-right:9px;flex:none} /* the play mark is drawn, never typed */

/* ---------------------------------------------------------------- dark heroes */
.hero{background:
   radial-gradient(88% 70% at 50% -8%, color-mix(in srgb,var(--sky) 52%,transparent), transparent 62%),
   linear-gradient(168deg,var(--iris-deep),var(--iris) 46%,var(--iris-night));
  color:#fff;position:relative;padding-bottom:84px;margin-top:-90px;padding-top:90px}
.hero.center{text-align:center;padding-bottom:0}
.hgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center;padding-top:46px}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:6px 16px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);font-size:12.5px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;margin-bottom:24px}
.badge em{font-style:normal;background:var(--draft);color:var(--ink);font-weight:700;font-size:11px;
  letter-spacing:.07em;padding:5px 11px;border-radius:999px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.4vw,62px);line-height:1.05;
  letter-spacing:-.028em}
.hero.center h1{font-size:clamp(40px,6.2vw,74px);letter-spacing:-.032em;max-width:1000px;margin:0 auto}
h1 .l2{display:block;color:rgba(255,255,255,.62);font-size:clamp(26px,3.7vw,50px);letter-spacing:-.026em;
  margin-top:14px}
.lede{font-size:clamp(17px,1.4vw,19px);line-height:1.62;color:rgba(255,255,255,.78);margin:24px 0 32px;
  max-width:530px}
.hero.center .lede{max-width:660px;margin-left:auto;margin-right:auto}
.ctas{display:flex;gap:13px;flex-wrap:wrap}
.hero.center .ctas{justify-content:center}
.fine{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.55)}
.hcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);border-radius:20px;
  padding:28px 28px 30px}
.hcard h4{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:18px}
.hcard ul{display:flex;flex-direction:column;gap:14px}
.hcard li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.45;
  color:rgba(255,255,255,.92)}
.hcard li svg{flex:0 0 18px;margin-top:2px}

/* the word that changes: building -> HOA -> apartments */
.swap{display:inline-block;height:1.06em;overflow:hidden;vertical-align:bottom;position:relative;
  text-align:left}
.swap ul{animation:roll 21s cubic-bezier(.66,0,.34,1) infinite}
.swap li{height:1.06em;line-height:1.06em;white-space:nowrap;
  background:linear-gradient(96deg,#fff 12%,color-mix(in srgb,var(--sky) 74%,#fff));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.swap:after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--draft),color-mix(in srgb,var(--draft) 30%,transparent))}
/* six words on the roll since 1.7 (board 58): each holds ~2.7s, slides .8s */
@keyframes roll{
  0%,12.6%{transform:translateY(0)}
  16.6%,29.3%{transform:translateY(-1.06em)}
  33.3%,46%{transform:translateY(-2.12em)}
  50%,62.6%{transform:translateY(-3.18em)}
  66.6%,79.3%{transform:translateY(-4.24em)}
  83.3%,96%{transform:translateY(-5.3em)}
  100%{transform:translateY(-6.36em)}
}

/* ------------------------------------------------------------------- laptop */
.laptop{margin:60px auto -104px;width:100%;max-width:1090px;position:relative}
.lid{width:95%;margin:0 auto;background:linear-gradient(180deg,#20293c,#0d1320);border-radius:22px 22px 8px 8px;
  padding:16px 16px 22px;box-shadow:0 50px 110px rgba(4,9,22,.62),0 0 0 1px rgba(255,255,255,.09) inset}
.cam{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);margin:0 auto 12px}
.lid img,.lid video{display:block;width:100%;height:auto;border-radius:6px;background:#fff}
.base{height:16px;width:100%;margin:0 auto;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#2a3548,#141b29);box-shadow:0 24px 40px rgba(4,9,22,.5)}
.notch{width:150px;height:7px;border-radius:0 0 8px 8px;background:rgba(255,255,255,.13);margin:0 auto}

/* ------------------------------------------------------------------ sections */
section{padding:92px 0}
section.tight{padding-top:170px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
  margin-bottom:15px}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(31px,3.6vw,46px);line-height:1.1;
  letter-spacing:-.024em}
h3{font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.16;letter-spacing:-.018em}
.sub{font-size:17px;line-height:1.62;color:var(--muted);max-width:640px;margin-top:16px}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}
.soft{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* --------------------------------------------------------------- the drawings */
.ic{display:block;background:var(--soft);border:1px solid var(--line);border-radius:12px;
  padding:6px 5px 3px;line-height:0}
.ic .scn{width:100%;height:auto;display:block}
.scn .gnd{stroke:color-mix(in srgb,var(--ink) 20%,#fff);stroke-width:2;stroke-linecap:round}
.scn .bd{fill:none;stroke:var(--iris-deep);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.scn .th{fill:none;stroke:var(--iris-deep);stroke-width:2.6;stroke-linecap:round}
.scn .fl{fill:var(--iris-deep)}
.scn .sft{fill:color-mix(in srgb,var(--iris) 22%,#fff)}
.scn .pap{fill:#fff;stroke:color-mix(in srgb,var(--iris) 30%,#fff);stroke-width:1.4}
.scn .ln{stroke:var(--iris-deep);stroke-width:2;stroke-linecap:round;fill:none}
.scn .shadow{fill:color-mix(in srgb,var(--ink) 9%,#fff)}
.scn .warmc{fill:color-mix(in srgb,var(--iris) 10%,#fff)}
.scn .mote{fill:color-mix(in srgb,var(--iris) 45%,#fff)}
.scn .warm{fill:color-mix(in srgb,var(--draft) 30%,#fff)}
.scn .pn{stroke:var(--draft);stroke-width:3.4;stroke-linecap:round;fill:none}
.scn .strp{stroke:var(--overdue);stroke-width:2.6;stroke-linecap:round;fill:none}
.scn .coin{fill:var(--draft);stroke:color-mix(in srgb,var(--draft) 55%,#000);stroke-width:1}
.scn .tick{fill:none;stroke:var(--paid);stroke-width:2.4;stroke-linecap:round}
.scn .drip{fill:var(--sky)}
.scn .key{fill:none;stroke:var(--draft);stroke-width:2.2;stroke-linecap:round}
.scn .coinf{fill:var(--draft)}
.scn .tickf{fill:color-mix(in srgb,var(--paid) 18%,#fff)}
.scn .rosef{fill:color-mix(in srgb,var(--overdue) 26%,#fff)}
.scn .ln2{fill:none;stroke:color-mix(in srgb,var(--iris) 30%,#fff);stroke-width:2}
.scn .ring{fill:none;stroke:color-mix(in srgb,var(--iris) 26%,#fff);stroke-width:3}
.scn .pn2{fill:none;stroke:var(--draft);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.scn *{transform-box:view-box}

/* ------------------------------------------------------------- section cards */
.secs{column-count:4;column-gap:20px;margin-top:52px}
.sec{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 24px;
  margin-bottom:20px;break-inside:avoid;box-shadow:var(--lift-1)}
.sec .hd{display:flex;align-items:center;gap:11px;margin-bottom:16px;padding-bottom:14px;
  border-bottom:1px solid var(--line)}
.sec .hd b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.sec .hd .ic{width:44px;flex:0 0 44px;border-radius:9px;padding:4px 3px 2px}
.sec ul{display:flex;flex-direction:column;gap:11px}
.sec li b{display:block;font-size:14px;font-weight:600}
.sec li s{display:block;text-decoration:none;font-size:12.5px;line-height:1.45;color:var(--muted);
  margin-top:2px}

/* ------------------------------------------------------- illustrated cards */
.cards{display:grid;gap:20px;margin-top:52px}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 26px 28px;
  box-shadow:var(--lift-1);display:flex;flex-direction:column}
.card .ic{width:96px;margin-bottom:18px}
.card h3{font-size:22px;margin-bottom:10px}
.card p{font-size:14.5px;line-height:1.6;color:var(--muted);margin-bottom:16px}
.card ul{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:9px;font-size:14px;line-height:1.45}
.card li{display:flex;gap:10px;align-items:flex-start}
.card li svg{flex:0 0 18px;margin-top:1px}

/* ---------------------------------------------------------- numbered stories */
.story{border-top:1px solid var(--line);margin-top:48px}
.st{display:grid;grid-template-columns:64px 250px 1fr;gap:32px;align-items:start;padding:26px 0;
  border-bottom:1px solid var(--line)}
.st u{text-decoration:none;font-family:var(--mono);font-size:13px;color:var(--faint);padding-top:6px}
.st h3{font-size:23px}
.st p{font-size:15.5px;line-height:1.62;color:var(--muted)}
.st p b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------------- the slab */
.slab{background:var(--ink);color:#fff;border-radius:22px;padding:42px 44px;margin-top:48px}
.slab h3{color:#fff;font-size:29px;margin-bottom:16px}
.slab p{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.72);max-width:720px}
.slab .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 34px;margin-top:26px}
.slab .grid div{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;
  color:rgba(255,255,255,.90)}
.slab .grid svg{flex:0 0 18px;margin-top:2px}

/* ---------------------------------------------------------------- grouped wall */
.igroup{margin-top:42px}
.ghd{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.ghd b{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.ghd i{flex:1;height:1px;background:var(--line)}
.ghd u{text-decoration:none;font-size:11.5px;font-weight:700;letter-spacing:.10em;color:var(--faint);
  background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.it{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--lift-1);
  padding:18px 20px;display:flex;gap:16px;align-items:center}
.it .ic{flex:0 0 78px;border-radius:12px}
.it b{display:block;font-size:14.5px;font-weight:600}
.it s{display:block;text-decoration:none;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:3px}
.note{margin-top:26px;font-size:13.5px;color:var(--faint);text-align:center}

/* ------------------------------------------------------------------- pricing */
.fgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:32px;margin-top:52px;align-items:start}
.fgrid>*,.cards>*,.plans>*,.igrid>*,.two>*,.two-box>*,.honest>*,.usps>*,.cats>*{min-width:0}
.fcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--lift-2)}
.fcard h3{font-size:27px;margin-bottom:8px}
.fcard .amt{font-family:var(--serif);font-size:clamp(48px,6vw,74px);font-weight:600;letter-spacing:-.04em;
  line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fcard .amt em{font-style:normal;font-family:var(--sans);font-size:17px;font-weight:500;color:var(--muted);
  -webkit-text-fill-color:var(--muted);letter-spacing:0;display:block;margin-top:10px;line-height:1.4}
.inc{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);display:grid;
  grid-template-columns:1fr 1fr;gap:12px 26px}
.inc li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.inc svg{flex:0 0 18px;margin-top:2px}
.closing{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;
  color:var(--muted)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px;align-items:stretch}
.pl{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 24px 30px;
  box-shadow:var(--lift-1);display:flex;flex-direction:column}
.pl.hi{border:2px solid var(--iris);box-shadow:var(--lift-3);position:relative}
.pl.hi:before{content:attr(data-tag);position:absolute;top:-11px;left:22px;background:var(--iris);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.13em;padding:5px 12px;border-radius:999px;
  text-transform:uppercase}
.pl s{display:block;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.pl h3{font-size:25px}
.pl .amt{font-family:var(--serif);font-size:44px;font-weight:600;letter-spacing:-.035em;margin:12px 0 0;
  line-height:1}
.pl .amt em{font-style:normal;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted);
  letter-spacing:0;display:block;margin-top:6px}
.pl .who{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:14px;padding-bottom:18px;
  border-bottom:1px solid var(--line)}
.pl .meta{display:flex;gap:14px;font-size:12px;color:var(--faint);margin-top:14px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
.pl ul{margin-top:16px;display:flex;flex-direction:column;gap:10px;font-size:14px;flex:1;line-height:1.45}
.pl li{display:flex;gap:10px;align-items:flex-start}
.pl li svg{flex:0 0 18px;margin-top:1px}
.pl .go{margin-top:24px}
.pnote{margin-top:28px;text-align:center;font-size:14.5px;color:var(--muted)}
.pnote b{color:var(--ink);font-weight:600}
.addons{border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:48px;background:#fff}
.ad{display:grid;grid-template-columns:250px 200px 1fr;gap:24px;align-items:baseline;padding:20px 26px;
  border-bottom:1px solid var(--line)}
.ad:last-child{border-bottom:0}
.ad b{font-size:15.5px;font-weight:600}
.ad .amt2{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--iris-deep)}
.ad p{font-size:14px;line-height:1.5;color:var(--muted)}

/* ----------------------------------------------------------------- the forms */
.form{background:var(--ink);color:#fff;border-radius:20px;padding:32px;box-shadow:var(--lift-3)}
.form.light{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--lift-2)}
.form h3{font-size:26px}
.form .s{font-size:14px;color:rgba(255,255,255,.62);margin-top:8px;line-height:1.5}
.form.light .s{color:var(--muted)}
.fld{margin-top:16px}
.fld label{display:block;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:7px}
.form.light .fld label{color:var(--faint)}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;border-radius:11px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:12px 15px;
  font-size:15px;color:#fff;font-family:inherit;line-height:1.5}
.form.light .fld input,.form.light .fld select,.form.light .fld textarea{
  background:#fff;border:1px solid var(--line);color:var(--ink)}
.fld textarea{min-height:132px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.36)}
.form.light input::placeholder,.form.light textarea::placeholder{color:var(--faint)}
.fld select{appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%233A4A63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.form:not(.light) .fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .btn{margin-top:20px}
.form .footnote{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.5;text-align:center}
.form.light .footnote{color:var(--faint)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{background:var(--overdue-tint);border:1px solid color-mix(in srgb,var(--overdue) 30%,#fff);
  color:color-mix(in srgb,var(--overdue) 72%,#000);border-radius:12px;padding:14px 18px;font-size:14.5px;
  margin-bottom:20px;line-height:1.5}
.err ul{margin-top:8px;display:flex;flex-direction:column;gap:5px;padding-left:2px}
.err li:before{content:"— ";opacity:.6}
.ok{background:var(--paid-tint);border:1px solid color-mix(in srgb,var(--paid) 26%,#fff);
  border-radius:20px;padding:38px 40px;text-align:center}
.ok .ref{font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:.06em;margin:18px 0 6px;
  color:var(--iris-deep)}
.ok h2{font-size:34px}
.ok p{font-size:16px;line-height:1.6;color:var(--muted);max-width:520px;margin:14px auto 0}

/* -------------------------------------------------------------------- help */
.lhero{background:var(--paper);border-bottom:1px solid var(--line);padding-bottom:70px;
  margin-top:-90px;padding-top:90px}
.lhero h1{font-size:clamp(34px,4.6vw,54px);text-align:center;max-width:820px;margin:40px auto 0}
.lhero .sub{text-align:center;margin:18px auto 0;font-size:18px}
.search{max-width:720px;margin:34px auto 0;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--lift-2);min-height:62px;display:flex;align-items:center;gap:14px;padding:8px 18px}
.search input{flex:1;border:0;outline:none;font:inherit;font-size:17px;color:var(--ink);background:none;
  min-width:0}
.search input::placeholder{color:var(--faint)}
.quick{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.quick a{font-size:13.5px;color:var(--muted);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 15px}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.cat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--lift-1)}
.cat .ic{width:88px;border-radius:11px;margin-bottom:16px}
.cat h3{font-size:20px;margin-bottom:8px}
.cat p{font-size:14px;line-height:1.55;color:var(--muted)}
.cat ul{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:9px;font-size:13.5px}
.cat li{color:var(--iris-deep);display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.cat li:before{content:"";flex:0 0 12px;height:1.5px;background:var(--iris);margin-top:9px;border-radius:2px}
.cat .more{margin-top:14px;font-size:13px;color:var(--faint)}
.pop{border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:44px;background:#fff}
.pr{display:grid;grid-template-columns:56px 1fr 190px;gap:20px;align-items:center;padding:18px 26px;
  border-bottom:1px solid var(--line)}
.pr:last-child{border-bottom:0}
.pr u{text-decoration:none;font-family:var(--mono);font-size:12px;color:var(--faint)}
.pr b{font-size:16px;font-weight:600}
.pr s{display:block;text-decoration:none;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.pr .tag{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--faint);
  background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 11px;justify-self:end}
.two-box{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.box{border:1px solid var(--line);border-radius:18px;padding:30px;background:#fff}
.box.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.box h3{font-size:24px;margin-bottom:12px}
.box.dark h3{color:#fff}
.box p{font-size:15px;line-height:1.62;color:var(--muted)}
.box.dark p{color:rgba(255,255,255,.72)}
.box ul{margin-top:20px;display:flex;flex-direction:column;gap:11px;font-size:14.5px;line-height:1.5}
.box li{display:flex;gap:11px;align-items:flex-start}
.box li svg{flex:0 0 18px;margin-top:2px}
.sla{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);display:flex;
  gap:30px;flex-wrap:wrap}
.sla s{display:block;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px}
.sla b{font-family:var(--serif);font-size:23px;font-weight:600}

/* ---------------------------------------------------------------- why page */
.usps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:50px}
.usp{background:#fff;padding:30px 28px 32px}
.usp u{text-decoration:none;font-family:var(--mono);font-size:12px;color:var(--faint)}
.usp h3{font-size:22px;margin:12px 0 10px}
.usp p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.tablewrap{overflow-x:auto;margin-top:46px;-webkit-overflow-scrolling:touch}
table{width:100%;min-width:720px;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden}
th,td{padding:16px 22px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line)}
thead th{background:var(--soft);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
thead th:last-child{background:var(--iris-tint);color:var(--iris-deep)}
tbody td:first-child{font-weight:600;width:30%}
tbody td:last-child{background:var(--iris-tint);font-weight:600}
tbody td:not(:first-child):not(:last-child){color:var(--muted)}
tbody tr:last-child td{border-bottom:0}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px}
.num b{display:block;font-family:var(--serif);font-size:48px;font-weight:600;letter-spacing:-.03em;
  line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.num s{display:block;text-decoration:none;margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.honest{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.hon{border:1px solid var(--line);border-radius:16px;padding:26px;background:#fff}
.hon h4{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:16px}
.hon.no h4{color:color-mix(in srgb,var(--overdue) 74%,#000)}
.hon.yes h4{color:color-mix(in srgb,var(--paid) 68%,#000)}
.hon ul{display:flex;flex-direction:column;gap:12px;font-size:14.5px;line-height:1.5}
.hon li{padding-left:22px;position:relative;color:var(--muted)}
.hon li:before{content:"";position:absolute;left:0;top:9px;width:12px;height:2px;border-radius:2px}
.hon.no li:before{background:var(--overdue)}
.hon.yes li:before{background:var(--paid)}
.hon li b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------------- closing */
.close{background:linear-gradient(150deg,var(--iris-deep),var(--iris) 58%,var(--sky));color:#fff;
  text-align:center}
.close h2{color:#fff;max-width:820px;margin:0 auto}
.close .sub{color:rgba(255,255,255,.78);margin:18px auto 30px;text-align:center}

/* -------------------------------------------------------------------- footer */
/* ---- who we are, and the incident sentence (board 125, 1.46.0) ------------
   Five facts and a promise. Deliberately plain: a company's own registration
   number does not want a card with a shadow, it wants to be legible and to
   look like it was copied from a register, because it was. */
.whobox{max-width:720px;margin:26px auto 0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.whorow{display:flex;gap:18px;padding:13px 22px;border-top:1px solid var(--line);font-size:14px}
.whorow:first-child{border-top:0}
.whok{flex:0 0 132px;color:var(--faint);font-size:12.5px;letter-spacing:.02em;padding-top:1px}
.whov{color:var(--ink)}
.whomail{max-width:720px;margin:14px auto 0;text-align:center;font-size:13px;color:var(--muted)}
.whomail a{color:var(--iris);text-decoration:underline;text-underline-offset:3px}
.inc{max-width:760px;margin:26px auto 0;padding:26px 30px;border-left:3px solid var(--iris);
  background:var(--iris-tint);border-radius:0 14px 14px 0}
.inc p{margin:0 0 12px;font:400 16px/1.62 var(--serif);color:var(--ink)}
.inc p:last-child{margin-bottom:0}
.incfine{max-width:760px;margin:14px auto 0;font-size:12.5px;color:var(--faint)}
@media (max-width:560px){
  .whorow{flex-direction:column;gap:2px}
  .whok{flex:none}
  .inc{padding:20px 22px}
  .inc p{font-size:15px}
}

/* ---- the trust strip (board 117, 1.45.0) -----------------------------------
   Four proofs where a decision is being made. A light band on the site's own
   tint, butted to the bottom of the page and to the top of the dark footer, so
   the last thing read before the foot is something checkable. Four across on a
   desk, two by two on a phone, nothing dropped either way. */
/* padding:0 because the generic `section` rule is 92px top and bottom, and a
   band butted between the page and the footer wants none of it — the first
   cut of this shipped 92px of empty tint above four short cells. */
.trust{background:var(--iris-tint);border-top:1px solid var(--line);padding:0}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:26px 0 28px}
/* a column, so the road sits on the SAME line in every cell however long the
   claim above it ran. Four links at four different heights reads as four
   things, not as one strip — his standing preference for symmetry, and the
   first cut of this had them at 232, 235, 263 and 263. */
.trust-cell{display:flex;flex-direction:column;padding:0 22px;border-left:1px solid var(--line)}
.trust-a{margin-top:auto}
.trust-cell:first-child{border-left:0;padding-left:0}
.trust-h{display:flex;align-items:flex-start;gap:10px;margin:0;font:600 14px/1.35 var(--sans);color:var(--ink)}
.trust-mark{width:19px;height:19px;flex:0 0 19px;margin-top:1px;color:var(--iris)}
.trust-b{margin:8px 0 0;font:400 12.5px/1.55 var(--sans);color:var(--muted)}
.trust-a{display:inline-block;align-self:flex-start;padding-top:10px;font:600 12.5px var(--sans);color:var(--iris);
  text-decoration:underline;text-underline-offset:3px}
.trust-a:hover{color:var(--iris-deep)}
@media (max-width:900px){
  .trust-in{grid-template-columns:1fr 1fr;gap:22px 0;padding:24px 0}
  .trust-cell:nth-child(odd){border-left:0;padding-left:0}
}
/* ON A PHONE the board draws TWO BY TWO with the claim and the road, and the
   sentence between them dropped — four proofs still visible in one glance
   instead of one proof and a scroll. The sentence is not lost: it is one tap
   away behind the link, which is the thing that was going to be tapped anyway. */
@media (max-width:560px){
  .trust-in{grid-template-columns:1fr 1fr;gap:18px 14px;padding:20px 0}
  .trust-cell{border-left:0;padding:0}
  .trust-h{font-size:13px;gap:8px}
  .trust-mark{width:17px;height:17px;flex:0 0 17px}
  .trust-b{display:none}
  .trust-a{padding-top:8px;font-size:12px}
}

.foot{background:var(--ink);color:rgba(255,255,255,.55);padding:56px 0 34px;font-size:14px}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.10)}
.fbrand p{margin-top:16px;font-size:14px;line-height:1.6;max-width:320px;color:rgba(255,255,255,.5)}
.fcols h4{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff;
  margin-bottom:14px}
.fcols div a{display:block;margin-bottom:10px;color:rgba(255,255,255,.55)}
.fcols div a:hover{color:#fff}
/* The legal row: the label and its four documents on ONE line (his word,
   2026-08-28). Legal was a fifth column in a four-column grid, which put it on
   a row of its own as a stack; it is a row on purpose now, and it wraps as a
   row rather than folding back into a column. The company that owns the site
   stands under it. */
.flegal{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px;padding-top:22px}
.flegal h4{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#fff;margin:0 4px 0 0}
.flegal a{color:rgba(255,255,255,.55)}
.flegal a:hover{color:#fff}
/* The separator is GLUED TO THE LINK BEFORE IT, not to the one after: a flex
   line can only break between items, so a wrapped row starts with a word and
   never with an orphaned dot. It keeps its own colour, so hovering a document
   does not light the dot beside it. */
.flegal a:not(:last-child)::after{content:"\00B7";margin-left:14px;color:rgba(255,255,255,.25)}
.fco{margin-top:12px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.42)}
/* THE HOUSE CHIP, ARRANGEMENT G, on the site's DARK foot (board 95, his word
   2026-08-29). Same component and same stack as the platform's: the issuer's
   mark above, the claim with its lock, centred. The dark ground is six custom
   properties — never a second chip. The old .fseal punched a white box into a
   dark footer to make somebody else's GIF legible; it is gone with its markup. */
.hseal{--hs-line:rgba(255,255,255,.16);--hs-lock:color-mix(in srgb,var(--paid) 76%,#fff);
  --hs-title:#fff;--hs-sub:rgba(255,255,255,.45);--hs-logo:#fff;
  display:inline-flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;
  padding:9px 16px 8px;line-height:normal;border:1px solid var(--hs-line);border-radius:10px;
  background:transparent}
.hseal-logo{display:block;color:var(--hs-logo)}
.hseal-logo img{display:block;height:15px;width:auto;max-width:130px}
.hseal-logo b{font:700 11.5px var(--sans);letter-spacing:.02em;color:var(--hs-logo)}
.hseal-claim{display:inline-flex;align-items:center;gap:6px;color:var(--hs-lock)}
.hseal-claim b{font:600 11.5px var(--sans);color:var(--hs-title);letter-spacing:.01em}
.hseal-lock{display:block}
.hseal-date{font:400 9px var(--mono),ui-monospace,monospace;color:var(--hs-sub);letter-spacing:.08em;
  border-top:1px solid var(--hs-line);padding-top:5px;margin-top:1px;width:100%;text-align:center}
a.hseal:hover{border-color:rgba(255,255,255,.34)}
/* the lock opens then closes — on load, and REPLAYED by desk.js the moment the
   foot is actually reached, because a footer animation nobody scrolls to is an
   animation that does not exist */
.hseal-shackle{transform-origin:12px 10px;animation:hseal-close 1.6s cubic-bezier(.4,1.4,.5,1) .4s 1 both}
@keyframes hseal-close{0%{transform:translateY(-3.5px) rotate(-16deg)}
  55%{transform:translateY(-3.5px) rotate(-16deg)}100%{transform:translateY(0) rotate(0)}}
@media (prefers-reduced-motion: reduce){.hseal-shackle{animation:none}}
/* On a phone the row wraps to two centred lines, and the dots stop earning
   their place there — the gap alone separates them. */
@media(max-width:640px){.fbar,.flegal{flex-wrap:wrap;justify-content:center;text-align:center}
  .flegal a:not(:last-child)::after{content:none}
  .fco{text-align:center}}
/* align-items:center, and it is the whole of his "they are on the upper
   side" (2026-08-29). A flex row with no align-items defaults to STRETCH,
   so the two spans grew to the seal's full height and their text sat at the
   top of it. The seal is the tallest thing in this row and everything else
   now sits on its middle. */
.fbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding-top:22px;
  font-size:13px;color:rgba(255,255,255,.42);flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.10)}

/* --------------------------------------------------------------- responsive */
@media (max-width:1080px){
  /* The links wrap to a second row here and the bar becomes 110px. Same fault
     as the 900px block below, one step smaller — see the note there. */
  .hero{margin-top:-110px;padding-top:110px}
  .secs{column-count:3}
  .plans{grid-template-columns:repeat(2,1fr)}
  .nums{grid-template-columns:repeat(2,1fr)}
  .usps{grid-template-columns:repeat(2,1fr)}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{flex-wrap:wrap;gap:14px}
  .nav .links{order:3;width:100%;gap:18px;font-size:14px}
  /* THE BAR WRAPS HERE, AND THE HERO HAS TO BE PULLED UP BY WHAT IT ACTUALLY IS.
     The desktop -90px is the bar's desktop height. Once the links drop to their
     own row the bar is 122px, and once the buttons drop as well it is 215px —
     so on a phone the top 125px of the bar was landing on white paper, and the
     WHITE logo on it was invisible. The site's own front door had no mark on it.
     One number, the tallest the bar gets, and the matching padding puts every
     pixel of content back exactly where it was: nothing moves, the white band
     goes. Above 430px the gradient simply starts further up and is clipped. */
  .hero{margin-top:-215px;padding-top:215px}
  .hgrid,.fgrid,.two-box,.honest{grid-template-columns:1fr}
  .c3,.c2,.cats,.igrid{grid-template-columns:repeat(2,1fr)}
  .st{grid-template-columns:1fr;gap:8px}
  .st u{padding-top:0}
  .slab .grid{grid-template-columns:1fr}
  .ad{grid-template-columns:1fr;gap:6px}
  .laptop{margin-bottom:-60px}
  section.tight{padding-top:120px}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  section{padding:64px 0}
  .secs{column-count:1}
  .c3,.c2,.cats,.igrid,.plans,.inc,.two,.nums,.usps,.fcols{grid-template-columns:1fr}
  .pr{grid-template-columns:1fr;gap:6px}
  .pr .tag{justify-self:start}
  .slab{padding:28px 22px}
  .fcard,.form,.box,.hon,.cat,.card{padding:22px}
  .lg img{height:34px}
  .btn{width:100%}
  .nav .btn{width:auto}
  .ctas{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .swap ul{transform:none}
}

/* ------------------------------------------------------ legal (1.3) */
.lhero .kicker a{color:inherit;text-decoration:none}.lhero .kicker a:hover{text-decoration:underline}
.lgroup{padding:40px 0;border-top:1px solid var(--line)}.lgroup:first-child{border-top:0;padding-top:8px}
.lghead{max-width:680px;margin-bottom:26px}.lghead .sub{margin-top:8px}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lcard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;
  box-shadow:var(--lift-1);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.lcard:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.lcard b{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.2}
.lcard s{text-decoration:none;font-size:14px;color:var(--muted);line-height:1.5;flex:1}
.lmeta{font-size:12px;color:var(--faint);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.ldoc{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.ltoc{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px}
.ltoc nav{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto}
.ltoc nav a{font-size:13.5px;color:var(--muted);text-decoration:none;padding:5px 10px;border-radius:8px;line-height:1.35}
.ltoc nav a:hover{background:var(--soft);color:var(--ink)}
.lfp{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:12px;color:var(--faint);margin:6px 0}
.lfp code{font-family:var(--mono);font-size:12px;color:var(--ink)}
.lbody{max-width:720px;font-size:16.5px;line-height:1.7;color:var(--ink)}
.lbody h2{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.2;margin:38px 0 12px;display:flex;gap:12px;align-items:baseline;scroll-margin-top:24px}
.lbody h2:first-child{margin-top:0}
.lbody h2 span{font-family:var(--mono);font-size:13px;color:var(--faint);font-weight:400}
.lbody p{margin:0 0 16px}.lbody ul{margin:0 0 16px 22px}.lbody li{margin:4px 0}
.lbody table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:15px}
.lbody th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:8px 12px;border-bottom:1px solid var(--line)}
.lbody td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.lbody td:first-child{font-weight:600;white-space:nowrap}
@media (max-width:900px){.lgrid{grid-template-columns:1fr 1fr}.ldoc{grid-template-columns:1fr;gap:28px}.ltoc{position:static}.ltoc nav{max-height:none}}
@media (max-width:600px){.lgrid{grid-template-columns:1fr}}

/* ---------------------------------------- the vertical pages (1.5, boards 49-53) */
/* The vertical heroes carry longer sentences than the homepage's, so their
   headline steps down a size — the boards drew them at this proportion. */
h1.vh1{font-size:clamp(32px,3.6vw,46px);line-height:1.1}
/* The module cards: a video slot, a play mark, and the module's own accent.
   Until the walks are filmed the slot opens the live demo — the chip says
   DEMO, never a duration it does not have. */
.vmods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.vmods>*{min-width:0}
.vm{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--lift-1);transition:transform .15s ease,box-shadow .15s ease}
.vm:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.vm-thumb{display:block;position:relative;margin:10px 10px 0;border-radius:10px;overflow:hidden;
  background:var(--iris-night);aspect-ratio:16/7.5}
.vm-thumb i{display:block;position:absolute;left:24px;height:8px;border-radius:3px;
  background:rgba(255,255,255,.14)}
.vm-thumb i:nth-child(1){top:18px;width:42%;background:rgba(255,255,255,.26)}
.vm-thumb i:nth-child(2){top:36px;right:24px}
.vm-thumb i:nth-child(3){top:52px;right:24px}
.vm-thumb i:nth-child(4){top:68px;width:58%}
.vm-play{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--lift-2)}
.vm-play svg{margin-left:3px}
.vm-chip{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;letter-spacing:.08em;color:#fff;background:rgba(10,16,28,.85);
  border-radius:5px;padding:4px 8px}
.vm-bar{position:absolute;left:0;right:0;bottom:0;height:5px}
.vm-body{display:block;padding:16px 20px 20px}
.vm-body b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.vm-body s{display:block;text-decoration:none;font-size:13px;line-height:1.5;color:var(--muted);
  margin-top:5px}

/* ---- board 79: the module card becomes a PLAYER ----------------------------
   The card keeps its shape, its radius, its lift, its coloured bar and its two
   lines of words. What changes is what is inside the thumb — a real frame of
   the film instead of four painted bars — and that pressing it plays the film
   in place rather than opening the demo. The demo door moves BELOW the grid as
   one wide verb, which is his own instruction: a card that plays a film can no
   longer also be a link.
   The four painted bars above are NOT removed. Apartments, buildings, bed
   spaces and short stay still wear them until their own six films are shot. */
.vm-film{width:100%;text-align:left;font:inherit;color:inherit;padding:0;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.vm-film .vm-thumb video{display:block;width:100%;height:100%;object-fit:cover;
  background:var(--iris-night)}
.vm-play{transition:opacity .18s ease,transform .18s ease}
/* ORPHANED BY BOARD 93 (3.474.0) — the four rules below dressed the card while
   it played the film in place. The film plays in the theatre now, so nothing
   ever puts `is-playing` or `is-live` on a card and nothing draws `.vm-prog`.
   They are LEFT HERE, not deleted: ORPHANS.md is the standing record and the
   owner rules on each line once, at the end of the redesign. The divorce guard
   in site/tests/gate.php pins these four names out of the shipped films.js, so
   the machine catches the old dress coming back even if an eye forgives it. */
.vm-film.is-playing .vm-play{opacity:0;transform:scale(.85)}
.vm-prog{position:absolute;left:12px;right:12px;bottom:26px;height:3px;border-radius:2px;
  background:rgba(10,16,28,.42);opacity:0;transition:opacity .18s ease}
.vm-film.is-playing .vm-prog{opacity:1}
.vm-prog i{display:block;width:0;height:3px;border-radius:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(10,16,28,.28)}
.vm-chip.is-live{background:var(--iris);letter-spacing:.1em}
/* the one door under the six, where six links used to go to the same place */
.vm-door{text-align:center;margin-top:26px}
@media (prefers-reduced-motion:reduce){.vm-play,.vm-prog{transition:none}}

/* ---- board 93: the film opens in a THEATRE ---------------------------------
   His word, 2026-08-29: "I find it hard to understand what the video is about
   because it's too small." Every module film walks a platform screen shot at
   1440x900; the card's window is 334 px wide and 16:7.5, so a quarter of every
   frame was cropped away and the body text inside landed about 4 px tall.
   Pressing a card now opens the film OVER the page: 1,037 x 648 on a 1,280
   laptop, at the film's own 16:10, nothing cropped. The card keeps everything
   it wears — the frame, the play mark, the length chip, the colour bar, the
   title and the line. Only WHERE the film plays changed.
   The theatre's markup is built by films.js, so not one line of markup changes
   on any of the six business pages and all six get this at once. */
.vth{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px}
.vth[hidden]{display:none}
.vth-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 74%,transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.vth-box{position:relative;width:min(1100px,94vw);background:#fff;border-radius:18px;
  overflow:hidden;box-shadow:0 24px 70px rgba(6,12,28,.46)}
/* the film keeps its OWN shape. object-fit is contain, not cover: the whole
   point of the theatre is that nothing is cropped. max-height keeps the words
   below it on the screen of a short laptop. */
.vth-screen{position:relative;display:block;background:var(--iris-night);aspect-ratio:16/10;
  max-height:calc(94vh - 104px)}
.vth-screen video{display:block;width:100%;height:100%;object-fit:contain;
  background:var(--iris-night);cursor:pointer}
.vth-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(10,16,28,.62);display:grid;place-items:center;cursor:pointer;padding:0}
.vth-x:hover{background:rgba(10,16,28,.86)}
.vth-x:focus-visible{outline:none;box-shadow:0 0 0 3px #fff}
/* how far in it is — the same thin line the card wore, now the film's width.
   The track is dark for the reason board 79 found: these films walk a platform
   that is mostly white paper, and a pale track vanishes on a pale frame. */
.vth-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(10,16,28,.42)}
.vth-prog i{display:block;width:0;height:4px;background:#fff}
.vth-bar{display:block;height:5px}
.vth-say{display:flex;align-items:baseline;gap:16px;padding:16px 22px 18px}
.vth-say b{font-size:17px;font-weight:600;color:var(--ink)}
.vth-say s{flex:1;text-decoration:none;font-size:13.5px;line-height:1.5;color:var(--muted)}
.vth-say em{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.08em;color:var(--muted);white-space:nowrap}
/* the phone: the film cannot be wider than the phone, so what the theatre buys
   there is the WHOLE frame and a screen with nothing else on it */
@media (max-width:640px){
  .vth{padding:0}
  .vth-box{width:100%;border-radius:0}
  .vth-say{flex-wrap:wrap;gap:6px 14px;padding:14px 18px 16px}
  .vth-say s{flex:1 0 100%;order:3}
}

/* the deep-feature columns */
.vd{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.vd>*{min-width:0}
.vdc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px;
  box-shadow:var(--lift-1)}
.vdc h3{font-size:19px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.vdc ul{display:flex;flex-direction:column;gap:10px}
.vdc li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;
  color:var(--muted)}
.vdc li svg{flex:0 0 18px;margin-top:1px}

/* the sync slab: what the platform connects to, each channel in its own colour */
.vsync{background:var(--ink);color:#fff;border-radius:22px;padding:40px 44px 44px;margin-top:48px}
.vsync .kicker{color:rgba(255,255,255,.5)}
.vsync h3{color:#fff;font-size:27px}
.vsync>p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.66);max-width:720px;margin-top:10px}
.vsync-row{display:flex;align-items:baseline;gap:18px;margin-top:24px;flex-wrap:wrap}
.vsync-row>s{flex:0 0 120px;text-decoration:none;font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.vsync-row>div{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.schip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:5px 14px 5px 11px;
  border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-size:13px;font-weight:600;color:rgba(255,255,255,.88)}
.schip i{width:8px;height:8px;border-radius:50%;flex:none}

/* the tailored tier cards — narrower than the price page's, so five can stand */
.vt{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px;margin-top:48px;
  align-items:stretch}
.vt>*{min-width:0}
.vtc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px 22px;
  box-shadow:var(--lift-1);display:flex;flex-direction:column;position:relative}
.vtc.hi{border:2px solid var(--iris);box-shadow:var(--lift-3)}
.vtc.hi:before{content:attr(data-tag);position:absolute;top:-11px;left:18px;background:var(--iris);
  color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.13em;padding:5px 12px;
  border-radius:999px;text-transform:uppercase}
.vtc>s{display:block;text-decoration:none;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.vtc h3{font-size:22px}
.vtc .amt{font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:-.03em;
  margin-top:10px;line-height:1;color:var(--iris-deep)}
.vtc .amt em{font-style:normal;font-family:var(--sans);font-size:12.5px;font-weight:500;
  color:var(--muted);letter-spacing:0;display:block;margin-top:6px}
.vtc .who{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:12px;flex:1}
.vtc .meta{font-size:10.5px;color:var(--faint);margin-top:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.vtc .go{margin-top:14px;height:40px;width:100%;padding:0 6px;font-size:12.5px;border-radius:9px}

/* the feature table that opens: native details, no script on the site */
.ft{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:26px;background:#fff}
.ft-head,.ft-row,.ft summary{display:grid;grid-template-columns:1fr repeat(var(--cols,4),108px);
  align-items:center}
.ft-head{background:var(--soft);border-bottom:1px solid var(--line);padding:12px 0;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.ft-head>:first-child{padding-left:22px}
.ft-head>span,.ft-row>span{text-align:center}
.ft-head>.on{color:var(--iris-deep)}
.ft details{border-bottom:1px solid var(--line)}
.ft details:last-child{border-bottom:0}
.ft summary{cursor:pointer;list-style:none;padding:13px 0;font-size:14.5px;font-weight:600;
  color:var(--ink)}
.ft summary::-webkit-details-marker{display:none}
.ft summary>b{display:flex;align-items:center;gap:12px;padding-left:22px;font-weight:600}
.ft summary>b svg{flex:none;transition:transform .15s ease}
.ft details[open] summary>b svg{transform:rotate(90deg)}
.ft summary>u{text-decoration:none;grid-column:2/-1;text-align:right;padding-right:22px;
  font-size:12px;font-weight:500;color:var(--faint)}
.ft summary:hover{background:var(--paper)}
.ft-row{background:var(--paper);border-top:1px solid color-mix(in srgb,var(--iris) 7%,#fff);
  padding:9px 0;font-size:13px;color:var(--muted)}
.ft-row>:first-child{padding-left:56px}
.ft-row .no{text-decoration:none;color:var(--faint)}
.ft-row .add{font-size:11px;font-weight:700;letter-spacing:.04em;
  color:color-mix(in srgb,var(--draft) 62%,var(--ink))}
.ft-note{margin-top:16px;font-size:12.5px;color:var(--faint)}

@media (max-width:1080px){.vmods,.vd{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .ftwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ftwrap .ft{min-width:680px}
  .vsync{padding:28px 22px}
  .vsync-row>s{flex-basis:100%}
}
@media (max-width:640px){.vmods,.vd{grid-template-columns:1fr}.vt{grid-template-columns:1fr}}

/* ----------------------------- the dynamic price page (1.6, board 54) */
/* Radio buttons and CSS do the whole dance: pick a business, pick a term,
   and the page rearranges itself. No script, no reload — the one script on
   the page only reads a #hash so a vertical page can arrive pre-selected. */
.spot{display:block}
.pp-radio{position:absolute;left:-9999px}
/* BOARD 96, ARRANGEMENT C (his word, 2026-08-29: "we need space between the
   two... the term is touching nearly the field above... a little bit more
   joyful"). The card is no longer two uppercase labels over two shelves of
   controls: it is a tinted head and TWO NUMBERED QUESTIONS, each keeping its
   own row, divided by a rule. The old .plab pair is gone from the page — the
   gap between the questions is now a row boundary, which cannot be squeezed. */
.psel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--lift-2);
  padding:0;margin-top:-52px;position:relative;z-index:5;overflow:hidden}
.pshead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:13px 26px;background:var(--iris-tint);
  border-bottom:1px solid color-mix(in srgb,var(--iris) 16%,#fff)}
.pshead b{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--iris-deep)}
.pshead s{text-decoration:none;font-size:12px;color:color-mix(in srgb,var(--ink) 52%,#fff)}
/* 200px holds the longer of the two questions on one line, so both sets of
   controls start on the same left edge — which is what the board draws. */
.psq{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start;padding:17px 26px}
.psq + .psq{border-top:1px solid var(--line)}
/* start-aligned, then the question is given the height of one control row, so
   it centres against the pills above and against the segment below rather than
   drifting to the middle of the term row's three lines. */
.psn{display:flex;align-items:center;gap:12px;min-height:40px;
  font-size:13.5px;font-weight:600;color:var(--ink)}
.psn i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--iris-tint);
  display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;
  color:var(--iris-deep)}
.psans{display:flex;flex-direction:column;gap:9px}
.psnote,.psfine{font-size:12px;color:var(--faint)}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 18px;
  border:1.4px solid var(--line);border-radius:20px;font-weight:600;font-size:14px;
  color:var(--ink);cursor:pointer;background:#fff}
/* unchosen is a hollow ring; chosen is a DRAWN tick, the site's own tick path.
   The mark is swapped rather than recoloured, so the answered question reads
   as answered from across the room. */
.pill i{width:12px;height:12px;border-radius:50%;background:none;
  border:1.5px solid color-mix(in srgb,var(--iris) 32%,#fff)}
.pill .pk{display:none;flex:none}
.termrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pseg{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:19px;padding:3px}
.pseg label{padding:8px 18px;border-radius:15px;font-size:13.5px;font-weight:600;
  color:var(--muted);cursor:pointer}
.saveq{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paid) 80%,#000);background:var(--paid-tint);
  border:1px solid color-mix(in srgb,var(--paid) 40%,#fff);border-radius:13px;padding:6px 12px}
.pv,.a-y{display:none}
#bz-apartments:checked ~ .pp .pill[for=bz-apartments],
#bz-buildings:checked  ~ .pp .pill[for=bz-buildings],
#bz-bedspace:checked   ~ .pp .pill[for=bz-bedspace],
#bz-hotels:checked     ~ .pp .pill[for=bz-hotels],
#bz-shortstay:checked  ~ .pp .pill[for=bz-shortstay]{
  background:var(--iris);border-color:var(--iris);color:#fff}
#bz-apartments:checked ~ .pp .pill[for=bz-apartments] i,
#bz-buildings:checked  ~ .pp .pill[for=bz-buildings] i,
#bz-bedspace:checked   ~ .pp .pill[for=bz-bedspace] i,
#bz-hotels:checked     ~ .pp .pill[for=bz-hotels] i,
#bz-shortstay:checked  ~ .pp .pill[for=bz-shortstay] i{display:none}
#bz-apartments:checked ~ .pp .pill[for=bz-apartments] .pk,
#bz-buildings:checked  ~ .pp .pill[for=bz-buildings] .pk,
#bz-bedspace:checked   ~ .pp .pill[for=bz-bedspace] .pk,
#bz-hotels:checked     ~ .pp .pill[for=bz-hotels] .pk,
#bz-shortstay:checked  ~ .pp .pill[for=bz-shortstay] .pk{display:block}
#tm-month:checked ~ .pp .pseg label[for=tm-month],
#tm-year:checked  ~ .pp .pseg label[for=tm-year]{background:var(--iris);color:#fff}
#bz-apartments:checked ~ .pp .pv-apartments,
#bz-buildings:checked  ~ .pp .pv-buildings,
#bz-bedspace:checked   ~ .pp .pv-bedspace,
#bz-hotels:checked     ~ .pp .pv-hotels,
#bz-shortstay:checked  ~ .pp .pv-shortstay{display:block}
#tm-year:checked ~ .pp .a-m{display:none}
#tm-year:checked ~ .pp .a-y{display:block}
.pvhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:44px}
.pvhead h3{font-size:24px}
.pvhead s{text-decoration:none;font-size:13px;color:var(--muted)}
.vtc .amt em{min-height:34px}
.vtc .alt{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:0;
  color:var(--faint);margin-top:5px}

/* the five business doors on the homepage (1.6, board 57) */
/* THREE ACROSS since board 73 (1.20.0), not six. Six was right for a row of
   doors that each carried one word; a card with two doors, a line of its own
   and what is inside it needs the width the board draws — at six the demo door
   was clipped off the end of every card. */
.bizrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.bizrow>*{min-width:0}
.bz{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px 18px;
  box-shadow:var(--lift-1);display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease}
.bz:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.bz .art{background:var(--soft);border-radius:10px;display:grid;place-items:center;padding:14px 0}
.bz b{font-size:17px;font-weight:600;margin-top:14px;color:var(--ink)}
.bz s{text-decoration:none;font-size:13px;line-height:1.45;color:var(--muted);margin-top:4px}
.bz u{text-decoration:none;font-size:12.5px;font-weight:700;color:var(--iris-deep);margin-top:10px}

/* ---- the band grew a second door per card (board 73, 1.20.0) ----
   The card WAS one <a>; a card with two doors in it cannot be, because a link
   inside a link is not a thing. So the card is an <article> and the two doors
   are the links — the page it explains, and the estate it opens. */
.bz-has{display:inline-block;align-self:flex-start;font-style:normal;font-size:12px;
  margin-top:12px;flex:1 0 auto;padding:4px 9px;border-radius:999px;
  background:var(--paid-tint);color:color-mix(in srgb,var(--paid) 78%,#000)}
.bz-none{background:color-mix(in srgb,var(--ink) 5%,#fff);color:var(--faint)}
.bz-doors{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.bz-page{text-decoration:none;font-size:12.5px;font-weight:600;color:var(--iris-deep);white-space:nowrap}
.bz-page:hover{text-decoration:underline}
.bz-try{text-decoration:none;font-size:12.5px;font-weight:700;white-space:nowrap;
  padding:7px 13px;border-radius:999px;background:var(--iris);color:#fff}
.bz-try:hover{background:var(--iris-deep)}
.bz-soon{font-size:12.5px;font-weight:600;white-space:nowrap;
  padding:7px 13px;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 4%,#fff);color:var(--faint);
  border:1px solid color-mix(in srgb,var(--ink) 10%,#fff)}
/* what a demonstration IS, once, under all six rather than on each */
.bzsay{margin-top:26px;padding:20px 26px;border-radius:14px;
  background:var(--iris-tint);border:1px solid color-mix(in srgb,var(--iris) 16%,#fff)}
.bzsay b{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--iris-deep);margin-bottom:12px}
.bzsay ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px}
.bzsay li{font-size:13px;line-height:1.5;color:var(--muted);padding-left:22px;position:relative}
.bzsay li::before{content:'';position:absolute;left:2px;top:5px;width:9px;height:5px;
  border-left:2px solid var(--paid);border-bottom:2px solid var(--paid);transform:rotate(-45deg)}

@media (max-width:1080px){.bizrow{grid-template-columns:1fr 1fr}
  .bzsay ul{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.bizrow{grid-template-columns:1fr}
  /* one column: the numeral and its question sit above their own controls */
  .pshead{padding:12px 16px}.psq{grid-template-columns:1fr;gap:11px;padding:15px 16px}
  .pshead b{font-size:16px}
  /* 322px of card leaves the segment two lines at the desktop padding, and a
     two-line toggle reads as broken. Tighter padding, and neither half wraps. */
  .pseg label{padding:8px 14px;white-space:nowrap}
  /* two doors will not sit side by side on a 360px card: the page's own door
     goes above the demo's, which is the one worth the width */
  .bz-doors{flex-direction:column;align-items:stretch;gap:9px}
  .bz-try,.bz-soon{text-align:center}
  .bzsay{padding:16px 18px}.bzsay ul{grid-template-columns:1fr}}

/* -------------------------- the homepage body, today's platform (1.7, board 58) */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.rooms>*{min-width:0}
.room{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px 22px;
  box-shadow:var(--lift-1);display:flex;flex-direction:column}
.room .rhd{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid var(--line)}
.room h3{font-size:19px}
.room ul{display:flex;flex-direction:column;gap:10px;flex:1}
.room li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--muted)}
.room li svg{flex:0 0 18px;margin-top:1px}
.room>a{margin-top:16px;font-size:12.5px;font-weight:700;color:var(--iris-deep)}
.claims{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.claims span{display:flex;align-items:center;gap:10px;background:var(--soft);
  border:1px solid var(--line);border-radius:11px;padding:12px 16px;font-size:13px;font-weight:600}
.claims svg{flex:none}
.porch{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
.porch>*{min-width:0}
.pmini{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:18px 12px 16px;box-shadow:var(--lift-1);
  transition:transform .15s ease,box-shadow .15s ease}
.pmini:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.pmini b{font-size:14.5px;font-weight:600;margin-top:8px}
.pmini .pamt{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--iris-deep);margin-top:6px}
.pmini s{text-decoration:none;font-size:11.5px;color:var(--faint);margin-top:2px}
.pmini u{text-decoration:none;font-size:12px;font-weight:700;color:var(--iris-deep);margin-top:12px}
.helpo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.helpo>*{min-width:0}
.hteas{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;box-shadow:var(--lift-1);
  transition:transform .15s ease,box-shadow .15s ease}
.hteas:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.hteas .spot{flex:none}
.hteas b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.hteas u{display:block;text-decoration:none;font-size:12px;font-weight:700;color:var(--iris-deep);margin-top:5px}
@media (max-width:1080px){.rooms{grid-template-columns:repeat(2,1fr)}.claims{grid-template-columns:repeat(2,1fr)}
  .porch{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.rooms,.claims,.helpo{grid-template-columns:1fr}.porch{grid-template-columns:1fr 1fr}}

/* ------------------------------ /why, the argument page (1.10, board 60) */
.wchips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.wchips span{display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:5px 16px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.9)}
.wchips svg{flex:none}
.leads{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.leads>*{min-width:0}
.lead{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 20px;
  box-shadow:var(--lift-1)}
.lead b{display:block;font-size:15px;font-weight:600;line-height:1.35;margin-top:12px}
.lead p{font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:8px}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.ways>*{min-width:0}
.way{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px 24px}
.way.hi{border:2px solid var(--iris);box-shadow:var(--lift-3)}
.way h3{font-size:20px;margin-bottom:14px}
.way.hi h3{color:var(--iris-deep)}
.way ul{display:flex;flex-direction:column;gap:11px}
.way li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--muted)}
.way li svg{flex:0 0 18px;margin-top:1px}
.way li i{flex:0 0 12px;height:2px;border-radius:2px;background:var(--faint);margin-top:9px}
.nums.five{grid-template-columns:repeat(5,1fr);gap:22px}
.nums.five b{font-size:38px}
@media (max-width:1080px){.leads{grid-template-columns:repeat(2,1fr)}.ways{grid-template-columns:1fr}
  .nums.five{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.leads{grid-template-columns:1fr}.nums.five{grid-template-columns:1fr}}

/* ------------------------------------------------------ the guided sign-up (1.3) */
.su{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
/* FIVE steps since board 75 (1.22.0): what you run joined the four. */
.su-steps{grid-column:1/-1;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 6px;padding:0}
@media (max-width:900px){.su-steps{grid-template-columns:repeat(2,1fr)}}
.su-steps li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:13.5px;font-weight:600}
.su-steps b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--soft);color:var(--muted);flex:0 0 auto}
.su-steps li.on{color:var(--ink);border-color:var(--iris);box-shadow:0 0 0 3px color-mix(in srgb,var(--iris) 12%,#fff)}
.su-steps li.on b{background:var(--grad-btn);color:#fff}
.su-steps li.done b{background:var(--paid);color:#fff}
.su-form{padding:32px 36px}
.su-step{border:0;padding:0;margin:0;min-width:0}
.su-step legend{padding:0;margin-bottom:6px}.su-step legend h3{margin-top:4px}.su-step legend .s{margin-top:8px;max-width:560px}
.su-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.fhelp{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.5}
.ferr{font-size:13px;color:var(--overdue);margin-top:7px;font-weight:600}
.fld.is-bad input,.fld.is-bad select,.fld.is-bad textarea,.su-slug:has(input:invalid){border-color:var(--overdue)!important}
.su-shapes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;border-radius:14px}
.su-shapes.is-bad{outline:2px solid var(--overdue);outline-offset:6px}
.su-shape{position:relative;display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:14px 16px 14px 12px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}
.su-shape input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.su-shape .su-art{grid-row:1/3;display:block}
.su-shape svg{width:120px;height:70px;display:block}
.su-shape svg *{fill:none;stroke:var(--iris);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.su-shape b{font-size:15.5px}.su-shape s{text-decoration:none;font-size:13px;color:var(--muted);line-height:1.45}
.su-shape:has(input:checked){border-color:var(--iris);box-shadow:0 0 0 3px color-mix(in srgb,var(--iris) 14%,#fff);background:color-mix(in srgb,var(--iris) 3%,#fff)}
.su-shape:hover{border-color:color-mix(in srgb,var(--iris) 45%,var(--line))}
.su-places{margin-top:14px}.su-places label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.su-words{display:flex;flex-wrap:wrap;gap:8px}
.su-words label{position:relative}.su-words input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.su-words span{display:inline-block;min-height:48px;line-height:46px;padding:0 16px;border:1.5px solid var(--line);border-radius:11px;font-weight:600;font-size:14px;color:var(--muted);background:#fff}
.su-words input:checked+span{border-color:var(--iris);color:var(--ink);background:color-mix(in srgb,var(--iris) 5%,#fff)}
.su-slug{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.su-slug input{border:0!important;border-radius:0!important;flex:1;min-width:0;font-family:var(--mono);font-size:16px;padding-left:16px}
.su-slug input:focus{outline:none;box-shadow:none}
.su-slug:focus-within{border-color:var(--iris);box-shadow:0 0 0 3px color-mix(in srgb,var(--iris) 14%,#fff)}
.su-slug span{display:flex;align-items:center;padding:0 16px;font-family:var(--mono);font-size:15px;color:var(--muted);background:var(--soft);border-left:1px solid var(--line);white-space:nowrap}
.su-check[data-state=good]{color:var(--paid);font-weight:600}.su-check[data-state=bad]{color:var(--overdue);font-weight:600}.su-check[data-state=wait]{color:var(--faint)}
.su-docs{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.su-docs li{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:#fff}
.su-docs a{flex:1;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.su-docs a b{font-size:15px}.su-docs a s{text-decoration:none;font-size:13px;color:var(--muted);line-height:1.4}
.su-docs a:hover b{text-decoration:underline;text-underline-offset:3px}
.su-docs code{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap}
.su-agree{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:16px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-size:14.5px;line-height:1.55}
.su-agree input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--iris)}
.su-agree.is-bad{border-color:var(--overdue)}
.su-side{display:flex;flex-direction:column;gap:18px}
.su-side .box .btn{margin-top:14px}
.su-ok{max-width:680px;margin:0 auto}
@media (max-width:900px){.su{grid-template-columns:1fr}.su-steps{grid-template-columns:1fr 1fr}.su-form{padding:24px 20px}.su-shapes{grid-template-columns:1fr}}
@media (max-width:520px){.su-steps li span{display:none}.su-steps{grid-template-columns:repeat(4,1fr)}.su-shape{grid-template-columns:90px 1fr}.su-shape svg{width:90px;height:54px}.su-nav{flex-direction:column-reverse;align-items:stretch}}

/* ================= the concierge (board 59) =============================
   The AI chat on every page. Closed: one drawn bubble, iris, bottom right,
   with the paid green saying on duty. Open: a 380x560 panel, the page still
   visible behind; below 640px the panel is the whole screen. The visitor
   speaks right in iris; the concierge answers left on iris-tint paper. */
.cw-bubble{position:fixed;right:24px;bottom:24px;width:60px;height:60px;border-radius:50%;
  background:var(--iris);border:0;cursor:pointer;z-index:80;padding:0;
  box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 22%,transparent);transition:transform .15s ease}
.cw-bubble:hover{transform:scale(1.06)}
.cw-bubble svg{display:block;width:100%;height:100%}
.cw-bubble svg circle{fill:var(--iris)}
.cw-on{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:var(--paid);border:2px solid #fff}
.cw-hidden{display:none}
.cw-panel{position:fixed;right:24px;bottom:24px;width:380px;height:560px;max-height:calc(100vh - 48px);
  display:none;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;z-index:81;box-shadow:0 18px 48px color-mix(in srgb,var(--ink) 26%,transparent)}
.cw-panel.cw-open{display:flex}
.cw-head{position:relative;padding:14px 48px 12px 20px;color:#fff;
  background:linear-gradient(160deg,var(--iris),var(--sky))}
.cw-brand{font-family:var(--serif);font-size:19px;display:flex;align-items:center;gap:8px}
.cw-brand b{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.02em;opacity:.92}
.cw-dot{width:8px;height:8px;border-radius:50%;background:var(--paid);flex:0 0 auto}
.cw-sub{margin:6px 0 0;font-size:12px;line-height:1.45;color:color-mix(in srgb,#fff 82%,var(--iris))}
.cw-x{position:absolute;top:12px;right:12px;width:28px;height:28px;border:0;background:none;
  cursor:pointer;padding:4px;border-radius:8px}
.cw-x:hover{background:color-mix(in srgb,#fff 18%,transparent)}
.cw-x svg{display:block;width:100%;height:100%}
.cw-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.cw-m{max-width:82%;padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:break-word}
.cw-cc{align-self:flex-start;background:color-mix(in srgb,var(--iris) 7%,#fff);color:var(--ink)}
.cw-us{align-self:flex-end;background:var(--iris);color:#fff}
.cw-m a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cw-chip{align-self:flex-start;display:flex;align-items:center;gap:7px;font-size:11.5px;
  color:var(--faint);border:1px solid var(--line);border-radius:12px;padding:4px 12px;
  background:color-mix(in srgb,var(--iris) 2%,#fff)}
.cw-chip svg{width:11px;height:11px;color:var(--sky)}
.cw-typing{display:flex;gap:5px;padding:12px 14px}
.cw-typing i{width:7px;height:7px;border-radius:50%;background:var(--sky);
  animation:cw-blink 1.1s infinite}
.cw-typing i:nth-child(2){animation-delay:.18s}
.cw-typing i:nth-child(3){animation-delay:.36s}
@keyframes cw-blink{0%,70%,100%{opacity:.35}35%{opacity:1}}
.cw-input{display:flex;gap:10px;align-items:flex-end;padding:12px 16px 6px;border-top:1px solid var(--line)}
.cw-input textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:18px;
  background:color-mix(in srgb,var(--iris) 2%,#fff);padding:9px 15px;font:inherit;font-size:13.5px;
  line-height:1.4;max-height:96px;color:var(--ink)}
.cw-input textarea:focus{outline:2px solid var(--iris);outline-offset:-1px}
.cw-send{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:0;background:var(--iris);
  cursor:pointer;padding:9px}
.cw-send:disabled{opacity:.5;cursor:default}
.cw-send svg{display:block;width:100%;height:100%}
.cw-live{margin:0;padding:6px 16px 11px;font-size:11px;color:var(--faint);text-align:center;
  display:flex;align-items:center;justify-content:center;gap:7px}
.cw-live i{width:8px;height:8px;border-radius:50%;background:var(--paid);animation:cw-pulse 2.2s ease infinite}
@keyframes cw-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.cw-mute{position:absolute;top:12px;right:46px;width:28px;height:28px;border:0;background:none;
  cursor:pointer;padding:5px;border-radius:8px}
.cw-mute:hover{background:color-mix(in srgb,#fff 18%,transparent)}
.cw-mute svg{display:block;width:100%;height:100%}
.cw-lead{align-self:stretch;background:#fff;border:1px solid color-mix(in srgb,var(--iris) 35%,#fff);
  border-radius:12px;padding:12px 14px}
.cw-lead b{display:block;font-size:12.5px;margin-bottom:9px;color:var(--ink)}
.cw-lead-row{display:flex;gap:8px}
.cw-lead-row input{flex:1;border:1px solid var(--line);border-radius:13px;padding:7px 13px;
  font:inherit;font-size:12.5px;background:color-mix(in srgb,var(--iris) 2%,#fff);color:var(--ink)}
.cw-lead-row input:focus{outline:2px solid var(--iris);outline-offset:-1px}
.cw-lead-row input.cw-bad{border-color:var(--overdue)}
.cw-keep{border:0;border-radius:13px;background:var(--iris);color:#fff;font:inherit;font-size:12px;
  font-weight:600;padding:7px 16px;cursor:pointer}
.cw-notnow{border:0;background:none;padding:8px 0 0;font:inherit;font-size:11px;color:var(--sky);
  cursor:pointer;text-align:left}
.cw-nudge{animation:cw-nudge 1s ease .8s 1}
@keyframes cw-nudge{0%,100%{transform:translateY(0)}25%{transform:translateY(-10px)}45%{transform:translateY(0)}
  62%{transform:translateY(-5px)}80%{transform:translateY(0)}}
/* THE PHONE (his report, 2026-08-27: "on mobile it opens and seems glitched,
   too big"). Three real faults, all fixed here:
   1. iOS Safari ZOOMS THE WHOLE PAGE when an input under 16px takes focus —
      that was the "too big", and it never zooms back. Every field the panel
      owns is 16px from here down.
   2. `height:100%` on a fixed sheet is measured against the LARGE viewport,
      so the input row sat under the browser's own bar. `100dvh` follows the
      bar as it hides and shows, and the old value stays as the fallback.
   3. The breakpoint AND the auto-open test both read 700px now — they were
      640 and >=640, so at exactly 640 a phone got the full sheet AND the
      auto-open at once. chat.js matches this number through matchMedia.
   The sheet also keeps out of the notch and the home bar, gives every
   control a 44px target, and holds the page still behind it. */
@media (max-width:700px){
  .cw-panel{right:0;bottom:0;left:0;width:100%;height:100%;height:100dvh;max-height:none;
    border-radius:0;border:0;box-shadow:none;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .cw-head{padding:13px 92px 12px 18px}
  .cw-brand{font-size:18px}
  .cw-sub{font-size:12.5px}
  /* 44px targets, clear of each other and of the notch */
  .cw-x{top:8px;right:10px;width:40px;height:40px;padding:10px;border-radius:12px}
  .cw-mute{top:8px;right:52px;width:40px;height:40px;padding:11px;border-radius:12px}
  .cw-msgs{padding:14px 14px 10px;gap:9px}
  .cw-m{max-width:88%;font-size:15px;line-height:1.5;padding:10px 14px}
  .cw-input{padding:10px 14px 6px;gap:9px;align-items:flex-end}
  .cw-input textarea{font-size:16px;padding:10px 15px;max-height:112px}   /* 16px: no zoom */
  .cw-send{width:44px;height:44px;padding:11px}
  .cw-live{padding:5px 14px 10px;font-size:11.5px}
  .cw-lead{padding:13px 14px}
  .cw-lead b{font-size:14px}
  .cw-lead-row{flex-wrap:wrap}
  .cw-lead-row input{font-size:16px;padding:10px 14px;min-width:0}        /* 16px: no zoom */
  .cw-keep{font-size:14px;padding:10px 18px}
  .cw-notnow{font-size:13px;padding:10px 0 2px}
  /* the bubble clears the home bar, and is a comfortable thumb target */
  .cw-bubble{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* ------------------------------------------- the sync ring + wall (board 67) */
/* The homepage band wears the SAME dress as the hero banner (his ruling,
   2026-08-27), and the core carries the banner's own white lockup. */
.orb{background:
   radial-gradient(88% 70% at 50% -8%, color-mix(in srgb,var(--sky) 52%,transparent), transparent 62%),
   linear-gradient(168deg,var(--iris-deep),var(--iris) 46%,var(--iris-night));
  color:#fff;padding:64px 0 56px;margin-top:56px}
.orb .kicker{color:rgba(255,255,255,.55)}
.orb h2{color:#fff}
.orb .sub{color:rgba(255,255,255,.72)}
.oring{position:relative;max-width:1160px;margin:10px auto 0;aspect-ratio:1200/760}
.owire{position:absolute;inset:0;width:100%;height:100%}
.opos{position:absolute;transform:translate(-50%,-50%)}
.ipill{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:8px 16px;border-radius:12px;
  background:#fff;white-space:nowrap;box-shadow:0 6px 18px rgba(6,12,28,.18)}
.ipill .im{width:21px;height:21px;flex:none;display:block}
.ipill .iw-svg{width:auto;height:14px}   /* the wordmark-as-path logos: Visa, and board 68's three */
/* Board 68 (2026-08-28): three tiles carry the brand's own NAME as a path,
   and their boxes are not the plain wordmark's — Agoda's lockup hangs its
   five dots below the word, QuickBooks' q hangs below the baseline. Each is
   sized so its x-height matches the 15px Inter the other tiles set. */
.ipill .iw-agoda{height:32px}
.ipill .iw-qbo{height:21px}
.ipill .iw{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.ipill .iw i{font-style:normal}
.olane{position:absolute;transform:translate(-50%,-50%);text-decoration:none;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ocore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:174px;height:174px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;
  background:
   radial-gradient(90% 90% at 50% 0%, color-mix(in srgb,var(--sky) 40%,transparent), transparent 72%),
   linear-gradient(168deg,var(--iris-deep),var(--iris) 55%,var(--iris-night));
  border:1px solid rgba(255,255,255,.35);box-shadow:0 18px 44px rgba(6,12,28,.35)}
.ocore img{max-width:132px;height:auto}
.ocore s{text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.olegend{text-align:center;font-size:13px;color:rgba(255,255,255,.55);margin-top:20px}
.oticks{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-top:14px}
.oticks span{position:relative;padding-left:24px;font-size:14px;color:rgba(255,255,255,.78)}
.oticks span::before{content:"";position:absolute;left:0;top:4px;width:13px;height:7px;
  border-left:2.5px solid var(--paid);border-bottom:2.5px solid var(--paid);transform:rotate(-45deg)}
.orb .ctas{justify-content:center;margin-top:28px}
.swall{background:var(--ink);color:#fff;padding:46px 0 52px;margin-top:48px}
.swall .kicker{color:rgba(255,255,255,.5)}
.swall h3{color:#fff;font-size:27px}
.swall>.wrap>p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.66);max-width:720px;margin-top:10px}
.swrow{display:flex;align-items:center;gap:18px;margin-top:22px;flex-wrap:wrap}
.swrow>s{flex:0 0 110px;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
.swrow>div{display:flex;gap:12px;flex-wrap:wrap;flex:1}
@media (max-width:1080px){
  .ipill{min-height:36px;padding:6px 12px;gap:7px}
  .ipill .iw{font-size:13px}
  .ipill .im{width:18px;height:18px}
  .ipill .iw-svg{width:auto;height:12px}   /* width:auto AGAIN — .im above it would squash the path */
  .ipill .iw-agoda{height:27px}
  .ipill .iw-qbo{height:18px}
}
@media (max-width:900px){
  .oring{aspect-ratio:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 22px}
  .owire,.olane,.ocore{display:none}
  .opos{position:static;transform:none}
  .orb{padding:44px 0 44px}
  .swrow>s{flex-basis:100%}
}
/* While the sheet is up, the page behind it holds still — no scrolling
   through the chat, no rubber-band bounce carrying the layout with it. */
body.cw-sheet{overflow:hidden;overscroll-behavior:none}

/* ---------------- the demo porch on the price page (board 74, 1.21.0) -------
   ONE porch, and it shows ONE demonstration: whichever business the pills are
   showing. Six demos on a price page is a menu; the one the reader is already
   standing in front of is an answer. It lives inside each .pv view, so the
   radios that rearrange the page carry it with them — CSS only, no script,
   exactly as board 54 built the rest of this page. */
.dporch{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;
  /* 44px, because the porch is now the first thing under the feature table's
     note: the fee-against-collections block that used to hold that gap open
     was removed on his word (3.482.2). */
  margin:44px 0 0;padding:30px 34px;border-radius:18px;
  background:var(--iris-tint);border:1px solid color-mix(in srgb,var(--iris) 18%,#fff)}
.dporch .kicker{margin-bottom:6px}
.dp-say h3{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);margin-bottom:10px}
.dp-say p{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:18px;max-width:34rem}
.dp-say s{display:block;text-decoration:none;font-size:12px;color:var(--faint);margin-top:10px}
/* the picture: a workspace, not a screenshot — the estate's own name over the
   three things a reader would go in to look at */
.dp-shot{background:#fff;border-radius:14px;box-shadow:var(--lift-2);overflow:hidden}
.dp-shot b{display:block;padding:12px 18px;font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--iris-deep),var(--iris))}
.dp-shot ul{padding:6px 18px 14px}
.dp-shot li{position:relative;padding:10px 0 10px 22px;font-size:13px;line-height:1.45;color:var(--ink);
  border-bottom:1px solid var(--line)}
.dp-shot li:last-child{border-bottom:0}
.dp-shot li::before{content:'';position:absolute;left:0;top:15px;width:9px;height:5px;
  border-left:2px solid var(--paid);border-bottom:2px solid var(--paid);transform:rotate(-45deg)}
@media (max-width:900px){
  .dporch{grid-template-columns:1fr;gap:22px;padding:24px}
  .dp-say p{max-width:none}
}

/* ---------------- step 2: what do you run (board 75, 1.22.0) ---------------
   The form has only ever asked the SHAPE of the estate, which is geometry. It
   has never asked what the business IS, so whoever opens the workspace has
   been guessing which modules to switch on from an email. The card says what
   each answer switches on, because "Hotel" means nothing to somebody who has
   not yet seen a folio. */
.su-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.su-kinds.is-bad{outline:2px solid var(--overdue);outline-offset:6px;border-radius:14px}
.su-kind{position:relative;display:flex;flex-direction:column;cursor:pointer;
  padding:16px 18px 18px;border-radius:14px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--lift-1)}
.su-kind:hover{border-color:color-mix(in srgb,var(--iris) 45%,#fff)}
.su-kind input{position:absolute;opacity:0;pointer-events:none}
.su-kind:has(input:checked){border-color:var(--iris);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--iris) 14%,#fff),var(--lift-1)}
.su-kind:has(input:focus-visible){box-shadow:var(--ring)}
.su-kind .su-art{width:40px;height:40px;display:grid;place-items:center}
.su-kind b{margin-top:10px;font-size:15px;font-weight:600;color:var(--ink)}
.su-kind s{text-decoration:none;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.su-gets{display:block;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-style:normal}
.su-gets i{display:block;position:relative;padding:3px 0 3px 20px;font-style:normal;
  font-size:12px;line-height:1.45;color:var(--muted)}
.su-gets i::before{content:'';position:absolute;left:1px;top:8px;width:8px;height:4px;
  border-left:2px solid var(--paid);border-bottom:2px solid var(--paid);transform:rotate(-45deg)}
/* the line that arrives only with somebody who has been inside a demonstration */
/* NOT a flex row: display:flex made the bold business name its own flex item,
   so the sentence broke into three pieces with gaps in it. It is a sentence. */
.su-recall{margin-bottom:14px;
  padding:12px 16px;border-radius:12px;font-size:13.5px;line-height:1.5;
  background:var(--paid-tint);color:color-mix(in srgb,var(--ink) 80%,#fff);
  border:1px solid color-mix(in srgb,var(--paid) 30%,#fff)}
.su-core{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--faint)}
@media (max-width:900px){.su-kinds{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.su-kinds{grid-template-columns:1fr}}

/* ============================================================================
   BOARDS 80-85 (site 1.31.0) — the competitor review's components.
   Everything here derives from the eight; not one literal colour below.
   ========================================================================== */

/* ---- the leads grid at three across (boards 80, 85) ---------------------- */
.leads.three{grid-template-columns:repeat(3,1fr)}
.lmore{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--iris)}

/* ---- board 80: the move-in picture --------------------------------------
   The argument is that the spreadsheet BECOMES the door list, so the two are
   drawn as real tables facing each other. Three icons and the words "easy
   migration" is what every competitor already has. */
.movein{display:grid;grid-template-columns:1fr 132px 1fr;gap:0;align-items:center;margin-top:44px}
.movein>*{min-width:0}
.mi-cap{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:5px 14px;margin-bottom:12px}
.mi-cap.on{color:color-mix(in srgb,var(--iris) 74%,#000);border-color:color-mix(in srgb,var(--iris) 34%,#fff);
  background:var(--iris-tint)}
.mi-sheet,.mi-doors{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mi-sheet{border-color:color-mix(in srgb,var(--ink) 18%,#fff)}
/* the global table rule carries min-width:720px for the big feature tables;
   this one lives in a half-width card and must be allowed to be narrow, or its
   last column is pushed out of the card and silently clipped */
.mi-sheet table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;font-size:12.5px}
.mi-sheet th:nth-child(1),.mi-sheet td:nth-child(1){width:17%}
.mi-sheet th:nth-child(2),.mi-sheet td:nth-child(2){width:41%}
.mi-sheet th:nth-child(3),.mi-sheet td:nth-child(3){width:24%}
.mi-sheet th:nth-child(4),.mi-sheet td:nth-child(4){width:18%}
.mi-sheet td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-sheet th{background:color-mix(in srgb,var(--ink) 6%,#fff);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:left;padding:8px 12px}
.mi-sheet td{padding:8px 12px;border-top:1px solid color-mix(in srgb,var(--ink) 8%,#fff);color:var(--muted);
  font-family:var(--mono);font-size:11.5px}
.mi-sheet td:nth-child(2){font-family:var(--sans);font-size:12.5px}
.mi-sheet .mi-flag{background:color-mix(in srgb,var(--draft) 26%,#fff);
  color:color-mix(in srgb,var(--draft) 82%,#000);font-weight:600}
.mi-doors ul{padding:0}
.mi-doors li{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:12.5px;
  border-top:1px solid color-mix(in srgb,var(--iris) 8%,#fff)}
.mi-doors li:first-child{border-top:0}
.mi-doors li.dim{color:var(--faint)}
.mi-doors b{flex:none;min-width:30px;text-align:center;background:var(--iris-tint);border-radius:5px;
  padding:3px 6px;font-size:11px;font-weight:700;color:color-mix(in srgb,var(--iris) 76%,#000)}
.mi-who{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-amt{flex:none;font-family:var(--mono);font-size:11.5px}
.mi-chip{flex:none;font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 9px}
.mi-chip.paid{background:var(--paid-tint);color:color-mix(in srgb,var(--paid) 78%,#000)}
.mi-chip.draft{background:var(--draft-tint);color:color-mix(in srgb,var(--draft) 82%,#000)}
.mi-chip.over{background:var(--overdue-tint);color:color-mix(in srgb,var(--overdue) 80%,#000)}
.mi-arrow{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 12px}
.mi-arrow span{font-size:11.5px;font-weight:600;color:color-mix(in srgb,var(--iris) 76%,#000);
  background:#fff;border:1px solid color-mix(in srgb,var(--iris) 34%,#fff);border-radius:999px;padding:5px 13px}
.mi-arrow em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--faint)}
.mi-note{margin-top:10px;font-size:12px;color:var(--faint)}
.mi-over{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:32px;
  background:var(--ink);color:#fff;border-radius:12px;padding:18px 24px}
.mi-over b{font-size:13.5px}
.mi-over span{font-size:13px;color:rgba(255,255,255,.72)}

/* ---- board 80: the three steps, each with its day ------------------------ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.steps>*{min-width:0}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:22px 20px 20px;box-shadow:var(--lift-1)}
.step>i{position:absolute;top:0;left:20px;width:34px;height:3px;background:var(--iris);
  border-radius:0 0 3px 3px}
.st-day{font-family:var(--mono);font-size:11px;color:color-mix(in srgb,var(--iris) 66%,#000);
  letter-spacing:.06em}
.step h3{font-family:var(--serif);font-size:21px;font-weight:400;margin:6px 0 10px}
.step p:last-child{font-size:12.5px;line-height:1.6;color:var(--muted)}

/* ---- board 84: the honest table ----------------------------------------- */
.htbl{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.htbl table{width:100%;min-width:640px;border-collapse:collapse}
.htbl th{background:color-mix(in srgb,var(--ink) 5%,#fff);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);text-align:left;padding:12px 20px}
.htbl td{padding:14px 20px;border-top:1px solid color-mix(in srgb,var(--ink) 7%,#fff);vertical-align:top}
.ta-r{text-align:right}
.ht-what{font-size:13.5px;font-weight:600;min-width:220px}
.ht-what a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:3px}
.ht-what a:hover{text-decoration-color:var(--iris)}
.ht-why{font-size:12.5px;line-height:1.55;color:var(--muted)}
.ht-chip{display:inline-block;white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:4px 11px}
.ht-chip.done{background:var(--paid-tint);color:color-mix(in srgb,var(--paid) 78%,#000)}
.ht-chip.hand{background:var(--draft-tint);color:color-mix(in srgb,var(--draft) 84%,#000)}
.ht-chip.no{background:color-mix(in srgb,var(--ink) 6%,#fff);color:var(--faint)}
.ht-foot{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--faint);max-width:820px}

/* ---- board 85: the comparison table ------------------------------------- */
.cmp{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.cmp table{width:100%;min-width:760px;border-collapse:collapse}
.cmp th{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  text-align:left;padding:20px;vertical-align:bottom}
.cmp th:first-child{width:40%}
.cmp th.hi{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:0;text-transform:none;
  color:color-mix(in srgb,var(--iris) 80%,#000)}
.cmp td{padding:12px 20px;border-top:1px solid color-mix(in srgb,var(--ink) 7%,#fff)}
.cmp .hi{background:var(--iris-tint)}
.cm-what{font-size:13px;color:color-mix(in srgb,var(--ink) 86%,#fff)}
.cm{display:inline-flex;align-items:center;gap:8px}
/* Saying "does not" in all thirty-six cells makes a wall of words out of a
   picture, so the word rides along for a screen reader and the eye reads the
   mark. The legend below the table spells all three out once (board 85). */
.cmp .cm em{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cm em{font-style:normal;font-size:12px;color:var(--muted)}
.cm-key{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px;padding-left:20px}
.cm-key .cm.y em{color:color-mix(in srgb,var(--paid) 80%,#000);font-weight:600}
.cm.p>i{width:12px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 34%,#fff);
  flex:none;margin:0 3px}
.cm svg{flex:none}

/* ---- board 82: the answer bar ------------------------------------------- */
.desk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  margin-top:40px;padding:22px 26px;border-radius:14px;
  background:color-mix(in srgb,var(--iris-night) 92%,#000);
  border:1px solid rgba(255,255,255,.10);text-align:left}
.dk-say{min-width:0}
.dk-state{display:flex;align-items:center;gap:10px}
.dk-state>i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--draft)}
.desk.is-open .dk-state>i{background:var(--paid)}
.dk-state b{font-family:var(--serif);font-size:20px;font-weight:400;color:#fff}
.dk-sub{margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.66)}
.dk-when{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.52)}
.dk-doors{display:flex;flex-wrap:wrap;gap:10px}
.dk-btn{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px;border-radius:10px;
  font-size:13.5px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.26)}
.dk-btn>i{width:11px;height:11px;border-radius:50%;background:#fff;flex:none}
.dk-btn.viber{background:var(--viber);border-color:transparent}
.dk-btn.wa{background:var(--wa);border-color:transparent}
.dk-btn.tick.is-first{background:#fff;color:var(--iris-deep);border-color:transparent}

/* ---- the phone ----------------------------------------------------------- */
@media (max-width:900px){
  .leads.three{grid-template-columns:1fr}
  .movein{grid-template-columns:1fr;gap:18px}
  .mi-arrow{flex-direction:row;padding:0}
  .mi-arrow svg{transform:rotate(90deg)}
  .steps{grid-template-columns:1fr}
  .desk{flex-direction:column;align-items:flex-start}
}

/* ---- board 81: the founding estates, and the shelf that is empty on purpose
   We have no customers yet, so we have no words from customers. Every other
   homepage in this category fills this row in; ours says why it cannot. */
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:44px}
.shelf-head span{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.shelf-head em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:color-mix(in srgb,var(--draft) 82%,#000)}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.shelf>*{min-width:0}
.shelf-c{border:1.5px dashed color-mix(in srgb,var(--ink) 24%,#fff);border-radius:14px;padding:22px 20px}
.shelf-c p{font-size:13px;line-height:1.6;color:color-mix(in srgb,var(--ink) 42%,#fff)}
.shelf-who{display:flex;align-items:center;gap:11px;margin-top:22px}
.shelf-who i{width:26px;height:26px;border-radius:50%;flex:none;
  border:1.5px dashed color-mix(in srgb,var(--ink) 22%,#fff)}
.shelf-who span{display:block;height:7px;width:120px;border-radius:4px;
  background:color-mix(in srgb,var(--ink) 9%,#fff)}
.shelf-foot{margin-top:22px;font-size:12.5px;line-height:1.6;color:var(--faint);max-width:760px}
@media (max-width:900px){.shelf{grid-template-columns:1fr}}

/* ---- board 83: the door counter -----------------------------------------
   The page used to hand the visitor five tier cards and let them work out
   which one they were in. The bands are anchors and the answer is the tier
   card itself, ringed by :target — no script, the way board 54 built this
   page, and no figure of its own: every band is the tier cards' own ceiling. */
.dcount{margin:0 0 30px}
.dc-q{font-family:var(--serif);font-size:clamp(23px,2.3vw,30px);font-weight:600;letter-spacing:-.015em}
.dc-bands{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.dc-b{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:132px;flex:1 1 132px;
  padding:12px 18px;border:1px solid var(--line);border-radius:11px;background:#fff;
  box-shadow:var(--lift-1);transition:border-color .12s,box-shadow .12s}
.dc-b:hover{border-color:color-mix(in srgb,var(--iris) 40%,#fff);box-shadow:var(--lift-2)}
.dc-b b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.dc-b s{text-decoration:none;font-size:12px;color:var(--faint)}
.dc-note{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--faint);max-width:760px}
/* the answer: the tier the visitor just asked for, ringed where it stands */
.vtc:target{border-color:var(--iris);box-shadow:var(--ring),var(--lift-2)}
@media (max-width:640px){.dc-b{flex:1 1 100%}}

/* THE CERTIFICATE SECTION on /trust (his ask, 2026-08-29): the facts the
   platform reads from the live handshake, beside the issuer's own seal drawing
   itself. Two columns that become one on a phone. */
.certgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;margin-top:26px;align-items:start}
.certfacts,.certseal{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.certfacts h4,.certseal h4{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.certfacts dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:0}
.certfacts dt{font-size:13.5px;color:var(--muted)}
.certfacts dd{margin:0;font-size:13.5px;color:var(--ink)}
/* .fine is white-on-dark — it is the hero's and the footer's class, and on this
   LIGHT section it rendered all but invisible. Caught by looking at the render
   rather than at the markup, which is the only way this kind of fault is ever
   caught. Scoped, and mixed from the site's own --ink rather than hand-written. */
#certificate .fine{color:var(--muted)}
.certseal #siteseal{display:block;margin-top:16px;min-height:74px}
@media(max-width:820px){.certgrid{grid-template-columns:1fr}}