/* ==========================================================================
   Digital Shields — marketing layer (parent + schools websites)
   Builds on /ds/ds.css. Everything here is themed through ds.css tokens.
   ========================================================================== */

/* ---------- Page rhythm ---------- */
.site-main { display: block; }
/* No one-word last lines in running text (headings already balance). */
.site-main :is(p, li, blockquote, figcaption, summary) { text-wrap: pretty; }
/* Phones: roomy cards keep a sensible inset, and a button whose label can't
   fit wraps onto a second line inside the button instead of spilling out. */
@media (max-width: 480px) {
  .site-main .card--roomy { --card-pad: var(--sp-6); }
  .site-main .btn { max-width: 100%; height: auto; min-height: var(--btn-h); padding-block: 6px; white-space: normal; text-align: center; line-height: 1.2; }
}
.band { background: var(--surface); border-block: 1px solid var(--line); }
.band--navy {
  position: relative; overflow: hidden; color: #fff; border: 0;
  background: radial-gradient(90% 120% at 100% 0%, rgba(245, 197, 24, .16) 0%, rgba(245, 197, 24, 0) 52%), linear-gradient(160deg, #0B1929 0%, #12304F 100%);
}
.band--navy h2, .band--navy h3 { color: #fff; }
.band--navy p, .band--navy .lead { color: #B9C8D8; }
.band--navy .eyebrow { color: var(--gold-500); }
/* Phones: closing-band buttons (and any .cluster--fill row) stack at one
   width, like the hero's. */
@media (max-width: 480px) { .band--navy .cluster .btn, .cluster--fill > .btn { flex: 1 1 100%; } }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head .lead { margin-top: var(--sp-4); }
.section-head.center .lead { margin-inline: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(36px, 6vw, 88px) clamp(56px, 8vw, 104px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; max-width: 980px; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold-500) 18%, transparent), transparent 70%);
}
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { margin: var(--sp-5) 0 var(--sp-5); max-width: 14ch; }
/* The highlighter overhangs the words evenly on both sides. Padding and an
   equal negative margin widen the stroke without moving the text, and clone
   repeats both on every line when the phrase wraps. */
.hero h1 em { font-style: normal; color: var(--text); background: linear-gradient(transparent 64%, color-mix(in srgb, var(--accent) 62%, transparent) 64%, color-mix(in srgb, var(--accent) 62%, transparent) 92%, transparent 92%); padding: 0 .16em; margin: 0 -.16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .lead { max-width: 54ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }
/* The pair shares one width with the text above. When the column is too
   narrow for both on one line (around 1024px) they stack at equal width
   instead of two ragged lengths. */
@media (min-width: 481px) { .hero__ctas { max-width: 36rem; } .hero__ctas .btn { flex: 1 1 auto; } }
@media (max-width: 480px) { .hero__ctas .btn { flex: 1 1 100%; } }
/* A short checklist, one line each: as a wrapping row it always left the
   third item alone on a second line. */
.hero__fine { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); display: flex; flex-direction: column; gap: 6px; }
.hero__fine span { display: inline-flex; align-items: center; gap: 6px; }
.hero__fine .icon { color: var(--safe); width: 16px; height: 16px; }
.hero__urgent { margin-top: var(--sp-6); display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; box-shadow: var(--shadow-1); }
.hero__urgent b { color: var(--act-text); white-space: nowrap; }
.hero__urgent:hover { border-color: var(--line-2); }
/* Phones: a full-width row, "Get urgent help" kept together. When the text
   wraps, the buoy lines up with the first line and the arrow with the link
   text on the last line. */
@media (max-width: 480px) {
  .hero__urgent { display: flex; align-items: flex-start; border-radius: var(--r-lg); padding: 12px 14px; line-height: 1.45; }
  .hero__urgent > span { flex: 1; min-width: 0; }
  .hero__urgent > .icon:first-child { margin-top: .1em; }
  .hero__urgent > .icon--sm { align-self: flex-end; margin-bottom: .225em; }
}
.pill-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); font: 700 var(--fs-xs)/1 var(--font-sans); color: var(--text-2); box-shadow: var(--shadow-1); }
.pill-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 4px color-mix(in srgb, var(--safe) 20%, transparent); }

