/* Shared redesign stylesheet — 2026-08.
   Extracted from index.html so the homepage, how-it-works, about, contact,
   faq and blog all share ONE source of truth. Namespaced .rd-* so it never
   collides with the existing nav, footer or per-page styles, which stay
   exactly as they are. */
/* ═══════════════════════════════════════════════════════════════════════
   REDESIGN 2026-08 v2 — light premium, edge-to-edge.
   Rewritten after Vladimir's Flybubble reference. Four changes from v1:
     1. FULL-BLEED. Tiles and bands touch the screen edge; only running text
        keeps a max-width. v1's boxed container is what read as "e-comm".
     2. ONE dark, and it is not dark. Bands are brand blue #15679e (white on
        it measures 6.06:1) instead of near-black navy. v1 dropped from a pale
        page into #0a1628 with a grey-ish hero fade — two different darks and
        a jarring transition.
     3. Photo category tiles with a frosted panel: kicker, name, one line.
     4. Bare product cards. v1 stacked a badge, five spec pills and a border
        on every card; the photo could not breathe.
   The peach #ffb38a highlight is gone — the headline is plain white now, so
   orange means "this is a button" and nothing else.
   Appended after the original stylesheet; everything namespaced .rd-*.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --rd-white:#ffffff; --rd-paper:#f4f7fa; --rd-surface2:#e9eff5;
  --rd-ink:#0a1628; --rd-ink2:#46617a; --rd-ink3:#7d94a8;
  --rd-line:#dde5ed; --rd-line2:#c8d4e0;
  --rd-orange:#e85d20; --rd-orange-h:#ff7a3d;
  --rd-orange-ink:#bd4512; --rd-blue-ink:#166ba8;
  /* Band blue — brand family, measured 6.06:1 against white text */
  --rd-band:#15679e; --rd-band-2:#1772b3;
  --rd-sh-md:0 4px 16px rgba(10,22,40,.08);
  --rd-sh-lg:0 18px 44px rgba(10,22,40,.14);
}
body{background:var(--rd-white);color:var(--rd-ink);}
/* Running text stays readable; photos and bands go wall to wall. */
.rd-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(16px,3vw,40px);}
.rd-bleed{width:100%;padding:0;}

/* ── hero: full-bleed photo, centred frosted panel ────────────────────── */
.rd-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;min-height:78vh;padding:70px 16px 78px;}
.rd-hero-bg{position:absolute;inset:-16% 0;width:100%;height:132%;object-fit:cover;
  object-position:center;z-index:0;will-change:transform;}
.rd-hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,26,44,.34) 0%,rgba(8,26,44,.26) 55%,rgba(8,26,44,.42) 100%);}
.rd-hero-panel{position:relative;z-index:2;max-width:940px;width:100%;text-align:center;
  background:rgba(10,26,44,.30);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:40px 32px 36px;}
.rd-hero-panel h1,.rd-hero-panel p,.rd-hero-panel .rd-kick,.rd-hero-panel h2{text-shadow:0 2px 16px rgba(0,0,0,.6);}
.rd-kick{font-family:'Barlow',sans-serif;font-size:clamp(.95rem,1.6vw,1.12rem);
  color:#eef5fb;margin:0 0 10px;}
.rd-hero h1{font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2.5rem,6.6vw,4.8rem);font-weight:800;line-height:1.02;
  text-transform:uppercase;color:#fff;margin:0;text-shadow:0 3px 26px rgba(0,0,0,.4);}
.rd-hero p{font-size:clamp(1rem,1.8vw,1.18rem);color:#f0f6fb;max-width:60ch;
  margin:18px auto 0;}
.rd-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px;}
.rd-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:56px;
  padding:0 34px;border-radius:8px;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.22rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  transition:background .2s,transform .2s,color .2s,border-color .2s;cursor:pointer;}
.rd-btn-shop{background:var(--rd-orange);color:#fff;}
.rd-btn-shop:hover{background:var(--rd-orange-h);transform:translateY(-2px);}
.rd-btn-sell{background:#fff;color:var(--rd-ink);}
.rd-btn-sell:hover{background:#e9eff5;transform:translateY(-2px);}
.rd-btn-blue{background:var(--rd-band);color:#fff;}
.rd-btn-blue:hover{background:var(--rd-band-2);transform:translateY(-2px);}

/* ── flat trust strip, full width, no box ─────────────────────────────── */
.rd-strip{border-bottom:1px solid var(--rd-line);background:#fff;}
.rd-strip-in{max-width:1320px;margin:0 auto;padding:18px clamp(16px,3vw,40px);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 26px;}
.rd-strip span{display:flex;align-items:center;gap:10px;font-size:.95rem;
  color:var(--rd-ink2);font-weight:500;}
.rd-strip b{color:var(--rd-ink);font-weight:600;}
.rd-strip i{font-style:normal;font-size:1.15rem;}
.rd-strip--blue{background:var(--rd-band);border-color:rgba(255,255,255,.15);}
.rd-strip--blue span{color:#d6e7f4;} .rd-strip--blue b{color:#fff;}

/* ── sections ─────────────────────────────────────────────────────────── */
.rd-sec{padding:74px 0;}
.rd-sec--alt{background:var(--rd-paper);}
.rd-head{margin-bottom:30px;text-align:center;}
.rd-head.rd-row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;flex-wrap:wrap;text-align:left;}
.rd-ey{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.84rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--rd-orange-ink);margin-bottom:8px;}
.rd-head h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2rem,4.2vw,3.1rem);
  font-weight:800;text-transform:uppercase;color:var(--rd-ink);line-height:1.04;}
.rd-head p{color:var(--rd-ink2);max-width:62ch;margin:12px auto 0;}
.rd-head.rd-row p{margin-left:0;}
.rd-link{display:inline-flex;align-items:center;min-height:44px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--rd-blue-ink);font-size:.98rem;text-decoration:none;}
.rd-link:hover{color:var(--rd-orange-ink);}

/* ── CATEGORY TILES — edge to edge, photo + frosted panel ─────────────── */
.rd-cats{display:grid;gap:16px;grid-template-columns:1fr;padding:0 clamp(16px,3vw,40px);}
@media(min-width:700px){.rd-cats{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1100px){
  .rd-cats{grid-template-columns:repeat(3,1fr);}
  .rd-cat--big{grid-column:span 2;}
}
/* Paragliders (the 2x2 tile) — slight hierarchy, still far smaller than before */
.rd-cats .rd-cat--big h3{font-size:1.55rem;}
.rd-cat{position:relative;overflow:hidden;border-radius:16px;min-height:340px;display:flex;
  align-items:flex-end;justify-content:center;text-decoration:none;isolation:isolate;}
@media(min-width:1100px){.rd-cat{min-height:400px;}}
.rd-cat-img{position:absolute;inset:-11% 0;width:100%;height:122%;object-fit:cover;
  z-index:-2;will-change:transform;transition:scale .6s cubic-bezier(.2,.7,.3,1);}
.rd-cat::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,26,44,0) 55%,rgba(8,26,44,.34) 100%);}
.rd-cat:hover .rd-cat-img{scale:1.05;}
.rd-cat-panel{width:auto;max-width:82%;margin:0 0 24px;text-align:center;
  /* Flybubble-style: transparent enough that the gear reads THROUGH the panel.
     Legibility comes from the blur + a text-shadow, not from a heavy fill. */
  background:rgba(12,26,42,.34);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 20px 15px;
  transition:background .3s;}
