/* Fit each section inside one screen on laptops and desktops (2026-09-28).
   --avail = the visible height under the sticky header. Loaded last. */
:root{--hdr:78px;--avail:calc(100svh - var(--hdr))}

/* Pricing extras (all sizes) */
#website .pz-save{margin-left:6px;padding:2px 8px;border-radius:99px;background:#f7e8c8;color:#6b4a14;font:700 11px Inter,sans-serif;font-style:normal}
#website .pz-switch button[aria-pressed="true"] .pz-save{background:#f3d9a4;color:#3d2a00}
#website .pz-trial-mini{display:none;margin:18px 0 0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.65);border:2px solid #cdd8b6;font-size:13.5px;line-height:1.5;color:#3f4a38}
#website .pz-was{align-self:center;margin-right:10px;font:500 20px var(--font-head,Inter,sans-serif);color:#8a9180;text-decoration:line-through;text-decoration-thickness:2px}

@media (min-width:1024px){
  #website #subjects,#website #how,#website #journey,#website #parents,#website #pricing,#website #faq{box-sizing:border-box;min-height:var(--avail);scroll-margin-top:var(--hdr)}
  #website #subjects,#website #how,#website #journey,#website #pricing{display:flex;flex-direction:column;justify-content:center}
  #website #parents{align-content:center}

  /* Hero: book scales with screen height */
  #website .book-hero .book-scene{height:clamp(230px,calc(100svh - 500px),470px)!important}
  #website .book-hero .book-intro{margin-top:14px!important;gap:10px!important}

  /* How it works (Lumi session) */
  #website .lumi-session{padding-top:clamp(20px,3vh,40px)!important;padding-bottom:clamp(16px,2.5vh,32px)!important}
  #website .ls-heading{margin-bottom:14px!important;align-items:end}
  #website .ls-heading p{font-size:15px!important}
  #website .ls-tabs{margin-bottom:12px!important}
  #website .ls-tabs button{padding:8px 14px!important}
  #website .ls-panes{min-height:0!important}
  #website .ls-chat{height:clamp(200px,calc(100svh - 505px),400px)!important}
  #website .ls-board{min-height:0}
  #website .ls-top{padding:10px 20px!important}
  #website .ls-bottom{padding:10px 20px!important}
  #website .ls-board,#website .ls-chat-wrap{padding-top:14px!important;padding-bottom:10px!important}
  #website .ls-pane-label{margin-bottom:8px!important}
  #website .ls-stage{position:relative}
  #website .ls-summary{position:absolute!important;left:50%;bottom:64px;width:calc(50% - 44px);margin:0!important;z-index:4}
  #website .ls-rail{padding:16px 18px!important;top:calc(var(--hdr) + 12px)!important}
  #website .ls-rail ol{margin-bottom:14px!important}
  #website .ls-rail li{padding:7px 8px 7px 38px!important}
  #website .ls-rail li::before{top:7px!important}
  #website .ls-note{margin-top:10px!important;font-size:12px!important}

  /* Why Tuuteez: heading + pillars left, comparison right */
  #website .why-compare{padding-top:clamp(20px,3vh,40px)!important;padding-bottom:clamp(16px,2.5vh,32px)!important}
  #website .wc-layout{display:grid;grid-template-columns:minmax(300px,340px) minmax(0,1fr);gap:40px;align-items:start}
  #website .wc-heading{display:block!important;margin-bottom:18px!important}
  #website .wc-heading h2{font-size:clamp(24px,2.2vw,30px)!important}
  #website .wc-heading p{margin-top:10px!important;font-size:14px!important;line-height:1.55!important}
  #website .wc-pillars{grid-template-columns:1fr!important;gap:10px!important;margin:0 0 18px!important}
  #website .wc-pillars .wc-p{display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding:12px 14px!important;border-radius:16px!important}
  #website .wc-pillars .wc-p i{grid-row:span 2;width:40px!important;height:40px!important;margin:0!important;border-radius:12px!important}
  #website .wc-pillars .wc-p i svg{width:20px!important;height:20px!important}
  #website .wc-pillars .wc-p strong{font-size:15px!important;margin-bottom:2px!important}
  #website .wc-pillars .wc-p span{font-size:13px!important;line-height:1.4!important}
  #website .wc-pillars .wc-p::after{display:none}
  #website .wc-table{min-width:0!important;table-layout:fixed}
  #website .wc-table th,#website .wc-table td{padding:9px 12px!important;font-size:12.5px!important;line-height:1.35!important}
  #website .wc-table tbody th{width:22%!important;font-size:13px!important}
  #website .wc-table thead th{padding-top:12px!important;padding-bottom:10px!important}
  #website .wc-table .m{display:inline-flex!important;font-size:12px!important;margin:0 6px 0 0!important;vertical-align:-2px}
  #website .wc-col{padding:4px 9px!important;font-size:12px!important}
  #website .why-compare .why-availability{margin-top:10px!important;font-size:12px!important}

  /* For Parents */
  #website .parents-app{padding-top:clamp(20px,3vh,40px)!important;padding-bottom:clamp(20px,3vh,40px)!important}
  #website .pa-screen{height:clamp(520px,calc(100svh - 150px),700px)!important;padding-top:44px!important;gap:10px!important}
  #website .pa-points{margin-top:18px!important}
  #website .pa-points li{padding:12px 14px!important}
  #website .pa-toast{display:none}

  /* Pricing */
  #website .pz{padding-top:12px!important;padding-bottom:12px!important}
  #website .pz-inner{padding:clamp(20px,3.5vh,40px) clamp(24px,4vw,56px)!important}
  #website .pz-head{max-width:none!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 40px;align-items:end}
  #website .pz-head .eyebrow{grid-column:1/-1}
  #website .pz-head h2{margin:0!important;font-size:clamp(24px,2.3vw,32px)!important}
  #website .pz-head p{font-size:14px!important}
  #website .pz-grid{margin-top:clamp(14px,2.5vh,28px)!important;gap:32px!important}
  #website .pz-class-grid button{min-height:52px!important;font-size:19px!important}
  #website .pz-billing{margin-top:16px!important}
  #website .pz-trial{margin-top:16px!important}
  #website .pz-trial li{padding-bottom:10px!important}
  #website .pz-trial span{font-size:13px!important}
  #website .pz-card{padding:22px 26px 18px!important}
  #website .pz-price{margin-top:12px!important}
  #website .pz-price b{font-size:46px!important}
  #website .pz-for{margin-top:10px!important;font-size:14px!important}
  #website .pz-list{margin-top:12px!important;padding-top:12px!important;gap:6px 16px!important}
  #website .pz-list li{font-size:13px!important}
  #website .pz-cta{margin-top:16px!important;min-height:46px!important}
  #website .pz-fine{margin-top:8px!important}
  #website .pz-compare{margin-top:14px!important}
  #website .pz-compare summary{padding:10px 18px!important}
  #website .pz-note{margin-top:8px!important;font-size:12px!important}

  /* FAQ: heading left, questions right */
  #website .faq-section{max-width:none!important;display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px;align-items:start!important;align-content:center;padding:clamp(24px,4vh,56px) max(5%,calc((100vw - 1200px)/2))!important}
  #website .faq-head h2{margin:10px 0 14px!important}
  #website .faq-list{gap:10px!important}
  #website .faq-item summary{padding-top:14px!important;padding-bottom:14px!important}

  /* Journey and trust: lighter padding */
  #website .journey,#website .trust{padding-top:clamp(24px,4vh,56px)!important;padding-bottom:clamp(24px,4vh,56px)!important}
}

