/* ───────────────────────────────────────────────────────────────────────────
   Snugdays — marketing site (cosydays.co.uk / www)

   Every colour below is a role in packages/core/src/theme/palette.ts, copied by value because
   this site has no build step. `npm run check:palette` scans this directory for retired
   literals and undefined alphas, so a drift fails the build rather than passing review.
   Layout follows docs/design/2026-09-20/Cosydays Landing.dc.html.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ink.* */
  --ink: #241041;
  --ink-body: #5C5175;
  --ink-inverse: #FFFFFF;

  /* action.* — the one purple */
  --action: #6D28D9;
  --action-hover: #4C1D95;
  --label-strong: #5B21B6;

  /* ground.* and wash.* */
  --ground: #FFFFFF;
  --wash-operate: rgba(109, 40, 217, 0.06);
  --wash-tertiary: rgba(109, 40, 217, 0.10);
  --wash-secondary: rgba(109, 40, 217, 0.16);
  --wash-primary: rgba(109, 40, 217, 0.24);
  --track: #EFEAF8;

  /* lead.* — the one solid violet surface per screen */
  --lead: #6D28D9;

  /* verdict.* */
  --better: #15803D;
  --better-bg: #EFF6F1;
  --worse-text: #92400E;
  --neutral-text: #5C5175;
  --neutral-bg: #EFEDF3;

  /* dayStrip.rateCheap — the Guides' rate strip. Cheap-rate colour is cost's amber everywhere
     (SOURCE-NOTES, Clarifications). */
  --rate-cheap: rgba(180, 83, 9, 0.32);

  /* rule.* — two hairline weights, and press */
  --hairline: rgba(36, 16, 65, 0.09);
  --edge: rgba(36, 16, 65, 0.12);
  --strong: rgba(36, 16, 65, 0.16);

  /* chrome.* */
  --frosted: rgba(255, 255, 255, 0.85);

  /* radius.* */
  --r-mark: 4px;
  --r-control: 12px;
  --r-card: 18px;
  --r-pill: 9999px;

  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  /* Tabular figures everywhere, as in the app (D74). */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul,
figure {
  margin: 0;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  background: var(--action);
  color: var(--ink-inverse);
  padding: 8px 16px;
  border-radius: var(--r-control);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 24px;
}

.section {
  padding-block: 64px;
}

/* Anchors land below the sticky header, which takes a second row on a phone. */
section[id] {
  scroll-margin-top: 64px;
}

@media (max-width: 900px) {
  section[id] {
    scroll-margin-top: 112px;
  }
}


.split {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.split > .split-copy {
  flex: 1 1 420px;
  min-width: 0;
}

.split > .split-figure {
  flex: 0 0 auto;
  margin: 0 auto;
}

h1 {
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin-top: 18px;
  text-wrap: balance;
}

h2 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}

h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-body);
  margin-top: 12px;
  max-width: 34em;
  text-wrap: pretty;
}

.kicker {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--label-strong);
  background: var(--wash-secondary);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 600;
  border-radius: var(--r-control);
  padding: 12px 22px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--action);
  color: var(--ink-inverse);
}

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

.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--strong);
}

.btn-ghost:hover {
  background: var(--wash-operate);
}

.btn-inverse {
  background: var(--ground);
  color: var(--label-strong);
}

.btn-inverse:hover {
  background: var(--track);
}

/* The board's tinted button: the 16% wash with the strong label, no edge. */
.btn-tint {
  background: var(--wash-secondary);
  color: var(--label-strong);
}

.btn-tint:hover {
  background: var(--wash-primary);
}

.btn-sm {
  font-size: 15.5px;
  padding: 10px 16px;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--frosted);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  border-radius: 8px;
}

.site-nav {
  display: flex;
  gap: 20px;
  flex: 1;
  flex-wrap: wrap;
}

.site-nav a {
  font-size: 15.5px;
  font-weight: 400;
  color: var(--ink-body);
  text-decoration: none;
  padding-block: 12px;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.header-link {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-body);
  text-decoration: none;
  padding-block: 12px;
}

