/* The screenwriting funds pages (scriptopus.com/screenwriting-grants).
   Copied into landing/screenwriting-grants/assets/ by build.mjs.

   A sibling of the events pages, and it should look like one (owner,
   2026-11-01: "they are as if from different websites... the fonts can be
   similar, structure can be a bit different and so do the colors, but not
   this huge"). So it shares the events pages' tokens, Inter headings, light
   hero, pastel tiles, rounded cards and the coloured band behind a page's
   header (apps/desktop/scripts/siteEvents/assets/events.css). What is its
   own: the five stages each wear a paper and an ink (as the events' kinds
   do, in other hues), the hub's "I write in..." sentence, and the amount
   block on the right of every card where an event card has its date on the
   left. The first look (a deep green band with brass and serif type,
   c441bc45) was retired the same day. The site tokens (--accent and
   friends) are the no-JS fallback chrome.js expects (DEFAULT_THEME). The
   site has no dark theme. */
:root {
  --bg: #fafaf9;
  --bg-soft: #f4f4f3;
  --surface: #ffffff;
  --ink: #18181b;
  --ink-2: #3f3f46;
  --muted: #71717a;
  --faint: #a1a1aa;
  --line: #e7e7e6;
  --line-soft: #efefee;
  --accent: #047857;
  --accent-deep: #065f46;
  --accent-soft: #34d399;
  --accent-wash: #e7f4ee;
  --accent-ring: rgba(4, 120, 87, 0.15);
  --warn: #9a3412;
  --warn-wash: #fdf0e3;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --radius: 16px;
  --radius-sm: 12px;

  /* One paper and one ink per stage, as the events pages give each kind a
     revision paper. Ink on paper and ink on white both 4.5:1 or better. */
  --st-writing-paper: #f6e7c1;      --st-writing: #7a4f00;
  --st-development-paper: #d5ede8;  --st-development: #0f5f5f;
  --st-production-paper: #eedbe7;   --st-production: #7a2a58;
  --st-completion-paper: #f7ddce;   --st-completion: #9a3b12;
  --st-distribution-paper: #dce5f3; --st-distribution: #2f4c78;
  /* Pages that are not about one stage: the site's green, washed. */
  --grant-paper: #e3f1ea;
}

[data-stage="writing"]      { --st: var(--st-writing);      --st-paper: var(--st-writing-paper); }
[data-stage="development"]  { --st: var(--st-development);  --st-paper: var(--st-development-paper); }
[data-stage="production"]   { --st: var(--st-production);   --st-paper: var(--st-production-paper); }
[data-stage="completion"]   { --st: var(--st-completion);   --st-paper: var(--st-completion-paper); }
[data-stage="distribution"] { --st: var(--st-distribution); --st-paper: var(--st-distribution-paper); }
[data-band]                 { --st: var(--accent-deep);     --st-paper: var(--grant-paper); }

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── hero ─────────────────────────────────────────── */
.fd-hero { padding: 40px 0 28px; }
.fd-hero-hub { padding: 40px 0 24px; text-align: center; }
/* The stages' five papers along the top of the hub, as the events hub
   carries its revision papers. */
.fd-hero-hub { background-image: linear-gradient(90deg,
  var(--st-writing-paper) 0 20%, var(--st-development-paper) 20% 40%, var(--st-production-paper) 40% 60%,
  var(--st-completion-paper) 60% 80%, var(--st-distribution-paper) 80%);
  background-size: 100% 8px; background-repeat: no-repeat; background-position: top; padding-top: 48px; }
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.fd-hero h1 {
  font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06;
  margin: 0; max-width: 900px; text-wrap: balance;
}
.fd-hero-hub h1 { font-size: clamp(32px, 4.2vw, 50px); margin: 0 auto; }
.fd-hero h1 em { font-style: normal; color: var(--accent); }
.fd-hero .sub { font-size: 17px; color: var(--muted); line-height: 1.55; margin: 14px auto 0; max-width: 640px; }
.fd-hero .lede { font-size: 17px; color: var(--ink-2); line-height: 1.65; margin: 18px 0 0; max-width: 760px; }
.fd-sub { font-size: 14px; color: var(--muted); margin: 14px 0 0; }

