/* Travel FX GO brand guidelines v1.0 (Nov 2026). Loaded after styles.css so it wins.
   Palette: Deep Purple #2F057B, GO Mint #84DBD1, Dark Purple #2D0A66, Deep Violet #5B2BD6, Violet #AD63E0,
   Blue Violet #7C6CF2, Light Lilac #ECDEFF, Magenta #CA1072 (sparingly), Ink #2A2A33.
   Coral/red #D84055 is for errors only. Never white text on mint. */
:root {
  --indigo: #2F057B; --indigo-deep: #2D0A66; --night: #2D0A66;
  --purple: #5B2BD6; --lilac: #AD63E0; --blue: #7C6CF2; --coral: #5B2BD6; --magenta: #CA1072;
  --teal: #84DBD1; --mint: #84DBD1; --lavender: #ECDEFF; --page: #fff; --line: #E3D6F5;
  --ink: #2A2A33; --muted: #5E5A6B; --error: #D84055;
  --cta: linear-gradient(90deg, #5B2BD6, #2F057B);
  --radius: 14px;
  --shadow: 0 24px 60px -28px rgba(47, 5, 123, .35);
}
body { background: #fff; }
a { color: var(--purple); }
h1, h2 { letter-spacing: -.01em; }
h1 { font-weight: 700; letter-spacing: -.01em; }
h2 { font-weight: 700; }
.eyebrow { color: var(--purple); font-weight: 600; letter-spacing: .08em; }
.btn { font-weight: 700; }
.btn-cta { background: var(--cta); color: #fff; box-shadow: 0 12px 28px -14px rgba(47,5,123,.7); }
.btn-cta:hover { box-shadow: 0 16px 34px -14px rgba(47,5,123,.9); }
.btn-mint { background: var(--mint); color: var(--indigo); box-shadow: 0 12px 28px -14px rgba(0,0,0,.5); }
.btn-mint:hover { filter: brightness(1.04); }
input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(91,43,214,.16); }
.btn-social:hover { border-color: var(--purple); }
.msg.err { background: #fdecef; color: #a3202f; }
.msg.ok { background: #e6f7f4; color: #0f5c52; }
.step .n, .fr .av, .milestones li.done .dot, .perks li span { background: var(--cta); }
.ladder span { background: var(--lavender); color: var(--purple); }
.faq summary::after { color: var(--purple); }
.feature { background: var(--lavender); }
.feature svg { color: var(--purple); }
.toast { background: var(--indigo); }
.invited { background: var(--lavender); color: var(--indigo); }
.proof .stars { color: #00b67a; }

/* Header and links on dark */
.top a.link { background: rgba(255,255,255,.14); color: #fff; }
.top.light a.link { background: var(--lavender); color: var(--indigo); }

/* ===== Landing: the Horizon hero ===== */
.hz {
  position: relative; color: #fff; overflow: hidden; isolation: isolate; padding: 130px 0 0;
  background: #2F057B;
}
.hz::before { /* a soft violet glow low in the sky, above the horizon */
  content: ""; position: absolute; inset: auto -10% 0 -10%; height: 55%; z-index: -1;
  background: none;
}
.hz-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; padding-bottom: 120px; }
.hz .label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); margin: 0 0 14px; }
.hz h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; margin: 0 0 18px; max-width: 640px; }
.hz h1 .mint { color: var(--mint); }
.hz .lede { font-size: 18px; max-width: 540px; color: rgba(255,255,255,.9); margin: 0 0 26px; }
.hz .hero-fine { color: rgba(255,255,255,.78); }
.hz .hero-fine a { color: #fff; }
.hz .proof { color: rgba(255,255,255,.9); }
.hz-line { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 0; pointer-events: none; }
.hz-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--mint); }
.hz-line::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; bottom: 0; background: #2D0A66; }
.hz-sun { position: absolute; right: 12%; bottom: 64px; width: 64px; height: 64px; border-radius: 50%; background: var(--mint); z-index: 0; }

.hz-visual { position: relative; height: 470px; }
.hz-visual .tier { position: absolute; }
.hz-visual .t-journey { left: 0; top: 40px; transform: rotate(-9deg); z-index: 1; }
.hz-visual .t-beyond { right: 0; top: 30px; transform: rotate(8deg); z-index: 1; }
.hz-visual .t-voyage { left: 50%; top: 110px; transform: translateX(-50%) rotate(-2deg); z-index: 3; }
.hz-queue { position: absolute; z-index: 4; right: 2%; bottom: 14px; background: #fff; color: var(--ink); border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 24px 50px -22px rgba(10,0,40,.7); display: flex; align-items: center; gap: 14px; }
.hz-queue .q-up { width: 38px; height: 38px; border-radius: 12px; background: var(--mint); color: var(--indigo); display: grid; place-items: center; font-weight: 800; }
.hz-queue small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.hz-queue b { display: block; font-size: 17px; color: var(--indigo); line-height: 1.2; }

/* ===== Tier cards ===== */
.tier { --w: 300px; width: var(--w); aspect-ratio: 1.586; border-radius: 14px; position: relative; overflow: hidden; color: #fff;
  box-shadow: 0 34px 60px -28px rgba(10,0,40,.75), inset 0 0 0 1px rgba(255,255,255,.12); }
.tier .t-logo { position: absolute; left: 6%; top: 8%; height: 11%; width: auto; max-width: 46%; }
.tier .t-chip { position: absolute; left: 6%; top: 38%; width: 13%; aspect-ratio: 1.3; border-radius: 6px;
  background: linear-gradient(135deg, #f6e3a6, #c9a24b 45%, #f2d98c 60%, #a98234); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.tier .t-hz { position: absolute; left: 0; right: 0; top: 63%; height: 2px; background: var(--mint); }
.tier .t-sea { position: absolute; left: 0; right: 0; top: calc(63% + 2px); bottom: 0; }
.tier .t-sun { position: absolute; right: 14%; top: calc(63% - 7.5%); width: 15%; aspect-ratio: 1; border-radius: 50%; background: var(--mint); }
.tier .t-star { position: absolute; right: 14%; top: calc(63% - 12%); width: 11%; aspect-ratio: 1; }
.tier .t-name { position: absolute; left: 6%; bottom: 8%; font-weight: 700; font-size: calc(var(--w) * .055); letter-spacing: .1em; text-transform: uppercase; }
.tier .t-for { position: absolute; right: 6%; top: 9%; font-size: calc(var(--w) * .033); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; max-width: 44%; text-align: right; line-height: 1.3; }
.tier-journey { background: linear-gradient(180deg, #2F057B 0%, #5B2BD6 62%, #8a2fb0 100%); }
.tier-journey .t-sea { background: #2F057B; }
.tier-voyage { background: linear-gradient(180deg, #84DBD1 0%, #a6e6de 100%); color: var(--indigo); }
.tier-voyage .t-hz { background: var(--indigo); }
.tier-voyage .t-sea { background: #84DBD1; }
.tier-voyage .t-sun { background: #fff; }
.tier-beyond { background: linear-gradient(180deg, #2D0A66 0%, #2F057B 100%); }
.tier-beyond .t-sea { background: #2D0A66; }
.tier-beyond .t-star { color: #fff; }
.tier-voyage .t-name, .tier-voyage .t-for { color: var(--indigo); }

/* ===== Sections ===== */
section { padding: 88px 0; }
.sec-head { max-width: 720px; margin-bottom: 36px; }
.stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stack .tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; position: relative; }
.stack .tile.lead { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.stack .tile.lead h3, .stack .tile.lead p { color: #fff; }
.stack .tile.lead .big { color: var(--mint); }
.stack .big { font-size: 40px; font-weight: 700; color: var(--indigo); line-height: 1.05; margin: 0 0 12px; letter-spacing: -.01em; }
.stack h3 { margin: 0 0 8px; font-size: 20px; color: var(--indigo); }
.stack p { margin: 0; color: var(--muted); }
.stack .tile.lead p { opacity: .92; }
.stack .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--lavender); color: var(--purple); display: grid; place-items: center; margin-bottom: 16px; }
.stack .ic svg { width: 24px; height: 24px; }
.road { background: var(--lavender); }
.road-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; }
.road-track::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 2px; background: var(--indigo); opacity: .25; }
.rstep { position: relative; padding-top: 44px; }
.rstep::before { content: ""; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--purple); }
.rstep:first-child::before { background: var(--mint); border-color: var(--indigo); }
.rstep:last-child::before { background: var(--indigo); border-color: var(--indigo); }
.rstep .who { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }
.rstep .pl { font-size: 30px; font-weight: 700; color: var(--indigo); margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.rstep p { margin: 0; font-size: 14px; color: var(--ink); }
.rstep .reward { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: var(--indigo); color: #fff; }
.rstep .reward.m { background: var(--mint); color: var(--indigo); }
.tiers { text-align: left; }
.tier-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: end; margin-top: 36px; }
.tier-row .tcol { display: flex; flex-direction: column; gap: 16px; }
.tier-row .tier { --w: 100%; width: 100%; }
.tier-row .tcol.mid .tier { transform: scale(1.06); transform-origin: bottom; }
.tcol h3 { margin: 0; font-size: 22px; color: var(--indigo); }
.tcol .when { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }
.tcol p { margin: 0; color: var(--muted); font-size: 15px; }
.moments { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.moment { position: relative; border-radius: 14px; overflow: hidden; min-height: 360px; background: #2F057B; }
.moment img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.moment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(45,10,102,0) 45%, rgba(45,10,102,.92) 100%); }
.moment p { position: absolute; left: 20px; right: 20px; bottom: 18px; margin: 0; z-index: 1; color: #fff; font-weight: 600; font-size: 17px; line-height: 1.35; }
.trust { background: var(--indigo); color: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.trust b { display: block; font-size: 44px; font-weight: 700; color: var(--mint); line-height: 1.05; }
.trust span { font-size: 15px; opacity: .92; }
.trust .from { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); margin: 0 0 24px; }
.cta-band { background: var(--indigo); border-radius: 14px; text-align: left; padding: 72px 56px; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 56px; height: 2px; background: var(--mint); }
.cta-band h2 { color: #fff; margin: 0 0 10px; font-size: clamp(34px, 5vw, 56px); }
.cta-band p { margin: 0 0 28px; max-width: 520px; color: rgba(255,255,255,.9); }
.cta-band .btn { max-width: 300px; margin: 0 0 40px; }
.faq details { border-radius: 14px; }
.faq h2 { text-align: left; }
.plan-note { font-size: 13px; color: var(--muted); margin-top: 18px; }

@media (max-width: 960px) {
  .hz { padding-top: 96px; }
  .hz-grid { grid-template-columns: 1fr; gap: 8px; padding-bottom: 104px; }
  .hz-visual { height: 330px; order: -1; margin: 0 -10px; }
  .hz-visual .tier { --w: 200px; }
  .hz-visual .t-journey { left: 2%; top: 20px; }
  .hz-visual .t-beyond { right: 2%; top: 14px; }
  .hz-visual .t-voyage { top: 70px; }
  .hz-queue { right: 0; left: 0; margin: 0 auto; width: max-content; bottom: -6px; }
  .hz-sun { width: 44px; height: 44px; right: 8%; bottom: 62px; }
  .stack, .trust-grid, .tier-row, .moments { grid-template-columns: 1fr; }
  .road-track { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .road-track::before { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .rstep { padding: 0 0 26px 40px; }
  .rstep::before { top: 2px; }
  .tier-row .tcol.mid .tier { transform: none; }
  .moment { min-height: 260px; }
  .cta-band { padding: 48px 24px; }
  .cta-band::after { bottom: 36px; }
  .cta-band .btn { margin-bottom: 24px; }
}

/* ===== Dashboard ===== */
.d-hero { background: #2F057B; padding-bottom: 130px; }
.d-hero::before { display: none; }
.d-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 70px; height: 2px; background: var(--mint); }
.pos { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; }
.next-jump .nj-icon { background: var(--mint); color: var(--indigo); }
.chip-pill.up { background: rgba(132,219,209,.18); border-color: rgba(132,219,209,.55); color: var(--mint); }
.welcome { background: rgba(132,219,209,.16); border-color: rgba(132,219,209,.5); color: var(--mint); }
.d-grid { margin-top: -58px; }
.d-tile { border-radius: 14px; box-shadow: 0 20px 50px -34px rgba(47,5,123,.4); }
.d-prize-bg::after { background: linear-gradient(180deg, rgba(45,10,102,.2) 0%, rgba(45,10,102,.7) 45%, rgba(45,10,102,.96) 100%); }
.d-prize .eyebrow { color: var(--mint) !important; }
.tr-line s.done { border-color: var(--purple); }
.tr-steps div.done { background: var(--lavender); outline: 2px solid var(--purple); }
.tr-steps .rw { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--purple); }
.addname { color: #fff; text-decoration: underline; }
.picker { gap: 12px; }
.picker button { width: 78px; aspect-ratio: 1.586; border-radius: 8px; border: 2px solid transparent; position: relative; overflow: hidden; background: none; }
.picker button.on { border-color: var(--mint); }
.picker .p-journey { background: linear-gradient(180deg, #2F057B, #5B2BD6 62%, #8a2fb0); }
.picker .p-voyage { background: #84DBD1; }
.picker .p-beyond { background: #2D0A66; }
.picker button::after { content: ""; position: absolute; left: 0; right: 0; top: 63%; height: 2px; background: var(--mint); }
.picker .p-voyage::after { background: var(--indigo); }
.dash-card-wrap .tier { --w: min(380px, 84vw); transform: rotateX(8deg) rotateY(-12deg); transition: transform .4s; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.d-hero .tier { transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -12deg)); }
.why-sun { background: var(--lavender); }
.d-survey .sv-opts button:hover { border-color: var(--purple); background: var(--lavender); }

/* Admin keeps its calm look, recoloured to the palette */
.test-pill { background: #ECDEFF; color: #2F057B; }

/* footer legal links: no stray gaps inside the sentence */
footer p a { margin-right: 0; text-decoration: underline; }
/* closing band: one mint sun on the horizon line */
.cta-band::before { content: ""; position: absolute; right: 12%; bottom: 20px; width: 72px; height: 72px; border-radius: 50%; background: var(--mint); }
@media (max-width: 720px) { .cta-band::before { right: 24px; bottom: 6px; width: 60px; height: 60px; } }


/* ===== 11 Nov 2026: closer to the brand guide ===== */
/* Logo: master horizontal wordmark (8.1 to 1). Never the old T lockup. */
.top img.logo-go { height: 26px; width: auto; }
footer img.logo-go { height: 22px; width: auto; }
.tier .t-logo { width: 45%; height: auto; max-width: none; top: 9%; }

/* Soft depth: very soft purple tinted shadows only (guide p20). */
.join { box-shadow: 0 18px 44px -26px rgba(47,5,123,.45); }
.btn-cta, .btn-cta:hover { box-shadow: 0 8px 20px -12px rgba(47,5,123,.45); }
.btn-mint { box-shadow: none; }
.tier { box-shadow: 0 18px 40px -24px rgba(47,5,123,.5), inset 0 0 0 1px rgba(255,255,255,.10); }
.hz-queue { box-shadow: 0 14px 34px -22px rgba(47,5,123,.5); }
.dash-card-wrap .tier { box-shadow: 0 22px 48px -26px rgba(47,5,123,.55); }
.joined-pop { box-shadow: 0 12px 30px -18px rgba(47,5,123,.45); }
.d-tile { box-shadow: 0 16px 40px -30px rgba(47,5,123,.35); }

/* The sun is a soft glow on the horizon, never a hard edged disc (guide p20). One per layout. */
.tier .t-sun { width: 34%; top: 36%; right: 9%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(132,219,209,.75) 14%, rgba(132,219,209,.28) 38%, rgba(132,219,209,0) 68%); }
.tier-journey .t-sun { background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,190,214,.8) 14%, rgba(202,16,114,.32) 40%, rgba(202,16,114,0) 68%); }
.tier-voyage .t-sun { background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.8) 18%, rgba(255,255,255,.3) 42%, rgba(255,255,255,0) 68%); }
.cta-band::before { right: 9%; bottom: -54px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(132,219,209,.8) 10%, rgba(132,219,209,.3) 34%, rgba(132,219,209,0) 66%); }
@media (max-width: 720px) { .cta-band::before { right: -20px; bottom: -64px; width: 200px; height: 200px; } }

/* Photography: card frame (85.6 by 54, corners 3.7% of the width), original colours, no washes (guide p21). */
.moments { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.moment { margin: 0; min-height: 0; background: none; border-radius: 0; overflow: visible; }
.moment::after { display: none; }
.moment img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 85.6 / 54; object-fit: cover; border-radius: 3.7% / 5.87%;
  box-shadow: 0 16px 36px -24px rgba(47,5,123,.45); }
.moment figcaption { margin-top: 14px; color: var(--indigo); font-weight: 600; font-size: 16px; line-height: 1.4; }

/* Road: the steps now say how far you move, not an invented place number. */
.rstep .pl { font-size: 22px; }
.tcol h3 { font-size: 20px; line-height: 1.25; }

/* Reviews: real Travel FX reviews, each one links to the review on Trustpilot. */
.reviews { background: var(--lavender); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rev { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; text-decoration: none; color: var(--ink); }
.rev:hover { border-color: var(--purple); }
.rev .stars { color: #00b67a; letter-spacing: 2px; font-size: 16px; }
.rev q { quotes: "\201C" "\201D"; color: var(--indigo); font-weight: 600; font-size: 18px; line-height: 1.4; }
.rev cite { font-style: normal; font-size: 13px; color: var(--muted); margin-top: auto; }
@media (max-width: 960px) { .moments, .rev-grid { grid-template-columns: 1fr; } }

/* Small fixes */
.join .join-head span { color: var(--muted); }
.why-card, .paid .mini-card { background: linear-gradient(180deg, #2F057B 0%, #5B2BD6 62%, #8a2fb0 100%); box-shadow: none; }

/* ===== Real card artwork (11 Nov 2026). The art carries the logo, chip, horizon, sun and tier name. ===== */
.tier, .tier-journey, .tier-voyage, .tier-beyond { background: none; border-radius: 3.7% / 5.87%; aspect-ratio: 1176 / 741; overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(47,5,123,.5); }
.tier .t-art { display: block; width: 100%; height: 100%; }
.t-res { margin: 14px 0 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.picker button, .picker .p-journey, .picker .p-voyage, .picker .p-beyond { background-color: transparent; background-size: cover; background-position: center; border-radius: 4px; }
.picker .p-journey { background-image: url(/assets/card-journey.webp); }
.picker .p-voyage { background-image: url(/assets/card-voyage.webp); }
.picker .p-beyond { background-image: url(/assets/card-beyond.webp); }
.picker button::after { display: none; }
.why-card, .paid .mini-card { background: url(/assets/card-journey.webp) center/cover; }

/* All three cards the same size. Voyage keeps the middle position only. */
.tier-row { align-items: start; }
.tier-row .tcol.mid .tier { transform: none; }


/* ===== Horizon hero (11 Nov, second pass). Photo from the brand guide, original colours, no wash. ===== */
.top.onsky a.link { background: rgba(255,255,255,.72); color: var(--indigo); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hz { background: #1d5f66; color: var(--indigo); padding: 0; min-height: 700px; }
.hz::before { display: none; }
.hz-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hz-photo { position: absolute; top: 0; left: 50%; height: 179.3%; width: auto; max-width: none; min-width: 100%; transform: translateX(-50%); object-fit: cover; object-position: 50% 0; }
.hz-sky .hz-line { position: absolute; left: 0; right: 0; top: 66%; bottom: auto; height: 2px; background: var(--mint); z-index: 1; }
.hz-sky .hz-line::before, .hz-sky .hz-line::after { display: none; }
.hz-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; padding-top: 124px; padding-bottom: 40px; }
.hz h1 { color: var(--indigo); font-size: clamp(40px, 5vw, 66px); max-width: 600px; }
.hz .lede { color: var(--ink); font-weight: 500; max-width: 520px; margin-bottom: 18px; }
.hz .proof { color: var(--ink); margin-top: 0; }
.hz .proof b { color: var(--indigo); }
.hz .join { margin: 0; }
.hz .join .hero-fine { color: var(--muted); margin: 14px 0 0; order: 9; }
.hz .join .hero-fine a { color: var(--purple); }
@media (max-width: 960px) {
  .hz { background: #fff; min-height: 0; padding: 0 0 48px; }
  .hz-sky { position: relative; inset: auto; height: 62vw; z-index: 0; }
  .hz-photo { left: 0; transform: none; width: 100%; height: 100%; min-width: 0; }
  .hz-sky .hz-line { top: 36.8%; }
  .hz-grid { grid-template-columns: 1fr; gap: 22px; padding-top: 28px; padding-bottom: 0; }
}

/* Cards get their own lilac band so they stand apart from the photos. Road goes white. */
.tiers { background: var(--lavender); }
.road { background: #fff; }
.feat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--indigo); }
.feat-row svg { width: 28px; height: 28px; color: var(--indigo); display: block; margin-bottom: 10px; }
.feat-row b { display: block; color: var(--indigo); font-size: 16px; }
.feat-row span { color: var(--muted); font-size: 14px; }
#moments { padding-top: 0; }

/* Review wall: lots of real reviews together. */
.rev-wall { columns: 4 230px; column-gap: 16px; }
.rev-wall .rev { display: block; break-inside: avoid; margin: 0 0 16px; padding: 18px 20px; }
.rev-wall .rev .stars { display: block; font-size: 14px; margin-bottom: 8px; }
.rev-wall .rev q { display: block; font-size: 16px; }
.rev-wall .rev cite { display: block; margin-top: 10px; }

/* Dashboard: five steps, the first already done. */
.tr-steps { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) { .feat-row { grid-template-columns: 1fr; } .tr-steps { grid-template-columns: repeat(2, 1fr); } }

/* Keep the Trustpilot line clear of the horizon. */
@media (min-width: 961px) { .hz { min-height: 780px; } .hz-grid { padding-top: 132px; } }


/* ===== 11 Nov, fourth pass ===== */
.hz h1 { margin-bottom: 10px; }
.hz .h1-sub { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.25; font-weight: 700; color: var(--purple); margin: 0 0 16px; max-width: 520px; }
.join-head.has-card { flex-direction: row; align-items: center; gap: 16px; }
.join-head .jh-card { width: 132px; height: auto; flex: none; border-radius: 5px; box-shadow: 0 10px 22px -14px rgba(47,5,123,.55); }
.join-head.has-card > div { display: flex; flex-direction: column; gap: 2px; }
.trust { padding: 96px 0; }
.trust .trust-h { color: #fff; font-size: clamp(30px, 4vw, 48px); margin: 0 0 14px; max-width: 760px; }
.trust .trust-sub { color: rgba(255,255,255,.9); font-size: 18px; max-width: 640px; margin: 0 0 44px; }
.trust b { font-size: clamp(48px, 6vw, 76px); margin-bottom: 6px; }
.trust span { font-size: 16px; }
/* Reviews move slowly in three rows. They stop on hover, and stay still for anyone who asks for less motion. */
.rev-rows { overflow: hidden; padding: 4px 0; }
.rev-row { margin-bottom: 16px; }
.rev-track { display: flex; gap: 16px; width: max-content; animation: revmove 90s linear infinite; }
.rev-row:nth-child(2) .rev-track { animation-direction: reverse; animation-duration: 105s; }
.rev-row:nth-child(3) .rev-track { animation-duration: 120s; }
.rev-rows:hover .rev-track, .rev-rows:focus-within .rev-track { animation-play-state: paused; }
.rev-track .rev { width: 300px; flex: none; display: block; padding: 18px 20px; margin: 0; }
.rev-track .rev .stars { display: block; font-size: 14px; margin-bottom: 8px; }
.rev-track .rev q { display: block; font-size: 16px; }
.rev-track .rev cite { display: block; margin-top: 10px; }
.reviews .wrap + .rev-rows { margin-top: 0; }
.reviews .rev-rows + .wrap { margin-top: 8px; }
@keyframes revmove { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .rev-track { animation: none; } .rev-rows { overflow-x: auto; } }
@media (min-width: 961px) { .hz { min-height: 880px; } }


/* ===== Hero, fifth pass: Mark's Greek island photo (1408 x 768, horizon 34.2% down). =====
   Headline sits in the sky, the join panel sits on the sea at the left, the village and the couple stay clear on the right.
   The box is never wider than the photo's shape, so the photo always fits by height and the horizon stays put. */
@media (min-width: 961px) {
  .hz { --hzh: max(760px, 54.55vw); min-height: var(--hzh); background: #1f3f66; }
  .hz-photo { inset: 0; left: 0; width: 100%; height: 100%; min-width: 0; transform: none; object-fit: cover; object-position: 78% 0; }
  .hz-sky .hz-line { top: 34.2%; }
  .hz-grid { display: block; padding-top: 0; padding-bottom: 36px; }
  .hz-copy { height: calc(var(--hzh) * .342 - 16px); display: flex; flex-direction: column; justify-content: flex-end; }
  .hz h1 { font-size: clamp(34px, 3.35vw, 54px); max-width: none; margin: 0 0 6px; white-space: nowrap; }
  .hz .h1-sub { font-size: clamp(18px, 1.7vw, 25px); max-width: none; margin: 0 0 6px; }
  .hz .lede { font-size: 16px; max-width: 560px; margin: 0; }
  .hz-form { width: 440px; margin-top: 40px; }
}
@media (max-width: 960px) {
  .hz-photo { object-position: 74% 0; }
  .hz-sky .hz-line { top: 34.2%; }
}
.hz .join .proof { order: 10; margin-top: 12px; color: var(--ink); font-size: 13px; }
.hz .join .proof b { color: var(--indigo); }


/* ===== Sixth pass: give the hero room, more Deep Purple, a second full width photo ===== */
@media (min-width: 961px) {
  .hz { --hzh: max(820px, 58vw); }
  .hz-copy { height: calc(var(--hzh) * .342 - 34px); }
  .hz h1 { margin: 0 0 12px; }
  .hz .h1-sub { margin: 0; }
  .hz .lede { display: none; }
  .hz-form { width: 540px; margin-top: 70px; }
  /* one line join: email and button together, Google and Apple as a quiet second row */
  .hz .join { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 16px; border-radius: 14px; max-width: none; }
  .hz .join .join-head { display: none; }
  .hz .join .invited { order: 0; width: 100%; margin: 0; }
  .hz .join .field { order: 1; width: 100%; display: flex; flex-direction: row; gap: 8px; margin: 0; }
  .hz .join .field input { flex: 1; min-width: 0; height: 54px; border-radius: 40px; margin: 0; }
  .hz .join .field .btn { width: auto; flex: none; height: 54px; padding: 0 26px; border-radius: 40px; margin: 0; white-space: nowrap; }
  .hz .join .msg { order: 2; width: 100%; margin: 0; }
  .hz .join .or { order: 3; width: auto; margin: 0; font-size: 13px; color: var(--muted); }
  .hz .join .or::before, .hz .join .or::after { display: none; }
  .hz .join .socials { order: 4; flex: 1; display: flex; gap: 8px; margin: 0; }
  .hz .join .socials .btn { height: 42px; min-height: 0; font-size: 14px; margin: 0; flex: 1; border-radius: 40px; }
  .hz .join .hero-fine { order: 5; width: 100%; margin: 2px 0 0; }
  .hz .join .proof { order: 6; width: 100%; margin: 0; }
}

/* Offer band in Deep Purple (the guide asks for purple to lead). */
#offer { background: var(--indigo); }
#offer .eyebrow { color: var(--mint); }
#offer h2 { color: #fff; }
#offer .sub { color: rgba(255,255,255,.9); }
#offer .stack .tile { border-color: transparent; }
#offer .stack .tile.lead { background: var(--mint); border-color: var(--mint); }
#offer .stack .tile.lead h3, #offer .stack .tile.lead p, #offer .stack .tile.lead .big { color: var(--indigo); opacity: 1; }

/* Second full width photo: the brand guide horizon, heading on the sea, prints overlapping its lower edge. */
.lookfwd { padding: 0 0 88px; }
.lf-band { position: relative; height: clamp(360px, 44vw, 640px); overflow: hidden; background: #1d5f66; }
.lf-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.lf-band .wrap { position: relative; height: 100%; }
.lf-band h2 { position: absolute; left: 20px; bottom: 34%; margin: 0; color: #fff; font-size: clamp(30px, 4.4vw, 60px); max-width: 720px; }
.lookfwd .moments { margin-top: clamp(-150px, -9vw, -60px); position: relative; }
.lookfwd .moment img { box-shadow: 0 22px 44px -26px rgba(47,5,123,.6); border: 4px solid #fff; }
@media (max-width: 960px) { .lookfwd .moments { margin-top: -40px; } .lf-band h2 { bottom: 26%; left: 16px; right: 16px; } }


/* ===== Colour proportions (guide p15): Deep Purple 45, white and Light Lilac 30, GO Mint 15, violets 8, magenta 2 at most ===== */
/* Reviews sit on Deep Purple, joined to the Travel FX band above. */
.reviews { background: var(--indigo); padding-top: 0; }
.reviews .eyebrow { color: var(--mint); }
.reviews h2 { color: #fff; }
.reviews .sub, .reviews .plan-note { color: rgba(255,255,255,.85); }
.reviews .plan-note a { color: var(--mint); }
.rev { border-color: transparent; }
.trust { padding-bottom: 72px; }
/* The road sits on GO Mint. Text on mint is always Deep Purple, never white. */
.road { background: var(--mint); }
.road .eyebrow, .road .sub, .road .plan-note, .road .rstep p, .road .rstep .who { color: var(--indigo); }
.road .rstep .reward.m { background: #fff; color: var(--indigo); }
.road .road-track::before { opacity: .45; }
.road .rstep::before { border-color: var(--indigo); }
/* Closing band and footer run edge to edge in Deep Purple. */
.closing { background: var(--indigo); padding: 40px 0 0; }
.closing .cta-band { border-radius: 0; padding-left: 0; padding-right: 0; overflow: visible; }
.closing .cta-band::after { left: -100vw; right: -100vw; }
footer.foot-dark { background: var(--night); color: rgba(255,255,255,.8); border-top: 0; }
footer.foot-dark a { color: #fff; }
footer.foot-dark p { color: rgba(255,255,255,.75); }
/* Violets: step labels, links and small accents. */
.tcol .when, .feat-row svg { color: var(--purple); }
.faq summary { color: var(--indigo); }
.closing { overflow: hidden; }


/* ===== Seventh pass: card first headline, tidier join panel, cards straight after the hero, slimmer offer ===== */
@media (min-width: 961px) {
  .hz h1 { white-space: normal; max-width: 780px; font-size: clamp(32px, 3.3vw, 52px); line-height: 1.08; margin: 0 0 10px; }
  .hz .h1-sub { font-size: clamp(18px, 1.8vw, 26px); }
  .hz-copy { height: calc(var(--hzh) * .342 - 26px); }
  .hz-form { width: 420px; margin-top: 60px; }
  .hz .join { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; padding: 24px; }
  .hz .join .join-head { display: flex; order: 0; margin: 0 0 4px; }
  .hz .join .join-head .jh-card { display: none; }
  .hz .join .field { flex-direction: column; gap: 10px; }
  .hz .join .field input { flex: none; width: 100%; height: 54px; border-radius: 14px; }
  .hz .join .field .btn { width: 100%; height: 54px; }
  .hz .join .or { width: 100%; display: flex; align-items: center; gap: 12px; margin: 2px 0; }
  .hz .join .or::before, .hz .join .or::after { display: block; content: ""; flex: 1; height: 1px; background: var(--line); }
  .hz .join .socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
  .hz .join .socials .btn { height: 48px; }
  .hz .join .hero-fine { margin: 0; text-align: center; }
  .hz .join .proof { justify-content: center; }
}
#offer { padding: 64px 0; }
#offer h2 { margin: 0 0 28px; font-size: clamp(26px, 3vw, 38px); }
.perk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.perk-row > div { padding: 4px 32px; border-left: 2px solid rgba(132,219,209,.5); }
.perk-row > div:first-child { padding-left: 0; border-left: 0; }
.perk-row b { display: block; color: var(--mint); font-size: clamp(34px, 4vw, 52px); line-height: 1.05; margin-bottom: 8px; }
.perk-row span { color: rgba(255,255,255,.92); font-size: 15px; line-height: 1.5; display: block; }
@media (max-width: 960px) { .perk-row { grid-template-columns: 1fr; gap: 22px; } .perk-row > div { padding: 0; border-left: 0; } }


/* ===== Eighth pass: Mark's second Greek hero (horizon 45.8% down) and the family beach band ===== */
.hz-sky .hz-line { top: 45.8%; }
@media (min-width: 961px) {
  .hz { --hzh: max(860px, 58vw); }
  .hz-photo { object-position: 80% 0; }
  .hz-copy { height: calc(var(--hzh) * .458 - 30px); }
  .hz h1 { font-size: clamp(34px, 3.7vw, 58px); max-width: 860px; margin-bottom: 12px; }
  .hz .h1-sub { font-size: clamp(19px, 1.9vw, 28px); }
  .hz-form { margin-top: 62px; }
}
@media (max-width: 960px) { .hz-sky .hz-line { top: 45.8%; } .hz-photo { object-position: 82% 0; } }
.lf-band { height: clamp(420px, 50vw, 760px); background: #4f6f73; }
.lf-photo { object-position: 50% 40%; }
.lf-band h2 { bottom: 26%; max-width: 560px; }
.lookfwd .moments { margin-top: clamp(-70px, -4.5vw, -40px); }
@media (max-width: 960px) { .lf-band { height: 78vw; } .lf-photo { object-position: 78% 40%; } .lf-band h2 { bottom: auto; top: 46%; max-width: 60%; font-size: 26px; } }


/* ===== Ninth pass: slogan headline, big GO mark in the closing band ===== */
@media (min-width: 961px) {
  .hz .lede { display: block; font-size: clamp(16px, 1.35vw, 20px); font-weight: 600; color: var(--indigo); max-width: 640px; margin: 10px 0 0; }
  .hz h1 { font-size: clamp(36px, 4.2vw, 66px); max-width: 900px; }
}
.closing .cta-band { padding-top: 56px; }
.cta-band .go-big { display: block; width: clamp(150px, 17vw, 250px); height: auto; margin: 0 0 30px; }
.cta-band .tagline { color: var(--mint); font-weight: 600; font-size: 20px; margin: 0 0 14px; }


/* ===== Tenth pass: hero tidy up ===== */
.hz-sky .hz-line { display: none; }                 /* no mint line across the photo */
.top.onsky .wrap { height: 104px; }                  /* logo sits a little lower */
.hz .hz-copy .proof { order: 0; margin-top: 16px; font-size: 14px; color: var(--ink); justify-content: flex-start; }
.hz .hz-copy .proof b { color: var(--indigo); }
@media (min-width: 961px) {
  .hz h1 { font-size: clamp(36px, 4vw, 62px); }
  .hz-copy { height: calc(var(--hzh) * .458 - 24px); }
}
@media (max-width: 960px) { .hz h1 { font-size: clamp(26px, 8.4vw, 40px); } }


/* ===== Eleventh pass: join panel title stands out ===== */
.hz .join .join-head, .hz .join .join-head.has-card > div { text-align: center; align-items: center; justify-content: center; width: 100%; }
.hz .join .join-head b { color: var(--indigo); font-size: 24px; font-weight: 700; line-height: 1.2; }
.hz .join .join-head span { color: var(--muted); font-size: 14px; }
@media (min-width: 961px) { .hz .join .join-head { flex-direction: column; margin-bottom: 8px; } }

/* Twelfth pass: product first headline; the slogan moves to the beach band */
.hz .lede[hidden] { display: none !important; }
@media (min-width: 961px) { .hz h1 { font-size: clamp(36px, 4.1vw, 64px); } .hz .h1-sub { font-size: clamp(18px, 1.75vw, 26px); margin-top: 4px; } }
.lf-band h2 { max-width: 720px; }

/* thirteenth pass: phone headline wraps cleanly */
@media (max-width: 760px) {
  .hz h1 { font-size: clamp(24px, 7.2vw, 34px); text-wrap: balance; }
  .hz h1 br { display: none; }
}

/* fourteenth pass: question title, email first everywhere, Google and Apple side by side on phone too */
@media (max-width: 960px) {
  .hz .join .socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hz .join .socials .btn { height: 48px; min-height: 0; font-size: 15px; margin: 0; border-radius: 40px; }
}

/* fifteenth pass: mint "coming soon" pill above a spending headline */
.hz .hz-pill { display: inline-block; width: fit-content; max-width: max-content; background: var(--mint); color: var(--indigo); font-size: 14px; font-weight: 700; padding: 7px 16px; border-radius: 40px; margin: 0 0 16px; }
@media (max-width: 960px) { .hz .hz-pill { font-size: 12px; padding: 6px 12px; margin-bottom: 10px; max-width: 100%; } }

/* sixteenth pass: phone hero keeps the copy on the photo like desktop; the join panel overlaps the bottom of the photo */
@media (max-width: 960px) {
  .hz { position: relative; background: var(--lavender); padding: 0 0 36px; overflow: hidden; }
  .hz-sky { position: absolute; top: 0; left: 0; right: 0; bottom: auto; inset: 0 0 auto 0; height: 540px; z-index: 0; }
  .hz-photo { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; max-width: none; left: 0; transform: none; object-fit: cover; object-position: 50% 0; }
  .hz-grid { position: relative; z-index: 1; padding-top: 112px; gap: 0; }
  .hz-copy { min-height: 365px; }
  .hz .join { box-shadow: 0 24px 50px -28px rgba(47,5,123,.55); }
}

/* ===== Seventeenth pass (11 Nov): stronger selling below the hero, plus motion ===== */
/* Cards */
.tcol .when em { font-style: normal; display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 40px; background: var(--mint); color: var(--indigo); font-size: 11px; letter-spacing: .04em; vertical-align: 1px; }
.tcol > div:first-child { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.tcol:hover > div:first-child { transform: translateY(-8px) rotate(-1.2deg); }
.feat-row.feat-4 { grid-template-columns: repeat(4, 1fr); }
.feat-row b { font-size: 17px; margin-bottom: 4px; }
@media (max-width: 960px) { .feat-row.feat-4 { grid-template-columns: 1fr 1fr; gap: 26px 18px; } }
@media (max-width: 520px) { .feat-row.feat-4 { grid-template-columns: 1fr; } }

/* Offer: the £2,000 is a chance, said above the number */
#offer .eyebrow { margin-bottom: 10px; }
.perk-row small { display: block; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.perk-row b { font-variant-numeric: tabular-nums; }
.offer-note { margin: 34px 0 0; color: var(--mint); font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.offer-note::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); flex: none; animation: livedot 1.8s ease-out infinite; }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 rgba(132,219,209,.7); } 100% { box-shadow: 0 0 0 12px rgba(132,219,209,0); } }

/* Road: a progress line that fills step by step */
.road-track::before { height: 4px; top: 16px; border-radius: 4px; }
.road-fill { position: absolute; left: 0; top: 16px; height: 4px; width: 0; border-radius: 4px; background: var(--indigo); z-index: 0; }
.rstep { z-index: 1; }
.rstep .pl { font-size: 26px; }
.road .rstep p { font-weight: 600; }
html.js-motion .road-track .rstep { opacity: .35; transform: translateY(10px); transition: opacity .5s ease var(--d, 0ms), transform .5s ease var(--d, 0ms); }
html.js-motion .road-track .rstep::before { transition: background .35s ease var(--d, 0ms), transform .35s ease var(--d, 0ms); }
html.js-motion .road-track.go .rstep { opacity: 1; transform: none; }
.road-track.go .rstep:not(:first-child)::before { background: var(--indigo); }
html.js-motion .road-track.go .rstep::before { transform: scale(1.15); }
.road-track.go .road-fill { width: 100%; transition: width 1.9s linear; }
@media (max-width: 960px) {
  .road-track::before { left: 8px; width: 4px; top: 0; bottom: 0; height: auto; }
  .road-fill { left: 8px; top: 0; width: 4px; height: 0; }
  .road-track.go .road-fill { width: 4px; height: 100%; transition: height 1.9s linear; }
}

/* Emotional band */
.lf-band h2 { text-shadow: 0 2px 18px rgba(0,0,0,.25); }

/* Questions: left aligned like the rest of the page, heading beside the list on desktop */
#faq .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; align-items: start; }
.faq-head h2 { text-align: left; margin: 0 0 12px; }
.faq-head p { margin: 0; color: var(--muted); }
#faq .faq { margin: 0; max-width: none; width: 100%; }
@media (max-width: 960px) { #faq .wrap { grid-template-columns: 1fr; gap: 24px; } }

/* Closing band */
.closing .cta-band h2 { max-width: 760px; }
.cta-band .go-big { animation: gofloat 6s ease-in-out infinite; }
@keyframes gofloat { 50% { transform: translateY(-8px); } }

/* Scroll reveal. Only hides things when motion.js is running. */
html.js-motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease var(--d, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
html.js-motion .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-motion .reveal, html.js-motion .road-track .rstep { opacity: 1; transform: none; transition: none; }
  .road-track.go .road-fill { transition: none; }
  .offer-note::before, .cta-band .go-big { animation: none; }
}

h2 { text-wrap: balance; }

/* ===== Eighteenth pass: cards carry their own benefits, dinner band with the line above it ===== */
.tben { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.tben li { position: relative; padding-left: 28px; font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.tben li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384DBD1' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.tben li.all { padding-left: 0; font-weight: 700; color: var(--purple); font-size: 14px; }
.tben li.all::before { display: none; }
.tcol h3 { margin-bottom: 4px; }

#moments.lookfwd { padding: clamp(64px, 7vw, 104px) 0 0; background: #fff; }
.lf-head h2 { color: var(--indigo); font-size: clamp(30px, 4.2vw, 58px); line-height: 1.08; margin: 0 0 clamp(28px, 3.5vw, 48px); max-width: 900px; }
#moments .lf-band { height: clamp(380px, 52vw, 820px); background: #c9a98c; }
#moments .lf-photo { object-position: 50% 55%; }
#moments .lf-band h2 { display: none; }
@media (max-width: 960px) { #moments .lf-band { height: 72vw; } #moments .lf-photo { object-position: 50% 50%; } }

/* ===== Nineteenth pass: one trust and reviews block ===== */
.reviews .sec-head h2 { color: #fff; font-variant-numeric: tabular-nums; }
.reviews .sec-head h2 span { color: var(--mint); }
.reviews .tp-stars { color: #00b67a; letter-spacing: 2px; margin-right: 6px; }
.reviews { padding-top: clamp(64px, 7vw, 104px) !important; }

/* ===== Twentieth pass: punchier cards, offer tiles with icons, blunter road, dinner caption panel ===== */
#cards .sec-head h2 { max-width: 760px; }
#cards .h2-lead { color: var(--purple); }
.tcol .tline { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; margin: 18px 0 6px; color: var(--indigo); }
.tcol .when { display: none; }

#offer h2 { margin-bottom: 32px; }
.perk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ptile { background: rgba(255,255,255,.07); border: 1px solid rgba(132,219,209,.35); border-radius: 14px; padding: 28px; }
.ptile .pic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--mint); color: var(--indigo); margin-bottom: 18px; }
.ptile .pic svg { width: 26px; height: 26px; }
.ptile small { display: block; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.ptile b { display: block; color: var(--mint); font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.ptile > span:last-child { display: block; color: rgba(255,255,255,.92); font-size: 15px; line-height: 1.5; }
@media (max-width: 960px) { .perk-tiles { grid-template-columns: 1fr; gap: 14px; } .ptile { padding: 22px; } }

#moments.lookfwd { padding: 0; }
#moments .lf-band { position: relative; }
#moments .lf-wrap { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: clamp(28px, 4vw, 56px); pointer-events: none; }
.lf-panel { background: var(--indigo); border-radius: 14px; padding: clamp(24px, 2.6vw, 38px) clamp(26px, 3vw, 44px); max-width: 560px; }
.lf-panel h2 { color: #fff; margin: 0; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.12; }
.lf-panel h2 span { color: var(--mint); }
@media (max-width: 960px) {
  #moments .lf-wrap { position: relative; inset: auto; display: block; padding: 0 16px; margin-top: -48px; }
  #moments .lf-band { height: auto; overflow: visible; background: none; }
  #moments .lf-photo { position: static; height: 72vw; }
}
#moments .lf-panel h2 { display: block; position: static; }
@media (min-width: 961px) { #moments .lf-wrap { align-items: flex-start; padding-bottom: 0; padding-top: clamp(28px, 4vw, 56px); } }

/* ===== Twenty first pass: one highlight rule, rising road ===== */
/* Highlight: violet on light backgrounds, mint on Deep Purple. Never on mint. */
.hl { color: var(--purple); }
#offer .hl, .reviews .hl, .closing .hl, .lf-panel .hl { color: var(--mint); }
.hz .h1-sub { color: var(--indigo); }

/* Road on white so the highlight works; mint lives in the rising steps */
.road { background: #fff; }
.road .eyebrow, .road .sub { color: var(--ink); }
.road-track.stairs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: end; margin-top: 44px; }
.road-track.stairs::before, .road-track.stairs .road-fill { display: none; }
.stairs .rstep { padding: 0; display: flex; flex-direction: column; opacity: 1; transform: none; }
.stairs .rstep::before { display: none; }
.stairs .rstep .who { color: var(--purple); }
.stairs .rstep .pl { display: flex; align-items: center; gap: 6px; font-size: clamp(20px, 1.9vw, 26px); margin: 4px 0 2px; color: var(--indigo); }
.stairs .rstep .pl .up { width: .85em; height: .85em; color: var(--purple); flex: none; }
.stairs .rstep p { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
.stairs .stair { height: calc(56px + var(--h) * 34px); background: var(--mint); border-radius: 14px 14px 0 0; padding: 14px; display: flex; align-items: flex-start; transform-origin: bottom; }
.stairs .rstep:last-child .stair { background: var(--indigo); }
.stairs .stair .reward { margin: 0; background: var(--indigo); color: #fff; }
.stairs .stair .reward.m { background: #fff; color: var(--indigo); }
.stairs .rstep:last-child .stair .reward { background: var(--mint); color: var(--indigo); }
html.js-motion .stairs .stair { transform: scaleY(0); transition: transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
html.js-motion .stairs.go .stair { transform: scaleY(1); }
html.js-motion .stairs .rstep > :not(.stair) { opacity: 0; transition: opacity .5s ease calc(var(--d, 0ms) + 350ms); }
html.js-motion .stairs.go .rstep > :not(.stair) { opacity: 1; }
html.js-motion .road-track.stairs .rstep { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .road-track.stairs { grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
  .stairs .stair { height: auto; width: calc(46% + var(--h) * 13.5%); border-radius: 0 14px 14px 0; transform-origin: left; padding: 10px 12px; }
  html.js-motion .stairs .stair { transform: scaleX(0); }
  html.js-motion .stairs.go .stair { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { html.js-motion .stairs .stair { transform: none; } html.js-motion .stairs .rstep > * { opacity: 1; } }
/* hero highlight plain violet (overrides the old gradient text in styles.css) */
.hz h1 .hl { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--purple); -webkit-text-fill-color: currentColor; }
#cards .sec-go { display: block; width: clamp(110px, 10vw, 150px); height: auto; margin: 0 0 22px; }

/* ===== Twenty second pass ===== */
/* Offer icons bigger */
.ptile .pic { width: 76px; height: 76px; border-radius: 18px; margin-bottom: 22px; }
.ptile .pic svg { width: 40px; height: 40px; stroke-width: 1.8; }
/* Dinner band: no block, the line sits straight on the sky */
.lf-panel { background: none; padding: 0; border-radius: 0; max-width: 620px; }
.lf-panel h2 { color: var(--indigo); font-size: clamp(26px, 2.9vw, 42px); text-shadow: 0 1px 16px rgba(255,255,255,.55); }
.lf-panel h2 .hl { color: var(--purple); }
@media (max-width: 960px) {
  #moments .lf-wrap { position: absolute; inset: 0; display: block; margin: 0; padding: 18px 16px 0; }
  #moments .lf-band { position: relative; }
  .lf-panel h2 { font-size: 22px; max-width: 70%; }
}
@media (min-width: 961px) {
  #moments .lf-wrap { justify-content: flex-end; padding-top: 8.2vw; }
  .lf-panel { max-width: 500px; margin-right: 3vw; }
  .lf-panel h2 { font-size: clamp(24px, 2.5vw, 38px); }
}
@media (max-width: 960px) {
  #moments .lf-band { display: flex; flex-direction: column-reverse; height: auto; background: #fff; }
  #moments .lf-wrap { position: static; padding: 44px 16px 20px; }
  .lf-panel h2 { font-size: 26px; max-width: none; text-shadow: none; }
}

/* ===== Twenty third pass (11 Nov night) ===== */
/* Hero: join panel sits higher */
@media (min-width: 961px) { .hz-form { margin-top: 14px; } }
/* Mint ticks with Deep Purple marks */
.tben li::before { background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F057B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* Offer gets the same weight as the other sections */
#offer { padding: clamp(72px, 8vw, 112px) 0; }
#offer h2 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 40px; }
.ptile { padding: 34px; }
/* Invite section: bigger, simpler steps */
.road { padding: clamp(72px, 8vw, 120px) 0; }
.road .sec-head h2 { font-size: clamp(32px, 4vw, 54px); max-width: 820px; }
.road .sub { font-size: 18px; max-width: 640px; }
.road-track.stairs { margin-top: 56px; gap: 16px; }
.stairs .rstep .pl { font-size: clamp(22px, 2.1vw, 30px); margin: 6px 0 14px; }
.stairs .stair { height: calc(70px + var(--h) * 44px); padding: 16px; }
.stairs .stair .reward { font-size: 13px; padding: 7px 12px; }
/* Dinner line a touch bigger now it is shorter */
@media (min-width: 961px) { .lf-panel h2 { font-size: clamp(28px, 3vw, 46px); } }
/* Footer with room to breathe */
footer.foot-dark { padding: 64px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; align-items: start; }
.foot-brand p { margin: 14px 0 0; color: rgba(255,255,255,.75); max-width: 360px; font-size: 14px; }
.foot-brand .foot-slogan { color: var(--mint); font-weight: 700; font-size: 20px; margin-top: 18px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col b { color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.foot-col a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 15px; margin: 0; }
.foot-col a:hover { color: var(--mint); }
.foot-legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 44px; padding-top: 22px; }
.foot-legal p { margin: 0; font-size: 13px; color: rgba(255,255,255,.6); }
.foot-legal a { color: rgba(255,255,255,.85); }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
footer .wrap.foot-grid { display: grid; }
footer .wrap.foot-legal { display: block; }
footer.foot-dark .foot-col a { color: rgba(255,255,255,.85); margin: 0; }
footer.foot-dark .foot-col a:hover { color: var(--mint); }
footer.foot-dark .foot-legal a { color: rgba(255,255,255,.85); }
footer .wrap.foot-grid { align-items: start; }
@media (min-width: 961px) { .road-track.stairs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stairs .stair .reward { white-space: nowrap; }
.stairs .rstep .pl { font-size: clamp(18px, 1.6vw, 24px); white-space: nowrap; }
/* Desktop: join panel drops a little and sits centred under the headline, with more weight */
@media (min-width: 961px) {
  .hz-form { margin-top: 44px; margin-left: clamp(40px, 5vw, 90px); }
  .hz .join { box-shadow: 0 30px 60px -28px rgba(47,5,123,.55), 0 2px 0 rgba(255,255,255,.6) inset; }
}
@media (max-width: 960px) { .stairs .stair { height: auto; padding: 10px 12px; } .stairs .rstep .pl { margin: 2px 0 8px; } }

/* ===== Press row under the hero, on the lilac cards section ===== */
.press-row { padding: 6px 0 clamp(40px, 5vw, 64px); margin-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid rgba(47,5,123,.12); }
.press-label { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.press-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: center; }
.press-logos li { display: flex; align-items: center; justify-content: center; height: 44px; }
.press-logos img { max-height: 30px; max-width: 100%; width: auto; filter: grayscale(1); opacity: .7; transition: opacity .2s, filter .2s; }
.press-logos a:hover img { filter: none; opacity: 1; }
.press-logos .ph { border: 1px dashed rgba(47,5,123,.3); border-radius: 10px; color: rgba(47,5,123,.45); font-size: 12px; font-weight: 600; }
@media (max-width: 960px) { .press-logos { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
#cards { padding-top: clamp(36px, 4vw, 56px); }

/* Press row v2: centred, label as a pill, more air */
.press-row { text-align: center; padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 80px); margin-bottom: clamp(44px, 5vw, 72px); }
.press-label { display: inline-block; background: var(--mint); color: var(--indigo); padding: 8px 18px; border-radius: 40px; font-size: 13px; letter-spacing: .08em; margin: 0 0 clamp(24px, 3vw, 36px); }
.press-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 28px; }
.press-logos li { flex: 0 0 180px; height: 52px; }
@media (max-width: 960px) {
  .press-logos { gap: 14px 12px; }
  .press-logos li { flex: 0 0 calc((100% - 24px) / 3); height: 46px; }
}
.press-logos img { filter: none; opacity: .8; max-height: none; height: 26px; width: auto; }
.press-logos img.pl-lovemoney { height: 30px; }
.press-logos img.pl-telegraph { height: 44px; }
.press-logos img.pl-dailymail { height: 18px; }
.press-logos a:hover img { opacity: 1; }
@media (max-width: 960px) {
  .press-logos img { height: 20px; max-width: 100%; }
  .press-logos img.pl-lovemoney { height: 24px; }
  .press-logos img.pl-telegraph { height: 36px; }
  .press-logos img.pl-dailymail { height: 14px; }
}
@media (min-width: 961px) { .press-logos li { flex: 0 0 200px; height: 60px; } .press-logos img { height: 32px; } .press-logos img.pl-lovemoney { height: 38px; } .press-logos img.pl-telegraph { height: 54px; } .press-logos img.pl-dailymail { height: 22px; } }
/* Press row on its own quiet white band, so the GO section leads */
.press { background: #fff; }
.press .press-row { border-bottom: 0; margin: 0; padding: clamp(36px, 4vw, 56px) 0; }
.press .press-logos img { opacity: .5; }
.press .press-logos a:hover img { opacity: .9; }
#cards { padding-top: clamp(64px, 7vw, 104px); }
section.press { padding: 0; }
@media (max-width: 960px) { .press .press-row { padding: 32px 0 36px; } }
/* Reviews: more breathing space */
.reviews { padding-top: clamp(80px, 9vw, 128px) !important; padding-bottom: clamp(72px, 8vw, 112px); }
.reviews .sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
.reviews .sec-head .eyebrow { margin-bottom: 18px; }
.reviews .sec-head h2 { margin: 0 0 20px; line-height: 1.12; }
.reviews .rev-rows { display: grid; gap: 18px; }
.reviews .plan-note { margin-top: 40px; }

/* ===== Motion pass: hero entrance, button shine, card glow ===== */
@media (prefers-reduced-motion: no-preference) {
  /* Hero: copy and join panel arrive on load */
  .hz .hz-pill, .hz h1, .hz .h1-sub { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
  .hz h1 { animation-delay: .08s; }
  .hz .h1-sub { animation-delay: .18s; }
  .hz .join { animation: rise .9s cubic-bezier(.2,.7,.2,1) .3s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

  /* Join button: a soft shine sweeps across every few seconds */
  .hz .join .btn-cta { position: relative; overflow: hidden; }
  .hz .join .btn-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: shine 4.5s ease-in-out 1.6s infinite; }
  @keyframes shine { 0%, 70% { left: -40%; } 100% { left: 130%; } }

  /* Cards: a coloured glow breathes behind each card (never drawn over the artwork) and they float gently */
  .tier-row .tcol > div:first-child { position: relative; }
  .tier-row .tcol > div:first-child::before { content: ""; position: absolute; inset: 8% 6% -4%; border-radius: 24px; filter: blur(28px); opacity: .55; z-index: -1; animation: glow 4s ease-in-out infinite; }
  .tier-row .tcol:nth-child(1) > div:first-child::before { background: #c45bb5; }
  .tier-row .tcol:nth-child(2) > div:first-child::before { background: #84DBD1; animation-delay: -1.3s; }
  .tier-row .tcol:nth-child(3) > div:first-child::before { background: #5B2BD6; animation-delay: -2.6s; }
  @keyframes glow { 50% { opacity: .9; transform: scale(1.04); } }
  .tier-row .tcol .tier { animation: cardfloat 6s ease-in-out infinite; }
  .tier-row .tcol:nth-child(2) .tier { animation-delay: -2s; }
  .tier-row .tcol:nth-child(3) .tier { animation-delay: -4s; }
  @keyframes cardfloat { 50% { translate: 0 -6px; } }
}
.tier-row .tcol > div:first-child { isolation: isolate; }

/* ===== Big screen fixes (11 Nov night) ===== */
@media (min-width: 961px) {
  /* Hero: stop growing past 940px tall, so on wide monitors the headline and join box stay in view */
  .hz { --hzh: clamp(860px, 58vw, 940px); }
  /* Dinner band: photo keeps its own shape (top anchored), and the line is placed on the open sky by
     image proportions, so it lands in the same spot on every screen width */
  #moments .lf-band { height: min(55.8vw, 86vh); }
  #moments .lf-photo { object-position: 50% 0; }
  #moments .lf-wrap { position: absolute; inset: 0; display: block; padding: 0; max-width: none; margin: 0; }
  #moments .lf-panel { position: absolute; left: 55vw; top: 3.6vw; max-width: 34vw; margin: 0; }
  #moments .lf-panel h2 { font-size: clamp(26px, 2.6vw, 52px); }
}
/* Dinner band v3: line aligned to the page grid (same left edge as every heading), white on a soft
   Deep Purple wash at the top of the photo, so it reads the same on any screen */
@media (min-width: 961px) {
  #moments .lf-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(47,5,123,.72) 0%, rgba(47,5,123,.38) 55%, rgba(47,5,123,0) 100%); }
  #moments .lf-wrap { position: absolute; inset: 0; z-index: 2; display: block; max-width: 1180px; margin: 0 auto; padding: clamp(36px, 4vw, 64px) 20px 0; }
  #moments .lf-panel { position: static; max-width: 640px; }
  #moments .lf-panel h2 { color: #fff; text-shadow: 0 2px 20px rgba(20,0,60,.35); font-size: clamp(30px, 3vw, 52px); }
  #moments .lf-panel h2 .hl { color: var(--mint); }
}

/* Calls to action under each card and in the invite section */
.tier-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 20px; height: 48px; padding: 0 26px; border-radius: 40px; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid var(--indigo); color: var(--indigo); background: transparent; transition: background .2s, color .2s, transform .2s; }
.tier-cta:hover { background: var(--indigo); color: #fff; transform: translateY(-2px); }
.tier-cta-main { background: var(--indigo); color: #fff; }
.tier-cta-main:hover { background: var(--purple); border-color: var(--purple); }
.road-cta { display: inline-flex; width: auto; margin-top: 24px; padding: 0 30px; height: 52px; align-items: center; text-decoration: none; }
@media (max-width: 960px) { .tier-cta, .road-cta { width: 100%; } }

/* Hero padding fix for big and short screens: copy starts a set distance under the header instead of
   being pinned to the horizon line, and the hero never grows taller than the window */
@media (min-width: 961px) {
  .hz { min-height: min(var(--hzh), 100vh); }
  .hz-copy { height: auto !important; }
  .hz-grid { padding-top: clamp(120px, 15vh, 180px); padding-bottom: clamp(48px, 7vh, 96px); }
  .hz-form { margin-top: clamp(24px, 4vh, 44px); }
}

/* ===== UX pass (11 Nov night): landing ===== */
@media (min-width: 961px) {
  /* Hero fills the window, photo scales to cover it and keeps the couple in shot */
  .hz { min-height: max(720px, 100vh); }
  .hz-sky { inset: 0; }
  .hz-photo { top: 0; left: 0; width: 100%; height: 100%; min-width: 0; max-width: none; transform: none; object-fit: cover; object-position: 50% 72%; }
  .hz-grid { min-height: max(720px, 100vh); align-content: center; padding-top: 110px; padding-bottom: 64px; }
  /* Dinner line centred over the photo, bigger */
  #moments .lf-wrap { max-width: none; padding: clamp(40px, 4.5vw, 72px) 20px 0; text-align: center; }
  #moments .lf-panel { margin: 0 auto; max-width: 900px; }
  #moments .lf-panel h2 { font-size: clamp(36px, 3.8vw, 64px); }
  #moments .lf-band::before { height: 52%; }
}
/* Join panel: soft glow so it lifts off the photo */
.hz .join { box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 24px 60px -24px rgba(47,5,123,.55), 0 0 60px -10px rgba(132,219,209,.55); }
@media (prefers-reduced-motion: no-preference) {
  .hz .join { animation: rise .9s cubic-bezier(.2,.7,.2,1) .3s both, joinglow 5s ease-in-out 1.4s infinite; }
  @keyframes joinglow { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 24px 60px -24px rgba(47,5,123,.55), 0 0 90px 0 rgba(132,219,209,.8); } }
}

/* ===== UX pass: dashboard ===== */
.d-hero { background: #2F057B; }
.d-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: 0; }
.d-hero::before { display: block; content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(47,5,123,.92) 0%, rgba(47,5,123,.78) 42%, rgba(47,5,123,.25) 100%); }
.d-hero::after { display: none; }
.d-hero > .wrap { position: relative; z-index: 2; }
@media (max-width: 960px) { .d-hero::before { background: linear-gradient(180deg, rgba(47,5,123,.9) 0%, rgba(47,5,123,.75) 60%, rgba(47,5,123,.55) 100%); } }

/* Card: glow behind the reserved card, selected thumbnail glows mint */
.dash-card-wrap { position: relative; isolation: isolate; }
.dash-card-wrap::before { content: ""; position: absolute; inset: 12% 10% 0; border-radius: 30px; background: #84DBD1; filter: blur(40px); opacity: .45; z-index: -1; }
@media (prefers-reduced-motion: no-preference) { .dash-card-wrap::before { animation: glow 4s ease-in-out infinite; } }
.picker button { transition: transform .2s, box-shadow .2s, opacity .2s; opacity: .7; }
.picker button.on { opacity: 1; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(132,219,209,.35), 0 0 24px 4px rgba(132,219,209,.6); transform: translateY(-3px); }
.picker button:hover { opacity: 1; }

/* Tiles on a tidy grid: full width strip, then pairs that line up, survey last */
.d-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.d-why { grid-column: 1 / -1; }
.d-share, .d-journey { grid-column: span 7; }
.d-prize, .d-friends { grid-column: span 5; }
.d-survey { grid-column: 1 / -1; }
.d-grid > .d-tile { margin: 0; }
.d-friends { display: flex; flex-direction: column; }
@media (max-width: 960px) { .d-grid { grid-template-columns: 1fr; } .d-grid > .d-tile { grid-column: 1 / -1; } }

/* Join panel grows with big screens (whole panel scales, so text, field and buttons stay in proportion) */
/* Big screens: hero grid and header widen together, type and join panel grow with the screen */
@media (min-width: 1600px) {
  .top .wrap, .hz .hz-grid { max-width: min(1640px, 80vw); }
  .hz h1 { font-size: clamp(64px, 4.3vw, 100px); }
  .hz .h1-sub { font-size: clamp(26px, 1.55vw, 36px); }
  .hz .hz-pill { font-size: clamp(14px, .85vw, 19px); padding: .55em 1.2em; }
  .hz-form { width: clamp(420px, 27vw, 620px); }
  .hz .join { padding: clamp(24px, 1.6vw, 36px); gap: clamp(12px, .8vw, 18px); }
  .hz .join .join-head b { font-size: clamp(24px, 1.55vw, 34px); }
  .hz .join .join-head span, .hz .join .or, .hz .join .hero-fine { font-size: clamp(14px, .82vw, 18px); }
  .hz .join .field input, .hz .join .field .btn { height: clamp(54px, 3.3vw, 74px); font-size: clamp(15px, .95vw, 21px); }
  .hz .join .socials .btn { height: clamp(48px, 2.9vw, 64px); font-size: clamp(15px, .9vw, 20px); }
}
@media (min-width: 1600px) { .hz h1 { max-width: none; } .hz-copy { max-width: none; } }

/* ===== Conversion pass (11 Nov, late) ===== */
/* Join panel lines up with the headline's left edge */
@media (min-width: 961px) { .hz-form { margin-left: 0; } .hz h1 { max-width: 15ch !important; } }
/* Proof inside the join panel, right under the button */
.join-proof { order: 2; width: 100%; margin: 2px 0 0; text-align: center; font-size: 13px; color: var(--ink); line-height: 1.4; }
.join-proof b { color: var(--indigo); }
.join-proof .jp-stars { color: #00b67a; letter-spacing: 1px; margin-right: 4px; }
@media (min-width: 1600px) { .join-proof { font-size: clamp(13px, .8vw, 17px); } }
@media (max-width: 960px) { .join-proof { margin: 12px 0 4px; } }
@media (max-width: 960px) { .hz .h1-sub { font-size: 17px; line-height: 1.3; max-width: 100%; padding-right: 8px; text-wrap: balance; } .hz-copy { max-width: 100%; overflow: hidden; } }

/* One content width for the whole page on big screens, so the hero and every section share the same edges */
@media (min-width: 1600px) {
  .wrap, .top .wrap, .hz .hz-grid { max-width: min(1480px, 78vw); }
  body { font-size: 17px; }
  .sec-head h2, #offer h2, .faq-head h2 { font-size: clamp(40px, 2.6vw, 60px); }
  .road .sec-head h2 { font-size: clamp(48px, 3vw, 68px); }
  .tben li { font-size: 17px; } .tcol .tline { font-size: 26px; }
  .ptile > span:last-child, .faq summary { font-size: 17px; }
}
@media (min-width: 961px) { .hz h1 { max-width: 17ch !important; } }
/* Short headline: second line carries the product, so it is bigger */
.hz .h1-sub { font-size: clamp(19px, 2vw, 30px); line-height: 1.25; }
@media (min-width: 961px) { .hz h1 { max-width: 14ch !important; } .hz .h1-sub { margin-top: 10px; } }
@media (min-width: 1600px) { .hz .h1-sub { font-size: clamp(30px, 1.8vw, 42px); } }
@media (max-width: 960px) { .hz .h1-sub { font-size: 19px; } .hz .h1-sub br { display: none; } }

/* V36: keep the headline to two clean lines */
@media (min-width: 961px) { .hz h1 .nw { white-space: nowrap; } }

/* V36: press logos span the full content width on desktop, edge to edge with the sections below */
@media (min-width: 961px) {
  .press .press-logos { flex-wrap: nowrap; justify-content: space-between; gap: 24px; }
  .press .press-logos li { flex: 0 1 auto; height: 64px; }
  .press .press-logos img { height: 36px; }
  .press .press-logos img.pl-lovemoney { height: 42px; }
  .press .press-logos img.pl-telegraph { height: 60px; }
  .press .press-logos img.pl-dailymail { height: 25px; }
}

/* Dinner line (12 Nov): two clean lines on desktop, no lone "on" */
@media (min-width: 961px) { #moments .lf-panel h2 { max-width: none; } #moments .lf-panel h2 .nw { white-space: nowrap; color: #fff; } #moments .lf-panel h2 .nw .hl { color: var(--mint); } }
.lf-panel h2 .nw { color: inherit; }

/* 12 Nov 13:00: pulsing dot in the "New" pill; Trustpilot line sits under "Want the card first?" */
.hz .hz-pill { display: inline-flex; align-items: center; gap: 9px; }
.hz-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #2F057B; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .hz-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2F057B; animation: hzdot 1.8s ease-out infinite; }
  @keyframes hzdot { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } }
}
.hz .join .join-head .jh-proof { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.hz .join .join-head .jh-proof strong { color: var(--indigo); font-weight: 700; }
.hz .join .join-head .jh-proof .jp-stars { color: #00b67a; letter-spacing: 1px; margin-right: 3px; font-size: 13.5px; }
.join-proof { display: none; }