/* Elevate Grade site styles. Tokens first, then the shell, then the components in
   page order, then motion. Resting state is always the final state: JavaScript only
   adds motion on top (styles under .js), and nothing waits hidden for a scroll. */

:root{
  --paper:#F3F5F6;
  --white:#FFFFFF;
  --tint:#E9EDF0;
  --navy:#1B2A41;
  --navy-deep:#14213A;
  --slate:#5B6B7A;
  --faint:#5C6A77;
  --rule:#DDE3E8;
  --rule-soft:#E9EDF0;
  --emerald:#17B978;
  --emerald-ink:#0B7A4E;
  --emerald-deep:#096A44;
  --emerald-wash:#DFF5EA;
  --emerald-bright:#2FD08E;
  --draft-wash:#EAEEF1;
  --flag:#A34F14;
  --flag-wash:#F9EBDD;
  --mist:#B9C4D0;

  --shadow-sm:0 1px 2px rgba(27,42,65,.06),0 4px 12px -8px rgba(27,42,65,.18);
  --shadow:0 1px 2px rgba(27,42,65,.05),0 12px 32px -18px rgba(27,42,65,.30);
  --shadow-lift:0 2px 4px rgba(27,42,65,.06),0 22px 48px -26px rgba(27,42,65,.42);

  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;

  --font-display:'Plus Jakarta Sans','Nunito Sans','Helvetica Neue',Arial,sans-serif;
  --font-text:'Nunito Sans','Helvetica Neue',Arial,sans-serif;
  --font-label:'Nunito Sans','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --container:1120px;
  --prose:680px;
  --nav-h:68px;

  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;overflow-x:clip;background:var(--paper);color:var(--navy);
  font-family:var(--font-text);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  /* a word longer than its line (an address, an email) breaks before it escapes; the body clips
     sideways, so without this the end of the word would simply be cut off */
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%;display:block}
a{color:var(--emerald-ink);text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--emerald);outline-offset:3px;border-radius:3px}

.skip{position:absolute;left:-999px;top:12px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:6px;z-index:100;text-decoration:none}
.skip:focus{left:12px}

.container{max-width:var(--container);margin:0 auto;padding-inline:24px}
@media (max-width:520px){.container{padding-inline:20px}}

.section{padding-block:clamp(72px,7.6vw,112px)}
.section.tight{padding-block:clamp(56px,5.6vw,80px)}
.section.top-0{padding-top:0}
.section.top-sm{padding-top:clamp(24px,3vw,40px)}

/* ---------- type ---------- */

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.08;margin:0 0 .5em;color:var(--navy);text-wrap:balance}
/* phones: 31px holds a two-sentence headline in four lines at 360 without dwarfing the lede */
h1{font-size:clamp(31px,4.3vw,52px)}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.12}
h3{font-size:clamp(19px,2.1vw,23px);line-height:1.25;letter-spacing:-.01em}
h4{font-size:17px;font-family:var(--font-text);font-weight:700;letter-spacing:0;line-height:1.35}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ---------- wrapping ----------
   Headings balance (above). Running text keeps a lone word off its last line; the longhand is
   used so a label's own white-space:nowrap still wins. A headline written as two sentences, one
   per span with a <br> between, balances each sentence on its own: balance across a forced break
   left "teacher." alone on the last line of the home page's headline. */
p,li,dd,dt,figcaption,blockquote,td,.lede{text-wrap-style:pretty}
h1>.a,h1>.b{display:block}
h1>.a+br{display:none}

.lede{font-size:clamp(18px,1.65vw,20.5px);line-height:1.5;color:var(--slate);max-width:58ch}
.eyebrow{font-family:var(--font-label);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:14px;text-wrap:balance}
.eyebrow.on{color:var(--emerald-ink)}
/* a small label inside a card or a step: not a section eyebrow */
.cue{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald-ink);display:block;margin-bottom:10px;text-wrap:balance}
.measure{max-width:22ch}
.measure-wide{max-width:30ch}
.muted{color:var(--slate)}
.small{font-size:14.5px}
strong{font-weight:700}
.section-head{max-width:var(--prose)}
.section-head h2{margin-bottom:.35em}
.section-head p{color:var(--slate);margin-top:0;margin-bottom:0}
.section-head .lede{margin-top:14px}

/* ---------- nav ---------- */

.nav{position:sticky;top:0;z-index:50;background:rgba(243,245,246,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.nav.stuck{border-bottom-color:var(--rule-soft);box-shadow:0 1px 12px -6px rgba(27,42,65,.25)}
.nav .container{display:flex;align-items:center;gap:28px;height:var(--nav-h)}
.nav-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--emerald);transform:scaleX(var(--progress,0));transform-origin:left;pointer-events:none}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--navy);flex:0 0 auto}
.brand .mark{width:32px;height:32px;color:var(--emerald);display:flex;align-items:center;flex:0 0 auto;margin-right:-1px}
.brand .mark svg{width:100%;height:100%;overflow:visible;display:block}
/* The mark (markSvg in src/layout.js), wherever it appears: each petal grows from its own tip at the
   centre, the core from its middle. Vector all the way, never rasterised by a will-change, so it is
   as sharp at 30 px in the nav as at 44 px on the brain's plate. Motion: the end of this file. */
.mark-svg{shape-rendering:geometricPrecision}
.mark-svg .petal path{transform-box:fill-box;transform-origin:50% 100%}
.mark-svg .core{transform-box:fill-box;transform-origin:center}
.brand .name{font-family:'Lexend',var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.025em;line-height:1;position:relative;top:1px}
.brand .name b{font-weight:600;color:var(--emerald-ink)}
.nav-links{display:flex;gap:26px;margin-left:6px}
.nav-links a{position:relative;color:var(--navy);text-decoration:none;font-weight:600;font-size:15.5px;padding:6px 0}
/* the product name carries its category underneath, so a first-time visitor
   never meets a name without knowing what it is */
.nav-links a:not(.sign-call):not(.lean-call){display:flex;flex-direction:column;gap:1px;line-height:1.15}
.nav-links a .c{font-family:var(--font-mono);font-weight:400;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);line-height:1.2;transition:color .2s;white-space:nowrap}
.nav-links a:hover .c,.nav-links a[aria-current='page'] .c{color:var(--emerald-ink)}
.nav-links a:not(.sign-call):not(.lean-call)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--emerald);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out)}
.nav-links a:hover::after,.nav-links a[aria-current='page']::after{transform:scaleX(1)}
.nav .spacer{flex:1 1 auto}
/* the products menu: the parent goes to the products page, the panel under it to each product.
   It opens on hover and on keyboard focus, with no script, and is a plain indented list on a phone. */
