/* =========================================================================
   Bitcoinist — Beta funnel landing
   Styles mirror the main site's design system (src/styles/*) so this
   standalone page reads as one brand: Inter + Geist Mono, brand orange
   #e76a22, dark surfaces, section-frame rails, WhyMine-style cards, and the
   plus/minus FAQ accordion.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* Surfaces / lines */
  --bg: #0a0a0a;
  --surface-1: #0f0f0f;
  --surface-2: #141414;
  --line: #1f1f21;
  --line-soft: rgba(255, 255, 255, 0.1);
  --line-accent: #86432c; /* warm border on accented surfaces */

  /* Text */
  --text: #f4f4f4;
  --text-2: #f4f4f4cc; /* 80% */
  --text-3: #f4f4f466; /* 40% */

  /* Accents */
  --orange: #e76a22; /* brand primary */
  --bitcoin: #f7931a; /* canonical bitcoin */
  --green: #21c068; /* success */
  --danger: #ff6b6b;

  /* Type */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius / layout / effects */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 14px;
  --gutter: clamp(20px, 5vw, 80px);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  --shadow-brand: 0 16px 32px rgba(231, 106, 34, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient brand glow — soft orange washes fixed behind all content, the
   same warm-radial treatment the main site uses around its hero. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 42rem at 6% -8%, rgba(231, 106, 34, 0.18), transparent 60%),
    radial-gradient(48rem 40rem at 104% 6%, rgba(247, 147, 26, 0.09), transparent 55%);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.site-shell {
  overflow: hidden;
}

::selection {
  background: rgba(231, 106, 34, 0.25);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Section frame: hairline top divider + vertical rails ----------
   Each section paints a top divider; from 768px up, two 1px rails sit at the
   layout gutter and stack into a continuous outlined frame down the page —
   exactly like the main site's `.section-frame`. */
.section {
  position: relative;
  padding: 56px 18px;
  border-top: 1px solid var(--line-soft);
}

.section:first-of-type {
  border-top: none;
}

.section-muted {
  background: rgba(255, 255, 255, 0.015);
}

@media (min-width: 768px) {
  .section {
    padding: 104px var(--gutter);
  }

  .section::before,
  .section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line-soft);
    pointer-events: none;
    z-index: 1;
  }

  .section::before {
    left: var(--gutter);
  }

  .section::after {
    right: var(--gutter);
  }
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Push content inward from the rails so it never touches the frame. */
  .container {
    padding: 0 clamp(28px, 3vw, 64px);
  }
}

/* ---------- Nav ----------
   Full-width strip with a bottom hairline (the divider used on bitcoinist.app),
   and an inner box whose horizontal insets exactly match a `.section` +
   `.container` so the logo's left edge and the pill's right edge line up with
   the hero content (headline / form / phone) below — same as the main site. */
.nav {
  position: relative;
  border-bottom: 1px solid var(--line-soft);
  padding: 0 18px; /* matches .section mobile horizontal padding */
}

/* Vertical frame rails at the gutter — same as .section, so the page-grid
   frame continues unbroken from the navbar down through every section. */
@media (min-width: 768px) {
  .nav::before,
  .nav::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line-soft);
    pointer-events: none;
    z-index: 1;
  }

  .nav::before {
    left: var(--gutter);
  }

  .nav::after {
    right: var(--gutter);
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Same centered reference as the hero so the logo aligns with the hero copy
     and the pill aligns with the phone's right edge. */
  max-width: 1500px;
  margin: 0 auto;
  padding: 22px 0; /* horizontal handled by .nav so the logo aligns to content */
}

