/* features.css — page-specific styles for the Features page.
   Shared chrome (reset, layout, type, buttons, nav, dropdown, footer, reveal) lives in
   base.css; design tokens in tokens.css. Only the Features page's own rules live here:
   hero, role tabs/panels, pillar + feature bands, pain quote, workflow strip, tick list,
   product-visual placeholders, compliance callout, and the final CTA. */

/* ----------  Hero  ---------- */
.hero { padding-block: clamp(5rem, 13vw, 8rem) clamp(2.5rem, 7vw, 4rem); text-align: center; }
.hero .eyebrow { margin-bottom: 1.1rem; }
.hero .lead { margin-top: 1.5rem; }

/* ----------  Role TABS (under the hero, switch the three role panels)  ----------
   Underline tabs. Active uses --accent-ink (dark amber) for AA-safe text + a yellow-fill
   underline bar (the one bright-yellow fill per view). role="tablist" semantics in markup. */
.roletabs { border-bottom: 1px solid var(--line); }
.roletabs-inner {
  display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 3vw, 2.25rem);
  justify-content: center;
}
.roletab {
  appearance: none; font-family: inherit; background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1rem 0.25rem; margin-bottom: -1px;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-soft); letter-spacing: -0.01em;
  border-bottom: 3px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.roletab:hover { color: var(--ink); }
.roletab[aria-selected="true"] {
  color: var(--accent-ink); font-weight: 600; border-bottom-color: var(--accent);
}
.roletab .tab-emoji { font-size: 1.05rem; line-height: 1; }
@media (max-width: 560px) {
  .roletabs-inner { gap: 0.25rem; }
  .roletab { padding-inline: 0.5rem; font-size: 0.875rem; }
  .roletab .tab-emoji { display: none; }
}

/* ----------  Role panels (tabpanels: only the active one shows)  ----------
   Panels are visually identical (no alt/reverse) so switching tabs doesn't flip
   background grey↔white or swap column order. Only one is ever visible at a time. */
.role-panel { display: none; }
.role-panel.is-active { display: block; }
/* The tablist already draws the dividing hairline; drop the pillar's own top border
   so the active panel doesn't double it. */
.role-panel.pillar { border-top: none; }

/* ----------  Pillar feature sections  ---------- */
.pillar { border-top: 1px solid var(--line); }
.pillar.alt { background: var(--surface); }
.pillar-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.pillar.reverse .pillar-copy { order: 2; }
.pillar.reverse .pillar-visual { order: 1; }
.pillar-label {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--type-label); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink);
}
.pillar-label .bar { width: 26px; height: 3px; border-radius: 999px; background: var(--accent); }
.pillar-h { margin-top: 1rem; font-size: clamp(1.625rem, 3.2vw, 2.375rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.pillar-copy p.body { margin-top: 1rem; font-size: var(--type-lead); color: var(--ink-soft); line-height: 1.45; max-width: 32rem; }
/* "Coming" chip: neutral ghost, deliberately NOT yellow, so roadmap reads as "not yet" */
.chip-coming {
  display: inline-block; margin-top: 1.1rem;
  font-size: var(--type-label); font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.75rem;
}

/* ----------  Feature BANDS (a vertical flow of capabilities inside each role panel)  ----------
   Each band reuses .pillar-grid (2-col) + .visual (the labeled placeholder). Bands alternate
   L/R via .band.reverse. They are NOT their own <section> (that would stack section-y padding
   and read cavernous); they live inside the single panel section and get a moderate own gap, so
   the role reads as a spread-out feature flow you scroll through, not a packed list. */
.role-bands { margin-top: clamp(3rem, 7vw, 5.5rem); }
.band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.band + .band { margin-top: clamp(3.5rem, 8vw, 7rem); }   /* the generous between-band air */
.band.reverse .band-copy { order: 2; }
.band.reverse .band-visual { order: 1; }
/* Desktop: give the product visual the larger share of the row so the feature
   media reads bigger. Reverse bands put the visual in column 1, so the wide
   track flips with them. (Mobile stays single-column via the max-width query.) */
@media (min-width: 821px) {
  .band { grid-template-columns: 1fr 1.5fr; }
  .band.reverse { grid-template-columns: 1.5fr 1fr; }
}
/* band eyebrow: amber (--accent-ink), NOT a bright-yellow fill, so 12 bands don't flood the view */
.band-eyebrow {
  font-size: var(--type-label); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink);
}
/* the feature name as a SMALL heading (matches .ph-title scale, not the big .pillar-h) */
.band-h { margin-top: 0.6rem; font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); }
.band-copy p.body { margin-top: 0.85rem; font-size: var(--type-body); color: var(--ink-soft); line-height: 1.5; max-width: 30rem; }
.band-copy .tick-list { margin-top: 1.1rem; }   /* tighter than the standalone tick-list default */
.band-copy .chip-coming { margin-top: 1.1rem; }
@media (max-width: 820px) {
  .band { grid-template-columns: 1fr; gap: clamp(1.75rem, 7vw, 2.5rem); }
  .band.reverse .band-copy { order: 1; }
  .band.reverse .band-visual { order: 2; }
  .band-copy p.body { max-width: none; }
}

