/* ============================================================
   RMG Wedding Hub page — dark-glass design system
   Lifted faithfully from design/mockup-wedding-hub-page-v2.html.
   EVERY selector is scoped under `.v8hub` so this dark theme can
   never leak into the homepage (.v8), the portal, the CRM/dashboard,
   or any other public page. The shared PublicHeader/PublicFooter
   keep their own .v8-header / .v8-footer scopes; the only header
   touch here is a small dark-frost override keyed on body.v8hub-page.
   Google Fonts are already loaded in index.html (not duplicated).
   ============================================================ */

/* Design tokens — applied to the .v8hub wrapper only.
   Variables inherit to descendants, so all hub markup can use them. */
.v8hub {
  --green:#00603A;--green-deep:#003D24;--green-mist:#E8F1EC;
  --gold:#D0A54A;--gold-deep:#A8842F;--gold-light:#E0C079;--gold-soft:rgba(208,165,74,.45);
  --cream:#FFFAF1;--cream-warm:#F5EFE2;--dark:#232323;--ink:#0F1512;--grey:#54595F;--white:#fff;
  --rule:rgba(35,35,35,.10);--rule-light:rgba(255,250,241,.16);
  --font-display:'ZCOOL XiaoWei',Georgia,serif;--font-script:'Oooh Baby',cursive;
  --font-body:'Lato',-apple-system,system-ui,sans-serif;--font-label:'Roboto',sans-serif;
  --ease:cubic-bezier(.25,1,.5,1);--ease-expo:cubic-bezier(.16,1,.3,1);--maxw:1200px;
  --glass:rgba(255,250,241,.09);--glass-brd:rgba(255,255,255,.22);
  --blur:blur(28px) saturate(160%);
  --gshadow:0 30px 80px -22px rgba(0,30,18,.55),0 8px 28px rgba(0,0,0,.18),inset 1px 1px 0 0 rgba(255,255,255,.32),inset -1px -1px 0 0 rgba(255,255,255,.05);
}

/* Base — scoped to the hub wrapper */
.v8hub{font-family:var(--font-body);color:var(--cream);background:var(--ink);line-height:1.65;font-size:var(--fs-body);position:relative;overflow-x:hidden}
.v8hub *{margin:0;padding:0;box-sizing:border-box}
.v8hub img{display:block;max-width:100%}
.v8hub a{color:inherit;text-decoration:none}
.v8hub section{position:relative}

/* dark continuous backdrop with green+gold blooms so glass always reads.
   Absolute inside the wrapper (not fixed-to-viewport) so it stays behind
   the hub body only and never paints under the shared header/footer. */
.v8hub .bg-field{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(55vw 55vw at 15% 6%,rgba(0,96,58,.5),transparent 60%),
  radial-gradient(50vw 50vw at 90% 18%,rgba(208,165,74,.22),transparent 60%),
  radial-gradient(60vw 60vw at 80% 70%,rgba(0,96,58,.4),transparent 62%),
  radial-gradient(45vw 45vw at 10% 92%,rgba(208,165,74,.16),transparent 60%),
  linear-gradient(180deg,#0F1512,#0b1a13 50%,#0F1512)}
.v8hub > *:not(.bg-field){position:relative;z-index:1}

.v8hub h1,.v8hub h2,.v8hub h3,.v8hub h4{font-family:var(--font-display);font-weight:400}
.v8hub h2{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.06;color:var(--cream)}
.v8hub .script{font-family:var(--font-script);color:var(--gold-light);line-height:.9}
.v8hub .eyebrow{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.12em;color:var(--gold);display:inline-block}
.v8hub .lead{font-size:var(--fs-lead);line-height:1.75;color:rgba(255,250,241,.8);max-width:62ch;font-weight:300}
/* Liquid-glass CTA — matches the homepage (.v8 .btn-outline): at rest a clean
   centred underline; on hover the border draws out from the underline to a full
   pill, the underline fades, and a frosted glass fill blooms in. No markup change
   needed — pseudo layers sit at z-index:-1 so plain-text buttons stay on top. */
.v8hub .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-label);font-size:var(--fs-label);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  padding:15px 30px;border-radius:100px;color:rgba(255,250,241,.85);background:transparent;border:1px solid transparent;
  cursor:pointer;isolation:isolate;box-shadow:none;
  transition:color .35s ease,background .2s ease,box-shadow .3s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.v8hub .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  border:1px solid rgba(255,250,241,.5);
  clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s}
