/* Franchise Flywheel recruitment funnel - shared stylesheet
   Used by index.html, experienced.html, getting-started.html.
   Design system per vault/businesses/mr-green/plans/2026-07-22-flywheel-page-design-spec.md.
   Hero contrast values (fixed, mode-independent) carried over verbatim from the
   post-fix build that passed Desiree's design-review gate (commit 4772e1a) -
   do not touch --green-strong-derived gradients, they were the defect. */
:root{
  --page:#EAF2DE; --paper:#FFFFFF; --panel:#F5FAEF; --panel-2:#EEF5E4;
  --ink:#24281E; --ink-soft:#566A36; --muted:#62655B;
  --green:#8CC444; --green-strong:#4F8200; --green-tint:#E9F3DA;
  --orange:#FF6C2F; --line:#D3E1BE; --rule:#B9C79B;
  --error:#B23A2E; --error-tint:#FBEAE7;
  --shadow:0 1px 3px rgba(36,40,30,.08),0 12px 34px rgba(36,40,30,.09);
  /* Fixed, mode-independent pair for the hero fork buttons only (see .fork a
     below) - deliberately NOT inside the dark-mode media query and NOT
     reusing --paper/--green-strong, both of which flip meaning between modes.
     The hero gradient they sit on is itself fixed/mode-independent, so the
     fork pill needs a matching fixed treatment or it loses its boundary
     against the hero in dark mode (measured 1.62-1.79:1, Desiree FAIL,
     2026-07-22). Do not move these into the dark-mode block. */
  --fork-bg:#FFFFFF; --fork-text:#3D6600;
}
@media (prefers-color-scheme: dark){
  :root{
    --page:#12150E; --paper:#1B2013; --panel:#1B2013; --panel-2:#222818;
    --ink:#EDF2E2; --ink-soft:#B9C79B; --muted:#8D927F;
    --green:#8CC444; --green-strong:#A8D96C; --green-tint:#26311A;
    --orange:#FF7A42; --line:#313A24; --rule:#3d4a2c;
    --error:#FF8A78; --error-tint:#3A1E1A;
    --shadow:0 1px 3px rgba(0,0,0,.5),0 12px 34px rgba(0,0,0,.45);
  }
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.book{ max-width:840px; margin:0 auto; padding:26px 20px 90px; }

/* ---- Hero / fork (all three pages share this exact background - it is the
   one that passed the contrast gate; page-to-page differentiation happens
   only via the eyebrow icon + hero-tag chip below, never via the gradient) ---- */
.cover{
  background:linear-gradient(150deg,#1B2E0E,#2F4D18 60%,#3E6420);
  color:#fff; border-radius:20px; padding:32px 34px 40px; box-shadow:var(--shadow);
  position:relative;
}
.cover .brand{ display:flex; align-items:center; margin-bottom:26px; }
.cover .brand img{ height:56px; width:auto; display:block; }
.cover .ek{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#E4F5C8; margin:0 0 16px; }
.cover .ek svg{ flex:none; width:15px; height:15px; }
.cover h1{ margin:0; font-size:clamp(30px,5.4vw,46px); font-weight:800; letter-spacing:-.02em; line-height:1.06; }
.cover .sub{ margin:16px 0 0; font-size:17px; color:#F2FAE4; max-width:56ch; }
/* Offer-page hero "lead" - carries the verbatim Slot 1 intro paragraph as the
   hero statement on experienced.html/getting-started.html (those pages have
   no separate approved headline copy, so the intro itself IS the hero text,
   styled prominently rather than as a plain white .intro panel). */
.cover .lead{ margin:20px 0 0; font-size:20px; font-weight:600; line-height:1.45; color:#fff; max-width:58ch; }

/* Hero tag / role-count chip - the per-page differentiator. Deliberately a
   DARK overlay (rgba(0,0,0,...)), never a lightening white overlay - darkening
   the already-passing gradient can only raise contrast against white text,
   never risk dropping it below the measured floor, regardless of where on the
   gradient the chip lands. Still resampled after build, never assumed. */
.hero-tag{
  display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:13px; font-weight:700; padding:9px 16px 9px 12px;
  border-radius:999px;
}
.hero-tag svg{ flex:none; width:17px; height:17px; }

.fork{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }
.fork a{
  flex:1 1 220px; text-align:center; background:var(--fork-bg); color:var(--fork-text);
  border:2px solid var(--fork-bg); border-radius:11px; padding:14px 20px;
  font-weight:700; font-size:15px; text-decoration:none; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  transition:transform 200ms ease-out, box-shadow 200ms ease-out;
  cursor:pointer;
}
.fork a:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.fork a:active{ transform:scale(0.97); }
.fork a:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
@media (max-width:600px){ .fork{ flex-direction:column; } .fork a{ flex:none; } }

/* ---- Generic intro / eyebrow ---- */
.intro{ margin-top:28px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 24px; }
.intro .eyebrow{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#3D6900; margin:0 0 8px; }
@media (prefers-color-scheme: dark){
  .intro .eyebrow{ color:var(--green-strong); }
}
.intro h2{ margin:0 0 8px; font-size:22px; font-weight:800; letter-spacing:-.015em; line-height:1.15; color:var(--ink); }
.intro p{ margin:0; font-size:14.5px; color:var(--ink-soft); max-width:none; }

/* ---- Soft note panel (Page 2 Slot 4, "a word on what's ahead") ---- */
.note{ margin-top:22px; background:var(--panel-2); border:1px dashed var(--rule); border-radius:12px; padding:16px 20px; }
.note p{ margin:0; font-size:13.5px; color:var(--ink-soft); }

/* ---- Role card grid ---- */
.two{ margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:16px 26px; }
@media (max-width:600px){ .two{ grid-template-columns:1fr; } }
/* A single card dropped into .two (Path B / getting-started) naturally takes
   the first 1fr column, so it renders at the identical width to one card in
   a Path A pair, never full-width - reuse .two for the single-card case too,
   don't add a separate grid utility (matches the passed design-review
   measurement: single card width === paired card width, 387px @ 1440px). */

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:32px 34px; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
@media (max-width:600px){ .card{ padding:24px 22px; } }
.card .badge{
  width:46px; height:46px; border-radius:12px; background:var(--green-tint);
  color:var(--green-strong); font-weight:800; font-size:20px;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.card .eyebrow{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green-strong); margin:0 0 4px; }
.card h3{ margin:0 0 10px; font-size:23px; font-weight:800; letter-spacing:-.015em; line-height:1.15; color:var(--ink); }
.card .summary{ margin:0 0 6px; font-size:15px; font-weight:700; color:var(--ink); }
.card p{ font-size:14.5px; color:var(--ink-soft); margin:0 0 14px; }
.card .q{ font-size:14px; font-weight:700; margin:18px 0 8px; color:var(--ink); }
.card .checks{ display:flex; flex-direction:column; gap:11px; margin:0 0 4px; }
.card .chk{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--ink); }
.card .chk .sq{ flex:none; width:20px; height:20px; border:2px solid var(--green-strong); border-radius:5px; margin-top:1px; }
.card .contractor-note{ font-size:13px; color:var(--muted); margin:14px 0 0; font-style:italic; }
.card .cta{ margin-top:auto; padding-top:22px; }

/* ---- Buttons (primary CTA) ---- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--green-strong); color:#fff; border:none; border-radius:11px;
  padding:14px 28px; font-weight:700; font-size:15px; text-decoration:none;
  cursor:pointer; min-height:44px; width:100%;
  transition:opacity 200ms ease-out, transform 200ms ease-out;
}
.btn-primary:hover{ opacity:.92; }
.btn-primary:active{ transform:scale(0.97); }
.btn-primary:focus-visible{ outline:3px solid var(--green-strong); outline-offset:3px; }
.btn-primary[disabled]{ opacity:.7; cursor:default; }
@media (prefers-color-scheme: dark){
  .btn-primary{ color:#12150E; }
}

/* ---- Trust / FAQ ---- */
.ws{ margin-top:28px; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:32px 34px; box-shadow:var(--shadow); }
@media (max-width:600px){ .ws{ padding:24px 22px; } }
.ws .eyebrow{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green-strong); margin:0 0 8px; }
.ws h2{ margin:0 0 22px; font-size:24px; font-weight:800; letter-spacing:-.015em; line-height:1.15; color:var(--ink); }
.faq{ display:flex; flex-direction:column; gap:18px; }
.faq .qa .q{ font-size:15px; font-weight:700; color:var(--ink); margin:0 0 6px; }
.faq .qa .a{ font-size:14.5px; color:var(--ink-soft); margin:0; }
.callout{ background:var(--green-tint); border-radius:10px; padding:12px 16px; font-size:13.5px; color:var(--ink-soft); margin-top:18px; }
.callout b{ color:var(--ink); }

/* ---- Form ---- */
.field{ margin-bottom:22px; }
.field label.field-label{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.field label.field-label .opt{ font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0; }
.field label.field-label .req{ color:var(--muted); font-weight:400; }
.text-input, select.text-input{
  width:100%; height:46px; border:1.5px solid var(--rule); border-radius:9px;
  padding:10px 14px; background:var(--paper); color:var(--ink);
  font-size:16px; font-family:inherit;
}
.text-input:focus, select.text-input:focus{
  outline:none; border-color:var(--green-strong);
  box-shadow:0 0 0 4px var(--green-tint);
}
select.text-input{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1L7 7L13 1' stroke='%234F8200' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
@media (prefers-color-scheme: dark){
  select.text-input{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1L7 7L13 1' stroke='%23A8D96C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }
}
.field-error{ display:none; color:var(--error); font-size:13px; margin-top:6px; }
.field.has-error .text-input, .field.has-error select.text-input{ border-color:var(--error); }
.field.has-error .field-error{ display:block; }

.choice-group{ display:flex; flex-direction:column; gap:2px; }
.choice-row{ position:relative; display:flex; align-items:center; gap:12px; padding:9px 4px; min-height:44px; cursor:pointer; }
.choice-row input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.choice-box{
  flex:none; width:20px; height:20px; border:2px solid var(--green-strong);
  border-radius:5px; position:relative; background:transparent;
}
.choice-box.round{ border-radius:50%; }
.choice-row input:checked + .choice-box{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'><path d='M1 5L4.5 8.5L11 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:center; background-color:var(--green-strong);
}
.choice-row input:checked + .choice-box.round{
  background-image:none; background-color:transparent;
}
.choice-row input:checked + .choice-box.round::after{
  content:""; position:absolute; top:4px; left:4px; width:8px; height:8px;
  border-radius:50%; background:var(--green-strong);
}
.choice-row input:focus-visible + .choice-box{ outline:2px solid var(--green-strong); outline-offset:3px; }
.choice-row .choice-label{ font-size:14.5px; color:var(--ink); }

.other-suburb{ margin-top:10px; display:none; }
.other-suburb.is-visible{ display:block; }

#apply .two{ margin-top:0; gap:16px 20px; }
#apply .field{ margin-bottom:0; }
#apply .two .field{ margin-bottom:22px; }

.form-summary-error{
  display:none; background:var(--error-tint); color:var(--error); border-radius:10px;
  padding:12px 16px; font-size:14px; font-weight:700; margin-bottom:20px;
}
.form-summary-error.is-visible{ display:block; }

.submit-row{ margin-top:6px; }
.spinner{
  display:inline-block; width:16px; height:16px; margin-right:9px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:spin 700ms linear infinite; vertical-align:-3px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.success-panel{
  background:var(--green-tint); border-radius:14px; padding:32px 30px; text-align:center;
}
.success-panel .check{
  width:52px; height:52px; margin:0 auto 16px; border:3px solid var(--green-strong);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.success-panel .check svg{ width:24px; height:20px; }
.success-panel h3{ margin:0 0 8px; font-size:20px; font-weight:800; color:var(--ink); }
.success-panel p{ margin:0; font-size:14.5px; color:var(--ink-soft); }

.form-fallback-error{
  display:none; background:var(--error-tint); color:var(--error); border-radius:10px;
  padding:14px 16px; font-size:14px; margin-top:16px;
}
.form-fallback-error.is-visible{ display:block; }

/* ---- Footer ---- */
.foot{ margin-top:30px; padding:0 6px; text-align:center; }
.foot p{ font-size:12.5px; color:var(--muted); margin:0 0 8px; line-height:1.6; }