/* Kitsuvo homepage: one ruled column between two washi panels. Only index.html loads this file.
   BRAND.md applies: system fonts, flat paper tones, line art, no gradients and no glass.
   Colours come from styles.css; verdict colours appear only on illustrated scores. */
.landing {
  --lp-col: 1120px;
  --lp-gutter: clamp(20px, 4vw, 48px);
  --lp-rule: rgba(28, 26, 23, 0.1);
  --lp-ember: #F7E4D8; /* foxfire on washi, as a flat paper tone */
  --lp-nav: 64px;
  background: var(--card); color: var(--sumi);
  font: 400 1rem/1.6 var(--font);
}
.landing [hidden] { display: none !important; }
.landing section[id], .landing div[id], .landing h2[id] { scroll-margin-top: calc(var(--lp-nav) + 16px); }
.landing :focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; border-radius: 8px; }
/* Zero-specificity resets, so the generated guide cards keep their own spacing from styles.css. */
:where(.lp-main) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, table) { margin: 0; }
:where(.lp-main) :where(h1, h2, h3) { font-family: var(--font-display); text-wrap: balance; }
.lp-main :where(p a, dd a) { color: var(--sumi); text-decoration: underline; text-decoration-color: rgba(28, 26, 23, 0.3); text-underline-offset: 4px; }

/* ---------- Buttons and links ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--sumi); color: var(--card);
  font: 600 0.9375rem/1 var(--font); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 0.2s ease, transform 0.12s var(--ease);
}
.lp-btn:active { transform: scale(0.97); }
.lp-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-btn-small { min-height: 44px; padding: 0 18px; font-size: 0.8125rem; }
.lp-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--sumi); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.lp-link span, .lp-eyebrow span { transition: transform 0.2s var(--ease); }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--vermilion-ink); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.lp-head .lp-eyebrow { margin-bottom: 4px; }
.lp-pill { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 6px 18px; border-radius: 12px; background: rgba(28, 26, 23, 0.06); color: var(--sumi); font-size: 0.875rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .lp-btn:hover { background: var(--vermilion); }
  .lp-link:hover, a.lp-eyebrow:hover { text-decoration: underline; text-underline-offset: 5px; }
  .lp-link:hover span, a.lp-eyebrow:hover span { transform: translateX(2px); }
  .lp-pill:hover { background: rgba(28, 26, 23, 0.1); }
  .lp-main :where(p a, dd a):hover { color: var(--vermilion-ink); text-decoration-color: currentColor; }
}

/* ---------- Navigation: clear over the hero panel, paper once the page scrolls ---------- */
.lp-nav {
  position: sticky; top: 0; z-index: 50; height: var(--lp-nav);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 max(var(--lp-gutter), calc((100% - var(--lp-col)) / 2));
  background: var(--card); border-bottom: 1px solid var(--lp-rule);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.js .lp-nav:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.lp-nav > a:first-child { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.lp-nav nav { display: flex; align-items: center; gap: 28px; font-size: 0.875rem; }
.lp-nav nav a, .lp-nav nav button { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; white-space: nowrap; border: 0; background: none; color: var(--sumi); font: inherit; text-decoration: none; cursor: pointer; transition: color 0.2s ease; }
.lp-nav nav a[aria-current] { color: var(--vermilion-ink); }
.lp-nav .lp-btn { justify-self: end; }
@media (hover: hover) and (pointer: fine) { .lp-nav nav a:hover, .lp-nav nav button:hover { color: var(--vermilion-ink); } }

/* ---------- Hero: the panel stops short so the browser hangs over the page ---------- */
.lp-hero { --lp-hero-pad: clamp(8px, 1vw, 12px); position: relative; margin-top: calc(-1 * var(--lp-nav)); padding: 8px var(--lp-hero-pad) 0; }
/* The panel is a size container so its paper can be drawn from the browser: the paper always ends --lp-hang
   above the browser's bottom edge, whatever sits below the browser at any width. */
.lp-hero-panel { --lp-pad: var(--lp-gutter); --lp-hang: clamp(28px, 7vw, 110px); --lp-top: calc(var(--lp-nav) + clamp(40px, 6.2vw, 76px)); --lp-h1: clamp(2.25rem, 5.2vw, 3.5rem); position: relative; isolation: isolate; container-type: inline-size; overflow: clip; border-radius: 24px 24px 0 0; box-shadow: inset 0 1px 0 var(--lp-rule); padding: var(--lp-top) var(--lp-pad) 0; text-align: center; }
.lp-browser-wrap::before { content: ""; position: absolute; z-index: -2; left: 50%; bottom: var(--lp-hang); width: 100vw; width: calc(100cqw + 2 * var(--lp-pad)); height: 2400px; translate: -50% 0; border-radius: 0 0 24px 24px; background: var(--washi); box-shadow: inset 0 0 0 1px var(--lp-rule); }
.lp-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--lp-rule); font-size: 0.8125rem; font-weight: 600; }
.lp-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--vermilion); }
.lp-hero h1, .lp-eye-h1 { margin-top: 20px; font-size: var(--lp-h1); line-height: 1.06; font-weight: 600; letter-spacing: -0.03em; }
.lp-hero-lede { max-width: 53ch; margin: 18px auto 0; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.55; text-wrap: pretty; }
.lp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; margin-top: 28px; }
.lp-hero-meta { margin-top: 12px; color: var(--muted); font-size: 0.8125rem; }
.lp-hero-meta a { color: inherit; text-underline-offset: 3px; }

/* Three equal reasons on one ruled line, each a link to the section that backs it. */
.lp-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(660px, 100%); margin: clamp(22px, 3vw, 28px) auto 0; border-block: 1px solid var(--lp-rule); font-size: 0.875rem; font-weight: 600; line-height: 1.25; }
.lp-proof a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 6px 10px; color: var(--sumi); text-decoration: none; text-wrap: balance; transition: color 0.2s ease; }
.lp-proof a + a { border-left: 1px solid var(--lp-rule); }
.lp-proof a::after { content: "\2193"; content: "\2193" / ""; color: var(--muted); font-weight: 400; transition: transform 0.2s var(--ease); }
.landing .lp-proof a:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .lp-proof a:hover { color: var(--vermilion-ink); }
  .lp-proof a:hover::after { transform: translateY(2px); }
}
/* On a phone the three stay side by side; each label takes two lines instead of the strip taking three rows. */
@media (max-width: 620px) {
  .lp-proof { font-size: 0.8125rem; }
  .lp-proof a { padding: 6px 4px; }
  .lp-proof a::after { content: none; }
}
@media (max-width: 380px) { .lp-proof { font-size: 0.75rem; } }

/* ---- One eye open: under the paper is a night sheet, and a fox-eye lens sees through to it ----
   The eye rests beside the headline, lit, with the closed eye across from it, as on the mask. landing.js opens
   the lens where the pointer or a tap lands on the paper, or walks it through the page from this button. The
   sheet is a copy of the blocks above, so it stays in register at every width; nothing is hidden without script. */
.lp-hero-panel { --eye-w: 300px; --eye-h: 176px; --eye-y: calc(var(--lp-top) + 50px + 1.06 * var(--lp-h1)); --eye-d: calc(3.8 * var(--lp-h1) + 92px); }
.lp-eye-btn { position: absolute; left: 50%; translate: -50% 0; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--sumi); font: 600 0.8125rem/1.3 var(--font); white-space: nowrap; cursor: pointer; }
.lp-eye-btn::before { content: ""; position: absolute; inset: 5px 0; z-index: -1; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--lp-rule); }
.lp-eye-btn svg { flex: none; width: 28px; height: 14px; overflow: visible; transition: transform 0.2s var(--ease); }
.lp-eye-btn path { fill: var(--vermilion); stroke: var(--vermilion); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill-opacity 0.2s ease; }
/* While the lens is out, the lit eye is only its outline. */
.lp-eye-btn.is-out path { fill-opacity: 0; }
.lp-eye-btn b { color: var(--vermilion-ink); font-weight: 600; }
.lp-eye-btn:active svg { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .lp-eye-btn:hover { color: var(--vermilion-ink); } }
@media (min-width: 761px) {
  .lp-eye-btn { left: calc(50% - var(--eye-d)); top: calc(var(--eye-y) - 24px); flex-direction: column; gap: 10px; width: 132px; margin: 0; padding: 8px 4px; border-radius: 12px; color: var(--muted); font-size: 0.75rem; white-space: normal; }
  .lp-eye-btn::before { content: none; }
  .lp-eye-btn svg { width: 60px; height: 30px; }
  .lp-eye-btn b { display: block; }
  /* The closed eye mirrors the lit one across the headline; it never opens. */
  .lp-eye-btn::after { content: ""; position: absolute; left: calc(50% + 2 * var(--eye-d)); top: 21px; width: 54px; height: 4px; border-radius: 2px; background: var(--sumi); translate: -50% 0; rotate: -15deg; pointer-events: none; }
}
@media (max-width: 760px) { .lp-hero-panel { --eye-w: 232px; --eye-h: 136px; } }