.v8hub .btn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:-1;
  width:calc(100% - 44px);height:1px;background:rgba(255,250,241,.5);pointer-events:none;opacity:1;transition:opacity .12s linear}
.v8hub .btn:active{transform:scale(.97)}
.v8hub .btn:hover,.v8hub .btn:focus-visible{color:#FFFAF1;transform:scale(1.015);outline:none;
  background:linear-gradient(180deg,rgba(255,250,241,.13),rgba(255,250,241,.05));backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 18px 40px -18px rgba(0,0,0,.55)}
.v8hub .btn:hover::before,.v8hub .btn:focus-visible::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.v8hub .btn:hover::after,.v8hub .btn:focus-visible::after{opacity:0;transition-delay:.26s}
.v8hub .btn-primary{color:#F0D9A0}
.v8hub .btn-primary::before{border-color:rgba(233,200,126,.6)}
.v8hub .btn-primary::after{background:rgba(233,200,126,.85)}
.v8hub .btn-primary:hover,.v8hub .btn-primary:focus-visible{color:#FFF5D6;
  background:linear-gradient(180deg,rgba(233,200,126,.24),rgba(208,165,74,.12));
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 18px 40px -18px rgba(0,0,0,.55)}
.v8hub .btn-ghost{color:rgba(255,250,241,.82)}
.v8hub .btn-ghost::before{border-color:rgba(255,250,241,.4)}
.v8hub .btn-ghost::after{background:rgba(255,250,241,.55)}
/* on the cream light band, shift the glass CTA to green so it still reads */
.v8hub .lightband .btn{color:var(--green,#00603A)}
.v8hub .lightband .btn::before{border-color:rgba(0,96,58,.5)}
.v8hub .lightband .btn::after{background:rgba(0,96,58,.55)}
.v8hub .lightband .btn:hover,.v8hub .lightband .btn:focus-visible{color:var(--green-deep,#003D24);
  background:linear-gradient(180deg,rgba(0,96,58,.12),rgba(0,96,58,.04))}
@media (prefers-reduced-motion:reduce){
  .v8hub .btn::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);opacity:0;transition:opacity .18s ease}
  .v8hub .btn:hover::before,.v8hub .btn:focus-visible::before{opacity:1}
  .v8hub .btn:hover,.v8hub .btn:focus-visible{transform:none}
}
.v8hub .container{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.v8hub .section{padding:110px 0;position:relative}

/* scroll reveal — bulletproof: visible unless JS hides it, plus failsafe in the component.
   Keyed on a .v8hub-js root flag that is separate from the homepage's .v8-js,
   so the two reveal systems never interfere. */
html:not(.v8hub-js) .v8hub .reveal{opacity:1;transform:none}
.v8hub-js .v8hub .reveal{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo)}
.v8hub-js .v8hub .reveal.in{opacity:1;transform:none}

/* HERO planning card — premium glass with gold hairlines.
   Replaces the old browser-chrome "device" mockup, which read as SaaS
   software rather than a wedding. Mirrors the site-wide HubStrip card. */
.v8hub .plan-card{position:relative;border-radius:24px;padding:24px 26px 26px;text-align:left;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);overflow:hidden}
.v8hub .plan-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 0 0,rgba(255,255,255,.14),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 55%)}
.v8hub .plan-card>*{position:relative;z-index:1}
.v8hub .pc-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.v8hub .pc-couple{font-family:var(--font-display);color:var(--cream);font-size:var(--fs-lead)}
.v8hub .pc-live{margin-left:auto;font-family:var(--font-label);font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;color:var(--gold-light);border:1px solid var(--gold-soft);border-radius:100px;padding:3px 10px}
.v8hub .pc-meta{font-family:var(--font-label);font-size:var(--fs-label);color:rgba(255,250,241,.58);letter-spacing:.04em;margin-bottom:18px}
.v8hub .pc-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;margin-bottom:9px;
  background:rgba(255,250,241,.06);border:1px solid var(--rule-light);font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.9)}
