/* Course++ homepage (index.html only). Loaded after style.css, which stays the
 * shared base for every other page: nothing here restyles a shared rule; all
 * selectors are homepage classes or scoped to body.home.
 *
 * Design: V11 "Side by Side, real panel" (course++/design/homepage-mockups/),
 * approved by the owner 2026-10-26. System fonts only; brand tokens from
 * style.css. The few colours style.css does not have are named here, in this
 * one token block, and nowhere else. */
:root {
  --white: #ffffff;             /* V11's page ground; also read by demo/real-demo.css */
  --lime-soft: #ecf8d6;         /* soft lime ground — --accent on it is 6.2:1 */
  --ink-tag: #4b5563;           /* the header tagline: dark gray, 7.56:1 on white */
  --on-navy-2: #c9d6e3;         /* quiet text on navy — 9.96:1 */
  --on-navy-rule: #8da3b9;      /* control boundary on navy — 5.6:1 */
  --glow-lime: rgb(132 204 22 / .16);     /* the soft halo behind the demo */
  --shadow-btn: 0 10px 24px -12px rgb(63 98 18 / .7);        /* lime pill, at rest */
  --shadow-btn-hover: 0 14px 28px -12px rgb(63 98 18 / .8);  /* lime pill, hovered */
  --shadow-menu: 0 18px 30px -24px rgb(8 41 74 / .5);
  --shadow-screen: 0 40px 80px -40px rgb(8 41 74 / .55), 0 0 0 1px rgb(8 41 74 / .08);
  --hd-h: 4rem;                 /* header height, for in-page jump offsets */
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 3rem);
}

body.home {
  background: var(--white);
  font-family: var(--f-sans);
  line-height: 1.55;
}
body.home main [id] { scroll-margin-top: calc(var(--hd-h) + 1rem); }
body.home h1, body.home h2, body.home h3 { overflow-wrap: anywhere; min-width: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Buttons: the lime pill (V11) ----------------------------------------
 * Lime fill, navy text (7.45:1). Display is left to .pick (inline-flex for
 * the visitor's own browser, none for the rest), so it is not set here. */
.hbtn {
  align-items: center; gap: .65rem;
  background: var(--lime); color: var(--lime-ink);
  font: 750 1.1875rem/1.2 var(--f-sans);
  padding: .95rem 1.6rem;
  border: 0; border-radius: var(--r-pill);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
button.hbtn { display: inline-flex; }
.hbtn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }
.hbtn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: var(--r-pill); }
.hbtn--sm { font-size: .9375rem; padding: .6rem 1.05rem; box-shadow: none; }
.hbtn--sm:hover { box-shadow: none; }
.hbtn__mark { width: 1.5rem; height: 1.5rem; flex: none; }
.hbtn--sm { gap: .45rem; }
.hbtn--sm .hbtn__mark { width: 1.15rem; height: 1.15rem; }

/* ---- Header ------------------------------------------------------------- */
.hd {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--white) 94%, transparent);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(8px)) { .hd { backdrop-filter: blur(10px); } }
.hd__in {
  position: relative;
  max-width: 96rem; margin: 0 auto;
  min-height: var(--hd-h);
  padding: .6rem var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
}
.lockup { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); min-width: 0; }
.lockup__mark { width: 30px; height: 30px; flex: none; }
.lockup__name { font: 700 1.125rem/1 var(--f-sans); white-space: nowrap; letter-spacing: -.01em; }
.lockup__name b { color: var(--accent); font-weight: 800; }
/* The tagline: the wordmark's own family (--f-display) in a thin weight —
   concordant by family, contrasting by weight, about 0.7x the name's size. */
