/* Airport Parking Discount Codes — stylesheet
   Direct translation of the supplied .dc.html design. Values unchanged. */

:root{
  --green:      oklch(30% 0.06 165);
  --coral:      oklch(65% 0.18 30);
  --coral-dk:   oklch(55% 0.14 30);
  --amber:      oklch(65% 0.18 70);
  --amber-tx:   oklch(45% 0.14 70);
  --blue-lbl:   oklch(55% 0.16 200);
  --verified:   oklch(50% 0.12 165);
  --ink:        oklch(18% 0.02 165);
  --t30:        oklch(30% 0.02 165);
  --t40:        oklch(40% 0.02 165);
  --t42:        oklch(42% 0.02 165);
  --t45:        oklch(45% 0.02 165);
  --t50:        oklch(50% 0.02 165);
  --s96:        oklch(96% 0.02 165);
  --s97:        oklch(97% 0.01 165);
  --l88:        oklch(88% 0.01 165);
  --l88b:       oklch(88% 0.02 165);
  --l90:        oklch(90% 0.01 165);
  --l94:        oklch(94% 0.01 165);
  --page:       oklch(93% 0.008 165);
  --pad:        clamp(20px,4vw,40px);
}

*{box-sizing:border-box}
body{margin:0;font-family:'Manrope',sans-serif;background:#fff}
body.tinted{background:var(--page)}
a{color:inherit;text-decoration:none}
.shell{font-family:'Manrope',sans-serif;background:#fff}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px}

/* ================= HEADER ================= */
.hdr{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding:18px var(--pad);background:var(--green);
}
.hdr__brand{display:flex;align-items:center;gap:10px}
.hdr__logo{display:block;height:32px;width:auto}
.hdr__nav{display:flex;gap:26px;flex-wrap:wrap;font:600 13px/1 'Manrope',sans-serif;color:#fff}
.hdr__nav a.is-active{color:var(--coral)}
.hdr__cta{
  background:var(--coral);color:#fff;padding:10px 20px;border-radius:100px;
  font:700 13px/1 'Manrope',sans-serif;
}
.navtoggle{display:none;background:none;border:1px solid oklch(45% 0.05 165);color:#fff;
  border-radius:8px;padding:9px 13px;font:600 13px/1 'Manrope',sans-serif;cursor:pointer}

/* ================= HOMEPAGE HERO ================= */
.hero{
  text-align:center;padding:clamp(40px,8vw,64px) 20px 56px;
  background:radial-gradient(circle at 50% 0%,var(--s96),#fff 65%);
}
.hero__eyebrow{
  font:700 13px/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);margin-bottom:16px;
}
.hero h1{font:800 clamp(32px,5vw,52px)/1.05 'Sora',sans-serif;color:var(--ink);margin:0 0 18px}
.hero__sub{
  font:500 17px/1.6 'Manrope',sans-serif;color:var(--t40);
  max-width:560px;margin:0 auto 32px;
}
.searchbar{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px;background:#fff;
  border:2px solid var(--green);border-radius:100px;padding:6px 6px 6px 22px;
  box-shadow:0 14px 30px -12px oklch(30% 0.06 165 / .35);
}
.searchbar select,.searchbar input{
  border:none;font:600 14px/1 'Manrope',sans-serif;color:var(--t40);background:transparent;
}
.searchbar__rule{width:1px;height:20px;background:var(--l88b)}
.searchbar button{
  background:var(--coral);color:#fff;border:none;padding:14px 26px;border-radius:100px;
  font:700 14px/1 'Manrope',sans-serif;cursor:pointer;
}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:36px;margin-top:36px}
.stats b{display:block;font:800 26px/1 'Sora',sans-serif;color:var(--green)}
.stats li:nth-child(2) b{color:var(--coral)}
.stats li:nth-child(3) b{color:var(--amber)}
.stats span{
  display:block;font:600 11px/1 'Manrope',sans-serif;color:var(--t45);
  text-transform:uppercase;letter-spacing:.04em;
}
.stats{list-style:none;padding:0}

/* ================= HOMEPAGE SECTIONS ================= */
.sec{padding:48px var(--pad)}
.sec--green{background:var(--green)}
.sec--tint{background:var(--s96)}
.sec--white{background:#fff}
.sec--center{text-align:center}
.sec h2{font:700 24px/1.2 'Sora',sans-serif;color:var(--ink);margin:0 0 22px;text-align:center}
.sec--green h2{color:#fff}
.sec__note{
  font:500 14px/1.5 'Manrope',sans-serif;color:var(--t45);margin:-14px 0 24px;text-align:center;
}

.grid{display:grid;gap:16px;list-style:none;padding:0;margin:0}
.grid--codes{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid--compare{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.grid--faq{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}

.codecard{
  background:#fff;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;
}
.codecard__brand{font:700 15px/1 'Sora',sans-serif;color:var(--ink)}
.codecard__type{font:600 12px/1 'Manrope',sans-serif;color:var(--t45)}
.codecard__off{font:800 24px/1 'Sora',sans-serif;color:var(--coral)}
.codecard button{
  text-align:center;background:var(--ink);color:#fff;padding:11px;border-radius:100px;
  font:700 13px/1 'Manrope',sans-serif;border:none;cursor:pointer;
}

.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none;padding:0;margin:0}
.pills--left{justify-content:flex-start}
.pill{
  display:inline-block;background:var(--s96);border:1px solid var(--l88b);border-radius:100px;
  padding:10px 20px;font:700 13px/1 'Manrope',sans-serif;color:var(--green);
}
.pill:hover{background:var(--coral);color:#fff;border-color:var(--coral)}

.step{background:#fff;border-radius:14px;padding:20px;text-align:center}
.step__n{
  width:40px;height:40px;border-radius:50%;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:800 16px/1 'Sora',sans-serif;margin:0 auto 12px;
}
.step__t{font:700 15px/1.3 'Sora',sans-serif;color:var(--ink);margin-bottom:6px}
.step__d{font:500 13px/1.5 'Manrope',sans-serif;color:var(--t45)}

.cmp{background:var(--s96);border-radius:12px;padding:16px;text-align:center}
.cmp__name{font:700 13px/1.3 'Manrope',sans-serif;color:var(--ink);margin-bottom:10px;min-height:32px}
.cmp__gate{font:600 13px/1 'Manrope',sans-serif;color:var(--t50);text-decoration:line-through}
.cmp__code{font:800 22px/1.4 'Sora',sans-serif;color:var(--coral)}
.cmp__save{font:700 12px/1 'Manrope',sans-serif;color:var(--green)}

.faqbox{background:#fff;border-radius:10px;padding:16px 18px}
.faqbox summary{font:700 14px/1.4 'Manrope',sans-serif;color:var(--ink);cursor:pointer}
.faqbox div{font:500 13px/1.6 'Manrope',sans-serif;color:var(--t45);margin-top:10px}

/* ================= INNER PAGE ================= */
.container{max-width:70%;margin:0 auto}

.crumb{padding:14px var(--pad) 0;font:600 12px/1 'Manrope',sans-serif;color:var(--t50)}
.crumb a:hover{color:var(--coral)}
.crumb .here{color:var(--ink)}

.phero{padding:clamp(28px,5vw,44px) var(--pad) 32px}
.phero__eyebrow{
  font:700 13px/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral-dk);margin-bottom:12px;
}
.phero h1{font:800 clamp(26px,4vw,42px)/1.15 'Sora',sans-serif;color:var(--ink);margin:0 0 18px;max-width:820px}
.phero__intro{font:500 15px/1.7 'Manrope',sans-serif;color:var(--t40);max-width:680px;margin:0 0 24px}

.codebox{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:var(--s97);
  border:1px solid var(--l88);border-radius:12px;padding:18px 22px;max-width:640px;margin-bottom:20px;
}
.codebox__lbl{
  font:700 11px/1 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-lbl);margin-bottom:6px;
}
.codebox__code{font:800 22px/1 'Sora',sans-serif;letter-spacing:.04em;color:var(--ink)}
.codebox__rule{width:1px;height:38px;background:var(--l88)}
.codebox__meta{font:500 13px/1.6 'Manrope',sans-serif;color:var(--t42)}
.codebox__meta b{color:var(--ink)}
.codebox button{
  margin-left:auto;background:var(--coral);color:#fff;padding:12px 22px;border-radius:100px;
  font:700 13px/1 'Manrope',sans-serif;white-space:nowrap;border:none;cursor:pointer;
}

.tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;list-style:none;padding:0}
.tag{
  background:var(--s96);border:1px solid var(--l88b);border-radius:100px;padding:8px 16px;
  font:600 13px/1 'Manrope',sans-serif;color:var(--green);
}

.jump{
  display:flex;gap:22px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--l90);
  font:700 12px/1 'Manrope',sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--green);
}
.jump a:hover{color:var(--coral)}

/* deals list */
.deals{padding:8px var(--pad) 40px;display:flex;flex-direction:column;gap:14px}
.deal{
  display:grid;grid-template-columns:96px 1fr 220px;gap:20px;align-items:center;
  background:var(--s97);border:1px solid var(--l90);border-radius:14px;padding:18px;
}
.deal__badge{
  width:88px;height:88px;border-radius:12px;background:var(--green);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.deal__badge b{font:800 22px/1 'Sora',sans-serif}
.deal__badge span{font:700 10px/1 'Manrope',sans-serif;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}
.deal__head{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.deal__title{font:700 16px/1.3 'Sora',sans-serif;color:var(--ink)}
.deal__tag{
  background:oklch(65% 0.18 70 / .18);color:var(--amber-tx);
  font:700 10px/1 'Manrope',sans-serif;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;
}
.deal ul{margin:6px 0 0;padding-left:18px;font:500 13px/1.6 'Manrope',sans-serif;color:var(--t42)}
.deal__verified{font:700 11px/1 'Manrope',sans-serif;color:var(--verified);margin-top:10px}
.deal button{
  width:100%;text-align:center;background:var(--coral);color:#fff;padding:13px 10px;
  border-radius:100px;font:700 13px/1.3 'Manrope',sans-serif;border:none;cursor:pointer;
}

/* summary table */
.block{padding:8px var(--pad) 44px}
.block h2{font:700 20px/1.2 'Sora',sans-serif;color:var(--ink);margin:0 0 16px}
.sumtable{border-radius:10px;overflow:hidden;min-width:0}
.sumtable__head,.sumtable__row{display:grid;grid-template-columns:110px 1fr 130px}
.sumtable__head{background:var(--green)}
.sumtable__head div{padding:12px 16px;font:700 12px/1 'Manrope',sans-serif;color:#fff}
.sumtable__head div:last-child{text-align:right}
.sumtable__row{border-bottom:1px solid var(--l90);background:#fff;align-items:center}
.sumtable__row .s{padding:12px 16px;font:800 14px/1 'Sora',sans-serif;color:var(--coral)}
.sumtable__row .d{padding:12px 16px;font:500 13px/1.4 'Manrope',sans-serif;color:var(--t30)}
.sumtable__row .e{padding:12px 16px;text-align:right;font:500 13px/1 'Manrope',sans-serif;color:var(--t50)}

/* options by terminal */
.optsec{padding:44px var(--pad);background:var(--s96)}
.optsec h2{font:700 22px/1.2 'Sora',sans-serif;color:var(--ink);margin:0 0 8px}
.optsec p{font:500 13px/1.6 'Manrope',sans-serif;color:var(--t42);margin:0 0 24px;max-width:700px}
.opttable{border-radius:10px;overflow:hidden;background:#fff}
.opttable__head,.opttable__row{display:grid;grid-template-columns:1.6fr 1fr 0.8fr 1.2fr 150px}
.opttable__head div{
  padding:10px 14px;font:700 11px/1 'Manrope',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--t50);border-bottom:1px solid var(--l90);
}
.opttable__head div:last-child{text-align:right}
.opttable__row>*{border-bottom:1px solid var(--l94)}
.opttable__row a{padding:12px 14px;font:600 13px/1.3 'Manrope',sans-serif;color:var(--green);display:block}
.opttable__row a:hover{color:var(--coral);text-decoration:underline}
.opttable__row div{padding:12px 14px;font:500 13px/1 'Manrope',sans-serif;color:var(--t45)}
.opttable__row .p{text-align:right;font:700 13px/1 'Sora',sans-serif;color:var(--coral)}

/* why us */
.whysec{padding:44px var(--pad);background:#fff}
.whysec h2{font:700 20px/1.2 'Sora',sans-serif;color:var(--ink);margin:0 0 20px}
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;list-style:none;padding:0;margin:0}
.why{background:var(--s96);border-radius:14px;padding:18px}
.why__i{
  width:36px;height:36px;border-radius:50%;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:800 16px/1 'Sora',sans-serif;margin-bottom:10px;
}
.why__t{font:700 14px/1.3 'Sora',sans-serif;color:var(--ink);margin-bottom:6px}
.why__d{font:500 12px/1.5 'Manrope',sans-serif;color:var(--t45)}

/* inner faq */
.faqsec{padding:44px var(--pad);background:var(--s96)}
.faqsec h2{font:700 20px/1.2 'Sora',sans-serif;color:var(--ink);margin:0 0 20px}
.faqlist{display:flex;flex-direction:column}
.faqrow{padding:16px 0;border-bottom:1px solid var(--l88)}
.faqrow__q{font:700 14px/1.4 'Manrope',sans-serif;color:var(--ink);margin-bottom:6px}
.faqrow__a{font:500 13px/1.6 'Manrope',sans-serif;color:var(--t45)}

.relsec{padding:44px var(--pad);background:#fff}
.relsec h2{font:700 18px/1.2 'Sora',sans-serif;color:var(--ink);margin:0 0 16px}
.relsec .pill{padding:9px 18px}

/* ================= FOOTER ================= */
.ftr{background:var(--ink);color:oklch(85% 0.01 165);padding:40px var(--pad) 24px}
.ftr__brand{display:block;margin-bottom:28px}
.ftr__logo{display:block;height:30px;width:auto}
.ftr__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-bottom:24px}
.ftr__h{font:700 14px/1 'Sora',sans-serif;color:#fff;margin-bottom:12px}
.ftr__links{display:flex;flex-direction:column;gap:8px;font:500 13px/1 'Manrope',sans-serif}
.ftr__links a:hover{color:var(--coral)}
/* The disclosure runs the full width under the columns, not as a column. */
.ftr__disc{
  font:500 12px/1.7 'Manrope',sans-serif;color:oklch(65% 0.01 165);
  margin:0 0 20px;max-width:none;
}
.ftr__base{
  border-top:1px solid oklch(28% 0.01 165);padding-top:16px;
  font:500 12px/1 'Manrope',sans-serif;color:oklch(60% 0.01 165);
}
@media (max-width:1000px){ .ftr__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .ftr__grid{grid-template-columns:repeat(2,1fr);gap:20px} }
@media (max-width:420px){ .ftr__grid{grid-template-columns:1fr} }

/* ================= MODAL ================= */
.modal[hidden]{display:none}
.modal{
  position:fixed;inset:0;background:oklch(15% 0.01 165 / .6);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal__panel{
  background:#fff;border-radius:16px;max-width:520px;width:100%;padding:28px;
  position:relative;max-height:90vh;overflow-y:auto;
}
.modal__x{
  position:absolute;top:14px;right:16px;background:none;border:none;
  font:700 22px/1 'Sora',sans-serif;color:var(--t50);cursor:pointer;
}
.modal__lbl{
  font:700 11px/1 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-lbl);margin-bottom:8px;
}
.modal h3{font:800 22px/1.2 'Sora',sans-serif;color:var(--ink);margin:0 0 18px}
.modal form{display:flex;flex-direction:column;gap:14px}
.modal label{font:600 12px/1 'Manrope',sans-serif;color:var(--t42)}
.modal select,.modal input{
  width:100%;margin-top:6px;padding:11px;border-radius:8px;border:1px solid var(--l88);
  font:500 14px/1 'Manrope',sans-serif;box-sizing:border-box;
}
.modal__row{display:flex;gap:12px}
.modal__row label{flex:1}
.modal input[readonly]{
  font:800 14px/1 'Sora',sans-serif;letter-spacing:.05em;
  background:var(--s96);color:var(--ink);
}
.modal button[type=submit]{
  background:var(--coral);color:#fff;border:none;padding:14px;border-radius:100px;
  font:700 14px/1 'Manrope',sans-serif;cursor:pointer;margin-top:6px;
}

/* ================= FORM FIELDS ================= */
.fld{display:block;min-width:0}
.fld__l{
  display:block;font:600 12px/1 'Manrope',sans-serif;color:var(--t42);margin-bottom:6px;
}
.modal__row .fld{flex:1}

/* Native selects keep the browser arrow at wildly different sizes, so the
   control is wrapped and given one of our own. */
.sel{position:relative}
.sel::after{
  content:"";position:absolute;right:13px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--t50);border-bottom:2px solid var(--t50);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.sel select{
  width:100%;padding:12px 34px 12px 13px;border-radius:10px;border:1px solid var(--l88);
  font:600 14px/1 'Manrope',sans-serif;color:var(--ink);background:#fff;
  appearance:none;-webkit-appearance:none;box-sizing:border-box;cursor:pointer;
}
.sel select:focus-visible,.fld__code:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.fld__code{
  width:100%;padding:12px 13px;border-radius:10px;border:1px solid var(--l88);
  font:800 14px/1 'Sora',sans-serif;letter-spacing:.05em;
  background:var(--s96);color:var(--ink);box-sizing:border-box;
}

/* ================= DATE PICKER ================= */
.dpick{position:relative}
.dpick__btn{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:12px 13px;border-radius:10px;border:1px solid var(--l88);background:#fff;
  font:600 14px/1 'Manrope',sans-serif;color:var(--t50);cursor:pointer;text-align:left;
}
.dpick__btn:hover{border-color:var(--green)}
.dpick__btn:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.dpick.is-set .dpick__btn{color:var(--ink)}
.dpick__ico{
  width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;
}
.dpick__txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dpick__pop[hidden]{display:none}
/* Fixed rather than absolute, and placed by script. The modal panel scrolls
   its own overflow, which would otherwise clip the calendar the moment it
   extended past the bottom of the panel. */
.dpick__pop{
  position:fixed;z-index:130;top:0;left:0;width:278px;max-width:calc(100vw - 20px);
  background:#fff;border:1px solid var(--l90);border-radius:14px;padding:14px;
  box-shadow:0 22px 44px -14px oklch(20% 0.04 165 / .38);
}
.dpick__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dpick__mon{font:700 14px/1 'Sora',sans-serif;color:var(--ink)}
.dpick__nav{
  width:30px;height:30px;border:1px solid var(--l90);background:#fff;border-radius:9px;
  font:700 17px/1 'Manrope',sans-serif;color:var(--t40);cursor:pointer;
}
.dpick__nav:hover:not(:disabled){background:var(--s96);border-color:var(--green)}
.dpick__nav:disabled{opacity:.3;cursor:default}
.dpick__dow,.dpick__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dpick__dow{margin-bottom:4px}
.dpick__dow span{
  text-align:center;font:700 10px/1 'Manrope',sans-serif;color:var(--t50);
  letter-spacing:.05em;padding:4px 0;
}
.dpick__pad{display:block}
.dpick__day{
  aspect-ratio:1;border:none;background:none;border-radius:8px;
  font:600 13px/1 'Manrope',sans-serif;color:var(--t30);cursor:pointer;padding:0;
}
.dpick__day:hover:not(:disabled):not(.is-sel){background:var(--s96)}
.dpick__day.is-off{color:var(--l88);cursor:default}
.dpick__day.is-today{box-shadow:inset 0 0 0 1px var(--l88b)}
.dpick__day.is-mid{background:var(--s96);border-radius:0}
.dpick__day.is-sel,.dpick__day.is-edge{background:var(--green);color:#fff;border-radius:8px}
.dpick__nights{
  margin:-4px 0 0;font:600 12px/1 'Manrope',sans-serif;color:var(--verified);
}
.dpick__nights[hidden]{display:none}

/* In the hero search bar the control sits inline and unboxed. The colour has
   to be restated: `.searchbar button` paints every button in the bar white for
   the coral call to action, and it outranks .dpick__btn on specificity. */
.dpick--bar .dpick__btn{
  border:none;padding:0 4px;background:transparent;width:auto;
  color:var(--t40);font:600 14px/1 'Manrope',sans-serif;
}
.dpick--bar.is-set .dpick__btn{color:var(--ink)}
.dpick--bar .dpick__btn:hover{color:var(--green)}

/* A date and a time side by side leaves the date too narrow to print
   "Sun 13 Sep 2026" on a phone, so the date takes the full row and the time
   sits under it. */
@media (max-width:560px){
  .modal__row{flex-wrap:wrap}
  .modal__row .fld:first-child{flex:1 1 100%}
}

/* ================= RESPONSIVE ================= */
@media (max-width:1100px){ .container{max-width:88%} }
@media (max-width:860px){
  .container{max-width:100%}
  .navtoggle{display:block}
  .hdr__nav{display:none;width:100%;flex-direction:column;gap:0}
  .hdr__nav.open{display:flex}
  .hdr__nav a{padding:11px 0;border-top:1px solid oklch(38% 0.05 165)}
  .deal{grid-template-columns:72px 1fr;gap:14px}
  .deal>div:last-child{grid-column:1 / -1}
  .deal__badge{width:72px;height:72px}
  .sumtable__head,.sumtable__row{grid-template-columns:88px 1fr 96px}
  .opttable__head{display:none}
  .opttable__row{grid-template-columns:1fr 1fr}
  .opttable__row a{grid-column:1 / -1;font-size:14px}
  .opttable__row .p{text-align:left}
  .codebox button{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= CAR PARK BRAND PAGE ================= */
.deals h2{font:700 20px/1.2 'Sora',sans-serif;color:var(--ink);margin:0 0 4px}
.deals>p{font:500 13px/1.6 'Manrope',sans-serif;color:var(--t42);margin:0 0 12px}
.deal__sub{font:500 13px/1.6 'Manrope',sans-serif;color:var(--t42)}
.deal--plain .deal__title{margin-bottom:6px}

.covtable{border-radius:10px;overflow:hidden;background:var(--s96)}
.covtable__head,.covtable__row{display:grid;grid-template-columns:1.6fr 1fr 1fr 150px}
.covtable__head div{
  padding:10px 14px;font:700 11px/1 'Manrope',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--t50);border-bottom:1px solid var(--l88);
}
.covtable__head div:last-child{text-align:right}
.covtable__row{align-items:center;background:#fff}
.covtable__row>*{border-bottom:1px solid var(--l94)}
.covtable__row .a{padding:12px 14px;font:600 13px/1.3 'Manrope',sans-serif;color:var(--ink)}
.covtable__row .g{padding:12px 14px;font:500 13px/1 'Manrope',sans-serif;color:var(--t50);text-decoration:line-through}
.covtable__row .t{padding:12px 14px;font:500 13px/1 'Manrope',sans-serif;color:var(--t45)}
.covtable__row .p{padding:12px 14px;text-align:right;font:700 13px/1 'Sora',sans-serif;color:var(--coral)}

.aboutsec{padding:44px var(--pad);background:var(--s96)}
.aboutsec h2{font:700 22px/1.2 'Sora',sans-serif;color:var(--ink);margin:0 0 16px}
.aboutgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start}
.aboutgrid>p{font:500 14px/1.7 'Manrope',sans-serif;color:var(--t40);margin:0}
.spec{background:#fff;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px}
.spec__row{display:flex;justify-content:space-between;gap:12px}
.spec__row:not(:last-child){border-bottom:1px solid var(--l90);padding-bottom:10px}
.spec__row span:first-child{font:500 13px/1 'Manrope',sans-serif;color:var(--t42)}
.spec__row span:last-child{font:700 14px/1 'Sora',sans-serif;color:var(--ink)}
.spec__row--hi span:last-child{color:var(--coral)}

@media (max-width:860px){
  .aboutgrid{grid-template-columns:1fr;gap:20px}
  .covtable__head{display:none}
  .covtable__row{grid-template-columns:1fr 1fr}
  .covtable__row .a{grid-column:1 / -1;font-size:14px}
  .covtable__row .p{text-align:left}
}

/* =========================================================================
   PAGE MEASURE — added Sept 2026.
   Full-bleed backgrounds, content constrained to the same 70% column the
   inner pages already use via .container, so header, footer, homepage and
   article pages all align on one vertical measure.
   Percentage padding resolves against the element's own width, so 15% each
   side leaves exactly 70%. No markup change, no existing rule modified.
   ========================================================================= */

.hdr,
.ftr,
.hero,
.sec,
.artsec{
  padding-left:max(var(--pad), 15%);
  padding-right:max(var(--pad), 15%);
}

@media (max-width:1100px){
  .hdr,.ftr,.hero,.sec,.artsec{
    padding-left:max(var(--pad), 6%);
    padding-right:max(var(--pad), 6%);
  }
}
@media (max-width:860px){
  .hdr,.ftr,.hero,.sec,.artsec{
    padding-left:var(--pad);
    padding-right:var(--pad);
  }
}

/* very wide screens: stop the column growing without limit */
@media (min-width:1800px){
  .container{max-width:1260px}
  .hdr,.ftr,.hero,.sec,.artsec{
    padding-left:calc((100% - 1260px) / 2);
    padding-right:calc((100% - 1260px) / 2);
  }
}

/* ---- CODE CARD GRID ----------------------------------------------------
   Six cards in a 70% column resolved to 4-then-2 and squeezed the CTA onto
   two lines. Three across gives a clean 3x2 and a single-line button.       */
@media (min-width:861px){
  .grid--codes{grid-template-columns:repeat(3,1fr)}
}
.codecard button{white-space:nowrap}

/* =========================================================================
   EDITORIAL CONTENT — added Sept 2026.
   Styles for the semantic-SEO body blocks every page's artsec() helper
   wraps its new copy in. This block was written for the pre-build design
   pass but never made it into this file, so every artsec section on all
   68 pages was rendering as unstyled markup. Extends the stylesheet with
   editorial content components; nothing existing is touched.
   ========================================================================= */

.artsec{padding-top:8px;padding-bottom:8px;background:#fff}
.artsec--tint{background:var(--s96)}
.artsec__inner{
  max-width:860px;margin:0 auto;
  display:flex;flex-direction:column;gap:0;
}

.artsec__inner h2{
  font:700 22px/1.25 'Sora',sans-serif;color:var(--ink);margin:0 0 14px;
}
.artsec__inner h2:not(:first-child){
  margin-top:34px;padding-top:30px;border-top:1px solid var(--l90);
}
.artsec__inner h3{font:700 16px/1.3 'Sora',sans-serif;color:var(--ink);margin:22px 0 10px}
.artsec__inner h3:first-child{margin-top:0}

.artsec__inner p{font:500 15px/1.7 'Manrope',sans-serif;color:var(--t40);margin:0 0 14px}
.artsec__inner p:last-child{margin-bottom:0}
.artsec__inner ul:not(.oplist):not(.grid):not(.pills),
.artsec__inner ol{
  font:500 15px/1.7 'Manrope',sans-serif;color:var(--t40);
  margin:0 0 14px;padding-left:22px;
}
.artsec__inner ul:not(.oplist):not(.grid):not(.pills) li,
.artsec__inner ol li{margin-bottom:6px}
.artsec__inner a{color:var(--green);text-decoration:underline;text-decoration-color:var(--l88b);text-underline-offset:2px}
.artsec__inner a:hover{text-decoration-color:var(--green)}
.artsec__inner strong{color:var(--ink)}
.artsec__inner>*+*{margin-top:18px}
.artsec__inner h2:not(:first-child)+*{margin-top:0}
.artsec__inner h3+*{margin-top:0}

.lead{
  font:600 17px/1.65 'Manrope',sans-serif !important;color:var(--t30) !important;
}

.codechip{
  display:inline-block;background:var(--s96);border:1px dashed var(--green);
  color:var(--green);font:700 12px/1 'Manrope',sans-serif;letter-spacing:.03em;
  padding:3px 8px;border-radius:6px;
}

.callout{
  background:var(--s96);border-left:4px solid var(--green);border-radius:10px;
  padding:18px 22px;display:flex;flex-direction:column;gap:6px;
}
.callout__k{
  font:700 11px/1 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);
}
.callout p{margin:0 !important;font:600 15px/1.6 'Manrope',sans-serif;color:var(--ink)}
.callout.verdict{border-left-color:var(--coral);background:oklch(65% 0.18 30 / .08)}
.callout.verdict .callout__k{color:var(--coral-dk)}

.dtwrap{overflow-x:auto;border-radius:12px;border:1px solid var(--l90)}
.dtable{width:100%;border-collapse:collapse;background:#fff}
.dtable caption{
  text-align:left;font:700 12px/1 'Manrope',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--t50);padding:14px 16px;background:var(--s97);
  border-bottom:1px solid var(--l90);
}
.dtable th{
  text-align:left;font:700 11px/1 'Manrope',sans-serif;letter-spacing:.03em;
  text-transform:uppercase;color:var(--t50);padding:10px 16px;
  border-bottom:1px solid var(--l88);white-space:nowrap;
}
.dtable td{
  padding:12px 16px;font:600 13px/1.4 'Manrope',sans-serif;color:var(--t40);
  border-bottom:1px solid var(--l94);
}
.dtable tr:last-child td{border-bottom:none}
.dtable .was{color:var(--t50);text-decoration:line-through;font-weight:500}
.dtable .num{color:var(--coral-dk);font:700 13px/1 'Sora',sans-serif}
.dtable .yes{color:var(--verified);font-weight:700}
.dtable .no{color:var(--t50)}

.oplist{
  list-style:none;margin:0;padding:0;
  border-radius:12px;border:1px solid var(--l90);overflow:hidden;
}
.oplist li{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 18px;background:#fff;border-bottom:1px solid var(--l94);
}
.oplist li:last-child{border-bottom:none}
.oplist li:nth-child(even){background:var(--s97)}
.oplist li a{font:700 14px/1.3 'Sora',sans-serif;color:var(--ink) !important;text-decoration:none}
.oplist li span{font:600 13px/1 'Manrope',sans-serif;color:var(--t50);white-space:nowrap}

.vline{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font:600 12px/1 'Manrope',sans-serif;color:var(--t50);
  padding-top:2px;
}
.vline a{color:var(--green);text-decoration:underline}
.vline__dot{width:3px;height:3px;border-radius:50%;background:var(--l88b);flex:0 0 auto}

@media (max-width:860px){
  .oplist li{flex-direction:column;align-items:flex-start;gap:4px}
  .artsec__inner h2{font-size:20px}
}

/* =========================================================================
   PROMO CODES — added Sept 2026 with the live code set.
   The badge carries "up to" because these codes vary by car park and date,
   and each deal now names the code it uses.
   ========================================================================= */
.deal__badge i{
  font:700 9px/1 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  font-style:normal;opacity:.75;margin-bottom:3px;
}
.deal__code{
  margin-top:8px;font:600 12px/1.5 'Manrope',sans-serif;color:var(--t45);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.deal__code .codechip{font-size:11px;padding:2px 7px}
.codecard__code{
  font:600 12px/1 'Manrope',sans-serif;color:var(--t45);
  display:flex;align-items:center;gap:6px;margin-top:-4px;
}
.codecard__code .codechip{font-size:11px;padding:2px 7px}
.hero__sub .codechip{font-size:14px;padding:2px 9px;vertical-align:baseline}

/* =========================================================================
   IMAGE GRID — added Sept 2026 for the card artwork carried over from the
   old site. Every image is 350x210, so the cards are given that aspect
   ratio and the intrinsic width/height are set on the tag to stop the page
   reflowing as they load.
   ========================================================================= */
.imggrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:0;padding:0;list-style:none;
}
.imgcard{
  margin:0;background:#fff;border:1px solid var(--l90);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
}
.imgcard img{
  display:block;width:100%;height:auto;aspect-ratio:350/210;object-fit:cover;
  background:var(--s97);
}
.imgcard figcaption{
  padding:10px 12px;border-top:1px solid var(--l94);
  font:600 12px/1.4 'Manrope',sans-serif;color:var(--t45);
}
.imgnote{
  font:500 12px/1.6 'Manrope',sans-serif;color:var(--t50);margin:10px 0 0;
}

@media (max-width:1100px){ .imggrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .imggrid{grid-template-columns:1fr;gap:12px}
  .imgcard figcaption{font-size:12px}
}