/* No Nonsense — the series site.
   Type and colour come from the app itself: Lora for display, Inter for text,
   the icon blue for light mode and the icon navy for dark mode. */

@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/Lora.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --brand: #0259ab;
  --brand-deep: #01437c;
  --navy: #153a6b;
  --ink: #16191d;
  --muted: #56626e;
  --line: #e3e9ef;
  --paper: #ffffff;
  --wash: #f4f8fc;
  --on-brand: #ffffff;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
  --radius: 18px;
  --shell: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #6fb0f0;
    --brand-deep: #4d8fd6;
    --navy: #153a6b;
    --ink: #f3edea;
    --muted: #b9aeac;
    --line: #3a3336;
    --paper: #1b1616;
    --wash: #241e1e;
    --on-brand: #10202f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 36px rgba(0, 0, 0, .35);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.03rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--brand); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  z-index: 10;
}

.skip-link:focus { left: 0; }

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

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-family: "Lora", Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

.wordmark-mark::before { content: "N"; }

.masthead-nav { display: flex; gap: 26px; }

.masthead-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
}

.masthead-nav a:hover { color: var(--ink); }

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

.hero {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(155deg, #0259ab 0%, #01437c 100%);
  color: #fff;
  padding: 78px 0 84px;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 340px);
  align-items: center;
  gap: 56px;
}

.eyebrow {
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .78rem;
  font-weight: 600;
  opacity: .82;
}

.hero h1 {
  margin: 0 0 20px;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.05rem, 4.6vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 15ch;
}

.hero-intro {
  margin: 0 0 28px;
  font-size: 1.12rem;
  line-height: 1.6;
  max-width: 52ch;
  opacity: .94;
}

.hero-proof {
  margin: 0;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .8;
}

.hero-mark {
  position: relative;
  justify-self: end;
  width: 340px;
  height: 250px;
}

.hero-mark img {
  position: absolute;
  display: block;
  border-radius: 46px;
  box-shadow: 0 28px 60px rgba(4, 20, 45, .45);
}

.hero-mark .hero-app-primary {
  top: 0;
  left: 0;
  width: 225px;
  height: 225px;
  transform: rotate(-4deg);
}

.hero-mark .hero-app-secondary {
  right: 0;
  bottom: 0;
  width: 110px;
  height: 110px;
  border: 4px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  transform: rotate(5deg);
}

/* ---------- highlights ---------- */

.highlights { padding: 40px 0 8px; }

.highlight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.highlight-list li {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
}

.highlight-list h2 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.highlight-list p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

/* ---------- apps ---------- */

.apps { padding: 64px 0 76px; }

.section-title {
  margin: 0 0 28px;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.app {
  width: 100%;
  margin: 0;
  text-align: left;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.app-shot {
  position: relative;
  width: 100%;
  max-width: 200px;
  margin: 0 auto 20px;
}

.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
}

.app-shot img.app-logo {
  position: absolute;
  bottom: -18px;
  left: -18px;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 3px solid var(--paper);
  box-shadow: 0 10px 24px rgba(4, 20, 45, .3);
}

.app-name {
  margin: 0 0 4px;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.app-name a {
  color: inherit;
  text-decoration: none;
}

.app-name a:hover { text-decoration: underline; text-underline-offset: 4px; }

.app-summary {
  margin: 0 0 10px;
  color: var(--brand);
  font-weight: 500;
}

.app-description {
  margin: 0;
  max-width: 60ch;
}

.app-points {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  max-width: 60ch;
}

.app-points li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}

.app-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--brand);
}

.app-disclaimer {
  margin: 18px 0 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 0.9rem;
}

.app-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 24px;
}

.app-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  transition: opacity .15s ease;
}

.app-badge:hover { opacity: .82; }

/* Sized by height, because the two official files carry different padding.
   Apple's badge has none, so it is 40px tall. Google's file is 646x250 with
   82px of transparent padding, so its visible content is only 67% of the
   height: at 60px the visible badge is 40px, matching Apple's exactly. */
.app-badge img {
  height: 40px;
  width: auto;
}

