/*
  SENSA — MARKETING SITE
  ======================

  The palette, the typefaces and the spacing are the PRODUCT'S OWN, lifted from
  web/src/styles/tokens.css rather than invented for the website. A spa owner who signs up
  should recognise the console when they first open it; a site that promises one aesthetic and
  delivers another has spent its credibility before the trial starts.

    --ink        #131E1A   the console's dark ground
    --cream      #F5F1EC   its light ground, and this site's paper
    --gold       #C49A6C   the accent, used sparingly and never as a large fill
    --sage       #8AA294   the secondary, for supporting marks
    Playfair Display / Inter — the console's serif and sans

  No framework, no build step, no JavaScript required to read anything. Every word on this page
  is in the HTML, which is what makes it fast, indexable, and legible to the answer engines that
  increasingly stand between a spa owner and a search box.
*/

:root {
  --ink: #131E1A;
  --ink-2: #1E2F29;
  --ink-3: #2B4038;
  --cream: #F5F1EC;
  --cream-2: #EFEAE2;
  --paper: #FFFFFF;
  --gold: #C49A6C;
  --gold-deep: #A87F52;
  --sage: #8AA294;
  --amber: #D9A85F;

  --text: #1E2F29;
  --text-2: #55655C;
  --text-3: #7E8C84;
  --line: rgba(30, 47, 41, .13);
  --line-2: rgba(30, 47, 41, .2);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(64px, 9vw, 128px);

  --shadow-sm: 0 2px 8px -2px rgba(19, 30, 26, .1);
  --shadow: 0 18px 44px -20px rgba(19, 30, 26, .28);
  --shadow-lg: 0 40px 90px -40px rgba(19, 30, 26, .45);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.01em; }
h4 { font-size: 1.06rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0; line-height: 1.4; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }

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

/* ── Layout ─────────────────────────────────────────────────────────────────── */

.wrap { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }
.narrow { width: min(760px, 100%); }
.section { padding-block: var(--section); }
.stack { display: grid; gap: 20px; }
.lede { font-size: clamp(1.06rem, 1.6vw, 1.25rem); color: var(--text-2); max-width: var(--measure); line-height: 1.62; }

.eyebrow {
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.on-dark .eyebrow { color: var(--gold); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── Skip link ──────────────────────────────────────────────────────────────── */

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 0 0 var(--r-md) 0;
  font-weight: 600; text-decoration: none;
}
.skip:focus { inset-inline-start: 0; }

/* ── Header ─────────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 15px; }

.brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 1.45rem; letter-spacing: -.02em; color: var(--ink); }
.brand__mark { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); flex: none; transform: translateY(-2px); }
.brand__sub { font-family: var(--sans); font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }

.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { text-decoration: none; font-size: .93rem; color: var(--text-2); font-weight: 500; transition: color .15s; }
.site-nav a:hover { color: var(--ink); }
@media (max-width: 900px) { .site-nav__links { display: none; } }

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: .95rem; font-weight: 600; line-height: 1;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s, color .16s;
}
.btn--primary { background: var(--ink); color: var(--cream); box-shadow: var(--shadow-sm); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { transform: translateY(-2px); background: var(--gold-deep); color: var(--cream); }
.btn--ghost { border-color: var(--line-2); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.on-dark .btn--ghost, .hero .btn--ghost { border-color: rgba(245,241,236,.3); color: var(--cream); }
.on-dark .btn--ghost:hover, .hero .btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--sm { padding: 10px 18px; font-size: .88rem; }

/* ── Dark sections ──────────────────────────────────────────────────────────── */

.on-dark { background: var(--ink); color: var(--cream); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--cream); }
.on-dark .lede { color: rgba(245, 241, 236, .72); }
.on-dark .rule { background: rgba(245, 241, 236, .14); }

