/* ═══════════════════════════════════════════════════════════════════════════
   Lumessa — marketing site — site.css

   REWRITTEN AT W23 TO MOCK-UP A4'S VISUAL SYSTEM, on the founder's
   instruction. site-brief.md v1.28; site-ledger.md v1.33. What changed:
   ivory ink tokens for headings and running copy (amber becomes the accent),
   the A4 type scale (display to 84px at 1.07), the two-column hero with the
   rebuilt lock-screen drawing, step cards, side-by-side tiers, and A4's pill
   controls. What did not change: self-hosted fonts, the focus system, the
   11px floor, and every accessibility invariant named below at its rule.

   No version stamp. Stripped at W7, where it still read "Site v0.1" against
   pages reading v0.3. The `<!-- site vX.Y -->` comment on line 1 of each HTML
   page is the single location the session protocol reads.

   COLOUR. Colours are reached through tokens. tokens.css remains a literal
   copy of the app's `:root` and gains nothing here; the site-only ink, panel
   and drawing tokens live in the `:root` block below, annotated with their
   measured WCAG 2.1 contrast ratios exactly as tokens.css annotates its own
   (page ground first, panel ground second; the worse figure governs).
   No font-size below 11px anywhere (brand-brief.md §4b) — INCLUDING, from
   W23, inside the lock-screen drawing, whose type is now literal pixels.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts, self-hosted. No third-party request is made by this site. ──
   Subsets are the Google latin / latin-ext cuts as published in the
   @fontsource packages; both faces are SIL Open Font Licence 1.1 and the
   licences ship beside them in assets/fonts/. The unicode-range split means
   the latin-ext file is fetched only when a page actually uses a Polish
   character.

   THE SHIPPED WEIGHTS ARE 300 (Cormorant) AND 400/500 (DM Sans) AND NOTHING
   HERE MAY ASK FOR ANOTHER. Mock-up A4 set its buttons and step keys at 600
   and its serif card headings at 400; neither weight is shipped, and an
   undeclared weight is SYNTHESISED by smearing the nearest outline
   (brand-brief.md §4c). Every A4 600 below is 500 and every A4 serif 400 is
   300, deliberately. */

@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-300.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-ext-300.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/dm-sans-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/dm-sans-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/dm-sans-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/dm-sans-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Scale and the site-only tokens ── */

:root{
  --prose:34rem;         /* the prose column — W10's measured 45–75cpl figure */
  --band:70rem;          /* ~1120px, A4's --max                               */
  --gap-section:8.125rem;/* 130px, A4's section rhythm                       */
  --gap-block:2.75rem;
  --radius:18px;         /* A4's card radius (tiers take 20px at their rule) */

  /* ── Ink and ground tokens (W23, from mock-up A4) ────────────────────────
     Site-only; deliberately NOT in tokens.css, which stays a literal copy of
     the app's block. Ratios measured against #090C13 (page) and #0E1322
     (panel), sRGB-composited, in that order.                                */
  --ink-hi:rgba(246,241,230,0.97);    /* 16.32:1 / 15.47:1 — headings        */
  --ink-body:rgba(240,234,221,0.82);  /* 11.02:1 / 10.57:1 — running copy    */
  --ink-soft:rgba(240,234,221,0.60);  /*  6.24:1 /  6.12:1 — quiet ivory     */
  --panel:#0E1322;                    /*  1.06:1 vs page — ground, decorative */
  --panel-2:#121829;                  /*  1.11:1 vs page — ground, decorative */
  --hairline:rgba(224,188,122,0.20);  /*  1.48:1 — DECORATIVE EDGES ONLY.
                                          Controls keep --ui-line (3.40:1);
                                          brand-brief.md §4b's rule stands.  */
  --btn-ink:#1A1508;                  /* 10.08:1 on --amber — button text    */

  /* ── Type scale (W18, re-based at W23 on A4) ─────────────────────────────
     Sizes are ROLES. Fluid steps carry their px range as the comment.       */
  --fs-display:  clamp(3rem,6.4vw,5.25rem);        /* 48 → 84  hero, serif   */
  --fs-title:    clamp(2.375rem,4.6vw,3.625rem);   /* 38 → 58  section titles*/
  --fs-subtitle: 1.625rem;                         /* 26  step/card headings */
  --fs-heading:  2.125rem;                         /* 34  tier names (A4)    */
  --fs-support:  1.1875rem;                        /* 19  section supports   */
  --fs-body:     1.0625rem;                        /* 17  all running copy   */
  --fs-small:    0.9375rem;                        /* 15  secondary, notes   */
  --fs-fine:     0.8125rem;                        /* 13  captions, eyebrows */
  --fs-label:    0.75rem;                          /* 12  step keys          */

  --lh-display: 1.07;  /* A4's display leading   */
  --lh-tight:   1.25;  /* card and tier headings */
  --lh-ui:      1.4;   /* controls, nav, inputs  */
  --lh-body:    1.6;   /* running copy (A4)      */

  --ls-display: -0.01em;   /* A4's display tracking     */
  --ls-label:    0.22em;   /* uppercase eyebrow tracking */

  /* .wordmark (27/20px, 0.22em) stays a brand lockup outside the scale. */
}

@media (max-width:56.25rem){
  :root{--gap-section:5.625rem;--gap-block:2rem;}   /* A4's 90px rhythm */
}

/* ── Reset and ground ── */

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

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-body);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block;}

/* ── Focus. Visible everywhere, ≥3:1, never removed. WCAG 2.1 SC 2.4.7 ── */

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

.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--bg);
  color:var(--amber);
  border:1px solid var(--ui-line);
  padding:0.75rem 1.25rem;
  font-family:var(--sans);
  font-size:var(--fs-small);
  text-decoration:none;
  z-index:100;
}
.skip-link:focus{left:1rem;top:1rem;}

/* ── Layout primitives ── */

.band{
  width:100%;
  max-width:var(--band);
  margin:0 auto;
  padding:0 2rem;
}

.prose{max-width:var(--prose);}

main > section{padding-block:var(--gap-section);}

/* Centred section heads, per A4. The rule centres the head, not the content:
   prose, cards and the form keep their own measures. */
.sec-center .section-title,
.sec-center > .band > .prose > .section-title{text-align:center;}
.sec-center > .band > .section-title + .prose,
.sec-center > .band > .prose{margin-inline:auto;}
.sec-center > .band > .section-title + p.prose{text-align:center;}

/* ── Type ── */

.display{
  font-family:var(--serif);
  font-weight:300;
  color:var(--ink-hi);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  margin:0;
}

/* W49 — every page's h1.display sized down to match .section-title
   (--fs-title), on the founder's direct instruction, confirmed site-wide
   across all eight pages. Named mockup-before-build exception per
   site-brief.md §9: this reuses an existing, already-approved size token
   rather than introducing a new value, so no mockup was made. Distinctive
   string for this batch: H1-DISPLAY-MATCH-SECTION-TITLE-W49. */
h1.display{font-size:var(--fs-title);}
/* Both elements named — the W13 h2→h3 unstyling bug must not recur. */
h2.display,h3.display{font-size:var(--fs-subtitle);line-height:var(--lh-tight);}

