/* SubPro — apply.html / apply-ja.html / talk.html / talk-ja.html /
   talk-thanks.html / talk-thanks-ja.html
   Restyles the FlowForm engine (flowform.css) from its dark "typeform"
   theme to the light LP v2 look, and provides the small extra classes
   these pages need to sit under the shared lp2.css gnav header / footer.

   🚨 Visual-only: flowform.js and flowform.css are never edited. Every
      rule below is either a CSS-custom-property override on .ff-root
      (the engine was built to be themed exactly this way — see the
      comment at the top of flowform.css) or new layout for markup that
      didn't exist before (header/footer wrapper, thank-you card).

   Load order on the page: lp2.css, flowform.css, lp2-form.css (this file
   last, so its .ff-root overrides win on equal specificity). */

/* ── FlowForm palette: swap the dark theme vars for the LP v2 light ones ── */
#ff.ff-root {
  --ff-bg: var(--ground);
  --ff-fg: var(--ink);
  --ff-accent: var(--ink);
  --ff-accent-2: #3a3a3c;
  --ff-dim: var(--muted);
  --ff-dim-2: #3a3a3c;
  --ff-line: var(--rule);
  --ff-line-2: var(--rule-soft);
  --ff-panel: var(--ground-2);
  --ff-font-body: var(--font);
}

/* Lift the full-screen "typeform" takeover out of position:fixed and into
   the normal page flow, so it sits between the sticky gnav header and the
   site footer instead of covering the whole viewport. The floor is sized
   generously (the "plan" question — 4 option cards with detail + price —
   is the tallest screen in either form) so no question ever gets clipped
   by .ff-root's own overflow:hidden; on short viewports the page simply
   scrolls, which is fine now that this isn't a locked full-screen mode. */
#ff.ff-root {
  position: relative;
  inset: auto;
  min-height: max(700px, min(860px, calc(100svh - 170px)));
}

.ff-main { padding-top: clamp(16px, 3vw, 32px); }

/* The nav pad (↑ ↓) sits fixed at bottom-right of .ff-root. Reserve room
   under the vertically-centered question so the tallest screens (the
   4-card "plan" question) never sit underneath it. */
.ff-stage { padding-bottom: 88px; }

/* flowform.css hardcodes these colors for the dark theme; on the white
   ground they need real contrast to stay clearly legible (still CSS-only —
   no change to when/how they are shown). */
.ff-err { background: #fff1f0; border-color: #ffb4b0; color: #b3261e; }
.ff-hint.ok { color: #1a7f37; }
.ff-hint.bad { color: #c22222; }

/* Honeypot field (talk.html / talk-ja.html) — same off-screen technique
   the pages used inline before, just centralized here. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── talk-thanks.html / talk-thanks-ja.html ───────────────────────── */
.thanks-main { display: flex; align-items: center; justify-content: center; padding: clamp(48px, 8vw, 96px) 0; }
.thanks { max-width: 560px; width: 100%; margin-inline: auto; padding-inline: var(--gutter); text-align: center; display: grid; justify-items: center; gap: 14px; }
.thanks .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 24px; margin-bottom: 6px; }
.thanks h1 { font-size: clamp(32px, 5vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
html:lang(ja) .thanks h1 { font-size: clamp(28px, 4.4vw, 40px); letter-spacing: -0.01em; line-height: 1.3; }
.thanks p { max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
html:lang(ja) .thanks p { max-width: 32em; line-height: 1.8; }
.thanks .acts { margin-top: 10px; }

.ff-root::after { display: none; }