/*
 * theoremed.com
 *
 * The same family of colour as the app, at the size of a page rather than a
 * 400px panel. Light by default: this is read by parents and school admins as
 * often as by students, and a dark storefront reads as a product for gamers.
 */

:root {
  /* One vertical rhythm. Sections are a beat apart and nothing improvises. */
  --beat:    clamp(38px, 4.4vw, 58px);

  --paper:   #FBFAFD;
  --card:    #FFFFFF;
  --ink:     #17181F;
  --muted:   #5A5C70;
  --faint:   #8A8CA0;
  --rule:    #E6E5EF;

  --brand:   #4F4DD9;
  --brand-2: #6B5CEE;
  --violet:  #7F51DD;
  --teal:    #168094;
  --green:   #1E7D5C;
  --amber:   #8A5E04;

  --wide:    1120px;
  --text:    680px;
}

* { box-sizing: border-box; }

/* No smooth-scroll. Every button on this site navigates rather than jumping
   down the page, so there is nothing left for it to smooth - and it hijacks
   any scroll the page itself asks for. */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters as much as max-width. Without it, an <img> with width
   and height attributes keeps the attribute height when CSS changes its
   width - so every screenshot on this site rendered at 400x1240 instead of
   400x620, stretched to twice its height. */
img { max-width: 100%; height: auto; }
a { color: var(--brand); }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--text); }

/* -- top bar ------------------------------------------------------------ */

.top {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 0;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; color: var(--ink);
  text-decoration: none; letter-spacing: -0.01em;
}
.logo i {
  width: 30px; height: 30px; border-radius: 50%; font-style: normal;
  background: linear-gradient(160deg, var(--brand-2), var(--brand));
  color: #fff; display: grid; place-items: center;
  font-size: 16px; font-weight: 700;
}
.top nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.top nav a {
  color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500;
}
.top nav a:hover { color: var(--ink); }

/* -- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn.primary { background: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-2); }
.btn.quiet {
  background: var(--card); color: var(--ink); border-color: var(--rule);
}
.btn.quiet:hover { border-color: var(--faint); }
.btn.big { font-size: 16px; padding: 15px 30px; }
.btn .sub { font-weight: 400; color: rgba(255,255,255,.72); font-size: 13.5px; }
.btn.quiet .sub { color: var(--faint); }

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

.hero { padding: 54px 0 20px; }
/* Says what the thing is before the headline gets to be clever about it. */
.eyebrow-hero {
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--brand);
  margin: 0 0 16px;
}

.hero h1 {
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  max-width: 14ch;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lead {
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--muted);
  margin: 0 0 30px;
  max-width: 46ch;
  line-height: 1.5;
}
.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.under { margin: 16px 0 0; font-size: 14px; color: var(--faint); }

.split {
  display: grid;
  /* Narrow enough that the panel is shorter than the words beside it. Taller
     than the text, it ran off the bottom of the window and stopped reading as
     a pair. */
  grid-template-columns: 1fr minmax(250px, 340px);
  gap: 56px;
  align-items: center;
}
.shot {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(23,24,31,.16), 0 2px 6px rgba(23,24,31,.06);
  background: #101118;
}
.shot img { display: block; width: 100%; }

/* -- the refusal, said plainly ------------------------------------------ */

