/* ===========================================================================
   easynquicktrafficschool.com - components. Phone first; tablet at 768px,
   desktop at 1024px. Read tokens.css for colours and their contrast.
   Pitfalls honoured: grid columns are minmax(0,1fr); text may break anywhere
   it must; no layout lives in inline styles; the login link sits OUTSIDE the
   collapsing menu so returning students reach it at every width.
   ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.6 var(--font-body); overflow-wrap: break-word; }
/* break-anywhere ONLY on long unbroken strings (email addresses); page-wide it split "QUICK3" into "QUIC / K3" */
a[href^="mailto:"] { overflow-wrap: anywhere; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; color: var(--ink); overflow-wrap: normal; }
h1 { font-size: var(--step-5); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: var(--step-4); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: var(--step-2); font-weight: 600; }
p  { margin: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-7); }
.band { background: var(--mist); }
.stack > * + * { margin-top: var(--s-3); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.eyebrow { display: inline-block; font: 700 var(--step--1)/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.lead { font-size: var(--step-1); color: var(--muted); }
.section-head { max-width: 46rem; margin-bottom: var(--s-5); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head > * + * { margin-top: var(--s-2); }

/* ---- buttons: red means "start / buy" and nothing else ------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .8rem 1.5rem;
       border-radius: var(--radius-sm); font: 700 var(--step-0)/1.2 var(--font-body); text-decoration: none; border: 0; cursor: pointer;
       background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-dk); transition: transform .12s, box-shadow .12s; }
.btn:hover { color: #fff; background: #C41623; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-dk); }
.btn-ghost { background: transparent; color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
.btn-ghost:hover { background: var(--teal); color: #fff; }
.btn-teal { background: var(--teal); box-shadow: 0 3px 0 var(--teal-dk); }
.btn-teal:hover { background: var(--teal-dk); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ---- price + coupon ----------------------------------------------------- */
.price { display: inline-flex; align-items: flex-start; font-family: var(--font-display); font-weight: 800; color: var(--ink); line-height: 1; }
.price-cur { font-size: .45em; margin-top: .18em; margin-right: .04em; }
.price-d { font-size: 1em; }
.price-c { font-size: .45em; margin-top: .18em; margin-left: .02em; }
/* THE coupon component: an amber "$3 OFF" stub, then one line of ordinary flowing text.
   The body is NOT a flex row (separate text pieces each wrapped on their own and split words),
   and the code itself never breaks. */
.coupon { display: flex; align-items: stretch; width: fit-content; max-width: 100%; border: 2px dashed #D99A12;
          border-radius: var(--radius-sm); background: var(--amber-soft); color: var(--ink); overflow: hidden; }
.coupon-off { display: flex; align-items: center; justify-content: center; padding: .55rem .8rem; background: var(--amber);
              font: 800 var(--step-0)/1.05 var(--font-display); text-align: center; white-space: nowrap; border-right: 2px dashed #D99A12; }
.coupon-body { display: block; padding: .55rem .9rem; font-size: var(--step--1); font-weight: 500; line-height: 1.45; align-self: center; }
.coupon-code { display: inline-block; white-space: nowrap; overflow-wrap: normal; font: 800 1.05em/1 var(--font-display);
               letter-spacing: .06em; background: #fff; border: 1.5px solid #D99A12; border-radius: 6px; padding: .18rem .45rem; margin: 0 .1em; }

/* ---- ticks -------------------------------------------------------------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tick { display: flex; gap: .6rem; align-items: flex-start; }
.tick svg { flex: 0 0 18px; margin-top: .22em; color: var(--green); }

/* ===================================================================== nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.2) blur(6px); }
.nav-inner { display: flex; align-items: center; gap: var(--s-3); min-height: var(--nav-h); }
.nav-brand { display: flex; align-items: center; flex: 0 0 auto; margin-right: auto; }   /* never shrinks: at 1024 the squeezed box scaled the logo artwork down to ~70px */
.nav-brand svg { display: block; height: 48px; width: auto; }
.nav-links { display: none; }
.nav-links a { color: var(--ink); font-weight: 500; text-decoration: none; padding: .5rem .2rem; white-space: nowrap; }
.nav-links a:hover { color: var(--teal); }
.nav-login { display: inline-flex; align-items: center; min-height: var(--tap); padding: .45rem .95rem; border-radius: var(--radius-sm);
             color: var(--teal); font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 2px var(--teal); white-space: nowrap; }
.nav-login:hover { background: var(--teal); color: #fff; }
.nav-cta { display: none; min-height: var(--tap); padding: .5rem 1.1rem; font-size: var(--step--1); white-space: nowrap; }
.nav-toggle { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-sm);
              border: 0; background: var(--mist); color: var(--ink); cursor: pointer; flex: 0 0 auto; }
.nav-toggle .icon-close { display: none; }
.nav[data-open="true"] .nav-toggle .icon-open { display: none; }
.nav[data-open="true"] .nav-toggle .icon-close { display: block; }
/* phone + tablet (below 1200): the open menu hangs BELOW the bar as a panel; it never grows the bar.
   1200 not 1024: six links + Start + Log in + the logo do not fit a 1024px bar. */
@media (max-width: 1199px) {
  .nav[data-open="true"] .nav-links { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: #fff;
       border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); padding: var(--s-2) var(--gutter) var(--s-4); }
  .nav[data-open="true"] .nav-links a { padding: .85rem .2rem; border-bottom: 1px solid var(--line); font-size: var(--step-1); }
}
@media (max-width: 400px) { .nav-brand svg { height: 40px; } .nav-login { padding-inline: .7rem; } }
/* smallest phones (320-374): logo + Log in + menu must fit without the logo shrinking (it may not squeeze; the audit checks) */
@media (max-width: 374px) { .nav-inner { gap: .5rem; } .nav-brand svg { height: 36px; } .nav-login { padding-inline: .6rem; font-size: .95rem; } }
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }
@media (min-width: 1200px) {
  .nav-links { display: flex; gap: var(--s-4); margin-right: var(--s-2); }
  .nav-toggle { display: none; }
  .nav-brand svg { height: 52px; }
}

/* ==================================================================== hero */
.hero { padding-block: var(--s-6) var(--s-7); background: linear-gradient(180deg, var(--mist) 0%, #fff 78%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.hero-copy > * + * { margin-top: var(--s-4); }
.hero h1 { color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero-claim { display: inline-flex; align-items: center; gap: .6rem; font: 600 var(--step-1)/1.3 var(--font-display); color: var(--teal-dk); }
.hero-claim svg { flex: 0 0 auto; }
.hero-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.hero-offer .price { font-size: 3.25rem; }
.hero-offer small { display: block; color: var(--muted); font-size: var(--step--1); }
.hero .ticks { grid-template-columns: minmax(0, 1fr); font-weight: 500; }
.hero-figure { justify-self: center; width: 100%; max-width: 420px; margin: 0; }
.hero-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); box-shadow: var(--shadow-2); }
@media (min-width: 640px) { .hero .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .hero { padding-block: var(--s-7); }
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); }
  .hero-figure { max-width: 400px; }
}

/* ================================================================== facts */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: calc(-1 * var(--s-5)); position: relative; }
/* figure ABOVE its label at every width: side by side, "TVS #E8320" squeezed its label to one word a line on phones */
.fact { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); box-shadow: var(--shadow-1);
        display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.fact-num { font: 800 var(--step-3)/1 var(--font-display); color: var(--teal); white-space: nowrap; }
.fact p { color: var(--muted); font-size: var(--step--1); }
.fact b { display: block; color: var(--ink); font-size: var(--step-0); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================================================================== steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); counter-reset: step; }
.step { position: relative; background: #fff; border-radius: var(--radius); padding: var(--s-5) var(--s-4) var(--s-4); border: 1px solid var(--line); }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-4);
                width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center;
                font: 800 var(--step-1)/1 var(--font-display); box-shadow: 0 0 0 5px var(--mist); }
