/**
 * PISTON TRIBE — HOMEPAGE (rebuild, 21 Sep 2026).
 * Built from `~/Downloads/homepage-mockup.html` + `homepage-mobile-preview.html`.
 *
 * SCOPED TO `.pt-hp` ON PURPOSE. The mockup uses generic names — `.btn`, `.step`, `.feat`, `.tag`,
 * `.filters`, and `.pt` — which would collide with both GeneratePress and the plugin's own `pt-` classes.
 * Scoping also lifts every rule to (0,2,0), which is what beats the theme's bare-element button styles
 * without reaching for !important. [[reference-css-specificity-theme-override]]
 *
 * The mockup's container queries are real media queries here: 1100px (tablet) and 640px (phone).
 * Colour tokens live in header-footer-global.css — nothing is re-declared in this file.
 */

/* THE CONTENT MEASURE. The mockup declared `--wrap` in a :root block that does not ship (tokens live in
   header-footer-global.css), so every `max-width:var(--wrap)` resolved to nothing and the page ran full
   bleed — Leon: "this one is all too wide". 1100px is the house measure: it is what the plugin's own
   stylesheets declare, and it is what the rest of the site already lines up to.
   ONE LINE TO CHANGE IT. Everything on this page reads from here. */
.pt-hp{--wrap:1240px;background:var(--pt-surface-dim);color:var(--pt-ink);font-size:16px;line-height:1.55}

/* ── FULL BLEED, ONCE ──────────────────────────────────────────────────────────────────────────────
   The theme wraps page content in its own container, so last night's homepage sat inside it and the dark
   bands stopped short — the hero looked like a panel on a page instead of the page itself (Leon's
   screenshot 1 vs the mockup's screenshot 3).
   The break-out happens HERE, once, on the wrapper. Everything inside is then ordinary flow: the bands
   fill `.pt-hp`, and `.wrap` pulls the words back to the measure. Doing it per-section would mean six
   break-outs and six chances to leak a horizontal scrollbar.
   `overflow-x: clip` is the guard: 100vw counts the scrollbar and 50% does not, so on a scrolling page
   the break-out overshoots by a few pixels. `clip` trims them without creating a scroll container the
   way `hidden` would — and the brief's acceptance is no horizontal scroll at any width. */
.pt-hp{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow-x:clip}
.pt-hp *{box-sizing:border-box}
.pt-hp a{color:inherit;text-decoration:none}

/* ============================================================
   PISTON TRIBE — HOMEPAGE v2
   Core tokens from the design system, plus a small marketing
   palette (bone, oxblood, graphite) derived from brand red.
   Rules:
   1. Heavy all-caps display only on full-width dark bands.
   2. Brand red is an accent. Buttons are ink (or bone on dark).
   3. Amber and green keep their system meaning even here:
      amber = money held, green = released / verified.
   Tokens marked ASSUMED: confirm against design-tokens.md.
   ============================================================ */

.pt-hp *{box-sizing:border-box}
/* was `html,body{margin:0}` in the mockup. Scoping turned it into a reset ON the wrapper, which sat
   after the full-bleed rule and cancelled it — the bands stopped at the theme container. */
.pt-hp{-webkit-font-smoothing:antialiased}
.pt-hp a{color:inherit;text-decoration:none}
.pt-hp .mono{font-family:var(--pt-mono);font-variant-numeric:tabular-nums}
.pt-hp .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.pt-hp .sec{padding:104px 0}
.pt-hp .sec.tight{padding:72px 0}
.pt-hp .white{background:var(--pt-surface)}
.pt-hp .bone{background:var(--pt-bone)}
.pt-hp .hair{border-top:1px solid var(--pt-border)}

/* type */
.pt-hp .idx{font-family:var(--pt-mono);font-size:12.5px;color:var(--pt-ink-3);letter-spacing:.02em}
.pt-hp .dk .idx{color:var(--pt-on-dark-mute)}
.pt-hp .eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--pt-ink-2);margin:0 0 16px}
.pt-hp .eyebrow::before{content:"";width:18px;height:2px;background:var(--pt-brand)}
.pt-hp .dk .eyebrow{color:var(--pt-on-dark-mute)}
.pt-hp .display{font-weight:800;letter-spacing:-.03em;line-height:.98;margin:0;text-transform:uppercase}
.pt-hp .h2{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 16px}
.pt-hp .lede{font-size:18px;color:var(--pt-ink-2);max-width:620px;margin:0}
.pt-hp .dk .lede{color:var(--pt-on-dark-mute)}
.pt-hp .dk{color:var(--pt-on-dark)}

/* buttons */
.pt-hp .btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;font:inherit;font-size:15px;font-weight:600;border:1px solid var(--pt-ink);background:var(--pt-ink);color:#fff;cursor:pointer;white-space:nowrap}
.pt-hp .btn.bone{background:var(--pt-bone);color:var(--pt-ink);border-color:var(--pt-bone)}
.pt-hp .btn.outline{background:transparent;color:var(--pt-ink)}
.pt-hp .dk .btn.outline{color:var(--pt-on-dark);border-color:var(--pt-on-dark-mute)}
.pt-hp .btn.block{width:100%}
.pt-hp .btn:focus-visible,.pt-hp .tlink:focus-visible{outline:2px solid var(--pt-accent);outline-offset:3px}
.pt-hp .tlink{font-size:15px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:2px}
.pt-hp .cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* placeholders */
/* Real photos in the build; the tone only shows while one is missing. */
.pt-hp .ph{position:relative;background:var(--pt-fill-control);overflow:hidden;background-size:cover;background-position:center}
.pt-hp .ph img{width:100%;height:100%;object-fit:cover;display:block}
/* 🔴 `background-image`, NOT the `background` SHORTHAND (fixed 22 Sep). These two are only the fallback
   tone for a tile with no photo yet — but written as the shorthand they also reset `background-size` back
   to `auto`, and `auto` beat the `cover` set one line above. The inline `background-image:url(…)` still
   won, so the photo appeared at its NATURAL size inside the tile: a 2560px-wide gift shot rendered 1:1
   in a 483px window, which is why the promo tiles looked like extreme close-ups rather than blurry
   upscales. A shorthand is never a small edit — it silently writes every longhand it covers. */
