/* =========================================================================
   RequestMe — Marketing site layout
   Page-specific structure that sits on top of tokens/base/components.
   ========================================================================= */

/* ---- Reveal-on-scroll (respects prefers-reduced-motion via base.css) ------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--duration-marketing) var(--ease-standard), transform var(--duration-marketing) var(--ease-standard); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---- Generic grid widths --------------------------------------------------- */
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---- Hero -------------------------------------------------------------------
   Centred copy sitting over a full-width "transformation stage". The stage
   reads left to right — today's mess, a funnel, the tracked request — and the
   product column is given roughly twice the width of the mess column so the
   preview stays the focal point rather than competing with the illustration. */
.hero { padding-block: var(--space-20) var(--space-16); overflow: clip; }
.hero-copy { max-width: 820px; margin-inline: auto; text-align: center; }
.hero-copy h1 { margin-block: var(--space-5) var(--space-5); }
.hero-copy p.lead { max-width: 54ch; margin-inline: auto; }
.hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); justify-content: center; }
.hero-microcopy { margin-top: var(--space-4); margin-inline: auto; }
.hero-visual { position: relative; }
.hero-visual .doc-mock { position: relative; z-index: 2; }
.hero-glow {
  position: absolute; inset: -20% -14%; z-index: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--action-primary) 22%, transparent), transparent 70%);
  /* No blur filter here: a filtered ancestor becomes the containing block for
     any position:fixed descendant, and this sits inside the hero where the
     mockup and its glow overlap. The gradient is already soft enough. */
  pointer-events: none;
}

/* Narrower than the page so the composition has air around it, and sized so
   the preview card fills its column exactly — no dead gap between the funnel
   and the card it points into. */
.hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) 108px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  max-width: 1180px;
  margin: var(--space-16) auto 0;
}
.stage-label {
  font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-tertiary);
  margin-bottom: var(--space-5); text-align: center;
}
.stage-label--brand { color: var(--action-primary); }

/* ---- Hero stage: the "before" pile ------------------------------------------
   Readable enough to scan in a second, but deliberately capped below the
   preview: dashed borders, no brand blue anywhere, and a soft shadow rather
   than the card's elevated one. The only saturated colour is the amber
   timestamp — the point being that the request has been sitting for days. */
.stage-before { align-self: stretch; display: flex; flex-direction: column; }
/* space-around, not space-between, and the reason is exact: it gives every
   item equal space on both sides, so for n items the centre of item i lands at
   (2i+1)/2n of the column — for four cards that is 12.5%, 37.5%, 62.5%, 87.5%.
   Those are precisely the y positions the funnel curves leave from in the
   120x320 viewBox (40, 120, 200, 280), so the lines now start at the cards.
   space-between put the first card's centre at roughly 8%, which is why the
   curves appeared to sprout from the gaps between cards rather than from them.
   It also tightens the gaps from F/3 to F/4, so the pile reads as a stack
   rather than four floating fragments. */
.chaos { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: var(--space-3); padding: 6px; }
.chaos-item {
  background: var(--card-bg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-secondary);
  box-shadow: var(--shadow-soft);
}
.chaos-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.chaos-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); }
.chaos-time { font-size: 10px; color: var(--status-waiting-fg); white-space: nowrap; font-weight: 500; }
.chaos-bubble {
  background: var(--bg-fill); color: var(--text-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: 10px 10px 10px 2px; padding: 6px 10px; width: fit-content; max-width: 100%;
}
.chaos-bubble + .chaos-bubble { margin-top: 4px; }
.chaos-bubble--out { border-radius: 10px 10px 2px 10px; margin-left: auto; color: var(--text-tertiary); }
.chaos-lines { display: flex; flex-direction: column; gap: 5px; }
.chaos-lines i { height: 5px; border-radius: 3px; background: var(--border-strong); }
.chaos-lines i:nth-child(1) { width: 88%; }
.chaos-lines i:nth-child(2) { width: 62%; }
.chaos-lines i:nth-child(3) { width: 76%; }
.chaos-sign { width: 84px; height: 20px; margin-top: 8px; fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-linecap: round; }
.chaos-files { display: flex; flex-wrap: wrap; gap: 4px; }
.chaos-file { border: 1px solid var(--border-hairline); border-radius: var(--radius-s); background: var(--bg-fill); padding: 3px 7px; font-size: 10px; color: var(--text-secondary); }
.chaos-who { color: var(--text-secondary); font-weight: 600; }
.chaos-avatars { display: flex; gap: 5px; margin-top: 7px; }
.chaos-avatars span {
  width: 20px; height: 20px; border-radius: 50%; border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-secondary);
}

