/* School Bus Worksheets: landing and info pages.
   Phone layout first. Wider screens turn the swipe rows into grids. */
:root{
  color-scheme:light;
  --ink:#1B1B3A; --navy:#1B2140; --muted:#565A7A; --yellow:#FFC61A; --paper:#FAFAF7; --ground:#E6F1FF;
  --blue:#3FA9F5; --pink:#FF6FA5; --soft:#EEF2FA; --err:#B3261E;
  --display:'Grandstander','Chalkboard SE','Comic Sans MS',system-ui,sans-serif;
  --body:'Andika','Trebuchet MS',Verdana,system-ui,sans-serif;
  --label:'Lexend',Verdana,system-ui,sans-serif;
  --fav:#3FA9F5;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(16px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;overflow-x:hidden}
img{max-width:100%}
a{color:var(--ink)}
a:hover{color:var(--muted)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px #fff}
h1,h2,h3,p{margin:0}
h2,h3{font-family:var(--display)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:20;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-family:var(--display);font-weight:700;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px));color:#fff}
.in{width:100%;max-width:1168px;margin:0 auto;padding-left:20px;padding-right:20px}
.muted{color:var(--muted)}

/* first stop strip and header */
.strip{background:var(--navy);color:#fff;padding:10px 20px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:15px;line-height:1.4;text-align:center}
.strip b{color:var(--yellow);font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.hdr{background:var(--paper)}
.hdr .in{padding-top:14px;padding-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:9px;color:var(--navy);text-decoration:none;min-height:46px}
.logo:hover{color:var(--navy)}
.logo img{display:block;width:44px;height:44px}
.wm{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.wm1{font-family:var(--display);font-weight:900;font-size:21px;line-height:1;white-space:nowrap}
.wm2{background:var(--navy);color:var(--yellow);font-family:var(--label);font-size:9px;font-weight:700;line-height:1;letter-spacing:.3em;text-transform:uppercase;padding:5px 5px 5px 8px;border-radius:4px}
.hdr nav{display:flex;align-items:center;gap:4px 26px}
.hdr nav a.t{display:none;align-items:center;min-height:44px;font-size:17px;text-decoration:none}
.hdr nav a.t:hover{text-decoration:underline}
.cta-s{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:6px 16px;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;background:var(--yellow);border:3px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.cta-s:hover{color:var(--ink)}

/* hero */
.hero{background:var(--paper);color:var(--navy);border-bottom:3px solid var(--ink);padding:18px 20px 44px;display:flex;flex-direction:column;align-items:center;font-family:var(--label);overflow:hidden}
.bus{position:relative;z-index:1;width:330px;max-width:100%;aspect-ratio:330/126}
.bus img{display:block;width:100%;height:100%}
.bustag{position:absolute;left:34.78%;top:14.2%;width:25.22%;height:43.18%;transform:rotate(-2deg);display:flex;flex-direction:column}
.bustag i{font-style:normal;height:30.3%;display:flex;align-items:center;justify-content:center;padding-left:.1em;font-weight:700;font-size:7px;line-height:1;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--navy)}
.bustag b{height:52.6%;display:flex;align-items:flex-end;justify-content:center;font-family:var(--display);font-weight:900;font-size:13px;line-height:1;white-space:nowrap}
.road{align-self:stretch;margin:-7px -20px 0;height:4px;background-image:repeating-linear-gradient(to right,#8EC3F0 0,#8EC3F0 36px,transparent 36px,transparent 56px)}
.moving .bus{animation:bob .9s ease-in-out infinite}
.moving .road{animation:road .7s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes road{from{background-position:0 0}to{background-position:-56px 0}}
.kicker{margin-top:30px;background:var(--navy);color:var(--yellow);font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:9px 10px 9px 14px;border-radius:8px}
.hero h1{margin-top:24px;font-weight:500;font-size:17px;line-height:1.2;text-align:center}
.lines{display:flex;flex-direction:column;align-items:center;gap:20px}
.line{display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .35s ease}
.line b{min-width:220px;padding:0 10px 2px;border-bottom:4px solid var(--navy);font-family:var(--display);font-weight:900;font-size:42px;line-height:1.1;white-space:nowrap}
.line.off{opacity:0}
.hero .lede{margin-top:26px;font-size:18px;line-height:1.5;text-align:center;text-wrap:pretty;max-width:560px}
.cta{margin-top:24px;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:60px;padding:0 24px;background:var(--yellow);color:var(--navy);border:3px solid var(--navy);border-radius:16px;box-shadow:0 5px 0 var(--navy);font-family:var(--display);font-weight:900;font-size:21px;line-height:1;text-decoration:none}
.cta:hover{color:var(--navy)}
.hero .free{margin-top:18px;font-size:15px}
.pause{margin-top:16px;min-height:44px;padding:6px 16px;background:transparent;border:2px solid var(--navy);border-radius:999px;font-family:var(--body);font-size:15px;color:var(--navy)}
.still .pause{display:none}

/* sections */
.sec{padding:48px 0 56px;display:flex;flex-direction:column;gap:18px}
.sec.flush{padding-top:0}
.sec h2{font-weight:800;font-size:32px;line-height:1.1;text-wrap:balance}
.sec .sub{font-size:18px;text-wrap:pretty;max-width:680px}
.head{display:flex;flex-direction:column;gap:10px}
.pillhead{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;padding:6px 14px;background:#fff;border:2.5px solid var(--ink);border-radius:999px}
.box{background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:4px 4px 0 var(--ink)}

/* what custom means */
#custom .in{display:flex;flex-direction:column;gap:20px}
#custom .copy{display:flex;flex-direction:column;gap:20px}
#custom h2{font-size:36px;line-height:1.06;letter-spacing:-.01em}
.try{padding:18px;display:flex;flex-direction:column;gap:14px}
.try h3{font-weight:700;font-size:19px;line-height:1.2}
.try fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.try legend{padding:0;font-size:15px;color:var(--muted);margin-bottom:8px}
.row{display:flex;flex-wrap:wrap;gap:10px}
.pick{min-height:44px;padding:6px 15px;font-family:var(--body);font-size:16px;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:999px}
.pick[aria-pressed="true"]{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.sw{width:44px;height:44px;padding:0;border:2.5px solid var(--ink);border-radius:999px}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.swrow{gap:14px;padding:4px 0 4px 4px}
.arrow{display:flex;justify-content:center}
.sheet{overflow:hidden;box-shadow:5px 5px 0 var(--ink)}
.sheet .bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:10px 18px;background:var(--fav);border-bottom:3px solid var(--ink)}
.sheet .bar b{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.2}
.sheet .bar > span{font-size:14px}
.sheet .inner{padding:18px;display:flex;flex-direction:column;gap:14px}
.sheet .story{font-size:19px;line-height:1.6}
.sheet mark{background:var(--yellow);color:inherit;border-radius:6px;padding:1px 6px}
.dots{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;background:var(--soft);border-radius:14px}
.dots i{width:32px;height:32px;background:var(--fav);border:2.5px solid var(--ink);border-radius:999px}
.dots i.e{background:#fff;border-style:dashed}
.dots b{font-family:var(--display);font-weight:700;font-size:26px;line-height:1;padding:0 4px}
.hintline{font-size:15px;color:var(--muted)}
.eq{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:30px;line-height:1}
.eq .ans{display:inline-block;width:52px;height:52px;background:#fff;border:3px solid var(--ink);border-radius:12px}
.fill{display:inline-block;width:40px;border-bottom:3px solid var(--ink)}

/* swipe rows */
.swipe{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;padding:4px 20px 10px;scrollbar-width:none;list-style:none;margin:0}
.swipe::-webkit-scrollbar{display:none}
.swipe > li{flex:0 0 290px;max-width:82vw;scroll-snap-align:start;display:flex}
.cardx{flex:1;padding:20px;display:flex;flex-direction:column;gap:12px}
.cardx h3{font-weight:700;font-size:23px;line-height:1.2}
.cardx p{font-size:16px;color:var(--muted)}
.n{display:flex;align-items:center;justify-content:center;width:44px;height:44px;font-family:var(--display);font-weight:800;font-size:22px;background:var(--yellow);border:3px solid var(--ink);border-radius:999px}
.swbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px}
.swdots{display:flex;gap:7px}
.swdots i{width:11px;height:11px;border:2px solid var(--ink);border-radius:999px;background:#fff}
.swdots i.on{background:var(--ink)}
.swhint{display:flex;align-items:center;gap:6px;font-size:15px}
.step{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{padding:6px 14px;font-size:16px;background:#fff;border:2.5px solid var(--ink);border-radius:999px}
.tags span.on{background:var(--yellow)}
.tags span.add{color:var(--muted);border-style:dashed}
.tags.sm span{padding:6px 12px;font-size:15px}
.cols{display:flex;flex-wrap:wrap;gap:12px;padding:4px 0 4px 4px}
.cols i{width:34px;height:34px;border:2.5px solid var(--ink);border-radius:999px}
.cols i.on{box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--ink)}

/* quiz band */
.band{background:var(--blue);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.notes{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.notes > div{padding:14px 16px;background:var(--ground);border:3px solid var(--ink);border-radius:18px;display:flex;flex-direction:column;gap:2px}
.notes b{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.25}
.notes span{font-size:16px}

/* page samples */
.demo{min-height:128px;padding:14px;background:var(--soft);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:700;font-size:26px;line-height:1}
.demo.col{flex-direction:column;align-items:stretch;gap:6px;font-size:17px}
.demo .abox{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--yellow);border:3px solid var(--ink);border-radius:12px}
.demo .abox.e{background:#fff}
.bm{display:flex;align-items:center;justify-content:center;height:38px;background:#fff;border:2.5px solid var(--ink);border-radius:10px}
.bmrow{display:flex;gap:6px}
.demo .say{padding:10px 14px;background:#fff;border:2.5px solid var(--ink);border-radius:14px;font-family:var(--body);font-weight:400;font-size:15px;line-height:1.4}
.demo .sent{font-family:var(--body);font-weight:400;font-size:15px}
.pagecard{padding:16px}
.pagecard h3{font-size:21px}
.sets{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.sets h3{font-weight:700;font-size:19px}
.sets ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sets li{padding:6px 14px;font-size:15px;background:#fff;border:2.5px solid var(--ink);border-radius:999px}
.sets li.hot{background:var(--pink)}

/* pricing */
.price h3{font-weight:700;font-size:23px;line-height:1.2}
.price{padding:22px;gap:14px}
.amt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.amt b{font-family:var(--display);font-weight:800;font-size:42px;line-height:1}
.amt span{font-size:16px;color:var(--muted)}
.price ul{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:6px;font-size:16px}
.price p{font-size:15px}
.price .btn{margin-top:auto}
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 20px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);text-decoration:none;background:var(--yellow);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink)}
.btn:hover{color:var(--ink)}
.btn.white{background:#fff}
.btn.dark{background:var(--ink);color:#fff;box-shadow:none;border-radius:16px;min-height:58px;font-size:21px}
.btn[disabled]{opacity:.6;cursor:default}

/* forms */
.form{padding:22px 18px;display:flex;flex-direction:column;gap:14px;border-radius:22px;max-width:680px}
.form h2{font-size:30px}
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-size:16px}
.f input,.f select,.f textarea{width:100%;min-height:50px;padding:8px 14px;font-family:var(--body);font-size:17px;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:12px}
.f textarea{min-height:120px;padding:10px 14px;line-height:1.5;resize:vertical}
.f [aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 2px var(--err)}
.msg{padding:10px 14px;border:2.5px solid var(--ink);border-radius:12px;background:#fff;font-size:16px}
.msg.err{border-color:var(--err);background:#FFF1F0;color:#7A1410;font-weight:700}
.msg:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.startbox{background:var(--yellow);border:3px solid var(--ink);border-radius:24px;box-shadow:5px 5px 0 var(--ink);padding:26px 20px;display:flex;flex-direction:column;gap:16px;max-width:680px}
.startbox .f label{font-size:17px}
.startbox .f input{min-height:58px;padding:10px 18px;font-size:20px;border-width:3px;border-radius:16px}
.startbox p{font-size:16px}

/* footer */
.ftr{border-top:3px solid var(--ink);background:#fff}
.ftr .in{padding-top:24px;padding-bottom:24px;display:flex;flex-direction:column;gap:14px}
.ftr .brand{display:flex;align-items:center;gap:10px}
.ftr .brand img{display:block;width:40px;height:40px}
.ftr .wm1{font-size:22px;color:var(--navy)}
.ftr .wm2{font-size:10px;padding:6px 6px 6px 10px;border-radius:5px}
.ftr nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 26px}
.ftr nav a{display:inline-flex;align-items:center;min-height:44px;font-size:16px}
.ftr small{font-size:14px;color:var(--muted)}

/* info pages (privacy, terms, not found) */
.doc{background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:4px 4px 0 var(--ink);padding:26px 22px;max-width:760px;margin:28px auto 56px}
.doc h1{font-family:var(--display);font-weight:800;font-size:34px;line-height:1.1;margin-bottom:8px}
.doc h2{font-weight:700;font-size:22px;line-height:1.2;margin:26px 0 8px}
.doc p,.doc li{font-size:17px;max-width:68ch}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:22px}
.doc .draft{padding:12px 14px;border:2.5px dashed var(--ink);border-radius:12px;background:var(--soft)}

/* tables on info pages */
.tablewrap{overflow-x:auto;margin:0 0 14px;border:2.5px solid var(--ink);border-radius:12px}
.doc table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1.5px solid #C9D0E3}
.doc thead th{background:var(--soft);font-family:var(--display);font-weight:700}
.doc tbody tr:last-child th,.doc tbody tr:last-child td{border-bottom:0}

/* free worksheet pages */
.crumbs{padding-top:18px;font-size:15px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 8px;align-items:center}
.crumbs li{display:flex;align-items:center;gap:8px;min-height:44px}
.crumbs li + li::before{content:"/";color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.ws{padding:6px 0 56px;display:flex;flex-direction:column;gap:18px}
.ws h1{font-family:var(--display);font-weight:800;font-size:36px;line-height:1.06;text-wrap:balance}
.ws h2{font-weight:800;font-size:28px;line-height:1.12;margin-top:18px}
.ws h3{font-weight:700;font-size:21px;line-height:1.2}
.ws .lede{font-size:19px;max-width:720px;text-wrap:pretty}
.ws p,.ws li{max-width:72ch}
.wsgrid{display:flex;flex-direction:column;gap:22px}
.wsprev{margin:0}
.wsprev img{display:block;width:100%;max-width:520px;height:auto;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink)}
.wsprev figcaption{margin-top:12px;font-size:15px;color:var(--muted)}
.wsside{display:flex;flex-direction:column;gap:18px}
.wsdl{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.wsdl .btn{align-self:stretch}
.wscta{background:var(--yellow);padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.wscta h2{margin:0;font-size:26px}
.wsset{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.wsset ol{margin:6px 0 0;padding-left:28px;display:flex;flex-direction:column;gap:10px;font-size:18px;line-height:1.5}
.wsset .tip{font-size:16px;color:var(--muted)}
.ws mark{background:#FFE58F;color:inherit;border-radius:5px;padding:0 4px;border-bottom:2px dotted var(--ink)}
.cwnote{background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:12px 16px;font-size:17px}
.ws p > .btn{display:inline-flex}
.ws details{background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:4px 18px}
.ws summary{min-height:48px;display:flex;align-items:center;font-family:var(--display);font-weight:700;font-size:19px;cursor:pointer}
.ws details ol{margin:0 0 14px;padding-left:28px;columns:2;font-size:17px}
.ws ul.plain{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.wslinks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.wslinks a{display:inline-flex;align-items:center;min-height:44px;padding:6px 16px;background:#fff;border:2.5px solid var(--ink);border-radius:999px;font-size:16px;text-decoration:none}
.wslinks a:hover{background:var(--yellow);color:var(--ink)}
.gradebox{padding:22px 20px;display:flex;flex-direction:column;gap:14px}
.gradebox h2{margin:0}
.gradebox h3{font-size:18px;margin-top:4px}

@media (max-width:379px){
  .hdr .cta-s{font-size:14px;padding:6px 10px;box-shadow:2px 2px 0 var(--ink)}
  .hdr .wm1{font-size:18px}
  .hdr .logo{gap:7px}
  .hdr .logo img{width:38px;height:38px}
  .hdr .wm2{font-size:8px;letter-spacing:.2em}
}
@media (min-width:860px){
  .in{padding-left:24px;padding-right:24px}
  .hdr .in{padding-top:20px;padding-bottom:20px}
  .logo img{width:46px;height:46px}
  .hdr .wm{flex-direction:row;align-items:center;gap:12px}
  .hdr .wm1{font-size:28px}
  .hdr .wm2{font-size:12px;padding:8px 8px 8px 12px;border-radius:6px}
  .hdr nav a.t{display:inline-flex}
  .cta-s{font-size:17px;padding:8px 18px}
  .hero{padding:36px 24px 64px}
  .bus{width:460px}
  .bustag i{font-size:10px}
  .bustag b{font-size:18px}
  .road{margin:-9px -24px 0}
  .lines{flex-direction:row;align-items:flex-end;gap:36px}
  .line b{font-size:52px;min-width:240px}
  .hero h1{font-size:19px;margin-top:30px}
  .cta{align-self:center;min-width:340px}
  .sec{padding:72px 0 80px;gap:32px}
  .sec.flush{padding-top:0}
  .sec h2{font-size:44px}
  #custom .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 56px;align-items:start}
  #custom h2{font-size:52px}
  .arrow{display:none}
  .swipe{display:grid;overflow:visible;padding:0 24px;max-width:1168px;margin:0 auto;gap:20px}
  .swipe > li{max-width:none}
  .swipe.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .swipe.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .swbar{display:none}
  .notes{flex-direction:row}
  .notes > div{flex:1}
  .form{padding:30px 28px}
  .startbox{padding:36px 32px}
  .ws h1{font-size:48px}
  .wsgrid{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:40px;align-items:start}
  .wsdl .btn{align-self:flex-start;min-width:300px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .moving .bus,.moving .road{animation:none}
  .line{transition:none}
}
@media print{ .strip,.hdr nav,.pause,.swbar{display:none} }