/* ============================================================
   Asaura Design System — v1
   Governs the Home page in step one; will govern the rest of
   the site and the app in step two. Do not add one-off styles
   outside this file — extend the tokens or components here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap');

:root {
  /* ── Color ──────────────────────────────────────────────── */
  --page:          #f4f3f3;
  --ink:           #1a1c2e;
  --ink-soft:      rgba(26, 28, 46, 0.70);
  --ink-muted:     rgba(26, 28, 46, 0.55);
  --ink-hair:      rgba(26, 28, 46, 0.10);

  --action:        #ff966b;
  --action-hover:  #ff8552;
  --action-soft:   #fff1e9;

  --calm:          #83a6ff;
  --calm-soft:     #eef2ff;

  --panel-cream:   #ece9e3;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-s:      12px;
  --radius-m:      20px;
  --radius-l:      28px;
  --radius-pill:   999px;

  /* ── Spacing scale ──────────────────────────────────────── */
  --space-1:       8px;
  --space-2:       16px;
  --space-3:       24px;
  --space-4:       40px;
  --space-5:       64px;
  --space-6:       96px;

  /* ── Typography ─────────────────────────────────────────── */
  --font:          "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:       clamp(2.75rem, 6vw, 4.5rem);
  --fs-h2:         clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:         1.5rem;
  --fs-body:       1.0625rem;
  --fs-small:      0.9375rem;

  --fw-regular:    400;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  --lh-tight:      1.1;
  --lh-snug:       1.35;
  --lh-body:       1.6;

  /* ── Layout — matches the app's --content-max token ────── */
  --content-max:   1600px;
  --content-pad:   clamp(1.5rem, 4vw, 4rem);
  --text-max:      68ch;

  /* ── Elevation ──────────────────────────────────────────── */
  --shadow-soft:   0 4px 20px rgba(26, 28, 46, 0.06);
  --shadow-focus:  0 0 0 3px rgba(255, 150, 107, 0.35);
}

/* ── Reset ──────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

/* ── Primitives ─────────────────────────────────────────── */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
}

/* Rounded, filled, generously padded blocks. Alternate tint variants
   down the page. */
.panel {
  border-radius: var(--radius-l);
  padding: clamp(var(--space-4), 5vw, var(--space-5));
  background: var(--panel-cream);
}
.panel--cream { background: var(--panel-cream); }
.panel--coral { background: var(--action-soft); }
.panel--blue  { background: var(--calm-soft); }

/* Vertical rhythm utility — flex+gap so children with `margin: 0`
   (like .text, .h-2) don't cancel the spacing between siblings. */
.stack, .stack-lg, .stack-xl {
  display: flex;
  flex-direction: column;
}
.stack    { gap: var(--space-3); }
.stack-lg { gap: var(--space-4); }
.stack-xl { gap: var(--space-5); }

/* Type helpers */
.eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.h-hero {
  font-size: var(--fs-hero);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.h-2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.h-3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: pretty;
}