/* ── Hero ───────────────────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, #131E1A 0%, #1E2F29 46%, #2B4038 100%);
  color: var(--cream);
  padding-block: clamp(72px, 11vw, 140px) clamp(64px, 9vw, 116px);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1000px 520px at 78% 8%, rgba(196,154,108,.17), transparent 62%);
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(44px, 6vw, 80px); align-items: center; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { color: var(--cream); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__lede { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: rgba(245,241,236,.76); max-width: 56ch; margin-top: 22px; line-height: 1.6; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.hero__note { margin-top: 18px; font-size: .87rem; color: rgba(245,241,236,.52); }

.hero__stats { display: flex; flex-wrap: wrap; gap: 30px 44px; margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(196,154,108,.28); }
.stat__n { font-family: var(--serif); font-size: 1.95rem; color: var(--gold); line-height: 1; }
.stat__l { font-size: .8rem; color: rgba(245,241,236,.62); margin-top: 7px; letter-spacing: .01em; }

/* ── Product visuals ────────────────────────────────────────────────────────── */

.shot {
  background: var(--ink-2);
  border: 1px solid rgba(196,154,108,.22);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-size: 13px;
  color: var(--cream);
}
.shot--light { background: var(--paper); color: var(--text); border-color: var(--line); }

.shot__bar { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-bottom: 1px solid rgba(245,241,236,.1); background: rgba(0,0,0,.16); }
.shot--light .shot__bar { border-color: var(--line); background: var(--cream-2); }
.shot__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(245,241,236,.22); flex: none; }
.shot--light .shot__dot { background: var(--line-2); }
.shot__title { margin-inline-start: 8px; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(245,241,236,.5); font-weight: 600; }
.shot--light .shot__title { color: var(--text-3); }
.shot__body { padding: 18px 19px 21px; }