/* ----------  Role pain lead line (the buyer's words, opening each role)  ---------- */
.pain {
  margin-top: 1.1rem; padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--accent);   /* the one yellow fill per view, a quote rule */
  font-size: var(--type-lead); line-height: 1.4; color: var(--ink);
  font-weight: 500; font-style: italic; max-width: 32rem;
}
.pillar.reverse .pain { max-width: none; }

/* ----------  Workflow connective strip (the 6 steps, folded to one light band)  ---------- */
.workflow { background: var(--surface); border-top: 1px solid var(--line); }
.workflow .measure { margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.flow-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.6rem, 1.5vw, 1rem);
}
.flow-item {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.1rem 0.9rem; text-align: left;
}
.flow-item .ix {
  font-size: var(--type-label); font-weight: 600; letter-spacing: 0.08em;
  color: var(--accent-ink);   /* amber index, AA on white */
}
.flow-item .nm { margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.flow-item .ds { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 860px) { .flow-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .flow-strip { grid-template-columns: repeat(2, 1fr); } }

/* ----------  Tick list (UNSCOPED, from the pricing page; green ticks)  ---------- */
.tick-list { list-style: none; margin-top: 1.5rem; }
.tick-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.9375rem; color: var(--ink-soft); margin-bottom: 9px; line-height: 1.45;
}
.tick-list li::before {
  content: ''; flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7-7' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
.tick-list li strong { color: var(--ink); font-weight: 600; }

/* ----------  Product-visual placeholders (from the landing page)  ---------- */
.visual {
  position: relative;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fbfdfd, #eef3f4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
}
.visual-inner { text-align: center; padding: 2rem; max-width: 30rem; }
.visual .ph-tag {
  display: inline-block; font-size: var(--type-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-ink);   /* amber text on the yellow tint, AA */
  background: var(--accent-tint); padding: 0.4rem 0.8rem; border-radius: 999px;
}
.visual .ph-title { margin-top: 1.1rem; font-size: 1.25rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.visual .ph-desc { margin-top: 0.5rem; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
.visual::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(120% 80% at 50% 0%, rgba(214,158,9,0.10), transparent 60%);
  pointer-events: none;
}
.visual .dots { position: absolute; top: 16px; left: 18px; display: flex; gap: 7px; }
.visual .dots span { width: 11px; height: 11px; border-radius: 50%; background: #d4dadb; }

/* Real product media: the card takes the recording's native ratio and the
   media fills it edge-to-edge (no placeholder chrome, no amber tint overlay) */
.visual.has-media { aspect-ratio: 1918 / 909; background: #0b0e0f; }
.visual.has-media::before { display: none; }
.visual .visual-media { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 820px) {
  .pillar-grid { grid-template-columns: 1fr; gap: clamp(2rem, 8vw, 2.75rem); }
  .pillar.reverse .pillar-copy { order: 1; }
  .pillar.reverse .pillar-visual { order: 2; }
  .pillar-copy p.body { max-width: none; }
}

/* ----------  Compliance callout  ---------- */
.compliance { background: var(--surface-cool); border-top: 1px solid var(--line); }
.flow {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0;
}
.flow-step {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem 1.5rem; text-align: left;
}
.flow-step .step-eyebrow { font-size: var(--type-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.flow-step .step-title { margin-top: 0.6rem; font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.01em; }
.flow-step .step-desc { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.5; }
.flow-step.is-exit { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-tint), #fff); }
.flow-step.is-exit .step-eyebrow { color: var(--accent-ink); }
.flow-arrow { display: grid; place-items: center; color: var(--accent-ink); font-size: 1.5rem; padding-inline: 0.75rem; }
.flow-note { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--ink-faint); }
@media (max-width: 820px) {
  .flow { grid-template-columns: 1fr; gap: 0.75rem; }
  .flow-arrow { transform: rotate(90deg); padding-block: 0.25rem; }
}

/* ----------  Final CTA  ---------- */
.final { text-align: center; border-top: 1px solid var(--line); }
.final .hero-cta { margin-top: 2.5rem; display: flex; gap: 0.75rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.final .hero-cta .btn-link::after { content: " →"; }
.final .btn-primary { min-height: 54px; padding: 0 2rem; font-size: 1.0625rem; }