/* HomeGrants.ie — Personalised Grant Report flagship page.
   Design language shared with solar.html (Sora + IBM Plex Mono, navy/green
   palette, autoscroll stages). New components: question cards, grant list,
   blurred report preview, €14.99 paywall with wallet affordances. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --white:#FFFFFF;--cream:#FAFAF8;--warm-gray:#F4F3F0;
  --gray100:#ECEAE6;--gray200:#DDD9D2;--gray300:#C4BFB7;
  --gray400:#9B9588;--gray500:#6E685C;
  --navy:#0C1D36;--navy2:#162A4A;--navy-text:#1A2B47;
  --green:#00875A;--green-bright:#00A86B;
  --green-bg:#E8F5EF;--green-bg2:#D1ECDF;--green-border:#B0DFC7;--green-dark:#006B47;
  --amber:#B8860B;--amber-bg:#FDF6E3;--amber-border:#F0DBA8;--amber-text:#8B6914;
  --red:#B91C1C;--red-bg:#FEF2F2;--red-border:#FECACA;
  --gold:#C9A227;--gold-bg:#FBF6E2;--gold-border:#E8D87A;
  --font:'Sora',sans-serif;--mono:'IBM Plex Mono',monospace;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04),0 1px 4px rgba(0,0,0,0.03);
  --shadow-md:0 2px 8px rgba(0,0,0,0.06),0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg:0 4px 20px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04);
  --shadow-green:0 4px 14px rgba(0,135,90,0.2);
}
html{font-size:17px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--cream);color:var(--navy-text);min-height:100vh}
a{color:inherit}
button,input,select{font:inherit;outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.is-hidden{display:none !important}

header.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.94);backdrop-filter:blur(14px) saturate(1.5);border-bottom:1px solid var(--gray100);padding:0.65rem 1.25rem;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:0.5rem;text-decoration:none;cursor:pointer}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,135,90,0.25)}
.brand-mark svg{width:15px;height:15px;stroke:#FFFFFF;fill:none}
.brand-name{font-weight:700;font-size:0.9rem;letter-spacing:-0.02em;color:var(--navy)}
.brand-name>span:first-of-type{color:var(--green)}
.brand-tag{display:inline-block;background:#FFF4D1;color:#8B6914;border:1px solid var(--gold-border);font-size:0.56rem;font-weight:800;padding:0.12rem 0.45rem;border-radius:5px;letter-spacing:0.07em;text-transform:uppercase;line-height:1.4;margin-left:0.4rem;vertical-align:middle}
.topbar-note{font-size:0.66rem;font-weight:600;color:var(--gray500);text-align:right;line-height:1.25}
.topbar-note strong{display:block;color:var(--navy);font-size:0.72rem}

/* Extra bottom padding so the in-app (Facebook/Instagram) "interested in this
   ad?" footer overlay never sits on top of the primary button. */
main{max-width:520px;margin:0 auto;padding:0 1.1rem 7.5rem;scroll-margin-top:5rem}
.stage{display:none;animation:stageFade 0.36s ease-out}
.stage.is-active{display:block}
@keyframes stageFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.step-label{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.62rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:0.06em;background:var(--green-bg);border:1px solid var(--green-border);padding:0.3rem 0.8rem;border-radius:100px;margin:1.4rem 0 0.9rem}
.step-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(0,135,90,0.15)}

.hero{text-align:center;padding:1.5rem 0 0.5rem}
.pill{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.62rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:0.06em;background:var(--green-bg);border:1px solid var(--green-border);padding:0.3rem 0.8rem;border-radius:100px;margin-bottom:1.1rem}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:glow 2s infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(0,135,90,0.3)}50%{box-shadow:0 0 0 5px transparent}}
.hero h1{font-size:clamp(1.55rem,5.5vw,2.4rem);font-weight:800;color:var(--navy);line-height:1.13;letter-spacing:-0.035em;margin-bottom:0.7rem}
.hero h1 em{font-style:normal;color:var(--green)}
.hero>p{font-size:0.92rem;color:var(--gray500);max-width:430px;margin:0 auto;line-height:1.55}

