/* =========================================================================
   High Performance Wallet — Marketing Website
   Design system: white & blue, clean, trustworthy global fintech
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand blues — aligned to the HP Wallet app (softer royal blue) */
  --blue-700: #16243e;   /* deep navy — headings, footer */
  --blue-600: #1f4aa0;
  --blue-500: #2f6be0;   /* primary brand (matches wallet buttons/links) */
  --blue-450: #4a83ec;
  --blue-400: #6ea0f4;
  --blue-200: #c3d8fb;
  --blue-100: #e6effc;
  --blue-50:  #f1f6fe;

  /* Neutrals */
  --ink-900: #182438;
  --ink-700: #38465c;
  --ink-500: #6b7891;
  --ink-400: #97a3b6;
  --line:    #e9eef6;
  --line-2:  #f0f4fa;
  --bg:      #ffffff;
  --bg-soft: #f3f6fc;    /* light blue-gray page canvas, like the wallet */
  --white:   #ffffff;

  /* Crypto / accent */
  --teal-500: #1aa884;   /* tether-ish green for positive/trust cues */
  --amber-500: #e0a106;
  --btc: #f7931a;
  --usdt: #26a17b;
  --eth: #627eea;

  /* Typography */
  --font-base: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, -apple-system, sans-serif;

  /* Radius / shadow — generous radii, soft diffuse shadows (wallet feel) */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-btn: 11px;         /* buttons are rounded rectangles, not pills */
  --r-pill: 999px;
  --shadow-sm: 0 2px 14px rgba(31, 74, 160, .05);
  --shadow-md: 0 12px 34px rgba(31, 74, 160, .08);
  --shadow-lg: 0 26px 64px rgba(20, 37, 62, .12);

  /* Layout */
  --maxw: 1160px;
  --gutter: 24px;
  --header-h: 74px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Guard against any element forcing a horizontal scrollbar on small screens */
html, body { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--ink-700);
  background: var(--bg);
  line-height: 1.75;
  font-size: 16px;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { max-width: 100%; }
