/* ---- Hero ---- */
.ah-hero { position:relative; background:var(--grad-hero); color:#fff; padding:172px 0 var(--space-3xl); overflow:hidden; }
.ah-hero .wrap { position:relative; z-index:2; }
/* The copy column carries two btn-lg side by side ("Book a pilot conference" + "Talk to our team"),
   which needs ~640px — at the even 1.05fr/1fr split they wrapped onto separate lines. Same reason
   /case-conferencing/'s hero is uneven; the visual is happy with the narrower half. */
.ah-hero-grid { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); gap:var(--space-2xl); align-items:center; }
.ah-hero h1 { color:#fff; letter-spacing:-.02em; margin:0 0 var(--space-m); }
.ah-hero h1 .hl { color:var(--color-accent); }
.ah-hero .lede { color:rgba(255,255,255,.9); max-width:33em; margin:0 0 var(--space-s); }
.ah-hero .tagline { font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--color-accent); margin:0 0 var(--space-l); }
.ah-hero .btn-row { display:flex; gap:var(--space-xs); flex-wrap:wrap; }
.ah-hero .hero-note { margin:var(--space-m) 0 0; font-size:var(--text-sm); color:rgba(255,255,255,.72); }

.ah-hero-visual { position:relative; }
.ah-hero-visual img { width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(13,38,56,.55)); border-radius:var(--radius-lg); }
.ah-badge { position:absolute; background:#fff; color:var(--color-secondary); border-radius:var(--radius-lg); box-shadow:var(--shadow-4);
  padding:var(--space-xs) var(--space-s); display:flex; align-items:center; gap:var(--space-xs); font-weight:var(--weight-bold); z-index:3; }
.ah-badge .big { font-size:var(--text-xl); color:var(--color-primary); line-height:var(--line-none); }
.ah-badge .lbl { font-size:var(--text-xs); color:var(--color-ink-soft); font-weight:var(--weight-semibold); line-height:var(--line-snug); }
.ah-badge.b1 { top:8%; left:-26px; }
.ah-badge.b2 { bottom:10%; right:-20px; }
@media (prefers-reduced-motion: no-preference) {
  .ah-badge.b1 { animation:ah-float 6s ease-in-out infinite; }
  .ah-badge.b2 { animation:ah-float 6s ease-in-out infinite 1.5s; }
}
@keyframes ah-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* ---- Money section background ---- */
.ah-money { background:linear-gradient(180deg, var(--brand-50), #fff); }

/* ---- Stat-strip border fix for 2-col layout ---- */
@media (max-width:760px) {
  .stat-strip .stat:nth-child(2) { border-right:0; }
  .stat-strip .stat { border-bottom:1px solid var(--color-border-soft); }
  .ah-hero { padding:140px 0 var(--space-3xl); }
}

/* ---- Calculator ---- */
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-l); align-items:stretch; }
/* The calculator alone, under the Get-rebated grid (the bars moved up beside it). */
.calc-grid.one { grid-template-columns:1fr; }

/* ---- Get rebated on the dark band ----
   .money-lede and the fig-card label are written for a light ground; on .cc2-deep they have to be
   lifted or they sit at unreadable contrast. The fig cards themselves stay light, which is the
   point — the figures read as objects on the dark. */
.cc2-deep .money-lede { color:rgba(255,255,255,.86); }
.cc2-deep .money-lede strong { color:#fff; }
.cc2-deep .money-grid h2 .hl { color:var(--color-accent); }

/* bars panel flex layout */
.calc-grid .barchart { display:flex; flex-direction:column; }
.calc-grid .barchart .cap { margin-bottom:var(--space-s); }
.calc-grid .barchart .btn { align-self:flex-start; margin-top:auto; }

/* ---- 100% free hero card shadow (on outer wrapper, outside clip-path) ---- */
.gp-hero-card-wrap { position: relative; }
.gp-hero-card-wrap::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-xl); box-shadow: 0 16px 40px rgba(13,38,56,.2); pointer-events: none; }

/* ---- situations inside the two purpose cards (#what) ---- */

/* The cinematic carousel styles live in hiw-cine.css (shared with /specialists/). */

/* ---- Responsive ---- */
@media (max-width:980px) {
  .ah-hero-grid { grid-template-columns:1fr; gap:var(--space-xl); }
  .ah-hero-visual { max-width:520px; margin:0 auto; }
  .ah-badge.b1 { left:0; }
  .ah-badge.b2 { right:0; }
}
@media (max-width:880px) {
  .calc-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .calc-out { grid-template-columns:1fr; }
}