.card{background:var(--white);border:1.5px solid var(--gray100);border-radius:18px;padding:1.25rem;box-shadow:var(--shadow-sm);margin-top:1.3rem}
.start-card{
  border-color:var(--green-border);
  background:linear-gradient(180deg,#F8FFFB 0%, var(--white) 72%);
  box-shadow:0 0 0 1px rgba(0,135,90,0.06),0 10px 28px rgba(0,135,90,0.08);
  /* When the field is focused we scroll it to the top; clear the sticky topbar
     so the input + button sit above the mobile keyboard. */
  scroll-margin-top:74px;
}
.field-label{display:block;font-size:0.78rem;font-weight:700;color:var(--navy);margin:0.6rem 0 0.45rem}
.field-label:first-child{margin-top:0}
.field-hint{font-size:0.66rem;color:var(--gray400);margin-top:0.3rem;line-height:1.45}
.field-error{display:none;font-size:0.66rem;color:var(--red);line-height:1.45;margin-top:0.35rem;font-weight:600}
.field-error.show{display:block}

.eircode-input{
  width:100%;padding:0.8rem 0.9rem;background:var(--cream);border:2px solid var(--gray200);
  border-radius:12px;font-family:var(--mono);font-size:1.04rem;font-weight:600;color:var(--navy);
  transition:0.2s;letter-spacing:0.08em;text-transform:uppercase;
}
.eircode-input::placeholder{color:var(--gray300);text-transform:none;letter-spacing:0;font-family:var(--font);font-weight:500;font-size:0.78rem}
.eircode-input:focus{border-color:var(--green);background:var(--white)}
.eircode-input.valid{border-color:var(--green);background:var(--green-bg)}
.eircode-input.invalid{border-color:var(--red);background:var(--red-bg)}
.lookup-status{font-size:0.7rem;color:var(--green-dark);font-weight:600;margin-top:0.45rem;line-height:1.4;min-height:0.95rem}
.lookup-status.is-error{color:var(--amber-text)}

.county-select{width:100%;padding:0.8rem 0.9rem;background:var(--cream);border:2px solid var(--gray200);border-radius:12px;font-size:0.92rem;font-weight:600;color:var(--navy);transition:0.2s}
.county-select:focus{border-color:var(--green);background:var(--white)}

.primary-cta{
  margin-top:1.15rem;width:100%;background:var(--green);color:var(--white);border:0;border-radius:14px;
  padding:1rem 1.1rem;font-size:0.98rem;font-weight:700;letter-spacing:0.01em;cursor:pointer;
  box-shadow:var(--shadow-green);transition:0.2s;display:flex;align-items:center;justify-content:center;gap:0.4rem;
}
.primary-cta:hover{background:var(--green-dark)}
.primary-cta:disabled{background:var(--gray200);color:var(--gray400);box-shadow:none;cursor:not-allowed}
.primary-cta:active{transform:translateY(1px)}
.cta-sub{display:block;font-size:0.66rem;font-weight:500;color:var(--gray500);margin-top:0.55rem;text-align:center;line-height:1.45}
.ghost-link{display:block;width:100%;background:none;border:0;color:var(--gray500);font-size:0.74rem;font-weight:600;margin-top:0.7rem;cursor:pointer;text-decoration:underline;text-decoration-color:var(--gray200);text-underline-offset:3px}
.ghost-link:hover{color:var(--green-dark)}
.link-btn{background:none;border:0;color:var(--gray500);font-size:0.74rem;font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-color:var(--gray200);text-underline-offset:3px}
.link-btn:hover{color:var(--green-dark)}

.trust-row{display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem}
.trust-chip{font-size:0.62rem;font-weight:600;color:var(--gray500);background:var(--white);border:1px solid var(--gray200);border-radius:100px;padding:0.35rem 0.7rem;display:inline-flex;align-items:center;gap:0.35rem}
.trust-chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green)}

.stage h2{font-size:1.55rem;font-weight:800;color:var(--navy);letter-spacing:-0.03em;line-height:1.18;margin-bottom:0.4rem}
.stage>p.lede{font-size:0.86rem;color:var(--gray500);line-height:1.55;margin-bottom:1rem}

/* ---- Maps (reused from solar) ---- */
.map-card{position:relative;border-radius:18px;overflow:hidden;border:1.5px solid var(--gray200);background:var(--gray100);aspect-ratio:4/3;box-shadow:var(--shadow-md)}
#mapEl,#areaMapEl{position:absolute;inset:0;background:linear-gradient(135deg,#d8d4c8,#c4bfb7)}
/* Fixed height at full width (not aspect-ratio + max-height, which let the
   browser derive a narrow width from the height and shoved the map left). */