.v8hub .pc-row .pc-label{flex:1}
.v8hub .pc-row b{color:var(--gold-light);font-family:var(--font-label);font-weight:600}
.v8hub .pc-tick{width:20px;height:20px;border-radius:50%;flex:0 0 20px;background:linear-gradient(135deg,#E9C87E,#D0A54A);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:var(--fs-label);font-weight:700}
.v8hub .pc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.v8hub .pc-chip{font-family:var(--font-label);font-size:var(--fs-label);font-weight:600;color:var(--gold-light);background:rgba(208,165,74,.12);border:1px solid var(--gold-soft);padding:6px 12px;border-radius:100px}

/* HERO — Hub as a product */
.v8hub .hero{padding:150px 0 90px;text-align:center;overflow:hidden}
.v8hub .hero .eyebrow{margin-bottom:18px}
.v8hub .hero h1{font-size:clamp(2.8rem,6vw,5rem);line-height:1;color:var(--cream)}
.v8hub .hero h1 .script{display:block;color:var(--gold-light);font-size:clamp(2.4rem,4.6vw,3.6rem);margin-top:.06em}
.v8hub .hero p{max-width:50ch;margin:24px auto 30px;color:rgba(255,250,241,.82);font-weight:300;font-size:var(--fs-lead)}
.v8hub .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:60px}
.v8hub .hero-stage{position:relative;max-width:520px;margin:0 auto;padding:0 20px}
.v8hub .hero-stage::before{content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:88%;height:78%;background:radial-gradient(closest-side,rgba(208,165,74,.42),transparent 74%);filter:blur(48px);z-index:0}
.v8hub .hero-stage .plan-card{z-index:1}

/* THE SHIFT */
.v8hub .shift{padding:60px 0 30px;text-align:center}
.v8hub .shift .container{max-width:840px}
.v8hub .shift .before{font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,1.95rem);color:rgba(255,250,241,.55);line-height:1.4}
.v8hub .shift .after{font-family:var(--font-display);font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--cream);line-height:1.3;margin-top:14px}
.v8hub .shift .after .script{color:var(--gold-light)}

/* BENTO over full image */
.v8hub .bento-sec{padding:90px 0 110px}
.v8hub .bento-stage{position:relative;border-radius:30px;overflow:hidden;padding:30px;margin:40px 0 0}
.v8hub .bento-stage>.bimg{position:absolute;inset:0;background:url('/v8/ap-colour.jpg') center 30%/cover;}
.v8hub .bento-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,40,24,.78),rgba(15,21,18,.86))}
.v8hub .bento{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:16px}
.v8hub .tile{background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);border-radius:20px;padding:24px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.v8hub .tile::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 0 0,rgba(255,255,255,.16),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.14),transparent 55%)}
.v8hub .tile>*{position:relative;z-index:1}
.v8hub .tile .tnum{font-family:var(--font-label);font-size:var(--fs-label);color:var(--gold-light);letter-spacing:.04em;margin-bottom:8px}
.v8hub .tile h3{color:var(--cream);font-size:1.4rem;margin-bottom:6px;line-height:1.1}
.v8hub .tile p{font-size:var(--fs-meta);color:rgba(255,250,241,.82);font-weight:300}
.v8hub .tile .so{margin-top:auto;font-family:var(--font-display);color:var(--gold-light);font-size:var(--fs-body);padding-top:12px}
/* tile spans */
.v8hub .t-timeline{grid-column:span 4;grid-row:span 2}
.v8hub .t-shot{grid-column:span 2;grid-row:span 2}
.v8hub .t-mood{grid-column:span 2}
.v8hub .t-msg{grid-column:span 2}
.v8hub .t-gallery{grid-column:span 2}
.v8hub .t-wide{grid-column:span 6}
/* tile visuals */
.v8hub .tv-time{display:grid;gap:0;margin-top:12px}
.v8hub .tv-time div{display:flex;justify-content:space-between;font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.9);padding:8px 0;border-bottom:1px solid rgba(255,250,241,.14)}
.v8hub .tv-time b{color:var(--gold-light)}
.v8hub .tv-shot{display:grid;gap:7px;margin-top:10px}
.v8hub .tv-shot div{display:flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.92)}
.v8hub .tv-shot .ck{width:18px;height:18px;border-radius:50%;background:var(--gold);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-label);flex:0 0 auto}
.v8hub .tv-shot .ck.o{background:transparent;border:1px solid rgba(255,250,241,.4);color:transparent}
.v8hub .tv-mood{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
.v8hub .tv-mood div{aspect-ratio:1;border-radius:7px;background-size:cover;background-position:center 30%}
.v8hub .tv-msg{margin-top:8px}
.v8hub .tv-msg .b{font-family:var(--font-label);font-size:var(--fs-label);background:rgba(255,250,241,.16);padding:8px 11px;border-radius:10px;margin-bottom:6px;max-width:88%}
.v8hub .tv-msg .b.them{background:var(--gold);color:var(--ink);margin-left:auto}

/* JOURNEY — connected line */
.v8hub .journey{padding:30px 0 100px;text-align:center}
.v8hub .jline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1100px;margin:50px auto 0}
.v8hub .jline::before{content:"";position:absolute;top:24px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.v8hub .jnode{position:relative;padding:0 14px}
.v8hub .jnode .jn{width:48px;height:48px;border-radius:50%;background:var(--green-deep);border:1px solid var(--gold);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--fs-lead);margin:0 auto 16px;position:relative;z-index:1}
.v8hub .jnode h4{color:var(--cream);font-size:var(--fs-lead);margin-bottom:5px}
.v8hub .jnode p{font-size:var(--fs-meta);color:rgba(255,250,241,.7)}