@media (min-width: 768px) {
  .nav {
    padding: 0 var(--gutter); /* matches .section desktop horizontal padding */
  }

  .nav-inner {
    /* matches .container's inner clamp padding so logo == hero content edge */
    padding: 24px clamp(28px, 3vw, 64px);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.brand-logo {
  height: 26px;
  width: auto;
}

/* ---------- Eyebrows + pills — Geist Mono, uppercase, wide tracking ------- */
.eyebrow,
.nav-pill,
.mini-pill {
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.nav-pill,
.mini-pill {
  width: fit-content;
  border: 1px solid var(--line-accent);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(231, 106, 34, 0.06);
  /* Brand orange (same hue as the coming-soon eyebrow) — the brighter
     bitcoin orange read too light. */
  color: var(--orange);
  white-space: nowrap;
  font-size: 11px;
}

.eyebrow {
  width: fit-content;
  font-size: 13px;
  background: linear-gradient(to right, var(--orange), var(--bitcoin));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Headings — Inter semibold, gradient text-fill ---------- */
.hero h1,
.section-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
  background: linear-gradient(to right, var(--text), var(--text-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Hero ---------- */
.hero {
  padding-top: 40px;
}

.hero-grid {
  display: grid;
  gap: 24px;
  max-width: 720px;
  min-width: 0;
}

.hero-copy {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.hero h1 {
  max-width: 13ch;
  font-size: clamp(2.6rem, 11vw, 4.4rem);
  line-height: 0.98;
  overflow-wrap: break-word;
}

.subhead {
  margin: 0;
  max-width: 40rem;
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 400;
}

/* ---------- Hero iPhone mockup (desktop right column) ---------- */
.hero-phone {
  /* Shown on every viewport. On mobile/tablet it stacks centered below the
     copy + form (with a gap above); from 900px up it becomes the hero's
     right column. */
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* The phone box — sizing only; the chassis, glow, stroke and pulse are all
   ported verbatim from the coming-soon HeroScroll so the mockup, its warm
   glow and the travelling edge-light match exactly. */
.phone {
  position: relative;
  /* Height-based on mobile/tablet so the mockup matches the main site's
     ~48vh size (desktop ≥900 overrides this below). */
  width: auto;
  height: clamp(360px, 48vh, 470px);
  aspect-ratio: 708.42 / 1446;
}

/* Inner wrapper carries the perpetual float; isolate so the glow/stroke
   negative z-indexes stay contained within this subtree. */
.phoneFloat {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  animation: phoneFloat 5.5s ease-in-out infinite;
}

@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* Reflection / layer-glow behind the phone (orange ambient wash). */
.glow {
  position: absolute;
  inset: -100% -200%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 32% 32% at 50% 50%,
    rgba(231, 106, 34, 0.39) 0%,
    rgba(231, 106, 34, 0.21) 25%,
    rgba(231, 106, 34, 0.07) 55%,
    rgba(231, 106, 34, 0) 80%
  );
}

/* Outer orange gradient stroke hugging the phone frame. */
.phoneStroke {
  position: absolute;
  inset: -5px;
  border-radius: 14% / 7%;
  background: linear-gradient(
    to bottom,
    #e35300 0%,
    rgba(244, 139, 28, 0.23) 81%,
    rgba(255, 0, 0, 0.4) 100%
  );
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

/* Travelling 1.3px impulse around the phone outline (comet). */
.phonePulse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.phonePulseLine,
.phonePulseTail,
.phonePulseHalo {
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.phonePulseLine {
  animation-name: phonePulseHead;
  stroke-width: 2.6;
  stroke-dasharray: 18 982;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 1.5px rgba(255, 220, 170, 0.98))
    drop-shadow(0 0 5px rgba(255, 140, 48, 0.85))
    drop-shadow(0 0 14px rgba(255, 100, 20, 0.45));
}

.phonePulseTail {
  animation-name: phonePulseTail;
  stroke-width: 1.8;
  stroke-dasharray: 42 958;
  stroke-linecap: round;
  opacity: 0.55;
  filter: blur(1.2px) drop-shadow(0 0 4px rgba(255, 130, 40, 0.55));
}

.phonePulseHalo {
  animation-name: phonePulseHalo;
  stroke-width: 14;
  stroke-dasharray: 26 974;
  opacity: 0.5;
  filter: blur(7px);
}

@keyframes phonePulseHead {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1000; }
}

@keyframes phonePulseTail {
  from { stroke-dashoffset: 8; }
  to { stroke-dashoffset: -992; }
}

@keyframes phonePulseHalo {
  from { stroke-dashoffset: 3; }
  to { stroke-dashoffset: -997; }
}

.phone:hover .phonePulseLine,
.phone:hover .phonePulseTail,
.phone:hover .phonePulseHalo { animation-duration: 2.8s; }
.phone:hover .phonePulseTail { opacity: 0.85; }
.phone:hover .phonePulseHalo { opacity: 0.9; }

/* CSS iPhone 14 Pro chassis + screen. */
.cssPhone {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  border-radius: 14% / 7%;
  container-type: inline-size;
  box-shadow:
    0 0 8cqi 1cqi rgba(255, 140, 40, 0.2),
    0 0 22cqi 4cqi rgba(255, 140, 40, 0.12),
    0 0 45cqi 12cqi rgba(255, 100, 20, 0.06);
}

.phoneSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.statusBar {
  position: absolute;
  top: 7cqi;
  left: 8.5cqi;
  right: 8.5cqi;
  height: 4.6cqi;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-family: var(--sans);
  font-size: 3.6cqi;
  font-weight: 600;
  z-index: 3;
  pointer-events: none;
}

.statusTime {
  letter-spacing: -0.04em;
  line-height: 1;
}

.statusIcons {
  display: flex;
  align-items: center;
  gap: 1.4cqi;
}

.statusIcon {
  height: 2.8cqi;
  width: auto;
  display: block;
  color: #fff;
}

.statusIcon.batteryIcon {
  height: 3cqi;
}

/* ---------- Signup panel ---------- */
.signup-panel {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(231, 106, 34, 0.07), transparent 52%),
    var(--surface-2);
  box-shadow: var(--shadow);
}

.signup-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.form-row {
  display: grid;
  gap: 10px;
}

.field-label {
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 500;
}

.input {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #080808;
  color: var(--text);
  padding: 0 16px;
  outline: none;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input::placeholder {
  color: var(--text-3);
}

.input:focus {
  border-color: var(--orange);
  box-shadow: none;
}

.consent-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--text-2);
  font-size: 0.8rem;
  line-height: 1.45;
  font-weight: 400;
}

.consent-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--orange);
}

.consent-check a {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(231, 106, 34, 0.5);
  text-underline-offset: 3px;
}

.consent-check a:hover {
  color: var(--bitcoin);
}

/* ---------- Buttons ---------- */
.button {
  min-height: 54px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 20px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease,
    background 0.16s ease;
}

.button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.button:hover {
  transform: translateY(-1px);
}

.button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.button:disabled:hover {
  transform: none;
}

.button-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.button-primary:hover {
  filter: brightness(1.06);
}

.button-secondary {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.button-full {
  width: 100%;
}

.button-link {
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
}

.microcopy,
.helper,
.fine-print {
  margin: 0;
  color: var(--text-3);
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 400;
}

.error {
  display: none;
  margin: 0;
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 500;
}

.error.is-visible {
  display: block;
}

/* ---------- Success / wallet ---------- */
.success-box,
.wallet-step {
  display: grid;
  gap: 14px;
}

.success-title {
  margin: 0;
  color: var(--green);
  font-size: 1.15rem;
  font-weight: 600;
}

.success-body {
  margin: 0;
  color: var(--text-2);
  line-height: 1.5;
  font-weight: 400;
}

/* ---------- Cursor spotlight (shared card hover sheen) ---------- */
.card-spotlight {
  position: relative;
  isolation: isolate;
}

.card-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.07),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 50;
}

.card-spotlight:hover::after {
  opacity: 1;
}

/* ---------- Trust strip ---------- */
.trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-2);
  font-weight: 500;
  font-size: 0.8rem;
}