/* ---------- Family plan builder (hero tool) ---------- */
.planner { position: relative; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3); overflow: hidden; }
.planner__head { display: flex; align-items: center; gap: var(--sp-3); padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.planner__head h2 { font-size: var(--fs-md); letter-spacing: -.005em; }
.planner__head p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-3); }
.planner__body { padding: 20px 22px 22px; display: grid; gap: 18px; }
.planner__q { font: 700 var(--fs-xs)/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; display: flex; justify-content: space-between; }
.age { display: flex; align-items: center; gap: 14px; }
.age output { font: 700 2.25rem/1 var(--font-display); letter-spacing: -.03em; min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.age input[type="range"] { flex: 1; accent-color: var(--primary); height: 28px; }
.age__unit { font-size: var(--fs-sm); color: var(--text-3); }
.apps-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.app-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: 700 var(--fs-sm)/1 var(--font-sans); cursor: pointer; transition: border-color var(--dur-2), background-color var(--dur-2), color var(--dur-2), transform var(--dur-1); }
.app-chip:hover { border-color: var(--text-4); }
.app-chip:active { transform: scale(.97); }
.app-chip[aria-pressed="true"] { border-color: var(--primary); background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary); }
.plan-out { display: grid; gap: 10px; }
.fit-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); }
.fit-row__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-width: 0; }
.fit-row b { color: var(--text); font-weight: 700; }
.fit-row__tip { grid-column: 2; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.45; }
.planner__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.planner__foot small { color: var(--text-3); font-size: var(--fs-xs); }
.planner .fade-in { animation: ds-pop var(--dur-3) var(--ease-out); }

/* ---------- Promise band ---------- */
.promise { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.promise__mark { width: clamp(72px, 9vw, 112px); height: auto; }
.promise h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -.025em; max-width: 22ch; }
.promise p { margin: 14px 0 0; max-width: 66ch; font-size: var(--fs-lg); line-height: 1.6; }
@media (max-width: 640px) { .promise { grid-template-columns: 1fr; } }
.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(32px, 5vw, 56px); border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 255, 255, .1); }
.stats-row > div { padding: 22px 24px; background: rgba(11, 25, 41, .55); }
.stats-row b { display: block; font: 700 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.stats-row span { display: block; margin-top: 8px; color: #9FB1C6; font-size: var(--fs-sm); }
@media (max-width: 640px) { .stats-row { grid-template-columns: 1fr; } }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { display: flex; flex-direction: column; gap: var(--sp-4); }
.step__num { counter-increment: step; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--navy-900); color: var(--gold-500); font: 700 var(--fs-md)/1 var(--font-display); }
:root[data-theme="dark"] .step__num { background: var(--navy-700); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .step__num { background: var(--navy-700); } }
.step__num::before { content: counter(step); }
.step h3 { font-size: var(--fs-xl); }
.step p { margin: 0; color: var(--text-2); }
.step__visual { margin-top: auto; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); padding: 16px; min-height: 148px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }

/* ---------- Showcase rows ---------- */
.showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.showcase + .showcase { margin-top: clamp(72px, 10vw, 128px); }
.showcase--flip > :first-child { order: 2; }
@media (max-width: 960px) { .showcase { grid-template-columns: minmax(0, 1fr); } .showcase--flip > :first-child { order: 0; } }
.showcase h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.15; letter-spacing: -.025em; margin: var(--sp-4) 0; }
.showcase .lead { font-size: var(--fs-lg); }
.ticks { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; color: var(--text-2); }
.ticks .icon { color: var(--safe); width: 20px; height: 20px; margin-top: 2px; stroke-width: 2.2; }
.stage { position: relative; border-radius: var(--r-xl); padding: clamp(18px, 3vw, 32px); background: linear-gradient(160deg, var(--surface-3), var(--bg-2)); border: 1px solid var(--line); }
.stage::after { content: ""; position: absolute; inset: auto 8% -14px 8%; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 25, 41, .18), transparent); filter: blur(6px); z-index: -1; }

