/* GotAlt home page, direction C ("Bright studio", chosen by the owner 2026-10-26; docs/reviews/home-makeover-2026-10-26/).

   THE ONE EXCEPTION to "no new CSS files" (SITE_TEMPLATE.md): this file is linked by public/index.html only, after
   /styles.css, so the home page's own look stays off the other pages. Every rule is scoped to the home page's body
   class: component rules start with .t-landing (one class more than the styles.css rule they replace), and the
   element resets with :where(.t-landing), which keeps an element selector's own weight, so a styles.css class rule
   for something a script draws (the report's findings, the unlock form) still out-ranks them.

   Since the site-wide rollout (2026-10-26, docs/reviews/c-rollout-2026-10-26/SPEC.md) C's system is styles.css's for
   every page: the palette and radii, the two faces and their @font-face rules, the header, the footer with the
   sign-off, the in-text link, the buttons, the pill field and the focus ring. What is left here is the home page's
   own: the hero, the demo, the steps, the bento, the stats, the pricing and FAQ layouts and the closing panel. The
   report a scan draws (its panel, score, fix plan, findings, deep audit box, note and check offer) is styles.css's too,
   the same on every page that draws one. The tokens below are only the ones the home page alone uses, set on :root. That is safe
   only because no other page loads this file. test/site-a11y.test.mjs reads this file after styles.css for the home
   page, so every text it can see is measured against these colors.

   Motion: three curves (--spring-snappy for arrivals, --spring-smooth for state changes, --ease-snap for hover and
   press). All of it is finite or user-triggered, nothing starts hidden below the fold, and prefers-reduced-motion
   removes it. Keyframe names start with h- so none of them replaces a styles.css keyframe of the same name. */

/* ---------- Tokens (the home page's alone; the rest are styles.css's) ---------- */
:root {
  /* C's brighter green, for what styles.css draws in --green-bright on this page (the score ring of an A grade). The
     site keeps #10A66B, which the dark panels' links need (#0E9560 is 4.4:1 on them). */
  --green-bright: #0E9560;
  --v-false: #B3261E;
  --v-true: #0B7A50;

  --section-y: clamp(64px, 7vw + 24px, 128px);

  --spring-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-snappy: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26%, 1.079 30.3%, 1.049 36%, 1.024 42.6%, 1.011 50.3%, 1.004 59.2%, 1.001 69.3%, 1);
    --spring-smooth: linear(0, 0.004, 0.016 2.3%, 0.063 4.7%, 0.141 7.2%, 0.25 9.9%, 0.601 16.5%, 0.815 21%, 0.929 25.2%, 0.987 29%, 1.025 33.5%, 1.042 38%, 1.04 43.5%, 1.027 50%, 1.013 57.5%, 1.005 67%, 1.001 79%, 1);
  }
}

/* ---------- Base (the body's type and the focus ring are styles.css's) ---------- */
:root:has(> body.t-landing) { scroll-padding-top: 16px; color-scheme: light; -webkit-text-size-adjust: 100%; }
:where(.t-landing) *::before, :where(.t-landing) *::after { box-sizing: border-box; }
:where(.t-landing) img, :where(.t-landing) svg { display: block; max-width: 100%; }
:where(.t-landing) h1, :where(.t-landing) h2, :where(.t-landing) h3, :where(.t-landing) h4,
:where(.t-landing) p, :where(.t-landing) ul, :where(.t-landing) ol, :where(.t-landing) figure,
:where(.t-landing) dl, :where(.t-landing) dd { margin: 0; }
:where(.t-landing) ul, :where(.t-landing) ol { padding: 0; list-style: none; }
/* A link on this page takes its look from .link (or its block's own rule); a bare one is the text around it. */
:where(.t-landing) a { color: inherit; text-underline-offset: auto; text-decoration-thickness: auto; text-decoration-color: currentColor; }
:where(.t-landing) button, :where(.t-landing) input { font: inherit; color: inherit; }
:where(.t-landing) code { font-family: var(--mono); }
:where(.t-landing) em { font-style: italic; }

.t-landing .wrap { width: min(100% - 2 * var(--gutter), 1200px); max-width: none; margin-inline: auto; padding-inline: 0; }
.t-landing .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.t-landing .tone-peach { background: var(--peach); }
.t-landing .tone-mint { background: var(--mint-2); }
.t-landing .tone-butter { background: var(--butter); }
.t-landing .tone-white { background: var(--card); }
.t-landing .plain-note { font-size: 0.875rem; color: var(--muted); }
:where(.t-landing) :focus-visible { border-radius: 0; }

/* Headings (the face, weight and tracking of h1 and h2 are styles.css's; the sizes are this page's) */
:where(.t-landing) h2 { font-size: clamp(2.1rem, 1.1rem + 3vw, 3.6rem); line-height: 1.02; }
:where(.t-landing) h3 { font-family: var(--display); font-weight: 650; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.018em; }
:where(.t-landing) h3, :where(.t-landing) h4 { text-wrap: wrap; }
.t-landing h1 em, .t-landing h2 em, .t-landing h3 em { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -0.02em; color: var(--green); }
.t-landing .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
}
.t-landing .eyebrow-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(11, 122, 80, 0.18); }
.t-landing .lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }

/* In-text links */
.t-landing .link {
  color: var(--green-dark); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(11, 122, 80, 0.4);
  transition: text-decoration-color 180ms var(--ease-snap);
}
@media (hover: hover) and (pointer: fine) { .t-landing .link:hover { color: var(--green-dark); text-decoration-color: currentColor; } }

/* ---------- Buttons: styles.css's (the .btn rules and the Motion block), the same numbers ---------- */

/* ---------- Header: styles.css's, except that on this page it scrolls with the page (C has no sticky header) ---------- */
.t-landing .site-header { position: relative; top: auto; z-index: 5; }

/* ---------- Entry choreography (on load only; everything starts at its resting place, nothing waits for a scroll) ---------- */
@keyframes h-rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes h-drop-in { from { transform: translateY(32px) scale(0.96); } to { transform: none; } }
@keyframes h-sweep { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@keyframes h-stamp { from { transform: scale(0.86); } to { transform: scale(1); } }
@keyframes h-panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.t-landing :is(.e1, .e2, .e3, .e4, .e5, .e6, .e7) { animation: h-rise 520ms var(--spring-snappy) backwards; }
.t-landing .e1 { animation-delay: 0ms; }
.t-landing .e2 { animation-delay: 50ms; }
.t-landing .e3 { animation-delay: 100ms; }
.t-landing .e4 { animation-delay: 150ms; }
.t-landing .e5 { animation-delay: 200ms; }
.t-landing .e6 { animation-delay: 250ms; }
.t-landing .e7 { animation-delay: 300ms; }

/* ---------- Hero ---------- */
.t-landing .hero { margin-inline: clamp(8px, 1.2vw, 16px); padding: 0; text-align: start; }
.t-landing .hero-panel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-xl); background: var(--mint);
  padding-block: clamp(36px, 5vw, 72px) clamp(44px, 5vw, 80px);
}
.t-landing .hero-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(rgba(7, 90, 59, 0.16) 1.3px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 62%);
  mask-image: linear-gradient(100deg, transparent 18%, #000 62%);
}
.t-landing .hero-sun {
  position: absolute; z-index: -1; border-radius: 50%; background: var(--butter-2);
  width: clamp(260px, 38vw, 560px); aspect-ratio: 1; right: clamp(-120px, -6vw, -30px); top: 18%;
}
.t-landing .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
.t-landing .hero-title {
  font-family: var(--display); font-weight: 700; font-style: normal;
  font-size: clamp(2.9rem, 1.2rem + 5.2vw, 5rem); line-height: 0.96; letter-spacing: -0.04em; word-spacing: 0; margin: 22px 0 0;
}
.t-landing .hero-title .line { display: block; }
.t-landing .hero-title em {
  position: relative; display: inline-block; font-size: 1.12em; letter-spacing: -0.03em; line-height: 0.9;
  padding-inline: 0.04em 0.1em; padding-block: 0; isolation: isolate; background: none; animation: none;
}
.t-landing .hero-title em::before {
  content: ""; position: absolute; z-index: -1; left: -0.04em; right: 0; bottom: 0.02em; height: 0.34em;
  background: var(--butter-2); border-radius: 0.2em 0.35em 0.25em 0.4em; transform: rotate(-1.2deg);
}
.t-landing .hero-sub { margin: 24px 0 0; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.5; color: var(--ink-soft); max-width: 30em; }

/* The address pill itself (its field, button, arrow, focus and phone layout) is the site's: public/styles.css, `.scan-form`.
   Only the home page's own gap above it and the lift of its shadow are here. */
.t-landing .scan-form { margin: 30px 0 0; transition: box-shadow 220ms var(--ease-snap), transform 220ms var(--ease-snap); }
.t-landing .hero-note { margin: 14px 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.t-landing .hero-note + .hero-note { margin-top: 6px; }
.t-landing .hero :is(.hero-note, .hero-sub) { text-wrap: wrap; }
.t-landing .hero-note .link { color: var(--green-dark); }
.t-landing .scan-status { margin: 14px 0 0; padding: 12px 16px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line-strong); font-size: 0.9375rem; color: var(--ink); }
.t-landing .scan-status.error { color: var(--v-false); font-weight: 600; }
.t-landing .hero .manual-note { margin: 14px 0 0; padding: 12px 16px; border: 0; border-radius: var(--r-sm); background: var(--butter); font-size: 0.9375rem; color: var(--ink); }
.t-landing .hero .manual-note a { color: var(--green-dark); font-weight: 600; }

