/* ============================================================================
   teendrivingonline.com — "KEYS AT SIXTEEN"
   ----------------------------------------------------------------------------
   Palette extracted from the site's own legacy stylesheet (css/style.css):
     #34bbf4 sky · #dd5340 coral · #2d7ecc blue · #17b198 green · #1c1306 ink

   Colours are assigned ROLES. One colour = one job.
     structure  ink #10243a      nav, headings, grounds
     action     coral #d44a36    every button and CTA, nothing else
     money      green #0f8f7b    prices and savings ONLY
     accent     sky #34bbf4      steps, rules, licence flags, tints

   Measured contrast (small text on its ground):
     ink #10243a on #ffffff ............ 14.6:1  AAA
     body #33485a on #ffffff ........... 8.1:1   AAA
     muted #5b7080 on #ffffff .......... 5.1:1   AA
     money #0f8f7b on #ffffff .......... 3.4:1   large/bold only (prices are 32px+)
     white on action #d44a36 ........... 4.6:1   AA
     white on ink #10243a .............. 14.6:1  AAA
     #9fd8f5 on ink #10243a ............ 9.8:1   AAA

   Mobile-first: base rules are the phone. Media queries only add.
   ========================================================================= */

:root{
  /* structure */
  --ink:#10243a;        --ink-2:#1d3c52;
  --body:#33485a;       --muted:#5b7080;
  /* action (text, links, accents on white) */
  --action:#d44a36;     --action-lt:#e9664f;   --action-dk:#ab3626;
  /* action BUTTON face. Kept separate from --action so the CTA can run hot
     without dragging link text with it. Saturation does the brightening here,
     not lightness: the glyph band stays at 3.6:1 on white, matching the old
     face, while hue moves 10deg -> 21deg and saturation 65% -> 88%. */
  --btn-hi:#f87036;     --btn-lo:#d34e06;      --btn-edge:#a93a00;
  /* money */
  --money:#0f8f7b;      --money-lt:#17b198;
  /* accent */
  --sky:#34bbf4;        --sky-dk:#1d84c4;      --sky-lt:#e7f6fe;
  --blue:#2d7ecc;
  /* grounds */
  --paper:#ffffff;      --tint:#f2fbfe;        --tint-2:#eef4f8;
  --line:#dfe8ef;       --line-2:#c9e3f2;

  --wrap:1080px;
  --r:12px;             --r-lg:20px;
  --shadow-1:0 1px 2px rgba(16,36,58,.06);
  --shadow-2:0 3px 8px rgba(16,36,58,.09), 0 24px 48px -28px rgba(16,36,58,.45);

  --f-head:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font:400 16px/1.62 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);letter-spacing:-.02em;line-height:1.12;margin:0 0 .5em}
h1{font-weight:900;font-size:clamp(28px,7vw,46px)}
h2{font-weight:800;font-size:clamp(23px,5vw,31px)}
h3{font-weight:800;font-size:clamp(19px,4vw,24px)}
h4{font-weight:800;font-size:17px}
p{margin:0 0 1.05em}
a{color:var(--sky-dk)}
a:hover{color:var(--action)}
strong,b{font-weight:700;color:var(--ink)}
hr{border:0;height:1px;background:var(--line);margin:34px 0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
@media(min-width:760px){.wrap{padding:0 28px}}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:100;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--sky-dk);outline-offset:2px}