/* ---------- Product mock pieces (theme-aware) ---------- */
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 18px; }
.mock + .mock { margin-top: 14px; }
.mock__title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font: 700 var(--fs-md)/1.2 var(--font-display); }
.mock__title a, .mock__title span { font: 700 var(--fs-xs)/1 var(--font-sans); color: var(--accent-text); text-decoration: none; }
.kid { display: flex; flex-direction: column; gap: 12px; }
.kid__head { display: flex; align-items: center; gap: 12px; }
.kid__head h4 { font-size: var(--fs-base); }
.kid__head p { margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
.kid__focus { margin-left: auto; text-align: right; font-size: var(--fs-2xs); color: var(--text-3); }
.kid__focus b { display: block; font-size: var(--fs-xs); color: var(--text); }
/* Phones: the focus line moves under the name instead of squeezing beside it. */
@media (max-width: 480px) {
  .stage { padding: 8px; border-radius: var(--r-lg); }
  .mock { padding: 14px; }
  .kid__apps { gap: 6px; }
  .kid__apps .kapp { gap: 5px; padding-right: 7px; }
  .kid__head { flex-wrap: wrap; row-gap: 8px; }
  .kid__focus { order: 3; flex: 1 1 100%; margin-left: 0; padding-left: 60px; text-align: left; }
  .kid__focus b { display: inline; margin-left: 4px; }
}
.kid__apps { display: flex; flex-wrap: wrap; gap: 7px; }
.kid__note { display: flex; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-3); }
.kid__note .icon { width: 16px; height: 16px; margin-top: 1px; }
.kid__note b { white-space: nowrap; }
.alert-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.alert-row:first-of-type { border-top: 0; padding-top: 0; }
.alert-row .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--watch); }
.alert-row h4 { font: 700 var(--fs-sm)/1.35 var(--font-sans); letter-spacing: 0; }
.alert-row p { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--text-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.affects { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font: 700 var(--fs-2xs)/1 var(--font-sans); }
.affects--a { background: color-mix(in srgb, var(--cat-social) 15%, transparent); color: var(--cat-social); }
.affects--b { background: color-mix(in srgb, var(--cat-school) 15%, transparent); color: var(--cat-school); }
.chat { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 86%; padding: 12px 14px; border-radius: 16px; font-size: var(--fs-sm); line-height: 1.55; }
.msg--me { align-self: flex-end; background: var(--navy-900); color: #fff; border-bottom-right-radius: 6px; }
:root[data-theme="dark"] .msg--me { background: var(--navy-700); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg--me { background: var(--navy-700); } }
.msg--ai { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); border-bottom-left-radius: 6px; }
.msg--ai b { color: var(--text); }
.msg__who { display: flex; align-items: center; gap: 8px; font: 700 var(--fs-xs)/1 var(--font-sans); color: var(--text-3); margin-bottom: 6px; }
.memory { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--accent-tint); border: 1px solid var(--accent-line); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); }
.memory .icon { color: var(--accent-text); width: 16px; height: 16px; margin-top: 1px; }
.memory b { color: var(--text); }

/* ---------- Feature index ---------- */
.fgroups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 1060px) { .fgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fgroups { grid-template-columns: minmax(0, 1fr); } }
.fgroup h3 { font-size: var(--fs-lg); margin: 14px 0 6px; }
.fgroup > p { color: var(--text-3); font-size: var(--fs-sm); margin: 0 0 14px; }
.fitem { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
/* Text only: a bare "span" selector also caught the icon badge and knocked
   its icon into the top-left corner. */
.fitem > div > b { display: block; font-size: var(--fs-md); color: var(--text); }
.fitem > div > span { display: block; font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; line-height: 1.45; }

/* ---------- Proof ---------- */
.quote-card { display: flex; flex-direction: column; gap: var(--sp-5); }
/* Tablets: one quote per row; two columns made each a tall, narrow block. */
@media (max-width: 900px) { .quote-grid { grid-template-columns: minmax(0, 1fr); } }
.quote-card blockquote { margin: 0; font: 500 clamp(1.05rem, 1.7vw, 1.25rem)/1.55 var(--font-sans); color: var(--text); }
.quote-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-card figcaption b { display: block; font-size: var(--fs-md); }
.quote-card figcaption div span { font-size: var(--fs-xs); color: var(--text-3); }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.trust { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px 9px 12px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); font: 700 var(--fs-xs)/1 var(--font-sans); color: var(--text-2); }
.trust .icon { color: var(--safe); width: 16px; height: 16px; }
/* Phones: centred pills of different widths stacked one or two to a row
   looked scattered. One card with a row per credential, icons in a column. */
