/* =========================================================================
 * /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; }

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

.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; }

.journey-tabs button.active { background: var(--navy); color: var(--white); }
.sea-toggle.active .toggle-track { background: var(--blue); }
.sea-toggle.active .toggle-track i { transform: translateX(13px); }


.section { max-width: var(--max); margin: 0 auto; padding: 66px 24px; }
.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-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); }
.tag.sea { background: #ffd6cc; color: #7a1c10; }
.tag.ferry { background: #dce9ff; color: var(--blue); }
.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.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-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 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; }
.calculator-card, .device-card { min-height: 440px; border-radius: 25px; overflow: hidden; }
.device-card { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--blue); color: var(--white); }
.device-status.unsure b { color: var(--yellow); }
.usage-pills button.active { background: var(--mint); border-color: var(--mint); color: var(--navy); }


.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; }
.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 > .arrow { align-self: end; color: var(--mint); }


.lines { padding-top: 64px; }
.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; }
.compare-table { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.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); }


.faq-section { padding-top: 38px; }
.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) {

  .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 h1 { font-size: clamp(55px, 8vw, 72px); }

  .section { padding: 56px 18px; }

  .plan-row { grid-template-columns: 52px 1fr auto; }
.device-card { min-height: 420px; }

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


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

  .hero { min-height: 830px; background: var(--navy); }
.hero h1 { margin-top: 14px; font-size: clamp(47px, 13vw, 58px); }

  .section { padding: 46px 16px; }
.split-heading { display: block; }
.split-heading > p, .split-heading > .text-link, .result-summary { margin-top: 14px; }
.plan-row { grid-template-columns: 48px 1fr; gap: 12px; padding: 14px; }
.plan-main h3 { font-size: 16px; }
.device-card { grid-template-columns: 1fr; }

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

  .ports-section { padding: 48px 16px; }
.ports-grid { grid-template-columns: 1fr; }
.line-list { grid-template-columns: 1fr; }
.line-list a:nth-child(n+7) { display: none; }

  .compare-table { overflow-x: auto; }
}


@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-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; }

/*
 * `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-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; }
}


@media (max-width: 640px) {

  .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; }
}


@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;
}