/* ==========================================================================
   Magic Ticket Deals — color tokens and components (WCAG 2.1 AA checked)

   Direction "Meridian". White ground, warm/cool alternation, zero motion.
   Every text/background pair below has been measured; ratios are in comments.

   Two component vocabularies live here on purpose:
     · home.html, storied.html, ancestry.html use the newer set
       (.hero .parks .park .price-row .said .stats .how .quotes .faq-grid .hrband)
     · hr, how-it-works, support, terms, privacy keep their original set
       (.page-hero .block .values .steps .faq .cta-band .checklist .prose)
   The two do not overlap. Don't merge them without checking every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typeface — self-hosted, so it works behind corporate firewalls that block
   third-party font hosts. Variable: one 46 KB file covers weights 400-900.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("/brand/schibsted-grotesk-latin.woff2") format("woff2");
}
/* Metric-matched fallback. Measured: the headline sets 1133px in Schibsted vs
   1073px in Arial at 58px/500, so Arial scaled 105.6% matches its proportions.
   Keeps line breaks stable if the font is slow, instead of reflowing on swap. */
@font-face{
  font-family:"SG Fallback";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:105.6%;
}

:root{
  /* TEXT */
  --ink:#262C35;            /* headings, nav          14.06 on white */
  --body:#5D6774;           /* running text            5.74 / 5.16 on card */
  --muted:#616B77;          /* labels, fine print      5.42 / 4.87 on card */
  --text-inverse:#FFFFFF;

  /* WARM — Walt Disney World, savings, primary action */
  --terra:#AE552D;          /* warm text accent        5.08 / 4.56 on card */
  --peach:#F08A5D;          /* FILL ONLY               2.47 — never text */
  --peach-hover:#E67C4D;
  --on-peach:#2B2016;       /* text on peach           6.43 */
  --tint-warm:#FDF2EC;

  /* COOL — Disneyland, structure */
  --pacific:#166576;        /* text AND fill w/ white  6.65 */
  --pacific-hover:#0F5361;
  --tint-cool:#EAF2F7;

  /* SUPPORTING */
  --blue:#527189;           /* tertiary text-safe blue 5.14 */
  --blue-soft:#9FBBD0;      /* DECORATIVE RULES ONLY   2.00 — never text */
  --band:#EDF2F6;           /* cool section ground */
  --sand:#FBF2E2;           /* warm section ground */
  --card:#F6F2EF;           /* neutral warm card */
  --surface-page:#FFFFFF;

  --line:rgba(38,44,53,.12);
  --line-strong:rgba(38,44,53,.2);

  /* SEMANTIC */
  --danger:#B02418;
  --danger-bg:#FDF1F0;
  --success:var(--pacific);
  --success-bg:var(--tint-cool);

  /* TYPE — five sizes with real jumps */
  --font-sans:"Schibsted Grotesk","SG Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-xs:12.5px;
  --t-sm:15.5px;
  --t-md:18px;
  --t-lg:clamp(28px,3vw,40px);
  --t-xl:clamp(34px,4.4vw,58px);

  --radius:12px;
  --radius-pill:999px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--surface-page); color:var(--body);
  font-family:var(--font-sans); font-size:var(--t-sm); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-sans); color:var(--ink); font-weight:500;
  letter-spacing:-.028em; line-height:1.15; margin:0; text-wrap:balance;
}
h4{font-weight:600; letter-spacing:-.012em; line-height:1.3;}
p{margin:0;}
a{color:var(--terra);}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--terra); outline-offset:3px; border-radius:3px;}

/* .wrap is horizontal only. Vertical rhythm lives on .sec-* / section classes
   so the two never fight over the `padding` shorthand — that collision silently
   removes the side padding and runs content to the window edge. */
.wrap{max-width:1280px; margin:0 auto; padding-left:48px; padding-right:48px;}
@media (max-width:640px){ .wrap{padding-left:22px; padding-right:22px;} }
.sec{padding-top:104px;}
.sec-sm{padding-top:72px;}
.sec-tight{padding-top:48px;}
.sec-end{padding-bottom:104px;}
.sec-end-tight{padding-bottom:56px;}