@media (max-width: 560px) {
  .trust-row { display: grid; justify-content: stretch; gap: 0; max-width: 420px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
  .trust { gap: 12px; padding: 13px 16px; border: 0; border-radius: 0; background: none; font-size: var(--fs-sm); line-height: 1.35; }
  .trust + .trust { border-top: 1px solid var(--line); }
  .trust .icon { flex: none; }
}
/* Tablets: a row that would wrap with one pill left on its own becomes a
   tidy block instead (four as two by two, three stacked), the pills in each
   column sharing one width. */
@media (min-width: 561px) and (max-width: 1040px) {
  .trust-row:has(> :nth-child(4):last-child) { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; }
}
@media (min-width: 561px) and (max-width: 800px) {
  .trust-row:has(> :nth-child(3):last-child) { display: grid; grid-template-columns: max-content; justify-content: center; }
}

/* ---------- Help now ---------- */
.help-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 960px) { .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .help-grid { grid-template-columns: minmax(0, 1fr); } }
.help-card { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.help-card__label { font: 700 var(--fs-2xs)/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.help-card__num { font: 700 1.75rem/1.1 var(--font-display); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.help-card--urgent { background: var(--act-tint); border-color: color-mix(in srgb, var(--act) 30%, transparent); }
.help-card--urgent .help-card__num { color: var(--act-text); }
.help-card p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }

/* ---------- Header on phones ---------- */
/* Brand, actions and menu button fit from 320px up: tighter gaps and button
   padding on phones, and the wordmark gives way to the shield under 360px
   (the link keeps its name through aria-label). */
.site-menu-btn { margin-right: -8px; }
@media (max-width: 480px) {
  .site-header__inner { gap: var(--sp-3); }
  .site-header__actions { gap: 6px; }
  .site-header__actions .btn { padding-inline: 12px; }
  .site-header__actions .btn--ghost { padding-inline: 10px; }
}
@media (max-width: 359px) {
  .site-header .brand__name, .site-header .brand-stack { display: none; }
}

/* ---------- Mobile sticky CTA ---------- */
/* Hidden (not just moved off screen) until it slides in, so it is out of the
   tab order and never sits on top of the hero. */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); z-index: 55; display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--navy-900); color: #fff; box-shadow: var(--shadow-3); transform: translateY(140%); visibility: hidden; transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
.sticky-cta.is-visible { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out); }
.sticky-cta .btn { flex: none; }
:root[data-theme="dark"] .sticky-cta { background: var(--navy-800); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), var(--shadow-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sticky-cta { background: var(--navy-800); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), var(--shadow-3); } }
.sticky-cta p { margin: 0; flex: 1; font-size: var(--fs-sm); line-height: 1.3; }
.sticky-cta p b { display: block; color: #fff; }
.sticky-cta p span { color: #9FB1C6; font-size: var(--fs-xs); }
@media (max-width: 720px) { .sticky-cta { display: flex; } }

/* ---------- Mobile site menu (sheet) ---------- */
/* Website dialogs: the 40px close button centres on the first line of the
   title (or the brand) instead of hanging below it. */
.menu-sheet .dialog__head { align-items: center; }
#schoolCheckout .dialog__head > .icon-btn { margin: -8px -8px -8px 0; }
.menu-sheet nav { display: grid; gap: 2px; }
.menu-sheet nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); font: 700 var(--fs-lg)/1.2 var(--font-display); }
.menu-sheet nav a .icon { color: var(--text-4); }

