/* digits only: the app's numerals face (admin calendar, incard DOORS count).
   Same file the app ships - "Alegreya", lining + tabular. Letters are untouched:
   the unicode-range hands over 0-9 and nothing else. */
@font-face{
  font-family:"TanDigits";
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/fonts/Alegreya-n400-latin.woff2") format("woff2");
  unicode-range:U+0030-0039;
}
/* TANENTROS landing — mockup v2 (design chat, 2026-09-06)
   One light source: top-left. Every shadow falls down-right. No exceptions. */

:root{
  /* ground */
  --pearl:#F8F3EA;      --pearl-2:#F1E9DC;    --paper:#FDFAF4;
  --stone:#D9D3C8;      --ink:#171310;        --ink-soft:#3A322A;
  --vault:#0E0B08;      --vault-2:#1C1611;
  /* metal */
  --gold:#C9A46F;       --gold-lit:#F7D2A0;   --gold-glint:#FFE2B4;  --gold-deep:#614925;
  --silver:#B9BCC1;     --silver-lit:#E7EAEE; --silver-deep:#6E7176;
  /* celeste */
  --cel:#6ED9E8;        --cel-deep:#2FA8B8;   --cel-glow:rgba(110,217,232,.45);
  /* type */
  --display:"TanDigits","Cormorant Garamond",Georgia,serif;
  --caps:"TanDigits","Alegreya SC","Palatino Linotype",Georgia,serif;
  --body:"TanDigits","Alegreya",Georgia,serif;
  /* rhythm */
  --caps-track:.10em;   /* fixed on the face: platform title-plaque tracking, Jon 2026-08-17 */
  --gap:clamp(18px,2.4vw,34px);
  --pad:clamp(20px,5vw,84px);
  --shadow-1:0 1px 0 rgba(255,255,255,.75), 0 2px 6px rgba(23,19,16,.10);
  --shadow-2:0 1px 0 rgba(255,255,255,.7), 0 10px 26px -12px rgba(23,19,16,.42);
  --shadow-3:0 18px 44px -18px rgba(23,19,16,.55), 0 2px 0 rgba(255,255,255,.55) inset;
}


/* ─── the token ladder (Jon 2026-09-08) ──────────────────────────────
   Four rungs, so a colour can be changed for the whole house, for one
   sector, or for a single element, and you always know how far it goes.

     1 PALETTE  the only hexes that exist  (:root, above)
     2 ROLE     what a colour MEANS        --role-*
     3 SECTOR   a region that re-skins      --s-*   (set on a section)
     4 ELEMENT  one pin, nothing else moves --s-* on the element itself

   Change at the rung that matches the blast radius. Nothing below rung 1
   may introduce a new hex. */

