/* Their First Bus's page. Base type, buttons, glance and the chrome come from
   family.css and product.css; this sheet is the street. Not calm: the app's own warm canvas, bus
   yellow, the big red bell, and a sky that follows the day. Every picture is a real screen of the
   app in a slim rounded frame. Every move is a transform, and every one stops under
   prefers-reduced-motion. */
.product-bus{--accent:#8A5208;--tint:#F3E7CF;
  --canvas:#F3E7CF;--yellow:#F2B630;--yellow-deep:#E9A92A;--yellow-line:#B8891F;--bell:#B23A26;--road:#6E6A64;
  --sky-morning:#DDEBF5;--sky-afternoon:#B5D8F0;--sky-rain:#D5DDE2;--sky-golden:#F6DDA6;--sky-dusk:#F2D3C3;--sky-night:#1F2A4D;
  --bounce:cubic-bezier(.3,1.45,.45,1)}
.tf-family.product-bus{background:var(--canvas)}
.product-bus h1 em,.product-bus h2 em{color:var(--accent)}

/* ---- A screen of the app: a slim rounded frame, the picture at its own 2796:1290 ratio ---- */
.product-bus .frame{display:block;position:relative;border-radius:22px;overflow:hidden;background:#CFE3F2;box-shadow:0 1px 2px rgba(60,40,15,.1),0 18px 40px -18px rgba(60,40,15,.4),0 0 0 1px rgba(60,40,15,.08)}
.product-bus .frame img{display:block;width:100%;height:auto;aspect-ratio:1400/646;object-fit:cover}

/* ---- Hero copy: short, so the street is the first thing seen ---- */
.bus-hero{padding:0 0 22px}
.bus-hero .wrap{max-width:1120px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px 48px;align-items:end}
.product-bus .kicker{grid-column:1;grid-row:1;align-self:end;margin:0;font:800 12.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.bus-hero h1{grid-column:1;grid-row:2;align-self:start;font-size:clamp(42px,5vw,64px);line-height:1;letter-spacing:-.03em;margin:0}
.bus-hero h1 em{display:block}
.bus-hero .hero-side{grid-column:2;grid-row:1/3;align-self:center}
.bus-hero .lede,.street-copy .lede{margin:0;max-width:44ch;font-size:clamp(16px,1.5vw,17.5px)}
.bus-hero .product-actions,.street-copy .product-actions{margin-top:14px}
.bus-hero .free-line,.street-copy .free-line{margin-top:10px}
/* Phones get the hero's lede and buttons right after the street, below the stop plate and the kerb
   (a second copy, display:none above 820px, so only one copy is ever rendered or read). */
.street-copy{display:none}

/* ---- The street: the bus at the stop, edge to edge on the canvas, standing on a kerb ---- */
.street{background:linear-gradient(var(--canvas) 0 70%,#E6D6B6 70% 100%);padding:4px 0 34px}
.street-inner{width:min(1240px,100% - var(--gutter)*2);margin:0 auto;position:relative}
.stop-scene{margin:0}
/* The street picture and each verb picture open the app; the house focus ring, a small lift on hover. */
.product-bus .frame-link{display:block;position:relative;border-radius:30px;text-decoration:none}
.product-bus .frame-link .frame{transition:transform .35s var(--bounce),box-shadow .35s var(--ease)}
@media (hover:hover){.stop-scene .frame-link:hover .frame{transform:translateY(-4px)}}
.stop-scene .frame{border-radius:30px;box-shadow:0 2px 3px rgba(60,40,15,.12),0 26px 50px -24px rgba(60,40,15,.45),0 0 0 1px rgba(60,40,15,.06)}

/* ---- Four things to do: route-number cards, each with its screen, that hop when you point at them ---- */
.product-bus .verbs-band{padding-top:64px}
.verbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.verb{position:relative;background:var(--card);border-radius:24px;overflow:hidden;box-shadow:var(--sh-2);border-top:7px solid var(--yellow)}
.verb-shot{position:relative;margin:0}
.verb-shot .frame{border-radius:0;box-shadow:none}
.verb-shot .frame-link{border-radius:0}
.verb-shot .frame img{transition:transform .35s var(--bounce)}
@media (hover:hover){.verb-shot .frame-link:hover .frame img{transform:scale(1.04)}}
/* The card clips its corners, so the verb picture's ring is drawn inside it, same gold and ink. */
.verb-shot .frame-link:focus-visible{outline:none;box-shadow:none!important}
.verb-shot .frame-link:focus-visible::after{content:"";position:absolute;inset:7px;z-index:2;border-radius:12px;outline:3px solid var(--gold);outline-offset:2px;box-shadow:0 0 0 2px var(--ink);pointer-events:none}
.verb-num{position:absolute;top:12px;left:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--yellow);border:2px solid var(--yellow-line);font:800 17px/1 var(--sans);color:#3B2A08;box-shadow:0 2px 6px rgba(60,40,15,.25)}
.verb-copy{padding:18px 20px 20px}
.verb h3{font-size:22px;line-height:1.15;letter-spacing:-.01em}
.verb-copy>p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.verb .verb-ages{margin:14px 0 0;display:grid;gap:8px;padding-top:12px;border-top:1px dashed var(--hairline)}
.verb-ages div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:baseline}
.verb-ages dt{font:800 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.verb-ages dd{margin:0;font-size:14px;line-height:1.45;font-weight:600;color:var(--ink-2)}

/* ---- The day: a road with four stops (home, two chosen places, home at night); the sky and the screen follow the stop ---- */
.route{--sky:var(--sky-morning);background:var(--sky);padding:72px 0 64px;transition:background-color .9s var(--ease)}
.route[data-sky="afternoon"]{--sky:var(--sky-afternoon)}
.route[data-sky="rain"]{--sky:var(--sky-rain)}
.route[data-sky="golden"]{--sky:var(--sky-golden)}
.route[data-sky="dusk"]{--sky:var(--sky-dusk)}
.route[data-sky="night"]{--sky:var(--sky-night)}
.route[data-sky="night"] .sec-head h2,.route[data-sky="night"] .sec-head .lede,.route[data-sky="night"] .route-note{color:#F6EFE2}
.route[data-sky="night"] .sec-head h2 em{color:#F2C14E}
.route[data-sky="night"] .sec-head .eyebrow{color:#E9C98A}
.route[data-sky="night"] .stop-btn{color:#F6EFE2}
.route[data-sky="night"] .stop-light{color:#D9D2C4}
.route .sec-head h2,.route .sec-head .lede,.route .sec-head .eyebrow,.route .stop-btn,.route .stop-light,.route .route-note{transition:color .9s var(--ease)}
/* Darker warm inks on the daytime skies, so every sky keeps 5:1 or better. */
.route .sec-head .eyebrow{color:#6E4410}
.route .sec-head h2 em{color:#7A4507}
.route .sec-head .lede{margin-inline:auto;color:var(--ink)}
.route-map{position:relative;max-width:1000px;margin:0 auto;padding-top:12px}
/* The road runs from the first stop to the last, with a dashed centre line. */
.route-road{position:absolute;left:10%;right:10%;top:28px;height:14px;border-radius:7px;background:var(--road);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.route-road::after{content:"";position:absolute;left:10px;right:10px;top:6px;height:2px;background:repeating-linear-gradient(90deg,#F4EBD8 0 14px,transparent 14px 26px);opacity:.85}
.route-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;position:relative;z-index:1}
.stop-btn{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-height:96px;padding:6px 4px 8px;border:0;background:none;cursor:pointer;font:inherit;color:var(--ink);text-align:center;border-radius:16px;-webkit-tap-highlight-color:transparent}
.stop-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* A stop sign on a short post: a red ring, filled bus yellow when the bus is there. */
.stop-post{position:relative;width:26px;height:26px;border-radius:50%;background:#FFFDF7;border:5px solid var(--bell);box-shadow:0 2px 0 rgba(60,40,15,.2);transition:transform .35s var(--bounce),background-color .3s}
.stop-post::after{content:"";position:absolute;left:50%;top:100%;width:4px;height:12px;margin-left:-2px;margin-top:5px;background:#7B746B;border-radius:2px}
.stop-btn[aria-current="step"] .stop-post{background:var(--yellow);transform:scale(1.18)}
@media (hover:hover){.stop-btn:hover .stop-post{transform:scale(1.12) rotate(-8deg)}}
.stop-name{margin-top:12px;font:800 15px/1.2 var(--sans)}
.route .stop-light{font-size:13px;font-weight:700;color:var(--ink)}
.stop-btn[aria-current="step"] .stop-name{text-decoration:underline;text-decoration-color:var(--yellow-line);text-decoration-thickness:3px;text-underline-offset:5px}
/* The stop's screen and its card: who waits there, what to listen for, and the road after it. */
.day-frames{max-width:1200px;margin:18px auto 0;display:grid;gap:24px}
/* Without script all four stops stack. With it (.route.live) they share one grid cell and only the
   current one shows, so the cell is always as tall as the tallest stop and the card never jumps. */
.day-frame{margin:0}
.route.live .day-frames{gap:0}
.route.live .day-frame{grid-area:1/1;display:flex;flex-direction:column}
.route.live .day-frame:not(.is-current){visibility:hidden}
.route.live .day-frame.is-current .frame{animation:arrive .55s var(--bounce)}
@keyframes arrive{0%{transform:translateX(24px) scale(.985);opacity:.6}100%{transform:none;opacity:1}}
.stop-card{flex:1;width:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);grid-template-rows:auto 1fr;align-content:start;gap:8px 32px;align-items:start;margin:18px auto 0;max-width:1000px;background:var(--card);border-radius:20px;padding:18px 22px 18px;box-shadow:var(--sh-1)}
.stop-card .stop-when{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:800 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sky-dot{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sky-dot.morning{background:#9CC8EC}.sky-dot.afternoon{background:#B7D9EF}.sky-dot.rain{background:#8FA3B0}.sky-dot.golden{background:#F0B865}.sky-dot.dusk{background:#C9826A}.sky-dot.night{background:var(--sky-night)}
.stop-card h3{font-size:24px;line-height:1.15;grid-column:1}
.stop-card dl{grid-column:2;grid-row:1/3;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stop-card dt{font:800 10.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.stop-card dd{margin:3px 0 0;font-size:14.5px;line-height:1.45;font-weight:600;color:var(--ink-2)}
.route .route-note{margin:22px auto 0;max-width:60ch;text-align:center;font-size:14.5px;font-weight:600;color:#5C4415}

/* ---- The song: a bus-yellow band, the full windows of the bus hopping to the beat (120 a minute) ---- */
.product-bus .song-band{background:var(--yellow);color:#2B2006}
.song-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.song-band .eyebrow{color:#5C3D06}
.song-band h2{color:#1F1704}
.song-band h2 em{display:block;color:#6E2E0E}
.song-band .lede{color:#2B2006;font-weight:600;max-width:48ch}
.song-band .song-rules{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;max-width:56ch}
.song-rules li{position:relative;padding-left:34px;font-size:16px;line-height:1.55;color:#2B2006}
.song-rules li::before{content:"\266A";position:absolute;left:0;top:-1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#FFF6DC;color:var(--bell);font-size:14px;font-weight:800;box-shadow:0 1px 0 rgba(60,40,15,.25)}
.song-rules b{color:#1F1704;font-weight:800}
.song-art{position:relative;margin:0;justify-self:center;width:min(100%,520px);padding:44px 0 0}
.song-art .frame.windows{border-radius:18px;background:var(--yellow-deep);animation:hop .5s var(--ease) 8 alternate;transform-origin:50% 100%}
.song-art .frame.windows img{aspect-ratio:1120/235}
.song-art .note{position:absolute;font:700 34px/1 var(--serif);color:#6E2E0E;animation:float 2s var(--ease) 2 backwards}
.song-art .n1{left:12%;top:10px}.song-art .n2{left:46%;top:-4px;animation-delay:.6s;font-size:40px}.song-art .n3{right:8%;top:18px;animation-delay:1.2s}
.song-art figcaption{margin-top:12px;text-align:center;font-size:14px;font-weight:700;color:#5C3D06}
@keyframes hop{to{transform:translateY(-7px) scale(1.01,.99)}}
@keyframes float{0%{transform:translateY(8px);opacity:0}30%{opacity:1}100%{transform:translateY(-18px) rotate(8deg);opacity:0}}


/* ---- At a glance and parents' questions ---- */
.product-bus .band.glance-band{padding-top:72px}
.glance-band .glance-row{margin-top:0}
.product-bus .for-you{background:var(--sky-morning)}
.product-bus .questions .sec-head{text-align:left;margin-left:0}
.product-bus .questions .qa{max-width:1040px;margin:0}

/* ---- Closing: night on Home Street, the bus parked under the stars ---- */
.closing-night{position:relative;background:var(--sky-night);color:#F6EFE2;padding:80px 0;scroll-margin-top:16px}
.tf-product.product-bus #download{padding-bottom:80px}
/* The stars keep to the top of the band, three uneven tiles, so none lands on the words. */
.closing-night::before{content:"";position:absolute;inset:0 0 auto 0;height:72px;pointer-events:none;background-image:radial-gradient(circle,#F6EFE2 1px,transparent 1.4px),radial-gradient(circle,rgba(246,239,226,.6) 1px,transparent 1.3px),radial-gradient(circle,rgba(246,239,226,.8) .9px,transparent 1.3px);background-size:173px 47px,97px 31px,251px 67px;background-position:23px 11px,61px 5px,139px 29px}
.closing-night .wrap{position:relative}
.closing-night .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:center}
.night-art{margin:0}
.night-art .frame{box-shadow:0 2px 3px rgba(0,0,0,.3),0 26px 50px -24px rgba(0,0,0,.7),0 0 0 1px rgba(246,239,226,.12)}
.closing-night .closing-copy h2{color:#F6EFE2}
.closing-night .closing-copy p{margin-top:12px;font-size:17px;color:#D9D2C4}
.closing-night .product-actions{margin-top:20px}
.closing-night .btn-ink{background:var(--yellow);color:#1F1704!important;border-color:var(--yellow)}
.closing-night .btn-ink:hover{background:#F6C552}
.closing-night .tip{margin-top:12px;text-align:left;color:#D9D2C4}
.closing-night .closing-copy .tip{font-size:13px}
.closing-night .tip a{color:#F6EFE2}
.product-bus .resources{background:var(--canvas);border-bottom:1px solid var(--hairline)}

/* ---- Responsive ---- */
@media (max-width:1200px){.verbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){
  .song-grid{gap:32px}
  .stop-card{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .stop-card dl{grid-column:1;grid-row:auto;grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .bus-hero .wrap{display:block}
  .product-bus .kicker{margin:14px 0 8px}
  .bus-hero h1{margin:0 0 14px}
  /* The street comes straight after the headline; the lede and buttons follow the stop plate. */
  .bus-hero{padding-bottom:10px}
  .bus-hero .hero-side{display:none}
  .street-copy{display:block;width:min(1120px,100% - var(--gutter)*2);margin:18px auto 0}
  .route{padding:56px 0 52px}
  .song-grid{grid-template-columns:minmax(0,1fr)}
  .song-art{width:min(100%,420px)}
  .closing-night{padding:56px 0}
  .tf-product.product-bus #download{padding-bottom:56px}
  .closing-night .wrap{grid-template-columns:minmax(0,1fr);gap:24px;text-align:center}
  .closing-night .product-actions{align-items:center}
  .closing-night .tip{text-align:center}
}
@media (max-width:559px){
  .bus-hero h1{font-size:42px}
  .hero-side .product-actions,.hero-side .product-actions .btn-lg{width:100%}
  .street{padding-bottom:26px}
  .stop-scene .frame{border-radius:18px}
  .verbs{grid-template-columns:minmax(0,1fr);gap:16px}
  .route-road{top:24px;left:8%;right:8%;height:12px}
  .stop-btn{min-height:88px}
  .stop-name{font-size:13px}
  .route .stop-light{font-size:11.5px}
  .product-bus .frame{border-radius:14px}
  .stop-card{padding:16px}
  .stop-card h3{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .route,.stop-post,.product-bus .frame-link .frame,.verb-shot .frame img,.route .sec-head h2,.route .sec-head .lede,.route .sec-head .eyebrow,.route .stop-btn,.route .stop-light,.route .route-note{transition:none}
  .route.live .day-frame.is-current .frame,.song-art .frame.windows,.song-art .note{animation:none}
  .product-bus .frame-link:hover .frame,.verb-shot .frame-link:hover .frame img{transform:none}
}