/* ---------- Theme switch (footer) ---------- */
.theme-switch { display: inline-flex; align-self: flex-start; padding: 3px; gap: 2px; border-radius: var(--r-full); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.theme-switch button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: #9FB1C6; font: 700 var(--fs-xs)/1 var(--font-sans); padding: 7px 11px; border-radius: var(--r-full); cursor: pointer; }
.theme-switch button .icon { width: 15px; height: 15px; }
.theme-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- Auth modal (ids and behaviour from /js/signup.js) ---------- */
.auth-overlay { display: none; position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; padding: 20px; background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow-y: auto; }
.auth-overlay.active { display: flex; animation: ds-fade var(--dur-3) var(--ease-out); }
.auth-modal { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-3); padding: 32px 28px 26px; animation: ds-pop var(--dur-3) var(--ease-out); }
.auth-modal--wide { max-width: 860px; }
.auth-modal:has(#signupStep2[style*="block"]) { max-width: 880px; }
.auth-close { position: absolute; top: 14px; right: 14px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 18px; }
.auth-logo svg { width: 40px; height: 44px; }
.auth-title { font: 700 var(--fs-2xl)/1.2 var(--font-display); letter-spacing: -.02em; text-align: center; }
.auth-sub { text-align: center; color: var(--text-3); font-size: var(--fs-md); margin: 6px 0 20px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border-radius: 12px; background: var(--surface-3); margin-bottom: 20px; }
.auth-tab { border: 0; background: none; padding: 10px; border-radius: 9px; font: 700 var(--fs-sm)/1 var(--font-sans); color: var(--text-3); cursor: pointer; }
.auth-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.auth-fields { display: grid; gap: 14px; }
.auth-fields .field { gap: 6px; }
.pass-wrap { position: relative; }
.pass-wrap .input { padding-right: 46px; }
.pass-wrap button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: none; color: var(--text-3); border-radius: 8px; cursor: pointer; }
.pass-wrap button:hover { background: var(--surface-3); color: var(--text); }
#turnstileWidget { margin-top: 14px; }
.auth-consent { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.auth-consent .check { font-size: var(--fs-sm); }
.auth-consent a { color: var(--info-text); font-weight: 600; }
.auth-consent .check input[aria-invalid="true"] { border-color: var(--act); }
.auth-error { display: none; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--act-tint); color: var(--act-text); font-size: var(--fs-sm); font-weight: 600; }
.auth-submit { margin-top: 18px; }
.auth-links { margin-top: 14px; text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
.auth-links button, .signup-switch button { padding: 0; border: 0; background: none; color: var(--info-text); font-weight: 700; cursor: pointer; }
.auth-links button:hover, .signup-switch button:hover { text-decoration: underline; }
.signup-switch { margin: 12px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
.auth-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
@media (max-width: 760px) { .auth-plans { grid-template-columns: minmax(0, 1fr); } }
.auth-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; text-align: left; transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2); }
.auth-plan:hover { border-color: var(--text-4); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.auth-plan--featured { border: 2px solid var(--primary); }
.auth-plan h3 { font-size: var(--fs-lg); }
.auth-plan__price { font: 700 var(--fs-3xl)/1 var(--font-display); letter-spacing: -.03em; }
.auth-plan__price span { font: 600 var(--fs-xs) var(--font-sans); color: var(--text-3); letter-spacing: 0; margin-left: 4px; }
.auth-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.auth-plan li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.auth-plan li .icon { width: 15px; height: 15px; color: var(--safe); margin-top: 2px; stroke-width: 2.4; }
.auth-plan .btn { margin-top: auto; }
.auth-success { text-align: center; }
.auth-success .icon-badge { margin: 0 auto 16px; }
#forgotForm { margin-top: 12px; }

/* Highlighter strength per theme */
/* Dark: a broad band of faint gold over navy mixed to olive, so the stroke is
   narrower and stronger there and reads as gold. */
:root { --hl: rgba(245, 197, 24, .6); --hl-top: 64%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl: rgba(245, 197, 24, .5); --hl-top: 78%; } }
:root[data-theme="dark"] { --hl: rgba(245, 197, 24, .5); --hl-top: 78%; }
.hero h1 em { background: linear-gradient(transparent var(--hl-top), var(--hl) var(--hl-top), var(--hl) 92%, transparent 92%); }

/* ---------- Legal pages ---------- */
.legal-hero { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); background: var(--surface); }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding-block: clamp(32px, 5vw, 56px) var(--sp-12); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; }
.legal-toc ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc a { display: block; padding: 6px 10px; border-radius: var(--r-sm); color: var(--text-3); font-size: var(--fs-sm); text-decoration: none; line-height: 1.35; }
.legal-toc a:hover { color: var(--text); background: var(--surface-3); }
@media (max-width: 960px) { .legal-layout { grid-template-columns: minmax(0, 1fr); } .legal-toc { position: static; max-height: none; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .legal-toc ol { grid-template-columns: 1fr; } }
/* About 80 characters a line. (In Plus Jakarta Sans a "ch" is wide, so 74ch
   came out at 110+ characters.) */
.legal { max-width: 40rem; }
.legal h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
.legal .callout { color: var(--text-2); }
.legal .callout h3 { margin-top: 0; }
.legal .table-wrap { margin-block: 1.2em; }
.legal .table-wrap table { display: table; font-size: .9rem; }
.legal .table-wrap td { text-wrap: pretty; }
/* Phones: legal tables stack into rows (ds.css .table--stack). Their values
   are sentences, so each one reads left-aligned beside a fixed label column
   rather than right-aligned, and the row's name leads in bold. */
@media (max-width: 640px) {
  .legal .table-wrap table.table--stack { display: block; }
  .legal .table--stack td, .legal .table--stack tbody th { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); column-gap: 12px; align-items: baseline; text-align: left; padding: 4px 0; line-height: 1.5; }
  .legal .table--stack td::before, .legal .table--stack tbody th::before { max-width: none; }
  .legal .table--stack td.cell--primary { display: block; padding: 0 0 6px; font-weight: 700; color: var(--text); }
}
.legal .lead { font-size: 1.15rem; color: var(--text); }
.consent-controls .btn { margin: 6px 8px 0 0; }