/* ---- Hero stage: the funnel -------------------------------------------------
   Many dashed streams in, one solid line out — the metaphor carries itself,
   so there is no arrowhead or label to explain it. */
.stage-funnel { align-self: stretch; display: flex; flex-direction: column; min-height: 260px; }
/* Pulled over the grid gap so the trunk actually touches the preview card
   instead of stopping a gap short of it. */
.funnel-body { position: relative; flex: 1; margin-right: calc(var(--space-6) * -1); }
.funnel-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.funnel-line { fill: none; stroke: var(--action-primary); stroke-width: 1.5; stroke-linecap: round; opacity: 0.42; }
.funnel-trunk { fill: none; stroke: var(--action-primary); stroke-width: 2.25; stroke-linecap: round; opacity: 0.8; }
/* 74 of the 120-unit viewBox, matching where the curves meet the trunk. A CSS
   circle rather than an SVG one because the SVG is unevenly scaled. */
.funnel-node {
  position: absolute; left: 61.67%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--action-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--action-primary) 14%, transparent);
}
.funnel-down { display: none; color: var(--action-primary); }

/* ---- Hero stage: the preview card, the focal point --------------------------- */
.stage-after .hero-visual { max-width: 100%; }
.hero-visual .doc-mock { padding: var(--space-10); }

/* ---- Hero stage: Create → Route → Approve → Track ---------------------------- */
.flow-rail { position: relative; margin-top: var(--space-16); }
.rail-line, .rail-flow { position: absolute; top: 26px; left: 12.5%; right: 12.5%; }
.rail-line { height: 2px; background: var(--border-hairline); border-radius: 2px; z-index: 0; }
/* Zero height and z-index above the steps, so the travelling pulse passes over
   the station discs instead of vanishing behind them. */
.rail-flow { height: 0; z-index: 2; }
.rail-pulse {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--action-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--action-primary) 16%, transparent),
              0 0 18px 3px color-mix(in srgb, var(--action-primary) 45%, transparent);
}
/* No column gap: the pulse track is pinned to 12.5%/87.5%, which is only the
   exact centre of the first and last of four columns when they are flush. */
.rail-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.rail-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding-inline: var(--space-3); }
.rail-dot {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-page); border: 1px solid var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--action-primary); box-shadow: var(--shadow-soft);
}
.rail-dot .icon { width: 22px; height: 22px; }
.rail-name { font-weight: 600; font-size: var(--text-body-s); color: var(--text-primary); }
.rail-sub { font-size: var(--text-caption); color: var(--text-tertiary); }

@media (max-width: 1180px) {
  .hero-stage { grid-template-columns: minmax(0, 0.62fr) 84px minmax(0, 1fr); gap: var(--space-4); }
  .stage-funnel { min-height: 220px; }
  .funnel-body { margin-right: calc(var(--space-4) * -1); }
  .hero-visual .doc-mock { padding: var(--space-8); }
}
@media (max-width: 920px) {
  /* Stacked: the story now reads top to bottom, so the funnel collapses to a
     single downward arrow and the pile becomes a compact two-up grid. */
  .hero { padding-block: var(--space-16) var(--space-12); }
  .hero-stage { grid-template-columns: 1fr; gap: var(--space-8); margin-top: var(--space-12); }
  .stage-before { display: block; }
  .chaos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .stage-funnel { min-height: 0; }
  .funnel-spacer { display: none; }
  /* The curves and their merge point only make sense pointing sideways. */
  .funnel-body { display: flex; align-items: center; justify-content: center; margin-right: 0; }
  .funnel-svg, .funnel-node { display: none; }
  .funnel-down { display: flex; }
  .funnel-down .icon { width: 30px; height: 30px; }
  .stage-after .stage-label { margin-bottom: var(--space-4); }
}
@media (max-width: 620px) {
  .chaos { grid-template-columns: 1fr; }
  /* Two-up steps: a horizontal rail through four columns is unreadable this
     narrow, so the connecting line and its pulse are dropped rather than
     squeezed into something misleading. */
  .rail-line, .rail-flow { display: none; }
  .rail-steps { grid-template-columns: 1fr 1fr; row-gap: var(--space-8); }
  .flow-rail { margin-top: var(--space-12); }
}

