/* ============================================================
   Réussik — vitrine

   Les tokens sont ceux de l'app (web/src/app.css, palette lagon) :
   mêmes formules OKLCH, même sol blanc pur / noir pur, mêmes sept
   teintes de domaines. Le site et l'app doivent se ressembler
   parce qu'ils sont la même chose vue de deux endroits.

   Les fontes sont **auto-hébergées** et pas chargées depuis un CDN
   tiers : ce site explique aux enseignants ce qu'il fait de leurs
   données, il ne peut pas commencer par envoyer l'adresse IP de
   chaque visiteur à un tiers pour aller chercher un caractère.
   ============================================================ */

@font-face {
  font-family: 'Source Serif 4 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('fonts/source-serif-4-latin-wght-normal.woff2') format('woff2-variations');
  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: 'Source Serif 4 Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url('fonts/source-serif-4-latin-wght-italic.woff2') format('woff2-variations');
  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: 'Work Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/work-sans-latin-wght-normal.woff2') format('woff2-variations');
  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;
}

/* ---------- Tokens : clair ---------- */
:root {
  --aH: 196; --nH: 210; --nC: 0.012;

  --bg: oklch(100% 0 var(--nH));
  --surface: oklch(98.2% calc(var(--nC) * 0.5) var(--nH));
  --surface2: oklch(94.6% calc(var(--nC) + 0.006) var(--nH));
  --text: oklch(25% 0.022 var(--nH));
  --muted: oklch(51% 0.02 var(--nH));
  --border: oklch(88% calc(var(--nC) + 0.004) var(--nH));
  --accent: oklch(58% 0.13 var(--aH));
  --accent-soft: oklch(91% 0.055 var(--aH));
  --accent-text: oklch(98% 0.008 var(--aH));
  --gold: oklch(70% 0.14 85);
  --success: oklch(60% 0.1 150);
  --shadow-soft: 0 1px 2px oklch(30% 0.02 60 / .07), 0 10px 24px oklch(50% 0.07 var(--aH) / .12);
  --shadow-lift: 0 2px 4px oklch(30% 0.02 60 / .08), 0 30px 50px oklch(45% 0.09 var(--aH) / .16);
  --grid-ink: oklch(58% 0.04 var(--nH) / .13);
  --paper: oklch(100% 0 var(--nH));
  --paper-ink: oklch(25% 0.022 210);
  --paper-muted: oklch(52% 0.02 210);
  --paper-rule: oklch(85% 0.01 210);

  --d1: oklch(58% 0.19 22);
  --d2: oklch(66% 0.162 52);
  --d3: oklch(75% 0.146 88);
  --d4: oklch(60% 0.165 148);
  --d5: oklch(56% 0.16 252);
  --d6: oklch(56% 0.19 300);
  --d7: oklch(62% 0.19 348);

  --font-body: 'Work Sans Variable', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-disp: 'Source Serif 4 Variable', ui-serif, Georgia, 'Times New Roman', serif;

  color-scheme: light;
}

/* ---------- Tokens : sombre ----------
   Trois états, pas deux : le réglage « système » n'estampille rien, donc
   la media query doit tenir le cas par défaut, et l'attribut les choix
   explicites — dans les deux sens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: oklch(0% 0 var(--nH));
    --surface: oklch(17% calc(var(--nC) + 0.008) var(--nH));
    --surface2: oklch(23% calc(var(--nC) + 0.01) var(--nH));
    --text: oklch(94% 0.01 var(--nH));
    --muted: oklch(69% 0.014 var(--nH));
    --border: oklch(37% calc(var(--nC) + 0.008) var(--nH));
    --accent: oklch(74% 0.13 var(--aH));
    --accent-soft: oklch(34% 0.07 var(--aH));
    --accent-text: oklch(14% 0.02 var(--aH));
    --gold: oklch(80% 0.14 85);
    --success: oklch(74% 0.1 150);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px oklch(20% 0.03 var(--aH) / .35);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 30px 50px oklch(20% 0.04 var(--aH) / .5);
    --grid-ink: oklch(70% 0.03 var(--nH) / .10);
    /* Le cahier reste du papier : un document imprimé est blanc dans les
       deux thèmes, et le montrer en sombre mentirait sur ce qu'on reçoit. */
    --paper: oklch(96% 0.004 var(--nH));
    --d1: oklch(76.5% 0.144 22);
    --d2: oklch(78.5% 0.123 52);
    --d3: oklch(80.75% 0.111 88);
    --d4: oklch(77% 0.125 148);
    --d5: oklch(76% 0.122 252);
    --d6: oklch(76% 0.144 300);
    --d7: oklch(77.5% 0.144 348);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: oklch(0% 0 var(--nH));
  --surface: oklch(17% calc(var(--nC) + 0.008) var(--nH));
  --surface2: oklch(23% calc(var(--nC) + 0.01) var(--nH));
  --text: oklch(94% 0.01 var(--nH));
  --muted: oklch(69% 0.014 var(--nH));
  --border: oklch(37% calc(var(--nC) + 0.008) var(--nH));
  --accent: oklch(74% 0.13 var(--aH));
  --accent-soft: oklch(34% 0.07 var(--aH));
  --accent-text: oklch(14% 0.02 var(--aH));
  --gold: oklch(80% 0.14 85);
  --success: oklch(74% 0.1 150);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px oklch(20% 0.03 var(--aH) / .35);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 30px 50px oklch(20% 0.04 var(--aH) / .5);
  --grid-ink: oklch(70% 0.03 var(--nH) / .10);
  --paper: oklch(96% 0.004 var(--nH));
  --d1: oklch(76.5% 0.144 22);
  --d2: oklch(78.5% 0.123 52);
  --d3: oklch(80.75% 0.111 88);
  --d4: oklch(77% 0.125 148);
  --d5: oklch(76% 0.122 252);
  --d6: oklch(76% 0.144 300);
  --d7: oklch(77.5% 0.144 348);
}