.fd-crumbs { font-size: 13px; color: var(--muted); margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fd-crumbs a { color: var(--ink-2); }
.fd-crumbs a:hover { color: var(--st, var(--accent)); }
.fd-crumbs .sep { color: var(--faint); }

/* A coloured band behind a page's header: the stage's paper, or the green
   wash on country, region and applicant pages. */
.fd-band { background: var(--st-paper); padding-bottom: 34px; margin-bottom: 8px; }
.fd-band .eyebrow { color: var(--st); }
.fd-band .fd-crumbs, .fd-band .fd-sub, .fd-band .fd-org { color: var(--ink-2); }
.fd-band .lede { color: var(--ink); }

/* ── search ───────────────────────────────────────── */
.fd-search {
  display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 28px auto 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 13px 20px;
  box-shadow: 0 18px 44px -26px var(--accent-ring), 0 2px 8px rgba(0,0,0,0.03);
}
.fd-search:focus-within { border-color: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-ring); }
.fd-search svg { color: var(--accent); flex: none; }
.fd-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: 500 16px var(--sans); color: var(--ink); }
.fd-search input::placeholder { color: var(--faint); }
.fd-filters .fd-search { margin: 0; max-width: none; flex-basis: 100%; box-shadow: none; padding: 10px 16px; }

/* ── the five stages, as tiles ────────────────────── */
.fd-ladder { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fd-step a {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px 15px;
  background: var(--st-paper); border-radius: var(--radius-sm); color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
}
.fd-step a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--st) 70%, transparent); }
.fd-step-n { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: var(--st); }
.fd-step-n::before { content: "Stage "; text-transform: uppercase; }
.fd-step-name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.fd-step-count { font-size: 13px; color: var(--st); font-weight: 600; }
.fd-step-line { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-top: auto; padding-top: 4px; }

/* ── sections ─────────────────────────────────────── */
.fd-section { margin: 36px 0 0; }
.fd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fd-section-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.fd-section-head p { margin: 0; font-size: 14px; color: var(--muted); }
.fd-section-head a { color: var(--accent); font-weight: 600; }
.fd-group { margin: 0 0 28px; }
.fd-group .fd-section-head h2 { font-size: 19px; }

