/* 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; } }
/* SUPERSEDED 2026-07-23: the note below (single card left-aligned at
   paired-card width, 387px @ 1440px, dead right gutter) read as broken in
   practice - Brett flagged it as half-width/left-aligned with an empty right
   half. Fixed via the page-scoped .two.single modifier immediately below:
   the lone Cleaning Contractor card on getting-started.html now centres
   itself at a deliberate single-card max-width instead of sitting in the
   first grid column of an unused two-column track. experienced.html's
   plain .two (no .single class) is untouched - still the real 1fr/1fr pair. */

/* Single-card variant of .two (getting-started.html only). Desktop/tablet:
   collapse to one centred track at a deliberate single-card width so the
   lone card reads as intentional, not as a half-filled two-column grid.
   Mobile keeps the plain .two behaviour above (full-width single column) -
   scoped to min-width so it never fights the mobile rule. */
@media (min-width:601px){
  .two.single{ grid-template-columns:minmax(0,650px); justify-content:center; }
}

.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; }
/* Availability Pattern row (Brett, 2026-07-23): sat flush against the
   Area/Suburb field above it with no breathing room, since standalone
   .field elements in the form get margin-bottom:0 (rule above). Scoped to
   this specific row (not the generic #apply .two rule) so the Name and
   Email/Phone rows further down the form are untouched. */
#apply .two.availability-row{ margin-top:24px; }

.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; }
.foot .fb-disclaimer{ font-size:11.5px; color:var(--muted); opacity:.8; margin:0 0 8px; line-height:1.6; }
.foot .foot-links{ margin:0; font-size:12.5px; }
.foot .foot-links a{ color:var(--muted); text-decoration:underline; }
.foot .foot-links a:hover{ color:var(--ink-soft); }
.foot .foot-links .sep{ margin:0 8px; color:var(--rule); }