.label{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted);
}
.label.terra{color:var(--terra);}
.label.pacific{color:var(--pacific);}
.eyebrow{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; height:54px; padding:0 28px;
  border-radius:var(--radius-pill); font-size:16px; font-weight:600;
  text-decoration:none; white-space:nowrap; border:1px solid transparent;
  font-family:var(--font-sans);
}
.btn.warm,.btn-primary{background:var(--peach); color:var(--on-peach); border-color:var(--peach);}
.btn.warm:hover,.btn-primary:hover{background:var(--peach-hover); border-color:var(--peach-hover);}
.btn.cool{background:var(--pacific); color:var(--text-inverse); border-color:var(--pacific);}
.btn.cool:hover{background:var(--pacific-hover); border-color:var(--pacific-hover);}
.btn.dark{background:var(--ink); color:var(--text-inverse); border-color:var(--ink);}
.btn.dark:hover{background:#12161C; border-color:#12161C;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--text-inverse);}
.btn-lg{height:54px; padding:0 28px;}

/* --------------------------------------------------------------------------
   Shared chrome — header and footer, every page
   -------------------------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--surface-page); border-bottom:1px solid var(--line);
}
@media (max-width:900px){ header{position:static;} }
.hd{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px 40px; padding-top:20px; padding-bottom:20px;
}
.lockup{display:block; text-decoration:none; flex-shrink:0; line-height:0;}
.lockup .logo{display:block; height:34px; width:auto; aspect-ratio:602.76/100;}
.hd nav{display:flex; align-items:center; flex-wrap:wrap; gap:12px 28px;}
.hd nav a{font-size:16px; font-weight:500; color:var(--body); text-decoration:none;}
.hd nav a:hover{color:var(--ink);}
@media (max-width:900px){ .hd{flex-direction:column; align-items:flex-start; gap:14px;} }

footer{padding-top:104px; padding-bottom:64px;}
.foot-top{
  display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between;
  padding-bottom:32px; border-bottom:1px solid var(--line);
}
.foot-top .lockup .logo{height:30px;}
.foot-top nav,.foot-links{display:flex; flex-wrap:wrap; gap:24px;}
.foot-top nav a,.foot-links a{font-size:15px; font-weight:500; color:var(--body); text-decoration:none;}
.foot-top nav a:hover,.foot-links a:hover{color:var(--ink);}
.disc,.disclaimer{font-size:var(--t-xs); color:var(--muted); max-width:96ch; margin-top:30px; line-height:1.65;}
.copy{font-size:var(--t-xs); color:var(--muted); margin-top:16px;}

/* ==========================================================================
   HOME + PARTNER PAGES
   ========================================================================== */

/* Hero — compact, so the park cards clear the fold */
.hero{padding-top:54px; padding-bottom:40px;}
.hero h1{font-size:var(--t-xl); line-height:1.04; max-width:19ch; margin-bottom:20px;}
.hero .lede{font-size:17px; line-height:1.55; color:var(--body); max-width:64ch;}

/* Partner logo: artwork height, not box height. A tightly cropped file uses
   38px directly; a padded file needs more so the visible mark lands at 38px. */
.partner-logo{display:block; height:38px; width:auto; margin-bottom:24px;}

/* Park cards — each park owns a hue */
.parks{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:28px;}
.park{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
}
.park.wdw{background:var(--tint-warm); border-color:rgba(174,85,45,.18);}
.park.dlr{background:var(--tint-cool); border-color:rgba(22,101,118,.18);}
.park .ph{height:232px; flex-shrink:0; position:relative; overflow:hidden;}
.park .ph img{width:100%; height:100%; object-fit:cover; display:block;}
.park.wdw .ph img{object-position:center 46%;}  /* keep palm crowns + street */
.park.dlr .ph img{object-position:center 74%;}  /* center on the pier, not sky */
.park .in{padding:28px 32px 34px; display:flex; flex-direction:column; flex:1;}
.park h2{font-size:28px; margin:12px 0 10px;}
.park .blurb{font-size:var(--t-sm); color:var(--body); max-width:52ch; margin-bottom:24px;}
.park .cta{margin-top:auto; padding-top:26px;}

.price-row{display:flex; align-items:baseline; gap:13px; flex-wrap:wrap;}
.from{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.price{
  font-size:54px; font-weight:600; color:var(--ink); line-height:.95;
  letter-spacing:-.038em; font-variant-numeric:tabular-nums;
}
.save{font-size:var(--t-xs); font-weight:700; padding:6px 13px; border-radius:var(--radius-pill); white-space:nowrap;}
.save.warm{background:var(--peach); color:var(--on-peach);}
.save.cool{background:var(--pacific); color:var(--text-inverse);}

/* Asymmetric text band */
.said{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
@media (max-width:820px){ .said{grid-template-columns:1fr; gap:26px;} }
.said h2{font-size:var(--t-lg); max-width:16ch;}
.said .rule{width:40px; height:3px; background:var(--peach); margin-bottom:24px; border-radius:2px;}
/* Drop the right column by the rule's height + margin so the paragraph starts
   level with the heading rather than with the rule above it. */
.said > div + div{padding-top:calc(3px + 24px);}
/* Declared here, after the rule above — the earlier media query has equal
   specificity, so source order decides and it must come last. */
@media (max-width:820px){ .said > div + div{padding-top:0;} }
.said p{font-size:var(--t-md); line-height:1.6; color:var(--body); max-width:44ch;}
.said p + p{margin-top:16px; font-size:var(--t-sm); color:var(--muted);}

/* Big figures — one hue each */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:44px 40px;}
.stat .fig{
  font-size:56px; font-weight:600; line-height:1;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.stat .fig .u{font-size:22px; letter-spacing:0; font-weight:500;}
.stat:nth-child(1) .fig{color:var(--terra);}
.stat:nth-child(2) .fig{color:var(--pacific);}
.stat:nth-child(3) .fig{color:var(--blue);}
.stat .lab{font-size:var(--t-sm); color:var(--body); margin-top:14px; max-width:26ch;}

/* How it works — a list on a cool ground, not three equal cards */
.how{background:var(--band); border-radius:16px; padding:clamp(34px,5vw,68px);}
.how h2{font-size:var(--t-lg); margin-bottom:8px;}
.how .intro{font-size:var(--t-md); color:var(--body); max-width:62ch; margin-bottom:40px;}
.how ol{list-style:none; margin:0; padding:0;}
.how ol li{
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:22px;
  align-items:baseline; padding-top:24px; padding-bottom:24px;
  border-top:1px solid rgba(38,44,53,.14);
}
.how ol li:last-child{border-bottom:1px solid rgba(38,44,53,.14);}
.how ol .n{
  font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--pacific);
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.how ol h4{font-size:var(--t-md); margin-bottom:6px;}
.how ol p{font-size:var(--t-sm); color:var(--body); max-width:56ch;}

/* Customer quotes */
.quotes{
  background:var(--card); border-radius:16px; padding:clamp(32px,4.5vw,58px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:38px 44px;
}
.quote{margin:0; display:flex; flex-direction:column;}
.quote .mark{
  width:34px; height:3px; border-radius:2px; margin-bottom:20px;
  flex-shrink:0; background:var(--pacific);
}
.quote blockquote{margin:0; font-size:var(--t-md); line-height:1.55; color:var(--ink);}
.quote figcaption{
  margin-top:auto; padding-top:20px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* FAQ, two-column (home + partner). The inner pages use .faq instead. */
.faq-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:48px 72px; align-items:start;}
.faq-grid h2{font-size:var(--t-lg); margin-bottom:12px;}
.faq-grid .intro{font-size:var(--t-sm); color:var(--muted); max-width:48ch;}
.qs{display:flex; flex-direction:column;}
.qs .q{padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid var(--line);}
.qs .q:last-child{padding-bottom:0; margin-bottom:0; border-bottom:0;}
.qs h4{font-size:var(--t-md); margin-bottom:10px;}
.qs p{font-size:var(--t-sm); color:var(--body);}

/* HR band — warm sand */
.hrband{
  background:var(--sand); border-radius:16px; padding:clamp(34px,5vw,64px);
  display:flex; flex-wrap:wrap; gap:32px; align-items:center; justify-content:space-between;
}
.hrband h3{font-size:clamp(24px,2.4vw,32px); max-width:22ch; margin:16px 0 12px;}
.hrband p{font-size:16px; color:var(--body); max-width:44ch;}

/* ==========================================================================
   INNER PAGES — hr, how-it-works, support, terms, privacy
   Original markup, restyled on the new tokens.
   ========================================================================== */
.page-hero{background:var(--tint-warm); padding-top:64px; padding-bottom:48px;}
.page-hero h1{font-size:var(--t-lg);}
.page-hero .lede{font-size:var(--t-md); color:var(--body); max-width:62ch; margin-top:14px;}

section.block{padding-top:80px; padding-bottom:80px;}
section.tinted{background:var(--card);}

.section-head{margin-bottom:38px; max-width:62ch;}
.section-head h2{font-size:var(--t-lg); margin-bottom:10px;}
.section-head p{font-size:var(--t-md); color:var(--body);}

.values{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:34px 32px;}
.value h4{font-size:var(--t-md); margin-bottom:10px;}
.value p{font-size:var(--t-sm); color:var(--body);}
.value .ic{
  width:34px; height:3px; border-radius:2px; background:var(--blue-soft);
  margin-bottom:20px; display:block;
}
.value .ic svg{display:none;}   /* the old icon glyphs are retired */

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:36px 32px;}
.step .num{
  font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--pacific);
  letter-spacing:.06em; display:block; margin-bottom:14px;
}
.step h4{font-size:var(--t-md); margin-bottom:8px;}
.step p{font-size:var(--t-sm); color:var(--body);}

.faq details{border-top:1px solid var(--line); padding-top:20px; padding-bottom:20px;}
.faq details:last-of-type{border-bottom:1px solid var(--line);}
.faq summary{
  font-size:var(--t-md); color:var(--ink); font-weight:500; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; gap:20px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq .chev{color:var(--terra); font-weight:600;}
.faq details p{margin-top:12px; font-size:var(--t-sm); color:var(--body); max-width:62ch;}

.cta-band{
  background:var(--sand); border-radius:16px; padding:clamp(34px,5vw,56px);
  display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;
}
.cta-band h3{font-size:clamp(22px,2.2vw,30px); max-width:22ch;}
.cta-band p{font-size:16px; color:var(--body); max-width:46ch; margin-top:10px;}

.checklist{list-style:none; margin:0; padding:0;}
.checklist li{
  display:grid; grid-template-columns:22px minmax(0,1fr); gap:14px;
  padding-top:12px; padding-bottom:12px; font-size:var(--t-sm); color:var(--body);
}
.checklist .ck{color:var(--pacific); font-weight:700;}

.hr-split{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:48px; align-items:center;}
.hr-art{background:var(--tint-cool); border-radius:var(--radius); min-height:220px;}

/* terms.html and privacy.html place .prose directly in the section, with no
   .wrap around it — so .prose supplies its own centering and gutters. */
.prose{
  max-width:calc(70ch + 96px); margin-left:auto; margin-right:auto;
  padding-left:48px; padding-right:48px;
}
@media (max-width:640px){
  .prose{max-width:calc(70ch + 44px); padding-left:22px; padding-right:22px;}
}
.prose h2{font-size:24px; margin-top:38px; margin-bottom:12px;}
.prose h3{font-size:var(--t-md); margin-top:26px; margin-bottom:8px;}
.prose p{font-size:var(--t-sm); color:var(--body); margin-bottom:14px;}
.prose ul,.prose ol{font-size:var(--t-sm); color:var(--body); padding-left:22px; margin-bottom:14px;}
.prose li{margin-bottom:7px;}

.lede{font-size:var(--t-md); color:var(--body);}
.loc{color:var(--muted);}
.desc{font-size:var(--t-sm); color:var(--body);}
.t{font-weight:600; color:var(--ink);}