/* ============================================================
     LEAN TOOLS AU — WEBSITE VISUAL SYSTEM (PREVIEW BUILD)
     Design plan:
     Color   — Brand Navy #012148 (ink, headings, CTA), Brand Red #E51B20
               (signal accent only), a cool steel-blue neutral family
               (chosen to echo the navy hue rather than default grey),
               paper #F7F8FA / surface #FFFFFF / alt-section #EEF2F5.
     Type    — Archivo (700/800/900) for headings: a condensed
               industrial grotesque that complements the logo's bold
               wordmark without copying it. Public Sans for body copy:
               built for utility and clarity, matching the "practical,
               no-nonsense" brand voice. IBM Plex Mono for figures —
               prices, audit IDs, page tags — echoing the spec-sheet /
               workbook character of the actual product.
     Layout  — Technical spec-sheet rhythm: hairline rule dividers,
               numbered cards only where a real sequence exists,
               generous section padding, real product imagery instead
               of abstract hero art.
     ============================================================ */

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  :root {
    /* Brand (fixed — sampled from the supplied logo assets) */
    --navy: #012148;
    --navy-700: #0B335F;
    --red: #E51B20;
    --red-700: #C4171B;

    /* Light theme (default) */
    --bg: #F7F8FA;
    --bg-alt: #EEF2F5;
    --surface: #FFFFFF;
    --line: #DCE1E7;
    --line-strong: #C3CBD3;
    --ink: #17222E;
    --ink-muted: #57626E;
    --ink-soft: #5E6B77;
    /* AA-safe text variant of the brand red — the pure #E51B20 stays
       reserved for large/bold text and non-text accents (dots, rules,
       the hero's large accent word), where its 4.5–4.7:1 ratio already
       clears the large-text/UI threshold. Small mono labels (eyebrows,
       numbered tags) use this darker text-safe red instead. */
    --red-text: #B01319;
    --on-navy: #F4F6F8;
    --on-navy-muted: #AEBBC9;
    --focus: #012148;
    --good: #2E7D46;
    --header-bg: #FFFFFF;
    --header-line: #E4E8EC;
    --shadow-card: 0 1px 2px rgba(11,20,32,0.06);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0E1620;
      --bg-alt: #131E2A;
      --surface: #16212D;
      --line: #263341;
      --line-strong: #37475A;
      --ink: #E7ECF1;
      --ink-muted: #A9B6C2;
      --ink-soft: #7E8B98;
      --on-navy: #F4F6F8;
      --on-navy-muted: #AEBBC9;
      --focus: #E7ECF1;
      --good: #4CAF6E;
      --header-bg: #0B1420;
      --header-line: #1E2A38;
      --shadow-card: 0 1px 2px rgba(0,0,0,0.35);
      /* Lightened for AA on dark backgrounds (pure brand red drops to
         ~3.9:1 on the dark ground, below the 4.5:1 small-text minimum). */
      --red-text: #FF7A70;
    }
  }

  :root[data-theme="dark"] {
    --bg: #0E1620;
    --bg-alt: #131E2A;
    --surface: #16212D;
    --line: #263341;
    --line-strong: #37475A;
    --ink: #E7ECF1;
    --ink-muted: #A9B6C2;
    --ink-soft: #7E8B98;
    --on-navy: #F4F6F8;
    --on-navy-muted: #AEBBC9;
    --focus: #E7ECF1;
    --good: #4CAF6E;
    --header-bg: #0B1420;
    --header-line: #1E2A38;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.35);
    --red-text: #FF7A70;
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-family: "Archivo", "Public Sans", sans-serif;
    color: var(--ink);
    line-height: 1.12;
    margin: 0;
    text-wrap: balance;
    letter-spacing: -0.01em;
  }

  a { color: inherit; }
  img { display: block; max-width: 100%; }
  button { font-family: inherit; }

  .mono {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
  }

  .eyebrow {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red-text);
  }

  .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ---------- Focus ---------- */
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
  }

  /* ---------- Header ---------- */
  header.site {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-line);
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .brand-mark { display: flex; align-items: center; }
  .brand-mark img { height: 34px; width: auto; }
  .logo-primary-img { display: block; }
  .logo-icon-img { display: none; }
  .logo-dark-img { display: none; }
  @media (max-width: 479px) {
    .logo-primary-img { display: none; }
    .logo-icon-img { display: block; height: 30px; }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-primary-img { display: none; }
    :root:not([data-theme="light"]) .logo-icon-img { display: none; }
    :root:not([data-theme="light"]) .logo-dark-img { display: block; height: 32px; }
  }
  :root[data-theme="dark"] .logo-primary-img { display: none; }
  :root[data-theme="dark"] .logo-icon-img { display: none; }
  :root[data-theme="dark"] .logo-dark-img { display: block; height: 32px; }

  /* ---------- Header nav — simplified (2026 Lean-UX revision) ----------
     The header is now logo + a single "Tools" link + one Buy Now button,
     visible and tappable at every width — no hamburger/off-canvas panel.
     The old multi-link nav, mobile-nav drawer and nav-toggle button are
     no longer used in any page's markup; their rules below are removed.
     `.nav-link` itself is kept (still used for the single Tools link and
     by the mobile-nav rule further down, retained only in case a future
     page still references it). */
  nav.primary-nav {
    display: flex;
    align-items: center;
    gap: 32px;
  }
  nav.primary-nav a.nav-link, .header-actions a.nav-link {
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink-muted);
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
  }
  nav.primary-nav a.nav-link:hover, .header-actions a.nav-link:hover { color: var(--ink); }
  nav.primary-nav a.nav-link.active, .header-actions a.nav-link.active { color: var(--ink); border-bottom-color: var(--red); }

  .header-actions { display: flex; align-items: center; gap: 18px; }
  .btn-header { padding: 11px 20px; font-size: 14.5px; }
  @media (max-width: 480px) {
    .header-actions { gap: 12px; }
    .header-actions .nav-link { display: none; }
    .btn-header { padding: 10px 14px; font-size: 13.5px; }
  }

  .mobile-nav {
    display: none;
    border-top: 1px solid var(--header-line);
    background: var(--header-bg);
  }
  .mobile-nav.open { display: block; }
  .mobile-nav .wrap { padding-top: 8px; padding-bottom: 16px; display: flex; flex-direction: column; }
  .mobile-nav a {
    padding: 12px 4px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav a:last-child { border-bottom: none; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "Public Sans", sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: 6px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
  }
  .btn-primary { background: var(--navy); color: #FFFFFF; }
  .btn-primary:hover { background: var(--navy-700); }
  .btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
  .btn-outline:hover { border-color: var(--navy); }
  .btn-lg { padding: 15px 30px; font-size: 16px; }
  .btn-block { width: 100%; }

  /* ---------- Sections / generic ---------- */
  section { padding-top: 88px; padding-bottom: 88px; }
  section.tight { padding-top: 56px; padding-bottom: 56px; }
  section.alt { background: var(--bg-alt); }
  .rule { border: none; border-top: 1px solid var(--line); margin: 0; }

  .section-head { max-width: 640px; margin-bottom: 44px; }
  .section-head h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; margin-top: 10px; }
  .section-head p { color: var(--ink-muted); font-size: 16.5px; margin-top: 12px; }

  /* ---------- Hero ----------
     2026 Lean-UX revision: the homepage hero now leads with the same
     problem/solution framing as the product page (a full sentence, not
     a short slogan), so the display-sized uppercase treatment this block
     used for "Practical tools. Better workshops." no longer fits — sized
     down and un-capitalised to match, same as the product page's h1. */
  .hero { padding-top: 40px; padding-bottom: 44px; }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
  }
  .hero h1 {
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 800;
    margin-top: 10px;
  }
  .hero h1 .accent { color: var(--red); }
  .hero .lede {
    font-size: 16px;
    color: var(--ink-muted);
    margin-top: 10px;
    max-width: 48ch;
  }
  .hero-ctas { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
  .hero-proof {
    display: flex;
    gap: 26px;
    margin-top: 40px;
    flex-wrap: wrap;
  }
  .hero-proof .item {
    font-size: 13.5px;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }
  .hero-proof .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }

  .hero-art {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px;
    box-shadow: var(--shadow-card);
  }
  .hero-art img {
    border-radius: 4px;
    width: 100%;
    border: 1px solid var(--line);
  }
  .hero-art .cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--ink-soft);
  }
  .hero-art .cap .tag {
    font-family: "IBM Plex Mono", monospace;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    color: var(--ink-muted);
  }

  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-art { order: -1; max-width: 480px; }
  }

  /* ---------- Value props ---------- */
  .value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }
  .value-card {
    background: var(--surface);
    padding: 32px 28px;
  }
  .value-card .mark {
    width: 26px;
    height: 3px;
    background: var(--red);
    border-radius: 2px;
  }
  .value-card h3 { font-size: 18px; font-weight: 700; margin-top: 14px; }
  .value-card p { color: var(--ink-muted); font-size: 15px; margin-top: 10px; }
  @media (max-width: 780px) { .value-grid { grid-template-columns: 1fr; } }

  /* ---------- Featured product card (home + tools) ---------- */
  .product-card {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .product-card .pc-media {
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    border-right: 1px solid var(--line);
  }
  .product-card .pc-media img { border-radius: 4px; border: 1px solid var(--line); }
  .product-card .pc-body { padding: 32px 34px; display: flex; flex-direction: column; }
  .tag-pill {
    display: inline-block;
    align-self: flex-start;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--bg-alt);
    border: 1px solid var(--line);
    padding: 5px 10px;
    border-radius: 4px;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag-pill { color: var(--on-navy); } }
  :root[data-theme="dark"] .tag-pill { color: var(--on-navy); }

  .product-card h3 { font-size: 24px; font-weight: 800; margin-top: 14px; }
  .product-card .desc { color: var(--ink-muted); margin-top: 10px; font-size: 15.5px; max-width: 54ch; }
  .pc-foot {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  .price {
    font-family: "IBM Plex Mono", monospace;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
  }
  .price .cur { font-size: 14px; color: var(--ink-soft); margin-right: 2px; }
  .price-note { font-size: 12.5px; color: var(--ink-soft); }

  @media (max-width: 700px) {
    .product-card { grid-template-columns: 1fr; }
    .product-card .pc-media { border-right: none; border-bottom: 1px solid var(--line); }
  }

  /* Compact "what's included" teaser chips — homepage only. A brief,
     scannable stand-in for the full included-grid on the product page;
     deliberately not repeating the per-file descriptions there. */
  .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
  }

  .coming-note {
    margin-top: 28px;
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    padding: 20px 24px;
    color: var(--ink-muted);
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* ---------- Footer ---------- */
  footer.site {
    background: var(--navy);
    color: var(--on-navy);
    padding-top: 64px;
    padding-bottom: 28px;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 44px;
  }
  .footer-brand img { height: 30px; margin-bottom: 16px; }
  .footer-brand p { color: var(--on-navy-muted); font-size: 14px; max-width: 32ch; }
  .footer-col h4 {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-navy-muted);
    font-weight: 600;
    margin-bottom: 16px;
  }
  .footer-col a {
    display: block;
    color: var(--on-navy);
    text-decoration: none;
    font-size: 14.5px;
    margin-bottom: 12px;
    opacity: 0.92;
  }
  .footer-col a:hover { opacity: 1; text-decoration: underline; }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.14);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12.5px;
    color: var(--on-navy-muted);
  }
  @media (max-width: 780px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .footer-top { grid-template-columns: 1fr; }
  }

  /* ---------- Product page ---------- */
  .breadcrumb {
    font-size: 13px;
    color: var(--ink-soft);
    padding-top: 22px;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .breadcrumb a { text-decoration: none; color: var(--ink-soft); }
  .breadcrumb a:hover { color: var(--ink); }

  .p-hero { padding-top: 20px; padding-bottom: 30px; }
  .p-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 36px; align-items: start; }
  .p-hero h1 { font-size: clamp(25px, 3.3vw, 34px); font-weight: 800; margin-top: 8px; }
  .p-hero .desc { color: var(--ink-muted); margin-top: 10px; font-size: 15px; max-width: 52ch; }
  .p-price-row { display: flex; align-items: baseline; gap: 14px; margin-top: 14px; }
  .p-price-row .price { font-size: 28px; }
  .p-purchase-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }
  .p-hero-ctas { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
  .p-hero-media {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    box-shadow: var(--shadow-card);
  }
  .p-hero-media img { border: 1px solid var(--line); border-radius: 4px; }
  @media (max-width: 900px) { .p-hero-grid { grid-template-columns: 1fr; } .p-hero-media { order: -1; max-width: 460px; } }

  /* included list */
  .included-list { border-top: 1px solid var(--line); }
  .included-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
  }
  .included-item .idx {
    font-family: "IBM Plex Mono", monospace;
    color: var(--red-text);
    font-weight: 600;
    font-size: 15px;
  }
  .included-item h4 { font-size: 16px; font-weight: 700; }
  .included-item p { font-size: 14px; color: var(--ink-muted); margin-top: 4px; }
  .included-item .fmt {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11.5px;
    color: var(--ink-soft);
    background: var(--bg-alt);
    border: 1px solid var(--line);
    padding: 4px 9px;
    border-radius: 4px;
    white-space: nowrap;
  }
  @media (max-width: 560px) {
    .included-item { grid-template-columns: 40px 1fr; }
    .included-item .fmt { grid-column: 2; justify-self: start; margin-top: 6px; }
  }

  /* workflow strip */
  .workflow-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }
  .wf-step {
    flex: 1 1 140px;
    background: var(--surface);
    padding: 20px 16px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .wf-step:last-child { border-right: none; }
  .wf-step .n {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11.5px;
    color: var(--red-text);
    font-weight: 600;
  }
  .wf-step .label { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 14.5px; margin-top: 6px; letter-spacing: 0.01em; }
  @media (max-width: 700px) { .wf-step { flex: 1 1 45%; } }

  /* gallery — flex-wrap with centred rows so an odd card count (e.g. 7)
     never leaves a dangling left-aligned row or an empty placeholder;
     an incomplete last row simply centres itself. */
  .gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
  }
  .gallery-item {
    flex: 0 1 258px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .gallery-item .thumb-frame {
    background: var(--bg-alt);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
  }
  .gallery-item img { border-radius: 3px; border: 1px solid var(--line); }
  .gallery-item .cap {
    padding: 12px 14px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-muted);
  }
  @media (max-width: 900px) { .gallery-item { flex-basis: calc(50% - 9px); } }
  @media (max-width: 480px) { .gallery-item { flex-basis: 100%; } }

  /* good to know */
  .know-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .know-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
  .know-col ul { margin: 0; padding: 0; list-style: none; }
  .know-col li {
    font-size: 14.5px;
    color: var(--ink-muted);
    padding: 10px 0 10px 22px;
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .know-col li:last-child { border-bottom: none; }
  .know-col.yes li:before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
  .know-col.no li:before { content: "–"; position: absolute; left: 2px; color: var(--ink-soft); font-weight: 700; }
  @media (max-width: 700px) { .know-grid { grid-template-columns: 1fr; } }

  /* ---------- Legal / business-info pages ---------- */
  .legal-page { padding-top: 28px; padding-bottom: 96px; }
  .legal-page .legal-head { max-width: 640px; margin-top: 18px; margin-bottom: 12px; }
  .legal-page h1 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; }
  .legal-page .legal-intro { color: var(--ink-muted); font-size: 16px; margin-top: 14px; max-width: 56ch; }
  .legal-body {
    margin-top: 28px;
    max-width: 62ch;
  }
  .legal-body p {
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 20px;
  }
  .legal-body p:last-child { margin-bottom: 0; }
  .legal-body h2 {
    font-family: "Archivo", sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--ink);
    margin-top: 36px;
    margin-bottom: 12px;
  }
  .legal-body h2:first-child { margin-top: 0; }
  .legal-body ul {
    margin: 0 0 20px;
    padding-left: 20px;
  }
  .legal-body li {
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 8px;
  }
  .legal-body li:last-child { margin-bottom: 0; }
  .legal-pending {
    margin-top: 32px;
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    padding: 22px 26px;
    color: var(--ink-muted);
    font-size: 14.5px;
    max-width: 62ch;
  }
  .identity-block {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-soft);
    max-width: 62ch;
  }
  .identity-block .biz-name { font-weight: 600; color: var(--ink-muted); }
  .contact-note {
    margin-top: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 24px 28px;
    max-width: 62ch;
    font-size: 14.5px;
    color: var(--ink-muted);
  }

  /* ---------- Product page — compact redesign (5S Workshop Starter Kit only) ----------
     Everything below is new, additive component CSS scoped to classes used
     only on that one product page. Nothing above this block was changed —
     no existing rule, token or selector was edited, so no other page is
     affected. */

  .p-hero-collage-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
  .p-hero-collage-main img {
    border-radius: 4px; border: 1px solid var(--line);
    width: 100%; height: 220px; object-fit: cover; object-position: top;
  }
  .p-hero-collage-sub { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; }
  .p-hero-collage-sub img {
    border-radius: 4px; border: 1px solid var(--line);
    width: 100%; height: 68px; object-fit: cover; object-position: top;
  }
  @media (max-width: 520px) {
    .p-hero-collage-grid { grid-template-columns: 1fr; }
    .p-hero-collage-main img { height: 180px; }
    .p-hero-collage-sub { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
    .p-hero-collage-sub img { height: 70px; }
  }

  .p-hero-checklist {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
  }
  .p-hero-checklist li {
    list-style: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .p-hero-checklist li:before { content: "\2713"; color: var(--good); font-weight: 700; }
  @media (max-width: 480px) { .p-hero-checklist { grid-template-columns: 1fr; } }

  /* Flexbox, not a fixed-column grid: with 7 cards a fixed 4-column grid
     leaves an empty-looking slot in row two. Flex-wrap lets an
     under-full last row grow to fill the width instead of leaving a
     gap, whatever the item count turns out to be. */
  .included-grid { display: flex; flex-wrap: wrap; gap: 10px; }
  .included-card {
    flex: 1 1 240px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 12px;
  }
  .included-card .idx { font-family: "IBM Plex Mono", monospace; color: var(--red-text); font-weight: 600; font-size: 12.5px; }
  .included-card h4 { font-size: 14px; font-weight: 700; margin-top: 4px; line-height: 1.2; }
  .included-card .fmt {
    display: inline-block; margin-top: 6px;
    font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
    color: var(--ink-soft); background: var(--bg-alt);
    border: 1px solid var(--line); padding: 3px 7px; border-radius: 4px;
  }
  .included-card p { color: var(--ink-muted); font-size: 12.5px; margin-top: 4px; line-height: 1.35; }
  @media (max-width: 900px) { .included-card { flex-basis: 45%; } }
  @media (max-width: 480px) { .included-card { flex-basis: 100%; } }

  .gallery-more { margin-top: 12px; }
  .gallery-toggle { margin-top: 12px; text-align: center; }

  /* Hero problem/solution two-line headline */
  .p-hero-solution {
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: clamp(18px, 2.1vw, 22px);
    color: var(--red-text);
    margin-top: 6px;
  }

  /* Compact section padding used across the six product-page sections —
     new, page-scoped class; does not touch the shared `section`/`.tight`
     rules used by other pages. */
  .p-section-compact { padding-top: 20px; padding-bottom: 20px; }

  /* Compact 3-card outcome grid ("why this kit") — new, page-scoped;
     deliberately not reusing .value-grid/.value-card since those are
     shared with the homepage and must not change size/spacing there. */
  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }
  .why-card { background: var(--surface); padding: 8px 14px; }
  .why-card .mark { width: 22px; height: 3px; background: var(--red); border-radius: 2px; }
  .why-card h3 { font-size: 15px; font-weight: 700; margin-top: 6px; }
  .why-card p { color: var(--ink-muted); font-size: 13px; margin-top: 4px; line-height: 1.35; }
  @media (max-width: 780px) { .why-grid { grid-template-columns: 1fr; } }

  /* Compact "New to 5S?" note — reuses .coming-note look via a lighter, page-local variant */
  .p-new-note {
    margin-top: 8px;
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    padding: 8px 14px;
    color: var(--ink-muted);
    font-size: 13px;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .p-new-note strong { color: var(--ink); }

  /* Final conversion band */
  .p-final-cta {
    background: var(--navy);
    color: var(--on-navy);
    border-radius: 12px;
    padding: 14px 22px;
    text-align: center;
  }
  .p-final-cta h2 { font-size: clamp(19px, 2.4vw, 23px); font-weight: 800; color: var(--on-navy); }
  .p-final-cta p { color: rgba(255,255,255,0.75); font-size: 13px; margin-top: 5px; }
  .p-final-cta .p-final-price {
    font-family: "IBM Plex Mono", monospace;
    font-size: 17px; font-weight: 600; margin-top: 8px;
  }
  .p-final-cta .p-final-price .cur { font-size: 12px; color: rgba(255,255,255,0.6); margin-right: 2px; }
  .p-final-cta .p-hero-ctas { justify-content: center; margin-top: 8px; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-final-cta { background: var(--surface); border: 1px solid var(--line); } }
  :root[data-theme="dark"] .p-final-cta { background: var(--surface); border: 1px solid var(--line); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-final-cta p { color: var(--ink-muted); } }
  :root[data-theme="dark"] .p-final-cta p { color: var(--ink-muted); }

  /* Tightened vertical rhythm for the workflow strip, gallery thumbs and
     know-grid rows. These classes (.workflow-strip / .wf-step / .gallery-item
     .thumb-frame / .know-col li) are used ONLY on the product page, so
     editing their spacing here does not affect any other page. */
  .wf-step { padding: 10px 12px; }
  .gallery-item .thumb-frame { padding: 6px; height: 92px; min-height: 0; overflow: hidden; }
  .gallery-item .thumb-frame img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
  .gallery-item .cap { padding: 7px 10px 9px; }
  .know-col li { padding: 5px 0 5px 22px; }