/* ===========================================================================
   The Crest Suite site: ONE stylesheet, every page.

   REDESIGN 2026-08-04 ("the design is locked"): the site moved from near-black
   + amber to WARM CLAY. The page is a warm tan ground; the only true black is
   the notch itself, and it does the arguing: the header notch, the seated
   display frames around every screenshot and film, the suite pricing card,
   and the closer + footer the page ends inside. Approved comp: rounds 1-4 of
   artifact 0517bf71 (site-redesign/ROLLOUT.md carries the spec).

   TOKEN COMPATIBILITY: every page and generator writes var(--bg), var(--t1),
   var(--fill) and friends, so the variable NAMES survive and their VALUES
   flipped. --bg is clay now, --t1 is warm ink, --fill is an ink tint. A page
   that reads tokens converts by itself; only hardcoded hex needs hands.

   Accent zones survive: data-accent="cobalt" (Take) / "sage" (Minutes) on a
   <section>, everything accented inside follows. Default is Crest brass. The
   hues deepened so they hold on a light ground. Never two accents in one
   component.
   =========================================================================== */

:root{
  /* grounds: page / lifted room / sunk room. One step apart, warm. */
  --bg:#C8BEAB; --bg2:#D6CDBB; --bg3:#BFB49F;
  --panel:#D6CDBB; --inset:#BDB29C;
  --notch:#0B0908;
  /* ink ladder + hairlines, all one warm ink */
  --hair:rgba(24,20,16,.2); --hair2:rgba(24,20,16,.12); --hair3:rgba(24,20,16,.32);
  --t1:rgba(24,20,16,.97); --t2:rgba(24,20,16,.7); --t3:rgba(24,20,16,.58);
  --fill:rgba(24,20,16,.06); --fill2:rgba(24,20,16,.11);
  /* on-black ladder, for the surfaces the page ends inside */
  --onb1:rgba(243,241,236,.95); --onb2:rgba(243,241,236,.62); --onb3:rgba(243,241,236,.42);
  --onb-hair:rgba(243,241,236,.14);
  /* accents: deepened for light ground. --amber keeps its NAME (pages read it)
     but is brass now; the app's true amber lives only inside the notch panel,
     scoped in notch.css. */
  --amber:#8A6606; --amber-ink:#FBF3DE;
  --green:#135A33; --red:#A63325;
  --cob:#1A66C2; --sage:#21725A; --rec:#C25348;
  --accent:var(--amber); --accent-ink:#FBF3DE;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1120px; --wide:1320px; --r:12px;
  --reading:800px; --narrow:620px;
  --spring:cubic-bezier(.32,1.18,.36,1);
  /* the redesign's two shared motion curves: calm attack, damped settle */
  --enter:cubic-bezier(.22,.8,.3,1);
  --reveal:cubic-bezier(.2,.9,.22,1);
}
[data-accent="cobalt"]{--accent:var(--cob);--accent-ink:#EEF3FC}
[data-accent="sage"]{--accent:var(--sage);--accent-ink:#EBF5F0}
[data-accent="amber"]{--accent:var(--amber);--accent-ink:var(--amber-ink)}

*{box-sizing:border-box;margin:0;padding:0}
/* `hidden` must actually hide, everywhere, forever. (2026-07-26: the stray
   sale badge, the reviews CTA, the demo's stopped timer. UA rules lose to any
   author display; this line does not.) */
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--bg);scroll-padding-top:24px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--t2);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap.wide{max-width:var(--wide)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------- sections
   Ground rhythm on clay: deep ground, .lift one step up, .sunk one step down.
   The page must end INSIDE the black: give the closer .closer-black and the
   footer follows it seamlessly. */
section{position:relative;padding:104px 0;border-top:1px solid var(--hair2)}
section:first-of-type{border-top:0}
section.lift{background:var(--bg2)}
section.sunk{background:var(--bg3)}
section.tight{padding:72px 0}
@media(max-width:700px){section{padding:76px 0}}
/* the black closer: the notch, up close. Sits flush against the footer. */
section.closer-black{background:var(--notch);border-top:0;color:var(--onb2)}
section.closer-black h1,section.closer-black h2,section.closer-black h3{color:var(--onb1)}
section.closer-black .lead,section.closer-black .sec-head p{color:var(--onb2)}
section.closer-black .eyebrow{color:var(--onb3)}
section.closer-black .fine{color:var(--onb3)}
section.closer-black .fine a{color:var(--onb2);border-bottom-color:var(--onb-hair)}
section.closer-black .fine a:hover{color:var(--onb1)}
section.closer-black .btn-primary{background:#F3F1EC;color:#181410}
section.closer-black .btn-primary:hover{background:#fff}
section.closer-black .btn-ghost{background:transparent;color:var(--onb1);border-color:rgba(243,241,236,.24)}
section.closer-black .btn-ghost:hover{background:rgba(243,241,236,.08);border-color:rgba(243,241,236,.4)}

/* An accent zone announces itself with a short tick at its top edge, not a
   full-width line: 132px of the zone's accent, 2px tall, at the content's
   left edge (centred pages centre it). */
section[data-accent]::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:min(var(--maxw),calc(100% - 48px));height:1px;background:transparent}
section[data-accent]::after{content:"";position:absolute;top:-2px;left:max(24px,calc((100% - var(--maxw)) / 2 + 24px));
  width:132px;height:2px;background:var(--accent)}
section.closer-black[data-accent]::after{display:none}

h1,h2,h3,h4{color:var(--t1);letter-spacing:-.022em;line-height:1.08;text-wrap:balance;font-weight:650}
h1{font-size:clamp(38px,6.2vw,76px);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(27px,4.2vw,42px);letter-spacing:-.03em}
h3{font-size:19px;letter-spacing:-.01em}
p{text-wrap:pretty}
.center{text-align:center}
.muted{color:var(--t2)}
.dim{color:var(--t3)}
.lead{font-size:clamp(15.5px,1.6vw,18px);color:var(--t2);max-width:62ch}
.center .lead{margin-left:auto;margin-right:auto}

.eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--t3);
  display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:16px;height:2px;border-radius:1px;background:var(--accent)}