.stance {
  margin: var(--beat) 0;
  padding: 34px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--rule);
}
.stance h2 {
  font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.stance p { color: var(--muted); margin: 0 0 14px; max-width: 62ch; }
.stance p:last-child { margin-bottom: 0; }
.stance strong { color: var(--ink); }

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

.row {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: 56px;
  align-items: center;
  margin: var(--beat) 0;
}
.row.flip > .words { order: 2; }
.row h3 {
  font-size: clamp(21px, 3vw, 27px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.row p { color: var(--muted); margin: 0 0 12px; max-width: 46ch; }
.row .tag {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: 10px;
}

/* -- a plain list of what is in it -------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  margin: var(--beat) 0;
}
.grid div { background: var(--paper); padding: 22px; }
.grid h4 { margin: 0 0 5px; font-size: 15.5px; letter-spacing: -0.01em; }
.grid p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* -- download ----------------------------------------------------------- */

.get { margin: var(--beat) 0; text-align: center; }
.get h2 {
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: -0.03em; margin: 0 0 10px; text-wrap: balance;
}
.get > p { color: var(--muted); margin: 0 auto 28px; max-width: 42ch; }
.platforms {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.platforms { align-items: stretch; }
.platform {
  flex: 1 1 260px; max-width: 320px;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 26px 22px;
  text-align: left;
}
.platform h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.01em; }
/* Two lines' worth, so the two cards' buttons sit on the same line whether a
   blurb wraps once or not. Growing it instead pushed them apart, because the
   content below the button differs in height too. */
.platform .needs {
  color: var(--faint); font-size: 13.5px; line-height: 1.5;
  margin: 0 0 18px; min-height: 3em;
}
.platform .btn { width: 100%; }
.platform .soon {
  display: block; text-align: center; font-size: 13.5px;
  color: var(--amber); margin-top: 10px;
}

/* -- questions ---------------------------------------------------------- */


.qa h2 {
  font-size: clamp(24px, 3.6vw, 32px);
  letter-spacing: -0.03em; margin: 0 0 8px;
}
details {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
details summary {
  cursor: pointer; font-weight: 600; font-size: 16.5px;
  list-style: none; display: flex; align-items: center; gap: 12px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; margin-left: auto; color: var(--faint);
  font-weight: 400; font-size: 21px; line-height: 1;
}
details[open] summary::after { content: "\2212"; }
details p { color: var(--muted); margin: 12px 0 0; max-width: 62ch; }

/* -- foot --------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  margin-top: 70px; padding: 32px 0 60px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  font-size: 14.5px; color: var(--faint);
}
.foot nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* -- long-form pages ---------------------------------------------------- */

.doc { padding: 20px 0 10px; }
.doc h1 {
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: -0.03em; margin: 0 0 10px; text-wrap: balance;
}
.doc .stamp { color: var(--faint); font-size: 14.5px; margin: 0 0 36px; }
.doc h2 {
  font-size: 21px; letter-spacing: -0.02em;
  margin: 40px 0 10px; text-wrap: balance;
}
.doc p, .doc li { color: var(--muted); }
.doc li { margin-bottom: 7px; }
.doc strong { color: var(--ink); }

@media (max-width: 860px) {
  .split, .row { grid-template-columns: 1fr; gap: 34px; }
  .row.flip > .words { order: 0; }
  .hero { padding: 30px 0 10px; }
  .top nav { gap: 18px; }
  /* The in-page anchors are reachable by scrolling anyway. Keeping them here
     wraps every label onto two lines and makes the header look broken. */
  .top nav a[href^="#"] { display: none; }
  .stance { padding: 26px 22px; margin: 44px 0; }
  .row { margin: 52px 0; }
  .shot { max-width: 400px; }
}

@media (max-width: 460px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .btn { width: 100%; }
  .cta { flex-direction: column; align-items: stretch; }
  .grid { grid-template-columns: 1fr; }
}



/* -- nav that names every page ------------------------------------------ */

.btn.small { padding: 9px 18px; font-size: 14.5px; }
.top nav a.here { color: var(--ink); font-weight: 600; }
.top nav a.btn.here { color: #fff; }
.section-head {
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

/* -- the download page --------------------------------------------------- */

.get-hero { padding: 42px 0 34px; text-align: center; }
.get-hero h1 {
  font-size: clamp(32px, 5vw, 46px);
  letter-spacing: -0.035em; margin: 0 0 12px; text-wrap: balance;
}
.get-hero .lead {
  color: var(--muted); font-size: 18px; margin: 0 auto; max-width: 42ch;
}

.badge {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 22px; margin-bottom: 14px;
}
.badge.mac { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.badge.chrome { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }

.bullets {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--rule);
}
.bullets li {
  font-size: 14.5px; color: var(--muted);
  padding-left: 22px; position: relative; margin-bottom: 8px;
}
.bullets li::before {
  content: "\2713"; position: absolute; left: 0;
  color: var(--green); font-weight: 700;
}

.after { margin: var(--beat) 0 0; }
.after h2 {
  font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: -0.025em; margin: 0 0 26px; text-wrap: balance;
}
.numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.numbered li { display: flex; gap: 16px; max-width: 62ch; }
.numbered .n {
  flex: 0 0 auto; width: 28px; height: 28px; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 700;
}
.numbered h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.numbered p { margin: 0; color: var(--muted); font-size: 15.5px; }
.fineprint { margin: 28px 0 0; font-size: 14.5px; color: var(--faint); }

/* -- the parents page is a different room -------------------------------- */

/*
 * Same brand, different register. Parents arrive asking "what is this thing
 * reading, and is my kid going to learn anything" - so this page reads
 * steadier: a deeper accent, a warmer ground, and a hero with a line of type
 * across it rather than a screenshot doing the talking.
 */
body.for-parents {
  --brand:   #1B5E52;
  --brand-2: #23786A;
  --paper:   #F6F6F2;
  --card:    #FFFFFF;
  --rule:    #E3E3DB;
}
body.for-parents .logo i {
  background: linear-gradient(160deg, var(--brand-2), var(--brand));
}
body.for-parents .hero {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 46px;
  margin-bottom: 8px;
}
body.for-parents .hero h1 { max-width: 18ch; }
body.for-parents .stance {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--brand) 6%, var(--card)), var(--card));
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
}
body.for-parents .grid div { background: var(--card); }
body.for-parents .grid { background: var(--rule); border-color: var(--rule); }

/* One line that says the thing, because a parent skims. */
.creed {
  font-size: clamp(20px, 2.8vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
  border-left: 3px solid var(--brand);
  padding: 4px 0 4px 22px;
  margin: 54px 0;
  max-width: 34ch;
  font-weight: 500;
  text-wrap: balance;
}
.creed span { color: var(--brand); }

@media (max-width: 860px) {
  .after { margin-top: 48px; }
  .get-hero { padding: 26px 0 24px; }
}

/* ======================================================================
   Motion, and the structure it moves through
   ====================================================================== */

/*
 * One curve, everywhere. Fast out, slow in: the thing that separates an
 * object settling into place from a number changing over time.
 */
:root { --ease: cubic-bezier(.16, 1, .3, 1); }

.btn {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background-color .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .08s; }
.btn.primary {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 26%, transparent);
}
.btn.primary:hover {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 32%, transparent);
}
.btn.quiet:hover { box-shadow: 0 8px 20px rgba(23,24,31,.08); }

.top nav a { transition: color .18s ease; }
.logo i { transition: transform .4s var(--ease); }
.logo:hover i { transform: rotate(-8deg) scale(1.06); }

.shot {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.shot:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 80px rgba(23,24,31,.2), 0 2px 6px rgba(23,24,31,.07);
}

.grid div { transition: background-color .3s ease; }
.grid div:hover { background: var(--card); }

.platform {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .25s ease;
}
.platform:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  box-shadow: 0 18px 40px rgba(23,24,31,.09);
}

details summary { transition: color .18s ease; }
details summary:hover { color: var(--brand); }
details summary::after { transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(180deg); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -- the hero fills the window ------------------------------------------ */

.hero {
  /* Fills the window, minus a slice of what is below: a hero sized exactly to
     the screen gives no reason to scroll. Sized to the content as well, so
     the leftover air is a margin rather than a hole - and the cue sits at the
     bottom of it, which is what the space is for. */
  position: relative;
  min-height: min(calc(100svh - 190px), 600px);
  align-content: center;
  padding: 30px 0 76px;
}

.scroll-cue {
  position: absolute;
  left: 0; bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  color: var(--faint); font-size: 13.5px; font-weight: 500;
  margin: 0;
}
.scroll-cue i {
  font-style: normal; font-size: 15px;
  animation: nudge-down 2.2s var(--ease) infinite;
}
@keyframes nudge-down {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* -- structure, further down -------------------------------------------- */

/*
 * The page used to thin out as you scrolled: three near-identical rows, then
 * a flat grid, then a list. These give the lower half its own rhythm - a
 * numbered rail down the features, bands that alternate, and a Q&A that sits
 * in a container instead of running off into the margin.
 */

.rows { counter-reset: feature; }
.row { position: relative; }
.row .tag { display: flex; align-items: center; gap: 10px; }
.row .tag::before {
  counter-increment: feature;
  content: counter(feature, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  letter-spacing: 0.02em;
}

/* Full-bleed, not just the content column: a tint that stops where the text
   stops reads as a stray box rather than a band across the page. */
.band {
  background: linear-gradient(180deg,
    transparent, color-mix(in srgb, var(--brand) 5%, transparent) 14%,
    color-mix(in srgb, var(--brand) 5%, transparent) 86%, transparent);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.grid div { position: relative; padding: 24px 22px; }
.grid h4 {
  display: flex; align-items: baseline; gap: 9px;
  margin-bottom: 7px; font-size: 16px;
}
.grid h4::before {
  content: "";
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--brand);
  flex: 0 0 auto;
  transform: translateY(-1px);
}

.qa {
  margin: var(--beat) 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 34px 34px 10px;
}
.qa h2 { margin-bottom: 18px; }
.qa > p.intro { color: var(--muted); margin: 0 0 20px; max-width: 58ch; }
details:last-of-type { border-bottom: 0; }

/* The closing line, so the page ends on a statement rather than a list. */
.sendoff {
  text-align: center;
  padding: var(--beat) 0 10px;
}
.sendoff h2 {
  font-size: clamp(26px, 4.4vw, 40px);
  letter-spacing: -0.035em; margin: 0 0 14px; text-wrap: balance;
}
.sendoff p {
  color: var(--muted); margin: 0 auto 26px; max-width: 40ch; font-size: 17px;
}

@media (max-width: 860px) {
  .hero { min-height: 0; padding: 26px 0 34px; }
  .scroll-cue { display: none; }
  .qa { padding: 24px 20px 6px; border-radius: 16px; }
  .band { padding-left: 18px; padding-right: 18px; }
}


/* -- the middle of the page, at one screen rather than three ------------- */

/*
 * The homepage ran to seven thousand pixels: three full-height feature rows
 * with a 620px screenshot in each, then a six-up grid, then five questions.
 * Nobody reaches the bottom of that. One demonstration earns its height; the
 * rest are three lines each.
 */

.demo {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  gap: 56px;
  align-items: center;
  margin: var(--beat) 0;
}
.demo .tag {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: 12px;
}
.demo h2 {
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.028em; margin: 0 0 14px; text-wrap: balance;
}
.demo p { color: var(--muted); margin: 0 0 12px; max-width: 46ch; }
/* Narrow enough that the whole panel fits without cropping. Clipping it
   instead cut through the keypad, which reads as a mistake rather than a
   crop. */

.also {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 30px;
  margin: var(--beat) 0;
  padding-top: var(--beat);
  border-top: 1px solid var(--rule);
}
.also h3 {
  font-size: 16.5px; letter-spacing: -0.012em; margin: 0 0 7px;
  display: flex; align-items: baseline; gap: 9px;
}
.also h3::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--brand); flex: 0 0 auto; transform: translateY(-1px);
}
.also p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.55; }

@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; gap: 30px; }
  .also { gap: 24px; }
}