.header-link:hover {
  color: var(--ink);
}

/* On a phone the nav drops to its own row under the brand rather than disappearing: the four
   anchors are the page's table of contents. */
@media (max-width: 900px) {
  .header-inner {
    gap: 0 16px;
    padding-top: 8px;
  }
  /* One row that scrolls sideways, so the sticky header stays two lines high instead of three. */
  .site-nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar {
    display: none;
  }
  .site-nav a {
    flex: none;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding-block: 64px 48px;
}

.hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-body);
  margin-top: 18px;
  max-width: 34em;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.hero-note {
  font-size: 14.5px;
  color: var(--ink-body);
  margin-top: 24px;
}

/* ── Illustrative app screens ─────────────────────────────────────────── */

/* The board sets each screen in a 390 × 812 phone at 0.9 scale: 351px wide. The images are
   rendered from the board at twice that (README, "The screens"). */
.phone {
  width: min(100%, 351px);
}

.phone-frame {
  aspect-ratio: 390 / 812;
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: 40px;
  overflow: hidden;
}

.phone-frame img {
  width: 100%;
  height: 100%;
}

.mock figcaption {
  font-size: 14.5px;
  color: var(--ink-body);
  margin-top: 8px;
  text-align: center;
}

/* ── How it works ─────────────────────────────────────────────────────── */

.steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.step {
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.step-num {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--action);
  color: var(--ink-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15.5px;
  font-weight: 700;
}

.step p {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-body);
  margin-top: 4px;
  text-wrap: pretty;
}

/* ── Plans ────────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.plan {
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plan-tag {
  font-size: 13.5px;
  color: var(--ink-body);
}

.plan-price {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Under the figure, as on the board: Free's "No card needed", the catalogue's yearly note. */
.plan-price-note {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-body);
}

.plan-summary {
  color: var(--ink-body);
  text-wrap: pretty;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  flex: 1;
}

.plan-features li {
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

.plan .btn {
  align-self: flex-start;
}

.plans-note {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--ink-body);
  max-width: 72ch;
}

/* ── Hero ticks ───────────────────────────────────────────────────────── */

.ticks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.ticks li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 16.5px;
}

/* A green tick: the palette's "better", drawn as a mask so the SVG carries no colour of its own. */
.ticks li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--better);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Section furniture ────────────────────────────────────────────────── */

.section-ruled {
  border-top: 1px solid var(--hairline);
}

.section-title {
  margin-top: 12px;
  max-width: 20em;
}

.eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 15.5px;
  color: var(--ink-body);
}

/* The tier chip: green for Free, violet for a paid plan, grey for Coming soon. */
.tier {
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 4px 12px;
  white-space: nowrap;
}

.tier-free {
  color: var(--better);
  background: var(--better-bg);
}

.tier-paid {
  color: var(--label-strong);
  background: var(--wash-secondary);
}

.tier-soon {
  color: var(--neutral-text);
  background: var(--neutral-bg);
}

@media (min-width: 900px) {
  .split-reverse > .split-copy {
    order: 1;
  }
  .split-reverse > .split-figure {
    order: 2;
  }
}

/* ── Free cards ───────────────────────────────────────────────────────── */

.cards {
  display: grid;
  /* The board's 300px floor: three across at 1120, never a four-and-two. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.card {
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-control);
  background: var(--wash-secondary);
  color: var(--label-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon svg {
  width: 22px;
  height: 22px;
}

.card h3 {
  font-size: 19px;
}

.card p {
  line-height: 1.55;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* ── History rows ─────────────────────────────────────────────────────── */

.rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.row {
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.row-copy {
  flex: 1;
  min-width: 0;
}

.row-title {
  display: block;
  font-size: 17px;
  font-weight: 600;
}

.row-body {
  display: block;
  line-height: 1.5;
  color: var(--ink-body);
  margin-top: 4px;
  text-wrap: pretty;
}

.soon-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  background: var(--ground);
  border: 1px dashed var(--strong);
  border-radius: var(--r-card);
  padding: 16px;
}

/* ── Plan matrix ──────────────────────────────────────────────────────── */

.plan-pick {
  border: 2px solid var(--action);
  padding: 19px;
}

.plan-cta {
  display: block;
  text-align: center;
  margin-top: 8px;
}

.plan .btn.plan-cta {
  align-self: stretch;
}

.plan-cta-soon {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--label-strong);
  background: var(--wash-primary);
  border-radius: var(--r-control);
  padding: 12px;
}

