/* ==========================================================================
LuxScout — luxury design system
A flagship editorial language: luminous porcelain, warm obsidian, ink, and a
restrained champagne gold. High-contrast Cormorant display over Inter for a
couture-meets-technology voice. Built to feel at home beside the world's
finest houses. (The admin console keeps its own admin.css.)
========================================================================== */
:root {
/* Surfaces */
--porcelain: #FBFAF7; /* primary page — luminous warm white */
--ivory: #F4F1E9; /* alternating tint */
--paper: #FFFFFF; /* elevated cards */
--obsidian: #14110B; /* dark statement sections */
--obsidian-2: #1E1A12; /* dark elevated surface */
/* Ink */
--ink: #1A1611; /* primary text */
--ink-2: #574F44; /* secondary */
--ink-3: #8E8678; /* tertiary / captions */
--on-dark: #F2EEE4; /* text on obsidian */
--on-dark-2: #B6AE9D; /* secondary on obsidian */
/* Metal */
--gold: #8C7339; /* accent text on light (accessible) */
--champagne: #C6AC74; /* decorative gold — rules, hairlines */
--gold-dark: #D6BE86; /* gold on obsidian */
--gold-wash: rgba(140, 115, 57, 0.07);
/* Lines */
--line: #E8E2D5;
--line-strong: #D8D0BF;
--line-dark: rgba(214, 190, 134, 0.18);
/* Authentication accent — a controlled, premium red used ONLY for the
sign-in-to-unlock callout (icon, border, primary button). Never a page wash. */
--accent-red: #A23B3B;
--accent-red-dark: #7E2E2E;
--accent-red-wash: rgba(162, 59, 59, 0.07);
--shadow-sm: 0 1px 2px rgba(26, 22, 17, 0.04);
--shadow: 0 2px 8px rgba(26, 22, 17, 0.05), 0 24px 60px -28px rgba(26, 22, 17, 0.18);
--maxw: 1400px;
--gutter: clamp(20px, 5vw, 64px);
--ease: cubic-bezier(0.22, 0.61, 0.18, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
background: var(--porcelain);
color: var(--ink);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-size: 17px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4, .display {
font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.08;
color: var(--ink);
}
.display-xl { font-size: clamp(44px, 7.5vw, 104px); font-weight: 400; line-height: 1.02; letter-spacing: -0.01em; }
.display-l { font-size: clamp(34px, 5.2vw, 64px); font-weight: 400; }
h2 { font-size: clamp(30px, 4.4vw, 52px); }
h3 { font-size: clamp(21px, 2.2vw, 27px); }
.lede { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.6; color: var(--ink-2); font-weight: 400; }
a { color: var(--gold); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--ink); }
.overline {
font-family: 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: 0.34em; font-size: 11.5px;
font-weight: 600; color: var(--gold);
}
.serif-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; }
.muted { color: var(--ink-2); }
.small { font-size: 13.5px; color: var(--ink-3); line-height: 1.6; }
.center { text-align: center; }
.center .lede, .center .overline, .center .section-kicker { margin-left: auto; margin-right: auto; }
/* ---- Layout primitives -------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
section { padding: clamp(72px, 11vw, 144px) 0; position: relative; }
.section-kicker { max-width: 640px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-kicker .overline { display: block; margin-bottom: 22px; }
.section-kicker h2 { margin-bottom: 20px; }
.hairline { width: 100%; height: 1px; background: var(--line); border: 0; }
.rule { width: 64px; height: 1px; background: var(--champagne); border: 0; margin-bottom: 28px; }
.center .rule { margin-left: auto; margin-right: auto; }
/* Tints & dark sections */
.tint { background: var(--ivory); }
.paper { background: var(--paper); }
.dark {
background:
radial-gradient(120% 120% at 50% 0%, rgba(198, 172, 116, 0.10), transparent 55%),
var(--obsidian);
color: var(--on-dark);
}
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--on-dark); }
.dark .lede, .dark .muted { color: var(--on-dark-2); }
.dark .overline { color: var(--gold-dark); }
.dark a { color: var(--gold-dark); }
.dark a:hover { color: var(--on-dark); }
.dark .rule { background: var(--gold-dark); opacity: .6; }
/* ---- Header ------------------------------------------------------------- */
header.site {
position: sticky; top: 0; z-index: 50;
background: rgba(251, 250, 247, 0.78);
backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid var(--line);
transition: background .3s var(--ease);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand {
font-family: 'Cormorant Garamond', serif; font-size: 27px; font-weight: 600;
color: var(--ink); letter-spacing: 0.01em; line-height: 1;
}
.brand .dot { color: var(--gold); }
.brand:hover { color: var(--ink); }
header.site nav { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 30px); }
header.site nav a {
font-family: 'Inter', sans-serif; color: var(--ink-2);
font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
}
header.site nav a:hover { color: var(--ink); }
header.site nav a.nav-cta {
border: 1px solid var(--ink); color: var(--ink); padding: 11px 22px; border-radius: 2px;
transition: background .3s var(--ease), color .3s var(--ease);
}
header.site nav a.nav-cta:hover { background: var(--ink); color: var(--porcelain); }
/* Back control — injected top-left on secondary pages by app.js. Grouped with
the brand so the wordmark stays left and the nav stays right. */
.bar-left { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 18px); }
.backlink {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-2);
padding: 9px 13px; border: 1px solid var(--line); border-radius: 2px;
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.backlink:hover { color: var(--ink); border-color: var(--ink); }
.backlink svg { display: block; }
@media (max-width: 600px) { .backlink span { display: none; } .backlink { padding: 9px; } }
/* Account actions cluster — separated from informational links */
.nav-actions {
display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px);
padding-left: clamp(14px, 1.8vw, 26px); margin-left: 4px;
border-left: 1px solid var(--line);
}
/* Secondary CTA — quieter than the account actions */
header.site nav a.nav-secondary {
color: var(--ink-3); font-size: 11px; letter-spacing: 0.14em;
}
header.site nav a.nav-secondary:hover { color: var(--ink); }
/* Login — clear account affordance with user icon */
header.site nav a.nav-login {
display: inline-flex; align-items: center; gap: 7px; color: var(--ink);
background: transparent; border: 0; cursor: pointer;
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.16em;
}
header.site nav a.nav-login:hover { color: var(--gold); }
.nav-login .ic-user { opacity: .8; }
/* Join Free — primary gold account action */
header.site nav a.btn-nav-gold {
color: var(--obsidian);
background: linear-gradient(135deg, #E0CB95 0%, #C6AC74 52%, #B2974F 100%);
border: 1px solid rgba(140, 115, 57, 0.35); border-radius: 2px;
padding: 11px 20px; font-weight: 600; letter-spacing: 0.16em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(140, 115, 57, 0.18);
transition: filter .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
header.site nav a.btn-nav-gold:hover {
color: var(--obsidian); filter: brightness(1.04); transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px rgba(140, 115, 57, 0.28);
}
/* Auth-state toggling — overrides the explicit display on .nav-login/.btn-nav-gold */
header.site nav [hidden] { display: none !important; }
/* Mobile menu toggle (hamburger) — hidden on desktop */
.nav-toggle {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 42px; height: 42px; padding: 0; margin-right: -8px;
background: transparent; border: 0; cursor: pointer;
}
.nav-toggle span {
display: block; width: 22px; height: 1.5px; margin: 0 auto;
background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease);
}
header.site.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
header.site.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
header.site.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ---- Buttons ------------------------------------------------------------ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.18em;
padding: 17px 34px; border-radius: 2px; border: 1px solid transparent; cursor: pointer;
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--ink); color: var(--porcelain); }
.btn-primary:hover { background: #000; color: var(--porcelain); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-gold {
color: var(--obsidian);
background: linear-gradient(135deg, #E0CB95 0%, #C6AC74 52%, #B2974F 100%);
border-color: rgba(140, 115, 57, 0.35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(140, 115, 57, 0.18);
}
.btn-gold:hover { color: var(--obsidian); filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 22px rgba(140, 115, 57, 0.3); }
.dark .btn-gold { color: var(--obsidian); }
.dark .btn-primary { background: var(--gold-dark); color: var(--obsidian); }
.dark .btn-primary:hover { background: #e6cf9a; color: var(--obsidian); }
.dark .btn-ghost { border-color: var(--line-dark); color: var(--on-dark); }
.dark .btn-ghost:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }
.center .cta-row { justify-content: center; }
/* Text link with arrow */
.link-arrow {
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink);
display: inline-flex; align-items: center; gap: 9px;
}
.link-arrow::after { content: "→"; transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--gold); }
.link-arrow:hover::after { transform: translateX(5px); }
.dark .link-arrow { color: var(--on-dark); }
.dark .link-arrow:hover { color: var(--gold-dark); }
/* ---- Hero --------------------------------------------------------------- */
.hero {
padding: clamp(96px, 16vh, 188px) 0 clamp(80px, 12vh, 140px);
text-align: center; border-bottom: 1px solid var(--line);
background:
radial-gradient(1100px 520px at 50% -10%, rgba(198, 172, 116, 0.16), transparent 68%),
linear-gradient(180deg, var(--porcelain) 0%, var(--ivory) 100%);
}
.hero .overline { display: block; margin-bottom: 30px; }
.hero h1 { max-width: 17ch; margin: 0 auto; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero .lede { max-width: 600px; margin: 30px auto 0; }
.hero .assurance {
display: inline-flex; align-items: center; gap: 11px; margin-top: 48px;
padding: 12px 22px; border: 1px solid var(--line-strong); border-radius: 2px;
background: rgba(255, 255, 255, 0.5); color: var(--ink-2);
font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
}
.hero .assurance .seal { color: var(--gold); font-size: 13px; letter-spacing: 0; }
/* Split hero — copy on the left, live opportunity preview on the right */
.hero-split { text-align: left; padding-top: clamp(70px, 11vh, 132px); padding-bottom: clamp(70px, 11vh, 124px); }
.hero-grid {
display: grid; grid-template-columns: 1.05fr 0.95fr;
gap: clamp(36px, 5vw, 80px); align-items: center;
}
.hero-split .overline { margin-bottom: 24px; }
.hero-split h1 { max-width: 16ch; margin: 0; }
.hero-split .lede { max-width: 540px; margin: 28px 0 0; }
.hero-split .cta-row { align-items: center; gap: 28px; margin-top: 40px; }
.hero-split .assurance { margin-top: 40px; }
.hero-login-link {
font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
letter-spacing: 0.04em; color: var(--ink-2); text-transform: none;
}
.hero-login-link strong { color: var(--gold); font-weight: 600; }
.hero-login-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
/* Opportunity preview card */
.hero-preview {
background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
padding: 22px; box-shadow: 0 24px 60px -28px rgba(20, 17, 11, 0.28);
}
.hp-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.hp-cat { font-family: 'Inter', sans-serif; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); }
.hp-name { font-family: 'Cormorant Garamond', serif; font-size: 25px; color: var(--ink); line-height: 1.1; }
.hero-preview .hp-compare { margin-top: 0; }
.hero-preview .compare .row { padding: 14px 18px; }
.hero-preview .compare .c-city { font-size: 18px; }
.hero-preview .compare .c-price { font-size: 16px; }
.hp-foot { margin: 16px 2px 0; font-size: 13.5px; color: var(--ink-2); }
.hp-save { color: var(--gold); font-weight: 600; }
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: 44px; }
.hero-split { text-align: center; }
.hero-split h1, .hero-split .lede { margin-left: auto; margin-right: auto; }
.hero-split .cta-row { justify-content: center; }
.hero-split .assurance { margin-left: auto; margin-right: auto; }
.hero-preview { max-width: 480px; margin: 0 auto; text-align: left; }
}
/* Trust strip (numbers / proof) */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 4vw, 56px); }
.strip .stat { text-align: center; }
.strip .stat .n { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px, 4vw, 52px); font-weight: 400; color: var(--ink); line-height: 1; }
.dark .strip .stat .n { color: var(--on-dark); }
.strip .stat .l { display: block; margin-top: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-3); }
.dark .strip .stat .l { color: var(--on-dark-2); }
/* ---- Editorial split ---------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split.lean { grid-template-columns: 1.05fr 0.95fr; }
.split .figure {
aspect-ratio: 4 / 5; border-radius: 3px; border: 1px solid var(--line);
background: linear-gradient(150deg, #efe9dc, #e2dac8 55%, #d9cfb8);
position: relative; overflow: hidden;
}
.split .figure::after {
content: attr(data-mark); position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Cormorant Garamond', serif; font-size: clamp(60px, 10vw, 140px);
font-style: italic; color: rgba(26, 22, 17, 0.10);
}
/* ---- Pillars / value cards --------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.pillar {
padding: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 40px) clamp(40px, 5vw, 64px);
border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.pillar:nth-child(3n) { border-right: 0; }
.pillar .idx { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--gold); font-style: italic; }
.pillar h3 { margin: 22px 0 14px; }
.pillar p { color: var(--ink-2); font-size: 16px; }
.dark .pillars, .dark .pillar { border-color: var(--line-dark); }
.dark .pillar p { color: var(--on-dark-2); }
.dark .pillar .idx { color: var(--gold-dark); }
/* Generic feature grid (technology, etc.) */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.cell { background: var(--paper); padding: clamp(28px, 3.4vw, 44px); }
.cell .ic { font-size: 20px; color: var(--gold); display: block; margin-bottom: 20px; }
.cell h3 { font-size: 22px; margin-bottom: 12px; }
.cell p { color: var(--ink-2); font-size: 15.5px; }
.dark .grid { background: var(--line-dark); border-color: var(--line-dark); }
.dark .cell { background: var(--obsidian-2); }
.dark .cell p { color: var(--on-dark-2); }
.dark .cell .ic { color: var(--gold-dark); }
/* ---- Feature list (bullets) -------------------------------------------- */
.feature-list { list-style: none; display: grid; gap: 0; }
.feature-list li {
padding: 22px 0; border-bottom: 1px solid var(--line);
display: grid; grid-template-columns: 28px 1fr; gap: 18px; align-items: baseline;
color: var(--ink-2); font-size: 16px;
}
.feature-list li::before { content: counter(li, decimal-leading-zero); counter-increment: li; font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--gold); font-size: 17px; }
.feature-list { counter-reset: li; }
.feature-list li strong { color: var(--ink); font-weight: 600; }
.feature-list li .d { display: block; color: var(--ink-3); font-size: 14.5px; margin-top: 4px; }
.dark .feature-list li { border-color: var(--line-dark); color: var(--on-dark-2); }
.dark .feature-list li strong { color: var(--on-dark); }
.dark .feature-list li::before { color: var(--gold-dark); }
/* ---- Product discovery (SAMPLE) ---------------------------------------- */
.discovery-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 28px); }
.pcard { display: block; color: inherit; }
.pcard .frame {
aspect-ratio: 3 / 4; border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
position: relative; background: var(--paper);
}
.pcard .frame .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 44px; color: rgba(26,22,17,0.12);
transition: transform 1.1s var(--ease); }
.pcard:hover .frame .art { transform: scale(1.06); }
.pcard .frame .art-1 { background: linear-gradient(150deg, #f1ebde, #e3dcc9); }
.pcard .frame .art-2 { background: linear-gradient(150deg, #edeae3, #ddd6c9); }
.pcard .frame .art-3 { background: linear-gradient(150deg, #f2ece2, #e7dcc4); }
.pcard .frame .art-4 { background: linear-gradient(150deg, #ebe7e0, #dad3c5); }
.pcard .tag {
position: absolute; top: 14px; left: 14px; z-index: 2;
font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600;
color: var(--ink); background: rgba(251,250,247,0.92); padding: 6px 10px; border-radius: 2px;
}
.pcard .meta { padding: 18px 2px 0; }
.pcard .cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }
.pcard .name { font-family: 'Cormorant Garamond', serif; font-size: 22px; margin: 8px 0 3px; color: var(--ink); }
.pcard .retailer { font-size: 13px; color: var(--ink-3); }
.pcard .price { font-size: 14px; color: var(--ink-2); margin-top: 12px; letter-spacing: 0.02em; }
.sample-note { margin-top: 32px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
/* ---- Categories --------------------------------------------------------- */
/* Column count comes from a --cols custom property, NOT an inline
grid-template-columns: the generator sets --cols per row, and an inline
grid-template-columns would outrank the mobile media query below — which is
exactly how three of the seven category tiles (Jewelry among them) became
invisible on a phone: the row is overflow:hidden, so the surplus columns were
silently clipped rather than scrolled. A custom property is overridable. */
.cat-row { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.cat-cell {
background: var(--paper); padding: clamp(26px, 3vw, 40px) 22px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 12px;
transition: background .35s var(--ease);
}
.cat-cell:hover { background: var(--ivory); }
.cat-cell .g { font-size: 20px; color: var(--gold); }
.cat-cell .t { font-family: 'Cormorant Garamond', serif; font-size: 21px; color: var(--ink); }
/* ---- Steps -------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.step .n { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 30px; color: var(--gold); }
.step h3 { margin: 18px 0 12px; }
.step p { color: var(--ink-2); font-size: 15.5px; }
.dark .step p { color: var(--on-dark-2); }
.dark .step .n { color: var(--gold-dark); }
/* ---- Pull quote / statement -------------------------------------------- */
.statement { text-align: center; max-width: 22ch; margin: 0 auto; font-weight: 400; }
.statement .display-l { line-height: 1.12; }
/* ---- Inquiry form ------------------------------------------------------- */
.form-wrap { max-width: 780px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-2); }
.field label .req { color: var(--gold); }
.field input, .field select, .field textarea {
font-family: inherit; font-size: 16px; color: var(--ink); background: transparent;
border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 12px 2px;
transition: border-color .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; border: 1px solid var(--line-strong); border-radius: 3px; padding: 14px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field select { appearance: none; cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.form-status { font-size: 14px; }
.form-status.ok { color: #5a7d5a; }
.form-status.err { color: #a3502f; }
.form-consent { font-size: 12.5px; color: var(--ink-3); margin-top: 20px; }
.dark .field label { color: var(--on-dark-2); }
.dark .field input, .dark .field select, .dark .field textarea { color: var(--on-dark); border-color: var(--line-dark); }
.dark .field input:focus, .dark .field select:focus, .dark .field textarea:focus { border-color: var(--gold-dark); }
.dark .field select option { color: #1a1611; }
/* ---- Reveal-on-scroll --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
.btn:hover, .pcard:hover .frame .art { transform: none; }
}
/* ---- Legal / article pages --------------------------------------------- */
.legal { padding: clamp(56px, 8vw, 96px) 0 clamp(56px, 8vw, 96px); max-width: 800px; }
.legal h1 { font-size: clamp(34px, 6vw, 56px); margin-bottom: 12px; }
.legal .updated { color: var(--ink-3); font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 40px; }
.legal h2 { font-size: clamp(24px, 3vw, 32px); margin: 48px 0 14px; }
.legal h3 { font-size: 19px; margin: 28px 0 8px; color: var(--gold); font-style: italic; }
.legal p, .legal li { color: var(--ink-2); margin-bottom: 14px; font-size: 16.5px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--gold); }
.legal a:hover { color: var(--ink); }
.note {
background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--champagne);
border-radius: 3px; padding: 20px 22px; margin: 24px 0; color: var(--ink-2);
}
/* ---- Footer ------------------------------------------------------------- */
footer.site { background: var(--obsidian); color: var(--on-dark-2); padding: clamp(64px, 8vw, 104px) 0 48px; }
footer.site .f-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); padding-bottom: 56px; border-bottom: 1px solid var(--line-dark); }
footer.site .f-brand .brand { color: var(--on-dark); font-size: 30px; display: inline-block; margin-bottom: 18px; }
footer.site .f-brand p { color: var(--on-dark-2); font-size: 15px; max-width: 34ch; }
footer.site .f-brand .f-tag { margin-top: 22px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold-dark); }
footer.site .col h4 { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--on-dark); margin-bottom: 20px; }
footer.site .col a, footer.site .col span { display: block; color: var(--on-dark-2); font-size: 14.5px; margin-bottom: 13px; }
footer.site .col a:hover { color: var(--gold-dark); }
footer.site .f-bottom { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; padding-top: 40px; font-size: 12.5px; color: var(--ink-3); }
footer.site .f-bottom strong { color: var(--on-dark-2); font-weight: 500; }
/* legacy footer fallback */
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line-dark); }
footer.site .legal-id { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: 20px; }
footer.site .legal-id strong { color: var(--on-dark-2); }
/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 920px) {
.split, .split.lean { grid-template-columns: 1fr; gap: 40px; }
.pillars, .grid-3, .steps { grid-template-columns: 1fr; }
.pillar { border-right: 0; }
.product-grid { grid-template-columns: repeat(2, 1fr); }
/* Set grid-template-columns directly, NOT --cols: the generator writes --cols
as an INLINE custom property, and inline declarations outrank any stylesheet
rule — including this one. The base .cat-row rule resolves var(--cols), so
overriding the resolved property here is what actually wins on a phone. */
.cat-row { grid-template-columns: repeat(2, 1fr); }
.grid-2 { grid-template-columns: 1fr; }
footer.site .f-top { grid-template-columns: 1fr 1fr; }
}
/* ---- Mobile navigation (hamburger + dropdown panel) -------------------- */
@media (max-width: 980px) {
.nav-toggle { display: flex; }
header.site .bar { position: relative; }
header.site nav {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--porcelain); border-bottom: 1px solid var(--line);
box-shadow: 0 24px 40px -24px rgba(20, 17, 11, 0.32);
padding: 8px clamp(20px, 5vw, 40px) 22px;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
}
header.site.nav-open nav { opacity: 1; visibility: visible; transform: translateY(0); }
header.site nav a, header.site nav .nav-login {
padding: 15px 2px; font-size: 13px; border-bottom: 1px solid var(--line);
width: 100%; justify-content: flex-start; text-align: left;
}
header.site nav a.nav-search { font-size: 15px; }
.nav-actions {
flex-direction: column; align-items: stretch; gap: 0;
border-left: 0; border-top: 1px solid var(--line-strong);
padding-left: 0; margin-left: 0; margin-top: 6px; padding-top: 6px;
}
header.site nav a.btn-nav-gold, .nav-actions .btn-nav-gold {
justify-content: center; text-align: center; margin-top: 14px;
padding: 15px 20px; border-bottom: 0;
}
header.site nav a.nav-secondary { order: 9; }
}
@media (max-width: 600px) {
body { font-size: 16px; }
.strip { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
.form-grid { grid-template-columns: 1fr; }
.discovery-head { flex-direction: column; align-items: flex-start; }
footer.site .f-top { grid-template-columns: 1fr; gap: 36px; }
}
/* ==========================================================================
PLATFORM SECTIONS (v3) — stats, brands, retailers, world map, news,
testimonials, search, investor/roadmap, expanded footer
========================================================================== */
/* Nav: search affordance */
header.site nav a.nav-search { font-size: 17px; letter-spacing: 0; color: var(--ink-2); }
header.site nav a.nav-search:hover { color: var(--ink); }
/* ---- Animated statistics ----------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.stat-card { background: var(--paper); padding: clamp(34px, 4vw, 56px) 24px; text-align: center; }
.stat-card .num { font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 5.2vw, 76px); font-weight: 400; line-height: 1; color: var(--ink); }
.stat-card .num .suffix { color: var(--gold); }
.stat-card .lab { display: block; margin-top: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-3); }
.dark .stats { background: var(--line-dark); border-color: var(--line-dark); }
.dark .stat-card { background: var(--obsidian-2); }
.dark .stat-card .num { color: var(--on-dark); }
.dark .stat-card .num .suffix { color: var(--gold-dark); }
.stats-cap { margin-top: 24px; font-size: 12px; color: var(--ink-3); text-align: center; }
.dark .stats-cap { color: var(--on-dark-2); }
/* ---- Brand directory cards --------------------------------------------- */
/* Every card is one column of identical structure so the grid stays perfectly
aligned: a fixed-ratio hero, identity, a clamped description, a live
intelligence grid + status pill, then a pinned action row. */
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 24px); align-items: stretch; }
.brand-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.brand-card:hover { border-color: var(--champagne); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.08); }
.brand-card-hit { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
/* Hero: category craft photo via inline background, upgraded to a real product
image overlay (.bcm-real) once it loads. Always present → identical heights. */
.brand-card-media { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--line) center/cover no-repeat; }
.brand-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.14)); }
.brand-card-media .bcm-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s var(--ease); }
.brand-card-media.has-real .bcm-real { opacity: 1; }
.brand-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 4px; }
.brand-card .bn { font-family: 'Cormorant Garamond', serif; font-size: 23px; line-height: 1.05; margin: 0 0 5px; color: var(--ink); }
.brand-card .bc { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); }
/* Description — always 2–3 lines, consistently truncated. */
.brand-card .bcat { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 12px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Live intelligence grid: products · countries · verified retailers · savings. */
.brand-stats { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.brand-stats .bs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.brand-stats .bs-cell { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.brand-stats .bs-v { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1; }
.brand-stats .bs-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.brand-stats .bs-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.brand-stats .bs-cat { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gold); background: var(--gold-wash); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.brand-status { display: inline-flex; align-items: center; gap: 6px; margin: 13px 22px 0; font-size: 11px; letter-spacing: 0.02em; color: var(--ink-2); }
.brand-status .bs-live { width: 6px; height: 6px; border-radius: 50%; background: #2e9e5b; box-shadow: 0 0 0 3px rgba(46, 158, 91, 0.16); flex: 0 0 auto; }
/* Pinned action row: primary "View Brand" + Save / Alerts / Compare. */
.brand-actions { margin-top: auto; padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.btn-view { display: block; text-align: center; text-decoration: none; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: #fff; background: var(--gold); border: 1px solid var(--gold); border-radius: 3px; padding: 11px 16px; transition: filter .2s var(--ease), transform .1s var(--ease); }
.btn-view:hover { filter: brightness(1.06); }
.btn-view:active { transform: scale(.98); }
.brand-quick { display: flex; gap: 7px; }
.bq { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; letter-spacing: 0.03em; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 3px; padding: 8px 6px; cursor: pointer; text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.bq:hover { border-color: var(--gold); color: var(--gold); }
.bq .bq-ic { font-size: 12px; line-height: 1; }
.bq-save.on { color: var(--gold); border-color: var(--gold); background: var(--gold-wash); }
/* Graceful empty state when the live sourcing pipeline is refreshing real data. */
.lxd-refreshing { grid-column: 1 / -1; text-align: center; padding: 44px 20px; color: var(--ink-3); font-size: 14px; letter-spacing: 0.02em; }
/* Brand-detail live summary (real product/market counts, categories, freshness). */
.lxb-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 20px; font-size: 13.5px; color: var(--ink-2); }
.lxb-summary b { color: var(--ink); font-weight: 600; }
.lxb-summary .lxb-dot { color: var(--ink-3); }
.lxb-summary .lxb-fresh { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.lxb-summary .bs-live { width: 6px; height: 6px; border-radius: 50%; background: #2e9e5b; box-shadow: 0 0 0 3px rgba(46, 158, 91, 0.16); display: inline-block; }
.lxb-insight { margin: -12px 0 22px; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.lxb-insight::first-letter { color: var(--gold); }
/* ---- Retailers grid ----------------------------------------------------- */
.retailer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 3px; overflow: hidden; }
.retailer-cell { background: var(--obsidian-2); padding: 26px 22px; text-align: center; transition: background .35s var(--ease); }
.retailer-cell:hover { background: #251f15; }
.retailer-cell .rn { font-family: 'Cormorant Garamond', serif; font-size: 21px; color: var(--on-dark); }
.retailer-cell .rc { display: block; margin-top: 7px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--on-dark-2); }
.retailer-note { margin-top: 26px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
/* light variant for /retailers page */
.retailer-grid.light { background: var(--line); border-color: var(--line); }
.retailer-grid.light .retailer-cell { background: var(--paper); }
.retailer-grid.light .retailer-cell:hover { background: var(--ivory); }
.retailer-grid.light .retailer-cell .rn { color: var(--ink); }
.retailer-grid.light .retailer-cell .rc { color: var(--ink-3); }
/* ---- World map ---------------------------------------------------------- */
.worldmap { position: relative; width: 100%; border: 1px solid var(--line-dark); border-radius: 4px; background: rgba(255,255,255,0.012); overflow: hidden; }
.worldmap svg { display: block; width: 100%; height: auto; }
.worldmap .grat { stroke: rgba(214,190,134,0.12); stroke-width: 0.5; }
.worldmap .city { fill: var(--gold-dark); }
.worldmap .city-halo { fill: rgba(214,190,134,0.18); }
.worldmap .city-lab { fill: var(--on-dark-2); font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.04em; }
.worldmap g.city-node { cursor: pointer; }
.worldmap g.city-node:hover .city-halo { fill: rgba(214,190,134,0.38); }
.worldmap g.city-node:hover .city { fill: #efe0bb; }
.worldmap g.city-node:hover .city-lab { fill: var(--on-dark); }
.map-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 32px; }
.map-legend span { font-size: 12.5px; color: var(--on-dark-2); letter-spacing: 0.04em; }
.map-legend span b { color: var(--gold-dark); font-weight: 500; margin-right: 6px; }
.region-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 3px; overflow: hidden; margin-top: 40px; }
.region-cell { background: var(--obsidian-2); padding: 24px 18px; text-align: center; }
.region-cell .rg { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--on-dark); }
.region-cell .rgc { display: block; margin-top: 6px; font-size: 11px; color: var(--on-dark-2); }
/* ---- News (future-ready) ----------------------------------------------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 30px); }
.news-card { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.news-card .ph { aspect-ratio: 16/10; background: linear-gradient(150deg, #efe9dc, #e2dac8); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 30px; color: rgba(26,22,17,0.12); }
.news-card .nb { padding: 24px 24px 28px; }
.news-card .nk { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); }
.news-card .nt { font-family: 'Cormorant Garamond', serif; font-size: 23px; margin: 10px 0 8px; color: var(--ink); line-height: 1.2; }
.news-card .nd { font-size: 14px; color: var(--ink-3); }
/* ---- Testimonials (future-ready) --------------------------------------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2vw,28px); }
.quote-card { border: 1px solid var(--line-dark); border-radius: 3px; padding: 36px 30px; }
.quote-card .qm { font-family: 'Cormorant Garamond', serif; font-size: 44px; color: var(--gold-dark); line-height: 0.6; }
.quote-card p { color: var(--on-dark-2); font-size: 16px; margin-top: 18px; font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 21px; line-height: 1.4; }
.quote-card .qa { display: block; margin-top: 22px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--on-dark); font-family: 'Inter', sans-serif; font-style: normal; }
.quote-card .qr { font-size: 11px; color: var(--ink-3); letter-spacing: 0.12em; }
/* ---- Search preview ----------------------------------------------------- */
.search-box { display: flex; max-width: 640px; margin: 0 auto; border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; background: var(--paper); }
.search-box input { flex: 1; border: 0; padding: 18px 20px; font-family: inherit; font-size: 16px; color: var(--ink); background: transparent; }
.search-box input:focus { outline: none; }
.search-box button { border: 0; background: var(--ink); color: var(--porcelain); padding: 0 28px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; cursor: pointer; transition: background .3s var(--ease); }
.search-box button:hover { background: #000; }
.search-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.search-tags span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; }
.search-msg { margin-top: 22px; font-size: 13.5px; color: var(--gold); min-height: 20px; }
/* ---- Investor / roadmap ------------------------------------------------- */
.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.phase { background: var(--paper); padding: clamp(28px,3vw,40px) 26px; }
.phase .ph-when { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }
.phase .ph-t { font-family: 'Cormorant Garamond', serif; font-size: 23px; margin: 12px 0 12px; color: var(--ink); }
.phase ul { list-style: none; }
.phase li { font-size: 14.5px; color: var(--ink-2); padding: 7px 0 7px 18px; position: relative; }
.phase li::before { content: "—"; position: absolute; left: 0; color: var(--champagne); }
.dark .roadmap { background: var(--line-dark); border-color: var(--line-dark); }
.dark .phase { background: var(--obsidian-2); }
.dark .phase .ph-t { color: var(--on-dark); }
.dark .phase li { color: var(--on-dark-2); }
.dark .phase .ph-when { color: var(--gold-dark); }
/* ---- Expanded footer (5-col) ------------------------------------------- */
footer.site .f-top.f5 { grid-template-columns: 1.5fr repeat(4, 1fr); }
/* ---- Responsive (v3 components) ---------------------------------------- */
@media (max-width: 920px) {
.stats, .roadmap { grid-template-columns: 1fr 1fr; }
.brand-grid, .retailer-grid, .retailer-grid.light, .news-grid, .quote-grid, .region-row { grid-template-columns: repeat(2, 1fr); }
footer.site .f-top.f5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.stats { grid-template-columns: 1fr 1fr; }
.roadmap, .news-grid, .quote-grid { grid-template-columns: 1fr; }
.retailer-grid, .retailer-grid.light, .region-row { grid-template-columns: 1fr 1fr; }
/* Brand cards go FULL WIDTH on a phone. Two-up left each card ~165px wide, and
the card's four-column intelligence grid and three-button action row simply
ran off the screen edge: every card showed "Save" and "Products" and clipped
Alerts, Compare, Countries, Verified and Avg savings. A brand card carries
real intelligence — it needs the width to show it. */
.brand-grid { grid-template-columns: 1fr; }
.brand-stats .bs-grid { grid-template-columns: repeat(2, 1fr); }
.brand-quick { flex-wrap: wrap; }
.map-legend { gap: 8px 16px; }
.search-box input { padding: 15px 16px; }
footer.site .f-top.f5 { grid-template-columns: 1fr; }
}
/* ==========================================================================
ENTERPRISE PARTNER PAGE (v4) — architecture flow, partner-journey timeline,
FAQ accordion, tech-stack chips, department/resource cards, text metrics
========================================================================== */
/* Architecture flow diagram */
.flow { max-width: 460px; margin: 0 auto; }
.flow .node { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 20px 26px; text-align: center; }
.flow .node .nt { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--ink); line-height: 1.1; }
.flow .node .nd { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.flow .node.accent { background: var(--ink); border-color: var(--ink); }
.flow .node.accent .nt { color: var(--porcelain); }
.flow .node.accent .nd { color: var(--on-dark-2); }
.flow .arrow { text-align: center; color: var(--champagne); font-size: 20px; line-height: 1; padding: 12px 0; }
.dark .flow .node { background: var(--obsidian-2); border-color: var(--line-dark); }
.dark .flow .node .nt { color: var(--on-dark); }
.dark .flow .node.accent { background: var(--gold-dark); border-color: var(--gold-dark); }
.dark .flow .node.accent .nt { color: var(--obsidian); }
.dark .flow .node.accent .nd { color: rgba(20,17,11,0.7); }
/* Vertical partner-journey timeline */
.vtimeline { max-width: 660px; margin: 0 auto; position: relative; padding-left: 34px; }
.vtimeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.vstep { position: relative; padding-bottom: 32px; }
.vstep:last-child { padding-bottom: 0; }
.vstep::before { content: ""; position: absolute; left: -34px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--porcelain); border: 1px solid var(--champagne); }
.vstep .vt { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--ink); }
.vstep .vd { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }
.vstep .vn { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }
.dark .vtimeline::before { background: var(--line-dark); }
.dark .vstep::before { background: var(--obsidian); border-color: var(--gold-dark); }
.dark .vstep .vt { color: var(--on-dark); }
.dark .vstep .vd { color: var(--on-dark-2); }
.dark .vstep .vn { color: var(--gold-dark); }
/* FAQ accordion */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 24px 0; font-family: 'Cormorant Garamond', serif; font-size: clamp(20px,2.2vw,25px); color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 24px; font-family: 'Inter', sans-serif; flex: none; transition: transform .3s var(--ease); }
.faq details[open] summary::after { content: "–"; }
.faq .fa { padding: 0 0 26px; color: var(--ink-2); font-size: 16px; max-width: 72ch; }
/* Tech-stack chips */
.stack { display: flex; flex-wrap: wrap; gap: 12px; }
.stack span { border: 1px solid var(--line-strong); border-radius: 999px; padding: 11px 20px; font-size: 13px; letter-spacing: 0.03em; color: var(--ink); background: var(--paper); }
.dark .stack span { border-color: var(--line-dark); color: var(--on-dark); background: var(--obsidian-2); }
/* Department / resource cards (link cells) */
.cell.linkable { display: flex; flex-direction: column; }
.cell .meta-link { margin-top: 16px; }
.cell .dept-to { display: block; margin-top: 10px; font-size: 13px; color: var(--gold); }
/* Text-value metric (Growing Network) */
.stat-card .num.txt { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2.4vw, 30px); font-style: italic; }
@media (max-width: 600px) {
.vtimeline { padding-left: 28px; }
.vstep::before { left: -28px; }
}
/* ==========================================================================
EDITORIAL REFINEMENT (v5) — imagery, live demo, visual journey,
featured products, shopper section, enhanced footer
========================================================================== */
/* Image reveal: fade only (no translate, avoids CLS) */
.reveal.reveal-img { transform: none; }
img { background: var(--ivory); }
/* Full-bleed editorial band */
.editorial-band { padding: 0; border: 0; }
.editorial-band figure { margin: 0; }
.editorial-band .band-img { width: 100%; height: clamp(340px, 52vh, 600px); object-fit: cover; display: block; filter: saturate(0.96); }
.editorial-band .cap { padding: 26px var(--gutter) 0; text-align: center; }
.editorial-band .cap .overline { display: block; margin-bottom: 8px; }
.editorial-band .cap p { color: var(--ink-2); font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: clamp(20px, 2.4vw, 28px); }
/* Framed editorial figure (in splits / sections) */
.ed-figure { border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.ed-figure img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
.ed-figure.wide img { aspect-ratio: 3 / 2; }
.ed-figure.square img { aspect-ratio: 1 / 1; }
/* Live comparison demo */
.demo-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.demo-chip {
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
padding: 13px 22px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
color: var(--ink-2); cursor: pointer; transition: all .3s var(--ease);
}
.demo-chip:hover { border-color: var(--ink); color: var(--ink); }
.demo-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--porcelain); }
.demo { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.demo .demo-figure { border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.demo .demo-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; display: block; transition: opacity .5s var(--ease); }
.demo .demo-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(26px, 3vw, 38px); margin-bottom: 6px; }
.demo .demo-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }
.compare { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin-top: 24px; }
.compare .row { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center; padding: 17px 22px; border-bottom: 1px solid var(--line); background: var(--paper); transition: background .3s var(--ease); }
.compare .row:last-child { border-bottom: 0; }
.compare .row.best { background: var(--gold-wash); }
.compare .c-city { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--ink); }
.compare .c-city small { display: block; font-family: 'Inter', sans-serif; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-top: 2px; }
.compare .c-price { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.compare .c-status { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); text-align: right; min-width: 92px; }
.compare .row.best .c-status { color: var(--gold); }
.demo-foot { margin-top: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
/* Visual journey (how it works) */
.journey { display: flex; align-items: flex-start; gap: 6px; }
.jstep { flex: 1; text-align: center; position: relative; padding: 0 6px; }
.jstep .ji { width: 52px; height: 52px; border: 1px solid var(--champagne); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: var(--gold); font-size: 19px; background: var(--paper); position: relative; z-index: 2; }
.jstep .jt { font-family: 'Cormorant Garamond', serif; font-size: 19px; color: var(--ink); line-height: 1.15; }
.jstep:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 50%; width: 100%; height: 1px; background: var(--line-strong); z-index: 1; }
/* Featured products (with imagery) */
.fproduct-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.fproduct { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.fproduct:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fproduct .pimg { aspect-ratio: 4 / 5; overflow: hidden; }
.fproduct .pimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.fproduct:hover .pimg img { transform: scale(1.05); }
.fproduct .pinfo { padding: 20px 20px 22px; }
.fproduct .pcat { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }
.fproduct .pname { font-family: 'Cormorant Garamond', serif; font-size: 21px; color: var(--ink); margin: 8px 0 3px; }
.fproduct .pmarket { font-size: 12.5px; color: var(--ink-3); }
.fproduct .pcompare { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); display: inline-flex; gap: 7px; }
.fproduct .pcompare::after { content: "→"; transition: transform .3s var(--ease); }
.fproduct:hover .pcompare::after { transform: translateX(4px); }
/* Journal image support */
.news-card .ph.has-img { padding: 0; }
.news-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Newsletter (footer) */
.f-news { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding-bottom: 48px; margin-bottom: 8px; border-bottom: 1px solid var(--line-dark); }
.f-news h4 { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2.4vw, 30px); color: var(--on-dark); font-weight: 500; }
.f-news p { color: var(--on-dark-2); font-size: 14px; margin-top: 6px; }
.f-news form { display: flex; border: 1px solid var(--line-dark); border-radius: 3px; overflow: hidden; min-width: min(420px, 80vw); }
.f-news input { flex: 1; background: transparent; border: 0; padding: 15px 18px; color: var(--on-dark); font-family: inherit; font-size: 15px; }
.f-news input::placeholder { color: var(--ink-3); }
.f-news input:focus { outline: none; }
.f-news button { border: 0; background: var(--gold-dark); color: var(--obsidian); padding: 0 24px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; cursor: pointer; transition: background .3s var(--ease); }
.f-news button:hover { background: #e6cf9a; }
.f-news .f-news-msg { grid-column: 1 / -1; font-size: 13px; color: var(--gold-dark); min-height: 18px; }
.f-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.f-meta a { color: var(--on-dark-2); font-size: 13px; }
.f-meta a:hover { color: var(--gold-dark); }
.f-lang { font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em; }
@media (max-width: 920px) {
.demo { grid-template-columns: 1fr; }
.fproduct-grid { grid-template-columns: repeat(2, 1fr); }
.journey { flex-wrap: wrap; gap: 28px 6px; }
.jstep { flex: 0 0 calc(33.333% - 6px); }
.jstep:not(:last-child)::after { display: none; }
.f-news { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.fproduct-grid { grid-template-columns: 1fr 1fr; }
.jstep { flex: 0 0 100%; }
.compare .row { grid-template-columns: 1fr auto; }
.compare .c-status { grid-column: 2; text-align: right; }
.editorial-band .band-img { height: 300px; }
}
/* ==========================================================================
MOBILE-APP SECTION (v6) — "Continue the Experience" + phone mockups
========================================================================== */
.app-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.app-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; padding: 9px 18px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-2); }
.app-status .dot-soft { width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); }
.app-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 30px 0 0; list-style: none; }
.app-features li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }
.app-features li::before { content: "◆"; color: var(--gold); font-size: 10px; }
.app-features li strong { color: var(--ink); font-weight: 600; }
.notify { margin-top: 34px; max-width: 480px; }
.notify .notify-msg { margin-top: 14px; font-size: 13.5px; min-height: 18px; }
.notify .notify-msg.ok { color: #5a7d5a; }
.notify .notify-msg.err { color: #a3502f; }
/* Phone mockups (LuxScout UI preview only — no third-party marks) */
.app-stage { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.4vw, 32px); }
.device { width: clamp(200px, 22vw, 248px); border-radius: 40px; background: #0f0d08; padding: 9px; box-shadow: var(--shadow); border: 1px solid #2a251a; flex: none; }
.device .screen { position: relative; border-radius: 31px; overflow: hidden; background: var(--porcelain); aspect-ratio: 9 / 19.2; }
.device.android { border-radius: 30px; }
.device.android .screen { border-radius: 22px; }
.device .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 44%; height: 22px; background: #0f0d08; border-radius: 0 0 14px 14px; z-index: 4; }
.device .punch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #0f0d08; z-index: 4; }
.device-col { display: flex; flex-direction: column; align-items: center; }
.device-col.stagger { margin-top: 34px; }
.dlabel { text-align: center; margin-top: 16px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); }
/* In-screen UI preview */
.app-ui { display: flex; flex-direction: column; height: 100%; font-family: 'Inter', sans-serif; }
.app-ui .ui-top { display: flex; align-items: center; justify-content: space-between; padding: 30px 16px 12px; }
.app-ui .ui-brand { font-family: 'Cormorant Garamond', serif; font-size: 17px; color: var(--ink); }
.app-ui .ui-brand b { color: var(--gold); font-weight: 600; }
.app-ui .ui-ico { color: var(--ink-3); font-size: 13px; }
.app-ui .ui-hero { margin: 0 16px; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; position: relative; }
.app-ui .ui-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-ui .ui-fav { position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; border-radius: 50%; background: rgba(251,250,247,0.9); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 12px; }
.app-ui .ui-meta { padding: 12px 16px 6px; }
.app-ui .ui-cat { font-size: 8px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); }
.app-ui .ui-name { font-family: 'Cormorant Garamond', serif; font-size: 16px; color: var(--ink); margin-top: 2px; }
.app-ui .ui-rows { margin: 6px 12px 0; }
.app-ui .ui-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px; border-radius: 7px; font-size: 10.5px; color: var(--ink-2); }
.app-ui .ui-row.best { background: var(--gold-wash); }
.app-ui .ui-row .uc { color: var(--ink); }
.app-ui .ui-row .up { font-weight: 600; color: var(--ink); }
.app-ui .ui-tab { margin-top: auto; display: flex; justify-content: space-around; padding: 12px 0 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.app-ui .ui-tab .on { color: var(--gold); }
@media (max-width: 920px) {
.app-split { grid-template-columns: 1fr; gap: 44px; }
.app-stage { order: -1; }
}
@media (max-width: 600px) {
.app-features { grid-template-columns: 1fr; }
.device { width: clamp(160px, 42vw, 200px); }
}
/* ==========================================================================
LANDING REFINEMENT (v7) — outlined Login, hero search, enlarged hero
product card, and the trust signals strip below the hero
========================================================================== */
/* Anchored sections clear the sticky header on smooth-scroll */
section[id] { scroll-margin-top: 92px; }
/* Login — a subtle outlined button, clearly an account affordance and
distinct from the informational nav links, quieter than gold Join Free */
header.site nav a.nav-login-cta {
border: 1px solid var(--line-strong); border-radius: 2px;
padding: 9px 17px; color: var(--ink); background: transparent;
transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
header.site nav a.nav-login-cta:hover { color: var(--ink); border-color: var(--ink); background: var(--gold-wash); }
.nav-login-cta .ic-user { opacity: .75; }
/* Hero search — promotes the core search experience to the hero */
.hero-search {
display: flex; align-items: stretch; margin-top: 34px; max-width: 540px;
border: 1px solid var(--line-strong); border-radius: 3px; background: var(--paper);
overflow: hidden; box-shadow: var(--shadow-sm);
transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hero-search:focus-within { border-color: var(--champagne); box-shadow: 0 4px 16px -6px rgba(140, 115, 57, 0.28); }
.hero-search .hs-ic { display: flex; align-items: center; padding-left: 18px; color: var(--ink-3); font-size: 18px; }
.hero-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 16px 14px; font-family: inherit; font-size: 16px; color: var(--ink); }
.hero-search input:focus { outline: none; }
.hero-search button {
border: 0; border-radius: 0; padding: 0 30px; flex: none; cursor: pointer;
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.16em;
transition: filter .3s var(--ease);
}
/* Hero quick searches + member login link */
.hero-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.hero-quick .hq-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); margin-right: 2px; }
.hero-quick button {
font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.03em; color: var(--ink-2);
border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; background: transparent;
cursor: pointer; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.hero-quick button:hover { border-color: var(--champagne); color: var(--ink); }
.hero-quick .hero-login-link { margin-left: auto; }
/* Enlarged hero card — product image + live comparison as the focal point */
.hero-preview { padding: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 34px 80px -34px rgba(20, 17, 11, 0.36); }
.hp-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ivory); }
.hp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-badge {
position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px; border-radius: 999px; background: rgba(20, 17, 11, 0.72);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
color: var(--on-dark); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
}
.hp-badge .hp-live { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-dark); animation: hp-pulse 2.4s var(--ease) infinite; }
@keyframes hp-pulse { 0% { box-shadow: 0 0 0 0 rgba(214, 190, 134, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(214, 190, 134, 0); } 100% { box-shadow: 0 0 0 0 rgba(214, 190, 134, 0); } }
.hp-body { padding: 22px; }
/* Trust signals strip — premium credibility, directly below the hero */
.trust-band { padding: clamp(30px, 4.5vw, 52px) 0; border-bottom: 1px solid var(--line); background: var(--porcelain); }
.trust-bar { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
.trust-bar li { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; }
.trust-bar .ti { color: var(--gold); font-size: 18px; line-height: 1.25; }
.trust-bar strong { display: block; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.trust-bar div > span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
/* Hairline separators between the four signals (desktop four-up only) */
@media (min-width: 821px) {
.trust-bar li + li { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
.hp-badge .hp-live { animation: none; }
.hero-search button:hover { filter: none; }
}
@media (max-width: 900px) {
.hero-search { margin-left: auto; margin-right: auto; }
.hero-quick { justify-content: center; }
.hero-quick .hero-login-link { margin-left: 0; flex-basis: 100%; text-align: center; margin-top: 4px; }
}
@media (max-width: 980px) {
header.site nav a.nav-login-cta { border-width: 0 0 1px 0; border-radius: 0; padding: 15px 2px; background: transparent; }
}
@media (max-width: 820px) {
.trust-bar { grid-template-columns: 1fr 1fr; gap: 26px 24px; }
}
@media (max-width: 480px) {
.trust-bar { grid-template-columns: 1fr; gap: 18px; }
.hero-search button { padding: 0 22px; }
}
/* ==========================================================================
FLAGSHIP REDESIGN (v8) — cinematic obsidian hero, brand emblem, scroll-
solidifying home header, the Price Atlas, refined trust row, dark CTA mark.
Built on the existing tokens; reuses .compare, .dark, .reveal, .journey,
.worldmap, .app-* and footer. Earlier homepage classes (hero-split, stats,
cat-row, fproduct, demo, trust-bar…) remain for the subpages that use them.
========================================================================== */
/* ---- Brand lockup: emblem + wordmark ----------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 34px; height: 34px; flex: none; object-fit: contain; border-radius: 7px; }
.brand-word { font-family: 'Cormorant Garamond', serif; font-weight: 600; line-height: 1; }
footer.site .f-brand .brand { gap: 0; } /* footer wordmark stays text-only */
/* ---- Home header: transparent over the hero, solidifies on scroll ------ */
body.home header.site {
background: transparent; border-bottom-color: transparent;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.home header.site.scrolled {
background: rgba(251, 250, 247, 0.82);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom-color: var(--line);
}
/* Light treatment while transparent over the dark hero */
body.home header.site:not(.scrolled) .brand-word { color: var(--on-dark); }
body.home header.site:not(.scrolled) .brand .dot { color: var(--gold-dark); }
body.home header.site:not(.scrolled) .nav-toggle span { background: var(--on-dark); }
@media (min-width: 981px) {
body.home header.site:not(.scrolled) nav a.nav-link { color: var(--on-dark-2); }
body.home header.site:not(.scrolled) nav a.nav-link:hover { color: var(--on-dark); }
body.home header.site:not(.scrolled) nav a.nav-login { color: var(--on-dark); }
body.home header.site:not(.scrolled) nav a.nav-login:hover { color: var(--gold-dark); }
body.home header.site:not(.scrolled) .nav-actions { border-left-color: var(--line-dark); }
body.home header.site:not(.scrolled) nav a.nav-login-cta {
border-color: rgba(214, 190, 134, 0.4); color: var(--on-dark); background: transparent;
}
body.home header.site:not(.scrolled) nav a.nav-login-cta:hover {
border-color: var(--gold-dark); color: var(--on-dark); background: rgba(214, 190, 134, 0.08);
}
}
/* Guard against any horizontal overflow (clip keeps position:sticky working). */
body { overflow-x: clip; }
/* ---- Hero: cinematic obsidian, full viewport --------------------------- */
.lx-hero {
position: relative; overflow: hidden;
min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
padding: clamp(120px, 18vh, 200px) 0 clamp(96px, 14vh, 168px);
border-bottom: 1px solid var(--line-dark);
background:
radial-gradient(140% 120% at 50% -20%, rgba(198, 172, 116, 0.16), transparent 58%),
linear-gradient(180deg, #100D08 0%, var(--obsidian) 46%, #0C0A06 100%);
}
/* Pull the hero up under the (sticky, transparent) home header so the header
overlays the obsidian instead of sitting on a porcelain strip above it. */
body.home .lx-hero { margin-top: -79px; }
.lx-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lx-hero-glow {
position: absolute; top: -22%; left: 50%; transform: translateX(-50%);
width: 1100px; max-width: 130%; aspect-ratio: 2 / 1;
background: radial-gradient(closest-side, rgba(214, 190, 134, 0.22), transparent 72%);
}
.lx-hero-mark {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
width: clamp(420px, 62vw, 760px); height: auto; opacity: 0.34;
mix-blend-mode: screen; filter: saturate(1.05);
animation: lx-float 14s var(--ease) infinite;
}
.lx-hero-vignette {
position: absolute; inset: 0;
background:
radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(8, 6, 3, 0.55) 100%),
linear-gradient(180deg, transparent 60%, rgba(8, 6, 3, 0.6) 100%);
}
@keyframes lx-float { 0%,100% { transform: translate(-50%, -54%); } 50% { transform: translate(-50%, -50%); } }
.lx-hero-inner { position: relative; z-index: 2; text-align: center; }
.lx-hero .overline { display: block; margin-bottom: 26px; color: var(--gold-dark); }
.lx-hero-title {
font-size: clamp(48px, 8vw, 116px); font-weight: 400; line-height: 0.98;
letter-spacing: -0.015em; color: var(--on-dark); margin: 0 auto; max-width: 14ch;
}
.lx-hero-title em { font-style: italic; color: var(--gold-dark); }
.lx-hero-lede { max-width: 600px; margin: 28px auto 0; color: var(--on-dark-2); }
/* Hero search — the single primary action (luminous over obsidian) */
.lx-search {
display: flex; align-items: stretch; margin: 44px auto 0; max-width: 640px;
background: var(--paper); border: 1px solid rgba(214, 190, 134, 0.28); border-radius: 4px;
overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0,0,0,0.12);
transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.lx-search:focus-within { border-color: var(--champagne); box-shadow: 0 30px 80px -28px rgba(0,0,0,0.75), 0 0 0 3px rgba(198, 172, 116, 0.22); }
.lx-search-ic { display: flex; align-items: center; padding-left: 22px; color: var(--ink-3); }
.lx-search input {
flex: 1; min-width: 0; border: 0; background: transparent;
padding: 21px 16px; font-family: inherit; font-size: 16.5px; color: var(--ink);
}
.lx-search input:focus { outline: none; }
.lx-search .btn-gold { border: 0; border-radius: 0; padding: 0 clamp(22px, 3vw, 38px); flex: none; font-size: 12px; }
/* Hero quick chips */
.lx-hero-quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
.lx-hq-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--on-dark-2); margin-right: 4px; }
.lx-hero-quick button {
font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.04em; color: var(--on-dark);
border: 1px solid rgba(214, 190, 134, 0.28); border-radius: 999px; padding: 8px 17px;
background: rgba(255, 255, 255, 0.03); cursor: pointer;
transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.lx-hero-quick button:hover { border-color: var(--gold-dark); color: var(--gold-dark); background: rgba(214,190,134,0.08); }
/* Hero live teaser strip */
.lx-hero-teaser {
display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
max-width: 100%; margin-top: 34px; padding: 11px 20px; border: 1px solid var(--line-dark); border-radius: 999px;
background: rgba(255, 255, 255, 0.02); font-size: 12.5px; color: var(--on-dark-2);
}
.lx-tz-live { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-dark); animation: hp-pulse 2.4s var(--ease) infinite; }
.lx-tz-lab { text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; color: var(--on-dark-2); }
.lx-tz-item.best { color: var(--gold-dark); }
.lx-tz-item b { color: var(--on-dark); font-weight: 600; }
.lx-tz-sep { color: var(--ink-3); }
/* Scroll cue */
.lx-hero-cue {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
color: var(--on-dark-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;
}
.lx-hero-cue:hover { color: var(--gold-dark); }
.lx-hero-cue svg { animation: lx-bob 2.2s var(--ease) infinite; }
@keyframes lx-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* ---- The Price Atlas --------------------------------------------------- */
.lx-atlas { background: linear-gradient(180deg, var(--porcelain), var(--ivory)); }
.lx-atlas-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: clamp(36px, 5vw, 56px); }
.lx-chip {
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
padding: 13px 24px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper);
color: var(--ink-2); cursor: pointer; transition: all .3s var(--ease);
}
.lx-chip:hover { border-color: var(--ink); color: var(--ink); }
.lx-chip[aria-pressed="true"] {
color: var(--obsidian); border-color: transparent;
background: linear-gradient(135deg, #E0CB95 0%, #C6AC74 52%, #B2974F 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 18px -8px rgba(140,115,57,0.5);
}
.lx-atlas-card {
display: grid; grid-template-columns: 1.04fr 0.96fr; align-items: stretch;
background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
box-shadow: 0 40px 90px -44px rgba(20, 17, 11, 0.42);
}
.lx-atlas-media { position: relative; min-height: 380px; overflow: hidden; background: var(--ivory); }
.lx-atlas-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .55s var(--ease), transform 1.4s var(--ease); }
.lx-atlas-card:hover .lx-atlas-media img { transform: scale(1.04); }
.lx-atlas-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,6,3,0.66) 100%); }
.lx-atlas-badge {
position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 999px; background: rgba(20, 17, 11, 0.66);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
color: var(--on-dark); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
}
.lx-atlas-livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-dark); animation: hp-pulse 2.4s var(--ease) infinite; }
.lx-atlas-cap { position: absolute; left: 24px; bottom: 22px; z-index: 2; }
.lx-atlas-cat { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold-dark); margin-bottom: 5px; }
.lx-atlas-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(26px, 3vw, 36px); color: #fff; line-height: 1.05; }
.lx-atlas-data { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3vw, 44px); }
.lx-atlas-data .compare { margin-top: 0; border-radius: 4px; }
.lx-atlas-data .compare .row { padding: 18px 22px; }
.lx-atlas-data .compare .row.reveal-row { animation: lx-rowin .5s var(--ease) both; }
@keyframes lx-rowin { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.lx-atlas-foot { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; }
.lx-atlas-save { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(20px, 2.4vw, 26px); color: var(--gold); }
.lx-atlas-save b { font-style: normal; font-weight: 600; }
.lx-atlas-note { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
/* ---- Refined trust row ------------------------------------------------- */
.lx-trust-row { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.lx-trust-row li {
padding: clamp(30px, 3.4vw, 46px) clamp(22px, 2.4vw, 36px) clamp(34px, 4vw, 52px);
border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.lx-trust-row li:nth-child(4n) { border-right: 0; }
.lx-ti { display: block; color: var(--gold); font-size: 20px; margin-bottom: 22px; }
.lx-trust-row strong { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 24px; color: var(--ink); margin-bottom: 12px; letter-spacing: 0; }
.lx-trust-row span { display: block; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
/* ---- Dark CTA emblem --------------------------------------------------- */
.lx-cta .lx-cta-mark { width: 64px; height: 64px; margin: 0 auto; opacity: 0.95; filter: drop-shadow(0 6px 18px rgba(214,190,134,0.18)); }
/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
.lx-atlas-card { grid-template-columns: 1fr; }
.lx-atlas-media { aspect-ratio: 16 / 10; min-height: 0; }
.lx-trust-row { grid-template-columns: 1fr 1fr; }
.lx-trust-row li:nth-child(4n) { border-right: 1px solid var(--line); }
.lx-trust-row li:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
.lx-hero { min-height: 92svh; padding-top: clamp(108px, 16vh, 150px); }
.lx-search { flex-direction: column; }
.lx-search-ic { display: none; }
.lx-search input { padding: 17px 20px; text-align: center; }
.lx-search .btn-gold { padding: 17px; }
.lx-trust-row { grid-template-columns: 1fr; }
.lx-trust-row li, .lx-trust-row li:nth-child(4n) { border-right: 0; }
.lx-hero-teaser { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
.lx-hero-mark, .lx-hero-cue svg, .lx-tz-live, .lx-atlas-livedot { animation: none; }
.lx-atlas-data .compare .row.reveal-row { animation: none; }
.lx-atlas-card:hover .lx-atlas-media img { transform: none; }
}
/* ==========================================================================
PREMIUM NAVIGATION (v8) — two-level IA: a quiet primary rail with Company /
Business dropdowns, auth-aware account actions + avatar menu, and a grouped
slide-out drawer for tablet/mobile. Selectors are scoped under header.site
so they win over the legacy `header.site nav a` rules. Built by app.js.
========================================================================== */
/* Rail layout — generous gap between the logo and the first item; actions far right. */
header.site nav { flex: 1; display: flex; align-items: center; gap: 0; }
header.site .lxn-primary {
list-style: none; display: flex; align-items: center; margin: 0; padding: 0;
gap: clamp(8px, 1.5vw, 22px); margin-left: clamp(28px, 4vw, 72px);
}
header.site .lxn-primary > li { position: relative; }
header.site .lxn-link {
position: relative; display: inline-flex; align-items: center; gap: 6px;
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-2);
background: none; border: 0; cursor: pointer; line-height: 1;
padding: 11px 14px; border-radius: 2px; transition: color .25s var(--ease);
}
header.site .lxn-link:hover,
header.site .lxn-link[aria-expanded="true"],
header.site .lxn-link[aria-current="page"] { color: var(--ink); }
header.site .lxn-link[aria-current="page"]::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px; background: var(--champagne);
}
header.site .lxn-chev { width: 11px; height: 11px; opacity: .65; transition: transform .3s var(--ease); }
header.site .lxn-has-menu.is-open .lxn-chev { transform: rotate(180deg); }
/* Dropdown panels */
header.site .lxn-menu {
position: absolute; top: calc(100% + 9px); left: 50%;
transform: translateX(-50%) translateY(7px);
min-width: 224px; padding: 10px; background: var(--paper);
border: 1px solid var(--line); border-radius: 8px;
box-shadow: 0 28px 64px -30px rgba(20, 17, 11, 0.45), 0 2px 8px rgba(20, 17, 11, 0.06);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
z-index: 60;
}
header.site .lxn-menu-right { left: auto; right: 0; transform: translateY(7px); }
header.site .lxn-has-menu.is-open .lxn-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
header.site .lxn-has-menu.is-open .lxn-menu-right { transform: translateY(0); }
header.site .lxn-menu::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 12px; }
header.site .lxn-mi {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 11px 14px; border-radius: 5px; width: 100%; text-align: left; cursor: pointer;
font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
text-transform: none; color: var(--ink); background: none; border: 0;
transition: background .2s var(--ease), color .2s var(--ease);
}
header.site .lxn-mi:hover { background: var(--gold-wash); color: var(--gold); }
header.site .lxn-menu-head { padding: 8px 14px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-3); }
header.site .lxn-soon, header.site .lxn-soon:hover { color: var(--ink-3); cursor: default; background: none; }
header.site .lxn-soon em { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 8px; }
header.site .lxn-signout { color: var(--ink-2); border-top: 1px solid var(--line); border-radius: 0; margin-top: 6px; padding-top: 13px; }
header.site .lxn-signout:hover { background: none; color: var(--gold); }
/* Account actions */
header.site .lxn-actions {
display: flex; align-items: center; gap: clamp(6px, 0.9vw, 12px);
margin-left: auto; padding-left: clamp(16px, 2vw, 26px); border-left: 1px solid var(--line);
}
header.site .lxn-icon {
display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
border-radius: 50%; color: var(--ink-2); transition: color .25s var(--ease), background .25s var(--ease);
}
header.site .lxn-icon svg { width: 18px; height: 18px; }
header.site .lxn-icon:hover { color: var(--ink); background: var(--gold-wash); }
/* Login + Join Free share ONE geometry definition (height, padding, radius,
type) so they always read as a matching pair — only color/background tell
them apart (dark outline vs. gold fill). Never size these independently. */
header.site .lxn-login, header.site .lxn-join {
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
padding: 10px 20px; border-radius: 2px; line-height: 1;
transition: border-color .3s var(--ease), background .3s var(--ease), filter .3s var(--ease);
}
header.site .lxn-login {
color: var(--ink); border: 1px solid var(--line-strong);
}
header.site .lxn-login:hover { color: var(--ink); border-color: var(--ink); background: var(--gold-wash); }
header.site .lxn-join {
color: var(--obsidian); border: 1px solid rgba(140, 115, 57, 0.35);
background: linear-gradient(135deg, #E0CB95 0%, #C6AC74 52%, #B2974F 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(140, 115, 57, 0.18);
}
header.site .lxn-join:hover { color: var(--obsidian); filter: brightness(1.04); }
header.site .lxn-user { position: relative; }
header.site .lxn-avatar {
display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
cursor: pointer; transition: border-color .3s var(--ease);
}
header.site .lxn-avatar svg { width: 18px; height: 18px; }
header.site .lxn-avatar:hover, header.site .lxn-user.is-open .lxn-avatar { border-color: var(--champagne); }
/* Light treatment while transparent over the dark home hero (desktop only) */
@media (min-width: 1081px) {
body.home header.site:not(.scrolled) .lxn-link { color: var(--on-dark-2); }
body.home header.site:not(.scrolled) .lxn-link:hover,
body.home header.site:not(.scrolled) .lxn-link[aria-expanded="true"],
body.home header.site:not(.scrolled) .lxn-link[aria-current="page"] { color: var(--on-dark); }
body.home header.site:not(.scrolled) .lxn-icon { color: var(--on-dark-2); }
body.home header.site:not(.scrolled) .lxn-icon:hover { color: var(--on-dark); background: rgba(255, 255, 255, 0.06); }
body.home header.site:not(.scrolled) .lxn-actions { border-left-color: var(--line-dark); }
body.home header.site:not(.scrolled) .lxn-login { color: var(--on-dark); border-color: rgba(214, 190, 134, 0.4); background: transparent; }
body.home header.site:not(.scrolled) .lxn-login:hover { border-color: var(--gold-dark); background: rgba(214, 190, 134, 0.08); }
body.home header.site:not(.scrolled) .lxn-avatar { color: var(--on-dark); border-color: rgba(214, 190, 134, 0.4); background: rgba(255, 255, 255, 0.04); }
}
/* Collapse to the slide-out drawer on tablet & mobile (premium whitespace) */
@media (max-width: 1080px) {
header.site nav { display: none !important; }
.nav-toggle { display: flex; }
}
@media (min-width: 1081px) {
.nav-toggle { display: none; }
.lxn-scrim, .lxn-drawer { display: none; }
}
/* Scrim + drawer */
.lxn-scrim {
position: fixed; inset: 0; z-index: 80; background: rgba(12, 10, 6, 0.5);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
opacity: 0; transition: opacity .32s var(--ease);
}
.lxn-scrim.is-open { opacity: 1; }
.lxn-drawer {
position: fixed; top: 0; right: 0; z-index: 90; height: 100%; width: min(384px, 87vw);
background: var(--porcelain); border-left: 1px solid var(--line);
box-shadow: -30px 0 90px -34px rgba(12, 10, 6, 0.55);
transform: translateX(100%); transition: transform .44s var(--ease);
display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 30px;
}
.lxn-drawer.is-open { transform: translateX(0); }
.lxn-drawer-head {
position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
padding: 20px clamp(22px, 5vw, 30px); border-bottom: 1px solid var(--line); background: var(--porcelain);
}
.lxn-drawer-brand { font-family: 'Cormorant Garamond', serif; font-size: 25px; font-weight: 600; color: var(--ink); }
.lxn-drawer-brand .dot { color: var(--gold); }
.lxn-drawer-close { background: none; border: 0; font-size: 30px; line-height: 1; color: var(--ink-2); cursor: pointer; width: 40px; height: 40px; }
.lxn-drawer-close:hover { color: var(--ink); }
.lxn-drawer-search {
display: flex; align-items: center; gap: 12px; margin: 18px clamp(22px, 5vw, 30px) 4px;
padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink-3); font-size: 14px;
transition: border-color .3s var(--ease), color .3s var(--ease);
}
.lxn-drawer-search svg { width: 18px; height: 18px; }
.lxn-drawer-search:hover { border-color: var(--champagne); color: var(--ink); }
.lxn-drawer-grp { padding: 16px clamp(22px, 5vw, 30px) 2px; }
.lxn-drawer-grp h4 { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 4px; }
.lxn-drawer-grp a, .lxn-drawer-soon {
display: flex; align-items: center; justify-content: space-between;
padding: 13px 0; border-bottom: 1px solid var(--line);
font-family: 'Cormorant Garamond', serif; font-size: 21px; color: var(--ink); transition: color .2s var(--ease);
}
.lxn-drawer-grp a:hover { color: var(--gold); }
.lxn-drawer-soon { color: var(--ink-3); }
.lxn-drawer-soon em { font-style: normal; font-family: 'Inter', sans-serif; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 8px; }
.lxn-drawer-acct { margin-top: auto; padding: 22px clamp(22px, 5vw, 30px) 0; display: flex; flex-direction: column; gap: 12px; }
.lxn-drawer-login, .lxn-drawer-join, .lxn-drawer-signout {
text-align: center; padding: 15px; border-radius: 2px; cursor: pointer;
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
}
.lxn-drawer-login { color: var(--ink); border: 1px solid var(--line-strong); background: transparent; }
.lxn-drawer-login:hover { border-color: var(--ink); color: var(--ink); }
.lxn-drawer-join { color: var(--obsidian); border: 0; background: linear-gradient(135deg, #E0CB95 0%, #C6AC74 52%, #B2974F 100%); }
.lxn-drawer-signout { color: var(--ink); border: 1px solid var(--line-strong); background: transparent; }
@media (prefers-reduced-motion: reduce) {
header.site .lxn-menu, .lxn-drawer, .lxn-scrim, header.site .lxn-chev { transition: none; }
}
/* ==========================================================================
DISCOVERY HOMEPAGE (v9) — live market rails powered by real platform data
(get_best_deals). Search-mode tabs, live pill, product/deal cards, category
tiles, skeletons. Nothing here is fabricated — values come from the API.
========================================================================== */
/* Hero search-mode tabs + image hint (over the dark hero) */
.lx-search-tabs { display: inline-flex; gap: 6px; margin: 0 auto 14px; padding: 4px; border: 1px solid rgba(214,190,134,0.24); border-radius: 999px; background: rgba(255,255,255,0.03); }
.lx-tab { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--on-dark-2); background: transparent; border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: color .25s var(--ease), background .25s var(--ease); }
.lx-tab:hover { color: var(--on-dark); }
.lx-tab.is-on { color: var(--obsidian); background: linear-gradient(135deg, #E0CB95, #C6AC74 55%, #B2974F); }
.lx-search-hint { margin: 14px auto 0; font-size: 13px; color: var(--on-dark-2); max-width: 460px; }
/* Live pill (replaces the illustrative teaser; filled with real counts) */
.lx-livepill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 32px; padding: 11px 20px; border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(255,255,255,0.02); font-size: 12.5px; color: var(--on-dark-2); }
.lx-livepill b { color: var(--gold-dark); font-weight: 600; }
/* Section rhythm for the discovery rails */
.lxd-sec[hidden] { display: none; }
.lxd-livedot-lab { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); }
.dark .lxd-livedot-lab { color: var(--on-dark-2); }
.lxd-note { margin-top: 28px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
/* Product / deal rail */
.lxd-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.lxd-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; color: inherit; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.lxd-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.dark .lxd-card { background: var(--obsidian-2); border-color: var(--line-dark); }
.lxd-card-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ivory); }
.dark .lxd-card-media { background: #211c14; }
.lxd-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.lxd-card:hover .lxd-card-media img { transform: scale(1.05); }
.lxd-card-media.lxd-noimg::after { content: "LuxScout"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: rgba(26,22,17,0.16); }
.lxd-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 11px; border-radius: 999px; background: rgba(20,17,11,0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--on-dark); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.lxd-tax { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(251,250,247,0.92); color: var(--gold); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.lxd-card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lxd-brand { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); }
.dark .lxd-brand { color: var(--gold-dark); }
.lxd-name { font-family: 'Cormorant Garamond', serif; font-size: 19px; line-height: 1.18; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.36em; }
.dark .lxd-name { color: var(--on-dark); }
.lxd-price { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.lxd-price b { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.dark .lxd-price b { color: var(--on-dark); }
.lxd-price span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
.lxd-meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dark .lxd-meta { border-top-color: var(--line-dark); }
.lxd-market { font-size: 12.5px; color: var(--ink-2); }
.dark .lxd-market { color: var(--on-dark-2); }
/* Country flags beside every market. Real flag images (not regional-indicator
emoji, which render as bare letters on Windows/most desktops). Sized in em so
they scale with the surrounding text on desktop, tablet and mobile. If a flag
fails to load, the ![]()
removes itself and the country name stands alone. */
.lx-flag {
display: inline-block;
width: 1.3em; height: 0.92em;
object-fit: cover;
vertical-align: -0.14em;
margin-right: 0.4em;
border-radius: 2px;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14);
background: rgba(0, 0, 0, 0.05);
}
/* In the product comparison cell (flex row with its own gap) the flag is larger
and the gap handles spacing, so drop the inline margin. */
.lxp-country .lx-flag { width: 1.55em; height: 1.08em; margin-right: 0; vertical-align: baseline; }
.lxd-save { font-size: 11px; font-weight: 600; color: var(--gold); letter-spacing: 0.02em; }
.lxd-time { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
.lxd-card:hover .lxd-name { color: var(--gold); }
.dark .lxd-card:hover .lxd-name { color: var(--gold-dark); }
/* Reveal-in for cards (set once data is in) */
.lxd-in { opacity: 0; transform: translateY(14px); animation: lxd-cardin .7s var(--ease) forwards; }
@keyframes lxd-cardin { to { opacity: 1; transform: none; } }
/* Skeleton loading */
.lxd-skel { pointer-events: none; }
.lxd-skel .lxd-card-media { background: linear-gradient(100deg, var(--ivory) 30%, #efe9dc 50%, var(--ivory) 70%); background-size: 200% 100%; animation: lxd-shimmer 1.3s infinite; }
.lxd-skel .lxd-card-body span { display: block; height: 12px; border-radius: 3px; background: var(--line); }
.lxd-skel .lxd-card-body span:first-child { width: 40%; }
.lxd-skel .lxd-card-body span:last-child { width: 75%; height: 18px; margin-top: 8px; }
@keyframes lxd-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Category tiles */
.lxd-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.lxd-cat { background: var(--paper); padding: clamp(26px, 3vw, 40px) 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: inherit; transition: background .35s var(--ease); }
.lxd-cat:hover { background: var(--ivory); }
.lxd-cat .g { font-size: 22px; color: var(--gold); transition: transform .4s var(--ease); }
.lxd-cat:hover .g { transform: translateY(-3px); }
.lxd-cat .t { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--ink); }
/* Offline fallback for the hero pill */
.lxd-offline .lx-tz-live { background: var(--ink-3); animation: none; }
@media (max-width: 920px) {
.lxd-rail { grid-template-columns: repeat(2, 1fr); }
.lxd-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.lxd-name { font-size: 18px; }
.lx-search-tabs { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.lxd-skel .lxd-card-media { animation: none; }
.lxd-in { opacity: 1; transform: none; animation: none; }
.lxd-card:hover { transform: none; }
}
/* ==========================================================================
PRODUCT COMPARISON PAGE (v10) — real global price intelligence per product
(compare_product_prices). Hero, market comparison table, same-brand/similar
rails reuse .lxd-card. Real data only; outbound links gated on approved
affiliate partners.
========================================================================== */
.lxp-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(30px, 4vw, 48px); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--porcelain), var(--ivory)); }
.lxp-crumb { display: block; margin-bottom: 24px; }
.lxp-crumb a { color: var(--gold); }
.lxp-crumb a:hover { color: var(--ink); }
.lxp-top { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.lxp-media { aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper); position: relative; }
.lxp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lxp-media.lxd-noimg::after { content: "LuxScout"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 30px; color: rgba(26,22,17,0.16); }
.lxp-brand { display: block; margin-bottom: 12px; }
.lxp-name { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.05; color: var(--ink); }
.lxp-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 18px 40px; margin-top: 28px; }
.lxp-stat { display: flex; flex-direction: column; gap: 5px; }
.lxp-stat .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); }
.lxp-stat .v { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2.4vw, 30px); color: var(--ink); }
.lxp-stat.hl .v { color: var(--gold); }
.lxp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.lxp-actions .btn { padding: 11px 20px; }
.lxp-actions #lxp-save.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.lxp-report { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; margin-left: auto; }
.lxp-report:hover { color: var(--ink-2); }
.lxp-disclaimer { margin-top: 18px; max-width: 60ch; }
/* Comparison table */
.lxp-table { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: var(--paper); }
.lxp-row { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 0.8fr 0.9fr; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.lxp-row:last-child { border-bottom: 0; }
.lxp-head-row { background: var(--ivory); }
.lxp-head-row .lxp-c { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); }
.lxp-row.best { background: var(--gold-wash); }
.lxp-country { font-family: 'Cormorant Garamond', serif; font-size: 19px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.lxp-tag { font-family: 'Inter', sans-serif; font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); border: 1px solid var(--champagne); border-radius: 999px; padding: 2px 8px; }
.lxp-retailer { font-size: 14px; color: var(--ink-2); }
.lxp-amt { font-size: 17px; font-weight: 600; color: var(--ink); }
.lxp-amt small { display: inline-block; margin-left: 7px; font-weight: 600; color: var(--gold); font-size: 11px; }
.lxp-stock { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.lxp-go { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); white-space: nowrap; }
.lxp-go:hover { color: var(--gold); }
.lxp-go.muted { color: var(--ink-3); }
@media (max-width: 860px) {
.lxp-top { grid-template-columns: 1fr; }
.lxp-media { max-width: 340px; }
.lxp-row { grid-template-columns: 1.2fr 1fr 0.9fr; }
.lxp-row .lxp-stock { display: none; }
.lxp-head-row .lxp-c:nth-child(4) { display: none; }
}
@media (max-width: 540px) {
.lxp-stats { grid-template-columns: 1fr 1fr; }
.lxp-row { grid-template-columns: 1.3fr 1fr 0.7fr; padding: 14px 16px; }
.lxp-row .lxp-retailer { display: none; }
.lxp-head-row .lxp-c:nth-child(2) { display: none; }
}
/* Instant loading: premium skeleton shimmer for the product comparison page. */
.lxp-skel { position: relative; overflow: hidden; background: var(--line); border-radius: 6px; vertical-align: middle; }
.lxp-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); animation: lxpShimmer 1.3s infinite; }
@keyframes lxpShimmer { 100% { transform: translateX(100%); } }
/* ============ Public SEARCH RESULTS (/results) — premium intelligence ============ */
.lxr-head { padding: clamp(34px,5.5vw,72px) 0 8px; }
.lxr-title { font-family:'Cormorant Garamond',serif; font-size:clamp(34px,5.2vw,60px); color:var(--ink); line-height:1.04; margin:12px 0 10px; }
.lxr-term { color:var(--ink-2); font-size:15px; }
.lxr-body { padding:14px 0 90px; display:flex; flex-direction:column; gap:18px; }
.lxr-summary { display:flex; gap:30px; align-items:stretch; }
.lxr-hero { position:relative; width:300px; height:300px; border:none; padding:0; border-radius:16px; overflow:hidden; background:var(--line); flex:none; cursor:zoom-in; }
.lxr-hero img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.lxr-hero:hover img { transform:scale(1.04); }
.lxr-zoom { position:absolute; right:12px; bottom:12px; width:34px; height:34px; border-radius:50%; background:rgba(26,22,17,.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; }
.lxr-identity { flex:1; min-width:0; display:flex; flex-direction:column; }
.lxr-pname { font-family:'Cormorant Garamond',serif; font-size:clamp(24px,3vw,36px); color:var(--ink); margin:8px 0 12px; line-height:1.08; }
.lxr-chips { display:flex; flex-wrap:wrap; gap:8px; }
.lxr-chip { font-size:11.5px; letter-spacing:.06em; color:var(--ink-2); background:var(--gold-wash); border:1px solid var(--line); border-radius:999px; padding:5px 12px; text-transform:capitalize; }
.lxr-chip-live { display:inline-flex; align-items:center; gap:6px; }
.lxr-desc { color:var(--ink-2); font-size:15px; margin-top:16px; line-height:1.6; }
.lxr-save { align-self:flex-start; margin-top:22px; background:linear-gradient(180deg,var(--gold-dark,#d6be86),var(--gold)); color:#221805; font-weight:700; font-size:26px; letter-spacing:.02em; padding:14px 22px; border-radius:12px; display:flex; flex-direction:column; line-height:1.05; }
.lxr-save span { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; opacity:.75; margin-top:4px; }
.lxr-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.lxr-stat { padding:18px 16px; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.lxr-stat .k { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin-bottom:8px; }
.lxr-stat .v { display:block; font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--ink); line-height:1; }
.lxr-stat.hl { background:var(--gold-wash); border-color:rgba(140,115,57,.28); }
.lxr-stat.hl .v { color:var(--gold); }
.lxr-reco { border:1px solid rgba(140,115,57,.3); background:linear-gradient(180deg,var(--gold-wash),transparent); }
.lxr-reco-head { margin-bottom:16px; }
.lxr-reco-badge { display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:#221805; background:linear-gradient(180deg,var(--gold-dark,#d6be86),var(--gold)); padding:7px 14px; border-radius:999px; }
.lxr-reco-body { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.lxr-reco-main { flex:1; min-width:240px; }
.lxr-reco-store { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.lxr-reco-store b { display:block; font-size:16px; color:var(--ink); }
.lxr-reco-store span { font-size:13px; color:var(--ink-2); }
.lxr-reasons { list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.lxr-reasons li { font-size:14px; color:var(--ink); display:flex; gap:8px; }
.lxr-reasons .ok { color:#2e9e5b; font-weight:700; }
.lxr-reco-cta { text-align:center; flex:none; }
.lxr-reco-price { font-family:'Cormorant Garamond',serif; font-size:38px; color:var(--gold); line-height:1; margin-bottom:14px; }
.lxr-reco-price span { display:block; font-family:'Inter',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-top:6px; }
.lxr-retailers { display:flex; flex-direction:column; }
.lxr-retailer { display:flex; align-items:center; gap:16px; padding:16px 4px; border-bottom:1px solid var(--line); }
.lxr-retailer:last-child { border-bottom:none; }
.lxr-logo { width:48px; height:48px; border-radius:10px; overflow:hidden; flex:none; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; }
.lxr-logo img { width:100%; height:100%; object-fit:contain; }
.lxr-logo.mono { background:var(--gold-wash); color:var(--gold); font-family:'Cormorant Garamond',serif; font-size:22px; }
.lxr-r-main { flex:1; min-width:0; }
.lxr-r-main b { display:block; font-size:14.5px; color:var(--ink); }
.lxr-r-meta { display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.lxr-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.lxr-b { font-size:10.5px; letter-spacing:.04em; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:3px 9px; display:inline-flex; align-items:center; gap:5px; }
.lxr-b.ok { color:#2e7d51; border-color:rgba(46,125,81,.3); }
.lxr-b.gold { color:var(--gold); border-color:rgba(140,115,57,.35); }
.lxr-tag { margin-left:8px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); border:1px solid var(--line-strong); border-radius:2px; padding:2px 6px; }
.lxr-r-price { text-align:right; flex:none; }
.lxr-r-price b { display:block; font-size:16px; color:var(--ink); }
.lxr-r-price span { font-size:11.5px; color:var(--ink-3); }
.lxr-view { padding:9px 15px; font-size:13px; }
.lxr-fresh .bs-live, .lxr-chip-live .bs-live, .lxr-b .bs-live { width:6px; height:6px; border-radius:50%; background:#2e9e5b; box-shadow:0 0 0 3px rgba(46,158,91,.16); display:inline-block; }
.lxr-alts { display:flex; gap:16px; overflow-x:auto; padding:4px 2px 10px; scroll-snap-type:x mandatory; }
.lxr-altcard { flex:0 0 236px; scroll-snap-align:start; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .3s,transform .3s; }
.lxr-altcard:hover { border-color:var(--gold); transform:translateY(-3px); }
.lxr-altmedia { width:100%; aspect-ratio:1/1; background:var(--line); overflow:hidden; }
.lxr-altmedia img { width:100%; height:100%; object-fit:cover; }
.lxr-altbody { padding:14px; }
.lxr-altname { font-family:'Cormorant Garamond',serif; font-size:17px; color:var(--ink); margin:4px 0 10px; line-height:1.15; }
.lxr-altprice { display:flex; align-items:baseline; gap:8px; }
.lxr-altprice b { font-size:17px; color:var(--ink); }
.lxr-altprice span { font-size:12px; color:var(--ink-3); }
.lxr-altcta { margin-top:12px; width:100%; text-align:center; padding:9px; font-size:13px; }
.lxr-lightbox { position:fixed; inset:0; z-index:200; background:rgba(20,17,12,.9); display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.lxr-lightbox img { max-width:92vw; max-height:92vh; border-radius:8px; }
.lxr-skelrow { display:flex; gap:24px; align-items:center; }
.site-foot { border-top:1px solid var(--line); padding:34px 0; color:var(--ink-3); }
@media (max-width:820px){ .lxr-stats{grid-template-columns:repeat(2,1fr);} .lxr-summary{flex-direction:column; gap:20px;} .lxr-hero{width:100%; height:auto; aspect-ratio:4/3;} }
@media (max-width:520px){ .lxr-retailer{flex-wrap:wrap;} .lxr-r-price{text-align:left;} .lxr-stat .v{font-size:26px;} }
/* results v3: counts · suggestions · smart filters · product grid · buying guide · AI · market insights */
.lxr-counts { display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font-size:14px; color:var(--ink-2); }
.lxr-counts b { color:var(--ink); font-weight:700; }
.lxr-counts .lxr-live { display:inline-flex; align-items:center; gap:6px; color:var(--ink-3); }
.lxr-sugg { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.lxr-schip { font-size:12.5px; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 14px; transition:border-color .2s,color .2s; }
.lxr-schip:hover { border-color:var(--gold); color:var(--gold); }
.lxr-filters { display:flex; flex-wrap:wrap; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
.lxr-fgroup { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.lxr-flabel { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin-right:2px; }
.lxr-fchip { font-size:12.5px; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer; transition:.15s; }
.lxr-fchip:hover { border-color:var(--gold); }
.lxr-fchip.active { background:var(--gold-wash); border-color:var(--gold); color:var(--gold); font-weight:600; }
.lxr-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:20px 0; }
.lxr-gcard { background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:border-color .3s,transform .3s,box-shadow .3s; display:block; }
.lxr-gcard:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(26,22,17,.3); }
.lxr-gmedia { position:relative; width:100%; aspect-ratio:1/1; background:var(--line); overflow:hidden; }
.lxr-gmedia img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.lxr-gcard:hover .lxr-gmedia img { transform:scale(1.05); }
.lxr-gbadge { position:absolute; top:10px; left:10px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; background:rgba(26,22,17,.72); color:#fff; padding:4px 9px; border-radius:999px; }
.lxr-gbody { padding:15px; }
.lxr-gname { font-family:'Cormorant Garamond',serif; font-size:19px; color:var(--ink); margin:4px 0 10px; line-height:1.15; min-height:44px; }
.lxr-gprice { display:flex; align-items:baseline; gap:6px; }
.lxr-gprice b { font-size:19px; color:var(--ink); }
.lxr-gprice span { font-size:13px; color:var(--ink-3); }
.lxr-gmeta { font-size:12.5px; color:var(--ink-2); margin-top:6px; }
.lxr-gsave { display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:var(--gold); background:var(--gold-wash); border-radius:999px; padding:4px 11px; }
.lxr-gcta { margin-top:14px; width:100%; text-align:center; padding:10px; font-size:13px; }
.lxr-guide-lede { font-size:16px; color:var(--ink); line-height:1.6; }
.lxr-guide-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px; }
.lxr-guide-grid > div { padding:16px; background:var(--gold-wash); border-radius:12px; }
.lxr-guide-grid span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-bottom:8px; }
.lxr-guide-grid b { font-family:'Cormorant Garamond',serif; font-size:26px; color:var(--ink); }
.lxr-guide-grid b.gold { color:var(--gold); }
.lxr-guide-vat { margin-top:16px; color:var(--gold); }
.lxr-ai { border:1px solid rgba(140,115,57,.28); }
.lxr-ai-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.lxr-ai-badge { font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--gold); }
.lxr-ai-head h3 { margin:0; }
.lxr-ai-list { list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.lxr-ai-list li { font-size:15px; color:var(--ink); line-height:1.55; padding-left:22px; position:relative; }
.lxr-ai-list li::before { content:'\2726'; position:absolute; left:0; color:var(--gold); }
.lxr-ai-note { margin-top:16px; }
.lxr-mi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.lxr-mi { padding:16px; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.lxr-mi span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-bottom:7px; }
.lxr-mi b { font-size:18px; color:var(--ink); }
@media (max-width:900px){ .lxr-grid{grid-template-columns:repeat(3,1fr);} .lxr-guide-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .lxr-grid{grid-template-columns:repeat(2,1fr);} .lxr-mi-grid{grid-template-columns:1fr 1fr;} .lxr-gname{min-height:0;} }
/* results hero: large image + gallery thumbs + specs + product selector */
.lxr-herogrid { display:flex; gap:34px; align-items:flex-start; }
.lxr-herocol { flex:none; width:340px; }
.lxr-herocol .lxr-hero { width:340px; height:340px; }
/* Gallery stage: holds the zoom button plus the arrows/counter that overlay it
(they cannot nest inside that