.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--orange);
}

.trust-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- "Takes" cards — WhyMine treatment (rust→dark gradient) ------- */
/* Minimal outline cards (Nothing-style) — no fill, hairline border, full
   section width, small gap. Number top, copy pinned to the bottom. */
.take-list {
  display: grid;
  gap: 8px;
}

.take-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  min-height: 248px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  /* Photo background (per card below) + dark overlay for legibility + a soft
     orange glow in the top-right corner. */
  position: relative;
  overflow: hidden;
  background-color: var(--surface-1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: border-color 0.3s ease;
}

/* Card 01 */
.take-list .take-item:nth-child(1) {
  background-image:
    radial-gradient(210px circle at top right, rgba(231, 106, 34, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.55) 0%, rgba(12, 10, 8, 0.24) 46%, rgba(12, 10, 8, 0.66) 100%),
    url("card-bg-1.jpg");
}

/* Card 02 */
.take-list .take-item:nth-child(2) {
  background-image:
    radial-gradient(210px circle at top right, rgba(231, 106, 34, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.57) 0%, rgba(12, 10, 8, 0.28) 46%, rgba(12, 10, 8, 0.68) 100%),
    url("card-bg-3.jpg");
}

/* Card 03 */
.take-list .take-item:nth-child(3) {
  background-image:
    radial-gradient(210px circle at top right, rgba(231, 106, 34, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.55) 0%, rgba(12, 10, 8, 0.24) 46%, rgba(12, 10, 8, 0.66) 100%),
    url("card-bg-2.jpg");
}