/* TESTIMONIAL + FINAL */
.v8hub .htesti{padding:100px 0;text-align:center}
.v8hub .htesti .container{max-width:820px}
.v8hub .htq{font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2.2rem);color:var(--cream);line-height:1.4}
.v8hub .htq em{font-family:var(--font-script);font-style:normal;color:var(--gold-light)}
.v8hub .htw{font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.6);margin-top:18px}
.v8hub .hfinal{padding:40px 0 130px;text-align:center}
.v8hub .hfinal .panel{max-width:880px;margin:0 auto;padding:60px 48px;border-radius:28px;background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);box-shadow:var(--gshadow);position:relative;overflow:hidden}
.v8hub .hfinal .panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(208,165,74,.2),transparent 60%);pointer-events:none}
.v8hub .hfinal h2 .script{display:block;color:var(--gold-light);font-size:clamp(2rem,4vw,3rem)}
.v8hub .hfinal p{margin:16px auto 28px;color:rgba(255,250,241,.82);font-weight:300;max-width:46ch;position:relative}
.v8hub .hfinal .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ============================================================
   NEW SECTIONS — ported from mockup-wedding-hub-page-v3-shareable.html.
   Sign / pay / secure feature rows, the honest comparison, and the
   reassurance FAQ. Every selector stays scoped under .v8hub so the
   dark-glass theme never leaks past this page.
   ============================================================ */

/* shared section heading */
.v8hub .sec-head{text-align:center;max-width:720px;margin:0 auto 56px}
.v8hub .sec-head h2{margin-top:10px}
.v8hub .sec-head p{margin:16px auto 0;color:rgba(255,250,241,.78);font-weight:300;font-size:var(--fs-body);max-width:58ch}

