/* Alegreya + Alegreya SC, self-hosted (2026-09-09) ---------------------
   Lifted verbatim from tanentros-app/src/styles.css, only the url root
   changed. Every Google subset is here with its unicode-range, so a
   Greek or Cyrillic guest name still renders. NO third-party request.
   Cormorant Garamond is NOT self-hosted: it is nowhere in the repo and
   the network is closed to this session. It remains the one external
   call until Jon rules on the display face. */
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-i400-cyrillic.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-i400-greek-ext.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-i400-greek.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-i400-vietnamese.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-i400-latin-ext.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-i400-latin.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-i400-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-n400-cyrillic.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-n400-greek-ext.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-n400-greek.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-n400-vietnamese.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-n400-latin-ext.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-n400-latin.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Alegreya-n400-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Alegreya-n400-cyrillic.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Alegreya-n400-greek-ext.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Alegreya-n400-greek.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Alegreya-n400-vietnamese.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Alegreya-n400-latin-ext.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Alegreya-n400-latin.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Alegreya-n400-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya SC"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-i400-cyrillic.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Alegreya SC"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-i400-greek-ext.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya SC"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-i400-greek.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Alegreya SC"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-i400-vietnamese.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Alegreya SC"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-i400-latin-ext.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Alegreya SC"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-i400-latin.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya SC"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-i400-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-n400-cyrillic.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-n400-greek-ext.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-n400-greek.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-n400-vietnamese.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-n400-latin-ext.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-n400-latin.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/AlegreyaSC-n400-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/AlegreyaSC-n700-cyrillic.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/AlegreyaSC-n700-greek-ext.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/AlegreyaSC-n700-greek.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/AlegreyaSC-n700-vietnamese.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/AlegreyaSC-n700-latin-ext.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/AlegreyaSC-n700-latin.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/AlegreyaSC-n700-latin-basic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* TANENTROS landing — v3 repass (design chat, 2026-09-08)
   Loads AFTER landing.css: tokens, buttons, cards, ribbons and the token
   ladder all come from there unchanged. This file only restructures.
   Nothing in landing.css is edited, so v1/v2 keep working. */

/* ── the page is a sequence of rooms, each with its own light ────────── */
.act{position:relative;overflow:clip}
.act + .act::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(201,164,111,.5) 16%,rgba(255,226,180,.95) 50%,rgba(201,164,111,.5) 84%,transparent)}

/* ── ACT I · the threshold ───────────────────────────────────────────── */
.threshold{min-height:100svh;display:grid;align-items:center;color:#F3EADA;
  --s-title:#F6EEE0;--s-ink:#C9BFAE;--s-metal-deep:var(--gold-lit)}
.threshold-ground{position:absolute;inset:0;z-index:0;
  background:#0A0806 url("assets/banner-dark-rock.webp") right center/cover no-repeat;
  transform:scale(1.06) translateY(calc(var(--par,0) * .06px));will-change:transform}
.threshold-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,6,5,.92) 0%,rgba(8,6,5,.86) 34%,rgba(8,6,5,.35) 56%,transparent 74%),
    radial-gradient(70% 60% at 16% 10%,rgba(255,226,180,.10),transparent 68%),
    linear-gradient(180deg,rgba(8,6,5,.55),transparent 22%,transparent 72%,rgba(8,6,5,.75))}
.threshold .wrap{position:relative;z-index:2;padding-block:clamp(90px,14vh,150px)}

.threshold h1{font-family:var(--display);font-weight:700;color:#FBF6EC;
  font-size:clamp(44px,6.6vw,92px);line-height:.98;letter-spacing:-.015em;margin-top:16px}