/* Floating product cards */
.t-landing .cluster { position: relative; min-height: 640px; }
.t-landing .vcard {
  position: absolute; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  overflow: hidden;
}
.t-landing .vcard-art { position: relative; overflow: hidden; }
.t-landing .vcard-art img { width: 100%; height: 100%; object-fit: cover; }
.t-landing .vcard figcaption { padding: 18px 24px 22px; display: grid; gap: 12px; }
.t-landing .vcard-alt { display: grid; gap: 4px; }
.t-landing .vcard .lab { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.t-landing .vcard .alt-quote { font-family: var(--mono); font-size: 0.9375rem; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.t-landing .vcard-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.t-landing .vcard-why { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft); }
.t-landing .vcard--a { width: min(384px, 63%); right: 0; top: 92px; z-index: 3; animation: h-drop-in 640ms var(--spring-snappy) 120ms backwards; }
.t-landing .vcard--a .vcard-art { aspect-ratio: 16 / 10; background: var(--peach); }
.t-landing .vcard--b { width: min(214px, 36%); left: 6px; top: 356px; rotate: -3deg; z-index: 4; animation: h-drop-in 640ms var(--spring-snappy) 220ms backwards; }
.t-landing .vcard--b .vcard-art { aspect-ratio: 16 / 9; background: var(--mint-2); }
.t-landing .vcard--c { width: min(222px, 38%); left: 0; top: 0; rotate: -3.5deg; z-index: 2; animation: h-drop-in 640ms var(--spring-snappy) 320ms backwards; }
.t-landing .vcard--c .vcard-art { aspect-ratio: 16 / 9; background: var(--butter); }
.t-landing .vcard--b figcaption, .t-landing .vcard--c figcaption { padding: 14px 16px 16px; gap: 10px; }
.t-landing .vcard--b .alt-quote, .t-landing .vcard--c .alt-quote { font-size: 0.875rem; }
.t-landing .tag-rule {
  position: absolute; left: 28px; top: 28px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.94);
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); border: 1.5px solid var(--line-strong);
}
.t-landing .tag-rule svg { color: var(--green); }

/* Chips */
.t-landing .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 9px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 700; line-height: 1.15; letter-spacing: 0.005em;
}
.t-landing .chip svg { flex: none; }
.t-landing .chip--false { background: var(--v-false); color: #fff; }
.t-landing .chip--missing { background: var(--ink); color: #fff; }
.t-landing .chip--vague { background: var(--butter-2); color: var(--ink); }
.t-landing .chip--true { background: var(--v-true); color: #fff; }
.t-landing .chip--pass { background: var(--card); color: var(--ink-soft); border: 1.5px solid var(--line-strong); font-weight: 650; }
.t-landing .chip--pass svg { color: var(--green); }
.t-landing .hero .vcard-verdict .chip { transform-origin: left center; }
.t-landing .hero .vcard--a .chip--false { animation: h-stamp 520ms var(--spring-snappy) 1100ms backwards; }
.t-landing .ai-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); font-size: 0.8125rem; font-weight: 650; line-height: 1.15;
}
.t-landing .ai-tag svg { flex: none; }

/* Viewfinder corners: the picture is being inspected */
.t-landing .finder::after {
  content: ""; position: absolute; inset: 14px; pointer-events: none; opacity: 0.6;
  background:
    linear-gradient(var(--ink), var(--ink)) top left / 24px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) top left / 3px 24px no-repeat,
    linear-gradient(var(--ink), var(--ink)) top right / 24px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) top right / 3px 24px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / 24px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / 3px 24px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / 24px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / 3px 24px no-repeat;
}

/* Scan sweep: an overlay passing over the picture, once */
.t-landing .sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.t-landing .sweep::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.78) 70%, rgba(255, 255, 255, 0));
  border-right: 2px solid rgba(255, 255, 255, 0.95); transform: translateX(-110%);
}
.t-landing .hero .vcard--a .sweep::before { animation: h-sweep 1100ms var(--ease-snap) 650ms 1 backwards; }
.t-landing .is-seen .vpanel:not([hidden]) .sweep::before { animation: h-sweep 1100ms var(--ease-snap) 150ms 1 backwards; }

/* ---------- The report a scan draws (#report, hidden until a scan) ----------
   scan-ui.js, audit-render.js and unlock.js fill it. Its panel, score panel, fix plan, findings, deep audit box, note and
   check offer are styles.css's (the reports block of the site-wide rollout), the same on every page that draws a report;
   what stays here is this page's own spacing above it. */
.t-landing .report-section { padding: clamp(28px, 4vw, 48px) 0 0; }

/* ---------- Sections ---------- */
.t-landing .section { padding-block: calc(var(--section-y) * 0.62); }
.t-landing .section + .section { padding-top: calc(var(--section-y) * 0.42); }
.t-landing .section-head { max-width: 780px; }
.t-landing .section-head .eyebrow { margin-bottom: 18px; }
.t-landing .section-head .lead { margin-top: 20px; }
.t-landing .section-head--center { margin-inline: auto; text-align: center; }
.t-landing .section-head--center .lead { margin-inline: auto; }

