:root{
  color-scheme:light dark;
  --ink:#0a0a0a; --muted:#585858; --paper:#f5f5f5; --card:#ffffff; --line:#e2e2e2;
  --gold:#ffd84d; --gold-ink:#6b4f00; --gold-soft:#fff4cc;
  --navy:#0a0a0a; --on-navy:#ffffff; --navy-muted:#b8b8b8;
  --blue:#0a0a0a; --focus:#0a0a0a; --good-ink:#1c6b4a; --good-soft:#e7f2ec;
  --exam-ink:#a32020; --exam-soft:#fbeceb;
  --marker:#ffe066; --note:#fff4cc; --rule:rgba(0,0,0,.08);
  --shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px -18px rgba(0,0,0,.35);
  --radius:20px;
}
@media(prefers-color-scheme:dark){:root{
  --ink:#ffffff; --muted:#a9a9a9; --paper:#000000; --card:#141414; --line:#2b2b2b;
  --gold:#ffd84d; --gold-ink:#ffd84d; --gold-soft:#2a2413;
  --navy:#000000; --on-navy:#ffffff; --navy-muted:#adadad;
  --blue:#ffffff; --focus:#ffd84d; --good-ink:#7fd3ab; --good-soft:#14261d;
  --exam-ink:#ff9d95; --exam-soft:#33201e;
  --marker:#6b5a1e; --note:#2a2413; --rule:rgba(255,255,255,.07);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 34px -18px rgba(0,0,0,.85);
}}
/* The front door is black and white wherever it is structure, and colour is spent only where it
   reports something: a highlighter is yellow because that is what a highlighter is, a tick is
   green, overdue work is red. No external font, no script, no image but the app's own, 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(0,0,0,.05),transparent 70%),
                   radial-gradient(700px 520px at 100% 12%,rgba(0,0,0,.03),transparent 70%);
  background-repeat:no-repeat}
@media(prefers-color-scheme:dark){body{
  background-image:radial-gradient(760px 560px at 0% 0%,rgba(255,216,77,.06),transparent 70%),
                   radial-gradient(700px 520px at 100% 12%,rgba(255,255,255,.04),transparent 70%)}}
a{color:var(--ink);text-underline-offset:3px}
/* The browser's own highlight paints a light box and leaves the text colour where it was, so
   selecting white-on-navy words (a badge, a button, anything in the band) drew white on light grey
   and the words disappeared. Naming BOTH halves fixes every one of them at once, and the
   highlighter the page already draws under a word is the obvious colour to do it in. */
::selection{background:var(--marker);color:var(--ink)}
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:var(--paper)}
/* 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}
.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}
/* Shaped like the tags the app puts on a piece of work, not like a marketing eyebrow: sentence
   case, no tracking, a dot instead of shouting. The uppercase version was the only thing on the
   page that appeared nowhere in the product. */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:650;letter-spacing:-.005em;
  color:var(--gold-ink);background:var(--gold-soft);border-radius:999px;padding:7px 15px 7px 12px;margin-bottom:20px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--gold);flex:none}
.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)}
/* --gold-ink is a dark brown in the light palette and a light tan in the dark one, so the text on
   top of it has to invert too: #fff here was 1.97:1 in the dark theme. --paper inverts. */
.btn:hover{transform:translateY(-1px);background:var(--gold-ink);color:var(--paper)}
.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:var(--paper)}
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}
}

/* --------------------------------------------------------------------------
   The part a fifteen-year-old reads. Everything above is aimed at the person
   who signs; a student who lands here should be able to tell within a second
   that somebody their own age had a hand in it. Squared paper because that is
   what a Polish exercise book looks like, a highlighter in the gold already in
   the palette rather than a new colour, and notes stuck on at an angle.
   -------------------------------------------------------------------------- */