:root{
  /* 2 · ROLE — meaning, not material */
  --role-surface:var(--pearl);
  --role-surface-raised:var(--paper);
  --role-ink:var(--ink-soft);
  --role-title:var(--ink);
  --role-hairline:rgba(97,73,37,.22);
  --role-metal:var(--gold);
  --role-metal-lit:var(--gold-lit);
  --role-metal-deep:var(--gold-deep);
  --role-accent:var(--cel);
  --role-accent-deep:var(--cel-deep);
  /* the platform's money voices, same stops as the Finance tab */
  --role-money-in:linear-gradient(180deg,#FFDE59 0%,#F5AF00 48%,#B87E00 100%);
  --role-money-out:linear-gradient(180deg,#FF9C87 0%,#FF5347 48%,#C62E24 100%);
  --role-money-net:linear-gradient(180deg,#6FF2FF 0%,#00C6E8 48%,#0090B4 100%);
}

/* 3 · SECTOR — every region starts from the roles and may override any of them */
section,.nav,.foot{
  --s-ink:var(--role-ink);
  --s-title:var(--role-title);
  --s-hairline:var(--role-hairline);
  --s-metal:var(--role-metal);
  --s-metal-lit:var(--role-metal-lit);
  --s-metal-deep:var(--role-metal-deep);
  --s-accent:var(--role-accent);
  --s-accent-deep:var(--role-accent-deep);
}
/* the two dark rooms: same roles, different materials */
.cost{--s-ink:#C7BDAC;--s-title:#F6EEE0;--s-hairline:rgba(201,164,111,.28);
      --s-metal:var(--gold-lit);--s-metal-deep:var(--gold-lit)}
.vault{--s-ink:#C7BDAC;--s-title:#F6EEE0;--s-hairline:rgba(201,164,111,.3);
       --s-metal:var(--gold-lit);--s-metal-deep:var(--gold-lit)}
.plans{--s-hairline:rgba(97,73,37,.24)}
.compare{--s-hairline:rgba(97,73,37,.24)}

/* 4 · ELEMENT — one plate, one pin, nobody else moves */
.plan.featured{--s-metal:var(--gold-glint);--s-hairline:rgba(201,164,111,.85)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--pearl); color:var(--ink-soft);
  font-family:var(--body); font-size:17.5px; line-height:1.62;
  font-variant-numeric:lining-nums tabular-nums;   /* the app's numerals, not old-style */
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--cel);color:#08303a}

/* ─── shared parts ─────────────────────────────────────────── */
.wrap{width:min(1200px,100%);margin-inline:auto;padding-inline:var(--pad)}
.kicker{
  font-family:var(--caps); font-size:13px; letter-spacing:var(--caps-track); text-transform:uppercase;
  color:var(--s-metal-deep); display:flex; align-items:center; gap:12px;
}
.kicker::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.kicker.on-dark{color:var(--gold-lit)}
h2{
  font-family:var(--display); font-weight:700; letter-spacing:.01em;
  font-size:clamp(30px,4.4vw,52px); line-height:1.08; color:var(--s-title);
  margin:14px 0 0; max-width:18ch;
}
h2 em{font-style:normal;color:var(--gold-deep)}
.lede{max-width:56ch;margin-top:14px;font-size:clamp(17px,1.25vw,19px)}
section{position:relative;padding-block:clamp(64px,8vw,116px)}

/* hairline gold rule that draws itself */
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold-glint) 50%,var(--gold) 78%,transparent)}
html.js .rule{transform:scaleX(0);transform-origin:50% 50%;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.in .rule,.rule.in{transform:scaleX(1)}

/* buttons: metal, pressable, one light */
.btn{
  --btn-face:linear-gradient(160deg,#FFFDF7,#EFE6D6 46%,#E2D6C2);
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--caps); font-weight:700; font-size:16px; letter-spacing:var(--caps-track);
  padding:14px 26px 15px; border-radius:13px; text-decoration:none; color:var(--ink);
  background:var(--btn-face);
  border:1px solid rgba(97,73,37,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 -2px 0 rgba(97,73,37,.14) inset, var(--shadow-2);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, filter .16s;
  overflow:hidden; isolation:isolate;
}
.btn::after{ /* specular sweep */
  content:"";position:absolute;inset:-40% -60%;z-index:-1;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -2px 0 rgba(97,73,37,.14) inset,0 16px 30px -14px rgba(23,19,16,.5)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(23,19,16,.35) inset}
.btn-gold{
  --btn-face:linear-gradient(160deg,var(--gold-glint),var(--gold-lit) 42%,var(--gold) 78%,#A9884F);
  color:#2B1F0C; border-color:rgba(97,73,37,.7);
  text-shadow:0 1px 0 rgba(255,244,220,.6);
}
.btn-cel{
  --btn-face:linear-gradient(160deg,#BFF0F7,var(--cel) 48%,var(--cel-deep));
  color:#05323B; border-color:rgba(10,60,68,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 -2px 0 rgba(10,60,68,.2) inset,0 10px 26px -12px var(--cel-glow),var(--shadow-2);
}
.btn-ghost{--btn-face:linear-gradient(160deg,rgba(255,255,255,.6),rgba(241,233,220,.5));backdrop-filter:blur(4px)}
.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)}

/* ─── nav ──────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--pad);
  background:rgba(248,243,234,.82); backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid rgba(97,73,37,.16);
}
.nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.nav-brand img{width:34px;height:34px;filter:drop-shadow(0 3px 6px rgba(23,19,16,.35))}
.nav-brand b{font-family:var(--caps);font-weight:700;font-size:19px;letter-spacing:var(--caps-track);color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-family:var(--caps);font-size:15px;letter-spacing:var(--caps-track);text-decoration:none;position:relative;padding:4px 0}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s}
.nav-links a:not(.btn):hover::after{right:0}
.nav-toggle{display:none;background:none;border:1px solid rgba(97,73,37,.4);border-radius:10px;padding:9px 11px;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle span+span{margin-top:4px}

/* ─── hero ─────────────────────────────────────────────────── */
.hero{padding-block:clamp(40px,6vw,86px) clamp(56px,7vw,110px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero-stage{position:relative;aspect-ratio:1;display:grid;place-items:center;perspective:900px}
.hero-halo{position:absolute;inset:6% 6% 10%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(110,217,232,.35),rgba(110,217,232,.08) 58%,transparent 72%);
  filter:blur(6px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.hero-mark{position:relative;width:min(88%,512px);transform-style:preserve-3d;will-change:transform}
.hero-mark img{filter:drop-shadow(0 26px 34px rgba(23,19,16,.42))}
/* the turning star gets a shadow that is PAINTED ONCE, not recomputed from its
   silhouette every frame - a per-frame drop-shadow is what smoked the pixels */
.hero-mark::before{
  content:"";position:absolute;z-index:-1;left:14%;right:14%;bottom:1%;height:14%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(23,19,16,.44),rgba(23,19,16,.16) 55%,transparent 72%);
  filter:blur(9px);pointer-events:none;
}
.hero-mark img{display:block;transition:opacity .6s ease}
.hero-mark .mark-turn{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.hero-mark .mark-src{display:none}
.hero-mark.turning .mark-turn{opacity:1}
.hero-mark.turning img{opacity:0}
.hero-mark::after{ /* light pass across the metal */
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 48%,transparent 58%);
  mix-blend-mode:screen;opacity:0;animation:pass 9s ease-in-out infinite;
}
@keyframes pass{0%,72%{opacity:0;transform:translateX(-30%)}80%{opacity:.9}100%{opacity:0;transform:translateX(30%)}}
.hero h1{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(38px,6.2vw,76px);line-height:1.02;letter-spacing:-.005em;max-width:14ch;
}
.hero h1 .cel{color:var(--s-accent-deep)}
.hero h1 .gold{
  /* the hero ground is lit now, so the word starts at full gold, not at the glint */
  background:linear-gradient(180deg,var(--gold) 0%,#B0894C 52%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero-sub{margin-top:20px;max-width:52ch;font-size:clamp(17px,1.35vw,20px)}
.hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap;font-family:var(--caps);font-size:13.5px;letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--silver-deep)}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta i{width:6px;height:6px;border-radius:50%;background:var(--s-accent);box-shadow:0 0 0 3px rgba(110,217,232,.22)}

/* ─── the cost band (dark) ─────────────────────────────────── */
.cost{
  color:#EFE6D6;
  background:
    linear-gradient(180deg,rgba(14,11,8,.94),rgba(14,11,8,.88)),
    url("assets/banner-dark-rock.webp") center/cover no-repeat fixed;
}
.cost h2{color:#F6EEE0}
.cost h2 em{color:var(--gold-lit)}
.cost .lede{color:#C9BFAE}
.cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap);margin-top:44px}
.cost-card{
  position:relative;padding:26px 24px 24px;border-radius:16px;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--s-hairline);
  box-shadow:0 20px 40px -26px #000, 0 1px 0 rgba(255,255,255,.08) inset;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s;
}
.cost-card:hover{transform:translateY(-4px);border-color:rgba(201,164,111,.65)}
.cost-card b{display:block;font-family:var(--caps);font-size:18px;letter-spacing:var(--caps-track);color:var(--s-metal);margin-bottom:8px;padding-right:44px}
.cost-card p{color:var(--s-ink);font-size:16.5px}
.cost-card .num{position:absolute;top:12px;right:16px;font-family:var(--display);font-size:34px;line-height:1;color:rgba(201,164,111,.3)}
.cost-answer{margin-top:40px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--caps);letter-spacing:var(--caps-track);font-size:clamp(17px,1.7vw,22px);color:#F6EEE0}
.cost-answer b{color:var(--cel)}

/* ─── proof ────────────────────────────────────────────────── */
.proof{background:linear-gradient(180deg,var(--pearl),var(--paper))}
.proof-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap);margin-top:44px}
.shot{
  border-radius:14px;overflow:hidden;background:var(--paper);
  border:1px solid rgba(97,73,37,.28);box-shadow:var(--shadow-3);
  transform:perspective(1000px) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.shot:hover{transform:perspective(1000px) rotateY(0) translateY(-6px)}
.shot-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:linear-gradient(180deg,#2A231C,#191410);border-bottom:1px solid rgba(201,164,111,.3)}
.shot-head i{width:9px;height:9px;border-radius:50%;background:#4A4038}
.shot-head b{margin-left:8px;font-family:var(--caps);font-size:12.5px;letter-spacing:var(--caps-track);color:#C9BFAE;text-transform:uppercase}
.shot-body{aspect-ratio:16/10;display:grid;place-items:center;text-align:center;padding:20px;
  background:repeating-linear-gradient(135deg,#F4EDE1,#F4EDE1 12px,#EFE7D8 12px,#EFE7D8 24px)}
.shot-body span{font-family:var(--caps);font-size:13px;letter-spacing:var(--caps-track);text-transform:uppercase;color:#9A8B75}

/* ─── ribbon title plate (brand masters 27–32) ─────────────── */
.ribbon{position:relative;width:min(880px,100%);margin:26px auto 0}
.ribbon img{width:100%;filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}
.ribbon span{
  /* centred on the plate INTERIOR, measured off each master: the flat
     cartouche between the ornaments, not the middle of the image file:
     the axis is taken from the end-gem on each master, which sits on it */
  position:absolute;left:13%;right:13%;top:var(--rib-centre,50%);transform:translateY(-50%);
  display:block;text-align:center;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,2.3vw,30px);line-height:1;letter-spacing:.01em;white-space:nowrap;
  color:var(--pearl);
  -webkit-text-stroke:.4px var(--cel);paint-order:stroke fill;   /* celeste letter framing */
  text-shadow:none;
}
.ribbon.silver{--rib-centre:61.7%}
.ribbon.gold{--rib-centre:61.0%}
.ribbon.ice{--rib-centre:59.0%}
.ribbon.lift img{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ribbon.lift:hover img{transform:translateY(-3px) scale(1.01)}

/* ─── features ─────────────────────────────────────────────── */
.feat{background:
  linear-gradient(180deg,rgba(248,243,234,.94),rgba(248,243,234,.97)),
  url("assets/pattern-stone.webp") center/1400px repeat;
  background-position:center calc(50% + var(--par,0px))}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap);margin-top:46px}
.card{
  position:relative;padding:28px 26px;border-radius:16px;background:linear-gradient(168deg,#FFFDF8,#F3EBDD);
  border:1px solid var(--s-hairline);
  box-shadow:var(--shadow-2);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s;
  overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-lit),transparent);opacity:.85}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 46px -22px rgba(23,19,16,.5)}
.card h3{font-family:var(--caps);font-size:20px;letter-spacing:var(--caps-track);color:var(--s-title);margin-bottom:9px}
.card p{font-size:16.5px}
.card .tag{display:inline-block;margin-top:14px;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,.55);border-radius:999px;padding:3px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(247,210,160,.25))}

/* ─── how ──────────────────────────────────────────────────── */
.how-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap);margin-top:46px;counter-reset:step}
.step{position:relative;padding-top:34px}
.step::before{counter-increment:step;content:"0" counter(step);
  font-family:var(--display);font-size:46px;line-height:1;color:transparent;
  background:linear-gradient(180deg,var(--gold-lit),var(--gold-deep));-webkit-background-clip:text;background-clip:text;
  position:absolute;top:-8px;left:0}