.lede{
  font-family:var(--sans);
  font-size:var(--fs-body);
  color:var(--ink-body);
  line-height:var(--lh-body);
  margin:1.5rem 0 0;
}

.section-title{
  font-family:var(--serif);
  font-size:var(--fs-title);
  font-weight:300;
  letter-spacing:var(--ls-display);
  color:var(--ink-hi);
  line-height:var(--lh-display);
  margin:0 0 1.5rem;
}

p{margin:0 0 1.25rem;}
p:last-child{margin-bottom:0;}

a{color:var(--amber);text-underline-offset:0.25em;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}

strong{font-weight:500;color:var(--ink-hi);}

/* ── Eyebrows (W22, A4's section grammar; hero variant new at W23) ── */

.eyebrow{
  display:flex;
  align-items:center;
  gap:0.875rem;
  font-family:var(--sans);
  font-size:var(--fs-fine);
  font-weight:500;                 /* A4 says 600; 600 is not shipped */
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 1.375rem;
}
.eyebrow::before{content:"";width:36px;height:2px;background:var(--amber);flex:none;}
.hero .eyebrow{font-size:1rem;letter-spacing:0.24em;margin-bottom:1.625rem;}
.sec-center .eyebrow{justify-content:center;}   /* A4: centred sections centre the eyebrow too — W25 */

/* ═══ ICON BADGE (W24 — the rounded box behind an icon, A4's "What's inside") ═══ */
.ico-badge{
  width:2.875rem;height:2.875rem;border-radius:0.75rem;
  border:1px solid var(--hairline);
  background:var(--fill-quiet);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
/* W25 — added for the "What's inside" cards. */

/* ── Controls: A4's pill idiom ──
   Amber as a filled surface is permitted in exactly one role — the primary
   action (brand-brief.md §4a). The pill CTA and the form's submit are that
   one role wherever they appear; --btn-ink on --amber is 10.08:1. */

.cta{
  display:inline-block;
  background:var(--amber);
  color:var(--btn-ink);
  border:1.5px solid var(--amber);
  border-radius:999px;
  padding:0.9375rem 1.875rem;
  font-family:var(--sans);
  font-size:var(--fs-small);
  font-weight:500;
  line-height:var(--lh-ui);
  text-decoration:none;
  box-shadow:0 8px 28px rgba(224,188,122,0.25);   /* drawing shadow, not text */
}
.cta:hover{background:var(--fill-active);border-color:var(--fill-active);box-shadow:0 12px 34px rgba(224,188,122,0.2);}

.cta--quiet{
  background:transparent;
  color:var(--ink-hi);
  border:1.5px solid var(--ui-line);
  box-shadow:none;
}
.cta--quiet:hover{background:transparent;border-color:var(--amber);color:var(--amber);}

.cta--nav{padding:0.625rem 1.375rem;flex:0 0 auto;}

/* ── Header ── It does not move: no shrink, no fade, no scroll shadow. */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
  padding:0.875rem 0;
}

.site-header .band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem 1.5rem;
  flex-wrap:wrap;
}

.site-nav ul{
  display:flex;
  align-items:center;
  gap:1.75rem;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}

.site-nav a{
  font-family:var(--sans);
  font-size:var(--fs-small);
  color:var(--ink-hi);
  text-decoration:none;
  line-height:var(--lh-ui);
  display:inline-block;
  padding:0.375rem 0;
}

.site-nav a:hover{color:var(--amber);}

#method,#what-you-get,#pricing,#never,#languages,#notify,#questions{scroll-margin-top:5.5rem;}

/* ── Narrow navigation (W24) ── A4 hid the link row below 56.25rem and the
   founder ruled against that: the links must be reachable on a phone. The
   header gains a Menu button, `hidden` in the markup and revealed by script.
   Script also sets data-nav="closed" on the header, which is the ONLY thing
   that hides the links — so with JavaScript off the five links and the pill
   simply stack under the wordmark, and the button is never shown. */

.nav-toggle{
  display:none;
  align-items:center;
  gap:0.5rem;
  margin-left:auto;
  background:transparent;
  color:var(--ink-hi);
  border:1.5px solid var(--ui-line);   /* a CONTROL: --hairline may not edge it */
  border-radius:999px;
  padding:0.5rem 0.875rem;
  font-family:var(--sans);
  font-size:var(--fs-small);
  font-weight:500;
  line-height:var(--lh-ui);
  cursor:pointer;
}
.nav-toggle:hover{border-color:var(--amber);color:var(--amber);}
.nav-toggle[hidden]{display:none;}
.nav-toggle svg{width:1.125rem;height:1.125rem;display:block;}
.nav-toggle .ico-close{display:none;}
.nav-toggle[aria-expanded="true"] .ico-open{display:none;}
.nav-toggle[aria-expanded="true"] .ico-close{display:block;}

@media (max-width:56.25rem){
  .nav-toggle:not([hidden]){display:inline-flex;}
  .site-nav{flex:1 0 100%;order:3;}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--hairline);padding-top:0.5rem;}
  .site-nav a{display:block;padding:0.75rem 0;font-size:var(--fs-body);}
  .cta--nav{order:4;flex:1 0 100%;text-align:center;margin-top:0.5rem;}
  .site-header[data-nav="closed"] .site-nav,
  .site-header[data-nav="closed"] .cta--nav{display:none;}
}
/* ── The wordmark lockup (W12; sized to A4 at W23) ──
   The mark beside the word; /assets/img/mark.svg carries an opaque --bg
   square, invisible only while the header ground IS --bg — that condition
   stands. alt="" and the width/height attributes stand for the W12 reasons. */

.wordmark{
  font-family:var(--serif);
  font-weight:300;
  font-size:1.6875rem;     /* 27px, A4. RESERVED: brand lockup, not a text size */
  letter-spacing:0.22em;   /* RESERVED: brand lockup */
  color:var(--amber);
  text-transform:uppercase;
  margin:0;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}

a.wordmark{text-decoration:none;}

/* W24: this query sat ABOVE the `.wordmark` rule from the batch that wrote it,
   and at equal specificity the later rule won — so it never applied, on any
   version. Moved below the rule it overrides; noted open since W18. */
@media (max-width:26rem){
  .site-header .band{gap:0.625rem 1rem;}
  .wordmark{font-size:1.25rem;}
  .nav-toggle{padding:0.5rem 0.625rem;}
  .nav-toggle .nav-toggle-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}   /* icon only; the word stays for assistive technology */
}

.wordmark-mark{
  width:1.15em;
  height:1.15em;
  flex:0 0 auto;
  display:block;
}

/* ── Icons (W22) ── */

.ico{
  width:22px;height:22px;
  stroke:var(--amber);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  flex:none;
}
.ico--dim{stroke:var(--ink-soft);}   /* 6.24:1 */

/* ═══ HERO (W23 — A4's two-column grid; the rail is retired) ═══ */