.lede {
  font-size: 1.25rem;
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

.text {
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

/* ── Buttons ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, transform .1s ease,
              box-shadow .15s ease;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn--primary {
  background: var(--action);
  color: #fff;
}
.btn--primary:hover { background: var(--action-hover); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--page); }

.btn--link {
  background: transparent;
  color: var(--ink);
  padding: 0.5rem 0;
  border-radius: 0;
  font-weight: var(--fw-semibold);
}
.btn--link:hover { color: var(--action); }

/* Grouped button row used under headings */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* ── Header + Footer ────────────────────────────────────── */

.site-header {
  padding: var(--space-3) 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brand {
  font-weight: var(--fw-extrabold);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.nav {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}
.nav a:hover { color: var(--action); }

.site-footer {
  padding: var(--space-5) 0 var(--space-4);
  color: var(--ink-muted);
  font-size: var(--fs-small);
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Page rhythm ────────────────────────────────────────── */

.section {
  padding: var(--space-4) 0;
}
.section + .section { padding-top: 0; }

/* ── Home-specific layouts (still built on tokens) ──────── */

.hero {
  padding: clamp(var(--space-4), 8vw, var(--space-6)) 0
           clamp(var(--space-4), 6vw, var(--space-5));
}
.hero .stack > * + * { margin-top: var(--space-3); }
.hero .btn-row { margin-top: var(--space-4); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; }
}

/* A tinted "help card" used inside the two-of-us section */
.help-card {
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-m);
  padding: clamp(var(--space-3), 3vw, var(--space-4));
}
.help-card .h-3 { margin-bottom: var(--space-2); }

/* Two-up bottom row (Start free + Membership price) */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 800px) {
  .split-row { grid-template-columns: 1fr; }
}
.split-row .panel { height: 100%; }

.price-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.price-line .price {
  font-size: 2.5rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
}
.price-line .price-tail {
  color: var(--ink-soft);
  font-weight: var(--fw-semibold);
}

/* ═══════════════════════════════════════════════════════════════
   Pill navigation
   Floats near the top; rounded pill container with logo left,
   center links, right-side actions.
   ═══════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 1.25rem;
  z-index: 100;
  padding: 0 var(--content-pad);
  pointer-events: none; /* let the sticky bar sit "over" content without
                           blocking clicks in the empty gutters */
}
.site-header .pill-nav { pointer-events: auto; }

.pill-nav {
  /* Compact centered floating pill — matches the Craft reference. */
  max-width: 780px;
  width: max-content;
  margin: 0 auto;
  padding: 0.5rem 0.65rem 0.5rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  /* Frosted glass — semi-transparent so the gradient behind reads
     through, plus backdrop-blur/saturate for the crisp Apple-ish
     glass feel. */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 10px 30px rgba(26, 28, 46, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.pill-nav .brand {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.15rem 0.5rem 0.15rem 0;
}

.pill-nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pill-nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color .15s ease;
}
.pill-nav-links a:hover { color: var(--action); }

.pill-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pill-nav-actions .login-link {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  transition: color .15s ease, background .15s ease;
}
.pill-nav-actions .login-link:hover { color: var(--action); }

.pill-nav-actions .btn--primary {
  padding: 0.7rem 1.15rem;
  font-size: 0.95rem;
}

@media (max-width: 760px) {
  .pill-nav-links { display: none; }
  .pill-nav { padding-left: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO with mesh-gradient background + framed screenshot bleed
   All positions / opacities are tuned via custom properties so
   the gradient is easy to adjust without touching the shorthand.
   ═══════════════════════════════════════════════════════════════ */

.mesh-hero {
  --mesh-coral-x:      12%;      /* horizontal position of coral bloom */
  --mesh-coral-y:      8%;       /* vertical position of coral bloom */
  --mesh-coral-a:      0.18;     /* coral opacity (0–1) */
  --mesh-coral-size-x: 55%;
  --mesh-coral-size-y: 45%;

  --mesh-blue-x:       88%;
  --mesh-blue-y:       18%;
  --mesh-blue-a:       0.20;
  --mesh-blue-size-x:  60%;
  --mesh-blue-size-y:  50%;

  --mesh-bloom2-x:     50%;      /* soft warm center bloom */
  --mesh-bloom2-y:     92%;
  --mesh-bloom2-a:     0.10;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      ellipse var(--mesh-coral-size-x) var(--mesh-coral-size-y)
      at var(--mesh-coral-x) var(--mesh-coral-y),
      rgba(255, 150, 107, var(--mesh-coral-a)),
      rgba(255, 150, 107, 0) 65%
    ),
    radial-gradient(
      ellipse var(--mesh-blue-size-x) var(--mesh-blue-size-y)
      at var(--mesh-blue-x) var(--mesh-blue-y),
      rgba(131, 166, 255, var(--mesh-blue-a)),
      rgba(131, 166, 255, 0) 65%
    ),
    radial-gradient(
      ellipse 70% 40%
      at var(--mesh-bloom2-x) var(--mesh-bloom2-y),
      rgba(255, 189, 158, var(--mesh-bloom2-a)),
      rgba(255, 189, 158, 0) 70%
    ),
    var(--page);
  padding: clamp(1.5rem, 4vw, 3rem) 0 0;
}

.mesh-hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--content-pad) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.mesh-hero .h-hero { text-wrap: balance; }
.mesh-hero .lede {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.2rem;
}
.mesh-hero .btn-row { margin-top: var(--space-2); justify-content: center; }

/* Framed app-window screenshot, anchored to the bottom of the hero,
   cropped so it bleeds past the visible edge — top rounded corners
   only, soft drop shadow. */
.hero-window {
  --window-height: clamp(560px, 70vh, 820px);
  --window-max:    1240px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  width: min(var(--window-max), calc(100% - 2 * var(--content-pad)));
  height: var(--window-height);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 -2px 0 rgba(26, 28, 46, 0.04),
    0 24px 60px rgba(26, 28, 46, 0.18),
    0 6px 16px rgba(26, 28, 46, 0.08);
  position: relative;
}

/* Faux window chrome (a subtle top bar so the frame reads as an app
   window even without OS-native controls). */
.hero-window::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  background: rgba(244, 243, 243, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(26, 28, 46, 0.06);
  z-index: 2;
}
.hero-window::after {
  content: "";
  position: absolute;
  top: 12px; left: 16px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f;
  z-index: 3;
}

/* The screenshot image bleeds past the bottom edge — we anchor it to
   the TOP of the frame and let the frame's fixed height crop the rest,
   which shows the cards region and hides everything below. */
.hero-window img {
  position: absolute;
  top: 34px;                 /* below the fake chrome bar */
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top;
  z-index: 2;                /* sits above the placeholder */
}

/* Placeholder shown if the screenshot file is missing — a warm cream
   fill with a note, so the layout doesn't collapse. */
.hero-window .hero-window-placeholder {
  position: absolute;
  inset: 34px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 0.95rem;
  background:
    linear-gradient(180deg, rgba(255,150,107,0.05), rgba(131,166,255,0.05)),
    var(--page);
  z-index: 1;
}

@media (max-width: 640px) {
  .hero-window { --window-height: clamp(360px, 55vh, 520px); }
}

/* ═══════════════════════════════════════════════════════════════
   Tool cards (used on the Tools page and reusable elsewhere)
   Same shape as the app's workshop cards: soft rounded white panel
   with a colored top-strip accent per section. Grain overlay via
   SVG data-URI so the color reads warm.
   ═══════════════════════════════════════════════════════════════ */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.tool-card {
  background: #ffffff;
  border-radius: var(--radius-l);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
  color: inherit;
  border: none;
}
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(26, 28, 46, 0.10);
}
.tool-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.tool-card-accent {
  height: 14px;
  width: 100%;
  background-color: var(--card-accent, #ffe4d6);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 120px 120px;
  background-blend-mode: multiply;
}
.tool-card.accent-triage   .tool-card-accent { --card-accent: #ffe4d6; }
.tool-card.accent-wind     .tool-card-accent { --card-accent: #83a6ff; }
.tool-card.accent-patterns .tool-card-accent { --card-accent: #ff966b; }

.tool-card-inner {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tool-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  min-height: 24px;
}

.tool-card-category {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.tool-card-tier {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--action-soft);
  color: var(--action);
}

.tool-card-name {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0.5rem 0 0.75rem;
  color: var(--ink);
}

.tool-card-brief {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 auto;
  text-wrap: pretty;
}

.tool-card-action {
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--action);
  margin-top: 1.25rem;
}

/* Section header pair used on the Tools page (label + one-line sub). */
.tools-section { margin-bottom: 3rem; }
.tools-section-head { margin-bottom: 1.25rem; }
.tools-section-mark {
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.25rem;
}
.tools-section-sub {
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Reusable "hero-lite" — a small cream hero for the sub-pages
   that don't need the full mesh + framed screenshot treatment.
   ═══════════════════════════════════════════════════════════════ */

.hero-lite {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.hero-lite-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.hero-lite .h-hero { text-wrap: balance; max-width: 22ch; }
.hero-lite .lede { max-width: 52ch; }

/* ═══════════════════════════════════════════════════════════════
   Two-column list panels (Who this is for)
   ═══════════════════════════════════════════════════════════════ */

.two-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 800px) {
  .two-lists { grid-template-columns: 1fr; }
}
.list-panel {
  background: #ffffff;
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-soft);
}
.list-panel h3 {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.35rem;
  margin: 0 0 1rem;
  color: var(--ink);
}
.list-panel--yes h3 { color: var(--action); }
.list-panel--no h3 { color: var(--ink-muted); }
.list-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.list-panel li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink);
  line-height: 1.5;
  text-wrap: pretty;
}
.list-panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  color: var(--action);
}
.list-panel--no li::before { color: var(--ink-muted); }

/* ═══════════════════════════════════════════════════════════════
   Membership: three-item merger row
   ═══════════════════════════════════════════════════════════════ */

.merger-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) {
  .merger-grid { grid-template-columns: 1fr; }
}
.merger-item {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-l);
}
.merger-item--coral { background: var(--action-soft); }
.merger-item--blue  { background: var(--calm-soft); }
.merger-item--cream { background: var(--panel-cream); }
.merger-item h3 {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.merger-item .merger-tag {
  color: var(--action);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 0.9rem;
}
.merger-item p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════
   Membership: price panel + no-risk block + FAQ
   ═══════════════════════════════════════════════════════════════ */

.price-panel {
  background: #ffffff;
  border-radius: var(--radius-l);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.price-panel .price-big {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(2.75rem, 6vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0.5rem 0;
}
.price-panel .price-sub {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  font-size: 1rem;
}
.price-panel .btn { margin-top: 0.5rem; }

.norisk {
  background: var(--calm-soft);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.norisk h3 {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
  color: var(--ink);
}
.norisk p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 62ch;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq details {
  background: #ffffff;
  border-radius: var(--radius-m);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-soft);
}
.faq summary {
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--action);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Standard content wrapper for sub-pages (matches .container). */
.page-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}