.step b{display:block;font-family:var(--caps);font-size:19px;letter-spacing:var(--caps-track);color:var(--s-title);margin-bottom:7px}

/* ─── plans ────────────────────────────────────────────────── */
.plans{background:linear-gradient(180deg,var(--paper),var(--pearl-2))}
.cycle{display:inline-flex;margin-top:22px;padding:4px;border-radius:999px;background:rgba(23,19,16,.06);border:1px solid rgba(97,73,37,.22)}
.cycle button{font-family:var(--caps);font-size:14px;letter-spacing:var(--caps-track);text-transform:uppercase;
  border:0;background:none;padding:9px 18px;border-radius:999px;cursor:pointer;color:var(--ink-soft)}
.cycle button[aria-pressed="true"]{background:linear-gradient(160deg,#FFFDF7,#E9DFCB);color:var(--ink);box-shadow:var(--shadow-1)}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:38px}
.plan{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:26px 20px 24px;border-radius:18px;background:linear-gradient(168deg,#FFFEFA,#F0E8DA);
  border:1px solid var(--s-hairline);box-shadow:var(--shadow-2);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
.plan:hover{transform:translateY(-6px);box-shadow:0 30px 50px -24px rgba(23,19,16,.5)}
.plan img{width:min(210px,72%);height:104px;object-fit:contain;object-position:center;filter:drop-shadow(0 10px 16px rgba(23,19,16,.34));transition:transform .3s}
.plan:hover img{transform:translateY(-3px) scale(1.03)}
.plan .price{margin-top:14px;font-family:var(--display);font-size:30px;color:var(--ink)}
.plan .price small{font-family:var(--body);font-size:15px;color:var(--silver-deep)}
.plan .doors{font-family:var(--caps);font-size:12.5px;letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--s-metal-deep);margin-top:4px}
.plan ul{list-style:none;margin-top:14px;display:grid;gap:6px;font-size:16px}
.plan ul{flex:1 0 auto}
.plan .pick{margin-top:18px;width:100%;justify-content:center}
.plan.featured{border-color:rgba(201,164,111,.85);box-shadow:0 0 0 1px rgba(201,164,111,.35),0 30px 54px -24px rgba(23,19,16,.55)}
.plan.featured::before{content:"Most taken";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-family:var(--caps);font-size:11.5px;letter-spacing:var(--caps-track);text-transform:uppercase;color:#2B1F0C;
  background:linear-gradient(160deg,var(--gold-glint),var(--gold));border:1px solid rgba(97,73,37,.5);
  border-radius:999px;padding:4px 14px;box-shadow:var(--shadow-1)}
.plans-note{margin-top:20px;font-size:15px;color:var(--silver-deep)}

/* ─── compare ──────────────────────────────────────────────── */
.compare{background:var(--pearl)}
.tbl{margin-top:38px;border:1px solid rgba(97,73,37,.24);border-radius:16px;overflow:auto;background:var(--paper);box-shadow:var(--shadow-2);max-height:74vh}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:840px;font-size:15.5px}
thead th{position:sticky;top:0;z-index:3;background:linear-gradient(180deg,#F6EFE2,#EADFCB);
  padding:12px 10px;border-bottom:1px solid rgba(97,73,37,.35);font-family:var(--caps);font-size:13.5px;letter-spacing:var(--caps-track)}
thead th:first-child{left:0;z-index:4}
tbody th{position:sticky;left:0;z-index:2;background:var(--paper);text-align:left;font-weight:400;
  font-family:var(--caps);font-size:14.5px;letter-spacing:var(--caps-track);color:var(--ink);
  padding:10px 16px;border-right:1px solid rgba(97,73,37,.18)}
td{text-align:center;padding:10px 12px;border-bottom:1px solid rgba(97,73,37,.12)}
tbody th{border-bottom:1px solid rgba(97,73,37,.12)}
tbody tr:nth-child(even) th,tbody tr:nth-child(even) td{background:rgba(241,233,220,.55)}
tbody tr:hover th,tbody tr:hover td{background:rgba(110,217,232,.13)}
.yes{color:var(--cel-deep);font-weight:700}
.no{color:#B4ABA0}
.soon{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:15.5px;color:var(--silver-deep)}
.soon b{font-family:var(--caps);letter-spacing:var(--caps-track);text-transform:uppercase;font-size:12.5px;color:var(--gold-deep);
  border:1px solid rgba(201,164,111,.5);border-radius:999px;padding:3px 11px}

/* ─── vault ────────────────────────────────────────────────── */
.vault{color:#EFE6D6;background:
  linear-gradient(180deg,rgba(14,11,8,.95),rgba(28,22,17,.92)),
  url("assets/pattern-stone.webp") center/1200px repeat}
.vault h2{color:#F6EEE0}
.vault-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);margin-top:44px}
.vault-card{padding:24px;border-radius:14px;border:1px solid var(--s-hairline);
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:0 22px 44px -28px #000}
.vault-card b{display:block;font-family:var(--caps);font-size:17.5px;letter-spacing:var(--caps-track);color:var(--s-metal);margin-bottom:7px}
.vault-card p{color:var(--s-ink);font-size:16px}
.counter{display:block;margin:10px 0 2px;font-family:var(--display);font-size:clamp(38px,4.4vw,58px);line-height:1;color:var(--cel);text-shadow:0 0 26px rgba(110,217,232,.35)}
.counter+em{font-style:normal;font-family:var(--caps);font-size:12.5px;letter-spacing:var(--caps-track);text-transform:uppercase;color:#9C9385}

/* ─── faq + footer ─────────────────────────────────────────── */
.faq-list{margin-top:34px;display:grid;gap:12px}
details{border:1px solid rgba(97,73,37,.22);border-radius:12px;background:linear-gradient(168deg,#FFFDF8,#F4ECDE);box-shadow:var(--shadow-1)}
summary{cursor:pointer;list-style:none;padding:16px 20px;font-family:var(--caps);font-size:17px;letter-spacing:var(--caps-track);color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:24px;color:var(--gold-deep);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 20px 18px;font-size:16.5px}
.foot{background:linear-gradient(180deg,var(--pearl-2),#E8DFCE);border-top:1px solid rgba(97,73,37,.2);padding-block:44px}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand img{width:42px}
.foot-brand b{font-family:var(--caps);letter-spacing:var(--caps-track);font-size:17px;color:var(--s-title)}
.foot nav{display:flex;gap:26px;flex-wrap:wrap;font-family:var(--caps);font-size:14.5px;letter-spacing:var(--caps-track)}
.foot nav a{text-decoration:none;opacity:.8}
.foot nav a:hover{opacity:1;color:var(--gold-deep)}
.foot-dim{width:100%;margin-top:22px;font-size:13.5px;color:var(--silver-deep);letter-spacing:.04em}

/* ─── motion ───────────────────────────────────────────────── */
.rise{opacity:1;translate:0 0}
html.js .rise{opacity:0;translate:0 22px;transition:opacity .7s cubic-bezier(.2,.8,.2,1),translate .7s cubic-bezier(.2,.8,.2,1)}
html.js .rise.in{opacity:1;translate:0 0}
.rise.d1{transition-delay:.08s}.rise.d2{transition-delay:.16s}.rise.d3{transition-delay:.24s}
.rise.d4{transition-delay:.32s}.rise.d5{transition-delay:.4s}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-stage{order:-1;aspect-ratio:5/4;max-height:46vh}
  .hero-mark{width:min(58%,300px)}
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links{position:fixed;inset:62px 12px auto 12px;flex-direction:column;align-items:stretch;gap:6px;
    background:rgba(250,246,238,.98);border:1px solid rgba(97,73,37,.25);border-radius:14px;padding:14px;
    box-shadow:var(--shadow-3);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.2s}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:10px 4px}
  .nav-toggle{display:block}
}
@media (max-width:640px){
  .plan-grid{grid-template-columns:1fr}
  .cost{background-attachment:scroll}
  .ribbon span{font-size:clamp(15px,4.2vw,21px);left:6%;right:6%}
  body{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;translate:0 0;transform:none}
  .rule{transform:scaleX(1)}
}

/* ─── depth + motion pass (Jon, 2026-09-07) ─────────────────
   Cards read the pointer, buttons stand on a body they press into,
   the menu moves. Light still arrives from the top-left, always. */


/* cards: the pointer carries the light, the card leans into it */
.card,.cost-card,.plan{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .24s;
}
.card:hover,.cost-card:hover{--ty:-5px}
.plan:hover{--ty:-6px}
.card::after,.cost-card::after,.plan::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.6),transparent 62%);
  mix-blend-mode:soft-light;opacity:0;transition:opacity .3s;
}
.cost-card::after{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(247,210,160,.45),transparent 60%);
  mix-blend-mode:screen;
}
.card:hover::after,.cost-card:hover::after,.plan:hover::after{opacity:1}
.card::before{transition:filter .3s,opacity .3s}
.card:hover::before{filter:brightness(1.35)}

/* nav: compacts as you leave the top, lights the section you are in */
.nav{transition:padding .25s ease,background .25s ease,box-shadow .25s ease}
.nav.compact{padding-block:7px;background:rgba(248,243,234,.93);box-shadow:0 12px 30px -22px rgba(23,19,16,.75)}
.nav-brand img{transition:width .25s ease}
.nav.compact .nav-brand img{width:29px}
.nav-links a:not(.btn)::after{left:50%;right:50%;transition:left .32s cubic-bezier(.2,.8,.2,1),right .32s cubic-bezier(.2,.8,.2,1)}
.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn).here::after{left:0;right:0}
.nav-links a:not(.btn).here{color:var(--s-metal-deep)}
.nav-toggle span{transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .18s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:980px){
  .nav-links a{opacity:0;translate:0 -10px;transition:opacity .28s ease,translate .28s ease}
  .nav-links.open a{opacity:1;translate:0 0}
  .nav-links.open a:nth-child(1){transition-delay:.05s}
  .nav-links.open a:nth-child(2){transition-delay:.10s}
  .nav-links.open a:nth-child(3){transition-delay:.15s}
  .nav-links.open a:nth-child(4){transition-delay:.20s}
  .nav-links.open a:nth-child(5){transition-delay:.25s}
}
@media (prefers-reduced-motion:reduce){
  .card,.cost-card,.plan{transform:none}
  .nav-links a{opacity:1;translate:0 0}
}

/* the TANENTROS wordmark = the platform's title-plaque setting */
.nav-brand b,.foot-brand b{
  display:inline-block;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--caps-track);text-indent:var(--caps-track);
}

/* ─── the ledger line, section seams and the light (2026-09-07) ──────
   A page about accounting deserves to be built like a ledger: one ruled
   line down the margin, a hairline where every material meets, and one
   light from the top-left that every surface answers to. */

.spine{position:fixed;z-index:40;pointer-events:none;
  left:clamp(12px,calc(var(--pad) / 2),44px);top:11vh;bottom:11vh;width:6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(97,73,37,.07),rgba(97,73,37,.13) 45%,rgba(97,73,37,.07));
  box-shadow:inset 0 1px 2px rgba(23,19,16,.16),inset 0 -1px 0 rgba(255,255,255,.5);}