.center .eyebrow{justify-content:center}
.sec-head{max-width:660px;margin-bottom:48px;display:flex;flex-direction:column;gap:15px}
.center .sec-head,.sec-head.center{margin-left:auto;margin-right:auto}
.sec-head p{font-size:16px;color:var(--t2)}

/* ---------------------------------------------------------------- buttons
   The redesign's commit language: pills. Primary is the notch (black, light
   text); ghost is a hairline. Both keep 44px targets. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14.5px;
  min-height:44px;padding:11px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-family:inherit;white-space:nowrap;
  transition:transform .15s ease-out,background .18s ease-out,border-color .18s ease-out,color .18s ease-out}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--notch);color:#F3F1EC}
.btn-primary:hover{background:#242220}
.btn-ghost{background:transparent;color:var(--t1);border-color:var(--hair)}
.btn-ghost:hover{background:var(--fill);border-color:var(--hair3)}
.btn-line{background:transparent;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.btn-line:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.btn-lg{min-height:50px;padding:13px 27px;font-size:15.5px}
.btn.full{width:100%}
.btn svg{width:15px;height:15px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.center .cta-row{justify-content:center}
.fine{font-size:12.5px;color:var(--t3);margin-top:15px;line-height:1.7}
.fine a{color:var(--t2);border-bottom:1px solid var(--hair);padding-bottom:1px}
.fine a:hover{color:var(--t1)}
.textlink{color:var(--accent);font-weight:600}
.textlink:hover{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------------- nav
   The header is in FLOW now (the panel pushes the page, nothing floats over
   it). suite.js still toggles .scrolled; on a static header it is a no-op. */