.take-item:hover {
  border-color: var(--line-accent);
}

.take-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.take-num {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.take-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  background: linear-gradient(to right, var(--text), var(--text-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.take-copy {
  margin: 0;
  color: var(--text-2);
  line-height: 1.45;
  font-weight: 400;
  font-size: 0.95rem;
}

/* ---------- Section heading + content stack ---------- */
.content-stack {
  display: grid;
  gap: 28px;
}

.section-title {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.05;
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: beta-step;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.step::before {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  background: rgba(231, 106, 34, 0.14);
  color: var(--bitcoin);
  content: counter(beta-step);
  counter-increment: beta-step;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.9rem;
}

.step-title {
  margin: 0 0 4px;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
}

.step-copy {
  margin: 0;
  color: var(--text-2);
  line-height: 1.45;
  font-weight: 400;
  font-size: 0.92rem;
}

/* ---------- How it works — persona-style layout ----------
   Left: a single visual placeholder with a frosted-glass caption.
   Right: the steps rendered as info cards. */
.hiw-header {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

/* Inside a content-stack the parent grid gap already spaces the header, so
   drop its bottom margin to avoid doubled spacing. */
.content-stack > .hiw-header {
  margin-bottom: 0;
}

.hiw-layout {
  display: grid;
  gap: 14px;
}

@media (min-width: 900px) {
  .hiw-layout {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
  }
}

.persona-card {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-1);
}

.persona-media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(231, 106, 34, 0.18), transparent 60%),
    linear-gradient(180deg, #1b1b1b 0%, #0c0c0c 100%);
}

/* Animated background video — covers the card behind the frosted caption. */
.persona-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Frosted glass caption — low-opacity white fill + blur, like the reference. */
.persona-label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: min(260px, calc(100% - 32px));
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Full-width caption on mobile/tablet; desktop keeps the compact left chip. */
@media (max-width: 899px) {
  .persona-label {
    right: 16px;
    min-width: 0;
  }
}

.persona-name {
  margin: 0;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
}

.persona-role {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: var(--text-2);
}

.persona-mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, 0.85);
}

.persona-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.hiw-cards {
  display: grid;
  gap: 14px;
  align-content: start;
}

.hiw-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}

.hiw-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.hiw-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(231, 106, 34, 0.14);
  color: var(--bitcoin);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.85rem;
}

.hiw-title {
  margin: 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
}

.hiw-copy {
  margin: 0;
  color: var(--text-2);
  line-height: 1.5;
  font-size: 0.92rem;
  font-weight: 400;
}

/* ---------- FAQ — heading left, Q&A cards right ---------- */
.faq-layout {
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }

  /* Heading sticks alongside the scrolling list. */
  .faq-head {
    position: sticky;
    top: 96px;
  }
}

.faq-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.faq-item[open] {
  border-color: var(--line-accent);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--text);
  transition: color 0.3s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover,
.faq-item[open] summary {
  color: var(--orange);
}

.faq-q {
  flex: 1;
}

/* Plus/minus icon — horizontal bar always shown, vertical bar collapses +
   rotates out when the item opens, morphing "+" into "−". */
.faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--orange);
  border-radius: 1px;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

.faq-toggle::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-toggle::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}

.faq-item[open] .faq-toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--text-2);
  line-height: 1.6;
  font-weight: 400;
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */
.footer {
  padding-bottom: 160px;
  /* Same orange-glow background art as the main site's Bitcoin Academy
     section — sits at the very bottom of the page, glow rising from the
     bottom edge. */
  background-image: url("btc-academy-bg.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

.footer-grid {
  display: grid;
  gap: 14px;
}

/* Social icon row — square chips matching the main Bitcoinist site footer. */
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-3);
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}