/* ── closing soon ─────────────────────────────────── */
.fd-soon { margin: 30px 0 0; }
.fd-soon .fd-section-head { margin-bottom: 12px; }
.fd-soon .fd-section-head h2 { font-size: 19px; }
.fd-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.fd-mini { display: grid; grid-template-columns: 54px 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.15s; }
.fd-mini:hover { border-color: color-mix(in srgb, var(--st) 45%, var(--line)); }
.fd-mini-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--st-paper); color: var(--st); padding: 8px 2px; }
.fd-mini-date .m { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.fd-mini-date .d { font-size: 21px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.fd-mini-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0; }
.fd-mini-kind { font-size: 11.5px; font-weight: 600; color: var(--st); display: inline-flex; align-items: center; gap: 6px; }
.fd-mini-kind .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.fd-mini-name { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-mini-rel { font-size: 12px; color: var(--muted); margin-top: auto; }
.fd-hub.fd-searching .fd-soon { display: none; }

/* ── the sentence and the filters ─────────────────── */
.fd-filters { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; }
/* The grants pages' own control: a sentence the writer completes. */
.fd-sentence {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 16px 18px;
  background: var(--accent-wash); color: var(--ink);
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4;
  border-bottom: 1px solid var(--line-soft);
}
.fd-sentence .w { white-space: nowrap; }
.fd-sentence label { display: inline-flex; max-width: 100%; }
.fd-sentence select {
  font: 700 18px var(--sans); letter-spacing: -0.01em; color: var(--accent-deep); background-color: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 999px; padding: 4px 32px 5px 14px;
  cursor: pointer; max-width: 100%; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.fd-sentence select:hover { border-color: var(--accent); }
.fd-sentence select option { color: var(--ink); background: var(--surface); font-size: 15px; font-weight: 500; }
.fd-sentence select:focus { outline: none; box-shadow: 0 0 0 4px var(--accent-ring); border-color: var(--accent); }
.fd-filters-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; padding: 14px 16px; }
.fd-filters-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.fd-filters-row select { font: 500 14px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-width: 150px; }
.fd-filters-row select:focus { outline: 2px solid var(--accent-ring); border-color: var(--accent); }
.fd-filters-row .fd-check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 8px; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.fd-filters-row .fd-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.fd-count { margin: 0 0 8px auto; font-size: 13px; color: var(--muted); font-family: var(--mono); }
.fd-empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 28px; text-align: center; color: var(--muted); font-size: 14.5px; }
.fd-empty strong { color: var(--ink); }

/* ── cards ────────────────────────────────────────── */
/* As the events cards: one rounded card each. The amount sits on the right
   on the stage's paper, where an event card has its date on the left. */
.fd-list { display: flex; flex-direction: column; gap: 10px; }
.fd-card {
  display: grid; grid-template-columns: 1fr 156px; gap: 18px; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s;
}
.fd-card:hover { border-color: color-mix(in srgb, var(--st) 45%, var(--line)); box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--st) 60%, transparent); }
.fd-main { min-width: 0; padding: 16px 0 16px 20px; }
.fd-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.fd-tag { font-weight: 600; color: var(--st); background: var(--st-paper); border-radius: 6px; padding: 2px 8px; }
.fd-tag-flag { color: var(--warn); background: var(--warn-wash); font-weight: 500; }
.fd-place { display: inline-flex; align-items: center; gap: 4px; }
.fd-name { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin: 0; }
.fd-name a:hover { color: var(--accent); }
.fd-funder { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.fd-text { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 6px 0 0; }
.fd-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.fd-key { color: var(--ink); font-weight: 600; }
.fd-sum {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--st-paper); color: var(--st); padding: 14px 10px;
}
.fd-sum .s { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; min-height: 1.3em; }
.fd-sum .b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.fd-sum .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.25; margin-top: 3px; }
.fd-rel { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.fd-rel[data-model="deadline"] { color: var(--st); }

/* ── browse (hub) ─────────────────────────────────── */
.fd-browse { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; margin: 44px 0 0; }
.fd-browse h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.fd-browse .fd-chips + h2, .fd-browse .fd-links + h2 { margin-top: 26px; }
.fd-browse-note { margin: -6px 0 12px; font-size: 13.5px; color: var(--muted); }
.fd-browse ul { list-style: none; margin: 0; padding: 0; }
.fd-links li { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.fd-links li:first-child { border-top: none; padding-top: 0; }
.fd-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fd-links .t { font-weight: 600; font-size: 15px; }
.fd-links a:hover .t { color: var(--accent); }
.n { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fd-chips a { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.fd-chips a:hover { border-color: var(--accent); color: var(--accent-deep); }

.fd-stages-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 44px 0 0; }
.fd-stages-intro > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.fd-stages-intro h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.fd-stages-intro h3::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--st-paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st) 30%, transparent); margin-right: 9px; vertical-align: 1px; }
.fd-stages-intro h3 a:hover { color: var(--st); }
.fd-stages-intro p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* ── the fund page ────────────────────────────────── */
.fd-org { font-size: 14.5px; color: var(--muted); margin: 10px 0 0; }
.fd-hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.fd-fact { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); }
.fd-fact svg { color: var(--st); flex: none; }
.fd-status { display: inline-block; margin: 16px 0 0; padding: 10px 16px; background: var(--surface); color: var(--st); border-radius: 14px; font-size: 14.5px; }
.fd-status strong { font-weight: 700; }
.fd-closed-note { background: var(--bg-soft); color: var(--ink-2); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14.5px; margin: 16px 0 0; display: block; }

