/* =========================================================================
 * /coupons — ported from the approved standalone design.
 *
 * NOT IMPORTED, deliberately: the standalone's own header, offer bar, footer, brand mark, skip
 * link, @font-face blocks and global resets. This site has exactly one of each in Chrome.tsx and
 * main.css; importing them would restyle 207 other pages to style one.
 *
 * Tokens are declared on .coupons-page rather than :root so this page cannot leak its palette,
 * and the body face is applied here — /about shipped entirely in the wrong font because an
 * equivalent block declared the token and never used it.
 * ========================================================================= */
.coupons-page {
  --navy: #07182d; --ink: #102642; --blue: #155dfc;
  /*
   * ACCESSIBILITY TOKENS (16 Aug 2026 audit).
   *
   * Fifteen WCAG AA contrast failures, all near-misses at 3.7-4.3 where 4.5 is required, so small
   * token moves clear the whole set without touching the palette's character:
   *   --muted   #60728a -> #4a5a6e   (4.92 -> 7.05 on white; it is used for 11-13px text on tinted
   *                                   cards where it was measuring 3.93-4.01)
   *   --purple  #8b5cf6 -> #6d28d9   (4.23 -> 7.10, and white-on-purple passes too)
   *   --blue-ink                     NEW. --blue #155dfc is fine as a BACKGROUND with white text
   *                                   (5.25) but fails as TEXT on yellow (4.23) and on pale blue
   *                                   (4.28). Rather than darken --blue everywhere and lose the
   *                                   brand blue, text-on-light uses this darker variant: 7.40 on
   *                                   #ffe777, 7.48 on #dce9ff.
   */
  --blue-ink: #0b3fa8; --cyan: #00d9ff;
  --mint: #baffc9; --purple: #6d28d9; --yellow: #ffe777; --coral: #ff745d;
  --cream: #fff8dc; --foam: #f6fbff; --line: #d8e6f8; --white: #ffffff;
  --muted: #4a5a6e; --max: 1280px;
  --display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--sans);
  background: var(--white);
}

/* ---------------------------------------------------------------------------
   `hidden` must actually hide.

   The search script filters by setting `row.hidden = true`, which relies on the
   user-agent rule `[hidden] { display: none }`. That rule is the weakest one in
   the cascade, and `.coupons-manifest-row` sets `display: grid` — so every row
   stayed on screen while carrying the attribute, and typing a provider name
   filtered nothing. The standalone design has the same gap; this is not a
   porting artefact, and it is why the search looked dead in production.

   Scoped to this page and written at (0,2,0) so it outranks the row rules
   without reaching for `!important`.
   --------------------------------------------------------------------------- */
.coupons-page [hidden] { display: none; }




* { box-sizing: border-box; }

button, select, input { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }

button { cursor: pointer; }

main { overflow-x: clip; overflow-y: visible; }

.arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.mark { width: 40px; height: 40px; border-radius: 14px; background: var(--navy); display: inline-grid; place-items: center; flex: none; transform: rotate(-2deg); }

.mark svg { width: 30px; height: 30px; fill: none; stroke: var(--mint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.header-cta, .button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 21px; border-radius: 999px; border: 0; font-size: 13px; font-weight: 800; transition: transform .15s ease, box-shadow .15s ease; }

.header-cta { background: var(--navy); color: var(--white); }

.header-cta:hover, .button:hover, .plan-button:hover { transform: translateY(-2px); }


.hero { width: 100%; min-height: 725px; position: relative; background: var(--navy); overflow: hidden; }

.hero-photo { position: absolute; inset: 0 0 0 43%; background: var(--navy); animation: hero-reveal .55s ease-out both; }

.hero-photo::after { content: ""; position: absolute; inset: 0; background: rgba(7,24,45,.08); }

.hero-panel { min-height: 725px; width: 57%; padding: 92px 105px 150px max(24px, calc((100vw - 1280px) / 2 + 24px)); background: var(--navy); color: var(--white); position: relative; z-index: 4; display: flex; flex-direction: column; justify-content: flex-start; clip-path: ellipse(98% 80% at 0 50%); animation: rise-in .55s .08s ease-out both; }

.eyebrow, .step-label { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }

.eyebrow.light, .step-label.light { color: var(--mint); }

.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(186,255,201,.13); animation: signal-pulse 2.8s ease-out infinite; }

.hero h1 { margin: 20px 0 22px; max-width: 630px; font-size: clamp(58px, 5.3vw, 78px); line-height: .93; letter-spacing: -.055em; font-weight: 750; }

.hero h1 span, .hero h1 strong { display: block; }

.hero h1 strong { color: var(--mint); font-weight: inherit; }