/* ---------------------------------------------------------------- buttons
   Pressable: gradient face, darker base edge, inner highlight, travelling
   arrow, pressed state, reduced-motion opt-out.                            */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;cursor:pointer;text-decoration:none;text-align:center;
  font-family:var(--f-body);font-weight:800;font-size:16px;line-height:1.25;
  padding:15px 26px;border-radius:var(--r);flex-wrap:nowrap;
  transition:transform .16s ease,box-shadow .16s ease;
}
.btn .arw{flex:0 0 auto;transition:transform .18s ease}
.btn:hover .arw{transform:translateX(4px)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn-full{display:flex;width:100%}

.btn-action{
  background:linear-gradient(180deg,var(--btn-hi) 0%,var(--btn-lo) 100%);color:#fff;
  box-shadow:0 2px 0 var(--btn-edge),0 8px 18px -8px rgba(169,58,0,.7),inset 0 1px 0 rgba(255,255,255,.38);
}
.btn-action:hover{color:#fff;box-shadow:0 2px 0 var(--btn-edge),0 14px 26px -10px rgba(169,58,0,.85),inset 0 1px 0 rgba(255,255,255,.38)}
/* The 2px --line-2 outline read as washed-out against white. A darker ink-tinted
   edge gives the secondary button a real presence without competing with the
   coral primary; the hover fills with sky-lt so it feels alive when touched. */
.btn-ghost{background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 2px rgba(16,36,58,.17),0 1px 2px rgba(16,36,58,.07)}
.btn-ghost:hover{color:var(--ink);background:var(--sky-lt);
  box-shadow:inset 0 0 0 2px var(--blue),0 4px 12px -4px rgba(45,126,204,.35)}
.btn-dark{background:linear-gradient(180deg,#22394d,#12222f);color:#fff;box-shadow:0 2px 0 #060f16,inset 0 1px 0 rgba(255,255,255,.18)}
.btn-dark:hover{color:#fff}
.btn-sm{padding:11px 18px;font-size:14.5px}

/* ---------------------------------------------------------------- money
   The price is the product: tabular figures, superscript currency.         */
.tag{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-family:var(--f-head);font-weight:900;color:var(--money);letter-spacing:-.03em}
.tag .cur{font-size:.5em;vertical-align:.62em;font-weight:800;margin-right:1px}
.tag .cts{font-size:.5em;vertical-align:.62em;font-weight:800}
.price{font-size:46px;line-height:.94;display:inline-block}
.price-sm{font-size:30px;line-height:1;display:inline-block}
.pricechip{display:inline-flex;align-items:baseline;background:var(--ink);color:#fff;
  font-family:var(--f-head);font-weight:900;font-size:26px;letter-spacing:-.03em;
  padding:8px 16px;border-radius:var(--r);margin-bottom:14px}
.pricechip .cur,.pricechip .cts{font-size:.55em;vertical-align:.55em;font-weight:800}
/* Money lockup. A naked navy chip floating above a heading read as a label, not
   as a price. This puts the figure in the same money green as the hero card, so
   both prices on the site read as one system, and sits it against the button
   that acts on it rather than three paragraphs away from it. */
.pricelock{display:inline-flex;align-items:center;gap:14px;background:var(--paper);
  padding:11px 20px 11px 18px;border-radius:var(--r);margin:0 14px 18px 0;
  vertical-align:middle;box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-1)}
.pricelock + .btn{vertical-align:middle;margin-bottom:18px}
.pricelock-lab{margin:0;max-width:9ch;font-size:13.5px;font-weight:700;
  line-height:1.2;color:var(--muted)}

/* ---------------------------------------------------------------- badges
   ONE badge system: ring + tick, one size, recoloured per surface.         */
.tick{width:21px;height:21px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px currentColor;font-size:11px;font-weight:900;margin-top:3px;
  color:var(--money-lt)}
.tick::before{content:"\2713"}
.ticks{list-style:none;margin:0 0 1.2em;padding:0}
.ticks li{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px}
.ticks.on-ink .tick{color:var(--sky)}
.ticks.on-ink li{color:#cfdce5}

/* ---------------------------------------------------------------- strip */
.strip{background:var(--ink);color:#fff;font-size:12.5px;font-weight:700}
.strip-in{max-width:var(--wrap);margin:0 auto;padding:8px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.strip p{margin:0}
.strip-lic{color:#9fd8f5}
.strip-lic b{color:#fff}
.strip-contact{display:flex;gap:16px;align-items:center}
.strip a{color:#fff;text-decoration:none}
.strip a:hover{color:#9fd8f5}
.strip-login{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);padding:3px 11px;border-radius:99px}
@media(min-width:760px){.strip-in{padding:9px 28px}}

/* ---------------------------------------------------------------- nav */
.nav{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:block;flex-shrink:0}
.brand img{height:38px;width:auto}

.nav-toggle{display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  font-family:var(--f-body);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);padding:8px 4px}
.nav-toggle-bars{width:24px;height:16px;display:flex;flex-direction:column;justify-content:space-between}
.nav-toggle-bars i{display:block;height:3px;border-radius:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-menu{display:none;width:100%;order:3}
.nav-menu.open{display:block}
.nav-menu ul{list-style:none;margin:0 0 12px;padding:8px 0 0;border-top:1px solid var(--line)}
.nav-menu li a{display:block;padding:13px 2px;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:16px;border-bottom:1px solid var(--line)}
.nav-menu li a:hover,.nav-menu li a[aria-current="page"]{color:var(--sky-dk)}
.nav-cta{margin-bottom:12px}

@media(min-width:1000px){
  .nav-in{padding:12px 28px;flex-wrap:nowrap}
  .brand img{height:42px}
  .nav-toggle{display:none}
  .nav-menu{display:flex;align-items:center;gap:22px;width:auto;order:0;flex:1;justify-content:flex-end}
  .nav-menu ul{display:flex;gap:20px;margin:0;padding:0;border:0}
  .nav-menu li a{padding:6px 0;border:0;font-size:15px}
  .nav-menu li a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--sky)}
  .nav-cta{margin:0;padding:11px 18px;font-size:14.5px;white-space:nowrap}
}

/* ---------------------------------------------------------------- hero
   ONE composition: field + headline + a card that welds photo to price.    */
.hero{
  background:
    radial-gradient(900px 380px at 82% 6%,rgba(255,255,255,.85),rgba(255,255,255,0) 62%),
    linear-gradient(168deg,#e7f6fe 0%,#cfeefc 54%,#bfe8fb 100%);
  border-bottom:1px solid #a9dcf3;
  padding:24px 0 30px;
}
.hero-in{display:grid;gap:22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--paper);color:#0d5b86;
  font-weight:800;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 14px;border-radius:99px;margin-bottom:14px;
  box-shadow:0 1px 0 rgba(16,36,58,.06),inset 0 0 0 1px #b6e4fa}
.hero h1{margin-bottom:12px}
.hero h1 .hl{color:var(--sky-dk)}
.hero-sub{font-size:16.5px;color:#254257;margin-bottom:18px;max-width:46ch}
.hero-acts{display:flex;flex-direction:column;gap:11px}
.hero-under{margin-top:15px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:#3f5c72}
.hero-under b{color:var(--ink)}

.offer{background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2)}
/* Full-frame sources, cropped here — never server-side pre-crops, which cut
   faces on the earlier builds. Faces sit above centre, so bias the crop up. */
/* 3:2, not 16:10. The card photo is shot portrait; at 16:10 the only crop that
   kept headroom above the subject's head pushed the laptop out of frame, and the
   laptop is the half of the picture that says "online course". 3:2 holds both
   and costs the card about 7% more height. The file is cut to 3:2 exactly, so
   object-fit has nothing left to trim. */
.offer-ph{aspect-ratio:3/2;overflow:hidden;background:#dbeefa}
.offer-ph img{width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 38%)}
.offer-money{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:3px solid var(--money-lt)}
.offer-lab{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 2px}
.offer-lab2{font-size:12.5px;color:var(--muted);margin:0}
.offer-foot{padding:0 18px 18px}

@media(min-width:860px){
  .hero{padding:44px 0 48px}
  .hero-in{grid-template-columns:1.06fr .94fr;gap:44px;align-items:center}
  .hero-acts{flex-direction:row;flex-wrap:wrap}
  .offer-money{padding:20px 22px}
  .offer-foot{padding:0 22px 22px}
}

/* ---------------------------------------------------------------- sections */
.sec{padding:38px 0}
.sec-tint{background:var(--tint);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.sec-ink{background:var(--ink);color:#cfdce5}
.sec-ink h2,.sec-ink h3{color:#fff}
.sec-hd{text-align:center;max-width:60ch;margin:0 auto 26px}
/* Text-only section body. Keeps a readable measure where there is no photo to
   share the row with, instead of letting a paragraph run the full wrap width. */
.sec-text{max-width:64ch}
.sec-hd p{color:var(--muted)}
@media(min-width:760px){.sec{padding:52px 0}}

/* ------------------------------------------------------- the step track
   The spine of this identity: four milestones, permit to licence.         */
.track{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:step}
.step{display:flex;gap:14px;align-items:flex-start}
.step-n{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:900;font-size:17px;color:var(--ink);
  box-shadow:inset 0 0 0 4px var(--sky),0 3px 10px -4px rgba(16,36,58,.3)}
.step:first-child .step-n{box-shadow:inset 0 0 0 4px var(--money-lt),0 3px 10px -4px rgba(16,36,58,.3)}
.step:last-child .step-n{box-shadow:inset 0 0 0 4px var(--action),0 3px 10px -4px rgba(16,36,58,.3)}
.step h3{font-size:17px;margin-bottom:3px}
.step p{font-size:14.5px;color:var(--muted);margin:0}
.step a{font-weight:700}

@media(min-width:900px){
  .track{grid-template-columns:repeat(4,1fr);gap:0;position:relative;padding-top:6px}
  .track::before{content:"";position:absolute;top:28px;left:12.5%;right:12.5%;height:4px;border-radius:2px;
    background:linear-gradient(90deg,var(--money-lt) 0%,var(--sky) 48%,var(--action) 100%)}
  .step{flex-direction:column;align-items:center;text-align:center;padding:0 14px;position:relative}
  .step-n{width:54px;height:54px;font-size:20px;margin-bottom:13px;position:relative;z-index:2}
  .step p{font-size:14px}
}

/* ---------------------------------------------------------------- cards */
.cards{display:grid;gap:16px}
@media(min-width:700px){.cards-2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cards-3{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--paper);border-radius:var(--r-lg);padding:22px 20px;
  box-shadow:var(--shadow-1),0 14px 30px -22px rgba(16,36,58,.4);
  border:1px solid var(--line);display:flex;flex-direction:column}
.card-ph{border-radius:var(--r);overflow:hidden;margin:-4px 0 16px;aspect-ratio:16/10}
.card-ph img{width:100%;height:100%;object-fit:cover}
.card h3{margin-bottom:8px}
.card p{font-size:15px}
.card .btn{margin-top:auto;align-self:flex-start}
/* Square photo filling the card width. A 150px circle cropped the story out of
   these shots — at that size a car interior reads as an unidentifiable fragment. */
.card-round img{border-radius:var(--r);aspect-ratio:1;width:100%;height:auto;
  margin:-4px 0 16px;object-fit:cover;object-position:50% 42%}

/* Inline prose photos: fixed ratio so a portrait source can't blow the page
   apart, and the subject stays centred at every width. */
.prose img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 36%}
.prose img.illus{aspect-ratio:auto;object-fit:contain}
/* Diagrams must never be cropped — the 16/9 cover rule above is for photos and
   would cut the ends off a wide timeline. Keep the source's own proportions. */
.prose img.diagram{aspect-ratio:auto;object-fit:contain;height:auto}
.split img{object-fit:cover;object-position:50% 38%}

/* two-up media rows */
.split{display:grid;gap:24px;align-items:center}
@media(min-width:820px){
  .split{grid-template-columns:1fr 1fr;gap:38px}
  .split-narrow{grid-template-columns:.78fr 1.22fr}
  .split-wide{grid-template-columns:1.22fr .78fr}
}
.split img{border-radius:var(--r-lg)}
/* Flat vector illustrations have no detail to reward size — cap them so they
   support the copy instead of competing with it. */
.illus{max-width:190px;margin:0 auto;border-radius:0}

/* ---------------------------------------------------------------- prose
   Interior page body copy. Legacy markup safety: kill stacked <br> gaps.   */
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:22px}
.prose li{margin-bottom:8px}
.prose ul ul,.prose ol ol,.prose ul ol,.prose ol ul{margin:8px 0 0}
.prose p:empty{display:none}
.prose br + br{display:none}
.prose img{border-radius:var(--r-lg);margin:0 0 1.3em}
.prose a{font-weight:600}
.prose .back{font-size:13px;font-weight:400;white-space:nowrap}
.prose .back a{font-weight:600}

/* checklist.php is the only page with a prose column and no aside beside it — a
   document, not a layout. In the 1080px wrap its 72ch measure hugged the left
   edge and left the right 40% of the screen empty. Narrow the page body to one
   measured column so the H1 and the text share a left edge and the whole thing
   centres. Scoped inside <main>, so the nav, extras strip and footer keep their
   full width. */
.checklist-page main .wrap{max-width:720px}
.checklist-page main .prose{max-width:none}

.layout{display:grid;gap:34px}
@media(min-width:980px){.layout{grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}}

.page-hd{background:var(--tint);border-bottom:1px solid var(--line-2);padding:26px 0}
.page-hd h1{margin-bottom:6px}
.page-hd p{margin:0;color:var(--muted);max-width:62ch}
@media(min-width:760px){.page-hd{padding:38px 0}}

.banner-img{width:100%;height:200px;object-fit:cover;object-position:50% 34%}
@media(min-width:760px){.banner-img{height:260px}}

/* ---------------------------------------------------------------- aside */
.aside{display:grid;gap:16px}
.aside-card{border-radius:var(--r-lg);padding:20px;color:#fff;text-decoration:none;display:block}
.aside-card h2{color:#fff;font-size:20px;margin-bottom:8px}
.aside-card p{font-size:14.5px;margin-bottom:10px;color:rgba(255,255,255,.92)}
.aside-card .more{font-weight:800;font-size:14px;text-decoration:underline}
.aside-pc{background:var(--blue)}
.aside-mm{background:var(--action)}
.aside-plain{background:var(--tint);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px}
.aside-plain h2{font-size:19px;margin-bottom:12px}
.partners{list-style:none;margin:0;padding:0;display:grid;gap:16px;justify-items:center}
.partners img{max-height:70px;width:auto}

/* ---------------------------------------------------------------- CTA band */
.cta-band{background:var(--ink);border-radius:var(--r-lg);padding:26px 22px;text-align:center;color:#cfdce5}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{margin-bottom:16px}
.sec-ink .cta-band{background:transparent;padding:0}
@media(min-width:760px){.cta-band{padding:34px 30px}}

/* ---------------------------------------------------------------- extras
   Secondary offers. Below the course, never above the fold.               */
.extras{background:var(--tint-2);border-top:1px solid var(--line);padding:30px 0}
.extras-in{display:grid;gap:14px}
@media(min-width:820px){.extras-in{grid-template-columns:repeat(3,1fr)}}
.extra{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.extra:hover{transform:translateY(-2px);box-shadow:var(--shadow-1),0 14px 28px -20px rgba(16,36,58,.5)}
.extra-k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.extra-t{display:block;font-family:var(--f-head);font-weight:800;font-size:17px;color:var(--ink);margin-bottom:5px;letter-spacing:-.02em}
.extra-d{display:block;font-size:13.5px;color:var(--body);margin-bottom:9px}
.extra-go{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--action)}
.extra:hover .arw{transform:translateX(3px)}
.extra .arw{transition:transform .18s ease}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--ink);color:#a9bccb;padding:24px 0 0;font-size:14px}
.foot-in{display:grid;gap:18px}
@media(min-width:820px){.foot-in{grid-template-columns:1.3fr .8fr .8fr 1.1fr;gap:26px}}
.foot h2{color:#fff;font-size:13px;font-family:var(--f-head);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:5px}
.foot a{color:#dbe7ef;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
/* The global `strong,b{color:var(--ink)}` rule paints bold text the same navy as
   this footer's background, which made the phone number invisible. Every
   ink-backed surface must opt out, or bold text on it disappears. */
.foot b,.foot strong,
.cta-band b,.cta-band strong,
.aside-card b,.aside-card strong{color:inherit}
/* logo-light.png is the white-on-transparent wordmark. Do NOT swap this back to
   logo.png with a CSS invert filter: that file carries a baked opaque-white
   background (28% of its pixels) which the filter turns into a solid white blob. */
.foot-logo{height:32px;width:auto;margin-bottom:9px}
.foot-lic{font-size:12.5px;color:#9fb8ca;margin-bottom:9px;line-height:1.45}
.foot-lic b{color:#9fd8f5}
.foot-social{display:flex;gap:8px}
.foot-social li{margin:0}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:#dbe7ef}
.foot-social a:hover{background:rgba(255,255,255,.1);color:#fff}
.foot-addr{color:#9fb8ca;line-height:1.45}
.foot-cta{margin-top:10px}
.colophon{border-top:1px solid rgba(255,255,255,.13);margin-top:18px;padding:11px 0}
.colophon-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#8da5b8}
.colophon p{margin:0}

/* ---------------------------------------------------------------- forms */
.field{display:flex;gap:8px;max-width:520px}
.field input[type=text]{flex:1;min-width:0;padding:14px 16px;font:400 16px var(--f-body);
  border:2px solid var(--line-2);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.field input[type=text]:focus{border-color:var(--sky-dk);outline:none}
.form-stack{display:grid;gap:10px;max-width:420px}
.form-stack input{padding:13px 15px;font:400 16px var(--f-body);border:2px solid var(--line-2);
  border-radius:var(--r);background:var(--paper);color:var(--ink)}
.form-stack input:focus{border-color:var(--sky-dk);outline:none}
.form-note{font-size:13px;color:var(--muted)}

/* ---------------------------------------------------------------- checklist */
.checklist{list-style:none;margin:0 0 1.4em;padding:0;max-width:70ch}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.checkbox{width:22px;height:22px;flex-shrink:0;border:2px solid var(--ink);border-radius:5px;margin-top:2px}

/* ---------------------------------------------------------------- print */
@media print{
  .strip,.nav,.extras,.foot,.btn,.aside{display:none!important}
  body{font-size:12pt;color:#000}
  .page-hd{background:none;border:0;padding:0}
  a{color:#000;text-decoration:none}
  .checkbox{border-color:#000}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .btn:hover,.extra:hover{transform:none}
}