.map-card--area{aspect-ratio:auto;height:150px;width:100%}
.map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1.2rem;text-align:center;color:var(--gray500);font-size:0.78rem;font-weight:500;line-height:1.55;background:linear-gradient(135deg,#eee9df,#dddbd0)}
.map-fallback strong{color:var(--navy);display:block;margin-bottom:0.3rem;font-size:0.88rem}
.map-hint{position:absolute;left:50%;top:0.6rem;transform:translateX(-50%);background:rgba(12,29,54,0.86);color:#FFFFFF;font-size:0.66rem;font-weight:600;letter-spacing:0.02em;padding:0.35rem 0.7rem;border-radius:100px;backdrop-filter:blur(8px);z-index:11;pointer-events:none;text-align:center;max-width:90%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.map-hint.is-prominent{font-size:0.82rem;padding:0.5rem 1rem;background:rgba(0,135,90,0.92);box-shadow:0 6px 16px rgba(0,135,90,0.3),0 0 0 1px rgba(255,255,255,0.15)}
.map-hint.is-prominent strong{font-weight:800}

.confirm-meta{margin-top:0.9rem;background:var(--white);border:1.5px solid var(--gray100);border-radius:14px;padding:0.9rem 1rem;display:flex;flex-direction:column;gap:0.7rem}
.confirm-row{display:flex;align-items:center;justify-content:space-between;gap:0.7rem}
.confirm-row span{font-size:0.72rem;color:var(--gray500);font-weight:600;flex-shrink:0}
.confirm-row strong{font-size:0.82rem;color:var(--navy);font-weight:700;text-align:right;line-height:1.35}

.stage--area{padding-bottom:0.5rem}
.stage--area .step-label{margin:0.7rem 0 0.5rem}
.stage--area h2{font-size:clamp(1.3rem,4.6vw,1.7rem);margin-bottom:0.55rem;line-height:1.15}
.area-card{margin-top:0.6rem;background:#FFFDF4;border:1.5px solid var(--gold-border);border-radius:14px;padding:0.7rem 0.9rem;display:flex;flex-direction:column;gap:0.22rem}
.area-card>strong{font-size:0.94rem;color:var(--navy);line-height:1.3;font-weight:800;letter-spacing:-0.01em}
.area-card>span{font-size:0.74rem;color:var(--gray500);line-height:1.45}
.area-card-trend{font-size:0.72rem !important;color:var(--green-dark) !important;font-weight:700 !important;margin-top:0.2rem;letter-spacing:-0.005em}
.area-card-trend.is-hidden{display:none !important}
.area-note{margin-top:0.55rem;font-size:0.7rem;color:var(--gray500);line-height:1.45;background:#FBFBFD;border:1px solid #ECECEF;border-radius:10px;padding:0.5rem 0.7rem}
.area-note b{color:#555;font-weight:700}
.stage--area .primary-cta{margin-top:0.7rem}

/* ---- Stage 4: question cards (autoscroll mini-steps) ---- */
.q-stack{position:relative;min-height:50vh}
.q-card{display:none;animation:stageFade 0.36s ease-out;padding-top:0.4rem}
.q-card.is-active{display:block}
.q-card h2{font-size:clamp(1.3rem,4.8vw,1.7rem);margin-bottom:0.4rem}
/* Compact 2-column tick list of qualifying welfare payments — sized to stay on
   one screen (no scroll) alongside the question + answer buttons. */
.welfare-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0.28rem 0.9rem;margin:0.5rem 0 0.7rem}
.welfare-list li{position:relative;padding-left:1.05rem;font-size:0.8rem;line-height:1.3;color:var(--navy-text)}
.welfare-list li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.welfare-list li:last-child{grid-column:1 / -1}
.q-error{color:#C0392B;font-size:0.84rem;font-weight:600;margin-top:0.6rem}

/* House type: 2x2 cards, each with its own coloured icon (--opt / --optBg set inline) */
.house-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.55rem;margin-top:0.7rem}
.house-opt{display:flex;align-items:center;gap:0.7rem;padding:0.8rem 0.7rem;border-radius:14px;background:var(--white);border:2px solid var(--gray100);cursor:pointer;transition:0.2s;user-select:none;text-align:left}
.house-opt:active{transform:scale(0.97)}
.house-opt.active{border-color:var(--opt);background:var(--optBg)}
.house-opt .ico{width:44px;height:44px;border-radius:12px;background:var(--optBg);display:flex;align-items:center;justify-content:center;flex:none;transition:0.2s}
.house-opt.active .ico{background:var(--white)}
.house-opt .ico svg{width:25px;height:25px;stroke:var(--opt);fill:none;stroke-width:1.8}
.house-opt .txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.house-opt .lbl{font-size:0.84rem;font-weight:700;color:var(--navy);line-height:1.15;transition:0.2s}
.house-opt .sub{font-size:0.64rem;font-weight:600;color:var(--gray400);line-height:1.2}
.house-opt.active .lbl{color:var(--opt)}

/* Build year: a single linear, chronological column */
.year-list{display:flex;flex-direction:column;gap:0.5rem;margin-top:0.7rem}
.year-opt{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0.85rem 1rem;border-radius:12px;background:var(--white);border:2px solid var(--gray100);cursor:pointer;transition:0.2s;text-align:left}
.year-opt:active{transform:scale(0.99)}
.year-opt .yr{font-size:0.95rem;font-weight:700;color:var(--navy)}
.year-opt .yhint{font-size:0.66rem;font-weight:600;color:var(--gray400);text-align:right}
.year-opt.active{border-color:var(--green);background:var(--green-bg)}
.year-opt.active .yr{color:var(--green-dark)}
.year-opt.active .yhint{color:var(--green)}

.binary-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-top:0.6rem}
.binary-grid:has(.binary-opt:nth-child(3)){grid-template-columns:repeat(3,1fr)}
.binary-opt{padding:0.95rem 0.5rem;border-radius:12px;background:var(--white);border:2px solid var(--gray100);cursor:pointer;transition:0.25s;font-size:0.84rem;font-weight:700;color:var(--navy);text-align:center}
.binary-opt:active{transform:scale(0.98)}
.binary-opt.active{border-color:var(--green);background:var(--green-bg);color:var(--green-dark)}

.chip-wrap{margin-top:0.9rem}
.chip-copy{font-size:0.78rem;font-weight:600;color:var(--gray500);margin-bottom:0.5rem}
.chip-grid{display:flex;flex-wrap:wrap;gap:0.45rem}
.chip-opt{padding:0.55rem 0.8rem;border-radius:100px;background:var(--white);border:2px solid var(--gray100);cursor:pointer;transition:0.2s;font-size:0.78rem;font-weight:600;color:var(--navy)}
.chip-opt.active{border-color:var(--green);background:var(--green-bg);color:var(--green-dark)}

.q-nav{margin-top:1.1rem;display:flex;justify-content:flex-start}

/* ---- Stage 5: results + teaser ---- */
.stage--result{padding-top:0.6rem}
.result-topbar{display:flex;justify-content:space-between;align-items:center;margin:1rem 0 0.3rem}
.total-card{
  text-align:center;background:linear-gradient(170deg,#06301F 0%, #0C1D36 100%);
  color:#fff;border-radius:22px;padding:1.6rem 1.3rem 1.4rem;margin-top:0.6rem;
  box-shadow:0 14px 40px rgba(6,48,31,0.3);position:relative;overflow:hidden;
}
.total-card::after{content:'';position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(0,168,107,0.18)}
.result-kicker{display:block;font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--green-bright);position:relative}
.estimate-amount{font-family:var(--mono);font-size:clamp(2.6rem,12vw,3.6rem);font-weight:700;line-height:1;letter-spacing:-0.02em;margin:0.5rem 0 0.4rem;position:relative}
.estimate-win{font-size:0.95rem;font-weight:800;color:var(--green-bright);line-height:1.3;margin:0 auto 0.55rem;max-width:28ch;position:relative;letter-spacing:-0.01em}
.estimate-win.is-hidden{display:none}
.estimate-copy{font-size:0.82rem;color:rgba(255,255,255,0.78);line-height:1.5;max-width:34ch;margin:0 auto;position:relative}
.answer-summary{display:flex;flex-wrap:wrap;justify-content:center;gap:0.4rem;margin-top:0.9rem;position:relative}
.answer-summary .chip{font-size:0.64rem;font-weight:600;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);border-radius:100px;padding:0.3rem 0.7rem;color:#fff}

.grant-list{display:flex;flex-direction:column;gap:0.4rem;margin-top:0.7rem}
.grant-row{display:flex;align-items:center;gap:0.8rem;background:var(--white);border:1.5px solid var(--gray100);border-radius:12px;padding:0.6rem 0.85rem;box-shadow:var(--shadow-sm);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 0.12s ease,border-color 0.12s ease;text-align:left}
.grant-row[data-unlock]:active{transform:scale(0.99)}
@media (hover:hover){.grant-row[data-unlock]:hover{border-color:var(--green-border)}}
.grant-row .g-ico{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--green-bg)}
.grant-row .g-body{flex:1;min-width:0}
.grant-row .g-name{font-size:0.86rem;font-weight:700;color:var(--navy);line-height:1.25}
.grant-row .g-note{font-size:0.7rem;color:var(--gray500);line-height:1.4;margin-top:0.1rem}
.grant-row .g-amt{font-family:var(--mono);font-size:0.98rem;font-weight:700;color:var(--green-dark);white-space:nowrap;flex-shrink:0}
.grant-row .g-amt.g-unlock{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.66rem;font-weight:800;letter-spacing:0.01em;color:var(--green-dark);background:var(--green-bg);border:1px solid var(--green-border);border-radius:100px;padding:0.32rem 0.62rem;white-space:nowrap}
.grant-row .g-amt.g-unlock svg{width:10px;height:10px}
.grant-row .g-amt.g-cond{font-size:0.62rem;font-weight:700;color:var(--gray500);background:var(--gray100);border:1px solid var(--gray200);border-radius:100px;padding:0.32rem 0.6rem;white-space:nowrap}
.grant-row .g-amt.g-free{font-size:0.66rem;font-weight:800;letter-spacing:0.05em;background:var(--green-bg2);color:var(--green-dark);padding:0.3rem 0.6rem;border-radius:100px}
.grant-row.is-bonus .g-ico{background:var(--gold-bg)}
.grant-row.is-free .g-ico{background:var(--green-bg2)}
.grant-group-label{display:flex;flex-direction:column;gap:0.08rem;margin:0.9rem 0 0.15rem;padding-left:0.2rem;font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--navy)}
.grant-group-label span{font-size:0.62rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--gray400)}