/* ---------- Plan comparison ---------- */
/* overflow: clip (not hidden/auto) rounds the corners without making the
   wrapper a scroll container, so the plan header can stick to the page.
   position: relative keeps the cells' .sr-only text inside the wrapper. */
.cmp-wrap { position: relative; overflow: hidden; overflow: clip; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1); }
/* Fixed layout: the three plan columns are always the same width. */
.cmp { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.cmp thead th { width: 20%; }
.cmp thead th.cmp-corner { width: 40%; }
.cmp th, .cmp td { padding: 14px 20px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
/* Sticks just under the site header (64px + its 1px border). */
.cmp thead th { position: sticky; top: calc(var(--header-h) + var(--safe-top) + 1px); z-index: 2; background: var(--surface); vertical-align: bottom; padding-block: 22px 16px; }
.cmp thead th b { display: block; font: 700 var(--fs-lg)/1.2 var(--font-display); color: var(--text); }
.cmp thead th span { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; font-weight: 600; }
.cmp tbody th[scope="row"] { text-align: left; font-weight: 600; color: var(--text-2); }
.cmp .cmp-group th { text-align: left; background: var(--surface-2); font: 700 var(--fs-2xs)/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding-block: 12px; }
.cmp td.is-featured, .cmp th.is-featured { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.cmp-yes, .cmp-no { display: inline-flex; vertical-align: middle; }
.cmp-yes .icon { color: var(--safe); width: 20px; height: 20px; stroke-width: 2.4; }
.cmp-no .icon { color: var(--text-4); width: 20px; height: 20px; }
.cmp-val { font-weight: 700; color: var(--text); font-size: var(--fs-sm); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp tfoot > tr > * { border-top: 1px solid var(--line); border-bottom: 0; padding-block: 18px 20px; }
/* Phones have the plan cards just above and the sticky sign-up bar, so the
   table ends on its last feature there. */
@media (max-width: 640px) { .cmp tfoot { display: none; } }
@media (max-width: 900px) { .cmp th, .cmp td { padding-inline: 12px; } }
/* Phones: each feature is a block. Its name runs the full width, the three
   plan values sit in three equal columns under it, and the plan names stay
   in view in a sticky header. Table roles are set in the markup. */
@media (max-width: 640px) {
  .cmp-wrap { border-radius: var(--r-lg); }
  .cmp, .cmp thead, .cmp tbody { display: block; }
  .cmp tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp thead { position: sticky; top: calc(var(--header-h) + var(--safe-top) + 1px); z-index: 2; box-shadow: 0 1px 0 var(--line), 0 6px 12px -10px rgba(11, 25, 41, .28); }
  .cmp thead th { position: static; width: auto; padding: 14px 4px 12px; border-bottom: 0; }
  .cmp thead th.cmp-corner { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .cmp thead th b { font-size: var(--fs-md); }
  .cmp thead th span { margin-top: 3px; }
  .cmp .cmp-group th { grid-column: 1 / -1; padding: 12px 16px; }
  .cmp tbody th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 14px 16px 6px; border-bottom: 0; color: var(--text); font-size: var(--fs-md); line-height: 1.35; }
  .cmp tbody td { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 6px 14px; line-height: 1.3; }
  .cmp tbody td.is-featured { background: none; }
  .cmp-val { font-size: var(--fs-sm); }
}

/* ---------- Standalone sign-up page ---------- */
.signup-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: clamp(32px, 6vw, 80px) var(--sp-12); }
.signup-aside { position: sticky; top: calc(var(--header-h) + 32px); }
.signup-aside h1 { max-width: 16ch; }
.signup-quote { margin: var(--sp-8) 0 var(--sp-6); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.signup-quote blockquote { margin: 0; font-weight: 500; color: var(--text); line-height: 1.55; }
.signup-quote figcaption { margin-top: 10px; font-size: var(--fs-sm); color: var(--text-3); }
.signup-card { box-shadow: var(--shadow-3); }
.signup-card:has(#signupStep2[style*="block"]) { grid-column: 1 / -1; }
@media (max-width: 900px) { .signup-page { grid-template-columns: minmax(0, 1fr); } .signup-aside { position: static; order: 2; } }
.legal .callout > * + * { margin-top: .6em; }

/* ---------- Public guide pages ---------- */
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.guide__head { padding-top: clamp(32px, 5vw, 64px); }
.guide__head .tag { display: inline-flex; }
/* The category colour is on the dot only: as text, the lighter category
   colours (Conversations' amber) fail contrast on the page ground. */
.guide__tag { color: var(--text-2); }
/* A little wider than the text column, not the full page width. */
.guide__cover { margin-block: clamp(24px, 4vw, 40px); max-width: calc(56rem + var(--gutter) * 2); }
/* The article column (header, text and sign-up card) is one reading measure,
   about 80 characters a line; the cover keeps the full width. */
.guide { --container-narrow: 40rem; }
.guide .prose { max-width: none; }
.guide .fade { position: relative; max-height: 140px; overflow: hidden; margin-top: 1.1em; }
.guide .fade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg)); }
.guide-gate { margin-block: var(--sp-6) var(--sp-12); text-align: center; }
.guide-gate p { max-width: 54ch; margin-inline: auto; }
.guide-gate .cluster { justify-content: center; }
@media (max-width: 480px) { .guide-gate .cluster .btn { flex: 1 1 100%; } }
.guide-gate--members { margin-bottom: var(--sp-5); }
.guide-gate__more { margin: 0 0 var(--sp-12); text-align: center; }

/* ---------- Schools website ---------- */
.brand-stack { display: flex; flex-direction: column; line-height: 1.05; }
.school-stage { display: flex; flex-direction: column; gap: 14px; }
.school-pack { padding: 0; overflow: hidden; }
/* The cover's category colour shows while it loads (or if it ever fails), so
   the card never has an empty hole where the art should be. */
.school-pack img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cat-safeguarding); }
.school-pack__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; container-type: inline-size; }
.school-pack__body b { font: 700 var(--fs-base)/1.3 var(--font-display); letter-spacing: -.01em; }
/* Two equal columns of one-line file chips; on a narrow card the slides chip
   drops "PowerPoint" rather than wrapping. */
