/* Readkidz LP — marketing layout. Reuses --rk-* tokens from tokens.css (v3 quiet-paper skin,
   module-ext-v3-home.md). RTL-safe: logical properties only (margin-inline/padding-inline/
   inset-inline), never left/right — Arabic is a P1 locale (plan-v3-lp.md §3.4). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--rk-paper);
  color: var(--rk-ink);
  font-family: var(--rk-font-body);
  font-size: 16px;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; }

/* ---------- Header ---------- */
.lp-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: rgba(250, 248, 244, .92);
  backdrop-filter: blur(6px);
  border-block-end: 1px solid var(--rk-line);
}
.lp-header-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 14px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.lp-wordmark { display: inline-flex; align-items: center; margin-inline-end: auto; }
.lp-nav { display: flex; gap: 20px; font-size: 15px; color: var(--rk-ink-soft); }
.lp-nav a:hover { color: var(--rk-emerald); }
.lp-header-actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.lp-link-quiet { font-size: 15px; color: var(--rk-ink-soft); }
.lp-link-quiet:hover { color: var(--rk-ink); }

.lp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rk-emerald);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding-block: 10px;
  padding-inline: 20px;
  border-radius: var(--rk-radius-sm);
  transition: background-color .15s ease-out;
}
.lp-btn-primary:hover { background: var(--rk-emerald-hover); }

.lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rk-surface);
  color: var(--rk-ink);
  font-weight: 600;
  font-size: 15px;
  padding-block: 10px;
  padding-inline: 20px;
  border-radius: var(--rk-radius-sm);
  border: 1px solid var(--rk-line);
  transition: border-color .15s ease-out;
}
.lp-btn-ghost:hover { border-color: var(--rk-card-hover-border, #cfeadb); }

.lp-lang-strip {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  padding-inline: 24px;
  padding-block: 6px;
  font-size: 13px;
  color: var(--rk-ink-muted);
  border-block-end: 1px solid var(--rk-line);
}
.lp-lang-link[aria-current] { color: var(--rk-emerald); font-weight: 700; }
.lp-lang-link:hover { color: var(--rk-ink); }

/* ---------- Hero ---------- */
.lp-hero {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 72px 56px;
  text-align: center;
}
.lp-kicker {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--rk-emerald);
  letter-spacing: .02em;
  margin-block-end: 16px;
}
.lp-hero h1 {
  font-family: var(--rk-font-display);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.15;
  margin: 0 0 20px;
  max-width: 18ch;
  margin-inline: auto;
}
.lp-hero-sub {
  font-size: 18px;
  color: var(--rk-ink-soft);
  max-width: 56ch;
  margin-inline: auto;
  margin-block-end: 32px;
}
.lp-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lp-hero-cat {
  margin-block-start: 40px;
  width: 160px;
  height: auto; /* art is 756x500 — width-only sizing + the old square height attr squashed it */
  margin-inline: auto;
  filter: drop-shadow(0 18px 24px rgba(43, 42, 38, .14));
}

/* ---------- Triptych (priority order: book > animation > mv > comic) ---------- */
.lp-triptych {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-triptych-card {
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  padding: 28px;
  box-shadow: var(--rk-shadow-card);
}
.lp-triptych-card.lp-triptych-primary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--rk-emerald-soft, #e3f3ec);
  border-color: var(--rk-rail-active-bg, #e3f3ec);
}
.lp-triptych-card h3 { font-family: var(--rk-font-display); font-size: 20px; margin: 0 0 8px; }
.lp-triptych-card p { color: var(--rk-ink-soft); margin: 0; font-size: 15px; }
.lp-triptych-comic { opacity: .82; }

/* ---------- Character consistency ---------- */
.lp-character-mat {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 56px;
  text-align: center;
}
.lp-character-mat h2 { font-family: var(--rk-font-display); font-size: 30px; margin: 0 0 14px; }
.lp-character-mat .lp-lede { color: var(--rk-ink-soft); max-width: 56ch; margin-inline: auto; margin-block-end: 28px; }
.lp-scene-strip { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-block-end: 16px; }
.lp-scene-strip img { width: 140px; height: 140px; object-fit: contain; }
.lp-scene-caption { font-size: 14px; color: var(--rk-ink-muted); }

/* ---------- Monetize band ---------- */
.lp-monetize {
  background: var(--rk-paper-2);
  border-block: 1px solid var(--rk-line);
  padding-block: 56px;
}
.lp-monetize-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
.lp-monetize h2 { font-family: var(--rk-font-display); font-size: 28px; margin: 0 0 14px; }
.lp-monetize p { color: var(--rk-ink-soft); margin: 0 0 18px; }
.lp-monetize ul { padding-inline-start: 20px; color: var(--rk-ink-soft); display: grid; gap: 8px; }

/* ---------- Social proof ---------- */
.lp-social-proof {
  text-align: center;
  padding-block: 32px;
  font-size: 17px;
  font-weight: 600;
}

/* ---------- Trust ---------- */
.lp-trust {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 40px;
  text-align: center;
}
.lp-trust h2 { font-family: var(--rk-font-display); font-size: 24px; margin: 0 0 12px; }
.lp-trust p { color: var(--rk-ink-soft); margin: 0; }

/* ---------- FAQ (native <details> — always in DOM, crawlable open or closed) ---------- */
.lp-faq {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 48px;
}
.lp-faq h2 { font-family: var(--rk-font-display); font-size: 28px; margin: 0 0 24px; text-align: center; }
.lp-faq-item { border-block-end: 1px solid var(--rk-line); padding-block: 16px; }
.lp-faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after { content: "+"; color: var(--rk-emerald); font-size: 20px; flex: none; }
.lp-faq-item[open] summary::after { content: "\2212"; }
.lp-faq-item p { color: var(--rk-ink-soft); margin: 12px 0 0; }

/* ---------- Final CTA ---------- */
/* Final CTA — warm rounded card: big mascot left, left-aligned copy, gold geometric deco right
   (mirrors the official-site CTA design). Mascot art is NOT square (cat 248x376, hub scene 756x500):
   the <img> width attr sets display size, height:auto keeps the true ratio — never force a box. */
.lp-final-cta { padding-block: 40px 72px; }
.lp-final-cta-card {
  position: relative; display: flex; align-items: center; gap: 52px;
  background: var(--rk-paper-2); border-radius: 28px; padding: 56px 60px; overflow: hidden;
}
.lp-final-cta-art { flex: 0 0 auto; height: auto; max-width: 240px; filter: drop-shadow(0 18px 24px rgba(43, 42, 38, .12)); }
.lp-final-cta-body { flex: 1 1 auto; min-width: 0; }
.lp-final-cta-spark { display: block; width: 26px; height: 26px; color: var(--rk-ink); margin-block-end: 12px; }
.lp-final-cta h2 { font-family: var(--rk-font-display); font-size: 42px; line-height: 1.15; margin: 0 0 14px; max-width: 24ch; text-wrap: balance; }
.lp-final-cta-sub { font-size: 16px; line-height: 1.55; color: var(--rk-ink-soft); margin: 0 0 26px; max-width: 56ch; }
.lp-final-cta-body .lp-btn-primary { margin-block-start: 6px; }
.lp-final-cta-deco {
  position: absolute; inset-inline-end: 60px; inset-block-start: 50%;
  transform: translateY(-50%); width: 92px; height: 92px; color: var(--rk-shelf-top-b);
}
@media (max-width: 900px) {
  .lp-final-cta-deco { display: none; }
  .lp-final-cta-card { gap: 36px; padding: 44px 40px; }
  .lp-final-cta h2 { font-size: 34px; }
}
@media (max-width: 720px) {
  .lp-final-cta-card { flex-direction: column; gap: 20px; padding: 36px 24px; text-align: center; }
  .lp-final-cta-art { max-width: 160px; }
  .lp-final-cta-spark { margin-inline: auto; }
  .lp-final-cta h2 { font-size: 28px; margin-inline: auto; }
  .lp-final-cta-sub { margin-inline: auto; }
}

/* ---------- Final CTA · storybook hub variant ---------- */
/* The hub's closing card mirrors the pricing final-CTA standard (rk-pr-final-panel family,
   2026-08-04 unification), same treatment as the detail pages' closing card in
   storybook-detail.css. Scoped to .rk-sb-hub so pages still on the generic warm card above
   (entity pages, silos) are untouched. Accent pair copied from pricing.css --rk-pr-accent-*. */
.rk-sb-hub .lp-final-cta {
  --sb-final-accent: #087458;
  --sb-final-accent-hover: #065e47;
  padding-block: 48px 8px;
}

.rk-sb-hub .lp-final-cta-card {
  --sb-final-h: clamp(340px, 25vw, 368px);
  display: grid;
  inline-size: min(100%, 1300px);
  margin-inline: auto;
  grid-template-areas: "copy showcase";
  grid-template-columns: minmax(0, .52fr) minmax(360px, .48fr);
  align-items: center;
  gap: clamp(24px, 2.5vw, 40px);
  min-block-size: var(--sb-final-h);
  padding: clamp(26px, 2vw, 30px) clamp(42px, 4vw, 62px);
  border: 1px solid rgba(71, 138, 109, .28);
  border-radius: clamp(22px, 2vw, 28px);
  background:
    radial-gradient(circle at 86% 12%, rgba(95, 171, 138, .11), transparent 34%),
    #fbfaf5;
  box-shadow: 0 18px 48px -34px rgba(39, 62, 47, .42);
}

.rk-sb-hub .lp-final-cta-body {
  grid-area: copy;
  max-width: 560px;
  padding-inline-start: clamp(14px, 1.6vw, 24px);
}

.rk-sb-hub .lp-final-cta h2 {
  margin: 0;
  font-size: clamp(38px, 3.1vw, 48px);
  line-height: 1.06;
  letter-spacing: -.03em;
}

.rk-sb-hub .lp-final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-block-start: 20px;
}

.rk-sb-hub .lp-final-cta .lp-btn-primary {
  min-block-size: 52px;
  gap: 12px;
  margin-block-start: 0;
  padding: 13px 22px 13px 26px;
  border: 1px solid var(--sb-final-accent);
  border-radius: 14px;
  background: var(--sb-final-accent);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  box-shadow: 0 12px 28px rgba(45, 105, 79, .2);
}

.rk-sb-hub .lp-final-cta .lp-btn-primary:hover {
  border-color: var(--sb-final-accent-hover);
  background: var(--sb-final-accent-hover);
}

.rk-sb-hub .lp-final-cta .lp-btn-primary img {
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  filter: brightness(0) invert(1);
}

[dir="rtl"] .rk-sb-hub .lp-final-cta .lp-btn-primary img {
  transform: scaleX(-1);
}

.rk-sb-hub .lp-final-cta-showcase {
  position: relative;
  grid-area: showcase;
  align-self: stretch;
  min-inline-size: 0;
  min-block-size: 280px;
}

.rk-sb-hub .lp-final-cta-art {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: calc(var(--sb-final-h) - 34px);
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 20px rgba(65, 52, 35, .14));
}