.nav-group{position:relative;display:flex}
.nav-group::before{content:'';position:absolute;left:-18px;right:-18px;top:100%;height:14px}
.nav-menu{position:absolute;left:-18px;top:calc(100% + 12px);width:372px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:8px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .2s var(--ease-out),visibility 0s .2s}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav-links .nav-menu a.nav-item{display:grid;gap:3px;padding:11px 12px;border-radius:var(--r-md);font-weight:400;line-height:1.3}
.nav-links .nav-menu a.nav-item::after{display:none}
.nav-links .nav-menu a.nav-item:hover,.nav-links .nav-menu a.nav-item:focus-visible{background:var(--paper)}
.nav-item b{font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--navy);display:flex;align-items:center;gap:8px}
.nav-item span{font-size:13.5px;color:var(--slate);line-height:1.4;text-wrap-style:pretty}
.nav-item[aria-current='page'] b{color:var(--emerald-ink)}
.soon{font-style:normal;font-family:var(--font-mono);font-weight:500;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--emerald-wash);color:var(--emerald-ink);padding:3px 6px;border-radius:var(--r-xs);line-height:1.2;white-space:nowrap}
.nav-cta{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.nav-cta .in-link{white-space:nowrap}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px 10px;color:var(--navy);font:inherit;font-weight:600;font-size:15px;cursor:pointer}
/* the full nav needs about 1,050 px (the brand, four links and three calls): the menu takes over below 1,080 */
@media (max-width:1080px){
  .nav .container{gap:12px}
  .nav-links,.nav-cta .sign-call,.nav-cta .lean-call,.nav-cta .in-link{display:none}
  .nav-toggle{display:inline-flex;align-items:center;gap:8px}
  .nav.open{border-bottom-color:var(--rule-soft)}
  .nav.open .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:var(--nav-h);background:var(--white);border-bottom:1px solid var(--rule);padding:8px 24px 18px;margin:0;box-shadow:var(--shadow)}
  .nav.open .nav-links a{padding:13px 0;border-bottom:1px solid var(--rule-soft);font-size:17px}
  .nav.open .nav-links a .c{font-size:10px;margin-top:2px}
  .nav.open .nav-links a:not(.sign-call):not(.lean-call)::after{right:auto;width:26px;bottom:-1px}
  .nav.open .nav-links a.lean-call,.nav.open .nav-links a.sign-call{display:inline-flex;margin-top:12px;border-bottom:none;padding:12px 20px;font-size:15.5px;align-self:flex-start}
  /* .nav-links a sets navy text, which left the menu's green call navy on green (about 2:1) */
  .nav.open .nav-links a.sign-call,.nav.open .nav-links a.sign-call:hover{color:#fff}
  .nav.open .nav-group{flex-direction:column}
  .nav.open .nav-group::before{display:none}
  .nav.open .nav-menu{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:0 0 4px 14px;border-left:2px solid var(--rule-soft);margin:2px 0 8px}
  .nav.open .nav-links .nav-menu a.nav-item{padding:9px 0 9px 4px;border-bottom:none;font-size:15px}
  .nav.open .nav-item b{font-size:15.5px}
}
@media (max-width:400px){.brand .name{font-size:17px}}
@media (min-width:1081px){.only-mobile{display:none !important}}

/* ---------- the calls, each its own garment ----------

   sign-call   Margin's free start: emerald ink block, the label's underline is a pen
               stroke that draws left to right and tapers, the arrow nudges
   stamp-call  picking a plan, and form submits: a bordered block that fills on hover
               and imprints on press
   lean-call   a demo, a comparison: a navy outline that leans into its label
   desk-call   starting Marlo: a navy block whose emerald dot becomes a check
   in-link     sign in: text
   thread-link read more inside a card: the arrow travels along a hairline that extends */

.sign-call{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-sm);background:var(--emerald-ink);color:#fff;font-weight:700;font-size:15.5px;text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(11,122,78,.24);transition:background .15s,transform .15s,box-shadow .15s}
.sign-call .label{position:relative;display:inline-block}
.sign-call .label::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.95) 82%,rgba(255,255,255,0) 100%);transform:scaleX(0) rotate(-1.2deg);transform-origin:left center;transition:transform .34s var(--ease-out)}
.sign-call:hover,.sign-call:focus-visible{background:var(--emerald-deep);color:#fff;box-shadow:0 6px 18px -8px rgba(11,122,78,.6)}
.sign-call:hover .label::after,.sign-call:focus-visible .label::after{transform:scaleX(1) rotate(-1.2deg)}
.sign-call:active{transform:translateY(1px);transition-duration:.06s}
.sign-call .arrow{transition:transform .2s var(--ease-out)}
.sign-call:hover .arrow{transform:translateX(3px)}
.sign-call.lg{padding:15px 24px;font-size:16.5px}
.sign-call.small{padding:10px 16px;font-size:15px}
.sign-call.on-emerald{background:var(--navy);box-shadow:none}
.sign-call.on-emerald:hover,.sign-call.on-emerald:focus-visible{background:#0F1B30;box-shadow:none}

.stamp-call{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:13px 18px;border-radius:var(--r-sm);border:2px solid var(--emerald-ink);color:var(--emerald-ink);background:var(--white);font:inherit;font-weight:700;font-size:15.5px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s,transform .08s,box-shadow .18s}
.stamp-call:hover,.stamp-call:focus-visible{background:var(--emerald-ink);color:#fff}
.stamp-call:active{transform:scale(.98);box-shadow:inset 0 3px 8px rgba(0,0,0,.28)}
.stamp-call.lg{width:auto;padding:15px 24px;font-size:16.5px}
.plan.featured .stamp-call{background:var(--emerald-ink);color:#fff}
.plan.featured .stamp-call:hover,.plan.featured .stamp-call:focus-visible{background:var(--emerald-deep)}
p>.stamp-call{width:auto}

.lean-call{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-sm);border:1.5px solid var(--navy);color:var(--navy);background:transparent;font-weight:700;font-size:15.5px;text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 0 var(--navy);transition:box-shadow .18s var(--ease-out),padding .18s var(--ease-out),color .15s}
.lean-call:hover,.lean-call:focus-visible{color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);padding-left:24px;padding-right:16px}
.lean-call.lg{padding:15px 24px;font-size:16.5px}
.lean-call.lg:hover,.lean-call.lg:focus-visible{padding-left:28px;padding-right:20px}

.desk-start{display:inline-block;margin:0}
.desk-call{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:var(--r-sm);background:var(--navy);color:#fff;border:none;font:inherit;font-weight:700;font-size:16.5px;cursor:pointer;white-space:nowrap;transition:background .15s,transform .15s}
.desk-call .dot{width:10px;height:10px;border-radius:50%;background:var(--emerald);position:relative;flex:0 0 auto;transition:transform .25s var(--ease-out)}
.desk-call .dot::after{content:'';position:absolute;left:3px;top:1px;width:3px;height:5px;border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease-out) .05s}
.desk-call:hover,.desk-call:focus-visible{background:#0F1B30}
.desk-call:hover .dot,.desk-call:focus-visible .dot{transform:scale(1.6)}
.desk-call:hover .dot::after,.desk-call:focus-visible .dot::after{transform:rotate(45deg) scale(1)}
.desk-call:active{transform:translateY(1px)}

.in-link{color:var(--navy);text-decoration:none;font-weight:600;font-size:15.5px;padding:6px 8px;margin-right:2px}
.in-link:hover{color:var(--emerald-ink)}

.thread-link{text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:600;color:var(--emerald-ink);position:relative;padding-bottom:3px}
.thread-link::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:calc(100% - 22px);background:currentColor;transition:width .28s var(--ease-out)}
.thread-link .arrow{transition:transform .28s var(--ease-out)}
.card.link:hover .thread-link::after{width:100%}
.card.link:hover .thread-link .arrow{transform:translateX(4px)}

.calls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.call-note{font-size:13.5px;color:var(--faint);margin:12px 0 0;max-width:62ch}

/* ---------- hero ---------- */

.hero{padding:clamp(44px,5.2vw,72px) 0 clamp(40px,4.2vw,56px);position:relative}
.hero .container{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:clamp(32px,4vw,56px);align-items:center}
.hero h1{max-width:15ch}
@media (min-width:1040px){.hero h1 .a,.hero h1 .b{white-space:nowrap}}
.hero h1 .a{color:var(--slate)}
.hero h1 .b{color:var(--emerald-ink)}
.hero .lede{margin:20px 0 28px}
@media (max-width:940px){.hero .container{grid-template-columns:1fr;gap:36px}.hero h1{max-width:none}}

/* ---------- the product recordings ---------- */

.film{margin:0;position:relative}
.film-frame{position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow);aspect-ratio:var(--ar,1.6);line-height:0}
.film-frame video,.film-frame>img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.film-live{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(20,33,58,.86);color:#fff;padding:6px 9px;border-radius:var(--r-xs);line-height:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.film-live i{width:7px;height:7px;border-radius:50%;background:var(--emerald-bright)}
.film-play{position:absolute;left:50%;top:50%;z-index:3;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:none;background:rgba(20,33,58,.88);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow)}
.film-play[hidden]{display:none}
.film-play:hover{background:var(--navy)}
.film-gif{position:absolute;right:12px;bottom:12px;z-index:2;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(20,33,58,.86);color:#fff;padding:6px 9px;border-radius:var(--r-xs);text-decoration:none;line-height:1;opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s}
.film-frame:hover .film-gif,.film-gif:focus-visible{opacity:1;transform:none}
@media (hover:none){.film-gif{opacity:.9;transform:none}}
.film figcaption{margin:12px 2px 0;font-size:13.5px;line-height:1.5;color:var(--faint)}
.film-cap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.film-cap .chip{flex:0 0 auto}
.hero-media .film{max-width:none}

/* ---------- the class-set illustration (kept for the Margin page) ---------- */

.set{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;font-size:13.5px;container-type:inline-size}
.set-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule-soft);flex-wrap:wrap}
.set-head .title{font-weight:600}
.set-head .meta{color:var(--faint);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em}
.set-head .spacer{flex:1}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:var(--r-xs);white-space:nowrap;transition:background .3s,color .3s}
.chip.draft{background:var(--draft-wash);color:var(--slate)}
.chip.signed{background:var(--emerald-wash);color:var(--emerald-ink)}
.chip.flag{background:var(--flag-wash);color:var(--flag)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.set-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.set table{width:100%;border-collapse:collapse;min-width:0}
.set th,.set td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rule-soft);white-space:nowrap}
.set td.wrap{white-space:normal;color:var(--slate)}
.set th:first-child,.set td:first-child{padding-left:16px}
.set th:last-child,.set td:last-child{padding-right:16px}
.set th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:500}
.set td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--slate)}
.set td.lvl{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500}
.set tr:last-child td{border-bottom:none}
.set-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--paper);border-top:1px solid var(--rule-soft);color:var(--slate);font-size:13.5px}
.set-foot .sig{width:20px;height:20px;border-radius:50%;background:var(--emerald-wash);color:var(--emerald-ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.caption{font-size:12.5px;color:var(--faint);margin:10px 2px 0;text-align:right;letter-spacing:.01em}
@container (max-width:490px){.set-head .spacer{flex:0 0 100%;height:0}.set-head{row-gap:6px}}
@container (max-width:430px){.set th:nth-child(3),.set td:nth-child(3),.set th:nth-child(4),.set td:nth-child(4){display:none}}

/* ---------- grids and cards ---------- */

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-sm);position:relative}
.card.link{transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out),border-color .24s;text-decoration:none;color:inherit;display:block}
.card.link:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#CBD3DA}
.card h3{margin-bottom:10px}
.card p{color:var(--slate);margin-bottom:0}
.card p+p{margin-top:10px}
.note-line{margin:14px 0 0;font-size:14px;font-weight:700;color:var(--flag)}
.card-film .film{margin:4px 0 16px}
.card-film .film-frame{box-shadow:var(--shadow-sm)}

/* three columns on one rule, no cards */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);margin-top:34px}
.cols3>div{padding:26px 28px 6px 0;border-right:1px solid var(--rule)}
.cols3>div+div{padding-left:28px}
.cols3>div:last-child{border-right:none;padding-right:0}
.cols3 h3{font-size:20px;margin-bottom:8px}
.cols3 p{color:var(--slate);margin:0;font-size:15.5px}
@media (max-width:780px){.cols3{grid-template-columns:1fr}.cols3>div{border-right:none;border-bottom:1px solid var(--rule);padding:22px 0}.cols3>div+div{padding-left:0}.cols3>div:last-child{border-bottom:none}}

/* a ruled list: a bold lead and one line, row by row */
.ruled{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--rule)}
.ruled li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.ruled li b{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em;line-height:1.25;color:var(--navy)}
.ruled li span{color:var(--slate)}
@media (max-width:700px){.ruled li{grid-template-columns:1fr;gap:6px}}
/* the compact variant (the products and audience pages) keeps two columns down to a phone, where a
   long lead such as "administrator" no longer fits its column: there the lead sits above its line.
   ul. lifts it over the page stylesheets, which load after this one. */
@media (max-width:520px){ul.ruled.compact li{grid-template-columns:minmax(0,1fr);gap:4px}}

/* ---------- steps ---------- */

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.step{padding:30px 28px 30px 0;border-right:1px solid var(--rule)}
.step:last-child{border-right:none}
.step+.step{padding-left:28px}
.step .n{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;color:var(--faint);display:block;margin-bottom:12px}
.step h3{font-size:20px}
.step p{color:var(--slate);margin:0;font-size:15.5px}
@media (max-width:780px){.step{border-right:none;border-bottom:1px solid var(--rule);padding:24px 0}.step+.step{padding-left:0}.step:last-child{border-bottom:none}}

/* ---------- the sign-off: three chapters a scroll moves through ---------- */

.signoff .section-head p{margin-top:8px}
.signoff-track{position:relative;height:320vh;margin-top:clamp(24px,3vw,40px)}
.signoff-stage{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:flex;align-items:center}
.signoff-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4vw,64px);align-items:center;width:100%}
.signoff-steps{list-style:none;margin:0;padding:0 0 0 34px;position:relative}
.signoff-rail{position:absolute;left:10px;top:12px;bottom:12px;width:2px;background:var(--rule);border-radius:2px;overflow:hidden}
.signoff-fill{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--emerald);transform:scaleY(var(--p,1));transform-origin:top}
.signoff-step{position:relative;padding:12px 0 18px}
.signoff-step::before{content:'';position:absolute;left:-30px;top:20px;width:10px;height:10px;border-radius:50%;background:var(--emerald);border:2px solid var(--emerald);transition:background .25s,border-color .25s}
.signoff-step .n{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;color:var(--emerald-ink);display:block;margin-bottom:6px;transition:color .25s}
.signoff-step h3{margin:0 0 6px;font-size:clamp(20px,2.2vw,25px);color:var(--navy);transition:color .25s}
.signoff-step p{margin:0;color:var(--slate);font-size:15.5px;max-width:40ch;transition:color .25s}
/* with the script running, only the current chapter is lit */
.js .signoff-step:not(.is-on)::before{background:var(--paper);border-color:var(--rule)}
.js .signoff-step:not(.is-on) .n{color:var(--faint)}
.js .signoff-step:not(.is-on) h3{color:var(--slate)}
.js .signoff-step:not(.is-on) p{color:var(--faint)}

