/* LessonLayer: shared static site styles. No animation, no tracking. */

/* Beta v1 palette (S-028). A calm academic identity taken from the supplied
   LessonLayer logo and UI reference: a cool off-white page, navy typography
   from the logo's own wordmark navy (#1e3355), and one restrained teal
   accent. Every token below was contrast-checked against --bg and --surface:
   --fg 14.6:1, --fg2 8.5:1, --muted 5.7:1, --accent 6.6:1, and white on
   --accent 7.0:1, so nothing here trades legibility for calm. The logo's
   bright blue stays in the logo; it is too light (4.1:1) to carry text.

   S-030 keeps every one of those colours and changes the composition around
   them: a display face for headings, softly bordered white surfaces lifted
   off a pale ground, tinted bands with deterministic CSS decoration, and
   asymmetric desktop grids that collapse to one deliberate column at 390px.
   The only web fonts are self-hosted (the heading face below; the home page's
   handwriting notes in home.css). */

/* Typography (founder, 2026-10-11): headings in Plus Jakarta Sans, self-hosted (SIL OFL 1.1,
   /fonts/plus-jakarta-sans-OFL.txt), Latin subset, two weights: 800 for page titles (preloaded by
   _header.html) and 700 for section and smaller headings. font-display: swap shows the text at once;
   until the font arrives, a local Arial Bold scaled to Plus Jakarta Sans's own widths and vertical
   metrics stands in, so lines wrap the same and nothing shifts when it swaps. Body text is unchanged. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LL Heading Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 800;
  size-adjust: 100.88%;
  ascent-override: 102.9%;
  descent-override: 22.01%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "LL Heading Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700;
  size-adjust: 99.77%;
  ascent-override: 104.04%;
  descent-override: 22.25%;
  line-gap-override: 0%;
}

:root {
  --bg: #f7f9fb;
  --surface: #ffffff;
  --fg: #14253f;
  --fg2: #3a4a63;
  --muted: #55647c;
  --accent: #1f6360;
  --accent-soft: #eef5f4;
  --accent-contrast: #ffffff;
  --border: #dde5ec;
  --focus: #0b57d0;
  --max-width: 1200px;
  --content-width: 720px;
  --radius: 12px;

  /* S-030 additions. */
  --brand: #1e3355;
  --tint: #edf3f7;
  --tint-deep: #e3edf1;
  --hairline: #e8eef3;
  --radius-lg: 22px;
  --radius-sm: 9px;
  --lift: 0 1px 2px rgba(20, 37, 63, 0.04), 0 10px 28px -14px rgba(20, 37, 63, 0.16);
  --lift-sm: 0 1px 2px rgba(20, 37, 63, 0.05);
  /* The editorial contrast in the reference, from system faces only. */
  --display: "Plus Jakarta Sans", "LL Heading Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ui: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 19px;
  line-height: 1.6;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

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

a:visited {
  color: var(--accent);
}

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

/* --- Masthead ---------------------------------------------------------
   The reference puts the brand on a white bar above a pale page, which is
   also what the supplied logo needs: it is artwork on its own near-white
   ground, so it only sits cleanly on a white surface. S-030 gives the bar
   more height and turns the nav into quiet pills so the brand leads. */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding: 0.85rem 1rem;
  position: relative;
  z-index: 3;
}

.site-nav {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.site-nav .brand {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--fg);
}

/* The supplied logo, shown at its own aspect ratio. Height is fixed so the
   bar keeps one rhythm; width follows. */
/* Site-wide sharpness (2026-10-12): fixed widths (182px; 143px up to 600px; home 198px / 166px), so each
   file in srcset is shown at exactly its own pixels; the height follows the 999x252 lockup. */
.brand-logo {
  display: block;
  width: 182px;
  height: auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav ul a {
  display: block;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--fg2);
  font-weight: 600;
  font-size: 0.95rem;
}

.site-nav ul a:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* --- Page frame ------------------------------------------------------- */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 5rem;
}

main > section {
  margin: 5.5rem 0 0;
}

main > section:first-child {
  margin-top: 0;
}

main > .hero {
  margin: 0;
}

.site-footer {
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.9rem;
  padding: 2.25rem 1rem 3rem;
}

.site-footer .footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.site-footer p {
  margin: 0.35rem 0;
}

/* --- Editorial typography ---------------------------------------------
   Display moments (page titles and section titles) take the heading face, Plus Jakarta Sans (founder,
   2026-10-11; it replaced the serif); every interface and body string stays on the sans stack. */

h1, h2, h3 {
  line-height: 1.15;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.015em;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
}

h1 {
  font-size: clamp(2.5rem, 4.8vw, 3.7rem);
  font-weight: 800;
  line-height: 1.04;
}

h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.1;
}

h3 {
  font-family: var(--display);
}

.hero h1 {
  margin: 0 0 1.25rem;
  max-width: 17ch;
}

.lede {
  font-size: 1.22rem;
  color: var(--fg2);
  max-width: var(--content-width);
}

.hero .lede {
  font-size: 1.28rem;
  max-width: 36ch;
  color: var(--fg2);
}

/* A small uppercase label above a display title, as the reference uses over
   its grouped panels. */
.eyebrow {
  margin: 0 0 0.55rem;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.proof-line {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
}

main p,
.faq dd {
  max-width: var(--content-width);
}

/* --- Hero -------------------------------------------------------------
   Asymmetric on desktop, one column on small screens. */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}

.hero-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.preview-large {
  grid-column: 1 / -1;
}

.preview-small-a,
.preview-small-b {
  margin-top: -2.25rem;
  position: relative;
  z-index: 1;
}

.preview-small-a {
  transform: rotate(-1.5deg);
  justify-self: start;
}

.preview-small-b {
  transform: rotate(1.5deg);
  justify-self: end;
}

.visual-provenance {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0.85rem 0 0;
}

.founder-line {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0.85rem 0 0;
}

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

  .hero-visual {
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
  }

  .preview-small-a,
  .preview-small-b {
    margin-top: 0;
    transform: none;
    justify-self: stretch;
  }
}

/* Product homepage hero (S-021): the approved transformation image. S-030
   seats the whole hero in one tinted, softly rounded band with two pale
   gradient forms behind it, so the page opens on a designed surface rather
   than on bare text. The band clips its own decoration, so it can never
   introduce horizontal scroll. The artwork is unaltered. */

.product-hero {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 3rem;
  margin: 0;
  padding: 3.25rem 3rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(168deg, var(--tint) 0%, #f4f8fa 46%, var(--surface) 100%);
}

/* Two soft organic forms, drawn with gradients only. Decoration sits under
   the content and is hidden from assistive technology by having no content
   of its own. */
.product-hero::before,
.product-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.product-hero::before {
  width: 30rem;
  height: 30rem;
  right: -9rem;
  top: -13rem;
  background: radial-gradient(circle at 50% 50%, rgba(31, 99, 96, 0.13), rgba(31, 99, 96, 0) 68%);
}

.product-hero::after {
  width: 24rem;
  height: 24rem;
  left: -10rem;
  bottom: -12rem;
  background: radial-gradient(circle at 50% 50%, rgba(77, 155, 253, 0.12), rgba(77, 155, 253, 0) 68%);
}

.product-hero > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.product-hero h1 {
  font-size: clamp(2.3rem, 4.1vw, 3.4rem);
  max-width: 16ch;
}

.product-hero-visual {
  min-width: 0;
}

.product-hero-visual picture {
  display: block;
}

/* The artwork's own background is a shade lighter than the page, so it sits
   on a lifted white panel rather than showing a bare edge. */
.product-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--lift);
}

