/* AskPricing design system — one stylesheet, every surface.
   Identity carried over from askpricing-landing-v2.html */
:root{
  --y:#FFD000; --black:#0A0A0A; --white:#FFFFFF;
  --red:#FF2D2D; --green:#00C853; --cyan:#00C8C8;
  --border:3px solid var(--black);
  --border-thick:4px solid var(--black);
  --border-2:2px solid var(--black);
  --shadow:4px 4px 0px var(--black);
  --shadow-lg:6px 6px 0px var(--black);
  --shadow-sm:3px 3px 0px var(--black);
  --display:'Anton',Impact,Haettenschweiler,'Arial Narrow Bold','Franklin Gothic Heavy',sans-serif;
  --body:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--y);color:var(--black);-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:0 32px}
a{color:inherit}

/* nav */
nav{background:var(--y);border-bottom:var(--border-thick);padding:0 32px;height:72px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.logo{font-family:var(--display);font-size:32px;letter-spacing:1px;text-transform:uppercase;
  text-decoration:none;color:var(--black)}
.nav-links{display:flex;list-style:none}
.nav-links li a{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--black);text-decoration:none;padding:8px 16px;border:var(--border);margin-left:-3px}
.nav-links li a:hover,.nav-links li a[aria-current]{background:var(--black);color:var(--y)}
.nav-cta{background:var(--black);color:var(--y);font-size:13px;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;border:var(--border);padding:12px 24px;
  cursor:pointer;box-shadow:var(--shadow);text-decoration:none;transition:transform .1s,box-shadow .1s}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nav-cta:active{transform:translate(2px,2px);box-shadow:none}

/* type + labels */
.eyebrow,.pill{display:inline-block;background:var(--black);color:var(--y);font-size:11px;
  font-weight:800;text-transform:uppercase;letter-spacing:.12em;padding:6px 14px}
.pill.light{background:var(--white);color:var(--black);border:var(--border)}
.sect-label{display:inline-block;background:var(--y);border:var(--border);font-size:11px;
  font-weight:800;text-transform:uppercase;letter-spacing:.12em;padding:6px 14px;margin-bottom:18px}
.sect-label.dark{background:var(--black);color:var(--y)}
.sect-title{font-family:var(--display);font-size:52px;text-transform:uppercase;
  letter-spacing:1px;line-height:.94;margin-bottom:32px}
.sect-title.white{color:var(--white)}
.sect-title.yellow{color:var(--y)}
.stroke{-webkit-text-stroke:3px var(--black);color:transparent}

/* sections */
.s-y{background:var(--y);border-bottom:var(--border-thick);padding:52px 0}
.s-w{background:var(--white);border-bottom:var(--border-thick);padding:52px 0}
.s-k{background:var(--black);border-bottom:var(--border-thick);padding:52px 0}
.s-r{background:var(--red);border-bottom:var(--border-thick);padding:52px 0}
.s-c{background:var(--cyan);border-bottom:var(--border-thick);padding:52px 0}
.s-g{background:var(--green);border-bottom:var(--border-thick);padding:52px 0}

/* buttons */
.btn{background:var(--black);color:var(--y);font-family:var(--body);font-size:14px;
  font-weight:900;text-transform:uppercase;letter-spacing:.06em;border:var(--border);
  padding:14px 26px;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .1s,box-shadow .1s;text-decoration:none;display:inline-block}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn.alt{background:var(--white);color:var(--black)}

/* tags */
.t{display:inline-block;font-size:10px;font-weight:900;text-transform:uppercase;
  letter-spacing:.06em;padding:3px 8px;border:var(--border-2);white-space:nowrap}
.t.g{background:var(--green)} .t.y{background:var(--y)} .t.w{background:var(--white)}
/* An identity carrying one unresolved detail. Deliberately not red: the
   product is published and its prices are real - the reservation is about
   whether it is the exact item asked for. */
.t.u{background:repeating-linear-gradient(45deg,var(--white) 0 5px,rgba(0,0,0,.10) 5px 7px);
  border-style:dashed}
.t.d{background:var(--black);color:var(--y)} .t.r{background:var(--red);color:var(--white)}
.t.o{background:var(--white);color:rgba(0,0,0,.45)}

/* grid frame */
.frame{border-top:var(--border-thick);border-left:var(--border-thick);display:grid}
.frame > *{border-right:var(--border-thick);border-bottom:var(--border-thick);padding:24px}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}

/* tables */
.tblwrap{overflow-x:auto;border:var(--border-thick);background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
th{background:var(--y);font-size:10px;font-weight:900;text-transform:uppercase;
  letter-spacing:.09em;text-align:left;padding:11px 16px;border-bottom:var(--border-thick);white-space:nowrap}
th.r,td.r{text-align:right}
td{padding:13px 16px;border-bottom:var(--border)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--y)}
.who{font-size:14px;font-weight:800;text-transform:uppercase}
.who small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  text-transform:none;letter-spacing:0;color:rgba(0,0,0,.45);margin-top:2px}
td.money{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;
  font-size:14px;font-weight:600}
td.money .was{display:block;font-size:11px;color:rgba(0,0,0,.4);text-decoration:line-through}
.eff{font-size:16px;font-weight:800}