/* The lens: an almond cut in the paper. The hole moves and narrows to a slit; the sheet inside takes the
   opposite transform, so what shows through never moves against the page. */
.lp-eye { position: absolute; inset: 0 0 auto; height: 0; padding-bottom: var(--lp-hang); overflow: clip; border-radius: 0 0 24px 24px; pointer-events: none; }
.lp-eye-hole { position: absolute; left: 0; top: 0; width: var(--eye-w); height: var(--eye-h); transform-origin: 50% 55.15%; opacity: 0; }
.lp-eye-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-eye-rim path { fill: none; stroke: var(--vermilion); stroke-width: 3; vector-effect: non-scaling-stroke; }
.lp-eye-sheet { position: absolute; left: 0; top: 0; width: calc(100cqw + 2 * var(--lp-pad)); padding: var(--lp-top) var(--lp-pad) 0; background: var(--night); color: var(--ink-dark); text-align: center; transform-origin: calc(var(--eye-w) / 2) calc(var(--eye-h) * 0.5515); }
/* The page's ruled column runs on under the hero. */
.lp-eye-sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: min(var(--lp-col), calc(100cqw + 2 * var(--lp-pad) + 2 * var(--lp-hero-pad) - 2 * var(--lp-gutter))); translate: -50% 0; border-inline: 1px solid rgba(255, 122, 69, 0.24); }
.lp-eye-h1 { width: fit-content; margin-inline: auto; font-family: var(--font-display); text-wrap: balance; color: transparent; -webkit-text-stroke: 1px var(--foxfire); }
.lp-eye-sheet > :is(.lp-badge, .lp-eye-h1, .lp-hero-lede, .lp-hero-meta) { outline: 1px dashed rgba(255, 122, 69, 0.36); outline-offset: 5px; }
.lp-eye-sheet .lp-badge { background: none; box-shadow: inset 0 0 0 1px rgba(255, 122, 69, 0.5); }
.lp-eye-sheet .lp-badge i { background: var(--foxfire); }
.lp-eye-sheet :is(.lp-hero-lede, .lp-hero-meta, .lp-eye-btn) { color: var(--muted-dark); }
.lp-eye-sheet .lp-hero-meta { width: fit-content; margin-inline: auto; }
.lp-eye-sheet .lp-btn { background: none; color: var(--foxfire); box-shadow: inset 0 0 0 1px var(--foxfire); }
.lp-eye-sheet :is(.lp-link, .lp-proof a) { color: var(--ink-dark); }
.lp-eye-sheet .lp-proof, .lp-eye-sheet .lp-proof a { border-color: var(--line-dark); }
.lp-eye-sheet .lp-proof a::after { color: var(--muted-dark); }
.lp-eye-sheet .lp-eye-btn::before { background: none; box-shadow: inset 0 0 0 1px var(--line-dark); }
.lp-eye-sheet .lp-eye-btn path { fill: none; stroke: var(--foxfire); }
.lp-eye-sheet .lp-eye-btn b { color: var(--foxfire); }
.lp-eye-sheet .lp-eye-btn::after { background: var(--foxfire); }
.lp-eye-wrap { position: relative; aspect-ratio: 1200 / 675; }
/* The rings come through as foxfire, in the same place and with the same drift as the ones on the paper. */
.lp-eye-sheet .lp-rings i { border-color: rgba(255, 122, 69, 0.5); clip-path: inset(-16px -16px 50% -16px); animation: none; }
.lp-eye-sheet .lp-rings i:nth-child(1) { border-color: var(--foxfire); box-shadow: 0 0 12px rgba(255, 122, 69, 0.5), inset 0 0 12px rgba(255, 122, 69, 0.28); }
@media (max-width: 760px) {
  .lp-eye { border-radius: 0 0 18px 18px; }
  .lp-eye-sheet::before { content: none; }
}

/* What the eye is looking at, as one measured sentence. From the button it becomes a short guide with steps. */
.lp-eye-guide { position: absolute; left: 0; top: 0; z-index: 2; width: min(300px, calc(100cqw + 2 * var(--lp-pad) - 16px)); padding: 10px 14px 11px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--lp-rule), 0 14px 32px -16px rgba(33, 24, 45, 0.45); font-size: 0.8125rem; line-height: 1.45; text-align: left; pointer-events: none; opacity: 0; }
.lp-eye-guide.is-guiding { pointer-events: auto; }
.lp-eye-kicker { color: var(--vermilion-ink); font-size: 0.75rem; font-weight: 600; }
.lp-eye-fact { font-variant-numeric: tabular-nums; text-wrap: pretty; }
.lp-eye-hint { margin-top: 4px; color: var(--muted); font-size: 0.75rem; }
.lp-eye-steps { display: flex; gap: 6px; margin-top: 10px; }
.lp-eye-steps button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(28, 26, 23, 0.06); color: var(--sumi); font: 600 0.8125rem/1 var(--font); cursor: pointer; transition: background-color 0.2s ease, transform 0.12s var(--ease); }
.lp-eye-steps button:active { transform: scale(0.97); }
.lp-eye-steps button:disabled { color: var(--muted); opacity: 0.55; cursor: default; }
.lp-eye-steps button:last-child { margin-left: auto; background: none; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .lp-eye-steps button:not(:disabled):hover { background: rgba(28, 26, 23, 0.1); }
  .lp-eye-steps button:last-child:hover { background: none; color: var(--vermilion-ink); }
}
@media (pointer: coarse) { .lp-eye-steps button { min-height: 44px; } }
@media print { .lp-eye, .lp-eye-guide, .lp-eye-btn { display: none !important; } }

.lp-stage, .lp-eye-stage { width: min(1040px, 100%); margin: clamp(36px, 5.4vw, 64px) auto 0; }
/* On a phone the eye is a small tag in the gap above the browser, which is kept open for it. */
@media (max-width: 760px) { .lp-stage, .lp-eye-stage { margin-top: 56px; } }
.lp-browser-wrap { position: relative; }
/* The foxfire aperture: line rings rising behind the browser, as on the start page. */
.lp-rings { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lp-rings i { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border: 1px solid var(--lp-rule); border-radius: 50%; translate: -50% -50%; clip-path: inset(0 0 50% 0); }
.lp-rings i:nth-child(1) { height: 118%; border: 1.5px solid var(--vermilion); }
/* The paper rings are wider than the panel, so they leave through its sides instead of ending in mid-air. */
.lp-rings i:nth-child(2) { width: 108vw; }
.lp-rings i:nth-child(3) { width: 136vw; }
/* The aperture opens once as the page loads (CSS, so it stays smooth while scripts load), then drifts up
   with the first screen of scrolling where scroll timelines exist. Both are decoration and both are optional. */
@media (prefers-reduced-motion: no-preference) {
  .lp-rings i { animation: lp-ring 0.9s var(--ease) both; }
  .lp-rings i:nth-child(2) { animation-delay: 0.1s; }
  .lp-rings i:nth-child(3) { animation-delay: 0.2s; }
  @supports (animation-timeline: scroll()) {
    .lp-rings { animation: lp-drift linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  }
}
@keyframes lp-ring { from { opacity: 0; transform: scale(0.94); } }
@keyframes lp-drift { to { transform: translateY(-28px) scale(1.05); } }
.lp-browser {
  position: relative; aspect-ratio: 1200 / 675; overflow: clip;
  border: 1px solid #423B4A; border-radius: clamp(8px, 1.2vw, 14px); background: #0F0D14;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 40px 90px -30px rgba(33, 24, 45, 0.5), 0 10px 28px rgba(33, 24, 45, 0.14);
}
.lp-browser kitsuvo-demo { position: absolute; inset: 0; display: block; }
.browser-demo-fallback { margin: 0; padding: 15%; color: var(--ink-dark); font-size: clamp(0.875rem, 2vw, 1.25rem); text-align: center; }

/* The demo appends its illustrative MCP task to the stage: a prompt, three steps and the tool result. */
.lp-stage .demo-llm-task {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px;
  width: min(820px, 100%); margin: 16px auto 0; padding: 14px 18px; border-radius: 16px;
  background: var(--card); box-shadow: 0 0 0 1px var(--lp-rule), 0 14px 40px -18px rgba(33, 24, 45, 0.3);
  font-size: 0.8125rem; line-height: 1.5; text-align: left;
}
.lp-stage .demo-llm-task strong { grid-column: 1; color: var(--vermilion-ink); font-size: 0.75rem; font-weight: 600; }
.lp-stage .demo-llm-task p { grid-column: 1; margin: 0; font-size: 0.9375rem; font-weight: 600; }
.lp-stage .demo-llm-task div { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.lp-stage .demo-llm-task button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(28, 26, 23, 0.06); color: var(--sumi); font: 600 0.8125rem/1 var(--font); white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, transform 0.12s var(--ease); }
.lp-stage .demo-llm-task button:active { transform: scale(0.97); }
.lp-stage .demo-llm-task output { grid-column: 1; min-height: 1.5em; color: var(--muted); font: 0.75rem/1.5 var(--mono); overflow-wrap: anywhere; }
.lp-stage .demo-llm-task a { grid-column: 2; justify-self: end; display: inline-flex; align-items: center; min-height: 44px; color: var(--sumi); font-weight: 600; text-decoration: none; }
.lp-stage-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px; margin-top: 10px; color: var(--muted); font-size: 0.8125rem; }
.lp-stage-note button { min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--sumi); font: 600 0.8125rem/1 var(--font); cursor: pointer; }
.lp-stage-note button:disabled { color: var(--muted); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .lp-stage .demo-llm-task button:hover { background: rgba(28, 26, 23, 0.1); }
  .lp-stage .demo-llm-task a:hover, .lp-stage-note button:not(:disabled):hover { color: var(--vermilion-ink); }
}

