/* Products pages: the landing page, the commerce suite page, the marketplaces page and the pricing form.
   Rides on body.warm from landing.css (cream, greige, sage, terracotta); no dark surfaces except the sage closing band. */

.products main { overflow-x: clip; }

/* ── Type and shared bits ───────────────────────── */
.pr-h1 { font: 600 clamp(2.2rem, 1.2rem + 4.6vw, 4.9rem)/1.02 var(--display); letter-spacing: -.035em; margin: .3em 0 .4em; max-width: 16em; text-wrap: balance; }
.pr-h2 { font: 600 clamp(1.7rem, 1.2rem + 2.2vw, 3rem)/1.08 var(--display); letter-spacing: -.03em; margin: .25em 0 .45em; text-wrap: balance; }
.pr-h3 { font: 600 var(--step-2)/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 .6em; }
.pr-lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 38em; margin: 0 0 1.4em; text-wrap: pretty; }
.pr-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 1.6em; }
.pr-caption { font-size: var(--step--1); color: var(--ink-mute); margin: 14px 0 0; text-align: center; }
.pr-note { margin-top: 28px; color: var(--ink-soft); }
.pr-note a, .pr-priv a, .pr-crumb a { color: var(--terra); text-underline-offset: .22em; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 1.4em; }
.pr-chips li { padding: .45em .95em; border-radius: 999px; background: var(--sage-50); border: 1px solid var(--sage-200); color: var(--sage-800); font-size: .9rem; font-weight: 500; }
.pr-crumb { font-size: .9rem; color: var(--ink-mute); margin-bottom: 18px; }
.pr-crumb a { text-decoration: none; }
.pr-crumb a:hover { text-decoration: underline; }

/* ── Hero ───────────────────────────────────────── */
.pr-hero { padding: calc(72px + clamp(36px, 6vw, 84px)) 0 clamp(28px, 4vw, 56px); background: linear-gradient(180deg, var(--cream-50), var(--cream)); }
.pr-hero--list { padding-bottom: clamp(16px, 3vw, 40px); }
.pr-hero__in { padding-bottom: clamp(24px, 4vw, 48px); }
@media (max-width: 520px) { .pr-hero { padding-top: calc(62px + 28px); } }

/* ── Screenshot showcase (tabs) ─────────────────── */
.pr-show { margin-top: clamp(8px, 2vw, 24px); }
.pr-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.pr-tab { flex: none; min-height: 44px; padding: .55em 1.1em; border-radius: 999px; border: 1px solid rgba(59, 48, 41, .22); background: transparent; color: var(--ink-soft); font: 600 .95rem/1 var(--sans); cursor: pointer; transition: background-color .25s var(--ease), color .25s, border-color .25s; }
.pr-tab:hover { border-color: var(--ink); color: var(--ink); }
.pr-tab[aria-selected="true"] { background: var(--sage-800); border-color: var(--sage-800); color: var(--cream-white); }
.js .pr-panel[hidden] { display: none; }
.pr-panel { display: grid; gap: 14px; }
.pr-panel__text { margin: 0; text-align: center; color: var(--ink-soft); max-width: 40em; margin-inline: auto; }
.pr-panel--phone { justify-items: center; }
.pr-panel--phone .pr-zoom { max-width: min(390px, 82vw); }
.pr-zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-lg); -webkit-tap-highlight-color: transparent; }
.pr-zoom:focus-visible { outline: 3px solid var(--sage-700); outline-offset: 4px; }
.shot { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--cream-200) center / cover no-repeat; border: 1px solid var(--line); box-shadow: 0 30px 60px -34px rgba(59, 48, 41, .55), 0 2px 6px rgba(59, 48, 41, .06); }
.pr-fig--phone .shot, .pr-panel--phone .shot { border-radius: 28px; }