.lockup__tag {
  font: 300 var(--t-sm)/1 var(--f-display); color: var(--ink-tag);
  padding-left: .7rem; margin-left: .2rem; border-left: 1px solid var(--rule-ui);
  white-space: nowrap; letter-spacing: .005em;
}
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; margin-left: auto; font-size: .9375rem; }
.site-nav a { color: var(--ink-2); text-decoration: none; white-space: nowrap; padding: .35rem 0; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.hd__cta { display: flex; align-items: center; gap: .65rem; flex: none; }
/* Phones: .hd__cta drops out of the layout so the install button sits in
   .hd__in's own row beside the lockup and the Menu button. */
@media (max-width: 560px) {
  .hd__cta { display: contents; }
  html .hd__in, html.js .hd__in { flex-wrap: wrap; }   /* beats the menu fold's .js nowrap */
  .lockup { flex: none; }
  .hd__cta .pick { margin-left: 0; }
}
/* Nothing to try yet on Safari: its button goes to the waitlist. */
html[data-browser="safari"] .free-note { display: none; }
.menu-btn {
  font: 600 .9375rem/1 var(--f-sans); color: var(--ink);
  background: transparent; border: 1px solid var(--rule-ui); border-radius: var(--r-pill);
  padding: .6rem .9rem; min-height: 2.5rem; cursor: pointer;
  margin-left: auto;
}
.menu-btn[hidden] { display: none; }
.menu-btn { display: inline-flex; align-items: center; gap: .4rem; }
.menu-btn__icon { width: 1.1rem; height: 1.1rem; flex: none; }

@media (max-width: 1100px) { .lockup__tag { display: none; } }
@media (max-width: 1000px) { .site-nav { gap: .25rem 1.1rem; } .hd__in { gap: .5rem 1rem; } }
@media (min-width: 960px) { .hd__in { flex-wrap: nowrap; } }
@media (min-width: 960px) {
  .js .menu-btn { display: none; }
}
@media (max-width: 959.98px) {
  .hd__in { gap: .5rem .6rem; }
  .js .hd__in { flex-wrap: nowrap; }
  .js .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-menu);
    padding: .25rem var(--gutter) .75rem;
  }
  .js .site-nav.is-open { display: flex; }
  .js .site-nav a { padding: .75rem 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
  .js .site-nav a:last-of-type { border-bottom: 0; }
  /* Without JavaScript the links wrap onto their own row, under the lockup. */
  html:not(.js) .site-nav { order: 3; flex-basis: 100%; margin-left: 0; }
  html:not(.js) .hd__cta { margin-left: auto; }
}
@media (max-width: 400px) {
  .hbtn:not(.hbtn--sm) { font-size: 1rem; padding: .85rem 1.1rem; gap: .5rem; white-space: normal; }
  .hbtn__mark { width: 1.25rem; height: 1.25rem; }
  .lockup__mark { width: 26px; height: 26px; }
  .lockup__name { font-size: 1rem; }
  .hd__in { padding-left: .75rem; padding-right: .75rem; }
  .menu-btn { padding: .5rem .6rem; }
  .menu-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hd__cta .hbtn--sm { padding: .55rem .8rem; font-size: .875rem; }
}
@media (max-width: 359.98px) {
  .lockup { gap: .35rem; }
  .lockup__name { font-size: .9375rem; }
  .hd__in { gap: .5rem .4rem; padding-left: .6rem; padding-right: .6rem; }
  .menu-btn { padding: .45rem .5rem; min-height: 2.25rem; }
  .hd__cta .hbtn--sm { padding: .5rem .65rem; font-size: .8125rem; gap: .35rem; }
  .hd__cta .hbtn__mark { width: 1rem; height: 1rem; }
}

/* ---- Hero (V11) --------------------------------------------------------- */
/* Tight on purpose: on a 1440x900 or 1280x720 laptop the top of the navy
   FERPA band, heading and all, shows above the fold (site-home-check
   "hero: FERPA band above the fold"). style.css's shared .hero padding is
   zeroed here; .hero__in carries the only spacing. */
body.home .hero { position: relative; isolation: isolate; overflow-x: clip; padding: 0; }   /* the demo's glow bleeds past the edges on purpose */
.hero__in {
  display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  max-width: 96rem; margin: 0 auto;
  padding: clamp(1.25rem, 2vw, 1.75rem) var(--gutter) clamp(1.5rem, 2.5vw, 2rem);
}
.hero__copy h1 {
  font-size: clamp(2.3rem, 1.3rem + 3.2vw, 4rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -.02em; margin: 0;
}
.hero__for { font-size: 1.0625rem; font-weight: 700; color: var(--accent); margin: .75rem 0 0; max-width: 28rem; }
.hero__lede { font-size: 1.25rem; color: var(--ink-2); margin: 1.25rem 0 2rem; max-width: 28rem; }
.hero__for + .hero__lede { margin-top: .75rem; }
.hero__students { margin: 1rem 0 0; max-width: 28rem; color: var(--ink-2); }
.hero__students strong { color: var(--ink); }
@media (max-width: 960px) { .hero__in { grid-template-columns: minmax(0, 1fr); } }
/* Short laptop screens (1280x720 and the like): a slightly narrower demo, so
   the FERPA band's heading clears the fold with room to spare. */
@media (min-width: 961px) and (max-height: 780px) {
  .hero__in { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); }
  .hero__demo .rd-ctl { margin-top: .75rem; }
  .hero__copy h1 { font-size: clamp(2.3rem, 1rem + 3vw, 3.5rem); }
  .hero__lede { margin: 1rem 0 1.5rem; }
  .hero__for { margin-top: .5rem; }
  .hero__for + .hero__lede { margin-top: .5rem; }
  .hero__students, .hero__tm { margin-top: .625rem; }
}