/* ---- Money hook teaser ---- */
.value-teaser{margin-top:0.7rem}
.vt-card{display:flex;gap:0.7rem;align-items:flex-start;background:var(--green-bg);border:1.5px solid var(--green-border);border-radius:14px;padding:0.85rem 1rem}
.vt-ico{font-size:1.2rem;line-height:1.2;flex:none}
.vt-body{font-size:0.82rem;line-height:1.5;color:var(--navy-text)}
.vt-body strong{color:var(--green-dark)}
.vt-body b{color:var(--green-dark);font-family:var(--mono);font-weight:700;white-space:nowrap}

/* ---- Trust / proof card (official SEAI data + real buyer counties) ---- */
.proof-card{margin-top:0.7rem;background:var(--white);border:1.5px solid var(--gray100);border-radius:14px;padding:0.85rem 1rem;box-shadow:var(--shadow-sm)}
.proof-head{display:flex;gap:0.65rem;align-items:flex-start}
.proof-ico{flex:none;width:36px;height:36px;border-radius:9px;background:var(--green-bg);display:flex;align-items:center;justify-content:center}
.proof-ico svg{width:19px;height:19px;color:var(--green-dark)}
.proof-body strong{display:block;font-size:0.85rem;font-weight:800;color:var(--navy);line-height:1.2;letter-spacing:-0.01em}
.proof-body span{display:block;font-size:0.74rem;color:var(--gray500);line-height:1.5;margin-top:0.2rem}
.proof-div{height:1px;background:var(--gray100);margin:0.7rem 0}
.proof-geo{display:flex;gap:0.5rem;align-items:center;font-size:0.78rem;color:var(--navy-text);line-height:1.4}
.proof-geo svg{flex:none;width:15px;height:15px;color:var(--green-dark)}
.proof-geo b{font-weight:700;color:var(--navy)}
.proof-links{margin-top:0.55rem;font-size:0.68rem}
.proof-links a{color:var(--gray500);text-decoration:underline;text-decoration-color:var(--gray200);text-underline-offset:2px}