/* ── Three steps ────────────────────────────────── */
.pr-steps { padding: clamp(48px, 7vw, 104px) 0; }
.pr-steps__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); padding: 0; margin: 0; }
.pr-steps__list li { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.pr-steps__list h3 { font: 600 var(--step-1)/1.2 var(--display); letter-spacing: -.02em; margin: .5em 0 .4em; }
.pr-steps__list p { margin: 0; color: var(--ink-soft); }
.pr-steps__n { font: 500 2.4rem/1 var(--serif); color: var(--terra); }
@media (max-width: 820px) { .pr-steps__list { grid-template-columns: 1fr; } }

/* ── Feature groups ─────────────────────────────── */
.pr-group { padding: clamp(48px, 7vw, 112px) 0; border-top: 1px solid var(--line); }
.pr-group--alt { background: var(--cream-2); }
.pr-group__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.pr-group--alt .pr-group__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.pr-group--alt .pr-group__copy { order: 2; }
.pr-group--alt .pr-group__in.pr-group__in--solo, .pr-group__in--solo { grid-template-columns: 1fr; }
.pr-group__in--solo .pr-group__copy { order: 0; max-width: 60rem; }
.pr-group__in--solo .pr-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
@media (max-width: 700px) { .pr-group__in--solo .pr-points { grid-template-columns: 1fr; } }
.pr-group__lead { font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); margin: 0 0 1em; }
.pr-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pr-points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.pr-points .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--sage-700); stroke-width: 2.4; }
.pr-points--plain { margin-bottom: 8px; }
.pr-group__shots { display: grid; gap: 14px; align-items: start; min-width: 0; }
.pr-shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-shots--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-shots--2 .pr-fig--lead, .pr-shots--3 .pr-fig--lead { grid-column: 1 / -1; }
.pr-fig { margin: 0; min-width: 0; }
.pr-fig figcaption { margin-top: 8px; font-size: var(--step--1); color: var(--ink-mute); }
.pr-fig--phone { justify-self: center; width: min(100%, 260px); }
.pr-group__note { padding: 28px; border-radius: var(--radius-lg); background: var(--card); border: 1px dashed var(--greige); color: var(--ink-soft); }
.pr-group__note p { margin: 0; }
@media (max-width: 899px) {
  .pr-group__in, .pr-group--alt .pr-group__in { grid-template-columns: 1fr; }
  .pr-group--alt .pr-group__copy { order: 0; }
}

/* ── Comparison table ───────────────────────────── */
.pr-compare { padding: clamp(48px, 7vw, 104px) 0; }
.pr-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card); }
.pr-table-wrap:focus-visible { outline: 3px solid var(--sage-700); outline-offset: 3px; }
.pr-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .98rem; }
.pr-table th, .pr-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pr-table thead th { font: 600 .82rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); background: var(--cream-2); }
.pr-table tbody th { font-weight: 600; width: 22%; }
.pr-table td:nth-child(2) { color: var(--ink-mute); }
.pr-table td:nth-child(3) { background: rgba(113, 132, 111, .1); font-weight: 500; }
.pr-table tr:last-child th, .pr-table tr:last-child td { border-bottom: 0; }