img { display: block; }
a { color: var(--blue-500); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--blue-450); }
h1, h2, h3, h4 { color: var(--ink-900); line-height: 1.35; font-weight: 700; margin: 0 0 .6em; letter-spacing: .01em; overflow-wrap: break-word; }
/* Balanced wrapping keeps multi-line headings from leaving a lonely last word */
h1, h2, h3, .section-head h2, .hero h1, .page-hero h1 { text-wrap: balance; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }
:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: 96px 0; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding: 64px 0; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-500); margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-head p { color: var(--ink-500); font-size: 1.05rem; margin-bottom: 0; }
.lead { font-size: 1.12rem; color: var(--ink-500); }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: .96rem; line-height: 1;
  padding: 14px 24px; border-radius: var(--r-btn);
  border: 1.5px solid transparent; cursor: pointer; transition: all .18s ease;
  white-space: nowrap;
}
.btn svg { transition: transform .18s ease; }
.btn:hover svg { transform: translateX(2px); }
.btn--primary { background: var(--blue-500); color: #fff; box-shadow: 0 8px 20px rgba(47, 107, 224, .22); }
.btn--primary:hover { background: var(--blue-450); color:#fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(47, 107, 224, .30); }
.btn--ghost { background: #fff; color: var(--blue-600); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--blue-200); color: var(--blue-500); background: var(--blue-50); }
.btn--light { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.35); }
.btn--light:hover { background: rgba(255,255,255,.2); color:#fff; }
.btn--lg { padding: 18px 34px; font-size: 1.05rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.nav { display: flex; align-items: center; height: var(--header-h); gap: 20px; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: auto; height: 30px; }
.footer-brand .brand-logo { height: 30px; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.nav-links a {
  color: var(--ink-700); font-weight: 600; font-size: .92rem;
  padding: 9px 10px; border-radius: var(--r-sm); white-space: nowrap;
}
.nav-links a:hover { color: var(--blue-500); background: var(--blue-50); }
.nav-links a.active { color: var(--blue-500); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 11px 20px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink-900); margin: 5px 0; transition: .25s; border-radius: 2px; }

/* ---------- Language switcher ---------- */
.lang-switch { display: inline-flex; align-items: center; gap: 1px; }
.lang-switch .lang-ic { color: var(--ink-400); margin-right: 4px; flex: none; }
.lang-switch a { font-size: .82rem; font-weight: 600; color: var(--ink-700); padding: 6px 7px; border-radius: var(--r-sm); line-height: 1; white-space: nowrap; }
.lang-switch a:hover { color: var(--blue-500); background: var(--blue-50); }
.lang-switch a.active { color: var(--blue-500); }
/* Footer variant (dark background) */
.lang-switch--footer { gap: 2px; }
.lang-switch--footer .lang-ic { color: #8aa2c2; }
.lang-switch--footer a { color: #8aa2c2; padding: 4px 8px; }
.lang-switch--footer a:hover { color: #fff; background: rgba(255,255,255,.08); }
.lang-switch--footer a.active { color: #fff; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(59,130,246,.16), transparent 60%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 70%);
}
.hero-inner { position: relative; z-index: 2; display: flex; align-items: center;
  min-height: clamp(560px, 52vw, 720px); padding: 96px 0 104px; }
.hero-text { max-width: 540px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px;
  padding: 7px 15px 7px 12px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: .82rem; font-weight: 700; color: var(--blue-600); letter-spacing: .01em;
}
.hero-pill svg { color: var(--blue-500); }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.02em; line-height: 1.22; }
.hero h1 .accent { color: var(--blue-500); }
.hero .lead { font-size: 1.18rem; max-width: 540px; margin-bottom: 28px; }
.hero .btn-row { margin-bottom: 26px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; color: var(--ink-500); font-size: .9rem; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { color: var(--teal-500); flex: none; }
/* Reassurance microcopy under the hero CTA (lowers signup friction) */
.hero-reassure {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  margin: -8px 0 22px; color: var(--ink-700); font-size: .9rem; font-weight: 600;
}
.hero-reassure span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hero-reassure svg { color: var(--teal-500); flex: none; }

/* Hero visual card */
.hero-visual { position: relative; }
.glass-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 26px;
}
.balance-card {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color:#fff; border-radius: var(--r-md); padding: 22px 24px; margin-bottom: 18px;
  box-shadow: 0 16px 34px rgba(22,87,200,.3);
}
.balance-card .label { font-size: .82rem; opacity: .85; letter-spacing: .04em; }
.balance-card .amount { font-size: 2rem; font-weight: 800; margin: 4px 0 2px; letter-spacing: -.01em; }
.balance-card .sub { font-size: .85rem; opacity: .85; }
.mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-stat { background: var(--blue-50); border-radius: var(--r-sm); padding: 14px 16px; }
.mini-stat .k { font-size: .78rem; color: var(--ink-500); }
.mini-stat .v { font-size: 1.25rem; font-weight: 800; color: var(--blue-700); }
.mini-stat .v small { font-size: .7rem; font-weight: 700; color: var(--teal-500); margin-left: 4px; }

/* Spec card — replaces the dashboard-style balance card in marketing visuals.
   Presents service characteristics (not personal balances or asserted rates). */
.spec-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.spec-card-h {
  font-weight: 800; color: var(--ink-900); font-size: 1.05rem;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2);
}
.spec-rows { display: grid; gap: 11px; }
.spec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .95rem; }
.spec-row .k { color: var(--ink-500); }
.spec-row .v { color: var(--blue-700); font-weight: 700; text-align: right; }

/* Placeholder for not-yet-confirmed figures (rates / rewards / counts).
   Replace with real values once finalized. */
.tbd {
  display: inline-block; background: var(--bg-soft); color: var(--ink-400);
  border: 1px dashed var(--line); border-radius: var(--r-pill);
  padding: 1px 10px; font-size: .82em; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; line-height: 1.5;
}

/* Highlight band cells (dark band) — qualitative features, no numbers */
.stats-band .hl { text-align: center; padding: 12px 10px; }
.hl-ic {
  width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.1);
  color: #d4e2fb; display: grid; place-items: center; margin: 0 auto 14px;
}
.hl-t { font-size: 1.12rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.hl-d { color: #b9cbe6; font-size: .9rem; line-height: 1.6; }

/* ---------- Crypto coin chips ---------- */
.coin {
  display: inline-grid; place-items: center; border-radius: 50%;
  background: var(--coin, var(--blue-500)); color: #fff; font-weight: 700;
  flex: none; box-shadow: 0 4px 10px rgba(24, 36, 56, .14); line-height: 1;
}
.asset-band { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.asset-chip {
  display: inline-flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 18px 8px 8px;
  box-shadow: var(--shadow-sm); font-weight: 700; color: var(--ink-900); font-size: .95rem;
}

/* ---------- Wallet feature panel ("利用できる機能" / 利用イメージ) ---------- */
.feature-panel {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 22px; position: relative;
}
.fp-head {
  font-weight: 800; color: var(--ink-900); font-size: 1.04rem; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fp-tag {
  font-size: .7rem; font-weight: 700; color: var(--blue-500); background: var(--blue-50);
  border-radius: var(--r-pill); padding: 4px 11px; letter-spacing: .04em; flex: none;
}
.fp-list { display: grid; gap: 6px; }
.fp-row {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-md);
  transition: background .18s ease;
}
.fp-row:hover { background: var(--bg-soft); }
.fp-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--blue-50); color: var(--blue-500); display: grid; place-items: center; flex: none; }
.fp-text { flex: 1; min-width: 0; }
.fp-t { font-weight: 700; color: var(--ink-900); font-size: 1rem; }
.fp-d { color: var(--ink-500); font-size: .85rem; }
.fp-arrow { color: var(--blue-200); flex: none; }
.fp-row:hover .fp-arrow { color: var(--blue-500); }
/* floating accent behind the panel for depth */
.hero-visual .feature-panel::before {
  content: ""; position: absolute; inset: 18px -16px -18px 30px; border-radius: 22px;
  background: var(--blue-100); opacity: .6; transform: rotate(3deg); z-index: -1;
}

/* Hero main visual — product image (star of the first view).
   The source render shares our light blue/white background, so a soft left
   fade blends it seamlessly into the headline column (no hard frame edge). */
/* Full-bleed hero image (img element for LCP/alt benefits, behind the text).
   The render has empty light space on the left, sized for the headline. */
.hero-figure { position: absolute; inset: 0; z-index: 0; margin: 0; }
.hero-bg {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: right center;
}
.hero-slogan { display: none; }  /* shown only on phones, over the image */
/* Soft left scrim keeps the headline crisp over the lighter image areas */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(244,248,254,.94) 0%, rgba(244,248,254,.62) 32%, rgba(244,248,254,0) 56%);
}

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 30px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.card .icon {
  width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-500); margin-bottom: 18px;
}
.card h3 { font-size: 1.22rem; }
.card p { color: var(--ink-500); margin-bottom: 0; font-size: .98rem; }
.card--link { display:block; }
.card-tag { font-size:.78rem; font-weight:700; color: var(--blue-500); letter-spacing:.04em; }

/* feature card with link arrow */
.card .more { margin-top: 16px; font-weight: 700; color: var(--blue-500); display: inline-flex; align-items: center; gap: 6px; font-size:.92rem; }
.card:hover .more { gap: 10px; }

/* ---------- Service highlight (alternating) ---------- */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feature-row + .feature-row { margin-top: 90px; }
.feature-row.reverse .feature-visual { order: -1; }
.feature-visual {
  background: linear-gradient(160deg, var(--blue-50), #fff);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px;
  box-shadow: var(--shadow-sm); min-height: 280px; display: grid; align-content: center; gap: 14px;
}
.feature-text h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.feature-text .lead { margin-bottom: 20px; }
.check-list { list-style: none; padding: 0; margin: 0 0 24px; }
.check-list li { display: flex; gap: 12px; margin-bottom: 12px; color: var(--ink-700); }
.check-list svg { flex: none; color: var(--teal-500); margin-top: 4px; }

/* ---------- Stats band ---------- */
.stats-band { background: var(--blue-700); color: #fff; }
.stats-band .grid-4 { gap: 20px; }
.stat { text-align: center; padding: 12px; }
.stat .num { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: #fff; letter-spacing: -.02em; }
.stat .num span { color: var(--blue-200); }
.stat .cap { color: #b9cbe6; font-size: .92rem; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.step { position: relative; padding-top: 8px; }
.step .num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--blue-500); color: #fff;
  font-weight: 800; display: grid; place-items: center; margin-bottom: 16px; box-shadow: 0 6px 16px rgba(22,87,200,.3);
}
.step h3 { font-size: 1.1rem; }
.step p { color: var(--ink-500); font-size: .95rem; margin-bottom: 0; }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 22px; left: 60px; right: -13px; height: 2px;
  background: linear-gradient(90deg, var(--blue-200), transparent);
}

/* ---------- Reasons / value props ---------- */
.value-item { display: flex; gap: 16px; }
.value-item .icon { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--blue-50); color: var(--blue-500); display: grid; place-items: center; }
.value-item h3 { font-size: 1.12rem; margin-bottom: 6px; }
.value-item p { color: var(--ink-500); font-size: .96rem; margin: 0; }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 14px; background: #fff; overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 20px 24px; font-size: 1.02rem; font-weight: 700; color: var(--ink-900);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: inherit;
}
.faq-q:hover { color: var(--blue-500); }
.faq-q .chev { flex: none; transition: transform .25s ease; color: var(--blue-500); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 24px 20px; color: var(--ink-500); }
.faq-item.open .faq-a { max-height: 480px; }

/* ---------- Notice / risk box ---------- */
.notice {
  background: #fffbf2; border: 1px solid #f3e2b8; border-left: 4px solid var(--amber-500);
  border-radius: var(--r-md); padding: 26px 30px;
}
.notice h3 { font-size: 1.1rem; color: #8a6400; display:flex; align-items:center; gap:10px; }
.notice ul { margin-bottom: 0; color: var(--ink-700); }
.notice p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 55%, var(--blue-450) 100%);
  color: #fff; border-radius: 28px; padding: 64px 56px; text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 85% 120%, rgba(255,255,255,.16), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.cta-band p { color: rgba(255,255,255,.9); font-size: 1.1rem; max-width: 620px; margin: 0 auto 30px; }
.cta-band .btn--primary { background: #fff; color: var(--blue-600); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.cta-band .btn--primary:hover { background: #f3f7ff; color: var(--blue-600); }

/* ---------- Page hero (sub-pages) ---------- */
.page-hero { background: linear-gradient(180deg, var(--blue-50), #fff); padding: 64px 0 56px; border-bottom: 1px solid var(--line-2); }
.page-hero .container { max-width: 880px; }
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.02em; }
.page-hero p { font-size: 1.12rem; color: var(--ink-500); margin-bottom: 0; }
.breadcrumb { font-size: .85rem; color: var(--ink-400); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink-400); }
.breadcrumb a:hover { color: var(--blue-500); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.data { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 520px; }
table.data th, table.data td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line-2); }
table.data thead th { background: var(--blue-50); color: var(--blue-700); font-size: .85rem; letter-spacing: .03em; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--bg-soft); }

/* ---------- Rank cards (referral) ---------- */
.rank-card { text-align:center; border-top: 4px solid var(--blue-200); }
.rank-card.featured { border-top-color: var(--blue-500); box-shadow: var(--shadow-md); }
.rank-card .tier { font-size: .85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--blue-500); }
.rank-card .rate { font-size: 2.4rem; font-weight: 800; color: var(--blue-700); margin: 6px 0; }
.rank-card .rate small { font-size:1rem; }

/* ========================================================================
   Nine Box (referral program)
   ======================================================================== */
.nb-eyebrow-num {
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:var(--blue-500); color:#fff; font-weight:800; font-size:1rem; margin-right:12px;
}
.section-head .nb-eyebrow-num { vertical-align:middle; }

/* Big 1-box diagram (3x3) */
.ninebox { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:380px; margin:0 auto; }
.nb-cell {
  position:relative; aspect-ratio:1/1; border:1.5px solid var(--line); border-radius:var(--r-md);
  background:#fff; display:grid; place-items:center; color:var(--blue-500); box-shadow:var(--shadow-sm);
}
.nb-cell svg { width:36px; height:36px; }
.nb-num { position:absolute; top:7px; left:9px; font-size:.82rem; font-weight:800; color:var(--ink-400); }
.nb-cell.you {
  background:linear-gradient(140deg,var(--blue-600),var(--blue-500)); border-color:transparent; color:#fff;
  box-shadow:0 10px 22px rgba(47,107,224,.3);
}
.nb-cell.you .nb-label { position:absolute; bottom:8px; left:0; right:0; text-align:center; font-size:.66rem; font-weight:700; }

/* Reward callout box */
.nb-reward {
  background:linear-gradient(160deg,var(--blue-50),#fff); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px; text-align:center;
}
.nb-reward h3 { font-size:1.2rem; }
.nb-formula { font-size:1.5rem; font-weight:800; color:var(--blue-600); margin:10px 0; letter-spacing:-.01em; }
.nb-formula b { color:var(--blue-500); }
.nb-badge-line {
  display:inline-block; background:var(--blue-500); color:#fff; font-weight:800; font-size:1rem;
  padding:9px 20px; border-radius:var(--r-pill); margin:6px 0 12px;
}

/* Tier cards (box completion -> management reward %) */
.tier-card { text-align:center; position:relative; }
.tier-card .tier-h { font-weight:800; color:var(--ink-900); font-size:1.05rem; }
.tier-card .tier-h small { display:block; color:var(--ink-400); font-weight:600; font-size:.82rem; margin-top:2px; }
.tier-grids { display:flex; gap:7px; justify-content:center; align-items:center; flex-wrap:wrap; margin:16px 0; min-height:72px; }
.nb-mini { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.nb-dot { width:15px; height:15px; border-radius:50%; background:var(--nb,#cbd5e6); }
.nb-mini--green .nb-dot { background:#1aa86a; }
.nb-mini--blue .nb-dot  { background:var(--blue-500); }
.nb-mini--orange .nb-dot{ background:#f0871f; }
.tier-count {
  display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border-radius:var(--r-pill);
  color:#fff; font-weight:800; font-size:.9rem; margin-bottom:10px;
}
.tier-count.green { background:#1aa86a; } .tier-count.blue { background:var(--blue-500); } .tier-count.orange { background:#f0871f; }
.tier-pct { font-size:1.05rem; font-weight:700; color:var(--ink-700); }
.tier-pct strong { font-size:1.9rem; }
.tier-card.green .tier-pct strong { color:#1aa86a; }
.tier-card.blue .tier-pct strong { color:var(--blue-500); }
.tier-card.orange .tier-pct strong { color:#f0871f; }
.tier-cap { display:inline-block; margin-left:8px; background:#f0871f; color:#fff; font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:var(--r-pill); vertical-align:middle; }
.tier-arrow { display:grid; place-items:center; color:var(--blue-300,#9bc0f5); }

/* Limit ladder */
.limit-ladder { display:grid; gap:10px; }
.limit-step {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px;
}
.limit-step .l { color:var(--ink-700); font-weight:700; }
.limit-step .r { color:var(--blue-500); font-weight:800; }

/* Stage flow (2段目) */
.nb-flow { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.nb-flow-step { text-align:center; }
.nb-flow-step .lbl { display:block; font-size:.82rem; font-weight:700; color:var(--ink-700); margin-bottom:8px; }
.nb-flow-step .sub { display:block; font-size:.74rem; color:var(--ink-400); margin-top:6px; }
.nb-flow .nb-mini { margin:0 auto; }
.nb-x-box {
  width:84px; height:84px; border-radius:var(--r-md); border:2px dashed #e2b3b3; background:#fdf2f2;
  display:grid; place-items:center; color:#d23b3b; margin:0 auto;
}
.nb-flow .arrow { color:var(--blue-400); flex:none; }

/* Tree (あなた -> A/B/C) */
.nb-tree { text-align:center; }
.nb-tree-top { display:inline-flex; flex-direction:column; align-items:center; gap:6px; }
.nb-node {
  display:inline-flex; flex-direction:column; align-items:center; gap:7px; font-size:.82rem; font-weight:700; color:var(--ink-700);
}
.nb-node .av { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--blue-50); color:var(--blue-500); }
.nb-node.you .av { background:linear-gradient(140deg,var(--blue-600),var(--blue-500)); color:#fff; }
.nb-children { display:flex; justify-content:center; gap:28px; margin-top:18px; position:relative; }
.nb-children::before { content:""; position:absolute; top:-12px; left:15%; right:15%; height:2px; background:var(--line); }
.nb-child { display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; }
.nb-child::before { content:""; position:absolute; top:-12px; width:2px; height:12px; background:var(--line); }
.nb-child .nb-mini--empty .nb-dot { background:#fff; border:1.5px dashed var(--line); }
.nb-child .av.done { background:#f0871f; color:#fff; }

/* Comparison table emphasis */
table.compare td:last-child, table.compare th:last-child { background:var(--blue-50); }
table.compare thead th:last-child { background:var(--blue-500); color:#fff; }
table.compare td:first-child { font-weight:700; color:var(--ink-900); background:var(--bg-soft); white-space:nowrap; }

/* Separated roles (紹介者 / 投資者) */
.role-card { border-top:4px solid var(--blue-500); }
.role-card.invest { border-top-color:#1aa86a; }
.role-card .role-h { font-size:1.2rem; font-weight:800; color:var(--ink-900); }
.role-card .role-h small { font-weight:600; color:var(--ink-400); font-size:.85rem; margin-left:6px; }
.role-tag { display:block; text-align:center; margin-top:18px; padding:11px; border-radius:var(--r-btn); font-weight:800; color:#fff; background:var(--blue-500); }
.role-card.invest .role-tag { background:#1aa86a; }

/* Summary box */
.nb-summary { background:var(--blue-700); color:#fff; border-radius:24px; padding:40px 44px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; }
.nb-summary .sum-icon { width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,.12); display:grid; place-items:center; color:#ffd54a; }
.nb-summary h3 { color:#fff; margin-bottom:14px; }
.nb-summary ul { list-style:none; padding:0; margin:0; }
.nb-summary li { display:flex; gap:11px; margin-bottom:10px; color:#dbe7f7; }
.nb-summary li:last-child { margin-bottom:0; }
.nb-summary svg { color:#7fffd4; flex:none; margin-top:3px; }

/* ---------- News / list items ---------- */
.news-list { list-style:none; padding:0; margin:0; }
.news-list li { padding: 0; border-bottom: 1px solid var(--line-2); }
.news-list a { display:flex; gap:20px; align-items:baseline; padding: 20px 4px; color: var(--ink-700); flex-wrap: wrap; }
.news-list a:hover { color: var(--blue-500); }
.news-date { color: var(--ink-400); font-size: .88rem; font-variant-numeric: tabular-nums; flex: none; }
.badge { display:inline-block; font-size:.72rem; font-weight:700; padding: 3px 10px; border-radius: var(--r-pill); background: var(--blue-50); color: var(--blue-500); flex:none; }
.badge.event { background: #e6f7f5; color: var(--teal-500); }
.badge.notice { background: #fff3e0; color: #b9770a; }

/* ---------- Seminar cards ---------- */
.seminar-card { display:flex; flex-direction:column; }
.seminar-card .when { color: var(--blue-500); font-weight: 700; font-size: .9rem; margin-bottom: 8px; display:flex; gap:8px; align-items:center; }
.seminar-card h3 { font-size: 1.15rem; }
.seminar-card .meta { font-size:.88rem; color: var(--ink-400); margin-top:auto; padding-top: 14px; }
.tag-online { background:#e6f7f5; color: var(--teal-500); }

/* ---------- Forms ---------- */
.form-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 40px; box-shadow: var(--shadow-md); }
.field { margin-bottom: 20px; }
.field label { display:block; font-weight:700; font-size:.92rem; margin-bottom: 8px; color: var(--ink-900); }
.field .req { color: #d23b3b; margin-left: 4px; }
.field input, .field select, .field textarea {
  width:100%; padding: 13px 15px; border:1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: inherit; font-size: 1rem; color: var(--ink-900); background:#fff; transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-450); outline: none; }
.field textarea { min-height: 130px; resize: vertical; }
.check-inline { display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color: var(--ink-500); }
.check-inline input { width:auto; margin-top:5px; }
.form-note { font-size: .85rem; color: var(--ink-400); }

/* benefit list under signup */
.benefit-list { list-style:none; padding:0; margin:0; }
.benefit-list li { display:flex; gap:12px; margin-bottom:16px; }
.benefit-list svg { flex:none; color: var(--teal-500); margin-top:3px; }
.benefit-list strong { display:block; color: var(--ink-900); }
.benefit-list span { color: var(--ink-500); font-size:.95rem; }

/* ---------- Company / generic prose ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.info-table { width:100%; border-collapse: collapse; }
.info-table th, .info-table td { padding: 16px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.info-table th { width: 200px; color: var(--ink-900); font-size:.95rem; }
.info-table td { color: var(--ink-500); }

/* mission values */
.mission-band { background: var(--blue-700); color:#fff; border-radius: 28px; padding: 60px; text-align:center; }
.mission-band .eyebrow { color: var(--blue-200); }
.mission-band h2 { color:#fff; font-size: clamp(1.6rem,3.2vw,2.3rem); max-width: 820px; margin-inline:auto; }
.mission-band p { color: rgba(255,255,255,.85); }

/* ---------- Footer ---------- */
.site-footer { background: var(--blue-700); color: #c3d3e8; padding: 72px 0 36px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand { color: #fff; }
.footer-brand p { color: #9fb4d1; font-size: .92rem; max-width: 300px; margin-top: 14px; }
.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; color: #c3d3e8; font-size: .94rem; padding: 5px 0; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; flex-wrap: wrap; gap: 12px; font-size: .85rem; color: #8aa2c2; }
.footer-bottom .legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: #8aa2c2; }
.footer-bottom a:hover { color: #fff; }
.footer-disclaimer { font-size: .8rem; color: #7791b3; line-height: 1.7; margin-top: 24px; max-width: 100%; }

/* ========================================================================
   Marketing / sales components (TOP page)
   ======================================================================== */
/* Empathy → solution transition band */
.solve-band {
  margin-top: 34px; display: flex; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color: #fff; border-radius: var(--r-lg); padding: 22px 28px; text-align: center;
  box-shadow: var(--shadow-md);
}
.solve-band .solve-text { font-size: 1.18rem; font-weight: 700; }
.solve-band strong { font-weight: 800; }
.solve-band svg { flex: none; opacity: .9; }

/* Before / After differentiation cards */
.vs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; max-width: 920px; margin-inline: auto; }
.vs-col {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.vs-col.now { background: var(--bg-soft); }
.vs-col.veltra { border: 2px solid var(--blue-500); box-shadow: var(--shadow-md); }
.vs-col .vs-h { font-size: 1.18rem; font-weight: 800; color: var(--ink-900); margin-bottom: 18px; }
.vs-col.veltra .vs-h { color: var(--blue-600); }
.vs-badge {
  position: absolute; top: -13px; right: 22px; background: var(--blue-500); color: #fff;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em; padding: 5px 14px; border-radius: var(--r-pill);
  box-shadow: 0 6px 14px rgba(47,107,224,.3);
}
.vs-list { list-style: none; padding: 0; margin: 0 0 4px; }
.vs-list li { display: flex; gap: 12px; margin-bottom: 14px; color: var(--ink-700); font-size: .98rem; line-height: 1.6; }
.vs-list li:last-child { margin-bottom: 0; }
.vs-list svg { flex: none; margin-top: 3px; }
.vs-col.now .vs-list svg { color: var(--ink-400); }
.vs-col.veltra .vs-list svg { color: var(--teal-500); }
.vs-col.veltra .btn { width: 100%; margin-top: 22px; }

/* Crypto card teaser (uses the card hero render as a section visual) */
.card-feature { align-items: center; }
.card-figure {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); background: var(--blue-50);
}
.card-figure img { width: 100%; height: auto; display: block; }
.soon-tag {
  display: inline-block; margin-left: 8px; background: var(--blue-100); color: var(--blue-600);
  font-size: .7rem; font-weight: 800; padding: 2px 10px; border-radius: var(--r-pill);
  letter-spacing: .02em; vertical-align: middle;
}

/* Persistent mobile signup bar (shown ≤720px) */
.mobile-cta { display: none; }

/* ---------- Market price ticker (auto-scrolling marquee) ---------- */
.ticker-section { padding-bottom: 56px; }
.ticker-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.ticker-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; }
.ticker-head p { color: var(--ink-500); font-size: 1.02rem; margin: 0; }
.ticker {
  position: relative; overflow: hidden; width: 100%;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--blue-50));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track {
  display: flex; width: max-content; gap: 14px; padding: 16px 7px;
  animation: ticker-scroll 48s linear infinite; will-change: transform;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 11px; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 18px 9px 10px; box-shadow: var(--shadow-sm);
}
.ticker-item .coin { box-shadow: 0 2px 6px rgba(24,36,56,.12); }
.tk-meta { display: flex; flex-direction: column; line-height: 1.15; }
.tk-sym { font-weight: 800; color: var(--ink-900); font-size: .95rem; letter-spacing: .01em; }
.tk-name { font-size: .72rem; color: var(--ink-400); font-weight: 600; }
.tk-price { font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; font-size: .96rem; }
.tk-change {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: .86rem;
  font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: var(--r-pill);
}
.tk-change .tk-caret { flex: none; }
.tk-change.up { color: var(--teal-500); background: #e6f7f2; }
.tk-change.down { color: #e0414b; background: #fdecee; }

/* Slim bar variant — sits at the very top (first view), under the header */
.ticker--bar {
  border-top: 0; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--blue-50), #fff);
}
.ticker--bar .ticker-track { padding: 9px 7px; gap: 9px; animation-duration: 42s; }
.ticker--bar .ticker-item { padding: 6px 14px 6px 7px; gap: 9px; box-shadow: var(--shadow-sm); }
.ticker--bar .ticker-item .coin { width: 22px !important; height: 22px !important; font-size: 10px !important; }
.ticker--bar .tk-name { display: none; }            /* keep the top bar slim */
.ticker--bar .tk-sym { font-size: .88rem; }
.ticker--bar .tk-price { font-size: .9rem; }
.ticker--bar .tk-change { font-size: .82rem; padding: 2px 8px; }

/* Respect reduced-motion: stop the marquee, allow manual horizontal scroll */
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ticker-track { animation: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-40 { margin-top: 40px; }
.hide-mobile { display: initial; }

/* ---------- Animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px) {
  /* Hero stacks: headline + CTA first, image as a banner below */
  .hero { display: flex; flex-direction: column; }
  .hero::after { display: none; }
  .hero-inner { order: 1; display: block; min-height: 0; padding: 52px 0 8px; }
  .hero-text { max-width: none; }
  .hero-figure { order: 2; position: static; width: 100%; margin-top: 28px; }
  .hero-bg { height: auto; aspect-ratio: 16 / 10; object-position: 72% center; }
  .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .split, .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 36px; }
  .feature-row.reverse .feature-visual { order: 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Collapse to hamburger before the horizontal nav can overflow */
@media (max-width: 1080px) {
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px;
    transform: translateY(-120%); transition: transform .28s ease; box-shadow: var(--shadow-md); margin: 0;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 14px 8px; border-radius: 8px; font-size: 1rem; white-space: normal; }
  .nav-cta { margin-left: auto; }
  /* Once the nav collapses to a hamburger the header row is tight —
     the always-visible footer switcher takes over on tablet/phone. */
  .lang-switch--header { display: none; }
  .nav-toggle { display: block; }
  body.nav-open { overflow: hidden; }
}

/* ---- Tablet / large phone ---- */
@media (max-width: 720px) {
  :root { --gutter: 20px; }

  /* Tighter vertical rhythm so sections don't feel stretched on a phone */
  .section { padding: 56px 0; }
  .section--tight { padding: 44px 0; }
  .section-head { margin-bottom: 36px; }
  .grid { gap: 18px; }

  /* Stack every multi-column grid to a single readable column */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 24px; }

  /* Roomy panels shrink their inner padding */
  .cta-band { padding: 44px 24px; border-radius: 22px; }
  .mission-band, .form-card { padding: 30px 22px; }
  .nb-summary { grid-template-columns: 1fr; gap: 18px; padding: 32px 24px; text-align: center; }
  .nb-summary .sum-icon { margin: 0 auto; }
  .nb-summary li { text-align: left; }
  .notice { padding: 22px 22px; }
  .card { padding: 24px; }

  /* Typography: a touch larger line-height, balanced lead width */
  body { line-height: 1.8; }
  .hero .lead, .page-hero p, .lead { font-size: 1.06rem; }
  .section-head p { font-size: 1rem; }

  /* Hide the secondary header button; the hamburger holds the rest */
  .nav-cta .btn--ghost { display: none; }
  .nav-cta .btn--primary { padding: 10px 16px; font-size: .9rem; }

  /* Bigger, easier tap targets; primary CTAs go full-width */
  .btn { padding: 14px 22px; min-height: 48px; }
  .btn--lg { padding: 16px 26px; font-size: 1.02rem; }
  .btn-row .btn { flex: 1 1 auto; }
  .hero .btn-row .btn, .cta-band .btn-row .btn { width: 100%; flex-basis: 100%; }

  /* Hero: calmer spacing, let the headline wrap naturally */
  /* Phone first view — image (with slogan) + a single main CTA.
     Order on screen: Hero image+slogan → CTA → headline → (lead → trust). */
  .hero-figure { order: 1; margin-top: 0; position: relative; }
  .hero-bg { aspect-ratio: 16 / 11; object-fit: cover; object-position: 64% 46%; }
  /* Slogan overlaid on the image, with a soft white base for legibility
     that also blends the banner into the content below */
  .hero-figure::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
    background: linear-gradient(180deg, rgba(247,250,255,0) 0%,
      rgba(247,250,255,.55) 58%, rgba(247,250,255,.92) 90%, var(--bg) 100%);
    pointer-events: none;
  }
  .hero-slogan {
    display: block; position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 2;
    margin: 0; font-size: clamp(1.5rem, 7vw, 1.95rem); font-weight: 800; line-height: 1.32;
    color: var(--blue-700); letter-spacing: .01em;
    text-shadow: 0 1px 12px rgba(255,255,255,.85), 0 1px 2px rgba(255,255,255,.9);
  }

  .hero-inner { order: 2; padding: 16px 0 4px; }
  .hero-text { display: flex; flex-direction: column; }
  .hero-text .hero-pill { display: none; }          /* slogan replaces the pill */
  .hero-text .btn-row { order: 1; margin: 0 0 4px; }  /* single main CTA, right under image */
  .hero-text h1 { order: 2; margin: 18px 0 .35em; }
  .hero-text .lead { order: 3; margin: 0; }
  .hero-text .hero-reassure { order: 4; margin: 14px 0 0; }
  .hero-text .trust-row { order: 5; gap: 12px 18px; }
  .hero h1 { font-size: clamp(1.8rem, 7.4vw, 2.3rem); line-height: 1.28; }
  .hero .lead { font-size: 1.02rem; }
  /* One CTA in the first view: drop the secondary link and the header button */
  .hero .btn-row .btn--ghost { display: none; }
  .nav-cta .btn--primary { display: none; }

  /* Feature visuals don't need the tall min-height on a phone */
  .feature-visual { min-height: 0; padding: 24px; }
  .feature-row + .feature-row { margin-top: 48px; }

  /* Steady, readable sub-page hero */
  .page-hero { padding: 48px 0 40px; }

  /* Marketing sections adapt for phones */
  .pc-br { display: none; }
  .vs-compare { grid-template-columns: 1fr; gap: 18px; }
  .vs-badge { right: 18px; }
  .solve-band { flex-direction: column; gap: 10px; padding: 20px 22px; margin-top: 26px; }
  .solve-band .solve-text { font-size: 1.06rem; }
  .solve-band svg { transform: rotate(90deg); }
  .hero-reassure { margin: -4px 0 18px; gap: 4px 14px; }

  /* Signup bar pinned to the bottom on phones. It stays tucked away while the
     hero's own CTA is on screen (set by JS) so the first view shows one CTA,
     then slides up once the user scrolls past the hero. */
  .mobile-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(20,37,62,.08);
    transition: transform .3s ease;
  }
  .mobile-cta.is-tucked { transform: translateY(140%); }
  .mobile-cta .btn { width: 100%; min-height: 50px; font-size: 1.02rem; box-shadow: 0 8px 20px rgba(47,107,224,.28); }
  /* Reserve space so the fixed bar never hides the footer's last line */
  body { padding-bottom: 76px; }
  body.nav-open .mobile-cta { display: none; }
}

/* ---- Small phone ---- */
@media (max-width: 480px) {
  .section { padding: 48px 0; }
  .container { padding-inline: var(--gutter); }

  .footer-top { grid-template-columns: 1fr; gap: 26px; }
  .footer-brand p { max-width: none; }
  .info-table th { width: 116px; font-size: .9rem; }
  .info-table th, .info-table td { padding: 14px 6px; }

  /* Keep the two-up mini metrics legible rather than cramped */
  .mini-row { gap: 10px; }
  .mini-stat { padding: 12px 13px; }

  .cta-band { padding: 36px 20px; }
  .mission-band { padding: 28px 20px; }
  .card { padding: 22px; }

  /* News rows: date + badge on their own line above the title */
  .news-list a { gap: 6px 12px; padding: 16px 2px; }

  /* Nine Box diagram scales down to avoid edge crowding */
  .ninebox { max-width: 300px; gap: 8px; }
  .nb-cell svg { width: 28px; height: 28px; }
}