.shot__h { font-family: var(--serif); font-size: 1.32rem; letter-spacing: -.01em; }
.shot__sub { font-size: .78rem; color: rgba(245,241,236,.55); margin-top: 4px; }
.shot--light .shot__sub { color: var(--text-3); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.chip { font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(245,241,236,.18); color: rgba(245,241,236,.72); }
.chip[aria-current] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.shot--light .chip { border-color: var(--line-2); color: var(--text-2); }
.shot--light .chip[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.rows { margin-top: 16px; display: grid; gap: 1px; background: rgba(245,241,236,.09); border: 1px solid rgba(245,241,236,.09); border-radius: var(--r-md); overflow: hidden; }
.shot--light .rows { background: var(--line); border-color: var(--line); }
.row { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; background: var(--ink-2); }
.shot--light .row { background: var(--paper); }
.row__t { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--gold); font-weight: 600; }
.row__n { display: block; font-weight: 600; font-size: .87rem; }
.row__m { display: block; font-size: .74rem; color: rgba(245,241,236,.5); margin-top: 2px; }
.shot--light .row__m { color: var(--text-3); }
.pill { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.pill--ok { background: rgba(138,162,148,.2); color: #A9C0B2; }
.pill--wait { background: rgba(217,168,95,.18); color: var(--amber); }
.pill--done { background: rgba(196,154,108,.16); color: var(--gold); }
.shot--light .pill--ok { background: rgba(90,130,105,.14); color: #3F6A52; }
.shot--light .pill--wait { background: rgba(180,130,40,.14); color: #8A6420; }
.shot--light .pill--done { background: rgba(168,127,82,.14); color: var(--gold-deep); }

.ledger { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .82rem; }
.ledger th { text-align: start; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); font-weight: 650; padding: 0 0 9px; border-bottom: 1px solid var(--line); }
.ledger td { padding: 9px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ledger td:last-child, .ledger th:last-child { text-align: end; }
.ledger tr:last-child td { border-bottom: 0; font-weight: 700; }
.ledger .acct { color: var(--text-3); font-size: .74rem; }

/* ── Cards & grids ──────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: .96rem; }
.on-dark .card { background: rgba(245,241,236,.045); border-color: rgba(245,241,236,.12); box-shadow: none; }
.on-dark .card p { color: rgba(245,241,236,.68); }

.card__n { font-family: var(--serif); font-size: .95rem; color: var(--gold-deep); margin-bottom: 12px; letter-spacing: .04em; }
.on-dark .card__n { color: var(--gold); }

/* ── Priority spine ─────────────────────────────────────────────────────────── */

.pri { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 54px); align-items: start; }
@media (max-width: 760px) { .pri { grid-template-columns: 1fr; gap: 16px; } }
.pri + .pri { margin-top: clamp(48px, 6vw, 82px); padding-top: clamp(48px, 6vw, 82px); border-top: 1px solid var(--line); }
.pri__num { font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: .82; color: var(--gold); opacity: .5; }
.pri__body > * + * { margin-top: 16px; }

.ticks { display: grid; gap: 11px; margin-top: 20px; }
.ticks li { list-style: none; display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 12px; align-items: start; font-size: .96rem; color: var(--text-2); }
.ticks svg { margin-top: 5px; color: var(--gold-deep); }
.on-dark .ticks li { color: rgba(245,241,236,.72); }
.on-dark .ticks svg { color: var(--gold); }

/* ── Scenarios ──────────────────────────────────────────────────────────────── */

.scene { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.scene__head { padding: 22px 24px 0; }
.scene__tag { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-deep); }
.scene h3 { margin: 9px 0 0; }
.scene__body { padding: 14px 24px 22px; color: var(--text-2); font-size: .95rem; flex: 1; }
.scene__body p + p { margin-top: 11px; }
.scene__foot { margin-top: auto; padding: 15px 24px; background: var(--cream-2); border-top: 1px solid var(--line); font-size: .87rem; }
.scene__foot strong { color: var(--ink); }

/* ── Measurement table ──────────────────────────────────────────────────────── */

.metrics { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: .94rem; }
.metrics caption { text-align: start; color: var(--text-3); font-size: .86rem; padding-bottom: 12px; }
.metrics th { text-align: start; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 650; padding: 0 14px 11px 0; border-bottom: 1px solid var(--line-2); }
.metrics td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.metrics td:first-child { color: var(--text); font-weight: 600; width: 30%; }
.metrics tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* ── Modules ────────────────────────────────────────────────────────────────── */

.mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 30px; }
.mod { background: var(--paper); padding: 22px 22px 24px; }
.mod h4 { margin-bottom: 7px; }
.mod p { font-size: .89rem; color: var(--text-2); line-height: 1.55; }
.mod__g { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 9px; }

/* ── FAQ ────────────────────────────────────────────────────────────────────── */

.faq { margin-top: 30px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 21px 44px 21px 0; position: relative;
  font-family: var(--serif); font-size: 1.16rem; letter-spacing: -.01em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; inset-inline-end: 8px; top: 50%; width: 11px; height: 11px;
  border-inline-end: 2px solid var(--gold-deep); border-block-end: 2px solid var(--gold-deep);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.faq .faq__a { padding: 0 0 22px; color: var(--text-2); max-width: var(--measure); }
.faq .faq__a p + p { margin-top: 12px; }

/* ── CTA ────────────────────────────────────────────────────────────────────── */

.cta { text-align: center; }
.cta h2 { max-width: 20ch; margin-inline: auto; }
.cta .lede { margin-inline: auto; text-align: center; }
.cta__row { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 32px; }

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.site-foot { background: var(--ink); color: rgba(245,241,236,.66); padding-block: 58px 34px; font-size: .9rem; }
.site-foot a { color: rgba(245,241,236,.66); text-decoration: none; }
.site-foot a:hover { color: var(--gold); }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__h { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 14px; }
.foot__grid ul { display: grid; gap: 9px; list-style: none; }
.foot__bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(245,241,236,.13); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: .84rem; color: rgba(245,241,236,.46); }
.site-foot .brand { color: var(--cream); }

/* ── Utility ────────────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ── Interior page hero ─────────────────────────────────────────────────────── */

.page-hero { padding-block: clamp(52px, 8vw, 96px) clamp(30px, 4vw, 52px); }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); max-width: 20ch; }
.page-hero .lede { max-width: 62ch; }

/* ── Inline "read more" link ────────────────────────────────────────────────── */

.link-more { color: var(--gold-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.link-more:hover { border-bottom-color: var(--gold-deep); }
.on-dark .link-more { color: var(--gold); }
.on-dark .link-more:hover { border-bottom-color: var(--gold); }

.mod h4 a, .scene h3 a, .card h3 a { color: inherit; text-decoration: none; }
.mod h4 a:hover, .scene h3 a:hover, .card h3 a:hover { color: var(--gold-deep); }

/* ── Long-form article & legal ──────────────────────────────────────────────── */

.article h2, .legal h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-top: 42px; }
.article h3, .legal h3 { margin-top: 30px; }
.article p, .legal p { color: var(--text-2); max-width: var(--measure); }
.legal p + p { margin-top: 14px; }
.legal h2 + p { margin-top: 12px; }
.legal code { font-size: .9em; background: var(--cream-2); padding: 2px 6px; border-radius: 4px; }
.article a:not(.btn):not(.link-more), .legal a:not(.btn):not(.link-more) { color: var(--gold-deep); text-underline-offset: 3px; }

.bullets, .numbered { max-width: var(--measure); display: grid; gap: 12px; padding-inline-start: 22px; }
.bullets li, .numbered li { color: var(--text-2); }
.bullets { list-style: disc; }
.numbered { list-style: decimal; }
.bullets li::marker, .numbered li::marker { color: var(--gold-deep); }

.formula {
  font-family: var(--serif); font-size: 1.16rem; color: var(--ink);
  background: var(--cream-2); border-inline-start: 3px solid var(--gold);
  padding: 16px 20px; border-radius: 0 var(--r-md) var(--r-md) 0; max-width: var(--measure);
}

/* ── Changelog ──────────────────────────────────────────────────────────────── */

.release + .release { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line); }
.release__date { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 10px; }

/* ── Footer: five columns plus the about block ──────────────────────────────── */

.foot__grid--wide { grid-template-columns: 1.5fr repeat(5, 1fr); gap: 30px; }
@media (max-width: 1080px) { .foot__grid--wide { grid-template-columns: 1fr 1fr 1fr; } .foot__about { grid-column: 1 / -1; } }
@media (max-width: 620px) { .foot__grid--wide { grid-template-columns: 1fr 1fr; } }

/* ── Header nav links wrapper ───────────────────────────────────────────────── */

.site-nav__links { display: flex; align-items: center; gap: 26px; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) { .site-nav__links { display: none; } }

/*
  Two doors, not one. There is no free trial: a visitor either signs in or registers,
  so both belong in the header. Sign up is the filled one because it is the action the
  page is arguing for; Sign in is quiet because the people who need it already know
  where it is.
*/
.site-nav__cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-nav__cta .btn { white-space: nowrap; }

/* Below the links breakpoint the two buttons are the whole nav, so give them room. */
@media (max-width: 560px) {
  .site-head__inner { gap: 12px; }
  .site-nav__cta { gap: 6px; }
  .site-nav__cta .btn--sm { padding: 9px 13px; font-size: .82rem; }
  .brand__sub { display: none; }
}

/* ── Social bio landing page ────────────────────────────────────────────────── */

/*
  FLEX, NOT `display:grid; place-items:center`.

  The grid version overflowed a 430px phone. `place-items: center` leaves the implicit column
  auto-sized, an auto column sizes to its content's max-content width, and a child at
  `width: 100%` then resolves against THAT rather than against the viewport — so the card stack
  grew wider than the screen and the tagline was clipped mid-sentence. Flex centring sizes the
  item against the line, which is what was wanted.
*/
.bio {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(168deg, #131E1A 0%, #1E2F29 52%, #2B4038 100%);
  color: var(--cream); text-align: center;
}
.bio__inner { width: 100%; max-width: 430px; }
.bio__mark { width: 54px; height: 54px; border-radius: 50%; background: var(--gold); margin: 0 auto 20px; }
.bio__name { font-size: 2.5rem; color: var(--cream); }
.bio__tag { margin-top: 12px; color: rgba(245,241,236,.72); font-size: .96rem; line-height: 1.55; }
.bio__links { display: grid; gap: 11px; margin-top: 32px; }
.bio__link {
  display: block; text-decoration: none; padding: 15px 18px; border-radius: var(--r-md);
  border: 1px solid rgba(245,241,236,.22); color: var(--cream);
  transition: transform .15s cubic-bezier(.2,.7,.3,1), background .15s, border-color .15s;
}
.bio__link:hover { transform: translateY(-2px); border-color: var(--gold); }
.bio__link--primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.bio__link--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--cream); }
.bio__label { display: block; font-weight: 650; font-size: 1rem; }
.bio__sub { display: block; font-size: .82rem; opacity: .72; margin-top: 3px; }
.bio__foot { margin-top: 34px; font-size: .85rem; color: rgba(245,241,236,.5); line-height: 1.8; }
.bio__foot a { color: rgba(245,241,236,.68); }

