/* ====================================================================
   WEBAVIS — public site
   --------------------------------------------------------------------
   ONE WORLD, TOP TO BOTTOM. The previous attempt put a black bar over a
   white page and the seam was the first thing anyone saw. Here the page
   is a single warm, light ground with a slow gradient bloom behind it,
   and contrast is spent in deliberate places — one deep section, two
   coloured tiles — rather than at the join between header and body.

   Colour comes from the product's own ramps (frontend/docs/
   COLOR_PALETTE.md): brand indigo for anything you can click, scoreSeo
   blue and scoreAi violet for the two readings and for nothing else.
   The neutrals are warm, as §5 asks.
   ==================================================================== */

:root {
  /* warm neutrals */
  --paper:      #FBFAF8;
  --paper-2:    #F4F2EE;
  --card:       #FFFFFF;
  --ink:        #17130F;
  --ink-2:      #57504A;
  --ink-3:      #8A8077;
  --line:       #E8E3DC;
  --line-2:     #D8D1C7;

  /* brand ramp */
  --brand-50:   #EEF2FF;
  --brand-100:  #E0E7FF;
  --brand-300:  #A5B4FC;
  --brand-500:  #6366F1;
  --brand-600:  #4F46E5;
  --brand-700:  #4338CA;
  --brand-900:  #312E81;

  /* the two readings */
  --seo-50:     #EFF6FF;
  --seo-100:    #DBEAFE;
  --seo-600:    #2563EB;
  --seo-900:    #1E3A8A;
  --ai-50:      #F5F3FF;
  --ai-100:     #EDE9FE;
  --ai-500:     #8B5CF6;
  --ai-900:     #4C1D95;

  --ok:         #16A34A;

  --f-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgb(23 19 15 / .04), 0 2px 8px -4px rgb(23 19 15 / .08);
  --shadow:    0 1px 2px rgb(23 19 15 / .04), 0 18px 40px -24px rgb(23 19 15 / .22);
  --shadow-lg: 0 2px 4px rgb(23 19 15 / .04), 0 40px 80px -40px rgb(23 19 15 / .3);

  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: clamp(2.5rem, 1.3rem + 4vw, 4.2rem); max-width: 17ch; }
h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
h3 { font-size: 1.22rem; letter-spacing: -.02em; }
p  { margin: 0; }
a  { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }
.lede { color: var(--ink-2); font-size: 1.12rem; max-width: 60ch; }
.eyebrow {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand-600);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2.5px solid var(--brand-500); outline-offset: 3px; border-radius: 6px; }

/* ---------------- the bloom behind everything ---------------- */
.bloom { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bloom i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .55;
}
.bloom .b1 { width: 60vw; height: 60vw; top: -22vw; left: -14vw; background: radial-gradient(closest-side, #C7D2FE, transparent 70%); animation: float1 28s ease-in-out infinite; }
.bloom .b2 { width: 48vw; height: 48vw; top: -10vw; right: -12vw; background: radial-gradient(closest-side, #DDD6FE, transparent 70%); animation: float2 34s ease-in-out infinite; }
.bloom .b3 { width: 52vw; height: 52vw; top: 48vh;  left: 42vw;  background: radial-gradient(closest-side, #DBEAFE, transparent 70%); animation: float1 40s ease-in-out infinite reverse; }

@keyframes float1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4%, 5%, 0) scale(1.1); } }
@keyframes float2 { 0%,100% { transform: translate3d(0,0,0) scale(1.06); } 50% { transform: translate3d(-5%, 4%, 0) scale(.96); } }

/* ---------------- header: a floating pill, not a bar ---------------- */
.site-header { position: sticky; top: 0; z-index: 60; padding-top: 14px; padding-bottom: 6px; }
.nav {
  display: flex; align-items: center; gap: 18px;
  background: rgb(255 255 255 / .72);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / .85);
  box-shadow: var(--shadow-sm);
  border-radius: 999px;
  padding: 9px 10px 9px 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; text-decoration: none; }
.brand .mark { display: block; height: 20px; width: auto; flex: none; }
.brand .mark-w { fill: currentColor; }
.nav-links { display: flex; gap: 6px; margin-left: 8px; }
.nav-links a { text-decoration: none; color: var(--ink-2); font-size: .93rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: background .18s ease, color .18s ease; }
.nav-links a:hover { background: var(--brand-50); color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* The language switcher: an icon and the current code, opening a menu
   of the two languages named in their own language.

   Built on <details> rather than script. This is a static site and the
   switcher is how somebody who landed in the wrong language gets out —
   it must not wait for JavaScript. The script adds only what <details>
   lacks: closing on Escape or on a click elsewhere.

   A menu rather than two visible links, matching the CRM: two codes
   side by side never say which is current and which is the offer. */
.lang { position: relative; }
.lang summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: rgb(255 255 255 / .6); list-style: none;
  transition: border-color .18s ease, background .18s ease;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { border-color: var(--line-2); }
.lang-code {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
}
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 170px; padding: 6px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg);
}
.lang-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 9px;
  font-size: .9rem; color: var(--ink); text-decoration: none;
}
.lang-menu a:hover { background: var(--brand-50); }
/* The tick keeps its space when hidden, so the two rows do not shift
   by its width depending on which language is current. */
.lang-menu .tick { display: flex; width: 15px; color: var(--brand-600); opacity: 0; }
.lang-menu .tick svg { width: 15px; height: 15px; }
.lang-menu a[aria-checked="true"] .tick { opacity: 1; }
.lang-menu a[aria-checked="true"] { font-weight: 600; }

/* Signing in is not a sales action, so it does not get a button. The
   one filled control in the header stays the CTA — two side by side
   and neither reads as the main thing. */