/* ---------- The ruled column ---------- */
.lp-band { border-top: 1px solid var(--lp-rule); }
.lp-hero + .lp-band { margin-top: clamp(40px, 6vw, 72px); }
.lp-col { width: min(var(--lp-col), calc(100% - 2 * var(--lp-gutter))); margin-inline: auto; padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 72px); border-inline: 1px solid var(--lp-rule); }
.lp-col-tint { background: var(--washi); }
.lp-col-flush { padding: 0; }
.lp-head { max-width: 860px; margin-inline: auto; text-align: center; }
.lp-head h2, .lp-cta h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.lp-prose { max-width: 580px; margin: clamp(24px, 3vw, 36px) auto 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.lp-prose p + p { margin-top: 1em; }
.lp-fine, .lp-guide { font-size: 0.875rem; line-height: 1.7; }
.lp-guide { max-width: 760px; margin: clamp(32px, 4vw, 48px) auto 0; color: var(--muted); text-align: center; text-wrap: pretty; }

.lp-manifesto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 8px 40px; max-width: 900px; margin-inline: auto; }
.lp-manifesto .lp-eyebrow { align-self: start; min-height: 0; padding-top: 4px; }
.lp-manifesto-body p { color: var(--muted); font-size: clamp(1.0625rem, 1.7vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }
.lp-manifesto-body p + p { margin-top: 1.2em; }
.lp-manifesto-body strong, .lp-text h3, .lp-defs dt { color: var(--sumi); font-weight: 600; }

/* MCP tools as a wall of keys. */
.lp-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; margin: clamp(32px, 5vw, 56px) auto 0; padding: 0; list-style: none; }
.lp-wall li { padding: 10px 14px; border-radius: 12px; background: var(--washi); box-shadow: inset 0 0 0 1px var(--lp-rule), 0 1px 0 rgba(28, 26, 23, 0.06); font: 500 0.8125rem/1.2 var(--mono); }
.lp-wall li:nth-child(4n + 1) { background: var(--lp-ember); }
.lp-wall li:nth-child(5n + 3) { background: var(--card); }