.pt-hp .ph.dark{background-image:linear-gradient(135deg,#2E2B27,#45403A)}
.pt-hp .ph.ox{background-image:linear-gradient(135deg,#4A1814,#6B241D)}



.pt-hp .shield{width:13px;height:13px;flex:none;vertical-align:-2px}
.pt-hp .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}

/* mockup scaffolding */

/* ---------- header ---------- */
.pt-hp .hdr{background:var(--pt-surface);border-bottom:1px solid var(--pt-border)}
.pt-hp .hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:80px;max-width:1380px}
.pt-hp .logo{font-weight:900;font-size:24px;letter-spacing:-.02em;border:2px solid var(--pt-brand);padding:2px 10px;line-height:1.2}
.pt-hp .logo b{color:var(--pt-brand)}
.pt-hp .nav{display:flex;gap:32px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.pt-hp .hdr-r{display:flex;align-items:center;gap:22px;font-size:13px}
.pt-hp .bal small{display:block;font-size:11px;color:var(--pt-ink-3)}
.pt-hp .ico{width:22px;height:22px;border:1.5px solid var(--pt-ink)}
.pt-hp .ico.round{border-radius:50%;background:var(--pt-fill-control)}

/* =========================================================
   HERO OPTIONS
   ========================================================= */
.pt-hp .hero{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.pt-hp .hp{padding:56px 56px 48px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.pt-hp .hp-top{display:flex;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid;margin-bottom:auto}
.pt-hp .hp .display{font-size:88px;margin:72px 0 22px}
.pt-hp .hp p.body{font-size:18px;max-width:440px;margin:0 0 32px}
.pt-hp .hp .cta{margin-bottom:44px}

/* ---- Option C: one dark field, duotone ---- */
.pt-hp .C{background:var(--pt-graphite);color:var(--pt-on-dark);position:relative}
.pt-hp .C .hero{min-height:600px}
.pt-hp .C .store{border-right:1px solid var(--pt-dark-line)}
.pt-hp .C .market{background:linear-gradient(180deg,rgba(90,26,21,0) 0%,rgba(90,26,21,.55) 100%)}
.pt-hp .C .hp-top{border-color:var(--pt-dark-line)}
.pt-hp .C p.body{color:var(--pt-on-dark-mute)}
.pt-hp .C .big-n{position:absolute;right:32px;bottom:-40px;font-weight:900;font-size:260px;line-height:1;color:rgba(243,241,235,.04);letter-spacing:-.06em;pointer-events:none}
.pt-hp .C .strip{display:flex;gap:10px;flex-wrap:wrap}
.pt-hp .C .chip{font-size:13px;padding:6px 12px;border:1px solid var(--pt-dark-line);color:var(--pt-on-dark-mute)}

/* ---------- trust bar ---------- */
.pt-hp .trust{background:var(--pt-surface);border-bottom:1px solid var(--pt-border)}
.pt-hp .trust .wrap{display:grid;grid-template-columns:repeat(5,1fr)}
.pt-hp .t-item{display:flex;gap:12px;align-items:flex-start;padding:24px 18px;border-left:1px solid var(--pt-border)}
.pt-hp .t-item:first-child{border-left:0;padding-left:0}
.pt-hp .t-ico{width:20px;height:20px;flex:none;margin-top:2px}
.pt-hp .t-item b{display:block;font-size:14px;font-weight:600}
.pt-hp .t-item span{font-size:13px;color:var(--pt-ink-3)}

/* =========================================================
   MARKETPLACE — bento
   ========================================================= */
.pt-hp .mk-head{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end;margin:0 0 48px}
.pt-hp .tags{display:flex;gap:8px;margin:0 0 20px}
.pt-hp .tag{font-size:13px;font-weight:600;padding:5px 10px;border:1px solid var(--pt-border-strong);background:var(--pt-surface)}
.pt-hp .tag.ink{background:var(--pt-ink);color:#fff;border-color:var(--pt-ink);display:inline-flex;gap:6px;align-items:center}
.pt-hp .mk-copy p{font-size:17px;color:var(--pt-ink-2);margin:0 0 14px}
.pt-hp .mk-copy strong{color:var(--pt-ink);font-weight:600}
/* ── THE CATEGORY FILTER ──────────────────────────────────────────────────────────────────────────
   The mockup drew these as <button>; they ship as <a> because each one is a real URL into the
   marketplace (a tab that changes the page without being a link is a tab you cannot open in a new
   window, and there is no AJAX route on this page). So the rules target the CHILDREN, not the tag —
   which is also what stopped them getting any styling at all. */
.pt-hp .filters{display:inline-flex;gap:0;border:1px solid var(--pt-border-strong);width:max-content;max-width:100%;margin:0 0 20px;background:var(--pt-surface)}
.pt-hp .filters > *{
    font:inherit;font-size:14px;font-weight:500;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    padding:11px 18px;background:var(--pt-surface);color:var(--pt-ink);
    border:0;border-left:1px solid var(--pt-border-strong);border-radius:0;
    cursor:pointer;white-space:nowrap;text-decoration:none;
    transition:background-color .12s ease,color .12s ease;
}
.pt-hp .filters > *:first-child{border-left:0}
/* Hover DIMS the surface, it never recolours — the same rule every button on the site follows.
   [[feedback-button-hover-noir]] */
.pt-hp .filters > *:hover{background:var(--pt-fill-control);color:var(--pt-ink)}
.pt-hp .filters > *.on{background:var(--pt-ink);color:var(--pt-on-primary)}
.pt-hp .filters > *.on:hover{background:#1f1f1f}
.pt-hp .filters > *:focus-visible{outline:2px solid var(--pt-accent);outline-offset:-2px;position:relative;z-index:1}
.pt-hp .bento{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:16px}
.pt-hp .lcard{background:var(--pt-surface);border:1px solid var(--pt-border);display:flex;flex-direction:column}
.pt-hp .lcard .ph{aspect-ratio:4/3}
.pt-hp .lcard.feature{grid-row:span 2}
.pt-hp .lcard.feature .ph{aspect-ratio:auto;flex:1;min-height:360px}
.pt-hp .lbody{padding:14px 16px 16px;display:flex;justify-content:space-between;gap:12px;align-items:flex-end}
.pt-hp .ltitle{font-size:15px;font-weight:600;margin:0 0 3px}
.pt-hp .lcard.feature .ltitle{font-size:22px;font-weight:700;letter-spacing:-.01em}
.pt-hp .lmeta{font-size:13px;color:var(--pt-ink-3);margin:0;display:flex;gap:6px;align-items:center}
.pt-hp .lprice{font-family:var(--pt-mono);font-size:17px;font-weight:600;white-space:nowrap}
.pt-hp .lcard.feature .lprice{font-size:22px}
.pt-hp .mk-foot{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--pt-border)}


/* =========================================================
   BUILT DIFFERENT — receipt
   ========================================================= */
.pt-hp .bd{background:var(--pt-graphite)}
.pt-hp .bd-grid{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center}
.pt-hp .bd .display{font-size:72px;margin:0 0 24px}
.pt-hp .receipt{background:var(--pt-bone);color:var(--pt-ink);padding:28px 28px 20px;position:relative;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transform:rotate(1.2deg)}
.pt-hp .receipt::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:radial-gradient(circle at 6px -2px,transparent 6px,var(--pt-bone) 6.5px) 0 0/12px 10px repeat-x}
.pt-hp .rc-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px dashed var(--pt-border-strong);margin-bottom:6px}
.pt-hp .rc-h b{font-size:15px}
.pt-hp .rc-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--pt-bone-2);font-size:14px}
.pt-hp .rc-row:last-of-type{border-bottom:0}
.pt-hp .rc-row span:first-child{color:var(--pt-ink-2)}
.pt-hp .rc-row span:last-child{font-weight:600;display:flex;align-items:center;gap:8px;text-align:right}
.pt-hp .rc-foot{margin-top:12px;padding-top:12px;border-top:1px dashed var(--pt-border-strong);font-family:var(--pt-mono);font-size:11.5px;color:var(--pt-ink-3);display:flex;justify-content:space-between}

.pt-hp .feat4{display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px;border-top:1px solid var(--pt-dark-line)}
.pt-hp .feat{padding:28px 28px 0 0}
.pt-hp .feat + .feat{padding-left:28px;border-left:1px solid var(--pt-dark-line)}
.pt-hp .feat-ico{width:26px;height:26px;margin:0 0 18px}
.pt-hp .feat h3{font-size:17px;font-weight:700;margin:0 0 10px;color:var(--pt-on-dark)}
.pt-hp .feat p{font-size:14.5px;color:var(--pt-on-dark-mute);margin:0}
.pt-hp .feat .zero{font-family:var(--pt-mono);font-size:40px;font-weight:600;color:var(--pt-on-dark);line-height:1;margin:0 0 14px;display:flex;align-items:baseline;gap:10px}
.pt-hp .feat .zero small{font-size:13px;font-weight:600;color:var(--pt-brand);background:var(--pt-bone);padding:2px 8px}

/* =========================================================
   SHOP
   ========================================================= */
.pt-hp .promo{display:grid;grid-template-columns:7fr 5fr;grid-template-rows:1fr 1fr;gap:16px;height:560px}
.pt-hp .pt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:var(--pt-on-dark)}
.pt-hp .pt .ph{position:absolute;inset:0}
.pt-hp .pt::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,26,26,0) 35%,rgba(26,26,26,.85));z-index:1}
.pt-hp .pt > *:not(.ph){position:relative;z-index:2}
.pt-hp .pt.big{grid-row:span 2}
.pt-hp .pt small{font-size:13px;font-weight:600;color:var(--pt-on-dark-mute)}
.pt-hp .pt h3{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:4px 0 12px}
.pt-hp .pt.big h3{font-size:48px}
.pt-hp .pt .tlink{align-self:flex-start;font-size:14px}

.pt-hp .cat-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:stretch}
.pt-hp .cat-list{border-top:1px solid var(--pt-ink)}
.pt-hp .cat-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--pt-border)}
.pt-hp .cat-row b{font-size:26px;font-weight:700;letter-spacing:-.02em}
.pt-hp .cat-row .go{font-size:14px;font-weight:600;color:var(--pt-ink-3)}
.pt-hp .cat-row.on b{color:var(--pt-brand)}
.pt-hp .cat-row.on .go{color:var(--pt-ink)}
.pt-hp .cat-img{min-height:420px}

.pt-hp .prods{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--pt-border);border-left:1px solid var(--pt-border)}
.pt-hp .pcard{background:var(--pt-surface);border-right:1px solid var(--pt-border);border-bottom:1px solid var(--pt-border);padding:20px}
.pt-hp .pcard .ph{aspect-ratio:1/1;margin:0 0 18px}
.pt-hp .pbrand{font-size:12px;color:var(--pt-ink-3);margin:0 0 2px;min-height:18px}
.pt-hp .ptitle{font-size:15px;font-weight:600;margin:0 0 14px}
.pt-hp .prow{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--pt-border)}
.pt-hp .pnow{font-family:var(--pt-mono);font-size:17px;font-weight:600}
.pt-hp .pwas{font-family:var(--pt-mono);font-size:13px;color:var(--pt-ink-3)}
.pt-hp .psale{font-size:12px;font-weight:600;color:var(--pt-brand)}