/* squared paper, the kratka of every school notebook */
.kratka{position:relative}
.kratka::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 35%,transparent 78%);
          mask-image:radial-gradient(120% 80% at 50% 0%,#000 35%,transparent 78%)}
.kratka > *{position:relative;z-index:1}

/* a marker swipe under a word, drawn slightly wonky the way a real one is */
.marker{background:linear-gradient(var(--marker),var(--marker));
  background-size:100% .42em;background-position:0 78%;background-repeat:no-repeat;
  padding:0 .08em;border-radius:2px}

/* the oversized ghost numeral behind a tour heading */
.stop-copy{position:relative}
.step{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;color:var(--gold-ink)}
.stop-copy h2{font-size:clamp(1.7rem,4vw,2.5rem)}

/* a note stuck to the phone, pointing at something real on the screen */
.phone{position:relative}
.note-tag{position:absolute;z-index:2;width:164px;background:var(--note);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:.8rem;font-weight:650;
  line-height:1.32;box-shadow:0 10px 24px -14px rgba(26,35,55,.55)}
/* a small nib pointing at the screen, so the note reads as attached to it */
.note-tag::after{content:"";position:absolute;top:52%;width:0;height:0;
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.note-tag.left{left:-146px;transform:rotate(-2.5deg)}
.note-tag.left::after{right:-9px;border-left:9px solid var(--note)}
.note-tag.right{right:-96px;transform:rotate(2deg)}
.note-tag.right::after{left:-9px;border-right:9px solid var(--note)}
.note-tag.t1{top:22%}
.note-tag.t2{top:47%}
.note-tag.t3{top:31%}
@media(max-width:1180px){.note-tag{display:none}}

/* the students band, loosened up */
.band-inner{position:relative}
.band .kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.band h2{font-size:clamp(1.9rem,5vw,3rem)}
.band .card{transform:rotate(-.5deg)}
.band .card:nth-child(2n){transform:rotate(.6deg)}
.band .card:nth-child(3n){transform:rotate(-.9deg)}
.band .card:hover{transform:rotate(0deg) translateY(-2px)}
.band .card h3{display:flex;align-items:baseline;gap:8px}
.band .card h3 b{font-size:1.5rem;line-height:1;color:var(--gold);font-weight:800}

/* one flat, unhedged line, the way a student would say it */
.blurt{margin:26px 0 0;font-size:clamp(1.05rem,2.4vw,1.35rem);font-weight:700;color:var(--on-navy);
  max-width:34ch;line-height:1.35}

/* --------------------------------------------------------------------------
   Stickers. Bump does not set emoji in a sentence, it drops them into the
   composition as objects: big, tilted, shadowed, breaking past the edge of the
   phone so the picture stops looking like a screenshot in a frame. Same trick
   here with the objects of a school day. They are decoration on top of an image
   that already carries its own description, so every one is aria-hidden.
   -------------------------------------------------------------------------- */
.sticker{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px 7px 9px;border-radius:999px;white-space:nowrap;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  font-size:.78rem;font-weight:750;letter-spacing:-.01em;line-height:1;
  box-shadow:0 12px 22px -12px rgba(26,35,55,.5);pointer-events:none;user-select:none}
.sticker i{font-style:normal;font-size:1.15rem;line-height:1;
  filter:drop-shadow(0 3px 5px rgba(26,35,55,.28))}
.sticker.hot{background:var(--exam-soft);color:var(--exam-ink);border-color:transparent}
.sticker.warm{background:var(--gold-soft);color:var(--gold-ink);border-color:transparent}
.sticker.tl{top:4%;left:-56px;transform:rotate(-6deg)}
.sticker.tr{top:9%;right:-48px;transform:rotate(5deg)}
.sticker.bl{bottom:15%;left:-52px;transform:rotate(4deg)}
.sticker.br{bottom:8%;right:-44px;transform:rotate(-5deg)}
@media(max-width:900px){
  .sticker{font-size:.72rem;padding:6px 10px 6px 8px}
  .sticker.tl{left:-14px}.sticker.bl{left:-12px}
  .sticker.tr{right:-14px}.sticker.br{right:-12px}
}

/* two badges side by side under the hero, the way Bump stamps a pair on its first shot */
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border-radius:999px;background:var(--navy);color:#fff;font-size:.82rem;font-weight:750;
  transform:rotate(-1.5deg);box-shadow:var(--shadow)}
.badge.gold{background:var(--gold);color:#20180a;transform:rotate(1.5deg)}
.badge i{font-style:normal;font-size:1.05rem}

/* Where to get it. Apple's identity guidelines provide badge artwork for the App Store and for
   nothing else, and say in as many words: "Use only the badge artwork provided in these guidelines.
   Don't use icons, logos, graphics, or images from www.apple.com to promote your app." There is no
   TestFlight badge to use and the TestFlight icon is one of those images, so this is Bell's own
   badge with Bell's own type, saying the thing in words. The trademark credit is in the footer,
   in the international format Apple asks for. */
.where{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:26px 0 0}
.badge.flat{transform:none}
.badge.big{font-size:.92rem;padding:12px 20px 12px 17px;gap:10px}
.badge.big i{font-size:1.2rem}
.where p{margin:0;color:var(--muted);font-size:.92rem;max-width:46ch}

/* Bump's headline shape: a short line where the second half carries the colour. */
.two-tone em{font-style:normal;color:var(--gold-ink)}
.band .two-tone em{color:var(--gold)}

/* the emoji that opens a student card, sized like a small object rather than text */
.band .card h3 b{font-size:1.45rem;line-height:1;font-weight:400;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}

/* a line in marker, the way Bump signs off a screenshot */
.scrawl{display:inline-block;margin-top:18px;font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:800;
  letter-spacing:-.02em;color:var(--ink);background:linear-gradient(var(--marker),var(--marker));
  background-size:100% .5em;background-position:0 76%;background-repeat:no-repeat;
  padding:2px .3em;transform:rotate(-1.5deg)}
.band .scrawl{color:var(--navy);background:var(--gold);border-radius:4px}

/* --------------------------------------------------------------------------
   Questions, in <details>. Native disclosure: it opens without a line of
   JavaScript, it is keyboard operable and announced correctly for free, and a
   reader who only wants the price is not made to scroll past nine answers.
   -------------------------------------------------------------------------- */
.qa{margin-top:22px;border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;gap:12px;padding:17px 2px;cursor:pointer;
  font-weight:700;font-size:1.02rem;letter-spacing:-.012em;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";margin-left:auto;flex:none;width:10px;height:10px;
  border-right:2.5px solid var(--gold-ink);border-bottom:2.5px solid var(--gold-ink);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.qa details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.qa summary:hover{color:var(--gold-ink)}
.qa summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.qa .a{padding:0 2px 20px;color:var(--muted);max-width:68ch}
.qa .a p{margin:0 0 .7rem;color:var(--muted)}
.qa .a p:last-child{margin-bottom:0}

/* keyboard users get out of the header in one press */
.skip{position:absolute;left:-9999px;top:0;z-index:20;background:var(--navy);color:#fff;
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}

/* --------------------------------------------------------------------------
   Make Bell feel like you. The line is the app's own, word for word, so the
   site and the product say the same thing rather than two things.

   Five cards, and each is drawn the way the style it names actually draws. The
   corner radius is the real number out of BellStyleSignature (22, 26, 2, 12,
   6). Editorial and Focus lose their fill for a hairline, because that is what
   `openSurfaces` does in the app. Timeline keeps the 3px accent rail it puts
   down the leading edge and the monospaced caption it uses for small print.
   The two styles that change the heading typeface change it here too. Five
   identical cards would have said "five styles" and shown nothing.
   -------------------------------------------------------------------------- */
.styles{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px;grid-template-columns:1fr}
/* Five is the awkward number: auto-fit lands on four columns over a wide range and leaves the
   fifth card stranded on a row of its own. Explicit steps instead, so the row always breaks
   somewhere that reads as a decision: 2+2+1, then 3+2, then all five across. */
@media(min-width:560px){.styles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.styles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1060px){.styles{grid-template-columns:repeat(5,1fr)}.st{padding:16px}}
.st{position:relative;min-width:0;padding:18px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.st b{display:block;font-size:1.04rem;font-weight:700;letter-spacing:-.014em;margin-bottom:6px}
.st span{display:block;color:var(--muted);font-size:.87rem;line-height:1.44;max-width:none}

.st.original{border-radius:22px;background:linear-gradient(158deg,var(--gold-soft),var(--card) 64%)}
.st.native{border-radius:26px;box-shadow:0 2px 5px rgba(26,35,55,.06),0 18px 36px -22px rgba(26,35,55,.5)}
.st.native b{font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;letter-spacing:-.022em}
/* openSurfaces: no card at all, just a rule underneath */
.st.editorial,.st.focus{background:none;border:0;border-bottom:1px solid var(--line);
  box-shadow:none;padding:16px 2px}
.st.editorial{border-radius:2px}
.st.editorial b{font-family:ui-serif,Georgia,"Times New Roman",serif;font-weight:400;font-size:1.24rem}
.st.focus{border-radius:6px}
.st.focus b{font-weight:800;letter-spacing:-.032em}
.st.timeline{border-radius:12px;padding-left:24px}
.st.timeline::before{content:"";position:absolute;left:10px;top:13px;bottom:13px;width:3px;
  border-radius:2px;background:var(--gold)}
.st.timeline span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.79rem}


.facts{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.facts li{display:inline-flex;align-items:center;gap:8px;max-width:none;
  font-size:.85rem;font-weight:650;letter-spacing:-.008em;
  color:var(--gold-ink);background:var(--gold-soft);border-radius:999px;padding:8px 16px 8px 13px}
.facts i{font-style:normal;font-size:1.05rem;line-height:1}
#yours h3{margin-top:2.1rem}

/* a real screen in each card, so "five looks" is shown rather than described */
.st img{display:block;width:100%;height:auto;margin-bottom:13px;
  border:1px solid var(--line);box-shadow:0 8px 18px -12px rgba(26,35,55,.45)}
.st.original img{border-radius:14px}
.st.native img{border-radius:16px}
.st.editorial img{border-radius:2px}
.st.timeline img{border-radius:9px}
.st.focus img{border-radius:5px}

/* --------------------------------------------------------------------------
   The colours. Seven presets and a picker that takes anything, so listing a few
   names was both cluttered and an undersell. One bar of the whole wheel says it
   in a line, and it starts and ends on Bell's own gold because that is where
   everybody starts.
   -------------------------------------------------------------------------- */
.hues{margin:26px 0 0}
.spectrum{display:block;height:13px;border-radius:999px;
  background:linear-gradient(90deg,#b89968,#d64252,#f2803d,#e2c04a,#2e9e6b,#3385e6,#8561e0,#b89968);
  box-shadow:inset 0 0 0 1px rgba(26,35,55,.14)}
.hues p{margin:14px 0 0;color:var(--muted)}
.hues b{color:var(--ink);font-weight:700}

/* --------------------------------------------------------------------------
   The line-up. Every device is drawn in CSS around a real screenshot, the way
   the phone in the hero already is: no flattened marketing bitmap, so it stays
   sharp at any size and picks up the page's own shadows. Bodies, not bezels,
   because a dark rounded rectangle is not a MacBook. The aluminium is a
   gradient with a light edge and a dark middle, the lid sits on a base that
   flares wider than it does, the phone carries its Dynamic Island and its
   buttons, and the watch has a crown and a strap, which is the part that makes
   a small dark rectangle read as a watch at all.

   Widths are the real ones in proportion (a 14-inch Mac is about four times an
   iPhone across), which is what makes a row of devices read as a line-up.
   -------------------------------------------------------------------------- */
  justify-content:center;gap:clamp(10px,2.4vw,30px);flex-wrap:wrap}
/* one shadow recipe, so four devices look like they are standing on one surface */

/* the MacBook: silver lid, black bezel with a chin, then the hinge and a base
   that is wider than the lid, which is the silhouette you actually recognise */
  background:linear-gradient(158deg,#e2e5ea,#a9aeb8 42%,#cbcfd6)}
  background:linear-gradient(#d2d5db 0 45%,#a8adb7 45%,#8e939e);
  clip-path:polygon(1.4% 0,98.6% 0,100% 100%,0 100%);
  border-radius:0 0 9px 9px;box-shadow:0 9px 15px -9px rgba(26,35,55,.6)}
/* the hinge, and the groove your finger goes in to open it */
  border-radius:3px 3px 0 0;background:#878d97}

/* the iPad: a thinner aluminium band, an even bezel, one camera */
  background:linear-gradient(152deg,#dadde3,#9ba0aa 46%,#c4c8cf)}
  width:3px;height:3px;border-radius:999px;background:#23262c}
/* the volume pair on the top edge */
  border-radius:2px;background:linear-gradient(90deg,#c4c8cf,#9ba0aa)}

/* the iPhone: titanium band, the Dynamic Island in the gap the status bar
   leaves for it, the action and volume buttons left, power right */
  background:linear-gradient(150deg,#d3d7dd,#8c919b 44%,#bec2ca)}
  width:28%;height:6px;border-radius:999px;background:#05070b}
  border-radius:2px;background:linear-gradient(#c9cdd4,#8c919b)}

/* the watch: a case that is taller than it is wide, a crown and a side button
   on the right, and a strap above and below it */
  border-radius:32%/24%;background:linear-gradient(150deg,#585d66,#24272d 52%,#454a53)}
  border-radius:2px;background:linear-gradient(#787e88,#3c4048)}
  border-radius:2px;background:linear-gradient(#666c76,#32363d)}

@media(max-width:700px){
  /* four abreast at phone width makes the watch a dot. The Mac takes its own row. */
}

/* --------------------------------------------------------------------------
   Learn more, in <details> like the questions are. A <summary> is a control the
   keyboard and the screen reader already understand, so the depth costs the page
   nothing: still no script, and a reader who only wants the price never scrolls
   past it. Two rules about the button itself. It is never in the same place
   twice, because one identical control in eight identical positions teaches the
   eye to skip it by the third. And each one says what is behind it rather than
   "learn more" eight times, which is the same rule the app follows: a control is
   labelled with what it does.
   -------------------------------------------------------------------------- */
/* The placement lives on the <summary>, never on the container. Chrome renders the open content
   of a <details> inside a ::details-content box, so `align-items` on the container moves and
   shrink-wraps the PANEL as well as the button: centring the button quietly centred a 731px panel
   in a 1076px column. Aligning the summary with `align-self` leaves the container stretched, which
   is what the panel wants, and works the same where that pseudo-element does not exist. */
/* Four numbers under the hero: each one has a file behind it (the proof section names them). */
.proof{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.proof li{max-width:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.proof b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--gold-ink)}
.proof span{display:block;margin-top:8px;color:var(--muted);font-size:.9rem}
/* The school's side: real browser captures in a plain window frame, two by two. */
.desk{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media(max-width:640px){.desk{grid-template-columns:minmax(0,1fr)}}
.desk li{max-width:none}
.desk .win{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.desk .bar{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--paper)}
.desk .bar i{width:10px;height:10px;border-radius:999px;background:var(--line)}
.desk img{display:block;width:100%;height:auto}
.desk b{display:block;margin-top:12px;font-weight:700}
.desk li>span:last-child{display:block;color:var(--muted);font-size:.93rem;margin-top:4px}
.roles{margin-top:26px}
.roles .card .tick{margin-top:6px}
.roles .tick li{font-size:.95rem}
/* Built and dated: three columns, the third being the one product pages leave out. */
.stamp{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:8px;margin-bottom:12px}
.stamp.live{background:var(--good-soft);color:var(--good-ink)}
.stamp.review{background:var(--gold-soft);color:var(--gold-ink)}
.stamp.next{background:var(--exam-soft);color:var(--exam-ink)}
.status .card .tick{margin-top:4px}
.status .tick li{font-size:.95rem}

.more{display:flex;flex-direction:column;margin:22px 0 0}
.more > summary{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  font:inherit;font-weight:650;font-size:.93rem;letter-spacing:-.012em;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;min-height:46px;box-shadow:var(--shadow);
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:"";flex:none;width:8px;height:8px;
  border-right:2.5px solid var(--gold-ink);border-bottom:2.5px solid var(--gold-ink);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.more > summary:hover{border-color:var(--gold);color:var(--gold-ink)}
.more > summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.more[open] > summary{background:var(--gold-soft);border-color:transparent;color:var(--gold-ink)}
.more[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}

/* what is behind it: one panel the shape of a card, never a wall of prose */
.deep{width:100%;margin-top:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.deep > p{color:var(--muted);margin:0}
.deep .tick{margin-top:12px}
.deep .tick li{margin:10px 0}
/* the one panel where the order is itself the information: what happens after you write */
.deep .steps{list-style:none;counter-reset:s;padding:0;margin:14px 0 0}
.deep .steps li{counter-increment:s;position:relative;padding-left:36px;margin:12px 0;color:var(--muted)}
.deep .steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:24px;height:24px;
  border-radius:999px;background:var(--gold-soft);color:var(--gold-ink);
  font-size:.74rem;font-weight:800;display:grid;place-items:center}

/* four placements, so no two you meet in a row read the same way */
.more.end > summary{align-self:flex-end}
.more.centre > summary{align-self:center}
.more.bar > summary{align-self:stretch;border-radius:16px;padding:15px 20px}
.more.bar > summary::after{margin-left:auto}
.more.link > summary{background:none;border-color:transparent;box-shadow:none;padding:6px 2px;
  color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.more.link > summary::after{border-right-color:currentColor;border-bottom-color:currentColor}
.more.link > summary:hover,.more.link[open] > summary{background:none;color:var(--gold-ink)}

/* on the navy band the pill fills with the band's own gold when it opens */
.band .more > summary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);
  color:var(--on-navy);box-shadow:none}
.band .more > summary::after{border-right-color:var(--gold);border-bottom-color:var(--gold)}
.band .more > summary:hover{border-color:var(--gold);color:#fff}
.band .more[open] > summary{background:var(--gold);border-color:transparent;color:#20180a}
.band .more[open] > summary::after{border-right-color:#20180a;border-bottom-color:#20180a}
.band .deep{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.band .deep p,.band .deep .tick li{color:var(--navy-muted)}
.band .deep .tick li::before{border-color:var(--gold)}

@media(max-width:640px){
  /* at this width the column is the whole screen, so "at the end of the line" stops
     reading as a placement and starts reading as a stray button */
  .more.end > summary,.more.centre > summary{align-self:flex-start}
  .deep{padding:18px}
}

/* --------------------------------------------------------------------------
   Motion, driven by the scroll position rather than by a script. `view()` ties
   each animation to where its own element sits in the viewport, so nothing runs
   on a timer and nothing runs at all where the feature is missing: the page
   just arrives finished. Animating `translate` rather than `transform` matters,
   because the stickers and notes already hold a `rotate` and the two compose
   instead of fighting.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
    @keyframes pop{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
    @keyframes lift{from{translate:0 34px}to{translate:0 0}}

    .stop-copy,.card,.st,.lineup li,.qa details,section>h2,section>p:not(.note){
      animation:rise linear both;animation-timeline:view();animation-range:entry 8% cover 32%}
    /* the phone rises a little further and a little later, so the words land first */
    .stop .phone{animation:lift linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    /* the labels arrive after the screen they point at */
    .sticker,.note-tag,.facts li{animation:pop linear both;animation-timeline:view();animation-range:entry 26% cover 52%}
    .band-mark{animation:pop linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    /* the learn-more button finishes arriving while it is still entering, so the last one on
       the page cannot be stranded half-faded where there is no scroll left to finish it */
    .more{animation:rise linear both;animation-timeline:view();animation-range:entry 4% entry 90%}

    /* how far down the page you are, in the accent colour */
    .progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:40;background:var(--gold);
      transform-origin:0 50%;scale:0 1;animation:fill linear both;animation-timeline:scroll(root)}
    @keyframes fill{to{scale:1 1}}
  }
}

/* The few places that name a colour rather than a token: one badge black, one yellow, a chip
   reporting a fact yellow and one reporting overdue work red, the students' band white on black. */
main p a,footer a,.note a{text-decoration-thickness:1px;text-underline-offset:3px}
.badge:hover{background:var(--ink)}
.badge.gold{background:var(--gold);color:#1a1400}
.btn:hover{background:var(--ink);color:var(--card)}
header nav a.cta:hover{background:var(--ink);color:var(--card)}
button:hover{background:var(--ink);color:var(--card)}
.sticker.warm{background:var(--gold);color:#1a1400;border-color:transparent}
.band .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.band .scrawl{background:var(--gold);color:#1a1400}
@media(prefers-color-scheme:dark){.band{border-top-color:#2b2b2b;border-bottom:1px solid #2b2b2b}}
.tick li::before{border-color:var(--good-ink)}

/* One school day on every screen: Apple's product bezels with the app captured at native
   resolution inside each (scripts/shoot-devices.md). A row, bottom-aligned, like a shop window. */
.lineup{list-style:none;padding:0;margin:30px 0 0;display:flex;align-items:flex-end;justify-content:center;gap:3%;flex-wrap:wrap}
/* No `flex` shorthand on the items: it carries a basis of its own and would outrank the per-device widths below. */
.lineup li{max-width:none;margin:0;flex-grow:0;flex-shrink:1;min-width:0}
.lineup img{display:block;height:auto;width:100%}
/* Shares of the row, so the four always fit on one line above 700 px: 49 + 22 + 12 + 8 and three gaps. */
.lineup .dev-mac{flex-basis:49%}
.lineup .dev-pad{flex-basis:22%}
.lineup .dev-phone{flex-basis:12%}
.lineup .dev-watch{flex-basis:8%}
@media(max-width:700px){.lineup{gap:14px}.lineup .dev-mac{flex-basis:100%}.lineup .dev-pad{flex-basis:46%}.lineup .dev-phone{flex-basis:26%}.lineup .dev-watch{flex-basis:18%}}
/* The style library: one line and a plus, then the five cards with nothing around them. */
.more.plus > summary::after{display:none}
.more.plus > summary::before{content:"+";display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;background:var(--ink);color:var(--card);font-weight:700;font-size:1.1rem;line-height:1;flex:none}
.more.plus[open] > summary::before{content:"\2212"}
.more.plus[open] > summary{background:transparent;color:var(--ink);border-color:var(--line)}
.more.plus[open] > summary::before{background:var(--ink);color:var(--card)}
.more.library > .deep{background:none;border:0;box-shadow:none;padding:0;margin-top:18px}
.more.library .styles{margin-top:0}