@media (max-width: 860px) {
  .product-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 2.25rem 1.5rem 2rem;
  }
}

/* --- Buttons ---------------------------------------------------------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 1.9rem 0 0;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid var(--accent);
  box-shadow: var(--lift-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* A button with the hidden attribute stays hidden: the display above would
   otherwise override it (the failure-capture button showed with nothing to
   capture; Ticket AM). */
.btn[hidden] {
  display: none;
}

.btn:hover:not(.is-held) {
  background: #17504e;
  border-color: #17504e;
}

/* Ticket BA: a download that cannot proceed (a blocked lesson, items still to decide) looks disabled and is marked aria-disabled; it
   stays focusable so the reason beside it can be reached, and trying it explains instead of doing nothing. */
.btn.is-held,
.btn.is-held:hover,
.btn.secondary.is-held,
.btn.secondary.is-held:hover {
  background: var(--tint);
  color: var(--muted);
  border: 2px dashed var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}

.download-reason {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--tint);
  color: var(--fg);
  max-width: 46rem;
}

.download-reason[hidden] {
  display: none;
}

@media (forced-colors: active) {
  .btn.is-held,
  .btn.is-held:hover,
  .btn.secondary.is-held,
  .btn.secondary.is-held:hover {
    color: GrayText;
    border-color: GrayText;
  }
}

.btn:visited {
  color: var(--accent-contrast);
}

.btn.secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
}

.btn.secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.btn-disabled {
  display: inline-block;
  padding: 0.8rem 1.45rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  border: 2px dashed var(--border);
  font-weight: 600;
}

.btn-lg {
  padding: 0.95rem 2.1rem;
  font-size: 1.08rem;
}

/* --- Surfaces ---------------------------------------------------------
   The reference groups content into quiet white panels lifted a little off
   a pale ground. A thin border carries the edge; the shadow only separates
   the plane, so a page of panels still reads as calm. */

.showcase-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin: 2rem 0 0;
}

.card {
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--lift-sm);
}

.card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.card p {
  margin: 0 0 0.5rem;
  color: var(--fg2);
  font-size: 0.98rem;
}

.card p:last-child {
  margin-bottom: 0;
}

.card a {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Showcase provenance. Transparent about where the launch examples come
   from, stated once at page level rather than repeated per card, without
   letting the source collection compete with LessonLayer for attention.
   --muted sits at roughly 8:1 on the page background, so "secondary" never
   becomes "hard to read". */

.provenance-note {
  color: var(--muted);
  max-width: var(--content-width);
  margin: 0.75rem 0 0;
}

.founder-placeholder {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  color: var(--muted);
}

/* --- Sections ---------------------------------------------------------
   S-029's rules between sections read as documentation. S-030 replaces them
   with whitespace and a short accent stroke over the title, which is how the
   reference separates one grouped block from the next. */

.product-section {
  margin: 5.5rem 0 0;
  padding-top: 0;
  border-top: 0;
}

.product-section > h2,
.split h2 {
  position: relative;
  padding-top: 1.1rem;
  margin: 0 0 0.7rem;
  max-width: 22ch;
}

.product-section > h2::before,
.split h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.product-section > h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.3rem;
}

.product-section > p {
  color: var(--fg2);
}

/* Numbered pathway. The four steps are one route, not four equal cards: a
   soft tinted numeral leads each one and a hairline joins them across the
   row, which is the grouped-with-numbers pattern the reference uses. The
   number is generated, so the cards stay plain prose for a reader who gets
   no CSS. */
.step-list {
  counter-reset: step;
  gap: 1.1rem;
  margin-top: 2.5rem;
}

@media (min-width: 900px) {
  .step-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step-list .card {
  position: relative;
  padding-top: 3.9rem;
  background: var(--surface);
}

.step-list .card::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1.6rem;
  top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(31, 99, 96, 0.22);
  color: var(--accent);
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

/* The connecting rule between steps, drawn only where the row is a row. */
@media (min-width: 900px) {
  .step-list .card::after {
    content: "";
    position: absolute;
    left: calc(100% + 1px);
    top: 2.67rem;
    width: 1.1rem;
    height: 1px;
    background: var(--border);
  }

  .step-list .card:last-child::after {
    display: none;
  }
}

.step-list .card h3 {
  font-size: 1.05rem;
  line-height: 1.3;
}

/* --- Benefit cards ----------------------------------------------------
   One short line each, scannable in a single pass. The reference leads each
   one with a round tinted disc; ours is drawn in CSS as three stacked
   layers, which is the product's own idea rather than a borrowed icon. */

.feature-grid {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 2.25rem 0 0;
  padding: 0;
}

@media (min-width: 880px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feature {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--lift-sm);
  padding: 1.5rem 1.5rem 1.55rem;
}

.feature::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 1rem;
  border-radius: 50%;
  background-color: var(--accent-soft);
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(rgba(31, 99, 96, 0.6), rgba(31, 99, 96, 0.6)),
    linear-gradient(rgba(31, 99, 96, 0.34), rgba(31, 99, 96, 0.34));
  background-size: 1.35rem 3.5px, 0.95rem 3.5px, 0.6rem 3.5px;
  background-position: center 0.86rem, center 1.3rem, center 1.74rem;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(31, 99, 96, 0.14);
}

.feature h3 {
  margin: 0 0 0.35rem;
  font-size: 1.08rem;
}

.feature p {
  margin: 0;
  max-width: none;
  color: var(--fg2);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* --- Asymmetric split -------------------------------------------------
   A statement column beside a quieter panel, for sections that explain one
   distinction rather than list several things. */

.split {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: 2.25rem 2.25rem 2.4rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--lift-sm);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: 3.25rem;
    padding: 2.75rem 3rem 2.9rem;
  }
}

.split > * {
  min-width: 0;
}

.split h2 {
  margin-top: 0;
}

.split p {
  color: var(--fg2);
}

.split .cta-row {
  margin-bottom: 0;
}

/* The quiet side: a tinted inset panel, not a second column of prose. */
.split-aside {
  padding: 1.5rem 1.6rem 1.6rem;
  border-radius: var(--radius);
  background: var(--tint);
  border: 1px solid var(--hairline);
}

.split-aside p {
  margin: 0;
  color: var(--fg2);
  font-size: 0.98rem;
  max-width: none;
}

/* --- Trust signals ----------------------------------------------------- */

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}

.trust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.trust::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}