.pt-hp .merch{display:grid;grid-template-columns:1fr 1fr;background:var(--pt-oxblood);color:var(--pt-on-dark);min-height:460px}
.pt-hp .merch-copy{padding:80px 64px;display:flex;flex-direction:column;justify-content:center}
.pt-hp .merch-copy .display{font-size:80px;margin:0 0 20px}
.pt-hp .merch-copy p{font-size:18px;color:var(--pt-on-dark-mute);max-width:440px;margin:0 0 32px}
.pt-hp .merch-imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px}

/* =========================================================
   COMMUNITY
   ========================================================= */
.pt-hp .tribes{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
.pt-hp .tribes .sticky{position:sticky;top:24px}
.pt-hp .tr-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pt-hp .tcard{background:var(--pt-surface);border:1px solid var(--pt-border);display:flex;flex-direction:column}
.pt-hp .tcard .ph{aspect-ratio:16/11}
.pt-hp .tbody{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.pt-hp .tcat{font-size:12px;font-weight:600;color:var(--pt-ink-3);margin:0 0 6px}
.pt-hp .tname{font-size:17px;font-weight:700;margin:0 0 4px}
.pt-hp .tdesc{font-size:14px;color:var(--pt-ink-2);margin:0 0 14px}
.pt-hp .tfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--pt-border)}
.pt-hp .tfoot .mono{font-size:12.5px;color:var(--pt-ink-3)}
.pt-hp .stack{display:flex;flex-direction:column;gap:12px;margin-top:32px;max-width:320px}

.pt-hp .board{display:grid;grid-template-columns:5fr 7fr;gap:24px}
.pt-hp .pnl{background:var(--pt-surface);border:1px solid var(--pt-border);padding:28px;display:flex;flex-direction:column}
.pt-hp .pnl h3{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:0 0 6px}
.pt-hp .pnl > p{font-size:15px;color:var(--pt-ink-2);margin:0 0 18px}
.pt-hp .lrow{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--pt-border)}
.pt-hp .lrow .ph{width:44px;height:44px;flex:none}
.pt-hp .lrow b{display:block;font-size:15px;font-weight:600}
.pt-hp .lrow span{font-size:13px;color:var(--pt-ink-3)}
.pt-hp .pnl .btn{margin-top:auto}
.pt-hp .rows{margin:0 0 22px}
/* The forum list. Rows, not table cells: the count sits in its own block with its label under it, so
   nothing has to be right-aligned against a border to be readable. */
.pt-hp .flist{margin:0 0 22px;border-top:1px solid var(--pt-border)}
.pt-hp .frow{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--pt-border)}
.pt-hp .frow:hover .ftext b{text-decoration:underline}
.pt-hp .ftext{min-width:0}
.pt-hp .ftext b{display:block;font-size:15px;font-weight:600;line-height:1.35;margin:0 0 3px}
.pt-hp .ftext small{font-size:13px;color:var(--pt-ink-3)}
.pt-hp .fnum{flex:none;text-align:right;font-size:17px;font-weight:600;line-height:1.2}
.pt-hp .fnum small{display:block;font-family:var(--pt-sans);font-size:11.5px;font-weight:500;color:var(--pt-ink-3)}

.pt-hp .members{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:40px;background:var(--pt-surface);border:1px solid var(--pt-border)}
.pt-hp .members h2{font-size:32px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.pt-hp .members p{margin:0;color:var(--pt-ink-2)}
.pt-hp .faces{display:flex;align-items:center}
.pt-hp .face{text-align:center;width:104px}
.pt-hp .av{width:72px;height:72px;border-radius:50%;margin:0 auto 8px;border:3px solid var(--pt-surface);box-shadow:0 0 0 1px var(--pt-border)}
.pt-hp .face b{font-size:13px;font-weight:600}
.pt-hp .members .cta{gap:16px}

/* =========================================================
   GUIDES — magazine
   ========================================================= */
.pt-hp .mag{display:grid;grid-template-columns:7fr 5fr;gap:48px}
.pt-hp .lead .ph{aspect-ratio:16/10;margin:0 0 20px}
.pt-hp .lead .idx{display:block;margin:0 0 10px}
.pt-hp .lead h3{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 12px}
.pt-hp .lead p{color:var(--pt-ink-2);margin:0 0 16px;max-width:560px}
.pt-hp .glist{border-top:1px solid var(--pt-ink)}
.pt-hp .grow{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--pt-border);align-items:start}
.pt-hp .grow .ph{aspect-ratio:4/3}
.pt-hp .grow .idx{display:block;margin:0 0 4px}
.pt-hp .grow b{font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.01em}

/* =========================================================
   STORY
   ========================================================= */
.pt-hp .story{display:grid;grid-template-columns:7fr 5fr;background:var(--pt-surface);border-top:1px solid var(--pt-border)}
.pt-hp .story-copy{padding:96px 72px}
.pt-hp .quote{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0 0 36px}
.pt-hp .quote em{font-style:normal;color:var(--pt-brand)}
.pt-hp .story-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.pt-hp .story-cols p{font-size:16px;color:var(--pt-ink-2);margin:0 0 16px}
.pt-hp .story-cols strong{color:var(--pt-ink);font-weight:600}
.pt-hp .story .ph{min-height:680px}

/* =========================================================
   NEWSLETTER + FOOTER
   ========================================================= */