[dir="rtl"] .rk-sb-hub .lp-final-cta-art {
  transform: translate(50%, -50%);
}

@media (max-width: 900px) {
  .rk-sb-hub .lp-final-cta-card {
    --sb-final-h: auto;
    grid-template-areas:
      "showcase"
      "copy";
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 30px 32px 34px;
    text-align: center;
  }

  .rk-sb-hub .lp-final-cta-body {
    max-width: 620px;
    margin-inline: auto;
    padding-inline-start: 0;
  }

  .rk-sb-hub .lp-final-cta h2 {
    margin-inline: auto;
  }

  .rk-sb-hub .lp-final-cta-actions {
    justify-content: center;
  }

  .rk-sb-hub .lp-final-cta-showcase {
    width: min(100%, 460px);
    min-block-size: 218px;
    margin-inline: auto;
  }

  .rk-sb-hub .lp-final-cta-art {
    position: static;
    inline-size: min(100%, 360px);
    max-inline-size: 100%;
    block-size: auto;
    margin-inline: auto;
    transform: none;
  }
}

@media (max-width: 720px) {
  .rk-sb-hub .lp-final-cta-card {
    min-block-size: 0;
    gap: 0;
    border-radius: 22px;
    padding: 22px 22px 26px;
  }

  .rk-sb-hub .lp-final-cta h2 {
    font-size: clamp(32px, 8.7vw, 38px);
  }

  .rk-sb-hub .lp-final-cta-actions {
    margin-block-start: 20px;
  }

  .rk-sb-hub .lp-final-cta .lp-btn-primary {
    min-block-size: 50px;
  }

  .rk-sb-hub .lp-final-cta-showcase {
    min-block-size: 186px;
  }

  .rk-sb-hub .lp-final-cta-art {
    inline-size: min(100%, 296px);
  }
}

/* ---------- Footer ---------- */
.lp-footer { border-block-start: 1px solid var(--rk-line); padding-block: 32px; }
.lp-footer-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.lp-wordmark-footer { opacity: .8; }
.lp-footer-tagline { color: var(--rk-ink-muted); font-size: 14px; margin: 0; margin-inline-end: auto; }
.lp-footer-links { display: flex; gap: 16px; font-size: 14px; color: var(--rk-ink-soft); }
.lp-footer-links a:hover { color: var(--rk-emerald); }

/* ---------- Steps (how-it-works) ---------- */
.lp-steps { max-width: 860px; margin-inline: auto; padding-inline: 24px; padding-block: 48px; list-style: none; display: grid; gap: 28px; }
.lp-step { display: flex; gap: 18px; align-items: flex-start; }
.lp-step-num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rk-emerald-soft, #e3f3ec);
  color: var(--rk-emerald);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-step h3 { margin: 0 0 4px; font-size: 18px; }
.lp-step p { margin: 0; color: var(--rk-ink-soft); }

/* ---------- Feature silo (feature-picture-book etc.) ---------- */
.lp-section-title { font-family: var(--rk-font-display); font-size: 28px; text-align: center; margin: 8px 0 0; }
.lp-feature-grid {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.lp-feature-card {
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  padding: 24px;
  box-shadow: var(--rk-shadow-card);
}
.lp-feature-card h3 { font-family: var(--rk-font-display); font-size: 18px; margin: 0 0 8px; }
.lp-feature-card p { color: var(--rk-ink-soft); margin: 0; font-size: 15px; }
.lp-crosslinks {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 40px;
  text-align: center;
}
.lp-crosslinks h2 { font-family: var(--rk-font-display); font-size: 24px; margin: 0 0 10px; }
.lp-crosslinks p { color: var(--rk-ink-soft); margin: 0 0 20px; }
.lp-crosslink-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-crosslink {
  display: inline-flex;
  align-items: center;
  padding-block: 8px;
  padding-inline: 16px;
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-sm);
  background: var(--rk-surface);
  font-size: 15px;
  color: var(--rk-ink);
  transition: border-color .15s ease-out, color .15s ease-out;
}
.lp-crosslink:hover { border-color: var(--rk-emerald); color: var(--rk-emerald); }

/* ---------- Entity pages (about / how-it-works) ---------- */
.lp-entity-hero { max-width: 780px; margin-inline: auto; padding-inline: 24px; padding-block: 64px 32px; text-align: center; }
.lp-entity-hero h1 { font-family: var(--rk-font-display); font-size: 36px; margin: 0 0 16px; }
.lp-entity-hero p { color: var(--rk-ink-soft); font-size: 17px; }
.lp-entity-section { max-width: 780px; margin-inline: auto; padding-inline: 24px; padding-block: 32px; }
.lp-entity-section h2 { font-family: var(--rk-font-display); font-size: 22px; margin: 0 0 10px; }
.lp-entity-section p { color: var(--rk-ink-soft); margin: 0; }

/* ---------- Motion / a11y ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Responsive (hold at 768px, degrade to 390px per skill layout guidance) ---------- */
@media (max-width: 900px) {
  .lp-triptych { grid-template-columns: 1fr 1fr; }
  .lp-monetize-inner { grid-template-columns: 1fr; }
  /* Nav wraps to its own row rather than disappearing — no JS hamburger in P1, so every link
     must stay reachable without one. margin-inline-end:auto on the wordmark still pins actions
     to the far end on the first row; nav becomes a full-width, centered second row. */
  .lp-header-inner { flex-wrap: wrap; row-gap: 8px; }
  .lp-nav { flex-basis: 100%; justify-content: center; order: 3; gap: 16px; }
}
@media (max-width: 560px) {
  .lp-triptych { grid-template-columns: 1fr; }
  .lp-triptych-card.lp-triptych-primary { flex-direction: column; text-align: center; }
  .lp-feature-grid { grid-template-columns: 1fr; }
  .lp-header-inner { gap: 12px; }
  .lp-nav { gap: 12px; font-size: 14px; }
}

/* ---------- Storybook pSEO pages (rk-sb-*, namespaced) ---------- */
/* Detail keeps the 860px reading measure on purpose (long-form book text, same rationale as the
   legal pages). The HUB is a browsing wall, not reading — its column mirrors
   .landing2026HeaderInner verbatim so the page aligns with the logo/CTA at every width
   (2026-07-29, same fix as /tutorials /safe /contact). */