.footer-social:hover {
  color: var(--text);
  background: var(--surface-1);
  border-color: var(--line-accent);
  transform: translateY(-1px);
}

.footer-social svg {
  width: 20px;
  height: 20px;
}

/* ---------- Sticky CTA (mobile only) ---------- */
.sticky-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px);
}

.sticky-cta[hidden] {
  display: none;
}

/* ============================================
   Responsiveness
   ============================================ */
@media (min-width: 560px) {
  .field-label {
    grid-column: 1 / -1;
  }

  .form-row {
    grid-template-columns: 1fr auto;
  }

  .signup-form > .button-full,
  .success-box > .button-full {
    width: 100%;
  }
}

@media (min-width: 760px) {
  .hero {
    padding-top: 56px;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 5.6vw, 4.4rem);
  }

  .take-list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Cards ~1/3 taller on desktop. */
  .take-item {
    min-height: 330px;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer {
    padding-bottom: 180px;
  }

  .sticky-cta {
    display: none;
  }
}

/* Hero becomes two columns — copy + form on the left, iPhone on the right.
   The hero fills the viewport below the navbar and vertically centers its
   content, so the phone sits centered with breathing room above and below
   (same placement as bitcoinist.app) rather than hugging the top. */
@media (min-width: 900px) {
  .hero {
    display: grid;
    align-content: center;
    min-height: calc(100vh - 72px);
    padding-top: 40px;
    padding-bottom: 72px;
  }

  .hero-grid {
    width: 100%;
    /* Centered content reference matching bitcoinist.app (~1500px) so the copy
       sits inset from the left rail with generous padding and the phone's
       right edge lands well inside the viewport — rather than full-bleed. */
    max-width: 1500px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(36px, 5vw, 80px);
  }

  .hero-copy {
    max-width: 560px;
  }

  .hero-phone {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
    /* Nudge the phone ~100px toward the copy on desktop only. */
    transform: translateX(-100px);
  }

  /* Larger, viewport-relative phone — the hero centerpiece on the right,
     matching the main site's ~66vh mockup. */
  .phone {
    width: auto;
    height: clamp(460px, 64vh, 680px);
  }
}

@media (min-width: 1040px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile/tablet: the phone sits between the title and the email box.
   Flattening .hero-copy with display:contents lets its children (title,
   subhead, signup panel) and the phone share the hero grid, so `order` can
   slot the phone in the middle. Desktop (>=900) keeps the two-column layout. */
@media (max-width: 899px) {
  .hero-copy {
    display: contents;
  }

  /* Center the hero copy on mobile/tablet. */
  .hero .eyebrow,
  .hero h1,
  .hero .subhead {
    justify-self: center;
    text-align: center;
  }

  .hero-phone {
    order: 1;
    /* Extra breathing room above the phone so it isn't crowding the text. */
    margin: 32px 0 8px;
  }

  /* The signup box is centered as a block, but its contents stay left-aligned
     (matching the email field). */
  .signup-panel {
    order: 2;
    justify-self: center;
  }
}

/* ---------- Mobile-only tweaks ---------- */
@media (max-width: 759px) {
  /* Drop the "iPhone TestFlight Beta" pill from the top nav on mobile. */
  .nav-pill {
    display: none;
  }

  /* Trust items drop the pill container — just centered icon + text, no
     dividers between rows. */
  .trust-list {
    flex-direction: column;
    gap: 4px;
  }

  .trust-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: none;
    border-radius: 0;
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Follow for bonus (text-forward flyer block) ---------- */
.follow-section {
  text-align: center;
}

.follow-lead {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.55;
}

.follow-channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.follow-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-2);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.follow-channel:hover {
  border-color: var(--line-accent);
  background: var(--surface-2);
  transform: translateY(-1px);
}

.follow-channel-icon {
  display: inline-flex;
  color: var(--text-3);
}

.follow-channel:hover .follow-channel-icon {
  color: var(--bitcoin);
}

.follow-channel svg {
  width: 20px;
  height: 20px;
  display: block;
}

.follow-urgency {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--bitcoin);
}

/* ---------- Nav CTA (subtle, small) ---------- */
.nav-cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-accent);
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-cta:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* ---------- Footer legal links ---------- */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 6px;
}

.footer-legal-link {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-legal-link:hover {
  color: var(--text);
}