/* -- density -------------------------------------------------------------

   The complaint was that the page felt loose, and it was right: one idea per
   full-width section, with air between each, means scrolling to collect
   things that belong together. The refusal and the demonstration are one
   argument, so they are one screen. The questions are short, so they are two
   columns rather than a column of thirds-empty rows.
   ---------------------------------------------------------------------- */

.pitch {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 310px);
  gap: 52px;
  align-items: center;
  /* No vertical padding of its own: it stacked with the beat above and below
     and opened a gap half a screen tall between this and the next thing. */
  margin: var(--beat) 0;
  padding: 0;
}
.pitch-words { padding-left: 30px; border-left: 3px solid var(--brand); }
.pitch h2 {
  font-size: clamp(25px, 3.6vw, 34px);
  letter-spacing: -0.03em; margin: 0 0 14px; text-wrap: balance;
}
.pitch p { color: var(--muted); margin: 0 0 11px; max-width: 52ch; }
.pitch p:last-child { margin-bottom: 0; }
.pitch strong { color: var(--ink); }

.also {
  gap: 26px 34px;
  margin: var(--beat) 0;
  padding-top: var(--beat);
}

/* Two columns of questions, so they read as a set rather than a queue. */
.qa {
  margin: var(--beat) 0;
  padding: 28px 30px 22px;
}
.qa h2 { margin-bottom: 4px; }
.qa > p.intro { margin-bottom: 14px; }
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 34px;
}
.qa-grid details { padding: 14px 0; }
.qa-grid details:last-of-type { border-bottom: 0; }
.qa-grid details summary { font-size: 15.5px; }
.qa-grid details p { font-size: 15px; margin-top: 9px; }

