/* Prepare guides (/prepare/*): answer-first pages for search + AI answer engines, in the app's own UI.
   Built on components.css: .mood--night / .mood--tide, .frost-tile, .icon-tile + .c-*, .dm, .ruler,
   .bubble-q / .bubble-a / .cite, .device. Specs: design/DESIGN.md §6g. */
.g-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.g-label{display:inline-block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-bottom:14px}

/* ---------- Hero: the landing page's Night frame ---------- */
.g-top{padding-top:12px}
.g-hero{border-radius:44px;padding:0 0 44px;box-shadow:0 30px 80px -50px rgba(17,21,43,.8)}
.g-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.07) 1.2px,transparent 1.6px) 0 0/20px 20px;mask:linear-gradient(200deg,#000 0%,transparent 60%)}
.g-nav{display:flex;justify-content:space-between;align-items:center;padding:26px 36px}
.g-nav img{display:block}
.g-pill,.g-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;color:#fff;font-size:13.5px;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.22);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.g-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--hivis);box-shadow:0 0 0 4px rgba(222,242,10,.18)}
.g-chip{height:32px;padding:0 13px;font-size:12.5px;color:rgba(255,255,255,.86)}
.g-chip i{color:var(--hivis);font-size:14px}
a.g-chip:hover{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.1))}
.g-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end;padding:36px 36px 0}
.g-hero__grid--solo{grid-template-columns:minmax(0,860px)}
.g-crumbs{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:22px}
.g-crumbs a{color:inherit;text-decoration:none}
.g-crumbs a:hover{color:#fff}
.g-crumbs span{margin:0 8px;opacity:.5}
.g-title{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.4vw,74px);letter-spacing:-.05em;line-height:.95;margin:0;color:#fff}
.g-title em{display:block;font-family:var(--font);font-style:italic;font-weight:300;letter-spacing:-.045em;color:var(--hivis);margin-top:.06em}
.g-answer{font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;color:rgba(255,255,255,.82);margin:26px 0 0;max-width:36em}
.g-answer strong{color:#fff;font-weight:600}
.g-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}

/* Number panel: frost card with the official number, ruler, then two frost tiles */
.g-hero__panel{display:flex;flex-direction:column;gap:12px}
.g-num{background:var(--frost);border:1px solid var(--frost-line);border-radius:var(--r-card);padding:24px 24px 18px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.g-num__val{display:flex;align-items:flex-end;gap:14px;margin:18px 0 8px;color:var(--hivis)}
.g-num__dm{font-size:112px}
.g-num__unit{font-family:var(--font);font-style:italic;font-weight:300;font-size:34px;line-height:.9;color:#fff;padding-bottom:4px}
.g-num__pre{font-size:15px;font-style:italic;font-weight:300;color:var(--on-mood-2);padding-bottom:10px}
.g-num .hero__caption{color:var(--on-mood-2)}
.g-num .ruler{color:#fff;margin-top:14px}
.g-num .ruler i.now{background:var(--hivis)}
.g-hero__panel .frost-row{margin-top:0}
.g-hero__panel .frost-tile__value{margin-top:18px}
.g-hero__panel .frost-tile .dm{color:#fff}
.g-hero__panel .chip-icon .ico{width:17px;height:17px}
.g-ftext{font-size:18px;font-style:italic;font-weight:300;line-height:1.2}

/* ---------- Sections ---------- */
.g-sec{padding-top:96px}
.g-sec h2,.g-water h2{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.8vw,52px);letter-spacing:-.05em;line-height:.98;margin:0}
.g-sec h2 em,.g-water h2 em{font-family:var(--font);font-style:italic;font-weight:300;letter-spacing:-.045em;color:var(--ink-2)}
.g-sechead{max-width:760px;margin-bottom:32px}
.g-sechead p,.g-split>div>p{color:var(--ink-2);margin:14px 0 0;font-size:16px;line-height:1.55;max-width:34em}
.g-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.g-split>div:first-child{position:sticky;top:24px}

/* Facts: icon cards in a 2-col grid */
.g-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-fact{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:var(--r-tile);padding:18px;box-shadow:var(--lift)}
.g-fact__k{display:block;font-size:12.5px;color:var(--ink-2)}
.g-fact__v{display:block;font-size:17px;font-weight:500;letter-spacing:-.015em;line-height:1.3;margin-top:3px}
.g-fact__s{display:block;font-size:13px;font-style:italic;font-weight:300;color:var(--ink-2);margin-top:5px;line-height:1.4}

/* Kit: app-style item cards with category icon tiles */
.g-kit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g-kit li{display:flex;gap:14px;align-items:center;background:var(--card);border-radius:var(--r-tile);padding:14px 16px 14px 14px;box-shadow:var(--lift);min-height:76px}
.g-kit__name{flex:1;font-size:15px;line-height:1.35;letter-spacing:-.01em}
.g-kit__n{align-self:flex-start;font-size:12px;font-style:italic;font-weight:300;color:var(--ink-3)}
.g-note{font-size:13px;font-style:italic;font-weight:300;color:var(--ink-2);margin:16px 0 0}

/* Water maths: Tide mood band, dot-matrix litres per household */
.g-water{border-radius:var(--r-hero);padding:44px;display:grid;grid-template-columns:.8fr 1.2fr;gap:20px 48px;align-items:end}
.g-water .g-label{color:var(--ink-2)}
.g-water h2 em{color:var(--ink-2)}
.g-water__copy p{color:var(--ink-2);margin:14px 0 0;line-height:1.55}
.g-wtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.g-wtile{--frost:rgba(255,255,255,.5);background:var(--frost);border:1px solid rgba(255,255,255,.7);border-radius:22px;padding:14px 12px;display:flex;flex-direction:column;gap:12px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.g-wtile__who{font-size:12px;color:var(--ink-2)}
.g-wtile .dm{color:var(--ink)}
.g-wtile__unit{font-size:13px;font-style:italic;font-weight:300;color:var(--ink-2);margin-top:-6px}
.g-water__note{grid-column:1/-1;display:flex;gap:8px;align-items:center;margin:8px 0 0;font-size:12.5px;color:var(--ink-2)}
.g-water__note .ico{width:16px;height:16px;flex:0 0 auto}

/* Also advised */
.g-also{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.g-also li{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:22px;padding:16px 18px;font-size:15.5px;line-height:1.5;color:var(--ink-2);box-shadow:var(--lift)}
.g-also li strong{color:var(--ink);font-weight:600}
.g-also__ico{flex:0 0 26px;height:26px;border-radius:50%;background:var(--hivis);color:var(--hivis-ink);display:grid;place-items:center}
.g-also__ico .ico{width:15px;height:15px}

/* Sources as an Ask answer with citation chips: the app's own pattern */
.g-ask{display:flex;flex-direction:column;gap:10px;background:var(--card-2);border-radius:var(--r-card);padding:24px}
.g-ask .bubble-q{align-self:flex-end}
.g-ask .bubble-a{max-width:100%;box-shadow:var(--lift)}
.g-ask .bubble-a p{margin:0 0 10px}
.g-ask__quote{font-size:19px;font-style:italic;font-weight:300;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.g-ask__tr{font-size:13.5px;color:var(--ink-2)}
.g-ask__cites{display:flex;flex-wrap:wrap}
.g-ask .cite{text-decoration:none;color:var(--ink-2);max-width:100%}
.g-ask .cite i{color:var(--ready)}
.g-ask .cite:hover{color:var(--ink)}
.g-ask .ai-note .ico{width:14px;height:14px}

/* FAQ: native disclosure, all answers stay in the HTML */
.g-faq{border-top:1px solid var(--hair)}
.g-q{border-bottom:1px solid var(--hair)}
.g-q summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none}
.g-q summary::-webkit-details-marker{display:none}
.g-q h3{margin:0;font-size:18px;font-weight:500;letter-spacing:-.015em}
.g-q__ico{flex:0 0 34px;height:34px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:var(--lift);transition:transform var(--dur) var(--ease)}
.g-q__ico .ico{width:16px;height:16px}
.g-q[open] .g-q__ico{transform:rotate(45deg)}
.g-q p{margin:0 0 24px;color:var(--ink-2);font-size:16px;line-height:1.6;max-width:40em}

/* Country cards: small Night moods, Hi-Vis number */
.g-ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.g-ccard{border-radius:var(--r-tile);padding:18px 18px 16px;display:flex;flex-direction:column;gap:22px;text-decoration:none;min-height:168px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.g-ccard:hover{transform:translateY(-3px);box-shadow:0 24px 40px -24px rgba(17,21,43,.7)}
.g-ccard__top{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600;color:#fff}
.g-ccard__top .ico{width:16px;height:16px;transform:rotate(-90deg);opacity:.7}
.g-ccard__val{display:flex;align-items:flex-end;color:var(--hivis);margin-top:auto}
.g-ccard__val .unit{color:#fff;font-size:15px}
.g-vpre{font-size:13px;font-style:italic;font-weight:300;color:var(--on-mood-2);margin-right:8px;padding-bottom:2px}
.g-vtext{font-size:22px;font-style:italic;font-weight:300;color:#fff;line-height:1}
.g-ccard__src{font-size:11.5px;color:var(--on-mood-2);line-height:1.3}
.g-ccard.is-here{box-shadow:inset 0 0 0 2px var(--hivis)}
.g-here{font-size:11px;font-weight:600;color:var(--hivis-ink);background:var(--hivis);border-radius:999px;padding:3px 9px}

/* Hub ledger (same pattern as the landing page's "Be ready. But for how long?") */
.g-ledger{border-top:1px solid var(--hair)}
.g-row{display:grid;grid-template-columns:1.3fr 1fr auto 28px;align-items:center;gap:24px;padding:22px 14px;margin:0 -14px;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink);border-radius:18px;
  transition:background var(--dur) var(--ease)}
.g-row:hover{background:var(--card)}
.g-row .c{display:block;font-size:20px;letter-spacing:-.02em}
.g-row .s{display:block;font-size:13px;color:var(--ink-2);margin-top:3px}
.g-row__w{display:flex;align-items:center;gap:8px;font-size:14px;font-style:italic;font-weight:300;color:var(--ink-2)}
.g-row__w .ico{width:18px;height:18px;color:#2F7BEA}
.g-row__v{display:flex;align-items:flex-end;justify-content:flex-end;min-width:170px}
.g-row__v .g-vpre{color:var(--ink-2)}
.g-row__v .g-vtext{color:var(--ink);font-size:19px}
.g-row__go .ico{width:18px;height:18px;transform:rotate(-90deg);color:var(--ink-3)}

/* CTA with a real app screen */
.g-cta{margin-top:96px;border-radius:44px;padding:56px 56px 0;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;min-height:440px}
.g-eyebrow{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-size:14px;margin-bottom:18px}
.g-eyebrow i{color:var(--hivis)}
.g-cta h2{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4.4vw,60px);letter-spacing:-.05em;line-height:.95;margin:0;color:#fff}
.g-cta h2 em{font-family:var(--font);font-style:italic;font-weight:300;color:var(--hivis)}
.g-cta p{color:var(--on-mood-2);margin:18px 0 28px;max-width:32em;line-height:1.55}
.g-cta .btn-hivis{text-decoration:none}
.g-cta__copy{padding-bottom:56px}
.g-cta__device{align-self:end;justify-self:center;height:340px;overflow:hidden}
.g-cta__device .device-wrap{margin-top:0}

.g-foot{margin-top:96px;padding-top:24px;padding-bottom:48px;border-top:1px solid var(--hair);font-size:13px;color:var(--ink-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.g-foot a{color:inherit}

@media (max-width:1020px){
  .g-hero__grid,.g-split,.g-water,.g-cta{grid-template-columns:1fr}
  .g-split>div:first-child{position:static}
  .g-split{gap:28px}
  .g-kit{grid-template-columns:1fr 1fr}
  .g-wtiles{grid-template-columns:repeat(3,1fr)}
  .g-cta__copy{padding-bottom:0}
}
@media (max-width:640px){
  .g-wrap{padding:0 12px}
  .g-hero{border-radius:32px}
  .g-nav{padding:20px}
  .g-hero__grid{padding:20px 20px 0;gap:28px}
  .g-num__dm{font-size:84px}
  .g-sec{padding-top:72px}
  .g-sec>.g-sechead,.g-sec>.g-split,.g-sec>.g-kit,.g-sec>.g-ledger,.g-sec>.g-ccards,.g-sec>.g-note{padding:0 8px}
  .g-facts,.g-kit{grid-template-columns:1fr}
  .g-water{padding:28px 20px}
  .g-wtiles{grid-template-columns:1fr 1fr}
  .g-row{grid-template-columns:1fr auto;gap:10px 16px;margin:0;padding:18px 8px}
  .g-row__w{grid-column:1/-1;grid-row:2}
  .g-row__go{display:none}
  .g-row__v{min-width:0}
  .g-cta{padding:36px 24px 0;border-radius:32px}
  .g-cta__device{height:260px}
  .g-foot{padding-left:20px;padding-right:20px}
}
.g-here{white-space:nowrap}
@media (min-width:1021px){.g-ccards{grid-template-columns:repeat(4,1fr)}}
/* Hub hero: four headline numbers as frost tiles */
.g-hgrid{grid-template-columns:1fr 1fr}
.g-htile{text-decoration:none;color:#fff;transition:background var(--dur) var(--ease)}
.g-htile:hover{background:rgba(255,255,255,.28)}
.g-htile .frost-tile__head{color:#fff;font-weight:500}
.g-htile .frost-tile__value{color:var(--hivis)}
.g-htile .unit{color:#fff}