/* Products hub (/products) and the product pages (/products/*).
   Layout comes from the approved MVP draft (now Axiom MVP) ("Stacked" style): a hero with a product visual,
   a facts strip, numbered layers, one coloured band, example panels, rules, FAQ, closer.
   Every class is prefixed pp- so nothing collides with the homepage styles in site.css.
   Colours follow the site's --theme dial (0 = day, 1 = nightfall): in nightfall the
   product colours fold into the same bone-on-black monochrome as the rest of the site. */

:root {
  --pp-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(26,26,46,.28);
  --pp-spring: cubic-bezier(.34,1.56,.64,1);
  /* defaults (overridden per product on <body>) */
  --pa-a: #3b7cf5; --pa-b: #6d4fd8; --pa-ink: #FFFFFF;
  --pa-hi: #ffd166; --pa-hi-ink: #3d2a00; --pa-dot: #8a5a00;
}
body.p-mvp     { --pa-a: #3b7cf5; --pa-b: #6d4fd8; --pa-ink: #FFFFFF; --pa-hi: #ffd166; --pa-hi-ink: #3d2a00; --pa-dot: #8a5a00; }
body.p-signal  { --pa-a: #5563E8; --pa-b: #8D7CFF; --pa-ink: #FFFFFF; --pa-hi: #DDE1FF; --pa-hi-ink: #1E1B4B; --pa-dot: #5563E8; }
body.p-resolve { --pa-a: #3FD9BB; --pa-b: #A6F2E1; --pa-ink: #062B26; --pa-hi: #062B26; --pa-hi-ink: #DFFBF4; --pa-dot: #0D9488; }
body.p-command { --pa-a: #FFAA3B; --pa-b: #FFD79E; --pa-ink: #3A2200; --pa-hi: #3A2200; --pa-hi-ink: #FFE7C4; --pa-dot: #B45309; }

:root, body {
  --band-a:   color-mix(in srgb, var(--pa-a)     calc((1 - var(--theme)) * 100%), #121212 calc(var(--theme) * 100%));
  --band-b:   color-mix(in srgb, var(--pa-b)     calc((1 - var(--theme)) * 100%), #050505 calc(var(--theme) * 100%));
  --band-ink: color-mix(in srgb, var(--pa-ink)   calc((1 - var(--theme)) * 100%), #F1ECE2 calc(var(--theme) * 100%));
  --brick:    color-mix(in srgb, #FFFFFF         calc((1 - var(--theme)) * 100%), #1A1A1A calc(var(--theme) * 100%));
  --brick-ink:color-mix(in srgb, #1A1A2E         calc((1 - var(--theme)) * 100%), #F1ECE2 calc(var(--theme) * 100%));
  --hi:       color-mix(in srgb, var(--pa-hi)    calc((1 - var(--theme)) * 100%), #F1ECE2 calc(var(--theme) * 100%));
  --hi-ink:   color-mix(in srgb, var(--pa-hi-ink) calc((1 - var(--theme)) * 100%), #0A0A0A calc(var(--theme) * 100%));
  --dot:      color-mix(in srgb, var(--pa-dot)   calc((1 - var(--theme)) * 100%), #F1ECE2 calc(var(--theme) * 100%));
}

.pp-mono { font-family: var(--mono); }
.pp-h2 { font-size: clamp(32px, 4.4vw, 58px); }

/* ── product marks (inline SVG tiles) */
.pp-mark { display: inline-block; flex: none; vertical-align: middle; }

/* ── breadcrumb under the nav */
.pp-crumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.pp-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.pp-crumb a:hover { color: var(--ink); border-color: var(--ink); }
.pp-crumb b { color: var(--ink); font-weight: 600; }

/* ── hero */
.pp-hero { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 96px); }
.pp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .pp-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.pp-hero h1 { font-size: clamp(42px, 5.4vw, 80px); margin: 18px 0 22px; }
.pp-hero h1 em { color: var(--indigo); }
.pp-tag { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid var(--rule-strong); border-radius: 99px; font-size: 13px; font-weight: 600; max-width: 100%; }
.pp-covers { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.pp-covers span::before { content: "▪"; color: var(--dot); margin-right: 6px; }
.pp-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }

/* MVP hero tower: the logo's three blocks as links to the three layers */
.pp-tower { aspect-ratio: 1 / 1; width: min(520px, 100%); justify-self: center; border-radius: 22%; background: linear-gradient(135deg, var(--band-a), var(--band-b)); position: relative; box-shadow: 0 40px 80px -40px rgba(59,124,245,.6); }
.pp-blk { position: absolute; height: 15.6%; border-radius: 4.7% / 30%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 5%; text-decoration: none; color: var(--brick-ink); background: var(--brick); font-size: clamp(11px, 1.5vw, 15px); font-weight: 700; transition: transform .45s var(--pp-spring), box-shadow .3s; }
.pp-blk span { font-family: var(--mono); font-weight: 500; font-size: .8em; opacity: .65; white-space: nowrap; }
.pp-blk:hover, .pp-blk:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgba(0,0,0,.45); }
.pp-blk.b1 { left: 17.2%; width: 65.6%; top: 62.5%; }
.pp-blk.b2 { left: 26.6%; width: 46.9%; top: 42.2%; }
.pp-blk.b3 { left: 35.9%; width: 28.1%; top: 21.9%; background: var(--hi); color: var(--hi-ink); justify-content: center; }
.pp-blk.b3 span { display: none; }
@media (max-width: 460px) { .pp-blk span { display: none; } .pp-blk { justify-content: center; } }
@media (prefers-reduced-motion: no-preference) {
  .pp-blk { animation: ppRise .8s var(--pp-spring) both; }
  .pp-blk.b1 { animation-delay: .1s; } .pp-blk.b2 { animation-delay: .3s; } .pp-blk.b3 { animation-delay: .5s; }
  @keyframes ppRise { from { transform: translateY(-40px); } }
}

/* ── facts strip */
.pp-facts { border-block: 1px solid var(--rule); }
.pp-facts .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-fact { padding: 26px 22px; border-left: 1px solid var(--rule); }
.pp-fact:first-child { border-left: 0; padding-left: 0; }
.pp-fact b { font-family: var(--serif); font-size: clamp(30px, 3vw, 40px); font-weight: 400; display: block; line-height: 1; }
.pp-fact span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }
@media (max-width: 820px) { .pp-facts .wrap { grid-template-columns: 1fr 1fr; } .pp-fact { border-left: 0; padding: 22px 0; } .pp-fact:nth-child(odd) { padding-right: 16px; } }

/* ── layers / steps */
.pp-layer { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule-strong); }
.pp-layer:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .pp-layer { grid-template-columns: minmax(0, 1fr); } }
.pp-glyph { width: 96px; height: 96px; border-radius: 22px; background: var(--paper-2); position: relative; border: 1px solid var(--rule); }
.pp-glyph i { position: absolute; height: 14px; border-radius: 4px; background: var(--rule-strong); }
.pp-glyph i:nth-child(1) { left: 16px; right: 16px; top: 60px; } .pp-glyph i:nth-child(2) { left: 25px; right: 25px; top: 41px; } .pp-glyph i:nth-child(3) { left: 34px; right: 34px; top: 22px; }
.pp-glyph.on1 i:nth-child(1), .pp-glyph.on2 i:nth-child(2) { background: var(--ink); }
.pp-glyph.on3 i:nth-child(3) { background: var(--hi); box-shadow: 0 0 0 1px var(--dot); }
.pp-num { width: 96px; height: 96px; border-radius: 22px; background: var(--paper-2); border: 1px solid var(--rule); display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 44px; letter-spacing: -.04em; color: var(--ink); }
@media (max-width: 900px) { .pp-glyph, .pp-num { width: 72px; height: 72px; border-radius: 18px; } .pp-num { font-size: 34px; } .pp-glyph { transform: scale(.75); transform-origin: top left; margin-bottom: -24px; } }
.pp-layer .eyebrow { margin-bottom: 10px; }
.pp-layer h2 { font-size: clamp(32px, 3.8vw, 52px); }
.pp-layer p { color: var(--muted); font-size: 16px; }
.pp-layer ul { list-style: none; padding: 0; margin: 18px 0 0; }
.pp-layer li { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
.pp-layer li span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: right; }

/* compact numbered flow (Resolve, Signal) */
.pp-flow { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 clamp(20px, 3vw, 40px); counter-reset: flow; }
.pp-flow li { counter-increment: flow; padding: 22px 0 24px; border-top: 1px solid var(--rule-strong); display: flex; flex-direction: column; gap: 8px; }
.pp-flow li::before { content: counter(flow, decimal-leading-zero); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.pp-flow b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; }
.pp-flow p { color: var(--muted); font-size: 15px; margin: 0; }

/* ── coloured band with bricks */
.pp-band { background: linear-gradient(120deg, var(--band-a), var(--band-b)); color: var(--band-ink); padding-block: clamp(64px, 8vw, 120px); overflow: hidden; }
.pp-band .sec-mark, .pp-band .sec-mark .n { color: var(--band-ink); }
.pp-band .sec-mark { opacity: .9; }
.pp-band .sec-mark .rule { background: color-mix(in srgb, var(--band-ink) 40%, transparent); }
.pp-band h2 { font-size: clamp(36px, 5vw, 68px); max-width: 18ch; color: var(--band-ink); }
.pp-band .lead { color: color-mix(in srgb, var(--band-ink) 80%, transparent); margin-top: 16px; }
.pp-bricks { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .pp-bricks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pp-bricks { grid-template-columns: minmax(0, 1fr); } }
.pp-brick { background: var(--brick); color: var(--brick-ink); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 8px; min-height: 180px; }
.pp-brick.hi { background: var(--hi); color: var(--hi-ink); }
.pp-brick b { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.pp-brick p { font-size: 14.5px; opacity: .8; margin: 0; }
.pp-brick .arr { margin-top: auto; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }

/* ── two-option cards */
.pp-head2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
@media (max-width: 900px) { .pp-head2 { grid-template-columns: minmax(0, 1fr); } }
.pp-ways { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .pp-ways { grid-template-columns: minmax(0, 1fr); } }
.pp-way { border: 1px solid var(--rule-strong); border-radius: 16px; padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.pp-way.ours { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pp-way.ours p { color: color-mix(in srgb, var(--paper) 74%, transparent); }
.pp-way .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pp-way h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; margin: 0; }
.pp-way p { color: var(--muted); font-size: 15.5px; margin: 0; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.pp-chips span { border: 1px solid currentColor; border-radius: 99px; padding: 4px 11px; font-size: 12.5px; opacity: .75; }

/* ── example gallery */
.pp-gal-h { margin-top: clamp(48px, 6vw, 80px); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--rule-strong); padding-bottom: 14px; }
.pp-gal-h h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); margin: 0; }
.pp-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
@media (max-width: 900px) { .pp-gal { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pp-gal { grid-template-columns: minmax(0, 1fr); } }
.pp-ex { padding: 26px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.pp-ex .who { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pp-ex .who i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pp-ex .ask { font-family: var(--serif); font-size: 21px; line-height: 1.28; margin: 0; }
.pp-ex ul, .pp-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.pp-ex li, .pp-ticks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.pp-ex li::before, .pp-ticks li::before { content: "▪"; color: var(--dot); }

/* ── split section with an example panel */
.pp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .pp-split { grid-template-columns: minmax(0, 1fr); } .pp-split .pp-panel { order: 2; } }
.pp-split h2 { font-size: clamp(32px, 3.8vw, 52px); }
.pp-panel { background: var(--surface-2); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--pp-shadow); overflow: hidden; min-width: 0; }
.pp-panel-h { padding: 12px 18px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }
.pp-row { display: grid; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.pp-row:last-child { border-bottom: 0; }
.pp-row .k { font-family: var(--mono); font-size: 10.5px; color: var(--muted); display: block; }
.pp-row .ar { color: var(--muted-2); text-align: center; }
@media (max-width: 480px) { .pp-row { grid-template-columns: minmax(0,1fr) auto; } .pp-row .ar { display: none; } .pp-row > :nth-child(3) { grid-column: 1; } .pp-row .pp-pill { grid-column: 2; grid-row: 1 / span 2; } }
.pp-pill { font-family: var(--mono); font-size: 10.5px; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.pp-pill.ok   { background: color-mix(in srgb, var(--emerald) 14%, transparent); color: var(--emerald); }
.pp-pill.look { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.pp-pill.hot  { background: color-mix(in srgb, var(--rose) 14%, transparent); color: var(--rose); }
.pp-pill.wait { background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo); }

/* message-style rows inside a panel (Signal brief, Resolve ticket, Command queue) */
.pp-msg { padding: 16px 18px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.pp-msg:last-child { border-bottom: 0; }
.pp-msg .meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pp-msg q { font-family: var(--serif); font-size: 18px; line-height: 1.35; quotes: "“" "”"; }
.pp-msg .acts { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pp-msg .acts span { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--rule-strong); }
.pp-msg .acts span.go { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pp-outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 14px 18px 18px; }
@media (max-width: 480px) { .pp-outs { grid-template-columns: 1fr 1fr; } }
.pp-outs div { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 10px; font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 6px; }
.pp-outs i { display: block; height: 34px; border-radius: 6px; background: linear-gradient(135deg, var(--band-a), var(--band-b)); }
.pp-outs small { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: .06em; }
.pp-feat { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.pp-feat li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 12px; font-size: 15px; }
.pp-feat li::before { content: ""; width: 10px; height: 10px; margin-top: 7px; border-radius: 2px; background: var(--hi); box-shadow: 0 0 0 1px var(--dot); }

/* ── rules / safety */
.pp-safe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); }
@media (max-width: 900px) { .pp-safe { grid-template-columns: minmax(0, 1fr); } }
.pp-safe-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 560px) { .pp-safe-list { grid-template-columns: minmax(0, 1fr); } }
.pp-safe-list div { padding: 18px 0; border-top: 1px solid var(--rule-strong); }
.pp-safe-list b { display: block; font-size: 16px; margin-bottom: 4px; }
.pp-safe-list span { color: var(--muted); font-size: 14.5px; }

/* ── FAQ */
.pp-qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; margin-top: 32px; }
@media (max-width: 900px) { .pp-qa { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pp-qa { grid-template-columns: minmax(0, 1fr); } }
.pp-qa div { border-top: 1px solid var(--rule-strong); padding-top: 18px; }
.pp-qa h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 8px; line-height: 1.2; }
.pp-qa p { color: var(--muted); font-size: 15px; margin: 0; }

/* ── closer */
.pp-closer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; border-top: 1px solid var(--rule-strong); padding-top: 40px; }
@media (max-width: 820px) { .pp-closer { grid-template-columns: minmax(0, 1fr); } }
.pp-closer h2 { font-size: clamp(30px, 3.6vw, 48px); }

/* ── "other products" strip at the foot of each product page */
.pp-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
@media (max-width: 820px) { .pp-others { grid-template-columns: minmax(0, 1fr); } }
.pp-other { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--rule-strong); border-radius: 14px; text-decoration: none; color: var(--ink); transition: border-color .2s, transform .35s var(--pp-spring); }
.pp-other:hover { border-color: var(--ink); transform: translateY(-2px); }
.pp-other b { display: block; font-size: 15px; }
.pp-other small { display: block; font-size: 13px; color: var(--muted); }
.pp-other .arr { font-family: var(--mono); color: var(--muted); }

/* ─────────────────────────────────────────── HUB (/products) */
.pp-hub-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
@media (max-width: 900px) { .pp-hub-head { grid-template-columns: minmax(0, 1fr); } }
.pp-hub-head h1 { font-size: clamp(42px, 5.6vw, 80px); margin: 0; }
.pp-hub-head h1 em { color: var(--indigo); }
.pp-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pp-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border: 1px solid var(--rule-strong); border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pp-jump a:hover { border-color: var(--ink); }

.pp-cat { margin-top: clamp(56px, 7vw, 96px); }
.pp-cat-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(16px, 4vw, 56px); align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--rule-strong); }
@media (max-width: 820px) { .pp-cat-h { grid-template-columns: minmax(0, 1fr); } }
.pp-cat-h h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.018em; margin: 0; }
.pp-cat-h h2 em { font-style: italic; }
.pp-cat-h p { color: var(--muted); font-size: 15.5px; margin: 0; max-width: 56ch; }

.pp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
@media (max-width: 960px) { .pp-cards { grid-template-columns: minmax(0, 1fr); } }
.pp-card { --tone: var(--ink); position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--rule-strong); border-radius: 18px; background: var(--surface); color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .25s, transform .4s var(--pp-spring), box-shadow .3s; }
.pp-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone); }
.pp-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--pp-shadow); }
.pp-card .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-card .tier { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pp-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.2vw, 44px); line-height: 1; margin: 4px 0 0; letter-spacing: -0.02em; }
.pp-card .what { font-size: 15px; font-weight: 600; margin: 0; }
.pp-card p { color: var(--muted); font-size: 15px; margin: 0; }
.pp-card .pp-ticks { margin-top: 4px; }
.pp-card .go { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.pp-card .go .arr { transition: transform .3s var(--pp-spring); }
.pp-card:hover .go .arr { transform: translateX(4px); }

.pp-card.wide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 24px; }
.pp-card.wide::before { background: linear-gradient(90deg, #3b7cf5, #6d4fd8 70%, #ffd166); }
@media (max-width: 900px) { .pp-card.wide { grid-template-columns: minmax(0, 1fr); } }
.pp-card.wide .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-new { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: var(--ink); color: var(--paper); }
.pp-builders { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .pp-builders { grid-template-columns: minmax(0, 1fr); } }
.pp-builders span { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; font-size: 14px; font-weight: 600; background: var(--paper); }
.pp-builders span:last-child { background: var(--hi); color: var(--hi-ink); border-color: transparent; }

.pp-unsure { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: 18px; background: var(--paper-2); border: 1px solid var(--rule); }
@media (max-width: 760px) { .pp-unsure { grid-template-columns: minmax(0, 1fr); } }
.pp-unsure h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; margin: 0 0 8px; }
.pp-unsure p { color: var(--muted); margin: 0; }