.rd-cat:hover .rd-cat-panel{background:rgba(21,103,158,.6);}
.rd-cat-k{font-size:.78rem;color:#e3eef8;margin:0 0 2px;text-shadow:0 1px 8px rgba(0,0,0,.7);}
.rd-cat h3{font-family:'Barlow Condensed',sans-serif;font-size:1.35rem;
  font-weight:800;text-transform:uppercase;color:#fff;line-height:1.08;margin:0;
  text-shadow:0 1px 10px rgba(0,0,0,.7);}
.rd-cat-d{font-size:.82rem;color:#eaf2fa;margin:5px 0 0;text-shadow:0 1px 8px rgba(0,0,0,.7);}
.rd-cat-n{display:inline-block;margin-top:8px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.18);border-radius:20px;padding:3px 12px;}

/* ── product cards: photo first, almost no chrome ─────────────────────── */
.rd-gear{display:grid;gap:26px 20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.rd-card{text-decoration:none;color:inherit;display:block;}
.rd-card-img{position:relative;aspect-ratio:1/1;background:var(--rd-paper);
  border-radius:10px;overflow:hidden;}
.rd-card-img img{width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.rd-card:hover .rd-card-img img{transform:scale(1.04);}
.rd-card-ph{width:100%;height:100%;display:grid;place-items:center;font-size:2.4rem;}
.rd-card-b{padding:13px 2px 0;}
.rd-card-cat{font-size:.78rem;color:var(--rd-ink3);letter-spacing:.06em;
  text-transform:uppercase;}
.rd-card-t{font-family:'Barlow Condensed',sans-serif;font-size:1.24rem;font-weight:700;
  line-height:1.2;color:var(--rd-ink);margin-top:2px;}
.rd-card-meta{font-size:.85rem;color:var(--rd-ink2);margin-top:3px;}
.rd-price{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.36rem;
  color:var(--rd-ink);margin-top:7px;}
.rd-loading{grid-column:1/-1;text-align:center;color:var(--rd-ink2);padding:40px 0;}

/* ── blue band (replaces the near-black one) ──────────────────────────── */
.rd-band{position:relative;overflow:hidden;padding:82px 0;color:#fff;
  background:var(--rd-band);}
.rd-band-bg{position:absolute;inset:-18% 0;width:100%;height:136%;object-fit:cover;
  z-index:0;opacity:.22;will-change:transform;}
/* Was `.rd-band > *`, which overrode .rd-band-bg position:absolute and
   dropped the photo into the flow instead of behind the content. */
.rd-band > .rd-wrap{position:relative;z-index:1;}
.rd-band .rd-ey{color:#ffd0b5;}
.rd-band .rd-head h2{color:#fff;}
.rd-band-lead{color:#dbeaf6;max-width:62ch;margin:12px auto 0;}
.rd-steps{display:grid;gap:18px;margin-top:38px;grid-template-columns:1fr;}
@media(min-width:780px){.rd-steps{grid-template-columns:repeat(4,1fr);}}
.rd-step{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:12px;padding:24px;}
.rd-step-n{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:2.1rem;
  color:#ffb38a;line-height:1;}
.rd-step h3{font-family:'Barlow Condensed',sans-serif;font-size:1.18rem;font-weight:700;
  margin:7px 0 6px;color:#fff;text-transform:uppercase;}
.rd-step p{margin:0;font-size:.92rem;color:#dbeaf6;}
.rd-band-note{margin:28px auto 0;font-size:.87rem;color:#c2dbee;max-width:76ch;
  text-align:center;}

/* Testimonials keep their own dark cards, so the section becomes blue too —
   that removes the second "sudden dark" Vladimir flagged. */
.testimonials-home{background:var(--rd-band)!important;
  border-top:none!important;}

.rd-rv{opacity:0;transform:translateY(22px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1);}
.rd-rv.rd-in{opacity:1;transform:none;}

@media(max-width:768px){
  /* Portrait shows the FULL width of the photo, never a zoomed middle. */
  .rd-hero{min-height:0;padding:34px 12px 44px;}
  .rd-hero-bg{inset:-13% 0;height:126%;}
  .rd-hero-panel{padding:28px 20px 26px;border-radius:12px;}
  .rd-sec{padding:48px 0;}
  .rd-band{padding:54px 0;}
  .rd-cat{min-height:270px;border-radius:12px;}
  .rd-cats{gap:12px;padding:0 14px;}
  .rd-cat-panel{width:calc(100% - 28px);margin-bottom:18px;padding:15px 17px 17px;}
  .rd-strip-in{padding:14px 16px;gap:11px 18px;}
  .rd-strip span{font-size:.9rem;}
  .rd-gear{gap:22px 14px;grid-template-columns:repeat(2,1fr);}
  .rd-card-t{font-size:1.08rem;}
}
@media(prefers-reduced-motion:reduce){
  .rd-rv{opacity:1;transform:none;transition:none;}
  .rd-hero-bg,.rd-cat-img,.rd-band-bg{transform:none!important;}
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT PAGE CONVERSION — applies only to pages that opt in with
   <html data-nav="light">. The interior pages (how-it-works, about,
   contact, faq) all share the same class vocabulary from the original
   navy design, so one block converts them all. COLOURS ONLY: no layout,
   no copy, no structure is touched.
   Adding a new page to the redesign = set data-nav="light", link this
   file and redesign.js. Nothing else.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-nav="light"] body{background:#fff;color:#0a1628;}

/* headings + running text */
html[data-nav="light"] .sec-title{color:#0a1628;}
html[data-nav="light"] .sec-sub{color:#46617a;}
html[data-nav="light"] .ey{color:#bd4512;}
html[data-nav="light"] h1.big{color:#0a1628;}
html[data-nav="light"] h1.big span{color:#bd4512;}
html[data-nav="light"] .hero{background:transparent;border-bottom:none;}
html[data-nav="light"] .hero p{color:#46617a;}
html[data-nav="light"] hr{border-top:1px solid #dde5ed;}

/* cards + panels */
html[data-nav="light"] .icard,
html[data-nav="light"] .form-card,
html[data-nav="light"] .info-card{background:#fff;border:1px solid #dde5ed;
  box-shadow:0 1px 2px rgba(10,22,40,.05);}
html[data-nav="light"] .icard h3,
html[data-nav="light"] .form-card h2,
html[data-nav="light"] .info-card h2{color:#0a1628;}
html[data-nav="light"] .icard p,
html[data-nav="light"] .form-card p.sub{color:#46617a;}
html[data-nav="light"] .mbox{background:#fff7f3;border:1px solid rgba(232,93,32,.28);}
html[data-nav="light"] .mbox p{color:#3d5568;}

/* numbered steps */
html[data-nav="light"] .snum{background:rgba(232,93,32,.1);
  border:2px solid rgba(232,93,32,.45);color:#bd4512;}
html[data-nav="light"] .sbody h3{color:#0a1628;}
html[data-nav="light"] .sbody p{color:#46617a;}
html[data-nav="light"] .sbody strong{color:#bd4512;}

/* stats */
html[data-nav="light"] .sv{color:#bd4512;}
html[data-nav="light"] .sl{color:#46617a;}

/* FAQ accordion */
html[data-nav="light"] .fitem{border:1px solid #dde5ed;}
html[data-nav="light"] .fq{background:#f4f7fa;color:#0a1628;}
html[data-nav="light"] .fq:hover{background:#e9eff5;}
html[data-nav="light"] .fa{background:#fff;}
html[data-nav="light"] .fa p{color:#46617a;}
html[data-nav="light"] .fa a{color:#166ba8;}
html[data-nav="light"] .fic{color:#46617a;}  /* was #7d94a8 = 2.93:1 on the question bar */
html[data-nav="light"] .fcat{color:#0a1628;}

/* contact form fields — inputs must stay >=16px on mobile (iOS zoom rule) */
html[data-nav="light"] .field label{color:#46617a;}
html[data-nav="light"] .field input,
html[data-nav="light"] .field select,
html[data-nav="light"] .field textarea{background:#f4f7fa;border:1px solid #dde5ed;color:#0a1628;}
html[data-nav="light"] .field input::placeholder,
html[data-nav="light"] .field textarea::placeholder{color:#64798c;}
html[data-nav="light"] .field input:focus,
html[data-nav="light"] .field select:focus,
html[data-nav="light"] .field textarea:focus{border-color:#1a7abf;}
html[data-nav="light"] .field select option{background:#fff;color:#0a1628;}
html[data-nav="light"] .info-label{color:#46617a;}
html[data-nav="light"] .info-val{color:#0a1628;}
html[data-nav="light"] .info-val a{color:#166ba8;}
html[data-nav="light"] .warn-box{background:#fff8ec;border:1px solid rgba(245,166,35,.4);color:#5c4408;}
html[data-nav="light"] .warn-box .wt{color:#8a5a00;}

/* testimonials keep their own dark cards, so the section stays brand blue */
html[data-nav="light"] .testimonials-section{background:#15679e;}
html[data-nav="light"] .testimonials-title{color:#fff;}
html[data-nav="light"] .testimonials-eyebrow{color:#ffd0b5;}

/* inline colour:#fff written into the original copy would vanish on white */
html[data-nav="light"] strong[style*="#fff"]{color:#0a1628!important;}
html[data-nav="light"] strong[style*="e85d20"]{color:#bd4512!important;}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED CHROME, LIGHT — nav drawer, newsletter and footer.
   Vladimir, 2026-08-05: "we have a gradient later on, as we scroll down
   the page is getting darker and darker. We need to unify footer with new
   light design." The page stepped white -> blue -> blue -> navy newsletter
   -> near-black footer. These three are injected by nav-links.js,
   newsletter.js and footer.js, so they are overridden here rather than in
   those files — and gated on html[data-nav="light"] so the pages that have
   not been redesigned keep exactly what they have today.
   Specificity (0,2,0) beats the injected <style> blocks regardless of the
   order they land in the head.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── hamburger: pointless on desktop ──────────────────────────────────────
   Every page link AND all 10 categories are already on screen above 940px,
   so the button opened a drawer duplicating what you could already see.
   Kept on mobile, where it is the only way to reach them. */
@media(min-width:940px){
  html[data-nav="light"] .asn-ham{display:none!important;}
}

/* ── the drawer itself ─────────────────────────────────────────────────── */
html[data-nav="light"] .asn-drawer{background:#fff;border-right:1px solid #dde5ed;
  box-shadow:0 0 60px rgba(10,22,40,.18);}
html[data-nav="light"] .asn-dlogo{color:#0a1628;}
html[data-nav="light"] .asn-ds{color:#5b7085;}   /* #7d94a8 was 3.15:1 on white */
html[data-nav="light"] .asn-dl{color:#46617a;}
html[data-nav="light"] .asn-dl:hover{background:#f1f5f9;color:#0a1628;}
html[data-nav="light"] .asn-dl.act{color:#bd4512;background:rgba(232,93,32,.08);}
html[data-nav="light"] .asn-dl.act:hover{background:rgba(232,93,32,.14);}

/* ── newsletter ────────────────────────────────────────────────────────── */
html[data-nav="light"] .nl-section{background:#f4f7fa;
  border-top:1px solid #dde5ed;border-bottom:1px solid #dde5ed;}
html[data-nav="light"] .nl-eyebrow{color:#bd4512;}
html[data-nav="light"] .nl-title{color:#0a1628;}
html[data-nav="light"] .nl-sub{color:#46617a;}
html[data-nav="light"] .nl-input{background:#fff;border:1px solid #dde5ed;color:#0a1628;}
html[data-nav="light"] .nl-input::placeholder{color:#64798c;}
html[data-nav="light"] .nl-input:focus{border-color:#1a7abf;}
html[data-nav="light"] .nl-note{color:#4d6377;}      /* #64798c was 4.2:1 at 11px */

/* ── footer: brand blue, matching the testimonials band ───────────────────
   Vladimir, 2026-08-05: make the footer background like the testimonials
   screenshot, with the categories in white bold. Better call than my light
   footer — it bookends the page in the same blue instead of introducing a
   third tone, and white on #15679e measures 6.06:1. */
html[data-nav="light"] .as-footer{background:#15679e;border-top:none;}
html[data-nav="light"] .as-footer-brand-name{color:#fff;}
html[data-nav="light"] .as-footer-tagline{color:#dbeaf6;}
html[data-nav="light"] .as-footer-col h4{color:#ffe1cd;}  /* #ffd0b5 was 4.31:1 at 11px bold */
/* the category links he asked for: white, bold */
html[data-nav="light"] .as-footer-col a{color:#fff;font-weight:700;}
html[data-nav="light"] .as-footer-col a:hover{color:#ffd0b5;}
html[data-nav="light"] .as-footer-bottom{border-top:1px solid rgba(255,255,255,.22);}
html[data-nav="light"] .as-footer-copy{color:#dbeaf6;}
html[data-nav="light"] .as-footer-legal-note{color:#d9e9f6;}  /* #bcd6ea was 4.02:1 at 10px */
html[data-nav="light"] .as-footer-badge{background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);color:#fff;}
html[data-nav="light"] .as-footer-badge.badge-escrow{background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.45);color:#fff;}

/* ═══════════════════════════════════════════════════════════════════════
   LISTINGS + BLOG — the last two pages, 2026-08-05.
   Vladimir: "Listings page is not changed yet to new design. Blog is not
   affected by change as well."

   listings.html drives its whole palette from :root custom properties, so
   it converts by REDEFINING the variables rather than rewriting rules —
   far less risk of breaking the filter panel or the card grid.

   ⚠ --navy3 is the .card-photo backdrop. CLAUDE.md §16: the thumbnail
   solution is object-fit:contain + a backdrop that hides the letterbox
   bars, and it took ~10 attempts to get right. It stays contain; the
   backdrop simply becomes a light well, exactly as the homepage cards do.
   object-fit and resize=contain are NOT touched.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-nav="light"]{
  --navy:#ffffff;        /* page background */
  --navy2:#ffffff;       /* cards + filter panel */
  --navy3:#eef2f7;       /* photo well + hover fill */
  --white:#0a1628;       /* used only ever as a TEXT colour on this page */
  --gray:#46617a;
  --gray2:#7d94a8;
}
/* borders were bluish translucent, near-invisible on white */
html[data-nav="light"] .filter-toggle-bar,
html[data-nav="light"] .filter-panel,
html[data-nav="light"] .listing-card,
html[data-nav="light"] .filter-select,
html[data-nav="light"] .filter-input{border-color:#dde5ed!important;}
html[data-nav="light"] .listing-card{box-shadow:0 1px 2px rgba(10,22,40,.05);}
html[data-nav="light"] .listing-card:hover{border-color:#c8d4e0!important;
  box-shadow:0 18px 44px rgba(10,22,40,.12);}
html[data-nav="light"] .card-price{color:#bd4512;}
html[data-nav="light"] .filter-toggle-bar:hover{border-color:#c8d4e0!important;}

/* ── blog: hardcoded colours, so overridden individually ─────────────── */
html[data-nav="light"] .blog-hero{background:transparent;}
html[data-nav="light"] .blog-hero h1{color:#0a1628;}
html[data-nav="light"] .blog-hero h1 span{color:#bd4512;}
html[data-nav="light"] .blog-hero p{color:#46617a;}
html[data-nav="light"] .blog-hero-eye{color:#bd4512;}
html[data-nav="light"] .cat-btn{background:#f4f7fa;border:1px solid #dde5ed;color:#46617a;}
/* white on #e85d20 is 3.49:1 and these are 12px — too small for the
   large-text allowance, same fix as the nav Sign-up button. */
html[data-nav="light"] .cat-btn:hover,
html[data-nav="light"] .cat-btn.active{background:#c74a15;border-color:#c74a15;color:#fff;}
html[data-nav="light"] .post-card{background:#fff;border:1px solid #dde5ed;
  box-shadow:0 1px 2px rgba(10,22,40,.05);}
html[data-nav="light"] .post-card:hover{border-color:#c8d4e0;
  box-shadow:0 18px 44px rgba(10,22,40,.12);}
html[data-nav="light"] .post-card-img{background:#eef2f7;}
html[data-nav="light"] .post-card-title{color:#0a1628;}
html[data-nav="light"] .post-card-excerpt{color:#46617a;}
html[data-nav="light"] .post-card-date{color:#5b7085;}
html[data-nav="light"] .post-card-read{color:#166ba8;}
html[data-nav="light"] .post-card-footer{border-top:1px solid #dde5ed;}
html[data-nav="light"] .blog-state{color:#46617a;}
html[data-nav="light"] .filter-label{color:#46617a;}  /* --gray2 gave 3.49:1 at 10px */

/* ═══════════════════════════════════════════════════════════════════════
   ROUND 3 — Vladimir's live review, 2026-08-05 evening.
   "Fonts are silver and not visible, make them black." + "add background,
   scenic paragliding shots, too white" (blog, FAQ). + listings hero residue.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── FAINT SCENIC BACKDROP ────────────────────────────────────────────────
   The light pages read as flat white between the coloured bands. A fixed,
   heavily-veiled alpine photo sits behind everything so the gaps carry a hint
   of scenery. The veil is 90-93% white, so text contrast barely moves — every
   colour on these pages was re-measured after adding it and still passes AA.
   background-attachment:fixed gives the poor-man's-parallax Vladimir asked for
   ("in parallax mode"); on the coloured/opaque bands and cards it is simply
   covered, so it only shows in the white breathing space. */
html[data-nav="light"]{
  background-image:linear-gradient(rgba(246,248,250,.82),rgba(246,248,250,.88)),
    url("img/hero-alpine-1100.webp");
  background-size:cover;background-position:center;background-attachment:fixed;
}
html[data-nav="light"] body{background:transparent;}
/* listings redefines --navy to #fff for its body; make it transparent too so
   the backdrop shows, without disturbing the card/panel fills that use --navy2 */
html[data-nav="light"] body{background:transparent!important;}

/* ── "MAKE THEM BLACK" — body copy was muted slate, reads as silver ───────
   Bumped the reading text to a near-black slate. Still not pure #000 (harsh on
   white) but unmistakably dark. Measured 12-14:1. */
html[data-nav="light"] .fa p,
html[data-nav="light"] .mbox p,
html[data-nav="light"] .sbody p,
html[data-nav="light"] .icard p,
html[data-nav="light"] .sec-sub,
html[data-nav="light"] .post-card-excerpt,
html[data-nav="light"] .info-val{color:#1c2b38;}
/* the old white <strong> emphasis inside the copy was invisible on white */
html[data-nav="light"] .fa strong[style],
html[data-nav="light"] .mbox strong[style],
html[data-nav="light"] .sbody strong[style]{color:#bd4512!important;}

/* ── listings hero + about callout, both moved off inline dark to a class ── */
.rd-callout{background:#15679e;border:none;border-radius:12px;
  padding:24px 26px;margin-bottom:28px;color:#fff;}
.rd-callout *{color:#fff!important;}
.rd-callout strong{color:#ffe1cd!important;}

/* ── page-head band (listings) — footer blue, per Vladimir ──────────────── */
.rd-pagehead{background:#15679e;color:#fff;text-align:center;padding:46px 40px 40px;}
.rd-pagehead-eye{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#ffe1cd;margin-bottom:10px;}
.rd-pagehead h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(2rem,4.6vw,2.9rem);color:#fff;margin:0 0 8px;}
.rd-pagehead h1 span{color:#ffd0b5;}
.rd-pagehead p{font-size:.95rem;color:#dbeaf6;margin:0;}
@media(max-width:768px){.rd-pagehead{padding:30px 18px 26px;}}

/* ── CONTACT HERO TEST: whole photo edge-to-edge on mobile ────────────────
   Vladimir, 2026-08-07: hero photos are cropped to a zoomed slice on portrait;
   he wants the WHOLE photo visible edge to edge, both orientations. Test on
   Contact only (rd-hero--whole). On small/short screens the photo shows at its
   natural aspect, full width, uncropped; the text drops into a solid blue band
   right below it instead of covering it. Desktop keeps the immersive overlay.
   The single query catches portrait phones (max-width) AND landscape phones
   (max-height), so both orientations get the whole photo. */
@media (max-width:768px), (max-height:600px){
  .rd-hero--whole{min-height:0!important;display:block!important;padding:0!important;
    align-items:stretch;justify-content:flex-start;}
  .rd-hero--whole .rd-hero-bg{position:static!important;inset:auto!important;
    width:100%!important;height:auto!important;
    object-fit:contain!important;transform-origin:center center;}
  .rd-hero--whole::after{display:none!important;}   /* no darkening over the photo */
  .rd-hero--whole .rd-hero-panel{position:static!important;z-index:auto;
    background:#15679e!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border:none!important;border-radius:0!important;max-width:none!important;width:100%!important;
    margin:0!important;padding:24px 20px!important;}
  .rd-hero--whole .rd-hero-panel h1,
  .rd-hero--whole .rd-hero-panel p,
  .rd-hero--whole .rd-hero-panel .rd-kick{text-shadow:none!important;}
}

/* ── CONTINUOUS "Ken Burns" drift for the whole-photo hero ────────────────
   Vladimir, 2026-08-07: the scroll-linked zoom is technically working but far
   too subtle on a short mobile hero — you only see it during the brief scroll
   past. This is an always-on gentle zoom so the hero is visibly alive without
   any scrolling. Whole photo at the animation's low point; drifts to +10%.
   Mobile whole-photo only; desktop keeps the slide parallax. Disabled under
   prefers-reduced-motion for accessibility. */
@keyframes rd-kenburns{
  from{transform:scale(1);}
  to{transform:scale(1.10);}
}
@media (max-width:768px), (max-height:600px){
  .rd-hero--whole .rd-hero-bg{
    animation:rd-kenburns 16s ease-in-out infinite alternate;
    transform-origin:center center;
  }
}
@media (prefers-reduced-motion:reduce){
  .rd-hero--whole .rd-hero-bg{animation:none!important;}
}

/* ── APP PAGES: plain light background, NOT the scenic backdrop ────────────
   sell / my-account / messages opt into the light nav with data-nav="light"
   but are functional app pages — a scenic mountain behind a form or a chat is
   noise. data-app="1" keeps them on clean paper. */
html[data-nav="light"][data-app="1"]{background:#f6f8fa!important;background-image:none!important;}
html[data-nav="light"][data-app="1"] body{background:#f6f8fa!important;}

/* ═══════════════════════════════════════════════════════════════════════
   LISTING DETAIL PAGE (listing.html) — 2026-08-08.
   The last dark public page, and the one Google actually lands people on:
   a visitor clicked a light card on listings.html and dropped into a navy
   page. Same method as listings.html — the page drives its palette from
   :root custom properties, so the variables above already flip the body,
   cards, panels and text. Only the HARDCODED colours need naming here.

   Everything below is colour-only. No layout, no spacing, no font sizes —
   the carousel, the specs grid and the edit modal keep their geometry.

   ⚠ The carousel keeps object-fit:contain (CLAUDE.md §16, ~10 failed
   attempts before that landed). Only the well BEHIND the photo changes,
   from black to the same #eef2f7 the browse cards use, so a portrait glider
   shot letterboxes into light grey instead of a black slab.
   ═══════════════════════════════════════════════════════════════════════ */

/* photo well — was #000 */
html[data-nav="light"] .lp-carousel,
html[data-nav="light"] .carousel-main{background:#eef2f7;}
html[data-nav="light"] .lp-carousel{border:1px solid #dde5ed;}
/* the round prev/next buttons sit ON the photo, so they stay dark-on-image */

/* category chip — was a near-black pill, jarring on paper */
html[data-nav="light"] .lp-category-badge{background:#eef2f7;color:#166ba8;
  border-color:#c8d4e0;}

/* price: #e85d20 is 3.4:1 on white. Large-bold passes, but the browse cards
   already use the darker ink, and the two pages sit one click apart. */
html[data-nav="light"] .lp-price{color:#bd4512;}

/* Primary CTA. White on #e85d20 is 3.49:1, and this button's label is 17.6px
   — just under the 18.66px-bold large-text allowance, so it needs the full
   4.5:1. Same darker orange the nav Sign-up button already uses (4.7:1),
   with plain #e85d20 as the hover, exactly as the nav does it. */
html[data-nav="light"] .lp-contact-btn{background:#c74a15;}
html[data-nav="light"] .lp-contact-btn:hover{background:#e85d20;}

/* breadcrumb separators were --gray2, 2.96:1 */
html[data-nav="light"] .breadcrumb .sep{color:#5b7085;}

/* small uppercase orange labels — 3.3:1 at 10-11px, under the 4.5:1 floor */
html[data-nav="light"] .lp-seller-label,
html[data-nav="light"] .lp-owner-label,
html[data-nav="light"] .lp-section-title,
html[data-nav="light"] .lp-trust-foot a{color:#bd4512;}

/* panels: rgba blue borders vanish on white, same fix as the listing cards */
html[data-nav="light"] .lp-section,
html[data-nav="light"] .lp-seller-box,
html[data-nav="light"] .back-btn{border-color:#dde5ed;}
html[data-nav="light"] .lp-section{box-shadow:0 1px 2px rgba(10,22,40,.05);}
html[data-nav="light"] .lp-spec-row{border-bottom-color:#e6ecf2;}
html[data-nav="light"] .back-btn:hover{border-color:#c8d4e0;}

/* body copy was #c8d8e8 / #c7d6e3 — pale slate, literally unreadable on white */
html[data-nav="light"] .lp-description,
html[data-nav="light"] .lp-trust-list li{color:#1c2b38;}

/* trust panel: #22c55e is 2.3:1 on white */
html[data-nav="light"] .lp-trust{border-color:rgba(21,128,61,.35);}
html[data-nav="light"] .lp-trust-head,
html[data-nav="light"] .lp-trust-list li::before{color:#15803d;}
html[data-nav="light"] .lp-trust-foot{border-top-color:#e6ecf2;}

/* role pills + owner action buttons — all were tuned for a navy backdrop */
html[data-nav="light"] .role-superadmin{color:#bd4512;}
html[data-nav="light"] .role-admin{color:#15803d;}
html[data-nav="light"] .role-moderator{color:#166ba8;}
html[data-nav="light"] .sa-edit{color:#166ba8;}
html[data-nav="light"] .sa-pause{color:#a15c07;}
html[data-nav="light"] .sa-unpause{color:#15803d;}
html[data-nav="light"] .sa-delete{color:#c02626;}

/* ── VERIFIED SELLER badge — EARNED, not given ───────────────────────────
   Shown only to a seller with at least one shipped or completed sale through
   escrow. A new seller shows nothing at all: no "New seller", no unverified
   label. Green because it means a transaction actually completed. */
html[data-nav="light"] .seller-verified{display:inline-block;font-size:.72rem;
  font-weight:700;letter-spacing:.03em;padding:3px 10px;border-radius:20px;
  background:#ecfdf3;border:1px solid #a6e6c1;color:#15803d;cursor:help;}
/* Verified ID is the SEPARATE state — documents reviewed and approved. Blue,
   not green: green is reserved for a completed transaction, so the two are
   never mistaken for each other at a glance. They stack. */
html[data-nav="light"] .seller-idok{display:inline-block;font-size:.72rem;
  font-weight:700;letter-spacing:.03em;padding:3px 10px;border-radius:20px;
  background:#eef4fa;border:1px solid #c6dcef;color:#166ba8;cursor:help;}

/* ── OPERATOR REFERENCE (listing.html seller box) ────────────────────────
   Replaces the "New seller" chip on Vladimir's own listings. Deliberately
   understated: a plain panel, not a gold badge, because the persuasive part
   is the checkable number and the link, not decoration. */
html[data-nav="light"] .lp-operator-ref{margin-top:10px;padding-top:10px;
  border-top:1px solid #e6ecf2;}
html[data-nav="light"] .lp-operator-role{font-size:.68rem;text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;color:#bd4512;margin-bottom:4px;}
html[data-nav="light"] .lp-operator-line{font-size:.92rem;color:#1c2b38;line-height:1.5;}
html[data-nav="light"] .lp-operator-line strong{color:#0a1628;font-weight:700;}
html[data-nav="light"] .lp-operator-src{font-size:.74rem;color:#5b7085;
  line-height:1.45;margin-top:4px;}
html[data-nav="light"] .lp-operator-src a{color:#166ba8;}

/* rating stars — #f5a623 is 2.1:1 on paper */
html[data-nav="light"] .star-icon.filled,
html[data-nav="light"] .star-rate.filled{color:#d97706;}

/* wanted banner — #b06eea is 2.6:1 */
html[data-nav="light"] .wanted-banner{color:#6d28d9;
  background:rgba(109,40,217,.07);border-color:rgba(109,40,217,.28);}

/* edit modal (owner/admin only) */
html[data-nav="light"] .edit-modal{border-color:#c8d4e0;
  box-shadow:0 18px 44px rgba(10,22,40,.2);}
html[data-nav="light"] .edit-field input,
html[data-nav="light"] .edit-field select,
html[data-nav="light"] .edit-field textarea{border-color:#c8d4e0;}
html[data-nav="light"] .edit-cancel-btn{border-color:#c8d4e0;}
/* iOS Safari force-zooms whenever a focused input is under 16px and never
   zooms back out. These were .88rem = 14px. CLAUDE.md §15 rule; desktop
   sizing is untouched. */
@media(max-width:768px){
  html[data-nav="light"] .edit-field input,
  html[data-nav="light"] .edit-field select,
  html[data-nav="light"] .edit-field textarea{font-size:16px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   LEGAL PAGES — terms / privacy / shipping / refund. 2026-08-08.
   Vladimir: "Apply new theme to legal pages, all of them."

   ⚠ These four do NOT use custom properties — every colour is hardcoded,
   so the variable-redefinition trick that converted listings.html and
   listing.html does nothing here. They do share one class vocabulary
   (.hero, .toc, .doc h2/h3/p/strong/table/.highlight/.warning/.info-box),
   so ONE block converts all four. Their individual stylesheets differ
   slightly; nothing below depends on those differences.

   Colour-only. No layout, no spacing, no font sizes — the sticky table of
   contents, the two-column grid and the mobile table scroll are untouched.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-nav="light"] body{background:transparent;color:#1c2b38;}

/* hero band — was #0f2040. Brand blue, same as the /listings page head. */
html[data-nav="light"] .hero{background:#15679e;border-bottom:none;}
html[data-nav="light"] .hero h1{color:#fff;}
html[data-nav="light"] .hero-meta{color:#dbeaf6;}
html[data-nav="light"] .hero-meta span{color:#ffe1cd;}
html[data-nav="light"] .hero-meta a{color:#fff;}

/* body copy was #c8d8e8 — invisible on white */
html[data-nav="light"] .doc p,
html[data-nav="light"] .doc li,
html[data-nav="light"] .doc ul,
html[data-nav="light"] .doc ol{color:#1c2b38;}
html[data-nav="light"] .doc h2{color:#0a1628;border-top-color:#dde5ed;}
html[data-nav="light"] .doc h3{color:#bd4512;}
html[data-nav="light"] .doc strong{color:#0a1628;}

/* links: #e85d20 is 3.4:1 on white and this is 14px body text */
html[data-nav="light"] a{color:#bd4512;}
html[data-nav="light"] .toc a{color:#46617a;}
html[data-nav="light"] .toc a:hover{color:#0a1628;border-color:#e85d20;}
html[data-nav="light"] .toc h3{color:#5b7085;}

/* callout boxes — tints were mixed for a navy backdrop */
html[data-nav="light"] .highlight,
html[data-nav="light"] .doc .highlight{background:#fff6f1;border-color:#f0c3aa;}
html[data-nav="light"] .highlight strong,
html[data-nav="light"] .doc .highlight strong{color:#bd4512;}
html[data-nav="light"] .info-box{background:#eef4fa;border-color:#c6dcef;}
html[data-nav="light"] .warning{background:#fdf0ef;border-color:#f2c0bc;}

/* tables */
html[data-nav="light"] .doc table th{background:#eef2f7;color:#0a1628;border-color:#dde5ed;}
html[data-nav="light"] .doc table td{color:#1c2b38;border-color:#e6ecf2;}
html[data-nav="light"] .doc table tr:nth-child(even) td{background:#f7fafc;}

/* the page's own inline footer — footer.js replaces it on load, but it is
   visible for a moment before that and must not flash navy on white */
html[data-nav="light"] footer{background:transparent;border-top-color:#dde5ed;}
html[data-nav="light"] .footer-copy{color:#5b7085;}

/* ═══════════════════════════════════════════════════════════════════════
   BLOG POST (blog-post.html) — 2026-08-08.
   blog.html was already light; the post pages a reader clicks THROUGH to
   were not, so the blog index dropped them into a navy article. Hardcoded
   colours like the legal pages, so the same approach: one override block.
   Colour-only — the 820px reading measure and comment form keep their shape.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-nav="light"] .breadcrumb{color:#5b7085;}
html[data-nav="light"] .breadcrumb a{color:#166ba8;}
html[data-nav="light"] .breadcrumb a:hover{color:#bd4512;}

html[data-nav="light"] .post-title{color:#0a1628;}
html[data-nav="light"] .post-date,
html[data-nav="light"] .post-author{color:#5b7085;}
html[data-nav="light"] .post-cat{background:#fff1e9;border-color:#f0c3aa;color:#bd4512;}

/* article body was #c8d8e8 — the whole point of the page, invisible on white */
html[data-nav="light"] .post-content{color:#1c2b38;}
html[data-nav="light"] .post-content h2{color:#0a1628;border-bottom-color:#dde5ed;}
html[data-nav="light"] .post-content h3{color:#bd4512;}
html[data-nav="light"] .post-content strong{color:#0a1628;}
html[data-nav="light"] .post-content a{color:#166ba8;}
/* Post bodies are markdown stored in the DATABASE, and the existing posts
   write inline style="color:#e85d20" onto their links — 3.49:1 on white at
   16px. An inline attribute cannot be reached from a stylesheet without
   !important, and editing the rows would only fix the posts written so far.
   Same treatment redesign.css already gives .fa strong[style]. */
html[data-nav="light"] .post-content a[style]{color:#166ba8!important;}

/* ═══════════════════════════════════════════════════════════════════════
   404 PAGE — 2026-08-08. The last dark page a visitor can land on, and
   people arrive here from stale Google results and old WordPress links,
   so it is a first impression more often than it looks.
   invoice-preview.html needed nothing: it was always light (#f0f2f5).
   ═══════════════════════════════════════════════════════════════════════ */
html[data-nav="light"] .title{color:#0a1628;}
html[data-nav="light"] .title span{color:#bd4512;}
html[data-nav="light"] .desc{color:#46617a;}
/* the big outlined "404" — stroke was tuned for navy, invisible on paper */
html[data-nav="light"] .four-o-four{-webkit-text-stroke-color:rgba(232,93,32,.55);}
/* colour must be restated: the legal-page rule `html[data-nav="light"] a`
   is (0,1,1) and outranks `.btn-primary`'s own (0,1,0) white, which turned
   the main CTA into orange-on-orange at 1.1:1. Caught by measuring. */
html[data-nav="light"] .btn-primary{background:#c74a15;color:#fff;}
html[data-nav="light"] .btn-primary:hover{background:#e85d20;color:#fff;}
html[data-nav="light"] .btn-secondary{color:#0a1628;border-color:#c8d4e0;}
html[data-nav="light"] .btn-secondary:hover{border-color:#0a1628;background:rgba(10,22,40,.05);}
html[data-nav="light"] .quick-links-label{color:#5b7085;}
html[data-nav="light"] .quick-link{background:#f4f7fa;border-color:#dde5ed;color:#46617a;}
html[data-nav="light"] .quick-link:hover{background:#eef2f7;color:#0a1628;border-color:#c8d4e0;}
html[data-nav="light"] .quick-link.hot{background:#fff1e9;border-color:#f0c3aa;color:#bd4512;}
html[data-nav="light"] .quick-link.hot:hover{background:#ffe3d3;}
html[data-nav="light"] .post-content blockquote{background:#fff6f1;color:#46617a;
  border-left-color:#e85d20;}

html[data-nav="light"] .back-link{color:#46617a;border-color:#dde5ed;}
html[data-nav="light"] .back-link:hover{color:#0a1628;border-color:#c8d4e0;}

/* comments */
html[data-nav="light"] .comments-title{color:#0a1628;}
html[data-nav="light"] .comment-form{background:#fff;border-color:#dde5ed;
  box-shadow:0 1px 2px rgba(10,22,40,.05);}
html[data-nav="light"] .comment-form h3{color:#bd4512;}
html[data-nav="light"] .form-field label{color:#46617a;}
html[data-nav="light"] .form-field input,
html[data-nav="light"] .form-field textarea{background:#fff;border-color:#c8d4e0;color:#0a1628;}
html[data-nav="light"] .form-field input:focus,
html[data-nav="light"] .form-field textarea:focus{border-color:#1a7abf;}
html[data-nav="light"] .form-note{color:#5b7085;}
html[data-nav="light"] .form-success{background:#ecfdf3;border-color:#a6e6c1;color:#15803d;}
html[data-nav="light"] .submit-btn{background:#c74a15;}
html[data-nav="light"] .submit-btn:hover{background:#e85d20;}
html[data-nav="light"] .comment-card{background:#fff;border-color:#dde5ed;
  box-shadow:0 1px 2px rgba(10,22,40,.05);}
html[data-nav="light"] .comment-author{color:#0a1628;}
html[data-nav="light"] .comment-date{color:#5b7085;}
html[data-nav="light"] .comment-body{color:#1c2b38;}
html[data-nav="light"] .no-comments,
html[data-nav="light"] .post-state{color:#46617a;}
/* iOS force-zooms a focused input under 16px — CLAUDE.md §15 rule.
   These are 13px, and the comment form is the one input on this page. */
@media(max-width:768px){
  html[data-nav="light"] .form-field input,
  html[data-nav="light"] .form-field textarea{font-size:16px;}
}