.signoff-plates{position:relative;aspect-ratio:1.42}
.plate{position:absolute;inset:0;margin:0;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .6s var(--ease-out)}
.plate img{width:100%;height:100%;object-fit:cover;object-position:top left;flex:1 1 auto;min-height:0}
.plate figcaption{padding:12px 16px;border-top:1px solid var(--rule-soft);background:var(--paper);font-size:13.5px;color:var(--slate);display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.plate-chips{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.plate-chips .chip{box-shadow:var(--shadow-sm)}
.js .signoff-plates[data-plate='0'] .plate-sign{transform:translateY(104%)}
.js .signoff-plates[data-plate='1'] .plate-give,.js .signoff-plates[data-plate='2'] .plate-give{transform:translateY(-4%) scale(.97)}
.sig-line{display:inline-flex;align-items:center;gap:12px}
.signature{width:118px;height:38px;flex:0 0 auto}
.signature path{fill:none;stroke:var(--emerald-ink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:560;stroke-dashoffset:var(--sig,0)}
.sig-meta{font-size:13px;color:var(--navy)}
.sig-meta b{font-weight:700;margin-right:4px}
.sig-hint{font-size:13px;color:var(--faint);flex:1 1 100%}
/* without the script, the two plates stand one above the other and the story reads top to bottom */
html:not(.js) .signoff-track{height:auto}
html:not(.js) .signoff-stage{position:static;height:auto;display:block}
html:not(.js) .signoff-plates{aspect-ratio:auto;display:grid;gap:14px}
html:not(.js) .plate{position:relative}
@media (max-width:900px){
  .signoff-track{height:auto}
  .signoff-stage{position:static;height:auto;display:block}
  .signoff-grid{grid-template-columns:1fr;gap:22px}
  .signoff-plates{aspect-ratio:auto;display:grid;gap:14px;order:-1}
  .plate{position:relative;transform:none !important}
  .plate img{max-height:240px}
}

/* ---------- stats ---------- */

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.stat{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px 26px 22px;box-shadow:var(--shadow-sm)}
.stat .fig{font-family:var(--font-display);font-weight:600;font-size:clamp(36px,4.2vw,48px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--navy);margin:0 0 8px}
.stat .fig small{font-size:.4em;color:var(--emerald-ink);letter-spacing:0;margin-left:8px;font-family:var(--font-text);font-weight:700}
.stat p{color:var(--slate);margin:0;font-size:15px}
.footnote{font-size:13.5px;color:var(--faint);max-width:70ch;margin-top:18px}

/* ---------- dark band ---------- */

.band{background:var(--navy-deep);color:#E8EDF2}
.band h2,.band h3{color:#fff}
.band .eyebrow{color:var(--emerald-bright)}
.band .lede{color:var(--mist)}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 44px;margin-top:10px}
.principle{padding:22px 0;border-top:1px solid rgba(255,255,255,.12)}
.principle h4{color:#fff;margin:0 0 6px;font-size:17.5px}
.principle p{color:var(--mist);margin:0;font-size:15.5px}
.principle .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--emerald-bright);display:block;margin-bottom:8px}

/* ---------- lists ---------- */

.list{list-style:none;padding:0;margin:0}
.list li{position:relative;padding-left:28px;margin-bottom:12px;color:var(--navy)}
.list li::before{content:'';position:absolute;left:0;top:.72em;width:14px;height:2px;background:var(--emerald);border-radius:1px}
.list li b{font-weight:700}
.list.tight li{margin-bottom:8px;font-size:15.5px}
.list.check li::before{width:8px;height:14px;border:solid var(--emerald-ink);border-width:0 2.5px 2.5px 0;background:none;transform:rotate(45deg);top:.28em;left:4px}
.list.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px 44px}
@media (max-width:780px){.list.cols{grid-template-columns:1fr}}

/* ---------- feature rows ---------- */

.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.4vw,60px);align-items:center}
.feature.flip>:first-child{order:2}
.feature-text{max-width:46ch}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:30px}.feature.flip>:first-child{order:0}.feature-text{max-width:none}}

/* ---------- product screenshots ---------- */

.shot{margin:0;position:relative}
.shot-frame{
  display:block;position:relative;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow);
  line-height:0;color:inherit;text-decoration:none;
  transition:box-shadow .2s,border-color .2s,transform .2s;
}
a.shot-frame{cursor:zoom-in}
a.shot-frame:hover{box-shadow:var(--shadow-lift);border-color:#C9D2D9;transform:translateY(-2px)}
.js .shot-frame:not(.is-loaded){background:linear-gradient(100deg,#EDF0F2 8%,#F7F9FA 24%,#EDF0F2 40%);background-size:300% 100%}
.shot-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s var(--ease)}
.shot-frame.contain{background:var(--white);padding:14px}
.shot-frame.contain img{object-fit:contain;border-radius:var(--r-xs)}
.shot-zoom{
  position:absolute;right:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(20,33,58,.88);color:#fff;
  font-family:var(--font-text);font-size:12px;font-weight:700;line-height:1;
  padding:7px 10px;border-radius:var(--r-sm);
  opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.shot-zoom svg{width:12px;height:12px;flex:0 0 auto}
.shot-frame:hover .shot-zoom,.shot-frame:focus-visible .shot-zoom{opacity:1;transform:none}
@media (hover:none){.shot-zoom{opacity:.9;transform:none}}
.shot figcaption{margin:14px 2px 0;font-size:14.5px;line-height:1.55;color:var(--slate);max-width:52ch}
.shot figcaption b{display:block;color:var(--navy);font-weight:700;margin-bottom:2px}
.shot figcaption a{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.shot figcaption .line{display:block}
.shot.center{margin-inline:auto}
.shot.center figcaption{margin-inline:auto;text-align:center;max-width:64ch;text-wrap:pretty}

/* the frame keeps the exact aspect of the crop, so nothing shifts while it loads */
.shot-frame{aspect-ratio:var(--ar,2)}
@media (max-width:640px){.shot-frame{aspect-ratio:var(--ar-narrow,var(--ar,2))}}

/* two wide, shallow screens stacked on one stage */
.shot.stacked{display:flex;flex-direction:column;gap:14px}
.shot.stacked .shot-frame{aspect-ratio:auto}
.shot.stacked figcaption{margin-top:4px}

/* the tinted stage a screenshot sits on */
.stage{background:var(--tint);border-radius:var(--r-xl);padding:clamp(22px,3.2vw,40px)}
@media (max-width:600px){
  .stage,.run-shot{margin-inline:-20px;border-radius:0;padding-inline:16px}
}
.stage-head{max-width:var(--prose);margin:0 auto clamp(22px,2.6vw,32px);text-align:center}
.stage-head h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:10px}
.stage-head p{color:var(--slate);font-size:16px;margin:0}

/* one marking run, as a numbered sequence of screens */
.run{list-style:none;margin:clamp(30px,3.4vw,44px) 0 0;padding:0}
.run-step{padding-block:clamp(34px,4vw,52px);border-top:1px solid var(--rule)}
.run-step:first-child{border-top:none;padding-top:0}
.run-text{max-width:var(--prose)}
.run-text .run-n{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--faint);display:block;margin-bottom:10px}
.run-text .cue{margin-bottom:10px}
.run-text h3{font-size:clamp(20px,2.3vw,26px);margin-bottom:10px}
.run-text p{color:var(--slate);margin:0}
.run-shot{margin-top:clamp(20px,2.4vw,30px);background:var(--tint);border-radius:var(--r-xl);padding:clamp(14px,2vw,26px)}

/* ---------- lightbox ---------- */

.lb{
  border:none;padding:0;background:transparent;color:var(--navy);
  max-width:min(1240px,95vw);max-height:94vh;width:auto;overflow:visible;
}
.lb::backdrop{background:rgba(14,22,36,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lb-inner{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 90px -30px rgba(10,16,28,.6)}
.lb-scroll{max-height:78vh;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--tint)}
.lb img{width:auto;max-width:min(1240px,95vw);max-height:78vh;object-fit:contain;margin:0 auto}
@media (max-width:820px){.lb img{max-width:none;width:auto;height:auto;max-height:none}.lb-scroll{max-height:72vh}}
.lb-cap{padding:14px 20px;border-top:1px solid var(--rule-soft);font-size:14.5px;color:var(--slate);display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.lb-cap b{color:var(--navy)}
.lb-close{
  position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;
  border:none;background:var(--white);color:var(--navy);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.lb-close svg{width:16px;height:16px;flex:0 0 auto}
.lb-close:hover{background:var(--navy);color:#fff}
@media (max-width:600px){.lb-close{top:-46px;right:0;background:rgba(255,255,255,.92)}}

/* ---------- coded illustrations ---------- */

.chat{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px;font-size:14.5px;display:flex;flex-direction:column;gap:12px}
.chat .ch{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;margin-bottom:4px}
.msg{max-width:88%;padding:12px 14px;border-radius:12px;line-height:1.5}
.msg.user{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--paper);color:var(--navy);border-bottom-left-radius:4px}
.msg .src{display:flex;width:fit-content;max-width:100%;align-items:center;gap:6px;margin-top:10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--emerald-ink);background:var(--emerald-wash);padding:4px 8px;border-radius:var(--r-xs)}
.msg .esc{display:block;margin-top:10px;font-size:13px;color:var(--slate)}
.msg .esc b{color:var(--emerald-ink);font-weight:700}

/* ---------- faq ---------- */

.faq-wrap{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,4vw,64px);align-items:start}
.faq-wrap .section-head{margin-bottom:0}
@media (min-width:961px){.faq-wrap .section-head{position:sticky;top:104px}}
@media (max-width:960px){.faq-wrap{grid-template-columns:1fr;gap:24px}}
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:19px 0;font-family:var(--font-display);font-weight:600;font-size:18.5px;line-height:1.35;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color .15s;text-wrap:balance}
.faq summary:hover{color:var(--emerald-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:0 0 auto;width:11px;height:11px;border:solid var(--emerald-ink);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq .a{padding:0 0 22px;color:var(--slate);max-width:64ch;overflow:hidden}
.faq .a p{margin:0 0 .6em}

/* ---------- cta band ---------- */

.cta{background:var(--emerald);color:var(--navy)}
.cta .container{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,3vw,48px);align-items:center}
.cta h2{color:var(--navy);margin-bottom:10px}
.cta p{color:#0C3B28;font-size:16.5px;max-width:52ch;margin:0}
.cta p a{color:var(--navy)}
.cta .calls{justify-content:flex-end}
.cta .lean-call{border-color:var(--navy);color:var(--navy)}
@media (max-width:880px){.cta .container{grid-template-columns:1fr;gap:26px}.cta .calls{justify-content:flex-start}}

/* ---------- page hero ---------- */

.page-hero{padding:clamp(44px,5vw,68px) 0 clamp(32px,3.4vw,44px)}
.page-hero .lede{margin:18px 0 26px}
.page-hero .tag{font-family:var(--font-display);font-size:clamp(17px,1.9vw,20px);color:var(--slate);margin:14px 0 0;letter-spacing:-.01em}
.page-hero .tag b{color:var(--emerald-ink);font-weight:600}
.desk-hero .container{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,56px);align-items:center}
.desk-hero h1{max-width:none}
@media (max-width:940px){.desk-hero .container{grid-template-columns:1fr;gap:34px}}

/* ---------- forms ---------- */

.form-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,3.6vw,48px);align-items:start}
@media (max-width:900px){.form-wrap{grid-template-columns:1fr;gap:32px}}
.form{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(22px,2.8vw,32px);box-shadow:var(--shadow-sm)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px}
.field label .opt{color:var(--faint);font-weight:400}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1.5px solid var(--rule);border-radius:var(--r-sm);background:#fff;color:var(--navy);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--emerald-ink);box-shadow:0 0 0 3px var(--emerald-wash)}
.field textarea{min-height:118px;resize:vertical}
.field .hint{font-size:13px;color:var(--faint);margin:6px 0 0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.form-foot .note{font-size:13.5px;color:var(--faint);margin:0}
.form-status{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);font-size:15px;display:none}
.form-status.ok{display:block;background:var(--emerald-wash);color:var(--emerald-ink);border:1px solid #BFE8D5}
.form-status.err{display:block;background:var(--flag-wash);color:var(--flag);border:1px solid #EFCFB4}
.form-status a{color:inherit;font-weight:600}
.copybtn{font:inherit;font-size:13.5px;font-weight:600;background:none;border:1px solid currentColor;border-radius:var(--r-xs);padding:3px 8px;cursor:pointer;color:inherit;margin-left:8px}
.aside .card{margin-bottom:16px}
.aside .card:last-child{margin-bottom:0}
.aside h3{font-size:19px}
.aside .list li{font-size:15px}
.desk-note{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-sm);background:var(--emerald-wash);color:var(--emerald-ink);font-size:14.5px;max-width:52ch}

/* ---------- footer ---------- */

.footer{border-top:1px solid var(--rule);padding:56px 0 40px;color:var(--slate);font-size:14.5px}
.footer .container{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.75fr));gap:32px}
.footer .brand .name{font-size:18px}
.footer .tag{margin:14px 0 0;max-width:36ch;color:var(--slate)}
.footer .tag b{color:var(--emerald-ink);font-weight:600}
.footer h4{font-family:var(--font-label);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:6px 0 14px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:10px}
/* the category sits under the product's name, as it does in the nav, so "Teacher Assistant" is never
   split across two lines in a narrow footer column */
.footer .fcat{display:block;color:var(--faint);font-size:12px;font-family:var(--font-mono);letter-spacing:.06em;line-height:1.3;margin-top:1px;white-space:nowrap}
.footer a{color:var(--navy);text-decoration:none}
.footer a:hover{color:var(--emerald-ink);text-decoration:underline}
.footer .legal{grid-column:1/-1;border-top:1px solid var(--rule-soft);padding-top:22px;margin-top:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 28px;font-size:13.5px;color:var(--faint)}
.footer .legal .legal-note{max-width:52ch}
@media (max-width:840px){.footer .container{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.footer .container>:first-child{grid-column:1/-1}}
/* On a touch screen every footer link is a target, so each one gets a full row to be hit. */
@media (hover:none){.footer li{margin-bottom:2px}.footer li a{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:40px}.footer .legal a{min-height:40px;display:inline-flex;align-items:center}}

/* ---------- plans and the billing-period toggle ---------- */

.plans-wrap{display:flex;flex-direction:column;align-items:center}
.period{display:inline-flex;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-md);padding:4px;gap:2px;margin:0 auto 26px;box-shadow:var(--shadow-sm)}
.period-choice{font:inherit;font-weight:700;font-size:14.5px;color:var(--slate);background:transparent;border:none;border-radius:calc(var(--r-md) - 3px);padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s,background .2s}
.period-choice:hover{color:var(--navy)}
.period-choice[aria-pressed='true']{background:var(--navy);color:#fff}
.period-choice .save{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--emerald-wash);color:var(--emerald-ink);padding:3px 7px;border-radius:var(--r-xs);white-space:nowrap}
.period-choice[aria-pressed='true'] .save{background:var(--emerald);color:var(--navy)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;width:100%}
@media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px;position:relative}
.plan.featured{border-color:var(--emerald);box-shadow:var(--shadow)}
.plan .badge{position:absolute;top:-11px;left:24px;background:var(--emerald-ink);color:#fff;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-xs)}
.plan h3{margin:0;font-size:22px}
.plan .blurb{color:var(--slate);margin:0;font-size:15px;text-wrap:balance}
.plan .price{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,3.6vw,42px);letter-spacing:-.03em;line-height:1;color:var(--navy);margin:8px 0 0;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.plan .price .amount{display:inline-block;min-width:1.1ch}
.plan .price small{font-size:.38em;color:var(--slate);letter-spacing:0;margin-left:6px;font-family:var(--font-text);font-weight:600}
.plan .per{font-size:13.5px;color:var(--faint);margin:0 0 4px;min-height:1.6em}
.plan .per .per-year{display:none}
.plans-wrap[data-period='year'] .plan .per .per-month{display:none}
.plans-wrap[data-period='year'] .plan .per .per-year{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.per .saving{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--emerald-ink);background:var(--emerald-wash);padding:2px 6px;border-radius:var(--r-xs);white-space:nowrap}
/* Prices in the visitor's currency (src/currency.js): the symbol (CA$ or $) a size down beside the
   figure, the note under a product billed in another currency, the link to the other currency. */
.price .cur{font-size:.6em;letter-spacing:-.01em;margin-right:.05em}
.billed-in{margin:18px 0 0;font-size:13.5px;line-height:1.4;font-weight:600;color:var(--slate)}
.plans-wrap>.billed-in{margin-top:16px;text-align:center}
.bundle-side .billed-in{margin:0;color:#0C3B28}
.currency-switch{white-space:nowrap}
.plan .list li{font-size:15px;margin-bottom:8px}
.plan .list li.off{color:var(--faint)}
.plan .list li.off::before{background:var(--rule)}
.plan .stamp-call{margin-top:auto}
.plan .alt{font-size:13.5px;color:var(--faint);margin:0;text-align:center}
.strip{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-sm);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px;align-items:center}
.strip h3{margin:0 0 6px}
.strip p{margin:0}
@media (max-width:760px){.strip{grid-template-columns:1fr}}
.compare-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--rule);background:var(--white);box-shadow:var(--shadow-sm)}
.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:12px 16px;border-bottom:1px solid var(--rule-soft);text-align:left;white-space:nowrap}
.compare th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500;background:var(--paper)}
.compare th:not(:first-child),.compare td.c{text-align:center}
.compare td:first-child{color:var(--navy);white-space:normal;min-width:240px}
.compare td.c{color:var(--slate);font-variant-numeric:tabular-nums}
.compare tr:last-child td{border-bottom:none}
.compare .yes{color:var(--emerald-ink);font-weight:700}
.compare .no{color:var(--faint);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
/* an address in code moves to the next line whole; it breaks inside only if it is wider than the line */
code{font-family:var(--font-mono);font-size:.9em;background:var(--tint);padding:2px 6px;border-radius:var(--r-xs);color:var(--navy);overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- legal pages ---------- */

.legal-doc{max-width:var(--prose)}
.legal-doc h2{font-size:22px;margin:36px 0 10px}
.legal-doc p,.legal-doc li{color:var(--slate);font-size:16px}
.legal-doc ul{padding-left:22px;margin:0 0 1em}
.legal-doc li{margin-bottom:8px}
.legal-doc strong{color:var(--navy)}

/* ---------- motion ----------
   Everything below is additive: without the script, or with motion reduced, every
   element already sits in its final state. Reveals move, they never hide.

   Curves: --ease-out for anything arriving; --ease-in-out for something that moves on screen
   (the mark turning); --spring for the mark's petals, a damped spring with one small overshoot
   (about 8 percent at 40 percent of the run, settled by 70 percent). */

:root{
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --spring:linear(0, .066 4.2%, .221 8.3%, .411 12.5%, .599 16.7%, .763 20.8%, .893 25%, .985 29.2%, 1.043 33.3%, 1.074 37.5%, 1.083 41.7%, 1.079 45.8%, 1.067 50%, 1.051 54.2%, 1.035 58.3%, 1.021 62.5%, 1.01 66.7%, 1.002 70.8%, .997 75%, .994 79.2%, .993 83.3%, .993 87.5%, .994 91.7%, .996 95.8%, 1);
}

.reveal,.stagger>*{transform:none}

@media (prefers-reduced-motion:no-preference){

  /* sections settle into place as you reach them, children a beat apart; a section's heading
     (site.js tags it) arrives first and its content after it. Only what starts below the screen
     is held back (site.js marks it .pre, instantly, while it is out of sight): what is already on
     screen when the script runs stays exactly where it was painted, so nothing jumps on load. */
  .js .reveal{transition:transform .6s var(--ease-out) var(--d,0ms)}
  .js .reveal.pre:not(.in){transform:translateY(18px);transition:none}
  .js .reveal.head-in.pre:not(.in){transform:translateY(12px)}
  .js .stagger>*{transition:transform .55s var(--ease-out) var(--d,0ms)}
  .js .stagger.pre:not(.in)>*{transform:translateY(15px);transition:none}

  /* the class set fills in row by row */
  .js .set tbody tr{transition:transform .45s var(--ease-out) var(--d,0ms)}
  .js .set.pre:not(.in) tbody tr{transform:translateY(6px);transition:none}

  /* the hero: the statement rises into place line by line from the first paint. It needs no
     script, so it never waits for one, and it moves without hiding: the words are on screen,
     and counted as painted, from the first frame. */
  [data-hero] .hero-text>*{animation:hero-rise .7s var(--ease-out) both}
  [data-hero] .hero-text>:nth-child(2){animation-delay:.04s}
  [data-hero] .hero-text>:nth-child(3){animation-delay:.08s}
  [data-hero] .hero-text>:nth-child(4){animation-delay:.12s}
  [data-hero] .hero-text>:nth-child(5){animation-delay:.16s}
  [data-hero] .hero-media>.film{animation:hero-slide .8s var(--ease-out) .1s both}

  /* the mark, on load: the flower turns a third of a petal into place while each petal grows out
     from the centre 45 ms after the one before, on the spring, and the core settles last. Once,
     from the first paint, on the nav's mark and on the brain's plate. */
  .nav .brand .mark-svg,.brain-mark .mark-svg{animation:mark-turn .9s var(--ease-out) both}
  .nav .brand .mark-svg .petal path,.brain-mark .mark-svg .petal path{animation:mark-petal .72s var(--spring) both;animation-delay:calc(60ms + var(--i) * 45ms)}
  .nav .brand .mark-svg .core,.brain-mark .mark-svg .core{animation:mark-core .6s var(--spring) .42s both}
  .brain-mark .mark-svg{animation-delay:.2s}
  .brain-mark .mark-svg .petal path{animation-delay:calc(.26s + var(--i) * 45ms)}
  .brain-mark .mark-svg .core{animation-delay:.62s}

  /* and on hover or keyboard focus: the mark turns one petal, 45 degrees, so it comes to rest in
     the same figure, and the petals open a touch, each a beat after the last. Transitions, so a
     quick pass in and out reverses smoothly from wherever it is; it closes faster than it opens.
     These use rotate, translate and scale, which compose with the load animation's transform. */
  .brand .mark-svg{transition:rotate .42s var(--ease-in-out)}
  .brand .mark-svg .petal path{transition:translate .2s var(--ease-out)}
  .brand .mark-svg .core{transition:scale .2s var(--ease-out)}
  .brand:focus-visible .mark-svg{rotate:45deg;transition-duration:.55s}
  .brand:focus-visible .mark-svg .petal path{translate:0 -4.5px;transition-duration:.42s;transition-delay:calc(var(--i) * 18ms)}
  .brand:focus-visible .mark-svg .core{scale:1.22;transition-duration:.42s}

  /* the product recordings, where the browser can tie motion to the scroll: each pane lifts and
     widens into place over the first third of its pass through the viewport, so the product
     arrives as the visitor reaches it. Elsewhere the pane takes the ordinary arrival (site.js). */
  @supports (animation-timeline:view()){
    .js .film.pane{transform-origin:50% 0;animation:pane-rise linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
  }

  /* the price flips with the period */
  .plan .price.tick .amount{animation:tick .34s var(--ease-out)}
  .period-choice .save{transition:transform .25s var(--ease-out)}
  .period-choice[aria-pressed='true'] .save{transform:scale(1.06)}

  /* a screenshot lifts a little under the pointer */
  a.shot-frame:hover img{transform:scale(1.018)}

  /* and shows it is still arriving */
  .js .shot-frame.is-near:not(.is-loaded){animation:sheen 1.7s linear 4}

  /* the moment a draft is signed */
  .chip.just-signed{animation:chip-pop .5s var(--ease-out)}

  .lb[open]{animation:lb-in .3s var(--ease-out) both}
  .lb[open]::backdrop{animation:fade-in .3s ease both}
}

/* the mark's hover answer, only where a pointer can really hover (a tap would leave it stuck) */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .brand:hover .mark-svg{rotate:45deg;transition-duration:.55s}
  .brand:hover .mark-svg .petal path{translate:0 -4.5px;transition-duration:.42s;transition-delay:calc(var(--i) * 18ms)}
  .brand:hover .mark-svg .core{scale:1.22;transition-duration:.42s}
}

@media (prefers-reduced-motion:reduce){
  .signoff-fill{transform:scaleY(1)}
  .signature path{stroke-dashoffset:0}
  .js .signoff-plates[data-plate='0'] .plate-sign{transform:none}
  .film-video{display:none}
  .film-frame>img{display:block}
}

@keyframes hero-rise{from{transform:translateY(14px)}to{transform:none}}
@keyframes hero-slide{from{transform:translateX(24px)}to{transform:none}}
@keyframes mark-turn{from{transform:rotate(-15deg)}to{transform:none}}
@keyframes mark-petal{from{transform:scale(.32);opacity:0}24%{opacity:1}to{transform:scale(1);opacity:1}}
@keyframes mark-core{from{transform:scale(.4)}to{transform:scale(1)}}
@keyframes pane-rise{from{transform:translateY(56px) scale(.94)}to{transform:none}}
@keyframes tick{0%{transform:translateY(-8px)}60%{transform:translateY(2px)}100%{transform:none}}
@keyframes sheen{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes chip-pop{0%{transform:scale(.82)}62%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes lb-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- full panes: a product recording at the width of the page ---------- */

.pane-section{background:var(--tint)}
.pane-section+.pane-section{padding-top:0}
.pane-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(22px,3vw,34px)}
.pane-head h2{margin-bottom:0}
.pane-head .list{margin:0}
.film.pane{max-width:1240px;margin-inline:auto}
.pane-chrome{display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;border:1px solid var(--rule);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--white);line-height:1}
.pane-dots{display:inline-flex;gap:6px}
.pane-dots i{width:10px;height:10px;border-radius:50%;background:var(--rule)}
.pane-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;line-height:1.35;text-transform:uppercase;color:var(--faint);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.pane-url{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--faint);white-space:nowrap}
.film.pane .film-frame{border-radius:0 0 var(--r-lg) var(--r-lg)}
.film.pane .film-live{top:auto;bottom:12px}
.film.pane figcaption{text-align:center}
.pane-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;max-width:1240px;margin:clamp(18px,2.4vw,28px) auto 0}
@media (max-width:900px){.pane-head{grid-template-columns:1fr;gap:16px}.pane-url{display:none}}
/* on a phone the title wraps to a second line rather than losing its last words to an ellipsis */
@media (max-width:640px){
  .pane-chrome{height:auto;min-height:40px;padding-block:9px;align-items:center}
  .pane-dots{flex:0 0 auto;align-self:flex-start;margin-top:3px}
  .pane-title{white-space:normal;text-overflow:clip;text-wrap:balance;letter-spacing:.06em}
}