/* Short laptop screens (e.g. 1366×768, 1280×720): trim secondary text */
@media (min-width:1024px) and (max-height:820px){
  #website .ls-rail li span{display:none}
  #website .pz-for{display:none}
  #website .pz-trial{display:none}
  #website .pz-trial-mini{display:block}
  #website .pa-ring{width:96px!important;height:96px!important}
  #website .pa-today{grid-template-columns:96px 1fr!important;padding:10px 12px!important}
  #website .pa-ring b{font-size:22px!important}
  #website .pa-feed li{padding:6px 10px!important}
  #website .pa-feed{gap:6px!important}
  #website .pa-note{padding:9px 12px!important}
  #website .pa-note p{font-size:12px!important}
  #website .pa-app-top strong{font-size:17px!important}
  #website .pz-fine{display:none}
  #website .pz-class-grid button{min-height:46px!important;font-size:18px!important}
  #website .pz-note{display:none}
  #website .pz-price b{font-size:40px!important}
  #website .wc-table th,#website .wc-table td{padding:7px 10px!important}
  #website .why-compare .why-availability{display:none}
  #website .wc-heading p{display:none}
  #website .pa-copy>p{font-size:15px!important}
  #website .pa-points span{display:none}
  #website .journey-path{padding-top:56px!important}
}

#website .wc-cta{margin-top:4px}
@media (max-width:1023px){#website .wc-cta{margin:0 0 28px}}
@media (min-width:1024px) and (max-height:740px){#website .wc-pillars .wc-p span{display:none}#website .wc-pillars .wc-p{padding:9px 12px!important}}