/* ============================================================
   k12lms.com -- marketing site design system
   Mobile-first. Brand: navy #080f24 . green #22c55e . Outfit/Inter
   ============================================================ */

:root{
  --navy:      #080f24;
  --navy-2:    #0d1830;
  --ink:       #101c33;
  --ink-soft:  #46536b;
  --ink-faint: #6b7890;
  --paper:     #ffffff;
  --mist:      #f5f8fc;
  --mist-2:    #eef3f9;
  --line:      #e3e9f2;
  --green:     #16a34a;
  --green-br:  #22c55e;
  --green-lt:  #4ade80;
  --green-tint:#ecfdf3;
  --green-line:#c9f0d8;
  --amber:     #f59e0b;
  --blue:      #3b82f6;
  --violet:    #8b5cf6;
  --rose:      #f43f5e;
  --radius:    18px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(16,28,51,.05), 0 4px 14px rgba(16,28,51,.05);
  --shadow-md: 0 2px 6px rgba(16,28,51,.06), 0 14px 34px rgba(16,28,51,.09);
  --shadow-lg: 0 8px 20px rgba(8,15,36,.14), 0 30px 70px rgba(8,15,36,.18);
  --font-d: 'Outfit', sans-serif;
  --font-b: 'Inter', sans-serif;
  --wrap: 1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-b);color:var(--ink);background:var(--paper);
  line-height:1.65;font-size:1rem;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-br)}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:800;line-height:1.14;color:var(--ink);letter-spacing:-.01em}
button{font-family:var(--font-b)}
::selection{background:rgba(34,197,94,.25)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* -- Type scale (mobile first) -- */
.h-hero{font-size:clamp(2.15rem,7.6vw,3.45rem);letter-spacing:-.02em}
.h-sec {font-size:clamp(1.6rem,5vw,2.5rem);letter-spacing:-.015em}
.h-card{font-size:1.08rem;font-weight:700}
.lead  {font-size:clamp(1.02rem,2.6vw,1.2rem);color:var(--ink-soft)}

.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-d);font-weight:700;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--green);
  margin-bottom:14px;
}
.kicker::before{content:"";width:22px;height:2px;background:var(--green-br);border-radius:2px}
.on-dark .kicker{color:var(--green-lt)}

/* ============ Header ============ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .25s,box-shadow .25s,border-color .25s;
  border-bottom:1px solid transparent;
}
.site-head.solid{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 2px 20px rgba(8,15,36,.06);
}
.site-head .bar{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;max-width:var(--wrap);margin:0 auto;padding:0 20px;
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:800;font-size:1.22rem;color:#fff}
/* The k12lms mark (14 Sep 2026): two rounded squares - the school takes
   the bar's text colour, the home is green, the shared window mint. */