.pt-hp .nl{background:radial-gradient(110% 120% at 0% 100%,var(--pt-oxblood-2) 0%,var(--pt-oxblood) 50%,#240B0A 100%);color:var(--pt-on-dark);position:relative;overflow:hidden}
.pt-hp .nl-grid{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center}
.pt-hp .nl .display{font-size:76px;margin:0 0 22px}
.pt-hp .nl-lede{font-size:18px;color:var(--pt-on-dark-mute);max-width:520px;margin:0 0 32px}
.pt-hp .nl-form{display:flex;max-width:560px}
.pt-hp .nl-form input{flex:1;height:58px;padding:0 18px;font:inherit;font-size:16px;background:rgba(243,241,235,.06);border:1px solid rgba(243,241,235,.35);border-right:0;color:var(--pt-on-dark);border-radius:0}
.pt-hp .nl-form input::placeholder{color:var(--pt-on-dark-mute)}
.pt-hp .nl-form input:focus{outline:2px solid var(--pt-accent);outline-offset:-2px}
.pt-hp .nl-form .btn{height:58px;padding:0 28px}
.pt-hp .nl-fine{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--pt-on-dark-mute);margin:14px 0 0}
.pt-hp .nl-fine span{display:flex;align-items:center;gap:6px}
.pt-hp .nl-fine span::before{content:"";width:4px;height:4px;background:var(--pt-on-dark-mute)}
.pt-hp .nl-fine span:first-child::before{display:none}

/* coupon ticket */
.pt-hp .ticket{background:var(--pt-bone);color:var(--pt-ink);display:grid;grid-template-columns:1fr 92px;position:relative;transform:rotate(-2deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.pt-hp .ticket::before,.pt-hp .ticket::after{content:"";position:absolute;right:81px;width:22px;height:22px;border-radius:50%;background:#3B1210}
.pt-hp .ticket::before{top:-11px}.ticket::after{bottom:-11px}
.pt-hp .tk-main{padding:26px 26px 22px;border-right:2px dashed var(--pt-border-strong)}
.pt-hp .tk-main .idx{display:block;margin:0 0 6px}
.pt-hp .tk-main .tk-off{font-family:var(--pt-mono);font-size:64px;font-weight:600;line-height:1;letter-spacing:-.04em;margin:0 0 6px}
.pt-hp .tk-off small{font-size:22px;letter-spacing:0}
.pt-hp .tk-main p{margin:0;font-size:14px;color:var(--pt-ink-2)}
.pt-hp .tk-code{margin-top:16px;display:flex;align-items:center;gap:10px;font-family:var(--pt-mono);font-size:14px}
.pt-hp .tk-code span{padding:6px 10px;border:1px dashed var(--pt-ink-3);letter-spacing:.12em;color:var(--pt-ink-3)}
.pt-hp .tk-stub{display:flex;align-items:center;justify-content:center}
.pt-hp .tk-stub b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pt-brand)}

/* latest issue */
.pt-hp .issue{margin-top:36px;border-top:1px solid rgba(243,241,235,.2)}
.pt-hp .issue-h{display:flex;justify-content:space-between;padding:12px 0 4px;font-size:12.5px;color:var(--pt-on-dark-mute)}
.pt-hp .issue-row{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:11px 0;border-top:1px solid rgba(243,241,235,.1);font-size:14.5px}
.pt-hp .issue-row .kind{font-family:var(--pt-mono);font-size:12px;color:var(--pt-on-dark-mute);padding-top:2px}

/* success state */
.pt-hp .nl-ok{display:flex;align-items:center;gap:16px;max-width:560px;padding:16px 18px;border:1px solid rgba(243,241,235,.35);background:rgba(243,241,235,.06)}
.pt-hp .nl-ok .tick{width:22px;height:22px;flex:none}
.pt-hp .nl-ok b{display:block;font-size:15px}
.pt-hp .nl-ok span{font-size:13.5px;color:var(--pt-on-dark-mute)}
.pt-hp .nl-ok code{font-family:var(--pt-mono);font-size:15px;font-weight:600;color:var(--pt-on-dark);letter-spacing:.1em;border-bottom:1px dashed var(--pt-on-dark-mute)}

.pt-hp .ftr{background:#141311;color:var(--pt-on-dark);padding:72px 0 32px}
.pt-hp .ftr-grid{display:grid;grid-template-columns:5fr 3fr 4fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--pt-dark-line)}
.pt-hp .ftr .logo{display:inline-block;margin:0 0 16px}
.pt-hp .ftr p{color:var(--pt-on-dark-mute);font-size:14px;margin:0;max-width:300px}
.pt-hp .flinks{display:flex;flex-direction:column;gap:12px;font-size:15px}
.pt-hp .socials{display:flex;gap:12px;justify-content:flex-end}
.pt-hp .soc{width:36px;height:36px;border:1px solid var(--pt-dark-line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--pt-on-dark-mute)}
.pt-hp .pay{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--pt-dark-line)}
.pt-hp .pay small{font-size:13px;color:var(--pt-on-dark-mute);margin-right:8px}
.pt-hp .pm{font-size:12px;font-weight:600;padding:6px 10px;border:1px solid var(--pt-dark-line)}
.pt-hp .legal{display:flex;gap:20px;font-size:13px;color:var(--pt-on-dark-mute);padding-top:20px}

/* =========================================================
   RESPONSIVE
   Written as container queries on .page so the phone preview
   file can render the real mobile layout inside a desktop
   browser. In the build, use the same breakpoints as
   @media (max-width:1100px) and @media (max-width:640px).
   ========================================================= */

.pt-hp .burger{display:none;width:22px;height:16px;position:relative;flex:none}
.pt-hp .burger::before,.pt-hp .burger::after,.pt-hp .burger i{content:"";position:absolute;left:0;right:0;height:2px;background:var(--pt-ink)}
.pt-hp .burger::before{top:0}.burger i{top:7px}.burger::after{bottom:0}
.pt-hp .hdr-l{display:flex;align-items:center;gap:16px}

/* ---------------- tablet ---------------- */
@media (max-width:1100px){
  .pt-hp .wrap{padding:0 28px}
  .pt-hp .nav{display:none}
  .pt-hp .burger{display:block}
  .pt-hp .hp{padding:40px 32px 36px}
  .pt-hp .hp .display{font-size:60px;margin:48px 0 18px}
  .pt-hp .hp-top span:last-child{display:none}
  .pt-hp .trust .wrap{grid-template-columns:repeat(3,1fr)}
  .pt-hp .t-item:nth-child(4){border-left:0;padding-left:0}
  .pt-hp .mk-head,.pt-hp .hw-head,.pt-hp .bd-grid,.pt-hp .cat-grid,.pt-hp .board,.pt-hp .mag,.pt-hp .nl-grid{grid-template-columns:1fr;gap:32px}
  .pt-hp .mk-head .cta{justify-content:flex-start!important}
  .pt-hp .bento{grid-template-columns:1fr 1fr}
  .pt-hp .lcard.feature{grid-column:span 2;grid-row:auto}
  .pt-hp .lcard.feature .ph{min-height:320px}
  .pt-hp .steps{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .pt-hp .feat4{grid-template-columns:1fr 1fr}
  .pt-hp .feat:nth-child(3){border-left:0;padding-left:0}
  .pt-hp .feat:nth-child(n+3){border-top:1px solid var(--pt-dark-line);margin-top:28px}
  .pt-hp .prods{grid-template-columns:repeat(3,1fr)}
  .pt-hp .promo{height:480px}
  .pt-hp .tribes{grid-template-columns:1fr;gap:36px}
  .pt-hp .tribes .sticky{position:static}
  .pt-hp .story{grid-template-columns:1fr}
  .pt-hp .story .ph{order:-1;min-height:420px}
  .pt-hp .story-copy{padding:72px 28px}
  .pt-hp .merch{grid-template-columns:1fr}
  .pt-hp .merch-imgs{order:-1;height:320px}
  .pt-hp .receipt{transform:rotate(.6deg)}
  .pt-hp .ticket{max-width:520px}
}

/* ---------------- phone ---------------- */
@media (max-width:640px){
  .pt-hp .wrap{padding:0 20px}
  .pt-hp .sec{padding:56px 0}
  .pt-hp .sec.tight{padding:44px 0}
  .pt-hp .h2{font-size:32px;line-height:1.1}
  .pt-hp .lede{font-size:16px}
  .pt-hp .eyebrow{margin-bottom:12px}

  /* buttons: primary full width, text links sit under */
  .pt-hp .cta{gap:16px}
  .pt-hp .cta .btn{flex:1 1 100%}

  /* header */
  .pt-hp .hdr .wrap{height:60px;padding:0 16px}
  .pt-hp .logo{font-size:15px;padding:1px 6px;border-width:1.5px}
  .pt-hp .hdr-r{gap:14px}
  .pt-hp .bal small{font-size:9px}
  .pt-hp .bal .mono{font-size:12px}
  .pt-hp .ico{width:20px;height:20px}

  /* hero: two stacked panels */
  .pt-hp .hero{grid-template-columns:1fr;min-height:0}
  .pt-hp .hp{padding:24px 20px 28px}
  .pt-hp .hp-top{padding-bottom:14px;margin-bottom:0}
  .pt-hp .hp .display{font-size:52px;margin:36px 0 14px}
  .pt-hp .hp p.body{font-size:16px;margin-bottom:22px}
  .pt-hp .hp .cta{margin-bottom:24px}
  .pt-hp .C .store{border-right:0;border-bottom:1px solid var(--pt-dark-line)}
  .pt-hp .C .strip{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:0 20px;scrollbar-width:none}
  .pt-hp .C .chip{flex:none}
  .pt-hp .C .big-n{display:none}

  /* trust bar: swipeable strip */
  .pt-hp .trust .wrap{display:flex;overflow-x:auto;padding:0;scrollbar-width:none}

  /* marketplace */
  .pt-hp .mk-head{margin-bottom:28px}
  .pt-hp .mk-copy p{font-size:16px}
  /* On a phone the segmented control becomes separate chips that scroll — five joined tabs at 320px
     would either shrink the labels to nothing or push the page sideways. */
  .pt-hp .filters{display:flex;width:auto;max-width:none;margin:0 -20px 16px;padding:0 20px;border:0;background:none;overflow-x:auto;gap:8px;scrollbar-width:none}
  .pt-hp .filters::-webkit-scrollbar{display:none}
  .pt-hp .filters > *{flex:none;border:1px solid var(--pt-border-strong);padding:9px 14px}
  .pt-hp .bento{grid-template-columns:1fr 1fr;gap:12px}
  .pt-hp .lcard.feature{grid-column:span 2}
  .pt-hp .lcard.feature .ph{min-height:0;aspect-ratio:4/3}
  .pt-hp .lbody{flex-direction:column;align-items:flex-start;gap:6px;padding:12px}
  .pt-hp .ltitle{font-size:14px}
  .pt-hp .lcard.feature .ltitle,.pt-hp .lcard.feature .lprice{font-size:18px}
  .pt-hp .lmeta{font-size:12px}
  .pt-hp .lprice{font-size:15px}
  .pt-hp .mk-foot{flex-direction:column;align-items:flex-start;gap:10px}

  /* built different */
  .pt-hp .bd .display{font-size:44px}
  .pt-hp .bd-grid{gap:36px}
  .pt-hp .receipt{padding:20px 18px 16px;transform:rotate(.6deg)}
  .pt-hp .rc-row{font-size:13.5px}
  .pt-hp .feat4{grid-template-columns:1fr;margin-top:44px}
  .pt-hp .feat{display:grid;grid-template-columns:30px 1fr;column-gap:14px;padding:22px 0!important;border-left:0!important;border-top:1px solid var(--pt-dark-line);margin-top:0!important}
  .pt-hp .feat:first-child{border-top:0}
  .pt-hp .feat-ico{grid-row:span 2;margin:2px 0 0;width:24px;height:24px}
  .pt-hp .feat > :not(.feat-ico){grid-column:2}
  .pt-hp .feat:has(.zero) > *{grid-column:1 / -1}
  .pt-hp .feat .zero{font-size:34px;margin-bottom:10px}
  .pt-hp .feat h3{margin-bottom:6px}

  /* shop: promo */
  .pt-hp .promo{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;gap:12px}
  .pt-hp .pt{min-height:190px;padding:16px}
  .pt-hp .pt.big{grid-column:1 / -1;grid-row:auto;min-height:320px;padding:22px}
  .pt-hp .pt h3{font-size:21px;margin-bottom:8px}
  .pt-hp .pt.big h3{font-size:34px}
  .pt-hp .pt small{font-size:12px}
  .pt-hp .pt .tlink{font-size:13px}

  /* shop: category index (no hover on touch — image hidden) */
  .pt-hp .cat-img{display:none}
  .pt-hp .cat-row{grid-template-columns:36px 1fr auto;padding:16px 0}
  .pt-hp .cat-row b{font-size:20px}

  /* shop: best sellers 2-up */
  .pt-hp .prods{grid-template-columns:1fr 1fr}
  .pt-hp .pcard{padding:12px}
  .pt-hp .pcard .ph{margin-bottom:12px}
  .pt-hp .ptitle{font-size:14px;margin-bottom:10px}
  .pt-hp .prow{flex-direction:column;align-items:flex-start;gap:2px;padding-top:10px}
  .pt-hp .pnow{font-size:15px}

  /* every standalone primary action goes full width */
  .pt-hp .merch-copy .btn,.pt-hp .prods + div .btn,.pt-hp .glist .btn{width:100%}
  .pt-hp .prods + div{margin-top:28px!important}

  /* merch */
  .pt-hp .merch{min-height:0}
  .pt-hp .merch-imgs{height:220px}
  .pt-hp .merch-copy{padding:44px 20px 52px}
  .pt-hp .merch-copy .display{font-size:52px}
  .pt-hp .merch-copy p{font-size:16px}

  /* tribes: swipeable cards */
  .pt-hp .stack{max-width:none;margin-top:24px}
  .pt-hp .tribes > *{min-width:0}

  /* community board */
  .pt-hp .board{gap:16px;margin-top:28px!important}
  .pt-hp .pnl{padding:20px}
  .pt-hp .pnl h3{font-size:20px}
  .pt-hp .ftext b{font-size:14px}
  .pt-hp .members{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:20px;padding:24px 20px}
  .pt-hp .members > *{min-width:0}
  .pt-hp .members h2{font-size:24px}
  .pt-hp .faces{overflow-x:auto;margin:0 -20px;padding:0 20px;scrollbar-width:none}
  .pt-hp .face{flex:none;width:84px}
  .pt-hp .face .av{width:60px;height:60px}
  .pt-hp .face b{font-size:12px}

  /* guides */
  .pt-hp .mag{gap:28px}
  .pt-hp .lead h3{font-size:24px}
  .pt-hp .grow{grid-template-columns:84px 1fr;gap:14px;padding:14px 0}
  .pt-hp .grow b{font-size:15px}

  /* story */
  .pt-hp .story .ph{min-height:300px}
  .pt-hp .story-copy{padding:44px 20px 52px}
  .pt-hp .quote{font-size:32px;margin-bottom:24px}
  .pt-hp .story-cols{grid-template-columns:1fr;gap:0}

  /* newsletter */
  .pt-hp .nl .display{font-size:44px}
  .pt-hp .nl-lede{font-size:16px;margin-bottom:24px}
  .pt-hp .nl-form{flex-direction:column;gap:10px}
  .pt-hp .nl-form input{flex:none;height:56px;border-right:1px solid rgba(243,241,235,.35)}
  .pt-hp .nl-form .btn{width:100%}
  .pt-hp .nl-fine{gap:10px}
  .pt-hp .ticket{grid-template-columns:1fr 64px;transform:rotate(-1deg)}
  .pt-hp .ticket::before,.pt-hp .ticket::after{right:53px}
  .pt-hp .tk-main{padding:20px 18px 18px}
  .pt-hp .tk-main .tk-off{font-size:52px}
  .pt-hp .tk-code{flex-wrap:wrap}
  .pt-hp .issue-row{grid-template-columns:78px 1fr;font-size:14px}
  .pt-hp .nl-ok{align-items:flex-start}

  /* footer */
  .pt-hp .ftr{padding:48px 0 28px}
  .pt-hp .ftr-grid{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
  .pt-hp .flinks{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
  .pt-hp .socials{justify-content:flex-start}
  .pt-hp .legal{flex-wrap:wrap;gap:8px 16px}
}

/* ─────────────────────────── FITTING THE MEASURE ───────────────────────────
   These come LAST on purpose. Same specificity as the rules above, so order is the only thing deciding
   them — putting this block near the top (where I first wrote it) meant the original 88px won and nothing
   changed. Equal specificity: the later rule wins. */

/* The hero is full-bleed again, so the mockup's own scale is the right scale — these only pull it back
   on the narrower desktops where two 88px columns would still collide. */
/* BOUNDED AT BOTH ENDS, deliberately. This file already ends with the mockup's 1100px and 640px blocks,
   so an open-ended `max-width:1400px` appended here also matches a phone — and being later, it beat the
   phone rules and pushed a 72px display onto a 390px screen. Third time this ordering has bitten today:
   when a file already has media queries at the bottom, anything appended after them must state its FLOOR
   as well as its ceiling. */
@media (min-width:641px) and (max-width:1400px){
  .pt-hp .hp{padding:48px 44px 44px}
  .pt-hp .hp .display{font-size:72px;margin:60px 0 20px}
}

/* The category panel must never be empty — it is the whole point of that section. */
.pt-hp .cat-img{min-height:420px;background-color:var(--pt-fill-control)}

/* ─────────────────────────── COLOUR ON THE DARK BANDS ───────────────────────────
   `.dk{color:…}` sets an INHERITED colour, and an inherited colour loses to any rule that targets the
   element itself — GeneratePress styles `h1`/`h2`/`h3` with their own colour, so "PRO-GRADE TOOLS"
   rendered near-black on the graphite hero: invisible, and the first thing on the page.
   Named elements here so the rule is about the element, not about inheritance. */
.pt-hp .dk h1, .pt-hp .dk h2, .pt-hp .dk h3,
.pt-hp .dk .display, .pt-hp .dk .h2 { color: var(--pt-on-dark); }
.pt-hp .dk p, .pt-hp .dk .lede, .pt-hp .dk .body { color: var(--pt-on-dark-mute); }
.pt-hp .dk .idx { color: var(--pt-on-dark-mute); }

/* Headings on the light sections get the same treatment for the same reason — the theme's h2 colour is
   close enough to ink to look right until it isn't. */
.pt-hp h1, .pt-hp h2, .pt-hp h3 { color: var(--pt-ink); }
.pt-hp .dk h1, .pt-hp .dk h2, .pt-hp .dk h3 { color: var(--pt-on-dark); }

/* The receipt sits on the dark band but is bone: its own text must NOT inherit the band's light colour. */
.pt-hp .receipt, .pt-hp .receipt b, .pt-hp .receipt span { color: var(--pt-ink); }
.pt-hp .receipt .rc-row span:first-child { color: var(--pt-ink-2); }
.pt-hp .ticket, .pt-hp .ticket p, .pt-hp .ticket .idx { color: var(--pt-ink); }
.pt-hp .ticket .tk-main p { color: var(--pt-ink-2); }
.pt-hp .btn.bone { color: var(--pt-ink); }

/* ─────────────────────────── THE HERO FILLS ITS BAND ───────────────────────────
   Stated explicitly rather than relied upon. The two panels are exactly half each, edge to edge, and the
   band's colour is the only thing that runs wider. Any leftover max-width — from an earlier build, a
   cached stylesheet or a theme rule reaching `.hero` — is overridden here rather than hunted for.
   The second panel had been reading narrow on Leon's screen while measuring 50/50 locally, which is what
   a stale cached stylesheet looks like from the outside. */
.pt-hp .C .hero{width:100%;max-width:none;margin:0}
/* 🔴 THE COLUMN COUNT IS GUARDED BY A FLOOR. Restating `1fr 1fr` unconditionally here — after the 640px
   block and at higher specificity — forced two columns onto phones and squeezed the hero into two
   unreadable slivers. A defensive rule that restates LAYOUT has to be scoped to the breakpoint it is
   defending, or it defends the wrong one. Fourth ordering bite of this rebuild. */
@media (min-width:641px){ .pt-hp .C .hero{grid-template-columns:1fr 1fr} }
.pt-hp .C .hp{min-width:0}                 /* a grid child will not shrink below its content without this */
.pt-hp .C .hp .display{overflow-wrap:break-word}

/* The trust bar: white edge to edge, words on the measure. Both stated so neither can drift. */
.pt-hp .trust{width:100%}
.pt-hp .trust .wrap{max-width:var(--wrap);margin-inline:auto}

/* ─────────────────────────── LEON'S TRUST BAR ───────────────────────────
   The markup is his original (`.pt-trust-bar` / `.pt-trust-grid` / `.pt-trust-item`), so the look comes
   from `css/homepage-styles.css`, which is still enqueued. Only two things change here.

   1. It sits on the homepage measure like everything else. Its own rule caps the grid at 1180px; the
      `.wrap` around it holds the 1240 and the two agree because the grid is the narrower of the pair.
   2. 🔴 IT WRAPS ON A PHONE (Leon, 22 Sep). The old rule kept one row and scrolled it sideways with
      `white-space: nowrap` — five items you had to drag through, and any that did not fit were simply
      invisible. Two columns that wrap show all five without a gesture.
   Scoped to `.pt-hp` so these win on specificity (0,2,0 vs 0,1,0) whatever order the two sheets load in —
   the trust styles come from a different file and I am not relying on which one lands last. */
.pt-hp .pt-trust-bar{padding:44px 0;border-bottom:1px solid var(--pt-border)}

/* 🔴 ICONS TOP-ALIGN, ALWAYS. The original rule centres each item, which is invisible while every sub-line
   is one line — and drops the icon the moment one wraps to two. "Escrow on every deal" and "Verified
   sellers" both wrap, so their icons sat lower than the other three and the row read as crooked.
   Aligning to the top means the icons line up with each other whatever the text does, which is the only
   version that survives a copy edit. The 1px nudge sits the glyph on the cap-height of the title rather
   than its line-box. */
.pt-hp .pt-trust-item{align-items:flex-start}
.pt-hp .trust-svg{margin-top:1px}

@media (max-width:768px){
  .pt-hp .pt-trust-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    flex-wrap:wrap;
    overflow-x:visible;
    gap:18px 16px;
    padding-bottom:0;
  }
  /* The text may now use more than one line, so nothing is clipped and nothing needs dragging. */
  .pt-hp .pt-trust-item{white-space:normal;flex:0 1 auto;align-items:flex-start}
  .pt-hp .trust-text{white-space:normal}
  .pt-hp .trust-text strong{font-size:12px;line-height:1.3}
  .pt-hp .trust-text span{font-size:11.5px;line-height:1.35}
  .pt-hp .trust-svg{width:22px;height:22px;flex:0 0 22px;margin-top:1px}
}

/* Below 420px two columns start clipping the longer labels, so it becomes one full-width column —
   still no sideways scroll, still all five visible. */
@media (max-width:420px){
  .pt-hp .pt-trust-grid{grid-template-columns:1fr;gap:14px}
}

/* ─────────────────────────── THE "FREE" TILE ───────────────────────────
   Reversed so it pops (Leon, 22 Sep): the chip was brand red ON bone, which on a graphite band reads as
   another quiet label. Bone ON brand red makes it the one warm block in the section — and "free to list"
   is the strongest thing said on this page, so it should be the thing the eye lands on.
   Red is allowed here because this is marketing type, not a status: nothing on this page uses red to mean
   a failure, so it cannot be confused with the dispute colour. [[feedback-status-colour-system]] */
.pt-hp .feat .zero small{
    background:var(--pt-brand);
    color:var(--pt-bone);
    font-weight:700;
    letter-spacing:.02em;
    padding:3px 10px;
}

/* ─────────────────────────── PROMO TILES: TEXT ON PHOTOS ───────────────────────────
   🔴 MY REGRESSION. The blanket `.pt-hp h3{color:var(--pt-ink)}` added this morning to stop the theme
   colouring headings also caught these tiles — which are light text over a photo and are NOT inside `.dk`.
   Result: "Shop Equipment" rendered near-black on a bright garage photo.
   The lesson is the same one as the hero: a blanket rule written to beat the theme will also beat your own
   exceptions unless the exceptions are stated. They are stated now.

   The scrim is also strengthened. A gradient tuned against one photo fails against the next: these tiles
   take whatever image the store has, so the overlay has to make ANY photo safe rather than the three we
   happen to be looking at. [[feedback-always-remove-anxiety]] — unreadable is a kind of broken. */
.pt-hp .pt h3,
.pt-hp .pt .tlink{color:var(--pt-on-dark)}
.pt-hp .pt small{color:var(--pt-on-dark-mute)}
.pt-hp .pt::before{
    background:linear-gradient(180deg,
        rgba(20,19,17,0) 0%,
        rgba(20,19,17,.15) 30%,
        rgba(20,19,17,.62) 62%,
        rgba(20,19,17,.88) 100%);
}
/* The photos are wide shots in tall tiles, so the interesting part sits above centre. */
.pt-hp .pt .ph{background-position:center 42%}
.pt-hp .pt.big .ph{background-position:center 38%}

/* ─────────────────────────── THE £0 TILE IS THE LIGHT BOX ───────────────────────────
   Leon, 22 Sep, after seeing the whole row on bone: put it back on the dark band and light up ONE
   container — the £0 tile — instead. He is right. Four proof points on cream is four things competing;
   one bone box on graphite is a single place for the eye to land, and "free to list and sell" is the
   strongest sentence on this page.

   `:has()` rather than an extra class in the markup, because the tile is already identified by the thing
   that makes it special — it is the one with a `.zero` in it. This sheet already leans on `:has()` for the
   same element at 640px, so nothing new is being asked of the browser. */
.pt-hp .feat:has(.zero){
    background:var(--pt-bone);
    color:var(--pt-ink);
    padding:28px;
    border-left-color:transparent;
}
/* The headings and body inside it are written in `--pt-on-dark`, so each one has to be named. A bare
   `color` on the box would be inherited — and an inherited colour loses to any rule that targets the
   element itself, which is the trap this page has already fallen into twice. */
.pt-hp .feat:has(.zero) h3{color:var(--pt-ink)}
.pt-hp .feat:has(.zero) p{color:var(--pt-ink-2)}
.pt-hp .feat:has(.zero) .zero{color:var(--pt-ink)}
/* Neither side draws a divider against the card's edge — the fill is the division. */
.pt-hp .feat:has(.zero) + .feat{border-left-color:transparent}
@media (max-width:640px){
  /* The stacked rule sets `padding:22px 0!important`, so the card's own padding has to answer in kind. */
  .pt-hp .feat:has(.zero){padding:22px!important}
}

/* ─────────────────────────── PRODUCT RAIL ───────────────────────────
   Best sellers scrolls sideways through eight (Leon, 22 Sep). Built on the page's own `.prods`/`.pcard`
   rather than dropping `.native-carousel` in from `04-carousel-logic.php`: that carousel carries the
   pre-rebuild card design and still runs the shop, tools and outdoor pages, so reusing its markup would
   either re-skin this page backwards or fork its CSS. Same behaviour, this page's clothes.
   [[feedback-replace-dont-augment]]

   Every rule below is `.prods.rail-track` (0,3,0) rather than `.prods` (0,2,0), so it beats the responsive
   grid rules earlier in this file on SPECIFICITY and not on source order. */
.pt-hp .rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 32px}
.pt-hp .rail-ctrl{display:flex;align-items:center;gap:10px;flex:none}
.pt-hp .prods.rail-track,
.pt-hp .tr-cards.rail-track,
.pt-hp .merch-imgs.rail-track{
    grid-template-columns:none;
    /* 🔴 AND grid-template-ROWS. `.bento` declares two rows; with `grid-auto-flow:column` the browser
       obediently fills them, so eight cards came out as two rows of four that scrolled sideways together.
       Clearing the columns is only half the job on any grid that also named its rows. */
    grid-template-rows:none;
    grid-auto-flow:column;
    min-width:0;                    /* a grid child will not let its own overflow scroll without this */
    overflow-x:auto;
    overscroll-behavior-x:contain;
    /* FREE SCROLL, no snap (Leon, 22 Sep). `scroll-snap-type` yanks the rail to the nearest card the
   moment you let go, which fights a flick and makes a half-scroll impossible. A rail is a shelf, not a
   slideshow: it should stop where it is put. */
    
    scrollbar-width:none;
}
.pt-hp .rail-track::-webkit-scrollbar{display:none}
.pt-hp .tr-cards.rail-track{gap:16px;grid-auto-columns:calc((100% - 40px) / 2.5)}
/* Merch is a clean 50/50 with no gutter: the two photos meet edge to edge the way the band always had
   them, and a third never peeks past the halfway line. */
.pt-hp .merch-imgs.rail-track{gap:0;grid-auto-columns:50%}

/* THE CARDS ARE SEPARATE BOXES NOW (Leon, 22 Sep). `.prods` was a shared-border grid — one rule between
   neighbours — which reads as a table once the row scrolls. With a gap, each card has to close its own
   outline or three of its four sides simply vanish. */
.pt-hp .prods.rail-track{border-top:0;border-left:0}
.pt-hp .prods.rail-track .pcard{border:1px solid var(--pt-border)}
/* The tribes band is #0f0f0f, so ink-on-ink arrows would be invisible. It carries no `.dk` class — the
   background comes from the older sheet — so it is named rather than inherited. */
.pt-hp .pt-tribes-hero .rail-nav{background:var(--pt-bone);color:var(--pt-ink)}
.pt-hp .pt-tribes-hero .rail-nav:hover{background:var(--pt-bone-2)}
.pt-hp .pt-tribes-hero .rail-ctrl{margin-top:4px}
.pt-hp .rail-nav{
    width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
    padding:0;border:0;border-radius:0;background:var(--pt-ink);color:#fff;cursor:pointer;
}
.pt-hp .rail-nav svg{width:17px;height:17px}
/* Dims, never recolours. [[feedback-button-hover-noir]] */
.pt-hp .rail-nav:hover{background:#1f1f1f}
.pt-hp .rail-nav:focus-visible{outline:2px solid var(--pt-accent);outline-offset:3px}
/* Last, and at the highest specificity of the three, so `hidden` always wins over `display:flex`.
   The arrow is SUPPRESSED when there is nothing that way, never greyed out. */
.pt-hp .rail-nav[hidden]{display:none}

/* On the oxblood band the arrows reverse, same as the button beside them. */
.pt-hp .merch-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pt-hp .dk .rail-nav{background:var(--pt-bone);color:var(--pt-ink)}
.pt-hp .dk .rail-nav:hover{background:var(--pt-bone-2)}

@media (max-width:1100px){
  .pt-hp .tr-cards.rail-track{grid-auto-columns:calc((100% - 32px) / 2)}
}
@media (max-width:1024px){
  .pt-hp .prods.rail-track{grid-auto-columns:calc((100% - 40px) / 2.5)}
}
@media (max-width:768px){
  .pt-hp .prods.rail-track{grid-auto-columns:calc((100% - 35px) / 2.2)}
}
@media (max-width:640px){
  /* Swiping IS the control on a touch screen, so the arrows go and the heads stack. */
  .pt-hp .rail-ctrl .rail-nav{display:none}
  .pt-hp .rail-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:24px}
  .pt-hp .prods.rail-track{grid-auto-columns:calc((100% - 24px) / 1.5)}
  .pt-hp .tr-cards.rail-track{grid-auto-columns:calc((100% - 24px) / 1.5)}
  .pt-hp .merch-imgs.rail-track{grid-auto-columns:66%}
}

/* ─────────────────────────── THE TRIBE CARDS STAY LIGHT ───────────────────────────
   The band is `.dk` now, and `.dk p` / `.dk h3` set a light colour for the band's OWN text. These cards
   are white boxes sitting on it, so their text has to be named back to ink — the same exception the
   receipt and the ticket already needed on the other dark bands. An inherited colour is not enough:
   `.dk p` targets the element, and only another rule on the element can beat it. */
.pt-hp .dk .tcard,.pt-hp .dk .tcard b{color:var(--pt-ink)}
.pt-hp .dk .tcard .tname{color:var(--pt-ink)}
.pt-hp .dk .tcard .tcat,.pt-hp .dk .tcard .tdesc{color:var(--pt-ink-2)}
.pt-hp .dk .tcard .tfoot .mono{color:var(--pt-ink-3)}
.pt-hp .dk .tcard .tlink{color:var(--pt-ink)}

/* ─────────────────────────── CATEGORY PANEL: THE CAPTION ───────────────────────────
   A mono line under the picture, built from real data — "01 — Bike carriers · 14 products" — so the image
   is tied to the row the eye is on rather than floating beside the list. */
.pt-hp .cat-figure{display:flex;flex-direction:column;margin:0}
.pt-hp .cat-figure .cat-img{flex:1}
.pt-hp .cat-cap{margin:12px 0 0;font-family:var(--pt-mono);font-size:12.5px;color:var(--pt-ink-3);letter-spacing:.02em}

/* ─────────────────────────── SENTENCE CASE, NOT TITLE CASE ───────────────────────────
   🔴 Leon spotted this on one heading — "Shop By Category" — and it turned out to be ELEVEN. The theme
   sets `text-transform:capitalize` on headings, so every h2 on this page was being title-cased on the way
   to the screen while the markup underneath said sentence case: "The Tribe Marketplace", "Best Sellers",
   "Latest Guides", and every h3 in the proof row — "Payment Held In Escrow".
   Fixing the one he named would have left the other ten. `.display` keeps its uppercase because that is
   this page's own rule for full-bleed statements, not the theme's. */
.pt-hp h1:not(.display),
.pt-hp h2:not(.display),
.pt-hp h3:not(.display),
.pt-hp .h2:not(.display){text-transform:none}

@media (max-width:640px){
  /* The picture is hidden on a phone — nothing hovers there — so its caption goes with it. */
  .pt-hp .cat-figure{display:none}
}

/* ─────────────────────────── THE BANDS SIT FLUSH ───────────────────────────
   🔴 THE GAP WAS A MARGIN, NOT PADDING (Leon, 22 Sep). `css/homepage-styles.css:180` still carries
   `.pt-home-nav-cards { margin-top:50px; margin-bottom:30px }` from the pre-rebuild homepage, and nothing
   in this sheet reset it — so two strips of page background (#FAF9F6) cut straight through what should be
   one continuous run of bone. Measured, not guessed: every other band reported a 0px gap and that one
   reported 50 above and 30 below.

   The reset is on ALL the bands, not just that one, because the same leftover can exist for any of these
   classes and I would rather this never come back than chase it a second time. A band on this page owns
   its spacing through padding alone; margin is always someone else's old rule. `> section` (0,1,1) beats
   a bare class (0,1,0), so it wins whichever order the two sheets load in. */
.pt-hp > section{margin:0}

/* The bone bands run together — promo tiles then categories. Stacked, the pair was spending a full
   section's padding on BOTH sides of an invisible seam. One gap per boundary, not two.
   `.sec.tight` is (0,3,0), so a single class here loses to it — the bottom rules carry `.sec` for the
   same reason, not for decoration. */
.pt-hp .bone + .bone{padding-top:36px}
.pt-hp .sec.pt-home-nav-cards{padding-bottom:36px}

/* ─────────────────────────── CATEGORY ROW: THE ACTIVE STATE ───────────────────────────
   It used to turn the category name brand red, which is the one thing red is not allowed to do here —
   red means a dispute, nowhere else. [[feedback-status-colour-system]] It also made the state carry no
   weight: every other row stayed at full strength, so "on" read as a recolour rather than a selection.

   Now the list rests quiet and the live row comes forward: ink name, ink index, ink rule down the left,
   and the "Shop" label gains its arrow. The same grammar as every other control on the site, and it still
   works for the one viewer who cannot see the colour change at all. */
.pt-hp .cat-row{position:relative;transition:color .14s ease}
.pt-hp .cat-row b{color:var(--pt-ink-2);transition:color .14s ease}
.pt-hp .cat-row.on b{color:var(--pt-ink)}
.pt-hp .cat-row.on .idx{color:var(--pt-ink)}
.pt-hp .cat-row.on .go{color:var(--pt-ink)}
.pt-hp .cat-row.on .go::after{content:" →"}
.pt-hp .cat-row.on{border-bottom-color:var(--pt-ink)}
.pt-hp .cat-row.on::before{
    content:"";position:absolute;left:-18px;top:0;bottom:-1px;width:3px;background:var(--pt-ink);
}
/* Hover and keyboard focus reach the same state on the way to `.on`, so the row never flashes a third
   appearance in between. */
.pt-hp .cat-row:hover b,.pt-hp .cat-row:focus-visible b{color:var(--pt-ink)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — re-templated 22 Sep from `~/Downloads/how-it-works-colour-mockup.html`.
   The old presentation (one flat rule across six icons, plus a six-bar money track underneath) is
   DELETED, not layered over. [[feedback-replace-dont-augment]]

   Every colour below is a system colour used with its system meaning, so the homepage teaches the
   vocabulary before a real deal does: --pt-border-strong = still with you · amber = held by Trustap ·
   green = released. The mockup declared its own `--pt-amber` / `--pt-green` / `--pt-bone` as ASSUMED
   values; none of them are redeclared here — each maps onto the token that already ships.

   The mockup's `@container` queries become `@media`: this section is not a container, and the widths it
   cares about are the page's own 1100 and 640.

   Scoped to `.pt-hiw` throughout — `.tile`, `.flow`, `.phase` and `.steps` are names generic enough to
   collide with the theme or a later section, and the extra class also lifts every rule above the older
   `.pt-hp .x` rules elsewhere in this file without depending on which line lands last.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.pt-hp .pt-hiw .hw-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin:0 0 56px}

/* ── the phase band: three phases stated over the six steps they cover ── */
.pt-hp .pt-hiw .phases{display:grid;grid-template-columns:3fr 2fr 1fr;gap:6px;margin:0 0 28px}
.pt-hp .pt-hiw .phase{padding-top:12px;border-top:4px solid var(--pt-border-strong)}
.pt-hp .pt-hiw .phase b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.pt-hp .pt-hiw .phase span{font-family:var(--pt-mono);font-size:12px;color:var(--pt-ink-3)}
.pt-hp .pt-hiw .phase.held{border-top-color:var(--pt-amber-deep)}
.pt-hp .pt-hiw .phase.held b{color:var(--pt-amber-text)}
.pt-hp .pt-hiw .phase.rel{border-top-color:var(--pt-green-text)}
.pt-hp .pt-hiw .phase.rel b{color:var(--pt-green-text)}

/* ── the six steps ── */
.pt-hp .pt-hiw .steps{display:grid;grid-template-columns:repeat(6,1fr)}
.pt-hp .pt-hiw .step{position:relative;padding-right:24px}
/* The connector is per-step, not one rule across the row: that is what lets it change colour exactly
   where the money does. The last one is removed rather than left pointing at nothing. */
.pt-hp .pt-hiw .step::after{content:"";position:absolute;left:56px;right:0;top:27px;height:2px;background:var(--pt-border-strong)}
.pt-hp .pt-hiw .step:last-child::after{display:none}
.pt-hp .pt-hiw .step.held::after{background:var(--pt-amber-deep)}
/* ORDER MATTERS: the two gradients are the hand-off between phases, so they must come after the flat
   amber above or `.held.pre-rel` would draw solid amber into a green step. */
.pt-hp .pt-hiw .step.pre-held::after{background:linear-gradient(90deg,var(--pt-border-strong),var(--pt-amber-deep))}
.pt-hp .pt-hiw .step.pre-rel::after{background:linear-gradient(90deg,var(--pt-amber-deep),var(--pt-green-text))}

.pt-hp .pt-hiw .tile{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border:1px solid var(--pt-ink);background:var(--pt-surface);position:relative;z-index:1;margin:0 0 20px}
.pt-hp .pt-hiw .tile svg{width:24px;height:24px;fill:none;stroke:var(--pt-ink);stroke-width:1.6}
.pt-hp .pt-hiw .step.held .tile{background:var(--pt-amber-bg);border-color:var(--pt-amber-deep)}
.pt-hp .pt-hiw .step.held .tile svg{stroke:var(--pt-amber-text)}
/* The two moments money actually moves get a SOLID tile. They are the irreversible ones, so they are the
   two that look different from the other four. */
.pt-hp .pt-hiw .step.move-in .tile{background:var(--pt-amber-deep);border-color:var(--pt-amber-deep)}
.pt-hp .pt-hiw .step.move-in .tile svg{stroke:#fff}
.pt-hp .pt-hiw .step.move-out .tile{background:var(--pt-green-text);border-color:var(--pt-green-text)}
.pt-hp .pt-hiw .step.move-out .tile svg{stroke:#fff}

.pt-hp .pt-hiw .step .idx{display:block;margin:0 0 6px}
.pt-hp .pt-hiw .step.held .idx{color:var(--pt-amber-text)}
.pt-hp .pt-hiw .step.move-out .idx{color:var(--pt-green-text)}
.pt-hp .pt-hiw .step h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px;color:var(--pt-ink)}
.pt-hp .pt-hiw .step p{font-size:14px;color:var(--pt-ink-2);margin:0}

.pt-hp .pt-hiw .flow{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:4px 8px;font-family:var(--pt-mono);font-size:11.5px;border:1px solid}
.pt-hp .pt-hiw .flow.in{color:var(--pt-amber-text);background:var(--pt-amber-bg);border-color:var(--pt-amber-border)}
.pt-hp .pt-hiw .flow.out{color:var(--pt-green-text);background:var(--pt-green-bg);border-color:var(--pt-green-border)}

.pt-hp .pt-hiw .phase-inline{display:none}

.pt-hp .pt-hiw .hw-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--pt-border-strong)}
.pt-hp .pt-hiw .trustline{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--pt-ink-3)}
.pt-hp .pt-hiw .shield{width:13px;height:13px;flex:none}