/* ── Card/module title ──────────────────────────────────────────────────────────
   Semantically an <h3> so the document outline never skips a level, visually the
   compact sans label it has always been. The heading LEVEL is about structure; the
   size is about hierarchy on screen, and the two do not have to agree. */

.ttl {
  font-family: var(--sans); font-size: 1.06rem; font-weight: 650;
  letter-spacing: 0; line-height: 1.4; margin-bottom: 7px;
}
.card .ttl { margin-bottom: 10px; }

/* ── Comparison table (why-sensa) ───────────────────────────────────────────── */

.compare { width: 100%; border-collapse: collapse; margin-top: 30px; font-size: .95rem; }
.compare th {
  text-align: start; font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; padding: 0 18px 12px 0; border-bottom: 2px solid var(--line-2);
}
.compare th:last-child { color: var(--gold-deep); }
.compare td { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.compare td:first-child { color: var(--ink); font-weight: 600; width: 26%; }
.compare td:last-child { color: var(--ink); }
.compare tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) { .compare { min-width: 640px; } }

/* ── Moments grid ───────────────────────────────────────────────────────────── */

.moments { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.moment { background: var(--paper); padding: 22px 22px 24px; }
.moment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.moment__kind { font-family: var(--sans); font-weight: 700; font-size: .97rem; color: var(--ink); }
.moment__meta { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); font-weight: 650; }
.moment__feel { color: var(--text-2); font-size: .93rem; line-height: 1.58; }