.fd-detail { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; margin-top: 24px; }
.fd-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 22px; margin-bottom: 14px; }
.fd-block h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.fd-fund .fd-block h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--st-paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st) 30%, transparent); margin-right: 9px; vertical-align: 1px; }
.fd-block p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.fd-block p + p { margin-top: 10px; }
.fd-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.fd-table th, .fd-table td { text-align: left; padding: 8px 10px 8px 0; border-top: 1px solid var(--line-soft); vertical-align: top; }
.fd-table thead th { border-top: none; font-size: 12px; color: var(--muted); font-weight: 600; }
.fd-table tbody th { font-weight: 600; }
.fd-table tbody tr:not(.passed) th { color: var(--st); }
.fd-table tr.passed { color: var(--faint); }
.fd-passed { font-size: 11.5px; font-family: var(--mono); color: var(--faint); margin-left: 6px; }
.fd-fine { font-size: 13px !important; color: var(--muted) !important; margin-top: 12px !important; line-height: 1.55; }
.fd-fine a, .fd-method a, .fd-detail-side a:not(.fd-btn) { color: var(--accent); font-weight: 600; }
.fd-dl { margin: 0; display: grid; }
.fd-dl > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.fd-dl > div:first-child { border-top: none; padding-top: 0; }
.fd-dl dt { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.fd-dl dd { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.fd-fund .fd-block:first-child .fd-dl > div:first-child dd { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fd-note { display: block; font-size: 13px !important; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 2px; }
.fd-flag { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px !important; background: var(--warn-wash); color: var(--warn) !important; border-radius: 10px; padding: 10px 12px; font-size: 14px !important; }
.fd-flag svg { flex: none; margin-top: 3px; }
.fd-detail-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; }
.fd-checked { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.fd-detail-side .fd-fine { margin: 0 !important; }
.fd-alt { font-size: 13.5px; }

.fd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.fd-btn:hover { background: var(--accent); }
.fd-fund .fd-btn { background: var(--st); }
.fd-fund .fd-btn:hover { background: var(--ink); }
.fd-btn-wide { width: 100%; }
.fd-btn-ghost { background: transparent; color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.fd-btn-ghost:hover { background: var(--surface); color: var(--accent-deep); border-color: var(--accent); }

/* ── method, siblings, treatment, related ─────────── */
.fd-method { margin: 52px 0 0; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.fd-method h2 { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.fd-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fd-method-grid p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.fd-method-grid strong { display: block; color: var(--ink); margin-bottom: 4px; }
.fd-method-foot { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.fd-siblings { margin: 40px 0 0; }
.fd-siblings h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.fd-others { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.fd-others a { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; transition: border-color 0.15s; }
.fd-others a:hover { border-color: var(--accent); }
.fd-others strong { font-size: 15px; color: var(--ink); }
.fd-others span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.fd-treatment {
  margin: 28px 0 72px; padding: 24px 28px; border-radius: var(--radius);
  background: var(--accent-wash); display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.fd-treatment h2 { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--accent-deep); }
.fd-treatment p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 640px; line-height: 1.6; }
.fd-treatment-links { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.fd-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 44px 0 0; }
.fd-related h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }

/* ── narrower screens ─────────────────────────────── */
@media (max-width: 1000px) {
  .fd-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fd-browse, .fd-related, .fd-method-grid { grid-template-columns: 1fr; }
  .fd-detail { grid-template-columns: 1fr; }
  .fd-detail-side { position: static; }
  .fd-treatment { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .fd-hero { padding: 28px 0 24px; }
  .fd-hero-hub { padding: 36px 0 16px; }
  .fd-hero .sub { font-size: 15.5px; }
  .fd-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fd-step a { padding: 10px 12px 11px; gap: 2px; }
  .fd-step-name { font-size: 14px; }
  .fd-step-line { display: none; }
  .fd-card { grid-template-columns: 1fr; gap: 0; }
  .fd-main { padding: 14px 14px 12px; }
  .fd-sum { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 8px; text-align: left; padding: 10px 14px; }
  .fd-sum .b { font-size: 21px; order: 1; }
  .fd-sum .s { order: 0; min-height: 0; }
  .fd-sum .k { order: 2; margin: 0; }
  .fd-rel { order: 3; margin: 0 0 0 auto; }
  .fd-minis { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 4px; }
  .fd-mini { flex: 0 0 78%; scroll-snap-align: start; }
  .fd-search { margin-top: 24px; padding: 11px 16px; }
  .fd-sentence { font-size: 17px; padding: 14px; gap: 6px 8px; }
  .fd-sentence select { font-size: 16px; }
  .fd-filters-row { padding: 12px 14px 14px; }
  .fd-filters-row label { flex: 1 1 calc(50% - 12px); }
  .fd-filters-row select { min-width: 0; width: 100%; }
  .fd-count { margin: 0; flex-basis: 100%; }
  .fd-dl > div { grid-template-columns: 1fr; gap: 2px; }
  .fd-treatment { padding: 20px; }
  .fd-method { padding: 20px; }
  .fd-block { padding: 16px; }
}