/* ⚠️ ScrollTrigger pins and CSS smooth scrolling are incompatible — this must stay.
   reset.css sets :where(html){scroll-behavior:smooth}. ScrollTrigger measures a pin by
   scrolling to 0 and back; with smooth scrolling that is ASYNCHRONOUS, so it measures at
   whatever position the page is actually at and computes the pin's start as the viewport
   rect top with the scroll offset missing. On a refresh part-way down the page that puts
   the start ~one scroll-position too early, the pin engages while the reader is still in
   the section above, and the pinned section renders fixed over it.
   Diagnosed 2026-08-23 on /gp/: measured start 3105 against a true offset of 7101, the
   difference being exactly the restored scroll position. Forcing auto gave 7101 and a
   correct pin. :where() has zero specificity so a bare html selector wins. */
html { scroll-behavior: auto; }

/* ---- Situation list inside the two "ways to use it" cards ----
   The six caseUses split across the advisory/coordination cards. They were first rendered with
   .cc2-points, which is deliberate fine print (text-sm, ink-soft, dash marker) — under a text-md
   paragraph in a .card that reads as cramped grey noise rather than a list of situations. Here the
   label gets its own line in the heading colour, the blurb sits under it, and a rule separates the
   set from the paragraph above. */
.use-list { list-style:none; margin:var(--space-m) 0 0; padding:var(--space-m) 0 0;
  border-top:1px solid var(--color-border-soft);
  display:flex; flex-direction:column; gap:var(--space-s); }
.use-list li { font-size:var(--text-md); line-height:var(--line-normal); color:var(--color-ink-soft); }
.use-list strong { display:block; margin-bottom:2px; color:var(--color-secondary);
  font-weight:var(--weight-bold); letter-spacing:var(--tracking-snug); }

/* ---- Rebate strip above the earnings calculator ----
   Full width, one row, sitting between the section head and .calc-grid. The calculator answers
   "what is a week of this worth"; this puts the per-conference rebates under that answer. */
/* One full-width card since the two item-tier cards were cut (owner, 2026-09-11) — the strip is
   now a single headline figure spanning the section, not a row of three. */
.calc-rebates { display:grid; grid-template-columns:1fr; gap:var(--space-m);
  margin-bottom:var(--space-l); }
.calc-rebate { background:var(--color-surface); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xs); padding:var(--space-l) var(--space-xl);
  display:flex; align-items:baseline; gap:var(--space-l); flex-wrap:wrap; }
.calc-rebate p { flex:1 1 18em; }
.calc-rebate .v { font-size:var(--text-xl); font-weight:var(--weight-extrabold);
  color:var(--color-secondary); letter-spacing:var(--tracking-tight); line-height:1.1; }
.calc-rebate .v small { font-size:var(--text-md); font-weight:var(--weight-semibold);
  color:var(--color-ink-soft); }
.calc-rebate p { margin:var(--space-2xs) 0 0; font-size:var(--text-sm);
  color:var(--color-ink-soft); line-height:var(--line-normal); }
@media (max-width:820px) { .calc-rebate { display:block; padding:var(--space-m) var(--space-l); } }

/* ---- CPD: the 50-hour year ----
   A ledger, not a centred head + paragraph: statement left, the year drawn as a single stacked bar
   right, three facts under a rule. One hue, light-to-dark, so the highlighted segment reads as
   "this one" without a legend doing the work (the legend is there for names, not identity).
   2px surface gaps between segments; labels are ink, never the segment colour. */
.cpd-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--space-xl);
  align-items:center; }
.cpd-lead h2 { margin:0 0 var(--space-s); }
.cpd-lede { margin:0; font-size:var(--text-lg); line-height:var(--line-relaxed); color:var(--color-ink-soft); }
.cpd-lede strong { color:var(--color-secondary); }
.cpd-lede a { color:var(--color-primary); font-weight:var(--weight-semibold); }

.cpd-year { background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
  padding:var(--space-l); }
.cpd-year-head { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-s);
  flex-wrap:wrap; margin-bottom:var(--space-s); }
.cpd-year-title { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-ink-muted);
  text-transform:uppercase; letter-spacing:.06em; }
.cpd-year-hero { font-size:var(--text-md); color:var(--color-ink-soft); }
/* A word, not a numeral, so one step smaller than a figure would be — "Two-thirds" at step-3 ran
   the full width of the card head. */