header{position:relative;z-index:60;border-bottom:0;background:transparent}
header.scrolled{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:18px}
.brand{display:flex;align-items:center;gap:8px;font-weight:650;font-size:15.5px;color:var(--t1);flex:none}
/* the brand mark is a miniature of the notch itself */
.brand .mark{width:16px;height:7px;border-radius:0 0 4px 4px;background:#000;border:0;position:relative}
.brand .mark::after{content:none}
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a.link{font-size:13.5px;font-weight:500;color:var(--t2);transition:color .2s;white-space:nowrap;
  padding:10px 0}
.navlinks a.link:hover,.navlinks a.link[aria-current="page"]{color:var(--t1)}
.navlinks .btn{min-height:38px;padding:8px 16px;font-size:13px}

/* narrow header: same has-navmenu contract as before (suite.js repeats these
   rules in its injected sheet for the SEO pages; change BOTH places). */
@media(max-width:860px){
  .navlinks{gap:16px}
  .navlinks .link.opt{display:none}
  .has-navmenu .navlinks .link{display:none}
  .has-navmenu .navmenu-btn{display:inline-flex}
}
@media(max-width:600px){
  .navlinks .link{display:none}
  .has-navmenu .navlinks .btn{display:none}
}
@media(max-width:360px){
  .roomact{align-items:stretch;width:100%}
  .roomact .btns .btn{white-space:normal}
}
@media(min-width:601px) and (max-width:860px){
  .navlinks{padding-right:60px}
  .has-navmenu .navlinks{padding-right:0}
}

/* the header notch (index + /crest carry the live panel inside it; other
   pages may carry the plain notchbar as a brand anchor). Real proportions,
   pure black, camera only. */
.notchbar{position:relative;z-index:6;background:#000;height:40px;width:min(232px,64vw);
  border-radius:0 0 12px 12px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transform-origin:top center;border:0;font-family:inherit;
  transition:transform .25s cubic-bezier(.3,.9,.35,1)}
.notchbar:hover,.notchbar:focus-visible{transform:scale(1.05)}
.notchbar:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.notchbar .cam{width:8px;height:8px;border-radius:50%;background:#0e1412;
  box-shadow:inset 0 0 3px rgba(150,175,205,.4)}
/* On a phone the 232px notch plus brand and menu button overflow the header
   row (measured 401px document on a 390px frame). The notch gives way first:
   it stays a flat black bar, just narrower, and the panel is fixed-position
   at these widths anyway. */
@media(max-width:640px){.notchbar{width:min(180px,44vw);height:36px}}
#panelRoom{height:0;transition:height .55s var(--reveal)}
@media(prefers-reduced-motion:reduce){#panelRoom{transition:none}}
@media(max-width:900px){#panelRoom{display:none}}

/* ------------------------------------------------------------------ hero */
.hero{padding-top:88px;padding-bottom:74px;border-top:0}
.hero.center h1{max-width:17ch;margin:20px auto 0}
/* the emphasised phrase wears a drawn ink underline (solid colour; the
   background-size trick is only there so it can animate in) */
.hero h1 em{font-style:normal;color:var(--t1);padding-bottom:4px;
  background:linear-gradient(var(--notch),var(--notch)) left bottom/100% 5px no-repeat}
@media (prefers-reduced-motion: no-preference){
  .js .hero h1 em{background-size:0% 5px}
  .js .loaded .hero h1 em{background-size:100% 5px;
    transition:background-size .8s cubic-bezier(.25,.8,.3,1) .55s}
}
.hero .lead{margin-top:22px}
.hero.center .lead{margin-top:22px}
@media(max-width:700px){.hero{padding-top:64px}}

/* --------------------------------------------------- the real-UI showcase
   A screenshot sits INSIDE a black display frame: the notch's material, a
   12px bezel, seated (never floating) shadow. */
.shot{border:0;border-radius:14px;overflow:hidden;background:var(--notch);padding:12px;
  box-shadow:0 18px 40px -28px rgba(11,9,8,.55)}
.shot img{width:100%;display:block;border-radius:7px}
.shot-cap{font-size:12px;color:var(--t3);margin-top:12px;text-align:center}
.shot-cap b{color:var(--t2);font-weight:600}
/* A film sits in the same frame; posters are dark, the ground stays black. */
.film{border:0;border-radius:14px;overflow:hidden;background:#000;padding:12px;
  box-shadow:0 18px 40px -28px rgba(11,9,8,.55);margin-top:34px;position:relative}
.film video{display:block;width:100%;height:auto;border-radius:7px;transition:opacity .2s ease}

/* the click-answering play layer (2026-08-01) is functionally untouched */
.film-play{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;
  border:0;padding:0;background:transparent;cursor:pointer;font-family:inherit;
  -webkit-appearance:none;appearance:none}
.film-ring{width:74px;height:74px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,9,8,.55);border:1px solid rgba(243,241,236,.28);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .18s var(--spring),border-color .18s ease,background .18s ease}
.film-play:hover .film-ring{transform:scale(1.05);border-color:rgba(243,241,236,.45);background:rgba(11,9,8,.7)}
.film-play:active .film-ring{transform:scale(.98)}
.film-play:focus-visible{outline:none}
.film-play:focus-visible .film-ring{border-color:#F3F1EC;box-shadow:0 0 0 3px rgba(243,241,236,.25)}
.film-tri{width:0;height:0;margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #F3F1EC}
.film-hint{font-size:12.5px;font-weight:500;color:rgba(243,241,236,.85);letter-spacing:.01em;
  text-shadow:0 1px 12px rgba(0,0,0,.85);min-height:18px}
.film-loading video{opacity:.4}
.film-loading .film-tri{display:none}
.film-loading .film-ring{background:rgba(11,9,8,.7)}
.film-loading .film-ring::after{content:"";width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(243,241,236,.2);border-top-color:#F3F1EC;
  animation:filmspin .8s linear infinite}
@keyframes filmspin{to{transform:rotate(360deg)}}
.film-on .film-play,.film-failed .film-play{display:none}
.film-note{position:absolute;left:0;right:0;bottom:14px;z-index:3;margin:0;text-align:center;
  font-size:12.5px;line-height:1.5;color:rgba(243,241,236,.8);text-shadow:0 1px 12px rgba(0,0,0,.85);
  padding:0 16px}
.film-note[hidden]{display:none}
.film-failed .film-note{top:50%;bottom:auto;transform:translateY(-50%)}
.film-esc{color:#F3F1EC;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .film-ring{transition:none}
  .film-play:hover .film-ring{transform:none}
  .film-loading .film-ring::after{animation-duration:2.4s}
}
.showcase{margin-top:52px}
.showcase.bleed{max-width:var(--wide)}

.band{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:center}
.band.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.band.flip .band-copy{order:2}
.band.flip .band-art{order:1}
.band + .band{margin-top:clamp(64px,9vw,112px)}
@media(max-width:900px){
  .band,.band.flip{grid-template-columns:1fr;gap:32px}
  .band.flip .band-copy{order:1}.band.flip .band-art{order:2}
}
.band-copy h2{margin-top:14px}
.band-copy .lead{margin-top:16px}

/* Feature bullets: an ink-black check circle, white tick. Accent stays on the
   zone tick and buttons, not sprinkled on every claim. */
.checks{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:26px}
.checks li{position:relative;padding-left:29px;font-size:14.5px;color:var(--t2);line-height:1.55}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;
  background:var(--notch);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px}
.checks li b{color:var(--t1);font-weight:600}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;gap:1px;background:var(--hair2);border:1px solid var(--hair2);border-radius:14px;overflow:hidden}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid > *{background:var(--bg2);padding:26px 24px}
section.lift .grid > *{background:var(--bg)}
@media(max-width:940px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}
  .grid.c3 > :last-child{grid-column:1/-1}}
@media(max-width:640px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
.card h3{font-size:16px;margin-bottom:9px}
.card p{font-size:13.8px;color:var(--t2);line-height:1.62}
.card .ico{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.7;margin-bottom:14px}

/* -------------------------------------------------------------- the table */
.tblwrap{overflow-x:auto;border:1px solid var(--hair2);border-radius:14px;-webkit-overflow-scrolling:touch;
  background:var(--bg2)}
table.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:600px}
table.cmp th,table.cmp td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--hair2);vertical-align:top}
table.cmp thead th{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);background:var(--inset);white-space:nowrap;position:sticky;top:0}
table.cmp thead th.us{color:var(--accent)}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp td:first-child{color:var(--t1);font-weight:550;width:34%}
table.cmp td.us{color:var(--t1);background:color-mix(in srgb,var(--accent) 7%,transparent)}
table.cmp .yes{color:var(--green);font-weight:600}
table.cmp .no{color:var(--t3)}
table.cmp .part{color:var(--amber)}
.cmp-note{font-size:12px;color:var(--t3);margin-top:14px;line-height:1.65}