.spine .drop{                                    /* the capsule: celeste, liquid, alive */
  position:absolute;left:-2px;width:10px;height:74px;border-radius:999px;
  top:calc(var(--prog,0) * (100% - 74px));
  background:linear-gradient(180deg,#DFF9FD,var(--cel) 32%,var(--cel-deep) 78%,#1B7C8B);
  box-shadow:0 0 16px var(--cel-glow),0 6px 14px -6px rgba(9,60,70,.7),
             inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 4px rgba(6,52,60,.45);
  transform:scaleY(var(--stretch,1)) scaleX(calc(2 - var(--stretch,1)));
  transform-origin:50% var(--origin,50%);
  transition:transform .34s cubic-bezier(.2,.9,.2,1);}
.spine .drop::after{                             /* the meniscus running through it */
  content:"";position:absolute;inset:3px 2px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),transparent 34%,rgba(255,255,255,.28) 62%,transparent);}

section + section::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(201,164,111,.5) 16%,rgba(255,226,180,.95) 50%,rgba(201,164,111,.5) 84%,transparent);}
section + section::after{content:"";position:absolute;left:0;right:0;top:1px;height:22px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);}
.cost::after,.vault::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 46% at 16% -6%,rgba(255,226,180,.13),transparent 68%);}

.hero h1{font-size:clamp(42px,7vw,86px);line-height:.99;letter-spacing:-.014em;
  text-shadow:0 1px 0 rgba(255,255,255,.8)}
