/* =====================================================================
   Packlabs landing page (logged-out one-pager).

   This sheet is a LAYER ON TOP of css/styles.css, never a replacement.
   Cards, zones, the felt and the plan cards are painted by the app's own
   rules (.tcard, .tpiece-card, .tzone, .felt, .plan-*), so what a visitor
   sees here is literally what the editor draws. Everything below is page
   furniture: the bar, the hero, the section rhythm, the demo rails.
   ===================================================================== */

/* The HTML element wears the felt too. styles.css paints html AND body with
   the app's dark page gradient at height:100%, and the browser draws the
   html background on the whole canvas - so wherever the body stops (the
   last strip under the footer, and Safari's rubber-band past either end)
   the dark app gradient showed through, tiled once per screen height. With
   the same felt here and no fixed height, the page is felt all the way down. */
html.lp-root {
  height: auto; min-height: 100%;
  background:
    var(--felt-noise),
    var(--felt-fibre),
    var(--felt-image);
  background-color: #123a2e;
  background-size: auto, var(--felt-fibre-size), cover;
  background-position: center;
  background-repeat: repeat, repeat, no-repeat;
  background-blend-mode: normal, overlay, normal;
  background-attachment: scroll, scroll, fixed;
}
body.lp {
  margin: 0; padding: 0;
  /* the app pins html/body to height:100% for its full-screen views; a page
     that scrolls needs to grow past the viewport instead */
  height: auto; min-height: 100%;
  /* One continuous felt behind the whole page, the same texture stack the
     home menu uses (.view.home-view). Overrides the app's dark page
     gradient, which only applies to the tool's own screens. */
  background:
    var(--felt-noise),
    var(--felt-fibre),
    var(--felt-image);
  background-color: #123a2e;
  background-size: auto, var(--felt-fibre-size), cover;
  background-position: center;
  background-repeat: repeat, repeat, no-repeat;
  background-blend-mode: normal, overlay, normal;
  background-attachment: scroll, scroll, fixed;
  overflow-x: hidden;
}
/* the fine dotted grain the home felt carries */
body.lp::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
body.lp > * { position: relative; z-index: 1; }

html { scroll-behavior: smooth; }