.brand .mark{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.brand .mark svg{width:34px;height:34px;display:block}
.f-brand .k12-mark{width:22px;height:22px;display:inline-block;color:#fff}
.brand em{font-style:normal;color:var(--green-lt)}
.site-head.solid .brand{color:var(--ink)}
.site-head.solid .brand em{color:var(--green)}

.nav-links{display:none}
.head-cta{display:none}

/* hamburger */
.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;border:none;background:none;cursor:pointer;
}
.burger span{height:2px;border-radius:2px;background:#fff;transition:.25s;transform-origin:center}
.site-head.solid .burger span{background:var(--ink)}
.on-light-page .burger span{background:var(--ink)}

/* Drawer (mobile nav) */
.drawer-bg{
  position:fixed;inset:0;background:rgba(8,15,36,.5);z-index:190;
  opacity:0;pointer-events:none;transition:opacity .25s;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.drawer-bg.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:200;width:min(320px,86vw);
  background:#fff;box-shadow:var(--shadow-lg);
  transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.24,1);
  display:flex;flex-direction:column;padding:22px;
}
.drawer.open{transform:translateX(0)}
.drawer .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.drawer .close-x{background:none;border:none;font-size:1.5rem;color:var(--ink-soft);cursor:pointer;padding:8px;line-height:1}
.drawer a.dlink{
  display:block;padding:14px 10px;border-radius:12px;
  font-family:var(--font-d);font-weight:600;font-size:1.06rem;color:var(--ink);
}
.drawer a.dlink:hover{background:var(--mist)}
.drawer a.dlink.now{color:var(--green);background:var(--green-tint)}
.drawer .d-cta{margin-top:auto}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;border:none;cursor:pointer;
  font-family:var(--font-d);font-weight:700;font-size:.98rem;letter-spacing:.01em;
  transition:transform .15s,box-shadow .15s,background .15s,filter .15s;
  text-decoration:none;
}
.btn:active{transform:scale(.97)}
.btn-green{
  background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;
  box-shadow:0 6px 20px rgba(34,197,94,.35);
}
.btn-green:hover{filter:brightness(1.07);color:#fff;transform:translateY(-1px)}
.btn-ghost-d{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost-d:hover{background:rgba(255,255,255,.15);color:#fff}
.btn-ghost-l{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost-l:hover{border-color:#cbd6e4;color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:.9rem}
.btn svg{width:17px;height:17px}

/* ============ Hero (dark) ============ */
.hero{
  position:relative;background:var(--navy);color:#e8eeff;overflow:hidden;
  padding:118px 0 0;
}
.hero .glow{
  position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;
}
.hero .glow.g1{width:520px;height:520px;background:rgba(34,197,94,.16);top:-160px;right:-140px}
.hero .glow.g2{width:420px;height:420px;background:rgba(59,130,246,.10);bottom:60px;left:-180px}
.hero .grid-lines{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 40%,transparent 100%);
}
.hero .inner{position:relative;text-align:center;max-width:1040px;margin:0 auto;padding:0 20px}
.hero h1{color:#fff}
.hero h1 .grad{
  background:linear-gradient(92deg,#4ade80 10%,#86efac 50%,#4ade80 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{color:rgba(232,238,255,.72);margin:20px auto 0;max-width:640px}
.hero .cta-row{display:flex;flex-direction:column;gap:12px;margin-top:32px;align-items:center}
.hero .cta-row .btn{width:100%;max-width:340px}
.hero .micro{margin-top:16px;font-size:.83rem;color:rgba(232,238,255,.45)}

.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);
  color:#86efac;border-radius:999px;padding:7px 16px;
  font-size:.8rem;font-weight:600;margin-bottom:22px;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green-br);box-shadow:0 0 0 4px rgba(34,197,94,.2);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.25)}50%{box-shadow:0 0 0 7px rgba(34,197,94,.05)}}

/* hero product frame */
.hero-shot{
  position:relative;margin:54px auto -2px;max-width:980px;padding:0 14px;
}
.hero-shot .frame{
  border-radius:18px 18px 0 0;border:1px solid rgba(255,255,255,.14);border-bottom:none;
  background:linear-gradient(180deg,#0d1830,#0a1226);
  box-shadow:0 -1px 0 rgba(255,255,255,.06) inset,0 40px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.hero-shot .chrome{
  display:flex;align-items:center;gap:6px;padding:11px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-shot .chrome i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.hero-shot .chrome i:first-child{background:rgba(248,113,113,.55)}
.hero-shot .chrome i:nth-child(2){background:rgba(251,191,36,.55)}
.hero-shot .chrome i:nth-child(3){background:rgba(34,197,94,.55)}
.hero-shot .chrome .url{
  margin-left:10px;flex:1;max-width:280px;padding:4px 12px;border-radius:7px;
  background:rgba(255,255,255,.06);font-size:.68rem;color:rgba(232,238,255,.45);
  text-align:left;white-space:nowrap;overflow:hidden;
}

/* faux app UI inside frame */
.faux{display:flex;min-height:280px;text-align:left;font-size:.72rem}
.faux .f-nav{display:none}
.faux .f-main{flex:1;padding:16px}
.faux .f-title{font-family:var(--font-d);font-weight:700;color:#fff;font-size:.95rem;margin-bottom:2px}
.faux .f-sub{color:rgba(232,238,255,.45);font-size:.68rem;margin-bottom:14px}
.faux .f-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:12px}
.faux .f-stat{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:11px;padding:10px 12px}
.faux .f-stat b{display:block;font-family:var(--font-d);font-size:1.15rem;color:#fff}
.faux .f-stat span{color:rgba(232,238,255,.5);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}
.faux .f-stat .up{color:#4ade80}
.faux .f-rows{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}
.faux .f-row{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(232,238,255,.8)}
.faux .f-row:last-child{border-bottom:none}
.faux .f-row .av{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.58rem;color:#fff}
.faux .f-row .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faux .pill{font-size:.58rem;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.05em;white-space:nowrap}
.faux .p-ok{background:rgba(34,197,94,.16);color:#4ade80}
.faux .p-warn{background:rgba(251,191,36,.14);color:#fbbf24}
.faux .p-info{background:rgba(96,165,250,.14);color:#93c5fd}

/* ============ Sections ============ */
.sec{padding:72px 0}
.sec-head{max-width:660px;margin:0 auto 44px;text-align:center}
.sec-head .lead{margin-top:14px}
.sec-head.left{text-align:left;margin-left:0}

.sec-mist{background:var(--mist)}
.sec-dark{background:var(--navy);color:#e8eeff}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .lead{color:rgba(232,238,255,.68)}

/* -- Audience cards -- */
.aud-grid{display:grid;gap:16px}
.aud-card{
  position:relative;display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px 24px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;
  color:var(--ink);
}
.aud-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--green-line);color:var(--ink)}
.aud-card .ico{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.aud-card .ico svg{width:22px;height:22px}
.aud-card h3{font-size:1.2rem;margin-bottom:8px}
.aud-card p{color:var(--ink-soft);font-size:.94rem}
.aud-card .go{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-family:var(--font-d);font-weight:700;font-size:.88rem;color:var(--green);
}
.aud-card:hover .go{gap:10px}
.aud-card .go{transition:gap .2s}
.ico-green{background:var(--green-tint);color:var(--green)}
.ico-blue{background:#eaf2fe;color:var(--blue)}
.ico-violet{background:#f2edfe;color:var(--violet)}
.ico-amber{background:#fef5e7;color:var(--amber)}
.ico-rose{background:#fdeef1;color:var(--rose)}
.ico-navy{background:#e9edf6;color:var(--ink)}

/* -- Feature/module cards -- */
.feat-grid{display:grid;gap:14px}
.feat-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.feat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--green-line)}
.feat-card .ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.feat-card .ico svg{width:19px;height:19px}
.feat-card h3{font-size:1rem;margin-bottom:6px}
.feat-card p{font-size:.88rem;color:var(--ink-soft)}
.feat-card .tag{
  display:inline-block;margin-left:6px;vertical-align:2px;
  font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:#eaf2fe;color:var(--blue);border-radius:99px;padding:2px 8px;
}

/* -- Split feature rows -- */
.split{display:grid;gap:34px;align-items:center}
.split .txt h2{margin-bottom:14px}
.split .txt p{color:var(--ink-soft);margin-bottom:12px}
.split .txt .ticks{list-style:none;margin-top:18px}
.split .txt .ticks li{
  position:relative;padding:7px 0 7px 34px;color:var(--ink-soft);font-size:.95rem;
}
.split .txt .ticks li::before{
  content:"";position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:50%;
  background:var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  border:1px solid var(--green-line);
}
.sec-dark .split .txt p{color:rgba(232,238,255,.68)}
.sec-dark .split .txt .ticks li{color:rgba(232,238,255,.75)}
.sec-dark .split .txt .ticks li::before{background-color:rgba(34,197,94,.14);border-color:rgba(34,197,94,.3)}

/* visual panels used in splits */
.panel{
  border-radius:var(--radius-lg);padding:26px;position:relative;overflow:hidden;
}
.panel-light{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.panel-dark{background:linear-gradient(160deg,#0d1830,#080f24);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-lg)}

/* phone mock */
.phone-wrap{display:flex;justify-content:center;padding:12px 0}
.phone{
  width:min(270px,72vw);border-radius:38px;padding:12px;
  background:linear-gradient(160deg,#1a2540,#0a1226);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px rgba(8,15,36,.4);
}
.phone .screen{
  border-radius:28px;background:#0d1830;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.phone .notch{display:flex;justify-content:center;padding:9px 0 4px}
.phone .notch i{width:74px;height:5px;border-radius:99px;background:rgba(255,255,255,.14)}
.phone .p-body{padding:14px 14px 20px;font-size:.68rem;color:rgba(232,238,255,.85)}
.phone .p-hello{font-family:var(--font-d);font-weight:700;color:#fff;font-size:.92rem;margin-bottom:2px}
.phone .p-sub{color:rgba(232,238,255,.45);font-size:.62rem;margin-bottom:12px}
.phone .p-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:13px;padding:11px 12px;margin-bottom:9px;
}
.phone .p-card .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.phone .p-card b{color:#fff;font-weight:600}
.phone .p-note{
  display:flex;gap:9px;align-items:flex-start;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);
  border-radius:13px;padding:11px 12px;margin-bottom:9px;color:#bbf7d0;
}
.phone .p-note .b-ico{
  width:24px;height:24px;border-radius:8px;background:rgba(34,197,94,.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.phone .p-note .b-ico svg{width:13px;height:13px;stroke:#4ade80}
.phone .bar-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.phone .bar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.phone .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#22c55e,#4ade80)}

/* -- Economics / compare -- */
.compare{display:grid;gap:18px}
.cmp-card{border-radius:var(--radius-lg);padding:28px 26px}
.cmp-old{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.cmp-new{
  background:linear-gradient(165deg,rgba(34,197,94,.14),rgba(34,197,94,.05));
  border:1px solid rgba(34,197,94,.35);
  box-shadow:0 20px 50px rgba(34,197,94,.1);
}
.cmp-card h3{font-size:1.1rem;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.cmp-card h3 svg{width:22px;height:22px;flex-shrink:0;padding:3px;border-radius:8px}
.cmp-old h3 svg{stroke:#f87171;background:rgba(248,113,113,.14)}
.cmp-new h3 svg{stroke:#4ade80;background:rgba(34,197,94,.16)}
.cmp-card ul{list-style:none}
.cmp-card li{
  display:flex;gap:11px;align-items:flex-start;padding:8px 0;
  color:rgba(232,238,255,.72);font-size:.93rem;
}
.cmp-card li svg{width:17px;height:17px;flex-shrink:0;margin-top:4px}
.cmp-old li svg{stroke:#f87171}
.cmp-new li svg{stroke:#4ade80}
.cmp-old .price,.cmp-new .price{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--font-d);font-weight:700;
}
.cmp-old .price{color:#fca5a5}
.cmp-new .price{color:#86efac;border-top-color:rgba(34,197,94,.25)}

/* -- Stats band -- */
.stats-band{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.stat{
  text-align:center;padding:22px 10px;border-radius:var(--radius);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
}
.stat b{display:block;font-family:var(--font-d);font-size:clamp(1.6rem,5vw,2.3rem);font-weight:800;color:#fff}
.stat b em{font-style:normal;color:var(--green-lt)}
.stat span{font-size:.8rem;color:rgba(232,238,255,.55)}

/* -- Steps -- */
.steps{display:grid;gap:14px;counter-reset:step}
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;position:relative;box-shadow:var(--shadow-sm);counter-increment:step;
}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-d);font-weight:800;font-size:.8rem;letter-spacing:.1em;
  color:var(--green);background:var(--green-tint);border:1px solid var(--green-line);
  border-radius:999px;padding:4px 13px;display:inline-block;margin-bottom:13px;
}
.step h3{font-size:1.02rem;margin-bottom:6px}
.step p{font-size:.9rem;color:var(--ink-soft)}

/* -- Quote / manifesto -- */
.manifesto{
  max-width:760px;margin:0 auto;text-align:center;
  font-family:var(--font-d);font-weight:600;
  font-size:clamp(1.25rem,3.6vw,1.8rem);line-height:1.5;color:var(--ink);
}
.manifesto em{font-style:normal;color:var(--green)}
.sec-dark .manifesto{color:#e8eeff}
.sec-dark .manifesto em{color:var(--green-lt)}

/* -- CTA banner -- */
.cta-banner{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(150deg,#0d1830,#080f24);
  border:1px solid rgba(255,255,255,.1);
  padding:52px 26px;text-align:center;color:#fff;
}
.cta-banner::before{
  content:"";position:absolute;width:480px;height:480px;border-radius:50%;
  background:rgba(34,197,94,.14);filter:blur(80px);top:-220px;right:-140px;
}
.cta-banner h2{color:#fff;position:relative}
.cta-banner p{position:relative;color:rgba(232,238,255,.66);max-width:520px;margin:14px auto 28px}
.cta-banner .btn-row{position:relative;display:flex;flex-direction:column;gap:12px;align-items:center}
.cta-banner .btn-row .btn{width:100%;max-width:320px}

/* ============ Footer ============ */
.site-foot{background:var(--navy);color:rgba(232,238,255,.6);padding:56px 0 34px;font-size:.9rem}
.site-foot .cols{display:grid;gap:34px;margin-bottom:40px}
.site-foot h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.site-foot a{display:block;color:rgba(232,238,255,.6);padding:5px 0}
.site-foot a:hover{color:#fff}
.site-foot .blurb{max-width:300px;font-size:.88rem;line-height:1.7}
.site-foot .base{
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;flex-direction:column;gap:10px;font-size:.8rem;color:rgba(232,238,255,.4);
}

/* ============ Modal ============ */
.modal-bg{
  position:fixed;inset:0;z-index:300;background:rgba(8,15,36,.62);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s;padding:0;
}
.modal-bg.open{opacity:1;pointer-events:auto}
.modal{
  background:#fff;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;
  border-radius:22px 22px 0 0;padding:28px 22px 30px;position:relative;
  transform:translateY(24px);transition:transform .28s cubic-bezier(.2,.8,.24,1);
  overscroll-behavior:contain;
}
.modal-bg.open .modal{transform:translateY(0)}
body.modal-open{overflow:hidden}
.modal h2{font-size:1.3rem;margin-bottom:6px}
.modal .m-sub{color:var(--ink-soft);font-size:.9rem;margin-bottom:20px}
.modal .close-x{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  border:none;background:var(--mist);color:var(--ink-soft);font-size:1.15rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.modal .close-x:hover{background:var(--mist-2);color:var(--ink)}
.fld{margin-bottom:15px}
.fld label{display:block;font-weight:600;font-size:.82rem;margin-bottom:6px;color:var(--ink)}
.fld input,.fld select,.fld textarea{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:16px;font-family:var(--font-b);color:var(--ink);background:#fff;
  outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;
}
.fld select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2346536b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--green-br);box-shadow:0 0 0 4px rgba(34,197,94,.14);
}
.fld textarea{min-height:96px;resize:vertical}
.fld-row{display:grid;gap:0}
.modal .send-row{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.modal .send-row .btn{width:100%}
.modal .fine{font-size:.76rem;color:var(--ink-faint);margin-top:14px;text-align:center}
.modal .okay{
  display:none;text-align:center;padding:26px 6px 10px;
}
.modal .okay .big-check{
  width:64px;height:64px;border-radius:50%;margin:0 auto 18px;
  background:var(--green-tint);border:1.5px solid var(--green-line);
  display:flex;align-items:center;justify-content:center;
}
.modal .okay .big-check svg{width:30px;height:30px;stroke:var(--green)}
.modal.sent .okay{display:block}
.modal.sent .m-form{display:none}

/* ============ Reveal on scroll ============ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* -- page hero (inner pages) -- */
.page-hero{
  background:var(--navy);color:#e8eeff;padding:128px 0 64px;position:relative;overflow:hidden;
}
.page-hero .glow{position:absolute;width:460px;height:460px;border-radius:50%;background:rgba(34,197,94,.13);filter:blur(90px);top:-180px;right:-120px;pointer-events:none}
.page-hero h1{color:#fff;font-size:clamp(1.95rem,6.4vw,3.1rem);letter-spacing:-.02em}
.page-hero .lead{color:rgba(232,238,255,.7);max-width:640px;margin-top:16px}
.page-hero .inner{position:relative}

/* -- misc -- */
.center{text-align:center}
.mt-6{margin-top:24px}.mt-10{margin-top:40px}
.note-strip{
  display:flex;gap:12px;align-items:flex-start;background:var(--green-tint);
  border:1px solid var(--green-line);border-radius:var(--radius);padding:18px 20px;
  font-size:.92rem;color:#14532d;
}
.note-strip svg{width:20px;height:20px;flex-shrink:0;stroke:var(--green);margin-top:2px}

/* ============================================================
   >= 640px
   ============================================================ */
@media (min-width:640px){
  .aud-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats-band{grid-template-columns:repeat(4,1fr)}
  .hero .cta-row{flex-direction:row;justify-content:center}
  .hero .cta-row .btn{width:auto}
  .cta-banner .btn-row{flex-direction:row;justify-content:center}
  .cta-banner .btn-row .btn{width:auto}
  .modal-bg{align-items:center;padding:22px}
  .modal{border-radius:22px;padding:26px 30px 24px;max-width:600px}
  .fld-row{grid-template-columns:1fr 1fr;gap:14px}
  .modal .send-row{flex-direction:row}
  .site-foot .cols{grid-template-columns:1fr 1fr}
  .faux{font-size:.78rem}
  .faux .f-stats{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   >= 900px
   ============================================================ */
@media (min-width:900px){
  .sec{padding:104px 0}
  .burger{display:none}
  .nav-links{
    display:flex;align-items:center;gap:4px;
  }
  .nav-links a{
    padding:9px 15px;border-radius:999px;font-weight:600;font-size:.92rem;
    color:rgba(232,238,255,.78);transition:.15s;
  }
  .nav-links a:hover{color:#fff;background:rgba(255,255,255,.09)}
  .nav-links a.now{color:#4ade80}
  .site-head.solid .nav-links a{color:var(--ink-soft)}
  .site-head.solid .nav-links a:hover{color:var(--ink);background:var(--mist)}
  .site-head.solid .nav-links a.now{color:var(--green)}
  .head-cta{display:inline-flex}
  .aud-grid{grid-template-columns:repeat(3,1fr)}
  .feat-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1fr 1fr;gap:64px}
  .split.flip .txt{order:2}
  .split.flip .vis{order:1}
  .compare{grid-template-columns:1fr 1fr}
  .site-foot .cols{grid-template-columns:2fr 1fr 1fr 1fr}
  .site-foot .base{flex-direction:row;justify-content:space-between}
  .faux{min-height:340px}
  .faux .f-nav{
    display:block;width:170px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.08);
    padding:14px 10px;background:rgba(0,0,0,.18);
  }
  .faux .f-brand{display:flex;align-items:center;gap:8px;padding:4px 8px 14px;font-family:var(--font-d);font-weight:800;color:#fff;font-size:.85rem}
  .faux 
  .faux .f-brand em{font-style:normal;color:#4ade80}
  .faux .f-item{padding:7px 10px;border-radius:8px;color:rgba(232,238,255,.55);margin-bottom:2px;font-size:.7rem}
  .faux .f-item.on{background:rgba(34,197,94,.13);color:#4ade80;font-weight:600}
  .faux .f-main{padding:20px 24px}
  .page-hero{padding:150px 0 84px}
  .hero{padding-top:140px}
  .nw{white-space:nowrap}
}

/* ============================================================
   >= 1200px
   ============================================================ */
@media (min-width:1200px){
  .feat-grid.four{grid-template-columns:repeat(4,1fr)}
}


/* ---------------------------------------------------------------------------
   [108] Demo modal: fit on one screen, no inner scrolling.

   The form is short enough to read at a glance, so making the visitor scroll
   inside a dialog to find the Send button was costing us submissions. These
   rules trim the vertical padding rather than the content.

   max-height and overflow stay as a safety net for very short windows and for
   anyone running large text, because a clipped form is worse than a scrolling
   one. The aim is that the net is never needed at ordinary sizes.
--------------------------------------------------------------------------- */
@media (min-width:640px){
  .modal h2{font-size:1.22rem;margin-bottom:4px}
  .modal .m-sub{margin-bottom:14px;font-size:.86rem;line-height:1.45}
  .modal .fld{margin-bottom:11px}
  .modal .fld label{margin-bottom:4px;font-size:.8rem}
  .modal .fld input,
  .modal .fld select{padding:10px 13px}
  .modal .fld textarea{min-height:62px;padding:10px 13px}
  .modal .send-row{margin-top:14px}
  .modal .fine{margin-top:10px}
}

/* Laptops with short screens, and anything in a half height window. */
@media (min-width:640px) and (max-height:800px){
  .modal{padding:20px 28px 20px}
  .modal .m-sub{margin-bottom:10px}
  .modal .fld{margin-bottom:9px}
  .modal .fld textarea{min-height:52px}
  .modal .send-row{margin-top:11px}
  .modal .fine{margin-top:8px;font-size:.72rem}
}


/* ---------------------------------------------------------------------------
   [108] Two small additions for the platform page.

   .sec-sub  a sentence under a section heading, before the card grid. The
             meetings section needs one line of context that a card cannot
             carry, because "class video" means something different in every
             product a school has been sold.
   .sec-note a closing note under a grid. Used to carry the honest bit about
             the ten person cap and why it exists, which belongs on the page
             rather than in a footnote nobody reads.
--------------------------------------------------------------------------- */
.sec-sub{
  max-width:62ch;margin:10px 0 0;font-size:1.02rem;line-height:1.6;
  color:var(--ink-soft)
}
.sec-dark .sec-sub{color:rgba(232,238,255,.78)}

.sec-note{
  max-width:74ch;margin:26px auto 0;font-size:.92rem;line-height:1.65;
  color:var(--ink-faint);text-align:center
}
.sec-dark .sec-note{color:rgba(232,238,255,.62)}


/* ===========================================================================
   [109] EDITORIAL THEME.

   Applies the direction from redesign-concept.html to the live site.

   HOW THIS IS DONE, AND WHY
   This is an override block appended to the end of the original stylesheet
   rather than a rewrite of it. Two reasons:

     1. Every page already uses the same semantic classes, so retokenising and
        overriding about twenty rules restyles all six pages at once with no
        markup changes. Rewriting six pages of HTML to change a colour scheme
        would be a lot of risk for no extra benefit.
     2. It is reversible. Delete everything below this comment and the site is
        exactly as it was.

   WHAT CHANGES
     Dark navy technology look  ->  light, warm, editorial.
     Geometric sans headlines   ->  serif headlines.
     The green stays. It is the only brand equity there is.

   THE ARGUMENT
   Dark navy with a green accent is the house style of every developer tool of
   the last decade. The people signing this contract are superintendents and
   school boards buying the system that will hold student records for a
   decade. They want it to look like an institution, not a launch.
   =========================================================================== */

:root{
  /* Warm paper instead of clinical white, and a deeper forest green that
     holds up as body-adjacent text rather than only as an accent. */
  --paper:     #faf8f4;
  --mist:      #f2efe8;
  --mist-2:    #e9e4d9;
  --line:      #ded6c8;

  --ink:       #1a1f1c;
  --ink-soft:  #4c5750;
  --ink-faint: #7d8a82;

  --navy:      #1f5130;   /* every dark band becomes forest, not navy */
  --navy-2:    #24603a;

  --green:     #1f5130;
  --green-br:  #2c7a45;
  --green-lt:  #8fb46a;
  --green-tint:#eef3e8;
  --green-line:#cfe0c4;

  /* Serif headlines. Georgia ships everywhere and needs no web font, so the
     page keeps working with no network and nothing to block. */
  --font-d: Georgia, 'Times New Roman', serif;

  --radius:    6px;      /* editorial, not app-like */
  --radius-lg: 8px;
  --shadow-sm: none;
  --shadow-md: 0 1px 2px rgba(26,31,28,.06);
  --shadow-lg: 0 10px 40px rgba(26,31,28,.14);
}

/* Headlines: serif, and lighter than 800, which is what makes a serif read as
   considered rather than shouted. */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em}
h1{letter-spacing:-.03em}

/* The kicker rule under section labels was a small accent stripe. Editorial
   layouts do not need one, and it is the single most common tell of a
   generated page. */
.kicker::before{display:none}
.kicker{font-family:var(--font-b);letter-spacing:.16em;font-size:.7rem}

/* HERO: the biggest change. Was a dark navy panel with blurred glows and a
   grid overlay. Now paper, so the headline carries the page on its own. */
.hero{background:var(--paper);color:var(--ink);padding:96px 0 0}
.hero .glow,.hero .grid-lines{display:none}
.hero h1{color:var(--ink)}
.hero h1 .grad{
  background:none;-webkit-text-fill-color:currentColor;color:var(--green);
}
/* Left align the hero text, but KEEP the block centred. Setting margin:0 here
   pulls the hero hard against the left edge of the viewport while every other
   section stays centred in .wrap, which reads as a broken page rather than an
   editorial one. */
.hero .inner{text-align:left}
.hero .cta-row{align-items:flex-start}
.hero .lead{margin-left:0}
.hero p{color:var(--ink-soft)}

/* Everything inside a hero was painted for a dark panel: near white lede,
   faint white micro text, a white bordered ghost button, and a pale green
   badge. On paper all of those are close to invisible. This repaints the lot.
   Found by rendering the real page rather than by reading the stylesheet. */
.hero .lead{color:var(--ink-soft);margin-left:0;margin-right:0}
.hero .micro{color:var(--ink-faint)}
.hero .hero-badge{
  background:var(--green-tint);border-color:var(--green-line);color:var(--green);
}
.hero .hero-badge .dot{background:var(--green-br);box-shadow:none;animation:none}

/* .btn-ghost-d still has to be white on the dark bands where it is also used,
   so this is scoped to the hero rather than changed globally. */
.hero .btn-ghost-d{
  background:transparent;color:var(--ink);border:1.5px solid var(--line);
}
.hero .btn-ghost-d:hover{background:var(--mist);color:var(--ink)}

/* Inner page heroes get the same treatment, or the home page is paper and
   every other page still opens on a dark slab. */
.page-hero{background:var(--paper);color:var(--ink);padding:112px 0 56px}
.page-hero .glow{display:none}
.page-hero h1{color:var(--ink)}
.page-hero .lead{color:var(--ink-soft)}

/* HEADER: it used to sit transparent over a dark hero and turn solid on
   scroll. Over a light hero it has to be legible from the first pixel. */
.site-head{background:rgba(250,248,244,.92);border-bottom-color:var(--line)}
.site-head .brand{color:var(--ink)}
.site-head .brand em{color:var(--green)}
.site-head .burger span{background:var(--ink)}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover,.nav-links a.now{color:var(--ink);background:var(--mist)}

/* Buttons: flat and solid. A gradient with a coloured glow is app chrome. */
.btn-green{background:var(--green);box-shadow:none}
.btn-green:hover{background:#2c7a45;filter:none;transform:none}
.btn-ghost-d{background:transparent;border-color:rgba(255,255,255,.45)}
.btn-ghost-l{background:transparent;border:1.5px solid var(--line);color:var(--ink)}

/* Cards: hairline rules instead of floating panels. */
.feat-card{background:transparent;border:0;border-top:2px solid var(--ink);
  border-radius:0;padding:16px 0 0;box-shadow:none}
.feat-card:hover{transform:none;box-shadow:none}
.sec-dark .feat-card{border-top-color:rgba(255,255,255,.5)}
.feat-card h3{font-family:var(--font-b);font-weight:700;font-size:1.02rem}

/* Section rhythm: more air between bands, which is what makes a light layout
   read as designed rather than as a long page. */
.sec{padding:88px 0}
.sec-mist{background:var(--mist)}
.sec-dark{background:var(--navy);color:#eaf1e4}

/* The icon chips were coloured circles behind glyphs. At this weight they
   fight the hairline cards, so they lose the fill and keep the mark. */
.ico{background:transparent !important;border:0 !important;
  width:auto;height:auto;margin-bottom:10px;color:var(--green)}
.sec-dark .ico{color:var(--green-lt)}


/* ---------------------------------------------------------------------------
   [109] Content must not depend on JavaScript to be visible.

   Every content block carries class="rv", which was opacity:0 until a script
   added .in on scroll. If that script fails to load or is blocked, the entire
   site is blank below the hero. On a school network with a filtering proxy,
   or an old browser, that is a page that looks broken rather than a page
   missing an animation.

   Now the default is visible, and the animation only arms itself once the
   script has confirmed it is running by putting a class on <html>. Fade in if
   you can, readable if you cannot.
--------------------------------------------------------------------------- */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(22px)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
}


/* ---------------------------------------------------------------------------
   [109] Legibility inside dark sections.

   Body text across the site is painted with --ink-soft or --ink-faint, which
   is correct on paper and unreadable on the forest bands. It never showed
   before because no dark section used cards; the meetings section is the
   first, so the fault appeared with it rather than being caused by it.

   Rather than patch each rule as it is noticed, this repaints every text
   colour inside .sec-dark in one place. Anything added to a dark section
   later inherits the fix instead of shipping unreadable.

   Contrast targets: body text at 82% white on #1f5130 is about 8:1, headings
   are pure white. Both clear WCAG AA comfortably, which matters here because
   we make no accessibility claim and should at least not be careless.
--------------------------------------------------------------------------- */
.sec-dark p,
.sec-dark li,
.sec-dark .lead,
.sec-dark .sec-sub,
.sec-dark .feat-card p,
.sec-dark .aud-card p,
.sec-dark .step p,
.sec-dark .split .txt p,
.sec-dark .split .txt .ticks li{
  color:rgba(255,255,255,.84);
}

.sec-dark h2,.sec-dark h3,.sec-dark h4,
.sec-dark .feat-card h3,
.sec-dark .aud-card h3{color:#fff}

/* The closing note under a grid sits quieter than body text, but it was the
   least readable thing on the page. Quiet, not invisible. */
.sec-dark .sec-note{color:rgba(255,255,255,.72)}

.sec-dark .kicker{color:var(--green-lt)}
.sec-dark .tag{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9)}

/* [111] Contact modal: school + state on one row.
   .fld-row is a plain 1fr 1fr grid, which gives a school name input the same
   width as a two letter state code. split-wide weights it 2:1 so the field
   people actually type into keeps its room. Declared inside the same
   breakpoint as .fld-row itself, because below that width every field is
   full width anyway and the modifier would do nothing. */
@media (min-width:700px){
  .fld-row.split-wide{grid-template-columns:2fr 1fr}
}

/* [112] STATE COMBOBOX
   A native select renders its option list as an operating system popup that
   CSS cannot reach. The browser alone decides which way it opens, and with 52
   options inside a modal it chose upward, covering the page above.

   This replaces the LIST only, never the field. The real select stays in the
   DOM, keeps its name, and remains the value the form reads, so with
   JavaScript off the control still works exactly as it did before.

   The list is position:fixed and lives on body rather than inside .fld,
   because .modal is overflow-y:auto and a list nested in the field would have
   made the modal scroll to show itself. */
.cbx-btn{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 40px 12px 14px;
  font-size:16px;font-family:var(--font-b);color:var(--ink);background:#fff;
  text-align:left;cursor:pointer;outline:none;position:relative;
  transition:border-color .15s,box-shadow .15s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2346536b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.cbx-btn:focus{border-color:var(--green-br);box-shadow:0 0 0 4px rgba(34,197,94,.14)}
.cbx-btn.empty{color:var(--ink-soft)}

.cbx-list{
  position:fixed;z-index:2147483000;display:none;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  box-shadow:0 12px 34px rgba(16,24,40,.16);
  max-height:240px;overflow-y:auto;overscroll-behavior:contain;
  padding:6px;margin:0;list-style:none;
}
.cbx-list.open{display:block}
.cbx-opt{
  padding:9px 12px;border-radius:8px;font-size:15px;color:var(--ink);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cbx-opt.cur{background:var(--mist)}
.cbx-opt.sel{font-weight:700;color:var(--forest)}

@media (max-width:699px){
  .cbx-btn{padding:10px 38px 10px 13px}
}


/* ---------------------------------------------------------------------------
   [113] Home page: "A Tuesday, start to finish" and "The window".  14 Sep 2026.

   The module marquee under the hero (a looping belt of twenty chips) is gone.
   A belt says "we have a lot of features"; nobody reads a moving list. In its
   place, one school day laid along a rail, seven moments from the bus at
   6:52 to a form signed on the couch at 9:12, each one naming the module
   that did it. The rail fills and the moments light in turn as the visitor
   scrolls (the --p custom property, set by the inline script on index.aspx;
   without the script every moment is lit and the rail is full).

   Further down, "The window": what the school did on the left, what the
   family saw on the right, joined through the mark. Hover a row and its pair
   lights; left alone the pairs take turns. It is the logo explained without
   a paragraph: dark square school, green square home, lit window shared.
--------------------------------------------------------------------------- */

/* --- the day ------------------------------------------------------------ */
.day{position:relative;--p:1;--vert:0;padding-top:6px}
.day .rail{position:absolute;left:0;right:0;top:32px;height:3px;background:var(--line);border-radius:3px}
.day .rail i{
  position:absolute;left:0;top:0;height:100%;width:calc(var(--p) * 100%);
  background:var(--green-br);border-radius:2px;transition:width .35s linear;
}
.moments{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.mo{position:relative;padding-top:32px}
.mo .t{
  position:absolute;top:0;left:12px;font-family:var(--font-b);font-weight:700;
  font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint);
}
.mo .dot{
  position:absolute;top:26px;left:20px;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--line);z-index:1;
  transition:border-color .4s,background .4s,box-shadow .4s;
}
.mo.on .dot{border-color:var(--green-br);background:#22c55e;box-shadow:0 0 0 5px rgba(44,122,69,.16)}
.mo.on .t{color:var(--green)}
.mo .card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px 14px 14px;margin-top:22px;min-height:100%;
  opacity:.62;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease,border-color .5s ease,box-shadow .5s ease;
}
.mo.on .card{
  opacity:1;transform:none;border-color:var(--green-line);
  box-shadow:0 10px 30px rgba(31,81,48,.10);
}
.mo .ic{width:34px;height:34px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.mo .ic svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mo h3{font-family:var(--font-b);font-weight:700;font-size:.98rem;letter-spacing:0;margin-bottom:5px}
.mo p{font-size:.82rem;line-height:1.5;color:var(--ink-soft);margin:0}
.mo .mod{
  display:inline-block;margin-top:10px;font-family:var(--font-b);font-weight:700;
  font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);
  background:var(--green-tint);border:1px solid var(--green-line);border-radius:999px;padding:3px 9px;
}
/* Narrower than 1000px the seven columns have no room, so the day turns into
   a vertical timeline: rail down the left, the reader walks down it. */
@media (max-width:999px){
  .day{--vert:1;max-width:560px;margin:0 auto;padding:4px 0 0 30px}
  .day .rail{left:6px;right:auto;top:8px;bottom:8px;width:3px;height:auto}
  .day .rail i{width:100%;height:calc(var(--p) * 100%);transition:height .35s linear}
  .moments{grid-template-columns:1fr;gap:0}
  .mo{padding:0 0 22px 0}
  .mo .t{position:static;display:block;margin:0 0 6px 2px}
  .mo .dot{top:3px;left:-31px}
  .mo .card{margin-top:0;min-height:0;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:start}
  .mo .ic{grid-row:1 / span 3;margin:2px 0 0}
  .mo h3,.mo p,.mo .mod{grid-column:2}
  .mo .mod{justify-self:start;margin-top:6px}
  .mo p{font-size:.9rem}
}

/* --- the window --------------------------------------------------------- */
.win{
  position:relative;display:grid;grid-template-columns:1fr 150px 1fr;
  align-items:center;column-gap:0;row-gap:10px;color:var(--ink);
}
.win .k12-mark{
  position:absolute;left:50%;top:50%;width:104px;height:104px;
  transform:translate(-50%,-46%);z-index:2;
}
.wh{
  font-family:var(--font-b);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px;
}
.wh.r{text-align:right}
.wrow{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:12px 14px;font-size:.9rem;color:var(--ink-soft);
  transition:border-color .45s,box-shadow .45s,transform .45s;
}
.wrow b{color:var(--ink);font-weight:600}
.wrow .who{
  width:30px;height:30px;border-radius:var(--radius);background:var(--mist);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-b);font-weight:700;font-size:.7rem;color:var(--ink-soft);
}
.wrow.r{flex-direction:row-reverse;text-align:right}
.wrow.r .who{background:var(--green-tint);color:var(--green)}
.wrow:focus{outline:none}
.wrow.on,.wrow:focus-visible{
  border-color:var(--green-line);box-shadow:0 10px 30px rgba(31,81,48,.12);transform:translateY(-1px);
}
.wire{position:relative;display:block;height:2px;background:var(--line);transition:background .45s}
.wire.on{background:#22c55e}
.wire.on::before,.wire.on::after{
  content:"";position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:#22c55e;
}
.wire.on::before{left:-5px}
.wire.on::after{right:-5px}
/* Under 700px the two columns stack as pairs: the school's row, then the
   home's answer tucked under it on a short green stem, with the mark above. */
@media (max-width:699px){
  .win{grid-template-columns:1fr;row-gap:0;max-width:520px;margin:0 auto}
  .win .k12-mark{position:static;width:64px;height:64px;transform:none;margin:0 auto 20px}
  .wh.r,.wh:not(.l):not(.r){display:none}
  .wh.l{margin-bottom:10px}
  .wrow{margin:0}
  .wrow.r{flex-direction:row;text-align:left;margin:0 0 18px 22px;background:var(--green-tint);border-color:var(--green-line)}
  .wire{width:2px;height:14px;margin-left:24px}
  .wire.on::before,.wire.on::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mo .card,.mo .dot,.wrow,.wire,.day .rail i{transition:none}
}