.hero-sub{margin-top:24px}
.kicker::before{width:38px}

.plan img{background:radial-gradient(58% 40% at 50% 76%,rgba(201,164,111,.30),transparent 72%)}
.plan{background:
  radial-gradient(130% 62% at 50% -8%,rgba(255,255,255,.95),transparent 62%),
  linear-gradient(168deg,#FFFEFA,#F0E8DA);}
.plan:hover img{transform:translateY(-4px) scale(1.04);filter:drop-shadow(0 16px 22px rgba(23,19,16,.4))}

.counter{font-size:clamp(46px,5.6vw,74px);
  background:linear-gradient(180deg,#DFF7FB,var(--cel) 46%,var(--cel-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 6px 18px rgba(110,217,232,.35))}

@media (max-width:980px){ .spine{display:none} }

/* the notches: a ruled ledger margin you can also steer with */
.spine b{position:absolute;left:9px;width:9px;height:1px;background:rgba(97,73,37,.42);
  pointer-events:auto;cursor:pointer;transition:width .22s cubic-bezier(.2,.8,.2,1),background .22s,box-shadow .22s}
.spine b::after{content:"";position:absolute;inset:-7px -9px}
.spine b:hover{width:17px;background:var(--gold)}
.spine b.here{width:17px;background:var(--cel);box-shadow:0 0 9px var(--cel-glow)}

/* --- the room the page is lit in (2026-09-07) -----------------------
   A hero that is a lit room, not a two-column grid: one window at the
   top-left, a warm bounce off the right wall, a floor that falls into
   shadow, and grain over everything so nothing reads as flat CSS. */

.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");background-size:160px 160px;}

.hero{min-height:calc(100svh - 62px);display:flex;align-items:center;overflow:clip}
.hero-light{position:absolute;inset:-12% -6% 0;pointer-events:none;
  background:
    radial-gradient(46% 42% at 14% 6%,rgba(255,255,255,.78),transparent 66%),
    radial-gradient(60% 50% at 88% 26%,rgba(247,210,160,.20),transparent 70%),
    radial-gradient(46% 40% at 30% 88%,rgba(110,217,232,.10),transparent 72%);}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -140px 130px -90px rgba(23,19,16,.30),inset 0 0 220px rgba(23,19,16,.07);}
.hero-grid{position:relative;z-index:1}
.hero-stage{transform:translateY(calc(var(--heropar,0) * -1px))}

/* the headline wipes up, line by line, from behind its own baseline */
.lines .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.12em}
.lines .ln i{display:block;font-style:normal}
html.js .lines .ln i{transform:translateY(112%);transition:transform 1.05s cubic-bezier(.16,.9,.2,1)}
html.js .lines.in .ln i{transform:none}
html.js .lines .ln:nth-child(2) i{transition-delay:.10s}
html.js .lines .ln:nth-child(3) i{transition-delay:.20s}
.lines .gold{font-weight:inherit;
  background:linear-gradient(180deg,var(--gold) 0%,#B0894C 52%,var(--gold-deep));
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.55));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lines .cel{color:var(--s-accent-deep)}

/* a lantern crosses the dark rooms with the pointer */
.cost,.vault{--lx:50%;--ly:0%}
.cost::before,.vault::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(280px circle at var(--lx) var(--ly),rgba(255,226,180,.18),rgba(110,217,232,.05) 46%,transparent 72%);
  opacity:0;transition:opacity .5s ease}
.cost.lit::before,.vault.lit::before{opacity:1}
.cost > .wrap,.vault > .wrap{position:relative;z-index:1}

/* inside a card, the parts sit at different depths */
.card h3,.card p,.card .tag{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.card h3{transform:translate3d(calc(var(--px,0) * 7px),calc(var(--py,0) * 5px),0)}
.card p{transform:translate3d(calc(var(--px,0) * 4px),calc(var(--py,0) * 3px),0)}
.card .tag{transform:translate3d(calc(var(--px,0) * 11px),calc(var(--py,0) * 7px),0)}

/* what is not built yet, said once, at full size */
.soon{margin-top:34px;display:grid;grid-template-columns:auto minmax(0,1.35fr) minmax(0,1fr);gap:26px;align-items:center;
  padding:22px 26px;border-radius:18px;
  background:linear-gradient(168deg,rgba(255,255,255,.9),rgba(241,233,220,.75));
  border:1px solid rgba(97,73,37,.24);box-shadow:var(--shadow-2)}
.soon-seal{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;text-align:center;
  border:1px solid rgba(201,164,111,.7);
  background:radial-gradient(70% 70% at 32% 26%,#FFFDF6,#EFE3CE);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 20px -14px rgba(23,19,16,.6)}
.soon-seal span{font-family:var(--caps);font-size:12px;letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--gold-deep)}
.soon-body b{display:block;font-family:var(--caps);font-size:19px;letter-spacing:var(--caps-track);color:var(--ink);margin-bottom:5px}
.soon-body p{font-size:16px;color:var(--ink-soft);max-width:52ch}
.soon-now{border-left:1px solid rgba(97,73,37,.22);padding-left:22px}
.soon-now em{display:block;font-style:normal;font-family:var(--caps);font-size:12px;letter-spacing:var(--caps-track);
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px}
.soon-now span{font-size:15.5px;color:var(--ink-soft)}

/* add-ons as a rail of plates, not a footnote */
.addons{list-style:none;margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.addons li{padding:14px 16px;border-radius:13px;background:linear-gradient(168deg,#FFFEFA,#F2EADC);
  border:1px solid rgba(97,73,37,.2);box-shadow:var(--shadow-1);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.addons li:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.addons b{display:block;font-family:var(--display);font-size:26px;color:var(--ink);line-height:1}
.addons span{display:block;margin-top:4px;font-size:14.5px;color:var(--silver-deep)}

@media (max-width:980px){
  .soon{grid-template-columns:1fr}
  .soon-now{border-left:0;border-top:1px solid rgba(97,73,37,.22);padding-left:0;padding-top:16px}
  .hero{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  html.js .lines .ln i{transform:none}
  .spine .drop{transition:none}
}

/* --- money speaks in the platform's voice (Jon 2026-09-08) -----------
   The Finance tab's candy trio, brought over unchanged from the app:
   tanentros-app/src/styles.css:2729-2739. Light lip, live body at 48%,
   deep base - clipped to the glyphs, relieved with a filter because a
   text-shadow blobs over clipped text. */
.money{
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  background-image:var(--role-money-in);
  filter:drop-shadow(0 1.5px 1px rgba(90,60,20,.28));
}
.money.free{background-image:var(--role-money-net)}
.money.word{background-image:none;-webkit-text-fill-color:var(--ink);color:var(--ink);filter:none}
.money small{-webkit-text-fill-color:var(--silver-deep);color:var(--silver-deep);
  background:none;filter:none;font-family:var(--body)}
.addons b.money{filter:drop-shadow(0 1px 1px rgba(90,60,20,.24))}


/* enterprise is written per contract, so it says so (audit W1, 2026-09-08) */
.compare td.perc{font-family:var(--caps);font-size:12.5px;letter-spacing:var(--caps-track);
  text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}

/* --- the stage: the mark holds while the ground changes under it -------
   The star is pinned across the hero AND the leak band, so the page
   travels past it and the room around it goes from pearl to vault. */
.stage{position:relative}
.stage-mark{position:sticky;top:18vh;height:0;z-index:3;pointer-events:none}
.stage-mark .hero-stage{
  position:absolute;left:5vw;top:0;width:min(38vw,460px);aspect-ratio:1;
  pointer-events:auto;
  transform:scale(var(--stagescale,1)) translateY(calc(var(--heropar,0) * -1px));
  transition:filter .6s ease;
}
.hero .hero-grid{grid-template-columns:minmax(0,1fr);padding-left:min(46vw,540px)}
.hero-mark{width:100%}

/* over the vault the mark stops borrowing daylight and lights itself */
.stage.dark .hero-halo{background:radial-gradient(closest-side,rgba(110,217,232,.55),rgba(110,217,232,.12) 58%,transparent 72%)}
.stage.dark .hero-mark::before{background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),transparent 72%)}
.stage.dark .stage-mark .hero-stage{filter:drop-shadow(0 0 26px rgba(110,217,232,.28))}

/* the leak band leaves the pinned mark its room */
.stage .cost .wrap{padding-left:min(46vw,540px)}
.stage .cost .ribbon{margin-left:0}
.stage .cost-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

@media (max-width:1100px){
  .hero .hero-grid,.stage .cost .wrap{padding-left:var(--pad)}
  .stage-mark{position:static;height:auto}
  .stage-mark .hero-stage{position:relative;left:auto;width:min(62vw,380px);margin:0 auto 28px;transform:none}
  .stage.dark .stage-mark .hero-stage{filter:none}
}

/* --- fits every width, not just mine (2026-09-08) ------------------------
   The ribbon lettering now scales off the PLATE, not the viewport, so it
   can never run off the metal when the column narrows. */
.ribbon{container-type:inline-size}
.ribbon span{font-size:clamp(11px,2.88cqw,27px)}   /* the line must clear the end gems */

@media (max-width:1100px){
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1{font-size:clamp(38px,6.4vw,64px)}
  .soon{gap:18px;padding:20px}
}

@media (max-width:820px){
  .hero{padding-block:26px 44px}
  .hero-sub{max-width:none}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .hero-meta{gap:14px;font-size:12.5px}
  .stage-mark .hero-stage{width:min(72vw,340px)}
  .addons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cost-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .soon-seal{width:64px;height:64px}
  .soon-seal span{font-size:11px}
  section{padding-block:clamp(48px,8vw,76px)}
  .tbl{max-height:64vh}
}

@media (max-width:560px){
  .plan-grid{grid-template-columns:1fr}
  .addons{grid-template-columns:1fr}
  .stage-mark .hero-stage{width:min(80vw,300px)}
  .kicker{font-size:12px;letter-spacing:.16em}
  .nav{padding-inline:16px}
  .nav-brand b{font-size:16px}
  .cost-grid{grid-template-columns:1fr}
  .vault-row{grid-template-columns:1fr}
  .proof-row{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .btn{font-size:15px;padding:13px 20px}
  .tbl{border-radius:12px}
  table{min-width:720px;font-size:14.5px}
  .addons b{font-size:23px}
}

/* the table tells you it can be dragged, on the widths where it must be */
@media (max-width:980px){
  .tbl{position:relative}
  .tbl::after{content:"";position:sticky;left:0;bottom:0;display:block;height:26px;
    background:linear-gradient(180deg,transparent,rgba(23,19,16,.10));pointer-events:none}
  .compare .lede::after{content:" — drag the table sideways to see every throne.";color:var(--gold-deep)}
}

/* ─── Move B: the leak band plays as a scene (Jon 2026-09-08) ─────────
   The ribbon arrives on rails, the four cards are dealt onto the table
   one after another, and the verdict lands last. Registered properties
   so the deal can be interpolated inside the same transform the pointer
   tilt already uses - one transform, two owners, no fight. */

@property --dx{syntax:'<length>';inherits:false;initial-value:0px}
@property --dr{syntax:'<angle>';inherits:false;initial-value:0deg}

/* the four cards, dealt */
.cost-card{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translate3d(var(--dx,0px),var(--ty,0px),0) rotate(var(--dr,0deg));
  transform-origin:18% 130%;                       /* pivots off the table edge */
}
html.js .cost-card{
  --dx:-54px;--dr:-8deg;
  transition:--dx .9s cubic-bezier(.18,.86,.22,1),--dr .9s cubic-bezier(.18,.86,.22,1),
             opacity .7s cubic-bezier(.2,.8,.2,1),translate .7s cubic-bezier(.2,.8,.2,1),
             box-shadow .24s,border-color .24s;
}
html.js .cost-card.in{--dx:0px;--dr:0deg}
html.js .cost-card:hover{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .24s}

/* the ribbon runs in on its rails, and the metal catches the light as it lands */
html.js .cost .ribbon{opacity:0;translate:-52px 0;
  transition:opacity 1s ease,translate 1s cubic-bezier(.18,.86,.22,1)}
html.js .cost .ribbon.in{opacity:1;translate:0 0}
.cost .ribbon::after{
  content:"";position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.55) 49%,transparent 58%);
  mix-blend-mode:screen;opacity:0;transform:translateX(-120%);
}
html.js .cost .ribbon.in::after{animation:rail-light 1.5s cubic-bezier(.2,.8,.2,1) .55s 1}
@keyframes rail-light{
  0%{opacity:0;transform:translateX(-120%)}
  22%{opacity:.95}
  100%{opacity:0;transform:translateX(120%)}
}

/* the verdict lands last, wiped up from behind its own line */
.cost-answer{overflow:hidden}
html.js .cost-answer > *{display:inline-block}
html.js .cost-answer{opacity:1}
html.js .cost-answer.in{animation:verdict 1s cubic-bezier(.16,.9,.2,1) .55s both}
@keyframes verdict{from{clip-path:inset(0 0 100% 0);translate:0 14px}
                   to{clip-path:inset(0 0 -12% 0);translate:0 0}}

@media (prefers-reduced-motion:reduce){
  html.js .cost-card{--dx:0px;--dr:0deg}
  html.js .cost .ribbon{opacity:1;translate:0 0}
  html.js .cost-answer.in{animation:none}
}