/* ---------- Socle ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-disp);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
a { color: var(--accent); }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 720px); margin-inline: auto; }

.eyebrow {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .13em; color: var(--muted);
}

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
/* L'en-tête est collant : sans cette réserve, un lien d'ancre amène la section
   sous la barre et son titre est caché. */
section[id], main[id] { scroll-margin-top: 8.5rem; }
.section-title { font-size: clamp(1.65rem, 4vw, 2.4rem); margin-top: .5rem; }
.section-lede { margin-top: 1rem; color: var(--muted); max-width: 56ch; }

/* La grille du cahier : le sol de l'icône, donc le sol du site. */
.grid-ground {
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---------- Boutons ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 1rem;
  padding: .85rem 1.5rem; border-radius: 11px;
  background: var(--accent); color: var(--accent-text);
  text-decoration: none; border: 1px solid transparent;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.cta.ghost {
  background: transparent; color: var(--text);
  border-color: var(--border); box-shadow: none;
}
.cta.ghost:hover { border-color: var(--accent); color: var(--accent); }
/* Décoratif : le mot « Aperçu » porte le sens, le symbole ne fait que l'annoncer. */
.cta .cta-ico { font-size: 1.05em; line-height: 1; margin-right: .1rem; }

.founder { font-size: .88rem; color: var(--muted); max-width: 44ch; }
.founder b { color: var(--text); font-weight: 600; }
.founder .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); margin-right: .5rem; vertical-align: middle;
}

/* ---------- L'offre fondatrice ----------
   Elle était une ligne grise sous les boutons, du même poids que la mention
   légale d'à côté — c'est l'argument commercial du site, et il se lisait comme
   une note de bas de page. Deux endroits, deux rôles, et deux formulations pour
   qu'ils ne se répètent pas : un bandeau au-dessus de tout, qui défile et ne
   revient pas, et un encadré dans le hero, là où la décision se prend.

   Le vert, pas l'or : l'or est la couleur de « très réussie » et ne paraît qu'à
   quatre endroits dans ce produit. Une offre commerciale n'en est pas un. */
/* `nowrap`, et c'est le texte seul qui se replie : en `wrap`, la pastille et la
   flèche prenaient chacune une ligne à elles sur un téléphone — un point vert
   perdu au-dessus, une flèche perdue en dessous. */
.announce {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; flex-wrap: nowrap;
  padding: .6rem 1.25rem;
  background: color-mix(in oklab, var(--success) 14%, var(--bg));
  border-bottom: 1px solid color-mix(in oklab, var(--success) 30%, transparent);
  color: var(--text); text-decoration: none;
  font-size: .88rem; text-align: center;
}
.announce b { font-weight: 600; }
.announce > span:nth-child(2) { min-width: 0; }
.announce-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none;
}
.announce-go { color: var(--success); font-weight: 600; flex: none; }
.announce:hover { background: color-mix(in oklab, var(--success) 22%, var(--bg)); }


/* ---------- En-tête ---------- */
/* Le bandeau d'offre et la barre de navigation collent **ensemble**, dans un
   seul conteneur : le prix doit rester visible tout du long. Deux éléments
   collants indépendants auraient demandé de connaître la hauteur du premier
   pour caler le second — et elle change avec la largeur de l'écran. */
.stickytop { position: sticky; top: 0; z-index: 50; }