.matrix-wrap {
  margin-top: 24px;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  overflow-x: auto;
}

.matrix {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.matrix th,
.matrix td {
  padding: 12px 16px;
  text-align: center;
  font-size: 15.5px;
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}

.matrix thead th {
  font-size: 14.5px;
  font-weight: 600;
  border-bottom-color: var(--edge);
}

.matrix thead th:first-child {
  font-weight: 400;
  color: var(--ink-body);
}

.matrix th[scope="row"],
.matrix thead th:first-child {
  text-align: left;
  width: 46%;
}

.matrix tbody tr:last-child > * {
  border-bottom: 0;
}

.m-title {
  display: block;
}

.m-sub {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-body);
}

.matrix .yes {
  font-weight: 600;
  color: var(--better);
}

.matrix .no {
  font-weight: 400;
  color: var(--ink-body);
}

/* ── Closing ──────────────────────────────────────────────────────────── */

.closing {
  padding-bottom: 64px;
}

.closing-sub {
  font-size: 17px;
  color: var(--ink-inverse);
  margin-top: 8px;
}

.closing-inner {
  background: var(--lead);
  color: var(--ink-inverse);
  border-radius: var(--r-card);
  padding: 36px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.closing-title {
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--hairline);
}

.footer-inner {
  padding-block: 28px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

/* The board's one line — name, the independence line, the links — with the trademark note and
   the copyright line under it. The markup keeps the links last so every page reads in order. */
.footer-row {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 600;
}

.footer-independence {
  font-size: 14.5px;
  color: var(--ink-body);
}

.footer-disclaimer {
  order: 2;
  flex: 1 1 100%;
  font-size: 14.5px;
  color: var(--ink-body);
  max-width: 72ch;
}

.footer-meta {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  font-size: 14.5px;
  color: var(--ink-body);
}

.footer-meta a {
  color: var(--action);
  text-decoration: none;
  padding-block: 12px;
}

.footer-meta a:hover {
  color: var(--action-hover);
  text-decoration: underline;
}

/* ── Legal pages ──────────────────────────────────────────────────────── */
/*
 * One prose block, shared by both pages. Deliberately narrow: these are documents to be read
 * rather than a landing page to be scanned, and a 72-character measure is what makes a long
 * paragraph readable at all.
 */

.legal {
  max-width: 72ch;
}

/* The Legal board: the title and its lead across the top, then the contents and the text side by
   side once there is room. Below that the contents are a row of chips above the text. */
.legal-split {
  max-width: 1120px;
}

.legal-intro,
.legal-body {
  max-width: 760px;
}

@media (min-width: 1024px) {
  .legal-split {
    display: grid;
    grid-template-columns: 240px minmax(0, 760px);
    column-gap: 48px;
    align-items: start;
  }
  .legal-intro {
    grid-column: 1 / -1;
  }
  .legal-body {
    grid-column: 2;
  }
}

.legal h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.04;
  margin-top: 0;
  margin-bottom: 8px;
}

.legal .updated {
  font-size: 15.5px;
  color: var(--ink-body);
  margin-bottom: 24px;
}

.legal h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-top: 48px;
  margin-bottom: 12px;
}

.legal h3 {
  font-size: 19px;
  margin-top: 24px;
  margin-bottom: 4px;
}

.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.65;
}

.legal p + p {
  margin-top: 12px;
}

.legal ul {
  padding-left: 20px;
  margin-block: 12px;
}

.legal li {
  margin-bottom: 4px;
}

.legal a {
  color: var(--action);
}