.threshold h1 .cel{color:var(--cel)}
.threshold h1 .gold{background:linear-gradient(180deg,var(--gold-glint),var(--gold-lit) 46%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.threshold .lede{color:#CFC4B2;margin-top:22px;max-width:46ch;font-size:clamp(17px,1.3vw,19.5px)}
.threshold .hero-cta{margin-top:34px}
.threshold .hero-meta{margin-top:28px;color:#A79A86}

/* the scroll cue: a hairline that fills, once */
.cue{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);
  display:grid;justify-items:center;gap:9px;pointer-events:none}
.cue span{font-family:var(--caps);font-size:11px;letter-spacing:var(--caps-track);text-transform:uppercase;color:#8C8171}
.cue i{display:block;width:1px;height:54px;background:linear-gradient(180deg,transparent,rgba(201,164,111,.7));
  position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-54px;width:1px;height:54px;
  background:linear-gradient(180deg,transparent,var(--cel));animation:cue-fall 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cue-fall{0%{transform:translateY(0)}70%,100%{transform:translateY(108px)}}

/* ── ACT III · the instrument: one screen, chapters beside it ─────────── */
.instrument .wrap{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,72px);align-items:start}
.chapters{display:grid;gap:clamp(26px,4vh,56px)}
.chapter{padding:22px 0 24px;border-top:1px solid var(--s-hairline);opacity:.44;transition:opacity .4s ease}
.chapter.live{opacity:1}
.chapter h3{font-family:var(--caps);font-size:19px;letter-spacing:var(--caps-track);color:var(--s-title);margin-bottom:8px}
.chapter p{font-size:16.5px;max-width:46ch}
.chapter .tag{display:inline-block;margin-top:12px;font-family:var(--caps);font-size:12px;letter-spacing:var(--caps-track);
  text-transform:uppercase;color:var(--s-metal-deep);border:1px solid rgba(201,164,111,.5);border-radius:999px;padding:3px 10px}
.screen-hold{position:sticky;top:clamp(84px,14vh,150px)}
.screen{position:relative;border-radius:16px;overflow:hidden;background:var(--paper);
  border:1px solid var(--s-hairline);box-shadow:var(--shadow-3)}
.screen-head{display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:linear-gradient(180deg,#2A231C,#191410);border-bottom:1px solid rgba(201,164,111,.3)}
.screen-head i{width:9px;height:9px;border-radius:50%;background:#4A4038}
.screen-head b{margin-left:8px;font-family:var(--caps);font-size:12.5px;letter-spacing:var(--caps-track);
  color:#C9BFAE;text-transform:uppercase}
.screen-body{aspect-ratio:16/10;display:grid;place-items:center;padding:22px;text-align:center;
  background:repeating-linear-gradient(135deg,#F4EDE1,#F4EDE1 12px,#EFE7D8 12px,#EFE7D8 24px)}
.slot{font-family:var(--caps);font-size:13px;letter-spacing:var(--caps-track);text-transform:uppercase;color:#B4432F;
  border:1px dashed #B4432F;border-radius:8px;padding:10px 14px;background:rgba(180,67,47,.06)}

/* ── ACT V · the thrones stand on a shelf ────────────────────────────── */
.shelf{position:relative}
.shelf::after{content:"";position:absolute;left:2%;right:2%;bottom:-18px;height:64px;z-index:-1;
  background:linear-gradient(180deg,rgba(23,19,16,.22),transparent 62%),
             url("assets/pattern-stone.webp") center/560px repeat;
  border-radius:0 0 22px 22px;opacity:.5;filter:blur(.3px)}

/* ── ACT VI · the map answers a question instead of listing rows ─────── */
.chooser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);
  align-items:center;margin-top:38px;padding:clamp(22px,3vw,34px);border-radius:20px;
  background:linear-gradient(168deg,#FFFEFA,#F1E9DB);border:1px solid var(--s-hairline);box-shadow:var(--shadow-2)}
.chooser label{display:block;font-family:var(--caps);font-size:13px;letter-spacing:var(--caps-track);
  text-transform:uppercase;color:var(--s-metal-deep)}
.chooser .doors-num{font-family:var(--display);font-size:clamp(46px,6vw,74px);line-height:1;color:var(--ink);margin:6px 0 4px}
.chooser input[type=range]{width:100%;accent-color:var(--cel-deep);margin-top:14px}
.chooser-out{display:grid;justify-items:center;text-align:center;gap:8px}
.chooser-out img{width:min(230px,74%);height:96px;object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(23,19,16,.34))}
.chooser-out .tier{font-family:var(--caps);font-size:20px;letter-spacing:var(--caps-track);color:var(--ink)}
.chooser-out .price{font-family:var(--display);font-size:34px;line-height:1}
.chooser-out .why{font-size:15px;color:var(--silver-deep);max-width:34ch}

/* the full matrix, in four named groups, closed until asked for */
.groups{margin-top:26px;display:grid;gap:12px}
.group{border:1px solid var(--s-hairline);border-radius:14px;background:var(--paper);overflow:hidden}
.group > summary{cursor:pointer;list-style:none;padding:15px 20px;font-family:var(--caps);font-size:15.5px;
  letter-spacing:var(--caps-track);color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.group > summary::-webkit-details-marker{display:none}
.group > summary::after{content:"+";font-family:var(--body);font-size:20px;color:var(--s-metal-deep)}
.group[open] > summary::after{content:"–"}
.group .tbl{margin:0;border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--s-hairline)}

@media (max-width:1100px){
  .threshold-copy{max-width:none}
  .threshold-veil{background:linear-gradient(180deg,rgba(8,6,5,.86),rgba(8,6,5,.6) 46%,rgba(8,6,5,.9)),
    radial-gradient(70% 50% at 20% 8%,rgba(255,226,180,.10),transparent 70%)}
  .instrument .wrap{grid-template-columns:1fr}
  .screen-hold{position:relative;top:0;order:-1}
  .chooser{grid-template-columns:1fr}
}

/* ── v4 · the nav belongs to the hero until you leave it ──────────────── */
.nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease,padding .25s ease,box-shadow .25s ease}
.nav .nav-brand b{color:#F7EFE1}
.nav .nav-links a:not(.btn){color:#DED3C1}
.nav .nav-links a:not(.btn)::after{background:var(--gold-lit)}
.nav .nav-toggle{border-color:rgba(240,230,214,.45)}
.nav .nav-toggle span{background:#EFE6D6}
.nav.compact{background:rgba(248,243,234,.93);border-bottom-color:rgba(97,73,37,.16);
  backdrop-filter:blur(10px) saturate(1.1)}
.nav.compact .nav-brand b{color:var(--ink)}
.nav.compact .nav-links a:not(.btn){color:var(--ink-soft)}
.nav.compact .nav-links a:not(.btn)::after{background:var(--gold)}
.nav.compact .nav-toggle{border-color:rgba(97,73,37,.4)}
.nav.compact .nav-toggle span{background:var(--ink)}

/* the vault plate Jon sent: axis measured off its end gem, celeste lettering */
.ribbon.vault-plate{--rib-centre:62.1%}
.ribbon.vault-plate span{color:var(--cel);-webkit-text-stroke:0}

/* ── v4 · the threshold: NIGHT WALL (Jon's pick, 2026-09-08) ─────────────
   Carved stone, the mark cut into the wall with its own celeste inside.
   The room is dark, so the type is pearl and the nav keeps light lettering
   until it goes solid. The page is now one continuous room: hero dark,
   leak dark, vault dark, with the light acts between them. */
.threshold{color:#F3EADA;
  --s-title:#F6EEE0;--s-ink:#C9BFAE;--s-metal-deep:var(--gold-lit)}
.threshold-ground{background-image:url("assets/bg-hall-night.webp");
  background-position:center right;transform:scale(1.04) translateY(calc(var(--par,0) * .05px))}
.threshold-veil{background:
  linear-gradient(90deg,rgba(10,8,6,.90) 0%,rgba(10,8,6,.74) 32%,rgba(10,8,6,.22) 58%,transparent 76%),
  radial-gradient(66% 56% at 14% 8%,rgba(255,226,180,.10),transparent 70%),
  linear-gradient(180deg,rgba(10,8,6,.42),transparent 24%,transparent 72%,rgba(10,8,6,.66))}
.threshold h1{color:#FBF6EC}
.threshold h1 .cel{color:var(--cel)}
.threshold h1 .gold{background-image:linear-gradient(180deg,var(--gold-glint),var(--gold-lit) 46%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.threshold .lede{color:#CFC4B2}
.threshold .hero-meta{color:#A79A86}
.threshold .btn.on-dark{color:#F3EADA;
  --btn-face:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border-color:rgba(201,164,111,.5)}
.cue span{color:#8C8171}
.cue i{background:linear-gradient(180deg,transparent,rgba(201,164,111,.7))}
.cue i::after{background:linear-gradient(180deg,transparent,var(--cel))}

/* the nav belongs to the dark hero until you scroll off it */
.nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease,padding .25s ease,box-shadow .25s ease}
.nav .nav-brand b{color:#F7EFE1}
.nav .nav-links a:not(.btn){color:#DED3C1}
.nav .nav-links a:not(.btn)::after{background:var(--gold-lit)}
.nav .nav-toggle{border-color:rgba(240,230,214,.45)}
.nav .nav-toggle span{background:#EFE6D6}
.nav.compact{background:rgba(248,243,234,.93);border-bottom-color:rgba(97,73,37,.16);
  backdrop-filter:blur(10px) saturate(1.1)}
.nav.compact .nav-brand b{color:var(--ink)}
.nav.compact .nav-links a:not(.btn){color:var(--ink-soft)}
.nav.compact .nav-links a:not(.btn)::after{background:var(--gold)}
.nav.compact .nav-toggle{border-color:rgba(97,73,37,.4)}
.nav.compact .nav-toggle span{background:var(--ink)}

/* the plate Jon sent for the vault, on its own axis, lettered in celeste */
.ribbon.vault-plate{--rib-centre:62.1%}
.ribbon.vault-plate span{color:var(--cel);-webkit-text-stroke:0}

/* the nav must OVERLAY the hero, not sit in the flow above it - a sticky
   bar with a transparent background just shows the pearl page behind it */
.nav{position:fixed;left:0;right:0;top:0}
html{scroll-padding-top:76px}
.threshold{padding-top:clamp(70px,9vh,104px)}

/* ── v4 · celeste becomes the GILT SETUP (Jon 2026-09-08) ────────────────
   The brand celeste is a material, not a hex: flat #00C6E8 for borders,
   rings and marks; the ramp for every celeste SURFACE and display number;
   the relief filter on clipped text (a text-shadow blobs over it).
   Source: tanentros-app/src/styles.css :root, --tan-celeste / --tan-gilt.
   Declared here and not in landing.css because v3 is frozen on that file. */
:root{
  --cel:#00C6E8;
  --cel-lip:#6FF2FF;
  --cel-deep:#0090B4;
  --cel-glow:rgba(0,198,232,.45);
  --cel-gilt:linear-gradient(180deg,#6FF2FF 0%,#00C6E8 48%,#0090B4 100%);
  --cel-relief:drop-shadow(0 1.5px 1px rgba(90,60,20,.28));
}
/* display celeste wears the ramp, exactly like the finance NET card */
.threshold h1 .cel,.lines .cel{
  background-image:var(--cel-gilt);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:var(--cel-relief);
}
.counter{
  background:var(--cel-gilt);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:var(--cel-relief);text-shadow:none;
}

/* wrap: Jon picked A - the 52ch cap was the binding one, not the 46% */
.threshold-copy{max-width:min(64ch,52%)}

/* ── v4 · the arc: night to daylight (2026-09-09) ────────────────────────
   Jon gave four grounds. Rather than pick one and waste three, the page
   walks through them: it opens in the vault at night, crosses the bronze
   hall where the money leaks, comes into ivory light as the product opens,
   stands in glass at the decision, and closes back in the dark where the
   books are kept. Every ground sits under a veil heavy enough that no text
   loses contrast — the image sets temperature, never legibility. */

/* II · the leak — bronze hall */
.act.cost{background:
  linear-gradient(180deg,rgba(12,9,6,.93),rgba(26,18,10,.88) 55%,rgba(12,9,6,.94)),
  url("assets/bg-hall-bronze.webp") center/cover no-repeat}

/* III · the instrument — ivory light, the room opens */
.act.instrument{background:
  linear-gradient(180deg,rgba(250,246,238,.955),rgba(250,246,238,.93) 50%,rgba(248,243,234,.965)),
  url("assets/bg-hall-ivory.webp") center/cover no-repeat}

/* IV · the thrones stay on plain pearl — the plates are the picture */

/* V · the map — glass, the brightest room, where the decision is made */
.act.compare{background:
  linear-gradient(180deg,rgba(249,247,243,.955),rgba(244,241,235,.94) 50%,rgba(248,245,240,.965)),
  url("assets/bg-hall-white.webp") center/cover no-repeat}

/* VI · the vault returns to night, the bookend of the threshold */
.act.vault{background:
  linear-gradient(180deg,rgba(9,8,7,.93),rgba(16,14,12,.90) 55%,rgba(9,8,7,.95)),
  url("assets/bg-hall-night.webp") center/cover no-repeat}

@media (max-width:820px){
  .act.cost,.act.instrument,.act.compare,.act.vault{background-attachment:scroll}
}

/* wrap option A is a DESKTOP measure - on a phone the copy takes the width */
@media (max-width:1100px){ .threshold-copy{max-width:none} }

/* ── v4 · keyboard, and motion that can be switched off (2026-09-09) ──── */
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--cel);outline-offset:3px;border-radius:6px;
}
.nav-links a:focus-visible{outline-offset:6px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
  background:var(--paper);color:var(--ink);font-family:var(--caps);letter-spacing:var(--caps-track)}
.skip:focus{left:12px;top:12px}

@media (prefers-reduced-motion:reduce){
  .cue i::after{animation:none;opacity:.5;transform:none}
  .threshold-ground{transform:none}
  .act.cost,.act.instrument,.act.compare,.act.vault,.threshold-ground{background-attachment:scroll}
}

/* the chooser note measured 4.50:1 on the glass ground - exactly on the AA
   line. Ink-soft takes it clear of it without changing the hierarchy. */
.chooser-out .why{color:var(--ink-soft)}

/* ── v4 · the display face comes in house (Jon 2026-09-09) ───────────────
   Alegreya 700 replaces Cormorant Garamond. It is already served from our
   own origin, so the page now makes ZERO third-party requests. Cormorant
   stays in the stack as a local-only fallback for machines that have it. */
:root{--display:"TanDigits","Alegreya",Georgia,serif}
.threshold h1,.lines,h2{letter-spacing:-.005em}

/* ── the hero ground: no zoom, and pulled back to show more of the room ── */
.threshold-ground{
  transform:none;
  background-size:100% auto;
  background-position:center center;
  background-color:#0A0806;
}
@media (max-width:980px){ .threshold-ground{background-size:cover} }

/* Alegreya sets wider than Cormorant: "Every Number" measured 556px in a
   549px column at 92px. Column to 72ch, type capped at 88px - the line fits
   with 85px of air instead of failing by 7. */
.threshold-copy{max-width:min(72ch,54%)}
.threshold h1{font-size:clamp(44px,6.2vw,88px)}
@media (max-width:1100px){ .threshold-copy{max-width:none} }

/* six add-ons want two even rows of three, not five and a stray */
@media (min-width:900px){ .addons{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ── ONE tracking on the caps face (Jon 2026-09-09, "set a rule in all where
   using this font ... fix letter separation"; .06em approved off the preview).
   The token lives in landing.css, which v1-v3 share and which stays frozen as
   Jon's record - so v4 re-declares it here instead of editing it there.
   The two hardcoded values above now read the token; the third override is
   landing.css:704 (.kicker on phones, .16em) and is answered below at its own
   breakpoint. Result: 35 rules, one value, desktop and phone alike. */
:root{--caps-track:.07em}   /* Jon 2026-09-12: +.01em, the header caps read too tight */
@media (max-width:560px){ .kicker{letter-spacing:var(--caps-track)} }

/* ── the three marketing beats (Jon 2026-09-09: A the fifteen years on the
   home screen, B transparency, C accounting) ─────────────────────────────
   Each concept gets its own register and its own stop between two acts,
   instead of riding inside another section's paragraph. */

/* A · the creed band - straight under the home screen */
.creed{position:relative;padding:clamp(64px,8vw,104px) var(--pad);text-align:center;
  background:radial-gradient(120% 140% at 50% 0%,#171310 0%,#0B0908 72%)}
.creed::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,164,111,.55),transparent)}
.creed-eyebrow{font-family:var(--caps);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#8C8171;margin:0 0 24px}
.creed-line{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.2vw,58px);line-height:1.08;
  color:#FBF6EC;margin:0 auto;max-width:20ch;letter-spacing:-.008em}
.creed-line em,.beat h2 em,.decl-one em{font-style:normal;background-image:var(--cel-gilt);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:var(--cel-relief)}
.creed-after{margin:20px auto 0;max-width:46ch;font-size:17.5px;color:#A79A86}

/* B · the engraved beat - between what it does and what it costs */
.beat{position:relative;padding:clamp(58px,7vw,92px) var(--pad);text-align:center;
  background:linear-gradient(180deg,rgba(11,9,8,.9),rgba(11,9,8,.96)),
             url("assets/bg-hall-night.webp") center/cover no-repeat}
.beat-n{display:block;font-family:var(--display);font-size:15px;letter-spacing:.2em;
  color:var(--gold);margin-bottom:18px}
.beat h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.6vw,48px);line-height:1.12;
  color:#FBF6EC;margin:0 auto;max-width:24ch}
.beat p{margin:16px auto 0;max-width:44ch;font-size:16.5px;color:#A79A86}

/* C · the declaration - closes the leak act */
.decl-one{margin-top:30px;padding-top:26px;border-top:1px solid rgba(201,164,111,.28);max-width:44ch}
.decl-one h3{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,36px);line-height:1.14;
  color:#FBF6EC;margin:0;letter-spacing:-.006em}
.decl-one p{margin:12px 0 0;font-size:17px;color:#A79A86}

@media (max-width:700px){
  .creed-line{max-width:none} .beat h2{max-width:none} .decl-one{max-width:none}
}

/* ── Mr President: one tailored line, in gold relief lettering (Jon 09/09) ── */
.plan .tailored{
  margin:14px 0 4px;font-family:var(--caps);font-size:15.5px;font-weight:700;line-height:1.35;
  letter-spacing:var(--caps-track);text-align:center;
  background-image:linear-gradient(180deg,#8E6A2A 0%,#6B4E1E 40%,#4A3512 76%,#2E1F0A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,252,244,1)) drop-shadow(0 -1px 0 rgba(97,73,37,.18));
}

/* ── the Mr President card (Jon 2026-09-09): Enterprise capsule top-left,
   the tailored line, the badge, then his three rows ─────────────────────── */
.plan.pres{padding-top:58px}
.plan.pres .ent-cap{
  position:absolute;top:14px;left:14px;
  padding:5px 13px 4px;border-radius:999px;
  font-family:var(--caps);font-size:11.5px;font-weight:700;letter-spacing:var(--caps-track);
  text-transform:uppercase;color:#06232B;
  background-image:var(--cel-gilt);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 4px 10px -4px rgba(0,144,180,.55);
}
.plan.pres .tailored{margin:0 0 14px}
.plan.pres img{margin-bottom:2px}
.plan.pres .pres-list{list-style:none;margin-top:16px;display:grid;gap:9px;flex:1 0 auto;width:100%}
.plan.pres .pres-list li{
  font-family:var(--caps);font-size:14.5px;letter-spacing:var(--caps-track);
  color:var(--s-metal-deep);padding-bottom:9px;border-bottom:1px solid rgba(97,73,37,.16);
}
.plan.pres .pres-list li:last-child{border-bottom:0;padding-bottom:0}

/* ── the home screen (Jon 2026-09-09): the fifteen years is the headline,
   "Every Number Opens To Its Source." became its subtitle ───────────────── */
.hero-sub{
  font-family:var(--display);font-weight:700;font-size:clamp(23px,2.7vw,36px);   /* Jon 09/09: +2px */
  line-height:1.16;color:#E9DCC6;margin-top:16px;letter-spacing:-.004em;
}
.hero-sub .cel{background-image:var(--cel-gilt);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;filter:var(--cel-relief)}
.hero-sub .gold{background-image:linear-gradient(180deg,var(--gold-glint),var(--gold-lit) 46%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.threshold .lede{margin-top:16px}

/* the fifteen-years headline is longer than the old one: measured at 1440,
   "Property Management," needs ~734px of column at 76px - the column gives 893 */
.threshold-copy{max-width:min(80ch,62%)}
.threshold h1{font-size:clamp(38px,5.3vw,76px);line-height:1.0}
@media (max-width:1100px){ .threshold-copy{max-width:none} }

/* Jon 09/09: keep the type size, put "Management," back on the Property line -
   the headline may run over the star, he approved that. Desktop only: at phone
   widths a nowrap headline would push the page sideways. */
@media (min-width:1100px){
  .threshold h1{max-width:none;width:max-content}
  .threshold h1 .ln i{white-space:nowrap}
}

/* Jon 09/09: the 2-3 gap must look like the 1-2 gap. It did not, because line 2
   ("Property Management,") drops descenders - p, y, g - into the white space
   while line 1 ends on caps. Optical fix, in em so it holds at every size. */
.threshold h1 .ln:nth-child(3){margin-top:.34em}

/* Jon 09/09: pull the home ground back a little further */
.threshold-ground{background-size:90% auto}
@media (max-width:980px){ .threshold-ground{background-size:cover} }

/* ── Jon 09/09: kill the dead space under the header, brand into the title,
   the sub on one row at 30px ─────────────────────────────────────────────── */

/* every act starts higher; the bottom keeps more air so the rhythm holds */
.act{padding-top:clamp(44px,4.6vw,66px);padding-bottom:clamp(56px,6.4vw,92px)}

/* the home screen stops centring itself in the viewport and sits under the nav */
.threshold{align-items:start;padding-top:clamp(92px,11vh,116px)}

/* the sub: 30px, its own width, one row (desktop only - a phone would scroll) */
.hero-sub{font-size:clamp(20px,2.1vw,30px)}
@media (min-width:1100px){
  .hero-sub{max-width:none;width:max-content;white-space:nowrap}
}

/* the real culprit for the dead space: the hero wrap carried 126px of its own
   padding on top of the section's. Nav clearance now lives on .threshold. */
.threshold .wrap{padding-block:clamp(18px,3vh,30px)}
.threshold{padding-top:clamp(84px,9vh,96px)}

/* ── the star, real-time, beside the accounting line (Jon 2026-09-09) ──────
   6cm box by his measure; it holds the flat mark until WebGL reports live, so
   a browser without WebGL still sees a star and never an empty hole. */
.decl-row{display:flex;align-items:center;gap:clamp(22px,4vw,60px);margin-top:30px}
.decl-row .decl-one{margin-top:0}
.star-hold{position:relative;flex:0 0 auto;width:var(--star-size,6cm);height:var(--star-size,6cm)}
.star-hold canvas{display:block;width:100%;height:100%}
.star-hold .star-flat{position:absolute;inset:0;margin:auto;width:64%;height:auto;
  opacity:.85;transition:opacity .6s ease;pointer-events:none}
.star-hold.star-live .star-flat{opacity:0}
@media (max-width:820px){
  .decl-row{flex-direction:column;align-items:flex-start;gap:26px}
  .star-hold{width:min(4cm,45vw);height:min(4cm,45vw)}
}

/* Jon 09/09: the star sits in the right-hand square, and the line above it
   ("Tanentros is built so none of the four can happen.") centres over the row */
.decl-row{justify-content:space-between;align-items:center}
.act.cost .cost-answer{justify-content:center;text-align:center;max-width:none}  /* it is a flex row, so text-align alone does nothing */
/* the star box ends where the column ends - Jon painted it flush right */
@media (max-width:820px){
  .decl-row{justify-content:flex-start}
  .act.cost .cost-answer{justify-content:flex-start;text-align:left}
}

/* Jon 09/09: the star drops 1.5 cm without moving the row it sits in */
.decl-row .star-hold{transform:translateY(1.5cm)}

/* Jon 09/09: the star sits 1.5 cm lower on the page. Position only - the canvas
   box and the model keep their size, and the row it sits in does not move. */
.decl-row .star-hold{transform:translateY(1.5cm)}

/* the canvas overflows its box on purpose (see star.js OVERSCAN) - centred,
   so the star keeps its place and its size while the spikes get their room */
.star-hold canvas{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:140%;height:140%;pointer-events:none}

/* ── the five stars, olympic, unsynced (Jon 2026-09-12) ───────────────────
   3 below / 2 above, each 3 cm (113.4 px), top row 3 mm down and the bottom
   row 10 px down, the whole cluster 44 px down so its top sits exactly on the
   heading's top - measured, delta 0 px. Speeds differ per star (1.00 / 0.58 /
   1.46 / 0.79 / 1.24 of base) so none of them ever follows another. */
.decl-row .star-hold{width:min(38%,380px);height:7cm;transform:translate(26.66px,44px)}   /* 3 mm left */  /* Jon 2026-09-12: cluster right edge aligned to the last cost card */

/* ── the brand name in the headline is set as the WORDMARK (Jon 2026-09-12):
   the caps face at the wordmark's tracking, not the display face. The optical
   size is lifted because Alegreya SC's caps are shorter than Alegreya's. */
.threshold h1 .wordmark{
  font-family:var(--caps);font-size:1.06em;
  letter-spacing:.01em;   /* Jon 2026-09-12: pinned, NOT --caps-track - inside a
                             display line the shared .07em reads as signage */
}
/* line 2 and everything under it drops 2 mm, opening the 1-2 gap */
.threshold h1 .ln:nth-child(2){margin-top:7.56px}

/* Jon 2026-09-12: the ft pair in "Fifteen" carries +.01em of its own */
.threshold h1 .kft{letter-spacing:.01em}

/* ── the screenshots act gets Jon's marble ground (2026-09-12) ────────────
   His 3.2 MB PNG compressed to 127 KB webp. The veil is lighter than the old
   ivory one because this image is already pale - it only needs to stop the
   texture competing with the screen captures. */
.act.instrument{background:
  linear-gradient(180deg,rgba(252,250,246,.80),rgba(250,247,242,.74) 50%,rgba(250,246,238,.86)),
  url("assets/bg-screens-marble.webp") center/cover no-repeat}

/* less zoom on the marble (Jon 2026-09-12): cover was scaling it to 207% of the
   viewport because the act is 1440x1674 against a 16:9 image. Pinned to 170%
   wide, top-anchored, with the image's own bottom-edge colour #C5C4C2 carrying the
   rest so there is no seam. */
.act.instrument{background:
  linear-gradient(180deg,rgba(252,250,246,.80),rgba(250,247,242,.74) 50%,rgba(250,246,238,.86)),
  url("assets/bg-screens-marble.webp") center center/120% auto no-repeat #C5C4C2}

/* the accounting line, Jon's wording and colours (2026-09-12):
   Good / You / You in celeste, Accounting / Money in gold */
.decl-one h3 b{font-weight:inherit;
  background-image:linear-gradient(180deg,var(--gold-glint),var(--gold-lit) 46%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* the line breaks are held on desktop so "is" always stays on row 1 (Jon);
   on a phone the column is too narrow for that, so it wraps naturally */
.decl-one h3 br{display:none}
@media (min-width:820px){ .decl-one h3 br{display:inline} }

/* Jon 2026-09-12: the line under the accounting heading, +1 px */
.decl-one p{font-size:18px}

/* the sub-line needs 476 px at 18 px and the column gave 440 - widened so it
   holds one row; the heading keeps its own pinned breaks (Jon 2026-09-12) */
.decl-row .decl-one{max-width:none}
.decl-one h3{max-width:none}
.decl-one p{max-width:52ch}

/* ── the six thrones sit on Jon's three-star marble (2026-09-12), 100% zoom ──
   The veil keeps the plates readable; below the image the act falls back to
   #B8B6B4, sampled from the image's own bottom edge, so there is no seam. */
.act.plans{background:
  linear-gradient(180deg,rgba(252,250,246,.86),rgba(250,247,242,.80) 50%,rgba(250,246,238,.90)),
  url("assets/bg-thrones-marble.webp") center center/135% auto no-repeat #B8B6B4}

/* the sub-line drops 2 mm on its own - relative, so nothing else moves (Jon) */
.decl-one p{position:relative;top:7.56px}

/* Jon 2026-09-12: the verdict line drops 2.5 mm on its own (relative, so the
   four cards above and the accounting block below do not move), and the brand
   name in it is gold - landing.css paints .cost-answer b celeste by default. */
.act.cost .cost-answer{position:relative;top:17.01px;   /* 5.5 mm - 1 mm = 4.5 mm */
  display:block;text-align:center}   /* landing.css makes it a flex row with gap:16px,
  which is what put a 16 px hole between "Tanentros" and "is" - block restores a
  normal word space (Jon 2026-09-12) */
.act.cost .cost-answer b.au{font-weight:inherit;
  background-image:linear-gradient(180deg,var(--gold-glint),var(--gold-lit) 46%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Jon 2026-09-12: the sub-line takes the verdict line's face and size */
.decl-one p{font-family:var(--caps);letter-spacing:var(--caps-track);
  font-size:20px;max-width:none;white-space:nowrap}   /* 22 -> 20 px: at 22 the line
  measured 667 px against a 618 px column and broke; at 20 it needs 606 (Jon) */



/* the sub-line now sits under the whole act, centred like the verdict line
   (Jon 2026-09-13), and the accounting heading centres against the star box */
.decl-note{margin-top:26px;text-align:center;
  font-family:var(--caps);letter-spacing:var(--caps-track);font-size:20px;color:#A79A86}
.decl-note em{font-style:normal;background-image:var(--cel-gilt);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;filter:var(--cel-relief)}
.decl-row{align-items:center}

/* measured: the heading's centre sat 31 px above the star box's centre */
.decl-one h3{position:relative;top:4.54px}   /* centred on the star box, then 3 + 2 + 2 mm up (Jon) */

/* ── the plates carry the pointer's light, like the leak cards (Jon 2026-09-13)
   landing.js already feeds --mx / --my to .card, .cost-card and .plan; the leak
   cards paint it warm gold on a dark ground with screen blending. The plates are
   near-white, where screen has nothing left to lift, so the same light is painted
   as a celeste tint instead - it tracks the cursor exactly the same way. */
.plan::after{
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
    var(--glow-core,rgba(0,198,232,.30)), var(--glow-halo,rgba(111,242,255,.14)) 42%, transparent 66%);
  mix-blend-mode:normal;
}
/* each throne's light carries its own metal (Jon 2026-09-13) */
.plan.t-keeper   {--glow-core:rgba(176,137,86,.30); --glow-halo:rgba(201,164,111,.14)}  /* light brown */
.plan.t-elder    {--glow-core:rgba(196,118,46,.32); --glow-halo:rgba(224,150,72,.15)}   /* bronze orange */
.plan.t-chief    {--glow-core:rgba(150,158,168,.30);--glow-halo:rgba(201,205,211,.15)}  /* silver */
.plan.t-governor {--glow-core:rgba(224,180,84,.32); --glow-halo:rgba(247,210,160,.16)}  /* goldish */
.plan.t-titan    {--glow-core:rgba(226,240,246,.42);--glow-halo:rgba(111,242,255,.05)}  /* white, 5% celeste */
.plan.t-president{--glow-core:rgba(0,198,232,.30);  --glow-halo:rgba(111,242,255,.14)}  /* celeste */

/* ── the add-on rail (Jon 2026-09-13) ─────────────────────────────────────
   A title with its own rule, cards 6 px smaller on both axes (padding 14/16
   -> 11/13), and the pointer light in candy viper green. landing.js already
   feeds --mx / --my to .card, .cost-card and .plan only, so the rail gets its
   own listener in v4.js. */
.addons-title{margin:34px 0 0;font-family:var(--caps);font-size:19px;
  letter-spacing:var(--caps-track);color:var(--s-title);text-align:center}
.addons-title::after{content:"";display:block;width:74px;height:2px;margin:8px auto 0;
  border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.addons{margin-top:18px}
.addons li{padding:9px 10px;position:relative;overflow:hidden}
.addons li::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    rgba(106,224,90,.34), rgba(168,245,110,.16) 44%, transparent 68%);
  opacity:0;transition:opacity .3s;
}
.addons li:hover::after{opacity:1}

/* Jon 2026-09-13: the whole rail on one row, cards a lot smaller, figure -6 px */
@media (min-width:1100px){
  .addons{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
}
.addons b{font-size:20px}            /* 26 -> 20 */
.addons span{font-size:12px;margin-top:3px;line-height:1.3}

/* the rail now carries the add-on's NAME with the tiers under it (Jon 2026-09-13),
   so the figure styling gives way to the caps face and four cards share the row */
@media (min-width:1100px){ .addons{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} }
.addons li{padding:12px 14px;text-align:center}
.addons b{font-family:var(--caps);font-size:16px;letter-spacing:var(--caps-track);
  color:var(--s-title);line-height:1.2}
.addons span{font-size:12.5px;color:var(--silver-deep);margin-top:5px}

/* five add-ons across, each with its entry price under the tiers (Jon 2026-09-13) */
@media (min-width:1100px){ .addons{grid-template-columns:repeat(5,minmax(0,1fr));gap:11px} }
.addons li{padding:12px 12px 11px}
.addons em{display:block;margin-top:6px;font-style:normal;font-family:var(--display);
  font-size:15px;color:var(--gold-deep)}

/* ── the thrones head and the rail (Jon 2026-09-13) ──────────────────────── */

/* the headline holds two rows on desktop; a phone wraps it naturally */
.plans-h2{max-width:none}
.plans-h2 br{display:none}
@media (min-width:900px){ .plans-h2 br{display:inline} }

/* the cycle note sits centred between the capsule and the plates */
.act.plans .plans-note-cycle{text-align:center;margin:14px auto 0}
.act.plans .cycle{display:inline-flex;margin-left:auto;margin-right:auto}
.act.plans .wrap > .cycle{display:flex;width:max-content}

/* every throne wears a 2 px frame in its own light (Jon 2026-09-13) */
.plan{border-width:2px;border-color:var(--frame,rgba(97,73,37,.28))}
.plan.t-keeper   {--frame:#B08956}
.plan.t-elder    {--frame:#C4762E}
.plan.t-chief    {--frame:#969EA8}
.plan.t-governor {--frame:#E0B454}
.plan.t-titan    {--frame:#BFD8E4}
.plan.t-president{--frame:#00C6E8}
.plan.featured{border-color:var(--frame)}

/* SMALL add-on cards */
.addons li{padding:8px 9px}
.addons b{font-size:13px;line-height:1.18}
.addons span{font-size:10.5px;margin-top:3px;line-height:1.25}
.addons em{font-size:12px;margin-top:4px}

/* ── the thrones head, centred (Jon 2026-09-13) ─────────────────────────── */
.act.plans .kicker{justify-content:center}
.plans-h2{text-align:center;margin-inline:auto}

/* every tier card gets the President card's rule between its lines */
.plan ul{width:100%}
.plan ul li{padding-bottom:7px;border-bottom:1px solid rgba(97,73,37,.16)}
.plan ul li:last-child{border-bottom:0;padding-bottom:0}

/* ── the add-on rail as long capsules (Jon 2026-09-13): a quarter of the card
   height, two rows inside each pill - the name over the price and the tiers -
   five across on one line. */
.addons{margin-top:14px}
@media (min-width:1100px){ .addons{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} }
.addons li{
  padding:7px 14px;border-radius:999px;text-align:center;
  border:1.5px solid rgba(106,224,90,.55);
  background:linear-gradient(168deg,#FFFEFA,#F2F7EE);
  display:block;
}
.addons b{display:block;font-family:var(--caps);font-size:11.5px;line-height:1.25;
  letter-spacing:var(--caps-track);color:var(--s-title)}
.addons em{display:inline;font-style:normal;font-family:var(--display);font-size:12.5px;
  color:var(--gold-deep);margin:0}
.addons span{display:inline;border:0;margin:0;padding:0;font-family:var(--caps);
  font-size:10px;letter-spacing:var(--caps-track);color:var(--silver-deep)}
.addons span::before{content:" · ";color:rgba(97,73,37,.45)}
.addons li::after{border-radius:999px}

/* the capsule holds two rows and nothing wraps (Jon 2026-09-13) */
.addons li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addons b{font-size:11px}
.addons em{font-size:12px}
.addons span{font-size:9.5px}

/* ── the home title, Jon's three rows (2026-09-13) ───────────────────────
   row 1 the wordmark alone in celeste, row 2 white with the category in gold,
   row 3 only "Reach" in celeste. Type comes down 2 px. */
.threshold h1{font-size:clamp(36px,5.1vw,74px)}
.threshold h1 .wordmark.cel{color:var(--cel);-webkit-text-fill-color:var(--cel);background:none}

/* ── the nav mark is the live star at 1 x 1 cm (Jon 2026-09-13) ────────── */
.nav-star{position:relative;display:block;width:1cm;height:1cm;flex:0 0 auto}
.nav-star canvas{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:140%;height:140%;pointer-events:none}
.nav-star .star-flat{position:absolute;inset:0;margin:auto;width:100%;height:auto;
  opacity:1;transition:opacity .6s ease}
.nav-star.star-live .star-flat{opacity:0}

/* Jon 2026-09-13: the words in the accounting heading sat too close - +3 px
   of word space, which moves the gaps only and leaves the letterforms alone */
.decl-one h3{word-spacing:3px}

/* Jon 2026-09-13: the nav star goes to 1.5 x 1.5 cm and sits 3 mm lower.
   translate, not margin, so the brand row's height and the nav bar do not move. */
.nav-star{width:1.5cm;height:1.5cm;transform:translateY(11.34px)}
.nav-star .star-flat{width:92%}

/* ── the header, Jon 2026-09-13 ──────────────────────────────────────────
   3 mm off the bar height (12 px of block padding -> 6.3), the star 2 mm lower
   still, and the My Dash capsule 1.5 mm wider on each side. */
.nav{padding-top:0;padding-bottom:0}   /* all the bar padding is gone; the capsule now sets the height */
.nav-star{transform:translateY(15.9px)}   /* 3 px up (Jon) */
.nav .btn-cel{padding-left:31.67px;padding-right:31.67px}   /* 26 px + 1.5 mm each side */

/* the nav star leaves the flow: at 57 px it was the tallest thing in the bar and
   set its height, so no amount of padding could shrink the header (Jon 2026-09-13).
   Absolute now - the bar collapses to its type, and the star sits over it. */
.nav-brand{position:relative;padding-left:calc(1.5cm + 12px)}
.nav-star{position:absolute;left:0;top:50%;margin:0;
  transform:translateY(calc(-50% + 15.9px))}
.nav{padding-top:0;padding-bottom:0}

/* 63 px was the bar before this round; 1 mm off the top and 1 mm off the bottom
   makes 55.44. With the star out of flow the height is ours to set exactly. */
.nav{min-height:55.44px}

/* Jon 2026-09-14: the home title, three rows again, all type 2 px down (74 -> 72) */
.threshold h1{font-size:clamp(34px,5vw,72px)}

/* LOCKED · Jon 2026-09-16, "lock all" - values below are his; move only on his word */
/* ── Act III · the six panels, drawn (Jon 2026-09-15, "go with 1 ... apply")
   No screenshots. Each panel is HTML + CSS in the app's own palette, with the
   app's own labels read from its source; names, figures and dates are invented.
   The chapter you are reading owns the panel (v4.js toggles .live). ───────── */
.instrument .screen-body{padding:0;display:block;position:relative;background:#FEEDDF;text-align:left}
.instrument .screen-body .vg{opacity:0;visibility:hidden;transition:opacity .38s ease,visibility 0s linear .38s}
.instrument .screen-body .vg.live{opacity:1;visibility:visible;transition:opacity .38s ease}
/* ── the panels: the app's own palette, the landing's faces ─────────── */
  .vg{position:absolute;inset:0;background:#FEEDDF;color:#493A30;font-family:var(--body);font-size:12px;line-height:1.35;
      text-align:left;font-variant-numeric:tabular-nums lining-nums;padding:14px 16px;overflow:hidden;
      --a-surface:#FFF8F1;--a-ink:#493A30;--a-taupe:#79624D;--a-sand:#C7AE8A;--a-hair:rgba(199,174,138,.45);
      --a-gold:#C5A24F;--a-amber:#F1E3BE;--a-brick:#B85C48;--a-moss:#23A35A;--a-nag:#6E3CBC}
  .vg .eb{font-family:var(--caps);font-size:9.5px;letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--a-taupe)}
  .vg .card{background:var(--a-surface);border:1px solid var(--a-hair);border-radius:10px;
      box-shadow:0 1px 2px rgba(73,58,48,.08),0 10px 34px rgba(73,58,48,.13)}
  .vg .p{display:inline-block;padding:1px 8px 2px;border-radius:999px;font-family:var(--caps);font-size:9px;letter-spacing:.06em;
      text-transform:uppercase;border:1px solid var(--a-hair);color:var(--a-taupe);line-height:1.3;vertical-align:middle;white-space:nowrap}
  .vg .p.cel{background:var(--cel-gilt);color:#08222A;border-color:transparent}
  .vg .p.amb{background:var(--a-amber);color:#6B5426;border-color:var(--a-gold)}
  .vg .p.brick{color:var(--a-brick);border-color:var(--a-brick)}
  .vg .neg{color:var(--a-brick)}
  .vg .num{text-align:right;white-space:nowrap}
  .vg .btn-s{display:inline-block;padding:2px 10px;border-radius:7px;border:1px solid var(--a-hair);background:var(--a-surface);
      font-size:11px;color:var(--a-ink);line-height:1.4;white-space:nowrap}
  .vg .btn-s.cel{background:var(--cel-gilt);color:#08222A;border-color:transparent;font-weight:700}
  .vg .hair{height:1px;background:var(--a-hair)}
  .vg .cap{display:inline-block;padding:1px 8px;border-radius:6px;background:rgba(199,174,138,.22);font-size:11px;white-space:nowrap}
  .vg .kv{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
  .vg .band{display:flex;justify-content:space-between;align-items:center;background:rgba(199,174,138,.28);border-radius:7px;padding:5px 10px;margin-top:6px}
  .vg .band b{font-family:var(--caps);font-size:10px;letter-spacing:var(--caps-track);text-transform:uppercase}
  .vg .band .num{font-size:14px;font-weight:700}

  /* 1 · calendar */
  .cal-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .cal-top .ttl{font-family:var(--caps);font-size:13px;letter-spacing:var(--caps-track);text-transform:uppercase}
  .cal-top .cap{margin-left:auto}
  .today{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
  .today .st{padding:5px 10px;display:flex;justify-content:space-between;align-items:baseline}
  .today .st .v{font-size:16px;font-weight:700;line-height:1}
  .today .st sub{font-size:9px;color:var(--a-taupe);vertical-align:0;font-weight:400}
  .msg-err{border:1px solid var(--a-brick);background:rgba(184,92,72,.10);color:var(--a-brick);border-radius:8px;padding:5px 10px;
      font-size:11.5px;margin-bottom:8px}
  .cgrid{display:grid;grid-template-columns:96px repeat(9,1fr);border:1px solid var(--a-hair);border-radius:8px;overflow:hidden;background:var(--a-surface)}
  .cgrid .h{font-family:var(--caps);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--a-taupe);text-align:center;
      padding:4px 0 3px;border-bottom:1px solid var(--a-hair);border-left:1px solid var(--a-hair);line-height:1.15}
  .cgrid .h b{display:block;font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--a-ink)}
  .cgrid .h.we{background:rgba(199,174,138,.12)}
  .cgrid .h:first-child{border-left:0;text-align:left;padding-left:8px}
  .crow{display:grid;grid-template-columns:96px repeat(9,1fr);grid-column:1/-1;height:50px;border-top:1px solid var(--a-hair);position:relative}
  .crow .nm{grid-column:1;padding:7px 8px;font-size:11.5px;line-height:1.2;border-right:1px solid var(--a-hair)}
  .crow .nm small{display:block;color:var(--a-taupe);font-size:10px}
  .crow .dl{border-left:1px solid var(--a-hair);grid-row:1}
  .crow .dl.we{background:rgba(199,174,138,.10)}
  .chip{grid-row:1;align-self:center;height:26px;margin:0 3px;border-radius:7px;display:flex;align-items:center;gap:5px;padding:0 7px;
      font-size:10.5px;white-space:nowrap;overflow:hidden;box-shadow:0 1px 2px rgba(73,58,48,.15);z-index:2}
  .chip .ch{font-family:var(--caps);font-size:8.5px;letter-spacing:.06em;opacity:.8}
  .chip .amt{margin-left:auto;font-size:10px}
  .chip.act{background:var(--cel-gilt);color:#08222A}
  .chip.up{background:linear-gradient(180deg,#F2DFAC,#E6C883);color:#4A3A1C}
  .chip.fin{background:linear-gradient(180deg,#E9E6DF,#D8D4CA);color:#5C554C}
  .chip.blk{background:repeating-linear-gradient(45deg,#E9E2D6 0 5px,#D9CFBF 5px 10px);color:#5C554C;box-shadow:none}
  .chip.ghost{background:rgba(255,248,241,.72);border:1.5px dashed var(--a-brick);color:var(--a-brick);box-shadow:none;transform:translateY(9px);z-index:3}
  .legend{display:flex;gap:12px;align-items:center;margin-top:8px;font-family:var(--caps);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--a-taupe)}
  .legend i{display:inline-block;width:14px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px}

  /* 2 · P&L */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:9px}
  .stats .st{padding:8px 12px}
  .stats .st .v{font-size:18px;font-weight:700;line-height:1.1}
  .stats .st .d{font-size:10.5px;color:var(--a-moss)}
  .stats .st .d.dn{color:var(--a-brick)}
  .pnl{font-size:12.5px}
  .ld{padding:10px 14px 11px}
  .ld .eb{margin-bottom:6px}
  .ld .ln{display:flex;justify-content:space-between;gap:10px;padding:4px 0;cursor:pointer}
  .ld .ln .k::before{content:"▸ ";color:var(--a-taupe)} .ld .ln.open .k::before{content:"▾ "}
  .ld .src{display:flex;justify-content:space-between;gap:10px;padding:2px 0 2px 18px;font-size:11.5px}
  .ld .src i{font-style:normal;color:var(--a-taupe);font-size:10.5px;margin-left:6px}
  .ld .net{border-top:1px solid var(--a-hair);margin-top:4px;padding-top:6px;font-weight:700}

  /* 3 · frozen statement */
  .stm{display:grid;place-items:center}
  .sheetdoc{width:474px;padding:13px 18px 12px}
  .sheetdoc .head{display:flex;justify-content:space-between;align-items:center}
  .sheetdoc .who{display:flex;justify-content:space-between;align-items:baseline;margin:7px 0 5px}
  .sheetdoc .who b{font-family:var(--display);font-size:20px;font-weight:700}
  .sheetdoc .kv{padding:2.5px 0;font-size:12.5px}
  .sheetdoc .seal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:3px 16px;margin-top:9px;padding-top:8px;border-top:1px solid var(--a-hair);
      font-family:var(--caps);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--a-taupe);white-space:nowrap}
  .sheetdoc .seal b{color:#0090B4}
  .sheetdoc .seal span{margin-left:auto}

  /* 4 · deposits */
  .stats2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
  .stats2 .st{padding:8px 12px}
  .stats2 .st .v{font-size:17px;font-weight:700;line-height:1.1}
  .stats2 .st sub{display:block;font-size:10px;color:var(--a-taupe);vertical-align:0;line-height:1.3}
  .dep{padding:12px 12px}
  .dep .dmrow{display:flex;justify-content:space-between;align-items:center;margin:10px 0 4px}
  .vg .tbl2{width:100%;min-width:0;border-collapse:collapse;font-size:11px}
  .vg .tbl2 th{font-family:var(--caps);font-size:8px;letter-spacing:.05em;text-transform:uppercase;color:var(--a-taupe);text-align:left;padding:2px 4px 4px;border-bottom:1px solid var(--a-hair);font-weight:400;position:static;background:none}
  .vg .tbl2 td{padding:6px 4px;border-bottom:1px solid var(--a-hair);white-space:nowrap;text-align:left;background:none}
  .vg .tbl2 tr:hover td,.vg .tbl2 tr:nth-child(even) td{background:none}
  .tbl2 .p{font-size:8px;padding:1px 6px 2px}
  .tbl2.dmg td{font-size:10px}
  .tbl2 td.num,.tbl2 th.num{text-align:right}
  .nag::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--a-nag);margin-right:5px;vertical-align:1px}
  .dep .eb.dm{margin:8px 0 3px}
  .thumb{display:inline-block;width:20px;height:20px;border-radius:5px;vertical-align:middle;margin-right:3px;
      background:linear-gradient(160deg,#5A544B,#2E2A26);box-shadow:0 0 0 1px rgba(73,58,48,.25) inset;position:relative}
  .thumb::after{content:"";position:absolute;left:4px;top:9px;width:12px;height:1px;background:#CFC7B8;transform:rotate(-38deg)}
  .thumb.b::after{transform:rotate(22deg);top:7px}
  .tag{font-family:var(--caps);font-size:8.5px;letter-spacing:var(--caps-track);text-transform:uppercase;color:#0090B4;margin-top:6px}

  /* 5 · portal + switchboard */
  .por{padding:0}
  .por .back{position:absolute;inset:14px 16px;opacity:.62}
  .por .back .rw{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--a-hair);font-size:11.5px;width:300px}
  .por .back .rw .hid{color:var(--a-sand);font-style:italic}
  .por .back .band{width:300px}
  .por .modal{position:absolute;right:16px;top:12px;width:268px;padding:10px 14px 11px;background:var(--a-surface)}
  .por .modal .t{font-family:var(--caps);font-size:12.5px;letter-spacing:var(--caps-track)}
  .por .modal .tag{margin:2px 0 6px;color:var(--a-taupe);font-size:8px}
  .por .sw{display:flex;justify-content:space-between;align-items:center;padding:3.5px 0;border-top:1px solid var(--a-hair);font-size:11.5px}
  .por .sw i{width:26px;height:14px;border-radius:999px;background:#D9CFBF;position:relative;flex:0 0 auto}
  .por .sw i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#FFF8F1;box-shadow:0 1px 2px rgba(0,0,0,.25)}
  .por .sw.on i{background:var(--cel-gilt)} .por .sw.on i::after{left:14px}
  .por .sw.off{color:var(--a-taupe)}
  .por .acts{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}

  /* 6 · telegram */
  .tg{display:grid;grid-template-columns:186px 1fr;gap:14px;padding:12px 14px}
  .phone{background:#EBE3D6;border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--a-hair)}
  .phone .ph{font-family:var(--caps);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--a-taupe);text-align:center;padding:2px 0 4px;border-bottom:1px solid var(--a-hair)}
  .bub{max-width:88%;padding:6px 8px;border-radius:10px;font-size:10.5px;line-height:1.3;background:#FFF8F1;box-shadow:0 1px 2px rgba(73,58,48,.12)}
  .bub.me{align-self:flex-end;background:#DDF3F8;border-bottom-right-radius:3px}
  .bub.bot{align-self:flex-start;border-bottom-left-radius:3px}
  .bub .who{font-family:var(--caps);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--a-taupe);display:block}
  .bub .ts{font-size:8.5px;color:var(--a-taupe);text-align:right;display:block;margin-top:2px}
  .rcpt{width:92px;height:64px;border-radius:6px;background:linear-gradient(180deg,#FFFFFF,#F1EDE6);box-shadow:0 0 0 1px rgba(73,58,48,.18) inset;position:relative;margin-bottom:4px}
  .rcpt::before{content:"";position:absolute;left:10px;right:10px;top:10px;height:34px;
      background:repeating-linear-gradient(180deg,#B9B2A6 0 1px,transparent 1px 7px)}
  .rcpt::after{content:"";position:absolute;left:10px;right:34px;bottom:10px;height:2px;background:#6B655C}
  .tg .card{padding:8px 12px 9px}
  .tg .card .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
  .tg .kv{padding:2.5px 0;border-top:1px solid var(--a-hair);font-size:11px}
  .tg .kv:first-of-type{border-top:0}
  .tg .kv .k{color:var(--a-taupe)}
  .tg .kv small{display:block;color:var(--a-taupe);font-size:9.5px}
  .tg .acts{display:flex;gap:6px;margin-top:7px}
  .tg .note{font-size:9.5px;color:var(--a-taupe);margin-top:6px;font-style:italic}

/* LOCKED · Jon 2026-09-16, "lock all" - values below are his; move only on his word */
/* ── Act III · the panels play (Jon 2026-09-15, "put act and panels to the web preview")
   Each panel is a 1 s animation held paused; v4.js maps the chapter's scroll
   progress onto it through --p (negative delay), so the reader scrubs the scene.
   Hovering a panel replays it in real time (.play). Reduced motion: the panels
   rest at their finished state, exactly what the page showed before. ──────── */
.instrument .stack{position:relative;display:inline-grid}
.instrument .stack > *{grid-area:1/1;justify-self:start}
.instrument .eb-sw{display:inline-grid} .instrument .eb-sw > *{grid-area:1/1}
.instrument .nm-sw{display:inline-grid} .instrument .nm-sw > *{grid-area:1/1}
.instrument .vg.pnl .ld .ln .k::before{display:inline-block;transform-origin:40% 50%}
.instrument .vg.pnl .ld .ln.open .k::before{content:"▸ "}
.instrument .vg.por .sw i::after{transition:none}
.instrument .vg.cal .chip.ghost{animation:sc-ghost 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.cal .chip.ghost .amt{animation:sc-x 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.cal .msg-err{animation:sc-err 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.pnl .ld .ln.open .k::before{animation:sc-caret 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.pnl .ld .src:nth-of-type(1){animation:sc-src1 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.pnl .ld .src:nth-of-type(2){animation:sc-src2 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.pnl .ld .src:nth-of-type(3){animation:sc-src3 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.stm .eb-sw .a{animation:sc-out 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.stm .eb-sw .b{animation:sc-in 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.stm .stack .a{animation:sc-out 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.stm .stack .b{animation:sc-stamp 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.stm .seal{animation:sc-late 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.dep .stack .a{animation:sc-out 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.dep .stack .b{animation:sc-in 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.dep .dm-row{animation:sc-rise 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.dep .tag{animation:sc-late 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.por .flip1 i{animation:sc-flip 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.por .flip1 i::after{animation:sc-knob 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.por .nm-sw .a{animation:sc-out 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.por .nm-sw .b{animation:sc-in 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.por .flip2 i{animation:sc-flip2 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.por .flip2 i::after{animation:sc-knob2 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.tg .bub.me{animation:sc-bub1 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.tg .bub.bot{animation:sc-bub2 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.tg .card .kv{animation:sc-rows 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.tg .card .hd .p{animation:sc-stamp 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.tg .acts{animation:sc-rise 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.tg .note{animation:sc-late 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.play.cal .chip.ghost{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.cal .chip.ghost .amt{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.cal .msg-err{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.pnl .ld .ln.open .k::before{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.pnl .ld .src:nth-of-type(1){animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.pnl .ld .src:nth-of-type(2){animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.pnl .ld .src:nth-of-type(3){animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.stm .eb-sw .a{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.stm .eb-sw .b{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.stm .stack .a{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.stm .stack .b{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.stm .seal{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.dep .stack .a{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.dep .stack .b{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.dep .dm-row{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.dep .tag{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.por .flip1 i{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.por .flip1 i::after{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.por .nm-sw .a{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.por .nm-sw .b{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.por .flip2 i{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.por .flip2 i::after{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.tg .bub.me{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.tg .bub.bot{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.tg .card .kv{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.tg .card .hd .p{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.tg .acts{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.play.tg .note{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}

@keyframes sc-ghost{0%{transform:translate(150px,9px);opacity:0;border-color:#C7AE8A;color:#79624D}
  10%{opacity:1}36%{transform:translate(0,9px);border-color:#C7AE8A;color:#79624D}
  44%{transform:translate(-4px,9px);border-color:#B85C48;color:#B85C48}48%{transform:translate(4px,9px)}52%{transform:translate(0,9px)}
  100%{transform:translate(0,9px);border-color:#B85C48;color:#B85C48}}
@keyframes sc-x{0%,46%{opacity:0}56%,100%{opacity:1}}
@keyframes sc-err{0%,48%{opacity:0;transform:translateY(-8px)}62%,100%{opacity:1;transform:none}}
@keyframes sc-caret{0%,26%{transform:rotate(0)}36%,100%{transform:rotate(90deg)}}
@keyframes sc-src1{0%,30%{opacity:0;transform:translateY(-6px)}42%,100%{opacity:1;transform:none}}
@keyframes sc-src2{0%,40%{opacity:0;transform:translateY(-6px)}52%,100%{opacity:1;transform:none}}
@keyframes sc-src3{0%,50%{opacity:0;transform:translateY(-6px)}62%,100%{opacity:1;transform:none}}
@keyframes sc-out{0%,38%{opacity:1}50%,100%{opacity:0}}
@keyframes sc-in{0%,42%{opacity:0}54%,100%{opacity:1}}
@keyframes sc-stamp{0%,44%{opacity:0;transform:scale(1.5)}58%{opacity:1;transform:scale(.96)}64%,100%{opacity:1;transform:scale(1)}}
@keyframes sc-late{0%,66%{opacity:0;transform:translateY(5px)}80%,100%{opacity:1;transform:none}}
@keyframes sc-rise{0%,52%{opacity:0;transform:translateY(8px)}68%,100%{opacity:1;transform:none}}
@keyframes sc-flip{0%,30%{background:linear-gradient(180deg,#6FF2FF 0%,#00C6E8 48%,#0090B4 100%)}42%,100%{background:#D9CFBF}}
@keyframes sc-knob{0%,30%{left:14px}42%,100%{left:2px}}
@keyframes sc-flip2{0%,60%{background:linear-gradient(180deg,#6FF2FF 0%,#00C6E8 48%,#0090B4 100%)}72%,100%{background:#D9CFBF}}
@keyframes sc-knob2{0%,60%{left:14px}72%,100%{left:2px}}
@keyframes sc-bub1{0%{opacity:0;transform:translateY(14px)}22%,100%{opacity:1;transform:none}}
@keyframes sc-bub2{0%,26%{opacity:0;transform:translateY(10px)}42%,100%{opacity:1;transform:none}}
@keyframes sc-rows{0%,40%{opacity:0}62%,100%{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .instrument .vg *,.instrument .vg *::before,.instrument .vg *::after{animation:none !important}
  .instrument .stack .a,.instrument .eb-sw .a,.instrument .nm-sw .a{opacity:0}
  .instrument .por .flip1 i,.instrument .por .flip2 i{background:#D9CFBF} .instrument .por .flip1 i::after,.instrument .por .flip2 i::after{left:2px}
}

/* LOCKED · Jon 2026-09-16, "lock all" - values below are his; move only on his word */
/* ── Home · the liquid-metal light over our banner (Jon 2026-09-15, "ground liquid overlay on home")
   Paper Shaders core, self-hosted at assets/ground/, one WebGL canvas inside
   the ground box, blended overlay so the picture stays ours and the light moves
   through it. It pauses off-screen and never starts under reduced motion. ─── */
.threshold-ground canvas{position:absolute;inset:0;display:block;width:100% !important;height:100% !important;
  mix-blend-mode:overlay;opacity:.7;pointer-events:none}

/* LOCKED · Jon 2026-09-16, "lock all" - values below are his; move only on his word */
/* ── the hero ground runs on into the top of the leak (Jon 2026-09-15: "continue a bit
   in the upper part of What Loose Books Actually Cost, perfect fusion, not the whole section")
   The ground (banner + light) and the veil reach --fuse below the hero and dissolve over
   the last --fuse-fade of that reach, so the leak's own bronze ground comes through
   underneath. The hero stops clipping; the ground rides above the leak's background and
   below its words; the gold hairline between the two acts goes. ────────────────────── */
:root{--fuse:220px;--fuse-fade:180px}
.threshold{overflow:visible}
.threshold-ground,.threshold-veil{bottom:calc(-1 * var(--fuse));transform:none;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--fuse-fade)),transparent);
          mask-image:linear-gradient(180deg,#000 calc(100% - var(--fuse-fade)),transparent)}
.threshold-ground{z-index:1}
.threshold-veil{z-index:2}
.act.cost .wrap{position:relative;z-index:3}
.threshold + .cost::before{display:none}

/* LOCKED · Jon 2026-09-16, "lock all" - values below are his; move only on his word */
/* Jon 2026-09-16: the leak ribbon's line sits 1 mm (3.78 px) higher on its plate.
   A pixel offset on top of the plate's own axis, so it stays put at every width. */
.act.cost .ribbon.silver span{margin-top:-3.78px}

/* LOCKED · Jon 2026-09-16, "lock all" - values below are his; move only on his word */
/* ── the leak plate answers the hand (Jon 2026-09-16, "lets go 1 and 3") ──────────────
   1 · the plate tilts a few degrees toward the pointer, the metal's highlight slides with
       it (a screen-blended light masked by the plate's own alpha), and the line lifts off
       the plate on the z axis. The old hover zoom is gone with the .lift class.
   3 · five gems (two ends, three stars) glow celeste by distance to the pointer.
   v4.js feeds --mx/--my/--rx/--ry and each gem's --g; reduced motion keeps the plate flat. */
.ribbon[data-plate]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;transition:transform .22s ease-out;will-change:transform}
.ribbon[data-plate] img{transition:none}
.ribbon[data-plate] span{z-index:2;transform:translateY(-50%) translateZ(var(--lift,0px));transition:transform .3s ease}
.ribbon[data-plate].hand span{--lift:16px}
.ribbon[data-plate]::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(38% 120% at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),rgba(255,255,255,.08) 45%,transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity .35s ease;
  -webkit-mask:var(--plate-img) center/100% 100% no-repeat;
          mask:var(--plate-img) center/100% 100% no-repeat}
.ribbon[data-plate].hand::before{opacity:1}
.ribbon[data-plate] .gems{position:absolute;inset:0;pointer-events:none;z-index:3}
.ribbon[data-plate] .gems i{position:absolute;left:var(--gx);top:var(--gy);width:7cqw;height:7cqw;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(180,250,255,.95) 0%,rgba(0,198,232,.6) 28%,rgba(0,198,232,.18) 50%,transparent 68%);
  mix-blend-mode:screen;opacity:var(--g,0);transition:opacity .28s ease;filter:blur(.6px)}
.ribbon[data-plate]:not(.hand) .gems i{transition:opacity .7s ease}
@media (prefers-reduced-motion:reduce){
  .ribbon[data-plate]{transform:none}
  .ribbon[data-plate] span{--lift:0px}
}
/* Jon 2026-09-16, "give same effects to 2nd ribbon": the vault plate answers the hand
   the same way. Each plate names its own image so the highlight is masked by itself. */
.ribbon.silver{--plate-img:url("assets/ribbon-silver.webp")}
.ribbon.vault-plate{--plate-img:url("assets/ribbon-silver-ice.webp")}
/* LOCKED · Jon 2026-09-16: the vault plate's line takes the leak plate's lettering -
   pearl fill with the .4px celeste framing - instead of solid celeste. */
.ribbon.vault-plate span{color:var(--pearl);-webkit-text-stroke:.4px var(--cel);paint-order:stroke fill}
/* LOCKED · Jon 2026-09-16: the vault plate's hand effects (tilt, highlight, lift, gems). */

/* Jon 2026-09-16: animated underline on the footer links, the nav's own move (a gold
   hairline growing from the centre). The nav already had it (landing.css:456). */
.foot nav a{position:relative;padding-bottom:3px;transition:color .25s ease,opacity .25s ease}
.foot nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--gold);
  transition:left .32s cubic-bezier(.2,.8,.2,1),right .32s cubic-bezier(.2,.8,.2,1)}
.foot nav a:hover::after,.foot nav a:focus-visible::after{left:0;right:0}
/* phone pass 2026-09-16: the drawn panels are laid out at the frame's desktop size
   (570 x 356) and scaled to whatever width the frame has; v4.js feeds --fs. */
.instrument .screen-body{aspect-ratio:570/356;overflow:hidden}
.instrument .screen-body .vg{width:570px;height:356px;transform-origin:0 0;transform:scale(var(--fs,1))}

/* Jon 2026-09-16: the footer at most 2.5 cm (94.5 px) tall - one row on desktop:
   mark, links, the copyright line at the right. Phones wrap and may run taller. */
.foot{padding-block:14px}
.foot-grid{align-items:center;gap:14px 28px}
.foot-brand img{width:28px;height:28px}
.foot-brand b{font-size:15px}
.foot nav{gap:20px;font-size:13.5px}
.foot-dim{width:auto;margin-top:0;margin-left:auto;font-size:12.5px}
@media (min-width:1101px){.foot{max-height:94.5px;box-sizing:border-box}}
@media (max-width:1100px){.foot-dim{width:100%;margin-left:0}}

/* Jon 2026-09-16: footer order - left the wordmark then the copyright line, right the shortcuts */
.foot-dim{order:2;margin-left:0}
.foot nav{order:3;margin-left:auto}
@media (max-width:1100px){.foot nav{margin-left:0;width:100%}}

/* Jon 2026-09-16: footer content in the corners, 1.5 cm (56.7 px) from each screen edge */
.foot .wrap{width:100%;max-width:none;padding-inline:56.7px}
@media (max-width:820px){.foot .wrap{padding-inline:var(--pad)}}

/* Jon 2026-09-16: the spine stays visible on the dark acts - v4.js flags .on-dark from the
   section under its middle; the track lightens and the capsule turns gold there. */
.spine.on-dark{background:linear-gradient(180deg,rgba(255,236,208,.10),rgba(255,236,208,.22) 45%,rgba(255,236,208,.10));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.18)}
.spine.on-dark b{background:rgba(255,226,180,.55)}
.spine.on-dark .drop{background:linear-gradient(180deg,var(--gold-glint),var(--gold-lit) 32%,var(--gold) 78%,var(--gold-deep));
  box-shadow:0 0 16px rgba(201,164,111,.55),0 6px 14px -6px rgba(60,40,10,.7),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 4px rgba(60,40,10,.45)}
.spine.on-dark b.here{background:var(--gold-lit);box-shadow:0 0 9px rgba(247,210,160,.7)}
.spine,.spine .drop,.spine b{transition:background .35s ease,box-shadow .35s ease}
.spine .drop{transition:background .35s ease,box-shadow .35s ease,transform .34s cubic-bezier(.2,.9,.2,1)}

/* Jon 2026-09-16, "all": four more touches on the panels ──────────────────
   the calendar's now line, the deposit nag dot pulsing once as the chapter lands,
   the Telegram scene closing with approval (queue 4 -> 3), and the P&L totals
   counting up (v4.js, scroll-driven, replayed on hover). */
.instrument .vg.cal .cgrid{position:relative}
.instrument .vg.cal .today-line{position:absolute;top:31px;bottom:0;left:calc(96px + (100% - 96px) / 9 * 2.42);width:1px;
  background:linear-gradient(180deg,var(--cel),rgba(0,198,232,.35));z-index:3;pointer-events:none}
.instrument .vg.cal .today-line::before{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--cel);
  box-shadow:0 0 6px var(--cel-glow)}
.instrument .vg.dep .nag::before{animation:sc-nag 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.play.dep .nag::before{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.tg .stack .a{animation:sc-out2 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.tg .stack .b{animation:sc-in2 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.instrument .vg.play.tg .stack .a,.instrument .vg.play.tg .stack .b{animation-play-state:running;animation-delay:0s;animation-duration:2.8s}
.instrument .vg.tg .qn{display:inline-grid;vertical-align:baseline}
@keyframes sc-nag{0%,18%{transform:scale(1);box-shadow:0 0 0 0 rgba(110,60,188,.6)}30%{transform:scale(1.7);box-shadow:0 0 0 6px rgba(110,60,188,0)}42%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(110,60,188,0)}}
@keyframes sc-out2{0%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes sc-in2{0%,88%{opacity:0}96%,100%{opacity:1}}

/* Jon 2026-09-16: the Order line and the accounting creed swap places. The Order line
   closes the leak act as an inner beat; the creed with its five stars becomes the beat
   after Act III, on the beat's own dark ground, its row left-aligned as before. */
.act.cost .beat-in{background:none;padding:34px 0 0;margin-top:26px;border-top:1px solid rgba(201,164,111,.22)}
.beat.accounting{text-align:left}
.beat.accounting .decl-row{margin-top:0}
.beat.accounting .decl-one h3{max-width:none}
/* the creed keeps its measured rules on the beat (copied from the leak scope, Jon 2026-09-16) */
/* on the beat, .beat p would cap the sub-line at 44ch and 16.5px; the creed keeps its own */
.beat.accounting .decl-note{max-width:none;margin:26px 0 0;font-size:20px}
/* Jon 2026-09-16: the Order line's sub-line in the verdict line's face and size, celeste */
.act.cost .beat-in p{font-family:var(--caps);letter-spacing:var(--caps-track);font-size:clamp(17px,1.7vw,22px);color:#F6EEE0;white-space:nowrap;max-width:none}
/* Jon 2026-09-16: no numeral; the title in three rows; the sub-line white with reputation celeste, owner gold */
.act.cost .beat-in h2{max-width:none}
.act.cost .beat-in h2 .row{display:block}
.act.cost .beat-in p em.cel{font-style:normal;color:var(--cel)}
.act.cost .beat-in p b.au{font-weight:inherit;background-image:linear-gradient(180deg,var(--gold-glint),var(--gold-lit) 46%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* the flat fallback mark keeps the live star's size in the compact header too (landing.css shrank it to 29px) */
.nav.compact .nav-star .star-flat{width:92%}
/* Jon 2026-09-16: the Owners Trust title arrives in six parts, one after another, once the
   block is in view (landing.js marks .in). Reduced motion shows it whole. */
.act.cost .beat-in h2 .seg{display:inline-block;opacity:0;transform:translateY(.32em);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.act.cost .beat-in h2.in .seg{opacity:1;transform:none}
.act.cost .beat-in h2.in .seg:nth-child(1){transition-delay:.1s}
.act.cost .beat-in h2.in .row:nth-child(1) .seg:nth-child(2){transition-delay:.7s}
.act.cost .beat-in h2.in .row:nth-child(2) .seg:nth-child(1){transition-delay:1.2s}
.act.cost .beat-in h2.in .row:nth-child(2) .seg:nth-child(2){transition-delay:1.7s}
.act.cost .beat-in h2.in .row:nth-child(2) .seg:nth-child(3){transition-delay:2.2s}
.act.cost .beat-in h2.in .row:nth-child(3) .seg{transition-delay:2.7s}
@media (prefers-reduced-motion:reduce){.act.cost .beat-in h2 .seg{opacity:1;transform:none;transition:none}}
/* 2026-09-16: once the star is live its flat stand-in leaves outright - no fade, which a document
   without animation frames never finishes (the flat mark stayed on top of the live star) */
.nav-star.star-live .star-flat,.star-hold.star-live .star-flat{display:none;transition:none}
/* Jon 2026-09-16: the reputation line 0.8 cm (30.24 px) lower and +2 px, one row */
.act.cost .beat-in p{margin-top:46.24px;font-size:calc(clamp(17px,1.7vw,22px) + 2px);white-space:nowrap}
/* 2026-09-16: when a browser cannot run the live star, its flat stand-in sits exactly where
   the live star draws - same centre, star-sized (the live star fills ~66% of its box) */
.nav-star .star-flat,.nav.compact .nav-star .star-flat{width:84%;height:auto;inset:0;margin:auto;position:absolute}
.star-hold .star-flat{width:min(38%,150px)}
/* 2026-09-16: a browser without WebGL gets the five marks laid out like the live cluster
   (3 below, 2 above, the same offsets the live one uses); they leave once the star is live */
.star-hold .star-five{position:absolute;inset:0;pointer-events:none}
.star-hold .star-five img{position:absolute;left:50%;top:50%;width:113.4px;height:113.4px;
  transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy)))}
.star-hold.star-live .star-five{display:none}
/* Jon 2026-09-16: the title's colour map - Owners, Order, Transparency, Money gold; Trust, You, Reputation celeste; the rest white */
.act.cost .beat-in h2 b.g{font-weight:inherit;background-image:linear-gradient(180deg,var(--gold-glint),var(--gold-lit) 46%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.act.cost .beat-in h2 i.c{font-style:normal;background-image:var(--cel-gilt);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:var(--cel-relief)}
/* Jon 2026-09-17: the verdict line and the reputation line both at 32 px */
.act.cost .cost-answer,.act.cost .beat-in p{font-size:32px}
/* Jon 2026-09-17: Check in the candy green of the add-on capsules (#6AE05A) */
.act.cost .beat-in h2 i.v{font-style:normal;background-image:linear-gradient(180deg,#C9FFB3,#6AE05A 48%,#2F9E3C);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* Jon 2026-09-17: the verdict line 3 mm (11.34 px) up (17.01 -> 5.67) and 28 px; the reputation line stays 32 */
.act.cost .cost-answer{top:5.67px;font-size:28px}
/* Jon 2026-09-17: the verdict line another 3 mm up (5.67 -> -5.67); the Owners Trust title and its
   reputation line 1.5 cm (56.7 px) down as one block (margin 26 -> 82.7) */
.act.cost .cost-answer{top:-5.67px}
.act.cost .beat-in{margin-top:82.7px}
/* Jon 2026-09-17: the Owners Trust block another 1.2 cm (45.36 px) down (82.7 -> 128.06); the verdict 2 mm (7.56 px) down (-5.67 -> 1.89) */
.act.cost .beat-in{margin-top:128.06px}
.act.cost .cost-answer{top:1.89px}
/* Jon 2026-09-17, "without extending the section": the block's margin goes back to 26 px and it
   slides down on its own offset instead; the act's 56 px bottom padding is what it slides into.
   Room below the block = 56 px, so 56 px of the asked 102 px fit without growth. */
.act.cost .beat-in{margin-top:26px;position:relative;top:56px}
.act.cost{padding-bottom:56px}
/* Jon 2026-09-17, "let the act grow": the remaining 46.06 px go into the margin (26 -> 72.06); total move 102.06 px */
.act.cost .beat-in{margin-top:72.06px;top:56px}
/* Jon 2026-09-17, "section lower part 2 cm higher": the block sits 75.6 px higher than before
   (offset 128.06 -> 52.46) and back in flow, so the act's bottom follows it with its 56 px padding.
   Measured before: the reputation line hung 22 px past the act's edge and was clipped. */
.act.cost .beat-in{margin-top:52.46px;top:0}
/* Jon 2026-09-17: the accounting sub-line at 30 px */
.beat.accounting .decl-note{font-size:30px}
/* Jon 2026-09-17: the sub-line 1 cm (37.8 px) lower on its own offset; the beat's bottom padding absorbs it, nothing grows */
.beat.accounting .decl-note{position:relative;top:37.8px}
/* Jon 2026-09-17: add-on capsules without prices, smaller */
.addons li{padding:5px 11px 5px}
.addons li b{font-size:10px}
.addons li span{font-size:9px}
.addons{gap:8px}
/* Jon 2026-09-17: no full stop on Straight Answers; the answers 6 mm (22.68 px) further below it */
.faq-h2{padding-bottom:22.68px}
/* Jon 2026-09-17: Straight Answers in celeste */
.faq-h2{color:var(--cel)}
/* Jon 2026-09-17: the answer cards' + sign in celeste */
.faq summary::after{color:var(--cel)}
/* ── Jon 2026-09-17, "gris/silver vibe": the answers on the grey marble under a silver veil,
   the cards as silver plates with the silver hairline; celeste title and plus signs stay. ── */
.act.faq-act{color:var(--ink-soft);--s-ink:var(--ink-soft);--s-title:var(--ink);--s-hairline:rgba(110,113,118,.35);
  background:linear-gradient(180deg,rgba(214,216,220,.62),rgba(198,201,206,.55) 55%,rgba(214,216,220,.66)),
             url("assets/bg-thrones-marble.webp") center center/100% auto no-repeat #B9BCC1}
.act.faq-act .faq{border:1px solid rgba(110,113,118,.45);background:linear-gradient(168deg,#F4F5F7,#DDE0E4);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 -2px 0 rgba(110,113,118,.18) inset,0 10px 24px -14px rgba(40,44,50,.45)}
.act.faq-act .faq summary{color:var(--ink)}
.act.faq-act .faq p{color:var(--ink-soft)}
.act.faq-act .faq[open]{border-color:rgba(0,198,232,.55)}
.act.faq-act .kicker{color:var(--silver-deep)}
@media (max-width:980px){.act.faq-act{background-size:cover}}
/* ── Jon 2026-09-17, "combine all, drop the ivory": three ground families, the star behind the
   hero only. bg-marble-plain.webp is the star-free half of the screens marble.
   silver marble: thrones, answers · warm stone (the same marble under a bronze veil): instrument,
   compare, footer · rock and night: hero, leak, beat, vault, unchanged. ─────────────────── */
.act.plans{background:linear-gradient(180deg,rgba(214,216,220,.58),rgba(200,203,208,.5) 55%,rgba(214,216,220,.62)),
  url("assets/bg-marble-plain.webp") center center/cover no-repeat #B9BCC1}
.act.faq-act{background:linear-gradient(180deg,rgba(214,216,220,.62),rgba(198,201,206,.55) 55%,rgba(214,216,220,.66)),
  url("assets/bg-marble-plain.webp") center center/cover no-repeat #B9BCC1}
.act.instrument{background:linear-gradient(180deg,rgba(236,224,206,.66),rgba(228,214,192,.58) 50%,rgba(236,224,206,.7)),
  url("assets/bg-marble-plain.webp") center center/cover no-repeat #C9BBA4}
.act.compare{background:linear-gradient(180deg,rgba(236,224,206,.7),rgba(228,214,192,.62) 50%,rgba(236,224,206,.74)),
  url("assets/bg-marble-plain.webp") center center/cover no-repeat #C9BBA4}
.foot{background:linear-gradient(180deg,rgba(236,224,206,.74),rgba(226,212,190,.7)),
  url("assets/bg-marble-plain.webp") center bottom/cover no-repeat #C9BBA4}
@media (prefers-reduced-motion:reduce){.act.plans,.act.faq-act,.act.instrument,.act.compare{background-attachment:scroll}}
/* Jon 2026-09-17: tier plates in light metallic grey instead of the skin tone; the pointer
   light a third stronger so it reads on the metal */
.plan{background:
  radial-gradient(130% 62% at 50% -8%,rgba(255,255,255,.9),transparent 62%),
  linear-gradient(115deg,rgba(255,255,255,.35) 0%,transparent 28%,rgba(255,255,255,.22) 52%,transparent 74%),
  linear-gradient(168deg,#F2F3F5,#D7DAE0)}
.plan::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    var(--glow-core,rgba(0,198,232,.4)), var(--glow-halo,rgba(111,242,255,.18)) 44%, transparent 68%)}
.plan.t-keeper   {--glow-core:rgba(176,137,86,.42); --glow-halo:rgba(201,164,111,.2)}
.plan.t-elder    {--glow-core:rgba(196,118,46,.44); --glow-halo:rgba(224,150,72,.2)}
.plan.t-chief    {--glow-core:rgba(150,158,168,.46);--glow-halo:rgba(201,205,211,.22)}
.plan.t-governor {--glow-core:rgba(224,180,84,.44); --glow-halo:rgba(247,210,160,.22)}
.plan.t-titan    {--glow-core:rgba(226,240,246,.55);--glow-halo:rgba(111,242,255,.08)}
.plan.t-president{--glow-core:rgba(0,198,232,.42);  --glow-halo:rgba(111,242,255,.2)}
/* ── Jon 2026-09-17, "still ivory all over": the ivory family leaves the page. The three ground
   tokens turn silver, so every surface that drew on them (body, frames, tables, groups, footer)
   follows; the warm veils on instrument, compare and footer become the same silver as the thrones;
   the literal ivory gradients get their silver twins. The drawn app panels keep the app's own
   colours - they show the app, not the page. ───────────────────────────────────────────── */
:root{--pearl:#E7E9EC;--pearl-2:#DCDFE4;--paper:#F3F4F6}
body{background:#E7E9EC}
.act.instrument,.act.compare{background:linear-gradient(180deg,rgba(214,216,220,.6),rgba(200,203,208,.52) 50%,rgba(214,216,220,.64)),
  url("assets/bg-marble-plain.webp") center center/cover no-repeat #B9BCC1}
.foot{background:linear-gradient(180deg,rgba(214,216,220,.7),rgba(196,199,205,.66)),
  url("assets/bg-marble-plain.webp") center bottom/cover no-repeat #B9BCC1}
.chooser{background:linear-gradient(168deg,#F6F7F9,#DFE2E7);border-color:rgba(110,113,118,.35)}
.addons li{background:linear-gradient(168deg,#F6F7F9,#E4E7EC)}
.screen{border-color:rgba(110,113,118,.4)}
.group,.tbl{border-color:rgba(110,113,118,.35)}
.act.instrument,.act.compare,.act.plans,.foot{--s-hairline:rgba(110,113,118,.35)}
.act.instrument .chapter{border-top-color:rgba(110,113,118,.35)}
/* ── Jon 2026-09-17: the drawn panels wear the app's tier skins. Values read from
   tanentros-app/src/styles.css: Chief = house skin with the satin rat-grey capsules
   (.skin-none.tier-silver, line 3619); Governor = the co-brand gold skin (.skin-cobrand, 2566+).
   P&L, deposits, Telegram -> Chief · portal and switchboard -> Governor · calendar, statement -> house. */
.vg.skin-chief .eb,.vg.skin-chief .cal-top .ttl{display:inline-block;padding:2px 8px 3px;border-radius:6px;color:#F7F7F8;
  background:linear-gradient(45deg,#6E7176 0%,#8F9296 28%,#B7BABF 50%,#82858A 74%,#A2A5AA 100%);
  border:1px solid rgba(96,99,104,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(60,62,66,.25),0 2px 5px rgba(58,60,64,.28);
  text-shadow:0 1px 0 rgba(0,0,0,.28)}
.vg.skin-chief .btn-s{background:linear-gradient(45deg,#8F9296,#B7BABF 50%,#A2A5AA);border-color:rgba(96,99,104,.8);color:#1E1F22}
.vg.skin-chief .btn-s.cel{background:var(--cel-gilt);color:#08222A;border-color:transparent}
.vg.skin-chief .card{border-color:rgba(96,99,104,.35)}
.vg.skin-chief .p{border-color:rgba(96,99,104,.6)}
.vg.skin-governor{--a-surface:#FFFBEF;--a-ink:#3E2E14;--a-taupe:#7D6248;--a-hair:rgba(160,124,58,.45);--a-gold:#C4952F;--a-amber:#F6E9CC;
  background:#FFF8E8;color:#3E2E14}
.vg.skin-governor .card,.vg.skin-governor .modal{background:linear-gradient(180deg,#FFFBEF 0%,#F6E9CC 100%);border-color:rgba(160,124,58,.45)}
.vg.skin-governor .btn-s.cel{background:linear-gradient(180deg,#EDCB6E 0%,#C4952F 100%);color:#33230A;border-color:transparent}
.vg.skin-governor .btn-s{background:#FFFBEF;border-color:rgba(160,124,58,.45);color:#3E2E14}
.vg.skin-governor .band{background:rgba(160,124,58,.2)}
.vg.skin-governor .band .num,.vg.skin-governor .modal .t{background-image:var(--cel-gilt);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.vg.skin-governor .modal .t{background-image:linear-gradient(180deg,#EDCB6E,#C4952F)}
.vg.skin-governor .back .rw{border-bottom-color:rgba(160,124,58,.28)}
.vg.skin-governor .p.cel{background:linear-gradient(180deg,#EDCB6E,#C4952F);color:#33230A}
.vg.skin-governor .sw.on i{background:linear-gradient(180deg,#EDCB6E,#C4952F)}
/* Jon 2026-09-18: two panels in tier skins - deposits in Chief, portal in Governor; the rest house.
   Chief made unmistakable: the grey star-marble of its sidebar as the panel ground, rat-grey capsules. */
.vg.skin-chief{background:linear-gradient(180deg,rgba(236,237,239,.86),rgba(224,226,230,.9)),url("assets/bg-marble-plain.webp") center/cover no-repeat #E4E6EA;
  --a-surface:#F7F8FA;--a-hair:rgba(96,99,104,.35);--a-taupe:#5F6368;color:#2A2C30}
.vg.skin-chief .card{background:linear-gradient(180deg,#FBFBFC,#EEF0F3)}
.vg.skin-chief .tbl2 td,.vg.skin-chief .tbl2 th{border-bottom-color:rgba(96,99,104,.28)}
.vg.skin-chief .p.cel{background:linear-gradient(45deg,#6E7176 0%,#8F9296 28%,#B7BABF 50%,#82858A 74%,#A2A5AA 100%);color:#F7F7F8;border-color:rgba(96,99,104,.8)}
/* Jon 2026-09-18: the compare table loses its ivory - silver head band and silver striping */
.tbl thead th{background:linear-gradient(180deg,#F1F2F5,#DDE0E5);border-bottom-color:rgba(110,113,118,.35)}
.tbl tbody tr:nth-child(even) th,.tbl tbody tr:nth-child(even) td{background:rgba(220,223,228,.55)}
.tbl tbody tr:nth-child(odd) th,.tbl tbody tr:nth-child(odd) td{background:#F5F6F8}
.tbl td,.tbl tbody th{border-bottom-color:rgba(110,113,118,.2)}
.tbl tbody tr:hover th,.tbl tbody tr:hover td{background:rgba(0,198,232,.10)}