/* ================= Clockwork design system =================
   Three voices, kept strictly apart:
     display = Newsreader 200-400 (never bold)
     ui      = Inter 300-500
     data    = IBM Plex Mono, uppercase, wide tracking, 10-12px
   Colour appears ONLY as full-bleed blocks. Never an inline accent,
   never on text below 18px. Elevation by colour step, never shadow.
============================================================ */
:root{
  --obsidian:#0F1011; --graphite:#1C1D1E; --steel:#2E2F30; --silver:#CACACA;
  --pure:#FFFFFF; --cloud:#F5F5F7; --ash:#9F9FA0; --fog:#6A6B6B; --void:#000000;
  --ink:#0B0F14;
  /* accent + its complement. FULL-BLEED TILES ONLY — never inline, never on
     text under 18px. Both are light enough that tile type must be near-black:
     white on mint is 1.41:1 (invisible), white on rose is 4.06:1 (body fails). */
  --mint:#0CF7A4; --rose:#F70C5F; --slate:#25333B;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --data:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-btn:8px; --r-card:16px; --r-tile:30px;
}
*{box-sizing:border-box}
html{background:var(--obsidian);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--obsidian);color:var(--ash);
  font:400 18px/1.55 var(--ui);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 22px}}
.grid>*{min-width:0}

/* ---- voices ---- */
.display{font-family:var(--display);font-weight:300;color:var(--cloud);
  letter-spacing:-.012em;text-wrap:balance;margin:0}
.display em{font-style:italic;font-weight:300}
h1.display{font-size:clamp(2.9rem,7vw,6rem);line-height:.93}
h2.display{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:.98}
h3.display{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.04}
.data{font-family:var(--data);font-weight:500;text-transform:uppercase;
  font-size:11px;letter-spacing:.18em;color:var(--fog);display:block}
p{margin:0 0 1.1rem;text-wrap:pretty}
.body-lg{font:300 19px/1.62 var(--ui);color:var(--ash);max-width:34rem}
.body{font:400 17px/1.6 var(--ui);color:var(--ash);max-width:34rem}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(24px);
  background:rgba(15,16,17,.74);border-bottom:1px solid rgba(255,255,255,.07)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:72px}
.brand{font-family:var(--data);font-weight:500;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pure);text-decoration:none;white-space:nowrap}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{font:400 14px var(--ui);color:var(--ash);text-decoration:none;white-space:nowrap}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--pure)}
.glass{padding:9px 16px;border-radius:var(--r-btn);background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);color:var(--pure)!important;font-size:14px}
@media(max-width:820px){.navlinks a:not(.glass){display:none}}

/* ---- the only primary action pattern ---- */
.cta{display:inline-flex;align-items:center;gap:10px;padding:13px 19px;
  background:var(--pure);color:var(--void);border:0;border-radius:var(--r-btn);
  text-decoration:none;font:500 15px var(--ui);cursor:pointer;transition:opacity .2s}
.cta:hover{opacity:.88}
.ghost{display:inline-flex;align-items:center;padding:13px 19px;border-radius:var(--r-btn);
  border:1px solid rgba(255,255,255,.28);color:var(--cloud);text-decoration:none;
  font:400 15px var(--ui);transition:background .2s}
.ghost:hover{background:rgba(255,255,255,.06)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}

/* ---- page rhythm ----
   .screen makes a page hold the full viewport instead of sitting as a band at
   the top. Content shorter than the viewport centres; longer content just flows. */
.screen{min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);
  display:flex;flex-direction:column;
  padding-top:clamp(48px,7vh,88px);padding-bottom:clamp(48px,7vh,88px)}
/* .wrap carries margin:0 auto; an auto cross-axis margin cancels flex stretch,
   which collapsed the box to its text width. Force full width back. */
.screen>*{width:100%}
/* auto margins centre the content but, unlike justify-content:center, never
   clip overflow off the top when the content is taller than the viewport */
.screen>:first-child{margin-top:auto}
.screen>:last-child{margin-bottom:auto}
.screen>section{padding-top:0;padding-bottom:0}
.screen>section+section{padding-top:clamp(38px,5vh,64px)}

/* ---- hero plate: dawn window behind the headline ---- */
.hero-plate{position:relative;isolation:isolate;
  background-image:url('img/dawn-window.jpg');
  background-size:cover;background-position:62% 46%}
.hero-plate::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(15,16,17,.95) 0%,rgba(15,16,17,.88) 34%,
                    rgba(15,16,17,.62) 56%,rgba(15,16,17,.22) 78%,rgba(15,16,17,.10) 100%),
    linear-gradient(180deg,rgba(15,16,17,.72) 0%,rgba(15,16,17,.20) 26%,
                    rgba(15,16,17,.30) 68%,var(--obsidian) 100%)}
@media(max-width:820px){
  /* on a phone the type covers the whole width, so darken the whole plate */
  .hero-plate::before{background:
    linear-gradient(180deg,rgba(15,16,17,.80) 0%,rgba(15,16,17,.62) 40%,
                    rgba(15,16,17,.78) 78%,var(--obsidian) 100%)}
  .hero-plate{background-position:70% 40%}
}

