/* Shared stylesheet for the public marketing pages (home, about, contact,
   partners) — merged from the trustabike-site / about / contact / partners
   prototype pages so they share one set of tokens and components instead of
   four copies of the same CSS. The inspector/admin/certificate tool pages
   keep using static/style.css, which is intentionally a separate, simpler
   system for those internal workflows. */

:root{
  --ink:#12203A;
  --ink-70: rgba(18,32,58,.7);
  --ink-45: rgba(18,32,58,.45);
  --green:#4F9D3D;
  --green-dark:#3C7A2F;
  --amber:#C98A2C;
  --red:#B5382C;
  --paper:#F7F4EC;
  --paper-raised:#FFFFFF;
  --line: #DCD5C4;
  --line-strong:#C7BFA9;
  --radius: 14px;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.marketing{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
.marketing img, .marketing svg{display:block;max-width:100%;}
.marketing a{color:inherit;}
.marketing .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){ .marketing .wrap{padding:0 20px;} }
.marketing ::selection{ background: var(--green); color:#fff; }
.marketing :focus-visible{ outline:2.5px solid var(--green); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .marketing *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Header ---------- */
.marketing header{ position:sticky; top:0; z-index:50; background:rgba(247,244,236,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.marketing .nav{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px; }
.marketing .logo{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-0.01em; display:flex; align-items:center; gap:2px; text-decoration:none; flex-shrink:0; }
.marketing .logo .b{ color:var(--green); }
.marketing .navlinks{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; font-size:14.5px; font-weight:500; }
.marketing .navlinks a{ text-decoration:none; color:var(--ink-70); transition:color .15s; }
.marketing .navlinks a:hover{ color:var(--ink); }
.marketing .navlinks a.current{ color:var(--ink); }
.marketing .nav-cta{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.marketing .nav-staff{ font-family:var(--mono); font-size:12px; color:var(--ink-45); text-decoration:none; white-space:nowrap; }
.marketing .nav-staff:hover{ color:var(--ink-70); }
@media (max-width:900px){ .marketing .navlinks{display:none;} }

.marketing .btn{ font-family:var(--body); font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:999px; text-decoration:none; display:inline-block; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s, border-color .15s; }
.marketing .btn:hover{ transform:translateY(-1px); }
.marketing .btn-primary{ background:var(--ink); color:#fff; }
.marketing .btn-primary:hover{ background:#0B1526; }
.marketing .btn-ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.marketing .btn-ghost:hover{ border-color:var(--ink); }
.marketing .btn-lg{ padding:14px 26px; font-size:15.5px; }
.marketing .btn:disabled{ opacity:.6; cursor:default; transform:none; }

/* ---------- Hero ---------- */
.marketing .hero{ padding:76px 0 60px; }
.marketing .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media (max-width:960px){ .marketing .hero-grid{ grid-template-columns:1fr; } }
.marketing .eyebrow{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--green-dark); display:flex; align-items:center; gap:9px; margin-bottom:20px; font-weight:500; }
.marketing .eyebrow::before{ content:""; width:7px;height:7px;border-radius:50%; background:var(--green); display:inline-block; }
.marketing h1{ font-family:var(--display); font-weight:600; letter-spacing:-0.02em; font-size:clamp(34px, 4.4vw, 54px); line-height:1.04; margin:0 0 22px; }
.marketing h1.page-h1{ font-size:clamp(32px, 4.2vw, 48px); line-height:1.06; max-width:14ch; }
.marketing h1 em{ font-style:normal; color:var(--green-dark); background: linear-gradient(180deg, transparent 62%, rgba(79,157,61,.22) 62%); }
.marketing .hero p.lead, .marketing .page-hero p.lead{ font-size:18px; color:var(--ink-70); max-width:560px; margin:0 0 32px; }
.marketing .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.marketing .hero-lookup-form{ display:inline-flex; }
.marketing .hero-lookup-input{ font-family:var(--body); font-weight:600; font-size:15.5px; padding:14px 26px; border-radius:999px; border:1.5px solid var(--line-strong); background:transparent; color:var(--ink); outline:none; transition:border-color .15s; width:240px; max-width:100%; }
.marketing .hero-lookup-input::placeholder{ color:var(--ink-45); font-weight:500; }
.marketing .hero-lookup-input:focus{ border-color:var(--ink); }
.marketing .cert-lookup{ display:flex; align-items:center; background:var(--paper-raised); border:1.5px solid var(--line-strong); border-radius:999px; padding:5px 5px 5px 22px; gap:10px; width:100%; max-width:460px; }
.marketing .cert-lookup input{ flex:1; border:none; outline:none; background:transparent; font-family:var(--body); font-size:14.5px; color:var(--ink); padding:9px 0; min-width:0; }
.marketing .cert-lookup input::placeholder{ color:var(--ink-45); }
.marketing .cert-lookup:focus-within{ border-color:var(--green); }
.marketing .cert-lookup .btn{ flex-shrink:0; }

.marketing .trustbar{ display:flex; gap:34px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line); }
.marketing .trustbar div{ font-family:var(--mono); }
.marketing .trustbar b{ display:block; font-size:20px; color:var(--ink); font-weight:500; }
.marketing .trustbar span{ font-size:12px; color:var(--ink-45); text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Certificate mockup ---------- */
.marketing .cert-stage{ position:relative; display:flex; justify-content:center; }
.marketing .cert-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; width:100%; max-width:400px; padding:26px 26px 22px; box-shadow: 0 30px 60px -20px rgba(18,32,58,.22), 0 2px 6px rgba(18,32,58,.06); transform:rotate(2.2deg); position:relative; }
.marketing .cert-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.marketing .cert-brand{ font-family:var(--display); font-weight:700; font-size:15px; }
.marketing .cert-brand .b{ color:var(--green); }
.marketing .cert-id{ font-family:var(--mono); font-size:10.5px; color:var(--ink-45); text-align:right; line-height:1.5; }
.marketing .cert-photo{ height:160px; border-radius:10px; margin-bottom:16px; background: linear-gradient(160deg, rgba(18,32,58,.08), rgba(18,32,58,0) 55%), repeating-linear-gradient(115deg, #E7E1D2 0 2px, #EFEADD 2px 34px); position:relative; overflow:hidden; }
.marketing .cert-photo svg{ position:absolute; inset:0; margin:auto; width:78%; height:78%; }
.marketing .cert-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.marketing .cert-row:last-of-type{ border-bottom:none; }
.marketing .cert-row .label{ color:var(--ink-45); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.marketing .cert-row .val{ font-weight:600; }
.marketing .pill{ font-family:var(--mono); font-size:11px; font-weight:500; padding:3px 9px; border-radius:999px; }
.marketing .pill-good{ background:rgba(79,157,61,.14); color:var(--green-dark); }
.marketing .pill-sample{ background:rgba(18,32,58,.07); color:var(--ink-45); }
.marketing .pill-bad{ background:rgba(181,56,44,.12); color:var(--red); }
.marketing .pill-amber{ background:rgba(201,138,44,.14); color:var(--amber); }
.marketing .pill-neutral{ background:rgba(18,32,58,.07); color:var(--ink-70); }
.marketing .seal{ position:absolute; right:-18px; bottom:-22px; width:104px; height:104px; filter: drop-shadow(0 10px 16px rgba(18,32,58,.18)); animation: ta-stamp 900ms cubic-bezier(.2,1.6,.4,1) 400ms both; }
@keyframes ta-stamp{ 0%{ transform:scale(1.9) rotate(-18deg); opacity:0; } 60%{ opacity:1; } 100%{ transform:scale(1) rotate(-9deg); opacity:1; } }
.marketing .float-chip{ position:absolute; background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:10px 14px; box-shadow:0 14px 30px -10px rgba(18,32,58,.2); font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px; }
.marketing .float-chip.c1{ top:-22px; left:-26px; transform:rotate(-4deg); }
.marketing .float-chip.c2{ bottom:38px; left:-40px; transform:rotate(3deg); font-family:var(--mono); font-weight:500; font-size:11.5px; }
@media (max-width:960px){ .marketing .float-chip{ display:none; } .marketing .cert-card{transform:none;} }
@media (max-width:500px){ .marketing .cert-card{ max-width:340px; padding:20px; } }

/* ---------- Sections shared ---------- */
.marketing section{ padding:88px 0; }
.marketing section.page-hero{ padding:64px 0 20px; }
.marketing section.tight{ padding:24px 0 80px; }
.marketing .section-head{ max-width:620px; margin-bottom:52px; }
.marketing .kicker{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--green-dark); margin-bottom:12px; font-weight:500; }
.marketing h2{ font-family:var(--display); font-weight:600; letter-spacing:-0.015em; font-size:clamp(26px,3vw,36px); margin:0 0 14px; }
.marketing .section-head p{ color:var(--ink-70); font-size:16px; margin:0; }
.marketing .section-head .note{ color:var(--ink-45); font-size:13.5px; margin-top:10px; }
.marketing .section-head .note a{ color:var(--green-dark); font-weight:600; text-decoration:none; }
.marketing .section-head .note a:hover{ text-decoration:underline; }

.marketing .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.marketing .reveal.in{ opacity:1; transform:none; }

/* ---------- How it works / steps ---------- */
.marketing .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:820px){ .marketing .steps{ grid-template-columns:1fr; } }
.marketing .step{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; }
.marketing .step-icon{ width:44px; height:44px; margin-bottom:22px; }
.marketing .step h3{ font-family:var(--display); font-size:18px; font-weight:600; margin:0 0 10px; }
.marketing .step p{ color:var(--ink-70); font-size:14.5px; margin:0; }
.marketing .step-tag{ font-family:var(--mono); font-size:11px; color:var(--ink-45); text-transform:uppercase; letter-spacing:.05em; margin-top:16px; display:block; }

/* ---------- Dark strip (grading / why-join) ---------- */
.marketing .darkstrip{ background:var(--ink); color:#fff; border-radius:20px; padding:44px 40px; }
.marketing .darkstrip-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.marketing .darkstrip-top.single{ max-width:520px; }
.marketing .darkstrip-top h2{ color:#fff; margin:0; }
.marketing .darkstrip-top p{ color:rgba(255,255,255,.6); max-width:440px; font-size:14.5px; margin:8px 0 0; }
.marketing .grade-scale{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.marketing .grade-scale.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .marketing .grade-scale{ grid-template-columns:repeat(2,1fr); } .marketing .grade-scale.cols-3{ grid-template-columns:1fr; } }
.marketing .grade-item{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:18px; }
.marketing .grade-letter{ font-family:var(--display); font-size:26px; font-weight:700; margin-bottom:8px; }
.marketing .grade-item h4{ font-family:var(--display); font-size:16px; font-weight:600; margin:0 0 8px; color:#B7DC6D; }
.marketing .grade-item p{ font-size:13px; color:rgba(255,255,255,.62); margin:0; line-height:1.5; }
.marketing .g-a .grade-letter{ color:#7FCB6A; }
.marketing .g-b .grade-letter{ color:#B7DC6D; }
.marketing .g-c .grade-letter{ color:#E8B85B; }
.marketing .g-d .grade-letter{ color:#E17B6C; }

/* ---------- Bike / certificate card grid ---------- */
.marketing .bikes{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:900px){ .marketing .bikes{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .marketing .bikes{ grid-template-columns:1fr; } }
.marketing .bike-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.marketing .bike-card.is-sample{ border-style:dashed; }
.marketing .bike-thumb{ height:170px; position:relative; background: repeating-linear-gradient(115deg, #ECE6D7 0 2px, #F2EDE0 2px 30px); }
.marketing .bike-thumb svg{ position:absolute; inset:0; margin:auto; width:64%; height:64%; }
.marketing .bike-thumb-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.marketing .bike-badge{ position:absolute; top:12px; left:12px; background:var(--ink); color:#fff; font-family:var(--mono); font-size:11px; font-weight:500; padding:4px 10px; border-radius:999px; display:flex; align-items:center; gap:6px; }
.marketing .bike-badge::before{ content:""; width:6px;height:6px;border-radius:50%; background:var(--green); }
.marketing .bike-badge.sample{ background:rgba(18,32,58,.55); }
.marketing .bike-badge.sample::before{ background:#E8B85B; }
.marketing .bike-body{ padding:18px 18px 20px; }
.marketing .bike-body h4{ margin:0 0 4px; font-family:var(--display); font-size:16.5px; font-weight:600; }
.marketing .bike-meta{ font-size:13px; color:var(--ink-45); margin-bottom:14px; }
.marketing .bike-specs{ margin:0 0 12px; }
.marketing .bike-spec-row{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:12.5px; }
.marketing .bike-spec-row:last-child{ border-bottom:none; }
.marketing .bike-spec-row .k{ color:var(--ink-45); font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; flex-shrink:0; }
.marketing .bike-spec-row .v{ font-weight:600; text-align:right; }
.marketing .bike-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.marketing .bike-price{ font-weight:700; font-size:16px; }
.marketing .bike-link{ font-size:13px; font-weight:600; color:var(--green-dark); text-decoration:none; }
.marketing .bike-link:hover{ text-decoration:underline; }
.marketing .bike-tag-sample{ font-family:var(--mono); font-size:11px; color:var(--ink-45); }
.marketing .bikes-foot{ text-align:center; margin-top:38px; }

/* ---------- Shop / network CTA list ---------- */
.marketing .cta-points{ list-style:none; margin:22px 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; max-width:520px; }
.marketing .cta-points li{ font-size:14px; display:flex; gap:10px; align-items:flex-start; }
.marketing .cta-points svg{ flex:none; margin-top:2px; }

/* ---------- Partner type cards (partners page) ---------- */
.marketing .partner-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .marketing .partner-grid{ grid-template-columns:1fr; } }
.marketing .partner-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:20px; padding:30px 26px 28px; display:flex; flex-direction:column; }
.marketing .partner-card.hi{ border-color:var(--green); box-shadow:0 20px 40px -24px rgba(79,157,61,.35); }
.marketing .partner-card .kicker{ margin-bottom:8px; }
.marketing .partner-card h3{ font-family:var(--display); font-size:22px; font-weight:600; margin:0 0 10px; }
.marketing .partner-card > p.desc{ color:var(--ink-70); font-size:14.5px; margin:0 0 20px; }
.marketing .partner-facts{ margin-top:auto; display:flex; flex-direction:column; gap:0; }
.marketing .partner-facts .row{ padding:12px 0; border-bottom:1px dashed var(--line); }
.marketing .partner-facts .row:last-child{ border-bottom:none; padding-bottom:0; }
.marketing .partner-facts .label{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-45); margin-bottom:5px; }
.marketing .partner-facts .val{ font-size:14px; font-weight:500; }
.marketing .partner-facts .val.money{ color:var(--green-dark); font-weight:700; font-family:var(--display); font-size:17px; }

/* ---------- About: story + values ---------- */
.marketing .story{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:860px){ .marketing .story{ grid-template-columns:1fr; } }
.marketing .story p{ color:var(--ink-70); font-size:15.5px; margin:0 0 16px; }
.marketing .story-figure{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
.marketing .story-figure .stat{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px dashed var(--line); font-family:var(--mono); }
.marketing .story-figure .stat:last-child{ border-bottom:none; }
.marketing .story-figure .stat b{ font-family:var(--display); font-size:20px; color:var(--ink); font-weight:600; }
.marketing .story-figure .stat span{ font-size:12px; color:var(--ink-45); text-transform:uppercase; letter-spacing:.04em; }
.marketing .values{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:820px){ .marketing .values{ grid-template-columns:1fr; } }
.marketing .value-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.marketing .value-card svg{ width:32px; height:32px; margin-bottom:18px; }
.marketing .value-card h3{ font-family:var(--display); font-size:17px; font-weight:600; margin:0 0 8px; }
.marketing .value-card p{ color:var(--ink-70); font-size:13.5px; margin:0; }
.marketing .cta-band{ background:var(--ink); color:#fff; border-radius:20px; padding:44px 40px; text-align:center; }
.marketing .cta-band .kicker{ color:#B7DC6D; justify-content:center; }
.marketing .cta-band h2{ color:#fff; }
.marketing .cta-band p{ color:rgba(255,255,255,.65); max-width:480px; margin:0 auto 26px; }
.marketing .cta-band .actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Contact page ---------- */
.marketing .contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start; }
@media (max-width:900px){ .marketing .contact-grid{ grid-template-columns:1fr; } }
.marketing .contact-cards{ display:flex; flex-direction:column; gap:16px; }
.marketing .contact-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; }
.marketing .contact-card .label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-45); margin-bottom:8px; }
.marketing .contact-card .value{ font-family:var(--display); font-size:17px; font-weight:600; }
.marketing .contact-card .sub{ font-size:13px; color:var(--ink-70); margin-top:6px; }
.marketing .contact-card a.value{ text-decoration:none; }
.marketing .contact-card a.value:hover{ color:var(--green-dark); }
.marketing .routing-note{ background:var(--paper-raised); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:20px 22px; font-size:13.5px; color:var(--ink-70); }
.marketing .routing-note a{ color:var(--green-dark); font-weight:600; text-decoration:none; }
.marketing .routing-note a:hover{ text-decoration:underline; }
.marketing .routing-note ul{ margin:10px 0 0; padding-left:18px; }
.marketing .routing-note li{ margin-bottom:6px; }

/* ---------- Forms (get certified / contact / partner apply) ---------- */
.marketing .form-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:36px; max-width:680px; }
@media (max-width:600px){ .marketing .form-card{ padding:22px; } }
.marketing .form-card.on-paper{ background:var(--paper); }
.marketing .field{ margin-bottom:22px; }
.marketing .field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; }
.marketing .field .hint{ font-weight:400; color:var(--ink-45); font-size:12.5px; }
.marketing .field input, .marketing .field select, .marketing .field textarea{ width:100%; font-family:var(--body); font-size:14.5px; padding:12px 14px; border:1.5px solid var(--line-strong); border-radius:10px; background:var(--paper); color:var(--ink); }
.marketing .form-card.on-paper .field input, .marketing .form-card.on-paper .field select, .marketing .form-card.on-paper .field textarea{ background:var(--paper-raised); }
.marketing .field input:focus, .marketing .field select:focus, .marketing .field textarea:focus{ outline:2.5px solid var(--green); outline-offset:1px; border-color:transparent; }
.marketing .field textarea{ resize:vertical; min-height:110px; }
.marketing .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:520px){ .marketing .row-2{ grid-template-columns:1fr; } }
.marketing .type-pick{ display:flex; gap:10px; flex-wrap:wrap; }
.marketing .type-pick input{ position:absolute; opacity:0; pointer-events:none; }
.marketing .type-pick label{ display:inline-block; border:1.5px solid var(--line-strong); border-radius:999px; padding:10px 18px; cursor:pointer; font-weight:600; font-size:13.5px; background:var(--paper-raised); transition:border-color .15s, background .15s, color .15s; }
.marketing .type-pick input:checked + label{ border-color:var(--green); background:rgba(79,157,61,.12); color:var(--green-dark); }
.marketing .submit-row{ display:flex; align-items:center; gap:16px; margin-top:8px; flex-wrap:wrap; }
.marketing .form-status{ font-size:13.5px; color:var(--ink-45); }
.marketing .form-status.err{ color:var(--red); }
.marketing .field-errors{ color:var(--red); font-size:12.5px; margin-top:6px; }
.marketing .applycta{ background:var(--paper-raised); border:1px solid var(--line); border-radius:22px; padding:56px; display:grid; grid-template-columns:1fr; gap:12px; }
@media (max-width:820px){ .marketing .applycta{ padding:36px 24px; } }
.marketing .applycta p{ color:var(--ink-70); font-size:15.5px; max-width:520px; }

.marketing .confirm-banner{ display:flex; align-items:center; gap:18px; background:rgba(79,157,61,.1); border:1px solid rgba(79,157,61,.3); border-radius:var(--radius); padding:20px 24px; margin-bottom:28px; }
.marketing .confirm-banner .seal-mini{ width:48px; height:48px; flex-shrink:0; }
.marketing .confirm-banner h3{ font-family:var(--display); font-size:17px; font-weight:600; margin:0 0 4px; }
.marketing .confirm-banner p{ color:var(--ink-70); font-size:13.5px; margin:0; }

/* ---------- Footer ---------- */
.marketing footer{ border-top:1px solid var(--line); padding:52px 0 34px; }
.marketing .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
@media (max-width:760px){ .marketing .foot-grid{ grid-template-columns:1fr 1fr; } }
.marketing .foot-brand .logo{ margin-bottom:12px; }
.marketing .foot-brand p{ font-size:13.5px; color:var(--ink-45); max-width:230px; }
.marketing .foot-col h5{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-45); margin:0 0 16px; font-weight:500; }
.marketing .foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.marketing .foot-col a{ text-decoration:none; font-size:14px; color:var(--ink-70); }
.marketing .foot-col a:hover{ color:var(--ink); }
.marketing .foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-45); flex-wrap:wrap; gap:12px; }
.marketing .foot-bottom .region{ font-family:var(--mono); }

.marketing .visually-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ---------- Certificate detail page ---------- */
/* v2 — on-brand redesign (Sept 2026): replaces the earlier cream/gold "Vault"
   treatment with the site's standard navy/green/paper palette, widens the
   page from 720px to 1040px, and moves the photo gallery into an overlay
   carousel on a two-column hero. */
.marketing .cert-page{ padding:40px 0 90px; }
.marketing .cert-narrow{ max-width:720px; } /* still used by the inspector profile page */
.marketing .cert-wrap{ max-width:1040px; } /* certificate detail page only — widened from the old 720px */
.marketing .cert-breadcrumb{ font-family:var(--mono); font-size:12px; color:var(--ink-45); margin-bottom:22px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.marketing .cert-breadcrumb a{ color:var(--ink-45); text-decoration:none; }
.marketing .cert-breadcrumb a:hover{ color:var(--green-dark); }
.marketing .cert-admin-edit-toggle{ margin-left:auto; background:var(--ink); color:#fff !important; font-family:var(--body); font-weight:600; font-size:12.5px; padding:6px 14px; border-radius:999px; }
.marketing .cert-admin-edit-toggle:hover{ background:var(--green-dark); }

/* Hero card — standard paper/white surface, two-column on desktop */
.marketing .cert-hero-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:36px; box-shadow:0 1px 2px rgba(18,32,58,.04); }
.marketing .cert-hero-grid{ display:grid; grid-template-columns:1.15fr 1fr; }
@media (max-width:820px){ .marketing .cert-hero-grid{ grid-template-columns:1fr; } }

.marketing .cert-hero-photo{ position:relative; min-height:340px; background:#EDEAE0; overflow:hidden; }

.marketing .cert-gallery-main{ position:absolute; inset:0; overflow:hidden; }
.marketing .cert-gallery-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ink-45); font-size:13.5px; background:#EDEAE0; }
.marketing .cert-gallery-track{ display:flex; width:100%; height:100%; transition:transform .35s ease; }
/* Slides are buttons (click opens the full-size viewer). Photos are
   contained, not cropped, so the whole bike is always visible. */
.marketing .cert-gallery-slide{ flex:0 0 100%; width:100%; height:100%; padding:0; border:none; background:#EDEAE0; cursor:zoom-in; display:block; }
.marketing .cert-gallery-slide img{ width:100%; height:100%; object-fit:contain; display:block; }
.marketing .cert-gallery-zoom{ position:absolute; bottom:16px; right:16px; z-index:3; display:inline-flex; align-items:center; gap:6px; background:rgba(18,32,58,.55); color:#fff; font-family:var(--mono); font-size:11px; padding:5px 11px 5px 9px; border-radius:999px; pointer-events:none; }
.marketing .cert-gallery-zoom svg{ width:12px; height:12px; }
.marketing .cert-gallery-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:36px; height:36px; border-radius:999px; border:none; background:rgba(255,255,255,.92); color:var(--ink); font-family:var(--body); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px -6px rgba(18,32,58,.3); transition:background .15s; }
.marketing .cert-gallery-nav:hover{ background:#fff; }
.marketing .cert-gallery-nav.prev{ left:14px; }
.marketing .cert-gallery-nav.next{ right:14px; }

.marketing .cert-photo-count{ position:absolute; top:20px; right:20px; z-index:3; background:rgba(18,32,58,.55); color:#fff; font-family:var(--mono); font-size:11px; padding:5px 11px; border-radius:999px; letter-spacing:.02em; }

.marketing .cert-hero-body{ padding:34px 38px 30px; font-family:var(--body); color:var(--ink); display:flex; flex-direction:column; }
.marketing .cert-brandrow{ display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.marketing .cert-logo{ font-size:17px; }
.marketing .cert-doctitle{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-45); margin-top:4px; text-transform:uppercase; }
.marketing .cert-certno{ font-family:var(--mono); font-size:11px; color:var(--ink-45); text-align:right; line-height:1.6; }
.marketing .cert-certno strong{ color:var(--ink); font-weight:600; }

.marketing .cert-hero-body h1{ font-family:var(--display); font-weight:700; font-size:clamp(22px,2.8vw,26px); margin:0 0 4px; }
.marketing .cert-subtitle{ color:var(--ink-70); font-size:13.5px; margin-bottom:20px; }

.marketing .cert-id-row{ display:flex; flex-wrap:wrap; gap:6px 22px; font-family:var(--mono); font-size:11px; color:var(--ink-45); padding-top:18px; margin-top:auto; border-top:1px solid var(--line); }
.marketing .cert-id-row strong{ color:var(--ink); font-weight:600; }
.marketing .cert-inspector-link{ color:var(--green-dark); text-decoration:none; font-weight:600; margin-left:2px; }
.marketing .cert-inspector-link:hover{ text-decoration:underline; }

/* ---------- Inspector profile (public, read-only) ---------- */
.marketing .inspector-hero{ display:flex; align-items:center; gap:24px; padding:36px 0 20px; flex-wrap:wrap; }
.marketing .inspector-avatar{ width:96px; height:96px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--line); }
.marketing .inspector-avatar-placeholder{ background:var(--paper); }
.marketing .inspector-website{ display:inline-block; margin-top:8px; color:var(--green-dark); font-weight:600; text-decoration:none; font-size:14.5px; }
.marketing .inspector-website:hover{ text-decoration:underline; }
.marketing .inspector-bio{ padding:8px 0 40px; max-width:640px; color:var(--ink-70); font-size:16px; line-height:1.7; }
.marketing .inspector-bio p{ margin:0 0 16px; }
.marketing .inspector-bio p:last-child{ margin-bottom:0; }
.marketing .inspector-bio ul, .marketing .inspector-bio ol{ margin:0 0 16px; padding-left:22px; }
.marketing .inspector-bio a{ color:var(--green-dark); text-decoration:underline; }
.marketing .inspector-bio strong, .marketing .inspector-bio b{ color:var(--ink); }
.marketing .inspector-bio-empty{ padding:8px 0 40px; color:var(--ink-45); font-style:italic; }

.marketing .inspector-details{
  display:flex; flex-wrap:wrap; gap:32px; padding:24px 0; margin-bottom:40px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.marketing .inspector-detail{ min-width:220px; flex:1 1 240px; }
.marketing .inspector-detail-label{
  display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-45); margin-bottom:8px;
}
.marketing .inspector-address-link{ display:block; color:var(--ink); text-decoration:none; }
.marketing .inspector-address-text{ display:block; white-space:pre-line; }
.marketing .inspector-maps-cta{ display:inline-block; margin-top:6px; color:var(--green-dark); font-weight:600; font-size:13.5px; }
.marketing .inspector-address-link:hover .inspector-maps-cta{ text-decoration:underline; }
.marketing .inspector-contact-lines{ display:flex; flex-direction:column; gap:4px; }
.marketing .inspector-contact-lines a{ color:var(--ink); text-decoration:none; }
.marketing .inspector-contact-lines a:hover{ text-decoration:underline; }

.marketing .cert-score-row{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.marketing .cert-grade-letter{ font-family:var(--display); font-weight:700; font-size:48px; line-height:1; }
.marketing .cert-grade-letter.grade-A{ color:var(--green-dark); }
.marketing .cert-grade-letter.grade-B{ color:var(--green); }
.marketing .cert-grade-letter.grade-C{ color:var(--amber); }
.marketing .cert-grade-letter.grade-D{ color:var(--red); }
.marketing .cert-score-text{ display:flex; flex-direction:column; justify-content:center; gap:4px; }
.marketing .cert-score-text .pct{ font-family:var(--display); font-weight:500; font-size:19px; line-height:1.2; color:var(--ink); }
.marketing .cert-score-text .desc{ font-size:13px; color:var(--ink-70); line-height:1.45; max-width:260px; }

/* Full-width strip beneath the hero grid, spans both columns */
.marketing .cert-quickfacts{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); border-top:1px solid var(--line); }
.marketing .cert-quickfact{ padding:18px 24px; border-left:1px solid var(--line); }
.marketing .cert-quickfact:first-child{ border-left:none; }
.marketing .cert-quickfact .qf-label{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-45); display:block; margin-bottom:5px; }
.marketing .cert-quickfact .qf-value{ font-family:var(--body); font-weight:600; font-size:14.5px; color:var(--ink); overflow-wrap:break-word; }
.marketing .cert-quickfact .qf-value.accent{ color:var(--green-dark); }

/* Inspection report sections */
.marketing .cert-score-section{ margin-bottom:24px; }
.marketing .cert-score-heading{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.marketing .cert-score-heading h2{ font-family:var(--display); font-size:18px; margin:0; }
.marketing .cert-score-heading p{ font-size:12.5px; color:var(--ink-45); margin:0; }
.marketing .cert-score-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.marketing .cert-score-tile{ font-family:var(--body); background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:16px 16px 14px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:border-color .15s; }
.marketing .cert-score-tile:hover{ border-color:var(--green); }
.marketing .cert-score-tile.active{ border-color:var(--green-dark); background:rgba(79,157,61,.06); }
.marketing .cert-score-tile .tile-top{ display:flex; justify-content:space-between; align-items:center; }
.marketing .cert-score-tile .tile-pct{ font-family:var(--display); font-weight:700; font-size:20px; color:var(--green-dark); }
.marketing .cert-score-tile .tile-label{ font-size:13px; color:var(--ink-70); }
.marketing .cert-score-tile .tile-chevron{ width:14px; height:14px; color:var(--ink-45); transition:transform .15s; }
.marketing .cert-score-tile.active .tile-chevron{ transform:rotate(180deg); }

.marketing .cert-section-panel[hidden]{ display:none; }
.marketing .cert-section-panel .cert-section{ border:1px solid var(--line); border-top:none; border-radius:0 0 14px 14px; background:var(--paper-raised); margin-top:-10px; padding:6px 26px; }
.marketing .cert-section-empty{ font-size:13px; color:var(--ink-45); padding:16px 0; }
.marketing .cert-item{ padding:16px 0; border-bottom:1px solid var(--line); }
.marketing .cert-item:last-child{ border-bottom:none; }
.marketing .cert-item-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.marketing .cert-item-main{ min-width:0; }
.marketing .cert-item-label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-45); }
/* Brand + spec are the substance of each row, so they carry the weight;
   the item name sits above them as a quiet label. */
.marketing .cert-item-spec{ margin-top:4px; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
.marketing .cert-spec-brand{ font-family:var(--display); font-weight:700; font-size:16.5px; color:var(--ink); overflow-wrap:anywhere; }
.marketing .cert-spec-detail{ font-weight:500; font-size:14.5px; color:var(--ink); overflow-wrap:anywhere; }
.marketing .cert-item-label + .cert-item-spec{ margin-top:4px; }
.marketing .cert-item-main > .cert-item-label:only-child{ font-family:var(--body); font-size:14.5px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink); }
.marketing .cert-item-side{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.marketing .cert-item-notebtn{ display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:11px; color:var(--ink-70); background:transparent; border:1px solid var(--line-strong); padding:2px 7px 2px 9px; border-radius:999px; cursor:pointer; }
.marketing .cert-item-notebtn:hover{ border-color:var(--ink); color:var(--ink); }
.marketing .cert-item-notebtn svg{ width:11px; height:11px; transition:transform .15s; }
.marketing .cert-item-notebtn[aria-expanded="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.marketing .cert-item-notebtn[aria-expanded="true"] svg{ transform:rotate(180deg); }
/* A row's note, opened in place */
.marketing .cert-item-note{ margin:12px 0 0; padding:12px 16px; border-left:3px solid var(--line-strong); border-radius:0 8px 8px 0; background:var(--paper); font-size:14.5px; line-height:1.6; color:var(--ink); white-space:pre-line; overflow-wrap:anywhere; max-width:75ch; }
.marketing .cert-item-note[hidden]{ display:none; }
.marketing .cert-item-note--good{ border-left-color:var(--green-dark); }
.marketing .cert-item-note--amber{ border-left-color:var(--amber); background:#FFFBF3; }
.marketing .cert-item-note--bad{ border-left-color:var(--red); background:#FFF7F5; }

/* Inspector notes — headline block above the section report */
.marketing .cert-notes{ margin-bottom:36px; }
/* Collapsible header bar for the notes section — open by default */
.marketing .cert-notes-toggle{ width:100%; display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:16px 20px; font-family:var(--body); color:var(--ink); text-align:left; cursor:pointer; transition:border-color .15s; }
.marketing .cert-notes-toggle:hover{ border-color:var(--green); }
.marketing .cert-notes.is-open .cert-notes-toggle{ border-color:var(--green-dark); }
.marketing .cert-notes-title{ display:flex; align-items:baseline; gap:10px; }
.marketing .cert-notes-heading{ font-family:var(--display); font-weight:700; font-size:18px; }
.marketing .cert-notes-count{ font-size:12.5px; color:var(--ink-45); }
.marketing .cert-notes-summary{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.marketing .cert-notes-chip{ white-space:nowrap; font-family:var(--mono); font-size:11px; padding:3px 10px; border-radius:999px; background:rgba(18,32,58,.07); color:var(--ink-70); }
.marketing .cert-notes-chip strong{ font-weight:600; }
.marketing .cert-notes-chip--bad{ background:rgba(181,56,44,.12); color:var(--red); }
.marketing .cert-notes-chip--amber{ background:rgba(201,138,44,.14); color:#8F5E14; }
.marketing .cert-notes-chevron{ width:16px; height:16px; color:var(--ink-45); margin-left:auto; flex-shrink:0; transition:transform .15s; }
.marketing .cert-notes.is-open .cert-notes-chevron{ transform:rotate(180deg); }
.marketing .cert-notes-list[hidden]{ display:none; }
.marketing .cert-notes-list{ margin-top:10px; }
@media (max-width:640px){
  .marketing .cert-notes-toggle{ display:grid; grid-template-columns:minmax(0,1fr) auto; padding:14px 16px; }
  .marketing .cert-notes-summary{ grid-column:1 / -1; grid-row:2; }
  .marketing .cert-notes-chevron{ grid-column:2; grid-row:1; margin-left:0; }
}
/* One full-width row per note (not a card grid): a long note never stretches
   its neighbours, and the text keeps a comfortable reading width. */
.marketing .cert-notes-list{ display:flex; flex-direction:column; gap:10px; }
.marketing .cert-note{ display:grid; grid-template-columns:minmax(0, 230px) minmax(0, 1fr); gap:8px 32px; background:var(--paper-raised); border:1px solid var(--line); border-left:4px solid var(--line-strong); border-radius:12px; padding:20px 24px; scroll-margin-top:90px; }
.marketing .cert-note--good{ border-left-color:var(--green-dark); }
.marketing .cert-note--amber{ border-left-color:var(--amber); background:#FFFBF3; }
.marketing .cert-note--bad{ border-left-color:var(--red); background:#FFF7F5; }
.marketing .cert-note-head{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.marketing .cert-note-item{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); line-height:1.25; overflow-wrap:anywhere; }
.marketing .cert-note-section{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-45); margin-top:3px; }
.marketing .cert-note-body{ min-width:0; max-width:70ch; }
.marketing .cert-note-text{ margin:0; font-size:15px; line-height:1.6; color:var(--ink); white-space:pre-line; overflow-wrap:anywhere; }
.marketing .cert-note-text.is-clamped{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; line-clamp:5; overflow:hidden; }
.marketing .cert-note-more{ margin-top:8px; padding:0; border:none; background:none; font-family:var(--body); font-weight:600; font-size:13.5px; color:var(--green-dark); cursor:pointer; }
.marketing .cert-note-more:hover{ text-decoration:underline; }
.marketing .cert-note-more[hidden]{ display:none; }
@media (max-width:640px){
  .marketing .cert-note{ grid-template-columns:minmax(0, 1fr); padding:18px 18px 18px 20px; }
  .marketing .cert-note-head{ flex-direction:row; justify-content:space-between; align-items:flex-start; gap:12px; }
  .marketing .cert-note-head .pill{ flex-shrink:0; }
}

/* Full-size photo viewer */
body.cert-lightbox-open{ overflow:hidden; }
.marketing .cert-lightbox{ position:fixed; inset:0; z-index:1000; background:#0C1424; display:flex; flex-direction:column; }
.marketing .cert-lightbox[hidden]{ display:none; }
.marketing .cert-lightbox-bar{ display:flex; align-items:center; gap:16px; padding:12px 16px 12px 22px; color:#fff; font-family:var(--mono); font-size:12px; flex-shrink:0; }
.marketing .cert-lightbox-hint{ color:rgba(255,255,255,.5); }
.marketing .cert-lightbox-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.marketing .cert-lightbox-open{ color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.3); padding:6px 12px; border-radius:999px; }
.marketing .cert-lightbox-open:hover{ border-color:#fff; }
.marketing .cert-lightbox-close{ width:38px; height:38px; border-radius:999px; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.marketing .cert-lightbox-close:hover{ background:rgba(255,255,255,.22); }
.marketing .cert-lightbox-stage{ flex:1; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:0 72px 24px; }
.marketing .cert-lightbox-stage img{ max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; display:block; user-select:none; }
.marketing .cert-lightbox.is-zoomed .cert-lightbox-stage{ overflow:auto; display:block; padding:0; }
.marketing .cert-lightbox.is-zoomed .cert-lightbox-stage img{ max-width:none; max-height:none; cursor:zoom-out; margin:0 auto; }
.marketing .cert-lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:999px; border:none; background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.marketing .cert-lightbox-nav:hover{ background:rgba(255,255,255,.26); }
.marketing .cert-lightbox-nav.prev{ left:14px; }
.marketing .cert-lightbox-nav.next{ right:14px; }
.marketing .cert-lightbox.is-zoomed .cert-lightbox-nav{ display:none; }
@media (max-width:640px){
  .marketing .cert-lightbox-stage{ padding:0 0 16px; }
  .marketing .cert-lightbox-hint{ display:none; }
  .marketing .cert-lightbox-nav{ top:auto; bottom:18px; transform:none; }
}

.marketing .cert-disclaimer{ background:var(--paper); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:22px 26px; font-size:13px; color:var(--ink-70); line-height:1.6; }
.marketing .cert-disclaimer strong{ color:var(--ink); }

.marketing .cert-empty{ text-align:center; padding:70px 20px; color:var(--ink-45); }
.marketing .cert-empty h1{ font-size:24px; }

/* ---------- Flash messages on marketing pages ---------- */
.marketing .flash{ padding:12px 16px; border-radius:10px; margin:0 0 20px; font-size:14px; font-weight:500; }
.marketing .flash-success{ background:rgba(79,157,61,.12); color:var(--green-dark); }
.marketing .flash-error{ background:rgba(181,56,44,.1); color:var(--red); }
.marketing .flash-info{ background:rgba(18,32,58,.06); color:var(--ink-70); }

/* ---------- Homepage: pilot banner (Certificate + Passport redesign) ---------- */
.marketing .pilot-banner{ background:var(--ink); color:#fff; }
.marketing .pilot-banner-inner{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 32px; font-size:13.5px; text-align:center; }
.marketing .pilot-banner-tag{ font-family:var(--mono); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:11.5px; }
.marketing .pilot-banner a{ color:#7FCB6A; font-weight:600; text-decoration:none; }
.marketing .pilot-banner a:hover{ text-decoration:underline; }

/* ---------- Homepage: "three doors" ---------- */
.marketing .doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .marketing .doors{ grid-template-columns:1fr; } }
.marketing .door-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:13px; text-decoration:none; color:inherit; }
.marketing .door-card.is-soon{ background:#FAF8F2; border-style:dashed; border-color:var(--line-strong); }
.marketing .door-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.marketing .door-kicker{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-45); }
.marketing .door-status{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--ink); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.marketing .door-status.soon{ color:#7A4F10; background:rgba(201,138,44,.16); }
.marketing .door-card h3{ font-family:var(--display); font-size:22px; font-weight:500; line-height:1.18; margin:0; }
.marketing .door-card p{ color:var(--ink-70); font-size:14.5px; margin:0; }
.marketing .door-link{ margin-top:auto; font-weight:600; font-size:14.5px; color:var(--green-dark); }

/* ---------- Homepage: verify bar ---------- */
.marketing .verify-bar{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:22px 28px; border-radius:var(--radius); background:var(--ink); color:#fff; }
.marketing .verify-copy{ display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.marketing .verify-copy strong{ font-family:var(--display); font-size:19px; font-weight:500; }
.marketing .verify-copy span{ font-size:13.5px; color:rgba(255,255,255,.65); }
.marketing .verify-form{ display:flex; align-items:center; gap:12px; flex:1; min-width:260px; flex-wrap:wrap; }
.marketing .verify-form label{ font-size:13px; color:rgba(255,255,255,.65); flex-shrink:0; }
.marketing .verify-form input{ flex:1; min-width:180px; height:46px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff; padding:0 15px; font-family:inherit; font-size:14.5px; }
.marketing .verify-form input::placeholder{ color:rgba(255,255,255,.4); }
.marketing .verify-form input:focus{ outline:2px solid var(--green); outline-offset:1px; }
.marketing .verify-form button{ height:46px; padding:0 22px; border-radius:10px; border:none; background:var(--green); color:#fff; font-family:inherit; font-weight:600; font-size:14.5px; cursor:pointer; }
.marketing .verify-form button:hover{ background:var(--green-dark); }

/* ---------- Homepage: lifecycle loop ---------- */
.marketing .lifecycle-row{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; }
.marketing .lifecycle-step{ flex:1 1 150px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:7px; }
.marketing .lifecycle-step .ls-num{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--green-dark); }
.marketing .lifecycle-step .ls-title{ font-family:var(--display); font-size:19px; font-weight:500; }
.marketing .lifecycle-step p{ font-size:13px; line-height:1.45; color:var(--ink-70); margin:0; }
.marketing .lifecycle-step.is-link{ background:var(--ink); color:#fff; }
.marketing .lifecycle-step.is-link .ls-num{ color:#7FCB6A; }
.marketing .lifecycle-step.is-link p{ color:rgba(255,255,255,.7); }
.marketing .lifecycle-step.is-soon{ background:#FAF8F2; border-style:dashed; border-color:var(--line-strong); }
.marketing .lifecycle-step.is-soon .ls-num span{ color:var(--ink-45); font-weight:400; }
.marketing .lifecycle-arrow{ display:flex; align-items:center; color:var(--line-strong); flex-shrink:0; }
@media (max-width:860px){ .marketing .lifecycle-row{ flex-direction:column; } .marketing .lifecycle-arrow{ transform:rotate(90deg); align-self:center; } }
.marketing .lifecycle-loop-note{ display:flex; justify-content:center; text-align:center; font-size:14.5px; font-weight:600; color:var(--green-dark); margin-top:6px; }

/* ---------- Homepage: why proof pays ---------- */
.marketing .proof-compare{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:860px){ .marketing .proof-compare{ grid-template-columns:1fr; } }
.marketing .proof-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:30px; display:flex; flex-direction:column; gap:18px; }
.marketing .proof-card.is-good{ border:1.5px solid var(--green); box-shadow:0 24px 48px -24px rgba(18,32,58,.25); }
.marketing .proof-kicker{ font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-45); }
.marketing .proof-card.is-good .proof-kicker{ color:var(--green-dark); }
.marketing .proof-thumb{ position:relative; height:148px; border-radius:12px; overflow:hidden; background: repeating-linear-gradient(115deg, #ECE6D7 0 2px, #F2EDE0 2px 30px); }
.marketing .proof-thumb svg{ position:absolute; inset:0; margin:auto; width:62%; height:62%; }
.marketing .proof-badge{ position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:6px; background:var(--ink); color:#fff; font-family:var(--mono); font-size:10.5px; font-weight:500; padding:4px 10px; border-radius:999px; }
.marketing .proof-badge::before{ content:""; width:6px;height:6px;border-radius:50%; background:var(--green); }
.marketing .proof-listing{ display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:12px; background:var(--paper); border:1px dashed var(--line-strong); }
.marketing .proof-listing.is-certified{ flex-direction:row; justify-content:space-between; align-items:center; gap:16px; border-style:solid; border-color:var(--line); }
.marketing .proof-listing .pl-title{ font-family:var(--display); font-size:19px; font-weight:600; }
.marketing .proof-listing .pl-quote{ font-size:14px; font-style:italic; color:var(--ink-70); }
.marketing .proof-listing .pl-sub{ font-family:var(--mono); font-size:11.5px; color:var(--green-dark); }
.marketing .proof-grade-circle{ width:50px; height:50px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-size:22px; font-weight:700; border:3px solid #DDEFD6; }
.marketing .proof-questions{ display:flex; flex-direction:column; gap:11px; }
.marketing .proof-questions .pq{ display:flex; gap:10px; align-items:center; font-size:14px; }
.marketing .proof-questions svg{ flex-shrink:0; color:var(--amber); }
.marketing .proof-card.is-good .proof-questions svg{ color:var(--green-dark); }
.marketing .proof-outcome{ margin-top:auto; padding:14px 16px; border-radius:12px; background:rgba(201,138,44,.14); color:#7A4F10; font-size:14px; font-weight:600; }
.marketing .proof-outcome.is-good{ background:rgba(79,157,61,.14); color:var(--green-dark); }
.marketing .proof-note{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; color:var(--ink-45); margin-top:22px; }
.marketing .proof-note .dot{ width:7px;height:7px;border-radius:50%; background:var(--green); flex-shrink:0; }

/* ---------- Homepage: pricing (Certificate / Passport) ---------- */
.marketing .pricing-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:860px){ .marketing .pricing-grid{ grid-template-columns:1fr; } }
.marketing .pricing-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:20px; padding:36px; display:flex; flex-direction:column; gap:22px; }
.marketing .pricing-card.is-soon{ background:#FAF8F2; border-style:dashed; border-color:var(--line-strong); }
.marketing .pricing-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.marketing .pricing-name{ font-family:var(--display); font-size:30px; font-weight:500; }
.marketing .pricing-status{ font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; padding:5px 12px; border-radius:999px; color:#fff; background:var(--ink); white-space:nowrap; }
.marketing .pricing-status.soon{ color:#7A4F10; background:rgba(201,138,44,.16); }
.marketing .pricing-price{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }
.marketing .pricing-price .amount{ font-family:var(--display); font-size:40px; font-weight:500; }
.marketing .pricing-price .note{ font-size:14px; color:var(--ink-70); }
.marketing .pricing-card p.blurb{ margin:0; font-size:15px; color:var(--ink-70); }
.marketing .pricing-list{ display:flex; flex-direction:column; gap:11px; font-size:14.5px; }
.marketing .pricing-list .pl-row{ display:flex; gap:11px; align-items:flex-start; }
.marketing .pricing-list svg{ flex-shrink:0; margin-top:1px; color:var(--green-dark); }
.marketing .pricing-cta{ margin-top:auto; align-self:flex-start; }
.marketing .pricing-cta.btn-outline{ border:1.5px solid var(--ink); color:var(--ink); background:transparent; }

/* ---------- Homepage: Passport timeline preview ---------- */
.marketing .timeline-grid{ display:flex; gap:56px; flex-wrap:wrap; }
.marketing .timeline-copy{ flex:1 1 320px; display:flex; flex-direction:column; gap:14px; }
.marketing .timeline-copy p{ color:rgba(255,255,255,.72); font-size:15px; line-height:1.6; margin:0; }
.marketing .timeline-legend{ display:flex; flex-direction:column; gap:10px; margin-top:6px; font-size:13.5px; }
.marketing .timeline-legend-row{ display:flex; align-items:center; gap:10px; }
.marketing .timeline-legend span.verified{ font-size:11.5px; font-weight:600; color:var(--ink); background:#7FCB6A; padding:3px 9px; border-radius:999px; }
.marketing .timeline-legend span.owner-added{ font-size:11.5px; font-weight:600; color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.4); padding:2px 9px; border-radius:999px; }
.marketing .timeline-legend-row em{ font-style:normal; color:rgba(255,255,255,.72); }
.marketing .timeline-card{ flex:2 1 420px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:28px; }
.marketing .timeline-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:18px; margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,.14); flex-wrap:wrap; }
.marketing .timeline-head .th-label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.55); }
.marketing .timeline-head .th-bike{ font-family:var(--display); font-size:21px; }
.marketing .timeline-head-grade{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:rgba(255,255,255,.72); }
.marketing .timeline-entry{ display:flex; gap:16px; }
.marketing .timeline-entry .te-date{ width:80px; flex-shrink:0; font-size:12.5px; color:rgba(255,255,255,.55); padding-top:13px; }
.marketing .timeline-entry .te-rail{ display:flex; flex-direction:column; align-items:center; width:12px; flex-shrink:0; }
.marketing .timeline-entry .te-dot{ width:11px; height:11px; border-radius:50%; background:#7FCB6A; margin-top:16px; }
.marketing .timeline-entry .te-dot.unverified{ background:transparent; border:2px solid rgba(255,255,255,.4); box-sizing:border-box; }
.marketing .timeline-entry .te-dot.final{ width:13px; height:13px; margin-top:15px; }
.marketing .timeline-entry .te-line{ width:2px; flex-grow:1; background:rgba(255,255,255,.14); }
.marketing .timeline-entry .te-body{ flex-grow:1; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0 20px; flex-wrap:wrap; }
.marketing .timeline-entry:last-child .te-body{ padding-bottom:4px; }
.marketing .timeline-entry .te-title{ font-size:15px; font-weight:600; }
.marketing .timeline-entry.is-final .te-title{ color:#7FCB6A; }
.marketing .timeline-entry .te-sub{ font-size:13px; color:rgba(255,255,255,.55); }
.marketing .timeline-entry .te-tag{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; flex-shrink:0; }
.marketing .timeline-entry .te-tag.verified{ color:var(--ink); background:#7FCB6A; }
.marketing .timeline-entry .te-tag.owner-added{ color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.4); }

/* ---------- Homepage: partners split card ---------- */
.marketing .partners-card{ display:flex; gap:56px; align-items:center; flex-wrap:wrap; background:var(--paper-raised); border:1px solid var(--line); border-radius:22px; padding:48px; }
.marketing .partners-pitch{ flex:1 1 360px; display:flex; flex-direction:column; gap:16px; }
.marketing .partners-benefits{ flex:1 1 420px; display:flex; flex-direction:column; gap:22px; }
.marketing .partners-benefit{ padding-bottom:22px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.marketing .partners-benefit:last-child{ border-bottom:none; padding-bottom:0; }
.marketing .partners-benefit strong{ font-size:16.5px; font-weight:600; }
.marketing .partners-benefit span{ font-size:14px; color:var(--ink-70); line-height:1.5; }

/* ---------- Homepage: Passport waitlist ---------- */
.marketing .waitlist-section{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.marketing .waitlist-section .pill-soon{ font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:#7A4F10; background:rgba(201,138,44,.16); padding:5px 12px; border-radius:999px; }
.marketing .waitlist-section h2{ max-width:760px; }
.marketing .waitlist-section p{ max-width:560px; color:var(--ink-70); font-size:16.5px; margin:0; }
.marketing .waitlist-form{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.marketing .waitlist-form .field{ margin:0; text-align:left; }
.marketing .waitlist-form input{ width:320px; max-width:70vw; height:50px; }

/* ---------- Grade colour circle (hero / proof-compare cards) ---------- */
.marketing .grade-circle{ border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:700; flex-shrink:0; }
.marketing .grade-circle.grade-A{ background:var(--green-dark); }
.marketing .grade-circle.grade-B{ background:var(--green); }
.marketing .grade-circle.grade-C{ background:var(--amber); color:var(--ink); }
.marketing .grade-circle.grade-D{ background:var(--red); }

/* ---------- Certification routes: independent vs dealer certified ---------- */
/* Used on /about and /partners. The badge mirrors what actually prints on a
   certificate, so the two pages and the certificate never drift apart. */
.marketing .route-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:24px; }
@media (max-width:860px){ .marketing .route-grid{ grid-template-columns:1fr; } }
.marketing .route-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:32px; display:flex; flex-direction:column; gap:18px; }
.marketing .route-card.is-independent{ border:1.5px solid var(--green); }
.marketing .route-card h3{ font-family:var(--display); font-size:22px; font-weight:600; margin:0; }
.marketing .route-card p{ color:var(--ink-70); font-size:14.5px; line-height:1.6; margin:0; }
.marketing .route-badge{ align-self:flex-start; display:flex; flex-direction:column; gap:3px; padding:11px 16px; border-radius:10px; background:var(--ink); color:#fff; }
.marketing .route-badge .rb-top{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#7FCB6A; }
.marketing .route-badge.is-dealer .rb-top{ color:#E8B85B; }
.marketing .route-badge .rb-main{ font-size:14px; font-weight:600; }

.marketing .compare-table{ background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.marketing .compare-row{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; padding:15px 26px; border-bottom:1px solid var(--line); font-size:14px; }
.marketing .compare-row:last-child{ border-bottom:none; }
.marketing .compare-row.head{ background:var(--paper); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.marketing .compare-row .q{ color:var(--ink-70); }
.marketing .compare-row .yes{ color:var(--green-dark); font-weight:600; }
.marketing .compare-row .no{ color:var(--ink-45); }
.marketing .compare-row .flag{ color:#7A4F10; font-weight:600; }
@media (max-width:760px){
  .marketing .compare-row{ grid-template-columns:1fr; gap:4px; }
  .marketing .compare-row.head{ display:none; }
  .marketing .compare-row .q{ font-weight:600; color:var(--ink); }
}

/* ---------- Partners: own-stock explainer ---------- */
.marketing .ownstock{ display:flex; gap:48px; align-items:center; flex-wrap:wrap; background:var(--paper-raised); border:1px solid var(--line); border-radius:22px; padding:44px 48px; }
.marketing .ownstock-pitch{ flex:1 1 360px; display:flex; flex-direction:column; gap:14px; }
.marketing .ownstock-pitch h2{ margin:0; }
.marketing .ownstock-pitch p{ color:var(--ink-70); font-size:15.5px; line-height:1.6; margin:0; }
.marketing .ownstock-rows{ flex:1 1 420px; display:flex; flex-direction:column; gap:14px; }
.marketing .ownstock-row{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; padding:20px 22px; border-radius:14px; background:var(--paper); border:1px solid var(--line); }
.marketing .ownstock-row .route-badge{ width:232px; flex-shrink:0; box-sizing:border-box; }
.marketing .ownstock-row .ow-note{ flex:1 1 200px; font-size:14px; line-height:1.55; color:var(--ink-70); }

/* ---------- Partners: revenue stack (hero) ---------- */
.marketing .revstack{ display:flex; flex-direction:column; gap:14px; }
.marketing .revcard{ background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:13px; box-shadow:0 20px 44px -24px rgba(18,32,58,.3); }
.marketing .revcard.is-soon{ background:#FAF8F2; border-style:dashed; border-color:var(--line-strong); box-shadow:none; }
.marketing .revcard-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.marketing .revcard-kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--green-dark); }
.marketing .revcard.is-soon .revcard-kicker{ color:var(--ink-45); }
.marketing .revcard-status{ font-family:var(--mono); font-size:10.5px; color:#fff; background:var(--ink); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.marketing .revcard-status.soon{ color:#7A4F10; background:rgba(201,138,44,.16); }
.marketing .revcard-name{ font-family:var(--display); font-size:22px; font-weight:600; }
.marketing .revcard-split{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 16px; border-radius:12px; background:var(--paper); font-size:14px; }
.marketing .revcard.is-soon .revcard-split{ background:var(--paper-raised); border:1px solid var(--line); }
.marketing .revcard-split .keep{ color:var(--green-dark); font-weight:600; }
.marketing .revcard-note{ font-size:13px; line-height:1.5; color:var(--ink-45); }
.marketing .revstack-arrow{ display:flex; justify-content:center; color:var(--line-strong); }

/* ---------- Partners: the earnings loop ---------- */
.marketing .loop-grid{ display:flex; gap:56px; flex-wrap:wrap; }
.marketing .loop-copy{ flex:1 1 360px; display:flex; flex-direction:column; gap:14px; }
.marketing .loop-copy h2{ color:#fff; margin:0; }
.marketing .loop-copy p{ color:rgba(255,255,255,.72); font-size:15px; line-height:1.6; margin:0; }
.marketing .loop-steps{ flex:1 1 420px; }
.marketing .loop-step{ display:flex; gap:16px; align-items:flex-start; }
.marketing .loop-rail{ display:flex; flex-direction:column; align-items:center; width:13px; flex-shrink:0; }
.marketing .loop-dot{ width:11px; height:11px; border-radius:50%; background:#7FCB6A; margin-top:15px; }
.marketing .loop-dot.final{ width:13px; height:13px; background:#F3D98B; margin-top:14px; }
.marketing .loop-line{ width:2px; flex-grow:1; min-height:38px; background:rgba(255,255,255,.14); }
.marketing .loop-body{ flex-grow:1; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0 18px; }
.marketing .loop-step:last-child .loop-body{ padding-bottom:0; }
.marketing .loop-body .lb-title{ font-size:15px; font-weight:600; }
.marketing .loop-step.is-final .lb-title{ color:#F3D98B; }
.marketing .loop-body .lb-sub{ font-size:13px; color:rgba(255,255,255,.6); }
.marketing .loop-body .lb-amount{ font-family:var(--mono); font-size:12.5px; color:#7FCB6A; font-weight:600; flex-shrink:0; }
.marketing .loop-body .lb-amount.muted{ color:rgba(255,255,255,.6); font-weight:400; }

/* ---------- Certificate: independent vs dealer-certified basis ---------- */
/* Rendered on the public certificate and the certified-bike cards. The dealer
   variant is deliberately neutral rather than negative — it states a fact
   about who inspected, it isn't a warning. */
.marketing .cert-basis{ display:flex; flex-direction:column; gap:3px; margin-top:16px; padding:12px 16px; border-radius:10px; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--line-strong); }
.marketing .cert-basis.is-independent{ border-left-color:var(--green); }
.marketing .cert-basis.is-dealer{ border-left-color:var(--amber); }
.marketing .cert-basis .cb-label{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--green-dark); }
.marketing .cert-basis.is-dealer .cb-label{ color:#7A4F10; }
.marketing .cert-basis .cb-note{ font-size:13px; color:var(--ink-70); line-height:1.45; }
.marketing .bike-basis{ position:absolute; top:12px; right:12px; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.04em; padding:4px 9px; border-radius:999px; background:rgba(79,157,61,.92); color:#fff; }
.marketing .bike-basis.is-dealer{ background:rgba(201,138,44,.92); color:#2B1D05; }

/* ---------- Mobile layout fixes (Oct 2026 mobile review) ---------- */
/* Header: menu button + short CTA label. Desktop is unchanged — the toggle,
   the short label and the menu-only staff links are all hidden above 900px. */
.marketing .nav-toggle{ display:none; width:40px; height:40px; flex-shrink:0; align-items:center; justify-content:center; border:1.5px solid var(--line-strong); border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; padding:0; }
.marketing .nav-toggle .nt-close{ display:none; }
.marketing header.nav-open .nav-toggle .nt-open{ display:none; }
.marketing header.nav-open .nav-toggle .nt-close{ display:inline; }
.marketing .nav-menu-staff{ display:none; }
.marketing .lbl-short{ display:none; }
@media (max-width:900px){
  .marketing .nav{ position:relative; }
  .marketing .nav-toggle{ display:inline-flex; }
  .marketing .nav-cta{ gap:10px; }
  .marketing .nav-cta .nav-staff{ display:none; }
  .marketing header.nav-open .navlinks{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0; margin-top:1px;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px -18px rgba(18,32,58,.25); padding:6px 32px 14px;
  }
  .marketing header.nav-open .navlinks li{ border-bottom:1px solid var(--line); }
  .marketing header.nav-open .navlinks li:last-child{ border-bottom:none; }
  .marketing header.nav-open .navlinks a{ display:block; padding:13px 0; font-size:16px; }
  .marketing header.nav-open .nav-menu-staff{ display:block; }
  .marketing header.nav-open .nav-menu-staff a{ font-family:var(--mono); font-size:13px; color:var(--ink-45); }
}
@media (max-width:640px){
  .marketing .nav{ height:64px; gap:12px; }
  .marketing .nav .logo{ font-size:20px; }
  .marketing .nav-cta .btn{ padding:9px 15px; font-size:13.5px; white-space:nowrap; }
  .marketing header.nav-open .navlinks{ padding:4px 20px 12px; }
}
@media (max-width:420px){
  .marketing .lbl-full{ display:none; }
  .marketing .lbl-short{ display:inline; }
}

/* Long words / URLs never push the page sideways */
@media (max-width:640px){
  .marketing main{ overflow-wrap:break-word; }
  .marketing .inspector-contact-lines a, .marketing .inspector-website{ overflow-wrap:anywhere; }
}

/* Home hero certificate mockup: the grade badge sat on top of the
   certificate number, and the seal hung off the card's edge (past the
   viewport) and covered the "Inspected by" value. */
@media (max-width:500px){
  .marketing .cert-card{ padding-bottom:50px; }
  .marketing .cert-card .cert-top{ padding-right:80px; min-height:68px; }
  .marketing .cert-card .cert-id{ text-align:left; }
  .marketing .seal{ width:76px; height:76px; right:-6px; bottom:-24px; }
  /* The seal's rotated ring text still adds a sliver of scrollable width */
  .marketing .hero{ overflow-x:hidden; overflow-x:clip; }
}

/* Partner type picker: the visually-hidden radios inherited the form's
   width:100% and were positioned against the page, widening it. */
.marketing .type-pick > div{ position:relative; }
.marketing .type-pick input{ width:1px; height:1px; left:0; top:0; margin:0; }

/* Dark panels: 40px side padding plus nested cards left the Passport
   timeline and grade tiles squeezed into a ~200px column on phones. */
@media (max-width:640px){
  .marketing section{ padding:64px 0; }
  .marketing .darkstrip, .marketing .cta-band{ padding:32px 20px; border-radius:18px; }
  .marketing .timeline-grid, .marketing .loop-grid{ gap:32px; }
  .marketing .timeline-card{ padding:18px 16px; }
  .marketing .timeline-entry{ gap:12px; }
  .marketing .timeline-entry .te-date{ width:58px; font-size:12px; }
  .marketing .timeline-copy, .marketing .timeline-card, .marketing .loop-copy, .marketing .loop-steps,
  .marketing .partners-pitch, .marketing .partners-benefits, .marketing .ownstock-pitch, .marketing .ownstock-rows{ flex-basis:100%; min-width:0; }
  .marketing .timeline-legend span.verified, .marketing .timeline-legend span.owner-added{ white-space:nowrap; flex-shrink:0; }
  .marketing .grade-scale{ gap:10px; }
  .marketing .grade-item{ padding:14px; }
  .marketing .partners-card, .marketing .ownstock{ padding:28px 20px; gap:28px; }
  .marketing .ownstock-row{ padding:16px; }
  .marketing .ownstock-row .route-badge{ width:100%; }
  .marketing .pricing-card, .marketing .proof-card, .marketing .route-card{ padding:24px 20px; }
  .marketing .applycta{ padding:28px 18px; }
  .marketing .applycta .form-card{ padding:20px 16px; }
  .marketing .story-figure{ padding:22px 20px; }
  .marketing .story-figure .stat{ gap:16px; }
  .marketing .story-figure .stat b{ text-align:right; }
  .marketing .verify-bar{ padding:22px 20px; }
  .marketing .verify-form{ min-width:0; flex-basis:100%; }
  .marketing .verify-form label{ flex-basis:100%; }
  .marketing .verify-form input{ min-width:0; }
  .marketing .waitlist-form{ width:100%; flex-direction:column; align-items:stretch; }
  .marketing .waitlist-form input{ width:100%; max-width:none; }
  .marketing .hero-lookup-form{ display:flex; }
  .marketing .hero-lookup-input{ width:100%; }
  .marketing .foot-grid{ gap:32px 20px; }
}

/* About: the comparison table hides its column headings on phones, which
   left bare "Yes / Yes" pairs — each value now carries its column name. */
@media (max-width:760px){
  .marketing .compare-row{ gap:6px; padding:15px 20px; }
  .marketing .compare-row [data-label]{ display:flex; justify-content:space-between; gap:16px; }
  .marketing .compare-row [data-label]::before{ content:attr(data-label); font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-45); font-weight:400; flex-shrink:0; padding-top:2px; }
  .marketing .compare-row [data-label]{ text-align:right; }
}

/* Certificate page */
@media (max-width:640px){
  .marketing .cert-hero-body{ padding:26px 20px 24px; }
  .marketing .cert-score-heading{ flex-direction:column; align-items:flex-start; gap:4px; }
  .marketing .cert-score-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .marketing .cert-section-panel .cert-section{ padding:6px 18px; }
  .marketing .cert-item-row{ align-items:flex-start; }
  /* Quick facts: a fixed two-up grid so the dividers line up (auto-fit
     wrapped into rows whose first cell still drew a left border). */
  .marketing .cert-quickfacts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .marketing .cert-quickfact{ padding:16px 20px; border-left:none; border-top:1px solid var(--line); }
  .marketing .cert-quickfact:nth-child(-n+2){ border-top:none; }
  .marketing .cert-quickfact:nth-child(even){ border-left:1px solid var(--line); }
  .marketing .cert-disclaimer{ padding:18px 20px; }
  .marketing .inspector-detail{ min-width:0; flex-basis:100%; }
}