/* ── tablet: the band cannot sit across three columns of six, so the labels move inline ── */
@media (max-width:1100px){
  .pt-hp .pt-hiw .hw-head{grid-template-columns:1fr;gap:16px}
  .pt-hp .pt-hiw .phases{display:none}
  .pt-hp .pt-hiw .steps{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .pt-hp .pt-hiw .step::after{display:none}
  .pt-hp .pt-hiw .phase-inline{display:block;grid-column:1 / -1;margin:8px 0 -12px}
}

/* ── phone: the same timeline stood on end, and the line still changes colour as the money moves ── */
@media (max-width:640px){
  .pt-hp .pt-hiw .hw-head{margin-bottom:32px}
  .pt-hp .pt-hiw .steps{grid-template-columns:1fr;row-gap:0}
  .pt-hp .pt-hiw .step{display:grid;grid-template-columns:48px 1fr;column-gap:16px;padding:0 0 28px}
  .pt-hp .pt-hiw .step::after{display:block;left:23px;right:auto;top:48px;bottom:0;width:2px;height:auto}
  .pt-hp .pt-hiw .step.pre-held::after{background:linear-gradient(180deg,var(--pt-border-strong),var(--pt-amber-deep))}
  .pt-hp .pt-hiw .step.pre-rel::after{background:linear-gradient(180deg,var(--pt-amber-deep),var(--pt-green-text))}
  /* The line stops at the end of each phase so the label below it reads as a break, not an interruption. */
  .pt-hp .pt-hiw .step.end-group::after{display:none}
  .pt-hp .pt-hiw .step:last-child{padding-bottom:0}
  .pt-hp .pt-hiw .tile{width:48px;height:48px;margin:0;grid-row:span 4}
  .pt-hp .pt-hiw .step > :not(.tile){grid-column:2}
  .pt-hp .pt-hiw .step .idx{margin:4px 0 2px}
  .pt-hp .pt-hiw .step h3{margin-bottom:4px}
  .pt-hp .pt-hiw .step p{font-size:15px}
  .pt-hp .pt-hiw .flow{justify-self:start}
  .pt-hp .pt-hiw .phase-inline{margin:0 0 16px}
  .pt-hp .pt-hiw .phase-inline .phase{padding-top:10px}
  .pt-hp .pt-hiw .hw-foot{flex-direction:column;align-items:stretch;gap:14px;margin-top:24px}
  .pt-hp .pt-hiw .hw-foot .btn{width:100%}
  .pt-hp .pt-hiw .trustline{font-size:13px;align-items:flex-start}
}

/* ═══ BEST SELLERS — the shared shop card (23 Sep) ══════════════════════════
   `.pcard` was a homepage-only card that looked like the shop's and did none of what it does. The rail
   now includes `templates/parts/shop-grid-card.php`, so these rules only have to do the RAIL part —
   the card styles itself from `css/shop-grid.css`, exactly as it does on /shop/. */
.pt-hp .prods.rail-track.pt-shop{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:none;scrollbar-width:none;border:0;padding-bottom:4px}
.pt-hp .prods.rail-track.pt-shop::-webkit-scrollbar{display:none}
/* 4.5 across on desktop (Leon, 23 Sep) — the half card is what tells you the rail keeps going. */
.pt-hp .prods.rail-track.pt-shop .sg-card{flex:0 0 calc((100% - 4*16px)/4.5);background:var(--pt-surface);border:1px solid var(--pt-border);padding:12px}
@media (max-width:1024px){ .pt-hp .prods.rail-track.pt-shop .sg-card{flex-basis:calc((100% - 2*16px)/2.5)} }
@media (max-width:640px){ .pt-hp .prods.rail-track.pt-shop{gap:10px} .pt-hp .prods.rail-track.pt-shop .sg-card{flex-basis:calc((100% - 10px)/1.6)} }

/* ── REP THE TRIBE — cards inside the band, not a wall (Leon, 23 Sep) ──
   The two photos ran edge to edge and filled the container, so it did not read as a carousel at all.
   Smaller cards with a gap make the track visible, which is the point of a track. */
.pt-hp .merch-imgs.rail-track{gap:16px;padding:4px 0}
.pt-hp .merch-imgs.rail-track .ph{flex-basis:calc((100% - 16px)/2.2);border:1px solid rgba(255,255,255,.14);border-radius:0}
@media (max-width:640px){
    .pt-hp .merch-imgs.rail-track{gap:10px}
    .pt-hp .merch-imgs.rail-track .ph{flex-basis:calc((100% - 10px)/1.35)}
}