.sendoff { padding: var(--beat) 0 6px; }
.sendoff h2 { font-size: clamp(24px, 3.6vw, 34px); }
.sendoff p { margin-bottom: 20px; font-size: 16px; }

@media (max-width: 860px) {
  .pitch {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 0;
  }
  .pitch-words { padding-left: 20px; }
  .qa-grid { column-gap: 0; }
}


/* -- the argument -------------------------------------------------------

   The honest answer to "isn't this just cheating", and the reason theoremEd
   exists rather than another answer machine. It gets a section of its own on
   the parents page because it is the thing that changes a mind, and a short
   version in the student page's questions because it is the thing they are
   asked at school.
   ---------------------------------------------------------------------- */

.argument {
  margin: var(--beat) 0;
  padding: 34px 36px;
  border-radius: 20px;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--brand) 9%, var(--card)),
    color-mix(in srgb, var(--brand) 3%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
}
.argument h2 {
  font-size: clamp(22px, 3.1vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.028em;
  margin: 0 0 16px;
  max-width: 24ch;
  text-wrap: balance;
}
.argument p { color: var(--muted); margin: 0 0 12px; max-width: 62ch; }
.argument p:last-child { margin-bottom: 0; }
.argument strong { color: var(--ink); }

@media (max-width: 860px) {
  .argument { padding: 24px 22px; border-radius: 16px; }
}


/* -- prices --------------------------------------------------------------

   Three cards, with the middle one lifted. Free is first because it is the
   real front door: no card, no account, and the thing a student actually
   starts on. The tutoring comparison sits underneath, because $19.99 reads
   as expensive next to an app and cheap next to an hour with a tutor - and
   which of those a reader has in mind is the whole decision.
   ---------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: var(--beat) 0 18px;
  align-items: stretch;
}
.plan {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 26px 24px;
  position: relative;
}
.plan.best {
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--brand) 13%, transparent);
}
.flag {
  position: absolute; top: -11px; left: 24px;
  background: var(--brand); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}
.plan h3 {
  margin: 0 0 6px; font-size: 15px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.plan .price {
  margin: 0 0 10px;
  font-size: 34px; font-weight: 700; letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan .price span {
  display: block;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0;
  color: var(--faint); margin-top: 7px;
}
.plan .who {
  color: var(--muted); font-size: 14px; margin: 0 0 4px;
  min-height: 3em;
}
.plan .bullets { margin-top: 14px; flex: 1 1 auto; }
.plan .bullets li { font-size: 14px; }

.anchor-note {
  color: var(--faint); font-size: 14.5px;
  margin: 0; text-align: center; max-width: 52ch;
  margin-left: auto; margin-right: auto;
}

@media (max-width: 860px) {
  .plans { gap: 14px; }
  .plan .who { min-height: 0; }
}


/* The argument, at the size of a position rather than a footnote to one.
   It sits directly under the hero because it is the reason theoremEd exists,
   and a reader who does not accept it will not care about anything below. */
.argument.big {
  padding: 40px 42px;
  border-radius: 24px;
}
.argument.big .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand);
  margin: 0 0 14px;
}
.argument.big h2 {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  max-width: 20ch;
  margin-bottom: 22px;
}
.argument.big p { font-size: 16.5px; max-width: 58ch; margin-bottom: 14px; }
.argument.big .punch {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--ink);
  font-size: 17px;
}