/* EVERYTHING HANDLED — clean glass benefit cards (no fake software UI) */
.v8hub .handled{padding:46px 0}
.v8hub .handled .container{max-width:1180px}
.v8hub .hcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.v8hub .hcard{background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);border-radius:22px;padding:34px 30px;position:relative;overflow:hidden}
.v8hub .hcard::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 0 0,rgba(255,255,255,.14),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 55%)}
.v8hub .hcard>*{position:relative;z-index:1}
.v8hub .hcard .hic{width:46px;height:46px;border-radius:13px;background:rgba(208,165,74,.14);border:1px solid var(--gold-soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.v8hub .hcard .hic svg{width:22px;height:22px;stroke:var(--gold-light);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v8hub .hcard h3{color:var(--cream);font-size:1.4rem;line-height:1.14;margin-bottom:12px}
.v8hub .hcard h3 .script{color:var(--gold-light)}
.v8hub .hcard p{font-size:var(--fs-meta);color:rgba(255,250,241,.8);font-weight:300;line-height:1.6}
.v8hub .hcard .hpoints{list-style:none;margin-top:18px;display:grid;gap:11px}
.v8hub .hcard .hpoints li{position:relative;padding-left:22px;font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.86);line-height:1.5}
.v8hub .hcard .hpoints li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(208,165,74,.16)}
/* Mobile: centre the whole card (icon, heading, body and points). The point
   dots are dropped so the centred lines do not have hanging bullets. */
@media(max-width:820px){
  .v8hub .hcard{text-align:center}
  .v8hub .hcard .hic{margin-left:auto;margin-right:auto}
  .v8hub .hcard .hpoints li{padding-left:0}
  .v8hub .hcard .hpoints li::before{display:none}
}

/* COMPARISON — two columns, glass+gold on the Hub side only */
.v8hub .compare{padding:100px 0}
.v8hub .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1080px;margin:0 auto;align-items:stretch}
.v8hub .cmp-col{border-radius:24px;padding:34px 32px;position:relative;overflow:hidden}
.v8hub .cmp-col.old{background:rgba(255,250,241,.04);border:1px solid var(--rule-light)}
.v8hub .cmp-col.new{background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.v8hub .cmp-col.new::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 100% 0,rgba(208,165,74,.16),transparent 55%)}
.v8hub .cmp-col>*{position:relative;z-index:1}
.v8hub .cmp-col .cmp-tag{font-family:var(--font-label);font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:inline-block;margin-bottom:6px}
.v8hub .cmp-col.old .cmp-tag{color:rgba(255,250,241,.5)}
.v8hub .cmp-col.new .cmp-tag{color:var(--gold)}
.v8hub .cmp-col h3{font-family:var(--font-display);font-size:1.55rem;line-height:1.15;margin-bottom:20px}
.v8hub .cmp-col.old h3{color:rgba(255,250,241,.72)}
.v8hub .cmp-col.new h3{color:var(--cream)}
.v8hub .cmp-col.new h3 .script{color:var(--gold-light)}
.v8hub .cmp-list{list-style:none;display:grid;gap:13px}
.v8hub .cmp-list li{display:flex;gap:13px;align-items:flex-start;font-family:var(--font-label);font-size:var(--fs-meta);line-height:1.45}
.v8hub .cmp-col.old .cmp-list li{color:rgba(255,250,241,.62)}
.v8hub .cmp-col.new .cmp-list li{color:rgba(255,250,241,.92)}
.v8hub .cmp-ic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-meta);margin-top:1px}
.v8hub .cmp-col.old .cmp-ic{background:rgba(255,250,241,.08);color:rgba(255,250,241,.5)}
.v8hub .cmp-col.new .cmp-ic{background:rgba(208,165,74,.18);border:1px solid var(--gold-soft);color:var(--gold-light)}
.v8hub .cmp-foot{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,250,241,.12);font-family:var(--font-display);font-size:var(--fs-body)}
.v8hub .cmp-col.old .cmp-foot{color:rgba(255,250,241,.5)}
.v8hub .cmp-col.new .cmp-foot{color:var(--gold-light)}

/* FAQ — glass accordions (native details/summary, keyboard-accessible, no JS) */
.v8hub .faq{padding:100px 0 110px}
/* Clean, simple questions (the Packages style): hairline dividers, a serif
   question and the answer always shown. No glass card, no toggle icon. Shared
   by every page with questions, so they all look the same. */
.v8hub .faq-wrap{max-width:840px;margin:0 auto;display:grid;gap:0}
.v8hub .faq-item{background:none;border:none;border-top:1px solid var(--glass-brd);border-radius:0;overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none}
.v8hub .faq-item summary{list-style:none;cursor:default;padding:26px 0 0;display:block;font-family:var(--font-display);font-weight:400;font-size:var(--fs-lead);color:var(--cream)}
.v8hub .faq-item summary::-webkit-details-marker{display:none}
.v8hub .faq-item .q-ic{display:none}
.v8hub .faq-item .faq-a{display:block;padding:12px 0 26px;font-family:var(--font-body);font-weight:300;font-size:var(--fs-body);line-height:1.7;color:rgba(255,250,241,.8);max-width:none}

/* Geo/location pages carry their own inline FAQ accordion styles; override them
   with higher specificity (.faq-list .faq-item) so those pages match the clean
   style too. Answer is a <p>, and the toggle is a summary::after "+". */
.v8hub .faq-list{gap:0}
.v8hub .faq-list .faq-item{background:none;border:none;border-top:1px solid var(--glass-brd);border-radius:0;overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none}
.v8hub .faq-list .faq-item summary{cursor:default;padding:26px 0 0;display:block;font-weight:400}
.v8hub .faq-list .faq-item summary::after{display:none}
.v8hub .faq-list .faq-item p{display:block;padding:12px 0 26px;max-width:none}
/* Questions open and close, so show it (Katie, 21 Oct 2026): a small gold
   chevron under each centred question that flips when the answer is open. */