.trust-row + .hint {
  margin-top: 1.1rem;
}

/* --- Closing call to action -------------------------------------------
   A tinted band with the same organic decoration as the hero, so the page
   opens and closes on the same designed surface. */

.cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--tint-deep) 0%, var(--accent-soft) 55%, var(--surface) 100%);
  padding: 2.75rem 3rem 3rem;
  margin: 5.5rem 0 0;
}

.cta-band::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -7rem;
  bottom: -11rem;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(31, 99, 96, 0.14), rgba(31, 99, 96, 0) 68%);
  pointer-events: none;
}

.cta-band > * {
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  margin: 0 0 0.45rem;
  max-width: 20ch;
}

.cta-band p {
  margin: 0;
  color: var(--fg2);
  max-width: 46ch;
}

.cta-band .cta-row {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .cta-band {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: 2.5rem;
    align-items: center;
  }

  .cta-band h2,
  .cta-band p {
    grid-column: 1;
  }

  .cta-band .cta-row {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: flex-end;
    margin-top: 0;
  }
}

/* --- Pricing ----------------------------------------------------------- */

.pricing h2 {
  font-family: var(--ui);
  font-size: 1.05rem;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.15rem;
  letter-spacing: 0;
}

.price-figure {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 1rem;
}

.founder-placeholder.pricing,
/* --- Pilot page: three ways to start (hook round, founder, 2026-10-16) ----
   Side by side from 880px (the benefit cards' breakpoint), stacked below it. The
   recommended option carries the accent border and a small label above its name. */

.pilot-options {
  margin: 2.25rem 0 0;
}

.pilot-option-list {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
}

@media (min-width: 880px) {
  .pilot-option-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

.pilot-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--lift-sm);
  padding: 1.5rem 1.5rem 1.55rem;
}

.pilot-option-recommended {
  border: 2px solid var(--accent);
  box-shadow: var(--lift);
}

.pilot-option h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.pilot-option p {
  margin: 0;
  max-width: none;
  color: var(--fg2);
  font-size: 0.98rem;
  line-height: 1.5;
}

.pilot-option .pilot-option-price {
  font-family: var(--display);
  color: var(--accent);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.3;
}

/* The label sits on the card's top edge, so the three names stay level. */
.pilot-option .pilot-option-badge {
  position: absolute;
  top: 0;
  left: 1.4rem;
  transform: translateY(-50%);
  margin: 0;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* The buttons line up along the cards' bottom edge. */
.pilot-option .btn,
.pilot-option .btn-disabled {
  margin-top: auto;
}

.pilot-option p:last-of-type {
  margin-bottom: 1.25rem;
}

/* The recommended card's thicker border would push its contents 1px down. */
.pilot-option-recommended {
  padding: calc(1.5rem - 1px) calc(1.5rem - 1px) calc(1.55rem - 1px);
}

.pricing .founder-placeholder {
  margin-top: 0.5rem;
}

.price-line {
  font-family: var(--display);
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-size: 1.45rem;
  font-weight: 700;
}

.pilot-callout {
  background: var(--accent-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.9rem 2rem;
  margin: 1.75rem 0 0;
}

.pilot-callout h3 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
}

.pilot-callout .cta-row {
  margin-bottom: 0;
}

/* --- Lists -------------------------------------------------------------- */

.checklist {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
}

.checklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.55rem;
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Bounds of the offer. Same rhythm as .checklist, but plainly not a tick
   list: these are the things that do not exist. */
.limits {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
  max-width: var(--content-width);
}

.limits li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.55rem;
  color: var(--fg2);
}

.limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.8rem;
  height: 2px;
  background: var(--muted);
}

.pricing-secondary {
  margin: 0.75rem 0 0;
}

.pricing-secondary .btn {
  display: inline-block;
  background: transparent;
  color: var(--accent);
  border: none;
  border-radius: 0;
  padding: 0;
  font-weight: 600;
  text-decoration: underline;
  box-shadow: none;
}

.pricing-secondary .btn:hover {
  transform: none;
}

.pricing-secondary .btn-disabled {
  background: transparent;
  border: none;
  padding: 0;
}

/* --- FAQ ---------------------------------------------------------------
   Questions only until opened, so the page reads as a list of answerable
   things rather than a wall of text. */

.faq-list {
  max-width: 54rem;
  margin: 2.25rem 0 0;
  padding: 0.35rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--lift-sm);
}

/* New images (2026-10-10), illustration fix (founder): a compact intro row, the heading and
   lede on the left and the decorative illustration on the right, the questions straight below.
   280-300px on desktop, 220-260px on tablets (768px and up), hidden below 768px so the questions
   start near the top on phones (founder, 2026-10-10). Never shown wider than 300px,
   under half the 1176px source, so it stays crisp on 2x screens. */
.faq-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2rem;
  align-items: center;
}

.faq-intro .lede {
  margin-bottom: 0;
}

/* FAQ sharpness (2026-10-12): two fixed widths (300px, 240px up to 1024px) instead of a fluid clamp, so each
   file in srcset is shown at exactly its own pixels at 1, 1.25, 1.5, 2 and 3x; the outline is a ring outside the
   picture (box-shadow), so it never takes 2px off the image. */
.faq-image {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--hairline);
  background: var(--surface);
}

@media (max-width: 1024px) {
  .faq-image {
    width: 240px;
  }
}

/* Below 768px the picture is hidden (as on the Create page), so the questions start near the top. */
@media (max-width: 767px) {
  .faq-head {
    display: block;
  }

  .faq-art {
    display: none;
  }
}