.hero{padding-block:3.25rem var(--gap-section);position:relative;overflow:hidden;}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:4rem;
  align-items:start;   /* W47 — was center; changed so the phone silhouette's
    top aligns with the display line's top rather than with the whole
    (much taller) hero-copy column's vertical centre. Both columns start
    flush at the top of the grid row: .hero h1{margin:0} (line 201 area)
    puts the H1's box top at the very top of .hero-copy now that the W45
    eyebrow removal made the H1 its first child; .phone-wrap's own first
    flowed child is .device, itself margin/padding-free above .iphone, so
    the two tops meet at the same grid line with no extra offset needed. */
}

.hero h1{max-width:14ch;}   /* W44 — re-measured for the new display line; the figure moves with the sentence, per this rule's own original note. Verified at a 33-point sweep, 320–1600px, with no single-word orphan line and no horizontal overflow. */

.hero-support{
  font-family:var(--sans);
  font-size:1.3125rem;              /* 21px, A4's hero support */
  color:var(--ink-body);
  line-height:var(--lh-body);
  margin:1.375rem 0 0;
  max-width:44ch;
}

.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin:2.5rem 0 0;align-items:center;}

/* ── HERO-NOTIFY (W42) — the launch form, moved into the hero from its
   former placement as the closing section (site-brief.md v1.28/W23,
   reversed at v1.33/W42). Narrower measure than .closing's centred form,
   left-aligned to the hero column, set into a quiet panel so it reads as
   one unit next to the bullet list beneath it. form.notify itself is
   unchanged (site-brief.md §13c) — only its container is new. ── */
.hero-notify{
  margin:2.25rem 0 0;
  padding:1.5rem 1.75rem;
  max-width:34rem;
  background:var(--fill-quiet);
  border:1px solid var(--card-border);
  border-radius:14px;
}
.hero-notify-heading{
  font-family:var(--serif);
  font-size:1.375rem;
  font-weight:300;
  color:var(--ink-hi);
  margin:0 0 0.875rem;
}
.hero-notify form.notify{margin:0;max-width:none;text-align:left;}
.hero-notify .notify-purpose{max-width:none;margin-bottom:1.125rem;}
.hero-notify .notify-note{max-width:none;}

.lede-points--icons{list-style:none;padding-left:0;margin:2.5rem 0 0;}
.lede-points--icons li{
  display:flex;align-items:center;gap:0.875rem;
  font-size:1.03125rem;            /* 16.5px, A4 */
  color:var(--ink-hi);
  margin-bottom:0.9375rem;
}
.lede-points--icons li:last-child{margin-bottom:0;}

.availability{
  display:flex;align-items:center;gap:0.875rem;
  margin:2.5rem 0 0;
  font-size:var(--fs-small);
  color:var(--text-sub);           /* the amber quiet — 5.99:1 */
  line-height:var(--lh-body);
}
.availability .rule{width:2rem;height:1px;background:var(--ui-line);flex:0 0 auto;}

/* ── The bloom (W23; replaces the W11–W13d halo) ──
   One radial amber glow behind the phone, A4's .bloom. Absolutely positioned
   inside .phone-wrap so its box IS the phone's box — the W13b lesson, kept. */

.phone-wrap{position:relative;display:flex;flex-direction:column;align-items:center;}

.bloom{
  position:absolute;
  width:45rem;height:45rem;
  border-radius:50%;
  left:50%;top:50%;
  margin-left:-22.5rem;margin-top:-22.5rem;
  background:radial-gradient(circle, rgba(224,188,122,0.16) 0%, rgba(224,188,122,0.05) 45%, transparent 70%);
  pointer-events:none;
}

@media (prefers-reduced-motion:no-preference){
  .bloom{animation:breathe 9s ease-in-out infinite;}
  @keyframes breathe{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.05);}}
}

/* ═══ THE LOCK-SCREEN DRAWING (W23 — rebuilt to A4; site-brief.md §7d) ═══

   FIXED WIDTH, LITERAL TYPE. The frame is 340px (300px narrow) at the true
   402:874 ratio, and every size inside it is a literal pixel value with
   NOTHING BELOW 11px — which is what retired the /accessibility exception.
   The old container-query sizing scaled real point sizes down to 7.5px and
   is withdrawn with the drawing that needed it.

   NO AMBER INSIDE THE WIDGET. iOS renders a Lock Screen accessory widget in
   vibrant/monochrome; everything inside .widget-ls is white at a declared
   opacity (the app's own --widget-text token where it applies). The measured
   figures: --widget-text on the widget ground 8.80:1; the word at white 0.9,
   13.02:1. The amber in this composition is the bloom OUTSIDE the phone. */

.device{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin:0;}   /* W47 — margin:0 added. <figure> carries a UA-stylesheet default (Chrome: 1em 40px) that nothing here had ever reset; it was invisible while .hero-grid used align-items:center (W23–W46) because centring absorbed the offset, and became a visible 17px gap the moment W47 top-aligned the two hero columns. Found by measuring, not by eye. */

.iphone{
  width:340px;
  aspect-ratio:402/874;
  background:#04060B;                       /* drawing ground — see §7d      */
  border:1px solid rgba(224,188,122,0.3);   /* drawing edge, decorative      */
  border-radius:60px;
  padding:9px;
  box-shadow:0 50px 110px rgba(0,0,0,0.65);
  position:relative;
}

.iphone .scr{
  width:100%;height:100%;
  border-radius:52px;
  overflow:hidden;
  position:relative;
  display:flex;flex-direction:column;
}

/* A4's wallpaper base rule — NOW A NO-SCRIPT/NO-JS FALLBACK ONLY (W46).
   With JavaScript blocked, .wp-layer elements exist in the markup but
   script never sets their .is-in/.is-out state or shows the widget past
   word 1, so this rule is what a no-JS visitor actually sees: one
   complete still picture, word 1's wallpaper, matching CR-041's own
   "with JavaScript off this is a complete still picture" requirement. */
.lockscr{
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 60%),
    linear-gradient(135deg,#3a2438,#1f1420 55%,#12090f);
  position:relative;
}

/* ── WALLPAPER CROSS-FADE (W46) — three layers, one per word, stacked
   absolutely inside .lockscr. TWO LAYERS PER TRANSITION, NOT A SINGLE
   TRANSITIONED BACKGROUND: browsers do not reliably interpolate between
   two different gradient value sets, so this reuses the exact technique
   this project already built and tested for the W20 five-wallpaper
   system (site-ledger.md) — including the specific fix that technique
   needed: the INCOMING layer snaps to full opacity with NO transition
   before the OUTGOING layer starts to fade, so there is never a moment
   where both sit at partial opacity over the same ground and expose it
   between them ("the hole in the middle", diagnosed and fixed at the
   time and not re-earned here). site.js sets .is-in/.is-out and toggles
   `transition:none` for exactly one frame on the incoming layer; nothing
   here does that timing, only the resulting visual states. ── */