/* terminal / receipt */
.terminal{background:var(--black);border:var(--border-thick);box-shadow:var(--shadow-lg);
  font-family:var(--mono)}
.terminal-bar{background:var(--y);border-bottom:var(--border-thick);padding:10px 16px;
  display:flex;align-items:center;gap:8px}
.t-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--black)}
.t-dot.r{background:var(--red)}.t-dot.y{background:var(--y)}.t-dot.g{background:var(--green)}
.t-title{font-family:var(--body);font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;margin-left:6px}
.terminal-body{padding:18px 20px}
/* These are buttons: each one resolves its figure to the stored row it came
   from. They measured 25px tall, barely over the 24px WCAG 2.5.8 floor and well
   under the 44px of WCAG 2.5.5 - and a control nobody can reliably hit is a
   control that does not exist. Making them interactive raised the bar for their
   size. Alignment moves from baseline to center so the taller box stays tidy. */
.t-row{display:flex;gap:12px;padding:5px 0;font-size:13px;align-items:center;
  min-height:44px;
  border:0;background:none;width:100%;text-align:left;color:inherit;font-family:inherit;cursor:pointer}
.t-row:hover{background:#151515}
.t-key{color:#7A7A7A;min-width:150px;flex-shrink:0;text-transform:uppercase;
  font-size:11px;letter-spacing:.06em}
.t-val{color:var(--white);font-variant-numeric:tabular-nums;margin-left:auto}
.t-val.unk{color:var(--y);font-weight:700}
.t-hr{border:none;border-top:1px solid #262626;margin:9px 0}
.t-total{background:var(--y);color:var(--black);font-family:var(--body);font-size:15px;
  font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:13px 16px;
  margin-top:12px;display:flex;justify-content:space-between}
.t-total b{font-family:var(--mono);font-size:19px}
.t-note{background:#141414;border-top:1px solid #262626;padding:12px 20px;
  font-size:11.5px;line-height:1.7;color:#B8B8B8;min-height:74px}
.t-note em{color:var(--y);font-style:normal;font-weight:700}

/* footer */
footer{background:var(--y);border-top:var(--border-thick);padding:28px 0}
.fbot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(0,0,0,.45)}
.dtag{background:var(--black);color:var(--y);font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;padding:5px 12px}

@media(max-width:900px){
  .wrap{padding:0 20px}
  .sect-title{font-size:34px}
  .c2,.c3,.c4{grid-template-columns:1fr}

  /* The nav used to be `display:none` here, with nothing in its place: on a
     phone you landed on the homepage and could not reach Product, Compare,
     Cashback, Buy Calendar or Integrity at all. Hiding navigation is not a
     responsive strategy.

     The bar now wraps - logo and call-to-action on the first line, the links on
     their own scrollable line beneath. Every destination stays reachable, no
     JavaScript is involved, and nothing is hidden behind a menu that has to be
     discovered. */
  nav{height:auto;flex-wrap:wrap;padding:10px 20px;row-gap:8px}
  .logo{font-size:26px}
  .nav-cta{font-size:11px;padding:10px 16px}
  .nav-links{order:3;width:100%;overflow-x:auto;padding-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav-links::-webkit-scrollbar{display:none}
  /* 44px is the Apple HIG floor and WCAG 2.5.5; measured on 2026-07-27 these
     were 37px tall, and a 37px link inside a horizontally scrolling strip is
     where mis-taps come from. WCAG 2.5.8 (AA) only asks for 24px, so this was
     passing the letter of the rule and still awkward under a thumb. */
  .nav-links li a{white-space:nowrap;padding:0 13px;font-size:12px;
    min-height:44px;display:flex;align-items:center}
  .nav-cta{min-height:44px;display:inline-flex;align-items:center}
  .logo{min-height:44px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- live data states ---- */
.live-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:16px;padding-bottom:10px;border-bottom:var(--border)}
.live-q{font-size:17px;font-weight:800}
.live-n{font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:rgba(0,0,0,.45)}
.live-empty{background:var(--white);border:var(--border-thick);box-shadow:var(--shadow);
  padding:22px 24px;font-size:14px;font-weight:600;line-height:1.6}
.live-empty strong{display:block;font-size:17px;font-weight:900;text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:6px}
.live-empty p{margin-top:4px;color:rgba(0,0,0,.55);max-width:60ch}
.rprice .big.na{font-size:15px;font-family:var(--body);font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:rgba(0,0,0,.35)}
[data-stat]{font-variant-numeric:tabular-nums}

/* A partially-answered question. Styled like .live-empty rather than as an
   error: the results below are real, they just answer less than was asked.
   It sits above them because a caveat printed underneath is a caveat nobody
   reads. */
.live-partial{background:var(--white);border:var(--border-thick);box-shadow:var(--shadow);
  padding:14px 16px;margin-bottom:14px;border-left:6px solid var(--ink)}
.live-partial strong{display:block;font-size:15px;font-weight:900;text-transform:uppercase;
  letter-spacing:.02em}
.live-partial p{margin-top:4px;color:rgba(0,0,0,.55);max-width:60ch}