.school-pack__files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.school-pack__files > span { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; color: var(--text-2); white-space: nowrap; }
.school-pack__files .icon { width: 15px; height: 15px; color: var(--accent-text); }
.school-pack__files .pack-file--short { display: none; }
@container (max-width: 360px) {
  .school-pack__files .pack-file--long { display: none; }
  .school-pack__files .pack-file--short { display: inline; }
}
/* The red edge is a bar clipped by the card's corners, not a thick border. */
.school-alert { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 0 !important; }
.school-alert::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--act); }
@media (max-width: 480px) { .school-pack__body { padding: 14px; } }
.school-alert b { font: 700 var(--fs-md)/1.3 var(--font-display); }
.pack-anatomy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) { .pack-anatomy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: one column of compact rows (icon beside the text) instead of six
   tall cards that each held a sentence. */
@media (max-width: 560px) {
  .pack-anatomy { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .pack-anatomy > .card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 16px; }
  .pack-anatomy > .card > * { margin: 0; }
  .pack-anatomy > .card > .icon-badge { grid-row: span 2; }
  .pack-anatomy > .card > h3 { align-self: end; }
}
/* Narrower than the page so the twelve topics break into even rows rather
   than leaving one on a line of its own. */
.topic-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin-inline: auto; }
.topic-row span { padding: 7px 14px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.bar-mock { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: var(--fs-sm); }
.bar-mock i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--safe) var(--v), var(--surface-3) var(--v)); }
.bar-mock b { text-align: right; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.doc-mock { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); font-weight: 700; }
.doc-mock .icon { color: var(--info-text); }
.price-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-inline: auto; }
@media (max-width: 960px) { .price-grid--2 { grid-template-columns: minmax(0, 1fr); } }
.price-card .link { color: var(--info-text); }
.price-card li > span { text-wrap: pretty; }
.price-card .stack-2 > p { text-wrap: balance; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.site-footer .brand small { color: var(--gold-500); }
/* Phones: the two short link lists sit side by side; the brand and the
   Help list (with the email address) keep the full width. */
@media (max-width: 520px) {
  .site-footer__grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .site-footer__grid--pairs > :first-child, .site-footer__grid--pairs > :last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   /for-schools: the schools suite map (plans-marketing.js renderSchoolSuite)
   Three licence buttons, then every part of the suite grouped by job, each
   tagged with the licence that first includes it. Choosing a licence dims
   the parts it doesn't include (public/js/schools-site.js).
   ========================================================================== */
.suite { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.suite-ladder { display: flex; flex-direction: column; gap: var(--sp-3); }
.suite-ladder__hint { margin: 0; text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.suite-ladder__status { margin: 0; min-height: 1.4em; text-align: center; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.suite-ladder__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.suite-tier-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; height: 100%; padding: 18px 20px; text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.suite-tier-btn:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.suite-tier-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.suite-tier-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent); }
.suite-tier-btn[aria-pressed="true"]::after { content: "Showing"; position: absolute; top: 14px; right: 14px; padding: 2px 8px; border-radius: var(--r-full); background: var(--accent); color: var(--accent-ink); font: 700 var(--fs-2xs)/1.4 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.suite-tier-btn__name { font: 700 var(--fs-lg)/1.2 var(--font-display); letter-spacing: -.01em; }
.suite-tier-btn__price { font-weight: 700; color: var(--text-2); font-size: var(--fs-sm); }
.suite-tier-btn__text { margin-top: 4px; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; }

.suite-map { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.suite-group { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); gap: var(--sp-5); padding: clamp(20px, 3vw, 28px) 0; border-bottom: 1px solid var(--line); }
.suite-group__head h3 { margin: 0; }
.suite-group__head p { margin: 6px 0 0; color: var(--text-3); font-size: var(--fs-sm); }
.suite-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.suite-item { display: flex; gap: 12px; align-items: flex-start; min-width: 0; transition: opacity .2s ease; }
.suite-item > .icon-badge { flex: none; }
.suite-item__body { min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Tags sit on one line across a row, whatever each description's length. */
.suite-item__body > .suite-tag { margin-top: auto; }
.suite-item h4 { margin: 0; font: 700 var(--fs-md)/1.3 var(--font-sans); color: var(--text); }
.suite-item p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.suite-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border-radius: var(--r-full); font: 700 var(--fs-2xs)/1.3 var(--font-sans); letter-spacing: .02em; white-space: nowrap; }
.suite-tag--starter { background: var(--surface-3); color: var(--text-2); }
.suite-tag--full { background: var(--info-tint); color: var(--info-text); }
.suite-tag--complete { background: var(--accent-tint); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-line); }
.suite-tag--addon { background: var(--navy-900); color: var(--gold-500); }
:root[data-theme="dark"] .suite-tag--addon { background: var(--navy-700); box-shadow: inset 0 0 0 1px var(--accent-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .suite-tag--addon { background: var(--navy-700); box-shadow: inset 0 0 0 1px var(--accent-line); } }
.suite-item__no { font: 700 var(--fs-2xs)/1.3 var(--font-sans); color: var(--text-3); }
.suite-item.is-out { opacity: .38; }
.suite-item.is-out .suite-item__no:not([hidden]) { display: inline; }
.suite-foot { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: clamp(28px, 4vw, 40px); }

@media (max-width: 1000px) {
  .suite-group { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}
@media (max-width: 860px) {
  .suite-ladder__list { grid-template-columns: minmax(0, 1fr); }
  .suite-tier-btn { padding: 14px 16px; }
  .suite-items { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) { .suite-item { transition: none; } }

/* ==========================================================================
   /for-schools: the add-on cards (plans-marketing.js renderSchoolAddon),
   the full width of the pricing grid under the three licences: one card per
   add-on, side by side from 960px and stacked below; in each, the bands and
   trust discounts, then what it adds.
   ========================================================================== */
.addon-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: stretch; }
.addon-pair > .addon-card { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--sp-5); }
.addon-card__for { margin: -8px 0 0; font-weight: 700; color: var(--text-2); font-size: var(--fs-sm); }
.addon-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-7); border: 1.5px solid var(--accent-line); }
.addon-card__intro, .addon-card__more { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); min-width: 0; }
.addon-card__intro > p { text-wrap: pretty; }
.addon-card .addon-bands { width: 100%; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); font-size: var(--fs-sm); }
.addon-card .addon-bands li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; }
.addon-card .addon-bands li + li { border-top: 1px solid var(--line); }
.addon-bands__label { color: var(--text-2); font-weight: 600; min-width: 0; }
.addon-bands__price { color: var(--text-3); white-space: nowrap; }
.addon-bands__price b { font: 700 var(--fs-lg)/1.2 var(--font-display); color: var(--text); letter-spacing: -.01em; }
.addon-card__trust { display: flex; align-items: flex-start; gap: 8px; width: 100%; margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--accent-tint); color: var(--text); font-size: var(--fs-sm); font-weight: 700; }
.addon-card__trust .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent-text); }
.addon-card__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); width: 100%; margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.addon-card__cta .btn { margin-top: 0; max-width: 100%; white-space: normal; }
@media (max-width: 960px) {
  .addon-card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .addon-pair { grid-template-columns: minmax(0, 1fr); }
}