/* ============================================================
   /adhd/ — case conferencing for GPs managing ADHD under the state shared-care reforms.
   Dark hero with a conference mock → free ribbon → why (shared .card grid) → the state selector
   (radio-driven, no JS) → the team ring → the item numbers (deep band) → how it runs → FAQ → CTA.
   Everything is tokenised; no raw colour outside :root.
   ============================================================ */

/* ---- Hero ---- */
.ad-hero { position:relative; background:var(--grad-hero); color:#fff; padding:172px 0 var(--space-3xl); overflow:hidden; }
.ad-hero .wrap { position:relative; z-index:2; }
.ad-hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--space-2xl); align-items:center; }
.ad-hero h1 { color:#fff; letter-spacing:-.02em; margin:0 0 var(--space-m); max-width:14em; }
.ad-hero h1 .hl { color:var(--color-accent); }
.ad-hero .lede { color:rgba(255,255,255,.9); max-width:34em; margin:0 0 var(--space-l); }
.ad-hero .btn-row { display:flex; gap:var(--space-xs); flex-wrap:wrap; }
.ad-hero-note { margin:var(--space-m) 0 0; font-size:var(--text-sm); color:rgba(255,255,255,.72); max-width:34em; }

/* The conference mock: a light card on the dark hero, the same device as the platform
   screenshot on /gp/ but drawn, so it can show an ADHD team specifically. */
.ad-mock { position:relative; background:var(--color-surface); color:var(--color-ink); border-radius:var(--radius-xl);
  box-shadow:0 30px 70px rgba(13,38,56,.45); overflow:hidden; max-width:460px; margin-left:auto; }
.ad-mock-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs);
  padding:var(--space-xs) var(--space-s); background:var(--grad-deep); color:#fff; font-size:var(--text-xs);
  font-weight:var(--weight-bold); letter-spacing:.08em; text-transform:uppercase; }
.ad-mock-head .live { display:inline-flex; align-items:center; gap:6px; }
.ad-mock-head .live::before { content:""; width:8px; height:8px; border-radius:var(--radius-full); background:var(--color-success);
  box-shadow:0 0 0 3px oklch(from var(--color-success) l c h / 30%); }
.ad-mock-body { padding:var(--space-s) var(--space-s) var(--space-xs); }
.ad-mock-patient { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs);
  padding-bottom:var(--space-xs); margin-bottom:var(--space-2xs); border-bottom:1px solid var(--color-border-soft); }
.ad-mock-patient strong { display:block; color:var(--color-secondary); font-size:var(--text-md); }
.ad-mock-patient span { font-size:var(--text-xs); color:var(--color-ink-soft); }
.ad-mock-tag { flex:none; font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--brand-600);
  background:var(--brand-50); border-radius:var(--radius-full); padding:3px var(--space-xs); }
.ad-mock-row { display:flex; align-items:center; gap:var(--space-xs); padding:var(--space-2xs) 0; }
.ad-mock-row + .ad-mock-row { border-top:1px solid var(--color-border-soft); }
.ad-mock-av { flex:none; width:34px; height:34px; border-radius:var(--radius-full); background:var(--grad-chip); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:var(--text-xs); font-weight:var(--weight-extrabold); letter-spacing:.02em; overflow:hidden; }
.ad-mock-av img { width:100%; height:100%; object-fit:cover; display:block; }
.ad-mock-av.pale { background:var(--brand-50); color:var(--color-secondary); }
.ad-mock-row > div { min-width:0; flex:1; }
.ad-mock-row > div > strong { display:block; color:var(--color-secondary); font-size:var(--text-sm); line-height:var(--line-snug); }
.ad-mock-row > div > span { display:block; font-size:var(--text-xs); color:var(--color-ink-soft); line-height:var(--line-snug);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-mock-row .tick { flex:none; width:18px; height:18px; border-radius:var(--radius-full); background:var(--grad-ok); color:#fff;
  display:flex; align-items:center; justify-content:center; }
.ad-mock-row .tick svg { width:11px; height:11px; stroke:#fff; fill:none; stroke-width:3; }
.ad-mock-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs);
  padding:var(--space-xs) var(--space-s); background:var(--brand-25); font-size:var(--text-xs); color:var(--color-ink-soft); }