.get { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.also { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: .9375rem; color: var(--ink-2); }
.also__list { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.also__list li { margin: 0; align-items: center; }
.also__list li::before { content: "\00b7"; color: var(--ink-3); margin: 0 .5rem; }
/* No leading dot on the first VISIBLE browser (.pick-inverse hides the
   visitor's own): Edge when the visitor is on Chrome, Chrome otherwise. */
html[data-browser="chrome"] .also__list li[data-for="edge"]::before,
html:not([data-browser="chrome"]) .also__list li[data-for="chrome"]::before { content: none; }
.also__list a { color: var(--ink-2); white-space: nowrap; text-underline-offset: 3px; text-decoration-color: var(--rule-ui); padding: .35rem 0; }
.also__list a:hover { color: var(--ink); text-decoration-color: currentColor; }
.free-note { font-size: .9375rem; color: var(--ink-2); margin: 0; }
.free-note strong { color: var(--ink); font-weight: 700; }
.get .install__pending, .get .install__desktop { margin: .25rem 0 0; }
.hero__tm { margin: 1rem 0 0; max-width: 28rem; font-size: .8125rem; }

.hero__demo { position: relative; isolation: isolate; min-width: 0; }
.hero__demo::before {
  content: ""; position: absolute; inset: -12% -8% -6% -8%; z-index: -1;
  background: radial-gradient(closest-side, var(--glow-lime), transparent);
}
/* The fallback image, until (or unless) the demo mounts and adds .rd. */
.hero__screen:not(.rd) img {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-screen);
}
.hero__demo .rd-ctl:empty { display: none; }

/* ---- FERPA band (navy, directly above the steps) ----------------------
   White on navy 14.4:1; --on-navy-2 9.96:1; cyan (navy-only) focus ring. */
.trust { background: var(--navy); color: var(--white); padding: clamp(1.75rem, 3vw, 2.5rem) 0; }
.trust :focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.trust__in { display: flex; align-items: center; gap: 1.25rem 1.75rem; }
.trust__icon { width: 3.25rem; height: 3.25rem; flex: none; color: var(--lime); }
.trust__copy { flex: 1; min-width: 0; }
.trust h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; margin: 0 0 .35rem; color: var(--white); }
.trust p { margin: 0; color: var(--on-navy-2); font-size: 1.0625rem; max-width: 46rem; }
.trust__link { flex: none; color: var(--white); font-weight: 700; white-space: nowrap; text-underline-offset: 4px; }
.trust__link::after { content: " \2192"; }
.trust__link:hover { color: var(--white); text-decoration-thickness: 2px; }
@media (max-width: 760px) {
  .trust__in { flex-direction: column; align-items: flex-start; gap: .85rem; }
  .trust__icon { width: 2.5rem; height: 2.5rem; }
}

/* ---- It works as you (trust option C, 2026-10-27) ----------------------
   From course++/design/trust-mockups/t3.html, namespaced .asyou so it cannot
   collide with the install steps' .steps/.step below. */