.app-badge.play img { height: 60px; }

.store-soon {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
}

.app-more {
  margin: 18px 0 0;
  font-weight: 600;
}

.app-more a { text-underline-offset: 3px; }

/* ---------- series note ---------- */

.series-note {
  padding: 8px 0 72px;
}

.series-note h2 {
  margin: 0 0 10px;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
}

.series-note p {
  margin: 0;
  max-width: 68ch;
  color: var(--muted);
}

/* ---------- product pages ---------- */

.product {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 24px 84px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .9rem;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: .55;
}

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 320px);
  gap: 56px;
  align-items: center;
  padding: 12px 0 52px;
  border-bottom: 1px solid var(--line);
}

.product-hero .eyebrow {
  margin: 0 0 14px;
  color: var(--brand);
  opacity: 1;
}

.product-hero h1 {
  margin: 0 0 18px;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 18ch;
}

.product-intro {
  margin: 0 0 26px;
  max-width: 58ch;
  font-size: 1.1rem;
  color: var(--muted);
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.product-proof {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.product-mark {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 260px;
}

.product-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(4, 20, 45, .22);
}

.product-icon {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  border: 3px solid var(--paper);
  box-shadow: 0 10px 24px rgba(4, 20, 45, .3);
}

.product-mark .product-icon {
  position: absolute;
  bottom: -20px;
  left: -20px;
}

.product-facts {
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}

.product-facts dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0;
}