/* ============================ shared bits ============================ */
/* The one glass recipe, matched to .table-tools.floating in the app. */
.lp .glass {
  background: rgba(15, 20, 28, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.lp-center { text-align: center; }

/* The brand display face, exactly the treatment .lib-title uses for
   "My games" and "Settings": GoldWhisper, gold gradient, no shadow. */
.lp-goldtype {
  font-family: "GoldWhisper", "Bauvex", Georgia, serif;
  font-weight: 400; letter-spacing: 0.5px;
  background: linear-gradient(135deg, #ffbf66 0%, #ffd580 50%, #ffbf66 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp-btn {
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
  padding: 9px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06); color: var(--text);
  transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), background 0.15s, border-color 0.15s, filter 0.15s;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.lp-btn:hover { border-color: rgba(230,183,101,0.55); background: rgba(255,255,255,0.10); }
.lp-btn:active { transform: scale(0.96); }
.lp-btn-ghost { background: transparent; }
.lp-btn-glass { background: rgba(15,20,28,0.5); backdrop-filter: blur(8px); }
.lp-btn-gold {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: var(--accent); color: var(--accent-ink);
}
.lp-btn-gold:hover { filter: brightness(1.07); background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.lp-btn-lg { font-size: 15px; padding: 13px 24px; border-radius: 12px; }

/* ============================== header ===============================
   In the flow, not fixed and not sticky, so it scrolls away with the page
   and sits flush against the very top with nothing above it. */
.lp-bar {
  position: relative; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 12px 22px; margin: 0;
  background: rgba(15,20,28,0.30);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.lp-bar-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.lp-bar-emblem { height: 28px; width: auto; display: block; }
/* The wordmark, set in the brand face rather than pulled from a lockup
   file, so it always reads Packlabs. */
.lp-bar-word {
  font-family: "GoldWhisper", "Bauvex", Georgia, serif;
  font-size: 26px; line-height: 1; letter-spacing: 0.5px; padding-top: 2px;
  background: linear-gradient(135deg, #ffbf66 0%, #ffd580 50%, #ffbf66 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lp-bar-nav { display: flex; align-items: center; gap: 6px; }
.lp-bar-link {
  color: var(--text-dim); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 9px; transition: color 0.15s, background 0.15s;
}
.lp-bar-link:hover { color: var(--accent-2); background: rgba(255,255,255,0.06); }

/* =============================== hero ================================ */
.lp-hero { display: flex; align-items: center; padding: 54px 24px 70px; }
.lp-hero-inner {
  width: 100%; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}
.lp-title {
  font-family: "GoldWhisper", "Bauvex", Georgia, serif;
  font-weight: 400; letter-spacing: 0.5px;
  font-size: clamp(46px, 6.6vw, 86px); line-height: 1.02; margin: 0 0 20px;
  background: linear-gradient(135deg, #ffbf66 0%, #ffd580 50%, #ffbf66 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lp-lede { font-size: 17px; line-height: 1.6; color: var(--text-dim); margin: 0 0 26px; max-width: 46ch; }
.lp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-fineprint { margin: 14px 0 0; font-size: 12px; color: var(--text-faint); }

.lp-hero-hand { position: relative; height: 400px; }
.lp-hero-slot {
  position: absolute; top: 50%;
  transform-origin: 50% 150%;
  transform: translateY(-50%) rotate(var(--rot)) translateY(var(--lift, 0));
  transition: transform 0.22s cubic-bezier(0.34,1.4,0.64,1);
  cursor: pointer;
}
.lp-hero-slot:hover { --lift: -24px; z-index: 30 !important; }
/* the engine's own piece-card wrapper carries the drop shadow a table card
   has; give the hero copies the raised one so they read as held cards */
.lp-hero-slot .tpiece-card .tcard,
.lp-hero-slot .tpiece-card .card-back { box-shadow: 0 18px 34px rgba(0,0,0,0.55); }

/* ============================== strip ================================ */
.lp-strip { padding: 6px 24px 26px; }
.lp-strip-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
/* Five across needs the full width. Below it the row breaks to three, which
   leaves a tidy 3 + 2 rather than the orphan a four-column break would. */
@media (max-width: 1180px) {
  .lp-strip-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lp-usp {
  background: rgba(15,20,28,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 18px 16px;
  box-shadow: var(--shadow);
  transition: transform 0.2s, border-color 0.2s;
}
.lp-usp:hover { transform: translateY(-4px); border-color: rgba(230,183,101,0.4); }
.lp-usp-ic { display: inline-flex; color: var(--accent-2); margin-bottom: 10px; }
.lp-usp-ic svg { width: 26px; height: 26px; }
.lp-usp h3 { margin: 0 0 6px; font-size: 15px; font-weight: 750; letter-spacing: 0.1px; }
.lp-usp p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }

/* ============================= sections ============================== */
.lp-sec { padding: 74px 24px; max-width: 1180px; margin: 0 auto; }
.lp-sec-tight { padding-top: 20px; }
.lp-sec-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.lp-eyebrow {
  display: inline-block; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent-2); background: rgba(216,162,74,0.14);
  border: 1px solid rgba(216,162,74,0.32); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.lp-h2 {
  font-family: "GoldWhisper", "Bauvex", Georgia, serif;
  font-weight: 400; letter-spacing: 0.5px;
  font-size: clamp(30px, 4vw, 50px); margin: 0 0 12px; line-height: 1.06;
  background: linear-gradient(135deg, #ffbf66 0%, #ffd580 50%, #ffbf66 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lp-sub { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.55; }

/* ---------------------------- build demo ---------------------------- */
/* The rail is measured against dev/menu-design.html's scale table, which is
   also the scale .ce-panel already runs at: 240 wide, 10px body padding,
   6px row gap, 13px panel radius, an 11px uppercase 0.7px-tracked head over
   each row, 11px control text, 7px field radius, 22px steppers. There is no
   reason for two glass surfaces in one tool to be measured differently.

   Two things the document asks for that this surface does not have, both on
   purpose: no title bar (the section's own h2 titles it, and a second title
   under it is noise) and no tail (a tail points at the pill a menu opened
   from, and nothing opened this - it is a panel standing beside a card). */
.lp-demo {
  display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px;
  align-items: center;
}
.lp-demo-stage { display: flex; align-items: center; justify-content: center; padding: 16px 0; }
/* `.lp .lp-demo-rail`, not `.lp-demo-rail`: `.lp .glass` on the same element is
   0-2-0 and would keep its own 14px radius. The panel radius is 13px. */
.lp .lp-demo-rail {
  padding: 10px; display: flex; flex-direction: column; gap: 6px;
  align-content: start; border-radius: 13px;
}
.lp-demo-rail > .lp-rail-row { min-width: 0; }
.lp-rail-row { display: flex; flex-direction: column; gap: 5px; }
/* A ROW label, at `.ce-panel .ce-label`'s scale: 11.5px, sentence case. Not the
   uppercase micro-caps this used to be - that is a SECTION head's dress, and a
   panel where every row wears it has two things that look like headings and
   nothing that looks like a row. */
.lp-rail-label {
  font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--text-dim);
  font-weight: 600; margin: 0;
}
/* A typed field. `input.lp-field` and not `.lp-field`, because css/styles.css
   styles every input[type="text"] at 0-1-1 and a bare class loses to it -
   the same cascade trap TCG.searchField exists to close for search boxes. */
/* `font-family: inherit` and never the `font` shorthand. A shorthand resets
   every font property it doesn't name, so a `font-size` written after it is at
   the mercy of declaration order, and one written INSIDE it (the invalid
   `font: 600 11px/1 inherit` that left seven sequencer controls at the browser
   default) is dropped whole with no error. */
input.lp-field {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 11px;
  height: 26px; padding: 0 8px; border-radius: 7px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
}
input.lp-field:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.09); }
input.lp-field::placeholder { color: var(--text-faint); opacity: 0.7; }
/* Two even columns rather than a wrapping row. Four chips at this width wrap
   three-and-one, which reads as a row that ran out of room; a 2x2 reads as a
   set of four. Each chip fills its cell, so the swatch column lines up. */
.lp-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.lp-chips > .lp-chip { justify-content: flex-start; }
.lp-chip {
  font-family: inherit; font-size: 11px; padding: 4px 9px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.1s;
}
.lp-chip:hover { background: rgba(255,255,255,0.11); border-color: rgba(230,183,101,0.5); }
.lp-chip:active { transform: scale(0.94); }
.lp-chip.on { background: rgba(216,162,74,0.2); border-color: var(--accent); color: var(--accent-2); }
/* Idle: the control stays on the rail, dashed and unclickable, and its
   tooltip says what to change to wake it. Same shape as the app's own
   .fx-pill-off - a control never leaves the surface it lives on. */
.lp-chip.off,
.lp-chip.off:hover {
  background: transparent; border-style: dashed; border-color: rgba(255,255,255,0.14);
  color: var(--text-faint); cursor: default;
}
.lp-chip.off:active { transform: none; }
.lp-chip .sw { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4); }
/* Three steppers across a 240 panel: 22px buttons and a 24px readout, which
   is `.ce-panel .ce-step-btn` exactly. */
.lp-stats { display: flex; gap: 6px; }
.lp-stat { display: flex; flex-direction: column; gap: 5px; flex: 1 1 0; min-width: 0; }
.lp-step { display: flex; align-items: center; gap: 3px; }
.lp-step-btn {
  width: 22px; height: 22px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: 0 0 auto;
}
.lp-step-btn:hover { background: rgba(255,255,255,0.12); }
.lp-step-n { flex: 1 1 auto; min-width: 20px; text-align: center; font-weight: 800; font-size: 13px; }

/* ----------------------------- piece builder -----------------------
   Step two is the app's own piece builder (.pb-panel.pb-embed), mounted
   here. Only the surround is ours: the width, the palette sitting BESIDE
   the row on a wide screen the way the app's big builder lays it out, and
   the search box left out because a palette of twenty pieces is already
   the whole list. Every piece, shape, chip and menu is styles.css. */
.lp-fxdemo { max-width: 860px; margin: 0 auto; }
.lp-fxdemo > .pb-panel.pb-embed { background: rgba(15,20,28,0.62); box-shadow: var(--shadow); border-color: rgba(255,255,255,0.12); }
.lp-fxdemo .pb-search, .lp-fxdemo .pb-newrow { display: none; }
/* The row on top, the palette under it as columns of sections - twenty
   pieces fit in two short bands that way, where one tall column beside the
   row left most of the panel empty. */
.lp-fxdemo .pb-palette {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 18px; align-items: start;
}
.lp-fxnote { text-align: center; color: var(--text-faint); font-size: 13px; margin: 12px auto 0; max-width: 640px; min-height: 1.4em; }
.lp-fxnote-ok { color: var(--text-dim); }
.lp-fxnote-warn { color: var(--accent-2); }
.lp-fxprint { text-align: center; color: var(--text-faint); font-size: 13px; margin: 6px 0 0; }
.lp-fxprint em { color: var(--text); font-style: normal; font-weight: 650; }

/* ----------------------------- play table ---------------------------
   The felt itself is the app's .felt. Only the surround is ours. */
.lp-table-wrap { position: relative; }
/* The zone fractions are a real saved layout, tuned against the app's own
   felt (min-height 600px). Anything shorter squeezes the top and bottom
   bands together: the hand's cards hang off the bottom edge and the enemy
   row's label collides with the board's. So this felt is at least as tall
   as the tool's, never a cropped version of it. */
.lp-felt { height: min(84vh, 780px); min-height: 660px; }
/* The turn steps sit ABOVE the felt, not floating over it - the top band of
   this layout is the enemy's hand, and a bar parked on it covers their cards. */
.lp-phases {
  display: flex; justify-content: center; gap: 5px; align-items: center;
  margin: 0 0 14px; flex-wrap: wrap;
}
.lp-hint {
  position: absolute; right: 16px; bottom: 16px; z-index: 6;
  font-size: 12px; padding: 7px 12px; border-radius: 10px; color: var(--text-dim);
  background: rgba(15,20,28,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
}
/* A card being dragged rides above everything. Note there is deliberately
   no left/top transition on a .piece: the engine moves a piece by setting
   its final spot and then flying it in from the old one (.dealing /
   .playing / .sliding), so a transition here would double-animate. */
.lp-felt .piece.lp-dragging { z-index: 60; }
.lp-felt .piece .tpiece-card { cursor: grab; }
.lp-felt .piece.lp-dragging .tpiece-card { cursor: grabbing; }
/* The deck when the walkthrough is on its Draw step. Same gold "this one
   is live" language the combat affordances use on a card. */
.lp-felt .piece.lp-live .deck-top {
  box-shadow:
    1.7cqw 2.6cqw 0 var(--deck-edge), 3.4cqw 5.2cqw 0 var(--deck-edge),
    5.2cqw 7.8cqw 0 var(--deck-edge), 6.9cqw 9.5cqw 0 var(--deck-edge),
    8.6cqw 12cqw 0 var(--deck-edge), 0 20.7cqw 29cqw rgba(0,0,0,0.55),
    0 0 0 2px var(--accent), 0 0 20px 2px rgba(216,162,74,0.75);
}
.lp-felt .piece.lp-live { cursor: pointer; animation: lpDeckBreathe 2.2s ease-in-out infinite; }
@keyframes lpDeckBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.035); } }
/* the hint carries a full sentence now, so give it room without letting it
   run across the felt */
.lp-hint { max-width: 42ch; line-height: 1.45; }

/* The walkthrough tracker: the app's lane hand of step cards plus its End
   turn button. A step already done reads as done, a step still to come as
   waiting; neither ever disappears, and both answer a click with the reason
   (see the pill handler in landing.js). The bar is taller than the old row
   of pills because the hand sits on an arc, so it keeps its own height. */
.lp-phases { align-items: flex-end; min-height: 86px; gap: 14px; }
.lp-phases .tphase.stepcard:not(.cur):not(.lp-done) .tphase-stepcardface { opacity: 0.55; }
.lp-phases .tphase.stepcard.lp-done .tphase-ic { color: var(--accent-2); }
.lp-phases .tphase.stepcard:not(.cur) { cursor: default; }
.lp-phases .tphase.end-turn { align-self: center; margin-bottom: 10px; }
.lp-phases .tphase.end-turn:not(.ready) { opacity: 0.55; cursor: default; }

/* ------------------------------ opponent ----------------------------
   The bar inside is the app's own .tphase-bar with the app's own pills, so
   almost nothing is added here. .tphase-bar carries a top margin for the
   sequencer it usually sits under; on a centred panel it has to go, and the
   row centres instead of hugging the left edge. */
.lp-ai { max-width: 780px; margin: 0 auto; padding: 16px 20px 18px; }
.lp-ai .tphase-bar { margin: 0; justify-content: center; align-items: flex-end; gap: 12px; min-height: 84px; }
.lp-ai .tphase-bar > .lbl, .lp-ai .tphase-bar > .ai-knob, .lp-ai .tphase-bar > .tphase-sep { align-self: center; margin-bottom: 10px; }
/* The app's AI-lane card faces, restated for this bar because the app scopes
   them to .ai-lane (a full-width frame across the top of the felt that this
   page does not have). Same numbers as styles.css. */
.lp-ai .tphase.stepcard.ai-auto { cursor: default; }
.lp-ai .tphase.stepcard.ai-auto .tphase-stepcardface { opacity: 0.55; background: linear-gradient(180deg, rgba(26,32,40,0.9), rgba(18,23,29,0.9)); }
.lp-ai .tphase.stepcard.ai-auto:hover .tphase-stepcardface { opacity: 0.8; }
.lp-ai .tphase.stepcard.ai-set .tphase-stepcardface { border-color: rgba(216,162,74,0.55); }
.lp-ai .ai-knob { padding: 5px; border-radius: 999px; }
.lp-ai .ai-knob svg { width: 15px; height: 15px; }
.lp-ai-read { text-align: center; color: var(--text-faint); font-size: 13px; margin: 14px 0 0; }
.lp-ai-read em { color: var(--text); font-style: normal; font-weight: 650; }
.lp-ai-note {
  max-width: 620px; margin: 14px auto 0; text-align: center;
  color: var(--text-faint); font-size: 13px; line-height: 1.55;
}

/* ------------------------------ pricing -----------------------------
   .plan-flip / .plan-3d / .plan-card / .plan-face / .plan-back all come
   from css/styles.css, the same cards the Pro page deals out, laid out in
   the same .plan-grid. Nothing to add here. */

/* -------------------------------- FAQ -------------------------------
   Native <details> so the answers live in the HTML with no script: folded
   away for a reader, still there for a crawler. Same glass as .lp-usp.
   The <h3> inside each <summary> is what keeps the page outline correct
   (h1 > h2 > h3); it has to be inline-block or it takes the whole row and
   pushes the marker onto its own line. */
.lp-faq-sec { padding-top: 20px; }
.lp-faq {
  max-width: 880px; margin: 0 auto;
  display: grid; gap: 10px;
}
.lp-faq-item {
  background: rgba(15,20,28,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
  transition: border-color 0.2s;
}
.lp-faq-item[open], .lp-faq-item:hover { border-color: rgba(230,183,101,0.34); }
.lp-faq-item > summary {
  list-style: none; cursor: pointer;
  padding: 14px 44px 14px 16px; position: relative;
}
.lp-faq-item > summary::-webkit-details-marker { display: none; }
.lp-faq-item > summary h3 {
  display: inline; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.1px;
}
/* The chevron is drawn, not an icon file, so it recolours with the theme
   and needs no request. Rotates a quarter turn when the answer is open. */
.lp-faq-item > summary::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--accent-2); border-bottom: 2px solid var(--accent-2);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform 0.2s;
}
.lp-faq-item[open] > summary::after { transform: rotate(225deg); }
.lp-faq-item > summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 12px; }
.lp-faq-item > p {
  margin: 0; padding: 0 44px 16px 16px;
  font-size: 13px; line-height: 1.6; color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
  .lp-faq-item > summary::after { transition: none; }
}

/* A heading that is read but not seen. Used for the USP strip's h2, which
   exists to keep the outline from jumping h1 to h3. Never display:none: a
   screen reader skips that entirely, and so does the outline it builds. */
.lp-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------ closer ------------------------------ */
.lp-closer { text-align: center; padding: 80px 24px 96px; }
.lp-closer .lp-h2 { margin-bottom: 22px; }
.lp-foot {
  text-align: center; padding: 26px 24px 40px; color: var(--text-faint); font-size: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.lp-foot-mark { width: 30px; opacity: 0.7; display: block; margin: 0 auto 12px; }
.lp-foot-links { display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.lp-foot-links a { color: var(--text-dim); text-decoration: none; }
.lp-foot-links a:hover { color: var(--accent-2); }
.lp-foot p { margin: 0; }

/* ---------------------------- scroll reveal ------------------------- */
.lp .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.8,0.3,1); }
.lp .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lp .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------ responsive -------------------------- */
@media (max-width: 1000px) {
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-hero-hand { height: 320px; order: -1; }
  /* Stacked, the rail keeps its own width and centres under the card rather
     than stretching across the page: a 240 panel is a panel, and the same
     panel pulled to 900px is a form. */
  .lp-demo { grid-template-columns: 1fr; justify-items: center; }
  .lp .lp-demo-rail { width: min(320px, 100%); }
}
@media (max-width: 640px) {
  .lp-bar-link { display: none; }
  .lp-strip-inner { grid-template-columns: 1fr; }
}