/* ── Marketplaces ───────────────────────────────── */
.pr-markets { padding: clamp(48px, 7vw, 104px) 0; background: var(--cream-2); }
.pr-markets-full { padding-bottom: clamp(40px, 6vw, 88px); }
.mk__filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.chipbtn { min-height: 44px; padding: .5em 1.1em; border-radius: 999px; border: 1px solid rgba(59, 48, 41, .22); background: transparent; color: var(--ink-soft); font: 600 .92rem/1 var(--sans); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.chipbtn:hover { border-color: var(--ink); color: var(--ink); }
.chipbtn.is-on { background: var(--sage-800); border-color: var(--sage-800); color: var(--cream-white); }
.mk__legend { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 8px; }
.mk__region { margin-top: 28px; }
.mk__region[hidden], .mk__card[hidden] { display: none; }
.mk__h { display: flex; align-items: baseline; gap: 10px; font: 600 var(--step-1)/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 12px; }
.mk__h span { font: 500 .9rem var(--sans); color: var(--ink-mute); }
.mk__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.mk__card { padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.mk__name { margin: 0; font: 600 1.05rem/1.25 var(--display); letter-spacing: -.01em; }
.mk__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.mk__method { font-size: .88rem; color: var(--ink-mute); }
.mk__note { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.mk__fine { margin: 28px 0 0; font-size: .88rem; color: var(--ink-mute); max-width: 60em; }
.pr-badge { display: inline-block; padding: .22em .7em; border-radius: 999px; font: 600 .8rem/1.3 var(--sans); letter-spacing: .02em; border: 1px solid transparent; }
.pr-badge--built { background: var(--sage-100); color: var(--sage-800); border-color: var(--sage-200); }
.pr-badge--in_build { background: #f4e6cd; color: #6a4812; border-color: #e6cfa6; }
.pr-badge--planned { background: var(--cream-200); color: #574c43; border-color: var(--cream-300); }
.pr-badge--file_only { background: #e3e9ef; color: #2f4259; border-color: #c9d4df; }

/* ── Licences, requirements, pilot ──────────────── */
.pr-lic { padding: clamp(48px, 7vw, 104px) 0; }
.pr-lic__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.pr-lic__list li { padding: 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.pr-lic__list h3 { font: 600 var(--step-1)/1.2 var(--display); margin: 0 0 .4em; letter-spacing: -.02em; }
.pr-lic__list p { margin: 0; color: var(--ink-soft); }
.pr-req { padding: 0 0 clamp(48px, 7vw, 104px); }
.pr-req__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
.pr-pilot { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.pr-pilot li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.pr-pilot li > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sage-800); color: var(--cream-white); font-weight: 600; }
.pr-pilot h3 { font: 600 1.05rem/1.25 var(--display); margin: 0 0 .2em; }
.pr-pilot p { margin: 0; color: var(--ink-soft); }
@media (max-width: 820px) { .pr-req__grid { grid-template-columns: 1fr; } }

/* ── FAQ (shares landing styles) ────────────────── */
.pr-faq { background: var(--cream-50); }
.pr-faq .pr-h2 { max-width: 12em; }

/* ── Closing band (sage) ────────────────────────── */
.pr-close { --ivory: var(--cream-white); --ivory-2: var(--sage-100); color: var(--cream-white); padding: clamp(56px, 8vw, 120px) 0; }
.pr-close__in { max-width: 48rem; }
.pr-close p { color: var(--sage-100); font-size: var(--step-1); margin: 0 0 1.2em; }
.pr-close .pr-h2 { color: var(--cream-white); }
.pr-close :focus-visible { outline-color: var(--cream-white); }
.pr-close .btn { --btn-fg: var(--cream-white); --btn-bd: rgba(246, 242, 234, .45); }
.pr-close .btn:hover { --btn-bd: var(--cream-white); }
.pr-close .btn-primary { --btn-bg: var(--cream-white); --btn-fg: var(--bronze); --btn-bd: var(--cream-white); box-shadow: 0 14px 30px -16px rgba(30, 34, 27, .55); }
.pr-close .btn-primary:hover { --btn-bg: var(--cream-200); --btn-bd: var(--cream-200); }

/* ── Products landing ───────────────────────────── */
.pr-feature { padding: clamp(12px, 2vw, 24px) 0 clamp(32px, 4vw, 56px); }
.pr-feature__card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(22px, 3.5vw, 52px); border-radius: calc(var(--radius-lg) + 6px); background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 80px -56px rgba(59, 48, 41, .5); }
.pr-feature__card p { color: var(--ink-soft); }
.pr-feature__shot { display: block; border-radius: var(--radius-lg); }
.pr-feature__shot:focus-visible { outline: 3px solid var(--sage-700); outline-offset: 4px; }
.pr-also { padding: 0 0 clamp(48px, 7vw, 104px); }
.pr-also__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.pr-also__card { padding: 24px; border-radius: var(--radius-lg); background: var(--cream-2); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; justify-items: start; }
.pr-also__card h3 { font: 600 var(--step-1)/1.2 var(--display); letter-spacing: -.02em; margin: 0; }
.pr-also__card p { margin: 0; color: var(--ink-soft); }
@media (max-width: 899px) { .pr-feature__card { grid-template-columns: 1fr; } }

/* ── Lightbox ───────────────────────────────────── */
.pr-lb { width: min(96vw, 1500px); max-width: none; max-height: 96dvh; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--cream-50); color: var(--ink); overflow: auto; }
.pr-lb::backdrop { background: rgba(37, 42, 34, .72); }
.pr-lb[open] { animation: prLb .35s var(--ease-out); }
.pr-lb__img { display: block; width: 100%; height: auto; }
.pr-lb__cap { margin: 0; padding: 12px 18px 16px; font-size: .92rem; color: var(--ink-soft); }
.pr-lb__close { position: sticky; top: 10px; float: right; margin: 10px 10px -54px 0; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(59, 48, 41, .25); background: rgba(250, 247, 241, .92); color: var(--ink); cursor: pointer; }
.pr-lb__close:focus-visible { outline: 3px solid var(--sage-700); outline-offset: 2px; }
@keyframes prLb { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* ── Pricing form ───────────────────────────────── */
.pr-formwrap { padding: 0 0 clamp(56px, 8vw, 120px); max-width: 780px; }
.pr-form { display: grid; gap: 22px; }
.products .fs { margin: 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); display: grid; gap: 14px; min-width: 0; }
.products .fs legend { padding: 0 8px; font: 600 var(--step-1)/1.2 var(--display); letter-spacing: -.02em; }
.fs__hint { margin: 0; font-size: .92rem; color: var(--ink-mute); }
.products .fld { display: grid; gap: 6px; }
.products .fld label { font-weight: 600; font-size: .96rem; }
.products .fld label span { font-weight: 400; color: var(--ink-mute); }
.products .fld input, .products .fld select, .products .fld textarea { width: 100%; min-height: 48px; padding: .7em .9em; border-radius: 12px; border: 1.5px solid #c9bda9; background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--sans); }
.products .fld textarea { min-height: 120px; resize: vertical; }
.products .fld input:focus-visible, .products .fld select:focus-visible, .products .fld textarea:focus-visible { outline: 3px solid var(--sage-700); outline-offset: 2px; border-color: var(--sage-700); }
.products .fld [aria-invalid="true"] { border-color: var(--danger); }
.fld__err { margin: 0; color: #8f2f29; font-size: .92rem; font-weight: 500; }
.fld--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.products .check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: .55em .9em; border-radius: 12px; border: 1.5px solid #d7ccb8; background: #fff; cursor: pointer; transition: border-color .2s, background-color .2s; }
.products .check:hover { border-color: var(--sage-600); }
.products .check input { width: 20px; height: 20px; flex: none; accent-color: var(--sage-700); margin: 0; }
.products .check:has(input:checked) { border-color: var(--sage-700); background: var(--sage-50); }
.products .check:has(input:focus-visible) { outline: 3px solid var(--sage-700); outline-offset: 2px; }
.pr-errsum { padding: 14px 18px; border-radius: 12px; background: #f7e3df; border: 1px solid #e3b4ac; color: #6e2620; margin-bottom: 18px; }
.pr-errsum:focus-visible { outline: 3px solid #8f2f29; outline-offset: 2px; }
.pr-priv { margin: 0; font-size: .92rem; color: var(--ink-mute); }
.pr-form .btn { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  .pr-lb[open] { animation: none; }
  .pr-tab, .chipbtn, .products .check { transition: none; }
}
@media (forced-colors: active) {
  .pr-badge { border-color: CanvasText; }
  .pr-tab[aria-selected="true"], .chipbtn.is-on { outline: 2px solid Highlight; }
}

/* Header link for the current section */
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* ── Price options (shown only once filled in Studio) ── */
.pr-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 24px; }
.pr-price { padding: 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.pr-price h3 { font: 600 var(--step-1)/1.2 var(--display); margin: 0; letter-spacing: -.02em; }
.pr-price ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pr-price li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pr-price li:last-child { border-bottom: 0; padding-bottom: 0; }
.pr-price__how { color: var(--ink-soft); font-weight: 600; }
.pr-price__amt { text-align: right; color: var(--ink-soft); }
.pr-price__amt strong { color: var(--ink); font: 600 var(--step-2)/1.1 var(--display); letter-spacing: -.02em; }
.pr-price small { grid-column: 1 / -1; color: var(--ink-soft); }
.pr-price .btn { justify-self: start; }

/* ── Hero with product visual ───────────────────── */
.pr-hero:has(.pr-hero__grid) { padding-top: calc(72px + clamp(20px, 3vw, 40px)); padding-bottom: clamp(24px, 3vw, 40px); }
.pr-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 1000px) { .pr-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }
.pr-h1--hero { font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4rem); max-width: 12em; margin-top: .2em; }
.pr-hero__copy .pr-lede { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); max-width: 32em; }
.pr-hero__art { position: relative; display: block; padding: 0 0 36px 40px; text-decoration: none; }
.pr-hero__art:before { content: ""; position: absolute; inset: 8% -40% 4% 18%; border-radius: 40px; background: linear-gradient(135deg, var(--sage-100), var(--cream-200)); z-index: 0; }
.pr-frame { position: relative; z-index: 1; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 50px 80px -40px rgba(59, 48, 41, .45), 0 2px 6px rgba(59, 48, 41, .06); overflow: hidden; }
@media (min-width: 1000px) { .pr-frame { width: calc(100% + min(12vw, 160px)); } }
.pr-frame__bar { display: flex; gap: 7px; align-items: center; height: 26px; padding-left: 14px; background: #f1ebe0; border-bottom: 1px solid var(--line); }
.pr-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d7cbb8; }
.pr-frame .shot.pr-frame__shot { border: 0; border-radius: 0; box-shadow: none; }
.pr-hero__art .pr-hero__phone { position: absolute; z-index: 2; left: 0; bottom: 0; width: 26%; max-width: 190px; border-radius: 24px; border: 6px solid #fff; box-shadow: 0 30px 50px -22px rgba(59, 48, 41, .6); }
.pr-hero__tag { position: absolute; z-index: 3; left: 30%; bottom: 0; margin: 0; padding: .6em 1em; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 600 .88rem/1 var(--sans); color: var(--ink); box-shadow: 0 14px 30px -18px rgba(59, 48, 41, .5); display: flex; gap: .55em; align-items: center; white-space: nowrap; }
.pr-dot { width: 9px; height: 9px; border-radius: 50%; background: #4e8a63; box-shadow: 0 0 0 4px rgba(78, 138, 99, .18); }
.pr-facts { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 32em; }
.pr-facts li { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.pr-facts strong { font: 600 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1 var(--display); color: var(--terra); letter-spacing: -.02em; }
.pr-facts span { font-size: .88rem; color: var(--ink-soft); line-height: 1.35; }
.pr-hero__copy .pr-cta { margin-bottom: 1.4em; }
@media (max-width: 999px) { .pr-hero__art { max-width: 680px; } }
@media (max-width: 520px) { .pr-facts { grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .pr-facts span { font-size: .8rem; } .pr-hero__tag { display: none; } .pr-hero__art { padding-left: 24px; } }

/* ── Product shelf ──────────────────────────────── */
.pr-shelf { padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 4vw, 48px); }
.pr-shelf__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.pr-prod { padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.pr-prod p { margin: 0; color: var(--ink-soft); }
.pr-prod .btn { justify-self: start; }
.pr-prod--flag { grid-column: 1 / -1; background: var(--cream-50); }
.pr-prod--flag .pr-points { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 6px 0 10px; }
.pr-prod--flag .pr-cta { margin: 0; }
.pr-prod__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pr-prod__meta .eyebrow { margin: 0; }
.pr-badge--available { background: var(--sage-100); color: var(--sage-800); border-color: var(--sage-200); }

/* ── Complete package and add-ons ───────────────── */
.pr-pack { padding: clamp(48px, 7vw, 96px) 0 clamp(24px, 4vw, 48px); }
.pr-pack__list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.pr-pack__list li { padding: 22px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.pr-pack__list h3 { font: 600 var(--step-1)/1.2 var(--display); margin: 0 0 .35em; letter-spacing: -.02em; }
.pr-pack__list p { margin: 0; color: var(--ink-soft); }
.pr-addwrap { background: var(--cream-50); padding: clamp(48px, 7vw, 96px) 0; }
.pr-addons { display: grid; gap: 28px; margin-top: 12px; }
.pr-addons__h { font: 600 .82rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terra); margin: 0 0 12px; }
.pr-addons ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.pr-addon { padding: 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.pr-addon__top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.pr-addon h4 { font: 600 1.05rem/1.3 var(--display); margin: 0; }
.pr-addon p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.pr-addon__ask { font-weight: 600; color: var(--terra); text-underline-offset: .22em; justify-self: start; }

/* ── Technical details ──────────────────────────── */
.pr-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pr-toc a { padding: .5em 1em; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.pr-toc a:hover { border-color: var(--ink); }
.pr-tech { padding-top: clamp(40px, 6vw, 72px); scroll-margin-top: 90px; }
.pr-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 32px; margin: 12px 0 0; }
.pr-spec div { display: grid; grid-template-columns: 9.5em 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.pr-spec dt { font-weight: 600; }
.pr-spec dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 520px) { .pr-spec div { grid-template-columns: 1fr; gap: 4px; } }
.pr-inc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 12px; }
.pr-inc__card { padding: 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.pr-inc__card h3 { font: 600 var(--step-1)/1.2 var(--display); margin: 0 0 .7em; letter-spacing: -.02em; }
.pr-inc__note { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--cream-50); color: var(--ink-soft); font-size: .92rem; }
.pr-int { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 28px; margin-top: 28px; }
.pr-table { width: 100%; border-collapse: collapse; }
.pr-table th, .pr-table td { text-align: left; vertical-align: top; padding: 12px 10px 12px 0; border-top: 1px solid var(--line); }
.pr-table th { font-weight: 600; width: 38%; }
.pr-table td { color: var(--ink-soft); }
.pr-pilot--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px 32px; margin-top: 12px; }
.pr-legal { font-size: .82rem; color: var(--ink-mute); padding: 18px 0 28px; max-width: 70em; }

/* ── Hero motion (products.js adds the count-up and the parallax) ──
   The home page's vocabulary: opacity on var(--ease) over .9s, movement on var(--ease-out) over 1.1s, an 80ms
   stagger, words rising out of their line, a damped pop. Transform and opacity only. Without JS (.no-js) and under
   reduced motion none of this applies and everything sits in its final place. The big screenshot never fades (it only
   eases up), so the largest image paints at once. */
@media (prefers-reduced-motion: no-preference) {
  .js .pr-hero--motion .pr-hero__copy > :is(.pr-crumb, .eyebrow, .pr-lede, .pr-cta),
  .js .pr-hero--motion .pr-facts li,
  .js .pr-hero--motion .pr-works { animation: prFade .9s var(--ease) var(--d, 0ms) both, prLift 1.1s var(--ease-out) var(--d, 0ms) both; }
  .js .pr-hero--motion .pr-hero__copy > .eyebrow { --d: 60ms; }
  .js .pr-hero--motion .pr-lede { --d: 520ms; }
  .js .pr-hero--motion .pr-cta { --d: 600ms; }
  .js .pr-hero--motion .pr-facts li { --d: 680ms; }
  .js .pr-hero--motion .pr-facts li:nth-child(2) { --d: 760ms; }
  .js .pr-hero--motion .pr-facts li:nth-child(3) { --d: 840ms; }
  .js .pr-hero--motion .pr-works { --d: 920ms; }

  /* Headline: each word rises out of its line, a beat apart. */
  .js .pr-hero--motion .rw { display: inline-block; vertical-align: top; overflow: clip; overflow-clip-margin: .2em; }
  .js .pr-hero--motion .rw > span { display: inline-block; transform-origin: 0 100%; animation: prWord 1.1s var(--ease-out) calc(120ms + var(--w, 0) * 45ms) both; }

  /* The screenshot pair: the browser frame eases up and in, the backdrop settles, the phone pops with a slight overshoot. */
  .js .pr-hero--motion .pr-frame { animation: prFrame 1.4s var(--ease-out) 140ms both; }
  .js .pr-hero--motion .pr-hero__art::before { animation: prFade 1.2s var(--ease) both, prBack 1.6s var(--ease-out) both; }
  .js .pr-hero--motion .pr-hero__phone { animation: prPop .95s cubic-bezier(.34, 1.45, .64, 1) 560ms both; }
  /* The sync pill: arrives last, then breathes gently while its dot pings. */
  .js .pr-hero--motion .pr-hero__tag { animation: prFade .9s var(--ease) 980ms both, prLift 1.1s var(--ease-out) 980ms both, prBreathe 3.2s ease-in-out 2.2s infinite; }
  .js .pr-hero--motion .pr-dot { position: relative; }
  .js .pr-hero--motion .pr-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #4e8a63; opacity: 0; animation: prPing 3.2s ease-out 2.2s infinite; }
}
@keyframes prFade { from { opacity: 0; } }
@keyframes prLift { from { transform: translateY(18px); } }
@keyframes prWord { from { transform: translateY(125%) rotate(4deg); } }
@keyframes prFrame { from { transform: translateY(56px) scale(.965); } }
@keyframes prBack { from { transform: translateX(-24px) scale(.94); } }
@keyframes prPop { from { opacity: 0; transform: translateY(28px) scale(.78) rotate(-5deg); } }
@keyframes prBreathe { 0%, 100% { transform: none; } 50% { transform: scale(1.03); } }
@keyframes prPing { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }
.pr-facts strong { font-variant-numeric: tabular-nums; }

/* ── Marketplace logos ──────────────────────────── */
/* Single colour (the ink at reduced opacity), one optical size, full ink on hover. Brands with no icon are a text wordmark. */
.mlogos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.mlogos li { display: flex; align-items: center; min-height: 32px; }
.mlogo { display: block; width: auto; height: 22px; opacity: .72; transition: opacity .3s var(--ease); }
.mlogo--word { height: auto; font: 700 1.04rem/1 var(--display); letter-spacing: -.025em; color: var(--ink); white-space: nowrap; }
.mlogos li:hover .mlogo, .mk__card:hover .mlogo { opacity: 1; }
/* Wordmark-shaped icons (cropped to their ink) sit at the cap height of the text wordmarks. */
.mlogo.mlogo--wide { height: 15px; }
.mlogo--ebay.mlogo--wide { height: 18px; }
.mlogo--aliexpress.mlogo--wide { height: 14px; }
.mlogos--hero .mlogo { height: 24px; }
.mlogos--hero .mlogo.mlogo--wide { height: 17px; }
.mlogos--hero .mlogo--ebay.mlogo--wide { height: 21px; }
.mlogos--hero .mlogo--word { font-size: 1.1rem; }
.pr-works { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-top: 4px; padding-bottom: clamp(20px, 3vw, 36px); }
.pr-works__h, .mk-logos__h { margin: 0; font: 600 .76rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.mk-logos { display: grid; gap: 14px; margin: 6px 0 24px; padding: 18px clamp(16px, 2.4vw, 24px); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.mk-logos__set { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.mk-logos__h { min-width: 10em; }
.mk-logos__set--next { padding-top: 14px; border-top: 1px solid var(--line); }
.mk__name { display: flex; align-items: center; gap: 8px; }
.mk__name > span { min-width: 0; }
.mk__name .mlogo { height: 20px; flex: none; }
.mk__name .mlogo.mlogo--wide { height: 13px; }
.mk__name .mlogo--ebay.mlogo--wide { height: 16px; }
.mk__name .mlogo--aliexpress.mlogo--wide { height: 12px; }
@media (prefers-reduced-motion: reduce) { .mlogo { transition: none; } }
@media (forced-colors: active) { .mlogo { opacity: 1; } }

/* ── Why Pop Street Commerce ─────────────────────── */
.pr-why { padding: clamp(48px, 7vw, 96px) 0 clamp(16px, 3vw, 32px); }
.pr-why__head { display: grid; gap: 18px; margin-bottom: 28px; }
.pr-for { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pr-for li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--sage-50); border: 1px solid var(--sage-200); }
.pr-for strong { color: var(--sage-800); }
.pr-for span { color: var(--ink-soft); font-size: .95rem; }
.pr-why__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.pr-why__list li { padding: 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.pr-why__n { font: 600 .85rem/1 var(--sans); color: var(--terra); letter-spacing: .08em; }
.pr-why__list h3 { font: 600 var(--step-1)/1.2 var(--display); margin: .5em 0 .35em; letter-spacing: -.02em; }
.pr-why__list p { margin: 0; color: var(--ink-soft); }
.pr-stack { margin-top: 28px; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--cream-50); border: 1px solid var(--line); }
.pr-stack__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px 28px; }
.pr-stack__list li { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pr-stack__list s { color: var(--ink-mute); text-decoration-thickness: 1.5px; }
.pr-stack__list span { font-weight: 600; color: var(--ink); }
.pr-stack__list .icon { width: 16px; height: 16px; color: var(--terra); }
.pr-promise { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.pr-promise li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.pr-promise .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--sage-700); stroke-width: 2.4; }
.pr-promise p { margin: .2em 0 0; color: var(--ink-soft); }
@media (min-width: 900px) { .pr-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr-care { margin-top: 28px; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: var(--sage-50); border: 1px solid var(--sage-200); }
.pr-care__head .pr-h2 { margin-top: .1em; }
.pr-care__list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px 28px; }
.pr-care__list li { padding-top: 14px; border-top: 1px solid var(--sage-200); }
.pr-care__list h4 { font: 600 1.05rem/1.3 var(--display); margin: 0 0 .3em; color: var(--sage-800); }
.pr-care__list p { margin: 0; color: var(--ink-soft); }
@media (min-width: 900px) { .pr-care__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }