:root{
  color-scheme:light dark;
  --ink:#1a2337; --muted:#5a6172; --paper:#f2f1ee; --card:#ffffff; --line:#e4e1da;
  --gold:#b89968; --gold-ink:#7a5f2e; --gold-soft:#f6eeda;
  --navy:#1a2337; --on-navy:#eef1f7; --navy-muted:#b6c0d2;
  --blue:#0b5fbf; --focus:#0b5fbf; --good-ink:#1c6b4a; --good-soft:#e7f2ec;
  --exam-ink:#a32020; --exam-soft:#fbeceb;
  --shadow:0 1px 2px rgba(26,35,55,.05),0 10px 30px -18px rgba(26,35,55,.28);
  --radius:20px;
}
@media(prefers-color-scheme:dark){:root{
  --ink:#eaeef6; --muted:#a6afc0; --paper:#141a26; --card:#1b2231; --line:#2a3243;
  --gold:#d4b483; --gold-ink:#d4b483; --gold-soft:#2a2418;
  --navy:#0f1420; --on-navy:#eef1f7; --navy-muted:#aab5c8;
  --blue:#7ab4f5; --focus:#7ab4f5; --good-ink:#7fd3ab; --good-soft:#14261d;
  --exam-ink:#ff9d95; --exam-soft:#33201e;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 34px -18px rgba(0,0,0,.7);
}}
/* The front door, drawn from Bell's own palette rather than a marketing template: Theme.navy
   (#1a2337) and Theme.gold (#b89968) are the two colours the iPhone app is built from, and the
   ground below repeats ScreenBackground's signature , a soft warm grey with gold bleeding in from
   opposite corners. No external font, no script, no image but the app's own icon, so the page
   renders identically on a school laptop, a phone and a locked-down Chromebook. */
*{box-sizing:border-box}
html{font:17px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--paper);
  background-image:radial-gradient(760px 560px at 0% 0%,rgba(184,153,104,.16),transparent 70%),
                   radial-gradient(700px 520px at 100% 12%,rgba(184,153,104,.08),transparent 70%);
  background-repeat:no-repeat}
a{color:var(--ink);text-underline-offset:3px}
main p a,footer a,.note a{color:var(--blue)}
h1,h2,h3{line-height:1.12;letter-spacing:-.028em;margin:0 0 .5rem;text-wrap:balance}
h1{font-size:clamp(2.3rem,6.4vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.45rem,3.3vw,2.05rem);font-weight:800}
h3{font-size:1.06rem;font-weight:700;letter-spacing:-.012em}
p,li{max-width:64ch}
main,header,footer,.band-inner{max-width:1120px;margin:0 auto;padding:0 22px}

/* header ------------------------------------------------------------------ */
header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;flex-wrap:wrap}
header nav{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center}
header nav a{color:var(--muted);text-decoration:none;font-size:.95rem;padding:6px 2px;border-bottom:2px solid transparent}
header nav a:hover{color:var(--ink);border-bottom-color:var(--gold)}
header nav a.cta{color:#fff;background:var(--navy);border:0;border-radius:999px;padding:10px 18px;font-weight:650}
header nav a.cta:hover{background:var(--gold-ink);color:#fff}
/* The mark is the app's own icon file. Bell has one logo and this is it. */
.brand{font-weight:800;font-size:1.3rem;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:11px;letter-spacing:-.03em}
.brand img{width:36px;height:36px;border-radius:9px;display:block;box-shadow:var(--shadow)}
.brand small{font-weight:500;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-top:2px}
.brand span{display:flex;flex-direction:column;line-height:1.05}

/* hero -------------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;padding:38px 0 12px}
.hero-copy{min-width:0}
.hero h1{max-width:14ch}
.hero .lede{font-size:clamp(1.06rem,1.9vw,1.24rem);color:var(--muted);max-width:54ch;margin:.85rem 0 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-ink);background:var(--gold-soft);border-radius:999px;padding:7px 14px;margin-bottom:20px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}
.btn{font:inherit;font-weight:650;min-height:50px;display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;background:var(--navy);color:#fff;
  text-decoration:none;cursor:pointer;transition:transform .16s ease,background .16s ease;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px);background:var(--gold-ink);color:#fff}
.btn.quiet{background:var(--card);color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.quiet:hover{background:var(--card);color:var(--ink);border-color:var(--gold)}

/* the phone: a real screenshot from the iOS Simulator in a drawn frame. No mock-up, no stock
   photo: what a school sees here is the app they will get, with fictional pupils in it. */
.phone{justify-self:center;width:min(330px,100%);border-radius:46px;padding:10px;background:var(--navy);
  box-shadow:0 2px 6px rgba(26,35,55,.2),0 34px 70px -30px rgba(26,35,55,.55)}
.phone img{display:block;width:100%;height:auto;border-radius:36px}

/* the tour: one stop per screen. Each stop is tall and its phone is sticky, so the phone holds
   still while you read and is replaced by the next as you carry on. Pure CSS, so the page keeps
   its promise of no script at all. */
.tour{padding:8px 0 0}
.stop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:48px;align-items:center;
  padding:34px 0;border-top:1px solid var(--line)}
.stop:first-child{border-top:0}
.stop-copy{min-width:0;max-width:46ch}
.stop-copy h2{margin-top:.4rem}
.stop-copy p{color:var(--muted);margin:0}
.step{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;color:var(--gold-ink)}
@media(min-width:901px){
  .stop{min-height:82vh;padding:0}
  .stop .phone{position:sticky;top:calc(50vh - 320px)}
}

/* sections ---------------------------------------------------------------- */
section{padding:44px 0;border-top:1px solid var(--line)}
section>p{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:18px;margin-top:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);
  transition:transform .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-2px);border-color:var(--gold)}