.rk-sb-detail { max-width: 860px; margin-inline: auto; padding-inline: 24px; padding-block: 32px 64px; }
.rk-sb-hub { width: min(calc(100% - 2 * clamp(24px, 4vw, 72px)), 1560px); margin-inline: auto; padding-block: 32px 64px; }
.rk-sb-hub .rk-sb-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
/* 170px min fits only one column inside the 327px phone gutter — keep the two-up cover wall there. */
@media (max-width: 600px) {
  .rk-sb-hub .rk-sb-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
.rk-sb-breadcrumb { font-size: 14px; color: var(--rk-ink-soft); margin-bottom: 24px; display: flex; gap: 8px; align-items: center; }
.rk-sb-breadcrumb a { color: var(--rk-ink-soft); }
.rk-sb-breadcrumb a:hover { color: var(--rk-emerald); }

.rk-sb-hero { display: flex; gap: 32px; align-items: flex-start; margin-bottom: 40px; }
.rk-sb-cover-wrap { flex: 0 0 auto; }
.rk-sb-cover-cloth,
.rk-sb-cover-img {
  width: 220px; height: 293px; border-radius: 6px 10px 10px 6px;
  box-shadow: var(--rk-shadow-object); object-fit: cover; display: block;
}
.rk-sb-cover-cloth {
  background: var(--sb-cloth, #6e6a61);
  border-inline-start: 8px solid rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center;
}
.rk-sb-cover-title { color: #fff; font-family: var(--rk-font-display); font-size: 22px; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.rk-sb-hero-text { flex: 1; min-width: 0; }
.rk-sb-hero-text h1 { font-family: var(--rk-font-display); font-size: 34px; line-height: 1.15; margin: 8px 0; color: var(--rk-ink); }
.rk-sb-subtitle { font-size: 18px; color: var(--rk-ink-soft); margin: 0 0 16px; }
.rk-sb-answer { font-size: 16px; line-height: 1.55; color: var(--rk-ink); margin: 0 0 20px; }

.rk-sb-story { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 48px; }
.rk-sb-page { padding: 18px 0; border-bottom: 1px solid var(--rk-line); }
.rk-sb-page:last-child { border-bottom: 0; }
.rk-sb-page-img { width: 100%; max-width: 520px; border-radius: var(--rk-radius); display: block; margin: 0 auto 14px; }
.rk-sb-page-text { font-size: 19px; line-height: 1.6; color: var(--rk-ink); margin: 0; }
.rk-sb-page-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-inline-end: 12px; border-radius: 50%;
  background: var(--rk-paper-2); color: var(--rk-ink-muted); font-size: 13px; font-weight: 700;
  vertical-align: middle;
}
.rk-sb-guide { background: var(--rk-surface); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); box-shadow: var(--rk-shadow-card); padding: 28px; margin-bottom: 40px; }
.rk-sb-guide h2 { font-family: var(--rk-font-display); font-size: 22px; margin: 0 0 12px; }
.rk-sb-guide h3 { font-size: 16px; margin: 20px 0 8px; color: var(--rk-ink); }
.rk-sb-guide p { color: var(--rk-ink); line-height: 1.6; margin: 0; }
.rk-sb-discussion { margin: 0; padding-inline-start: 20px; color: var(--rk-ink); line-height: 1.7; }

.rk-sb-related { margin: 40px 0; }
.rk-sb-related h2 { font-family: var(--rk-font-display); font-size: 22px; margin: 0 0 16px; }
.rk-sb-related-row { display: flex; gap: 18px; flex-wrap: wrap; }
.rk-sb-related-card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 120px; text-align: center; }
.rk-sb-related-cloth { width: 88px; height: 117px; border-radius: 4px 7px 7px 4px; background: var(--sb-cloth, #6e6a61); border-inline-start: 5px solid rgba(0,0,0,.22); box-shadow: var(--rk-shadow-card); }
.rk-sb-related-title { font-size: 14px; color: var(--rk-ink); line-height: 1.3; }
.rk-sb-related-card:hover .rk-sb-related-title { color: var(--rk-emerald); }

/* Hub */
.rk-sb-hub-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.rk-sb-hub-head h1 { font-family: var(--rk-font-display); font-size: 40px; margin: 8px 0; }
.rk-sb-hub-intro { font-size: 17px; color: var(--rk-ink-soft); line-height: 1.55; }
.rk-sb-section { margin-bottom: 40px; }
.rk-sb-section h2 { font-family: var(--rk-font-display); font-size: 24px; margin: 0 0 18px; }
.rk-sb-section-intro {
  max-inline-size: 74ch; margin-block: -8px 24px; margin-inline: 0;
  color: var(--rk-ink-soft); font-size: clamp(14.5px, 1.2vw, 16px); line-height: 1.65;
  text-wrap: pretty;
}
/* (The hub's former bespoke closing-CTA block lived here; it was replaced by the pricing-standard
   variant above — see "Final CTA · storybook hub variant" — during the 2026-08-04 unification.) */
.rk-sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px; }
.rk-sb-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rk-sb-card-cloth {
  width: 120px; height: 160px; border-radius: 5px 9px 9px 5px; background: var(--sb-cloth, #6e6a61);
  border-inline-start: 7px solid rgba(0,0,0,.22); box-shadow: var(--rk-shadow-object);
  display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center;
  transition: transform .15s;
}
.rk-sb-card:hover .rk-sb-card-cloth { transform: translateY(-4px); }
.rk-sb-card-cloth-title { color: #fff; font-family: var(--rk-font-display); font-size: 15px; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.rk-sb-card-meta { display: flex; flex-direction: column; gap: 2px; }
.rk-sb-card-meta strong { font-size: 15px; color: var(--rk-ink); font-weight: 700; }
.rk-sb-card-meta em { font-size: 13px; color: var(--rk-ink-muted); font-style: normal; }
.rk-sb-section-preview { border-top: 1px dashed var(--rk-line); padding-top: 28px; margin-top: 8px; }
.rk-sb-section-preview h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rk-sb-preview-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rk-ink-muted); background: var(--rk-paper-2); border: 1px solid var(--rk-line); border-radius: 999px; padding: 3px 10px; }

/* 3D book object (hub + related cards) — ported from the v3 home bookshelf (renderShelfObject) so a
   themed book on the marketing hub reads like the same object on the post-login shelf. A real
   cover_image is rendered as a lazy-loaded CDN thumbnail; a coverless book falls back to a
   spine-color cloth cover with the title (.is-blank). */
.rk-sb-bo-wrap { display: inline-block; perspective: 900px; margin-bottom: 4px; }
.rk-sb-bo {
  position: relative; display: block;
  width: var(--bo-w, 120px); height: var(--bo-h, 160px); --bo-depth: 18px;
  transform-style: preserve-3d; transform: rotateY(28deg) rotateX(1deg);
  transform-origin: 50% 100%; transition: transform 420ms cubic-bezier(.2,.9,.3,1.2);
}
.rk-sb-card:hover .rk-sb-bo,
.rk-sb-related-card:hover .rk-sb-bo { transform: rotateY(6deg) rotateX(0) translateY(-8px); }
.rk-sb-bo-face, .rk-sb-bo-back, .rk-sb-bo-spine, .rk-sb-bo-pages { position: absolute; display: block; }
.rk-sb-bo-face {
  inset: 0; background-color: var(--sb-cloth, #6e6a61);
  border-radius: 2px 6px 6px 2px; transform: translateZ(var(--bo-depth));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); overflow: hidden;
}
.rk-sb-bo-face > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-sb-bo-face::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(112deg, rgba(255,255,255,.2), transparent 34%), linear-gradient(0deg, rgba(0,0,0,.12), transparent 19%);
}
.rk-sb-bo-face::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 7px; width: 5px;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.16), rgba(0,0,0,.06));
}
.rk-sb-bo-back { inset: 0; background: var(--sb-cloth, #6e6a61); border-radius: 6px 2px 2px 6px; }
.rk-sb-bo-spine {
  inset-block-start: 0; inset-inline-start: 0; width: var(--bo-depth); height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sb-cloth, #6e6a61) 82%, black), var(--sb-cloth, #6e6a61) 45%, color-mix(in srgb, var(--sb-cloth, #6e6a61) 88%, black));
  transform-origin: 0 50%; transform: rotateY(-90deg); display: flex; align-items: center; justify-content: center;
}
.rk-sb-bo-spine span { writing-mode: vertical-rl; max-height: 88%; overflow: hidden; color: rgba(255,250,240,.92); font-size: .58rem; font-weight: 900; letter-spacing: .03em; white-space: nowrap; }
.rk-sb-bo-pages {
  inset-block-start: 1.5%; inset-inline-end: 0; width: var(--bo-depth); height: 97%; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #d9d2c4 0 2px, #efe9dc 2px 3px); transform-origin: 100% 50%; transform: rotateY(90deg);
}
.rk-sb-bo-face.is-blank { display: grid; place-items: center; padding: 14px; background: var(--sb-cloth, #6e6a61); text-align: center; }
.rk-sb-bo-blank-title { position: relative; z-index: 1; color: rgba(255,250,240,.94); font-family: var(--rk-font-display); font-size: .92rem; font-weight: 900; line-height: 1.28; }

/* ---------- "Make X" keyword landing pages (rk-mk-*, the traffic/keyword layer) ----------
   Column mirrors .landing2026HeaderInner verbatim (standing rule 2026-07-30: every LP page follows
   the home visual system) — the old 900px cap read as a different site under the 1560 header.
   Reading-width content (hero copy, FAQ) is re-capped INSIDE the column, feature-page style;
   galleries and step cards use the full column like the home shelf.

   RHYTHM AND TYPE ARE REFERENCED, NOT COPIED (Kim 2026-08-05, "the homepage is the visual standard";
   same discipline the pricing page learned). These pages DO load home-v3.css — an earlier comment
   here claimed otherwise — so the home primitives are live and must be used by name:
     · `--sec-pad` / `--sec-pad-tight`  section rhythm
     · the bare `h2` ladder — home-v3.css declares h2 twice and the EFFECTIVE one is
       `clamp(32px, 3.2vw, 46px)` (measured in the browser, 40.96px at 1280); we deliberately do not
       re-declare it, so the home stays the single source of the ladder
     · the home hero's display ramp for h1 and its `.sub` measure for the answer paragraph
   The one primitive this family does NOT take verbatim is the kicker — see the note on it below for
   the measured reason.
   Secondary pages take the BOTTOM-ONLY variant of --sec-pad: copying it to both sides doubles every
   gutter (two adjacent sections would put 2x--sec-pad between them, which reads as a broken page on
   a page whose sections are narrower than the home's full-bleed ones). */
.rk-mk {
  width: min(calc(100% - 2 * clamp(24px, 4vw, 72px)), 1560px);
  margin-inline: auto;
  padding-block: clamp(20px, 2vw, 34px) var(--sec-pad, 88px);
}
/* Home's .center-head measure, so the hero column tracks the viewport instead of a fixed 760px. */
.rk-mk-hero {
  text-align: center;
  max-width: min(100%, clamp(600px, 46vw, 820px));
  margin: 0 auto var(--sec-pad, 88px);
}
/* One h1 ramp for the whole family: the split (feature-visual) variant already carries the
   home-derived ramp, and the centered variant sat a full step below it — which is what made these
   pages read as a lesser template than the homepage. */
.rk-mk-hero h1 {
  font-family: var(--rk-font-display);
  font-size: clamp(40px, 3.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -.5px;
  text-wrap: balance;
  margin: 10px 0 0;
  color: var(--rk-ink);
}
/* Home's .sub: 17.5px with a 56ch measure, so the answer paragraph breaks like the homepage's. */
.rk-mk-answer {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--rk-ink-soft);
  max-width: 56ch;
  margin: 14px auto 26px;
}
/* Kicker: emerald tiny label above a big display h1, same role as the home's `.kicker`.
   TWO DELIBERATE DEPARTURES, both measured on the real content (2026-08-05):
   · No uppercase / wide tracking. The home's kickers are short labels; this family's are descriptive
     lines with middot separators — median 62 characters, 30 of 45 over 45. Set in caps at 1.6px
     tracking they run to two shouty lines and stop being scannable, which is the opposite of what a
     kicker is for.
   · No 26x2 leading rule in the CENTERED variant. The rule is a lead-in mark and only reads as one
     against left-aligned text (where the split variant keeps it). Centered above a wrapped label it
     hangs off to the left and reads as a stray line.
   The measure cap keeps it to one or two tidy centered lines whatever the page writes. */
.rk-mk-hero .lp-kicker {
  display: block;
  max-width: 60ch;
  margin: 0 auto;
  font: 700 13.5px/1.5 var(--rk-font-body, inherit);
  letter-spacing: .04em;
  color: var(--rk-emerald);
}
.rk-mk-hero-actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.rk-mk-readbook { font-size: 15px; color: var(--rk-emerald); font-weight: 600; }
/* Optional Make hero composer: a scoped copy of the established one-sentence LP control, kept scoped
   so the Make hero can size it independently of the home hero. Only pages that opt in render it. */
.rk-mk-hero-composer { width: min(100%, 680px); margin-inline: auto; text-align: start; }
.rk-mk-hero-composer .composer {
  width: 100%; min-height: 66px; margin: 0; padding: 9px 9px 9px 20px;
  display: flex; align-items: center; gap: 12px;
  background: var(--rk-surface); border: 1px solid var(--rk-line); border-radius: 18px;
  box-shadow: var(--rk-shadow-card); transition: border-color .2s ease, box-shadow .2s ease;
}
.rk-mk-hero-composer .composer:focus-within { border-color: var(--rk-emerald); box-shadow: 0 0 0 4px var(--rk-focus-ring); }
.rk-mk-hero-composer .composer input {
  flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 4px; color: var(--rk-ink);
  background: transparent; font: 600 16px/1.4 var(--rk-font-body);
}
.rk-mk-hero-composer .composer input::placeholder { color: var(--rk-ink-muted); font-weight: 400; }
.rk-mk-hero-composer .composer button {
  flex: 0 0 auto; min-height: 48px; padding: 12px 20px; border: 0; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; background: var(--rk-emerald); cursor: pointer; white-space: nowrap;
  font: 700 15px/1.2 var(--rk-font-body); transition: background .18s ease, transform .18s ease;
}
.rk-mk-hero-composer .composer button:hover { background: var(--rk-emerald-hover); transform: translateY(-1px); }
@keyframes rkMakeCtaPulse { 0% { box-shadow: 0 0 0 0 rgba(15,164,126,.45); } 100% { box-shadow: 0 0 0 14px rgba(15,164,126,0); } }
.rk-mk-hero-composer .composer button.pulse-once { animation: rkMakeCtaPulse .8s ease-out 2; }
.rk-mk-hero-try { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.rk-mk-hero-try > span { color: var(--rk-ink-muted); font-size: 13px; }
.rk-mk-hero-composer .chips { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; max-width: 100%; }
.rk-mk-hero-composer .idea-chip {
  min-height: 36px; margin: 0; padding: 7px 12px; border: 1px solid var(--rk-line);
  border-radius: 999px; color: var(--rk-ink-soft); background: var(--rk-surface); cursor: pointer;
  font: 600 13px/1.25 var(--rk-font-body); transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.rk-mk-hero-composer .idea-chip:hover,
.rk-mk-hero-composer .idea-chip.is-selected { border-color: var(--rk-emerald); color: var(--rk-emerald); background: var(--rk-emerald-soft); transform: translateY(-2px); }
.rk-mk-hero-composer .idea-chip:focus-visible { outline: 3px solid var(--rk-focus-ring); outline-offset: 2px; }
/* Breathing band per the home #read/#shelf recipe: the steps run is the one stretch of the page
   with no imagery, so it carries the paper-2 band that gives the page its mid-scroll rhythm.
   (2026-08-03 visual pass — copy and markup untouched, skin only.) */
.rk-mk-how {
  /* Bottom-only --sec-pad (see the rhythm note at the top of this section). The band keeps its own
     inner breathing room, exactly as the home's #read band does. */
  margin: 0 0 var(--sec-pad, 88px);
  background: var(--rk-paper-2);
  border-radius: 26px;
  padding: clamp(30px, 3.4vh, 52px) clamp(24px, 3vw, 56px);
}
/* Section headings intentionally declare NO font-size: the ladder comes from home-v3's bare
   `h2 { clamp(28px, 3.2vw, 40px) }`. Re-declaring it here is how these pages drifted a step below the
   homepage in the first place — if the home ladder changes, these must follow it for free. */
.rk-mk-how h2, .rk-mk-gallery-sec h2 { font-family: var(--rk-font-display); text-align: center; margin: 0 0 28px; }
.rk-mk-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; max-width: 1180px; }
.rk-mk-faq { max-width: 720px; margin: 0 auto var(--sec-pad, 88px); padding-block: 0; }
.rk-mk-step {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--rk-line); border-radius: 18px; padding: 22px 20px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rk-mk-step:hover {
  transform: translateY(-3px);
  border-color: var(--rk-card-hover-border, #cfeadb);
  box-shadow: 0 18px 32px -20px rgba(43, 42, 38, 0.24);
}
.rk-mk-step-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--rk-emerald); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rk-mk-step strong { display: block; margin-bottom: 4px; color: var(--rk-ink); }
.rk-mk-step p { margin: 0; font-size: 14px; color: var(--rk-ink-soft); line-height: 1.5; }
.rk-mk-gallery-sec { margin: 0 0 var(--sec-pad, 88px); }
/* Gallery wall (redesign 2026-08-05, Kim): four tracks, and — outside the hub's uniform medium
   cards — the first plate runs double-wide as the lead. A topic page's three shots therefore fill
   one exact row (2+1+1) instead of scattering across an auto-fill count nobody chose. */
/* align-items:start is load-bearing: grid stretches items to row height by default, and a matte
   stretched past its caption reads as a broken card full of blank paper (the .aud-grid lesson). */
.rk-mk-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1180px; margin-inline: auto; align-items: start; }
/* The double-wide lead is a LANDSCAPE privilege: both exclusions live on the same selector because
   a lower-specificity "undo" rule loses to this one (:not() counts its argument — measured the hard
   way on the portrait gallery, 2026-08-05). */
.rk-mk-gallery:not(.rk-mk-gallery--mediums):not(.rk-mk-gallery--portrait) > .rk-mk-shot:first-child { grid-column: span 2; }
/* Portrait galleries (storybook pages): a double-wide portrait lead dwarfs its siblings, so these
   run three equal columns and no lead. The renderer sets the class from the first image's own
   dimensions. */
.rk-mk-gallery--portrait { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .rk-mk-gallery { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px) {
  .rk-mk-gallery { grid-template-columns: 1fr; }
  .rk-mk-gallery:not(.rk-mk-gallery--mediums) > .rk-mk-shot:first-child { grid-column: auto; }
}
/* Every plate sits in a white matte — the homepage never shows artwork as a bare thumbnail, and
   this is the gallery-wall version of that rule (v3 identity: artwork as physical objects). */
.rk-mk-shot {
  margin: 0;
  background: #fff;
  padding: 10px 10px 2px;
  border: 1px solid var(--rk-line);
  border-radius: 14px;
  box-shadow: 0 18px 32px -24px rgba(43, 42, 38, .30);
}
/* height:auto is what lets the width/height attributes become a reserved aspect-ratio box instead of
   being overridden to 0 — without it the browser still collapses the image before load and the page
   jumps when the gallery arrives. */
.rk-mk-shot img { width: 100%; height: auto; border-radius: 8px; display: block; }
/* Captions are real page copy (SEO), not chrome — keep every word but let it read as a caption:
   a hairline lead-in, more air, and a line-height that stops the block reading as a grey wall. */
.rk-mk-shot figcaption {
  font-size: 13px; color: var(--rk-ink-muted); line-height: 1.55;
  margin: 0; padding: 10px 4px 12px;
}
.rk-mk-gallery-note { text-align: center; font-size: 13px; color: var(--rk-ink-muted); margin-top: 16px; }
/* community works wall — real approved publications, links to Discover */
.rk-mk-community { margin: 0 0 var(--sec-pad, 88px); text-align: center; }
.rk-mk-community h2 { font-family: var(--rk-font-display); margin: 0 0 8px; }
.rk-mk-community-sub { font-size: 14px; color: var(--rk-ink-soft); margin: 0 auto 28px; max-width: 560px; }
.rk-mk-community-sub a { color: var(--rk-emerald); font-weight: 600; }
.rk-mk-cw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px; }
.rk-mk-cw-card { display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; }
.rk-mk-cw-frame { position: relative; }
.rk-mk-cw-cover, .rk-mk-cw-cloth { width: 150px; height: 200px; border-radius: 5px 8px 8px 5px; box-shadow: var(--rk-shadow-object); object-fit: cover; display: block; }
.rk-mk-cw-cloth { display: grid; place-items: center; padding: 12px; text-align: center; background: var(--cw-cloth, #6e6a61); border-inline-start: 7px solid rgba(0,0,0,.22); }
.rk-mk-cw-cloth span { color: #fff; font-family: var(--rk-font-display); font-size: 14px; line-height: 1.25; }
.rk-mk-cw-card:hover .rk-mk-cw-cover, .rk-mk-cw-card:hover .rk-mk-cw-cloth { transform: translateY(-3px); transition: transform .15s; }
.rk-mk-cw-title { font-size: 13px; font-weight: 700; color: var(--rk-ink); text-align: center; line-height: 1.3; max-width: 150px; }
.rk-mk-cw-likes { font-size: 12px; color: var(--rk-ink-muted); }
.rk-mk-disclaimer { max-width: 720px; margin: 32px auto 0; font-size: 12px; color: var(--rk-ink-muted); line-height: 1.5; text-align: center; }

/* Related links (.rk-mk-related) — the internal-link row that keeps a keyword cluster connected.
   Kept text-only and quiet on purpose: it sits after the FAQ, where a reader who did not convert is
   looking for a different page, not another card to weigh. Follows the FAQ's 720 measure. */
.rk-mk-related { max-width: 720px; margin: 0 auto var(--sec-pad, 88px); }
.rk-mk-related h2 { font-family: var(--rk-font-display); font-size: clamp(22px, 2.2vw, 28px); text-align: center; margin: 0 0 16px; }
.rk-mk-related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rk-mk-related-list li { font-size: 14px; line-height: 1.5; padding-top: 10px; border-top: 1px solid var(--rk-hairline, rgba(43, 42, 38, .12)); }
.rk-mk-related-list li:first-child { border-top: 0; padding-top: 0; }
.rk-mk-related-list a { color: var(--rk-emerald); font-weight: 600; text-decoration: none; }
.rk-mk-related-list a:hover { text-decoration: underline; }
.rk-mk-related-list span { color: var(--rk-ink-muted); }

/* Decision block (.rk-mk-decision) — a compact spec strip between the evidence run and the FAQ.
   Deliberately quiet: hairline rows, no card, no accent fills, so it reads as a fact table the eye
   can scan rather than another persuasion panel. Width follows the FAQ's 720 measure. */
.rk-mk-decision { max-width: 720px; margin: 0 auto var(--sec-pad, 88px); }
.rk-mk-decision h2 { font-family: var(--rk-font-display); text-align: center; margin: 0 0 20px; }
.rk-mk-decision-grid { margin: 0; }
.rk-mk-decision-row {
  display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--rk-hairline, rgba(43, 42, 38, .12));
}
.rk-mk-decision-row:last-child { border-bottom: 1px solid var(--rk-hairline, rgba(43, 42, 38, .12)); }
.rk-mk-decision-row dt { margin: 0; color: var(--rk-ink-muted); font-size: 14px; line-height: 1.5; }
.rk-mk-decision-row dd { margin: 0; color: var(--rk-ink); font-size: 15px; line-height: 1.5; font-weight: 600; }
.rk-mk-decision-note { margin: 16px 0 0; color: var(--rk-ink-muted); font-size: 13px; line-height: 1.55; text-align: center; }
@media (max-width: 560px) {
  .rk-mk-decision-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── /make closing CTA = the home page's own card, inherited not copied (Kim, 2026-08-06) ─────────
   The section is `<section class="rk-mk-cta-sec" id="faq">` so home-v3.css's `#faq .final.final-home`
   block applies verbatim — card chrome, heading ramp, button pair, proof dots, the art height budget
   and all four breakpoints come from the home and follow it whenever it changes. Only two things are
   the /make family's own business:
     · rhythm — these pages run bottom-only --sec-pad, so the card must not add the home's own top
       margin on top of the previous section's gap;
     · the no-art degrade — the home card is a two-column grid and always has artwork; a /make page
       without a usable image would otherwise leave the right column as dead space.
   The `.rk-mk-final-*` rules below stay: the four feature silos and /create/animation still use them.
   Both rules carry the #faq in their own selector on purpose: the rules they adjust are written as
   `#faq .final…`, and a selector without the id loses to them however many classes it stacks. */
#faq.rk-mk-cta-sec .final.final-home { margin-top: 0; }
#faq.rk-mk-cta-sec .final.final-home.is-nocover { grid-template-columns: minmax(0, 1fr); min-height: 0; }
/* Third exception, and the one that bit: the home's rule for this artwork hardcodes ITS OWN picture's
   proportions — `aspect-ratio: 978 / 776` — because the home only ever shows one image there. Every
   /make page brings its own art, so inheriting that ratio stretched a portrait 1086x1448 book page
   into a 386x306 landscape: a 68% horizontal squash (Kim's screenshot, 2026-08-06). `auto` hands the
   ratio back to the file; the height budget and `width:auto` still come from the home, so the card
   geometry is unchanged. object-fit is the belt to that braces — if anything ever pins both axes
   again, the picture letterboxes instead of silently deforming. */
#faq.rk-mk-cta-sec .final-home .final-showcase .final-showcase-art {
  aspect-ratio: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Closing CTA (.rk-mk-final) — the home page's closing card (home-v3.css `#faq .final.final-home`),
   ported because the /make family loads home-2026.css rather than home-v3.css. Values carried over
   verbatim: the .52/.48 split, the height-budgeted artwork column, the emerald primary, the
   underlined secondary that hugs its own text, and the dot-separated proof row. What differs is
   only the content — headline, sub, secondary link and artwork all come from the page's own spec.
   Replaces the old cat-and-spark card, which shared nothing with the home page but the palette. */
.rk-mk-final-sec { margin: clamp(56px, 5vw, 88px) 0 0; }
.rk-mk-final {
  --fc-h: clamp(340px, 25vw, 368px);
  --fc-art-max: calc(var(--fc-h) - 34px);
  display: grid;
  /* Home uses .52/.48 because its artwork is a ~1.26:1 keepsake photo that fills a wide column.
     Ours is a 3:4 book cover, height-bound by --fc-art-max — in a .48fr column it rendered 230px of
     picture inside 493px of column and left 263px of dead space on the right (the same failure the
     home page hit from the other direction and fixed with a height budget). `auto` sizes the column
     to the book itself, so the copy takes every pixel the cover does not need. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 2.5vw, 44px);
  width: min(100%, 1300px);
  min-height: var(--fc-h);
  margin-inline: auto;
  padding: clamp(26px, 2vw, 30px) clamp(42px, 4vw, 62px);
  text-align: left;
  border: 1px solid #c9dccf;
  border-radius: clamp(22px, 2vw, 28px);
  overflow: hidden;
  background: #f7f7f2;
  box-shadow: 0 18px 48px -34px rgba(39, 62, 47, .42);
}
/* A page with no gallery has no artwork column — collapse to one column rather than leaving a
   360px hole where the book should be. */
.rk-mk-final.rk-mk-final-nocover { grid-template-columns: minmax(0, 1fr); min-height: 0; }
/* logical, not physical: in RTL the copy is the RIGHT column, so physical padding-left would put
   this breathing room against the artwork instead of against the card edge. */
.rk-mk-final-copy { position: relative; z-index: 2; min-width: 0; padding-inline-start: clamp(20px, 1.7vw, 28px); }
.rk-mk-final h2 {
  max-width: 600px; margin: 0; color: #222823;
  font-family: var(--rk-font-display);
  font-size: clamp(32px, 2.7vw, 44px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance;
}
.rk-mk-final-sub { max-width: 54ch; margin: 14px 0 0; color: #5f6a61; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; }
/* wrap, so a long localized primary label pushes the secondary onto its own line instead of
   overflowing the copy column (the primary label is nowrap by design). */
.rk-mk-final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(18px, 2vw, 30px); margin-top: 24px; }
.rk-mk-final-primary, .rk-mk-final-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; font-weight: 750; text-decoration: none; white-space: nowrap;
}
.rk-mk-final-primary {
  gap: 12px; min-width: 220px; padding: 14px 24px; color: #fff;
  background: var(--rk-emerald); border: 1px solid var(--rk-emerald); border-radius: 12px;
  box-shadow: 0 10px 24px -16px rgba(14, 124, 93, .72);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.rk-mk-final-primary:hover { transform: translateY(-2px); background: #0b8f6d; box-shadow: 0 14px 28px -16px rgba(14, 124, 93, .8); }
.rk-mk-final-primary:focus-visible, .rk-mk-final-secondary:focus-visible { outline: 3px solid rgba(15, 164, 126, .26); outline-offset: 4px; }
.rk-mk-final-primary svg { width: 17px; height: 17px; }
/* Shares the 54px row with the primary, but the underline has to hug the text — on a 54px-tall box
   it detaches below the baseline and reads as a rule rather than a link. */
.rk-mk-final-secondary {
  align-self: center; min-width: 0; min-height: auto; padding-bottom: 3px;
  color: #225f4f; border-bottom: 1px solid rgba(34, 95, 79, .45); white-space: normal;
}
.rk-mk-final-secondary:hover { color: var(--rk-emerald); border-color: currentColor; }
/* Wraps at every width, not just mobile: each item is nowrap and German/Russian renderings of the
   three claims exceed the copy column on a 1280 laptop. */
.rk-mk-final-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; color: #667068; font-size: 14px; line-height: 1.35; }
.rk-mk-final-proof span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/* logical, not physical — the separator dot sits before its label, which flips in RTL (ar/he). */
.rk-mk-final-proof span + span::before { content: ""; width: 4px; height: 4px; margin-inline-end: 7px; border-radius: 50%; background: var(--rk-emerald); }
.rk-mk-final-showcase { position: relative; align-self: center; min-width: 0; display: grid; place-items: center; }
.rk-mk-final-showcase img {
  width: auto; max-width: 100%; max-height: var(--fc-art-max); object-fit: contain;
  border-radius: 6px 12px 12px 6px;
  box-shadow: 0 18px 32px -14px rgba(43, 42, 38, .42), -8px 0 0 -4px #E9E2D4, -14px 0 0 -8px #DDD4C2;
}
@media (max-width: 900px) {
  .rk-mk-final { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: clamp(24px, 5vw, 32px) clamp(20px, 5vw, 32px); }
  .rk-mk-final-copy { padding-inline-start: 0; }
  .rk-mk-final-showcase { min-height: 0; order: -1; }
  .rk-mk-final-showcase img { max-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .rk-mk-final-primary { transition: none; }
  .rk-mk-final-primary:hover { transform: none; }
}

/* Sample-books shelf (.rk-mk-samplebooks) — the SAME physical-book object as the home page shelf
   (home-v3.css `.shelf-book`), ported here rather than referenced so this family can run one notch
   denser than the home shelf. Carried over verbatim, since these are the values that make a
   cover read as a hardcover instead of a picture: the two paper-edge layers (-8px/-14px), the
   contact shadow, the spine-side asymmetric radius, and the title set ON the cover behind a scrim.
   v3 identity rule: user artwork renders as a physical object, never a flat thumbnail.
   Book width is one notch smaller than home's clamp — a landing page argues where a home page
   performs, so this family runs denser (same reasoning as create-picture-book.css's header). */
.rk-mk-shelf-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(14px, 2vw, 32px); }
.rk-mk-shelfbook { position: relative; display: block; width: clamp(112px, 9vw, 158px); aspect-ratio: 3 / 4;
  border-radius: 6px 12px 12px 6px; overflow: hidden; text-decoration: none;
  box-shadow: 0 18px 32px -14px rgba(43, 42, 38, .42), -8px 0 0 -4px #E9E2D4, -14px 0 0 -8px #DDD4C2;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .35s; }
.rk-mk-shelfbook:hover { transform: translateY(-6px); }
.rk-mk-shelfbook:focus-visible { outline: 3px solid var(--rk-emerald); outline-offset: 2px; }
.rk-mk-shelfbook img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim gives every cover the same contrast floor — half the real covers are bright, and a
   text-shadow alone left titles unreadable over them (the fix home-v3 already had to make). */
.rk-mk-shelfbook::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 20, 38, .66) 0%, rgba(16, 20, 38, .38) 45%, rgba(16, 20, 38, 0) 100%); }
.rk-mk-shelfbook-title { position: absolute; top: 8px; left: 0; right: 0; z-index: 2; text-align: center; color: #FFF7E8;
  font: 700 clamp(11px, .85vw, 14px)/1.22 var(--rk-font-display); text-shadow: 0 1px 6px rgba(20, 25, 60, .5); padding: 0 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rk-mk-shelfbook-cloth { display: block; width: 100%; height: 100%; background: var(--cw-cloth, #6e6a61); }
@media (prefers-reduced-motion: reduce) {
  .rk-mk-shelfbook { transition: none; }
  .rk-mk-shelfbook:hover { transform: none; }
}
/* templates wall variant (.rk-mk-templates) — skill-template covers are SQUARE worksheet previews,
   not portrait book spines: show them 1:1, larger, fixed 4-up on desktop (2-up on phones). Scoped so
   the community picture-book wall keeps its 150x200 spine layout. */
.rk-mk-templates .rk-mk-cw-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rk-mk-templates .rk-mk-cw-frame { width: 100%; }
.rk-mk-templates .rk-mk-cw-cover, .rk-mk-templates .rk-mk-cw-cloth {
  width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--rk-radius);
}
.rk-mk-templates .rk-mk-cw-title { max-width: none; font-size: 14px; }
@media (max-width: 640px) {
  .rk-mk-templates .rk-mk-cw-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 640px) {
  .rk-sb-hero { flex-direction: column; align-items: center; text-align: center; }
  .rk-sb-hero-text h1 { font-size: 28px; }
  .rk-sb-page-text { font-size: 17px; }
  /* make pages: same mobile downscale as the storybook hero (40px h1 is oversized on phones) */
  .rk-mk-hero h1 { font-size: clamp(30px, 8.6vw, 36px); }
  .rk-mk-answer { font-size: 16px; }
  .rk-mk-hero-composer .composer { height: auto; min-height: 0; padding: 9px; flex-direction: column; align-items: stretch; }
  .rk-mk-hero-composer .composer input { width: 100%; min-height: 46px; padding: 8px 10px; }
  .rk-mk-hero-composer .composer button { width: 100%; min-height: 48px; }
  .rk-mk-hero-try { margin-top: 14px; }
  .rk-mk-hero-composer .chips { width: 100%; }
  .rk-mk-hero-composer .idea-chip { min-height: 44px; max-width: 100%; white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rk-mk-hero-composer .composer,
  .rk-mk-hero-composer .composer button,
  .rk-mk-hero-composer .idea-chip { transition: none; }
  .rk-mk-hero-composer .composer button.pulse-once { animation: none; }
}

/* Optional feature-silo visual variant for Make pages with real product-proof media. The selector
   is emitted only when a validated hero_media object exists, so the rest of the Make family keeps
   its established centered, text-first layout. Visual authority: /ai-animation-maker. */
.rk-mk--feature-visual .rk-mk-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: none;
  margin: 0;
  /* Top padding is small on purpose: .rk-mk already pads the page top and the breadcrumb sits just
     above, so the hero's own 40-72px landed on top of both and pushed the h1 down a third of a
     screen. Bottom keeps the full section rhythm. */
  padding-block: clamp(6px, 1.2vw, 18px) var(--sec-pad, clamp(64px, 6.2vw, 104px));
  text-align: start;
}
.rk-mk--feature-visual .rk-mk-hero-copy { min-width: 0; max-width: 620px; }
.rk-mk--feature-visual .rk-mk-hero--split .lp-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--rk-emerald);
  font: 700 13px var(--rk-font-body, inherit);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.rk-mk--feature-visual .rk-mk-hero--split .lp-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: var(--rk-emerald);
}
.rk-mk--feature-visual .rk-mk-hero--split h1 {
  max-width: 16ch;
  margin: 0 0 18px;
  color: var(--rk-ink);
  font-size: clamp(40px, 3.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -.5px;
  text-wrap: balance;
}
.rk-mk--feature-visual .rk-mk-answer {
  max-width: 52ch;
  margin: 0 0 30px;
  color: var(--rk-ink-soft);
  font-size: 17.5px;
  line-height: 1.6;
}
.rk-mk--feature-visual .rk-mk-hero-actions,
.rk-mk--feature-visual .rk-mk-hero-try,
.rk-mk--feature-visual .rk-mk-hero-composer .chips { justify-content: flex-start; }
.rk-mk--feature-visual .rk-mk-hero-composer { width: 100%; margin-inline: 0; }
.rk-mk--feature-visual .rk-mk-hero-media { position: relative; min-width: 0; }
/* Hero print stack — three of the page's own images fanned as framed physical prints (redesign
   2026-08-05; the split hero is now the default whenever a page has real imagery, see make-render's
   heroStackHtml). Absolute children never size their parent, so the stage owns its height via
   aspect-ratio — one ratio per print orientation, because portrait storybook pages are ~1.33x
   taller than landscape style plates and would overflow the landscape stage. */
.rk-mk-hero-stack { position: relative; aspect-ratio: 1.45 / 1; width: 100%; max-width: 640px; justify-self: end; }
.rk-mk-print {
  position: absolute;
  display: block;
  background: #fff;
  padding: 9px 9px 11px;
  border: 1px solid var(--rk-line);
  border-radius: 12px;
  box-shadow: 0 30px 52px -28px rgba(43, 42, 38, .42);
}
.rk-mk-print img { display: block; width: 100%; height: auto; border-radius: 7px; }
.rk-mk-print-1 { width: 58%; left: 0; top: 12%; transform: rotate(-5.5deg); z-index: 1; }
.rk-mk-print-2 { width: 60%; left: 21%; top: 1%; transform: rotate(1.6deg); z-index: 2; }
.rk-mk-print-3 { width: 58%; left: 42%; top: 30%; transform: rotate(6deg); z-index: 3; }
/* The stage is a reserved box, and an oversized one costs twice: it pads the hero AND (because the
   two columns are centred against each other) pushes the copy down by half the excess. Measured at
   1280 the portrait fan drew 427px of art inside a 545px square — 121px of nothing under it, which
   is exactly the gap Kim flagged. The ratios below are the fan's real extent plus ~20px of slack for
   the rotation; every position in the fan is a percentage, so they hold at every width. */
.rk-mk-hero-stack--portrait { aspect-ratio: 1.22 / 1; }
.rk-mk-hero-stack--portrait .rk-mk-print-1 { width: 44%; left: 2%; top: 6%; }
.rk-mk-hero-stack--portrait .rk-mk-print-2 { width: 46%; left: 27%; top: 0; }
.rk-mk-hero-stack--portrait .rk-mk-print-3 { width: 44%; left: 52%; top: 18%; }
@media (max-width: 960px) { .rk-mk-hero-stack { max-width: 480px; justify-self: center; } }
.rk-mk--feature-visual .rk-mk-hero-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rk-line);
  border-radius: 26px;
  background: var(--rk-paper-2);
  box-shadow: 0 24px 48px -24px rgba(43, 42, 38, .28);
}
.rk-mk--feature-visual .rk-mk-hero-accent {
  position: absolute;
  inset-inline-end: -8px;
  inset-block-end: -14px;
  width: clamp(110px, 12vw, 170px);
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(43, 42, 38, .18));
}

/* The factual capability matrix carries the feature-silo card rhythm while keeping every
   definition in semantic <dl>/<dt>/<dd> markup. Two columns protect long model constraints. */
.rk-mk--feature-visual .rk-mk-decision { max-width: 1180px; margin-top: 0; }
.rk-mk--feature-visual .rk-mk-decision h2 {
  margin-bottom: 28px;
  font-size: clamp(28px, 3.2vw, 40px);
}
.rk-mk--feature-visual .rk-mk-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.rk-mk--feature-visual .rk-mk-decision-row,
.rk-mk--feature-visual .rk-mk-decision-row:last-child {
  display: block;
  padding: 24px;
  border: 1px solid var(--rk-line);
  border-radius: 18px;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rk-mk--feature-visual .rk-mk-decision-row:hover {
  transform: translateY(-3px);
  border-color: var(--rk-card-hover-border, #cfeadb);
  box-shadow: 0 18px 32px -20px rgba(43, 42, 38, .24);
}
.rk-mk--feature-visual .rk-mk-decision-row dt {
  margin: 0 0 8px;
  color: var(--rk-ink);
  font: 700 16px/1.35 var(--rk-font-display);
}
.rk-mk--feature-visual .rk-mk-decision-row dd {
  color: var(--rk-ink-soft);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
.rk-mk--feature-visual .rk-mk-decision-note { max-width: 68ch; margin-inline: auto; }

/* A hero proof image is also the honest closing-card proof. Landscape art uses the animation-silo
   frame instead of the book-spine treatment used by story-backed Make pages. */
.rk-mk--feature-visual .rk-mk-final-showcase img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 18px;
  box-shadow: 0 26px 44px -30px rgba(28, 36, 30, .64);
}
@media (min-width: 901px) {
  .rk-mk--feature-visual .rk-mk-final {
    --fc-h: 340px;
    grid-template-columns: minmax(0, 460px) minmax(0, 400px);
    justify-content: center;
    column-gap: clamp(52px, 5vw, 64px);
    padding: 20px clamp(40px, 4vw, 64px);
  }
  .rk-mk--feature-visual .rk-mk-final-copy { width: 460px; justify-self: center; }
  .rk-mk--feature-visual .rk-mk-final-showcase { width: 100%; max-width: 400px; justify-self: end; }
}
@media (max-width: 960px) {
  .rk-mk--feature-visual .rk-mk-hero--split {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .rk-mk--feature-visual .rk-mk-hero-copy { margin-inline: auto; }
  .rk-mk--feature-visual .rk-mk-hero--split .lp-kicker,
  .rk-mk--feature-visual .rk-mk-hero-actions,
  .rk-mk--feature-visual .rk-mk-hero-try,
  .rk-mk--feature-visual .rk-mk-hero-composer .chips { justify-content: center; }
  .rk-mk--feature-visual .rk-mk-hero--split h1,
  .rk-mk--feature-visual .rk-mk-answer,
  .rk-mk--feature-visual .rk-mk-hero-composer { margin-inline: auto; }
  .rk-mk--feature-visual .rk-mk-hero-media { width: 100%; max-width: 560px; margin-inline: auto; }
  .rk-mk--feature-visual .rk-mk-hero-accent { inset-inline-end: 4px; inset-block-end: -10px; }
}
@media (max-width: 640px) {
  .rk-mk--feature-visual .rk-mk-hero--split {
    padding-block: 34px 64px;
    gap: 32px;
  }
  .rk-mk--feature-visual .rk-mk-hero-copy,
  .rk-mk--feature-visual .rk-mk-hero-actions,
  .rk-mk--feature-visual .rk-mk-hero-composer,
  .rk-mk--feature-visual .rk-mk-hero-composer .composer {
    width: 100%;
    max-width: 100%;
  }
  .rk-mk--feature-visual .rk-mk-hero-composer .idea-chip {
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .rk-mk--feature-visual .rk-mk-hero--split h1 { font-size: clamp(32px, 9vw, 40px); }
  .rk-mk--feature-visual .rk-mk-answer { font-size: 16px; }
  .rk-mk--feature-visual .rk-mk-decision-grid { grid-template-columns: 1fr; }
  .rk-mk--feature-visual .rk-mk-decision-row,
  .rk-mk--feature-visual .rk-mk-decision-row:last-child { padding: 21px 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .rk-mk--feature-visual .rk-mk-decision-row { transition: none; }
  .rk-mk--feature-visual .rk-mk-decision-row:hover { transform: none; }
}

/* ---------- Language switcher (scales 4 → 25 via a <details> disclosure) ---------- */
.lp-lang-menu { position: relative; }
.lp-lang-current {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; color: var(--rk-ink-soft); font-size: 13px; user-select: none;
}
.lp-lang-current::-webkit-details-marker { display: none; }
.lp-lang-current::marker { content: ""; }
.lp-lang-current:hover { color: var(--rk-ink); }
.lp-lang-globe { flex: 0 0 auto; }
.lp-lang-panel {
  position: absolute; inset-inline-end: 0; margin-block-start: 8px; z-index: 30;
  background: var(--rk-surface); border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius); box-shadow: var(--rk-shadow-panel);
  padding: 10px; min-width: 280px; max-height: 62vh; overflow: auto;
  display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 1px 6px;
}
.lp-lang-panel .lp-lang-link {
  display: block; padding: 6px 10px; border-radius: 8px; font-size: 14px;
  color: var(--rk-ink-soft); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.lp-lang-panel .lp-lang-link:hover { background: var(--rk-emerald-soft); color: var(--rk-ink); }
.lp-lang-panel .lp-lang-link[aria-current="page"] { color: var(--rk-emerald); font-weight: 700; }
@media (max-width: 560px) {
  .lp-lang-panel { grid-template-columns: 1fr; min-width: 200px; }
}

/* ═══ Legal documents (/privacy /terms /return-privacy) ═══
   Ported verbatim from the old site's MDX; this block only gives the raw article readable
   long-form typography on the v3 paper skin. Long URLs in legal text must wrap, not overflow. */
.lp-legal {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 32px) clamp(48px, 6vw, 88px);
  color: var(--rk-ink);
  line-height: 1.75;
  overflow-wrap: break-word;
}
.lp-legal h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; margin: 0 0 18px; }
.lp-legal h2 { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.3; margin: 40px 0 12px; }
.lp-legal h3 { font-size: clamp(17px, 1.6vw, 20px); margin: 28px 0 10px; }
.lp-legal h4 { font-size: 16px; margin: 22px 0 8px; }
.lp-legal p { margin: 0 0 14px; }
.lp-legal ul, .lp-legal ol { margin: 0 0 14px; padding-inline-start: 26px; }
.lp-legal li { margin: 0 0 6px; }
.lp-legal a { color: var(--rk-emerald); text-decoration: underline; }
.lp-legal table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.lp-legal th, .lp-legal td { border: 1px solid var(--rk-line); padding: 8px 12px; text-align: left; vertical-align: top; }
.lp-legal thead th { background: var(--rk-paper-2); }
@media (max-width: 560px) {
  .lp-legal table { display: block; overflow-x: auto; }
}

/* ═══ Safety & Trust (/safe) ═══ */
.lp-safe { width: min(calc(100% - 2 * clamp(24px, 4vw, 72px)), 1560px); margin: 0 auto; padding: clamp(32px, 4.5vw, 64px) 0 clamp(56px, 6vw, 96px); }
.lp-safe-grid { max-width: 1180px; margin-inline: auto; }
.lp-safe-hero { text-align: center; max-width: 720px; margin: 0 auto; }
.lp-safe-hero h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.18; margin: 10px 0 14px; }
.lp-safe-sub { color: var(--rk-ink-soft); font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.6; margin: 0; }
.lp-safe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(32px, 4vw, 56px); }
.lp-safe-card { background: var(--rk-surface); border: 1px solid var(--rk-line); border-radius: 12px; padding: clamp(20px, 2.2vw, 30px); box-shadow: var(--rk-shadow-card); }
.lp-safe-icon { display: inline-flex; width: 42px; height: 42px; color: var(--rk-emerald); margin-bottom: 12px; }
.lp-safe-icon svg { width: 100%; height: 100%; }
.lp-safe-card h2 { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.35; margin: 0 0 10px; }
.lp-safe-card p { color: var(--rk-ink-soft); line-height: 1.65; margin: 0; font-size: 15px; }
.lp-safe-foot { margin-top: clamp(36px, 4.5vw, 64px); text-align: center; }
.lp-safe-badges { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 22px; padding: 0; }
.lp-safe-badges li { border: 1px solid var(--rk-line); border-radius: 999px; padding: 8px 16px; font: 600 13.5px var(--rk-font-body); color: var(--rk-ink-soft); background: var(--rk-paper-2); }
.lp-safe-links { margin: 0; font-size: 15px; }
.lp-safe-links a { color: var(--rk-emerald); text-decoration: underline; }
.lp-safe-links span { margin: 0 10px; color: var(--rk-ink-muted); }
@media (max-width: 900px) { .lp-safe-grid { grid-template-columns: 1fr; } }

/* ═══ Contact (/contact) ═══ */
.lp-contact { width: min(calc(100% - 2 * clamp(24px, 4vw, 72px)), 1560px); margin: 0 auto; padding: clamp(32px, 4.5vw, 64px) 0 clamp(56px, 6vw, 96px); }
.lp-contact-grid { max-width: 1080px; margin-inline: auto; }
.lp-contact-hero { text-align: center; max-width: 680px; margin: 0 auto clamp(30px, 3.6vw, 48px); }
.lp-contact-hero h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.18; margin: 10px 0 14px; }
.lp-contact-sub { color: var(--rk-ink-soft); font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.6; margin: 0; }
.lp-contact-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.lp-contact-card { background: var(--rk-surface); border: 1px solid var(--rk-line); border-radius: 12px; padding: clamp(18px, 2vw, 26px); box-shadow: var(--rk-shadow-card); }
.lp-contact-card + .lp-contact-card { margin-top: 16px; }
.lp-contact-card h2 { font-size: 16.5px; margin: 0 0 10px; }
.lp-contact-mail { color: var(--rk-emerald); font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; }
.lp-contact-socials { display: flex; flex-direction: column; gap: 8px; }
.lp-contact-socials a { color: var(--rk-ink-soft); text-decoration: underline; font-size: 15px; }
.lp-contact-form { background: var(--rk-surface); border: 1px solid var(--rk-line); border-radius: 12px; padding: clamp(20px, 2.4vw, 32px); box-shadow: var(--rk-shadow-card); display: flex; flex-direction: column; gap: 14px; }
.lp-contact-form h2 { font-size: clamp(18px, 1.7vw, 22px); margin: 0 0 4px; }
.lp-contact-form label { display: flex; flex-direction: column; gap: 6px; font: 600 13.5px var(--rk-font-body); color: var(--rk-ink-soft); }
.lp-contact-form input, .lp-contact-form select, .lp-contact-form textarea {
  font: 400 15px var(--rk-font-body); color: var(--rk-ink);
  border: 1px solid var(--rk-line); border-radius: 8px; padding: 10px 12px; background: var(--rk-paper);
}
.lp-contact-form input:focus, .lp-contact-form select:focus, .lp-contact-form textarea:focus { outline: 2px solid var(--rk-emerald); outline-offset: 1px; }
.lp-contact-form textarea { resize: vertical; min-height: 110px; }
.lp-contact-form button { align-self: flex-start; }
.lp-contact-status { margin: 0; font-size: 14.5px; }
.lp-contact-status.is-ok { color: var(--rk-emerald); }
.lp-contact-status.is-err { color: #B4232C; }
@media (max-width: 860px) { .lp-contact-grid { grid-template-columns: 1fr; } .lp-contact-form { order: -1; } }

.lp-legal-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 26px; font: 600 13.5px var(--rk-font-body); }
.lp-legal-nav a { color: var(--rk-ink-muted); text-decoration: none; }
.lp-legal-nav a:hover { color: var(--rk-emerald); text-decoration: underline; }

/* ═══ Tutorials (/tutorials) ═══ */
/* Content column mirrors .landing2026HeaderInner verbatim (the feature-page discipline: a page
   whose column differs from the header reads as belonging to a different site at 1920). */
.lp-tut { width: min(calc(100% - 2 * clamp(24px, 4vw, 72px)), 1560px); margin: 0 auto; padding: clamp(32px, 4.5vw, 64px) 0 clamp(56px, 6vw, 96px); }
.lp-tut-hero { text-align: center; max-width: 700px; margin: 0 auto clamp(30px, 3.6vw, 48px); }
.lp-tut-hero h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.18; margin: 10px 0 14px; }
.lp-tut-sub { color: var(--rk-ink-soft); font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.6; margin: 0; }
.lp-tut-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.lp-tut-card { background: var(--rk-surface); border: 1px solid var(--rk-line); border-radius: 12px; overflow: hidden; box-shadow: var(--rk-shadow-card); display: flex; flex-direction: column; }
.lp-tut-stage { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer; background: #1e2a3e; }
.lp-tut-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-tut-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.lp-tut-play svg { width: 54px; height: 54px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); transition: transform .2s ease; }
.lp-tut-stage:hover .lp-tut-play svg { transform: scale(1.12); }
.lp-tut-video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; }
.lp-tut-body { padding: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lp-tut-body h2 { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.3; margin: 0; }
.lp-tut-body p { color: var(--rk-ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; }
.lp-tut-meta { font: 600 12.5px var(--rk-font-body); color: var(--rk-ink-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.lp-tut-try { margin-top: auto; padding-top: 6px; color: var(--rk-emerald); font: 600 14px var(--rk-font-body); text-decoration: none; }
.lp-tut-try:hover { text-decoration: underline; }
@media (max-width: 980px) { .lp-tut-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } }

/* Tutorials phase-2: written steps (indexable transcript) + FAQ */
.lp-tut-steps { margin-top: 2px; }
.lp-tut-steps summary { cursor: pointer; font: 600 13.5px var(--rk-font-body); color: var(--rk-emerald); }
.lp-tut-steps[open] summary { margin-bottom: 8px; }
.lp-tut-steps ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.lp-tut-steps li { font-size: 13.5px; line-height: 1.6; color: var(--rk-ink-soft); }
.lp-tut-steps li strong { color: var(--rk-ink); display: block; }
.lp-tut-faq { max-width: 720px; margin: clamp(40px, 5vw, 72px) auto 0; }
.lp-tut-faq h2 { text-align: center; font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 18px; }