.asyou { background: var(--white); padding: clamp(3rem, 7vw, 5.5rem) 0; }
.asyou h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 2rem; }
.asyou .ic { --ic-bg: var(--panel); --ic-tint: var(--lime-soft); --ic-ink: var(--navy); --ic-acc: var(--lime); --ic-fill: var(--white); }
.asyou .ic--navy { --ic-bg: var(--navy); --ic-tint: rgb(255 255 255 / .09); --ic-ink: var(--white); --ic-acc: var(--cyan); --ic-fill: rgb(255 255 255 / .12); }
.asyou .ic .bg { fill: var(--ic-bg); } .asyou .ic .tint { fill: var(--ic-tint); }
.asyou .ic .k, .asyou .ic .f, .asyou .ic .fa { stroke: var(--ic-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.asyou .ic .k { fill: none; } .asyou .ic .f { fill: var(--ic-fill); } .asyou .ic .fa { fill: var(--ic-acc); }
.asyou .ic .i { fill: var(--ic-ink); stroke: none; }
.asyou__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.asyou__step { background: var(--white); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-1); }
.asyou__step svg { display: block; width: 100%; height: auto; aspect-ratio: 320 / 150; background: var(--ic-bg); }
.asyou__body { padding: 1.1rem 1.3rem 1.3rem; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .85rem; align-items: start; }
.asyou__num { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--lime); color: var(--navy); font-weight: 800; display: grid; place-items: center; font-size: 1.05rem; }
.asyou__step h3 { margin: .2rem 0 .15rem; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.asyou__step p { margin: 0; color: var(--ink-2); font-size: .96rem; }
.asyou__chips { margin: 1.75rem 0 0; padding: 1rem 1.1rem; list-style: none; display: flex; flex-wrap: wrap; gap: .55rem .6rem; justify-content: center; background: var(--navy); border-radius: 14px; }
.asyou__chips li { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; background: rgb(255 255 255 / .1); color: var(--white); border-radius: 99px; padding: .4rem .85rem .4rem .5rem; font-weight: 650; font-size: .93rem; }
.asyou__chips svg { width: 1.25rem; height: 1.25rem; flex: none; }
@media (max-width: 860px) {
  .asyou__steps { grid-template-columns: minmax(0, 1fr); }
  .asyou__step svg { aspect-ratio: 320 / 110; }
  .asyou__body { padding: .95rem 1rem 1.05rem; gap: .75rem; grid-template-columns: 1.9rem minmax(0, 1fr); }
  .asyou__num { width: 1.9rem; height: 1.9rem; font-size: .95rem; }
  .asyou__chips { justify-content: flex-start; }
  .asyou__chips li { border-radius: 10px; }
}

/* "Before anything big, it asks you": step 3 close up, inside .asyou
   (trust idea 1). The drawn card copies the panel's look, not its code. */
.okc { margin: 2.5rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.okc h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; margin: 0 0 1rem; }
.okc__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.okc__list li { display: flex; gap: .65rem; align-items: flex-start; font-size: 1.05rem; }
.okc__list li::before { content: "!"; flex: none; width: 1.35rem; height: 1.35rem; margin-top: .1rem; border-radius: 50%; background: var(--lime-soft); color: var(--accent); font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.okc__after { margin: 0; border-left: 3px solid var(--lime); padding: .2rem 0 .2rem 1rem; color: var(--ink-2); max-width: 30rem; }
.okc__after strong { color: var(--ink); }
.okc__stage { position: relative; min-width: 0; background: var(--paper); border-radius: 22px; padding: 2.2rem clamp(1rem, 3vw, 2.2rem) clamp(1.25rem, 3vw, 2.2rem); box-shadow: 0 0 0 1px rgb(8 41 74 / .06); }
.okc__cap { position: absolute; top: -.8rem; left: clamp(1rem, 3vw, 2rem); max-width: calc(100% - 2rem); background: var(--navy); color: var(--white); font-size: .78rem; font-weight: 700; padding: .25rem .7rem; border-radius: 99px; }
.okc__win { background: var(--white); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px -4px rgb(8 41 74 / .18), 0 24px 48px -12px rgb(8 41 74 / .22); font-size: .875rem; line-height: 1.55; max-width: 27rem; margin: 0 auto; }
.okc__head { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
.okc__head svg { width: 1.8rem; height: 1.8rem; flex: none; }
.okc__head b { font-size: .8125rem; } .okc__head .plus { color: var(--lime); }
.okc__head small { display: block; font-size: .75rem; color: var(--ink-2); }
.okc__msgs { padding: .9rem .8rem; display: flex; flex-direction: column; gap: .6rem; }
.okc__user { align-self: flex-end; max-width: 88%; background: var(--lime); color: var(--navy); padding: .45rem .7rem; border-radius: 12px; }
.okc__card { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); padding: .65rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: 0 0 0 4px rgb(132 204 22 / .28); }
.okc__opt { border: 1px solid var(--rule); border-radius: 8px; background: var(--white); padding: .45rem .6rem; font-weight: 600; }
.okc__opt--yes { border-color: var(--lime); }
@media (max-width: 860px) { .okc { grid-template-columns: minmax(0, 1fr); } }

/* ---- Three steps -------------------------------------------------------
   The grid stretches the three cards to one height; each card's stage grows
   to fill what is left, so the stages line up too. */
.how { background: var(--paper); padding: clamp(3rem, 7vw, 5.5rem) 0; }
.how h2, .can > .wrap > h2, .faq h2, .fix h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 2rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.step { margin: 0; background: var(--white); border: 1px solid var(--rule); border-radius: 18px; padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.step__num { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--navy); color: var(--white); font-weight: 800; font-size: 1.25rem; display: grid; place-items: center; }
.step h3 { font-size: 1.375rem; margin: .25rem 0 0; }
.step p { color: var(--ink-2); margin: 0; }
.step__stage {
  flex: 1; margin-top: .5rem; min-height: 13rem;
  border-radius: 12px; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  padding: 1.25rem;
}
.step__stage .pick { display: flex; justify-content: center; }
@media (max-width: 860px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step__stage { min-height: 0; padding: 1rem .85rem; }
}

/* Step 1: the store listing's name line above the real button. */
.pic-store { display: flex; align-items: center; gap: .65rem; }
.pic-store__mark { width: 3rem; height: 3rem; flex: none; }
.pic-store span { display: flex; flex-direction: column; gap: .2rem; }
.pic-store b { font-size: 1.125rem; line-height: 1.1; }
.pic-store small { font: 300 .875rem/1.1 var(--f-display); color: var(--ink-tag); }

/* Step 2: a browser address bar over a Canvas page, the Course++ button in its corner. */
.pic-url { width: 100%; background: var(--white); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.pic-url__chrome { display: flex; align-items: center; gap: .3rem; padding: .45rem; background: var(--panel); }
.pic-url__bar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .35rem;
  background: var(--white); border-radius: var(--r-pill); padding: .3rem .6rem;
  font-size: .71875rem; letter-spacing: -.005em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pic-url__bar svg { width: .7rem; height: .7rem; flex: none; color: var(--ink-3); }
.pic-url__page { position: relative; padding: .8rem .9rem 1rem; }
.pic-url__page > i { display: block; height: .5rem; border-radius: 4px; background: var(--panel); margin: .45rem 0; width: 70%; }
.pic-url__page > i:first-child { width: 45%; height: .7rem; background: var(--rule); }
.pic-url__page > i:last-of-type { width: 55%; }
.pic-url__bubble { position: absolute; right: .7rem; bottom: .6rem; width: 2rem; height: 2rem; }

/* Step 3: a small copy of the Course++ input (the panel's look, not the panel). */
.mini { position: relative; width: 100%; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: .7rem .75rem .35rem; box-shadow: var(--shadow-1); }
.mini__head { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; font-size: .8125rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.mini__head b { color: var(--ink); font-weight: 750; }
.mini__mark { width: 1.2rem; height: 1.2rem; flex: none; }
.mini__box { position: relative; display: flex; align-items: flex-end; gap: .5rem; border: 2px solid var(--lime); border-radius: 10px; padding: .55rem .55rem .55rem .7rem; }
.mini__stack { display: grid; flex: 1; min-width: 0; }
.mini__ghost, .mini__text { grid-area: 1 / 1; margin: 0; font: 600 .9375rem/1.45 var(--f-sans); }
.mini__ghost { visibility: hidden; }
.mini__text { color: var(--ink); cursor: copy; border-radius: 4px; }
.mini__text:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.mini__text.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--ink); }
.mini__send { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--lime); color: var(--lime-ink); display: grid; place-items: center; }
.mini__send svg { width: .85rem; height: .85rem; }
.mini__copied {
  position: absolute; right: .5rem; top: -.75rem;
  font: 700 .75rem/1 var(--f-sans); color: var(--white); background: var(--navy);
  padding: .3rem .55rem; border-radius: var(--r-pill);
  opacity: 0; transition: opacity var(--dur-short) var(--ease-out); pointer-events: none;
}
.mini__copied.is-on { opacity: 1; }
.mini__bar { position: relative; display: block; width: 100%; height: 1.5rem; min-height: 24px; margin: .1rem 0 0; padding: 0; border: 0; background: none; cursor: pointer; }
.mini__bar[hidden] { display: none; }
.mini__bar::before, .mini__bar i { content: ""; position: absolute; left: .15rem; right: .15rem; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.mini__bar::before { background: #cfd8e1; }
.mini__bar i { background: var(--accent); transform: scaleX(0); transform-origin: left; }
.mini__bar:hover::before { background: var(--rule-ui); }
.mini__bar:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; border-radius: 4px; }

/* ---- Can / won't + FERPA ------------------------------------------------ */
.can { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.can__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 760px) { .can__cols { grid-template-columns: minmax(0, 1fr); } }
.can__col h3 { font-size: 1.25rem; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ink); }
.can__list { list-style: none; margin: 0; padding: 0; }
.can__list li { position: relative; margin: 0; padding: .55rem 0 .55rem 2rem; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; }
.can__list li::before { position: absolute; left: 0; top: .55rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; line-height: 1; }
.can__list--yes { columns: 2 12rem; column-gap: 2rem; }
.can__list--yes li { break-inside: avoid; }
.can__list--yes li::before { content: "\2713"; background: var(--lime); color: var(--lime-ink); }
.can__list--no li::before { content: "\2715"; background: var(--panel); color: var(--ink); }
.can__note { margin: 1.25rem 0 0; color: var(--ink-2); font-size: 1.0625rem; }

/* ---- Prompts that fix common Canvas problems: the card carousel ----------
   (P6, revision 4; renamed and reframed as prompts, revision 6.)
   A native horizontal scroller with scroll-snap (works with JavaScript off,
   swipes on a phone); the script drives it with scrollTo. Cards are P6's:
   a drawn picture, the problem's short name, the prompt as a chat bubble
   with a Copy button under it, a ticked result line.
   About 2.6 cards show at 1440, one on a phone. */
.fix { background: var(--paper); border-top: 1px solid var(--rule); padding: clamp(3rem, 7vw, 5.5rem) 0; overflow-x: clip; container-type: inline-size; }
.fix h2 { margin-bottom: .5rem; }
.cc-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.cc-ctl { display: flex; align-items: center; gap: .6rem; }
.cc-ctl[hidden] { display: none; }
.cc-btn {
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--navy); background: var(--white); color: var(--navy); padding: 0;
}
.cc-btn svg { width: 1.2rem; height: 1.2rem; grid-area: 1 / 1; }
.cc-btn--fill { background: var(--navy); color: var(--white); }
.cc-btn:hover { box-shadow: 0 0 0 3px var(--lime-soft); }
.cc-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Pause/Play: the hero demo's quieter round icon toggle. */
.cc-pause { width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--rule-ui); margin-right: .25rem; }
.cc-pause svg { width: 14px; height: 14px; fill: currentColor; }
.cc-pause .cc-ic-play, .cc-pause.is-paused .cc-ic-pause { display: none; }
.cc-pause.is-paused .cc-ic-play { display: block; }