.hero-panel > p { margin: 0; max-width: 510px; color: #ced9e7; font-size: 17px; line-height: 1.62; }

.hero-actions { display: flex; align-items: center; gap: 23px; margin-top: 28px; }

.mint-button { color: var(--navy); background: var(--mint); box-shadow: 0 8px 0 rgba(0,0,0,.18); }

.dark-button { color: var(--white); background: var(--navy); box-shadow: 0 8px 0 rgba(4,14,27,.15); }

.pale-button { color: var(--navy); background: var(--white); }

.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-size: 13px; font-weight: 800; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

.light-link { color: var(--white); opacity: .88; }

.hero-proof { display: flex; align-items: center; gap: 13px; margin-top: 26px; color: #b8c8da; font-size: 11px; line-height: 1.5; }

.hero-proof strong { color: var(--white); font-size: 12px; }

.proof-avatars { display: flex; }

.proof-avatars i { width: 34px; height: 34px; margin-left: -7px; border: 2px solid var(--navy); border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--navy); font-size: 9px; font-style: normal; font-weight: 900; }

.proof-avatars i:first-child { margin-left: 0; background: var(--yellow); }
.proof-avatars i:last-child { background: var(--coral); }

.hero-route { position: absolute; z-index: 2; right: 0; top: 45px; width: 58%; height: 310px; overflow: visible; }

.hero-route-path { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-dasharray: 8 12; animation: route-flow 11s linear infinite; }

.hero-route-port { fill: var(--yellow); stroke: var(--white); stroke-width: 4; }
.hero-route-dot { fill: var(--mint); filter: drop-shadow(0 0 8px var(--mint)); animation: route-dot 3s ease-in-out infinite; }
.hero-route-boat { fill: var(--white); transform-origin: 331px 137px; animation: ship-bob 4.8s ease-in-out infinite; }

.hero-stamp { position: absolute; z-index: 5; right: max(27px, calc((100vw - 1280px) / 2 + 18px)); bottom: 117px; width: 96px; height: 96px; border-radius: 50%; background: var(--yellow); color: var(--navy); border: 5px solid rgba(255,255,255,.85); display: grid; place-content: center; text-align: center; transform: rotate(7deg); box-shadow: 0 15px 30px rgba(7,24,45,.25); }

.hero-stamp span { font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.hero-stamp strong { line-height: .8; font-size: 19px; }

.hero-location { position: absolute; z-index: 5; right: max(25px, calc((100vw - 1280px) / 2 + 150px)); bottom: 105px; padding: 8px 12px; border-radius: 999px; background: rgba(7,24,45,.76); color: var(--white); backdrop-filter: blur(8px); font-size: 10px; font-weight: 700; }

.hero-location span { color: var(--mint); margin-right: 5px; }

.hero-spark { position: absolute; z-index: 4; color: var(--yellow); font-size: 31px; animation: sparkle 3.6s ease-in-out infinite; }
.spark-one { top: 89px; right: 12%; }
.spark-two { top: 35%; right: 46%; font-size: 20px; animation-delay: 1.1s; }


.finder-wrap { position: relative; z-index: 12; max-width: var(--max); margin: -72px auto 0; padding: 0 24px; scroll-margin-top: 16px; }

.finder-card { background: var(--white); border: 1px solid var(--line); border-radius: 27px; padding: 24px; box-shadow: 0 22px 62px rgba(22,55,91,.18); }

.journey-tabs { display: inline-flex; padding: 4px; margin-bottom: 16px; border-radius: 999px; background: var(--foam); border: 1px solid var(--line); }

.journey-tabs button { min-height: 31px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 850; }

.journey-tabs button.active { background: var(--navy); color: var(--white); }

.finder-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 17px; }

.finder-heading h2 { margin: 5px 0 0; font-size: 25px; letter-spacing: -.045em; }

.finder-note { padding: 7px 11px; border-radius: 999px; background: #ecfff1; color: #216239; font-size: 10px; font-weight: 800; }

.finder-grid { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr .7fr .9fr 1.3fr auto; gap: 8px; }

.finder-grid label { min-width: 0; padding: 9px 12px; background: var(--foam); border: 1px solid var(--line); border-radius: 14px; }

.finder-grid label > span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }

.finder-grid select { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; font-weight: 800; }

.sea-toggle { display: flex; align-items: center; gap: 8px; padding: 7px 11px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 14px; text-align: left; }

.sea-toggle > span:last-child { display: grid; }
.sea-toggle strong { font-size: 10px; }
.sea-toggle small { color: var(--muted); font-size: 8px; }

.toggle-track { width: 30px; height: 17px; padding: 2px; border-radius: 99px; background: #b4c0cc; flex: none; }
.toggle-track i { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--white); transition: transform .2s ease; }
.sea-toggle.active .toggle-track { background: var(--blue); }
.sea-toggle.active .toggle-track i { transform: translateX(13px); }

.search-button { padding: 0 19px; min-height: 56px; border: 0; border-radius: 14px; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 900; white-space: nowrap; }


.trust-strip { max-width: 1090px; margin: 28px auto 0; padding: 0 24px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 11px; font-weight: 700; }
.trust-strip b { width: 21px; height: 21px; margin-right: 6px; border-radius: 50%; background: var(--mint); color: var(--navy); display: inline-grid; place-items: center; }

.coverage-library { max-width: 840px; margin: 20px auto 0; padding: 11px 17px; border-radius: 999px; background: var(--navy); color: #c5d3e1; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 10px; }
.coverage-library > strong { color: var(--mint); text-transform: uppercase; letter-spacing: .09em; font-size: 8px; }
.coverage-library b { color: var(--white); font-size: 13px; }


.section { max-width: var(--max); margin: 0 auto; padding: 66px 24px; }

.section-heading { margin-bottom: 30px; }
.section-heading h2 { margin: 8px 0 0; max-width: 780px; color: var(--navy); font-size: clamp(38px, 4.2vw, 56px); line-height: .98; letter-spacing: -.055em; font-weight: 750; }
.split-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 45px; }
.split-heading > p { max-width: 415px; margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.65; }


.zone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.zone-card { min-height: 350px; position: relative; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 25px; }
.sea-zone { background: var(--navy); color: var(--white); }
.port-zone { background: var(--yellow); }
.wifi-zone { background: #e9e3ff; }
.zone-number { position: absolute; right: 20px; top: 18px; opacity: .35; font-size: 11px; font-weight: 900; }
.zone-card svg { width: 100%; height: 110px; margin: 9px 0 4px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zone-card .mini-ship { color: var(--mint); }
.ship-body { fill: currentColor; stroke: currentColor; }
.ship-top { fill: none; }
.zone-card .tag { display: inline-flex; }
.tag { width: fit-content; padding: 5px 9px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sea-tag, .tag.sea-port { background: var(--mint); color: var(--navy); }
.port-tag, .tag.port { background: var(--yellow); color: var(--navy); }
.wifi-tag { background: var(--purple); color: var(--white); }
.tag.sea { background: #ffd6cc; color: #7a1c10; }
.tag.ferry { background: #dce9ff; color: var(--blue); }
.zone-card h3 { margin: 13px 0 7px; font-size: 25px; letter-spacing: -.04em; }
.zone-card p { margin: 0; max-width: 340px; min-height: 66px; opacity: .72; font-size: 13px; line-height: 1.6; }
.zone-card > strong { display: block; margin-top: 16px; font-size: 11px; }

.handoff-card { margin-top: 14px; padding: 21px 23px; border: 1px solid var(--line); border-radius: 18px; background: var(--foam); display: grid; grid-template-columns: .9fr 1.25fr; align-items: center; gap: 40px; }
.handoff-copy { display: grid; gap: 5px; }
.handoff-copy > span { color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.handoff-copy strong { font-size: 14px; }
.handoff-copy p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.handoff-route { position: relative; padding-top: 23px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.handoff-route > div:not(.handoff-line) { display: grid; gap: 2px; }
.handoff-route b { font-size: 10px; }
.handoff-route small { color: var(--muted); font-size: 8px; }
.handoff-line { position: absolute; left: 5px; right: 5px; top: 8px; height: 3px; border-radius: 999px; background: var(--blue); }
.handoff-line i { position: absolute; top: -5px; width: 13px; height: 13px; border: 3px solid var(--blue); border-radius: 50%; background: var(--white); }
.handoff-line i:first-child { left: 0; }
.handoff-line i:nth-child(2) { left: 49%; }
.handoff-line i:last-child { right: 0; background: var(--mint); }


.plans-section { scroll-margin-top: 12px; padding-top: 42px; }
.plans-heading { align-items: flex-end; }
.result-summary { display: grid; justify-items: end; }
.result-summary span { font-size: 13px; font-weight: 900; }
.result-summary small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.filter-row { display: flex; gap: 7px; margin-bottom: 14px; }
.filter-row button { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--muted); font-size: 10px; font-weight: 900; }
.filter-row button.active { color: var(--white); background: var(--navy); border-color: var(--navy); }
.plan-list { display: grid; gap: 9px; }
.plan-row { display: grid; grid-template-columns: 58px minmax(230px, 1.75fr) minmax(160px, 1fr) minmax(150px, .9fr) minmax(125px, .7fr) auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 8px 24px rgba(22,55,91,.055); }
.provider-mark { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--navy); font-size: 16px; font-weight: 900; }
.provider-mark.mint { background: var(--mint); }
.provider-mark.purple { background: #e4dcff; color: #4f2da2; }
.provider-mark.coral { background: #ffd9d2; color: #8b291b; }
.provider-mark.yellow { background: var(--yellow); }
.provider-mark.blue { background: #dbe8ff; color: var(--blue); }
.plan-title { display: flex; gap: 5px; align-items: center; }
.best-chip { color: var(--purple); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.plan-main h3 { margin: 7px 0 3px; color: var(--navy); font-size: 18px; letter-spacing: -.03em; }
.plan-main h3 span { color: var(--muted); font-weight: 600; }
.plan-main p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.plan-spec, .plan-price { display: grid; gap: 3px; }
.plan-spec > span, .plan-price > span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.plan-spec strong { color: var(--navy); font-size: 12px; }
.plan-spec small, .plan-price small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.plan-price strong { color: var(--navy); font-size: 18px; letter-spacing: -.03em; }
.plan-button { min-height: 42px; padding: 0 14px; border-radius: 999px; background: var(--navy); color: var(--white); display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 900; transition: transform .15s ease; white-space: nowrap; }
.affiliate-note { margin: 11px 3px 0; color: var(--muted); font-size: 9px; }


.deal-section { width: 100%; padding: 32px 24px; background: var(--yellow); }
.deal-inner { max-width: 1170px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr auto auto; align-items: center; gap: 28px; }
.deal-kicker, .tool-label { color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.deal-copy h2 { margin: 6px 0 5px; font-size: 32px; line-height: 1; letter-spacing: -.04em; }
.deal-copy p { margin: 0; max-width: 600px; color: #5e5c4e; font-size: 11px; line-height: 1.5; }
.coupon-ticket { min-width: 210px; padding: 14px 22px; border: 2px dashed var(--navy); border-radius: 14px; background: rgba(255,255,255,.5); color: var(--navy); display: grid; gap: 2px; text-align: left; position: relative; }
.coupon-ticket::before, .coupon-ticket::after { content: ""; position: absolute; top: 50%; width: 14px; height: 28px; background: var(--yellow); border: 2px solid var(--navy); border-radius: 999px; transform: translateY(-50%); }
.coupon-ticket::before { left: -9px; border-left: 0; }
.coupon-ticket::after { right: -9px; border-right: 0; }
.coupon-ticket span { font-size: 7px; letter-spacing: .14em; font-weight: 900; }
.coupon-ticket strong { font-family: var(--display); font-size: 24px; letter-spacing: .04em; }
.coupon-ticket b { color: var(--blue); font-size: 9px; }


.tools-section { padding-bottom: 56px; }
.tools-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
.calculator-card, .device-card { min-height: 440px; border-radius: 25px; overflow: hidden; }
.calculator-card { padding: 29px; background: var(--cream); border: 1px solid #f2df92; }
.tool-top { display: grid; gap: 5px; }
.tool-top span { color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.tool-top strong { font-family: var(--display); font-size: 25px; }
.range-list { display: grid; gap: 17px; margin-top: 27px; }
.range-list label { display: grid; gap: 8px; }
.range-list label > span { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 700; }
.range-list b { color: var(--navy); }
.range-list input { width: 100%; accent-color: var(--blue); }
.calculator-result { margin-top: 25px; padding: 20px; border-radius: 18px; background: var(--navy); color: var(--white); display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: end; }
.calculator-result span { color: var(--mint); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.calculator-result > strong { grid-column: 2; grid-row: 1 / 3; font-family: var(--display); font-size: 53px; letter-spacing: -.05em; }
.calculator-result p { margin: 0; font-size: 12px; font-weight: 700; }
.calculator-result small { grid-column: 1 / -1; margin-top: 7px; color: #9fb1c3; font-size: 8px; }
.device-card { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--blue); color: var(--white); }
.device-art { position: relative; min-height: 100%; display: grid; place-items: center; overflow: hidden; background: var(--mint); }
.device-art::before, .device-art::after { content: ""; position: absolute; width: 220px; height: 220px; border: 2px solid var(--blue); border-radius: 50%; }
.device-art::after { width: 155px; height: 155px; }
.device-phone { position: relative; z-index: 2; width: 145px; height: 275px; border: 7px solid var(--navy); border-radius: 30px; background: var(--white); color: var(--navy); display: grid; place-items: center; align-content: center; gap: 8px; transform: rotate(-5deg); box-shadow: 17px 17px 0 rgba(7,24,45,.16); }
.device-phone::before { content: ""; position: absolute; top: 9px; width: 48px; height: 10px; border-radius: 999px; background: var(--navy); }
.device-phone span { font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.device-phone b { width: 67px; height: 67px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; font-size: 28px; }
.device-phone small { font-size: 8px; font-weight: 900; }
.device-spark { position: absolute; z-index: 3; right: 12%; top: 18%; color: var(--coral); font-size: 38px; animation: sparkle 3s ease-in-out infinite; }
.device-copy { padding: 38px 28px; align-self: center; }
.device-copy h3 { margin: 8px 0 22px; font-size: 32px; line-height: 1; letter-spacing: -.045em; }
.device-copy label { display: grid; gap: 6px; }
.device-copy label span { color: #c9d9ff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.device-copy select { width: 100%; min-height: 47px; padding: 0 12px; border: 0; border-radius: 12px; color: var(--navy); background: var(--white); font-size: 11px; font-weight: 800; }
.device-status { margin-top: 10px; padding: 12px; border-radius: 12px; background: rgba(7,24,45,.23); display: grid; gap: 3px; }
.device-status b { color: var(--mint); font-size: 11px; }
.device-status span { color: #d3dfff; font-size: 9px; line-height: 1.4; }
.device-status.unsure b { color: var(--yellow); }
.device-copy > a { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; color: var(--white); border-bottom: 1px solid currentColor; font-size: 10px; font-weight: 900; }


.usage-band { width: 100%; min-height: 555px; margin-top: 36px; background: var(--navy); color: var(--white); display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; }
.usage-copy { max-width: 640px; width: 100%; justify-self: end; padding: 78px 70px 65px 24px; }
.usage-copy h2 { margin: 10px 0 14px; max-width: 520px; font-size: clamp(43px, 5vw, 65px); line-height: .98; letter-spacing: -.055em; }
.usage-copy > p { max-width: 470px; margin: 0; color: #b9c7d6; font-size: 14px; line-height: 1.65; }
.usage-pills { display: flex; gap: 7px; margin-top: 24px; }
.usage-pills button { padding: 9px 13px; border: 1px solid #38506b; border-radius: 999px; background: transparent; color: #c7d4e1; font-size: 10px; font-weight: 800; }
.usage-pills button.active { background: var(--mint); border-color: var(--mint); color: var(--navy); }
.usage-result { margin-top: 16px; padding: 16px 18px; border: 1px solid #334b65; border-radius: 17px; display: grid; gap: 5px; }
.usage-result span { color: var(--mint); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.usage-result strong { font-size: 15px; }
.usage-result small { color: #9fb1c3; font-size: 9px; }
.usage-visual { min-height: 555px; position: relative; background: var(--blue); overflow: hidden; }
.phone-card { position: absolute; z-index: 3; width: 230px; min-height: 395px; left: 50%; top: 47px; transform: translateX(-50%) rotate(4deg); padding: 30px 22px; border: 7px solid var(--navy); border-radius: 38px; background: var(--white); color: var(--navy); box-shadow: 26px 26px 0 rgba(7,24,45,.25); display: grid; align-content: start; text-align: center; }
.phone-card::before { content: ""; width: 66px; height: 13px; margin: -19px auto 22px; border-radius: 99px; background: var(--navy); }
.phone-card > span { color: var(--muted); font-size: 9px; text-transform: uppercase; font-weight: 900; letter-spacing: .1em; }
.phone-card > strong { margin-top: 4px; font-size: 20px; letter-spacing: -.04em; }
.data-ring { width: 136px; height: 136px; margin: 25px auto 20px; border: 17px solid var(--mint); border-left-color: var(--yellow); border-radius: 50%; display: grid; place-items: center; transform: rotate(-18deg); }
.data-ring b { font-size: 27px; transform: rotate(18deg); }
.phone-card small { font-size: 10px; color: var(--muted); }
.floating-chip { position: absolute; z-index: 4; padding: 10px 13px; border: 3px solid var(--navy); border-radius: 12px; background: var(--yellow); color: var(--navy); font-size: 11px; font-weight: 900; box-shadow: 6px 6px 0 var(--navy); }
.chip-one { left: 9%; top: 160px; transform: rotate(-6deg); }
.chip-two { right: 8%; top: 265px; background: var(--mint); transform: rotate(6deg); }
.usage-wave { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 190px; fill: var(--cyan); opacity: .42; }


.destinations { padding-bottom: 48px; }
.region-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.region-card { min-height: 270px; position: relative; overflow: hidden; border-radius: 23px; padding: 0 18px 18px; display: grid; align-content: end; border: 1px solid var(--line); transition: transform .15s ease; }
.region-card:hover { transform: translateY(-4px); }
.region-card.coral { background: #ffdfd8; }
.region-card.mint { background: #d9ffe2; }
.region-card.blue { background: #dce9ff; }
.region-card.purple { background: #e9e2ff; }
.route-graphic { position: absolute; inset: 0 0 auto; width: 100%; height: 145px; }
.route-land { stroke: none; fill: rgba(255,255,255,.55); }
.route-line { fill: none; stroke: var(--navy); stroke-width: 2; stroke-dasharray: 5 5; animation: route-flow 11s linear infinite; }
.route-graphic circle, .route-boat { fill: var(--navy); stroke: none; }
.route-boat { animation: ship-bob 4.8s ease-in-out infinite; transform-origin: 145px 64px; }
.region-card > div { position: relative; z-index: 2; }
.region-card > div > span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.region-card h3 { margin: 5px 0 4px; font-size: 22px; letter-spacing: -.04em; }
.region-card p { margin: 0; color: var(--muted); font-size: 10px; }
.region-card > .arrow { position: absolute; z-index: 3; right: 17px; bottom: 18px; width: 22px; height: 22px; }


.ports-section { width: 100%; padding: 66px 24px; background: var(--navy); color: var(--white); }
.ports-inner { max-width: var(--max); margin: 0 auto; }
.ports-section .section-heading h2 { color: var(--white); }
.ports-section .split-heading > p { color: #aab9c9; }
.ports-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.port-card { min-height: 162px; padding: 18px; border: 1px solid #2d435a; border-radius: 18px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 13px; position: relative; overflow: hidden; background: #0b223b; transition: background .15s ease, transform .15s ease; }
.port-card:hover { background: #113052; transform: translateY(-2px); }
.port-code { position: absolute; right: 13px; top: 11px; color: var(--mint); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.port-glyph { width: 58px; height: 58px; fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.port-card > div:nth-of-type(2) { min-width: 0; }
.port-card span { color: #8ea2b7; font-size: 8px; }
.port-card h3 { margin: 4px 0; font-size: 19px; }
.port-card p { margin: 0; color: #aebdcb; font-size: 9px; }
.port-card > .arrow { align-self: end; color: var(--mint); }


.lines { padding-top: 64px; }
.lines-panel { min-height: 535px; position: relative; overflow: hidden; display: grid; grid-template-columns: .85fr 1.15fr; gap: 65px; padding: 55px; border-radius: 28px; background: var(--blue); color: var(--white); }
.lines-intro { align-self: center; position: relative; z-index: 2; }
.lines-intro h2 { margin: 10px 0 17px; font-size: clamp(40px, 4.7vw, 59px); line-height: .98; letter-spacing: -.055em; }
.lines-intro p { margin: 0 0 24px; max-width: 430px; color: #dbe7ff; font-size: 14px; line-height: 1.65; }
.line-list { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-content: center; }
.line-list a { min-height: 55px; padding: 0 14px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.23); border-radius: 13px; background: rgba(7,24,45,.18); transition: background .15s ease; }
.line-list a:hover { background: var(--navy); }
.line-list span { color: var(--mint); font-size: 9px; font-weight: 900; }
.line-list strong { font-size: 11px; }
.lines-ship { position: absolute; left: 29%; bottom: -20px; opacity: .11; transform: scale(3.4); }
.lines-ship .mini-ship { color: var(--white); }
.lines-ship .ship-body { fill: currentColor; }


.compare-section { padding-top: 36px; }
.compare-table { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.compare-row { min-height: 63px; padding: 0 21px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.15fr; align-items: center; gap: 20px; border-top: 1px solid var(--line); font-size: 11px; }
.compare-row:first-child { border-top: 0; }
.compare-head { min-height: 42px; background: var(--foam); color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.compare-row strong { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.compare-row span { color: var(--muted); }
.compare-row b { color: #178649; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.mint { background: var(--mint); border: 1px solid #5ac678; }
.dot.yellow { background: var(--yellow); }
.dot.purple { background: var(--purple); }
.dot.coral { background: var(--coral); }


.setup-section { width: 100%; min-height: 620px; margin-top: 35px; background: var(--foam); display: grid; grid-template-columns: 1fr 1fr; }
.setup-art { position: relative; overflow: hidden; background: var(--yellow); }
.setup-art > svg { position: absolute; inset: auto 0 0; width: 100%; height: 230px; fill: var(--blue); }
.lighthouse { position: absolute; z-index: 2; left: 50%; bottom: 90px; width: 100px; height: 330px; transform: translateX(-50%); background: var(--white); clip-path: polygon(25% 0,75% 0,100% 100%,0 100%); }
.lighthouse::before { content: ""; position: absolute; left: -18px; right: -18px; top: 32px; height: 38px; background: var(--navy); border-radius: 6px; }
.lighthouse::after { content: ""; position: absolute; top: -35px; left: 18px; width: 64px; height: 55px; background: var(--navy); clip-path: polygon(50% 0,100% 55%,90% 100%,10% 100%,0 55%); }
.lighthouse span { position: absolute; left: 30%; right: 30%; top: 120px; height: 18px; background: var(--coral); }
.lighthouse span::after { content: ""; position: absolute; left: -12px; right: -12px; top: 86px; height: 18px; background: var(--coral); }
.lighthouse i { position: absolute; left: 38px; bottom: 17px; width: 24px; height: 45px; background: var(--navy); border-radius: 20px 20px 0 0; }
.setup-content { max-width: 640px; padding: 74px 24px 65px 70px; }
.setup-content h2 { margin: 9px 0 28px; max-width: 540px; font-size: clamp(40px, 4.7vw, 59px); line-height: 1; letter-spacing: -.055em; }
.setup-content ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 19px 24px; }
.setup-content li { display: flex; align-items: flex-start; gap: 11px; }
.setup-content li > span { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 900; }
.setup-content li strong { font-size: 12px; }
.setup-content li p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.safety-note { margin-top: 25px; padding: 13px 16px; border-left: 4px solid var(--coral); border-radius: 0 10px 10px 0; background: var(--white); color: var(--muted); font-size: 10px; line-height: 1.5; }
.safety-note strong { color: var(--navy); }


.ferry-section { padding-top: 65px; }
.ferry-card { min-height: 420px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr .75fr; gap: 45px; padding: 52px; border-radius: 28px; background: var(--navy); color: var(--white); }
.ferry-copy, .ferry-routes { position: relative; z-index: 3; }
.ferry-copy h2 { margin: 9px 0 14px; font-size: clamp(40px, 4.7vw, 58px); line-height: .98; letter-spacing: -.055em; }
.ferry-copy p { max-width: 420px; margin: 0 0 25px; color: #b9c9d9; font-size: 13px; line-height: 1.6; }
.ferry-routes { align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ferry-routes span { padding: 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 800; }
.ferry-routes small { grid-column: 1 / -1; margin-top: 4px; color: #9caec0; font-size: 8px; }
.ferry-art { position: absolute; z-index: 1; right: -20px; bottom: -1px; width: 53%; height: auto; fill: none; stroke: var(--mint); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .3; }
.ferry-sun { fill: var(--yellow); stroke: none; }
.ferry-body { fill: var(--mint); stroke: var(--mint); animation: ship-bob 4.8s ease-in-out infinite; transform-origin: center; }
.ferry-wave { fill: var(--blue); stroke: none; }
.ferry-windows { stroke: var(--navy); stroke-width: 8; }


.honesty-section { padding-top: 42px; }
.honesty-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 70px; }
.honesty-grid h2 { margin: 8px 0 0; max-width: 650px; font-size: clamp(40px, 4.8vw, 59px); line-height: 1; letter-spacing: -.055em; }
.honesty-grid > p { margin: 0 0 5px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.promise-row { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.promise-row span { min-height: 68px; padding: 0 16px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--line); font-size: 10px; font-weight: 900; text-align: center; }
.promise-row span:first-child { border-left: 0; }
.promise-row span::before { content: "✓"; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--mint); display: inline-grid; place-items: center; }
.weather-note { margin-top: 13px; padding: 19px 21px; border-radius: 16px; background: #fff5c8; display: grid; grid-template-columns: 190px 1fr; gap: 25px; }
.weather-note strong { font-size: 12px; }
.weather-note p { margin: 0; color: #5d5c4e; font-size: 11px; line-height: 1.55; }


.faq-section { padding-top: 38px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 68px; padding: 0 5px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 14px; cursor: pointer; list-style: none; color: var(--navy); font-size: 14px; font-weight: 800; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--blue); font-size: 9px; }
.faq-list summary b { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 16px; transition: transform .2s ease; }
.faq-list details[open] summary b { transform: rotate(45deg); background: var(--navy); color: var(--white); }
.faq-list details p { max-width: 780px; margin: -5px 0 20px 64px; color: var(--muted); font-size: 12px; line-height: 1.65; }


.ocean-finale { width: 100%; min-height: 690px; position: relative; overflow: hidden; padding: 75px 24px 310px; background: var(--cream); color: var(--navy); }
.finale-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 70px; position: relative; z-index: 4; }
.finale-copy h2 { margin: 9px 0 14px; font-size: clamp(48px, 6vw, 76px); line-height: .91; letter-spacing: -.06em; }
.finale-copy p { max-width: 520px; margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.boarding-card { width: 320px; min-height: 190px; padding: 24px; border: 3px solid var(--navy); border-radius: 20px; background: var(--yellow); transform: rotate(4deg); box-shadow: 12px 12px 0 var(--blue); display: grid; align-content: space-between; }
.boarding-card > span { font-size: 8px; letter-spacing: .14em; font-weight: 900; }
.boarding-card div { display: grid; }
.boarding-card div b { font-family: var(--display); font-size: 25px; line-height: 1; }
.boarding-card div small { margin-top: 4px; font-size: 10px; }
.boarding-card > strong { width: fit-content; padding: 7px 10px; border-radius: 999px; background: var(--navy); color: var(--mint); font-size: 10px; letter-spacing: .1em; }
.boarding-card i { font-style: normal; font-size: 7px; letter-spacing: .13em; font-weight: 900; }
.cruise-hull { fill: var(--white); }
.cruise-deck, .cruise-top { fill: var(--mint); }
.cruise-windows { stroke-width: 7; }
.cruise-signal { stroke: var(--blue); animation: signal-pulse 2.8s ease-out infinite; }
.wave-a { fill: var(--cyan); animation: wave-drift 12s ease-in-out infinite alternate; }
.wave-b { fill: var(--blue); animation: wave-drift-back 14s ease-in-out infinite alternate; }
.wave-c { fill: var(--navy); }


@keyframes hero-reveal { from { opacity: 0; filter: blur(8px); transform: scale(1.02); } to { opacity: 1; filter: blur(0); transform: scale(1); } }

@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@keyframes route-flow { to { stroke-dashoffset: -200; } }

@keyframes route-dot { 50% { transform: scale(1.6); opacity: .55; } }

@keyframes ship-bob { 50% { transform: translateY(-6px) rotate(-1deg); } }

@keyframes footer-ship-bob { 50% { transform: translateY(-7px) rotate(-.7deg); } }

@keyframes wave-drift { to { transform: translateX(10px) scaleX(1.01); } }

@keyframes wave-drift-back { to { transform: translateX(-11px) scaleX(1.012); } }

@keyframes signal-pulse { 50% { opacity: .45; } }

@keyframes sparkle { 50% { transform: rotate(20deg) scale(1.25); opacity: .55; } }

@keyframes lighthouse-beam { 50% { transform: rotate(9deg); opacity: .55; } }


@media (max-width: 1160px) {

  .hero-panel { width: 61%; padding-right: 92px; }

  .hero-photo { left: 45%; }

  .finder-grid { grid-template-columns: repeat(5, 1fr); }

  .sea-toggle { grid-column: span 3; }
.search-button { grid-column: span 2; }

  .plan-row { grid-template-columns: 52px minmax(230px, 1.7fr) 1fr 1fr auto; }
.plan-price { display: none; }

  .region-grid { grid-template-columns: repeat(2, 1fr); }
.region-card { min-height: 240px; }
}


@media (max-width: 900px) {
.header-cta { display: none; }

  .hero { min-height: 760px; }
.hero-photo { inset: 0; background-position: 65% center; }
.hero-photo::after { background: rgba(7,24,45,.25); }
.hero-panel { width: 73%; min-height: 760px; padding: 83px 85px 155px 24px; background: rgba(7,24,45,.94); clip-path: ellipse(105% 78% at 0 50%); }
.hero h1 { font-size: clamp(55px, 8vw, 72px); }
.hero-stamp { right: 22px; }
.hero-route { width: 65%; }
.hero-location { right: 135px; }

  .finder-wrap { margin-top: -65px; padding: 0 16px; }
.finder-grid { grid-template-columns: repeat(2, 1fr); }
.finder-grid label:nth-child(5) { grid-column: span 2; }
.sea-toggle, .search-button { grid-column: span 1; }

  .coverage-library { max-width: calc(100% - 32px); flex-wrap: wrap; border-radius: 18px; justify-content: center; }

  .section { padding: 56px 18px; }
.zone-grid { grid-template-columns: 1fr; }
.zone-card { min-height: 250px; padding-left: 46%; }
.zone-card svg, .zone-card .zone-icon { position: absolute; left: 18px; top: 55px; width: 40%; }
.zone-card p { min-height: 0; }

  .plan-row { grid-template-columns: 52px 1fr auto; }
.plan-spec { display: none; }
.plan-button { grid-column: 2 / 4; width: fit-content; }

  .deal-inner { grid-template-columns: 1fr auto; }
.deal-inner .dark-button { grid-column: 1 / -1; width: fit-content; }

  .tools-grid { grid-template-columns: 1fr; }
.device-card { min-height: 420px; }

  .usage-band { grid-template-columns: 1fr; }
.usage-copy { max-width: none; padding: 58px 24px 45px; }
.usage-visual { min-height: 500px; }

  .ports-grid { grid-template-columns: repeat(2, 1fr); }

  .lines-panel { grid-template-columns: 1fr; padding: 42px 30px; gap: 25px; }

  .setup-section { grid-template-columns: .75fr 1.25fr; }
.setup-content { padding-left: 40px; }

  .ferry-card { grid-template-columns: 1fr; }
.ferry-routes { max-width: 430px; }
.ferry-art { width: 70%; opacity: .15; }
}


@media (max-width: 640px) {
.mark { width: 36px; height: 36px; border-radius: 12px; }

  .hero { min-height: 830px; background: var(--navy); }
.hero-photo { inset: 0 0 auto; height: 43%; background-position: 67% 42%; }
.hero-photo::after { background: rgba(7,24,45,.04); }
.hero-panel { position: absolute; inset: auto 0 0; width: 100%; min-height: 65%; padding: 78px 18px 140px; background: var(--navy); clip-path: ellipse(92% 78% at 50% 100%); }
.hero h1 { margin-top: 14px; font-size: clamp(47px, 13vw, 58px); }
.hero-panel > p { max-width: 440px; font-size: 14px; }
.hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; margin-top: 22px; }
.hero-proof { margin-top: 22px; }
.hero-route { top: 10px; right: -100px; width: 120%; height: 260px; }
.hero-stamp { width: 76px; height: 76px; right: 13px; top: 32px; bottom: auto; }
.hero-location, .hero-spark { display: none; }

  .finder-wrap { margin-top: -48px; }
.finder-card { padding: 17px; border-radius: 21px; }
.journey-tabs { width: 100%; }
.journey-tabs button { flex: 1; }
.finder-heading { align-items: flex-start; gap: 10px; }
.finder-heading h2 { font-size: 21px; }
.finder-note { max-width: 110px; text-align: center; line-height: 1.3; }
.finder-grid { grid-template-columns: 1fr 1fr; }
.finder-grid label { padding: 8px 9px; }
.finder-grid label:nth-child(3), .finder-grid label:nth-child(5), .sea-toggle, .search-button { grid-column: span 2; }
.search-button { min-height: 51px; }

  .trust-strip { margin-top: 20px; padding: 0 16px; flex-wrap: wrap; justify-content: center; gap: 10px 17px; font-size: 9px; }
.trust-strip b { width: 18px; height: 18px; }

  .coverage-library { justify-content: flex-start; padding: 14px 16px; }
.coverage-library > strong { width: 100%; }

  .section { padding: 46px 16px; }
.section-heading { margin-bottom: 22px; }
.section-heading h2 { font-size: 39px; }
.split-heading { display: block; }
.split-heading > p, .split-heading > .text-link, .result-summary { margin-top: 14px; }
.result-summary { justify-items: start; }

  .zone-card { min-height: 315px; padding: 18px; padding-top: 140px; }
.zone-card svg, .zone-card .zone-icon { width: 60%; top: 28px; left: 20%; }
.handoff-card { grid-template-columns: 1fr; gap: 18px; padding: 17px; }

  .filter-row { overflow-x: auto; padding-bottom: 4px; }
.filter-row button { flex: none; }
.plan-row { grid-template-columns: 48px 1fr; gap: 12px; padding: 14px; }
.provider-mark { width: 46px; height: 46px; }
.plan-main h3 { font-size: 16px; }
.plan-button { grid-column: 1 / 3; width: 100%; justify-content: center; }

  .deal-section { padding: 31px 16px; }
.deal-inner { grid-template-columns: 1fr; gap: 18px; }
.deal-copy h2 { font-size: 29px; }
.coupon-ticket { width: 100%; }
.deal-inner .dark-button { grid-column: auto; width: 100%; }

  .tools-grid { gap: 10px; }
.calculator-card { padding: 21px; }
.calculator-result { grid-template-columns: 1fr; }
.calculator-result > strong { grid-column: 1; grid-row: auto; font-size: 47px; }
.device-card { grid-template-columns: 1fr; }
.device-art { min-height: 330px; }
.device-phone { transform: rotate(-3deg) scale(.88); }
.device-copy { padding: 30px 21px; }

  .usage-band { margin-top: 18px; }
.usage-copy { padding: 50px 18px 40px; }
.usage-copy h2 { font-size: 43px; }
.usage-pills { flex-wrap: wrap; }
.usage-result strong { font-size: 13px; }
.usage-visual { min-height: 450px; }
.phone-card { transform: translateX(-50%) rotate(2deg) scale(.9); transform-origin: top; }
.chip-one { left: 4%; }
.chip-two { right: 3%; }

  .region-grid { grid-template-columns: 1fr; }
.region-card { min-height: 220px; }

  .ports-section { padding: 48px 16px; }
.ports-grid { grid-template-columns: 1fr; }
.port-card { min-height: 145px; }

  .lines-panel { padding: 35px 18px; border-radius: 22px; }
.lines-intro h2 { font-size: 42px; }
.line-list { grid-template-columns: 1fr; }
.line-list a:nth-child(n+7) { display: none; }

  .compare-table { overflow-x: auto; }
.compare-row { min-width: 680px; }

  .setup-section { grid-template-columns: 1fr; }
.setup-art { min-height: 360px; }
.setup-content { padding: 48px 18px; }
.setup-content h2 { font-size: 41px; }
.setup-content ol { grid-template-columns: 1fr; }

  .ferry-section { padding-top: 45px; }
.ferry-card { min-height: 570px; padding: 35px 20px; border-radius: 22px; }
.ferry-copy h2 { font-size: 43px; }
.ferry-art { width: 110%; opacity: .18; }

  .honesty-grid { grid-template-columns: 1fr; gap: 18px; }
.honesty-grid h2 { font-size: 41px; }
.promise-row { grid-template-columns: 1fr 1fr; }
.promise-row span { min-height: 58px; border-top: 1px solid var(--line); }
.promise-row span:nth-child(odd) { border-left: 0; }
.promise-row span:nth-child(-n+2) { border-top: 0; }
.weather-note { grid-template-columns: 1fr; gap: 7px; }

  .faq-list summary { min-height: 74px; grid-template-columns: 27px 1fr auto; font-size: 12px; }
.faq-list details p { margin-left: 41px; }

  .ocean-finale { min-height: 760px; padding: 55px 16px 320px; }
.finale-inner { grid-template-columns: 1fr; gap: 32px; }
.finale-copy h2 { font-size: 49px; }
.boarding-card { width: min(310px, 94%); justify-self: center; transform: rotate(2deg); }
}


@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


.coupons-page {
  min-width: 0;
  overflow-x: hidden;
  background: var(--white);
  color: var(--ink);
}


.coupons-page :focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}


.coupons-hero :focus-visible,
.coupons-footer :focus-visible { outline-color: var(--yellow); }


.coupons-skip-link {
  position: fixed;
  z-index: 100;
  left: 18px;
  top: 12px;
  padding: 11px 15px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .15s ease;
}


.coupons-skip-link:focus { transform: translateY(0); }


.coupons-breadcrumb-band {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  border-top: 1px solid #edf3fa;
  border-bottom: 1px solid var(--line);
  background: var(--foam);
}


.coupons-breadcrumb-band > div {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}


.coupons-breadcrumb-band a { font-weight: 750; }

.coupons-breadcrumb-band a:hover { color: var(--blue); }

.coupons-breadcrumb-band strong { color: var(--navy); }


.coupons-hero {
  /*
   * FULL-BLEED, not a 1440px inset card (25 Aug 2026).
   *
   * The imported prototype capped this at 1440px while the page's own sections cap at 1280 and the
   * site header caps at 1280 — three different widths on one page. Measured at 1920px: header
   * 320→1600, sections 320→1600, this hero 240→1680, sticking out 80px each side.
   *
   * The padding below already reads `calc((100vw - 1280px) / 2 + 24px)`, which is written for a
   * full-bleed element: it insets the CONTENT to the 1280px column. With the width capped as well,
   * that calc was applied on top of the cap and pushed the copy in twice. Full width lets the
   * padding do the job it was written for, and the hero copy now starts exactly where the header
   * logo does. Same fix `/ports` already carries — see the note by `.ports-intro`.
   */
  width: 100%;
  min-height: 570px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  align-items: center;
  gap: 48px;
  padding: 70px max(52px, calc((100vw - 1280px) / 2 + 24px)) 94px;
  background: var(--navy);
  color: var(--white);
}


.coupons-hero::before {
  content: "";
  position: absolute;
  right: 3%;
  top: -120px;
  width: 510px;
  height: 510px;
  border: 1px solid rgba(186, 255, 201, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 65px rgba(255, 255, 255, .035), 0 0 0 130px rgba(0, 217, 255, .035);
}


.coupons-hero-copy {
  position: relative;
  z-index: 5;
  max-width: 740px;
  animation: coupons-rise-in .5s ease-out both;
}


.coupons-eyebrow,
.coupons-step-label,
.coupons-provider-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}


.coupons-eyebrow { color: var(--mint); }

.coupons-eyebrow i,
.coupons-provider-kicker i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 5px rgba(186, 255, 201, .12);
}


.coupons-hero h1 {
  max-width: 760px;
  margin: 18px 0 22px;
  font-size: clamp(52px, 5.25vw, 76px);
  font-weight: 750;
  line-height: .92;
  letter-spacing: -.06em;
}


.coupons-hero h1 span,
.coupons-hero h1 strong { display: block; }

.coupons-hero h1 strong { color: var(--mint); font-weight: inherit; }


.coupons-hero-copy > p {
  max-width: 630px;
  margin: 0;
  color: #c9d5e2;
  font-size: 17px;
  line-height: 1.65;
}


.coupons-hero-meta {
  margin-top: 27px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  color: #9fb1c3;
  font-size: 11px;
  font-weight: 700;
}


.coupons-verified-pill,
.coupons-date-chip {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--mint);
  color: var(--navy);
  font-size: 10px;
  font-weight: 850;
}


.coupons-verified-pill svg,
.coupons-date-chip svg,
.coupons-copy-button svg,
.coupons-code-cell svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.coupons-hero-route {
  position: absolute;
  z-index: 1;
  right: -10px;
  top: 40px;
  width: 54%;
  height: 360px;
  overflow: visible;
  opacity: .82;
}


.coupons-route-track {
  fill: none;
  stroke: rgba(255, 255, 255, .6);
  stroke-width: 2;
  stroke-dasharray: 8 12;
  animation: coupons-route-flow 11s linear infinite;
}


.coupons-route-port { fill: var(--yellow); stroke: var(--white); stroke-width: 4; }

.coupons-route-pulse { fill: var(--mint); filter: drop-shadow(0 0 9px var(--mint)); animation: coupons-route-pulse 3s ease-in-out infinite; }

.coupons-route-ship { fill: var(--white); transform-origin: 319px 177px; animation: coupons-ship-bob 4.8s ease-in-out infinite; }


.coupons-hero-ticket {
  width: min(370px, 100%);
  min-height: 390px;
  position: relative;
  z-index: 4;
  justify-self: end;
  padding: 31px 30px 26px;
  display: grid;
  align-content: space-between;
  border: 3px solid var(--navy);
  border-radius: 25px;
  background: var(--cream);
  color: var(--navy);
  box-shadow: 14px 14px 0 var(--blue), 0 28px 55px rgba(0, 0, 0, .2);
  transform: rotate(3deg);
  animation: coupons-ticket-float 5.2s ease-in-out infinite;
}


.coupons-hero-ticket::before,
.coupons-hero-ticket::after {
  content: "";
  position: absolute;
  top: 67%;
  width: 30px;
  height: 54px;
  border: 3px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  transform: translateY(-50%);
}


.coupons-hero-ticket::before { left: -18px; }

.coupons-hero-ticket::after { right: -18px; }


.coupons-ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}


.coupons-ticket-top b {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--mint);
  font-size: 9px;
}


.coupons-ticket-offer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  color: var(--blue);
}


.coupons-ticket-offer strong {
  font-family: var(--display);
  font-size: 105px;
  line-height: .76;
  letter-spacing: -.09em;
}


.coupons-ticket-offer span { font-size: 22px; font-weight: 950; }


.coupons-ticket-code {
  padding: 21px 0 17px;
  border-top: 2px dashed var(--navy);
  border-bottom: 2px dashed var(--navy);
  display: grid;
  gap: 3px;
}


.coupons-ticket-code small { font-size: 8px; font-weight: 900; letter-spacing: .14em; }

.coupons-ticket-code b { font-family: var(--display); font-size: 34px; letter-spacing: .045em; }


.coupons-ticket-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
}


.coupons-ticket-foot span { display: inline-flex; align-items: center; gap: 6px; }

.coupons-ticket-foot i { width: 8px; height: 8px; border-radius: 50%; background: #21a84a; box-shadow: 0 0 0 4px #dff9e6; }


.coupons-hero-seal {
  position: absolute;
  z-index: 6;
  right: max(24px, calc((100vw - 1280px) / 2 + 4px));
  bottom: 62px;
  width: 84px;
  height: 84px;
  border: 5px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: var(--yellow);
  color: var(--navy);
  text-align: center;
  transform: rotate(-8deg);
  box-shadow: 0 14px 28px rgba(7, 24, 45, .3);
}


.coupons-hero-seal span { font-size: 8px; font-weight: 950; letter-spacing: .12em; }

.coupons-hero-seal strong { font-size: 19px; line-height: .85; }


.coupons-hero-waves {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 80px;
}


.coupons-hero-waves path:first-child { fill: var(--cyan); animation: coupons-wave-drift 12s ease-in-out infinite alternate; }

.coupons-hero-waves path:last-child { fill: var(--foam); }


.coupons-featured,
.coupons-provider-section,
.coupons-faq-section {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 70px 0;
}


.coupons-section-heading,
.coupons-manifest-heading {
  margin-bottom: 29px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
}


.coupons-section-heading h2,
.coupons-manifest-heading h2 {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 750;
  line-height: .98;
  letter-spacing: -.055em;
}


.coupons-manifest-heading h2 em {
  color: var(--blue);
  font-style: normal;
}


.coupons-exclusive-seal {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--navy);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
  transform: rotate(7deg);
}


.coupons-featured-ticket {
  min-height: 380px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
  border: 2px solid var(--navy);
  border-radius: 28px;
  background: var(--cream);
  box-shadow: 0 16px 42px rgba(7, 24, 45, .1);
}


.coupons-featured-ticket::before,
.coupons-featured-ticket::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: calc(67.5% - 16px);
  width: 32px;
  height: 32px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--white);
}


.coupons-featured-ticket::before { top: -18px; }

.coupons-featured-ticket::after { bottom: -18px; }


.coupons-featured-copy {
  padding: 45px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.coupons-provider-kicker { color: var(--blue); }

.coupons-provider-kicker i { background: var(--blue); box-shadow: 0 0 0 5px #dce8ff; }


.coupons-featured-copy h3 {
  max-width: 670px;
  margin: 15px 0 15px;
  color: var(--navy);
  font-size: clamp(30px, 3.25vw, 44px);
  line-height: 1;
  letter-spacing: -.045em;
}


.coupons-featured-copy p {
  max-width: 720px;
  margin: 0;
  color: #51667e;
  font-size: 14px;
  line-height: 1.7;
}


.coupons-featured-copy p strong { color: var(--navy); }


.coupons-detail-link {
  width: fit-content;
  margin-top: 22px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
}


.coupons-featured-actions {
  position: relative;
  padding: 42px 38px;
  border-left: 2px dashed var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--yellow);
}


.coupons-date-chip { width: fit-content; background: var(--white); }


.coupons-big-code {
  margin: 26px 0 20px;
  padding: 20px;
  border: 2px dashed var(--navy);
  border-radius: 16px;
  display: grid;
  gap: 4px;
  background: rgba(255, 255, 255, .46);
}


.coupons-big-code span { font-size: 8px; font-weight: 900; letter-spacing: .14em; }

.coupons-big-code strong { overflow-wrap: anywhere; font-family: var(--display); font-size: 33px; letter-spacing: .045em; }


.coupons-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }


.coupons-copy-button,
.coupons-use-button {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
}


.coupons-copy-button { border: 2px solid var(--navy); background: var(--white); color: var(--navy); }

.coupons-use-button { border: 2px solid var(--blue); background: var(--blue); color: var(--white); }

.coupons-copy-button:hover,
.coupons-use-button:hover { transform: translateY(-2px); }


.coupons-live-section {
  width: 100%;
  padding: 74px 24px;
  background: var(--foam);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}


.coupons-live-inner { max-width: var(--max); margin: 0 auto; }


.coupons-manifest-heading > div:first-child > p {
  max-width: 590px;
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}


.coupons-search-wrap {
  width: min(390px, 100%);
  display: grid;
  gap: 7px;
}


.coupons-search-wrap > label {
  color: var(--navy);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}


.coupons-search-wrap > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-align: right;
}


.coupons-search-field {
  min-height: 54px;
  padding: 0 12px 0 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(7, 24, 45, .06);
}


.coupons-search-field svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
}


.coupons-search-field input {
  min-width: 0;
  width: 100%;
  /* Measured 23px tall at 375px — one pixel under the 24px target minimum. */
  min-height: 28px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}


.coupons-search-field input::placeholder { color: #8b9daf; }

.coupons-search-field button { min-height: 34px; padding: 0 9px; border: 0; border-radius: 999px; background: var(--foam); color: var(--blue); font-size: 10px; font-weight: 900; }


.coupons-manifest {
  overflow: hidden;
  border: 1px solid #bfd1e6;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 18px 48px rgba(7, 24, 45, .08);
}


.coupons-manifest-labels,
.coupons-manifest-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.05fr) minmax(250px, 1.8fr) minmax(155px, .9fr) minmax(130px, .72fr) minmax(105px, .58fr);
  align-items: center;
  gap: 18px;
}


.coupons-manifest-labels {
  min-height: 48px;
  padding: 0 22px;
  background: var(--navy);
  color: var(--mint);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}


.coupons-manifest-row {
  min-height: 92px;
  position: relative;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  transition: background .15s ease, transform .15s ease;
}


.coupons-manifest-row:first-child { border-top: 0; }

.coupons-manifest-row:nth-child(even) { background: #fbfdff; }

.coupons-manifest-row::before { content: ""; position: absolute; inset: 10px auto 10px 0; width: 4px; border-radius: 0 999px 999px 0; background: transparent; }

.coupons-manifest-row:hover { background: #f1f6ff; }

.coupons-manifest-row:hover::before { background: var(--blue); }

.coupons-manifest-row.is-featured { background: #f2fff5; }

.coupons-manifest-row.is-featured::before { background: var(--mint); }


.coupons-provider-cell { min-width: 0; display: flex; align-items: center; gap: 12px; }

.coupons-provider-cell a { min-width: 0; display: grid; gap: 3px; }

.coupons-provider-cell strong { overflow-wrap: anywhere; color: var(--navy); font-family: var(--display); font-size: 17px; line-height: 1.05; }

.coupons-provider-cell small { color: var(--blue); font-size: 8px; font-weight: 800; }


.coupons-provider-mark {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}


.coupons-provider-mark.tone-0 { background: var(--mint); }

.coupons-provider-mark.tone-1 { background: #dce8ff; color: var(--blue); }

.coupons-provider-mark.tone-2 { background: var(--yellow); }

.coupons-provider-mark.tone-3 { background: #e8e2ff; color: #5935ae; }

.coupons-provider-mark.tone-4 { background: #d7f8ff; color: #006b7f; }

.coupons-provider-mark.tone-5 { background: #ffded7; color: #893326; }


.coupons-discount-cell { min-width: 0; color: #405873; font-size: 12px; line-height: 1.5; }


.coupons-code-cell button {
  width: 100%;
  min-height: 42px;
  padding: 0 10px 0 13px;
  border: 1px dashed #8da5c0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  background: var(--foam);
  color: var(--navy);
}


.coupons-code-cell code {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: 11px;
  font-weight: 850;
}


.coupons-code-cell svg { width: 16px; height: 16px; flex: none; color: var(--blue); }


.coupons-checked-cell { display: grid; gap: 3px; }

.coupons-checked-cell span { display: flex; align-items: center; gap: 6px; color: #21763a; font-size: 9px; font-weight: 900; }

.coupons-checked-cell i { width: 8px; height: 8px; border-radius: 50%; background: #31b657; box-shadow: 0 0 0 4px #e1fae8; }

.coupons-checked-cell small { color: var(--muted); font-size: 9px; }


.coupons-row-action a {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--navy);
  color: var(--white);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}


.coupons-row-action a:hover { background: var(--blue); transform: translateY(-2px); }

.coupons-row-action .arrow { width: 15px; height: 15px; }


.coupons-empty { padding: 65px 24px; text-align: center; }

.coupons-empty strong { color: var(--navy); font-family: var(--display); font-size: 26px; }

.coupons-empty p { margin: 8px 0 18px; color: var(--muted); font-size: 12px; }

.coupons-empty button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); font-size: 11px; font-weight: 900; }


.coupons-disclosure {
  margin: 14px 2px 0;
  padding: 14px 16px;
  border-left: 4px solid var(--yellow);
  border-radius: 0 12px 12px 0;
  background: var(--white);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}


.coupons-provider-heading > p,
.coupons-faq-heading > p {
  max-width: 430px;
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}


.coupons-provider-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }


.coupons-provider-grid > a {
  min-width: 0;
  min-height: 76px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: var(--white);
  box-shadow: 0 7px 20px rgba(7, 24, 45, .045);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}


.coupons-provider-grid > a:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 13px 28px rgba(7, 24, 45, .09); }

.coupons-provider-grid > a > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }

.coupons-provider-grid strong { overflow-wrap: anywhere; color: var(--navy); font-family: var(--display); font-size: 16px; line-height: 1; }

.coupons-provider-grid code { overflow-wrap: anywhere; color: var(--blue); font-family: var(--font-geist-mono), ui-monospace, monospace; font-size: 9px; font-weight: 850; }

.coupons-provider-grid .arrow { color: var(--blue); }


.coupons-faq-section { padding-top: 30px; padding-bottom: 80px; }

.coupons-faq-list { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--foam); }

/*
 * `display: flow-root` is load-bearing, not decoration.
 *
 * The answer paragraph carries `margin-bottom: 25px`. Without a block formatting context that
 * margin COLLAPSES out through the bottom of <details>, so the white background stops 25px short
 * and the list's pale-blue --foam shows through as a strip under the last open answer. That strip
 * is what read as "extra blue space after the FAQ". flow-root keeps the margin inside the box.
 */
.coupons-faq-list details { border-top: 1px solid var(--line); background: var(--white); display: flow-root; }

.coupons-faq-list details:first-child { border-top: 0; }


.coupons-faq-list summary {
  min-height: 78px;
  padding: 0 23px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  color: var(--navy);
}


.coupons-faq-list summary::-webkit-details-marker { display: none; }

.coupons-faq-list summary > span { color: var(--blue); font-size: 9px; font-weight: 900; }

.coupons-faq-list summary > strong { font-family: var(--display); font-size: 18px; letter-spacing: -.02em; }

.coupons-faq-list summary > b { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: var(--foam); font-size: 18px; transition: transform .2s ease, background .2s ease; }

.coupons-faq-list details[open] summary > b { transform: rotate(45deg); background: var(--navy); color: var(--white); }

.coupons-faq-list details p { max-width: 850px; margin: -4px 70px 25px 79px; color: var(--muted); font-size: 13px; line-height: 1.7; }


.coupons-footer { width: 100%; overflow: hidden; background: var(--navy); }


.coupons-live-status {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 22px;
  margin: 0;
  padding: 11px 15px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 12px 34px rgba(7, 24, 45, .25);
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .15s ease, transform .15s ease;
}


.coupons-live-status:not(:empty) { opacity: 1; transform: translate(-50%, 0); }


@keyframes coupons-rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}


@keyframes coupons-route-flow { to { stroke-dashoffset: -200; } }

@keyframes coupons-route-pulse { 50% { transform: scale(1.65); opacity: .5; } }

@keyframes coupons-ship-bob { 50% { transform: translateY(-6px) rotate(-1deg); } }

@keyframes coupons-ticket-float { 50% { transform: translateY(-7px) rotate(2deg); } }

@keyframes coupons-wave-drift { to { transform: translateX(12px) scaleX(1.01); } }


@media (max-width: 1160px) {

  .coupons-hero { grid-template-columns: minmax(0, 1.15fr) minmax(285px, .85fr); gap: 35px; padding-left: 38px; padding-right: 38px; }

  .coupons-hero-ticket { width: 315px; min-height: 350px; padding: 27px; }

  .coupons-ticket-offer strong { font-size: 86px; }

  .coupons-ticket-code b { font-size: 29px; }

  .coupons-hero-seal { right: 15px; }

  .coupons-featured-ticket { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }

  .coupons-featured-ticket::before,
  .coupons-featured-ticket::after { left: calc(60% - 16px); }

  .coupons-manifest-labels,
  .coupons-manifest-row { grid-template-columns: minmax(170px, 1fr) minmax(210px, 1.5fr) minmax(145px, .85fr) minmax(115px, .65fr) minmax(100px, .55fr); gap: 12px; }

  .coupons-provider-grid { grid-template-columns: repeat(3, 1fr); }
}


@media (max-width: 900px) {

  .coupons-hero { width: calc(100% - 32px); min-height: 780px; grid-template-columns: 1fr; align-items: start; gap: 28px; padding: 56px 32px 108px; }

  .coupons-hero-copy { max-width: 680px; }

  .coupons-hero h1 { max-width: 700px; font-size: clamp(51px, 8vw, 68px); }

  .coupons-hero-ticket { width: min(420px, 76%); min-height: 330px; justify-self: center; padding: 26px 30px; transform: rotate(2deg); }

  .coupons-ticket-offer strong { font-size: 78px; }

  .coupons-hero-route { top: 340px; right: -6%; width: 78%; opacity: .43; }

  .coupons-hero-seal { right: 10%; bottom: 66px; }

  .coupons-featured,
  .coupons-provider-section,
  .coupons-faq-section { width: calc(100% - 36px); padding-top: 56px; padding-bottom: 56px; }

  .coupons-featured-ticket { grid-template-columns: 1fr; }

  .coupons-featured-ticket::before,
  .coupons-featured-ticket::after { left: auto; top: calc(58% - 16px); bottom: auto; }

  .coupons-featured-ticket::before { left: -18px; }

  .coupons-featured-ticket::after { right: -18px; }

  .coupons-featured-actions { border-left: 0; border-top: 2px dashed var(--navy); }

  .coupons-featured-copy { padding: 40px 36px; }

  .coupons-live-section { padding: 56px 18px; }

  .coupons-manifest-heading { align-items: stretch; flex-direction: column; }

  .coupons-search-wrap { width: 100%; }

  .coupons-manifest-labels,
  .coupons-manifest-row { grid-template-columns: minmax(160px, 1fr) minmax(190px, 1.3fr) minmax(140px, .8fr) minmax(105px, .6fr) minmax(96px, .5fr); }

  .coupons-manifest { overflow-x: auto; }

  .coupons-manifest-labels,
  .coupons-manifest-rows { min-width: 890px; }

  .coupons-provider-grid { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 900px) {

  .coupons-hero { min-height: 810px; padding: 48px 20px 106px; }

  .coupons-hero-copy > p { font-size: 15px; }

  .coupons-hero-ticket { width: min(370px, 92%); }

  .coupons-hero-seal { width: 72px; height: 72px; right: 3%; }

  .coupons-section-heading { align-items: flex-start; }

  .coupons-exclusive-seal { width: 72px; height: 72px; }

  .coupons-featured-copy,
  .coupons-featured-actions { padding: 30px 24px; }

  .coupons-manifest { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

  .coupons-manifest-labels { display: none; }

  .coupons-manifest-rows { min-width: 0; display: grid; gap: 11px; }

  .coupons-manifest-row {
    min-height: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 19px;
    grid-template-columns: 1fr 1fr;
    gap: 17px 14px;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(7, 24, 45, .05);
  }

  .coupons-manifest-row:first-child { border-top: 1px solid var(--line); }

  .coupons-manifest-row::before { inset: 9px auto 9px 0; }

  .coupons-provider-cell,
  .coupons-discount-cell { grid-column: 1 / -1; }

  .coupons-discount-cell,
  .coupons-code-cell,
  .coupons-checked-cell,
  .coupons-row-action { position: relative; padding-top: 16px; }

  .coupons-discount-cell::before,
  .coupons-code-cell::before,
  .coupons-checked-cell::before,
  .coupons-row-action::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .coupons-code-cell button { min-height: 46px; }

  .coupons-row-action a { width: 100%; min-height: 46px; }

  .coupons-provider-heading,
  .coupons-faq-heading { align-items: flex-start; flex-direction: column; }

  .coupons-provider-heading > p,
  .coupons-faq-heading > p { margin: 0; }

  .coupons-faq-list details p { margin: -4px 24px 24px 65px; }
}


@media (max-width: 640px) {

  .coupons-breadcrumb-band > div { width: calc(100% - 32px); }

  .coupons-hero { width: 100%; min-height: 790px; }

  .coupons-hero h1 { margin-top: 16px; font-size: clamp(45px, 13vw, 58px); }

  .coupons-hero-meta { align-items: flex-start; flex-direction: column; }

  .coupons-hero-ticket { min-height: 305px; padding: 24px; box-shadow: 9px 9px 0 var(--blue); }

  .coupons-ticket-offer strong { font-size: 68px; }

  .coupons-ticket-offer span { font-size: 18px; }

  .coupons-ticket-code { padding: 15px 0 13px; }

  .coupons-ticket-code b { font-size: 27px; overflow-wrap: anywhere; }

  .coupons-hero-route { top: 372px; right: -38%; width: 138%; }

  .coupons-section-heading h2,
  .coupons-manifest-heading h2 { font-size: 40px; }

  .coupons-exclusive-seal { display: none; }

  .coupons-featured,
  .coupons-provider-section,
  .coupons-faq-section { width: calc(100% - 32px); }

  .coupons-featured-copy h3 { font-size: 31px; }

  .coupons-featured-copy p { font-size: 13px; }

  .coupons-action-row { grid-template-columns: 1fr; }

  .coupons-big-code strong { font-size: 29px; }

  .coupons-live-section { padding-left: 16px; padding-right: 16px; }

  .coupons-search-field { min-height: 50px; }

  .coupons-provider-grid { grid-template-columns: 1fr 1fr; }

  .coupons-provider-grid > a { min-height: 82px; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; padding: 10px; }

  .coupons-provider-grid .coupons-provider-mark { width: 38px; height: 38px; border-radius: 12px; }

  .coupons-provider-grid .arrow { display: none; }

  .coupons-provider-grid strong { font-size: 14px; }

  .coupons-provider-grid code { font-size: 8px; }

  .coupons-faq-list summary { min-height: 82px; padding: 0 16px; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 9px; }

  .coupons-faq-list summary > strong { font-size: 15px; }

  .coupons-faq-list details p { margin: -3px 18px 23px 50px; font-size: 12px; }
}


@media (max-width: 420px) {

  .coupons-hero { min-height: 820px; }

  .coupons-hero-ticket { width: 96%; }

  .coupons-hero-seal { display: none; }

  .coupons-manifest-row { grid-template-columns: 1fr; }

  .coupons-provider-cell,
  .coupons-discount-cell { grid-column: 1; }

  .coupons-provider-grid { grid-template-columns: 1fr; }
}


@media (prefers-reduced-motion: reduce) {

  .coupons-page *,
  .coupons-page *::before,
  .coupons-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


.coupons-code-cell button[data-copied='true']{background:var(--mint);border-style:solid}

/* ---------------------------------------------------------------------------
   LEGIBILITY FLOOR — a deliberate departure from the standalone.

   The design sets a lot of functional text at 8–10px: the verification dates
   and "View coupon details" links in all 21 rows at 8–9px, the column headers
   at 9px, the coupon codes in the provider index at 9px, and the FTC affiliate
   disclosure at 10px. The brief rejects that treatment, and it is right to —
   8px is below what most people can read without leaning in, and the disclosure
   in particular has to be conspicuous to do its job at all.

   Raised to a floor of 10px for the ticket's decorative micro-caps, which are
   an aesthetic device carrying no information, and 11–13px for anything a
   reader actually has to act on: codes, dates, labels, controls, disclosure.
   Nothing else about the design changes.
   --------------------------------------------------------------------------- */

/* Legal text has to be readable to count as disclosed. */
.coupons-page .coupons-disclosure { font-size: 13px; line-height: 1.55; }

/* The code is what the reader copies or types at checkout — the page's payload. */
.coupons-page .coupons-code-cell code { font-size: 13px; }
.coupons-page .coupons-provider-link code { font-size: 12px; }

/* Row detail: the freshness date is the reason to trust the row. */
.coupons-page .coupons-provider-cell small { font-size: 11px; }
.coupons-page .coupons-checked-cell small { font-size: 11px; }

/* Table furniture and search controls. */
.coupons-page .coupons-manifest-labels span { font-size: 11px; }
.coupons-page .coupons-manifest-heading label { font-size: 12px; }
.coupons-page .coupons-search-wrap > span { font-size: 12px; }
.coupons-page .coupons-search-field button { font-size: 12px; }
.coupons-page .coupons-step-label { font-size: 11px; }

/* Decorative all-caps micro-labels: kept small by design, but not unreadable. */
.coupons-page .coupons-hero-ticket span,
.coupons-page .coupons-hero-ticket b,
.coupons-page .coupons-hero-ticket small,
.coupons-page .coupons-hero-seal span,
.coupons-page .coupons-featured-actions span,
.coupons-page .coupons-exclusive-seal { font-size: 10px; }

/* The FAQ counters are numbering, not content — small is fine, 9px is not. */
.coupons-page .coupons-faq-list summary > span { font-size: 10px; }

/* ---------------------------------------------------------------------------
   Provider tiles carry the real brand mark, not initials.

   The standalone fills these with a two-letter monogram on a rotating pastel
   tone. This site shows actual logos everywhere a provider is named, so the
   tile becomes a neutral frame for the mark: white ground so logos with
   transparency read, a hairline edge so light marks still have a shape, and
   `object-fit: contain` so nothing is cropped or stretched to fit.
   --------------------------------------------------------------------------- */
.coupons-page .coupons-provider-mark {
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(7, 24, 45, .09);
  color: inherit;
  overflow: hidden;
}

.coupons-page .coupons-provider-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  display: block;
}