.wp-layer{
  position:absolute;
  inset:0;
  z-index:0;
}
.wp-layer::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(90% 50% at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 60%);
}
.wp-layer.is-out{
  transition:opacity 900ms ease;
  opacity:0;
}
.wp-layer.is-in{
  opacity:1;
}
#wp-0{background:linear-gradient(135deg,#3a2438,#1f1420 55%,#12090f);}   /* miłość — rose   */
#wp-1{background:linear-gradient(135deg,#173a38,#0d2224 55%,#0a1512);}   /* wolność — teal  */
#wp-2{background:linear-gradient(135deg,#3a2814,#241407 55%,#160b06);}   /* serce — amber   */

.island{
  position:absolute;top:13px;left:50%;
  transform:translateX(-50%);
  width:98px;height:29px;border-radius:16px;
  background:#000;z-index:5;
}

.ls-status{
  display:flex;justify-content:space-between;align-items:center;
  padding:17px 30px 0;
  position:relative;z-index:4;
}
.ls-status svg{display:block;height:13px;width:auto;}

/* z-index:2 added at W46 — .ls-body now sits above the .wp-layer stack
   (z-index:0/1), which it did not need to before those layers existed. */
.ls-body{display:flex;flex-direction:column;align-items:center;padding:0 26px;position:relative;z-index:2;}

.ls-date{
  margin:32px 0 0;
  font-size:16px;font-weight:500;
  color:rgba(255,255,255,0.85);
  letter-spacing:0.02em;
}

.ls-clock{
  margin:2px 0 0;
  font-size:86px;font-weight:500;
  color:rgba(255,255,255,0.94);
  letter-spacing:0.01em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

/* The widget, dragged to the bottom above the quick actions — bottom-left.
   Values verbatim from prototype.html v5.76 .widget-ls (L644–649): white 0.06
   fill, blur(20px), white 0.08 border, r14, 10x14 padding. */
/* z-index:2 added at W46, same reason as .ls-body above. */
.ls-widgetzone{
  margin-top:auto;
  padding:0 24px 14px;
  display:flex;justify-content:flex-start;
  position:relative;z-index:2;
}

.widget-ls{
  width:100%;max-width:214px;
  border-radius:14px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.widget-ls p{margin:0;}

.wls-type{
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--widget-text);
  margin-bottom:3px;font-weight:400;
}
.wls-row{display:flex;align-items:baseline;gap:10px;margin-bottom:2px;}
.wls-word{
  font-family:var(--serif);
  font-size:20px;font-weight:300;
  color:rgba(255,255,255,0.9);
}
.wls-en{font-size:13px;color:var(--widget-text);font-weight:400;}
.wls-respell{font-size:11px;color:var(--widget-text);font-style:italic;}

/* z-index:2 added at W46, same reason as .ls-body above. */
.ls-bottom{
  padding:0 30px 26px;
  display:flex;justify-content:space-between;
  width:100%;
  position:relative;z-index:2;
}
.ls-orb{
  width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,0.13);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
}
.ls-orb svg{width:21px;height:21px;fill:rgba(255,255,255,0.92);display:block;}

/* z-index:2 added at W46, same reason as .ls-body above. */
.ls-home{
  position:absolute;bottom:9px;left:50%;
  transform:translateX(-50%);
  width:120px;height:5px;border-radius:3px;
  background:rgba(255,255,255,0.85);
  z-index:2;
}

.ls-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* The device caption and the pause control. The control is WCAG 2.1 SC 2.2.2
   Level A — required, not a courtesy; hidden until script reveals it because
   with no script nothing moves. `hidden` is asserted at author level so the
   UA-tie defect W20 found can never return. */

.device-toggle{
  margin-top:1.125rem;
  background:transparent;
  color:var(--text-sub);
  border:1px solid var(--ui-line);
  border-radius:100px;
  padding:0.375rem 1.125rem;
  font-family:var(--sans);
  font-size:var(--fs-fine);
  line-height:var(--lh-ui);
  cursor:pointer;
}
.device-toggle:hover{border-color:var(--amber);color:var(--amber);}
.device-toggle[hidden]{display:none;}

/* W24, founder instruction: the control is not shown at rest. It keeps its
   place in the tab order and in the accessibility tree and appears the moment
   it receives keyboard focus — the skip-link idiom. Reduced motion still stops
   both moving things without it. This is a narrower SC 2.2.2 position than a
   control visible to every visitor and is recorded as such at site-brief.md §7. */
.device-toggle:not([hidden]):not(:focus-visible){
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}

.device figcaption{
  margin-top:1rem;
  font-size:var(--fs-fine);
  color:var(--text-sub);
  line-height:var(--lh-body);
  text-align:center;
  max-width:19.375rem;   /* 310px, A4's caption measure */
}

/* ═══ THE TRUTH STRIP (W22; A4 panel treatment at W23; centred at W27; the
   centring did not visibly work until W29 — see below) ═══ */

main > section.truths{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:var(--panel);
  padding-block:1.75rem;
}

/* W29 — THE W27 CENTRING FIX DID NOT WORK ON THE LIVE SITE, AND THIS IS WHY.
   This <ul> carries two classes: .band (margin:0 auto, the auto is what
   centres a max-width box on the page) and .truths-in, which ALSO declared
   margin:0 — same specificity, later in the file, so .truths-in's plain 0
   overwrote .band's auto on every browser, correctly and consistently.
   justify-content:center genuinely worked and centred the five items INSIDE
   the box; the box itself was never centred ON THE PAGE, so above 1120px
   (--band's max-width) the whole strip sat flush left with all the slack on
   the right. Confirmed via computed styles: width was exactly 1120px (right),
   margin was exactly 0 (wrong — should be an auto-computed value splitting
   the remainder either side). Fixed by deleting the margin declaration from
   .truths-in and leaving .band's auto in sole control. Pre-existing since the
   class was first written; the W27 batch changed justify-content correctly
   and had no way to see this, because that batch's own verification
   screenshots were cropped to the element's own box, which cannot show an
   element mispositioned within its parent. Verified this time by full-
   viewport screenshot and getBoundingClientRect() at five widths, confirming
   equal left/right margins at each. */
.truths-in{
  list-style:none;padding-block:0;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:1.125rem 2.5rem;
}
.truths-in li{
  display:flex;align-items:center;gap:0.625rem;
  font-size:var(--fs-small);
  font-weight:500;
  letter-spacing:0.03em;
  color:var(--ink-hi);
}

/* ═══ METHOD (W23 — A4's how-grid: step cards left, the recording right.
   W26 — the card interior changes from a numbered two-column grid to A4's
   icon-badge row, for the three-step Glance/Tap/Keep story. .method-num is
   retired with the numbering it labelled; nothing references it now. ) ═══ */

.how-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
  gap:4.5rem;
  align-items:center;
  margin-top:2.5rem;
}

.how-steps{display:flex;flex-direction:column;gap:1.125rem;}

.method-item{
  display:flex;
  align-items:center;
  gap:1.375rem;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:1.875rem 1.75rem;
  margin:0;
}

.method-kicker{
  display:block;
  font-family:var(--sans);
  font-size:var(--fs-fine);
  font-weight:500;                 /* A4 says 600; 600 is not shipped, per §4c */
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--amber);
}