.page-head{padding:104px 0 56px}
.page-head .data{margin-bottom:26px}
.page-head .body-lg{margin-top:26px}
section.band{padding:0 0 100px}
.meta-row{margin-top:56px;display:flex;flex-wrap:wrap;gap:12px 40px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.meta-row span{font-family:var(--data);font-weight:500;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fog)}
.meta-row b{color:var(--cloud);font-weight:500}

/* ---- chromatic tiles: the only place colour lives ---- */
.tiles{display:grid;gap:20px}
@media(min-width:900px){.tiles.two{grid-template-columns:1fr 1fr}}
.tile{border-radius:var(--r-tile);padding:clamp(34px,4vw,58px) clamp(26px,3.2vw,48px)}
.tile.mint{background:var(--mint)}
.tile.rose{background:var(--rose)}
.tile.slate{background:var(--slate)}
/* chromatic tiles carry dark type — see the contrast note on the vars above */
.tile.mint .display,.tile.rose .display{color:var(--ink)}
.tile.mint .data{color:rgba(8,40,30,.66)}
.tile.rose .data{color:rgba(40,4,18,.62)}
.tile.mint p,.tile.rose p{color:var(--ink);opacity:.82}
/* slate stays a dark surface, so it keeps light type */
.tile.slate .display{color:var(--pure)}
.tile.slate .data{color:rgba(255,255,255,.55)}
.tile.slate p{color:rgba(255,255,255,.80)}
.tile p{font:300 18px/1.58 var(--ui);max-width:32rem;margin:20px 0 0}

/* ---- inverted break, sparingly ---- */
.invert{background:var(--silver);color:var(--void);border-radius:var(--r-tile);
  padding:clamp(36px,4vw,56px) clamp(26px,3.2vw,48px)}
.invert .display{color:var(--void)}
.invert .data{color:#4A4B4B}
.invert p{color:#3A3B3B}
.stats{display:grid;gap:34px;margin-top:38px}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(40px,4.6vw,54px);
  line-height:1;color:var(--void);letter-spacing:-.02em}
.stat span{display:block;margin-top:10px;font-family:var(--data);font-weight:500;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#4A4B4B}

/* ---- numbered steps ---- */
.steps{display:grid;gap:0;margin-top:8px}
.stepx{display:grid;gap:20px 44px;padding:44px 0;
  border-top:1px solid rgba(255,255,255,.09)}
@media(min-width:860px){.stepx{grid-template-columns:110px 1fr 1fr;align-items:start}}
.stepx:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.stepx .num{font-family:var(--display);font-weight:200;font-size:52px;line-height:.9;
  color:var(--fog)}
.stepx p{margin:0;font:400 16.5px/1.6 var(--ui);color:var(--ash)}
/* guard: extra prose in a step must sit in one cell, never spill into the num column */
.stepx>div>p+p{margin-top:14px}

/* ---- provider rows ---- */
.rows{margin-top:8px;border-top:1px solid rgba(255,255,255,.09)}
.rowi{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;
  justify-content:space-between;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.rowi .nm{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.4vw,30px);
  color:var(--cloud);line-height:1.1}
.tag{font-family:var(--data);font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fog);white-space:nowrap}
.tag.on{color:var(--cloud)}
a.nm{text-decoration:none}
a.nm:hover{color:var(--pure)}

/* ---- questions: same hairline rhythm as .steps, question beside answer ---- */
.qa{margin-top:8px;border-top:1px solid rgba(255,255,255,.09)}
.qa>div{display:grid;gap:14px 44px;padding:34px 0;border-bottom:1px solid rgba(255,255,255,.09)}
@media(min-width:860px){.qa>div{grid-template-columns:1fr 1fr;align-items:start}}
.qa p{margin:0;font:400 16.5px/1.6 var(--ui);color:var(--ash)}
.qa a{color:var(--cloud);text-underline-offset:3px}
.qa a:hover{color:var(--pure)}

/* ---- price ---- */
.pricewrap{display:grid;gap:44px;margin-top:8px}
@media(min-width:900px){.pricewrap{grid-template-columns:1fr 1fr;gap:64px}}
.bignum{font-family:var(--display);font-weight:200;font-size:clamp(90px,15vw,190px);
  line-height:.82;color:var(--cloud);letter-spacing:-.04em}
.bignum sup{font-size:.32em;vertical-align:super;font-weight:300;margin-right:.06em}
.incl{list-style:none;padding:0;margin:0}
.incl li{padding:17px 0;border-bottom:1px solid rgba(255,255,255,.09);
  font:400 16.5px/1.5 var(--ui);color:var(--ash)}
.incl li:first-child{border-top:1px solid rgba(255,255,255,.09)}
/* the average-month explanation — quiet, but present, not buried */
/* two pricing options, side by side */
.plans{display:grid;gap:20px;margin-top:8px}
.plans>*{min-width:0}
@media(min-width:860px){.plans{grid-template-columns:1fr 1fr}}
.plan{border-radius:var(--r-tile);padding:clamp(30px,3.4vw,44px) clamp(24px,3vw,40px);
  display:flex;flex-direction:column}
.plan.pick{background:var(--mint);color:var(--ink)}
.plan.alt{background:var(--graphite);border:1px solid rgba(255,255,255,.10)}
.plan .tagline{font-family:var(--data);font-weight:500;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase}
.plan.pick .tagline{color:rgba(8,40,30,.66)}
.plan.alt .tagline{color:var(--fog)}
.plan .amount{font-family:var(--display);font-weight:200;
  font-size:clamp(58px,7.6vw,96px);line-height:.9;letter-spacing:-.035em;margin:16px 0 0}
.plan .amount sup{font-size:.3em;vertical-align:super;font-weight:300;margin-right:.06em}
.plan.pick .amount{color:var(--ink)}
.plan.alt .amount{color:var(--cloud)}
.plan .per{font-family:var(--data);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;margin-top:14px}
.plan.pick .per{color:rgba(8,40,30,.7)}
.plan.alt .per{color:var(--fog)}
.plan .blurb{font:400 15.5px/1.55 var(--ui);margin:18px 0 0}
.plan.pick .blurb{color:var(--ink);opacity:.8}
.plan.alt .blurb{color:var(--ash)}

/* ---- statement page ---- */
.statement{font-family:var(--display);font-weight:300;
  font-size:clamp(2.2rem,5.2vw,4.1rem);line-height:1.04;color:var(--cloud);
  letter-spacing:-.014em;max-width:20ch;margin:0}

/* ---- form ---- */
form{margin-top:8px;max-width:37rem}
.f2{display:grid;gap:22px}
.f2>*{min-width:0}
@media(min-width:620px){.f2{grid-template-columns:1fr 1fr}}
.field{margin-bottom:22px}
label{display:block;margin-bottom:9px;font-family:var(--data);font-weight:500;
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--fog)}
input,textarea{width:100%;padding:14px 15px;background:var(--graphite);color:var(--cloud);
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r-btn);
  font:400 16px var(--ui);transition:border-color .2s}