/* ------------------------------------------------------------- pricing
   Light cards on hairlines; the SUITE card is the notch itself: black,
   inverted, and the only black card on the page. */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
@media(max-width:980px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.plans{grid-template-columns:1fr}}
.plans.plans-3{grid-template-columns:repeat(3,1fr);max-width:880px;margin-inline:auto}
.plans.plans-2{grid-template-columns:repeat(2,1fr);max-width:680px;margin-inline:auto}
@media(max-width:860px){.plans.plans-3{grid-template-columns:1fr 1fr}
  .plans.plans-3 > .plan:last-child{grid-column:1/-1}}
@media(max-width:580px){.plans.plans-3,.plans.plans-2{grid-template-columns:1fr}}
.plan{border:1px solid var(--hair);border-radius:14px;padding:26px 22px 24px;background:var(--bg2);
  display:flex;flex-direction:column;gap:12px;position:relative;
  transition:transform .2s ease-out,border-color .2s ease-out}
.plan:hover{transform:translateY(-3px);border-color:var(--hair3)}
@media(prefers-reduced-motion:reduce){.plan{transition:none}.plan:hover{transform:none}}
.plan.hero-plan{border-color:var(--notch);background:var(--notch)}
.plan.hero-plan h3{color:var(--onb1)}
.plan.hero-plan .amt{color:var(--onb1)}
.plan.hero-plan .amt small{color:var(--onb3)}
.plan.hero-plan .desc{color:var(--onb2)}
.plan.hero-plan .why{color:var(--onb3)}
.plan.hero-plan .tryline{color:var(--onb3)}
.plan.hero-plan .tryline a{color:var(--onb2);border-bottom-color:var(--onb-hair)}
.plan.hero-plan .owned{color:#5FBF7F}
.plan.hero-plan .btn-primary{background:#F3F1EC;color:#181410}
.plan.hero-plan .btn-primary:hover{background:#fff}
.plan.hero-plan .btn-ghost{color:var(--onb1);border-color:rgba(243,241,236,.24)}
.plan.hero-plan .btn-ghost:hover{background:rgba(243,241,236,.08)}
.plan .tag{position:absolute;top:-1px;right:16px;transform:translateY(-50%);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--amber);color:var(--amber-ink);padding:4px 9px;border-radius:999px}
.plan h3{font-size:16.5px}
/* thin numerals, the app's own doctrine */
.plan .amt{font-size:40px;font-weight:420;color:var(--t1);letter-spacing:-.028em;line-height:1;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:7px}
.plan .amt small{font-size:12.5px;font-weight:500;color:var(--t3);letter-spacing:0}
.plan .desc{font-size:13.4px;color:var(--t2);flex:1;line-height:1.6}
.plan .why{font-size:12px;color:var(--t3);line-height:1.6}
.plan .btn{margin-top:2px}
.plan .owned{font-size:12px;color:var(--green);font-weight:600}
.tryline{font-size:12px;color:var(--t3);text-align:center;margin-top:2px}
.tryline a{color:var(--t2);border-bottom:1px solid var(--hair)}
.tryline a:hover{color:var(--t1)}

/* ---------------------------------------------------------------- FAQ */
.faq{max-width:800px;margin:0 auto}
.faq details{border-bottom:1px solid var(--hair2)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:16px;color:var(--t1);
  font-weight:550;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:29px;width:9px;height:9px;
  border-right:1.6px solid var(--t3);border-bottom:1.6px solid var(--t3);transform:rotate(45deg);
  transition:transform .2s var(--spring)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 0 22px;font-size:14.5px;color:var(--t2);max-width:70ch}

/* -------------------------------------------------------------- modals
   The card is a lifted clay surface now; the scrim stays dark. */
.modal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;
  background:rgba(11,9,8,.6);padding:20px}
.modal[hidden]{display:none}
.modal-card{width:min(92vw,430px);background:#E3DCCD;border:1px solid var(--hair);border-radius:16px;
  padding:28px 26px;position:relative;box-shadow:0 40px 90px -30px rgba(11,9,8,.6)}
.modal-card h3{font-size:19px;margin-bottom:8px}
.modal-card p{font-size:13.5px;color:var(--t2);margin-bottom:16px;line-height:1.6}
.modal-x{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--t3);
  font-size:23px;cursor:pointer;line-height:1;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center}