.cc-view {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: .5rem .25rem 2.75rem; margin: -.5rem -.25rem -1.25rem;
}
/* Wider screens: the row runs on to the right edge of the window, the next
   card cut by the screen edge rather than by a box (P6). .fix clips it. */
/* The bleed is measured in the section's own width (cqw: no scrollbar in
   it), from the wrap's content edge to the window edge. The track ends in
   the same amount of padding, so at the end of the scroll the last card's
   right edge sits on the page's own right gutter. */
@media (min-width: 641px) {
  .cc-view {
    --bleed: calc((100cqw - min(100cqw, var(--wrap))) / 2 + var(--gutter));
    margin-right: calc(-1 * var(--bleed)); padding-right: 0;
  }
  .cc-view .cc-track { width: max-content; padding-right: var(--bleed); }
  .cc-view .cc { flex-basis: 23.5rem; width: 23.5rem; }   /* a fixed width, or max-content sizes it to its longest line */
}
/* With the script, the card the dots point at wears a quiet lime ring (on a
   wide screen the last few cards share one scroll stop). */
.cc.is-current { box-shadow: 0 0 0 2px var(--lime), var(--shadow-1); border-color: var(--lime); }
/* Without the script there are no arrows: say there is more to scroll to. */
.cc-more { margin: .75rem 0 0; font-weight: 700; color: var(--accent); }
.cc-more[hidden] { display: none; }
.cc-view:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* With the script running, its own controls replace the scrollbar. */
.js .cc-view { scrollbar-width: none; }
.js .cc-view::-webkit-scrollbar { display: none; }
.cc-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }
.cc {
  position: relative;   /* the sr-only "Type: " spans are absolute: keep them inside the scroller, or they widen the page */
  flex: 0 0 min(23.5rem, 100%); margin: 0; scroll-snap-align: start;
  background: var(--white); border: 1px solid var(--rule); border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-1);
}
/* The artwork: one bold glyph per card on a soft tinted circle. One stroke
   width, brand tokens only, one accent per card: lime on the light cards,
   cyan (navy only) on the navy ones. */
.cc__art { display: block; width: 100%; height: auto; aspect-ratio: 320 / 170; }
.cc__art--light { --ic-bg: var(--panel); --ic-tint: var(--lime-soft); --ic-ink: var(--navy); --ic-acc: var(--lime); --ic-fill: var(--white); }
.cc__art--navy { --ic-bg: var(--navy); --ic-tint: rgb(255 255 255 / .09); --ic-ink: var(--white); --ic-acc: var(--cyan); --ic-fill: rgb(255 255 255 / .12); }
.cc__art .bg { fill: var(--ic-bg); }
.cc__art .tint { fill: var(--ic-tint); }
.cc__art .k, .cc__art .f, .cc__art .fa, .cc__art .as, .cc__art .cut { stroke: var(--ic-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.cc__art .k, .cc__art .as { fill: none; }
.cc__art .f { fill: var(--ic-fill); }
.cc__art .fa { fill: var(--ic-acc); }
.cc__art .as { stroke: var(--ic-acc); }
.cc__art .a { fill: var(--ic-acc); stroke: none; }
.cc__art .i { fill: var(--ic-ink); stroke: none; }
.cc__art .bgc { fill: var(--ic-bg); stroke: none; }
.cc__art .cut { stroke: var(--ic-bg); stroke-width: 13; fill: none; }
/* The timer: a thin bar along the foot of the current card (script-driven). */
.cc__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: transparent; pointer-events: none; }
.cc__timer i { display: block; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; }
html:not(.js) .cc__timer { display: none; }
@media (prefers-reduced-motion: reduce) { .cc__timer { display: none; } }
.cc__body { padding: 1.3rem 1.5rem 1.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; flex: 1; }
.cc h3 { margin: 0; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3; }
/* The prompt is what you type: a chat bubble like the one Course++ shows for
   your own message, with its tail on the left. Ink on --panel 12.97:1. */
.cc__ask {
  position: relative; align-self: stretch; margin: 0; padding: .8rem 1rem .85rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 16px 16px 16px 4px;
  font-size: 1.1875rem; font-weight: 600; line-height: 1.4; color: var(--ink);
}
/* Copy (added by the script): a small pill under the bubble. Its boundary is
   --rule-ui (3.26:1, a control's edge); the word is --ink; "Copied" is
   --accent (6.71:1 on white). At least 36px tall. */
.cc__copy {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; margin-top: -.15rem;
  padding: .35rem .85rem .35rem .7rem; border-radius: var(--r-pill); cursor: pointer;
  border: 1.5px solid var(--rule-ui); background: var(--white); color: var(--ink);
  font: 700 .9375rem/1 var(--f-sans);
}
.cc__copy svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.cc__copy:hover { box-shadow: 0 0 0 3px var(--lime-soft); }
.cc__copy:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cc__copy.is-done { color: var(--accent); border-color: var(--accent); }
.cc__copy.is-failed { color: var(--err); border-color: var(--err); }   /* 6.19:1 on paper */
.fix .anchor-alias { display: block; height: 0; }
.cc-head { max-width: 52rem; }
.cc-sub { margin: 0; font-size: 1.125rem; color: var(--ink-2); }
.cc__att { display: inline-flex; align-items: center; gap: .3rem; font: 700 .8125rem/1 var(--f-sans); color: var(--ink-2); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-pill); padding: .3rem .6rem .3rem .45rem; white-space: nowrap; margin-bottom: -.2rem; }
.cc__att svg { width: .95rem; height: .95rem; }
.cc__res { align-self: stretch; margin: auto 0 0; padding-top: .9rem; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--accent); font-size: .9375rem; }
.tick { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--lime); color: var(--lime-ink); display: inline-grid; place-items: center; }
.tick svg { width: .7rem; height: .7rem; }

/* The dots: one per problem, each a 24px-tall hit area round a 4px bar. */
.cc-dots { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: 1rem; }
.cc-dots[hidden] { display: none; }
.cc-dots button { position: relative; width: 1.25rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; }
.cc-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: #cfd8e1; }
.cc-dots button:hover::before { background: var(--rule-ui); }
.cc-dots button[aria-current="true"]::before { background: var(--accent); }
.cc-dots button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
@media (max-width: 640px) {
  .cc-top { margin-bottom: 1.25rem; }
  /* One card, with the edge of the next one showing: it says "swipe". */
  .cc { flex-basis: 88%; }
  .cc-track { gap: 1rem; }
  .cc__body { padding: 1.1rem 1.15rem 1.2rem; }
  .cc__ask { font-size: 1.1875rem; }
}
@media (prefers-reduced-motion: reduce) { .cc-view { scroll-behavior: auto; } }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.faq__in > * { max-width: 48rem; }
.pr + .faq { background: var(--white); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 0; font-weight: 650; font-size: 1.125rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 1.15rem; color: var(--ink-2); max-width: 40rem; }

/* ---- Final install ------------------------------------------------------ */
.end { background: var(--paper); border-top: 1px solid var(--rule); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.end__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.end__mark { width: clamp(3.5rem, 8vw, 5rem); height: clamp(3.5rem, 8vw, 5rem); }
.end h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem; }

/* ---- Waitlist (Task 3 moves it into a dialog) --------------------------- */
.wait { border-top: 1px solid var(--rule); padding: clamp(2rem, 5vw, 3rem) 0; }
.wait__in > * { max-width: 40rem; }

/* ---- Footer ------------------------------------------------------------- */
.ft { border-top: 1px solid var(--rule); background: var(--paper); padding: clamp(2rem, 5vw, 3rem) 0; font-size: var(--t-sm); color: var(--ink-2); }
.ft__links { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-bottom: 1rem; }
.ft__links a { font-weight: 600; overflow-wrap: anywhere; }
.ft__note { margin: 0 0 .35rem; max-width: 60ch; }

/* ---- Reduced motion: finished frames, nothing fades or slides ----------- */
@media (prefers-reduced-motion: reduce) {
  .hbtn, .mini__copied { transition: none; }
  .hbtn:hover { transform: none; }
}
.nowrap { white-space: nowrap; }

/* ---- The waitlist dialog (Safari install button) ---- */
.wdlg {
  width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  padding: 1.5rem; border: 1px solid var(--rule-ui); border-radius: 12px;
  background: var(--white); color: var(--ink);
}
.wdlg::backdrop { background: rgba(8, 41, 74, .55); }
.wdlg h2 { font-size: 1.375rem; margin: 0 0 1rem; }
.wdlg__close {
  margin-top: 1rem; font: 600 .9375rem/1 var(--f-sans); color: var(--ink);
  background: transparent; border: 1px solid var(--rule-ui); border-radius: var(--r-pill);
  padding: .6rem 1rem; cursor: pointer;
}
.wdlg__close:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---- Pricing/404/FAQ shared bits (the pricing page's own look: pricing.css) */
.pricing-top { padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.pricing-top h1 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 1rem; }
.pricing-top p { font-size: 1.25rem; color: var(--ink-2); margin: 0; max-width: 40rem; }
.pricing-go { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.pricing-go h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem; }
.pricing-go p { color: var(--ink-2); margin: 0 0 1.25rem; max-width: 40rem; }

/* The page title on /how-it-works, above the three steps. */

/* In-page jumps: smooth, except for people who ask for less motion. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.site-nav a[aria-current="true"], .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ---- The legal and billing pages (generated by tools/build-legal-pages.mjs,
   and billing/): the homepage's header and footer around their own reading
   layout. The homepage zeroes .hero's padding; these pages want it back. */
body.legal-page .hero { position: static; isolation: auto; overflow: visible; padding: clamp(2.25rem, 6vw, 4.5rem) 0 var(--gap); }
body.legal-page .legal-main { max-width: 72rem; }

/* ---- The Canvas how-to guides (guides/*.html) -----------------------------
   The legal pages' reading layout (body.legal-page, the numbered .section
   rail, .legal's lists) plus four things of their own: the breadcrumb, the
   "type this" request card, the small install row inside a guide, and the
   index's list of guides. Scoped to body.guide-page or guide-* classes. */
body.guide-page .crumbs { color: var(--ink-3); margin: 0 0 1rem; }
body.guide-page .crumbs a { color: var(--ink-2); }
body.guide-page .guide-lede { max-width: 40rem; font-size: var(--t-lg); color: var(--ink-2); }
body.guide-page .guide h3 { font-size: var(--t-lg); margin: 1.6em 0 .5em; }
body.guide-page .guide ol > li, body.guide-page .guide ul > li { margin-bottom: .45em; }
.guide-ask { margin: 0 0 1.4rem; max-width: var(--measure); background: var(--lime-soft); border-left: 4px solid var(--lime); border-radius: var(--r-md); padding: 1rem 1.25rem; }
.guide-ask figcaption { font: 700 var(--t-label)/1.2 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .4rem; }
.legal .guide-ask blockquote { border: 0; padding: 0; margin: 0; }
.guide-ask blockquote p { font-size: var(--t-lg); font-weight: 600; color: var(--ink); margin: 0; }
.guide-try { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1.5rem 0 .5rem; }
.guide-checked { color: var(--ink-3); margin-top: 2rem; }
html:not([data-platform="mobile"]) .guide-mobile { display: none; }
.guide-mobile { max-width: 34rem; color: var(--ink-2); margin: 0; }
.guide-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.guide-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 1.25rem 1.4rem; }
.guide-card h2 { font-size: var(--t-h3); line-height: 1.35; margin: 0 0 .5rem; }
.guide-card p { color: var(--ink-2); margin: 0; }
/* The homepage FAQ's single link to the guides. */
.faq__more { margin: 1.5rem 0 0; font-weight: 600; }