.method-item h3{margin:0 0 0.375rem;}
.method-item p{max-width:26.25rem;color:var(--ink-body);font-size:var(--fs-small);margin:0;}

/* RETIRED AT W33 with the video it framed — the six-panel widget below sits
   in .iphone/.scr instead (the hero's own chassis). Left here, unreferenced,
   rather than deleted: if a real recording ever returns to this section, its
   frame does not need re-deriving. */
.device-frame{
  position:relative;
  border-radius:2.5rem;
  overflow:hidden;
  border:1px solid rgba(224,188,122,0.3);
  background:var(--bg);
  box-shadow:0 50px 110px rgba(0,0,0,0.65);
  max-width:340px;
}

.device img,.device .device-media{
  width:100%;
  height:auto;
  display:block;
}

/* ═══ THE METHOD PANEL SEQUENCE (W33 — replaces the lesson recording with a
   synthetic build of the app's six-panel Learn flow: Learn → Understand →
   Memory Hook → Examples → Quiz → Summary. Ported from
   word-panel-sequence-mockup-v2, on the founder's instruction, into the
   site's own .iphone/.scr chassis rather than the mock-up's standalone frame.
   See the markup comment at #method for what this reverses and why, and
   claims-register.md CR-054/CR-055 for the picture-claims it opens.

   `mp-` prefixes every class below to keep this scoped and to guarantee no
   collision with the hero lock-screen's `.ls-*`/`.wls-*` set — the two
   widgets are visually related but are driven by separate site.js blocks and
   must be editable independently. ) ═══ */

.mp-scr{
  background:var(--bg);           /* plain ground — not the lock-screen wallpaper */
}

/* Floating chrome — hamburger + streak badge — present over every panel,
   matching prototype.html's #floating-ui / .streak-badge. Decorative here:
   aria-hidden, the single .scr role="img" label carries the meaning. */
.mp-floating{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:34px 16px 0;
}
.mp-hamburger{
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(224,188,122,0.45);
  background:rgba(9,12,19,0.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.mp-hamburger span{display:block;width:12px;height:1.5px;background:var(--amber);border-radius:2px;}
.mp-streak{
  display:flex;align-items:center;gap:5px;
  background:rgba(9,12,19,0.92);
  border:1.5px solid rgba(224,188,122,0.45);
  border-radius:100px;padding:5px 11px 5px 7px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.mp-streak-sun{width:16px;height:16px;flex-shrink:0;}
.mp-streak-num{font-family:var(--serif);font-size:14px;font-weight:400;color:var(--amber);line-height:1;}

/* Mock-up-only addition — see the markup comment. Not present in the app. */
.mp-scrim{
  position:absolute;top:0;left:0;right:0;height:130px;z-index:12;
  background:linear-gradient(var(--bg) 82%, rgba(9,12,19,0));
  opacity:0;transition:opacity 0.5s ease;pointer-events:none;
}
.mp-scrim.show{opacity:1;}

.mp-head{
  position:absolute;top:80px;left:20px;right:20px;z-index:15;
  display:flex;align-items:center;justify-content:space-between;
}
.mp-label{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);}
.mp-counter{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted);}

.mp-rail{
  position:absolute;right:8px;top:114px;bottom:56px;z-index:25;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.mp-rail-dot{width:4px;height:4px;border-radius:50%;background:rgba(224,188,122,0.22);transition:background 0.25s ease,height 0.25s ease;flex:none;}
.mp-rail-dot.active{background:var(--amber);height:12px;border-radius:3px;}

.mp-stack{position:absolute;inset:0;}
.mp-panel{
  position:absolute;inset:0;opacity:0;transform:translateY(6px);
  transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1),transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.mp-panel.active{opacity:1;transform:translateY(0);z-index:5;}
.mp-inner{width:100%;height:100%;overflow-y:auto;scroll-behavior:smooth;}
.mp-inner::-webkit-scrollbar{display:none;}
.mp-content{padding:104px 20px 34px;}

/* MP0 — Learn (tap-to-reveal) */
.mp-word-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:104px 16px 22px;position:relative;}
.mp-word-pos{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);opacity:0;transition:opacity 0.5s ease;}
.mp-word-letters{font-family:var(--serif);font-size:46px;font-weight:300;letter-spacing:0.04em;line-height:1;display:flex;justify-content:center;flex-wrap:wrap;min-height:54px;}
.mp-word-letters .letter{opacity:0;transition:opacity 0.35s ease;color:var(--text-body);}
.mp-word-letters .letter.revealed{opacity:1;}
.mp-word-respell{font-size:15px;color:rgba(224,188,122,0.75);letter-spacing:0.06em;font-style:italic;opacity:0;transition:opacity 0.5s ease;}
.mp-word-en{font-family:var(--serif);font-style:italic;font-weight:300;font-size:22px;color:var(--text-body);opacity:0;transition:opacity 0.5s ease;}
.mp-word-en.show,.mp-word-respell.show,.mp-word-pos.show{opacity:1;}
.mp-word-audio{width:34px;height:34px;border-radius:50%;border:1px solid var(--ui-line);background:transparent;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.5s ease;}
.mp-word-audio.show{opacity:1;}
.mp-tap-zone{margin-top:6px;text-align:center;position:relative;}
.mp-tap-circle{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(224,188,122,0.2);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;transition:border-color 0.4s;position:relative;}
.mp-tap-circle.tapped{border-color:rgba(224,188,122,0.35);}
.mp-tap-dot{width:10px;height:10px;border-radius:50%;background:var(--amber);opacity:0.22;transition:opacity 0.4s,transform 0.4s;}
.mp-tap-dot.tapped{opacity:0.65;transform:scale(1.5);}
.mp-tap-label{font-size:10px;letter-spacing:0.16em;color:rgba(224,188,122,0.65);text-transform:uppercase;transition:opacity 0.3s;}
.mp-tap-pulse{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:1px solid rgba(224,188,122,0.5);opacity:0;pointer-events:none;}
.mp-tap-pulse.go{animation:mpTapPulse 0.9s ease-out;}
@keyframes mpTapPulse{0%{opacity:0.6;transform:scale(1);}100%{opacity:0;transform:scale(1.9);}}

/* MP1–MP3, MP5 shared heads */
.mp-head-word{font-family:var(--serif);font-size:32px;font-weight:300;color:var(--amber);letter-spacing:0.02em;text-align:center;margin-bottom:3px;}
.mp-head-en{font-family:var(--serif);font-style:italic;font-weight:300;font-size:17px;color:var(--text-sub);text-align:center;margin-bottom:7px;}
.mp-head-en--left{text-align:left;margin-bottom:3px;}

.mp-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:15px 17px;margin-bottom:10px;}
.mp-card-lbl{font-size:10px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--amber);margin-bottom:8px;}
.mp-card-prose{font-size:14px;font-weight:400;color:var(--text-body);line-height:1.65;}
.mp-card-prose em{font-style:italic;color:var(--amber);}
.mp-forms-row{font-family:var(--serif);font-size:18px;font-weight:300;color:var(--text-body);letter-spacing:0.02em;line-height:1.6;}
.mp-changes-note{border-top:1px solid rgba(224,188,122,0.08);padding-top:9px;margin-top:9px;font-size:11px;color:var(--text-muted);}