.v8hub .faq-item summary,.v8hub .faq-list .faq-item summary{cursor:pointer;padding-bottom:22px}
.v8hub .faq-item[open] summary,.v8hub .faq-list .faq-item[open] summary{padding-bottom:0}
.v8hub .faq-item summary::after,.v8hub .faq-list .faq-item summary::after{content:"";display:block;width:9px;height:9px;margin:12px auto 0;
  border-right:1.5px solid var(--gold-light);border-bottom:1.5px solid var(--gold-light);transform:rotate(45deg);transition:transform .25s var(--ease)}
.v8hub .faq-item[open] summary::after,.v8hub .faq-list .faq-item[open] summary::after{transform:rotate(-135deg);margin-top:16px}
@media (prefers-reduced-motion:reduce){.v8hub .faq-item summary::after{transition:none}}
.v8hub .faq-note{text-align:center;margin-top:30px;font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.6)}
.v8hub .faq-note a{color:var(--gold-light);border-bottom:1px solid var(--gold-soft)}
@media (max-width:767px){.v8hub .faq-note a{display:inline-flex;align-items:center;min-height:44px}}

/* ============================================================
   HEADER dark-frost override — minimal, scoped to this page only.
   The shared PublicHeader's scrolled state uses a light cream frost
   with green links (correct over the cream homepage). On this dark
   page that reads wrong, so when body.v8hub-page is set we swap the
   scrolled header to a dark frost with cream links. Unscrolled state
   already sits fine over the dark hero (cream links), so it's left be.
   ============================================================ */
body.v8hub-page .v8-header.scrolled{background:rgba(15,21,18,.72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--rule-light, rgba(255,250,241,.16))}
body.v8hub-page .v8-header.scrolled nav a{color:var(--cream, #FFFAF1)}
body.v8hub-page .v8-header.scrolled nav a:hover{color:var(--gold, #D0A54A)}
body.v8hub-page .v8-header.scrolled .nav-login{border-color:var(--gold, #D0A54A);color:var(--gold, #D0A54A)}
body.v8hub-page .v8-header.scrolled .nav-login:hover{background:var(--gold, #D0A54A);border-color:var(--gold, #D0A54A);color:var(--ink, #0F1512)}
body.v8hub-page .v8-header.scrolled .v8-burger{color:var(--cream, #FFFAF1)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .v8hub .section,.v8hub .bento-sec,.v8hub .journey,.v8hub .handled,.v8hub .htesti,.v8hub .hfinal,.v8hub .compare,.v8hub .faq{padding:64px 0}.v8hub .hero{padding:120px 0 70px}
  .v8hub .container{padding:0 20px}
  .v8hub .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .v8hub .t-timeline,.v8hub .t-shot,.v8hub .t-mood,.v8hub .t-msg,.v8hub .t-gallery,.v8hub .t-wide{grid-column:span 2;grid-row:auto}
  .v8hub .jline{grid-template-columns:1fr 1fr;gap:28px 0}.v8hub .jline::before{display:none}
  /* A lone last step (odd count, e.g. the 5th) spans both columns and centres,
     instead of sitting in the left column with a gap on the right. */
  .v8hub .jline .jnode:last-child:nth-child(odd){grid-column:1 / -1}
  /* FAQ questions and answers read centred on mobile. */
  .v8hub .faq-item summary,.v8hub .faq-item .faq-a{text-align:center}
  .v8hub .hcards{grid-template-columns:1fr;gap:16px}
  .v8hub .cmp-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .v8hub .reveal{opacity:1;transform:none}
  .v8hub *{animation:none}
}

/* lock the page background dark so there is no white on overscroll */
body.v8hub-page{background:#0F1512}

/* Wedding Hub page: fit each section on one screen as you scroll (16 Oct 2026) */
@media(min-width:861px){
  .v8hub .bento-sec{padding:clamp(40px,8svh,90px) 0 clamp(44px,9svh,110px)}
  .v8hub .compare{padding:clamp(44px,9svh,100px) 0}
  /* Rows grow with their content so no card is ever cut off (20 Oct 2026). */
  .v8hub .bento{grid-auto-rows:minmax(110px,auto)}
  .v8hub .tv-time div{padding:7px 0}
  .v8hub .tv-mood div{aspect-ratio:4/3}
  .v8hub .yp-bento-head{margin-bottom:clamp(16px,3svh,40px)}
}

/* FAQ questions and answers centred under their centred headings, every page */
.v8hub .faq-item summary,.v8hub .faq-item .faq-a,
.v8hub .faq-list .faq-item summary,.v8hub .faq-list .faq-item p{text-align:center}