/* ---- Problem grid ------------------------------------------------------------ */
#problem-grid .card h3 { font-size: var(--text-heading-m); margin-bottom: var(--space-2); font-family: var(--font-serif); font-weight: 500; }
#problem-grid .card p { color: var(--text-secondary); font-size: var(--text-body-s); }

/* ---- How it works steps ------------------------------------------------------- */
/* Two columns: the steps read as a list, the stage beside them shows the
   product doing what the step describes. The old single 720px column left
   roughly half the section empty on a wide screen. */
.hiw-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }

.steps-list { display: flex; flex-direction: column; gap: var(--space-2); }
.step-item {
  display: flex; gap: var(--space-5); align-items: flex-start; width: 100%;
  text-align: left; padding: var(--space-5); border-radius: var(--radius-m);
  border: 1px solid transparent;
  /* The left rail is always present but transparent, so activating a step
     tints it instead of adding width and shunting the text sideways. */
  border-left: 3px solid transparent;
  /* opacity and transform are re-declared here on purpose. [data-reveal] sets
     its own transition for those two, and this rule has equal specificity and
     comes later — so listing only the colours would have silently dropped the
     scroll-reveal fade and made the steps pop in. */
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              opacity var(--duration-marketing) var(--ease-standard),
              transform var(--duration-marketing) var(--ease-standard);
}
.step-item:hover { background: var(--bg-fill); }
.step-item.is-active { background: var(--action-primary-tint); border-left-color: var(--action-primary); }
.step-num {
  font-family: var(--font-serif); font-size: 1.75rem; line-height: 1; width: 48px; flex-shrink: 0;
  color: var(--text-tertiary); transition: color var(--duration-base) var(--ease-standard);
}
.step-item.is-active .step-num { color: var(--action-primary); }
.step-body { display: block; }
.step-title { display: block; font-family: var(--font-serif); font-weight: 500; font-size: var(--text-heading-l); margin-bottom: var(--space-2); }
.step-text { display: block; color: var(--text-secondary); font-size: var(--text-body-s); }

/* ---- How it works: the product stage ------------------------------------- */
.hiw-stage {
  position: relative; background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-elevated);
  padding: var(--space-8);
  /* A fixed height, because the three panels are stacked on top of each other
     and differ in length — without it the card would jump size on every
     change, which is the one thing that would make this feel cheap. */
  min-height: 372px;
}
.hiw-panel {
  position: absolute; inset: var(--space-8);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard);
}
.hiw-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }

.hiw-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.hiw-field { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px dashed var(--border-hairline); font-size: var(--text-body-s); }
.hiw-flabel { color: var(--text-secondary); }
.hiw-fvalue { font-weight: 600; text-align: right; }
.hiw-caret { display: inline-block; width: 2px; height: 1em; background: var(--action-primary); margin-left: 3px; vertical-align: -2px; }
.hiw-attach { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-hairline); border-radius: var(--radius-s); font-size: var(--text-caption); color: var(--text-secondary); }
.hiw-attach .icon { color: var(--action-primary); }

.hiw-sig { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--border-hairline); }
.hiw-sig-body { display: flex; flex-direction: column; }
.hiw-sig-body b { font-size: var(--text-body-s); }
.hiw-sig-body small { color: var(--brass-600); font-size: var(--text-caption); font-weight: 500; }
.hiw-note { margin-top: var(--space-5); font-size: var(--text-body-s); color: var(--text-secondary); }

.hiw-amount { font-family: var(--font-serif); font-size: var(--text-display-m); margin-top: var(--space-2); }
.hiw-sub { color: var(--text-secondary); font-size: var(--text-body-s); margin-top: var(--space-2); }
.hiw-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.hiw-actions .btn { pointer-events: none; }
/* Reject is deliberately the quietest of the three — a text link rather than
   a button. It is a real outcome that must be visible, but it is the rarest
   one, and giving it equal weight would make the screen read as hostile. */
.hiw-reject { font-size: var(--text-caption); font-weight: 600; color: var(--status-rejected-fg); }
.hiw-approved {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin-top: var(--space-6); height: 40px; border-radius: var(--radius-s);
  background: var(--status-approved-bg); color: var(--status-approved-fg);
  font-weight: 600; font-size: var(--text-body-s); opacity: 0;
}