/* ---------- the subjects: the student's page, and Margin's marks on it ----------
   The page is a picture; Margin's boxes, marks and comments are HTML on top of it (src/showcase.js).
   Boxes are placed in percent of the picture, so they stay on the work at any width, and every
   comment is text, so it wraps inside its card on any screen. The layout follows the room the
   section has (a container query), not the window: beside the page when the cards fit there, under
   it when they do not. The section runs wider than the page's own column because the whole point
   is that a teacher can read the marks. */

.subjects-wide .container{max-width:1380px}
.subjects{margin-top:clamp(26px,3vw,40px)}
.subject-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subject-tabs::-webkit-scrollbar{display:none}
.subject-tab{flex:0 0 auto;display:inline-flex;flex-direction:column;gap:3px;padding:10px 15px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--white);color:var(--navy);font:inherit;cursor:pointer;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s}
.subject-tab .code{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.subject-tab .name{font-weight:600;font-size:14.5px;line-height:1.1}
.subject-tab:hover{border-color:var(--navy)}
.subject-tab[aria-selected='true']{border-color:var(--emerald-ink);background:var(--emerald-wash);box-shadow:0 0 0 1px var(--emerald-ink) inset}
.subject-tab[aria-selected='true'] .code{color:var(--emerald-ink)}
.subject-panel{margin-top:14px}
.subject-panel[hidden]{display:none}
.subject-view{container-type:inline-size;container-name:subject}

.subject-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.subject-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--white)}
.sub-state{appearance:none;border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:600;color:var(--slate);padding:7px 14px;border-radius:calc(var(--r-sm) - 4px);cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}
.sub-state:hover{color:var(--navy)}
.sub-state[aria-pressed='true']{background:var(--navy);color:#fff}
.mk-zoom{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;appearance:none;font:inherit;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--navy);background:var(--white);border:1px solid var(--rule);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;transition:border-color .15s}
.mk-zoom:hover{border-color:var(--navy)}
html:not(.js) .mk-zoom{display:none}