.nav-login {
  font-size: .9rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none; padding: 9px 12px; border-radius: 999px;
  white-space: nowrap; transition: color .18s ease, background .18s ease;
}
.nav-login:hover { color: var(--ink); background: var(--brand-50); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-body); font-weight: 600; font-size: .95rem;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, background .18s ease;
}
.btn-primary { background: var(--brand-600); color: #fff; box-shadow: 0 10px 26px -12px rgb(79 70 229 / .75); }
.btn-primary:hover { background: var(--brand-500); transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgb(79 70 229 / .85); }
.btn-ghost { background: rgb(255 255 255 / .7); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.btn-sm { padding: 10px 17px; font-size: .88rem; }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 999px; width: 40px; height: 40px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; }
.nav-toggle span::before { position: absolute; top: -5px; }
.nav-toggle span::after  { position: absolute; top: 5px; }

@media (max-width: 920px) {
  .nav-links { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; box-shadow: var(--shadow); margin: 0; }
  .nav-links.open { display: flex; }
  .nav { position: relative; }
  .nav-toggle { display: flex; }
  .nav .btn-primary { display: none; }
}

/* The sign-in link lives in the bar on wide screens and in the menu on
   phones. At 390 px the bar held the brand, the menu button, the
   language, the theme switch and "Se connecter" — 54 px more than the
   screen in French, 5 px in English — and the page scrolled sideways. */
.nav-links-login { display: none; }
@media (max-width: 560px) {
  .nav { gap: 10px; }
  .nav-right .nav-login { display: none; }
  .nav-links .nav-links-login { display: block; }
}

/* ---------------- sections ---------------- */
section { position: relative; }
.band { padding-block: clamp(72px, 9vw, 130px); }
.band-head { display: flex; flex-direction: column; gap: 16px; max-width: 64ch; }
.center { margin-inline: auto; text-align: center; align-items: center; }

/* ---------------- hero ---------------- */
.hero { padding-top: clamp(48px, 7vw, 92px); padding-bottom: clamp(56px, 7vw, 100px); }
.hero h1 { margin-top: 20px; max-width: 19ch; }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--seo-600), var(--brand-600) 45%, var(--ai-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { margin-top: 24px; font-size: 1.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 18px; font-size: .9rem; color: var(--ink-3); }

/* the drawn product, floating */
.shot {
  margin-top: clamp(40px, 6vw, 72px);
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, #fff, #FBFAF8);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: clamp(18px, 2.4vw, 30px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 860px) { .shot { grid-template-columns: minmax(0, 1fr); } }

.tile { border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.tile.seo { background: linear-gradient(165deg, var(--seo-100), var(--seo-50) 70%); }
.tile.ai  { background: linear-gradient(165deg, var(--ai-100), var(--ai-50) 70%); }
.tile .cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile .cap b { font-size: .92rem; font-weight: 600; }
.tile .chip { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; background: rgb(255 255 255 / .75); padding: 4px 9px; border-radius: 999px; color: var(--ink-2); }
.tile .num { font-family: var(--f-display); font-size: clamp(3rem, 2rem + 3.6vw, 4.6rem); font-weight: 700; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.tile.seo .num { color: var(--seo-600); }
.tile.ai  .num { color: var(--ai-500); }
.tile .num small { font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.tile .meter { height: 8px; border-radius: 99px; background: rgb(255 255 255 / .7); overflow: hidden; }
.tile .meter i { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1.4s cubic-bezier(.22,1,.36,1); }
.tile.seo .meter i { background: var(--seo-600); }
.tile.ai  .meter i { background: var(--ai-500); }
.tile .note { font-size: .88rem; color: var(--ink-2); }

.todo { display: flex; flex-direction: column; gap: 9px; }
.todo .row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; font-size: .92rem; box-shadow: var(--shadow-sm); }
.todo .row .box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--line-2); flex: none; }
.todo .row .t { flex: 1; min-width: 0; color: var(--ink-2); }
.todo .row .pts { font-family: var(--f-mono); font-size: .74rem; color: var(--brand-700); background: var(--brand-50); padding: 4px 9px; border-radius: 999px; }
.todo .row.done .box { background: var(--ok); border-color: var(--ok); position: relative; }
.todo .row.done .box::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .66rem; color: #fff; font-weight: 700; }
.todo .row.done .t { color: var(--ink-3); text-decoration: line-through; }

/* ---------------- the two readings ---------------- */
.readings { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
@media (max-width: 900px) { .readings { grid-template-columns: minmax(0, 1fr); } }
.reading {
  border-radius: var(--r-xl); padding: clamp(26px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
}
.reading::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.reading.seo::before { background: linear-gradient(90deg, var(--seo-600), #93C5FD); }
.reading.ai::before  { background: linear-gradient(90deg, var(--ai-500), #C4B5FD); }
.reading .label { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.reading.seo .label { color: var(--seo-600); }
.reading.ai  .label { color: var(--ai-500); }
.reading ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.reading li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: .97rem; color: var(--ink-2); align-items: start; }
.reading li .st-icon { width: 18px; height: 18px; margin-top: .2em; }
.reading.seo li .st-icon { color: var(--seo-600); }
.reading.ai  li .st-icon { color: var(--ai-500); }
:root[data-theme="dark"] .reading.seo li .st-icon { color: #60A5FA; }
:root[data-theme="dark"] .reading.ai  li .st-icon { color: #A78BFA; }

/* ---------------- feature cards ---------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-sm); transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card .tag { align-self: flex-start; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-700); background: var(--brand-50); padding: 5px 10px; border-radius: 999px; }
.card p { color: var(--ink-2); font-size: .97rem; }

/* ---------------- the deep section (our rule) ---------------- */
.deep {
  background: linear-gradient(150deg, #211D3F, #17130F 55%, #1B1A33);
  color: #FAF8F5; border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 72px);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.deep::after {
  content: ""; position: absolute; width: 50%; aspect-ratio: 1; right: -12%; top: -30%;
  background: radial-gradient(closest-side, rgb(139 92 246 / .55), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.deep .eyebrow { color: var(--brand-300); position: relative; }
.deep h2 { max-width: 20ch; margin-top: 14px; position: relative; }
.deep p { color: #CFC9C2; margin-top: 18px; max-width: 62ch; position: relative; font-size: 1.05rem; }

/* ---------------- steps ---------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; counter-reset: s; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
.step .n { width: 34px; height: 34px; border-radius: 999px; background: var(--brand-600); color: #fff; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: .88rem; }
.step p { color: var(--ink-2); font-size: .97rem; }

/* ---------------- about ---------------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .about { grid-template-columns: minmax(0, 1fr); } }
.about-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(26px, 3vw, 38px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.about-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: .95rem; }
.about-card dt { color: var(--ink-3); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.about-card dd { margin: 0; color: var(--ink); }
.about-card a { color: var(--brand-700); }

/* ---------------- contact ---------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .88rem; font-weight: 600; }
.field input, .field textarea, .field select {
  font-family: var(--f-body); font-size: 1rem; color: var(--ink);
  background-color: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 13px 15px; width: 100%; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand-500); background-color: #fff; box-shadow: 0 0 0 4px rgb(99 102 241 / .12); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .two { grid-template-columns: minmax(0, 1fr); } }
.consent { font-size: .84rem; color: var(--ink-3); }
.consent a { color: var(--brand-700); }
.form-note { border-radius: var(--r); padding: 14px 16px; font-size: .93rem; display: none; }
.form-note.ok { display: block; background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.form-note.err { display: block; background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.coords { display: flex; flex-direction: column; gap: 18px; }
.coord { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.coord dt { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.coord dd { margin: 6px 0 0; font-size: 1.02rem; }
.coord a { color: var(--brand-700); text-decoration: none; }
.coord a:hover { text-decoration: underline; }

/* ---------------- legal / prose pages ---------------- */
.prose { max-width: 74ch; display: flex; flex-direction: column; gap: 30px; }
.prose h2 { font-size: 1.42rem; letter-spacing: -.025em; }
.prose section { display: flex; flex-direction: column; gap: 12px; }
.prose p, .prose li { color: var(--ink-2); font-size: 1.02rem; }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.prose .meta { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-3); }
.page-head { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(24px, 3vw, 40px); }

/* ---------------- final cta ---------------- */
.final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* ---------------- footer ---------------- */
footer { border-top: 1px solid var(--line); margin-top: clamp(50px, 7vw, 90px); padding-block: 52px 40px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.foot-col h4 { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-brand p { color: var(--ink-2); font-size: .95rem; margin-top: 14px; max-width: 34ch; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .86rem; }

/* ---------------- reveal ---------------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .bloom i { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ====================================================================
   DARK
   --------------------------------------------------------------------
   Same palette, read at the other end. The neutrals stay warm — a cold
   grey here would leave the two score hues as the only warmth on the
   page — and the ramps move a stop or two the way COLOR_PALETTE.md §7
   asks: text takes the 300/400s, fills keep the 500/600s.

   Three states, like the application: an explicit choice wins over the
   operating system in both directions, and the un-stamped document (the
   common case) follows prefers-color-scheme.
   ==================================================================== */

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper:    #17130F;
    --paper-2:  #1C1714;
    --card:     #211D1A;
    --ink:      #FAFAF9;
    --ink-2:    #B4ABA4;
    --ink-3:    #86796F;
    --line:     #372F2B;
    --line-2:   #4A403A;

    --brand-50:  #241F3D;
    --brand-100: #2B2552;
    --seo-50:    #17233F;
    --seo-100:   #1E3A8A;
    --ai-50:     #251D3D;
    --ai-100:    #4C1D95;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
    --shadow:    0 1px 2px rgb(0 0 0 / .5), 0 18px 40px -24px rgb(0 0 0 / .9);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / .6), 0 40px 80px -40px rgb(0 0 0 / 1);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:    #17130F;
  --paper-2:  #1C1714;
  --card:     #211D1A;
  --ink:      #FAFAF9;
  --ink-2:    #B4ABA4;
  --ink-3:    #86796F;
  --line:     #372F2B;
  --line-2:   #4A403A;

  --brand-50:  #241F3D;
  --brand-100: #2B2552;
  --seo-50:    #17233F;
  --seo-100:   #1E3A8A;
  --ai-50:     #251D3D;
  --ai-100:    #4C1D95;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow:    0 1px 2px rgb(0 0 0 / .5), 0 18px 40px -24px rgb(0 0 0 / .9);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / .6), 0 40px 80px -40px rgb(0 0 0 / 1);
}

/* Everything below is written once and applied to either dark state. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav { background: rgb(33 29 26 / .72); border-color: rgb(255 255 255 / .06); }
  :root:not([data-theme="light"]) .lang summary,
  :root:not([data-theme="light"]) .btn-ghost { background: rgb(28 23 20 / .7); }
  :root:not([data-theme="light"]) .bloom i { opacity: .34; }
  :root:not([data-theme="light"]) .bloom .b1 { background: radial-gradient(closest-side, #1E3A8A, transparent 70%); }
  :root:not([data-theme="light"]) .bloom .b2 { background: radial-gradient(closest-side, #4C1D95, transparent 70%); }
  :root:not([data-theme="light"]) .bloom .b3 { background: radial-gradient(closest-side, #312E81, transparent 70%); }
  :root:not([data-theme="light"]) .hero h1 .grad { background-image: linear-gradient(100deg, #60A5FA, #A5B4FC 45%, #C4B5FD); }
  :root:not([data-theme="light"]) .tile.seo { background: linear-gradient(165deg, rgb(30 58 138 / .55), rgb(23 35 63 / .5) 70%); }
  :root:not([data-theme="light"]) .tile.ai { background: linear-gradient(165deg, rgb(76 29 149 / .5), rgb(37 29 61 / .5) 70%); }
  :root:not([data-theme="light"]) .tile.seo .num { color: #60A5FA; }
  :root:not([data-theme="light"]) .tile.ai .num { color: #A78BFA; }
  :root:not([data-theme="light"]) .tile .chip,
  :root:not([data-theme="light"]) .tile .meter { background: rgb(0 0 0 / .3); }
  :root:not([data-theme="light"]) .shot { background: linear-gradient(170deg, #211D1A, #1A1613); }
  :root:not([data-theme="light"]) .todo .row { background: rgb(26 22 19 / .8); }
  :root:not([data-theme="light"]) .reading.seo .label { color: #60A5FA; }
  :root:not([data-theme="light"]) .reading.ai .label { color: #A78BFA; }
  :root:not([data-theme="light"]) .eyebrow,
  :root:not([data-theme="light"]) .card .tag,
  :root:not([data-theme="light"]) .todo .row .pts { color: #A5B4FC; }
  :root:not([data-theme="light"]) .deep { background: linear-gradient(150deg, #2A2450, #1C1714 55%, #241F3D); border: 1px solid var(--line); }
  :root:not([data-theme="light"]) .field input,
  :root:not([data-theme="light"]) .field textarea { background: #1A1613; }
  :root:not([data-theme="light"]) .field input:focus,
  :root:not([data-theme="light"]) .field textarea:focus { background: #211D1A; }
  :root:not([data-theme="light"]) .form-note.ok { background: #122A1B; border-color: #1C5137; color: #86EFAC; }
  :root:not([data-theme="light"]) .form-note.err { background: #2B1416; border-color: #5B1D22; color: #FCA5A5; }
  :root:not([data-theme="light"]) .about-card a,
  :root:not([data-theme="light"]) .coord a,
  :root:not([data-theme="light"]) .consent a,
  :root:not([data-theme="light"]) .prose a { color: #A5B4FC; }
}

:root[data-theme="dark"] .nav { background: rgb(33 29 26 / .72); border-color: rgb(255 255 255 / .06); }
:root[data-theme="dark"] .lang summary,
:root[data-theme="dark"] .btn-ghost { background: rgb(28 23 20 / .7); }
:root[data-theme="dark"] .bloom i { opacity: .34; }
:root[data-theme="dark"] .bloom .b1 { background: radial-gradient(closest-side, #1E3A8A, transparent 70%); }
:root[data-theme="dark"] .bloom .b2 { background: radial-gradient(closest-side, #4C1D95, transparent 70%); }
:root[data-theme="dark"] .bloom .b3 { background: radial-gradient(closest-side, #312E81, transparent 70%); }
:root[data-theme="dark"] .hero h1 .grad { background-image: linear-gradient(100deg, #60A5FA, #A5B4FC 45%, #C4B5FD); }
:root[data-theme="dark"] .tile.seo { background: linear-gradient(165deg, rgb(30 58 138 / .55), rgb(23 35 63 / .5) 70%); }
:root[data-theme="dark"] .tile.ai { background: linear-gradient(165deg, rgb(76 29 149 / .5), rgb(37 29 61 / .5) 70%); }
:root[data-theme="dark"] .tile.seo .num { color: #60A5FA; }
:root[data-theme="dark"] .tile.ai .num { color: #A78BFA; }
:root[data-theme="dark"] .tile .chip,
:root[data-theme="dark"] .tile .meter { background: rgb(0 0 0 / .3); }
:root[data-theme="dark"] .shot { background: linear-gradient(170deg, #211D1A, #1A1613); }
:root[data-theme="dark"] .todo .row { background: rgb(26 22 19 / .8); }
:root[data-theme="dark"] .reading.seo .label { color: #60A5FA; }
:root[data-theme="dark"] .reading.ai .label { color: #A78BFA; }
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .card .tag,
:root[data-theme="dark"] .todo .row .pts { color: #A5B4FC; }
:root[data-theme="dark"] .deep { background: linear-gradient(150deg, #2A2450, #1C1714 55%, #241F3D); border: 1px solid var(--line); }
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea { background-color: #1A1613; }
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field select:focus,
:root[data-theme="dark"] .field textarea:focus { background-color: #211D1A; }
:root[data-theme="dark"] .form-note.ok { background: #122A1B; border-color: #1C5137; color: #86EFAC; }
:root[data-theme="dark"] .form-note.err { background: #2B1416; border-color: #5B1D22; color: #FCA5A5; }
:root[data-theme="dark"] .about-card a,
:root[data-theme="dark"] .coord a,
:root[data-theme="dark"] .consent a,
:root[data-theme="dark"] .prose a { color: #A5B4FC; }

/* ---------------- language + theme controls ---------------- */
.lang-icon { display: flex; align-items: center; color: var(--ink-3); }
.lang-icon svg { width: 15px; height: 15px; }

/* The switch only works with script, so it is only shown with script —
   a dead control is worse than no control. */
.theme-switch { display: none; }
.js .theme-switch {
  display: flex; align-items: center; flex: none;
  width: 46px; height: 26px; padding: 2px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgb(255 255 255 / .55);
  transition: background .2s ease, border-color .2s ease;
}
.js .theme-switch:hover { border-color: var(--brand-300); }
.theme-knob {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--card); color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  transition: transform .24s cubic-bezier(.22,1,.36,1), color .2s ease;
}
.theme-knob svg { width: 12px; height: 12px; }
.theme-knob .i-moon { display: none; }
.theme-switch[aria-checked="true"] { background: rgb(99 102 241 / .28); border-color: rgb(99 102 241 / .5); }
.theme-switch[aria-checked="true"] .theme-knob { transform: translateX(20px); color: #C4B5FD; }
.theme-switch[aria-checked="true"] .i-sun { display: none; }
.theme-switch[aria-checked="true"] .i-moon { display: grid; }

/* ==================================================================
   Product pages, pricing, FAQ
   ==================================================================
   Everything below serves the pages generated from features.py. The
   one rule that matters here: a status must be legible without
   colour. What is not built yet carries its word, and the icon only
   repeats it — a screenshot, a monochrome print and a colour-blind
   reader all get the same information. */

.narrow { max-width: 78ch; }

/* ---------------- status marks ----------------
   The exception is marked, not the rule: available is a tick (its
   word kept for screen readers), « bientôt » and « feuille de route »
   a grey clock and the word in plain small text. No pills — a green
   one on every line said nothing once nearly everything was on sale. */
.status {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: .82rem; line-height: 1.3; white-space: nowrap;
}
.status .st-icon { width: 16px; height: 16px; flex: none; }
.status-launch { color: var(--brand-600); }
.status-soon, .status-vision { color: var(--ink-2); }
:root[data-theme="dark"] .status-launch { color: var(--brand-300); }

/* ---------------- sub-navigation across the product pages ------- */
.subnav { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a {
  padding: 15px 14px; font-size: .93rem; color: var(--ink-2);
  white-space: nowrap; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--brand-600); border-bottom-color: var(--brand-600); font-weight: 600; }
:root[data-theme="dark"] .subnav a[aria-current="page"] { color: var(--brand-300); border-bottom-color: var(--brand-300); }

/* ---------------- feature lists ---------------- */
.feats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
@media (max-width: 860px) { .feats { grid-template-columns: minmax(0, 1fr); } }
.feat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.feat-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.feat-head h2, .feat-head h3 { font-size: 1.02rem; line-height: 1.3; }
.feat p { color: var(--ink-2); font-size: .95rem; margin-top: 10px; }
.feats.promise { grid-template-columns: minmax(0, 1fr); max-width: 78ch; }
.feats.promise .feat { padding: 26px 28px; }
.feats.promise h2 { font-size: 1.15rem; }

/* ---------------- features overview ---------------- */
.legend-head { color: var(--ink-2); font-size: .95rem; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink-3); }
.more { font-weight: 600; color: var(--brand-600); text-decoration: none; white-space: nowrap; }
.more:hover { text-decoration: underline; }
:root[data-theme="dark"] .more { color: var(--brand-300); }

/* ---------------- pricing ----------------
   Five plans in one row gave each of them 200px and made the whole
   page look like a spreadsheet. Three then two, on a six-column grid:
   the first three span two columns each, the last two span three.

   The accent on each card is the product's own signature rather than
   decoration — blue for the tiers that read your Google listing,
   violet for the one that adds AI visibility. The two readings are
   never merged anywhere else in this product and they are not merged
   here. `build.py` picks it from the plan's FEATURES, so a tier that
   gains an AI feature changes colour on its own. */
/* The title area is centred on this page alone: it opens on a choice
   between four cards, and a centred head sits over them evenly. */
.page-head-center .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-head-center h1 { max-width: 24ch; }
.page-head-center .lede { margin-inline: auto; }
.chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chips li {
  font-size: .88rem; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: 6px 14px;
}

.plans {
  display: grid;
  /* One equal column per plan, so every plan is read side by side and
     none is left alone on a second row. Equal widths on purpose: an
     earlier version spanned the cheaper plans to half the row each,
     which made them look like the small option and the dearer ones
     like the real product — a layout arguing with the page. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  align-items: stretch;
}

@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .plans { grid-template-columns: minmax(0, 1fr); } }

.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 24px 26px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
/* A hairline of colour rather than a tinted card: the ink stays
   readable in both themes, and the accent reads as a label. */
.plan::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--line-2);
}
.plan-seo::before   { background: linear-gradient(90deg, var(--seo-600), var(--brand-500)); }
.plan-ai::before    { background: linear-gradient(90deg, var(--brand-500), var(--ai-500)); }
.plan-quote::before { background: var(--line-2); }

/* The recommended one is marked by a lift and a hairline, never by a
   drop shadow: a shadow lifts nothing on a near-black ground. */
.plan-featured {
  border-color: var(--brand-500);
  box-shadow: var(--shadow);
}
.plan-ribbon {
  position: absolute; top: 0; right: 0;
  background: var(--brand-600); color: #fff;
  font-family: var(--f-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-bottom-left-radius: var(--r-sm);
}
.plan h2 { font-size: 1.22rem; }
.plan-for { color: var(--ink-2); font-size: .9rem; min-height: 2.4em; }
.plan-featured .plan-for { color: var(--brand-600); }
:root[data-theme="dark"] .plan-featured .plan-for { color: var(--brand-300); }

/* Amount, then what it means on its own line — every card the same
   height to the button, so the four buttons sit on one line. */
.price { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; min-height: 84px; }
.price .amount {
  font-family: var(--f-display); font-size: 3rem; font-weight: 600;
  letter-spacing: -.03em; line-height: 1;
}
.price .quote { font-family: var(--f-display); font-size: 2.2rem; font-weight: 600; line-height: 1.2; }
.price .per { color: var(--ink-2); font-size: .86rem; line-height: 1.4; }

.plan .btn { justify-content: center; width: 100%; }
.plan-feats { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.plan-feats .lead { font-size: .86rem; color: var(--ink-2); }
.pf { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; line-height: 1.45; color: var(--ink); }
.pf .st-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.pf-launch .st-icon { color: var(--brand-600); }
.plan-ai .pf-launch .st-icon { color: var(--ai-500); }
.pf-soon, .pf-vision { color: var(--ink-2); }
.pf-soon .st-icon, .pf-vision .st-icon { color: var(--ink-3); }
.pf-word { font-size: .84rem; white-space: nowrap; }
:root[data-theme="dark"] .pf-launch .st-icon { color: var(--brand-300); }
:root[data-theme="dark"] .plan-ai .pf-launch .st-icon { color: #C4B5FD; }

.pay-line { text-align: center; color: var(--ink-2); font-size: .9rem; margin-top: 22px; }
.fineprint { color: var(--ink-3); font-size: .86rem; margin-top: 22px; max-width: 70ch; }
.fineprint-center { margin-inline: auto; text-align: center; margin-top: 8px; }

/* ---------------- the comparison table ----------------
   In a box that scrolls sideways on a phone, rather than a table
   squeezed until each cell is one letter wide. */
.compare-title { margin-top: 12px; }
/* `position: relative` keeps the screen-reader words (.sr, absolutely
   positioned) inside the scrolling box: without it they escape it and
   widen the whole page on a phone. */
.compare-box {
  position: relative;
  margin-top: 28px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); padding: 6px 8px 14px;
}
.compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .95rem; table-layout: fixed; }
.compare thead th { width: 15.5%; }
.compare th, .compare td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: center; font-weight: 400; }
.compare th[scope="row"], .compare thead th:first-child { text-align: left; color: var(--ink); width: 38%; }
.compare thead th { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.compare thead th.featured { color: var(--brand-600); }
:root[data-theme="dark"] .compare thead th.featured { color: var(--brand-300); }
.compare .group th {
  text-align: left; border-bottom: none; padding-top: 26px;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-600);
}
:root[data-theme="dark"] .compare .group th { color: var(--brand-300); }
.compare td .status { justify-content: center; }
.compare td .status .st-icon { width: 18px; height: 18px; }
.compare td.no { color: var(--ink-3); }

/* ---------------- pricing questions ---------------- */
.pricing-faq { display: flex; flex-wrap: wrap; gap: 40px; }
.pricing-faq > div:first-child { flex: 1 1 280px; }
.pricing-faq h2 { margin-top: 12px; }
.pricing-faq .lede { margin-top: 14px; font-size: 1rem; }
.faq-list { flex: 2 1 460px; min-width: 0; }

/* ---------------- FAQ ---------------- */
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative;
  font-family: var(--f-display); font-size: 1.08rem; font-weight: 500;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.qa[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.qa p { color: var(--ink-2); padding-bottom: 22px; max-width: 70ch; }

/* ---------------- calls to action ---------------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-note { color: var(--ink-3); font-size: .85rem; margin-top: 12px; }
.page-head .eyebrow + h1 { margin-top: 12px; }
.page-head .lede { margin-top: 18px; }
/* Six nav items plus the log-in link and a button: the row has to stop
   wrapping words before it stops fitting, and collapse to the menu
   sooner than it used to. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1120px) {
  .nav-links { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; box-shadow: var(--shadow); margin: 0; }
  .nav-links.open { display: flex; }
  .nav { position: relative; }
  .nav-toggle { display: flex; order: -1; }
}
/* The select keeps the native control but matches the inputs: a
   custom-drawn dropdown would be one more thing to get wrong in two
   themes for no gain. */
.field select { appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A8077' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; }
.reading-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.final .cta-row { justify-content: center; }
.final .cta-note { text-align: center; }
/* Inside the drawn product a status sits on a dark tinted tile in both
   themes, so it keeps a light ink rather than inheriting. */
.tile .status { color: #EDE9FE; }

/* ------------------------------------------------------------------
   Classes that replaced inline style attributes.

   The edge CSP is `style-src 'self'` with no 'unsafe-inline', so a
   style="" attribute is not merely discouraged here — the browser
   drops it. The honeypot proved it the expensive way: it carried
   position:absolute inline, the attribute was refused, and a field no
   visitor was ever meant to see sat in the middle of the live contact
   form. Anything that must apply belongs in this file.
   ------------------------------------------------------------------ */
.band-tight { padding-top: 0; }
.lede-center { text-align: center; }
.todo-full { grid-column: 1 / -1; }
.deep-cta { margin-top: 28px; position: relative; }

/* The honeypot. Off-screen rather than display:none or hidden, because
   a bot that reads styles skips what is hidden and fills what is not. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Turnstile reserves its own space; this just keeps it in the form's
   rhythm and lets the widget centre itself on a narrow screen. */
.cf-turnstile { min-height: 65px; }

/* ====================================================================
   HOME, 2026-10-27 (« Accueil v2 »): the strip under the hero, icon
   tiles on the feature cards, the bento of product pages, the split
   rule, numbered steps and the pricing teaser. Tokens only, so light
   and dark both hold; the bento's drawings use the two readings'
   colours for the two readings and nothing else.
   ==================================================================== */

/* the strip */
.strip { border-block: 1px solid var(--line); background: var(--paper-2); }
.strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 28px; }
@media (max-width: 860px) { .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .strip-grid { grid-template-columns: minmax(0, 1fr); } }
.strip-item { display: flex; flex-direction: column; gap: 2px; }
.strip-item b { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -.02em; }
.strip-item span { font-size: .88rem; color: var(--ink-2); }

/* feature cards: an icon instead of the tag */
.ficon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600);
}
.ficon svg { width: 22px; height: 22px; }
:root[data-theme="dark"] .ficon { background: var(--brand-100); color: #C7D2FE; }

/* the bento */
.band-head-center { align-items: center; text-align: center; margin-inline: auto; }
.bento-band { position: relative; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.bento .s7 { grid-column: span 7; } .bento .s5 { grid-column: span 5; }
.bento .s4 { grid-column: span 4; } .bento .s6 { grid-column: span 6; }
@media (max-width: 960px) { .bento .s7, .bento .s5, .bento .s4, .bento .s6 { grid-column: span 12; } }
.bx {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit; padding: 28px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bx:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.bx h3 { font-size: 1.35rem; }
.bx p { color: var(--ink-2); font-size: .95rem; max-width: 46ch; }
.bx-google { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--seo-600) 16%, transparent), transparent 55%), var(--card); }
.bx-ai     { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ai-500) 20%, transparent), transparent 55%), var(--card); }
.bx-kick { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-600); }
.bx-google .bx-kick { color: var(--seo-600); }
.bx-ai .bx-kick { color: var(--ai-500); }
:root[data-theme="dark"] .bx-kick { color: var(--brand-300); }
:root[data-theme="dark"] .bx-google .bx-kick { color: #93C5FD; }
:root[data-theme="dark"] .bx-ai .bx-kick { color: #C4B5FD; }
.bx-go { font-size: .9rem; font-weight: 600; color: var(--brand-600); }
:root[data-theme="dark"] .bx-go { color: #C7D2FE; }
.bx-viz {
  margin-top: auto; border-radius: var(--r); background: var(--paper);
  border: 1px solid var(--line); padding: 16px; display: flex; gap: 14px; flex-wrap: wrap;
  font-size: .85rem; color: var(--ink-2);
}
.bx-viz small { font-size: .8rem; color: var(--ink-2); font-weight: 400; }
.v-score { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.v-score b { font-family: var(--f-display); font-size: 2.4rem; line-height: 1; color: var(--seo-600); }
.v-tasks { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 7px; }
.v-tasks span { display: flex; justify-content: space-between; }
.v-tasks em { font-style: normal; color: var(--ink); }
.v-tasks code { font-family: var(--f-mono); color: var(--brand-600); }
.v-tasks i { display: block; height: 5px; border-radius: 9px; background: var(--seo-50); }
.v-tasks u { display: block; height: 5px; border-radius: 9px; background: var(--seo-600); }
.v-tasks .w30 { width: 30%; } .v-tasks .w55 { width: 55%; }
.bx-ai .bx-viz { flex-direction: column; gap: 10px; }
.v-q { align-self: flex-start; color: var(--ai-900); background: var(--ai-50); border: 1px solid var(--ai-100); border-radius: 999px; padding: 5px 12px; }
:root[data-theme="dark"] .v-q { color: #EDE9FE; }
.v-named { display: flex; align-items: center; justify-content: space-between; }
.v-named em { font-style: normal; }
.v-named b { font-family: var(--f-display); font-size: 1.4rem; color: var(--ai-500); }
.v-seg { display: flex; gap: 4px; }
.v-seg i { height: 6px; border-radius: 9px; }
.v-seg .on { flex: 1; background: var(--ai-500); }
.v-seg .rest { flex: 8; background: var(--ai-50); }
.bx-reviews .bx-viz { flex-direction: column; gap: 10px; }
.stars { display: flex; gap: 2px; }
.stars svg { width: 14px; height: 14px; fill: #FFB905; }
.stars .off { display: flex; gap: 2px; }
.stars .off svg { fill: var(--line-2); }
.v-reply { color: var(--ink); border-left: 2px solid var(--brand-500); padding-left: 10px; }
.v-approve { align-self: flex-start; font-size: .78rem; font-weight: 600; color: #fff; background: var(--brand-600); border-radius: 999px; padding: 4px 12px; }
.bx-card .bx-viz { align-items: center; justify-content: center; gap: 18px; }
.v-card {
  width: 96px; height: 60px; border-radius: 10px; padding: 8px; box-sizing: border-box;
  background: linear-gradient(135deg, var(--brand-900), var(--ai-900)); color: #E0E7FF;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.v-card svg { width: 16px; height: 16px; }
.v-card .mark { width: auto; height: 10px; }
.v-card .mark-w { fill: #FAFAF9; }
.v-qr { width: 56px; height: 56px; color: var(--brand-600); }
:root[data-theme="dark"] .v-qr { color: #C7D2FE; }
.v-bars { display: flex; align-items: flex-end; gap: 8px; height: 56px; width: 100%; }
.v-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--brand-100); }
.v-bars i:nth-child(1) { height: 30%; } .v-bars i:nth-child(2) { height: 42%; }
.v-bars i:nth-child(3) { height: 38%; } .v-bars i:nth-child(4) { height: 58%; background: var(--brand-300); }
.v-bars i:nth-child(5) { height: 72%; background: var(--brand-500); } .v-bars i:nth-child(6) { height: 90%; background: var(--brand-600); }
.bx-later {
  flex-direction: row; align-items: center; gap: 18px; padding: 22px 26px;
  background: transparent; border-style: dashed; box-shadow: none;
}
.bx-later:hover { box-shadow: none; }
.bx-icon {
  width: 42px; height: 42px; border-radius: 12px; border: 1px dashed var(--line-2);
  display: grid; place-items: center; color: var(--ink-3); flex: none;
}
.bx-icon svg { width: 20px; height: 20px; }
.bx-later-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bx-later-text b { font-family: var(--f-display); font-size: 1.1rem; }
.bx-later-text span { font-size: .9rem; color: var(--ink-2); }

/* the rule, in two columns */
.deep-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.deep-split p:first-child { margin-top: 0; }
@media (max-width: 860px) { .deep-split { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* steps: numbered rules rather than cards */
.step { background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; box-shadow: none; padding: 20px 0 0; }
.step .n { width: auto; height: auto; background: none; color: var(--brand-600); font-weight: 500; font-size: .82rem; display: block; }
:root[data-theme="dark"] .step .n { color: var(--brand-300); }

/* pricing teaser */
.tease-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.tease-link { font-weight: 600; color: var(--brand-600); text-decoration: none; }
:root[data-theme="dark"] .tease-link { color: #C7D2FE; }
.teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
@media (max-width: 860px) { .teasers { grid-template-columns: minmax(0, 1fr); } }
.tease {
  display: flex; flex-direction: column; gap: 6px; padding: 24px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: border-color .2s ease;
}
.tease:hover { border-color: var(--line-2); }
.tease-featured { border-color: var(--brand-500); background: linear-gradient(160deg, var(--brand-50), var(--card)); }
.tease-name { font-weight: 600; }
.tease-price { font-family: var(--f-display); font-weight: 700; font-size: 2rem; letter-spacing: -.02em; }
.tease-price small { font-family: var(--f-body); font-weight: 400; font-size: .85rem; color: var(--ink-2); letter-spacing: 0; }
.tease-blurb { font-size: .9rem; color: var(--ink-2); }

/* ====================================================================
   PRODUCT PAGES, 2026-10-27: the seven pages under « Fonctionnalités ».
   Head and tabs unchanged; below them the problem beside a drawing,
   the steps (where a page has them), what is available with its plan,
   the roadmap in one quiet box, the rule, the closing call. Each page
   takes its accent from its reading: blue for Google, violet for the
   AI assistants, brand indigo for the rest.
   ==================================================================== */
.pp-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .pp-split { grid-template-columns: minmax(0, 1fr); } }
.pp-intro { display: flex; flex-direction: column; gap: 22px; }
.pp-problem { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); letter-spacing: -.03em; line-height: 1.08; }
.pp-accent { color: var(--brand-600); }
.pp-google .pp-accent { color: var(--seo-600); }
.pp-ai .pp-accent { color: var(--ai-500); }
:root[data-theme="dark"] .pp-accent { color: var(--brand-300); }
:root[data-theme="dark"] .pp-google .pp-accent { color: #93C5FD; }
:root[data-theme="dark"] .pp-ai .pp-accent { color: #C4B5FD; }
.pp-figure {
  margin: 0; padding: 22px; border-radius: var(--r-xl); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 16px;
}
.pp-figure figcaption { font-size: .92rem; color: var(--ink-2); }
.pp-viz {
  border-radius: var(--r); background: var(--paper); border: 1px solid var(--line);
  padding: 18px; display: flex; gap: 14px; flex-wrap: wrap; font-size: .9rem; color: var(--ink-2);
}
.pp-viz small { font-size: .8rem; color: var(--ink-2); font-weight: 400; }
.pp-viz.bx-ai, .pp-viz.bx-reviews { flex-direction: column; gap: 10px; }
.pp-viz.bx-card { align-items: center; justify-content: center; gap: 22px; padding-block: 28px; }
.pp-viz .v-bars { height: 120px; }
.pp-viz .v-q { font-size: 1rem; padding: 8px 14px; }
.v-asked { font-size: .8rem; color: var(--ink-2); }
.v-rank {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
}
.v-rank i { font-style: normal; font-family: var(--f-mono); font-size: .78rem; color: var(--ink-2); width: 14px; }
.v-rank em { font-style: normal; flex: 1; }
.v-rank b { font-weight: 500; font-size: .85rem; color: var(--ink-2); }
.v-rank.v-you { border-color: var(--ai-500); background: var(--ai-50); }
.v-rank.v-you em { font-weight: 600; }
.v-rank.v-you b, .v-rank.v-you i { color: var(--ai-500); }
:root[data-theme="dark"] .v-rank.v-you b, :root[data-theme="dark"] .v-rank.v-you i { color: #C4B5FD; }

.pp-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .pp-steps { grid-template-columns: minmax(0, 1fr); } }
.pp-step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm);
}
.pp-step .n { font-family: var(--f-mono); font-size: .82rem; color: var(--brand-600); }
.pp-ai .pp-step .n { color: var(--ai-500); }
:root[data-theme="dark"] .pp-step .n { color: var(--brand-300); }
:root[data-theme="dark"] .pp-ai .pp-step .n { color: #C4B5FD; }
.pp-step p { color: var(--ink-2); font-size: .95rem; }

.pp-available { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 56px); align-items: start; }
@media (max-width: 960px) { .pp-available { grid-template-columns: minmax(0, 1fr); } }
.pp-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .pp-feats { grid-template-columns: minmax(0, 1fr); } }
.pp-feat {
  display: flex; gap: 14px; padding: 22px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.pp-feat .st-icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--brand-600); }
.pp-google .pp-feat .st-icon { color: var(--seo-600); }
.pp-ai .pp-feat .st-icon { color: var(--ai-500); }
:root[data-theme="dark"] .pp-feat .st-icon { color: var(--brand-300); }
:root[data-theme="dark"] .pp-google .pp-feat .st-icon { color: #93C5FD; }
:root[data-theme="dark"] .pp-ai .pp-feat .st-icon { color: #C4B5FD; }
.pp-feat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-feat-head b { font-size: 1rem; }
.pp-feat p { color: var(--ink-2); font-size: .92rem; margin-top: 6px; }
.pp-plan { font-size: .72rem; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; }

.pp-roadmap { border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 24px; }
.pp-roadmap-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink-2); }
.pp-roadmap-head .st-icon { width: 18px; height: 18px; }
.pp-roadmap-head b { color: var(--ink); }
.pp-roadmap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
@media (max-width: 900px) { .pp-roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pp-roadmap-grid { grid-template-columns: minmax(0, 1fr); } }
.pp-later-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pp-later-head b { font-size: .98rem; color: var(--ink); }
.pp-later p { color: var(--ink-2); font-size: .9rem; margin-top: 6px; }
.pp-rule { font-size: 1.2rem; line-height: 1.6; color: #E7E2DD; }

/* ====================================================================
   FEATURES OVERVIEW, 2026-10-27: jump links with what is on sale on
   each page, then one section per page — a numbered intro beside a
   single list, available first, not-yet-built underneath and quieter.
   ==================================================================== */
.jumps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 36px; }
.jump {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: border-color .18s ease;
}
.jump:hover { border-color: var(--brand-300); }
.jump b { font-size: .92rem; line-height: 1.3; }
.jump span { font-size: .8rem; color: var(--ink-2); }
.jump-later { background: transparent; border-style: dashed; }
.ov-block {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 56px);
  align-items: start; padding-top: clamp(48px, 6vw, 80px); margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line); scroll-margin-top: 96px;
}
@media (max-width: 900px) { .ov-block { grid-template-columns: minmax(0, 1fr); } }
.ov-intro { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 104px; }
@media (max-width: 900px) { .ov-intro { position: static; } }
.ov-num { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-2); }
.ov-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600);
}
.ov-icon svg { width: 22px; height: 22px; }
.ov-google .ov-icon { background: var(--seo-50); color: var(--seo-600); }
.ov-ai .ov-icon { background: var(--ai-50); color: var(--ai-500); }
:root[data-theme="dark"] .ov-icon { background: var(--brand-100); color: #C7D2FE; }
:root[data-theme="dark"] .ov-google .ov-icon { background: var(--seo-50); color: #93C5FD; }
:root[data-theme="dark"] .ov-ai .ov-icon { background: var(--ai-50); color: #C4B5FD; }
.ov-intro h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.ov-intro p { color: var(--ink-2); font-size: .98rem; }
.ov-stats { font-size: .85rem; color: var(--ink-2); }
.ov-body { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.ov-list {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
@media (max-width: 640px) { .ov-list { grid-template-columns: minmax(0, 1fr); } }
.ov-row {
  display: flex; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.ov-row:nth-child(2n) { border-right: 0; }
@media (max-width: 640px) { .ov-row { border-right: 0; } }
.ov-row .st-icon { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--brand-600); }
.ov-google .ov-row .st-icon { color: var(--seo-600); }
.ov-ai .ov-row .st-icon { color: var(--ai-500); }
:root[data-theme="dark"] .ov-row .st-icon { color: var(--brand-300); }
:root[data-theme="dark"] .ov-google .ov-row .st-icon { color: #93C5FD; }
:root[data-theme="dark"] .ov-ai .ov-row .st-icon { color: #C4B5FD; }
.ov-row b { font-size: .97rem; }
.ov-row p { color: var(--ink-2); font-size: .9rem; margin-top: 4px; }
.ov-later-block { display: flex; flex-direction: column; gap: 12px; }
.ov-later-title { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.ov-later-title .st-icon { width: 16px; height: 16px; }
.ov-later-block .ov-list { background: transparent; border-style: dashed; }
.ov-later-block .ov-row { border-color: var(--line); border-bottom-style: dashed; border-right-style: dashed; }
.ov-later .ov-later-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ov-later b { color: var(--ink); }
.ov-none { color: var(--ink-2); font-size: .95rem; }

/* ====================================================================
   THE FREE LISTING CHECK (/test-fiche-google/), 2026-10-27. The form,
   Google's matches as buttons, then the reading: the score in the Local
   SEO blue (it is that score, for the checks we can read), each check
   done / missing with its points / locked until connected.
   ==================================================================== */
.lc { display: flex; flex-direction: column; gap: 28px; }
.lc > * { max-width: 860px; }
.lc-cta h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.lc-form { display: flex; flex-direction: column; gap: 12px; }
.lc-form label { font-weight: 600; }
.lc-row { display: flex; gap: 12px; flex-wrap: wrap; }
.lc-row input {
  flex: 1 1 280px; min-width: 0; min-height: 56px; padding: 0 18px; font: inherit; font-size: 1.05rem;
  color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 999px;
}
.lc-row input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 22%, transparent); }
.lc-privacy { font-size: .85rem; color: var(--ink-2); }
.lc-status { font-size: .95rem; color: var(--ink-2); min-height: 1.4em; }
.lc-status.err { color: #DC2626; }
:root[data-theme="dark"] .lc-status.err { color: #FCA5A5; }
.lc-pick { font-weight: 600; margin-bottom: 10px; }
.lc-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lc-option {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  padding: 14px 18px; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
}
.lc-option:hover, .lc-option:focus-visible { border-color: var(--brand-500); }
.lc-option span { font-size: .88rem; color: var(--ink-2); }
.lc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 22px;
  scroll-margin-top: 100px;
}
.lc-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 680px) { .lc-head { grid-template-columns: minmax(0, 1fr); } }
.lc-who { display: flex; flex-direction: column; gap: 4px; }
.lc-who b { font-family: var(--f-display); font-size: 1.4rem; letter-spacing: -.02em; }
.lc-who span { font-size: .9rem; color: var(--ink-2); }
.lc-stars { color: var(--ink) !important; }
.lc-score {
  display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--seo-100), var(--seo-50) 70%);
}
.lc-score-label { font-size: .85rem; font-weight: 600; }
.lc-num { font-family: var(--f-display); font-size: 3.2rem; font-weight: 700; line-height: .95; color: var(--seo-600); letter-spacing: -.04em; }
:root[data-theme="dark"] .lc-num { color: #60A5FA; }
.lc-num small { font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.lc-meter { height: 8px; border-radius: 99px; background: rgb(255 255 255 / .6); overflow: hidden; }
:root[data-theme="dark"] .lc-meter { background: rgb(0 0 0 / .3); }
.lc-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--seo-600); transition: width 1.2s cubic-bezier(.22,1,.36,1); }
.lc-read { font-size: .82rem; color: var(--ink-2); }
.lc-closed { font-size: .92rem; color: #B45309; }
:root[data-theme="dark"] .lc-closed { color: #FCD34D; }
.lc-checks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.lc-check { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.lc-check:last-child { border-bottom: 0; }
.lc-check-label { flex: 1; min-width: 0; }
.lc-check-label small { color: var(--ink-2); font-size: .85rem; }
.lc-mark { width: 18px; height: 18px; border-radius: 5px; flex: none; border: 1.5px solid var(--line-2); }
.lc-done .lc-mark { background: var(--ok); border-color: var(--ok); }
.lc-locked { color: var(--ink-2); }
.lc-locked .lc-mark { border-style: dashed; }
.lc-state { font-size: .85rem; color: var(--ink-2); white-space: nowrap; }
.lc-missing .lc-state { font-family: var(--f-mono); color: var(--brand-700); background: var(--brand-50); border-radius: 99px; padding: 3px 10px; }
:root[data-theme="dark"] .lc-missing .lc-state { color: #C7D2FE; background: var(--brand-100); }
.lc-again { align-self: flex-start; }
.lc-cta {
  border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  background: linear-gradient(150deg, var(--brand-50), var(--card)); border: 1px solid var(--brand-300);
}
.lc-cta p { color: var(--ink-2); max-width: 60ch; }
.lc [hidden] { display: none; }