@media (max-width: 980px) {
  .hiw-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  /* Stage first: the picture is faster to read than the list, and on a phone
     it is what makes the three labels below it make sense. */
  .hiw-stage { order: -1; }
}
@media (max-width: 560px) {
  .hiw-stage { padding: var(--space-6); min-height: 340px; }
  .hiw-panel { inset: var(--space-6); }
  .step-item { padding: var(--space-4); gap: var(--space-4); }
  .step-num { width: 38px; font-size: 1.5rem; }
}

/* ---- Signature moment --------------------------------------------------------- */
.sig-moment { max-width: 640px; margin-inline: auto; }
.sig-moment .doc-mock-title { margin-bottom: 0; }
.sig-moment-annotation {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-6); padding: var(--space-3) var(--space-4);
  background: var(--brass-100); color: var(--brass-800); border-radius: var(--radius-s); font-size: var(--text-body-s); font-weight: 500;
}

/* ---- Mobile + Telegram section -------------------------------------------------- */
.mobile-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-16); align-items: center; }
.approval-screen-title { font-family: var(--font-serif); font-size: var(--text-heading-m); margin-bottom: var(--space-1); }
.approval-amount { font-family: var(--font-serif); font-size: var(--text-display-m); margin-block: var(--space-3); }
.approval-meta { color: var(--text-secondary); font-size: var(--text-body-s); margin-bottom: var(--space-4); }
.approval-attachment { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-hairline); border-radius: var(--radius-s); font-size: var(--text-body-s); margin-bottom: var(--space-5); }
.approval-attachment .icon { color: var(--action-primary); }
.approval-actions { display: flex; gap: var(--space-2); }
.approval-actions .btn { flex: 1; }
/* The third outcome, sitting under any approve/return pair. Quieter than both
   by design — it is the rarest decision — but every approval screen on the
   site should show that rejecting is available, not just approving. */
.approval-reject-row {
  margin-top: var(--space-3); text-align: center;
  font-size: var(--text-caption); font-weight: 600; color: var(--status-rejected-fg);
}

.tg-card { max-width: 320px; border-radius: var(--radius-l); border: 1px solid var(--border-hairline); background: var(--card-bg); overflow: hidden; box-shadow: var(--shadow-elevated); }
.tg-card-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: #229ed9; color: #fff; }
.tg-card-head .avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.tg-card-body { padding: var(--space-4); font-size: var(--text-body-s); }
.tg-card-body p { margin-bottom: var(--space-3); }
.tg-card-actions { display: flex; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.tg-card-actions button { flex: 1; height: 36px; border-radius: var(--radius-s); border: 1px solid var(--border-hairline); font-size: var(--text-caption); font-weight: 600; background: var(--bg-fill); }
.tg-card-actions button.tg-approve { background: var(--status-approved-bg); color: var(--status-approved-fg); border-color: transparent; }

@media (max-width: 900px) {
  .mobile-grid { grid-template-columns: 1fr; justify-items: center; text-align: left; }
}

/* ---- Modules / request types --------------------------------------------------- */
.modules-panel { display: grid; gap: var(--space-6); }
#modules-detail { padding: var(--space-8); border: 1px solid var(--border-hairline); border-radius: var(--radius-m); background: var(--bg-subtle); min-height: 120px; }
#modules-detail h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-heading-m); margin-bottom: var(--space-2); }
#modules-detail p { color: var(--text-secondary); }

/* ---- Dashboards by role ---------------------------------------------------------- */
.dashboard-block { display: flex; flex-direction: column; gap: var(--space-6); align-items: center; }

/* ---- Audit trail timeline ---------------------------------------------------------- */
[data-section="auditTrail"] {
  background-image: url("../img/logo-glow.png");
  background-repeat: no-repeat;
  background-position: right -140px center;
  background-size: 680px;
  background-blend-mode: screen;
}
@media (max-width: 900px) {
  [data-section="auditTrail"] { background-image: none; }
}
.timeline { display: flex; flex-direction: column; border-left: 2px solid var(--border-inverse); margin-left: var(--space-2); }
.timeline-item { position: relative; padding: 0 0 var(--space-8) var(--space-8); }
.timeline-item::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--action-primary); border: 3px solid var(--bg-inverse); }
.timeline-item .t-time { font-size: var(--text-caption); color: var(--text-inverse-secondary); font-variant-numeric: tabular-nums; }
.timeline-item .t-event { font-weight: 600; margin-top: 2px; }
.timeline-item .t-detail { color: var(--text-inverse-secondary); font-size: var(--text-body-s); margin-top: 2px; }

