/* GHASA assessment funnel - the landing look (25/10/2026).
   A TRUE COPY of Reservation Hub's assessment screens (rhs-app web/src/styles/landing.css +
   properties.css opt- and as- rules, origin/main 24/10/2026): same layout, same flow, same pause and score
   screens. Only three things differ, by decision:
     1. COLOURS + BRAND: GHASA's palette (ghasa.org.za: blue #00549C, deep #003D73, turquoise
        #00A896, gold #FCB418) and the GHASA logo, in place of RHS's navy/violet/pink.
     2. TYPE FLOOR: GHASA's floor (phone body 21px, desktop 17px+, buttons 19px+, captions 15px+,
        TYPE_FLOOR_CHECK.md) - RHS's landing body is 19px on a phone, which is below it.
     3. The score ring keeps RHS's traffic lights (green / orange / red on white): those are
        meaning, not brand.
   Class names are RHS's, so the two can be compared line by line. */

:root{
  /* GHASA tokens (were RHS --c-as-* / --c-lp-page) */
  --g-blue:#00549C; --g-deep:#003D73; --g-navy:#002A50; --g-turq:#00A896; --g-turq-soft:#7FE3D6; --g-gold:#FCB418; --g-gold-2:#FFC94A;
  --c-lp-page:#001B36;
  --c-as-ink:#ffffff; --c-as-line:rgba(0,168,150,.5); --c-as-hover-line:#00A896; --c-as-chosen:#00A896;
  --c-as-fill:rgba(255,255,255,.05); --c-as-field-bg:#00264A; --c-as-track:rgba(255,255,255,.14);
  --c-as-grad-a:#FCB418; --c-as-grad-b:#00A896; --c-as-pop-shadow:rgba(0,0,0,.45);
  --c-as-bar-good:#2fbf71; --c-as-bar-mid:#f5a524; --c-as-bar-bad:#ef4444;
  /* type roles (RHS --r-landing_*), raised to GHASA's floor */
  --r-body:21px; --r-h1:34px; --r-h2:23px; --r-q:23px; --r-button:21px; --r-field:21px; --r-eyebrow:14px; --r-caption:15px; --r-price:32px; --r-big:30px;
}
@media (min-width:601px){ :root{ --r-body:20px; --r-h1:42px; --r-h2:24px; --r-q:22px; --r-button:20px; --r-field:20px; } }
@media (min-width:901px){ :root{ --r-body:19px; --r-h1:50px; --r-h2:26px; --r-q:22px; --r-button:19px; --r-field:19px; --r-price:34px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html, body{ margin:0; background:var(--c-lp-page) }   /* no white behind a landing page (RHS, Brinn 22/10) */
.lp{
  --text:#FFFFFF; --muted:#C9D8E6; --tint:rgba(0,168,150,.16);
  min-height:100vh; color:var(--text); overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:var(--r-body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 72% 18%, rgba(0,168,150,.20) 0%, rgba(0,168,150,0) 42%),
    radial-gradient(circle at 15% 80%, rgba(252,180,24,.08) 0%, rgba(252,180,24,0) 30%),
    linear-gradient(135deg, #003D73 0%, #002A50 46%, #001B36 100%);
}
.lp a{ color:var(--g-turq-soft) }
.lp-top{ display:flex; align-items:center; justify-content:center; gap:12px; padding:22px 16px 6px; text-decoration:none; color:var(--text) }
.lp-top img{ height:64px; width:auto }
.lp-strap{ text-align:center; margin:0; padding:0 16px 4px; color:var(--muted); font-size:var(--r-eyebrow); font-weight:700; letter-spacing:.12em; text-transform:uppercase }
.lp-main{ max-width:1080px; margin:0 auto; padding:12px 16px 56px; display:flex; flex-direction:column; gap:20px }
.lp-hero{ text-align:center; padding:18px 0 6px }
.lp-badge{ display:inline-block; padding:6px 16px; border-radius:999px; background:rgba(0,168,150,.2); color:var(--g-turq-soft);
  font-size:var(--r-eyebrow); font-weight:700; letter-spacing:.12em; text-transform:uppercase }
.lp-h1{ margin:14px 0 8px; font-size:var(--r-h1); line-height:1.1; font-weight:800; color:#fff }
.lp-grad{ display:block; background:linear-gradient(90deg, #FCB418 0%, #FFD36B 40%, #00A896 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.lp-lead{ max-width:720px; margin:8px auto; color:#E3ECF5 }
.lp-muted{ color:var(--muted) }
.lp-tagline{ text-align:center; margin:0; padding:0 16px 24px; font-weight:600; color:#E3ECF5 }
.lp-legal{ text-align:center; margin:0 auto; padding:0 16px 40px; max-width:760px; color:var(--muted); font-size:var(--r-caption); line-height:1.5 }

/* Glass cards */
.opt-card{ background:linear-gradient(135deg, rgba(0,42,80,.97) 0%, rgba(0,36,70,.97) 55%, rgba(0,30,60,.97) 100%); border:1.5px solid rgba(0,168,150,.5);
  border-radius:22px; box-shadow:0 0 28px rgba(0,168,150,.14), 0 0 56px rgba(0,84,156,.18); color:var(--text); padding:24px }
.opt-card h2{ font-size:var(--r-h2); font-weight:700; line-height:1.2; margin:0 0 8px; color:#fff }
.opt-card h3{ color:#fff; margin:0 }
.warn{ color:#FFB4B4; margin:10px 0 0 }
.ix-meta{ color:var(--muted); margin:2px 0 0 }

/* THE SCORE (RHS calm pages rule): a WHITE band, solid traffic-light colours, never a gradient on the score. */
.opt-score{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:center; background:#fff !important; color:#14243A; border-color:#fff !important }
.opt-score h2{ color:#0E2A47 } .opt-score .ix-meta{ color:#4B5D70 }
.opt-ring{ --p:0; width:160px; height:160px; flex:none; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-inline:auto;
  background:conic-gradient(#00549C calc(var(--p) * 1%), #E8EEF4 0) }
.opt-ring.good{ background:conic-gradient(#128E52 calc(var(--p) * 1%), #E8EEF4 0) }
.opt-ring.mid{ background:conic-gradient(#D9480F calc(var(--p) * 1%), #E8EEF4 0) }
.opt-ring.bad{ background:conic-gradient(#DC2626 calc(var(--p) * 1%), #E8EEF4 0) }
.opt-ring > div{ width:78.67%; height:78.67%; padding:0 8px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center }
.opt-ring b{ display:block; font-size:var(--r-big); line-height:1; color:#0E2A47 }
.opt-ring small{ display:block; font-size:var(--r-caption); line-height:1.2; color:#4B5D70 }
.opt-sum p{ margin:0 }
@media (max-width:800px){ .opt-score{ grid-template-columns:1fr; justify-items:center; text-align:center } }

/* Buttons: RHS's pill, in GHASA gold. Second rank: outline. */
.lp-btn, .lp-btn-2{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:16px 32px; border-radius:14px;
  font-family:inherit; font-size:var(--r-button); font-weight:700; text-decoration:none; text-align:center; line-height:1.25; cursor:pointer; max-width:100%; touch-action:manipulation }
.lp-btn{ color:#3A2B00 !important; border:0; background:linear-gradient(90deg, #FCB418 0%, #FFC94A 100%); box-shadow:0 8px 26px rgba(252,180,24,.32) }
.lp-btn:hover:not(:disabled), .lp-btn:focus-visible{ filter:brightness(1.06) }
.lp-btn:disabled{ opacity:.55; cursor:default }
.lp-btn-2{ color:#fff !important; background:transparent; border:1.5px solid var(--g-turq-soft); font-weight:600 }
.lp-btn-2:hover, .lp-btn-2:focus-visible{ background:rgba(127,227,214,.12) }
.lp-btn:focus-visible, .lp-btn-2:focus-visible, .as-answer:focus-visible{ outline:3px solid var(--g-gold); outline-offset:3px }
.lp-ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin:16px 0 0 }
@media (max-width:600px){ .lp-btn, .lp-btn-2{ border-radius:12px; width:100% } }

/* The assessment: one question per card, answers as big buttons, a progress line (AS1/AS6). */
.as-card{ max-width:760px; width:100%; margin:0 auto }
.as-loading{ text-align:center; margin:48px 0 }
.as-progress{ display:flex; align-items:center; gap:12px; margin:0 0 28px; color:var(--muted); font-size:var(--r-body) }
.as-bar{ flex:1; height:6px; border-radius:999px; background:var(--c-as-track); overflow:hidden }
.as-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--c-as-grad-a),var(--c-as-grad-b)); transition:width .3s }
.opt-card h2.as-q{ font-size:var(--r-q); font-weight:700; line-height:1.35; margin:0 0 18px }
.as-hint{ color:var(--text); margin:0 }
.as-answers{ display:grid; gap:10px; margin:28px 0 14px }
.as-answer{ display:flex; align-items:center; gap:12px; text-align:left; min-height:56px; padding:14px 18px; border-radius:14px; border:1.5px solid var(--c-as-line);
  background:var(--c-as-fill); color:var(--c-as-ink); cursor:pointer; font:inherit; font-size:var(--r-body); line-height:1.4 }
.as-answer:hover:not(:disabled){ border-color:var(--c-as-hover-line); background:var(--tint) }
.as-answer.on, .as-answer.on:hover:not(:disabled){ border-color:var(--c-as-chosen); background:var(--c-as-chosen); color:#fff }
.as-pick{ flex:none; display:inline-grid; place-items:center; width:1.6em; height:1.6em; border:2px solid currentColor; border-radius:50%; font-size:.9em; line-height:1 }
.as-section{ text-align:center }
.as-section h2{ white-space:pre-line; font-weight:600 }

/* The pause screens: statistic above the ring, then each item a bar that fills to its real score and STOPS. */
.as-pause{ text-align:center }
.as-stat{ max-width:640px; margin:0 auto 16px }
.as-stat-text{ margin:0 0 6px; color:var(--c-as-ink); font-size:var(--r-h2); font-weight:700; line-height:1.3; white-space:pre-line }
.as-stat-src{ margin:0; color:var(--muted); font-size:var(--r-caption) }
.as-ring{ display:inline-block; width:44px; height:44px; border-radius:50%;
  background:conic-gradient(var(--c-as-grad-a) calc(var(--q, 0) * 25%), var(--c-as-track) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #fff calc(100% - 4px)); mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #fff calc(100% - 4px)) }
.as-ticks{ list-style:none; padding:0; margin:12px auto 0; display:grid; gap:10px; max-width:440px; text-align:left; color:var(--muted); font-size:var(--r-body) }
.as-ticks li{ display:grid; gap:4px; min-width:0; transition:color .3s } .as-ticks li.on{ color:var(--c-as-ink) }
.as-tick-l{ overflow-wrap:anywhere; display:flex; justify-content:space-between; gap:12px }
.as-pct.good{ color:var(--c-as-bar-good) } .as-pct.mid{ color:var(--c-as-bar-mid) } .as-pct.bad{ color:var(--c-as-bar-bad) }
.as-meter{ display:block; height:8px; border-radius:999px; background:var(--c-as-track); overflow:hidden }
.as-meter i{ display:block; height:100%; border-radius:999px; animation:as-fill 2s ease-out }
.as-meter i.good{ background:var(--c-as-bar-good) } .as-meter i.mid{ background:var(--c-as-bar-mid) } .as-meter i.bad{ background:var(--c-as-bar-bad) }
@keyframes as-fill{ from{ width:0 } }

/* The three fixes (opt-fixes / ls-fixes) */
.opt-fixes{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:12px }
.opt-fixes li{ display:flex; gap:12px; align-items:flex-start }
.opt-num{ flex:0 0 36px; height:36px; border-radius:50%; background:var(--g-gold); color:#3A2B00; display:grid; place-items:center; font-weight:800; font-size:var(--r-body) }
.ls-headline{ border:2px solid var(--g-gold) !important }
.ls-fix{ flex:1; min-width:0 } .ls-fix p{ margin:4px 0 0 }
.ls-fix dl{ margin:8px 0 0 } .ls-fix dt{ font-weight:700; color:var(--g-turq-soft); margin-top:8px } .ls-fix dd{ margin:2px 0 0 }

/* The details form (lp-basics, the phone with its country code) */
.lp-basics{ display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; max-width:560px; margin:16px auto 6px }
.lp-basics input, .lp-basics select{ width:100%; min-width:0; min-height:56px; padding:12px 18px; border-radius:14px; border:1px solid var(--c-as-line);
  background:var(--c-as-field-bg); color:#fff; font:inherit; font-size:var(--r-field) }
.lp-basics input::placeholder{ color:#9FB4C8 }
.lp-basics input:focus, .lp-basics select:focus{ outline:2px solid var(--g-turq); outline-offset:1px }
.lp-basics .invalid{ border-color:#ef4444 }
.lp-phone{ display:grid; grid-template-columns:minmax(0, 190px) minmax(0, 1fr); gap:8px }
@media (max-width:420px){ .lp-phone{ grid-template-columns:minmax(0, 130px) minmax(0, 1fr) } }
.lp-consent{ display:flex; gap:12px; align-items:flex-start; max-width:560px; margin:10px auto 0; text-align:left }
.lp-consent input{ width:24px; height:24px; margin-top:4px; flex:none; accent-color:var(--g-turq) }
.lp-ts{ display:flex; justify-content:center; margin:12px 0 0 }

/* The full report: the areas as checks (ol-checks) and the offer (ol-offer) */
.ol-checks{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:14px }
.ol-checks li{ display:flex; gap:12px; align-items:flex-start }
.ol-mark{ flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; font-size:var(--r-body) }
.ol-checks li.pass .ol-mark{ background:#128E52 } .ol-checks li.fail .ol-mark{ background:#DC2626 }
.ol-main{ flex:1; min-width:0 } .ol-hd{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap }
.ol-grade{ display:inline-flex; align-items:center; gap:8px }
.gr{ display:inline-block; padding:2px 12px; border-radius:8px; font-size:var(--r-caption); font-weight:700; line-height:1.6 }
.gr-strong{ background:#128E52; color:#fff } .gr-grow{ background:#F5A524; color:#2A1B00 } .gr-attention{ background:#DC2626; color:#fff }
.opt-bar{ height:8px; border-radius:99px; background:var(--c-as-track); margin:8px 0 8px; overflow:hidden }
.opt-bar i{ display:block; height:100%; border-radius:99px } .opt-bar i.good{ background:var(--c-as-bar-good) } .opt-bar i.mid{ background:var(--c-as-bar-mid) } .opt-bar i.bad{ background:var(--c-as-bar-bad) }
.ol-offer{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px }
.ol-offer p{ margin:0; max-width:680px }
.ol-price{ margin:4px 0 0 } .ol-price b{ font-size:var(--r-price); color:var(--g-gold) }
.ol-guarantee{ color:#5EE6A8; font-weight:600 }
.ol-lock{ display:flex; flex-direction:column; align-items:center; gap:2px; margin:8px 0 0; text-align:center; font-size:var(--r-caption); line-height:1.35 }
.ol-lock-1{ font-weight:700 } .ol-lock-2{ opacity:.85 }
.lp-list{ list-style:none; padding:0; margin:8px 0; display:grid; gap:10px; text-align:left }
.lp-list li{ padding-left:34px; position:relative }
.lp-list li::before{ content:'\2713'; position:absolute; left:0; top:0; color:var(--g-turq-soft); font-weight:800 }
.lp-list b{ display:block; color:#fff }
.lp-steps{ list-style:none; padding:0; margin:8px 0; display:grid; gap:12px; counter-reset:s; text-align:left }
.lp-steps li{ position:relative; padding-left:52px; min-height:38px }
.lp-steps li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:0; width:38px; height:38px; border-radius:50%;
  background:var(--g-gold); color:#3A2B00; font-weight:800; font-size:var(--r-body); display:grid; place-items:center }
.lp-faq details{ border-bottom:1px solid rgba(0,168,150,.3); padding:12px 0 }
.lp-faq summary{ font-weight:700; cursor:pointer }
.lp-faq p{ margin:8px 0 0 }
.lp-video{ position:relative; width:100%; max-width:820px; margin:18px auto 6px; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#000;
  border:1px solid rgba(0,168,150,.35); box-shadow:0 18px 60px rgba(0,84,156,.35) }
.lp-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* Live price (24/10/2026): rand figures come from the Worker's /api/price, never typed. */
html:not(.price-ok) [data-price-wrap]{ display:none !important }
@media (prefers-reduced-motion: reduce){ .as-meter i{ animation:none } .as-bar i{ transition:none } }