/* OmegaCarParts — fonts. Self-hosted only: nothing is requested from Google's font CDNs,
   so no visitor IP is transferred to the US without consent (GDPR art. 6/44+; LG Munchen I 3 O 17493/20).
   Assistant (UI font): variable woff2 (wght axis 200-800, Google Fonts v24), subsets latin +
   latin-ext; one file per subset covers weights 400/600/700/800. Same family Shopify serves on
   the live store (type_header_font/type_body_font = assistant).
   IBM Plex Mono (OE part numbers): self-hosted TTFs copied from theme/assets/ocp-mono-*.ttf. */
@font-face{font-family:"Assistant";src:url("assistant-var-latin-ext.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Assistant";src:url("assistant-var-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";src:url("ocp-mono-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("ocp-mono-semibold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}

/* OmegaCarParts color tokens — verbatim from theme/snippets/ocp-brand.liquid (:root) +
   theme/config/settings_data.json color schemes. Do not invent shades. */
:root{
  /* Brand core */
  --ocp-navy:#16294D; --ocp-navy-2:#1D3665; /* navy-2 = hover / gradient mid */
  --ocp-green:#2E9E4F; --ocp-green-2:#238544; /* green-2 = hover */
  --ocp-silver:#96A0AA; /* logo gear silver; muted brand-tile text */
  --ocp-ink:#1B2430;    /* primary text */
  /* Review stars */
  --ocp-gold:#F5B301; --ocp-gold-empty:#DDE2E7;
  /* Surfaces & lines */
  --ocp-bg:#FFFFFF; --ocp-bg-soft:#F6F7F9; --ocp-hairline:#E3E7EB;
  /* Chips (OE numbers) */
  --ocp-chip-bg:#F1F3F5; --ocp-chip-border:#DEE2E6; --ocp-chip-text:#343A40;
  /* Text ramp */
  --ocp-text-muted:#5A636E; --ocp-text-label:#66717E; /* label darkened for 4.5:1 at small sizes */
  --ocp-text-faint:#8A94A0; /* used by theme, undefined there; defined here — see readme "Gaps" */
  /* On-navy ramp */
  --ocp-on-navy-kicker:#8FA6CF; --ocp-on-navy-body:#C9D6EC; --ocp-on-navy-soft:#DBE4F4;
  /* Green tints (selected states, success surfaces) */
  --ocp-green-tint:#EEF7F1; --ocp-green-tint-border:#CDEBD7; --ocp-green-deep:#1B6B35; /* text on green-tint */
  /* Semantic */
  --ocp-danger:#C0392B; /* used by theme (cart remove hover), undefined there — see readme "Gaps" */
  --ocp-allegro:#FF5A00; /* marketplace wordmark only */
  /* Gradients */
  --ocp-gradient-hero:linear-gradient(135deg,#16294D 0%,#1D3665 55%,#16294D 100%); /* @kind color */
  /* Dawn scheme aliases (settings_data.json) */
  --ocp-scheme-2-bg:#F3F3F3; --ocp-scheme-4-bg:#121212;
}

/* OmegaCarParts typography tokens — from ocp-brand.liquid + section CSS. */
:root{
  --ocp-font:"Assistant",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ocp-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* @kind font */
  /* Scale (px values as written in the theme; no rounding) */
  --ocp-fs-h1:clamp(30px,5vw,52px); /* @kind font */ /* hero H1, w800, lh 1.1, ls -.01em */
  --ocp-fs-page-h1:32px;            /* collection/cart H1, w800 */
  --ocp-fs-pdp-h1:28px;             /* product H1, w800, lh 1.2 */
  --ocp-fs-h2:28px;                 /* section H2 (.ocp-h2), w800, lh 1.2, ls -.01em */
  --ocp-fs-h3:24px;                 /* sub-section H2 (similar/newsletter), w800 */
  --ocp-fs-sub:clamp(15px,2vw,19px); /* @kind font */ /* hero subheading, lh 1.5 */
  --ocp-fs-body:15px;               /* body copy, lh 1.55–1.65 */
  --ocp-fs-ui:14px;                 /* links, list items, filters */
  --ocp-fs-small:13px;              /* meta, crumbs, fitment lines */
  --ocp-fs-kicker:12px;             /* kicker, w700/600 */
  --ocp-fs-label:11px;              /* uppercase micro-labels */
  --ocp-fs-oe:12.5px;               /* OE chip (mono) */
  /* Letterspacing */
  --ocp-ls-tight:-.01em;            /* all display/headings */
  --ocp-ls-kicker:.18em;            /* kickers (hero uses .22em) */
  --ocp-ls-hero-kicker:.22em;
  --ocp-ls-label:.09em;             /* spec labels, table heads */
  --ocp-ls-brand:.06em;             /* brand tiles, uppercase */
}

/* OmegaCarParts layout, radius, border, shadow & motion tokens — from ocp-brand.liquid + sections. */
:root{
  /* Page grid */
  --ocp-page:1200px; --ocp-pad:22px;
  /* Section vertical rhythm (as written in sections) */
  --ocp-sect-pad:44px;      /* standard section padding-block */
  --ocp-sect-pad-lg:52px;   /* marketplaces/footer top */
  /* Radii */
  --ocp-r-btn:8px; --ocp-r-card:12px; --ocp-r-panel:14px; --ocp-r-chip:6px; --ocp-r-pill:999px;
  /* Borders */
  --ocp-border-hairline:1px solid var(--ocp-hairline);
  --ocp-border-input:1px solid rgba(27,36,48,.55); /* @kind other */ /* inputs: 1px @ 55% ink (settings inputs_border_opacity:55) */
  /* Shadows (rgba(22,41,77,…) = navy-based) */
  --ocp-shadow-card-hover:0 8px 22px rgba(22,41,77,.14);
  --ocp-ring-green:0 0 0 2px var(--ocp-green); /* hover ring rides WITH the hover shadow */
  --ocp-shadow-panel:0 12px 32px rgba(22,41,77,.18);   /* dropdown menus */
  --ocp-shadow-modal:0 18px 50px rgba(22,41,77,.18);   /* search modal */
  --ocp-shadow-badge:0 1px 2px rgba(22,41,77,.05);     /* review badge card */
  --ocp-focus-ring:0 0 0 2px #fff,0 0 0 4px var(--ocp-green);
  /* Motion */
  --ocp-ease:cubic-bezier(.2,.6,.2,1); /* @kind other */       /* micro-interactions, .12s–.2s */
  --ocp-ease-reveal:cubic-bezier(.2,.7,.2,1); /* @kind other */ /* reveals/cascade, .6–.7s */
  --ocp-lift:translateY(-2px); /* @kind other */               /* card hover lift */
}

/* OmegaCarParts mobile tokens — breakpoints, tap targets, mobile type floor, mobile rhythm.
   Added after the July 2026 mobile audit (17 layout defects). Desktop tokens live in layout.css. */
:root{
  /* Breakpoints (Dawn-native values — keep these, the theme's media queries already use them) */
  --ocp-bp-xs:360px;  /* @kind other */ /* Android baseline — narrowest supported viewport */
  --ocp-bp-sm:480px;  /* @kind other */ /* large phone / phablet */
  --ocp-bp-md:750px;  /* @kind other */ /* Dawn "tablet" — mobile layout applies BELOW this */
  --ocp-bp-lg:990px;  /* @kind other */ /* Dawn "desktop" */
  --ocp-bp-xl:1200px; /* @kind other */ /* page max-width reached */

  /* Mobile page grid */
  --ocp-pad-mobile:16px;        /* side padding < 750px (desktop --ocp-pad is 22px) */
  --ocp-sect-pad-mobile:32px;   /* section padding-block < 750px (desktop 44px) */
  --ocp-gap-mobile:10px;        /* grid gap between cards/tiles < 750px */

  /* Tap targets — WCAG 2.5.8 / Apple HIG */
  --ocp-tap:44px;          /* required minimum for any interactive element */
  --ocp-tap-compact:40px;  /* only allowed inside dense lists where 44 breaks the row */
  --ocp-tap-icon:44px;     /* icon-only buttons: ×, −, +, close, filter */
  --ocp-tap-gap:8px;       /* minimum space between two adjacent tap targets */

  /* Mobile type floor — nothing on a phone renders below --ocp-fs-min */
  --ocp-fs-min:12px;             /* absolute floor, all viewports */
  --ocp-fs-label-mobile:12px;    /* micro-labels: desktop 11px → 12px on mobile */
  --ocp-fs-kicker-mobile:12px;   /* kickers stay 12px, tracking drops to .12em */
  --ocp-ls-kicker-mobile:.12em;  /* .18em is too airy at 360px */
  --ocp-fs-oe-mobile:12px;       /* OE chip mono on mobile */

  /* Mobile card/media geometry */
  --ocp-ratio-card:4/3;      /* @kind other */ /* part photos — never unset, ragged rows come from missing ratios */
  --ocp-ratio-cat:16/10;     /* @kind other */ /* category cards */
  --ocp-tile-min-h:72px;     /* brand tile minimum, so 1-line and 2-line names share a row height */
  --ocp-cart-thumb:64px;     /* cart line thumbnail on mobile */
}

/* --- Mobile helper primitives (the three fixes needed repeatedly) --- */

/* Full-bleed colour band inside a page-width container.
   Fixes: announcement bar painted inside the 1200px wrapper (white gutters). */
.ocp-bleed{width:100vw;margin-inline:calc(50% - 50vw);max-width:100vw}

/* Guaranteed tap target for text links that would otherwise be ~25px tall. */
.ocp-tap{display:inline-flex;align-items:center;min-height:var(--ocp-tap);padding-block:10px}

/* Single-line truncation with a real ellipsis — never clip mid-glyph at the card edge. */
.ocp-truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:749px){
  :root{--ocp-pad:var(--ocp-pad-mobile);--ocp-sect-pad:var(--ocp-sect-pad-mobile);--ocp-sect-pad-lg:var(--ocp-sect-pad-mobile);--ocp-fs-label:var(--ocp-fs-label-mobile);--ocp-fs-kicker:var(--ocp-fs-kicker-mobile);--ocp-ls-kicker:var(--ocp-ls-kicker-mobile);--ocp-fs-oe:var(--ocp-fs-oe-mobile)}
}

/* OmegaCarParts base layer — shared primitives exactly as ocp-brand.liquid ships them. */
body{margin:0;font-family:var(--ocp-font);color:var(--ocp-ink);background:var(--ocp-bg);-webkit-font-smoothing:antialiased;}
a{color:var(--ocp-navy);}
a:hover{color:var(--ocp-green-2);}
.ocp-wrap{max-width:var(--ocp-page);margin:0 auto;padding-left:var(--ocp-pad);padding-right:var(--ocp-pad);}
.ocp-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ocp-navy);margin:0 0 6px;}
.ocp-h2{font-size:28px;line-height:1.2;font-weight:800;color:var(--ocp-ink);margin:0;letter-spacing:-.01em;}
.ocp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;}
.ocp-head a{font-size:14px;font-weight:600;color:var(--ocp-navy);white-space:nowrap;text-decoration:none;}
.ocp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ocp-font);font-weight:700;font-size:15px;padding:14px 30px;border-radius:var(--ocp-r-btn);text-decoration:none;border:1px solid transparent;cursor:pointer;min-height:44px;box-sizing:border-box;transition:background .12s var(--ocp-ease),border-color .12s var(--ocp-ease);}
.ocp-btn--green{background:var(--ocp-green);color:#fff;}
.ocp-btn--green:hover{background:var(--ocp-green-2);color:#fff;}
.ocp-btn--navy{background:var(--ocp-navy);color:#fff;}
.ocp-btn--navy:hover{background:var(--ocp-navy-2);color:#fff;}
.ocp-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);font-weight:600;}
.ocp-btn--ghost:hover{border-color:rgba(255,255,255,.7);color:#fff;}
.ocp-btn--outline{background:transparent;color:var(--ocp-navy);border-color:var(--ocp-navy);font-weight:600;}
.ocp-btn--outline:hover{background:var(--ocp-bg-soft);color:var(--ocp-navy);}
.ocp-oe{display:inline-block;font-family:var(--ocp-mono);font-size:12.5px;color:var(--ocp-chip-text);background:var(--ocp-chip-bg);border:1px solid var(--ocp-chip-border);border-radius:var(--ocp-r-chip);padding:3px 9px;line-height:1.5;white-space:nowrap;}
.ocp-spec{border:1px solid var(--ocp-hairline);border-radius:var(--ocp-r-card);overflow:hidden;width:100%;border-collapse:collapse;font-family:var(--ocp-font);}
.ocp-spec tr:nth-child(even){background:var(--ocp-bg-soft);}
.ocp-spec td{padding:9px 14px;border:0;vertical-align:top;}
.ocp-spec td:first-child{width:38%;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ocp-text-label);}
.ocp-spec td:last-child{font-size:14px;font-weight:600;color:var(--ocp-ink);}
.ocp-spec td.ocp-mono{font-family:var(--ocp-mono);font-weight:500;}
:is(a,button,input,select,textarea):focus-visible{outline:none;box-shadow:var(--ocp-focus-ring);border-radius:var(--ocp-r-btn);}

/* OmegaCarParts — landing pages. Inherits the OCP world: navy ground, green action, hairlines, Assistant + IBM Plex Mono.
   Structural motif: the shelf tag — hairline block, mono code in the corner. */
*{box-sizing:border-box}
:root{--ease-out-expo:cubic-bezier(.16,1,.3,1)}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ocp-bg);color:var(--ocp-ink);font-family:var(--ocp-font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--ocp-green-2);text-decoration:none}
a:hover{color:var(--ocp-green);text-decoration:underline}
h1,h2,h3,h4{margin:0;letter-spacing:var(--ocp-ls-tight);text-wrap:balance;font-weight:800}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:none;box-shadow:var(--ocp-focus-ring);border-radius:4px}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--ocp-mono);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--ocp-mono);font-size:11px;letter-spacing:var(--ocp-ls-label);text-transform:uppercase;color:var(--ocp-text-label)}
.sect{padding:84px 0}
.sect-soft{background:var(--ocp-bg-soft)}
.sect h2{font-size:clamp(27px,3.4vw,40px);line-height:1.14}
.sect-lead{margin-top:14px;max-width:62ch;font-size:clamp(16px,1.5vw,19px);color:var(--ocp-text-muted)}
.hr{height:1px;background:var(--ocp-hairline);border:0;margin:0}