/* ---- Blurred report preview + paywall ---- */
.report-shell{position:relative;margin-top:0.95rem;border-radius:20px;overflow:hidden;border:1.5px solid var(--gray200);box-shadow:var(--shadow-lg);background:var(--white)}
.report-container{position:relative;max-height:240px;overflow:hidden;padding:1.1rem;background:var(--cream)}
.report-container.is-blurred #reportPreview{filter:blur(4px);opacity:0.92;pointer-events:none;user-select:none}
.report-fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 72%, #fff 100%)}
.report-preview-tag{position:absolute;top:0.8rem;left:0.8rem;background:rgba(12,29,54,0.88);color:#fff;border-radius:10px;padding:0.4rem 0.7rem;z-index:5}
.report-preview-tag strong{display:block;font-size:0.7rem;font-weight:700}
.report-preview-tag span{display:block;font-size:0.6rem;color:rgba(255,255,255,0.75);margin-top:0.1rem}

/* colourful mock of the real report, rendered behind the blur */
.bp{display:flex;flex-direction:column;gap:0.55rem}
.bp-cover{background:linear-gradient(135deg,#06301F 0%,#0C1D36 130%);border-radius:12px;padding:0.85rem 1rem;color:#fff}
.bp-kick{font-size:0.54rem;letter-spacing:0.12em;text-transform:uppercase;color:#7FE3B5;font-weight:700}
.bp-amt{font-family:var(--mono);font-size:1.9rem;font-weight:700;line-height:1;margin:0.25rem 0 0.15rem}
.bp-sub{font-size:0.58rem;color:#BFE9D4}
.bp-block{background:var(--white);border:1px solid var(--gray100);border-left:4px solid var(--a);border-radius:11px;padding:0.65rem 0.75rem}
.bp-bhead{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}
.bp-ico{width:30px;height:30px;border-radius:8px;background:var(--a);flex:none}
.bp-tt{flex:1;min-width:0}
.bp-tt b{font-size:0.74rem;color:var(--navy);display:block}
.bp-tt i{display:block;height:6px;width:62%;background:var(--gray100);border-radius:3px;margin-top:5px}
.bp-chip{width:48px;height:18px;border-radius:6px;background:var(--green-bg);border:1px solid var(--green-border);flex:none}
.bp-money2{display:flex;gap:0.35rem;margin-bottom:0.5rem}
.bp-money2 span{flex:1;height:26px;border-radius:6px;background:#EAF2EE}
.bp-money2 .m3{background:#1F7A4D}
.bp-bars{display:flex;align-items:flex-end;gap:0.32rem;height:44px}
.bp-bars span{flex:1;background:var(--a);opacity:0.82;border-radius:3px 3px 0 0;min-height:6px}

.paywall{padding:1.1rem;border-top:1.5px solid var(--gray100);background:linear-gradient(180deg,#F8FFFB 0%, var(--white) 100%);scroll-margin-top:78px}
.paywall-head{display:flex;justify-content:space-between;align-items:flex-start;gap:0.8rem;margin-bottom:0.8rem}
.paywall-head h3{font-size:1.05rem;font-weight:800;color:var(--navy);line-height:1.2;letter-spacing:-0.02em;margin-top:0.15rem}
.price-tag{flex-shrink:0;text-align:right}
.price-amt{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--green-dark);line-height:1}
.price-was{display:block;font-family:var(--mono);font-size:0.85rem;font-weight:600;color:var(--gray400);text-decoration:line-through;line-height:1;margin-top:0.2rem}
.price-sub{display:block;font-size:0.6rem;color:var(--gray400);text-transform:uppercase;letter-spacing:0.06em;margin-top:0.15rem}
.paywall-sheet h3{font-size:1.12rem;font-weight:800;color:var(--navy);line-height:1.2;letter-spacing:-0.02em;margin:0.3rem 0 0.5rem}
.paywall-lead{font-size:0.84rem;color:var(--gray500);line-height:1.5;margin:0 0 0.95rem}
.value-stack{border:1.5px solid var(--green-border);border-radius:14px;background:var(--green-bg);padding:0.65rem 0.9rem;margin:0 0 0.9rem;display:flex;flex-direction:column;gap:0.35rem}
.vs-line{display:flex;justify-content:space-between;align-items:baseline;gap:0.7rem;font-size:0.8rem;color:var(--gray500)}
.vs-line>b{font-family:var(--mono);font-weight:700;color:var(--green-dark);white-space:nowrap}
#vsGrants{font-size:1.05rem}
.vs-now{border-top:1px dashed var(--green-border);padding-top:0.4rem;margin-top:0.05rem}
.vs-now>span{font-weight:600;color:var(--navy-text)}
.vs-now>b{font-size:1.25rem;color:var(--green-dark)}
.vs-now>b s{color:var(--gray400);font-weight:600;font-size:0.8rem;margin-left:0.25rem}
.pay-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:0.35rem 0.9rem;margin-top:0.7rem}
.pay-trust span{font-size:0.66rem;color:var(--gray500);font-weight:600;white-space:nowrap}
.paywall-bullets{list-style:none;margin:0 0 0.8rem;display:flex;flex-direction:column;gap:0.45rem}
.paywall-bullets li{position:relative;padding-left:1.4rem;font-size:0.8rem;color:var(--navy-text);line-height:1.4}
.paywall-bullets li::before{content:'';position:absolute;left:0;top:0.32rem;width:14px;height:14px;border-radius:50%;background:var(--green-bg);box-shadow:inset 0 0 0 2px var(--green)}
.paywall-bullets li::after{content:'';position:absolute;left:4.5px;top:0.55rem;width:3px;height:6px;border-right:2px solid var(--green-dark);border-bottom:2px solid var(--green-dark);transform:rotate(40deg)}
.pay-cta{margin-top:0}
/* Attention pulse: a soft green ring that fires a few times when the pay button
   scrolls into view (class toggled by JS), then settles — keeps the button's own
   depth shadow underneath, and never runs forever, so it's not gimmicky. */
@keyframes payPulse{
  0%{box-shadow:var(--shadow-green),0 0 0 0 rgba(0,200,129,0.5)}
  70%{box-shadow:var(--shadow-green),0 0 0 14px rgba(0,200,129,0)}
  100%{box-shadow:var(--shadow-green),0 0 0 0 rgba(0,200,129,0)}
}
.pay-cta.is-pulsing{animation:payPulse 1.6s ease-out 3}
@media (prefers-reduced-motion:reduce){.pay-cta.is-pulsing{animation:none}}
.pay-wallets{display:inline-flex;align-items:center;gap:0.35rem;margin-right:0.15rem}
.wallet-ico{display:block;color:#fff}
.paywall-status{font-size:0.68rem;color:var(--gray500);text-align:center;margin-top:0.6rem;line-height:1.45}
.paywall-status.is-error{color:var(--amber-text);font-weight:600}

/* Email capture for report delivery */
.paywall-email{margin:0 0 0.6rem}
.paywall-email-input{width:100%;padding:0.85rem 1rem;border:1.5px solid var(--gray100);border-radius:12px;font-size:0.92rem;font-family:inherit;color:var(--navy);text-align:center}
.paywall-email-input:focus{outline:none;border-color:var(--green)}
/* Grant total pinned to the buy button + inline (acceptance-by-continuing) note */
.pay-total{text-align:center;font-size:0.92rem;color:var(--navy);font-weight:600;margin:0 0 0.6rem;line-height:1.35}
.pay-total b{font-weight:800;color:var(--green-dark)}
.pay-total:empty{display:none}
.pay-consent-note{font-size:0.64rem;line-height:1.5;color:var(--gray400);text-align:center;margin:0.55rem 0 0}
.pay-consent-note a{color:var(--gray500);text-decoration:underline;text-decoration-color:var(--gray200);text-underline-offset:2px}

/* Voucher (owner testing) — deliberately understated so it doesn't distract buyers */
.voucher-toggle{display:block;margin:0.55rem auto 0;background:none;border:0;color:var(--gray400);font-size:0.66rem;text-decoration:underline;text-decoration-color:var(--gray200);text-underline-offset:2px;cursor:pointer;font-family:inherit}
.voucher-row{margin-top:0.5rem;display:flex;justify-content:center}
.voucher-input{width:100%;max-width:240px;padding:0.6rem 0.8rem;border:1.5px solid var(--gray100);border-radius:10px;font-size:0.85rem;font-family:inherit;color:var(--navy);text-align:center;letter-spacing:0.04em}
.voucher-input:focus{outline:none;border-color:var(--green)}

/* Sticky unlock bar on the results stage so the offer is never missed */
.result-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));background:rgba(255,255,255,0.96);backdrop-filter:blur(10px);border-top:1.5px solid var(--gray100);box-shadow:0 -6px 22px rgba(12,29,54,0.10);transition:transform 0.28s ease,opacity 0.28s ease}
.result-sticky-inner{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:0.8rem}
.result-sticky-copy{display:flex;flex-direction:column;line-height:1.1;flex:1;min-width:84px}
.result-sticky-copy strong{font-size:1.15rem;font-weight:700;color:var(--green-dark);font-family:var(--mono)}
.result-sticky-copy span{font-size:0.66rem;color:var(--gray500);margin-top:2px}
.result-sticky-cta{flex:none;background:var(--green);color:#fff;border:0;border-radius:12px;padding:0.8rem 1.1rem;font-size:0.9rem;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap}
.result-sticky-cta:active{transform:scale(0.97)}
/* When the real paywall is on screen, drop the bar out of the way */
.result-sticky.is-docked{transform:translateY(120%);opacity:0;pointer-events:none}
/* Leave room so the bar never hides the last of the content */
.stage--result.is-active{padding-bottom:5.5rem}

.result-foot{margin-top:1.05rem;font-size:0.64rem;color:var(--gray400);line-height:1.5;text-align:center}
.result-foot a{color:var(--gray500);text-decoration:underline;text-decoration-color:var(--gray200);text-underline-offset:2px}

/* ---- On-page (Embedded) Stripe checkout overlay ---- */
.ec-overlay{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:flex-end}
.ec-overlay.is-hidden{display:none}
.ec-backdrop{position:absolute;inset:0;background:rgba(6,29,18,0.55);backdrop-filter:blur(2px)}
.ec-sheet{position:relative;z-index:1;width:100%;max-width:560px;margin:0 auto;background:var(--white);border-radius:22px 22px 0 0;max-height:94dvh;display:flex;flex-direction:column;box-shadow:0 -12px 44px rgba(6,29,18,0.32);animation:ecUp 0.28s ease}
@keyframes ecUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ec-bar{display:flex;align-items:center;gap:0.6rem;padding:0.85rem 1rem;border-bottom:1px solid var(--gray100);flex:none}
.ec-back{background:none;border:0;font-size:1.35rem;line-height:1;color:var(--navy);cursor:pointer;padding:0.2rem 0.45rem;font-family:inherit;border-radius:8px}
.ec-back:active{background:var(--gray100)}
.ec-title{flex:1;text-align:center;font-weight:800;color:var(--navy);font-size:0.95rem}
.ec-lock{font-size:0.95rem;opacity:0.8;padding-right:0.2rem}
.ec-mount{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0.6rem 0.85rem calc(2rem + env(safe-area-inset-bottom))}
body.ec-open{overflow:hidden}

/* ---- In-app break-out sheet ---- */
.bo-overlay{position:fixed;inset:0;z-index:62;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.bo-overlay.is-hidden{display:none}
.bo-backdrop{position:absolute;inset:0;background:rgba(6,29,18,0.6);backdrop-filter:blur(2px)}
.bo-sheet{position:relative;z-index:1;width:100%;max-width:380px;background:var(--white);border-radius:18px;padding:1.5rem 1.3rem 1.3rem;text-align:center;box-shadow:0 18px 50px rgba(6,29,18,0.4)}
.bo-close{position:absolute;top:0.4rem;right:0.65rem;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--gray400);cursor:pointer;font-family:inherit;padding:0.2rem 0.4rem}
.bo-ico{font-size:1.8rem;margin-bottom:0.35rem}
.bo-sheet h3{font-size:1.12rem;font-weight:800;color:var(--navy);margin:0 0 0.45rem;line-height:1.25;letter-spacing:-0.01em}
.bo-sheet p{font-size:0.82rem;color:var(--gray500);line-height:1.5;margin:0 0 0.95rem}
.bo-open{margin-top:0;text-decoration:none}
.bo-hint{font-size:0.72rem !important;color:var(--gray400) !important;margin:0.75rem 0 0 !important}
.bo-here{display:block;margin:0.7rem auto 0;background:none;border:0;color:var(--gray500);font-size:0.78rem;text-decoration:underline;text-decoration-color:var(--gray200);text-underline-offset:2px;cursor:pointer;font-family:inherit}

/* ---- Success ---- */
.success-card{background:linear-gradient(165deg,#F8FFFB 0%, var(--white) 100%);border:1.5px solid var(--green-border);border-radius:20px;padding:1.8rem 1.3rem;text-align:center;box-shadow:var(--shadow-lg);margin-top:1.4rem}
.success-check{width:54px;height:54px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 0.8rem;box-shadow:0 6px 16px rgba(0,135,90,0.35)}
.success-check svg{width:26px;height:26px;stroke:#FFFFFF;fill:none;stroke-width:3}
.success-card h2{font-size:1.4rem;margin-bottom:0.45rem}
.success-card p{font-size:0.85rem;color:var(--gray500);line-height:1.55;margin-bottom:0.55rem}
.success-slot{font-family:var(--mono);font-size:0.85rem;font-weight:700;color:var(--green-dark);background:var(--green-bg);border:1.5px dashed var(--green-border);border-radius:10px;padding:0.55rem 0.9rem;display:inline-block;margin:0.7rem 0;letter-spacing:0.04em}
.success-mini{font-size:0.74rem !important;color:var(--gray500)}
.success-mini a{color:var(--green-dark);font-weight:600}
/* Spinner shown while confirming payment / building the report. JS toggles
   is-ready (swap to the check + reveal the open button) and is-error states. */
.success-spinner{width:54px;height:54px;border:5px solid var(--green-bg);border-top-color:var(--green);border-radius:50%;margin:0 auto 0.9rem;animation:spin360 0.9s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}
.success-card .success-check{display:none}
.success-card #reopenPdf{display:none}
.success-card #orderRef{display:none}
.success-card.is-ready .success-spinner,.success-card.is-error .success-spinner{display:none}
.success-card.is-ready .success-check{display:flex}
.success-card.is-ready #reopenPdf,.success-card.is-error #reopenPdf{display:block}
.success-card.has-ref #orderRef{display:inline-block}

.bottom-help{margin-top:2rem;padding:1.1rem 1.2rem;text-align:center;font-size:0.66rem;color:var(--gray400);line-height:1.55;border-top:1px solid var(--gray100)}
.bottom-help a{color:var(--gray500);text-decoration:underline;text-decoration-color:var(--gray200);text-underline-offset:2px}
.bottom-links{display:block;margin-top:0.6rem;color:var(--gray300)}
.bottom-links a{margin:0 0.15rem}

/* ============================================================
 * CONTENT PAGES (about, contact) — reuse the home page chrome
 * (topbar + .bottom-help footer + tokens) for a consistent look.
 * ============================================================ */
.page{max-width:780px;margin:0 auto;padding:1.7rem 1.15rem 0.5rem}
.page-eyebrow{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;color:var(--green-dark);background:var(--green-bg);border:1px solid var(--green-border);padding:0.32rem 0.72rem;border-radius:999px}
.page-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.page h1{font-size:clamp(1.7rem,6vw,2.5rem);font-weight:800;color:var(--navy);line-height:1.12;letter-spacing:-0.03em;margin:0.85rem 0 0.55rem}
.page-lead{font-size:1rem;color:var(--gray500);line-height:1.6;max-width:62ch}
.page-meta-row{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.1rem}
.page-chip{font-size:0.72rem;color:var(--gray500);background:var(--warm-gray);border:1px solid var(--gray100);border-radius:8px;padding:0.36rem 0.7rem}
.page-chip strong{color:var(--navy);font-weight:700}
.page-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.3rem}
@media(min-width:620px){.page-grid{grid-template-columns:1fr 1fr}}
.page-card{background:var(--white);border:1px solid var(--gray100);border-radius:16px;padding:1.2rem 1.3rem;box-shadow:var(--shadow-md)}
.page-card h2{font-size:1.12rem;color:var(--navy);margin-bottom:0.5rem;letter-spacing:-0.02em}
.page-card h3{font-size:1.05rem;color:var(--navy);margin-bottom:0.45rem;letter-spacing:-0.02em}
.page-card p{font-size:0.9rem;color:var(--navy-text);line-height:1.6}
.page-card p+p{margin-top:0.6rem}
.page-card ul{list-style:none;margin:0.6rem 0 0;display:flex;flex-direction:column;gap:0.45rem}
.page-card li{position:relative;padding-left:1.25rem;font-size:0.9rem;color:var(--navy-text);line-height:1.5}
.page-card li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.page-card a{color:var(--green-dark);font-weight:600}
.page-note{margin-top:1.3rem;background:var(--green-bg);border:1px solid var(--green-border);border-radius:12px;padding:0.95rem 1.15rem;font-size:0.86rem;color:var(--navy-text);line-height:1.6}
.page-note a{color:var(--green-dark);font-weight:600}

/* Cookie consent bar — deliberately slim so it never sits on top of the CTA:
   a single compact strip with a short line + small tappable buttons. */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy,#0C1D36);color:#fff;padding:0.5rem 0.9rem calc(0.5rem + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(12,29,54,0.18);display:flex;align-items:center;justify-content:center;gap:0.5rem 0.8rem;flex-wrap:wrap}
.cookie-text{margin:0;font-size:0.7rem;line-height:1.4;text-align:left;color:rgba(255,255,255,0.85);flex:0 1 460px;min-width:0}
.cookie-text a{color:#7FE3B5;text-decoration:underline;text-underline-offset:2px}
.cookie-actions{margin:0;display:flex;gap:0.45rem;flex:0 0 auto}
.cookie-btn{border:0;border-radius:9px;padding:0.45rem 0.85rem;font-size:0.76rem;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap}
.cookie-decline{background:rgba(255,255,255,0.12);color:#fff}
.cookie-accept{background:var(--green,#1F9D5F);color:#fff}
.cookie-btn:active{transform:scale(0.97)}

body.is-busy{cursor:progress}
body.is-busy .primary-cta{opacity:0.75}