/* ---- Setup / readiness ------------------------------------------------------------- */
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.checklist { display: flex; flex-direction: column; gap: var(--space-1); }
.checklist-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-s); }
.checklist-item .num-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--action-primary-tint); color: var(--action-primary); display: flex; align-items: center; justify-content: center; font-size: var(--text-caption); font-weight: 700; flex-shrink: 0; }
.checklist-item.is-done .num-badge { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.checklist-item.is-done span.label { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.readiness-panel { border: 1px solid var(--border-hairline); border-radius: var(--radius-m); padding: var(--space-6); background: var(--bg-subtle); }
.readiness-row { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-3); border-bottom: 1px solid var(--border-hairline); font-size: var(--text-body-s); }
.readiness-row:last-child { border-bottom: none; }
@media (max-width: 900px) { .setup-grid { grid-template-columns: 1fr; } }

/* ---- Final CTA ------------------------------------------------------------------------ */
.final-cta { text-align: center; }
.final-cta .hero-ctas { justify-content: center; }

/* ---- Features page ---------------------------------------------------------------------- */
.page-hero { padding-block: var(--space-16) var(--space-10); }
#features-grid .card h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-heading-m); margin-block: var(--space-2); }
#features-grid .card p { color: var(--text-secondary); font-size: var(--text-body-s); }

/* ---- Pricing page ------------------------------------------------------------------------- */
.pricing-toolbar { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-bottom: var(--space-12); }
/* The free-trial line: the first thing to read after the price, because it
   removes the risk the price just introduced. */
.trial-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--status-approved-bg); color: var(--status-approved-fg);
  font-size: var(--text-body-s); font-weight: 600;
}
.trial-badge .icon { width: 18px; height: 18px; }

/* The implementation note: what the setup fee actually buys, directly under
   the plans where the number was just read. */
.implementation-note {
  display: flex; gap: var(--space-5); align-items: flex-start;
  max-width: 780px; margin: var(--space-10) auto 0;
  padding: var(--space-6);
  border-radius: var(--radius-m);
  border: 1px solid color-mix(in srgb, var(--action-primary) 24%, transparent);
  background: color-mix(in srgb, var(--action-primary) 5%, transparent);
}
.implementation-note .icon-tile { margin-bottom: 0; flex-shrink: 0; }
.implementation-note h3 { margin-bottom: var(--space-2); }
.implementation-note p { color: var(--text-secondary); font-size: var(--text-body-s); }
@media (max-width: 640px) { .implementation-note { flex-direction: column; gap: var(--space-4); } }

.enterprise-band { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: center; padding: var(--space-8); border-radius: var(--radius-l); border: 1px solid var(--border-hairline); background: var(--bg-subtle); }
.enterprise-band ul { display: flex; flex-direction: column; gap: var(--space-2); }
.enterprise-band li { display: flex; gap: var(--space-2); font-size: var(--text-body-s); }
.enterprise-band .icon { color: var(--action-primary); }
@media (max-width: 900px) { .enterprise-band { grid-template-columns: 1fr; text-align: left; } }

.compare-table-wrap { overflow-x: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-m); }
.compare-table { min-width: 720px; }
.compare-table th, .compare-table td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--border-hairline); font-size: var(--text-body-s); }
.compare-table th { background: var(--bg-subtle); font-weight: 600; }
.compare-table td.num { font-family: var(--font-serif); }

/* ---- FAQ page ---------------------------------------------------------------------------- */
.faq-search { position: relative; max-width: 480px; margin: 0 auto var(--space-10); }
.faq-search input { width: 100%; height: 48px; padding-left: 44px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--bg-page); font-size: var(--text-body); }
.faq-search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }

/* ---- Contact page -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.contact-method { display: flex; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border-hairline); border-radius: var(--radius-m); align-items: flex-start; margin-bottom: var(--space-4); }
.contact-method .icon-tile { margin-bottom: 0; flex-shrink: 0; }
.contact-method h3 { font-size: var(--text-body-l); margin-bottom: 2px; }
.contact-method p { font-size: var(--text-body-s); color: var(--text-secondary); }
/* The email link is real text-length, not a button — give it the same
   44px tap target as everything else, not just its own line-height. */
.contact-method p a { display: inline-flex; align-items: center; min-height: 44px; }
#contact-success { text-align: center; padding: var(--space-12) var(--space-6); }
#contact-success .icon-tile { margin-inline: auto; background: var(--status-approved-bg); color: var(--status-approved-fg); width: 56px; height: 56px; border-radius: 50%; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }