/* ===== Homepage light-mode redesign (scoped) ===== */
  .hp { --cobalt: var(--color-cobalt-400); --cobalt-hover: var(--color-cobalt-500); }
  .hp section { box-sizing: border-box; }

  .hp-shell { max-width: 1120px; margin: 0 auto; }
  .hp-pad { padding-left: 32px; padding-right: 32px; }

  .hp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
  }

  .hp-h2 {
    font-family: var(--font-display); font-weight: 800; font-size: 42px;
    line-height: 1.08; letter-spacing: -0.025em; margin: 0; color: var(--ink);
    text-wrap: balance;
  }
  .hp-lead {
    font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 16px 0 0;
  }

  .hp-arrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14.5px; font-weight: 600; color: var(--cobalt);
    text-decoration: none; transition: gap .15s ease;
  }
  .hp-arrow:hover { gap: 11px; }

  /* ---- Announcement bar ----
     Ships hidden and is revealed either by the clock check at the foot of the
     page (go-live news appears without waiting on a deploy) or, for the
     country-targeted bar, by src/worker.js at the edge. Sits above the hero
     rather than over the nav: it is news, not a system message. */
  .hp-announce[hidden] { display: none; }
  .hp-announce {
    background: var(--color-cobalt-50);
    border-bottom: 1px solid var(--color-cobalt-border);
  }
  .hp-announce-inner {
    max-width: 1120px; margin: 0 auto; padding: 12px 32px;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: 6px 14px; text-align: center;
  }
  .hp-announce-text {
    margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink);
    font-weight: 600; letter-spacing: -0.005em;
  }
  .hp-announce-cta { font-size: 14.5px; }

  /* ---- Hero ---- */
  .hp-hero { padding: 80px 32px 0; }
  .hp-hero-inner { max-width: 920px; margin: 0 auto; text-align: center; }
  .hp-hero h1 {
    font-family: var(--font-display); font-weight: 800; font-size: 62px;
    line-height: 1.06; letter-spacing: -0.03em; margin: 0; color: var(--ink);
    text-wrap: balance;
  }
  /* The hero's "AI-first" points at the article that explains the term.
     Inherits the headline's weight and color; only the underline marks it. */
  .hp-hero h1 a.hp-hero-link {
    color: inherit; text-decoration: underline;
    text-decoration-color: var(--color-cobalt-border, rgba(0,0,0,.18));
    text-decoration-thickness: 0.06em; text-underline-offset: 0.1em;
    transition: color .15s ease, text-decoration-color .15s ease;
  }
  .hp-hero h1 a.hp-hero-link:hover {
    color: var(--cobalt); text-decoration-color: currentColor;
  }
  .hp-hero-sub {
    max-width: 660px; margin: 26px auto 0; font-size: 18.5px; line-height: 1.58;
    color: var(--ink-2); letter-spacing: -0.005em;
  }
  /* Stacked-grid rotator: every phrase shares one grid cell, so the box
     auto-sizes to the WIDEST phrase and the headline never re-wraps. */
  .hero-rotator { display: inline-grid; vertical-align: baseline; }
  /* Clean swap, not a crossfade: the outgoing phrase fades out fast, the
     incoming one waits for it to clear before fading in, so two phrases of
     different widths never sit doubled-up on top of each other. */
  .hero-rotator-phrase {
    grid-area: 1 / 1; justify-self: center; white-space: nowrap;
    color: var(--cobalt); font-weight: 800; letter-spacing: inherit;
    opacity: 0; transform: translateY(0.3em);
    transition: opacity .2s ease, transform .3s ease;
  }
  .hero-rotator-phrase.is-active {
    opacity: 1; transform: translateY(0);
    transition: opacity .35s ease .2s, transform .5s cubic-bezier(0.16, 1, 0.3, 1) .2s;
  }
  .hero-rotator-phrase.is-exiting { opacity: 0; transform: translateY(-0.3em); }
  @media (prefers-reduced-motion: reduce) {
    .hero-rotator-phrase { transition: opacity .2s ease; transform: none; }
    .hero-rotator-phrase.is-active { transition: opacity .2s ease .15s; transform: none; }
    .hero-rotator-phrase.is-exiting { transform: none; }
  }

  .hp-hero-cta { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 32px; flex-wrap: wrap; }
  .hp-btn {
    display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 26px;
    border-radius: var(--radius-md); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em;
    text-decoration: none; box-shadow: var(--shadow-control); border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .hp-btn-primary { background: var(--cobalt); color: #fff; }
  .hp-btn-primary:hover { background: var(--cobalt-hover); }
  .hp-btn-secondary {
    background: var(--paper-2); color: var(--ink); border-color: var(--paper-line); padding: 0 22px;
  }
  .hp-btn-secondary:hover { border-color: var(--color-cobalt-200); background: var(--paper-3); }

  .hp-proof {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
    font-size: 14px; color: var(--ink-3); letter-spacing: -0.005em;
  }
  .hp-proof-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--cobalt); display: inline-block; }

  /* ---- Product demo frame (device frame via .device-frame) ---- */
  .hp-demo-wrap { max-width: 1120px; margin: 54px auto 0; padding: 0 32px; }
  /* Match the cropped video's 1520x944 aspect so it fills the screen edge to
     edge with no letterbox (the white frame is cropped out of the file). */
  .device-frame > video.hp-demo-video { aspect-ratio: 1600 / 1000; }

  /* ---- Partner ribbon ---- */
  .hp-partners { background: var(--paper-2); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 64px 32px 44px; margin-bottom: 0;}
  .hp-partners-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 14px; margin-bottom: 26px;
  }
  .hp-partners-label { font-size: 14.5px; color: var(--ink-2); margin: 0; letter-spacing: -0.005em; }
  .hp-partners-label-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color .15s ease; }
  .hp-partners-label-link:hover { color: var(--cobalt); }
  .hp-partners-label-link svg { flex: none; }
  .hp-ribbon {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
    background: var(--paper-line); border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg); overflow: hidden;
  }
  .hp-ribbon-cell {
    background: #fff; display: flex; align-items: center; justify-content: center;
    padding: 22px 14px; min-height: 76px; text-decoration: none;
    transition: background .15s ease;
  }
  a.hp-ribbon-cell:hover { background: var(--paper-2); }
  .hp-ribbon-cell img { max-height: 30px; max-width: 100%; width: auto; object-fit: contain; }
  .hp-ribbon-cell span {
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
    letter-spacing: -0.01em; color: var(--ink-3); text-align: center;
  }

  /* ---- Industry bento ---- */
  .hp-band { background: var(--paper-2); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 80px 32px; }
  .hp-band-white { background: #fff; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 84px 32px; }
  .hp-section-head { margin-bottom: 44px; }

  /* Industry pillar cards (.indpil-*) live in templates/_industry_pillars.html */

  /* ---- Case study tabs ---- */
  .hp-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--paper-line); margin-bottom: 36px; }
  .hp-tab {
    appearance: none; background: none; border: none; cursor: pointer; font-family: var(--font-body);
    font-size: 15px; font-weight: 500; color: var(--ink-3);
    padding: 0 4px 16px; margin: 0 14px 0 0; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color .15s ease; letter-spacing: -0.005em;
  }
  .hp-tab.active { font-weight: 600; color: var(--cobalt); border-bottom-color: var(--cobalt); }
  /* Neutralize the legacy .solution-tab pill from main.css (the JS still needs
     that class as a hook): keep the redesign's underline-tab look, never a
     filled cobalt pill (which would hide the label, cobalt-on-cobalt). */
  .hp-tabs .solution-tab { background: none; border-radius: 0; box-shadow: none; }
  .hp-tabs .solution-tab.active { background: none; color: var(--cobalt); }
  /* The panel also reuses .solution-panel as a JS hook, which drags in the
     legacy centered single-column testimonial (text-align:center). Force the
     redesign's left-aligned two-column layout. */
  .hp-case-panel.solution-panel { text-align: left; color: inherit; }
  .hp-case-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
  .hp-case-panel { display: none; }
  .hp-case-panel.active { display: grid; }
  .hp-case-tag {
    background: var(--color-cobalt-50); border: 1px solid var(--color-cobalt-border); color: var(--cobalt-hover); margin-bottom: 22px;
  }
  .hp-case-quote {
    margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px;
    line-height: 1.3; letter-spacing: -0.018em; color: var(--ink); text-wrap: pretty;
  }
  .hp-case-cite { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
  .hp-case-avatar {
    width: 52px; height: 52px; border-radius: var(--radius-pill); overflow: hidden; flex: none;
    background: var(--paper-2); object-fit: cover;
  }
  .hp-case-name { font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .hp-case-role { font-size: 14px; color: var(--ink-3); line-height: 1.3; }
  .hp-case-figure { position: relative; }
  .hp-case-photo {
    display: block; width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--paper-line); object-fit: cover;
  }
  /* Company logo rides the photo as a brand chip so the cite row stays a
     uniform avatar + name/role across every tab. */
  .hp-case-logochip {
    position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center;
    background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-md);
    padding: 9px 14px; box-shadow: var(--shadow-control);
  }
  .hp-case-logochip img { display: block; height: 26px; max-width: 130px; object-fit: contain; }
  .hp-case-readmore { display: inline-flex; margin-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--cobalt); }

  /* ---- Stats: editorial evidence row, not a metric-card triptych ---- */
  .hp-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .hp-stat-card { padding-top: 22px; border-top: 1px solid var(--paper-line); }
  a.hp-stat-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s ease; }
  a.hp-stat-card-link:hover { border-top-color: var(--cobalt); }
  a.hp-stat-card-link:hover .hp-stat-num { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
  a.hp-stat-card-link:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; border-radius: 4px; }
  .hp-stat-num { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -0.03em; color: var(--cobalt); }
  .hp-stat-label { font-size: 16.5px; font-weight: 700; color: var(--ink); margin-top: 12px; letter-spacing: -0.01em; }
  .hp-stat-context { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; max-width: 32ch; }

  /* ---- Dooey ---- */

  /* ---------------------------- CLIENT PHOTO WALL ---------------------------
     A centered quilt of signed-shirt photos, not a full-bleed band, so it sits
     on the white surface between the partner ribbon and the rose pillars band
     without disturbing the page's rose/white alternation. */
  .hp-wall-wrap { max-width: 1120px; margin: 0 auto; padding: 72px 32px 78px; }
  .hp-wall-head { max-width: 720px; margin-bottom: 34px; }
  /* Signed-shirts sub-section inside the stats band ("what happens to Rundoo when
     a store switches"): a step-down heading, separated by space, no divider. */
  .hp-wall-sub { max-width: 720px; margin: 72px 0 34px; }
  .hp-wall-subtitle {
    font-family: var(--font-display); font-weight: 800; font-size: 30px;
    line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0;
    text-wrap: balance;
  }
  @media (max-width: 767px) { .hp-wall-sub { margin-top: 52px; } }
  /* Signed-tees band: beige, centered heading over text (left) + carousel (right). */
  .hp-tees { background: var(--paper-2); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 76px 32px; }
  .hp-tees-head { text-align: center; }
  .hp-tees-head .hp-h2 { margin-left: auto; margin-right: auto; }
  .hp-tees-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; margin-top: 8px; }
  .hp-tees-text { display: flex; flex-direction: column; justify-content: center; }
  .hp-tees-text .hp-lead { margin-top: 0; }
  .hp-tees-p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; }
  .hp-tees-p:last-of-type { margin-bottom: 4px; }
  .hp-tees-points { margin: 10px 0 0; padding: 0 0 0 20px; list-style: disc; }
  .hp-tees-points li { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 10px; }
  .hp-tees-points li::marker { color: var(--cobalt); }
  .hp-tees-text .hp-wall-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; margin-top: 26px; }
  .hp-tees-bigimg { display: block; max-width: 440px; margin: 0 auto; text-decoration: none; border-radius: 14px; }
  .hp-tees-bigimg:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
  .hp-tees-media .hp-wall-cap { margin-top: 14px; }
  /* "On the wall" strip: full-width row of signed-shirt thumbnails with labels. */
  .hp-tees-why { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); margin: 4px 0 8px; }
  .hp-tees-wall { margin-top: 44px; border-top: 1px solid var(--paper-line); padding-top: 22px; }
  .hp-tees-wall-top { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 14px; min-height: 8px; }
  .hp-tees-wall-label { margin: 0; }
  .hp-tees-wall-nav { display: inline-flex; gap: 8px; }
  .hp-tees-wall-arrow { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--paper-line); background: #fff; border-radius: 50%; color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s; }
  .hp-tees-wall-arrow:hover { border-color: var(--cobalt); color: var(--cobalt); }
  .hp-tees-wall-arrow svg { width: 16px; height: 16px; }
  /* align-items: flex-start keeps every thumbnail image top-aligned (and, since
     they share a 4/3 box, bottom-aligned) even when one card's name wraps to two
     lines and makes that card taller. Without it the row centers, floating the
     shorter cards' images down out of line. */
  .hp-tees-thumbs { display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
  .hp-tees-thumbs::-webkit-scrollbar { display: none; }
  .hp-tees-thumb { flex: 0 0 calc((100% - 64px) / 5); scroll-snap-align: start; display: block; text-align: left; background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
  .hp-tees-thumb-img { display: block; overflow: hidden; border-radius: 10px; border: 1px solid var(--paper-line); background: var(--paper-2); transition: border-color .15s ease, box-shadow .15s ease; }
  .hp-tees-thumb-img img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
  .hp-tees-thumb:hover .hp-tees-thumb-img { border-color: var(--color-cobalt-200); }
  .hp-tees-thumb.is-active .hp-tees-thumb-img { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt); }
  .hp-tees-thumb-name { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--ink); }
  .hp-tees-thumb-loc { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--ink-3); }
  @media (max-width: 767px) { .hp-tees { padding: 56px 20px; } .hp-tees-grid { grid-template-columns: 1fr; gap: 30px; } .hp-tees-thumb { flex-basis: calc((100% - 32px) / 2.4); } }
  /* Referral on its own white band, divided from the beige tees above. */
  .hp-ref.hp-ref--section { background: #fff; }
  .hp-ref--section .hp-ref-grid { max-width: 720px; }
  /* Spotlight carousel: one signed shirt large, a quiet thumbnail strip beneath.
     One shirt in focus, then the next -- auto-advances slowly, pauses on hover,
     click a thumbnail to pin it. Reduced-motion holds it still. */
  .hp-wall-carousel { max-width: 540px; margin: 0 auto; }
  .hp-wall-stage {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px;
    background: var(--paper-2); border: 1px solid var(--paper-line);
  }
  .hp-wall-slide { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
  .hp-wall-slide.is-active { opacity: 1; pointer-events: auto; }
  .hp-wall-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hp-wall-cap {
    margin: 16px auto 18px; text-align: center; min-height: 2.6em;
    font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.015em; color: var(--ink);
  }
  .hp-wall-cap span { display: block; margin-top: 3px; font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink-3); }
  .hp-wall-thumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
  .hp-wall-thumb {
    width: 50px; height: 50px; padding: 0; cursor: pointer; overflow: hidden;
    border-radius: 8px; border: 1px solid var(--paper-line); background: var(--paper-2);
    opacity: .5; transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
  }
  .hp-wall-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hp-wall-thumb:hover { opacity: .85; }
  .hp-wall-thumb.is-active { opacity: 1; border-color: var(--cobalt); transform: translateY(-2px); }
  .hp-wall-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 22px; margin-top: 26px; }
  .hp-wall-many {
    font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.015em;
    color: var(--ink-2);
  }
  @media (max-width: 767px) {
    .hp-wall-wrap { padding-top: 56px; }
    .hp-wall-thumb { width: 42px; height: 42px; }
  }
  @media (prefers-reduced-motion: reduce) { .hp-wall-slide { transition: none; } }

  /* Rose band: alternates against the white customer-quotes section above. */
  .hp-ai { background: var(--paper-2); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 80px 32px; }
  .hp-ai-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 36px; }
  .hp-ai-eyebrow { background: var(--color-violet-50); border: 1px solid var(--color-violet-200); color: var(--color-violet-700); margin-bottom: 18px; }
  .hp-ai-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px;
    background: var(--paper-2); border: 1px solid var(--paper-line); color: var(--ink);
    border-radius: var(--radius-md); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-control);
    transition: border-color .15s ease, background .15s ease;
  }
  .hp-ai-btn:hover { border-color: var(--color-violet-400); background: var(--paper-3); }
  .hp-ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .hp-ai-card {
    background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg); padding: 28px;
    box-shadow: var(--shadow-control); text-decoration: none; display: block; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .hp-ai-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
  /* Full-bleed AI-chat screenshot banner: negative margins cancel the 28px
     card padding so it spans edge to edge; the card's overflow:hidden rounds it. */
  .hp-ai-card-media { margin: -28px -28px 20px; border-bottom: 1px solid var(--paper-line); background: var(--paper-2); }
  .hp-ai-card-media img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
  .hp-ai-icon { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--color-violet-50); border: 1px solid var(--color-violet-100); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
  .hp-ai-card-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 8px; color: var(--color-violet-700); display: flex; align-items: center; gap: 7px; }
  .hp-ai-card-spark { flex: none; }
  .hp-ai-card-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 18px; }
  .hp-ai-card-foot { border-top: 1px solid var(--paper-line); padding-top: 14px; display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--color-violet-700); }

  /* ---- Primer ---- */
  .hp-primer-grid { display: grid; grid-template-columns: 1fr 1fr 0.92fr; gap: 18px; }
  .hp-note-card {
    display: block; background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    padding: 26px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease;
  }
  .hp-note-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
  .hp-note-meta { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
  .hp-note-title { font-family: var(--font-display); font-size: 18.5px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 10px; color: var(--ink); }
  .hp-note-body { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  .hp-subscribe-card { background: var(--cobalt); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
  .hp-subscribe-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 10px; color: #fff; }
  .hp-subscribe-card p { font-size: 14px; line-height: 1.6; color: var(--color-cobalt-100); margin: 0; }
  .hp-subscribe-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 22px;
    background: #fff; color: var(--cobalt-hover); border-radius: var(--radius-md); font-size: 15px; font-weight: 600;
    text-decoration: none; transition: transform .15s ease;
  }
  .hp-subscribe-btn:hover { transform: translateY(-2px); }

  /* ---- Referral ---- */
  /* Rose band: alternates against the white Primer-notes section above. */
  .hp-ref { background: var(--paper-2); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 84px 32px; }
  .hp-ref-eyebrow-text { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 14px; }
  .hp-ref-grid { display: grid; grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
  .hp-ref-side .hp-ref-eyebrow-text { margin: 0 0 10px; }
  .hp-ref-box-h2 { font-size: 26px; line-height: 1.18; margin: 0 0 12px; }
  .hp-ref-box-lead { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; }
  .hp-ref-box-rule { height: 1px; background: var(--paper-line); margin: 0 0 22px; }
  .hp-ref-main { background: var(--cobalt); border-radius: var(--radius-lg); padding: 44px; color: #fff; position: relative; overflow: hidden; text-decoration: none; display: block; }
  .hp-ref-main-orb { position: absolute; top: -90px; right: -70px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,0.06); }
  .hp-ref-tag { display: inline-flex; align-items: center; padding: 5px 12px; background: rgba(255,255,255,0.14); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-cobalt-100); margin-bottom: 22px; }
  .hp-ref-main h3 { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 14px; color: #fff; max-width: 420px; text-wrap: balance; }
  .hp-ref-main p { font-size: 16.5px; line-height: 1.6; color: var(--color-cobalt-100); margin: 0 0 22px; max-width: 440px; }
  .hp-ref-earn { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; padding: 14px 16px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); max-width: 440px; }
  .hp-ref-earn span { font-size: 15px; line-height: 1.4; color: #fff; }
  .hp-ref-cta { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 24px; background: #fff; color: var(--cobalt-hover); border-radius: var(--radius-md); font-size: 16px; font-weight: 600; text-decoration: none; transition: transform .15s ease; }
  .hp-ref-cta:hover { transform: translateY(-2px); }
  .hp-ref-side { background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-control); display: flex; flex-direction: column; }
  .hp-ref-side h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 22px; color: var(--ink); }
  .hp-ref-list { display: flex; flex-direction: column; gap: 16px; margin: 0 0 26px; padding: 0; list-style: none; }
  .hp-ref-item { display: flex; align-items: flex-start; gap: 13px; }
  .hp-ref-item svg { flex: none; margin-top: 1px; }
  .hp-ref-amount {
    flex: none; min-width: 56px; height: 32px; padding: 0 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-cobalt-50); border: 1px solid var(--color-cobalt-border); border-radius: var(--radius-md);
    font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
    letter-spacing: -0.01em; color: var(--cobalt-hover);
  }
  .hp-ref-item-text { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); padding-top: 2px; }
  .hp-ref-item-text strong { display: block; font-weight: 600; color: var(--ink); }
  .hp-ref-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
  .hp-ref-side-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; background: var(--cobalt); color: #fff; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s ease; }
  .hp-ref-side-btn:hover { background: var(--cobalt-hover); }
  .hp-ref-contact { font-size: 13px; color: var(--ink-3); margin: 18px 0 0; text-align: center; }
  .hp-ref-contact a { color: var(--cobalt); text-decoration: none; font-weight: 500; }

  /* ---- Insights carousel ---- */
  /* White band: alternates against the rose Referral section above. Cards
     keep their own border + shadow, so they stay defined on white. */
  .hp-ins-band { background: #fff; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 84px 0; }
  .hp-ins-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
  /* Final-CTA rose band: alternates against the white Insights band above.
     The .cta section is transparent, so the cobalt card floats on rose. */
  .hp-cta-band { background: var(--paper-2); border-top: 1px solid var(--paper-line); }
  .hp-ins-head h2 { font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1.08; letter-spacing: -0.025em; margin: 0; color: var(--ink); }
  .hp-ins-arrows { display: flex; gap: 8px; }
  .hp-ins-arrow { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--paper); border: 1px solid var(--paper-line); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); transition: border-color .15s ease, color .15s ease; }
  .hp-ins-arrow:hover { border-color: var(--color-cobalt-200); color: var(--cobalt); }
  .hp-ins-track {
    display: flex; align-items: stretch; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 6px 32px 18px; max-width: 1120px; margin: 0 auto;
  }
  .hp-ins-track::-webkit-scrollbar { height: 8px; }
  .hp-ins-track::-webkit-scrollbar-thumb { background: var(--paper-line); border-radius: var(--radius-pill); }
  .hp-ins-track::-webkit-scrollbar-track { background: transparent; }
  .hp-ins-card {
    scroll-snap-align: start; flex: none; width: 340px; background: var(--paper);
    border: 1px solid var(--paper-line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .hp-ins-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
  .hp-ins-card-img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
  .hp-ins-card-body { padding: 22px; }
  .hp-ins-card-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 12px; }
  .hp-ins-card-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0; color: var(--ink); }

  /* Final CTA: shared .cta component (templates/_cta.html, styles in main.css) */

  /* ---- Hero eyebrow pill (carries the "AI-first POS" positioning line) ---- */
  .hp-hero-eyebrow {
    background: var(--color-cobalt-50); border: 1px solid var(--color-cobalt-border);
    color: var(--cobalt-hover); margin-bottom: 22px;
  }

  /* ---- Banner client quote: a rose band between the partner ribbon and the
     industry grid. Full-bleed, so it counts in the rose/white alternation
     (rose here, white industry band below). ---- */
  .hp-quote-band { background: var(--paper-2); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 60px 32px; }
  .hp-quote-inner { max-width: 820px; margin: 0 auto; text-align: center; }
  .hp-quote-text {
    margin: 0 auto; font-family: var(--font-display); font-weight: 800;
    font-size: clamp(22px, 2.8vw, 30px); line-height: 1.35; letter-spacing: -0.015em;
    color: var(--ink); max-width: 22ch; text-wrap: balance;
  }
  .hp-quote-cite { display: block; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--ink); font-style: normal; }
  .hp-quote-cite span { display: block; font-weight: 600; color: var(--ink-3); font-size: 13px; margin-top: 3px; }

  /* ---- "Stores like yours": ONE big quote at a time, crossfading every ~5s
     (the CSAT-video treatment), floating on a CONTAINED faded collage of real
     client photos. White band; it alternates against the rose stats above and
     the rose Dooey band below. The stage is a bounded card, never a full-page
     wash, so the band rhythm stays clean. ---- */
  .hp-stories { background: var(--paper-2); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 74px 32px; }
  /* Montage + live-feedback cards read as one proof cluster -- drop the seam between them. */
  .hp-stories:has(+ .customer-quotes) { border-bottom: none; padding-bottom: 24px; }
  .hp-stories + .customer-quotes { border-top: none; padding-top: 12px; }
  /* Live-feedback line under the montage: centered, a touch larger. */
  .hp-stories + .customer-quotes .cq-subtitle { text-align: center; font-size: 1.2rem; margin-left: auto; margin-right: auto; }
  /* Referral sits directly under the client quotes: continuous white, no divider. */
  .customer-quotes:has(+ .hp-ref--plain) { border-bottom: none; padding-bottom: 16px; }
  .hp-ref--plain { background: #fff; border-top: none; border-bottom: none; padding-top: 8px; }
  .hp-stories-head { text-align: center; margin-bottom: 32px; }
  .hp-stories-head .hp-h2 { margin-left: auto; margin-right: auto; }
  .hp-stories-head .hp-lead { margin-left: auto; margin-right: auto; max-width: 60ch; }
  .hp-stories-eyebrow { background: var(--color-cobalt-50); border: 1px solid var(--color-cobalt-border); color: var(--cobalt-hover); margin-bottom: 16px; }
  .hp-stories-stage {
    position: relative; overflow: hidden; border-radius: 22px; max-width: 1000px; margin: 0 auto;
    min-height: 440px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--paper-line);
  }
  .hp-stories-collage { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
  .hp-stories-veil { position: absolute; inset: 0; z-index: 1; background: rgba(255,255,255,0.84); }
  .hp-bigq { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; text-align: center; padding: 52px 30px; display: flex; flex-direction: column; align-items: center; }
  .hp-bigq-mark { font-family: var(--font-display); font-size: 84px; line-height: .5; color: var(--cobalt); opacity: .45; height: 40px; user-select: none; }
  .hp-bigq-text { margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(22px, 3vw, 34px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); max-width: 20ch; transition: opacity .45s ease; }
  .hp-bigq-rule { width: 46px; height: 3px; background: var(--cobalt); border-radius: 2px; margin: 24px 0 18px; }
  .hp-bigq-cite { font-size: clamp(15px, 1.8vw, 18px); color: var(--ink-3); font-weight: 600; transition: opacity .45s ease; }
  .hp-bigq-cite b { color: var(--ink); font-weight: 800; }
  .hp-bigq.is-swapping .hp-bigq-text, .hp-bigq.is-swapping .hp-bigq-cite { opacity: 0; }
  .hp-stories-foot { text-align: center; margin-top: 28px; }
  .hp-stories-link { display: block; text-decoration: none; color: inherit; cursor: pointer; border-radius: 22px; }
  .hp-stories-link:hover .hp-stories-stage { border-color: var(--color-cobalt-200); }
  .hp-stories-link:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .hp-bigq.is-swapping .hp-bigq-text, .hp-bigq.is-swapping .hp-bigq-cite { opacity: 1; }
  }
  @media (max-width: 900px) {
    .hp-stories-stage { min-height: 400px; border-radius: 16px; }
    .hp-bigq { padding: 40px 20px; }
  }

  /* ===== Touch targets (>=44px tappable height for standalone controls) ===== */
  .hp-tab { padding-top: 13px; }
  .hp-arrow { padding: 6px 0; }
  /* In-card arrows ("Learn more" inside a full-card link) don't need their own
     hit area — the whole card is the target — so drop the extra padding there. */
  .hp-ai-card .hp-arrow { padding: 0; }

  /* ===== Responsive ===== */
  @media (max-width: 960px) {
    .hp-hero h1 { font-size: clamp(32px, 8vw, 48px); }
    .hp-h2, .hp-ins-head h2 { font-size: clamp(28px, 6vw, 38px); }
    .hp-ribbon { grid-template-columns: repeat(3, 1fr); }
    .hp-case-grid { grid-template-columns: 1fr; gap: 28px; }
    .hp-stats-grid { grid-template-columns: 1fr; }
    .hp-ai-grid { grid-template-columns: 1fr; }
    .hp-primer-grid { grid-template-columns: 1fr; }
    .hp-ref-grid { grid-template-columns: 1fr; }
    .hp-ref-main { padding: 32px; }
  }
  @media (max-width: 560px) {
    .hp-hero { padding: 56px 20px 0; }
    .hp-demo-wrap, .hp-pad, .hp-partners, .hp-band, .hp-band-white, .hp-ai, .hp-ref, .hp-wall-wrap, .hp-quote-band, .hp-stories { padding-left: 20px; padding-right: 20px; }
    .hp-ribbon { grid-template-columns: repeat(2, 1fr); }
    .hp-case-quote { font-size: 22px; }
    .hp-stat-num { font-size: 52px; }
    /* Hide the proof dot on phones: the line wraps, so the centered dot
       drifts to the middle-left of the text block instead of sitting next
       to "500+". Dropping it keeps the line clean. */
    .hp-proof-dot { display: none; }
  }
  @media (max-width: 767px) {
    /* Insights carousel: the band has no side padding, so the heading sat at
       the screen edge while the track was inset 32px. Align both to the 20px
       mobile gutter the rest of the page uses. */
    .hp-ins-band .hp-shell { padding-left: 20px; padding-right: 20px; }
    .hp-ins-track { padding-left: 20px; padding-right: 20px; }
  }

  /* ===== Primer + Supply Stories: contained "quiet proof" region (not a full-bleed
         band, so it sits on the white page and stays out of the band-alternation rhythm) ===== */
  .hp-comm { max-width: 1120px; margin: 0 auto; padding: 72px 32px; }
  /* Equal-height boxes at every width: stretch side by side, and 1fr rows keep
     them the same height when they stack on mobile too. */
  .hp-comm-head { text-align: center; margin: 0 0 40px; }
  .hp-comm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
  @media (max-width: 1023px) { .hp-comm-grid { grid-template-columns: 1fr; } }
  /* Side by side, the two carousel columns share the grid's rows (title, intro,
     cards, arrows), so their cards start on the same line however tall each
     intro is: three lines of text on Insights, an email field on the Primer. */
  @supports (grid-template-rows: subgrid) {
    @media (min-width: 1024px) {
      .hp-comm-grid { grid-template-rows: auto auto 1fr auto; row-gap: 0; }
      .hp-comm-grid > .hp-comm-col { grid-row: 1 / span 4; }
      .hp-comm-grid > .hp-primer { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
      .hp-primer > .hp-primer-form { align-self: start; }
      .hp-primer > .hp-primer-viewport { grid-row: 3; }
      .hp-primer > .hp-primer-foot { grid-row: 4; }
    }
  }
  /* Latest-insights feed: cards mirror the Primer card look (paper-2, hairline, 2:1 media). */
  .hp-ins-feed { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; }
  .hp-ins-item { display: block; text-decoration: none; background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: var(--radius-md); padding: 18px; transition: border-color .15s ease, box-shadow .15s ease; }
  .hp-ins-item:hover { border-color: var(--cobalt); box-shadow: var(--shadow-control); }
  .hp-ins-item-media { border-radius: var(--radius-md); overflow: hidden; margin: 0 0 13px; aspect-ratio: 2 / 1; background: var(--paper-3); }
  .hp-ins-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hp-ins-meta { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
  .hp-ins-item .hp-note-title { font-size: 17px; margin: 0 0 6px; }
  .hp-ins-item .hp-note-body { font-size: 13.5px; }
  .hp-comm-col { min-width: 0; background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg); padding: 28px 28px 24px; display: flex; flex-direction: column; }
  .hp-comm-eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 12px; }
  .hp-comm-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; color: var(--ink); margin: 0 0 8px; }
  .hp-comm-title-link { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; transition: color .15s ease; }
  .hp-comm-title-link:hover { color: var(--cobalt); }
  .hp-comm-title-link svg { flex: none; width: 15px; height: 15px; }
  .hp-comm-sub { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; }

  /* Primer carousel: one note at a time, arrows + dots, horizontal scroll-snap */
  /* Flex so the track (and its cards) fill the column's stretched height. */
  .hp-primer-viewport { overflow: hidden; display: flex; }
  .hp-primer-track { flex: 1; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 2px; margin: -2px; scroll-padding-inline: 2px; }
  .hp-primer-track::-webkit-scrollbar { display: none; }
  .hp-primer-card { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: var(--radius-md); padding: 22px 22px 20px; transition: border-color .15s, box-shadow .15s; }
  .hp-primer-card:hover { border-color: var(--cobalt); box-shadow: var(--shadow-control); }
  .hp-primer-card-media { border-radius: var(--radius-md); overflow: hidden; margin: 0 0 16px; background: transparent; aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; }
  .hp-primer-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .hp-primer-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin: 0 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hp-primer .hp-note-title { font-family: var(--font-display); font-size: 18.5px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
  .hp-primer .hp-note-body { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0 0 16px; }
  /* Clamp card text so every card is a uniform height (kills the tall-card dead space). */
  .hp-primer-card .hp-note-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
  .hp-primer-card .hp-note-body { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.65em; }
  .hp-primer-readmore { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--cobalt); }
  .hp-primer-readmore svg { width: 14px; height: 14px; }
  .hp-primer-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
  .hp-primer-nav { display: inline-flex; align-items: center; gap: 10px; }
  .hp-primer-arrow { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--paper-line); background: #fff; border-radius: var(--radius-pill); color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s; }
  .hp-primer-arrow:hover { border-color: var(--cobalt); color: var(--cobalt); }
  .hp-primer-arrow[disabled] { opacity: .4; cursor: default; }
  .hp-primer-arrow svg { width: 16px; height: 16px; }
  .hp-primer-dots { display: inline-flex; gap: 6px; }
  .hp-primer-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-line); border: none; padding: 0; cursor: pointer; transition: background .15s, transform .15s; }
  .hp-primer-dot.is-active { background: var(--cobalt); transform: scale(1.15); }
  /* Subscribe field: input and button share one pill, and the 16px input
     size keeps iOS Safari from zooming the page on focus. */
  .hp-primer-form { display: flex; align-items: center; gap: 6px; margin: 10px 0 20px; padding: 4px; background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-pill); transition: border-color .15s, box-shadow .15s; }
  .hp-primer-form:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-focus-ring); }
  .hp-primer-input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); padding: 7px 4px 7px 14px; outline: none; }
  .hp-primer-input::placeholder { color: var(--ink-3); }
  .hp-primer-submit { flex: none; font: inherit; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--cobalt); border: 0; border-radius: var(--radius-pill); padding: 9px 16px; cursor: pointer; white-space: nowrap; transition: background .15s; }
  .hp-primer-submit:hover { background: var(--color-cobalt-700); }
  .hp-primer-submit:focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 2px; }

  /* Supply Stories promo */
  .hp-pod { background: var(--paper-2); position: relative; }
  .hp-pod-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
  .hp-comm-col.hp-pod:hover { border-color: var(--color-cobalt-200); }
  .hp-pod-art, .hp-pod-listen { position: relative; z-index: 2; }
  .hp-pod-art { display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--paper-line); margin: 0 0 18px; }
  .hp-pod-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s ease; }
  .hp-pod-art:hover img { transform: scale(1.02); }
  .hp-pod-ep { background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-md); padding: 12px 14px; margin: 0 0 18px; }
  .hp-pod-ep-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 3px; }
  .hp-pod-ep-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
  .hp-pod-epline { position: relative; z-index: 2; margin: 0 0 18px; }
  .hp-pod-epline-head { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 3px; }
  .hp-pod-epline-detail { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
  .hp-pod-listen { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding-top: 18px; }
  .hp-pod-listen-link { font-size: 12.5px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--paper-line); background: #fff; border-radius: var(--radius-pill); padding: 6px 13px; text-decoration: none; transition: border-color .15s, color .15s; }
  .hp-pod-listen-link:hover { border-color: var(--cobalt); color: var(--cobalt); }
  .hp-pod-all { margin-top: auto; font-size: 14px; font-weight: 600; }

  @media (max-width: 767px) {
    .hp-comm { padding: 48px 20px; }
    .hp-comm-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hp-primer-track { scroll-behavior: auto; }
    .hp-pod-art img, .hp-pod-art:hover img { transition: none; transform: none; }
  }