.ad-mock-foot strong { color:var(--color-secondary); }
/* The floating "free" card hangs off the mock's bottom-left; .float-card is shared. */
.ad-hero-visual { position:relative; }
.ad-hero-visual .float-card { left:-28px; bottom:-22px; z-index:3; }
@media (prefers-reduced-motion:no-preference) {
  .ad-hero-visual .float-card { animation:ad-float 5.5s ease-in-out infinite; }
}
@keyframes ad-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ---- State selector ----
   Radios are visually hidden (.sr-only); the labels are the tabs. :has() shows the matching panel,
   so it works with no JS. Without :has() support every panel shows stacked, which still reads. */
.ad-sel { max-width:980px; margin:0 auto; }
.ad-sel-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2xs); margin:0 0 var(--space-m); }
.ad-sel-tabs label { cursor:pointer; padding:var(--space-2xs) var(--space-s); border-radius:var(--radius-full); font-weight:var(--weight-bold);
  font-size:var(--text-md); color:var(--brand-700); background:var(--brand-25); border:1px solid var(--brand-100); transition:background .15s var(--ease), color .15s var(--ease); }
.ad-sel-tabs label:hover { background:var(--brand-50); }
.ad-sel-tabs input:focus-visible + label { outline:2px solid var(--color-primary); outline-offset:2px; }
.ad-sel-tabs input:checked + label { background:var(--color-secondary); color:#fff; border-color:var(--color-secondary); box-shadow:var(--shadow-sm); }
.ad-panel { background:var(--brand-25); border-radius:var(--radius-xl); padding:var(--space-l); box-shadow:var(--shadow-xs); }
.ad-panel + .ad-panel { margin-top:var(--space-m); }
@supports selector(:has(a)) {
  .ad-panel { display:none; }
  .ad-sel:has(#ad-nsw:checked) .ad-panel[data-state="nsw"], .ad-sel:has(#ad-qld:checked) .ad-panel[data-state="qld"],
  .ad-sel:has(#ad-wa:checked)  .ad-panel[data-state="wa"],  .ad-sel:has(#ad-sa:checked)  .ad-panel[data-state="sa"],
  .ad-sel:has(#ad-vic:checked) .ad-panel[data-state="vic"], .ad-sel:has(#ad-tas:checked) .ad-panel[data-state="tas"],
  .ad-sel:has(#ad-act:checked) .ad-panel[data-state="act"], .ad-sel:has(#ad-nt:checked)  .ad-panel[data-state="nt"] { display:block; }
}
.ad-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-s); flex-wrap:wrap; margin:0 0 var(--space-m); }
.ad-panel-head h3 { margin:0 0 2px; font-size:var(--text-xl); color:var(--color-secondary); }
.ad-panel-status { margin:0; font-size:var(--text-sm); color:var(--color-ink-soft); }
.ad-model { font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.06em; text-transform:uppercase;
  border-radius:var(--radius-full); padding:5px var(--space-xs); white-space:nowrap; flex:none; }
.ad-model.initiate { background:var(--color-secondary); color:#fff; }
.ad-model.continue { background:var(--brand-100); color:var(--brand-800); }
.ad-model.authority { background:var(--color-surface); color:var(--brand-700); border:1px solid var(--brand-200); }
.ad-asks { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-l); }
.ad-asks-h { display:contents; }
.ad-asks-h span { font-size:var(--text-xs); font-weight:var(--weight-extrabold); letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink-soft);
  padding-bottom:var(--space-2xs); border-bottom:1px solid var(--color-border); }
.ad-asks-h span:last-child { color:var(--color-primary); }
.ad-ask { display:contents; }
.ad-ask p { margin:0; padding:var(--space-s) 0; border-bottom:1px solid var(--color-border-soft); font-size:var(--text-md); line-height:var(--line-relaxed); }
.ad-ask .ask { color:var(--color-ink-soft); }
.ad-ask .ask strong { color:var(--color-secondary); font-weight:var(--weight-bold); }
.ad-ask .help { color:var(--color-ink); font-weight:var(--weight-medium); }
.ad-panel-foot { margin:var(--space-m) 0 0; font-size:var(--text-xs); color:var(--color-ink-muted); line-height:var(--line-relaxed); }

/* ---- Outcomes ---- */
.ad-outcomes { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--space-2xl); align-items:start; }
.ad-outcomes-h { margin:0 0 var(--space-xs); font-size:var(--text-xs); font-weight:var(--weight-extrabold); letter-spacing:.1em; text-transform:uppercase; color:var(--color-primary); }
.ad-ev { list-style:none; margin:0; padding:0; }
.ad-ev li { padding:var(--space-s) 0; border-top:1px solid var(--color-border-soft); }
.ad-ev li:last-child { border-bottom:1px solid var(--color-border-soft); }
.ad-ev strong { display:block; color:var(--color-secondary); font-size:var(--text-md); line-height:var(--line-snug); margin-bottom:2px; }
.ad-ev span { font-size:var(--text-md); color:var(--color-ink-soft); line-height:var(--line-relaxed); }
.ad-ev.plain li { padding:var(--space-xs) 0; }
.ad-ev.plain span { color:var(--color-ink); }
.ad-fact-big { background:var(--grad-deep); border-radius:var(--radius-xl); padding:var(--space-xl); box-shadow:var(--shadow-md); color:#fff; }
.ad-fact-big .ad-outcomes-h { color:var(--color-accent); }
.ad-fact-big .big { margin:0 0 var(--space-m); font-size:var(--step-3); font-weight:var(--weight-extrabold); line-height:1.15; letter-spacing:-.02em; color:#fff; }
.ad-fact-big .sub { margin:0; font-size:var(--text-md); color:rgba(255,255,255,.82); font-variant-numeric:tabular-nums; }
.ad-fact-big sup button { color:#fff; }
.ad-outcomes .refs-trigger { margin-top:var(--space-m); }

/* ---- The team hub ----
   Full width: the GP in the centre, ten compact discipline cards on an ellipse around them,
   placed with cos()/sin() in calc() (--a per card, from the template). Below 900px the ellipse
   is dropped and the cards become a plain two-column grid with the GP first. */
.ad-hub { position:relative; aspect-ratio:2 / 1; min-height:560px; }
.ad-hub::before { content:""; position:absolute; left:50%; top:50%; width:72%; height:72%; transform:translate(-50%,-50%);
  border-radius:50%; border:1.5px dashed var(--brand-200); pointer-events:none; }
.ad-hub-centre { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; width:220px;
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.ad-hub-centre .av { width:120px; height:120px; border-radius:var(--radius-full); overflow:hidden; margin-bottom:var(--space-xs);
  box-shadow:0 0 0 6px var(--color-surface), 0 0 0 8px var(--brand-200), var(--shadow-md); background:var(--brand-100); }
.ad-hub-centre .av img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.ad-hub-centre strong { color:var(--color-secondary); font-size:var(--text-xl); font-weight:var(--weight-extrabold); line-height:1; }
.ad-hub-card { position:absolute; z-index:1; width:196px; transform:translate(-50%,-50%);
  left:calc(50% + 43% * cos(var(--a))); top:calc(50% + 42% * sin(var(--a)));
  display:flex; align-items:flex-start; gap:var(--space-xs); background:var(--color-surface); border:1px solid var(--color-border-soft);
  border-radius:var(--radius-lg); padding:var(--space-xs) var(--space-s); box-shadow:var(--shadow-xs); }
.ad-hub-card .chip-ic { margin:0; width:32px; height:32px; border-radius:var(--radius-md); }
.ad-hub-card .chip-ic svg { width:17px; height:17px; }
.ad-hub-card strong { display:block; color:var(--color-secondary); font-size:var(--text-sm); line-height:var(--line-snug); margin-bottom:2px; }
.ad-hub-card p { margin:0; font-size:var(--text-xs); color:var(--color-ink-soft); line-height:var(--line-normal); }
.ad-team-note { max-width:760px; margin:var(--space-l) auto 0; text-align:center; font-size:var(--text-sm); color:var(--color-ink-soft); line-height:var(--line-relaxed); }

/* ---- The item numbers (deep band) ---- */
.ad-items { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-m); }
.ad-family { background:var(--color-surface); border-radius:var(--radius-xl); padding:var(--space-l); box-shadow:var(--shadow-md); }
.ad-family h3 { margin:0 0 var(--space-3xs); color:var(--color-secondary); font-size:var(--text-lg); }
.ad-family > p { margin:0 0 var(--space-s); font-size:var(--text-sm); color:var(--color-ink-soft); line-height:var(--line-relaxed); }
.ad-family table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.ad-family th, .ad-family td { text-align:left; padding:var(--space-2xs) 0; border-top:1px solid var(--color-border-soft); vertical-align:top; }
.ad-family th { font-weight:var(--weight-bold); color:var(--color-secondary); width:46%; padding-right:var(--space-xs); }
.ad-family td { color:var(--color-ink); font-variant-numeric:tabular-nums; }
.ad-family td a { color:var(--color-primary); font-weight:var(--weight-semibold); }
.ad-family td .sep { color:var(--color-ink-muted); margin:0 .15em; }
.ad-family td small { display:block; color:var(--color-ink-soft); font-size:var(--text-xs); margin-top:2px; }
.ad-items .btn-row, #items .btn-row, #how .btn-row { display:flex; justify-content:center; margin-top:var(--space-l); }
.ad-items-foot { margin:var(--space-m) auto 0; max-width:60em; text-align:center; font-size:var(--text-sm); color:rgba(255,255,255,.78); line-height:var(--line-relaxed); }
.ad-items-foot a { color:#fff; }

/* ---- How it runs: the platform screenshot beside the three steps ---- */
.ad-how { display:grid; grid-template-columns:1.15fr 1fr; gap:var(--space-2xl); align-items:center; }
.ad-how-shot img { display:block; width:100%; height:auto; filter:drop-shadow(0 24px 48px rgba(13,38,56,.22)); }
.ad-how .ad-steps { grid-template-columns:1fr; gap:var(--space-s); }
.ad-how .ad-step { padding:var(--space-m) var(--space-m) var(--space-m) calc(var(--space-m) + 48px); }
.ad-how .ad-step::before { position:absolute; left:var(--space-m); top:var(--space-m); margin:0; }
.ad-how .btn-row { display:flex; margin-top:var(--space-m); }

.ad-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-m); counter-reset:ad; }
.ad-step { position:relative; background:var(--brand-25); border-radius:var(--radius-xl); padding:var(--space-l); box-shadow:var(--shadow-xs); counter-increment:ad; }
.ad-step::before { content:counter(ad); display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-bottom:var(--space-s);
  border-radius:var(--radius-full); background:var(--grad-chip); color:#fff; font-weight:var(--weight-extrabold); font-size:var(--text-sm); }
.ad-step h3 { margin:0 0 var(--space-2xs); font-size:var(--text-lg); color:var(--color-secondary); }
.ad-step p { margin:0; font-size:var(--text-md); color:var(--color-ink-soft); line-height:var(--line-relaxed); }
.ad-step p + p { margin-top:var(--space-xs); }
.ad-step p strong { color:var(--color-secondary); }

/* ---- Fine print ---- */
.ad-fine { max-width:760px; margin:var(--space-l) auto 0; font-size:var(--text-xs); color:var(--color-ink-muted); line-height:var(--line-relaxed); text-align:center; }

/* ---- Reveal timing: tall blocks, finish the fade as they enter (same as outreach.css) ---- */
@supports (animation-timeline: view()) {
  .reveal { animation-range: entry 0% entry 35%; }
  .reveal.d1 { animation-range: entry 5% entry 40%; }
  .reveal.d2 { animation-range: entry 10% entry 45%; }
  .reveal.d3 { animation-range: entry 15% entry 50%; }
}

/* ---- Responsive ---- */
@media (max-width:980px) {
  .ad-hero-grid { grid-template-columns:1fr; gap:var(--space-xl); }
  .ad-mock { margin:0 auto; }
  .ad-hero-visual .float-card { left:0; }
  .ad-items { grid-template-columns:1fr; }
  .ad-how { grid-template-columns:1fr; gap:var(--space-l); }
  .ad-outcomes { grid-template-columns:1fr; gap:var(--space-l); }
  .ad-steps { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .ad-hub { aspect-ratio:auto; min-height:0; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-xs); }
  .ad-hub::before { display:none; }
  .ad-hub-centre { position:static; transform:none; width:auto; grid-column:1 / 3; padding:var(--space-s) 0; }
  .ad-hub-card { position:static; transform:none; width:auto; }
}
@media (max-width:560px) {
  .ad-hub { grid-template-columns:1fr; }
  .ad-hub-centre { grid-column:1; }
}
@media (max-width:680px) {
  .ad-hero { padding-top:140px; }
  .ad-asks { grid-template-columns:1fr; gap:0; }
  .ad-asks-h span:last-child { display:none; }
  .ad-ask .ask { border-bottom:0; padding-bottom:var(--space-3xs); }
  .ad-ask .help { padding-top:0; }
}