/* Small scene parts: cards, rows, keys and scores shared by the instruments and the trust scenes. */
.lp-mini { padding: 12px 14px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px rgba(28, 26, 23, 0.06), 0 14px 30px -16px rgba(28, 26, 23, 0.4); transition: transform 0.25s var(--ease); }
.lp-mini-dark { background: var(--night); color: var(--ink-dark); }
.lp-row { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.lp-row + .lp-row { border-top: 1px solid var(--lp-rule); }
.lp-row b { font-weight: 600; }
.lp-row small { color: var(--muted); font-size: 0.6875rem; }
.lp-end { margin-left: auto; }
.lp-ok { width: 12px; height: 7px; border: solid var(--sumi); border-width: 0 0 1.8px 1.8px; transform: rotate(-45deg) translateY(-2px); }
.lp-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--foxfire); }
.lp-key { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 7px; background: rgba(28, 26, 23, 0.07); font-size: 0.6875rem; font-weight: 600; }
.lp-key-stop { background: var(--vermilion); color: #fff; }
.lp-key-ai { background: rgba(160, 38, 106, 0.12); color: var(--ai); }
.lp-key-human { background: rgba(46, 120, 199, 0.12); color: var(--human); }
.lp-score { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; }
.lp-score b { color: var(--ai); font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.lp-text { margin-top: 16px; padding-inline: 6px; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
.lp-text h3, .lp-text p { display: inline; font-family: var(--font); font-size: inherit; line-height: inherit; letter-spacing: 0; }

/* An instrument in three panes: the scenes above joined into one object that shares one state.
   Native switches, checkboxes and disclosures hold that state and :has() draws it, so it works without landing.js.
   The base rules draw the resting state, which is also what a browser without :has() shows. */
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-rig { --lp-unclear: #B49A1C; /* BRAND.md gold; styles.css only carries its text shade */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 72px); border-radius: 14px; overflow: hidden; counter-reset: lp-pane; font-size: 0.8125rem; line-height: 1.4; }
.lp-rig-pane { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; padding: 16px 16px 18px; background: var(--frame); }
.lp-read .lp-rig-pane:nth-child(2), .lp-calls .lp-rig-pane:nth-child(1) { background: var(--lp-ember); }
.lp-read .lp-rig-pane:nth-child(3), .lp-calls .lp-rig-pane:nth-child(2) { background: var(--washi); }
.lp-rig-label { color: var(--muted); font-size: 0.6875rem; font-weight: 650; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; }
.lp-rig-label::before, .lp-rig-notes article::before { color: var(--vermilion-ink); font-size: 0.6875rem; font-weight: 650; line-height: 1.5; font-variant-numeric: tabular-nums; }
.lp-rig-label::before { counter-increment: lp-pane; content: counter(lp-pane); margin-right: 8px; }
/* A pane holds one sheet, or a bar above a sheet that takes the height left over. */
.lp-rig-stack { display: grid; grid-template-rows: auto 1fr; gap: 10px; min-width: 0; }
.lp-rig .lp-mini { display: flex; flex-direction: column; min-width: 0; }
.lp-rig .lp-rig-bar { padding-block: 4px; }
.lp-rig .lp-row { min-height: 32px; }
/* A sentence or label that depends on the state: every wording is in the page and the state shows one of them. */
.lp-rig [data-when] { display: none; animation: lp-rig-in 0.3s var(--ease) both; }
/* What the current state means: a well at the foot of a sheet, or a line under one. */
.lp-rig-status { min-height: 2.9em; color: var(--muted); font-size: 0.75rem; line-height: 1.45; text-wrap: pretty; }
.lp-mini > .lp-rig-status { flex: 1; display: grid; align-content: center; min-height: calc(2.9em + 24px); margin-top: 10px; padding: 12px 14px; border-radius: 8px; background: var(--washi); color: var(--sumi); font-size: 0.8125rem; }
.lp-rig-stack > .lp-rig-status { padding: 0 2px; }
/* Controls: the whole row is the target, 44 px tall at every width. */
.lp-rig .lp-rig-control { position: relative; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.lp-rig-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.lp-rig-input:focus-visible + * { outline: 2px solid var(--vermilion); outline-offset: 3px; }
.lp-mini-dark .lp-rig-input:focus-visible + * { outline-color: var(--foxfire); }
.lp-rig-switch { position: relative; flex: none; width: 36px; height: 20px; border-radius: 10px; background: rgba(28, 26, 23, 0.5); }
.lp-rig-switch::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--vermilion); opacity: 0; transition: opacity 0.15s var(--ease); }
.lp-rig-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s var(--ease); }
.lp-rig-input:checked + .lp-rig-switch::before { opacity: 1; }
.lp-rig-input:checked + .lp-rig-switch::after { transform: translateX(16px); }
.lp-rig-key { height: 28px; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(28, 26, 23, 0.16); font-size: 0.75rem; white-space: nowrap; transition: transform 0.12s var(--ease); }
.lp-rig-control:active .lp-rig-key { transform: scale(0.97); }
.lp-rig-input:checked + .lp-rig-key { background: var(--sumi); box-shadow: none; color: var(--card); }
.lp-rig-key.lp-key-stop { box-shadow: none; }
.lp-mini-dark .lp-rig-input:checked + .lp-rig-key { background: var(--night-3); color: var(--ink-dark); }
@media (hover: hover) and (pointer: fine) {
  .lp-rig-control:hover .lp-rig-input:not(:checked) + .lp-rig-key:not(.lp-key-stop) { background: rgba(28, 26, 23, 0.12); }
  .lp-rig summary:hover::after { color: var(--sumi); }
}
/* Forced colours drop the drawn switch, so the native box is shown in its place. */
@media (forced-colors: active) {
  .lp-rig-input { position: static; width: 16px; height: 16px; margin-left: auto; opacity: 1; pointer-events: auto; }
  .lp-rig-input + * { margin-left: 0; }
  .lp-rig-switch { display: none; }
}
/* Disclosures: an evidence line or a tool call opens onto what is behind it. */
.lp-rig details { border-top: 1px solid var(--lp-rule); }
.lp-rig summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.lp-rig summary::-webkit-details-marker { display: none; }
.lp-rig summary::after { content: "+"; flex: none; width: 16px; margin-left: auto; color: var(--muted); font-size: 1rem; font-weight: 400; line-height: 1; text-align: center; transition: transform 0.3s var(--ease); }
.lp-rig details[open] > summary::after { transform: rotate(45deg); }
.lp-rig details > :not(summary) { margin: -2px 0 12px; color: var(--muted); font: 0.6875rem/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.lp-rig details[open] > :not(summary), .lp-rig-pane.is-toured::after { animation: lp-rig-in 0.3s var(--ease) both; }
@keyframes lp-rig-in { from { opacity: 0; transform: translateY(4px); } }

/* The read: a result is masked while the filter hides it, the way the headline word is, and returns when you say so. */
.lp-read-query { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 4px; padding: 0 12px; border-radius: 16px; background: var(--washi); color: var(--muted); font-size: 0.75rem; }
.lp-read-query svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-read-result { min-height: 52px; padding: 7px 0; }
.lp-read-name { display: grid; min-width: 0; }
.lp-read-name b, .lp-read-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-read-name small { color: var(--muted); font: 0.6875rem/1.5 var(--mono); }
.lp-read-veil, .lp-read-veil small { color: var(--vermilion-ink); }
.lp-read-flagged > .lp-read-name:not(.lp-read-veil) { display: none; }
.lp-read-flagged .lp-key { opacity: 0.5; }
.lp-read [data-when="hidden"] { display: inline-block; }
.lp-read-yours { display: none; }
.lp-read:is(:has(#read-filter:not(:checked)), :has(#read-show:checked), :has(#read-correct:checked)) .lp-read-flagged > .lp-read-name:not(.lp-read-veil) { display: grid; }
.lp-read:is(:has(#read-filter:not(:checked)), :has(#read-show:checked), :has(#read-correct:checked)) :is(.lp-read-veil, .lp-read-gone, [data-when="hidden"]) { display: none; }
.lp-read:is(:has(#read-filter:not(:checked)), :has(#read-show:checked), :has(#read-correct:checked)) .lp-read-flagged .lp-key { opacity: 1; }
.lp-read:has(#read-filter:not(:checked)) .lp-read-show [data-when="off"],
.lp-read:has(#read-filter:checked):is(:has(#read-show:checked), :has(#read-correct:checked)) .lp-read-show [data-when="shown"],
.lp-read:has(#read-correct:checked) .lp-rig-status [data-when="corrected"],
.lp-read:has(#read-filter:not(:checked)):not(:has(#read-correct:checked)) .lp-rig-status [data-when="off"],
.lp-read:has(#read-filter:checked):has(#read-show:checked):not(:has(#read-correct:checked)) .lp-rig-status [data-when="shown"] { display: inline-block; }
/* Show has nothing to act on once filtering is off or the verdict is corrected. */
.lp-read:is(:has(#read-filter:not(:checked)), :has(#read-correct:checked)) .lp-read-show { cursor: default; }
.lp-read:is(:has(#read-filter:not(:checked)), :has(#read-correct:checked)) .lp-read-show :is(.lp-rig-input, .lp-rig-key) { display: none; }
.lp-read:has(#read-correct:checked) .lp-read-yours { display: inline-flex; }
.lp-read:has(#read-correct:checked) .lp-read-verdict { color: var(--muted); text-decoration: line-through; }
/* landing.js resolves the address glyph by glyph; while it does, the veil is the line on show. */
.lp-read-flagged.is-turning > .lp-read-name:not(.lp-read-veil) { display: none !important; }
.lp-read-flagged.is-turning > .lp-read-veil { display: grid !important; }
/* The app's ruler: three verdict bands with the score marked on it. */
.lp-read-ruler { position: relative; margin: 2px 0 10px; padding-bottom: 16px; }
.lp-read-ruler span { position: relative; display: flex; gap: 2px; height: 6px; }
.lp-read-ruler i { flex: 3 1 0; border-radius: 1px; background: var(--lp-unclear); opacity: 0.65; }
.lp-read-ruler i:first-child { flex-grow: 4; border-radius: 3px 1px 1px 3px; background: var(--human); }
.lp-read-ruler i:nth-child(3) { border-radius: 1px 3px 3px 1px; background: var(--ai); }
.lp-read-ruler b { position: absolute; left: 78%; top: -4px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: var(--ai); box-shadow: 0 0 0 2px var(--card); }
.lp-read-ruler small { position: absolute; bottom: 0; left: 40%; translate: -50% 0; color: var(--muted); font-size: 0.625rem; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-read-ruler small:nth-of-type(1) { left: 0; translate: none; }
.lp-read-ruler small:nth-of-type(3) { left: 70%; }
.lp-read-ruler small:nth-of-type(4) { left: auto; right: 0; translate: none; }
.lp-read-clue p { min-height: 3.2em; }
/* The trace: the characters a clue rests on are underlined in the brand line, in the clue and, while the
   hosting clue is open, in the address it was read from. */
.lp-read-clue code, .lp-calls-page u { color: var(--sumi); font: inherit; text-decoration: underline; text-decoration-color: var(--vermilion); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.lp-read:has(.lp-read-clue:first-of-type[open]) .lp-read-name u { text-decoration: underline; text-decoration-color: var(--vermilion); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.lp-read-name u { text-decoration: none; }

/* The transcript: a request, the calls it becomes and the page they act on. The open call presses its key on the wall. */
.lp-calls-said { justify-self: start; align-self: start; max-width: 100%; padding: 9px 13px; border-radius: 12px 12px 12px 4px; background: var(--card); box-shadow: 0 6px 18px -8px rgba(28, 26, 23, 0.35); font-weight: 600; }
.lp-calls-said + .lp-mini { align-self: end; }
.lp-calls-log details:first-child { border-top: 0; }
/* Arguments that do not fit beside the tool's key drop under it; the marker keeps its corner. */
.lp-calls-log summary { position: relative; flex-wrap: wrap; gap: 3px 8px; padding: 8px 24px 8px 0; }
.lp-calls-log summary::after { position: absolute; right: 0; top: 14px; }
.lp-calls-log summary code { flex: none; padding: 6px 9px; border-radius: 8px; background: var(--washi); box-shadow: inset 0 0 0 1px var(--lp-rule), 0 1px 0 rgba(28, 26, 23, 0.06); font: 500 0.75rem/1.2 var(--mono); }
.lp-calls-log summary span { min-width: 0; overflow: hidden; color: var(--muted); font: 400 0.6875rem/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.lp-calls-log b { color: var(--vermilion-ink); font-weight: 500; }
.lp-calls-log details[open] summary code,
.lp-col:has(#call-navigate[open]) .lp-wall [data-tool="navigate"],
.lp-col:has(#call-click[open]) .lp-wall [data-tool="click"],
.lp-col:has(#call-text[open]) .lp-wall [data-tool="text"],
.lp-col:has(#call-report[open]) .lp-wall [data-tool="report"] { background: var(--sumi); box-shadow: none; color: var(--card); }
/* With Stop pressed every call comes back with the browser's refusal instead of its result. */
.lp-calls-log .lp-calls-refused { display: none; color: var(--sumi); }
.lp-calls [data-when="on"] { display: inline-block; }
.lp-calls:has(#calls-stop:checked) :is(.lp-calls-log pre, [data-when="on"]) { display: none; }
.lp-calls:has(#calls-stop:checked) .lp-calls-refused { display: block; }
.lp-calls:has(#calls-stop:checked) [data-when="stopped"] { display: inline-block; }
.lp-calls:has(#calls-stop:checked) .lp-dot { background: var(--muted-dark); }
.lp-calls-page > div { display: grid; align-content: start; gap: 3px; min-width: 0; }
/* The rest of the page, as three lines of text that are not there to be read. */
.lp-calls-page > div::after { content: ""; width: 72%; height: 6px; margin: 10px 0 30px; border-radius: 3px; background: var(--frame); box-shadow: 0 12px 0 var(--frame), 0 24px 0 var(--frame); }
.lp-calls-page [data-page="guide"], .lp-calls-page .lp-key { display: none; }
.lp-calls-page small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 30px; margin-bottom: 6px; border-bottom: 1px solid var(--lp-rule); color: var(--muted); font: 0.6875rem/1.4 var(--mono); }
.lp-calls-page small .lp-key { font-family: var(--font); }
.lp-calls-page b { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.lp-calls-page div > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 24px; color: var(--muted); font-size: 0.75rem; }
.lp-calls-page i { padding: 2px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(28, 26, 23, 0.3); color: var(--sumi); font-style: normal; }
.lp-calls:is(:has(#call-click[open]), :has(#call-text[open]), :has(#call-report[open])) .lp-calls-page [data-page="home"] { display: none; }
.lp-calls:is(:has(#call-click[open]), :has(#call-text[open]), :has(#call-report[open])) .lp-calls-page [data-page="guide"] { display: grid; }
.lp-calls:has(#call-report[open]) .lp-calls-page .lp-key { display: inline-flex; }

/* The captions the three scenes used to carry, numbered like the panes they explain. */
.lp-rig-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; counter-reset: lp-note; }
.lp-rig-notes article { padding: 0 16px; }
.lp-rig-notes article::before { counter-increment: lp-note; content: counter(lp-note); display: block; margin-bottom: 4px; }
.lp-rig-notes .lp-text { margin: 0; padding: 0; }

/* The tour of an instrument: a line under it, never over it. landing.js turns the steps into a stepper with a ring on
   the pane each one is about; without the script they stay a numbered list. */
.lp-tour { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 12px; max-width: 880px; min-height: 44px; margin: 10px auto 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; text-align: center; text-wrap: pretty; }
.lp-tour.is-touring .lp-tour-note { order: 1; flex-basis: 100%; }
.lp-tour-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; margin: 0; padding: 0; list-style: none; counter-reset: lp-step; }
.lp-tour-steps li::before, .lp-tour-step b { color: var(--vermilion-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-tour-steps li::before { counter-increment: lp-step; content: counter(lp-step) ". "; }
.lp-tour-step { color: var(--sumi); }
.lp-tour-step b { margin-right: 8px; }
.lp-tour-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.lp-tour button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--sumi); font: 600 0.8125rem/1 var(--font); cursor: pointer; transition: transform 0.12s var(--ease); }
.lp-tour button:active { transform: scale(0.97); }
.lp-tour button:disabled { color: var(--muted); opacity: 0.55; cursor: default; }
.lp-tour .lp-tour-next { background: rgba(28, 26, 23, 0.06); }
/* The app's tour halo: a thin brand line with a soft wash around it, so it never reads as an error. */
.lp-rig-pane.is-toured::after { content: ""; position: absolute; inset: 7px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(210, 63, 26, 0.55), 0 0 0 5px rgba(210, 63, 26, 0.1); pointer-events: none; }
.lp-rig-pane.is-toured .lp-rig-label { color: var(--vermilion-ink); }
@media (hover: hover) and (pointer: fine) { .lp-tour button:not(:disabled):hover { color: var(--vermilion-ink); } }

/* Wide: a tool call and its arguments need more room than the panes beside them. */
@media (min-width: 1181px) {
  .lp-calls, .lp-calls ~ .lp-rig-notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
}
/* Tablet: two panes side by side and the third across the full width, its two parts side by side. Phone: one column. */
@media (min-width: 761px) and (max-width: 1180px) {
  .lp-rig { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .lp-calls { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .lp-rig-pane:nth-child(3) { grid-column: 1 / -1; }
  .lp-read .lp-rig-pane:nth-child(3) .lp-mini { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 16px; }
  .lp-read .lp-rig-pane:nth-child(3) .lp-rig-status { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .lp-calls .lp-rig-pane:nth-child(3) .lp-rig-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .lp-calls-page { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .lp-rig-notes { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 580px; margin-inline: auto; }
  .lp-rig-notes article { padding: 0 6px; }
}
@media (max-width: 760px) {
  .lp-rig { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Benchmark ---------- */
.lp-bench { max-width: 780px; margin-inline: auto; }
.lp-bench h2, .lp-split h2, .lp-faq h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.lp-bench > p { max-width: 600px; margin-top: 12px; color: var(--muted); text-wrap: pretty; }
.lp-bench > .lp-fine { margin-top: 24px; font-size: 0.8125rem; }
.lp-bench-panels { margin-top: clamp(28px, 4vw, 44px); }
.lp-bench-panel + .lp-bench-panel { margin-top: 40px; }
.lp-bench table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.lp-bench caption { padding-bottom: 8px; color: var(--muted); font-size: 0.8125rem; text-align: left; }
.lp-bench thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-bench th, .lp-bench td { padding: 9px 0; vertical-align: middle; }
.lp-bench th[scope="row"] { width: 9.5em; padding-right: 16px; font-weight: 400; text-align: left; white-space: nowrap; }
.lp-bench td:last-child { width: 9em; padding-left: 16px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lp-bench td small { display: block; color: var(--muted); font-size: 0.75rem; }
.lp-bar svg { display: block; width: 100%; height: 28px; border-radius: 3px; overflow: hidden; }
.lp-bar rect { fill: rgba(28, 26, 23, 0.14); transform-box: fill-box; transform-origin: 0 50%; }
.lp-bench tr.is-kitsuvo th { font-weight: 600; }
.lp-bench tr.is-kitsuvo rect { fill: var(--vermilion); }
/* Tail latency on the same scale: landing.js reads each row's own p95 and marks it past the median bar,
   so a long tail is as visible as a short median. Without the script the bars fill the track as before. */
.lp-bar-track { position: relative; display: block; }
.lp-p95, .lp-bench-key-tick { border-right: 2px solid rgba(28, 26, 23, 0.6); }
.lp-p95 { position: absolute; top: 50%; height: 14px; margin-top: -7px; pointer-events: none; }
.lp-p95::before, .lp-bench-key-tick::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(28, 26, 23, 0.3); }
.lp-bench > .lp-bench-key { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; font-size: 0.75rem; line-height: 1.5; }
.lp-bench-key span { display: inline-flex; align-items: center; gap: 8px; }
.lp-bench-key i { flex: none; width: 18px; height: 10px; }
.lp-bench-key-bar { border-radius: 2px; background: rgba(28, 26, 23, 0.14); }
.lp-bench-key-tick { position: relative; }
.lp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; width: fit-content; max-width: 100%; margin: 28px auto 0; padding: 4px; border-radius: 14px; background: rgba(28, 26, 23, 0.05); }
.lp-tabs button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 600 0.8125rem/1 var(--font); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.lp-tabs button[aria-selected="true"] { background: var(--card); color: var(--sumi); box-shadow: 0 1px 2px rgba(28, 26, 23, 0.1), 0 4px 12px rgba(28, 26, 23, 0.06); }
@media (hover: hover) and (pointer: fine) { .lp-tabs button:not([aria-selected="true"]):hover { color: var(--sumi); } }

/* ---------- A word that stays masked until the section is read ---------- */
.lp-mask { position: relative; display: inline-block; white-space: nowrap; }
.lp-mask.is-veiled { color: transparent; }
/* Generated content keeps the asterisks out of the page text; the empty alternative keeps them out of speech. */
.lp-mask.is-veiled::after { content: attr(data-veil); content: attr(data-veil) / ""; position: absolute; left: 0; top: 0; color: var(--vermilion-ink); }

/* ---------- Split blocks: copy on one side, a scene flush to the rule on the other ---------- */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.lp-split-flip .lp-split-copy { order: 2; }
.lp-split-copy { padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px); }
.lp-split h2 span { display: block; color: var(--muted); font-weight: 400; }
.lp-defs { display: grid; gap: 20px; margin-top: clamp(32px, 5vw, 56px); }
.lp-defs dd { margin-top: 4px; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.lp-scene { position: relative; min-height: 380px; display: grid; place-items: center; align-content: center; gap: 14px; padding: 32px; overflow: hidden; }
.lp-scene-night { background: var(--night); color: var(--ink-dark); }
.lp-scene-paper { background: var(--washi); }
/* Each scene is a still picture in the markup. landing.js swaps in the working control, so the
   scenes below are the feature in miniature: Stop refuses requests, the frame resizes a page. */

/* The Stop scene: two profiles and the agent's requests. Only the agent profile ever changes. */
.lp-scene-night :focus-visible { outline-color: var(--foxfire); }
.lp-profile { position: relative; width: min(368px, 100%); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 12px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-dark); font-size: 0.8125rem; line-height: 1.4; }
.lp-profile b { display: block; font-size: 0.9375rem; font-weight: 600; }
.lp-profile small { color: var(--muted-dark); font-size: 0.75rem; }
.lp-avatar { position: relative; width: 34px; height: 34px; border-radius: 10px; background: var(--night-3); }
.lp-profile-on { background: var(--night-3); }
.lp-profile-on .lp-avatar { background: var(--line-dark); }
/* The foxfire ring and tile are layers of their own, so stopping only has to fade them. */
.lp-profile-on::after, .lp-profile-on .lp-avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: opacity 0.3s var(--ease); }
.lp-profile-on::after { box-shadow: inset 0 0 0 1.5px var(--foxfire); }
.lp-profile-on .lp-avatar::after { background: var(--foxfire); }
.is-stopped .lp-profile-on::after, .is-stopped .lp-avatar::after { opacity: 0; }
.lp-requests { grid-column: 1 / -1; margin: 12px 0 -4px; padding: 6px 0 0; border-top: 1px solid var(--line-dark); list-style: none; }
.lp-requests li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.lp-requests span { overflow: hidden; font: 0.6875rem/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.lp-requests small { flex: none; color: var(--ink-dark); font-size: 0.6875rem; }
.lp-requests [data-lp-stop-next] small { color: var(--muted-dark); }
.lp-requests .is-refused span { color: var(--muted-dark); text-decoration: line-through; }
.lp-requests .is-refused small { color: var(--foxfire); font-weight: 600; }
.lp-stop-button { min-width: 84px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--vermilion); color: #fff; font: 600 0.8125rem/1 var(--font); cursor: pointer; transition: background-color 0.2s ease, transform 0.12s var(--ease); }
.lp-stop-button:active { transform: scale(0.97); }
.is-stopped .lp-stop-button { background: var(--line-dark); color: var(--ink-dark); }
/* Two lines are held for the note, so the scene keeps its height when the wording changes. */
.lp-scene-note { width: min(368px, 100%); min-height: 3em; padding-inline: 2px; color: var(--muted-dark); font-size: 0.75rem; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .lp-stop-button:hover { background: var(--vermilion-hover); }
  .is-stopped .lp-stop-button:hover { background: rgba(241, 236, 228, 0.16); }
}
/* On the narrowest phones the scenes give their side padding to the cards and the frame. */
@media (max-width: 420px) { .lp-scene { padding-inline: 20px; } }

/* The responsive scene. Without the script: three frames and their sizes. */
.lp-frames { display: flex; align-items: flex-end; justify-content: center; gap: 14px; width: 100%; }
.lp-frames i { position: relative; display: block; border: 1.8px solid var(--sumi); border-radius: 10px; background: var(--card); box-shadow: 0 16px 30px -18px rgba(28, 26, 23, 0.5); }
.lp-frames i::before { content: ""; position: absolute; left: 8px; top: 10px; width: 55%; height: 6px; border-radius: 3px; background: var(--frame); box-shadow: 0 12px 0 var(--frame); }
.lp-frames i::after { content: ""; position: absolute; inset: auto 8px 8px; height: 34%; border-radius: 5px; background: var(--lp-ember); }
.lp-frames i:nth-child(1) { width: 15%; aspect-ratio: 9 / 18; border-radius: 12px; }
.lp-frames i:nth-child(2) { width: 26%; aspect-ratio: 3 / 4; }
.lp-frames i:nth-child(3) { width: 46%; aspect-ratio: 16 / 10; }
.lp-scene figcaption, .lp-rm-read { color: var(--muted); font: 0.75rem/1.4 var(--mono); font-variant-numeric: tabular-nums; }
/* With the script: one frame. The stage is 1440 wide at its own scale; the page inside the frame is
   laid out at its real size and scaled down to fit, the way responsive mode fits a device to a window. */
.lp-rm { width: min(460px, 100%); display: grid; justify-items: center; }
/* The frame stands on the slider's line and carries its size above it. */
.lp-rm-stage { width: 100%; aspect-ratio: 1440 / 1180; display: grid; place-items: end center; margin-top: 28px; }
.lp-rm-frame { position: relative; width: 57%; height: 100%; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1.8px var(--sumi), 0 18px 32px -18px rgba(28, 26, 23, 0.5); }
.lp-rm-read { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; white-space: nowrap; }
.lp-rm-view { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.lp-rm-page { position: absolute; left: 0; top: 0; container-type: inline-size; transform-origin: 0 0; display: grid; align-content: start; gap: 44px; padding: 32px; }
.lp-rm-page i, .lp-rm-page b, .lp-rm-page u { display: block; }
.lp-rm-nav { display: flex; align-items: center; height: 48px; }
.lp-rm-nav > i { width: 132px; height: 30px; border-radius: 10px; background: var(--sumi); }
.lp-rm-nav > span { display: none; gap: 32px; margin-left: auto; }
.lp-rm-nav b { width: 88px; height: 14px; border-radius: 7px; background: var(--frame); }
/* Three bars for a menu on a phone; the same element is the navigation's button from tablet width up. */
.lp-rm-nav > u { width: 40px; height: 6px; margin: 0 0 24px auto; border-radius: 3px; background: var(--sumi); box-shadow: 0 12px 0 var(--sumi), 0 24px 0 var(--sumi); }
.lp-rm-lead { display: grid; gap: 36px; }
.lp-rm-lead > div { display: grid; justify-items: start; gap: 16px; }
.lp-rm-lead i { width: 92%; height: 40px; border-radius: 10px; background: var(--sumi); }
.lp-rm-lead i + i { width: 58%; margin-bottom: 8px; }
.lp-rm-lead b { width: 100%; height: 14px; border-radius: 7px; background: var(--frame); }
.lp-rm-lead b:last-of-type { width: 66%; }
.lp-rm-lead u { width: 168px; height: 56px; margin-top: 12px; border-radius: 28px; background: var(--sumi); }
.lp-rm-lead > span { height: 250px; border-radius: 20px; background: var(--lp-ember); }
.lp-rm-cards { display: grid; gap: 24px; }
.lp-rm-cards i { height: 210px; border-radius: 20px; background: var(--frame); }
/* Breakpoints at 600 and 1000 wide. A container query measures inside the page's 32px padding, hence 536 and 936. */
@container (min-width: 536px) {
  .lp-rm-nav > span { display: flex; }
  .lp-rm-nav > u { width: 132px; height: 48px; margin: 0 0 0 40px; border-radius: 24px; box-shadow: none; }
  .lp-rm-lead > span { height: 340px; }
  .lp-rm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 936px) {
  .lp-rm-nav, .lp-rm-lead, .lp-rm-cards { margin-inline: 40px; }
  .lp-rm-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 72px; }
  .lp-rm-lead > span { height: 400px; }
  .lp-rm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The handle on the frame's edge is for a pointer; the slider under it does the same job from the keyboard.
   Both leave vertical swipes to the page. */
.lp-rm-grip { position: absolute; top: 50%; right: -22px; width: 44px; height: 72px; margin-top: -36px; cursor: ew-resize; touch-action: pan-y; }
.lp-rm-grip::after { content: ""; position: absolute; left: 18px; top: 16px; width: 8px; height: 40px; border-radius: 4px; background: var(--card); box-shadow: 0 0 0 1.8px var(--sumi); }
.lp-rm.is-dragging { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.lp-rm.is-dragging .lp-rm-grip::after { background: var(--sumi); }
.lp-rm-width { position: relative; width: 100%; margin-top: 6px; }
.lp-rm-width input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: none; cursor: ew-resize; touch-action: pan-y; }
.lp-rm-width input:focus-visible { outline: none; }
.lp-rm-width input::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: rgba(28, 26, 23, 0.5); }
.lp-rm-width input::-moz-range-track { height: 2px; border-radius: 1px; background: rgba(28, 26, 23, 0.5); }
.lp-rm-width input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -9px; border: 1.8px solid var(--sumi); border-radius: 50%; background: var(--card); }
.lp-rm-width input::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border: 1.8px solid var(--sumi); border-radius: 50%; background: var(--card); }
.lp-rm-width input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--vermilion); outline-offset: 3px; }
.lp-rm-width input:focus-visible::-moz-range-thumb { outline: 2px solid var(--vermilion); outline-offset: 3px; }
/* Ticks at the three preset widths, placed along the thumb's travel. */
.lp-rm-width i { position: absolute; top: 28px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: rgba(28, 26, 23, 0.5); pointer-events: none; }
.lp-rm-width i:nth-of-type(1) { left: calc(10px + (100% - 20px) * 0.0625); }
.lp-rm-width i:nth-of-type(2) { left: calc(10px + (100% - 20px) * 0.4464); }
.lp-rm-width i:nth-of-type(3) { left: calc(100% - 10px); }
.lp-rm-sizes { display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: rgba(28, 26, 23, 0.05); }
.lp-rm-sizes button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 600 0.8125rem/1 var(--font); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.lp-rm-sizes button[aria-pressed="true"] { background: var(--card); color: var(--sumi); box-shadow: 0 1px 2px rgba(28, 26, 23, 0.1), 0 4px 12px rgba(28, 26, 23, 0.06); }
@media (hover: hover) and (pointer: fine) {
  .lp-rm-grip:hover::after { background: var(--sumi); }
  .lp-rm-sizes button:not([aria-pressed="true"]):hover { color: var(--sumi); }
}

/* ---------- Privacy cards and the everyday list ---------- */
/* Local first, drawn as a ledger. The card is the computer and its lower edge is the line data has to
   cross: what is listed inside stays, and the two lines that leave end at whoever receives them.
   landing.js adds the one choice that changes the picture, connecting an AI client. */
.lp-edge, .lp-list-local { --lp-edge-pad: clamp(20px, 3.4vw, 40px); }
.lp-edge { margin-top: clamp(40px, 6vw, 72px); }
.lp-edge-inside { padding: clamp(20px, 3vw, 30px) var(--lp-edge-pad) 0; border: 1px solid var(--lp-rule); border-bottom: 1.8px solid var(--sumi); border-radius: 16px 16px 0 0; background: var(--card); }
.lp-edge-zone { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; }
.lp-edge-zone svg, .lp-list svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-edge-kept, .lp-edge-sent, .lp-edge-outside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.lp-edge-kept { margin-top: clamp(18px, 2.6vw, 26px); }
.lp-edge-kept p { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.lp-edge-kept ul { margin: 6px 0 8px; padding: 0; list-style: none; font: 600 clamp(1.1875rem, 2.3vw, 1.625rem)/1.3 var(--font-display); letter-spacing: -0.02em; }
.lp-edge-sent { margin-top: clamp(22px, 3.2vw, 34px); padding-top: 16px; border-top: 1px solid var(--lp-rule); }
.lp-edge-sent p { position: relative; padding-bottom: 46px; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
/* Each line starts under its label, crosses the card's edge at its midpoint and ends in an arrowhead outside. */
.lp-edge-sent svg { position: absolute; left: -8px; bottom: -37.8px; width: 16px; height: 72px; overflow: visible; fill: none; stroke: var(--sumi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-edge-idle { stroke: var(--muted); transition: opacity 0.15s ease; }
.lp-edge-idle path:first-child { stroke-dasharray: 2 5; }
/* The traced line is a layer over the dashed one: it fades in while it runs out from the label. */
.lp-edge-live { stroke: var(--vermilion); }
.lp-edge-live path { opacity: 0; transition: opacity 0.15s ease, transform 0.5s var(--ease); }
.lp-edge-live path:first-child { transform: scaleY(0.2); transform-origin: 8px 1px; }
.is-connected .lp-edge-idle { opacity: 0; }
.is-connected .lp-edge-live path { opacity: 1; transform: none; }
.is-connected .lp-edge-live path:last-child { transition-delay: 0.2s; }
/* Room for the switch and its two-line note is held from the start, so adding them moves nothing. */
.lp-edge-outside { min-height: 118px; padding: 46px calc(var(--lp-edge-pad) + 1px) 0; }
.lp-edge-outside p { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }
.lp-edge-outside b { display: block; color: var(--sumi); font-weight: 600; }
.lp-edge-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--sumi); font: 600 0.9375rem/1.3 var(--font); text-align: left; cursor: pointer; }
.lp-edge-switch i { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: rgba(28, 26, 23, 0.5); transition: background-color 0.15s ease; }
.lp-edge-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s var(--ease); }
.lp-edge-switch[aria-checked="true"] i { background: var(--vermilion); }
.lp-edge-switch[aria-checked="true"] i::after { transform: translateX(16px); }
/* The switch is 44px tall; pulled up so its label shares a line with the two names beside it. */
.lp-edge-choice { margin-top: -11px; }
.lp-edge-choice p { min-height: 3em; font-size: 0.8125rem; }
@media (max-width: 760px) {
  .lp-edge-kept { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-edge-sent, .lp-edge-outside { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .lp-edge-outside { min-height: 0; }
  .lp-edge-choice { grid-column: 1 / -1; margin-top: 0; padding-top: 12px; border-top: 1px solid var(--lp-rule); }
  .lp-edge-choice p { min-height: 0; }
}

/* Three notes in ruled columns, each under a small line icon. */
.lp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--lp-rule); }
.lp-list article { padding: 28px clamp(16px, 2.5vw, 28px) 0; }
.lp-list article + article { border-left: 1px solid var(--lp-rule); }
.lp-list svg { margin-bottom: 14px; }
.lp-list .lp-text { margin: 0; padding: 0; }
/* Under the ledger, the outer notes line up with what is written inside the card. */
@media (min-width: 901px) {
  .lp-list-local article:first-child { padding-left: calc(var(--lp-edge-pad) + 1px); }
  .lp-list-local article:last-child { padding-right: calc(var(--lp-edge-pad) + 1px); }
}

/* Guide cards are generated by scripts/build_blog.mjs and styled in styles.css. */
.landing .guides-grid { max-width: none; margin-top: clamp(40px, 6vw, 64px); }

/* ---------- FAQ ---------- */
.lp-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 24px 48px; }
/* Ten numbered rows. The numbers are generated, so the questions stay exactly as the structured data has them. */
.lp-faq .home-seo-faq { --lp-faq-num: 2.5rem; counter-reset: lp-faq; }
.lp-faq details { counter-increment: lp-faq; border-top: 1px solid var(--lp-rule); }
.lp-faq details:last-child { border-bottom: 1px solid var(--lp-rule); }
.lp-faq summary { display: flex; align-items: center; min-height: 60px; padding: 14px 0; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; transition: color 0.2s ease; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::before { content: counter(lp-faq, decimal-leading-zero); content: counter(lp-faq, decimal-leading-zero) / ""; flex: none; width: var(--lp-faq-num); color: var(--muted); font: 400 0.75rem/1 var(--mono); font-variant-numeric: tabular-nums; }
/* A drawn plus that turns into a cross while the answer opens. */
.lp-faq summary::after { content: ""; flex: none; width: 12px; height: 12px; margin: 0 6px 0 auto; background: var(--muted); clip-path: polygon(5.1px 0, 6.9px 0, 6.9px 5.1px, 12px 5.1px, 12px 6.9px, 6.9px 6.9px, 6.9px 12px, 5.1px 12px, 5.1px 6.9px, 0 6.9px, 0 5.1px, 5.1px 5.1px); transition: transform 0.3s var(--ease); }
.lp-faq details[open] summary::after { background: var(--sumi); transform: rotate(45deg); }
.lp-faq details > p { max-width: calc(62ch + var(--lp-faq-num)); padding: 0 40px 22px var(--lp-faq-num); color: var(--muted); font-size: 0.9375rem; line-height: 1.65; text-wrap: pretty; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
/* Answers open at their own height where ::details-content exists; elsewhere they open at once.
   The text settles into place as the row opens. */
.lp-faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.3s var(--ease), content-visibility 0.3s allow-discrete; }
.lp-faq details[open]::details-content { block-size: auto; }
.lp-faq details:not([open]) > p { opacity: 0; transform: translateY(-6px); }
@starting-style { .lp-faq details[open] > p { opacity: 0; transform: translateY(-6px); } }
@media (hover: hover) and (pointer: fine) {
  .lp-faq summary:hover { color: var(--vermilion-ink); }
  .lp-faq summary:hover::after { background: currentColor; }
}
@media (max-width: 760px) { .lp-faq .home-seo-faq { --lp-faq-num: 2rem; } }

/* ---------- Closing panel ---------- */
.lp-cta { padding: clamp(32px, 5vw, 64px) clamp(8px, 1vw, 12px) 0; border-top: 1px solid var(--lp-rule); }
.lp-cta-panel { padding: clamp(72px, 11vw, 140px) var(--lp-gutter) clamp(56px, 8vw, 96px); border-radius: 24px; background: var(--washi); box-shadow: inset 0 0 0 1px var(--lp-rule); text-align: center; }
/* The full mark, at the size BRAND.md allows the brow flame. Flat: no glow on paper. When the panel is
   reached, landing.js lets the flame kindle from an ember and then light the eye, once. The ember layer
   is only shown for that moment; at rest the mark is the one in assets/kitsuvo-mark.svg. */
.lp-cta-mark { display: block; width: 88px; height: 88px; margin: 0 auto 28px; overflow: visible; }
.lp-cta-fox { fill: var(--sumi); stroke: var(--sumi); stroke-width: 3; stroke-linejoin: round; }
.lp-cta-lit { fill: var(--vermilion); }
.lp-cta-ember { fill: var(--muted); opacity: 0; }
.lp-cta-flame { transform-origin: 50px 47.5px; }
@media print { .lp-cta-lit { opacity: 1 !important; } .lp-cta-ember { opacity: 0 !important; } .lp-cta-flame { transform: none !important; } }
.lp-cta .hero-downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.lp-cta .btn { min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 0.9375rem/1 var(--font); gap: 10px; }
.lp-cta .btn-primary { background: var(--sumi); color: var(--card); }
.lp-cta .btn-quiet-dark { background: var(--card); box-shadow: inset 0 0 0 1px var(--lp-rule); }
.lp-cta .hero-meta, .lp-cta .hero-build { margin-top: 16px; color: var(--muted); font-size: 0.8125rem; line-height: 1.7; }
.lp-cta .hero-meta span { margin: 0 4px; }
.lp-cta .hero-build { margin-top: 4px; }
.lp-cta .hero-build p { display: inline; }
@media (hover: hover) and (pointer: fine) {
  .lp-cta .btn-primary:hover { background: var(--vermilion); }
  .lp-cta .btn-quiet-dark:hover { background: var(--frame); }
}

/* ---------- Footer ---------- */
/* The page's ruled column runs on through the footer, and the last row is ruled from edge to edge. */
.lp-footer { --lp-foot-pad: clamp(20px, 5vw, 72px); margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--lp-rule); color: var(--muted); font-size: 0.875rem; }
.lp-footer-col { width: min(var(--lp-col), calc(100% - 2 * var(--lp-gutter))); margin-inline: auto; padding: 56px var(--lp-foot-pad) 20px; border-inline: 1px solid var(--lp-rule); display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.lp-footer-col > div > a { display: inline-flex; align-items: center; min-height: 44px; }
.lp-footer-col > div > p { margin: 4px 0 0; }
.lp-footer-label { margin: 0; padding-top: 12px; font-size: 0.8125rem; font-weight: 600; }
.lp-footer ul { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.lp-footer li a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: var(--sumi); text-decoration: none; }
.lp-footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: 24px calc(-1 * var(--lp-foot-pad)) 0; padding: 12px var(--lp-foot-pad) 0; border-top: 1px solid var(--lp-rule); font-size: 0.8125rem; }
.lp-footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.lp-footer-legal > :last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .lp-footer { --lp-foot-pad: 20px; }
  .lp-footer .lp-footer-col { width: 100%; border-inline: 0; }
}
/* The analytics settings control is fixed to the bottom-right corner; the last row ends above it. */
.landing:has(.analytics-settings) .lp-footer-col { padding-bottom: 56px; }
@media (hover: hover) and (pointer: fine) { .lp-footer a:hover { color: var(--vermilion-ink); text-decoration: underline; text-underline-offset: 4px; } }
@media (pointer: coarse) { .lp-footer li a { min-height: 44px; } }

/* ---------- Narrower screens ---------- */
@media (max-width: 1000px) {
  /* Tablet: the logo and download button take only the room they need; GitHub and Guides stay in the footer. */
  .lp-nav { grid-template-columns: auto 1fr auto; gap: 16px; }
  .lp-nav nav { justify-self: center; gap: 18px; }
  .lp-nav nav a[href^="https://"] { display: none; }
  .lp-tabs button { padding: 0 10px; }
  .lp-footer-col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-footer-col > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .lp-nav nav a[href="/blog"] { display: none; }
  .lp-split, .lp-faq, .lp-list { grid-template-columns: minmax(0, 1fr); }
  .lp-split-flip .lp-split-copy { order: 0; }
  .lp-scene { min-height: 320px; }
  .lp-list article { padding: 24px 0 0; }
  .lp-list article + article { margin-top: 24px; border-left: 0; border-top: 1px solid var(--lp-rule); }
  .lp-faq details > p { padding-right: 0; }
}
@media (max-width: 760px) {
  .landing { --lp-nav: 60px; }
  .lp-nav { grid-template-columns: 1fr auto auto; gap: 12px; padding: 0 16px; }
  .lp-nav nav > a { display: none; }
  .lp-nav > a:first-child img { width: 112px; height: auto; }
  .lp-nav .lp-btn { padding: 0 14px; }
  .lp-hero-panel { --lp-pad: 14px; border-radius: 18px 18px 0 0; }
  .lp-browser-wrap::before { border-radius: 0 0 18px 18px; }
  .lp-cta-panel { border-radius: 18px; }
  .lp-stage .demo-llm-task { grid-template-columns: minmax(0, 1fr); }
  .lp-stage .demo-llm-task div, .lp-stage .demo-llm-task a { grid-column: 1; grid-row: auto; justify-self: start; }
  .lp-stage .demo-llm-task div { flex-wrap: wrap; margin: 6px 0; }
  .lp-col { width: 100%; padding: 56px 20px; border-inline: 0; }
  .lp-col-flush { padding: 0; }
  .lp-manifesto { grid-template-columns: minmax(0, 1fr); }
  .lp-split-copy { padding: 56px 20px 40px; }
  .lp-scene { min-height: 300px; }
  .lp-bench th[scope="row"] { width: auto; padding-right: 10px; font-size: 0.8125rem; white-space: normal; }
  .lp-bench td:last-child { width: auto; padding-left: 10px; font-size: 0.8125rem; }
  /* Five workflows as a two-column pad; the last one spans the row instead of sitting alone. */
  .lp-tabs { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
  .lp-tabs button:last-child { grid-column: 1 / -1; }
  .lp-footer-col { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 40px; }
  .lp-footer-legal > :last-child { margin-left: 0; width: 100%; }
}
@media (max-width: 380px) {
  .lp-nav { grid-template-columns: 1fr auto; padding: 0 12px; }
  .lp-nav nav { display: none; }
  .lp-nav > a:first-child img { width: 100px; }
  .lp-nav .lp-btn { padding: 0 12px; font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* landing.js hides entrances inline until they are scrolled to; paper has no scroll. */
@media print { [data-lp-in], [data-lp-in] > *, .lp-bar rect { opacity: 1 !important; transform: none !important; } }