.cpd-year-hero strong { font-size:var(--step-2); font-weight:var(--weight-extrabold); color:var(--color-secondary);
  line-height:1; margin-right:.2em; letter-spacing:var(--tracking-tight); }

.cpd-bar { display:flex; gap:2px; height:64px; }
.cpd-seg { display:flex; flex-direction:column; justify-content:center; padding:0 var(--space-s); min-width:0;
  overflow:hidden; white-space:nowrap; }
.cpd-seg:first-child { border-radius:var(--radius-md) 0 0 var(--radius-md); }
.cpd-seg:last-child  { border-radius:0 var(--radius-md) var(--radius-md) 0; }
.cpd-seg b { font-weight:var(--weight-extrabold); font-size:var(--text-md); }
.cpd-seg span { font-size:var(--text-xs); font-weight:var(--weight-semibold); opacity:.9; }
.cpd-seg.ea span, .cpd-seg.mo span { opacity:.75; }
.cpd-seg.ea { background:var(--brand-100); color:var(--color-secondary); }
.cpd-seg.mo { background:var(--brand-200, var(--brand-100)); color:var(--color-secondary); }
.cpd-seg.rp { background:var(--grad-chip); color:#fff; }

.cpd-legend { list-style:none; margin:var(--space-xs) 0 0; padding:0; display:flex; flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-m); font-size:var(--text-sm); color:var(--color-ink-soft); }
.cpd-legend li { display:inline-flex; align-items:center; gap:var(--space-2xs); }
.cpd-legend i { width:10px; height:10px; border-radius:2px; display:inline-block; }
.cpd-legend i.ea { background:var(--brand-100); }
.cpd-legend i.mo { background:var(--brand-200, var(--brand-100)); }
.cpd-legend i.rp { background:var(--color-primary); }
.cpd-note { margin:var(--space-s) 0 0; font-size:var(--text-xs); line-height:var(--line-normal);
  color:var(--color-ink-muted); }
.cpd-note a { color:var(--color-primary); }


@media (max-width:900px) {
  .cpd-grid { grid-template-columns:1fr; gap:var(--space-l); }
}
@media (max-width:560px) {
  .cpd-seg span { display:none; }
  .cpd-year { padding:var(--space-m); }
}

/* ---- Band alternation through the journey run (owner, 2026-09-14) ------------------------
   ⚠️ THESE GROUNDS DEPEND ON EACH OTHER — read the whole run before changing one.
   Two sections were removed from this stretch on 2026-09-14 ("Our platform", which was `tint`,
   and the standalone #money/#cpd), which each time left page-ground blocks adjacent with nothing
   between them. The run is:
       #complexity (page) → #what (dark) → #twoways (tint) → #why (page) → #evidence (pale)
       → #how (page) → #rules (tint) → #logistics (page) → #earn (tint) → #care-cycle (page,
       set via careCycleSectionClass) → #support (tint) → #same-team (page) → #free (dark)
       → #compliance (page) → #testimonials (tint) → #faq (pale)
   so #rules, #support and #testimonials take a ground here; #how, #logistics, #care-cycle and
   #same-team sit on the page ground (#earn carries its own tint in the markup).
   #complexity is page-ground because the LOGOS BAND above it is white.
   ⚠️ The ground belongs to the POSITION in the run, not to the section. Sections have been moved
   in and out of this stretch several times on 2026-09-14 (#support and #same-team swapped, #types
   moved down into it) and each time the grounds had to be re-dealt from the top, not carried along
   with the section that moved. Re-read the whole run before changing one.
   ⚠️ Scoped to this page, not put on the partials: #rules comes from medicare-summary.njk and
   #same-team from same-team.njk, both shared with /specialists/, where they sit between different
   neighbours. (/specialists/ gives its own #support a ground from specialists.css — same idea,
   opposite answer, because that page's run differs.) */
section.block#rules,
section.block#support,
section.block#testimonials { background: var(--color-surface); }

/* Two joins the owner called out as over-padded (2026-09-14). Both were 4xl meeting 4xl:
   the logos band into #complexity ("The unfortunate truth"), and #compliance into #testimonials
   ("GPs on what actually changed"), the latter with no ground change either — #testimonials now
   takes one above. */
section.block#complexity { padding-top: var(--space-2xl); }
section.block#compliance { padding-bottom: var(--space-2xl); }
section.block#testimonials { padding-top: var(--space-2xl); }