.product-facts dt {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-facts dd {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
}

.product-section {
  padding: 52px 0 0;
}

.product-section-head { margin-bottom: 26px; }

.product-section h2 {
  margin: 0 0 8px;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.02em;
}

.product-section-head p {
  margin: 0;
  max-width: 66ch;
  color: var(--muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-grid li {
  padding: 22px 22px 24px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.feature-grid h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
}

.feature-grid p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.syllabus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.syllabus-section {
  padding: 22px 24px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.syllabus-section h3 {
  margin: 0 0 4px;
  font-family: "Lora", Georgia, serif;
  font-size: 1.16rem;
  letter-spacing: -0.01em;
}

.syllabus-subtitle {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .92rem;
}

.syllabus-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.syllabus-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.syllabus-name { font-weight: 600; }

.syllabus-count {
  color: var(--muted);
  font-size: .85rem;
  text-align: right;
}

.syllabus-badge {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.syllabus-badge.free {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}

.syllabus-badge.paid {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}

.sample-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sample-question {
  padding: 20px 22px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.sample-question summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

.sample-question summary::-webkit-details-marker { display: none; }

.sample-question summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
  border-radius: 4px;
}

.sample-topic {
  display: block;
  margin-bottom: 8px;
  color: var(--brand);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sample-prompt {
  display: block;
  font-family: "Lora", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}

.sample-reveal {
  display: inline-block;
  margin-top: 12px;
  color: var(--brand);
  font-size: .88rem;
  font-weight: 600;
}

.sample-reveal::after { content: " ↓"; }

.sample-question[open] .sample-reveal { display: none; }

.sample-answers {
  margin: 18px 0 14px;
  padding-left: 22px;
  color: var(--muted);
  font-size: .95rem;
}

.sample-answers li { margin-bottom: 7px; }

.sample-answers li.is-correct {
  color: var(--ink);
  font-weight: 600;
}

.sample-tick {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  font-size: .72rem;
  font-weight: 600;
  vertical-align: middle;
}

.sample-why {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}

.sample-note {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: .88rem;
}

.product-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  margin-top: 56px;
  padding: 34px 36px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.product-cta h2 { margin: 0 0 6px; }

.product-cta p {
  margin: 0;
  max-width: 58ch;
  color: var(--muted);
}

.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 40px;
}

.faq-item h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.product-disclaimer {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.product-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 28px;
  font-size: .95rem;
  font-weight: 500;
}

.not-found-links {
  margin: 18px 0 0;
  padding-left: 20px;
}

.not-found-links li { margin-bottom: 8px; }

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

/* The legal pages sit directly in the main column rather than in a .shell
   wrapper, so they need centring themselves. Without it the article holds
   the left edge of a wide screen. */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 76px;
}

.legal-head { margin-bottom: 34px; }

.legal h1 {
  margin: 0 0 8px;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.effective {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}

.legal-body h2 {
  margin: 40px 0 10px;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.015em;
}

.legal-body p { margin: 0 0 14px; }

.legal-body a { text-underline-offset: 3px; }

.legal-contact {
  margin-top: 48px;
  padding: 24px 26px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.legal-contact h2 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
}

.legal-contact p { margin: 0; color: var(--muted); }

/* ---------- support ---------- */

/* The form is the contact path: the email address is deliberately not
   published on this page. */
.support-form-section {
  margin: 0;
}

.support-form-section h2 {
  margin: 0 0 8px;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
}

.support-form-intro {
  margin: 0 0 22px;
  color: var(--muted);
}

.support-form {
  display: grid;
  gap: 18px;
}

/* The class sets display:grid, which would otherwise beat the browser's
   [hidden] rule and leave the form (and its button) visible after success. */
.support-form[hidden] { display: none; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* The app field is hidden when ?app= already chose it, leaving the category
   field alone on the row rather than squeezed into half of it. */
.field-grid-single { grid-template-columns: 1fr; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: .92rem;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input[type="file"] { padding: 9px 12px; }

.field-hint {
  margin: 6px 0 0;
  font-size: .85rem;
  color: var(--muted);
}

.optional {
  color: var(--muted);
  font-size: .85em;
  font-weight: 400;
}

.support-extra {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.support-extra summary {
  cursor: pointer;
  font-size: .92rem;
  font-weight: 600;
}

.support-extra .field-grid { margin-top: 14px; }

/* Off-screen rather than display:none: some bots skip hidden fields. */
.support-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.support-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: .9rem;
}

.support-consent input { margin-top: 4px; }

.support-submit {
  justify-self: start;
  padding: 13px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.support-submit:hover { background: var(--brand-deep); }

.support-submit:disabled {
  opacity: .65;
  cursor: progress;
}

.support-form-status {
  margin: 0;
  min-height: 1.4em;
  color: var(--muted);
}

@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
}

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

.footer {
  background: var(--navy);
  color: #fff;
  padding: 48px 0 34px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 28px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.footer-brand .wordmark-mark {
  background: #fff;
  color: var(--navy);
}

.footer-name {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: 1.08rem;
}

.footer-tag {
  margin: 2px 0 0;
  font-size: .9rem;
  opacity: .72;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.footer-nav a {
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  font-size: .95rem;
}

.footer-nav a:hover { color: #fff; text-decoration: underline; }

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 20px;
}

.footer-legal p {
  margin: 0;
  font-size: .86rem;
  opacity: .68;
}

/* ---------- narrow screens ---------- */

/* Four nav links plus the wordmark do not fit on a phone, and a wrapped
   masthead is better than one that runs off the edge. */
@media (max-width: 560px) {
  .masthead-inner { flex-wrap: wrap; gap: 12px; padding: 14px 0; }
  .masthead-nav { gap: 18px; }
  .masthead-nav a { font-size: .9rem; }
}

@media (max-width: 860px) {
  .app-shot { margin-bottom: 18px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-mark { justify-self: start; width: 300px; height: 220px; }
  .hero-mark .hero-app-primary { width: 200px; height: 200px; }
  .hero-mark .hero-app-secondary { width: 100px; height: 100px; border-width: 3px; border-radius: 24px; }
  .highlight-list { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: 1fr; }
  .app { padding: 28px 24px; }
  .app-shot { max-width: 258px; }
  .footer-inner { flex-direction: column; }
  .product-hero { grid-template-columns: 1fr; gap: 40px; }
  .product-mark { justify-self: start; }
  .product-facts dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .syllabus-grid { grid-template-columns: 1fr; }
  .sample-list { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .product-cta { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .product-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: 1fr; }
  .product { padding-left: 20px; padding-right: 20px; }
  .product-cta { padding: 26px 22px; }
}