.faq-item {
  border-bottom: 1px solid var(--hairline);
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding: 1rem 0;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.25rem 0.35rem 0 0;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

.faq-item[open] > summary {
  color: var(--accent);
}

.faq-item[open] > summary::after {
  margin-top: 0.25rem;
  transform: rotate(-135deg);
}

.faq-item p {
  margin: 0 0 1.15rem;
  color: var(--fg2);
  font-size: 1rem;
  max-width: 62ch;
}

.faq dt {
  font-weight: 700;
  margin-top: 1.5rem;
}

.faq dd {
  margin-left: 0;
  color: var(--muted);
}

/* --- Forms -------------------------------------------------------------
   The Create page's one primary action, and the optional step that must not
   compete with it. */

.material-fieldset {
  border: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.hint {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0;
  margin-bottom: 0.6rem;
}

/* A lecturer-only warning on a review card (an activity left out of the student lesson). */
.hint.warn {
  color: var(--fg);
  font-weight: 600;
  border-left: 3px solid var(--fg);
  padding-left: 0.6rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  margin-bottom: 1rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--fg);
}

.field {
  margin-bottom: 1.1rem;
}

.create-form {
  max-width: 760px;
}

/* The upload card is the page's centre of gravity: a lifted panel with a dashed drop edge that
   reads as a target. Marketing refresh (2026-10-11): a flat tint, no gradients. */
.upload-area {
  position: relative;
  border: 2px dashed rgba(31, 99, 96, 0.45);
  border-radius: var(--radius-lg);
  padding: 2.6rem 2rem 2.2rem;
  text-align: center;
  background: var(--accent-soft);
  box-shadow: var(--lift);
  margin-bottom: 1.5rem;
}

.upload-area label {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.005em;
}

/* Ticket Fix 1: the "Include speaker notes" check box sits inside the upload area but is a small option, not the
   area's heading: it takes the ordinary label look of the other fields. */
.upload-area label.check-row {
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  color: inherit;
  letter-spacing: normal;
}

.upload-area input[type="file"] {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  background: var(--surface);
}

/* The optional fields are plainly secondary to the upload card above them: quieter ground, smaller
   label, fewer rows. Marketing refresh (founder, 2026-10-11): learning outcomes and the key idea sit
   under "Fine-tune your lesson (optional)", closed by default; nothing in it is required. */
.optional-step,
.access-step {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem 0.6rem;
}

.optional-step label,
.access-step label {
  font-size: 0.98rem;
}

.optional-step textarea,
.access-step input {
  margin-bottom: 0.6rem;
  background: var(--surface);
}

/* The example title breaks after "LessonLayer" in the heading face and in its stand-in alike, so the
   page does not shift when the font arrives (typography round, 2026-10-11). */
.example-title {
  max-width: 15em;
}

/* Example page (marketing refresh, 2026-10-11): a large screenshot of the real lesson's graph page,
   the desktop view with the phone view beside it; phones show the phone view only. The desktop view
   is at most 853px wide, a third of its 2560px capture, so it stays sharp on 3x screens. */
.example-shot {
  margin: 2rem 0 1.5rem;
}

.example-shot-frames {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 1.5rem;
  align-items: end;
}

/* Sharpness round (2026-10-12): the 1px outline is a ring outside the picture (box-shadow), not a border inside it, so a
   screenshot file is shown at exactly its own pixel width and never resampled by 2px. */
.example-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--border), var(--lift);
  background: var(--surface);
}

.example-shot-desktop img {
  width: 853px;
  max-width: 100%;
}

.example-about {
  margin-top: 3.5rem;
}

/* No decorative rule above this heading (founder, 2026-10-11). */
.example-about > h2 {
  padding-top: 0;
}

.example-about > h2::before {
  display: none;
}

.example-shot-phone img {
  border-radius: 18px;
}

.example-shot figcaption {
  max-width: 62ch;
  margin-top: 1rem;
  color: var(--fg2);
  font-size: 0.95rem;
}

.example-cta {
  margin: 0 0 0.5rem;
}

.example-kinds {
  margin: 0 0 2.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .example-shot-frames {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .example-shot-desktop {
    display: none;
  }

  .example-shot-phone img {
    width: min(300px, 80vw);
  }
}

/* Marketing refresh (2026-10-11): One lesson | Whole module, above both creation forms. Side by
   side from 600px, stacked on phones; the current one is filled and marked with aria-current. */
.make-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 760px;
  margin: 1.75rem 0 0;
}

.make-choice-option,
.make-choice-option:visited {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg2);
  font-size: 0.92rem;
  line-height: 1.35;
  text-decoration: none;
}

.make-choice-option strong {
  color: var(--fg);
  font-size: 1.05rem;
}

.make-choice-option:hover {
  border-color: var(--accent);
}