.topbar {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar .inner { display: flex; align-items: center; gap: .7rem; padding: .85rem 0; }
/* Le logotype : la hauteur commande, la largeur suit ce que porte le fichier.
   Les attributs width/height du HTML sont ceux du fichier — ils réservent la
   place avant que l'image n'arrive, ce qui évite que la barre saute. */
.wordmark { display: flex; align-items: center; text-decoration: none; }
.wordmark img { display: block; height: 30px; width: auto; }
.wordmark img.wm-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .wordmark img.wm-light { display: none; }
  .wordmark img.wm-dark { display: block; }
}
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 500; }
.topbar nav a:hover { color: var(--text); }
.topbar nav a.cta { color: var(--accent-text); font-size: .92rem; padding: .55rem 1.05rem; }
.topbar nav a.cta:hover { color: var(--accent-text); }

/* ---------- Ruban des sept domaines ---------- */
.ribbon { display: flex; height: 5px; border-radius: 3px; overflow: hidden; width: 112px; }
.ribbon i { flex: 1; }
.ribbon i:nth-child(1) { background: var(--d1); }
.ribbon i:nth-child(2) { background: var(--d2); }
.ribbon i:nth-child(3) { background: var(--d3); }
.ribbon i:nth-child(4) { background: var(--d4); }
.ribbon i:nth-child(5) { background: var(--d5); }
.ribbon i:nth-child(6) { background: var(--d6); }
.ribbon i:nth-child(7) { background: var(--d7); }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 5.5rem);
}
/* Le ruban, puis à qui on parle, puis le titre.
   **Aucun motif inventé ici.** La page annonce chacune de ses sections par une
   sur-ligne en petites capitales grises ; le hero était le seul endroit à s'en
   fabriquer un autre — un cadre, une couleur, une taille à lui — et c'est ce qui
   le faisait lire comme une pièce rapportée. Le texte reprend donc la classe
   `.eyebrow` telle quelle, et non une copie de ses valeurs : elles ne pourront
   plus diverger. Le ruban reste, il est la seule couleur de l'ensemble.

   L'accroche ne dit plus « Réussik, un outil dédié aux… » : le mot-symbole est
   dans la barre juste au-dessus, et le nom paraissait deux fois à cent pixels
   d'écart. « Pour les professeurs des écoles de cycle 1 » s'adresse au lieu de
   décrire, et le « pour » fait le tri en deux mots. */
.hero .hero-eyebrow {
  display: flex;
  /* `flex-start` et non `center` : sur un téléphone la phrase passe à deux
     lignes, et un ruban centré sur le bloc flottait entre les deux. La taille
     est reprise ici pour que l'em du ruban se mesure sur la ligne et non sur le
     corps du texte — le décalage suit la typographie au lieu d'être un nombre
     de pixels qui vieillit. */
  align-items: flex-start;
  gap: .65rem;
  margin-top: 1.4rem;
  font-size: .72rem;
  line-height: 1.6;
}
.hero .hero-eyebrow .ribbon {
  width: 34px; height: 4px; flex: none;
  margin-top: .72em;
}

.hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); margin-top: .75rem; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { margin-top: 1.25rem; font-size: clamp(1.02rem, 1.5vw, 1.14rem); color: var(--muted); max-width: 36ch; }
.hero .acts { margin-top: 2rem; display: flex; gap: .85rem; flex-wrap: wrap; }
.hero .founder { margin-top: 1.2rem; }

/* ---------- Le cahier ---------- */
.bookletwrap { position: relative; }
.bookletwrap .stack {
  position: absolute; inset: 0; background: var(--surface2);
  border-radius: 4px; transform: rotate(-3.2deg) translate(-3%, 2%);
  box-shadow: var(--shadow-soft);
}
/* La page de l'accroche est une image, plus un dessin en CSS. Ce bloc ne garde
   donc que ce qui fait « une feuille de papier » : le format, le filet, l'ombre
   et le plan au-dessus de la pile. Tout le reste — l'entête, la grille des
   quatre cartes, l'étoile, le mot de l'enseignante, et les quatre dégradés qui
   tenaient lieu de travaux d'enfants — a disparu avec lui. */
.booklet {
  /* Positionnée et au-dessus : `.stack` est en absolu, donc sans ça elle
     peint par-dessus le cahier — un élément positionné passe devant un
     bloc statique quel que soit l'ordre du document. */
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  aspect-ratio: 210 / 297; object-fit: cover; object-position: top center;
  background: var(--paper);
  border: 1px solid var(--paper-rule); border-radius: 4px;
  box-shadow: var(--shadow-lift);
}

/* ---------- Les trois étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.6rem; margin-top: 2.6rem; }
.step { border-top: 2px solid var(--border); padding-top: 1.1rem; display: grid; gap: .5rem; align-content: start; }
.step .n { font-family: var(--font-disp); font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1; }
.step h3 { font-size: 1.12rem; }
.step p { font-size: .95rem; color: var(--muted); }

/* ---------- Deux cahiers côte à côte ---------- */
.spread { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 2.8rem; }
.spread figure { margin: 0; display: grid; gap: .75rem; }
.spread figcaption { font-size: .87rem; color: var(--muted); }