@media (max-width: 860px) {
  .argument.big { padding: 26px 22px; border-radius: 18px; }
  .argument.big h2 { max-width: none; }
}


/* Nothing is for sale yet, and the page should say so before someone works
   it out by pressing a dead button. */
.not-open {
  margin: 0 0 6px;
  padding: 13px 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--amber) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
  color: var(--amber);
  font-size: 14px;
  line-height: 1.5;
}
.not-open strong { color: var(--amber); }

.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* -- the deck -----------------------------------------------------------

   A confident headline that does not say what the thing is needs a plain
   sentence immediately under it that does. One line, bigger than the body,
   so it is read as part of the title rather than as the first paragraph.
   ---------------------------------------------------------------------- */
.deck {
  font-size: clamp(18px, 2.4vw, 23px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 16px;
  max-width: 30ch;
  text-wrap: balance;
}

/* -- what it does -------------------------------------------------------- */

.doc-hero { padding: 34px 0 10px; }
.doc-hero h1 {
  font-size: clamp(32px, 5.2vw, 50px);
  letter-spacing: -0.035em; margin: 0 0 10px; text-wrap: balance;
}
.doc-hero p { color: var(--muted); font-size: 17px; margin: 0; }

.feature {
  display: grid;
  grid-template-columns: 1fr minmax(230px, 300px);
  gap: 52px;
  align-items: center;
  margin: var(--beat) 0;
  padding-bottom: var(--beat);
  border-bottom: 1px solid var(--rule);
}
.feature:last-of-type { border-bottom: 0; }
/* Swap the track widths rather than reordering: with order alone the picture
   lands in the 1fr column and stretches to fill it, which is why every other
   row was twice the size of the one above. */
.feature.flip { grid-template-columns: minmax(230px, 300px) 1fr; }
.feature.flip > .feature-words { order: 2; }
.feature .tag {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: 11px;
}
.feature h2 {
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: -0.028em; margin: 0 0 13px; text-wrap: balance;
}
.feature p { color: var(--muted); margin: 0 0 12px; max-width: 48ch; }
.feature .bullets { border-top: 0; padding-top: 4px; margin-top: 4px; }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 26px; }
  .feature.flip > .feature-words { order: 0; }
  .feature .shot { max-width: 330px; }
}