/* "In short" - the board's tinted block: the 10% wash, a card radius, no edge. */
.legal .callout {
  background: var(--wash-tertiary);
  padding: 16px;
  margin-block: 0 24px;
  border-radius: var(--r-card);
}

.legal .callout p {
  margin: 0;
}

/* ── Tell me when it opens ────────────────────────────────────────────── */
/*
 * The pre-launch signup (docs/SIGNUP-SHEET.md). Without scripts only the mail link shows;
 * signup.js reveals the form and hides the link. Every word comes from signup-core.js.
 */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.signup {
  margin-top: 24px;
  max-width: 480px;
}

.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signup-form[hidden],
.signup-fallback[hidden] {
  display: none;
}

.signup-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 48px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--strong);
  border-radius: var(--r-control);
  padding: 12px 16px;
}

.signup-form input[type="email"]::placeholder {
  color: var(--ink-body);
}

.signup-form .btn {
  flex: 1 0 auto;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.signup-form .btn:disabled {
  cursor: progress;
}

/* The honeypot: off-screen for people, still in the form for bots. */
.signup-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.signup-note {
  font-size: 14.5px;
  color: var(--ink-body);
  margin-top: 8px;
}

.signup-note-error {
  color: var(--worse-text);
}

.signup-done {
  font-size: 17px;
  font-weight: 600;
  color: var(--better);
  background: var(--better-bg);
  border-radius: var(--r-control);
  padding: 12px 16px;
}

/* On the violet closing band the field sits white and the note reads in the band's soft ink. */
.signup-inverse {
  margin-top: 0;
  flex: 1 1 360px;
}

.signup-inverse .signup-note {
  color: var(--ink-inverse);
}

/* On the violet band the board's send button is ink, so it does not read as a second white field. */
.signup-inverse .btn-inverse {
  background: var(--ink);
  color: var(--ink-inverse);
}

.signup-inverse .btn-inverse:hover {
  background: var(--action-hover);
}

.signup-inverse .signup-note-error {
  color: var(--ink-inverse);
  font-weight: 600;
}

.signup-inverse .signup-form input[type="email"] {
  border-color: var(--ground);
}

.closing-copy {
  flex: 1 1 360px;
  min-width: 0;
}

/* ── Hero tier groups ─────────────────────────────────────────────────── */

.tier-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.tier-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 600;
}

.tier-group-price {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-body);
}

.tier-groups .ticks {
  margin-top: 8px;
}

.plan-cta-soon {
  text-decoration: none;
}

a.plan-cta-soon:hover {
  background: var(--wash-secondary);
}

/* ── Questions ────────────────────────────────────────────────────────── */

.faq-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: flex-start;
}

.faq-intro {
  flex: 1 1 280px;
  min-width: 0;
}

/* Tinted, as .btn-tint; the class list is pinned by marketing-page.test.ts. */
.btn.faq-all {
  margin-top: 16px;
  font-size: 15.5px;
  padding: 10px 16px;
  border: 0;
  background: var(--wash-secondary);
  color: var(--label-strong);
}

.btn.faq-all:hover {
  background: var(--wash-primary);
}

.faq {
  flex: 2 1 480px;
  min-width: 0;
  border-top: 1px solid var(--edge);
}

.faq-item {
  border-bottom: 1px solid var(--edge);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary::after {
  /* The board's chevron, drawn as two borders so it takes the ink-body colour. */
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 6px 4px;
  border-right: 2px solid var(--ink-body);
  border-bottom: 2px solid var(--ink-body);
  transform: rotate(45deg);
}

.faq-item[open] summary::after {
  margin-bottom: -4px;
  transform: rotate(-135deg);
}

.faq-answer {
  padding: 0 0 16px;
}

.faq-answer p {
  color: var(--ink);
  line-height: 1.6;
  max-width: 62ch;
}

.faq-answer strong {
  font-weight: 500;
}

.faq-answer a {
  display: inline-block;
  margin-top: 8px;
  padding-block: 12px;
  font-weight: 500;
  color: var(--action);
}