.modal-x:hover{color:var(--t1)}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;color:var(--t3);margin-bottom:6px;font-weight:550}
input[type=email],input[type=password],input[type=text],textarea{width:100%;background:rgba(255,255,255,.5);
  border:1px solid var(--hair);border-radius:9px;padding:12px 14px;color:var(--t1);
  font:inherit;font-size:14.5px;outline:none;transition:border-color .16s}
input:focus,textarea:focus{border-color:var(--t1)}
textarea{resize:vertical;min-height:96px}
input.locked{color:var(--t2);background:rgba(24,20,16,.05);cursor:default}
input.locked:focus{border-color:var(--hair)}
.colink{display:block;margin:9px 0 0;padding:0;background:none;border:0;
  font:inherit;font-size:12.5px;color:var(--accent);cursor:pointer;text-align:left}
.colink:hover{text-decoration:underline;text-underline-offset:3px}
.err{display:block;color:var(--red);font-size:12.5px;min-height:16px;margin:8px 0 2px;line-height:1.45}
.ok-note{color:var(--green)}
.hintline{font-size:11.5px;color:var(--t3);margin-top:12px;text-align:center;line-height:1.6}

/* -------------------------------------------------------------- footer
   The page ends inside the notch. */
footer{border-top:0;padding:60px 0 46px;background:var(--notch);color:var(--onb2)}
.foot{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.foot .brand{color:var(--onb1)}
.foot .brand .mark{background:#000;outline:1px solid rgba(243,241,236,.2);outline-offset:0}
.foot-cols{display:flex;flex-wrap:wrap;gap:52px}
.foot-col{display:flex;flex-direction:column;gap:11px;min-width:110px}
.foot-col b{font-size:11px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--onb3);font-weight:600}
.foot-col a{font-size:13.5px;color:var(--onb2)}
.foot-col a:hover{color:var(--onb1)}
.foot-tail{margin-top:42px;padding-top:24px;border-top:1px solid var(--onb-hair);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12.5px;color:var(--onb3)}
footer p{color:var(--onb3)}

/* ------------------------------------------------------------- motion
   Fails OPEN twice over: the html.js gate (no script, no hidden page) and
   prefers-reduced-motion. .rv = single reveal; .rv.shot = a display frame
   rising and seating; .rvg = a grid whose children stagger (suite.js sets
   80ms delays); .in + .d2-.d5 = the hero's load sequence. */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease-out,transform .6s var(--enter)}
.js .rv.in{opacity:1;transform:none}
.js .rv.shot{transform:translateY(22px) scale(.985)}
.js .rv.shot.in{transform:none}
@media (prefers-reduced-motion: no-preference){
  .js .rvg>*{opacity:0;transform:translateY(14px)}
  .js .rvg.in>*{opacity:1;transform:none;
    transition:opacity .55s ease-out,transform .55s var(--enter)}
  .js .seq{opacity:0;transform:translateY(16px)}
  .js .loaded .seq{opacity:1;transform:translateY(0);
    transition:opacity .6s ease-out,transform .6s var(--enter)}
  .js .loaded .seq.d2{transition-delay:.08s}
  .js .loaded .seq.d3{transition-delay:.16s}
  .js .loaded .seq.d4{transition-delay:.26s}
  .js .loaded .seq.d5{transition-delay:.36s}
}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* -------------------------------------------------------------- toast
   Toasts are notch-material: small black chips over the clay page. */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);
  background:var(--notch);border:1px solid rgba(243,241,236,.16);border-radius:10px;padding:11px 18px;
  font-size:13.5px;color:var(--onb1);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:300}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------------------------------------------------------- misc */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:4px 11px}
.rule{height:1px;background:var(--hair2);border:0;margin:0}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.navlinks .nav-app{display:inline-flex;align-items:center;gap:7px}
.navlinks .nav-app .sq{width:6px;height:6px;border-radius:2px;flex:none}