.card h3{margin-top:0}
.card p{color:var(--muted);margin-bottom:0}
.card .price{display:block;font-size:1.65rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:2px 0 8px}
.card .price small{font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:0}
.tick{list-style:none;padding:0;margin:14px 0 0}
.tick li{position:relative;padding-left:26px;margin:9px 0;color:var(--muted)}
.tick li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;border:2px solid var(--good-ink);
  border-top:0;border-right:0;transform:rotate(-45deg)}

/* the students band ------------------------------------------------------- */
/* Full bleed from inside the centred column, so the page keeps ONE <main> landmark. The colour is
   the app icon's own navy, and the bell above it is that icon. */
.band{background:var(--navy);color:var(--on-navy);margin:44px 0 0;border-top:1px solid var(--line);
  width:100vw;margin-left:calc(50% - 50vw);padding:0}
.band-inner{padding-top:48px;padding-bottom:48px}
.band-mark{width:44px;height:44px;border-radius:11px;display:block;margin:0 0 16px}
.band h2{color:var(--on-navy)}
.band p{color:var(--navy-muted)}
.band .grid{margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.band .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);box-shadow:none;color:var(--on-navy)}
.band .card:hover{border-color:var(--gold)}
.band .card h3{color:var(--on-navy)}
.band .card p{color:var(--navy-muted)}

/* forms and results ------------------------------------------------------- */
form.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
label{display:flex;flex-direction:column;gap:6px;font-size:.93rem;color:var(--muted);min-width:min(100%,220px);flex:1}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:12px 14px;min-height:50px;width:100%}
textarea{min-height:120px;resize:vertical}
button{font:inherit;font-weight:650;min-height:50px;padding:13px 24px;border-radius:999px;border:0;
  background:var(--navy);color:#fff;cursor:pointer;transition:background .16s ease}
button:hover{background:var(--gold-ink);color:#fff}
button.quiet{background:transparent;color:var(--ink);border:1px solid var(--line)}
:is(a,button,input,select,textarea):focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:10px}
.results{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.results li{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:15px 17px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.results small{color:var(--muted)}
.note{color:var(--muted);font-size:.93rem}
.error{color:var(--exam-ink);background:var(--exam-soft);border:1px solid var(--line);border-radius:13px;padding:12px 14px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:650}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
footer{padding:36px 22px 52px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);margin-top:0}
footer p{max-width:none}
footer a{color:var(--muted)}
.legal h2{margin-top:1.6rem}
.legal ul{padding-left:1.2rem}
.table-scroll{overflow-x:auto}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:34px;padding-top:26px}
  .hero h1{max-width:none}
  .phone{order:2}
  /* Two columns at 390px leaves a 180px column of text. One column, phone under the words. */
  .stop{grid-template-columns:1fr;gap:24px;padding:28px 0}
  .stop .phone{width:min(268px,74%);order:2}
  .stop-copy{max-width:none}
}
@media(max-width:640px){
  header{padding:16px 20px}
  header nav{gap:4px 13px}
  section{padding:34px 0}
  main,header,footer,.band-inner{padding:0 20px}
  footer{padding:32px 20px 46px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .btn:hover,.card:hover{transform:none}
}