.step h3 { margin-bottom: var(--s-1); }
.step p { color: var(--muted); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* 3 narrow columns at 768 read as 6-word lines */

/* =============================================================== features */
.features { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.feature { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.feature img { width: 72px; height: 72px; display: block; }
.feature h3 { font-size: var(--step-1); margin-bottom: .25rem; }
.feature p { color: var(--muted); }
@media (min-width: 640px)  { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================================================================ pricing */
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5) var(--s-4); box-shadow: var(--shadow-1); }
.card > * + * { margin-top: var(--s-3); }
.card-main { border: 2px solid var(--teal); box-shadow: var(--shadow-2); position: relative; }
.card-flag { position: absolute; top: -.9rem; left: var(--s-4); background: var(--teal); color: #fff; font: 700 var(--step--1)/1 var(--font-body);
             padding: .45rem .8rem; border-radius: 999px; }
.card-main .price { font-size: 3.5rem; }
.card .btn { width: 100%; }
.card-note { font-size: var(--step--1); color: var(--muted); }
.included h3 { font-size: var(--step-1); }
@media (min-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ============================================================ more courses */
.more-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.ref-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ref-card > div { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; }
.ref-card > div .btn { margin-top: auto; align-self: flex-start; }
.ref-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ref-card > div > * + * { margin-top: var(--s-2); }
.ref-tag { align-self: flex-start; display: inline-block; font: 700 .75rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dk);
           background: var(--teal-soft); padding: .35rem .55rem; border-radius: 6px; }
.ref-card p { color: var(--muted); }
@media (min-width: 768px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ========================================================== course panels */
.panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.panel { background: #fff; border-radius: var(--radius); padding: var(--s-5) var(--s-4); border-top: 5px solid var(--teal); box-shadow: var(--shadow-1); }
.panel > * + * { margin-top: var(--s-3); }
.panel p { color: var(--muted); }
@media (min-width: 900px) { .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===================================================================== faq */
.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: var(--s-2); }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-3) var(--s-4); min-height: var(--tap); display: flex; gap: var(--s-3);
               align-items: center; justify-content: space-between; font: 600 var(--step-0)/1.35 var(--font-display); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 12px; height: 12px; border-right: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal);
                      transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details[open] summary { color: var(--teal-dk); }
.faq .answer { padding: 0 var(--s-4) var(--s-4); color: var(--muted); }
.faq .answer > * + * { margin-top: var(--s-2); }

/* ================================================================= support */
.support { background: var(--teal); color: var(--on-dark); }
.support h2, .support h3 { color: #fff; }
.support .lead { color: var(--on-dark); }
.support .eyebrow { color: #FFE3A8; }   /* pale amber: 5.1:1 on teal (amber itself is 3.95, fails at eyebrow size) */
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.contact-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: start;
                background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius); padding: var(--s-4); }
.contact-card img { width: 72px; height: 72px; display: block; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.85); }
.contact-card dl { margin: var(--s-2) 0 0; display: grid; gap: .35rem; }
.contact-card dt { font-weight: 700; color: #fff; }
.contact-card dd { margin: 0 0 .35rem; }
.contact-card a { color: #fff; font-weight: 700; }
.contact-card a:hover { color: var(--amber-soft); }
.tel-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); padding: .5rem 1rem; border-radius: var(--radius-sm);
           background: #fff; color: var(--teal-dk) !important; text-decoration: none; }
@media (min-width: 768px) { .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* small phones: icon above the text, so the email and address get the full card width */
@media (max-width: 479px) { .contact-card { grid-template-columns: minmax(0, 1fr); } .contact-card img { width: 56px; height: 56px; } .contact-card a[href^="mailto:"] { font-size: .94em; } }

/* ================================================================== closing */
.closing { text-align: center; }
.closing .btn-row { justify-content: center; }
.closing > .wrap > * + * { margin-top: var(--s-4); }

/* ================================================================== footer */
.footer { background: #0B2A33; color: #CFE3E8; padding-block: var(--s-6) var(--s-5); font-size: var(--step--1); }
.footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.footer-brand svg { height: 44px; width: auto; display: block; }
.footer .counties { color: #CFE3E8; max-width: 60rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--s-5); padding-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } }

/* ============================================================ 404 + misc */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: var(--s-7); }
.notfound .btn-row { justify-content: center; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

.center-row { justify-content: center; margin-top: var(--s-5); }
.nowrap { white-space: nowrap; }