/* ── Platform: module contents nav ──────────────────────────────────────────── */

.modnav { display: flex; flex-wrap: wrap; gap: 8px; }
.modnav a {
  font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--text-2);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 15px; transition: all .15s;
}
.modnav a:hover { border-color: var(--ink); color: var(--ink); }

/* ── Platform: a module block and its function tables ───────────────────────── */

.mblock { margin-top: 46px; scroll-margin-top: 90px; }
.mblock + .mblock { margin-top: 56px; padding-top: 52px; border-top: 1px solid var(--line); }
.mblock__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.mblock__head h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.mblock__head h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold); }
.mblock__head h3 a:hover { color: var(--gold-deep); }
.mblock__promise { margin-top: 7px; color: var(--text-2); font-size: 1.02rem; max-width: 56ch; }
.mblock__who {
  font-size: .71rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 700;
  color: var(--gold-deep); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 13px; white-space: nowrap;
}

.submod { margin-top: 26px; }
.submod__name {
  font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;
}

.fns { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fns th {
  text-align: start; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650; padding: 0 16px 10px 0; border-bottom: 1px solid var(--line-2);
}
.fns td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.fns td:first-child { color: var(--ink); font-weight: 600; width: 26%; }
.fns__feel { color: var(--gold-deep); font-style: italic; width: 32%; }
.fns tr:last-child td { border-bottom: 0; }
@media (max-width: 860px) { .fns { min-width: 720px; } }

/* ── Price on a plan card ───────────────────────────────────────────────────── */

.price { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--ink); margin-top: 12px; letter-spacing: -.02em; }
.price__per { font-family: var(--sans); font-size: .92rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.price__alt { margin-top: 8px; font-size: .92rem; color: var(--gold-deep); font-weight: 600; }

/* ══ MOTION ═══════════════════════════════════════════════════════════════════
   Every rule that HIDES something is scoped to .js, which enhance.js adds. With
   the script blocked, nothing below applies and the page is simply static — which
   is what keeps it crawlable and keeps a dropped request from blanking a section.
*/

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* A reader who has asked for less motion gets none of it, not a faster version. */
.reduced-motion [data-reveal],
.reduced-motion [data-reveal].is-in { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Hero: the product surface sits in space ────────────────────────────────── */

.stage { perspective: 1400px; }
.stage .shot {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
  transform-style: preserve-3d;
}
.js .hero .stage .shot { animation: shot-in 900ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes shot-in {
  from { opacity: 0; transform: translateY(26px) rotateX(6deg) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* A slow drift across the hero's gold wash, so the ground is never quite static. */
.js .hero::after { animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}

/* The live dot on the arrivals card — the one thing on the page that says "now". */
.pulse { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.js .pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(138,162,148,.7); animation: pulse-out 2.4s ease-out infinite;
}
@keyframes pulse-out {
  to { box-shadow: 0 0 0 12px rgba(138,162,148,0); }
}

/* ── Cards lift, tables do not ──────────────────────────────────────────────── */

.card, .scene, .moment { transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s; }
.card:hover, .scene:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.moment:hover { background: var(--cream-2); }

/* ── Bar chart in the revenue visual ────────────────────────────────────────── */

.bars { display: grid; gap: 10px; margin-top: 16px; }
.bar { display: grid; grid-template-columns: 62px minmax(0,1fr) 44px; gap: 10px; align-items: center; font-size: .78rem; }
.bar__l { color: rgba(245,241,236,.72); }
.bar__t { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2, #D6B99A)); width: var(--v); }
.js [data-reveal].is-in .bar__t { animation: bar-grow .8s cubic-bezier(.2,.7,.3,1) both; }
@keyframes bar-grow { from { width: 0; } to { width: var(--v); } }
.bar__v { text-align: end; font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 650; }
.shot--light .bar__l { color: var(--text-2); }

/* ── Gantt strip in the scheduler visual ────────────────────────────────────── */

.gantt { display: grid; gap: 8px; margin-top: 16px; }
.gantt__row { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; height: 30px; }
.gantt__l { font-size: .74rem; color: rgba(245,241,236,.6); }
.gantt__row > .gantt__b, .gantt__row > .gantt__gap {
  position: absolute; inset-block: 4px; inset-inline-start: calc(58px + var(--s));
  width: var(--w); border-radius: var(--r-sm);
}
.gantt__b {
  background: rgba(196,154,108,.24); border: 1px solid rgba(196,154,108,.5);
  font-size: .68rem; color: var(--cream); padding: 0 8px; line-height: 22px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gantt__b--free { background: rgba(138,162,148,.2); border-color: rgba(138,162,148,.55); color: #BFD3C6; }
.gantt__gap { background: var(--hatch, repeating-linear-gradient(135deg, rgba(245,241,236,.12) 0 2px, transparent 2px 6px)); border-radius: 3px; }

/* ── A note under a product visual ──────────────────────────────────────────── */

.shot__note { margin-top: 12px; font-size: .74rem; color: rgba(245,241,236,.5); }
.shot--light .shot__note { color: var(--text-3); }
.chip--gold { border-color: var(--gold); color: var(--gold); }

/* ── Figure resets, since the shots are <figure> now ────────────────────────── */

figure.shot { margin: 0; }

/* ── A visual paired with prose ─────────────────────────────────────────────── */

.pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(30px,4.5vw,64px); align-items: center; }
.pair--flip > *:first-child { order: 2; }
@media (max-width: 900px) { .pair, .pair--flip { grid-template-columns: 1fr; } .pair--flip > *:first-child { order: 0; } }
.pair + .pair { margin-top: clamp(52px, 7vw, 96px); }

/* A product visual closing a priority section. Indented to the body's column so it reads as
   evidence for the paragraph above rather than as a new topic. */
.pri__shot { margin-top: 26px; max-width: 620px; }

/* A visual introduced by a section heading, before the cards that explain it. */
.section__shot { margin-top: 30px; max-width: 680px; }

/* ── Recall ladder ──────────────────────────────────────────────────────────── */

.ladder { display: grid; gap: 0; margin-top: 16px; }
.ladder__step {
  display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 12px; align-items: baseline;
  padding: 12px 0 12px 16px; position: relative; border-inline-start: 2px solid rgba(196,154,108,.35);
}
.ladder__step::before {
  content: ''; position: absolute; inset-inline-start: -6px; top: 17px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
}
.ladder__step--last { border-inline-start-color: transparent; }
.ladder__d { font-weight: 700; font-size: .82rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.ladder__t { font-size: .84rem; color: rgba(245,241,236,.74); }
.shot--light .ladder__t { color: var(--text-2); }

/* ── Slot picker ────────────────────────────────────────────────────────────── */

.slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.slot {
  display: inline-grid; gap: 2px; padding: 9px 13px; border-radius: var(--r-sm);
  border: 1px solid rgba(245,241,236,.2); font-size: .84rem; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--cream);
}
.slot em { font-style: normal; font-size: .68rem; font-weight: 500; opacity: .66; }
.slot--best { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.slot--gone { opacity: .3; text-decoration: line-through; }