/* ---------- Same image, two verdicts ---------- */
.t-landing .demo-wrap {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-1);
  padding: clamp(22px, 4vw, 56px);
}
.t-landing .demo-grid { margin-top: clamp(28px, 4vw, 48px); display: grid; gap: 28px; }
.t-landing .demo.is-tabs .demo-grid { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); align-items: start; }
.t-landing .tabs { display: grid; gap: 6px; padding: 8px; background: var(--paper-2); border-radius: var(--r-lg); }
.t-landing .tab {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left;
  padding: 10px 14px 10px 10px; border: 2px solid transparent; border-radius: 20px; background: transparent; cursor: pointer;
  transition: background-color 240ms var(--spring-smooth), border-color 240ms var(--spring-smooth), box-shadow 240ms var(--spring-smooth), transform 160ms var(--ease-snap);
}
.t-landing .tab:active { transform: scale(0.98); }
.t-landing .tab-thumb { width: 76px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.t-landing .tab-thumb img { width: 100%; height: 100%; object-fit: cover; }
.t-landing .tab-label { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.25; color: var(--ink); }
.t-landing .tab-alt { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.t-landing .tab[aria-selected="true"] { background: var(--card); border-color: var(--ink); box-shadow: var(--shadow-1); }
@media (hover: hover) and (pointer: fine) { .t-landing .tab[aria-selected="false"]:hover { background: rgba(255, 255, 255, 0.7); } }

.t-landing .panels { display: grid; gap: 28px; }
.t-landing .vpanel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "art body" "code body"; column-gap: clamp(20px, 3vw, 36px); row-gap: 14px; align-items: start;
}
.t-landing .vpanel .code-line { grid-area: code; }
.t-landing .vpanel-body { grid-area: body; }
.t-landing .demo.is-tabs .vpanel:not([hidden]) { animation: h-panel-in 420ms var(--spring-smooth) backwards; }
.t-landing .vpanel[hidden] { display: none; }
.t-landing .vpanel-art { grid-area: art; position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
.t-landing .vpanel-art img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.t-landing .vpanel-body { display: flex; flex-direction: column; gap: 14px; justify-content: flex-start; }
.t-landing .code-line {
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.55; color: var(--ink-soft);
  background: var(--paper-2); border-radius: var(--r-sm); padding: 12px 14px; overflow-wrap: anywhere;
}
.t-landing .code-line b { color: var(--green-dark); font-weight: 600; }
.t-landing .vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.t-landing .vrow-who { flex: 0 0 100%; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.t-landing .vrow-note { font-size: 0.9375rem; color: var(--muted); }
.t-landing .vrow--ours { padding: 16px 18px 18px; border-radius: var(--r-md); background: var(--paper); border: 1.5px solid var(--line-strong); }
.t-landing .vpanel-why { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); flex: 0 0 100%; }
.t-landing .vpanel-suggest { display: grid; gap: 4px; padding-left: 14px; border-left: 4px solid var(--green); flex: 0 0 100%; }
.t-landing .vpanel-suggest .lab { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.t-landing .vpanel-suggest span:last-child { font-weight: 600; font-size: 1rem; color: var(--ink); }
.t-landing .demo .aiu-note { margin: 14px 0 0; font-size: 0.9375rem; color: var(--muted); max-width: 70ch; }
.t-landing .demo-proof { margin-top: clamp(28px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink-soft); max-width: 70ch; }

/* ---------- How it works: a staircase ---------- */
.t-landing .stairs { margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; }
.t-landing .step {
  position: relative; border-radius: var(--r-xl); border: 0; margin: 0; padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 14px;
  transition: transform 260ms var(--ease-snap), box-shadow 260ms var(--ease-snap);
}
.t-landing .step::before { content: none; display: none; }
.t-landing .step--1 { background: var(--mint); min-height: 330px; }
.t-landing .step--2 { background: var(--butter); min-height: 410px; }
.t-landing .step--3 { background: var(--green); color: #fff; min-height: 490px; }
.t-landing .step .step-num { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 5.5rem; line-height: 0.8; color: var(--green); }
.t-landing .step--3 .step-num { color: var(--butter-2); }
.t-landing .step-icon { position: absolute; right: 26px; top: 24px; }
.t-landing .step h3 { font-size: 1.75rem; margin: auto 0 0; }
.t-landing .step :where(p) { font-size: 1rem; line-height: 1.5; margin: 0; }
.t-landing .step--1 :where(p), .t-landing .step--2 :where(p) { color: var(--ink-soft); }
.t-landing .step--3 :where(p) { color: #EAF7F0; }
.t-landing .step-tag { display: inline-flex; align-self: flex-start; padding: 5px 13px; border-radius: 999px; font-size: 0.875rem; font-weight: 700; background: var(--card); color: var(--ink); }
.t-landing .step--3 .step-tag { background: var(--butter-2); }
.t-landing .step .link { color: var(--green-dark); }
.t-landing .step--3 .link { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.55); }
@media (hover: hover) and (pointer: fine) { .t-landing .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } }

/* ---------- What a weekly check gives you: the bento ---------- */
.t-landing .bento { margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.t-landing .cell {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(22px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--line);
  transition: transform 260ms var(--ease-snap), box-shadow 260ms var(--ease-snap);
}
@media (hover: hover) and (pointer: fine) { .t-landing .cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } }
.t-landing .cell :where(p) { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.t-landing .cell h3 { font-size: 1.5rem; }
.t-landing .cell--email { grid-column: span 2; grid-row: span 2; background: var(--butter); border-color: transparent; }
.t-landing .cell--history { grid-column: span 2; }
.t-landing .cell--fix { grid-column: span 2; background: var(--paper-2); border-color: transparent; }
.t-landing .cell--six { grid-column: span 2; background: var(--mint); border-color: transparent; }
.t-landing .cell--agency { background: var(--ink); color: #fff; border-color: transparent; --ring: #FFE24A; }
.t-landing .step--3, .t-landing .plan--pro, .t-landing .final { --ring: #FFE24A; }
.t-landing .cell--agency :where(p) { color: #E2DECF; }
.t-landing .cell--overlay { background: var(--peach); border-color: transparent; }
.t-landing .cell--overlay :where(p) { color: #3A2A22; }
.t-landing .cell--email .stack { display: grid; gap: 0; margin-top: auto; }

.t-landing .mail { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 22px; display: grid; gap: 14px; position: relative; z-index: 2; }
.t-landing .mail--summary { margin: -14px 18px 0; padding: 32px 20px 20px; z-index: 1; gap: 8px; box-shadow: var(--shadow-1); border-radius: 0 0 var(--r-lg) var(--r-lg); background: #FFFCEF; }
.t-landing .mail--summary .mail-subject { font-size: 1.0625rem; }
.t-landing .mail-meta { display: flex; align-items: center; gap: 12px; }
.t-landing .mail-avatar { width: 40px; height: 40px; border-radius: 12px; background: var(--green); color: #fff; font-family: var(--serif); font-style: italic; font-weight: 900; font-size: 1.4rem; line-height: 1; display: grid; place-items: center; flex: none; }
.t-landing .mail-from { font-weight: 650; font-size: 0.9375rem; line-height: 1.25; }
.t-landing .mail-to { font-size: 0.8125rem; color: var(--muted); }
.t-landing .mail-subject { font-family: var(--display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; color: var(--ink); }
.t-landing .cell .mail-body { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }
.t-landing .mail-list { display: grid; gap: 8px; }
.t-landing .mail-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.35; padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.t-landing .mail-list svg { flex: none; margin-top: 1px; color: var(--v-false); }
.t-landing .mail-btn { display: inline-flex; align-self: flex-start; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 650; font-size: 0.9375rem; }

.t-landing .track { display: flex; align-items: center; margin-top: auto; padding-top: 10px; }
.t-landing .track-node { display: grid; justify-items: center; gap: 8px; flex: none; }
.t-landing .track-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 4px solid var(--mint); box-sizing: content-box; }
.t-landing .track-dot--new { background: var(--v-false); border-color: var(--peach); }
.t-landing .track-label { font-size: 0.8125rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.t-landing .track-line { flex: 1; height: 4px; background: var(--line-strong); margin-bottom: 26px; border-radius: 2px; min-width: 14px; }
.t-landing .track-new { color: var(--v-false); font-weight: 700; }
.t-landing .pills { display: flex; gap: 8px; flex-wrap: wrap; }
.t-landing .pill { display: inline; gap: normal; align-items: normal; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--line-strong); font-size: 0.8125rem; font-weight: 650; color: var(--ink-soft); background: var(--paper); cursor: auto; box-shadow: none; transition: none; line-height: inherit; }
.t-landing .pill:hover { border-color: var(--line-strong); }
.t-landing .pill:active { transform: none; }

.t-landing .cell--six h3 { max-width: 16ch; }
.t-landing .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 6px; }
.t-landing .tiles span { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--card); position: relative; }
.t-landing .tiles img { width: 100%; height: 100%; object-fit: cover; }
.t-landing .tiles .ok::after, .t-landing .tiles .bad::after {
  content: ""; position: absolute; right: 5px; bottom: 5px; width: 16px; height: 16px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 10px;
}
.t-landing .tiles .ok::after { background-color: var(--v-true); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.2 2.2L9.5 3.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.t-landing .tiles .bad::after { background-color: var(--v-false); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

.t-landing .fixtable { width: 100%; border-collapse: collapse; margin-top: auto; font-size: 0.875rem; line-height: 1.35; background: var(--card); border-radius: var(--r-md); overflow: hidden; }
.t-landing .fixtable th { text-align: left; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 650; padding: 12px 12px 8px; }
.t-landing .fixtable td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.t-landing .fixtable td:first-child { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-soft); width: 42%; overflow-wrap: anywhere; }
.t-landing .fixtable td:last-child { font-weight: 600; }

.t-landing .pool { display: flex; gap: 6px; margin-top: auto; height: 56px; }
.t-landing .pool span { display: flex; align-items: center; padding-inline: 14px; border-radius: 14px; font-size: 0.875rem; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; }
.t-landing .pool .p1 { flex: 5; background: var(--mint-2); }
.t-landing .pool .p2 { flex: 3; background: var(--butter-2); }
.t-landing .pool .p3 { flex: 2; background: var(--peach-2); }
.t-landing .cell--six :where(p) { margin-top: 10px; }
.t-landing .cell .pool-note { font-size: 0.875rem; color: #CFCBBA; }
.t-landing .cell--agency .link { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.t-landing .cell--overlay .link { color: #5B1A12; text-decoration-color: rgba(91, 26, 18, 0.45); }
.t-landing .nowidget { margin-top: auto; align-self: flex-start; }

/* ---------- Why it matters: the sourced figures, large ---------- */
.t-landing .stats { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; }
.t-landing .stat { border-radius: var(--r-xl); padding: clamp(26px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 16px; }
.t-landing .stat--ada { background: var(--butter); }
.t-landing .stat--eaa { background: var(--mint); }
.t-landing .stat .stat-big { font-family: var(--display); font-weight: 800; letter-spacing: -0.05em; line-height: 0.85; font-size: clamp(4.6rem, 2rem + 9vw, 9.5rem); color: var(--ink); }
.t-landing .stat :where(p) { font-size: 1.0625rem; color: var(--ink-soft); max-width: 40ch; }
.t-landing .stat .src { font-size: 0.875rem; color: var(--muted); }
.t-landing .stat .stat-big, .t-landing .stat .stat-date { max-width: none; }
.t-landing .bars { display: grid; gap: 10px; margin-top: auto; }
.t-landing .bar { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 0.9375rem; font-weight: 650; }
.t-landing .bar i { display: block; height: 14px; border-radius: 7px; background: var(--ink); transform-origin: left; }
.t-landing .bar--24 i { width: 78.7%; background: var(--line-strong); }
.t-landing .bar--25 i { width: 100%; background: var(--ink); }
.t-landing .stat .stat-date { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(3rem, 1.4rem + 5vw, 5.6rem); line-height: 0.92; color: var(--green-dark); letter-spacing: -0.035em; }
.t-landing .legal-note { margin-top: 20px; font-size: 0.875rem; color: var(--muted); }

/* ---------- Pricing ---------- */
.t-landing .pricing { background: var(--paper-2); border-radius: var(--r-xl); margin-inline: clamp(8px, 1.2vw, 16px); }
.t-landing .once {
  margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px);
  background: var(--mint); border-radius: var(--r-xl); padding: clamp(26px, 4vw, 52px); align-items: center;
}
.t-landing .once h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.05; }
.t-landing .once :where(p) { margin-top: 14px; color: var(--ink-soft); max-width: 44ch; }
.t-landing .once .btn { margin-top: 24px; }
.t-landing .once .once-fine { margin-top: 4px; font-size: 0.875rem; color: var(--ink-soft); max-width: 50ch; }
.t-landing .once .eyebrow { margin: 0 0 12px; }
.t-landing .sizes { display: grid; gap: 14px; }
.t-landing .once .size { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; background: var(--card); border-radius: var(--r-md); padding: 20px 24px; box-shadow: var(--shadow-1); max-width: none; }
.t-landing .size b { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing: -0.04em; line-height: 1; }
.t-landing .size span { font-weight: 600; text-align: right; line-height: 1.25; }
.t-landing .plans-head { margin-top: clamp(40px, 5vw, 72px); display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.t-landing .plans-head h3 { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem); }
.t-landing .plans { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.t-landing .plan {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px 30px; display: flex; flex-direction: column; gap: 18px;
  position: static; box-shadow: none; margin: 0;
  transition: transform 260ms var(--ease-snap), box-shadow 260ms var(--ease-snap);
}
@media (hover: hover) and (pointer: fine) { .t-landing .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } }
.t-landing .plan h4 { font-family: var(--display); font-weight: 650; font-size: 1.375rem; line-height: 1.6; letter-spacing: -0.015em; margin: 0; }
.t-landing .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; font-family: var(--display); font-weight: 800; font-size: 4rem; letter-spacing: -0.05em; line-height: 0.9; }
.t-landing .plan-price span { font-family: var(--body); font-weight: 600; font-size: 1rem; letter-spacing: 0; color: var(--muted); }
.t-landing .plan-pages { font-weight: 650; }
.t-landing .plan ul { display: grid; gap: 10px; font-size: 0.9688rem; line-height: 1.4; margin: 0 0 auto; padding: 0; border-top: 0; color: inherit; flex: initial; }
.t-landing .plan li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; }
.t-landing .plan li svg { margin-top: 2px; color: var(--green); }
.t-landing .plan .btn { width: 100%; padding-inline: 1.6rem; }
.t-landing .plan-note { font-size: 0.875rem; color: var(--muted); }
.t-landing .plan--pro { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-14px); padding-block: 40px; }
.t-landing .plan--pro .plan-price span, .t-landing .plan--pro .plan-note { color: #CFCBBA; }
.t-landing .plan--pro li svg { color: var(--butter-2); }
.t-landing .plan--pro .btn { background: var(--butter-2); color: var(--ink); border-color: transparent; }
.t-landing .plan--pro .btn:hover { background: var(--butter-2); color: var(--ink); border-color: transparent; }
@media (hover: hover) and (pointer: fine) { .t-landing .plan--pro:hover { transform: translateY(-18px); } }
.t-landing .free-strip { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 18px 26px; }
.t-landing .free-strip b { font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.015em; }
.t-landing .free-strip p { flex: 1 1 320px; font-size: 0.9688rem; color: var(--ink-soft); }
.t-landing .pricing-note { margin: 28px 0 0; font-size: 0.9375rem; color: var(--ink-soft); max-width: 80ch; }
.t-landing .checkout-status { margin: 10px 0 0; font-size: 0.9375rem; color: var(--ink); }
.t-landing .checkout-status.is-error { color: var(--v-false); font-weight: 600; }

/* ---------- Plainly: what a report is, and the FAQ ---------- */
.t-landing .plainly { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.t-landing .statement { position: sticky; top: 24px; }
.t-landing .statement .big { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(2.6rem, 1.4rem + 4vw, 4.8rem); line-height: 0.98; letter-spacing: -0.035em; color: var(--ink); margin-top: 18px; text-wrap: balance; }
.t-landing .statement .big span { color: var(--green); }
.t-landing .statement ul { margin-top: 28px; display: grid; gap: 14px; }
.t-landing .statement li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.t-landing .statement li svg { margin-top: 2px; color: var(--green); }
.t-landing .faq { display: grid; gap: 12px; }
.t-landing .faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 240ms var(--spring-smooth), box-shadow 240ms var(--spring-smooth); }
.t-landing .faq details[open] { border-color: var(--ink); box-shadow: var(--shadow-1); }
.t-landing .faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 14px 24px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 650; font-size: 1.1875rem; letter-spacing: -0.015em; line-height: 1.25; border-radius: var(--r-lg);
}
.t-landing .faq summary::-webkit-details-marker { display: none; }
.t-landing .faq summary svg { flex: none; transition: transform 300ms var(--spring-smooth); }
.t-landing .faq details[open] summary svg { transform: rotate(45deg); }
.t-landing .faq .answer { padding: 0 24px 24px; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 64ch; }

/* ---------- The closing call to action ---------- */
.t-landing .final { margin-inline: clamp(8px, 1.2vw, 16px); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); background: var(--green); color: #fff; padding: clamp(56px, 8vw, 120px) 0; }
.t-landing .final .wrap { position: relative; display: grid; justify-items: center; text-align: center; gap: 22px; }
.t-landing .final h2 { color: #fff; max-width: 14ch; font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.9rem); }
.t-landing .final h2 em { color: var(--butter-2); }
.t-landing .final p { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); color: #E4F6EC; max-width: 34em; }
.t-landing .final .btn { margin-top: 8px; min-height: 60px; padding-inline: 2.2rem; font-size: 1.0625rem; }
.t-landing .final .alt-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 255, 255, 0.55); }
.t-landing .final .alt-link:hover { color: #fff; text-decoration-color: #fff; }
.t-landing .floaty { position: absolute; z-index: -1; display: none; }
@media (min-width: 1024px) {
  .t-landing .floaty { display: inline-flex; }
  .t-landing .floaty--1 { left: 3%; top: 6%; rotate: -6deg; }
  .t-landing .floaty--2 { right: 4%; top: 12%; rotate: 5deg; }
  .t-landing .floaty--3 { left: 9%; bottom: 4%; rotate: 4deg; }
  .t-landing .floaty--4 { right: 8%; bottom: 8%; rotate: -4deg; }
}
.t-landing .floaty .chip { padding: 11px 22px 11px 15px; font-size: 1.125rem; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24); }
.t-landing .final .chip--true { background: var(--card); color: var(--green-dark); }

/* ---------- Found this useful? Link to it (public/link-to-it.js): a compact strip above the footer ---------- */
.t-landing .link-to-it { padding: clamp(24px, 3vw, 40px) 0 0; }
.t-landing .link-to-it-box {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 14px 32px;
  background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 20px 26px; box-shadow: none;
}
.t-landing .link-to-it h2 { font-family: var(--display); font-size: 1.25rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 4px; }
.t-landing .link-to-it p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }
.t-landing .link-to-it-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.t-landing .link-to-it-row :is(input, textarea) { flex: 1 1 260px; min-width: 0; border-radius: var(--r-sm); border: 1.5px solid var(--muted); background: var(--paper); font-size: 0.875rem; resize: none; }
.t-landing .link-to-it-row:has(textarea) { align-items: center; }
.t-landing .link-to-it .btn-quiet { min-height: 44px; padding: 0 1.2rem; background: var(--card); color: var(--ink); border: 2px solid var(--ink); font-size: 0.9375rem; }
.t-landing .link-to-it .btn-quiet:hover { background: var(--card); color: var(--ink); border-color: var(--ink); }
.t-landing .link-to-it .btn.copied, .t-landing .link-to-it .btn.copied:hover { background: var(--green); color: #fff; border-color: var(--green); }
.t-landing .link-to-it .link-to-it-done { grid-column: 1 / -1; margin: 0; color: var(--green-dark); font-weight: 600; }

/* ---------- The sign-off and the footer are styles.css's (tools/site-shell.mjs writes them on every page) ---------- */

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .t-landing .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-landing :is(.cell--email, .cell--history, .cell--fix, .cell--six) { grid-column: span 2; }
  .t-landing .cell--email { grid-row: auto; }
  .t-landing .demo.is-tabs .demo-grid { grid-template-columns: minmax(0, 1fr); }
  .t-landing .demo.is-tabs .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .t-landing .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .t-landing .cluster { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; max-width: 640px; }
  .t-landing .vcard { position: relative; inset: auto; width: auto; rotate: 0deg; animation: none; }
  .t-landing :is(.vcard--a, .vcard--b, .vcard--c) { width: auto; right: auto; left: auto; top: auto; bottom: auto; }
  .t-landing .vcard--a { grid-column: 1 / -1; order: 1; }
  .t-landing .vcard--a .vcard-art { aspect-ratio: 2 / 1; }
  .t-landing .vcard--b { order: 2; }
  .t-landing .vcard--c { order: 3; }
  .t-landing :is(.vcard--b, .vcard--c) .vcard-art { aspect-ratio: 4 / 3; }
  .t-landing .hero .vcard--a .sweep::before { animation-delay: 300ms; }
  .t-landing .hero-sun { top: auto; bottom: 6%; right: -80px; }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .t-landing .cluster { max-width: none; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; gap: 18px; }
  .t-landing .vcard--a { grid-column: auto; order: 2; }
  .t-landing .vcard--a .vcard-art { aspect-ratio: 4 / 3; }
  .t-landing .vcard--c { order: 1; rotate: -2deg; }
  .t-landing .vcard--b { order: 3; rotate: 2deg; }
  .t-landing .hero-sun { top: auto; bottom: -60px; right: -60px; }
}
@media (max-width: 960px) {
  .t-landing .stairs { grid-template-columns: minmax(0, 1fr); }
  .t-landing :is(.step--1, .step--2, .step--3) { min-height: 0; }
  .t-landing .step .step-num { min-height: 96px; }
  .t-landing .stats { grid-template-columns: minmax(0, 1fr); }
  .t-landing .once { grid-template-columns: minmax(0, 1fr); }
  .t-landing .plans { grid-template-columns: minmax(0, 1fr); }
  .t-landing .plan--pro { transform: none; padding-block: 32px; }
  .t-landing .plainly { grid-template-columns: minmax(0, 1fr); }
  .t-landing .statement { position: static; }
  .t-landing .vpanel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "art" "code" "body"; }
  .t-landing .link-to-it-box { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .t-landing .vcard--a .vcard-art { aspect-ratio: 16 / 10; }
  .t-landing .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-landing .tab { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px 8px 12px; align-content: start; }
  .t-landing .tab-thumb { width: 100%; }
  .t-landing .tab-alt { display: none; }
  .t-landing .hero-sun { width: 240px; right: -90px; bottom: 4%; top: auto; }
  .t-landing .bento { grid-template-columns: minmax(0, 1fr); }
  .t-landing :is(.cell--email, .cell--history, .cell--fix, .cell--six) { grid-column: auto; }
  .t-landing .vcard figcaption { padding: 14px 16px 16px; gap: 10px; }
  .t-landing .vcard--a figcaption { padding: 16px 20px 20px; }
  .t-landing .vcard .alt-quote { font-size: 0.8125rem; }
  .t-landing .vcard .chip { font-size: 0.8125rem; padding: 5px 11px 5px 8px; }
  .t-landing :is(.vcard--b, .vcard--c) .ai-tag { font-size: 0.75rem; }
  .t-landing .size { flex-direction: column; align-items: flex-start; gap: 6px; }
  .t-landing .size span { text-align: left; }
}
@media (max-width: 460px) {
  .t-landing .bar { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; }
}

/* ---------- Reduced motion: no animation, no transitions, no smooth scroll ---------- */
@media (prefers-reduced-motion: reduce) {
  .t-landing *, .t-landing *::before, .t-landing *::after { animation: none !important; transition: none !important; }
  .t-landing .sweep { display: none; }
}
/* Forced colors */
@media (forced-colors: active) {
  .t-landing :is(.chip, .ai-tag, .tag-rule, .pill) { border: 1px solid CanvasText; }
  .t-landing :is(.hero-panel, .final, .step, .cell, .stat, .once, .link-to-it-box) { border: 1px solid CanvasText; }
  /* The chosen demo tab: its fill, edge color and shadow are forced to the same values as an unchosen one's, so it gets a
     ring of its own. A pseudo-element, not an outline: the outline is the focus ring. */
  .t-landing .tab { position: relative; }
  .t-landing .tab[aria-selected="true"] { border-color: Highlight; }
  .t-landing .tab[aria-selected="true"]::after { content: ""; position: absolute; inset: 4px; border: 3px solid Highlight; border-radius: 16px; pointer-events: none; }
  /* Shapes that are only a fill: the two bars (the older one outlined, the newer one solid) and the verdict marks on the tiles. */
  .t-landing .bar i { background-color: CanvasText; }
  .t-landing .bar--24 i { background-color: Canvas; border: 2px solid CanvasText; }
  .t-landing .tiles :is(.ok, .bad)::after { forced-color-adjust: none; }
  .t-landing .plan--pro li svg { color: CanvasText; }
  .t-landing :is(.vcard, .mail, .size) { border: 1px solid CanvasText; }
}