/* TRADE phone floor — loaded last, after any skin. Nothing may scroll sideways on a
   phone, and every action stays a thumb's width. */
@media (max-width:599px){
  html,body{ overflow-x:clip; }
  .btn{ min-height:52px; }
  .hero__actions .btn{ flex:1 1 auto; }
}

/* Journey phone floor: brand, sign, booking action, then the learner journey. */
@media(max-width:899px){
 .journey--clean{--sec:56px;}
 .journey--clean .hero--simple{padding:24px 0 20px;}
 .journey--clean .simple-hero{grid-template-columns:minmax(0,1fr);gap:24px;}
 .simple-hero__kicker{font-size:12px;margin-bottom:12px;}
 .simple-hero__title{font-size:clamp(32px,8.5vw,44px);line-height:1.12;letter-spacing:-.04em;}
 .simple-hero__lead{font-size:16px;line-height:1.6;margin-top:16px;}
 .simple-hero__availability{font-size:14px;line-height:1.55;margin-top:12px;}
 .simple-hero__actions{margin-top:18px;gap:10px;}
 .simple-hero__actions .btn{width:100%;min-height:48px;white-space:normal;padding:12px 16px;font-size:15px;}
 .simple-hero__photo{aspect-ratio:16 / 9;}
 .simple-hero__coverage{padding-top:16px;font-size:13px;}
 .simple-hero__coverage summary span{display:block;margin:4px 0 0 16px;}
 .journey--clean .lesson{grid-template-columns:minmax(0,1fr);padding:24px 0;gap:20px;}
 .journey--clean .lesson>.btn{grid-column:1;grid-row:auto;justify-self:start;}
 .journey--clean .school__in{grid-template-columns:minmax(0,1fr);gap:28px;}
 .journey--clean .school__logo{width:88px;height:88px;margin-top:16px;}
 .journey--clean .school__statement{font-size:23px;}
 .journey--clean .school__paragraph{font-size:16px;}
 .journey--clean .offer__card{padding:24px 20px;}
 .offer__promotions{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:24px;}
 .journey--clean .areas__places{grid-template-columns:repeat(2,minmax(0,1fr));}
 .journey--clean .areas__places li{padding-block:10px;font-size:14px;}
}
@media(max-width:899px) and (max-height:650px){
 .journey--clean .hero--simple{padding-top:16px;}
 .simple-hero__title{font-size:30px;}
 .simple-hero__lead{font-size:14px;line-height:1.5;margin-top:12px;}
 .simple-hero__kicker{font-size:11px;margin-bottom:8px;}
 .simple-hero__availability{font-size:13px;margin-top:10px;}
 .simple-hero__actions{margin-top:14px;gap:8px;}
 .simple-hero__actions .btn{min-height:44px;padding:10px 12px;font-size:14px;}
}
@media(max-width:899px){
 :root{--sec:64px;}
 .hero{padding:12px 0 32px;}
 .lesson-journey .identity{gap:14px;margin-bottom:14px;}
 .identity__logo{width:60px;height:60px;}
 .identity__name{font-size:clamp(22px,5.8vw,32px);line-height:1.12;}
 .identity__place{font-size:10px;letter-spacing:.08em;margin-top:5px;}
 .hero__photo{aspect-ratio:auto;height:clamp(120px,18svh,144px);}
 .hero__photo img{object-position:var(--focus,center 55%);}
 .sign{padding:18px 20px 16px;margin:-18px 8px 0;}
 .sign--alone{margin:0;}
 .sign__kicker{font-size:12px;line-height:1.4;margin-bottom:10px;gap:8px;}
 .sign__route{font-size:13px;}
 .hero__title{font-size:clamp(38px,10.7vw,64px);line-height:1.03;letter-spacing:-.03em;}
 .sign__dest{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:16px;padding-top:12px;}
 .sign__dest li{gap:6px;font-size:16px;line-height:1.3;}
 .sign__arrow{width:18px;height:18px;}
 .hero__copy{padding-top:20px;}
 .hero__lead{font-size:16px;line-height:1.55;max-width:52ch;}
 .hero__actions{gap:10px;margin-top:18px;}
 .hero__actions .btn{min-height:52px;padding:12px 18px;font-size:16px;white-space:normal;line-height:1.25;text-align:center;}
 .hero__actions>.btn:first-child{flex:1 0 100%;}
 .hero__actions>.btn:not(:first-child){min-height:48px;}
 .roundels{margin-top:24px;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));}
 .roundel b{width:68px;font-size:19px;border-width:6px;}
 .roundel span{font-size:12px;line-height:1.4;}
 .trip__hold{top:10px;}
 .journey{width:min(100%,440px,calc(35svh * 360 / 260));margin-inline:auto;}
 .step{padding:24px 20px 24px 72px;}
 .step__title{font-size:22px;line-height:1.2;}
 .step p{font-size:16px;line-height:1.6;}
 .trip .steps__list{padding-bottom:14vh;}
 .school__head .d-lg{font-size:clamp(34px,8.5vw,54px);}
 .school__logo{width:104px;height:104px;margin-top:22px;}
 .school__statement{font-size:25px;line-height:1.35;}
 .lesson-note{padding:24px 20px;}
 .learning__item{gap:12px;}
 .nav__in{gap:10px;}
 .nav__cta{gap:6px;flex:none;}
 .brand__logo{width:34px;height:34px;}
 .lesson-journey .nav .brand__name{font-size:clamp(14px,3.6vw,18px);}
 .lesson-journey .nav .brand__sub{font-size:9px;letter-spacing:.02em;}
 :is(.skin--lesson-monochrome,.skin--lesson-daylight) .identity__logo{width:64px;height:64px;}
 :is(.skin--lesson-monochrome,.skin--lesson-daylight) .school__logo{width:140px;height:140px;}
 .guide-links{gap:8px;margin-bottom:30px;}
 .guide-links a{font-size:13px;padding-inline:12px;}
 .first-lesson__item{grid-template-columns:28px minmax(0,1fr);gap:12px;padding:28px 0;}
 .first-lesson__item .lede,.skill .lede,.readiness__item .lede,.lesson-plan__item .lede{font-size:16px;line-height:1.7;}
 .skills__list{grid-template-columns:minmax(0,1fr);}
 .skill{padding:28px 0;}
 .skill .guide-number{margin-bottom:14px;}
 .readiness__in,.lesson-plan__in{grid-template-columns:minmax(0,1fr);gap:32px;}
 .readiness__head,.plan-message{position:static;}
 .readiness__item,.lesson-plan__item{gap:12px;grid-template-columns:28px minmax(0,1fr);padding:28px 0;}
 .guide-resources,.plan-message{padding:24px 20px;}
 .plan-message__copy{font-size:18px;}
 body.trip-held .nav:focus-within,.nav:has(.burger.is-open){translate:0 0;}
}
@media(min-width:600px) and (max-width:899px){
 .hero__actions>.btn:first-child{flex:0 1 auto;}
 .hero__in{max-width:640px;}
 .hero__photo{height:240px;}
 .hero__title{font-size:60px;}
}
@media(min-width:1000px) and (max-width:1299px){
 .nav__links{display:none;}
 .burger{display:block;}
 .nav__book{display:inline-flex;}
 .nav__tel{display:grid;width:44px;height:44px;border-radius:50%;background:var(--brand);color:var(--on-brand);}
 .nav__tel svg{color:inherit;}
 .nav__tel span{display:none;}
}
@media(min-width:1300px){
 .nav .brand{max-width:250px;}
 .nav__links{gap:18px;}
 .nav__links a{font-size:14px;white-space:nowrap;}
 .nav__tel{font-size:14px;}
 .nav__book{padding-inline:16px;}
}
@media(max-width:359px){
 :root{--gut:16px;}
 .sign{padding:18px 16px 16px;}
 .hero__title{font-size:36px;}
 .identity__logo{width:48px;height:48px;}
 .roundel b{width:60px;font-size:17px;}
 .btn{white-space:normal;line-height:1.3;text-align:center;padding-block:12px;}
 .lesson>.btn{grid-column:1 / -1;justify-self:stretch;}
 .journey__tag{font-size:11px;padding-inline:8px;}
 .skin--lesson-monochrome .roundels{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:899px) and (max-height:480px){
 .trip__hold{position:static;}
 .journey{width:min(100%,360px);}
}
@media(prefers-reduced-motion:reduce){.trip__hold{position:static;}}

/* Journey v2 phone floor, 2026-10-10: the sign and its panel, then the booking action,
   all on the first screen; the lead and the figures follow. */
@media(max-width:899px){
 .hero__copy{display:flex;flex-direction:column;padding-top:16px;}
 .hero__actions{order:-1;margin-top:0;}
 .hero__lead{margin-top:18px;}
 .hero__avail{font-size:15px;}
 /* the reviews row moves sideways only: its waiting cards sit a few px low, and with overflow-y auto a
    vertical swipe that started on it moved the row, not the page (2026-10-13) */
 .quotes{overflow-y:hidden;}
 .sign__more{flex-basis:100%;}
 .sign__more a{font-size:14px;}
 .sign{padding:17px 16px 16px;}
 .sign__dest{margin-top:13px;padding-top:11px;}
 .vms{margin-top:13px;}
}
/* a photograph above the sign on a short screen: the destinations step aside (the kicker
   names the place) so the booking action still shows without scrolling */
@media(max-width:899px) and (max-height:720px){
 .hero:not(.hero--plain) .sign__dest{display:none;}
 .sign__dest--more li:not(.sign__more){display:none;}
 .hero__photo{height:clamp(96px,16svh,132px);}
}
/* a short screen (an iPhone SE or 8 with Safari's bars showing is about 375 x 548): the sign, its
   panel and the booking action still share the first screen. The destinations step aside for
   everyone (the kicker names the place), the photograph becomes a strip, the spacing tightens. */
@media(max-width:899px) and (max-height:640px){
 .hero{padding-top:8px;}
 .lesson-journey .identity{gap:10px;margin-bottom:9px;}
 .identity__logo,:is(.skin--lesson-monochrome,.skin--lesson-daylight) .identity__logo{width:44px;height:44px;}
 .identity__name{font-size:clamp(20px,5.4vw,26px);}
 .identity__place{margin-top:3px;}
 .hero .sign__dest{display:none;}
 .hero:not(.hero--plain) .hero__photo{height:60px;}
 .sign{padding:14px 14px 13px;margin-top:-14px;}
 .sign--alone{margin-top:0;}
 .sign__kicker{margin-bottom:7px;}
 .hero__title{font-size:clamp(34px,9.6vw,44px);}
 .vms{margin-top:11px;padding:11px 12px 10px;}
 .vms__word{margin-top:6px;}
 .vms__road{margin-top:9px;}
 .hero__copy{padding-top:12px;}
 .hero__actions .btn{min-height:50px;}
}
@media(max-width:359px){
 .sign{padding:16px 14px 14px;}
 .vms{padding:12px 12px 11px;}
}
@media(max-width:899px){
 .chapter .d-md{font-size:clamp(25px,6.6vw,32px);line-height:1.16;}
 /* these two cards reach back across the route line: they sit over it, so the line passes behind (it was drawn through them) */
 .chapter .guide-resources,.chapter .plan-message{margin-left:-48px;position:relative;z-index:1;}
 .testday__facts{gap:10px;}
}
@media(max-width:359px){
 .route__stop{column-gap:12px;}
 .chapter .guide-resources,.chapter .plan-message{margin-left:-44px;}
 .testday__source{margin-left:44px;}
 .testbook{padding:18px;} .testbook__btn{justify-self:stretch; justify-content:center;}
}

/* The headline never breaks inside one of its own lines. build.mjs measures the longest line in ems of
   the sign's face (--fit); the sign is a size container, and the type is the usual size or the size at
   which that line fits, whichever is smaller. Without container units the usual sizes above stand. */
@supports (width:1cqw){
 .lesson-journey .sign{container-type:inline-size;}
 .lesson-journey .hero__title{--title:clamp(38px,10.7vw,64px);font-size:min(var(--title),calc(100cqw / var(--fit,1)));}
 @media(min-width:600px) and (max-width:899px){.lesson-journey .hero__title{--title:60px;}}
 @media(max-width:359px){.lesson-journey .hero__title{--title:36px;}}
 @media(max-width:899px) and (max-height:640px){.lesson-journey .hero__title{--title:clamp(34px,9.6vw,44px);}}
 @media(min-width:900px){.lesson-journey .hero__title{--title:clamp(50px,5.8vw,88px);}}
}