/* SimpleMed+ sales homepage: Grok composition with Fable product moments. */
/* Anchor nav always smooth (JS also drives a custom ease; keep CSS as fallback). */
html { scroll-behavior: smooth !important; }
/* While JS is mid-animation, kill native smooth so the two do not fight. */
html.smg-is-scrolling { scroll-behavior: auto !important; }

/* Homepage base 15.5px (owner 2026-10-04), just below the 16.5px of the rest of Plus.
   Heading clamp() vw terms are scaled with it so they shrink with the rem values. */
html { font-size: 97%; }

body {
  margin: 0;
  background: #f7f3eb;
}

/* The homepage owns its navigation and closing treatment. */
body > header,
body > .sm-side-switch {
  display: none !important;
}

.smp-layout-content { min-height: 100vh; }

/* Tokens, buttons, nav, footer and plan cards live in brand.css (shared). */
.smp-home {
  overflow-x: clip;
  color: var(--smg-ink);
  background: var(--smg-cream);
  font-family: var(--smg-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.smp-home img,
.smp-home svg { display: block; max-width: 100%; }
/* Zero-specificity resets so component classes (.smg-btn etc.) always win. */
:where(.smp-home) :is(button, a) { font: inherit; }
:where(.smp-home) a { color: inherit; }
.smp-home :focus-visible { outline: 3px solid #329070; outline-offset: 3px; }
.smp-home :is(h1, h2) { text-wrap: balance; }
.smp-home p { text-wrap: pretty; }

#how-it-works,
#quality,
#revision-coach,
#subjects,
#product,
#pricing { scroll-margin-top: 2rem; }

/* Integrated navigation and hero */
.smg-site-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #e9f0eb 0%, var(--smg-cream) 64%);
}

.smg-hero {
  display: grid;
  min-height: 42rem;
  grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
/* fable-fonttweak-20260722: desktop only - pull the hero up slightly under the
   nav (~20% smaller visible nav->hero gap at 1440x900). The visible gap is
   top padding + the copy column's centring offset against the taller SBA card,
   so the padding carries the whole cut. min-height eased 42rem->40rem so the
   17px base doesn't grow the hero (40rem@17px ~= 42rem@16px). Mobile keeps its
   own padding-block override in the max-width block below. */
@media (min-width: 761px) {
  .smg-hero { min-height: 40rem; padding-block-start: clamp(1.7rem, 2.9vw, 3rem); }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .smg-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-width: 980px) {
  .smg-hero h1 { max-width: 20ch; }
}
@media (min-width: 981px) {
  .smg-quality-close { grid-column: 1; grid-row: 2; }
  .smg-quality-list { grid-column: 2; grid-row: 1 / span 2; }
  .smg-hero { align-items: start; }
  /* Trimmed 2026-10-03 to absorb the proof points now stacking on three lines. */
  .smg-hero-copy { padding-top: clamp(0.75rem, 2.6vw, 2.4rem); }

}
.smg-hero-copy { max-width: 34rem; }
/* Hero eyebrow one step up (owner 2026-10-03): about 16px, above the 15.1px it had before. */
.smg-hero .smg-eyebrow { font-size: 1.03rem; }
.smg-hero h1 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--smg-sans);
  font-size: clamp(2.6rem, 3.09vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.smg-hero-lead { max-width: 33rem; margin: 1.25rem 0 1.45rem; color: var(--smg-copy); font-size: 1.05rem; line-height: 1.65; }
.smg-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* One proof point per line (owner 2026-10-03). */
.smg-hero-proof { display: grid; gap: 0.5rem; padding: 0; margin: 1.35rem 0 0; color: var(--smg-muted); font-size: 0.875rem; list-style: none; }
.smg-ico { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.smg-hero-proof li { display: inline-flex; gap: 0.45rem; align-items: center; }
.smg-hero-proof .smg-ico { color: var(--smg-green-soft); }
.smg-hero-proof strong { color: var(--smg-ink); }

/* Fable-derived live SBA */
.smg-sba {
  width: 100%;
  overflow: hidden;
  background: var(--smg-card);
  border: 1px solid #d5cbb9;
  border-radius: 1.4rem;
  box-shadow: 0 1.6rem 4rem rgba(28, 42, 34, 0.11);
}
.smg-sba-top { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.2rem; color: #d8e9e2; background: var(--smg-green); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.smg-sba-tag { display: inline-flex; gap: 0.55rem; align-items: center; color: #fff; }
.smg-sba-tag i { width: 0.48rem; height: 0.48rem; background: #ebca7d; border-radius: 50%; box-shadow: 0 0 0 0.3rem rgba(235, 202, 125, 0.12); }
.smg-sba-body { padding: clamp(1.2rem, 2vw, 1.75rem); }
.smg-sba-foot .smg-btn { flex: none; white-space: nowrap; }
.smg-sba-foot { display: flex; min-height: 3.7rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1rem; color: #4f5d55; background: #eee7d6; border-top: 1px solid #ddd2bc; font-size: 0.875rem; }

/* Proof band */
.smg-stats { padding-bottom: clamp(1rem, 2vw, 1.75rem); background: var(--smg-cream); }
.smg-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; overflow: hidden; color: #fff; background: var(--smg-green); border-radius: 1.5rem; }
.smg-stats-grid div { display: flex; min-height: 8.2rem; flex-direction: column; justify-content: flex-start; padding: 1.2rem 1.5rem; text-align: center; }
.smg-stats-grid div + div { border-left: 1px solid rgba(255,255,255,0.13); }
.smg-stats-grid dd { order: -1; margin: 0; color: #f7f2e7; font-family: var(--smg-serif); font-size: clamp(2.1rem, 2.75vw, 3.05rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.smg-stats-grid dt { display: inline-flex; flex-direction: column; gap: 0.3rem; align-items: center; justify-content: center; margin-top: 0.55rem; color: #a7c9bb; font-size: 0.875rem; letter-spacing: 0.02em; }
.smg-stats-grid dt .smg-ico { width: 1rem; height: 1rem; color: #8fd1b9; }

/* Closed loop */
.smg-loop { padding-block: clamp(4.75rem, 7vw, 7rem); background: var(--smg-cream); }
.smg-loop-shell { display: grid; grid-template-columns: minmax(17rem,.72fr) minmax(35rem,1.28fr); gap: clamp(2rem,4vw,4rem); align-items: center; }
.smg-loop-copy { max-width: 30rem; }
.smg-loop-copy h2 { margin: 0; font-family: var(--smg-sans); font-size: clamp(2.15rem,2.75vw,3.05rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }
.smg-loop-copy header > p:last-child { margin: .9rem 0 0; color: var(--smg-muted); }
.smg-loop .smg-eyebrow { color: #1f6b51; }
.smg-loop-steps { display: grid; gap: .38rem; padding: 0; margin: 1.65rem 0 0; list-style: none; }
.smg-loop-step { display: grid; width: 100%; grid-template-columns: 1.8rem 1fr; gap: .7rem; align-items: start; padding: .72rem .78rem; color: #526058; background: transparent; border: 1px solid transparent; border-radius: .72rem; text-align: left; cursor: pointer; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.smg-loop-step[aria-current="step"] { color: var(--smg-green); background: rgba(255,252,246,.68); border-color: #cbbfab; transform: translateX(.2rem); }
.smg-loop-step > span:first-child { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; color: var(--smg-green-mid); background: #faf6ed; border: 1px solid #cfc4b2; border-radius: 50%; font-size: 0.875rem; font-weight: 800; }
.smg-loop-step[aria-current="step"] > span:first-child { color: #fff; background: var(--smg-green); border-color: var(--smg-green); }
.smg-loop-steps strong { display: block; font-size: 0.875rem; }
.smg-loop-steps small { display: block; margin-top: .16rem; font-size: 0.875rem; line-height: 1.4; }
.smg-loop-note { margin: 1.2rem 0 0; color: var(--smg-muted); font-size: .9rem; line-height: 1.55; }
.smg-loop-stage { position: relative; overflow: hidden; padding: clamp(.8rem,1.6vw,1.25rem); background: linear-gradient(168deg,#0f4436 0%,#0f3d2e 58%,#092c22 100%); border: 1px solid rgba(15,61,46,.55); border-radius: 1.5rem; box-shadow: 0 1.7rem 4rem rgba(28,42,34,.18); }
.smg-loop-flow { position: relative; display: grid; min-height: 27rem; grid-template-columns: minmax(0,1fr) 3rem minmax(0,1fr); grid-template-rows: minmax(8rem,1fr) 2.4rem minmax(8rem,1fr) auto; gap: .35rem; align-items: stretch; padding: .6rem .6rem .1rem; }
.smg-loop-module { position: relative; z-index: 1; display: grid; min-width: 0; align-content: center; gap: .38rem; padding: 1.05rem; color: #fffaf0; background: rgba(255,252,246,.065); border: 1px solid rgba(255,252,246,.18); border-radius: 1rem; opacity: .88; transition: opacity 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; }
.smg-loop-module small { display: block; color: #e7cf9b; font-size: 0.875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.smg-loop-module strong { display: block; font-family: var(--smg-serif); font-size: .95rem; line-height: 1.2; }
.smg-loop-module > span:not(.smg-gap-target) { width: fit-content; color: #ffd9cf; font-size: 0.875rem; font-weight: 750; }
.smg-loop-module--question { grid-column: 1; grid-row: 1; }
.smg-loop-module--gap { grid-column: 3; grid-row: 1; grid-template-columns: 3.25rem 1fr; align-items: center; }
.smg-loop-module--gap > span:last-child { display: grid; min-width: 0; gap: .38rem; }
.smg-loop-module--gap strong { font-size: 0.875rem; }
.smg-loop-module--card { grid-column: 3; grid-row: 3; color: var(--smg-green); background: #fffaf0; border-color: #d9caac; }
.smg-loop-module--card > span { color: var(--smg-green-soft) !important; }
/* Card 03 sits on cream, so the shared gold eyebrow (#e7cf9b) was ~1.46:1 and
   effectively invisible. Use the dark green for this card's eyebrow only. */
.smg-loop-module--card small { color: var(--smg-green); }
.smg-loop-module--schedule { grid-column: 1; grid-row: 3; }
.smg-loop-stage[data-step="1"] [data-loop-module="1"],
.smg-loop-stage[data-step="2"] [data-loop-module="2"],
.smg-loop-stage[data-step="3"] [data-loop-module="3"],
.smg-loop-stage[data-step="4"] [data-loop-module="4"] { opacity: 1; border-color: #e7cf9b; box-shadow: 0 0 0 1px rgba(231,207,155,.25),0 .75rem 1.8rem rgba(0,0,0,.13); transform: translateY(-2px); }
.smg-gap-target { position: relative; display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid rgba(255,252,246,.22); border-radius: 50%; box-shadow: 0 0 0 .55rem rgba(255,252,246,.055); }
.smg-gap-target i { content: ""; width: .75rem; height: .75rem; background: #e7cf9b; border: .2rem solid #b45f4f; border-radius: 50%; box-shadow: 0 0 .8rem rgba(231,207,155,.42); }
.smg-flow-arrow { position: relative; z-index: 0; display: grid; place-items: center; color: #e7cf9b; font-size: 1.25rem; font-style: normal; opacity: .66; }
.smg-flow-arrow--right { grid-column: 2; grid-row: 1; }
.smg-flow-arrow--down { grid-column: 3; grid-row: 2; }
.smg-flow-arrow--left { grid-column: 2; grid-row: 3; }
.smg-flow-arrow--return { grid-column: 1; grid-row: 2; }
.smg-loop-flow > p { grid-column: 1 / -1; grid-row: 4; margin: .55rem 4.6rem 0; color: #a7c9bb; font-size: 0.875rem; text-align: center; }
.smg-loop-timeline { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: .5rem; }
.smg-loop-timeline::before { content: ""; position: absolute; top: .34rem; right: 8%; left: 8%; height: 1px; background: rgba(255,255,255,.28); }
.smg-loop-timeline span { position: relative; display: grid; gap: .35rem; justify-items: center; }
.smg-loop-timeline i { width: .7rem; height: .7rem; background: #4ba984; border: 2px solid #164b3a; border-radius: 50%; }
.smg-loop-timeline span:last-child i { background: #e7cf9b; }
.smg-loop-timeline b { color: #d5e6df; font-size: 0.875rem; }
.smg-loop-stage.is-flowing .smg-flow-arrow { animation: smg-loop-pulse 1.4s ease-in-out infinite; }
.smg-loop-replay { position: absolute; right: 1rem; bottom: 1rem; display: inline-flex; min-height: 2.25rem; gap: .4rem; align-items: center; padding: .38rem .7rem; color: #f7f2e7; background: rgba(255,252,246,.1); border: 1px solid rgba(255,252,246,.28); border-radius: 999px; font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.smg-loop-replay:hover { background: rgba(255,252,246,.18); }
.smg-loop-replay svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.smg-loop-mobile-visual { display: none; }

/* Question quality */
.smg-quality { padding-block: clamp(4.5rem, 7vw, 6.5rem); background: var(--smg-cream); }
.smg-quality-inner { display: grid; grid-template-columns: minmax(16rem,.8fr) minmax(0,1.6fr); gap: 2.5rem clamp(2rem,5vw,5rem); align-items: start; }
.smg-quality-head h2 { margin: 0; font-size: clamp(2.15rem,2.75vw,3.05rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.smg-quality-head p { margin: .9rem 0 0; color: var(--smg-muted); }
.smg-quality-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem 2.5rem; padding: 0; margin: 0; list-style: none; }
.smg-quality-ico { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; margin-bottom: 0.85rem; color: var(--smg-green); background: var(--smg-green-pale); border-radius: 1rem; }
.smg-quality-ico .smg-ico { width: 1.6rem; height: 1.6rem; }
.smg-quality-list h3 { margin: 0 0 .4rem; color: var(--smg-green); font-size: 1.1rem; font-weight: 700; }
.smg-quality-list p { margin: 0; color: var(--smg-copy); font-size: .9rem; line-height: 1.6; }
.smg-quality-close p { margin: 0 0 .9rem; }
.smg-quality-close .smg-btn { font-family: var(--smg-sans); }
.smg-quality-close { margin: 0; padding: 1.1rem 1.4rem; color: var(--smg-green); background: var(--smg-green-pale); border-radius: 1.1rem; font-family: var(--smg-serif); font-size: 1.05rem; line-height: 1.45; }

/* Subjects */
.smg-subjects { padding-block: clamp(4.5rem, 7vw, 6.75rem); background: var(--smg-cream-deep); }
.smg-subject-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.65rem; padding: 0; margin: 0; list-style: none; }
.smg-subject-grid li { min-height: 4.5rem; background: rgba(255,252,246,0.72); border: 1px solid var(--smg-line); border-radius: 1rem; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.smg-subject-grid a { display: grid; min-height: 4.5rem; grid-template-columns: 2.4rem 1fr; gap: 0.75rem; align-items: center; padding: 0.8rem 0.9rem; text-decoration: none; }
.smg-subject-grid li:hover { background: var(--sm-surface); border-color: #a9bdb2; transform: translateY(-2px); }
.smg-subject-grid img { width: 2.4rem; height: 2.4rem; padding: .35rem; object-fit: contain; background: var(--smg-green-pale); border-radius: .75rem; }
.smg-subject-grid span { color: #34443d; font-size: 0.875rem; font-weight: 700; line-height: 1.25; }
.smg-subject-grid .smg-subject-osce { grid-column: auto; }
.smg-subject-action { margin: 1.35rem 0 0; text-align: center; }

/* Real client product gallery */
.smg-product { padding-block: clamp(2.5rem, 4vw, 3.5rem); background: var(--smg-cream); }
.smg-product .smg-section-head { margin-bottom: 1.25rem; }
.smg-gallery-tabs { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 0.8rem; overflow-x: auto; background: #ede7da; border: 1px solid var(--smg-line); border-radius: 999px; }
.smg-gallery-tabs button { min-height: 2.7rem; padding: 0.6rem 1.1rem; color: #526159; white-space: nowrap; background: transparent; border: 0; border-radius: 999px; font-size: 0.875rem; font-weight: 750; cursor: pointer; }
.smg-gallery-tabs button[aria-selected="true"] { color: #fff; background: var(--smg-green); box-shadow: 0 0.4rem 1rem rgba(15,61,46,0.18); }
.smg-gallery-frame { max-width: 52rem; min-height: 0; margin-inline: auto; padding: 0.5rem; background: var(--smg-card); border: 1px solid var(--smg-line); border-radius: 1rem; box-shadow: 0 1.4rem 3.5rem rgba(28,42,34,0.09); }
.smg-gallery-panel { margin: 0; }
.smg-gallery-panel[hidden] { display: none; }
.smg-gallery-panel picture { display: block; }
.smg-gallery-panel img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; background: #eef2ef; border: 0; border-radius: 1rem; }
.smg-gallery-panel figcaption { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; padding: 0.6rem 0.25rem 0.1rem; }
.smg-gallery-panel figcaption strong { color: var(--smg-green); font-family: var(--smg-serif); font-size: 1.05rem; }
.smg-gallery-panel figcaption span { max-width: 38rem; color: var(--smg-muted); font-size: 0.875rem; text-align: right; }
.smg-gallery-panel.is-entering img { animation: smg-gallery-in 360ms ease both; }

/* Mobile apps */
.smg-apps { padding-block: clamp(1rem, 2vw, 1.5rem); background: var(--smg-cream); }
.smg-apps-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--smg-card); border-radius: 1.5rem; }
.smg-apps-copy { max-width: 38rem; }
.smg-apps-copy .smg-eyebrow { margin-bottom: 0.5rem; }
.smg-apps-copy h2 { margin: 0; font-family: var(--smg-sans); font-size: clamp(1.7rem, 2.66vw, 2.25rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; }
.smg-apps-copy > p:last-child { margin: 0.7rem 0 0; color: var(--smg-muted); font-size: 0.875rem; line-height: 1.65; }
.smg-apps-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.smg-apps-links a { display: flex; align-items: center; justify-content: center; padding: 11px; }
.smg-apps-links img { display: block; width: auto; height: 44px; max-width: none; }
/* Google's artwork includes 41px of transparent clear space around its 168px badge. */
.smg-apps-links a[href*="play.google.com"] { padding: 1px; }
.smg-apps-links a[href*="play.google.com"] img { height: 65.5px; }
.smg-apps-links a:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(45,126,95,0.35); outline-offset: 2px; }

/* Plans and close */
.smg-pricing { padding-block: clamp(4.5rem, 7vw, 6.5rem); background: var(--smg-cream); }
.smg-final { padding-block: clamp(4rem, 6vw, 5.5rem); text-align: center; background: var(--smg-cream); }
.smg-final h2 { max-width: 22ch; margin-inline: auto; }
.smg-final > .smg-wrap > p:not(.smg-eyebrow) { max-width: 39rem; margin: 0.9rem auto 1.5rem; color: var(--smg-muted); }


@keyframes smg-loop-draw { from { stroke-dashoffset: var(--smg-path); } to { stroke-dashoffset: 0; } }
@keyframes smg-loop-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes smg-loop-pop { from { opacity: 0; transform: scale(.84); } to { opacity: 1; transform: none; } }
@keyframes smg-loop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes smg-loop-pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes smg-gallery-in { from { opacity: 0; transform: translateY(0.35rem); clip-path: inset(0 0 5%); } to { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes smg-hero-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

.smp-home.is-enhanced .smg-hero-copy { animation: smg-hero-in 650ms ease both; }
.smp-home.is-enhanced .smg-sba { animation: smg-hero-in 700ms 100ms ease both; }

@media (max-width: 1180px) {
  .smg-loop-shell { grid-template-columns: 1fr; }
  .smg-loop-copy { max-width: 47rem; margin-inline: auto; }
  .smg-loop-copy header { text-align: center; }
  .smg-loop-copy header > p:last-child { max-width: 40rem; margin-inline: auto; }
  .smg-loop-steps { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .smg-loop-step { height: 100%; grid-template-columns: 1fr; align-content: start; }
  .smg-loop-step > span:first-child { margin-bottom: .15rem; }
  .smg-loop-note { text-align: center; }
}

@media (max-width: 980px) {
  .smg-loop-step { align-content: start; }
  .smg-hero { min-height: 0; grid-template-columns: 1fr; padding-top: 1.9rem; }
  .smg-hero-copy { max-width: 43rem; margin-inline: auto; text-align: center; }
  .smg-hero h1 { max-width: 14ch; margin-inline: auto; }
  .smg-hero-lead { margin-inline: auto; }
  .smg-actions { justify-content: center; }
  .smg-hero-proof { width: fit-content; margin-inline: auto; text-align: left; }
  .smg-sba { max-width: 42rem; margin-inline: auto; }
  .smg-quality-inner { grid-template-columns: 1fr; }
  .smg-loop-steps { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .smg-loop-step { height: 100%; grid-template-columns: 1fr; }
  .smg-loop-step > span:first-child { margin-bottom: .15rem; }
  .smg-subject-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .smg-subject-grid .smg-subject-osce { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .smg-hero { gap: 2rem; padding-block: 1.5rem 3rem; }
  .smg-hero h1 { font-size: clamp(2.3rem, 9.46vw, 3rem); }
  /* Phone body copy stays at 1rem; prices and small print keep their own scale. */
  .smp-home p:not(.smg-eyebrow):not(.smg-plan-price):not(.smg-footer-legal p):not([data-sample-quiz] p),
  .smg-loop-steps small,
  .smg-gallery-panel figcaption span { font-size: 1rem; }
  /* Phone leading one step tighter (owner 2026-10-04). */
  .smp-home,
  .smg-loop-note { line-height: 1.45; } /* 1.55 */
  .smg-hero-lead,
  .smg-apps-copy > p:last-child { line-height: 1.55; } /* 1.65 */
  .smg-quality-list p { line-height: 1.5; } /* 1.6 */
  .smg-sba-foot { align-items: flex-start; }
  .smg-stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .smg-stats-grid div { min-height: 6.6rem; }
  .smg-stats-grid div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,0.13); }
  .smg-stats-grid div:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.13); }
  .smg-loop-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .smg-loop-step { grid-template-columns: 1.7rem 1fr; }
  .smg-loop-stage { padding: 1rem; }
  .smg-loop-flow,
  .smg-loop-replay { display: none; }
  .smg-loop-mobile-visual { position: relative; display: grid; gap: .4rem; }
  .smg-loop-mobile-visual article { display: grid; gap: .2rem; padding: .9rem 1rem; color: #fffaf0; background: rgba(255,252,246,.07); border: 1px solid rgba(255,252,246,.18); border-radius: .9rem; opacity: 1; transition: opacity 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
  .smg-loop-stage[data-step="1"] .smg-loop-mobile-visual [data-loop-module="1"],
  .smg-loop-stage[data-step="2"] .smg-loop-mobile-visual [data-loop-module="2"],
  .smg-loop-stage[data-step="3"] .smg-loop-mobile-visual [data-loop-module="3"],
  .smg-loop-stage[data-step="4"] .smg-loop-mobile-visual [data-loop-module="4"] { opacity: 1; border-color: #e7cf9b; box-shadow: 0 0 0 1px rgba(231,207,155,.22),0 .65rem 1.3rem rgba(0,0,0,.14); transform: translateY(-2px); }
  .smg-loop-mobile-visual article small { color: #e7cf9b; font-size: 0.875rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
  .smg-loop-mobile-visual article strong { font-family: var(--smg-serif); font-size: .9rem; }
  .smg-loop-mobile-visual article span { width: fit-content; color: #ffd9cf; font-size: 0.875rem; font-weight: 700; }
  .smg-loop-mobile-visual .smg-loop-mobile-card { color: var(--smg-green); background: #fffaf0; }
  .smg-loop-mobile-visual .smg-loop-mobile-card small { color: var(--smg-green); }
  .smg-loop-mobile-visual .smg-loop-mobile-card span { color: var(--smg-green-mid); }
  .smg-loop-mobile-visual > i { color: #e7cf9b; font-size: 0.875rem; font-style: normal; text-align: center; line-height: 1; }
  .smg-subject-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .smg-quality-head { text-align: center; }
  .smg-quality-list { grid-template-columns: 1fr; gap: 1.5rem; }
  .smg-quality-list li { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 1rem; }
  .smg-quality-ico { grid-row: 1 / span 2; margin: 0; }

  .smg-gallery-panel figcaption { display: grid; gap: 0.25rem; }
  .smg-gallery-panel figcaption span { text-align: left; }
  .smg-gallery-tabs { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; border-radius: 1rem; }
  .smg-gallery-tabs button { min-width: 0; padding-inline: 0.45rem; border-radius: 0.85rem; white-space: normal; }
  .smg-apps-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .smg-apps-links { width: fit-content; max-width: 100%; }
}

@media (max-width: 460px) {
  .smg-actions { display: grid; }
  .smg-actions .smg-btn { width: 100%; }
  .smg-sba-top { align-items: flex-start; }
  .smg-sba-body { padding: 1rem; }
  .smg-sba-foot { display: grid; justify-content: stretch; }
  .smg-sba-foot .smg-btn { width: 100%; }
  .smg-loop-steps { grid-template-columns: 1fr; }
  .smg-loop-step { padding: 0.55rem; }
  .smg-subject-grid li { min-height: 3.9rem; }
  .smg-subject-grid a { min-height: 3.9rem; grid-template-columns: 2.4rem 1fr; gap: .6rem; padding: .6rem .7rem; }
  .smg-apps-links { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Do NOT disable homepage scroll-behavior - menu anchor scroll must stay calm/smooth. */
  html { scroll-behavior: smooth !important; }
  .smp-home *,
  .smp-home *::before,
  .smp-home *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .smg-loop-draw { stroke-dashoffset: 0 !important; }
  .smg-loop-replay { display: none; }
}

/* Small phones: stack the icon above the label so long subject names fit inside the tile (audit M2). */
@media (max-width: 420px) {
  .smg-subject-grid a { grid-template-columns: 1fr; justify-items: center; gap: .45rem; padding: .75rem .5rem; text-align: center; }
  .smg-subject-grid span { overflow-wrap: break-word; hyphens: auto; }
}

/* Owner 2026-10-06: a clearly narrower central column on desktop. Every home content section (hero, sample question,
   stats, sections, pricing, FAQ, final call to action) shares it, so all edges line up: 90% of the original width
   (about 1142px at 1350px, 1341px at 1920px; owner 2026-10-07: 77% was too narrow, then 90%). The site header and footer keep the width every public page uses, so
   they do not move between pages. Phones and tablets keep the brand.css width. */
@media (min-width: 1181px) {
  .smp-home .smg-wrap:not(.smg-nav) { width: calc(min(calc(100% - clamp(2rem, 6vw, 8rem)), 96rem) * 0.9); }
}

/* Owner 2026-10-07: the home sample answers on a click, so each option is a real button (keyboard reachable, with a
   clear focus ring). fragments/answer-feedback.html :: sample with instantSample. */
.sm-sample-hint { margin: 0 0 .5rem; font-size: .875rem; color: #4b5563; }
.sm-sample-option { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .625rem .75rem; border: 1px solid #d1d5db;
  border-radius: .5rem; background: #fff; color: #111827; font: inherit; font-size: .9375rem; line-height: 1.4; text-align: left; cursor: pointer; }
.sm-sample-option:hover { background: #f9fafb; border-color: #9ca3af; }
.sm-sample-option:focus-visible { outline: 2px solid #1b6048; outline-offset: 2px; }
.sm-sample-option__letter { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
  border: 1px solid #d1d5db; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: #374151; }