.mp-content--hook{padding-top:140px;}
.mp-hook-pill{background:var(--card-bg);border:1px solid var(--ui-line);border-radius:16px;padding:20px 22px;font-family:var(--serif);font-size:16px;font-weight:300;color:var(--text-body);line-height:1.65;font-style:italic;text-align:center;}

.mp-ex{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:14px 16px;margin-bottom:10px;}
.mp-ex-num{font-size:10px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--amber);margin-bottom:7px;}
.mp-ex-pl{font-family:var(--serif);font-size:17px;font-weight:300;color:var(--text-body);line-height:1.45;margin-bottom:4px;}
.mp-ex-pl em{font-style:normal;font-weight:500;color:var(--amber);}
.mp-ex-respell{font-size:13px;color:rgba(224,188,122,0.6);font-style:italic;line-height:1.5;margin-bottom:4px;}
.mp-ex-en{font-size:12px;color:var(--text-muted);font-weight:400;line-height:1.55;}

.mp-review-hdr{text-align:left;font-size:10px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);margin-bottom:12px;}
.mp-review-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:18px;padding:22px 18px;text-align:center;margin-bottom:12px;}
.mp-review-prompt{font-family:var(--serif);font-style:italic;font-size:15px;font-weight:300;text-align:left;color:var(--text-body);margin-bottom:9px;}
.mp-review-big{font-family:var(--serif);font-size:42px;font-weight:300;color:var(--amber);line-height:1;margin-bottom:5px;}
.mp-review-respell{font-size:12px;color:rgba(224,188,122,0.65);font-style:italic;}
.mp-qopts{display:flex;flex-direction:column;gap:7px;margin-bottom:11px;}
.mp-qopt{background:var(--card-bg);border:1px solid var(--ui-line);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--text-body);text-align:left;font-family:var(--sans);font-weight:400;line-height:1.3;display:flex;align-items:center;justify-content:space-between;}
.mp-qopt--correct{background:rgba(143,191,159,0.15);border-color:var(--sage);color:var(--sage);}
.mp-qopt-mark{display:inline-flex;margin-left:6px;vertical-align:middle;}
.mp-qresult{font-size:13px;text-align:center;min-height:18px;font-weight:400;margin-top:3px;color:var(--sage);}
.mp-review-context{font-size:11px;color:var(--text-muted);font-style:italic;line-height:1.6;text-align:center;margin-top:11px;}

.mp-content--summary{padding-top:106px;}
.mp-sum-milestone{font-family:var(--serif);font-size:17px;font-weight:300;color:var(--amber);text-align:center;margin-bottom:14px;font-style:italic;line-height:1.3;}
.mp-sum-word{font-family:var(--serif);font-size:42px;font-weight:300;color:var(--amber);letter-spacing:0.04em;text-align:center;margin-bottom:4px;}
.mp-sum-en{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);text-align:center;margin-bottom:18px;}
.mp-sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px;}
.mp-sum-tile{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:13px;}
.mp-sum-tile--wide{grid-column:span 2;}
.mp-sum-tile-lbl{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px;}
.mp-sum-tile-val{font-family:var(--serif);font-size:22px;font-weight:300;color:var(--text-body);}
.mp-sum-tile-val--streak{display:flex;align-items:center;gap:5px;}
.mp-sum-tile-sm{font-size:11px;color:var(--text-muted);font-weight:400;line-height:1.6;}
.mp-btn-next{width:100%;height:44px;background:rgba(224,188,122,0.1);border:1.5px solid var(--ui-line);border-radius:100px;color:var(--amber);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-family:var(--sans);display:flex;align-items:center;justify-content:center;}

/* ═══ TIERS (W23 — A4's side-by-side grid) ═══
   THE W15b STACKING DECISION IS SUPERSEDED by the founder's A4 layout: two
   columns, the Pro card wider (1fr / 1.2fr), which also answers the dead-space
   problem the stack was built to remove. Recorded at ledger v1.33. */

.tiers{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:1.75rem;
  align-items:stretch;
  margin-top:3rem;
}

.card{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:20px;
  padding:2.75rem 2.5rem;
}

.tier{display:flex;flex-direction:column;}

.tier--pro{
  border-color:var(--ui-line);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:0 24px 60px rgba(224,188,122,0.07);
}

.tier h3{
  font-family:var(--serif);
  font-weight:300;
  font-size:var(--fs-heading);
  color:var(--ink-hi);
  margin:0 0 0.375rem;
  line-height:var(--lh-tight);
}

.tier .tier-price{
  font-family:var(--sans);
  font-size:var(--fs-small);
  color:var(--ink-body);
  margin:0 0 1.75rem;
}

/* W33 — the annual total made to stand out, per mock-up A4. Deliberately the
   ANNUAL figure, not the monthly-equivalent one: the "DO NOT LEAD ON THE
   MONTHLY-EQUIVALENT FIGURE" rule above (site-brief.md, DMCC Act 2024 total-
   price provisions) already established that the annual total is the sum
   actually taken and must lead; this emphasis reinforces that precedence
   rather than working against it. font-weight:500 — the heaviest real DM
   Sans weight this site loads (400/500 only); 600/700 would be browser-
   synthesised fake-bold, which architectural-principles.md and this file's
   own history (see .tier li strong, above) already flag as a defect. */
.price-lead{
  color:var(--amber);
  font-weight:500;
  font-size:1.375rem;
}

.tier ul{list-style:none;margin:0 0 2rem;padding:0;}

.tier li{
  position:relative;
  padding-left:1.5rem;
  margin-bottom:1rem;
  color:var(--ink-body);
  font-size:var(--fs-small);
  line-height:var(--lh-body);
}
.tier li:last-child{margin-bottom:0;}
.tier li::before{
  content:'';
  position:absolute;
  left:0;top:0.75em;
  width:0.4375rem;height:0.4375rem;
  border-radius:50%;
  background:var(--fill-active);
}
.tier li strong{font-weight:500;}   /* the §4c rule site-brief specified at W15 */

/* .tier-cta DELETED AT W42 with the markup it styled — both tier cards'
   "Be first to know" buttons are removed (index.html #what-you-get).
   Confirmed unused: grep for the class name returned zero remaining
   matches across all eight pages before removal. */

/* ── TIER-COMPACT — compact tier list (W27 — mock-up A4's short icon-row
   bullets, replacing the W12–W25 long-form cards; see site-brief.md W27 and
   claims-register.md CR-050) ── */

.tier-sub{
  font-family:var(--sans);
  font-size:var(--fs-small);
  color:var(--ink-body);
  margin:0 0 1.75rem;
}

.tier-list{list-style:none;margin:0 0 2rem;padding:0;}
.tier-list li{
  display:flex;align-items:center;gap:0.75rem;
  padding-left:0;
  color:var(--ink-hi);
  font-size:var(--fs-small);
  font-weight:500;
  line-height:var(--lh-tight);
  margin-bottom:1.125rem;
}
.tier-list li:last-child{margin-bottom:0;}
.tier-list li::before{content:none;}
.tier-list .ico{width:1.125rem;height:1.125rem;flex:none;color:var(--amber);}