/* Une page du cahier, en image : c'est du papier, donc elle est blanche dans
   les deux thèmes et porte son propre filet — le lavis d'un aperçu de PDF, pas
   une carte de l'interface. Le rapport est écrit dans les attributs `width` et
   `height` de la balise, ce qui réserve la place avant que l'image n'arrive :
   sans ça, deux feuilles A4 qui se chargent tard font sauter toute la section.
   Elles sont en chargement différé, comme le reste des visuels de la page. */
.sheet {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--paper-rule); border-radius: 4px;
  box-shadow: var(--shadow-lift);
}
.sheet-get {
  margin-top: 1.8rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem;
}
.sheet-note { font-size: .87rem; color: var(--muted); max-width: 34ch; }

/* ---------- Le programme (accroche C) ---------- */
.programme { background: var(--surface); border-block: 1px solid var(--border); }
.programme h2 .num { color: var(--accent); font-variant-numeric: tabular-nums; }
.domgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-top: 2.6rem; }
.domcard {
  border-radius: 11px; padding: .95rem 1rem; background: var(--bg);
  border: 1px solid var(--border); border-top: 3px solid var(--dcol);
  display: grid; gap: .25rem; align-content: start;
}
.domcard .dn { font-size: .93rem; font-weight: 600; line-height: 1.28; }
/* L'emoji du domaine, celui que l'app pose déjà sur chaque pastille
   (web/src/lib/domains.ts). Il est décoratif — le nom est juste à côté —
   donc masqué aux lecteurs d'écran, qui liraient sinon « visage qui parle »
   avant chaque intitulé. */
.domcard .de { margin-right: .4rem; font-size: 1rem; font-style: normal; }
.domcard .dc { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Vos données ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 2.6rem; }
.fact { display: grid; gap: .45rem; align-content: start; }
.fact h3 { font-size: 1.05rem; }
.fact p { font-size: .93rem; color: var(--muted); }
.fact .key {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--success);
}

/* ---------- Tarif ---------- */
.pricing {
  margin-top: 2.6rem; display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* Chaque carte fait sa hauteur. Sans ça, la plus courte est étirée à la
     hauteur de l'autre et le bouton « Créer ma classe » flotte au milieu d'un
     grand vide encadré : les deux colonnes ne disent plus la même quantité de
     choses depuis que le tarif est détaillé. */
  align-items: start;
}
.plan {
  border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem;
  background: var(--surface); display: grid; gap: .7rem; align-content: start;
}
.plan.featured { border-color: var(--accent); box-shadow: var(--shadow-soft); }
.plan h3 { font-size: 1.2rem; }
.plan .price { font-family: var(--font-disp); font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.plan .price small { font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--muted); }
/* Un prix en deux temps — « 19 € la première année, puis 29 €/an » — ne tient pas
   à côté du nombre : la précision passe dessous et reprend un interlignage
   normal, sinon elle hérite du 1,1 du grand chiffre et se serre sur deux lignes.
   Une classe à part, pour que « Gratuit à vie » reste sur une seule ligne. */
.plan .price.two-step small { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.35; }
.plan ul { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.plan li { font-size: .92rem; color: var(--muted); }
.plan .cta { margin-top: .6rem; }

/* ---------- FAQ ---------- */
.faq { margin-top: 2.4rem; display: grid; }
.faq details {
  border-top: 1px solid var(--border); padding: 1.05rem 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1.02rem;
  list-style: none; display: flex; align-items: center; gap: .8rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-left: auto; color: var(--accent);
  font-size: 1.3rem; line-height: 1; font-weight: 400;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { margin-top: .7rem; color: var(--muted); font-size: .95rem; max-width: 62ch; }

/* ---------- Appel final ---------- */
.finale { text-align: center; display: grid; gap: 1.2rem; justify-items: center; }
.finale h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.finale .star { width: 64px; }

/* ---------- Pied de page ---------- */
.footer { border-top: 1px solid var(--border); padding: 2.5rem 0 3.5rem; margin-top: 1rem; }
.footer .cols { display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: flex-start; }
.footer .about { max-width: 34ch; display: grid; gap: .6rem; }
.footer .about p { font-size: .88rem; color: var(--muted); }
.footer .lnk { display: grid; gap: .5rem; }
.footer .lnk h4 { font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.footer .lnk a { color: var(--text); text-decoration: none; font-size: .9rem; }
.footer .lnk a:hover { color: var(--accent); }
.footer .fine { margin-top: 2.5rem; font-size: .82rem; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 1.5rem; }
  .bookletwrap { max-width: 360px; width: 100%; margin-inline: auto; }
  .spread { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .topbar nav { gap: 1rem; }
  .topbar nav a:not(.cta) { display: none; }
}