/* the frame: the page, the cards, and the lines between them */
.mk{--full:#0B7A4E;--full-tint:rgba(11,122,78,.07);--full-wash:#E6F6EE;--full-edge:#86D3AE;
  --part:#B45309;--part-tint:rgba(180,83,9,.07);--part-wash:#FDF5E6;--part-edge:#F0C27A;
  --low:#BE123C;--low-tint:rgba(190,18,60,.06);--low-wash:#FDEEF1;--low-edge:#F2A3B4;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;
  padding:clamp(10px,2.2cqw,28px);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow)}
.mk-sheets{display:grid;gap:16px;align-content:start;min-width:0}
.mk-sheet{position:relative;margin:0;background:#fff;border-radius:3px;box-shadow:0 0 0 1px rgba(27,42,65,.08),0 10px 24px -16px rgba(27,42,65,.38);container-type:inline-size;container-name:sheet}
.mk-sheet img{display:block;width:100%;height:auto;border-radius:3px}
.mk-boxes{position:absolute;inset:0}

/* a box: dashed while it rests, solid while its card is pointed at */
.mk-box{--c:var(--part);--tint:var(--part-tint);position:absolute;display:block;margin:0;padding:0;appearance:none;font:inherit;color:var(--c);text-align:left;cursor:pointer;
  border:1.5px dashed var(--c);border-radius:3px;background:var(--tint);transition:background-color .2s,border-color .2s,opacity .45s var(--ease-out),visibility .45s}
.mk-box.s-full{--c:var(--full);--tint:var(--full-tint)}
.mk-box.s-low,.mk-box.s-zero{--c:var(--low);--tint:var(--low-tint)}
.mk-box:hover,.mk-box.is-on{border-style:solid;background-color:color-mix(in srgb,var(--c) 13%,transparent)}
.mk-box:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.mk-box.is-flash{animation:mk-flash 1.1s var(--ease-out)}
.mk-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--c,var(--navy));color:#fff;font-family:var(--font-mono);font-size:11px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;box-sizing:border-box}
.mk-box .mk-n{position:absolute;left:0;top:0;transform:translate(-38%,-46%);box-shadow:0 0 0 2px #fff}
/* inside the strip Margin keeps clear left of the work (38 of the page's 571 points): the mark at
   the middle and the category score at the foot, sized with the page, as the app draws them */
.mk-mark{position:absolute;left:0;top:50%;width:6.4cqw;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.mk-glyph svg{display:block;width:clamp(11px,2.4cqw,19px);height:auto}
.mk-word{font-size:clamp(7px,1.3cqw,10.5px);font-weight:600;line-height:1;color:var(--c)}
.mk-cat{position:absolute;left:.7cqw;bottom:.6cqw;font-family:var(--font-mono);font-size:clamp(7px,1.25cqw,10.5px);line-height:1;white-space:nowrap;pointer-events:none}
.mk-cat b{font-weight:700}
@container sheet (max-width:600px){.mk-word,.mk-cat{display:none}}

/* a card: Margin's comment in full, at a size a teacher can read */
.mk-cards{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-content:start;min-width:0;counter-reset:none}
.mk-card{--c:var(--part);--wash:var(--part-wash);--edge:var(--part-edge);margin:0;padding:12px 14px 13px;background:var(--wash);border:1.5px solid var(--edge);border-radius:var(--r-md);min-width:0;transition:box-shadow .2s,border-color .2s}
.mk-card.s-full{--c:var(--full);--wash:var(--full-wash);--edge:var(--full-edge)}
.mk-card.s-low,.mk-card.s-zero{--c:var(--low);--wash:var(--low-wash);--edge:var(--low-edge)}
.mk-card.is-on{border-color:var(--c);box-shadow:var(--shadow-sm)}
.mk-card.is-flash{animation:mk-ring 1.1s var(--ease-out)}
.mk-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 3px;font-size:14.5px;font-weight:700;line-height:1.3;color:var(--navy)}
.mk-q{font-variant-numeric:tabular-nums}
.mk-state{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--c)}
.mk-state svg{width:14px;height:14px;flex:0 0 auto}
.mk-flag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--flag);background:var(--flag-wash);border-radius:999px;padding:2px 8px 2px 6px}
.mk-flag svg{width:12px;height:12px}
.mk-page{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.mk-catline{margin:0 0 6px;font-family:var(--font-mono);font-size:11.5px;color:var(--slate);font-variant-numeric:tabular-nums}
.mk-catline abbr{text-decoration:none;font-weight:700;color:var(--c);border:0}
.mk-fb{margin:0;font-size:14.5px;line-height:1.55;color:var(--navy);overflow-wrap:break-word;hyphens:manual}

.mk-handed{display:none;margin:0;font-size:14.5px;line-height:1.5;color:var(--slate)}
.mk-wires{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity .3s}
.mk-wires path{fill:none;stroke-width:1.5;stroke-dasharray:4 4;opacity:.75}
.mk-wires circle{opacity:.9}
.mk-wires .s-full{stroke:var(--full);fill:var(--full)}
.mk-wires .s-part{stroke:var(--part);fill:var(--part)}
.mk-wires .s-low,.mk-wires .s-zero{stroke:var(--low);fill:var(--low)}
.mk-wires path.s-full,.mk-wires path.s-part,.mk-wires path.s-low,.mk-wires path.s-zero{fill:none}
.mk-wires .is-on{stroke-dasharray:none;opacity:1;stroke-width:2}

/* as handed in: the page alone */
.js .mk[data-show='before'] .mk-box{opacity:0;visibility:hidden}
.js .mk[data-show='before'] .mk-cards{display:none}
.js .mk[data-show='before'] .mk-wires{opacity:0}
.js .mk[data-show='before'] .mk-handed{display:block}
.js .mk[data-show='after'] .mk-card{animation:mk-in .5s var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}

/* beside the page once the cards have room there; each card stands level with its box (site.js) */
@container subject (min-width:900px){
  .mk{grid-template-columns:minmax(0,1fr) clamp(300px,31cqw,410px);column-gap:clamp(40px,4.6cqw,64px)}
  .js .mk-cards{gap:0}
  .js .mk-cards .mk-card + .mk-card{margin-top:12px}
}
@container subject (min-width:600px) and (max-width:899.98px){
  .mk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@keyframes mk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mk-flash{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent)}}