.tier-fortnight{
  margin-top:1.25rem;
  font-size:var(--fs-small);
  color:var(--sage);
  line-height:var(--lh-body);
}
.tier-fortnight strong{font-weight:500;}

/* ── Pricing rules (.price-rows, .price-row, .price-plan, .price-figure,
   .price-note, .price-terms) DELETED AT W35 with the markup they styled —
   see index.html's #what-you-get section comment for the deletion note.
   Confirmed unused: grep for each class name returned zero remaining
   matches across all eight pages before removal. ── */

/* ═══ WHAT'S INSIDE (W25 — A4's three-column feature grid) ═══ */

.feats{
  list-style:none;padding:0;
  margin:2.5rem 0 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.375rem;
}

.feat{
  position:relative;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:2rem 1.75rem;
  transition:border-color .2s ease;
}
.feat:hover{border-color:rgba(224,188,122,0.4);}

/* W37 — the two Pro cards get the same amber-perimeter treatment .tier--pro
   gives the Pro pricing card, at a scale that suits the smaller box: the
   border moves to --ui-line (the same amber-tinted line token, not a new
   colour) and a faint amber glow sits behind it. Background is deliberately
   left at --panel, unlike .tier--pro's gradient — the founder's instruction
   was the perimeter, not the fill, and the ico--pro amber icon plus the
   pro-tag badge already carry enough amber inside the card without it. */
.feat--pro{
  border-color:var(--ui-line);
  box-shadow:0 16px 40px rgba(224,188,122,0.07);
}
.feat--pro:hover{border-color:var(--amber);}   /* stays amber-forward on hover, rather than fading toward the plain-card hover value */

.feat h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.5rem;
  color:var(--ink-hi);
  margin:1.125rem 0.5rem 0.5rem 0;
}
.feat p{font-size:var(--fs-small);color:var(--ink-body);margin:0;}

.ico--pro{stroke:var(--amber);}   /* the two Pro-only cards keep the amber icon */

/* W37 — moved out of the heading's inline flow and pinned to the card's own
   top-right corner (the same inset as the card's own padding, so it lines up
   with the icon badge's top edge). Previously inline after the h3 text, which
   put it at a different height on "My Dictionary" (one line) than on
   "Grammar in plain language" (wraps to two) — the founder flagged the
   inconsistency; this fixes it by taking the badge out of the heading's line-
   wrap entirely rather than trying to tune the wrap point. */
.pro-tag{
  position:absolute;
  top:2rem;right:1.75rem;
  display:inline-block;
  font-family:var(--sans);
  font-size:0.625rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--amber);
  border:1px solid var(--amber);
  border-radius:999px;
  padding:0.125rem 0.5rem;
}

/* ═══ WHAT LUMESSA WILL NEVER DO (W22; A4's cell grid at W23; section
   background at W32; hairline border added at W34 — see below) ═══ */

/* W32 — founder flagged the section background missing against mock-up A4.
   The grid cells (.never-grid li below) have always used --bg deliberately;
   what was missing is the SECTION sitting on --panel behind them, which is
   what makes the darker cells read as a contrast rather than blend into an
   identically-coloured backdrop. Confirmed by pixel sampling both
   screenshots: mock-up A4's section reads #0E1322 (--panel) outside the grid
   cells, the live site's read #090C13 (--bg, i.e. no rule at all) at the same
   points.

   W32 SHIPPED WITHOUT A BORDER ON THE READING THAT THE MOCK-UP SHOWED A PLAIN
   COLOUR CHANGE, NOT A HAIRLINE. W34 OVERRIDES THAT ON A DIRECT FOUNDER
   INSTRUCTION: top and bottom hairline borders added, matching the truths
   strip's own treatment above it (main > section.truths, same --hairline
   token — rgba(224,188,122,0.20), i.e. amber at 20% opacity, not a separate
   colour). The W32 pixel-reading of the mock-up screenshot was not wrong —
   no hairline was visible in the specific image sampled — but the founder's
   instruction is for the live design and takes precedence over what one
   screenshot happened to show. */
main > section#never{
  background:var(--panel);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}

.never-grid{
  list-style:none;
  padding:0;
  margin:2.5rem 0 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--hairline);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  overflow:hidden;
}

.never-grid li{
  background:var(--bg);
  padding:2rem 1.875rem;
  display:flex;gap:1rem;align-items:center;
  margin:0;
}

.gone{
  font-family:var(--serif);
  font-weight:300;
  font-size:1.4375rem;             /* 23px, A4 */
  color:var(--ink-body);           /* legible first, struck second — W22 */
  text-decoration:line-through;
  text-decoration-color:rgba(224,188,122,0.7);
  text-decoration-thickness:1.5px;
}

.never-grid p{margin:0.375rem 0 0;font-size:var(--fs-small);line-height:1.55;color:var(--ink-body);}

.never-close{
  margin:3.25rem 0 0;
  max-width:41.25rem;
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:1.625rem;
  color:var(--ink-hi);
  line-height:1.45;
}

/* ═══ LANGUAGES (W22; centred pills per A4 at W23) ═══ */

.langs{
  list-style:none;padding-left:0;
  margin:2.5rem 0 0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:0.875rem;
}

.lang{
  border:1.5px solid var(--hairline);
  border-radius:999px;
  padding:0.8125rem 1.625rem;
  font-size:var(--fs-small);
  font-weight:500;
  color:rgba(240,234,221,0.45);    /* A4's "soon" state — decorative dimming;
                                      the full list is restated in the FAQ    */
}

.lang--now{
  border-color:var(--amber);
  color:var(--amber);
  background:var(--fill-quiet);
}

.lang-note{
  margin:1.625rem auto 0;
  font-size:var(--fs-small);
  color:var(--text-sub);
  text-align:center;
  max-width:var(--prose);
}

#languages .prose{text-align:center;}

/* ── FAQ (A4's serif rows and +/− marker) ── */

.faq{margin:3rem auto 0;max-width:42.5rem;border-top:1px solid var(--hairline);}

.faq details{border-bottom:1px solid var(--hairline);}

.faq summary{
  cursor:pointer;
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.625rem 0;
  font-family:var(--serif);
  font-weight:300;
  font-size:1.4375rem;             /* 23px, A4 */
  color:var(--ink-hi);
  line-height:var(--lh-tight);
}

.faq summary::-webkit-details-marker{display:none;}

.faq summary::after{
  content:"+";
  font-family:var(--sans);
  color:var(--amber);
  font-size:1.5rem;
  font-weight:400;
  flex:none;
}
.faq details[open] summary::after{content:"−";}

.faq .answer{
  padding:0 0 1.625rem;
  max-width:42.5rem;
  font-size:1rem;
  color:var(--ink-body);
  line-height:var(--lh-body);
}
.faq .answer p{margin-bottom:1rem;}