input::placeholder,textarea::placeholder{color:#5C5D5E}
input:focus,textarea:focus{outline:0;border-color:rgba(255,255,255,.42)}
textarea{min-height:112px;resize:vertical}
input:focus-visible,textarea:focus-visible,.cta:focus-visible,
.ghost:focus-visible,a:focus-visible{outline:2px solid var(--pure);outline-offset:2px}
.fine{font:400 14px/1.55 var(--ui);color:var(--fog);margin:14px 0 0;max-width:34rem}

/* ---- footer ---- */
footer{border-top:1px solid rgba(255,255,255,.08);padding:52px 0 72px;
  font:400 14px/1.6 var(--ui);color:var(--fog)}
footer .cols{display:grid;gap:30px}
@media(min-width:760px){footer .cols{grid-template-columns:2fr 1fr 1fr}}
footer a{color:var(--ash);text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:var(--pure)}
footer .fine{margin-top:26px;max-width:46rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;
  scroll-behavior:auto}}

/* ---- panel: one section, one screen -------------------------------------
   Every section on every page is its own full-viewport panel with a hard
   seam between it and the next. Sections previously shared a single .screen,
   which is why pages read as one continuous scroll instead of distinct steps.

   Separation is a COLOUR STEP plus a hairline. Never a card, never a shadow.
   Cards would put a box around content nobody interacts with, and shadows are
   already ruled out everywhere else in this file.

   background-COLOR, not the background shorthand: the shorthand resets
   background-image, and .hero-plate above sets one. Using the shorthand here
   silently erases the dawn-window photo behind the homepage headline.

   Both flex traps recorded in SESSION.md apply again here:
     1. .wrap carries margin:0 auto, and an auto cross-axis margin cancels
        flex stretch, collapsing the box to its text width -> .panel>*{width:100%}
     2. justify-content:center clips overflow off the top when content is
        taller than the panel -> auto margins on first and last child instead.

   Selector is `section.panel` so it outranks the earlier `.page-head` and
   `section.band` padding rules without needing !important.
-------------------------------------------------------------------------- */
section.panel{
  min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);
  display:flex;flex-direction:column;
  padding-top:clamp(56px,8vh,104px);padding-bottom:clamp(56px,8vh,104px);
  background-color:var(--obsidian)}
section.panel>*{width:100%}
section.panel>:first-child{margin-top:auto}
section.panel>:last-child{margin-bottom:auto}

/* the step: alternate panels lift one surface level */
section.panel:nth-of-type(even){background-color:var(--graphite)}

/* the seam */
section.panel+section.panel{border-top:1px solid var(--steel)}

@media(max-width:640px){
  section.panel{padding-top:clamp(44px,6vh,72px);padding-bottom:clamp(44px,6vh,72px)}
}