.make-choice-option[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.make-choice-option[aria-current="page"] strong::after {
  content: " \2713";
  color: var(--accent);
}

@media (max-width: 599px) {
  .make-choice {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fine-tune {
  margin: 0 0 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

.fine-tune > summary,
.create-more > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--fg);
}

.fine-tune > summary {
  padding: 0.95rem 1.25rem;
}

.fine-tune[open] > summary {
  border-bottom: 1px solid var(--hairline);
}

.fine-tune .optional-step {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.fine-tune .optional-step + .optional-step {
  border-top: 1px solid var(--hairline);
}

.create-essentials {
  margin: 0 0 1.25rem;
  color: var(--fg2);
  font-size: 0.93rem;
}

.create-essentials > p {
  margin: 0 0 0.6rem;
}

.create-more {
  margin: 0.35rem 0;
}

.create-more > summary {
  font-size: 0.93rem;
}

.create-more > p {
  margin: 0.5rem 0 0.5rem 1.1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- 390px ------------------------------------------------------------
   A deliberate single column: the bands keep their rounded edge but lose
   most of their inset, the display type stays large enough to lead without
   overflowing, and every action is full width. */

@media (max-width: 600px) {
  body {
    font-size: 17px;
  }

  .brand-logo {
    width: 143px;
  }

  .site-header {
    padding: 0.7rem 0.6rem;
  }

  .site-nav {
    gap: 0.5rem;
  }

  .site-nav ul {
    gap: 0.1rem;
  }

  .site-nav ul a {
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
  }

  main {
    padding: 1.5rem 1.1rem 3.5rem;
  }

  main > section,
  .product-section,
  .cta-band {
    margin-top: 3.75rem;
  }

  h1 {
    font-size: clamp(2.1rem, 9vw, 2.6rem);
  }

  h2 {
    font-size: 1.75rem;
  }

  .hero h1,
  .product-hero h1 {
    max-width: none;
  }

  .hero .lede,
  .lede {
    font-size: 1.1rem;
    max-width: none;
  }

  .product-hero {
    padding: 1.9rem 1.25rem 1.75rem;
    border-radius: 18px;
  }

  .cta-band {
    padding: 1.75rem 1.35rem 1.9rem;
    border-radius: 18px;
  }

  .split {
    padding: 1.6rem 1.35rem 1.75rem;
    border-radius: 18px;
  }

  .split-aside {
    padding: 1.15rem 1.25rem 1.25rem;
  }

  .faq-list {
    padding: 0.25rem 1.15rem;
  }

  .upload-area {
    padding: 2.1rem 1.15rem;
    border-radius: 18px;
  }

  .upload-area label {
    font-size: 1.25rem;
  }

  .card,
  .feature {
    padding: 1.25rem 1.3rem;
  }

  .step-list .card {
    padding-top: 1.25rem;
    padding-left: 4.5rem;
  }

  .step-list .card::before {
    left: 1.3rem;
    top: 1.25rem;
  }

  .pilot-callout {
    padding: 1.4rem 1.35rem;
  }

  .cta-row .btn,
  .cta-row .btn-disabled {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* Ticket AX (founder decision 2): the plain-language guide around an approved activity, in review. */
.guide {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border-left: 4px solid var(--accent-mid, #7fb3ae);
  background: var(--accent-soft, #eef5f4);
  border-radius: 0 10px 10px 0;
}
.guide p { margin: 0; }
.guide .guide-title { font-weight: 700; margin-bottom: 0.15rem; }

/* Website streamline: the two starting paths, the three-step row and the example placeholder. */
.paths {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 2rem 0 0;
}

@media (min-width: 760px) {
  .paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.path h3 {
  font-size: 1.3rem;
}

.path .cta-row {
  margin: 1rem 0 0;
}

@media (min-width: 900px) {
  .step-list.steps-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.example-placeholder {
  padding: 2.25rem 1.6rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--tint);
  text-align: center;
}

.example-placeholder p {
  margin: 0;
  color: var(--fg2);
}

@media (min-width: 760px) {
  .feature-grid.feature-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.example-placeholder p {
  max-width: none;
  margin: 0 auto;
}

/* Concise home (founder, 2026-10-02): a meaningful icon on every card, an arrow-linked 1 -> 2 -> 3, and a separate data section. */
.ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 0.9rem;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(31, 99, 96, 0.14);
  color: var(--accent);
}

.ico svg {
  display: block;
}

.feature.with-icon::before {
  content: none;
}

@media (min-width: 560px) {
  .feature-grid.feature-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .feature-grid.feature-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The three steps read as a line: an arrow between cards (down on a phone, across on a wide screen). */
.step-list.steps-3 {
  gap: 1.9rem;
}

.step-list.steps-3 .card::after {
  content: "\2193";
  position: absolute;
  left: 50%;
  top: calc(100% + 0.25rem);
  width: auto;
  height: auto;
  background: none;
  transform: translateX(-50%);
  color: var(--accent);
  font-size: 1.35rem;
  line-height: 1.2;
}

.step-list.steps-3 .card:last-child::after {
  display: none;
}

@media (min-width: 900px) {
  .step-list.steps-3 {
    gap: 2.4rem;
  }

  .step-list.steps-3 .card::after {
    content: "\2192";
    left: calc(100% + 0.35rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
  }
}

.data-section {
  margin: 5.5rem 0 0;
}

.data-panel {
  display: grid;
  gap: 1.75rem;
  padding: 2.25rem 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, #17504d 0%, #1f6360 100%);
  color: #fff;
  box-shadow: var(--lift-sm);
}

@media (min-width: 900px) {
  .data-panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3rem;
    padding: 2.75rem 3rem;
    align-items: center;
  }
}

.data-panel h2 {
  margin: 0 0 0.7rem;
  color: #fff;
}

.data-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

.data-panel .ico {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  color: #fff;
}

.data-panel .ico-lg {
  width: 3.4rem;
  height: 3.4rem;
}

.data-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.data-facts li {
  position: relative;
  padding: 0.75rem 1rem 0.75rem 2.6rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.98rem;
}

.data-facts li::before {
  content: "\2713";
  position: absolute;
  left: 1rem;
  top: 0.7rem;
  font-weight: 700;
}

.path {
  display: flex;
  flex-direction: column;
}

.path .cta-row {
  margin-top: auto;
  padding-top: 1rem;
}

/* --- Home redesign (founder mockup, 2026-10-10) -----------------------
   The home page follows the founder's mockup: a warm white ground, a blue
   primary button, teal for the header and pilot buttons, and a blue, a teal
   and a peach step number. Contrast (WCAG): --home-text on --home-bg 11:1,
   --home-eyebrow on --home-why 8.0:1, white on --home-blue 6.3:1, white on
   --home-teal 7.2:1, --home-blue-deep on white 8.0:1. The two handwritten
   notes use a small OFL subset of Caveat served from /fonts/ (no web-font
   service), declared in /home.css, which only the home page loads (pages
   under stricter policies, such as 404s under /opi/, never ask for it). They
   are decoration: the image's alt text carries the meaning. */

:root {
  --home-bg: #fdfdfb;
  --home-ink: #0b1d42;
  --home-text: #26365a;
  --home-eyebrow: #1d4a8a;
  --home-blue: #0057d5;
  --home-blue-deep: #0a46b0;
  --home-blue-soft: #cfe1fd;
  --home-blue-line: #84a7db;
  --home-teal: #0b625c;
  --home-teal-deep: #084c47;
  --home-tick: #1f7470;
  --home-orange: #f27c16;
  --home-why: #eff7fd;
  --home-pilot: #ecf6f2;
  /* Home polish (2026-10-10): the mockup's page is 1280px of content, wider than the
     shared 1200px frame; the two bands reach up to 2.75rem past it on each side, always
     leaving a 1.25rem gutter. */
  --home-wide: 1280px;
  --home-bleed: clamp(-2.75rem, (var(--home-wide) - 100vw) / 2 + 1.25rem, 0px);
}

/* The shared header: menu on the right, then the "Get started" button. */
.site-nav ul {
  margin-left: auto;
}

.nav-cta,
.nav-cta:visited {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 1.4rem;
  border-radius: 999px;
  background: var(--home-teal);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--home-teal-deep);
}

/* The current page in the menu (founder, 2026-10-11): bold, in the brand ink, underlined in teal; on
   the trial page the pill carries a ring. aria-current="page" says the same to screen readers. */
.site-nav ul a[aria-current="page"],
.page-home .site-nav ul a[aria-current="page"] {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--home-teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.nav-cta[aria-current="page"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--home-teal);
}

/* The shared footer: logo, links, contact, and a closing line. */
.site-footer .footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
}

.footer-brand {
  display: block;
  flex: none;
}

.footer-logo {
  display: block;
  width: 135px;
  height: auto;
  /* The lockup is artwork on its own white ground; this drops that ground on tinted pages. */
  mix-blend-mode: multiply;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--fg2);
}

.footer-links a,
.footer-links a:visited {
  color: var(--fg2);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.site-footer .footer-note {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.footer-note::before {
  content: "";
  width: 2.5rem;
  border-top: 1px solid var(--border);
}

/* The home page's own ground: the header and footer sit on it. */
.page-home {
  background: var(--home-bg);
  color: var(--home-text);
}

.page-home .site-header {
  background: transparent;
  border-bottom: 0;
  padding-top: 1.1rem;
}

.page-home .site-nav {
  max-width: var(--home-wide);
}

.page-home .brand-logo {
  width: 198px;
}

.page-home .site-nav ul a {
  color: var(--home-ink);
  font-weight: 400;
  font-size: 0.96rem;
}

.page-home .nav-cta,
.page-home .nav-cta:visited {
  padding: 0.95rem 1.95rem;
  font-size: 1rem;
}

.page-home main {
  max-width: calc(var(--home-wide) + 2.5rem);
  padding-bottom: 1.25rem;
}

.page-home .site-footer {
  border-top: 0;
  padding-top: 0.75rem;
  padding-bottom: 1.6rem;
}

.page-home .site-footer .footer-inner {
  max-width: calc(var(--home-wide) + 2.5rem);
}

.page-home .footer-logo {
  width: 178px;
}

.page-home .footer-links {
  gap: 0.4rem 2.1rem;
  font-size: 0.93rem;
}

.page-home .site-footer .footer-note {
  font-size: 0.87rem;
}

.home-eyebrow {
  margin: 0 0 0.9rem;
  color: var(--home-eyebrow);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Hero */
main > .home-hero {
  margin: 0;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: 0 1rem;
  align-items: center;
  padding: 1.25rem 0 1rem;
}

.home-hero-copy {
  min-width: 0;
}

.home-hero h1 {
  margin: 0 0 1.35rem;
  color: var(--home-ink);
  /* Plus Jakarta Sans reads larger than the serif did at the same size (taller lower case): 3.75rem cap. */
  font-size: clamp(2.6rem, 4.5vw, 3.75rem);
  line-height: 1.07;
  letter-spacing: -0.008em;
}

/* One short, quiet line under the title (hook round, founder, 2026-10-16): not the old sub-line. */
.home-hero-note {
  margin: -0.35rem 0 0;
  max-width: none;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.45;
}

.home-hero-note + .home-actions {
  margin-top: 1.7rem;
}

.home-highlight {
  padding: 0 0.18em;
  border-radius: 0.16em;
  background: var(--home-blue-soft);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  margin: 2.1rem 0 2.3rem;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 16rem;
  min-height: 4.3rem;
  padding: 0.8rem 1.5rem;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}

.home-btn-arrow {
  flex: none;
}

.home-btn-primary,
.home-btn-primary:visited {
  background: var(--home-blue);
  border: 2px solid var(--home-blue);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(0, 87, 213, 0.7);
}

.home-btn-primary:hover {
  background: var(--home-blue-deep);
  border-color: var(--home-blue-deep);
}

.home-btn-secondary,
.home-btn-secondary:visited {
  background: #fff;
  border: 1.5px solid var(--home-blue-line);
  color: var(--home-blue-deep);
}

.home-btn-secondary:hover {
  border-color: var(--home-blue);
  background: #f3f8ff;
}

.home-btn-teal,
.home-btn-teal:visited {
  border-radius: 999px;
  background: var(--home-teal);
  border: 2px solid var(--home-teal);
  color: #fff;
}

.home-btn-teal:hover {
  background: var(--home-teal-deep);
  border-color: var(--home-teal-deep);
}

/* Marketing refresh (founder, 2026-10-11): while trials are on, the hero has ONE dominant action, the round
   "Try it free" button, and a quieter text link to the example. Founder's image (2026-10-12): the button is the
   founder's own picture (transparent background), inside a real link. The link is the disc itself (168px, 134.4px
   on phones, the same place and size as before): round, so the focus ring follows the disc. The picture is wider
   than the disc (its dashes and shadow), so it is placed to put its disc exactly over the link. Sharpness re-cut
   (2026-10-12): the picture has a fixed whole-pixel size per layout (204x216, 164x172 on phones), each with its own
   file at every screen density, so it is always drawn 1:1; its disc is centred 97px in and 109px down (77.6px and
   87.2px on phones). Sizes are in rem (204x216 = 12.75x13.5rem, 164x172 = 10.25x10.75rem, exact whole pixels), so
   a larger default font still scales the whole button with its link. */
.home-actions-orb {
  align-items: center;
  gap: 1rem 2.2rem;
}

.home-orb,
.home-orb:visited {
  position: relative;
  display: block;
  flex: none;
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.home-orb-image {
  position: absolute;
  left: -0.8125rem;
  top: -1.5625rem;
  display: block;
  width: 12.75rem;
  max-width: none;
  height: 13.5rem;
}

.home-orb:hover {
  transform: translateY(-2px);
}

.home-orb:focus-visible {
  outline: 3px solid var(--home-blue);
  outline-offset: 5px;
}

.home-quiet-link,
.home-quiet-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--home-blue-deep);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.25em;
}

.home-quiet-link:hover {
  text-decoration-color: currentColor;
}

/* Directly under the hero: the two creation routes, equal weight, one slim row. */
.home-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0.5rem 0 1.5rem;
}

.home-route,
.home-route:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--home-blue-line);
  border-radius: 14px;
  background: #fff;
  color: var(--home-text);
  font-size: 1rem;
  line-height: 1.45;
  text-decoration: none;
}

.home-route strong {
  color: var(--home-ink);
}

.home-route:hover {
  border-color: var(--home-blue);
  background: #f3f8ff;
}

.home-route-arrow {
  flex: none;
  color: var(--home-blue-deep);
  font-size: 1.25rem;
}

.home-trust {
  margin: 1.1rem 0 0;
  font-size: 0.93rem;
}

.home-trust a,
.home-trust a:visited {
  color: var(--home-blue-deep);
  font-weight: 600;
  text-underline-offset: 0.18em;
}

/* The founder line, small, under the hero (founder, 2026-10-10). */
.home-founder {
  grid-column: 1 / -1;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Hero artwork: the image unframed, the badges on its left edge, the notes around it.
   The master is 1448px wide, so the image is never drawn wider than 1448 device pixels:
   724px up to 2x, and less on denser screens (--hero-max). On wide screens the art reaches
   past the content edge into the gutter, as in the mockup. */
.home-art {
  --hero-max: 724px;
  --hero-w: 724px;
  --art-bleed: clamp(-2.6rem, (var(--home-wide) - 100vw) / 2 + 1.25rem, 0px);
  position: relative;
  justify-self: end;
  width: calc(100% - var(--art-bleed));
  min-width: 0;
  max-width: calc(var(--hero-max) + 2rem);
  margin-right: var(--art-bleed);
  padding: 2.4rem 0 3.6rem 2rem;
}

@media (min-resolution: 2.01dppx), (-webkit-min-device-pixel-ratio: 2.01) {
  .home-art { --hero-max: 579px; }
}

@media (min-resolution: 2.51dppx), (-webkit-min-device-pixel-ratio: 2.51) {
  .home-art { --hero-max: 482px; }
}

@media (min-resolution: 3.01dppx), (-webkit-min-device-pixel-ratio: 3.01) {
  .home-art { --hero-max: 362px; }
}

.home-art picture {
  display: block;
}

@media (max-width: 1400px) { .home-art { --hero-w: 608px; } }
@media (max-width: 1240px) { .home-art { --hero-w: 512px; } }
@media (max-width: 1080px) { .home-art { --hero-w: 724px; } }
@media (max-width: 799px) { .home-art { --hero-w: 696px; } }
@media (max-width: 767px) { .home-art { --hero-w: 520px; } }
@media (max-width: 599px) { .home-art { --hero-w: 352px; } }
@media (max-width: 429px) { .home-art { --hero-w: 312px; } }
@media (max-width: 389px) { .home-art { --hero-w: 280px; } }
@media (max-width: 359px) { .home-art { --hero-w: 240px; } }

/* Site-wide sharpness (2026-10-12): a fixed width per breakpoint (--hero-w, each with its own file at 1, 1.25,
   1.5, 2 and 3x), never wider than --hero-max on dense screens or than the column on the narrowest. */
.home-art .product-hero-image {
  display: block;
  width: min(var(--hero-w), var(--hero-max));
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-badges {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 25%;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding: 0.7rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lift);
}

/* Each badge is a small page with a folded corner and its file type. */
.home-badge {
  display: grid;
  place-items: end center;
  width: 2.6rem;
  height: 2.75rem;
  padding-bottom: 0.38rem;
  border-radius: 6px 13px 6px 6px;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  background-image: linear-gradient(225deg, rgba(255, 255, 255, 0.55) 0 0.55rem, transparent 0.55rem);
}

.home-badge-pptx { background-color: #c2410c; }
.home-badge-pdf { background-color: #b91c1c; }
.home-badge-docx { background-color: #1d4ed8; }

.home-badge-text {
  background: #c9ced6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M11 15h18M11 21h18M11 27h12' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.home-note {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--home-ink);
  font-family: "LL Notes", "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 0.95;
  text-align: center;
  white-space: nowrap;
}

.home-note-in {
  top: -0.6rem;
  left: 39%;
  transform: rotate(-8deg);
}

.home-note-out {
  right: 2.6rem;
  bottom: -0.5rem;
  transform: rotate(-8deg);
}

.home-spark {
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23f27c16' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 4l2 10M22 3l-4 11M34 12l-11 6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.home-spark-top {
  top: -1rem;
  right: 2.2rem;
  width: 3.2rem;
  height: 3.2rem;
}

.home-spark-bottom {
  right: -0.6rem;
  bottom: 4.4rem;
  transform: rotate(150deg);
}

/* The teal strokes beside "Your slides in...". */
.home-spark-note {
  top: 1.2rem;
  left: 56%;
  width: 3rem;
  height: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%230b4f45' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 8l8 12M26 4l-2 14'/%3E%3C/g%3E%3C/svg%3E");
}

/* How it works */
.home-steps {
  margin-top: 5.5rem;
}

.home-steps h2,
.home-why h2,
.home-pilot h2 {
  color: var(--home-ink);
  letter-spacing: -0.01em;
}

.home-steps h2 {
  margin: 0 0 1.7rem;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
}

.home-step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-step {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0 1.9rem;
}

.home-step-num {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.home-step-1 .home-step-num { background: #d1e3fe; color: #0a3fbf; }
.home-step-2 .home-step-num { background: #cef6ef; color: #00514f; }
.home-step-3 .home-step-num { background: #ffd2ae; color: var(--home-ink); }

.home-step-body {
  min-width: 0;
}

.home-step-icon {
  display: block;
  margin: 0 0 1.1rem;
  color: #0b4f45;
}

.home-step-3 .home-step-icon {
  color: var(--home-ink);
}

.home-step-icon svg {
  display: block;
  width: 54px;
  height: 54px;
  overflow: visible;
}

.home-step h3 {
  margin: 0 0 0.6rem;
  color: var(--home-ink);
  font-size: 1.42rem;
}

.home-step p {
  margin: 0;
  color: var(--home-text);
  font-size: 1.1rem;
  line-height: 1.55;
}

/* The arrow sits in the gap between two steps, level with the step titles. */
.home-step-arrow {
  position: absolute;
  top: 5.1rem;
  right: -3.5rem;
  color: var(--home-blue);
}

.home-step-arrow svg {
  display: block;
}

/* More than slide conversion. Copy trim (founder, 2026-10-12): more room around and between the points. */
.home-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 3rem 2rem;
  align-items: center;
  margin: 4.5rem var(--home-bleed) 0;
  padding: 3.6rem 2.75rem;
  border-radius: 24px;
  background: var(--home-why);
}

.home-why h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(2rem, 3.4vw, 2.76rem);
  line-height: 1.12;
}

.home-why-intro p:not(.home-eyebrow) {
  margin: 0;
  max-width: 27rem;
  color: var(--home-text);
  font-size: 1.27rem;
  line-height: 1.42;
}

.home-why-points {
  display: grid;
  gap: 1.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-why-points li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.home-why-icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: #fff;
  color: var(--home-ink);
  box-shadow: 0 1px 2px rgba(20, 37, 63, 0.06);
}

.home-why-points li:nth-child(n + 2) .home-why-icon {
  color: var(--home-tick);
}

.home-why-icon svg {
  width: 34px;
  height: 34px;
}

.home-why-points h3 {
  margin: 0 0 0.45rem;
  color: var(--home-ink);
  font-size: 1.11rem;
}

.home-why-points p {
  margin: 0;
  color: var(--home-text);
  font-size: 1.04rem;
  line-height: 1.6;
}

/* New images (2026-10-10): the founder's educator illustration, its ground recoloured to
   --home-why so it sits on the band without a frame; decorative (the points say it).
   Illustration fix (2026-10-10, founder): a small supporting picture anchored lower right,
   never taller than the text beside it: 260-306px on desktop (306px since the typography round), 220-240px on tablets (beside the
   points), 180-220px under the text below 768px, hidden below 360px. Never shown wider than
   340px, under half the 1214px source, so it stays crisp on 2x screens. */
.home-why-art {
  align-self: end;
  justify-self: end;
}

/* Site-wide sharpness (2026-10-12): fixed widths (306px; 280px to 1439px; 260px to 1339px; 220px to 1100px;
   180px to 439px), each with its own file at 1, 1.25, 1.5, 2 and 3x. */
.home-why-image {
  display: block;
  width: 306px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1439px) {
  .home-why-image {
    width: 280px;
  }
}

@media (max-width: 1339px) {
  .home-why-image {
    width: 260px;
  }
}

/* 1001-1100px: three columns are tight, so a smaller picture and gap keep the text from wrapping. */
@media (max-width: 1100px) {
  .home-why {
    column-gap: 1.5rem;
  }

  .home-why-image {
    width: 220px;
  }
}

@media (max-width: 1000px) {
  .home-why {
    column-gap: 2rem;
  }

  .home-why-image {
    width: 220px;
  }
}

@media (max-width: 359px) {
  .home-why-art {
    display: none;
  }
}

/* Pilot band */
.home-pilot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin: 1.5rem var(--home-bleed) 0;
  padding: 2.75rem 2.75rem 2.8rem;
  border-radius: 24px;
  background: var(--home-pilot);
}

.home-pilot h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.8rem, 2.8vw, 2.2rem);
  line-height: 1.15;
}

.home-pilot-copy p:not(.home-eyebrow) {
  margin: 0;
  max-width: 43rem;
  color: var(--home-text);
  font-size: 1.25rem;
  line-height: 1.42;
}

.home-pilot-action .home-btn {
  min-height: 3.5rem;
  padding: 0.8rem 2.45rem;
  font-size: 1.075rem;
}

.home-pilot-action {
  position: relative;
  justify-self: end;
  text-align: center;
}

.home-pilot-action::after {
  content: "";
  position: absolute;
  top: -1.9rem;
  right: -1.6rem;
  width: 2.4rem;
  height: 2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 4l-4 10' stroke='%230b625c'/%3E%3Cpath d='M22 16l12-5M22 25l11 3' stroke='%23f27c16'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.home-pilot-price {
  margin: 1.1rem 0 0;
  color: var(--home-text);
  font-size: 1.07rem;
}

@media (max-width: 1000px) {
  .home-why {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .home-why-intro {
    grid-column: 1 / -1;
  }
}

/* Below 768px the points need the width: the picture goes under them. */
@media (max-width: 767px) {
  .home-why {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A narrower copy column up to 1240px, then one column below 1080px, with the art centred
   under the copy at most 724px wide (sizes in tools/build_product_site.py follows these). */
@media (max-width: 1240px) {
  .home-hero {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .home-art {
    --art-bleed: 0px;
    justify-self: center;
  }

  .home-founder {
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .home-step-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .home-step {
    padding-right: 0;
  }

  .home-step-arrow {
    display: none;
  }

  .home-pilot {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .home-pilot-action {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 900px) {
  .site-nav ul {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .nav-cta {
    margin-left: auto;
  }

  .home-pilot-action::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .home-routes {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    margin: 0;
  }
}

@media (max-width: 600px) {
  .home-hero h1 {
    font-size: clamp(2.2rem, 10vw, 2.7rem);
  }

  .home-eyebrow {
    font-size: 0.76rem;
    letter-spacing: 0.18em;
  }

  .page-home .brand-logo {
    width: 166px;
  }

  .page-home .nav-cta,
  .page-home .nav-cta:visited {
    padding: 0.7rem 1.3rem;
  }

  .home-actions .home-btn {
    flex: 1 1 100%;
    min-width: 0;
    min-height: 3.6rem;
  }

  .home-orb {
    width: 8.4rem;
    height: 8.4rem;
  }

  .home-orb-image {
    left: -0.65rem;
    top: -1.25rem;
    width: 10.25rem;
    height: 10.75rem;
  }

  .home-actions-orb {
    gap: 0.75rem 1.6rem;
  }

  .home-art {
    padding: 2.4rem 0.25rem 2.8rem 2.4rem;
  }

  .home-badges {
    gap: 0.4rem;
    padding: 0.45rem 0.4rem;
    border-radius: 10px;
  }

  .home-badge {
    width: 1.9rem;
    height: 2rem;
    padding-bottom: 0.3rem;
    border-radius: 4px 9px 4px 4px;
    font-size: 0.48rem;
    background-image: linear-gradient(225deg, rgba(255, 255, 255, 0.55) 0 0.4rem, transparent 0.4rem);
  }

  .home-badge-text {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M11 15h18M11 21h18M11 27h12' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  .home-note {
    font-size: 1.35rem;
  }

  .home-note-in {
    top: -0.2rem;
    left: 34%;
  }

  .home-note-out {
    right: 1.6rem;
    bottom: -0.2rem;
  }

  .home-spark {
    width: 1.9rem;
    height: 1.9rem;
  }

  .home-spark-top {
    top: -0.4rem;
    right: 0.6rem;
  }

  .home-spark-bottom {
    right: -0.2rem;
    bottom: 3rem;
  }

  .home-spark-note {
    top: 0.6rem;
    left: 60%;
    width: 1.9rem;
    height: 1.9rem;
  }

  .home-steps h2 {
    margin-bottom: 1.4rem;
  }

  .home-step {
    grid-template-columns: 3.3rem minmax(0, 1fr);
    gap: 0 1.2rem;
  }

  .home-step-num {
    width: 3.3rem;
    height: 3.3rem;
    font-size: 1.4rem;
  }

  .home-step-icon svg {
    width: 44px;
    height: 44px;
  }

  .home-step h3 {
    font-size: 1.25rem;
  }

  .home-step p,
  .home-why-points p {
    font-size: 1rem;
  }

  .home-why-intro p:not(.home-eyebrow),
  .home-pilot-copy p:not(.home-eyebrow) {
    font-size: 1.08rem;
  }

  .home-why-points {
    gap: 1.6rem;
  }

  .home-why-points li {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 1.1rem;
  }

  .home-why-icon {
    width: 3.6rem;
    height: 3.6rem;
  }

  .home-why-icon svg {
    width: 30px;
    height: 30px;
  }

  .home-pilot-action .home-btn {
    padding: 0.8rem 1.2rem;
  }

  .home-steps,
  .home-why {
    margin-top: 3.25rem;
  }

  .home-why {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 2.4rem 1.35rem;
    border-radius: 18px;
  }

  .home-why-image {
    width: 220px;
  }

  .home-pilot {
    padding: 2.3rem 1.35rem;
    border-radius: 18px;
  }

  .home-pilot-action,
  .home-pilot-action .home-btn {
    width: 100%;
  }

}

@media (prefers-reduced-motion: reduce) {
  .home-orb {
    transition: none;
  }

  .home-orb:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .home-btn,
  .home-orb,
  .home-route,
  .nav-cta {
    border: 2px solid ButtonText;
  }
}

/* The contact address sits inside text, so it keeps its underline. */
.footer-links .footer-contact a {
  text-decoration: underline;
}

/* FAQ (2026-10-10): a short answer first, the technical detail behind "More detail". */
.faq-more {
  margin: 0.25rem 0 1.1rem;
}

.faq-more > summary {
  display: inline-block;
  padding: 0.2rem 0;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.faq-more[open] > summary {
  margin-bottom: 0.4rem;
}

.faq-more > p {
  margin: 0 0 0.75rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--tint-deep);
  color: var(--fg2);
  font-size: 0.95rem;
}

/* Simplify round (founder, 2026-10-11): the lesson file (and the founder's replay capture) under a small "Advanced". */
.review-advanced {
  margin-top: 0.9rem;
}

/* Simplify round: the privacy link now sits in the pilot band, under its one line. */
.home-pilot-copy p.home-trust {
  margin-top: 1.4rem;
  font-size: 0.93rem;
}

/* Simplify round: the trial page's two facts near the top, and the "Already have a code?" link. */
.trial-facts {
  margin: 0 0 0.75rem;
}

.trial-facts li + li {
  margin-top: 0.35rem;
}

.trial-have-code {
  margin: 1.5rem 0 0;
  font-weight: 600;
}

/* Showcase round (2026-10-11): the forgetting-curve lesson as a second, smaller example under the main one. */
.example-short-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Copy trim (founder, 2026-10-12): room between the short example's heading and its picture. */
.example-short > h2 {
  margin-bottom: 1.5rem;
}

.example-short-shot img {
  display: block;
  width: 360px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--border);
  background: var(--surface);
}

.example-short-body p {
  margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
  .example-short-body {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 2rem;
  }
}

/* Site-wide sharpness (2026-10-12): the narrowest phones get the 180px "More than slide conversion" picture. */
@media (max-width: 439px) {
  .home-why-image {
    width: 180px;
  }
}

/* Site-wide sharpness (2026-10-12): the Example screenshots at fixed widths per breakpoint (853px, 760px to
   1116px, 504px to 1023px; the short example 360px, 320px to 394px), each with its own native render at 1-3x. */
@media (max-width: 1116px) {
  .example-shot-desktop img {
    width: 760px;
  }
}

@media (max-width: 1023px) {
  .example-shot-desktop img {
    width: 504px;
  }
}

@media (max-width: 394px) {
  .example-short-shot img {
    width: 320px;
  }
}