/* ═══ CLOSING — the launch form (moved after the FAQ at W23, per A4) ═══
   The §13c requirements stand exactly: a visible <label>, no placeholder, the
   purpose statement at the field (CR-019), validation in words. What A4 adds
   is the treatment: centred, a quiet radial glow, the pill row. */

main > section.closing{
  background:radial-gradient(60% 50% at 50% 100%, rgba(224,188,122,0.10) 0%, transparent 70%);
}

.closing .prose{margin-inline:auto;}
.closing .section-title{text-align:center;}

form.notify{margin:2.5rem auto 0;max-width:32.5rem;text-align:left;}

form.notify label[for="notify-email"]{
  display:block;
  font-family:var(--sans);
  font-size:var(--fs-small);
  font-weight:500;
  color:var(--ink-hi);
  margin-bottom:0.5rem;
}

.notify-purpose{
  font-size:var(--fs-small);
  color:var(--ink-body);
  line-height:var(--lh-body);
  margin:0 0 1.25rem;
  max-width:52ch;
}

.notify-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  align-items:stretch;
}

form.notify input[type="email"]{
  flex:1 1 16rem;
  min-width:0;
  background:var(--fill-quiet);
  color:var(--ink-hi);
  border:1.5px solid var(--ui-line);   /* a CONTROL: --hairline may not edge it */
  border-radius:999px;
  padding:0.875rem 1.5rem;
  font-family:var(--sans);
  font-size:var(--fs-body);   /* must stay ≥16px — iOS zoom on focus */
  line-height:var(--lh-ui);
}
form.notify input[type="email"]:hover{border-color:var(--amber);}

form.notify button{
  flex:0 0 auto;
  background:var(--amber);
  color:var(--btn-ink);
  border:1.5px solid var(--amber);
  border-radius:999px;
  padding:0.875rem 1.75rem;
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:500;
  line-height:var(--lh-ui);
  cursor:pointer;
}
form.notify button:hover{background:var(--fill-active);border-color:var(--fill-active);}

.notify-note{
  margin:1.25rem 0 0;
  font-size:var(--fs-small);
  color:var(--ink-body);
  line-height:var(--lh-body);
  max-width:52ch;
}

.notify-status{
  margin:1rem 0 0;
  font-size:var(--fs-small);
  color:var(--ink-hi);
  line-height:var(--lh-body);
}
.notify-status:empty{margin:0;}

.hp{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ── Contact address (subpages) ── */

.contact-address{
  display:inline-block;
  border-bottom:1px solid var(--ui-line);
  padding-bottom:0.125rem;
}
.contact-address:hover{border-bottom-color:var(--amber);}

/* ── Footer — statutory disclosures. All of it at or above the body floor. ── */

.site-footer{
  border-top:1px solid var(--hairline);
  margin-top:var(--gap-section);
  padding:4rem 0 3rem;
  font-size:var(--fs-small);
  color:var(--ink-body);
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}

@media (min-width:48rem){
  .footer-grid{grid-template-columns:1.4fr 1fr;}
}

.site-footer h2{
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 1.125rem;
}

.site-footer p{margin:0 0 0.875rem;}
.site-footer ul{list-style:none;margin:0 0 0.875rem;padding:0;}
.site-footer li{margin-bottom:0.375rem;}

.copyright{
  margin-top:2.5rem;
  padding-top:1.75rem;
  border-top:1px solid var(--hairline);
  color:var(--ink-soft);
  font-size:var(--fs-fine);
}

/* ── 404 and the narrow pages ── */

.page-narrow{max-width:var(--prose);}

.page-narrow h2{
  font-family:var(--serif);
  font-size:var(--fs-subtitle);
  font-weight:300;
  color:var(--ink-hi);
  line-height:var(--lh-tight);
  margin:2.5rem 0 1rem;
}

.page-narrow ul{margin:0 0 1.25rem;padding-left:1.25rem;color:var(--ink-body);}
.page-narrow li{margin-bottom:0.5rem;}

.page-narrow .meta{
  color:var(--text-sub);
  font-size:var(--fs-small);
}

.centred{
  text-align:center;
  padding:6rem 1.5rem;
}

.home-link{margin-top:2rem;}

/* ── Numbered steps (subpages) ── */

.steps{
  list-style:none;
  counter-reset:step;
  margin:0 0 1.25rem;
  padding:0;
}

.steps li{
  counter-increment:step;
  position:relative;
  padding-left:2.5rem;
  margin-bottom:0.875rem;
  color:var(--ink-body);
}
.steps li:last-child{margin-bottom:0;}

.steps li::before{
  content:counter(step);
  position:absolute;
  left:0;top:0.125rem;
  width:1.5rem;height:1.5rem;
  border:1px solid var(--ui-line);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-fine);
  color:var(--amber);
}

/* ── Platform-split panels (subpages) ── */

.platform-split{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin:1.5rem 0;
}

@media (min-width:48rem){
  .platform-split{grid-template-columns:1fr 1fr;}
}

.platform-split .card h3{
  font-family:var(--serif);
  font-size:1.375rem;
  font-weight:300;
  color:var(--ink-hi);
  margin:0 0 0.75rem;
}

.page-narrow .card{margin-top:1.5rem;}

.page-narrow .card h3{
  font-family:var(--serif);
  font-size:1.375rem;
  font-weight:300;
  color:var(--ink-hi);
  margin:0 0 0.75rem;
}

.page-narrow .card p{color:var(--ink-body);}
.page-narrow .card p:last-child{margin-bottom:0;}

.prelaunch{
  border-left:2px solid var(--amber);
  padding-left:1.25rem;
  color:var(--ink-body);
}

/* ── Motion — the fade-and-rise on section entry (§7). Gated on .js so the
   "hidden until observed" state is unreachable without script. ── */

@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(0.75rem);transition:opacity 600ms ease,transform 600ms ease;}
  .js .rise.seen{opacity:1;transform:none;}
}

/* ── Narrow layout ── */

/* .feats added here — the fixed 3-column grid (line ~1029) had no narrow-
   width override, unlike .tiers and .never-grid beside it, so "What's
   included" stayed three columns wide on phones and forced the section
   (and the page) wider than the viewport. Same collapse pattern as its
   neighbours: single column below 56.25rem (900px). NOT YET RECORDED in
   site-ledger.md or bumped to a lettered W-batch — flagged to the founder
   to log per the project's own documents-before-code discipline. */
@media (max-width:56.25rem){
  .hero-grid,.how-grid{grid-template-columns:minmax(0,1fr);gap:3.5rem;}
  .tiers{grid-template-columns:minmax(0,1fr);}
  .never-grid{grid-template-columns:minmax(0,1fr);}
  .feats{grid-template-columns:minmax(0,1fr);}
  .iphone{width:300px;}
  .ls-clock{font-size:74px;}
  .notify-row{flex-direction:column;}
  form.notify input[type="email"],form.notify button{flex-basis:auto;}   /* W24: the 16rem basis is a WIDTH; stacked, it became a 256px HEIGHT. Selector matches the originals' specificity so it wins the cascade. */
  .hero h1{max-width:none;}
}