/* ---- header ---- */
.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);box-shadow:inset 0 -1px 0 var(--ocp-hairline);transition:box-shadow .3s var(--ease-out-expo)}
.hd-in{display:flex;align-items:center;gap:20px;height:66px;transition:height .3s var(--ease-out-expo)}
.hd.sm{box-shadow:0 8px 26px rgba(22,41,77,.09),inset 0 -1px 0 var(--ocp-hairline)}
.hd.sm .hd-in{height:56px}
.hd-logo{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none}
.hd-logo:hover{text-decoration:none}
.hd-logo img{height:42px;width:auto;transition:height .3s var(--ease-out-expo)}
.hd.sm .hd-logo img{height:34px}
.hd-logo span{font-family:var(--ocp-mono);font-size:11px;color:var(--ocp-text-label);letter-spacing:.04em;align-self:flex-end;padding-bottom:7px}
.ft-logo img{height:30px}
.hd-nav{display:flex;gap:20px;flex:1;min-width:0;justify-content:center;overflow:hidden}
.hd-nav a{color:var(--ocp-ink);font-size:14.5px;font-weight:600;white-space:nowrap}
.hd-nav a:hover{color:var(--ocp-green-2);text-decoration:none}
.hd-right{display:flex;align-items:center;gap:10px;flex:none}
.lang{position:relative;display:flex;align-items:center}
.lang-btn{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 11px;border:var(--ocp-border-hairline);border-radius:var(--ocp-r-btn);background:#fff;cursor:pointer;font-family:var(--ocp-mono);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ocp-ink);transition:border-color .18s var(--ocp-ease),color .18s var(--ocp-ease)}
.lang-btn:hover{border-color:var(--ocp-green);color:var(--ocp-green-2)}
.lang-btn .chev{color:var(--ocp-text-label);transition:transform .24s var(--ease-out-expo)}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-list{display:none;position:absolute;top:calc(100% + 9px);right:0;width:212px;max-height:min(56vh,340px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:var(--ocp-border-hairline);border-radius:12px;box-shadow:var(--ocp-shadow-panel);padding:6px;z-index:80}
.lang-list.open{display:block;animation:ocpMenuIn .26s var(--ease-out-expo)}
@keyframes ocpMenuIn{from{transform:translateY(-8px)}to{transform:none}}
.lang-list li{display:flex}
.lang-list button{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;font-family:var(--ocp-font);font-size:14.5px;color:var(--ocp-ink);text-align:left;transition:background .14s var(--ocp-ease)}
.lang-list button:hover{background:var(--ocp-bg-soft)}
.lang-list button .c{font-family:var(--ocp-mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ocp-text-label);width:22px;flex:none}
.lang-list button .n{flex:1;min-width:0}
.lang-list button[aria-selected="true"]{background:var(--ocp-green-tint);color:var(--ocp-green-deep);font-weight:700}
.lang-list button[aria-selected="true"] .c{color:var(--ocp-green-2)}
/* ---- language strip (flat scrolling band, sits in the footer) ---- */
.langbar{margin-top:30px;padding:8px 0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.langs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;row-gap:2px}
.langs button{flex:none;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 6px;border:0;background:transparent;cursor:pointer;font-family:var(--ocp-mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ocp-on-navy-kicker);border-radius:7px;transition:color .16s var(--ocp-ease),background .16s var(--ocp-ease)}
.langs button:hover{color:#fff;background:rgba(255,255,255,.08)}
.langs button[aria-pressed="true"]{background:rgba(127,214,154,.16);color:#7FD69A}
.hd-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:var(--ocp-border-hairline);border-radius:var(--ocp-r-btn);background:#fff;cursor:pointer;color:var(--ocp-ink)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:var(--ocp-r-btn);border:1px solid transparent;font-family:var(--ocp-font);font-size:15px;font-weight:700;cursor:pointer;transition:background .16s var(--ocp-ease),transform .16s var(--ocp-ease),box-shadow .16s var(--ocp-ease);white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-pri{background:var(--ocp-green);color:#fff}
.btn-pri:hover{background:var(--ocp-green-2);color:#fff;transform:var(--ocp-lift);box-shadow:0 8px 22px rgba(35,133,68,.28)}
.btn-out{background:transparent;color:var(--ocp-ink);border-color:var(--ocp-hairline)}
.btn-out:hover{border-color:var(--ocp-green);color:var(--ocp-green-2)}
.btn-ghost-navy{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost-navy:hover{background:rgba(255,255,255,.16);color:#fff}
.btn-sm{min-height:44px;font-size:14px;padding:0 16px}
.btn[disabled]{opacity:.6;pointer-events:none}

/* ---- hero ---- */
.hero{position:relative;background:var(--ocp-gradient-hero);color:#fff;overflow:hidden;padding:78px 0 0}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:rgba(255,255,255,.14)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr);gap:54px;align-items:center;padding-bottom:78px}
.hero h1{font-size:clamp(33px,4.9vw,58px);line-height:1.05;color:#fff}
.hero h1 em{font-style:normal;color:#7FD69A}
.hero-sub{margin-top:20px;max-width:52ch;font-size:clamp(16px,1.6vw,19px);line-height:1.62;color:var(--ocp-on-navy-body)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--ocp-on-navy-kicker)}

/* shelf-tag terms strip */
.terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:44px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);border-radius:var(--ocp-r-card);overflow:hidden}
.terms li{background:#16294D;padding:16px 18px;min-width:0}
.terms b{display:block;font-family:var(--ocp-mono);font-size:20px;font-weight:600;color:#fff;letter-spacing:-.01em}
.terms span{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--ocp-on-navy-kicker)}

/* ---- device frames ---- */
.laptop{width:100%}
.laptop-scr{position:relative;background:#0E1B33;border:1px solid rgba(255,255,255,.2);border-radius:12px 12px 4px 4px;padding:9px 9px 0;box-shadow:0 30px 70px rgba(0,0,0,.42);overflow:hidden}
.laptop-scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(104deg,transparent 34%,rgba(127,214,154,.16) 47%,rgba(255,255,255,.3) 52%,transparent 65%);transform:translateX(-130%)}
.laptop.an .laptop-scr::after{animation:ocpSheen 1.6s var(--ease-out-expo) .8s both}
@keyframes ocpSheen{to{transform:translateX(130%)}}
.laptop-scr img{border-radius:6px 6px 0 0;width:100%}
.laptop-base{height:13px;margin:0 auto;width:112%;max-width:none;transform:translateX(-5.35%);background:linear-gradient(180deg,#C9CFD8,#8E97A3);border-radius:0 0 12px 12px;position:relative}
.laptop-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:88px;height:5px;background:rgba(0,0,0,.22);border-radius:0 0 6px 6px}
.brw{border:var(--ocp-border-hairline);border-radius:var(--ocp-r-panel);overflow:hidden;background:#fff;box-shadow:var(--ocp-shadow-card-hover)}
.brw-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 13px;background:var(--ocp-bg-soft);box-shadow:inset 0 -1px 0 var(--ocp-hairline)}
.brw-dots{display:flex;gap:6px;flex:none}
.brw-dots i{width:9px;height:9px;border-radius:50%;background:var(--ocp-chip-border);display:block}
.brw-url{flex:1;min-width:0;height:22px;display:flex;align-items:center;padding:0 10px;background:#fff;border:var(--ocp-border-hairline);border-radius:var(--ocp-r-pill);font-family:var(--ocp-mono);font-size:10.5px;color:var(--ocp-text-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brw img{width:100%}
.shot-fade{transition:opacity .7s var(--ocp-ease-reveal),transform .7s var(--ocp-ease-reveal)}
.shot-fade.in{opacity:1;transform:none}

/* ---- motion system: hero sequence + scroll reveal (JS-applied, visible without JS) ---- */
@keyframes ocpRise{from{transform:translateY(20px)}to{transform:none}}
@keyframes ocpLaptopIn{from{transform:translateY(30px) scale(.965)}to{transform:none}}
@keyframes ocpPanelIn{from{transform:translateY(12px)}to{transform:none}}
.an{animation:ocpRise .85s var(--ease-out-expo) both;animation-delay:var(--d,0ms)}
.laptop.an{animation-name:ocpLaptopIn;animation-duration:1.15s}
.pl-in{animation:ocpPanelIn .5s var(--ease-out-expo)}
.faq details[open] p{animation:ocpPanelIn .4s var(--ease-out-expo)}

/* ---- shelf tag block ---- */
.tag{position:relative;background:#fff;border:var(--ocp-border-hairline);border-radius:var(--ocp-r-card);padding:22px 22px 24px;min-width:0}
.tag-code{font-family:var(--ocp-mono);font-size:11px;letter-spacing:.1em;color:var(--ocp-text-faint);text-transform:uppercase}
.tag h3{margin-top:9px;font-size:19px;line-height:1.3}
.tag p{margin-top:8px;font-size:15.5px;color:var(--ocp-text-muted);line-height:1.55}

/* ---- feature rows ---- */
.row{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:56px;align-items:center;padding:62px 0}
.row + .row{border-top:var(--ocp-border-hairline)}
.row.flip .row-media{order:-1}
.row-txt{min-width:0}
.row-txt h3{font-size:clamp(23px,2.4vw,30px);line-height:1.18}
.row-txt p{margin-top:14px;font-size:16.5px;color:var(--ocp-text-muted);max-width:52ch}
.row-list{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.row-list li{display:flex;gap:10px;font-size:15.5px;line-height:1.5;min-width:0}
.row-list svg{flex:none;margin-top:6px;color:var(--ocp-green)}
.row-media{min-width:0}
.row-cap{margin-top:11px;font-size:12.5px;color:var(--ocp-text-faint)}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:40px;border-top:2px solid var(--ocp-navy)}
.steps li{padding:20px 20px 24px 0;border-right:var(--ocp-border-hairline);min-width:0}
.steps li:last-child{border-right:0}
.steps li + li{padding-left:20px}
.steps .lbl{color:var(--ocp-green-2)}
.steps b{display:block;margin-top:9px;font-size:17px;font-weight:800;line-height:1.3}
.steps p{margin-top:7px;font-size:14.5px;color:var(--ocp-text-muted);line-height:1.5}

/* ---- more-features inline list ---- */
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:36px;background:var(--ocp-hairline);border:var(--ocp-border-hairline);border-radius:var(--ocp-r-card);overflow:hidden}
.more div{background:#fff;padding:17px 19px;min-width:0}
.more b{display:block;font-size:15.5px;font-weight:700}
.more span{display:block;margin-top:4px;font-size:13.5px;color:var(--ocp-text-muted);line-height:1.45}

/* ---- terms / pricing ---- */
.deal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start}
.deal-big{font-family:var(--ocp-mono);font-size:clamp(56px,9vw,104px);font-weight:600;line-height:.94;letter-spacing:-.03em;color:var(--ocp-navy)}
.deal-big sup{font-size:.42em;font-weight:600;vertical-align:super;margin-left:2px}
.deal-list{margin-top:6px;display:flex;flex-direction:column}
.deal-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:15px 0;border-bottom:var(--ocp-border-hairline);font-size:16px}
.deal-list li:first-child{border-top:var(--ocp-border-hairline)}
.deal-list b{font-family:var(--ocp-mono);font-weight:600;white-space:nowrap;color:var(--ocp-navy)}

/* ---- table ---- */
.tbl-wrap{margin-top:28px;overflow-x:auto;border:var(--ocp-border-hairline);border-radius:var(--ocp-r-card);background:#fff}
table.tbl{width:100%;min-width:620px;border-collapse:collapse;font-size:15.5px}
table.tbl th,table.tbl td{padding:14px 18px;text-align:left;border-bottom:var(--ocp-border-hairline)}
table.tbl th{font-family:var(--ocp-mono);font-size:11px;letter-spacing:var(--ocp-ls-label);text-transform:uppercase;color:var(--ocp-text-label);background:var(--ocp-bg-soft);font-weight:600}
table.tbl td.num{font-family:var(--ocp-mono);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr.total td{font-weight:800;background:var(--ocp-green-tint);color:var(--ocp-green-deep)}
.disclaim{margin-top:12px;font-size:13px;color:var(--ocp-text-faint);max-width:70ch}

/* ---- dark band ---- */
.band{background:var(--ocp-navy);color:#fff}
.band h2{color:#fff}
.band .sect-lead{color:var(--ocp-on-navy-body)}
.band .lbl{color:var(--ocp-on-navy-kicker)}

/* ---- system diagram ---- */
.diag{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.diag-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.diag-h{font-family:var(--ocp-mono);font-size:11px;letter-spacing:var(--ocp-ls-label);text-transform:uppercase;color:#7FD69A;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.22)}
.diag-n{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--ocp-r-chip);padding:12px 14px;font-size:14.5px;line-height:1.4;min-width:0}
.diag-n b{display:block;font-weight:700;font-size:15px}
.diag-n span{display:block;margin-top:3px;font-size:13px;color:var(--ocp-on-navy-kicker);line-height:1.4}

/* ---- tabs (two panels) ---- */
.tabs{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.tab{min-height:44px;padding:0 18px;border-radius:var(--ocp-r-pill);border:1px solid rgba(255,255,255,.26);background:transparent;color:#fff;font-family:var(--ocp-font);font-size:14.5px;font-weight:700;cursor:pointer;transition:background .16s var(--ocp-ease),border-color .16s var(--ocp-ease)}
.tab[aria-selected="true"]{background:#fff;color:var(--ocp-navy);border-color:#fff}
.tabpanel[hidden]{display:none}
.tabpanel{margin-top:24px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:42px;align-items:start}
.tabpanel ul{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.tabpanel li{display:flex;gap:10px;font-size:15.5px;line-height:1.5;color:var(--ocp-on-navy-soft);min-width:0}
.tabpanel li svg{flex:none;margin-top:6px;color:#7FD69A}
.tabpanel h3{font-size:22px;color:#fff}

.tabs.light .tab{border-color:var(--ocp-hairline);color:var(--ocp-ink)}
.tabs.light .tab[aria-selected="true"]{background:var(--ocp-navy);color:#fff;border-color:var(--ocp-navy)}
.tabpanel.light li{color:var(--ocp-text-muted)}
.tabpanel.light li svg{color:var(--ocp-green)}
.tabpanel.light h3{color:var(--ocp-ink)}
.tabpanel.light p{color:var(--ocp-text-muted);margin-top:10px;font-size:16px}

/* ---- fit / not-fit ---- */
.fit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin-top:34px}
.fit-col{border:var(--ocp-border-hairline);border-radius:var(--ocp-r-card);padding:24px 24px 26px;background:#fff;min-width:0}
.fit-col h3{font-size:17px}
.fit-col ul{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.fit-col li{display:flex;gap:11px;font-size:15.5px;line-height:1.5;color:var(--ocp-text-muted);min-width:0}
.fit-col li svg{flex:none;margin-top:5px}
.fit-yes li svg{color:var(--ocp-green)}
.fit-no li svg{color:var(--ocp-danger)}

/* ---- form ---- */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label{font-size:13.5px;font-weight:700;color:var(--ocp-text-muted)}
.fld input,.fld select,.fld textarea{min-height:48px;padding:12px 14px;border:var(--ocp-border-hairline);border-radius:var(--ocp-r-btn);background:#fff;font-family:var(--ocp-font);font-size:16px;color:var(--ocp-ink);width:100%}
.fld textarea{min-height:96px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ocp-green);box-shadow:0 0 0 3px var(--ocp-green-tint)}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ocp-text-muted);cursor:pointer;padding:4px 0}
.chk input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--ocp-green)}
.frm-note{grid-column:1/-1;font-size:13px;color:var(--ocp-text-faint)}
.ok{grid-column:1/-1;display:none;align-items:center;gap:10px;padding:14px 16px;background:var(--ocp-green-tint);border:1px solid var(--ocp-green-tint-border);border-radius:var(--ocp-r-btn);color:var(--ocp-green-deep);font-weight:700;font-size:15px}
.ok.on{display:flex}
.err{grid-column:1/-1;display:none;align-items:center;gap:10px;padding:14px 16px;background:#FDECEC;border:1px solid #F3C4C4;border-radius:var(--ocp-r-btn);color:#8E1B1B;font-weight:700;font-size:15px}
.err.on{display:flex}
/* honeypot: off-screen, never focusable, invisible to sighted users */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---- faq ---- */
.faq{margin-top:32px;max-width:82ch}
.faq details{border-bottom:var(--ocp-border-hairline)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 0;font-size:17.5px;font-weight:700;cursor:pointer;list-style:none;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--ocp-text-label);border-bottom:2px solid var(--ocp-text-label);transform:rotate(45deg) translateY(-3px);transition:transform .18s var(--ocp-ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{padding:0 0 20px;font-size:16px;color:var(--ocp-text-muted);max-width:70ch}

/* ---- footer ---- */
.ft{background:#0E1B33;color:var(--ocp-on-navy-body);padding:52px 0 34px;font-size:14.5px}
.ft-in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px}
.ft h4{font-size:13px;color:#fff;letter-spacing:var(--ocp-ls-label);text-transform:uppercase;font-family:var(--ocp-mono);font-weight:600}
.ft ul{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.ft a{color:var(--ocp-on-navy-body)}
.ft a:hover{color:#fff}
.ft-bot{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:var(--ocp-on-navy-kicker)}

/* ---- cross-link ---- */
.cross{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;padding:28px 30px;border:var(--ocp-border-hairline);border-radius:var(--ocp-r-panel);background:#fff}
.cross b{display:block;font-size:19px;font-weight:800}
.cross p{margin-top:6px;font-size:15px;color:var(--ocp-text-muted);max-width:56ch}

@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-bottom:64px}
  .hero{padding-top:56px}
  .row,.deal,.form-grid,.tabpanel{grid-template-columns:1fr;gap:34px}
  .row.flip .row-media{order:0}
  .row{padding:46px 0}
  .diag{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .hd-nav{display:none}
  .hd-burger{display:flex}
  .hd-in{gap:14px}
  .hd-nav.open{display:flex;position:absolute;left:0;right:0;top:66px;flex-direction:column;gap:0;background:#fff;border-bottom:var(--ocp-border-hairline);box-shadow:var(--ocp-shadow-panel);padding:8px 22px 18px}
  .hd-nav.open a{padding:13px 0;min-height:44px;display:flex;align-items:center;border-bottom:var(--ocp-border-hairline)}
}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .steps li{padding-left:0}
  .steps li:nth-child(2n){border-right:0;padding-left:20px}
  .steps li:nth-child(n+3){border-top:var(--ocp-border-hairline)}
  .more{grid-template-columns:1fr 1fr}
  .fit{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .sect{padding:58px 0}
  .wrap{padding:0 18px}
  .terms{grid-template-columns:1fr 1fr}
  .frm{grid-template-columns:1fr}
  .more,.steps{grid-template-columns:1fr}
  .steps li{border-right:0;padding-left:0!important;border-top:var(--ocp-border-hairline)}
  .steps li:first-child{border-top:0}
  .diag{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .laptop-base{width:106%;transform:translateX(-2.9%)}
  .cross{padding:22px}
}
@media (max-width:600px){
  /* Кнопка действия в шапке не помещается рядом с логотипом, языком и бургером:
     на 375px строка вырастала до 492px и страница ехала вбок. Тот же призыв стоит
     первым экраном ниже, поэтому здесь он не рендерится, а не ужимается. */
  .hd-right > .btn{display:none}
  /* Тап-таргеты ≥44px: ссылки подвала и кнопка повтора были 19 и 38px. */
  .ft ul a{min-height:44px;display:flex;align-items:center}
  .replay{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .pulse{display:none}
  html{scroll-behavior:auto}
  .shot-fade{opacity:1;transform:none}
  .shot-fade.pre{opacity:1;transform:none}
  .rv,.rv.on{opacity:1;transform:none}
  .laptop-scr::after{display:none}
}

/* ---- two commercial models (on navy band) ---- */
.sch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:38px}
.sch-c{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--ocp-r-card);padding:24px 24px 26px;min-width:0}
.sch-c .tag-code{color:#7FD69A}
.sch-c h3{margin-top:9px;font-size:20px;color:#fff;line-height:1.25}
.sch-c p{margin-top:10px;font-size:15.5px;line-height:1.58;color:var(--ocp-on-navy-kicker)}
.sch-n{margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.16);font-family:var(--ocp-mono);font-size:12.5px;letter-spacing:.02em;color:#7FD69A}
@media (max-width:880px){.sch{grid-template-columns:1fr;gap:14px}}

/* ---- hub: own database out to every channel, everything back into one queue ---- */
.stage{position:relative;margin-top:22px}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.wire{fill:none;stroke:rgba(127,214,154,.26);stroke-width:1.5}
.pulse{fill:none;stroke:#7FD69A;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:var(--seg,22) 9999;stroke-dashoffset:var(--seg,22);opacity:0}
.playing .pulse{animation:flowPulse var(--dur,480ms) cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
@keyframes flowPulse{0%{stroke-dashoffset:var(--seg,22);opacity:0}12%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:var(--neg,-400);opacity:0}}
.stage-h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px}
.stage-h .lbl{color:#7FD69A}
.replay{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border:1px solid rgba(255,255,255,.26);border-radius:999px;background:transparent;cursor:pointer;font-family:var(--ocp-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;transition:border-color .16s var(--ocp-ease),background .16s var(--ocp-ease)}
.replay:hover{border-color:#7FD69A;background:rgba(127,214,154,.12);color:#7FD69A}
.flow{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;align-items:stretch}
.fnode{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--ocp-r-card);padding:20px 20px 22px;min-width:0;display:flex;flex-direction:column}
.fnode-mid{background:rgba(127,214,154,.09);border-color:rgba(127,214,154,.32)}
.playing [data-node="ai"],.playing [data-node="ch"]{animation:nodeLit 760ms cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
@keyframes nodeLit{0%{box-shadow:0 0 0 0 rgba(127,214,154,0)}34%{box-shadow:0 0 0 3px rgba(127,214,154,.34)}100%{box-shadow:0 0 0 0 rgba(127,214,154,0)}}
.playing .fraw{animation:rawHand 900ms cubic-bezier(.16,1,.3,1) 420ms both}
@keyframes rawHand{0%{opacity:1}45%{opacity:.42}100%{opacity:1}}
.playing .fclean{animation:cleanIn 620ms cubic-bezier(.16,1,.3,1) 560ms both}
@keyframes cleanIn{0%{transform:scale(.99);border-color:rgba(127,214,154,.32)}40%{transform:scale(1.012);border-color:#7FD69A}100%{transform:scale(1);border-color:rgba(127,214,154,.32)}}
.playing .fout li{animation:rowLit 660ms cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
@keyframes rowLit{0%,100%{color:var(--ocp-on-navy-soft);background:#16294D}38%{color:#fff;background:#1B3157}}
.playing .fout li .fdot{animation:dotPop 660ms cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
@keyframes dotPop{0%,100%{transform:scale(1);box-shadow:0 0 0 3px rgba(127,214,154,.16)}40%{transform:scale(1.45);box-shadow:0 0 0 7px rgba(127,214,154,.3)}}
.playing [data-sink] .fpill{animation:nodeLit 760ms cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
.fnode-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fnode h3{margin-top:9px;font-size:17.5px;line-height:1.3;color:#fff}
.fpill{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#7FD69A;background:rgba(127,214,154,.14);border:1px solid rgba(127,214,154,.3);border-radius:999px;padding:4px 8px;white-space:nowrap;flex:none}
.frec,.fout{margin-top:15px;display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:10px;overflow:hidden}
.frec li,.fout li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 11px;background:#16294D;font-size:13.5px;color:var(--ocp-on-navy-soft);min-width:0}
.ftxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fdim{font-size:12px;color:var(--ocp-on-navy-kicker);white-space:nowrap}
.fdot{width:8px;height:8px;border-radius:50%;background:#7FD69A;flex:none;box-shadow:0 0 0 3px rgba(127,214,154,.16)}
.fmorph{margin-top:15px}
.fraw{font-size:12.5px;color:var(--ocp-on-navy-kicker);background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.28);border-radius:8px;padding:9px 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fdown{position:relative;width:2px;height:18px;margin:7px auto;background:rgba(127,214,154,.6)}
.fdown::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);border-top:6px solid #7FD69A;border-left:4px solid transparent;border-right:4px solid transparent}
.fclean{background:rgba(127,214,154,.12);border:1px solid rgba(127,214,154,.32);border-radius:8px;padding:10px 11px}
.fclean b{display:block;font-size:14px;line-height:1.35;color:#fff}
.fclean span{display:block;margin-top:4px;font-size:11.5px;color:#7FD69A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsteps{margin-top:15px;display:flex;flex-direction:column;gap:8px}
.fsteps li{display:flex;gap:9px;font-size:13.5px;line-height:1.4;color:var(--ocp-on-navy-soft);min-width:0}
.fsteps li::before{content:"✓";flex:none;color:#7FD69A;font-size:12px;line-height:1.5}
.fmeta{margin-top:auto;padding-top:15px;font-size:11.5px;line-height:1.5;color:#7FD69A}
@media (max-width:1000px){.flow{grid-template-columns:1fr;gap:40px}.inbox{margin-top:40px}}
.chan{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chan li{font-family:var(--ocp-mono);font-size:12px;line-height:1;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:var(--ocp-r-chip);padding:8px 10px}
.chan .chan-more{color:#7FD69A;border-color:rgba(127,214,154,.4);background:rgba(127,214,154,.12)}
.inbox{position:relative;z-index:2;margin-top:38px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--ocp-r-card);padding:22px 24px 14px}
.inbox-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.inbox-h h3{margin-top:8px;font-size:19px;line-height:1.3;color:#fff}
.inbox-n{font-family:var(--ocp-mono);font-size:12px;color:#7FD69A;white-space:nowrap}
.inbox-l{margin-top:16px;display:flex;flex-direction:column}
.inbox-l li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid rgba(255,255,255,.14);font-size:15px;color:var(--ocp-on-navy-soft);min-width:0}
.badge{font-family:var(--ocp-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7FD69A;background:rgba(127,214,154,.12);border:1px solid rgba(127,214,154,.34);border-radius:999px;padding:5px 9px;white-space:nowrap}
.inbox-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-m{font-family:var(--ocp-mono);font-size:12px;color:var(--ocp-on-navy-kicker);white-space:nowrap}
@media (max-width:620px){.inbox-l li{grid-template-columns:auto minmax(0,1fr)}.inbox-m{display:none}}

/* ---- marketplace wordmarks (brand colour, lightened for navy; never the official logo) ---- */
.mp{display:inline-flex!important;align-items:center;flex:none;font-weight:800;font-size:13px;line-height:1;letter-spacing:-.02em;text-transform:lowercase;padding:7px 11px;border:1px solid;border-radius:999px;white-space:nowrap}
.mp-allegro{color:#FF8A45;background:rgba(255,90,0,.16);border-color:rgba(255,138,69,.45)}
.mp-ebay{color:#6FB0FF;background:rgba(0,100,210,.22);border-color:rgba(111,176,255,.45)}
.mp-rrr{color:#FF8A8A;background:rgba(214,36,42,.18);border-color:rgba(255,138,138,.42)}
.mp-ocp{color:#7FD69A;background:rgba(127,214,154,.14);border-color:rgba(127,214,154,.4)}
.mp i{display:inline-block;width:11px;height:11px;margin-right:7px;flex:none;border-radius:3px;font-style:normal;vertical-align:-1px}
.mp-allegro i{background:#FF8A45}
.mp-ebay i{background:#6FB0FF}
.mp-rrr i{background:#FF8A8A}
.mp-ocp i{background:#7FD69A}
/* the franchise chain lights one column at a time */
.playing .diag-col{animation:colLit 700ms cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
@keyframes colLit{0%,100%{opacity:.92}36%{opacity:1}}
.playing .diag-col .diag-h{animation:headLit 700ms cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
@keyframes headLit{0%,100%{color:#7FD69A;border-color:rgba(255,255,255,.22)}36%{color:#fff;border-color:#7FD69A}}
.playing .diag-col .diag-n{animation:nodeLit 700ms cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
.merge{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.merge-a{font-family:var(--ocp-mono);font-size:14px;color:#7FD69A;padding:0 2px}