@keyframes mk-ring{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 3px var(--c)}}
@media (prefers-reduced-motion:reduce){
  .js .mk[data-show='after'] .mk-card,.mk-box.is-flash,.mk-card.is-flash{animation:none}
  .mk-box,.mk-wires{transition:none}
}

/* the page at full size: wider than a phone, so it pans, with every box where it belongs */
.mk-dialog{padding:0;border:0;margin:auto;width:min(1180px,100vw);max-width:100vw;height:min(100dvh,100vh);max-height:100vh;background:var(--paper);color:var(--navy);overflow:hidden}
.mk-dialog::backdrop{background:rgba(20,33,58,.72)}
.mk-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;background:var(--navy);color:#fff;font-size:14px;font-weight:600}
.mk-dialog-close{appearance:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--navy);background:#fff;border:0;border-radius:var(--r-sm);padding:8px 14px;cursor:pointer}
.mk-dialog-body{height:calc(100% - 52px);overflow:auto;-webkit-overflow-scrolling:touch;padding:16px;box-sizing:border-box}
.mk-dialog .mk{display:block;padding:0;border:0;box-shadow:none;background:transparent}
.mk-dialog .mk-sheets{width:max(100%,980px);margin:0 auto}
.mk-dialog .mk-box{cursor:default}

.sub-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 28px;align-items:start;margin-top:18px}
.sub-score{display:inline-flex;flex-direction:column;gap:4px;font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:-.02em;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.sub-score .k{font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald-ink)}
.sub-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px 28px}
.sub-line{margin:0 0 6px;font-size:14.5px;line-height:1.5;color:var(--slate)}
.sub-line b{color:var(--navy)}
@media (max-width:900px){.sub-meta{grid-template-columns:1fr;gap:14px}}
@media (max-width:560px){
  .subject-tab{padding:9px 12px}
  .subject-tab .name{font-size:13.5px}
  .subject-bar{flex-wrap:wrap}
  .subject-switch{flex:1 1 auto}
  .sub-state{flex:1;padding:7px 10px;font-size:13px}
  .mk-fb{font-size:15px}
}

/* ---------- the flow: from sign up to a working school, on one rail ---------- */

.flow{position:relative;margin-top:clamp(28px,3.2vw,44px)}
.flow-rail{position:absolute;left:15px;right:15px;top:22px;height:2px;background:var(--rule);border-radius:2px;overflow:hidden}
.flow-rail i{position:absolute;top:0;left:-18%;width:18%;height:100%;background:linear-gradient(90deg,transparent,var(--emerald) 55%,var(--emerald-bright));opacity:0}
.js .flow.in .flow-rail i{opacity:1;animation:flow-run 3.4s linear infinite}
.flow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:20px}
.flow-step{position:relative;padding-top:50px}
.flow-step::before{content:attr(data-n);position:absolute;left:0;top:8px;width:30px;height:30px;border-radius:50%;background:var(--white);border:2px solid var(--emerald);color:var(--emerald-ink);font-family:var(--font-mono);font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center;z-index:1;box-sizing:border-box}
.flow-step .who{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:6px}
.flow-step .who.elevate{color:var(--emerald-ink)}
.flow-step h3{font-size:17px;margin:0 0 6px;line-height:1.25}
.flow-step p{margin:0;font-size:14.5px;color:var(--slate)}
@keyframes flow-run{to{left:100%}}
@keyframes flow-run-v{to{top:100%}}
@media (max-width:860px){
  .flow-rail{left:14px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .js .flow.in .flow-rail i{left:0;top:-18%;width:100%;height:18%;background:linear-gradient(180deg,transparent,var(--emerald) 55%,var(--emerald-bright));animation-name:flow-run-v}
  .flow-steps{grid-template-columns:1fr;gap:24px}
  .flow-step{padding:0 0 0 48px}
  .flow-step::before{top:-2px}
}
@media (prefers-reduced-motion:reduce){.flow-rail i{display:none}}

/* ---------- the hero with the brain ----------
   The old hero held one short line per colour and pinned each to a single line. This
   headline is longer and the brain takes the other half of the row, so here the lines
   wrap and the type steps down to keep the two columns level. */

.hero.hero-brain .container{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.hero.hero-brain h1{max-width:none;font-size:clamp(31px,3.4vw,43px)}
@media (min-width:1040px){.hero.hero-brain h1 .a,.hero.hero-brain h1 .b{white-space:normal}}
.hero.hero-brain .lede{font-size:clamp(16.5px,1.4vw,18px);max-width:52ch}
.hero-brain .hero-media{min-width:0;display:flex;justify-content:center}
/* between the single column and a wide laptop the brain's column takes a little more of the row,
   so the brain keeps its wide layout (460 px and up) instead of its phone layout */
@media (min-width:941px) and (max-width:1100px){.hero.hero-brain .container{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
@media (max-width:940px){.hero.hero-brain .container{grid-template-columns:1fr;gap:36px}.hero.hero-brain h1{font-size:clamp(31px,6.4vw,43px)}}
.strip-stats .stats{margin-top:0}