html { scroll-behavior: smooth; }
.hw-page {
--color-primary: #353c44;
--color-primary-dark: #1f2329;
--color-primary-light: #4a525c;
--color-bg: #ffffff;
--color-bg-soft: #f6f7f8;
--color-bg-darker: #e6e8ea;
--color-contrast-high: #1f2329;
--color-contrast-medium: #5a6068;
--color-contrast-low: #a8aeb5;
--color-border: #e7e9ec;
--nywd-green: #32908F;
--nywd-green-dark: #267676;
--nywd-accent-soft: #F5F3F1;
--nywd-muted: #F1F4F5;
--font-primary: 'EB Garamond', 'Times New Roman', serif;
--font-secondary: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #fff;
color: var(--color-primary);
overflow-x: hidden;
}
.hw-page *, .hw-page *::before, .hw-page *::after { box-sizing: border-box; }
.hw-page img, .hw-page svg { max-width: 100%; display: block; }
.hw-page ul, .hw-page ol { list-style: none; padding: 0; }
.hw-page a { color: inherit; text-decoration: none; }
/* ─────────────────────────────────────────────────────────────────
NYWD Blog — two distinct directions
.b1-* : "Dossier" (Suppliers blog) — left-aligned, sticky index,
numbered pillars, sober
.b2-* : "Playbook" (Amazon blog) — dark hero, metric tiles,
risk/advantage split, KPI ribbon
───────────────────────────────────────────────────────────────── */
/* ============================================================
SHARED HELPERS
============================================================ */
.blog-shell { background: #fff; }
.section-rule {
width: 56px;
height: 1.5px;
background: var(--nywd-green);
display: block;
margin: 0 0 1.25rem;
}
.kicker--green { color: var(--nywd-green); }
/* Buttons — ported from live nywd.com .btn .btn--primary .btn--md (codyhouse) */
.btn-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
font-family: var(--font-secondary);
font-size: 0.8125rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
line-height: 1;
background: var(--color-primary);
color: #fff;
border: 1px solid var(--color-primary);
border-radius: 4px;
transition: background .2s, border-color .2s;
}
.btn-pill:hover { background: hsl(210, 9%, 28%); border-color: hsl(210, 9%, 28%); }
.btn-pill--ghost {
background: transparent;
color: var(--color-primary);
}
.btn-pill--ghost:hover { background: var(--color-primary); color: #fff; }
.btn-pill--light {
background: #fff;
color: var(--color-primary);
border-color: #fff;
}
.btn-pill--light:hover { background: hsl(210, 8%, 92%); border-color: hsl(210, 8%, 92%); color: var(--color-primary); }
/* ============================================================
B1 — DOSSIER (Suppliers Blog)
============================================================ */
/* Mast head ─ asymmetric, dossier-style */
.b1-mast {
background: #fff;
border-bottom: 1px solid hsl(210, 8%, 90%);
padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
}
.b1-mast__inner {
max-width: 80rem;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
display: block;
align-items: end;
}
.b1-mast__crumbs {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-contrast-medium);
margin-bottom: 1.5rem;
}
.b1-mast__crumbs a:hover { color: var(--nywd-green); }
.b1-mast__crumbs .sep { margin: 0 0.5rem; opacity: 0.45; }
.b1-mast__serial {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 600;
margin-bottom: 0.75rem;
display: block;
}
.b1-mast h1 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(2.25rem, 5.4vw, 4.5rem);
line-height: 1.02;
letter-spacing: -0.018em;
margin-bottom: 1.5rem;
text-wrap: balance;
}
.b1-mast h1 em {
font-style: italic;
color: var(--nywd-green);
font-weight: 400;
}
.b1-mast__sub {
font-family: var(--font-primary);
font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
line-height: 1.55;
color: var(--color-contrast-medium);
max-width: 36rem;
}
.b1-mast__meta {
border-left: 2px solid var(--nywd-green);
padding-left: 1.25rem;
font-family: var(--font-secondary);
font-size: 0.8125rem;
color: var(--color-contrast-medium);
line-height: 1.7;
}
.b1-mast__meta dt {
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-primary);
font-weight: 600;
margin-top: 0.625rem;
}
.b1-mast__meta dt:first-child { margin-top: 0; }
@media (max-width: 900px) {
.b1-mast__inner { grid-template-columns: 1fr; gap: 2rem; }
.b1-mast__meta { border-left: 0; border-top: 1px solid hsl(210, 8%, 90%); padding: 1.25rem 0 0; }
}
/* Hero banner image */
.b1-banner {
max-width: 80rem;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b1-banner .img-slot { aspect-ratio: 24 / 9; border-radius: 0; }
@media (max-width: 700px) { .b1-banner .img-slot { aspect-ratio: 4 / 3; } }
/* Two-column body with sticky chapter index */
.b1-body {
max-width: 80rem;
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
display: grid;
grid-template-columns: 14rem minmax(0, 44rem);
gap: clamp(2rem, 6vw, 6rem);
justify-content: center;
}
.b1-toc {
position: sticky;
top: 7rem;
align-self: start;
font-family: var(--font-secondary);
font-size: 0.8125rem;
line-height: 1.5;
border-top: 1.5px solid var(--color-primary);
padding-top: 1rem;
}
.b1-toc__title {
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-primary);
font-weight: 700;
margin-bottom: 1rem;
}
.b1-toc ol { list-style: none; padding: 0; counter-reset: toc; }
.b1-toc ol li { counter-increment: toc; padding: 0.5rem 0; border-top: 1px solid hsl(210, 8%, 92%); }
.b1-toc ol li:first-child { border-top: 0; }
.b1-toc ol li a {
display: grid;
grid-template-columns: 1.75rem 1fr;
gap: 0.5rem;
color: var(--color-contrast-medium);
transition: color .15s;
}
.b1-toc ol li a::before {
content: counter(toc, decimal-leading-zero);
color: var(--nywd-green);
font-family: var(--font-primary);
font-style: italic;
}
.b1-toc ol li a:hover { color: var(--color-primary); }
@media (max-width: 900px) {
.b1-body { grid-template-columns: 1fr; }
.b1-toc { position: static; display: none; } /* hide on mobile to keep flow clean */
}
/* Article prose */
.b1-prose { font-family: var(--font-secondary); overflow-wrap: anywhere; word-break: normal; }
.b1-prose em, .b1-prose strong, .b1-prose code, .b1-prose a { overflow-wrap: break-word; }
.b1-prose > * + * { margin-top: 1.5rem; }
.b1-prose p {
font-size: 1.0625rem;
line-height: 1.8;
color: hsl(210, 9%, 24%);
}
.b1-prose .lede {
font-family: var(--font-primary);
font-size: clamp(1.25rem, 2vw, 1.5rem);
line-height: 1.5;
color: var(--color-primary);
font-weight: 400;
border-left: 3px solid var(--nywd-green);
padding-left: 1.5rem;
margin: 0 0 2rem;
}
.b1-prose .triplet {
font-family: var(--font-primary);
font-style: italic;
font-size: clamp(1.125rem, 1.6vw, 1.25rem);
color: var(--nywd-green);
line-height: 1.4;
}
.b1-prose h2 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.75rem, 2.8vw, 2.4rem);
line-height: 1.15;
letter-spacing: -0.01em;
margin-top: 4rem !important;
margin-bottom: 1rem;
scroll-margin-top: 6rem;
}
.b1-prose h2 .num {
display: block;
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 700;
margin-bottom: 0.625rem;
}
.b1-prose h3 {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1.0625rem;
letter-spacing: 0.04em;
margin-top: 2.5rem !important;
margin-bottom: 0.75rem;
}
.b1-prose ul {
list-style: none;
padding: 0;
margin: 1.25rem 0;
}
.b1-prose ul li {
position: relative;
padding-left: 1.5rem;
font-size: 1rem;
line-height: 1.7;
color: hsl(210, 9%, 24%);
margin-bottom: 0.5rem;
}
.b1-prose ul li::before {
content: '';
position: absolute;
left: 0; top: 0.7em;
width: 10px; height: 1.5px;
background: var(--nywd-green);
}
.b1-prose a.inline-link {
color: var(--color-primary);
text-decoration: none;
}
.b1-prose a.inline-link:hover { color: var(--nywd-green); }
/* Numbered pillar cards — distinct from D2's compact grid */
.b1-pillars { margin: 2.5rem 0 !important; }
.b1-pillar {
display: grid;
grid-template-columns: 4.5rem 1fr;
gap: 1.5rem;
padding: 2rem 0;
border-top: 1px solid hsl(210, 8%, 88%);
align-items: start;
}
.b1-pillar:last-child { border-bottom: 1px solid hsl(210, 8%, 88%); }
.b1-pillar__num {
font-family: var(--font-primary);
font-size: 3rem;
font-weight: 500;
line-height: 0.9;
color: var(--nywd-green);
font-feature-settings: "lnum";
}
.b1-pillar__num small {
display: block;
font-family: var(--font-secondary);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-contrast-medium);
font-weight: 600;
margin-top: 0.5rem;
}
.b1-pillar h3 {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1.5rem;
line-height: 1.2;
text-transform: none;
letter-spacing: -0.005em;
color: var(--color-primary);
margin: 0 0 0.75rem !important;
}
.b1-pillar p {
font-size: 0.9875rem;
line-height: 1.7;
color: hsl(210, 9%, 32%);
margin: 0;
}
.b1-pillar ul { margin: 0.875rem 0 0; }
/* Pull quote — full width breakout */
.b1-quote {
margin: 4.5rem -2rem !important;
padding: 3rem 2rem;
background: var(--nywd-accent-soft);
text-align: center;
border-radius: 0;
}
.b1-quote blockquote {
font-family: var(--font-primary);
font-style: italic;
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.35;
color: var(--color-primary);
max-width: 36rem;
margin: 0 auto;
letter-spacing: -0.005em;
}
.b1-quote cite {
display: block;
margin-top: 1.5rem;
font-family: var(--font-secondary);
font-style: normal;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 600;
}
/* Solution stack — feature blocks, asymmetric image left */
.b1-solution {
margin: 4.5rem auto !important;
max-width: 64rem;
padding: 0 clamp(1rem, 3vw, 2rem);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: center;
}
.b1-solution--reverse .b1-solution__media { order: 2; }
.b1-solution .img-slot { aspect-ratio: 4 / 5; }
.b1-solution__copy h3 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.2;
text-transform: none;
letter-spacing: -0.005em;
margin: 0.75rem 0 1rem !important;
}
.b1-solution__copy p {
font-size: 1rem;
line-height: 1.7;
color: hsl(210, 9%, 28%);
}
.b1-solution__copy .kicker { color: var(--nywd-green); }
@media (max-width: 760px) {
.b1-solution { grid-template-columns: 1fr; margin: 3rem 0 !important; }
.b1-solution--reverse .b1-solution__media { order: 0; }
}
/* Stats strip */
.b1-stats {
margin: 3rem 0 !important;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1.5px solid var(--color-primary);
border-bottom: 1.5px solid var(--color-primary);
}
.b1-stats__cell {
padding: 1.75rem 1rem;
text-align: center;
border-right: 1px solid hsl(210, 8%, 88%);
}
.b1-stats__cell:last-child { border-right: 0; }
.b1-stats__num {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(2rem, 3.6vw, 2.75rem);
color: var(--nywd-green);
line-height: 1;
letter-spacing: -0.01em;
}
.b1-stats__lab {
margin-top: 0.5rem;
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-contrast-medium);
font-weight: 600;
}
@media (max-width: 600px) {
.b1-stats { grid-template-columns: 1fr; }
.b1-stats__cell { border-right: 0; border-bottom: 1px solid hsl(210, 8%, 88%); }
.b1-stats__cell:last-child { border-bottom: 0; }
}
/* Comparison ledger */
.b1-ledger {
margin: 2rem 0 !important;
border: 1px solid hsl(210, 8%, 88%);
}
.b1-ledger__row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
border-bottom: 1px solid hsl(210, 8%, 92%);
}
.b1-ledger__row:last-child { border-bottom: 0; }
.b1-ledger__row > div {
padding: 1rem 1.25rem;
font-family: var(--font-secondary);
font-size: 0.95rem;
line-height: 1.5;
}
.b1-ledger__row > div + div {
border-left: 1px solid hsl(210, 8%, 92%);
}
.b1-ledger__row--head > div {
background: var(--nywd-muted);
font-weight: 600;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.b1-ledger__row--head > div:nth-child(3) {
background: var(--color-primary);
color: #fff;
}
.b1-ledger__row > div:nth-child(3) {
background: hsl(179, 35%, 96%);
color: var(--color-primary);
font-weight: 500;
}
.b1-ledger__row > div:nth-child(2) { color: var(--color-contrast-medium); }
@media (max-width: 600px) {
.b1-ledger__row > div { padding: 0.75rem 0.875rem; font-size: 0.8125rem; }
}
/* FAQ */
.b1-faq { margin: 2rem 0 !important; }
.b1-faq details {
border-top: 1px solid hsl(210, 8%, 88%);
padding: 1.25rem 0;
}
.b1-faq details:last-child { border-bottom: 1px solid hsl(210, 8%, 88%); }
.b1-faq summary {
font-family: var(--font-secondary);
font-weight: 500;
font-size: 1.0625rem;
color: var(--color-primary);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
line-height: 1.4;
}
.b1-faq summary::-webkit-details-marker { display: none; }
.b1-faq summary::after {
content: '+';
font-family: var(--font-primary);
font-size: 1.75rem;
line-height: 1;
color: var(--nywd-green);
transition: transform 0.25s ease;
flex-shrink: 0;
}
.b1-faq details[open] summary::after { content: "\2212"; }
.b1-faq details[open] summary { color: var(--nywd-green); }
.b1-faq p {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--color-contrast-medium);
margin-top: 0.875rem;
max-width: 60ch;
}
/* Inline CTA — dossier style: bordered, sober */
.b1-cta {
margin: 4rem 0 !important;
padding: clamp(2rem, 4vw, 3rem);
border: 1px solid var(--color-primary);
background: #fff;
text-align: center;
position: relative;
}
.b1-cta::before {
content: '';
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
width: 64px; height: 2px;
background: var(--nywd-green);
}
.b1-cta .label {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 700;
}
.b1-cta h4 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.2;
margin: 0.875rem 0 0.875rem;
color: var(--color-primary);
letter-spacing: -0.005em;
}
.b1-cta p {
color: var(--color-contrast-medium);
max-width: 38rem;
margin: 0 auto 1.75rem;
font-size: 1rem;
line-height: 1.65;
}
/* ============================================================
B2 — PLAYBOOK (Amazon Blog) — dark hero, KPI ribbon
============================================================ */
/* Dark hero with metric tiles */
.b2-hero {
background: var(--color-primary);
color: #fff;
padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
position: relative;
overflow: hidden;
}
.b2-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 80% 20%, hsla(179, 48%, 38%, 0.18), transparent 50%),
radial-gradient(ellipse at 10% 90%, hsla(179, 48%, 38%, 0.08), transparent 50%);
pointer-events: none;
}
.b2-hero__inner {
position: relative;
max-width: 80rem;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b2-hero__crumbs {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 1.75rem;
}
.b2-hero__crumbs a:hover { color: var(--nywd-green); }
.b2-hero__crumbs .sep { margin: 0 0.5rem; opacity: 0.5; }
.b2-hero__kicker {
display: inline-flex;
align-items: center;
gap: 0.625rem;
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 700;
margin-bottom: 1rem;
}
.b2-hero__kicker::before {
content: '';
width: 28px; height: 2px;
background: var(--nywd-green);
}
.b2-hero h1 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(2.25rem, 5.4vw, 4.5rem);
line-height: 1.05;
letter-spacing: -0.018em;
color: #fff;
margin-bottom: 1.5rem;
max-width: 22ch;
text-wrap: balance;
}
.b2-hero h1 em {
font-style: italic;
color: var(--nywd-green);
font-weight: 400;
}
.b2-hero__sub {
font-family: var(--font-primary);
font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
line-height: 1.55;
color: rgba(255,255,255,0.78);
max-width: 50rem;
margin-bottom: 2.5rem;
}
.b2-hero__tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255,255,255,0.12);
margin-top: 2rem;
}
.b2-hero__tile {
background: var(--color-primary);
padding: 1.5rem 1.25rem;
}
.b2-hero__tile__num {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
color: var(--nywd-green);
line-height: 1;
letter-spacing: -0.01em;
}
.b2-hero__tile__lab {
margin-top: 0.5rem;
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
font-weight: 600;
line-height: 1.4;
}
@media (max-width: 800px) {
.b2-hero__tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
.b2-hero__tiles { grid-template-columns: 1fr; gap: 0.625rem; }
}
/* Centered article container — wider than B1, more "report" */
.b2-body {
max-width: 56rem;
margin: 0 auto;
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) 0;
font-family: var(--font-secondary);
overflow-wrap: anywhere;
word-break: normal;
}
.b2-body em, .b2-body strong, .b2-body code, .b2-body a { overflow-wrap: break-word; }
.b2-body > * + * { margin-top: 1.5rem; }
.b2-body p {
font-size: 1.0625rem;
line-height: 1.8;
color: hsl(210, 9%, 24%);
}
.b2-body p.lede {
font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
line-height: 1.55;
color: var(--color-primary);
font-family: var(--font-primary);
font-weight: 400;
}
.b2-body h2 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.75rem, 2.8vw, 2.4rem);
line-height: 1.15;
letter-spacing: -0.01em;
margin-top: 4rem !important;
margin-bottom: 0.75rem;
}
.b2-body h2 .tag {
display: block;
margin-bottom: 0.875rem;
font-family: var(--font-secondary);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 700;
}
.b2-body h3 {
font-family: var(--font-secondary);
font-weight: 700;
font-size: 1.125rem;
margin-top: 2rem !important;
margin-bottom: 0.625rem;
color: var(--color-primary);
}
.b2-body ul:not(.b2-checklist):not(.b2-list-plain):not(.b2-split__list) {
list-style: none;
padding: 0;
margin: 1.25rem 0;
}
.b2-body ul:not(.b2-checklist):not(.b2-list-plain):not(.b2-split__list) li {
position: relative;
padding-left: 1.5rem;
font-size: 1rem;
line-height: 1.7;
color: hsl(210, 9%, 24%);
margin-bottom: 0.5rem;
}
.b2-body ul:not(.b2-checklist):not(.b2-list-plain):not(.b2-split__list) li::before {
content: '';
position: absolute;
left: 0; top: 0.7em;
width: 10px; height: 1.5px;
background: var(--nywd-green);
}
.b2-body a.inline-link {
color: var(--color-primary);
text-decoration: none;
}
.b2-body a.inline-link:hover { color: var(--nywd-green); }
/* Risk vs Advantage split — distinctive diagram */
.b2-split {
margin: 2.5rem 0 !important;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: hsl(210, 8%, 88%);
border: 1px solid hsl(210, 8%, 88%);
}
.b2-split__col {
background: #fff;
padding: 1.75rem 1.5rem;
}
.b2-split__col--bad {
background: hsl(0, 0%, 99%);
}
.b2-split__col--good {
background: hsl(179, 35%, 97%);
}
.b2-split__head {
display: flex;
align-items: center;
gap: 0.625rem;
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1.25rem;
padding-bottom: 0.875rem;
border-bottom: 1px solid hsl(210, 8%, 92%);
}
.b2-split__col--bad .b2-split__head { color: hsl(0, 65%, 45%); }
.b2-split__col--good .b2-split__head { color: var(--nywd-green); }
.b2-split__head .ico {
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
}
.b2-split__col--bad .b2-split__head .ico { background: hsl(0, 65%, 96%); color: hsl(0, 65%, 45%); }
.b2-split__col--good .b2-split__head .ico { background: hsl(179, 40%, 92%); color: var(--nywd-green); }
.b2-split__list {
list-style: none;
padding: 0;
margin: 0;
font-family: var(--font-secondary);
font-size: 0.95rem;
line-height: 1.6;
}
.b2-split__list { font-size: 0.95rem; line-height: 1.55; }
.b2-split__list li {
padding: 0.45rem 0 0.45rem 1.6rem;
position: relative;
color: hsl(210, 9%, 28%);
}
.b2-split__list li::before {
position: absolute;
left: 0;
top: 0.45rem;
width: 1.2rem;
text-align: left;
font-family: var(--font-secondary);
font-weight: 700;
line-height: 1.55;
font-size: 1rem;
}
.b2-split__col--bad .b2-split__list li::before {
content: '\2717';
color: hsl(0, 65%, 50%);
}
.b2-split__col--good .b2-split__list li::before {
content: '\2713';
color: var(--nywd-green);
}
@media (max-width: 700px) { .b2-split { grid-template-columns: 1fr; } }
/* Compliance checklist */
.b2-checklist {
list-style: none;
padding: 0;
margin: 1.5rem 0 !important;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem 1.25rem;
}
.b2-checklist li {
display: grid;
grid-template-columns: 1.5rem 1fr;
gap: 0.625rem;
align-items: start;
padding: 0.875rem 1rem;
background: var(--nywd-muted);
border-left: 2px solid var(--nywd-green);
font-size: 0.95rem;
line-height: 1.45;
color: hsl(210, 9%, 24%);
}
.b2-checklist li::before {
content: "\2713";
color: var(--nywd-green);
font-weight: 700;
font-size: 0.95rem;
line-height: 1.45;
}
@media (max-width: 600px) { .b2-checklist { grid-template-columns: 1fr; } }
/* Category cards — horizontal grid with image slots */
.b2-cats {
margin: 2.5rem 0 !important;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.b2-cat {
background: #fff;
border: 1px solid hsl(210, 8%, 90%);
overflow: hidden;
display: flex;
flex-direction: column;
}
.b2-cat .img-slot {
aspect-ratio: 16 / 10;
border-radius: 0;
}
.b2-cat__body { padding: 1.25rem 1.25rem 1.5rem; }
.b2-cat__name {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1.25rem;
margin: 0 0 0.5rem;
color: var(--color-primary);
}
.b2-cat__name .num {
font-family: var(--font-primary);
font-style: italic;
color: var(--nywd-green);
margin-right: 0.625rem;
}
.b2-cat__desc {
font-family: var(--font-secondary);
font-size: 0.9375rem;
line-height: 1.6;
color: hsl(210, 9%, 32%);
}
@media (max-width: 700px) { .b2-cats { grid-template-columns: 1fr; } }
/* KPI ribbon — distinctive horizontal performance bars */
.b2-kpi {
margin: 3rem 0 !important;
background: var(--nywd-accent-soft);
padding: 2rem 1.75rem;
border-left: 3px solid var(--nywd-green);
}
.b2-kpi__head {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 700;
margin-bottom: 0.5rem;
}
.b2-kpi__title {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
line-height: 1.2;
margin-bottom: 1.5rem;
color: var(--color-primary);
letter-spacing: -0.005em;
}
.b2-kpi__bars { display: grid; gap: 1rem; }
.b2-kpi__bar {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
}
.b2-kpi__bar__row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-secondary);
}
.b2-kpi__bar__name { font-size: 0.95rem; font-weight: 600; color: var(--color-primary); }
.b2-kpi__bar__val {
font-family: var(--font-primary);
font-style: italic;
font-size: 0.95rem;
color: var(--nywd-green);
}
.b2-kpi__bar__track {
width: 100%;
height: 6px;
background: rgba(0,0,0,0.06);
overflow: hidden;
border-radius: 999px;
}
.b2-kpi__bar__fill {
height: 100%;
background: var(--nywd-green);
border-radius: 999px;
}
.b2-kpi__bar__cap {
font-size: 0.85rem;
color: var(--color-contrast-medium);
line-height: 1.55;
}
/* Pivot — Traditional vs NYWD as pill chips, vertical stack (different from D2 table) */
.b2-pivot {
margin: 2.5rem 0 !important;
display: grid;
grid-template-columns: 1fr;
gap: 0.875rem;
}
.b2-pivot__row {
display: grid;
grid-template-columns: 1fr 1.25rem 1fr;
gap: 1rem;
align-items: center;
}
.b2-pivot__chip {
padding: 0.875rem 1.125rem;
font-family: var(--font-secondary);
font-size: 0.9375rem;
line-height: 1.45;
}
.b2-pivot__chip--bad {
background: #fff;
border: 1px solid hsl(210, 8%, 88%);
color: hsl(210, 9%, 32%);
text-decoration: line-through;
text-decoration-color: hsl(0, 50%, 60%);
text-decoration-thickness: 1.5px;
}
.b2-pivot__chip--good {
background: var(--color-primary);
color: #fff;
border: 1px solid var(--color-primary);
font-weight: 500;
}
.b2-pivot__chip--good b { color: var(--nywd-green); font-weight: 600; }
.b2-pivot__arrow {
text-align: center;
color: var(--nywd-green);
font-family: var(--font-primary);
font-size: 1.25rem;
line-height: 1;
}
@media (max-width: 600px) {
.b2-pivot__row { grid-template-columns: 1fr; gap: 0.25rem; }
.b2-pivot__arrow { display: none; }
.b2-pivot__chip--good { margin-bottom: 0.25rem; }
}
/* Tech panel — for API/EDI section */
.b2-tech {
margin: 3rem 0 !important;
background: var(--color-primary);
color: #fff;
padding: clamp(2rem, 4vw, 2.75rem);
border-radius: var(--radius-lg);
}
.b2-tech > div { max-width: 60rem; }
.b2-tech__head {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 700;
}
.b2-tech h3 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.5rem, 2.4vw, 1.875rem);
line-height: 1.2;
margin: 0.625rem 0 1rem;
color: #fff;
letter-spacing: -0.005em;
}
.b2-tech p {
font-family: var(--font-secondary);
font-size: 0.95rem;
line-height: 1.65;
color: rgba(255,255,255,0.75);
margin: 0;
}
.b2-tech ul {
list-style: none;
padding: 0;
margin: 1rem 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.b2-tech ul li {
padding: 0.625rem 0.875rem !important;
border: 1px solid rgba(255,255,255,0.18);
font-family: var(--font-secondary);
font-size: 0.85rem;
color: #fff !important;
text-align: center;
border-radius: 999px;
}
/* override .b2-body inherited dark-text + dash bullet */
.b2-body .b2-tech ul li::before { display: none !important; }
.b2-tech__badge {
font-family: var(--font-primary);
font-style: italic;
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(--nywd-green);
line-height: 0.9;
text-align: right;
}
.b2-tech__badge small {
display: block;
font-family: var(--font-secondary);
font-style: normal;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-top: 0.5rem;
font-weight: 600;
}
@media (max-width: 700px) {
.b2-tech ul { grid-template-columns: 1fr; }
}
/* FAQ */
.b2-faq { margin: 2rem 0 !important; }
.b2-faq details {
border: 1px solid hsl(210, 8%, 88%);
margin-bottom: 0.75rem;
background: #fff;
}
.b2-faq summary {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1rem;
color: var(--color-primary);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
line-height: 1.4;
padding: 1.25rem 1.5rem;
}
.b2-faq summary::-webkit-details-marker { display: none; }
.b2-faq summary::after {
content: "\2193";
color: var(--nywd-green);
font-weight: 700;
transition: transform 0.25s ease;
flex-shrink: 0;
}
.b2-faq details[open] summary::after { transform: rotate(180deg); }
.b2-faq details[open] summary { background: var(--nywd-accent-soft); }
.b2-faq p {
font-family: var(--font-secondary);
font-size: 0.9375rem;
line-height: 1.7;
color: var(--color-contrast-medium);
padding: 0 1.5rem 1.25rem;
margin: 0;
max-width: 60ch;
}
/* Final CTA — full-width black */
.b2-cta {
margin: 5rem 0 0 !important;
background: var(--color-primary);
color: #fff;
padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
text-align: center;
position: relative;
overflow: hidden;
}
.b2-cta::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80px; height: 3px;
background: var(--nywd-green);
}
.b2-cta .label {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 700;
}
.b2-cta h4 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.75rem, 3.4vw, 2.75rem);
line-height: 1.15;
margin: 1rem auto 1rem;
color: #fff;
letter-spacing: -0.005em;
max-width: 24ch;
text-wrap: balance;
}
.b2-cta p {
color: rgba(255,255,255,0.78);
max-width: 42rem;
margin: 0 auto 2rem;
font-size: 1.0625rem;
line-height: 1.65;
}
/* Reading progress (shared) — different colour for B2 (green-on-dark) */
.reading-progress--b2 { background: var(--nywd-green); }
/* ============================================================
B3 — LOOKBOOK (Polarized Sunglasses)
Cream editorial, serif-led, oversized typography
============================================================ */
.b3 { background: #f5f3f1; color: #1f2329; }
.b3-hero {
padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.b3-hero__inner {
max-width: 72rem;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b3-hero__eyebrow {
font-family: var(--font-secondary);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(210, 9%, 28%);
font-weight: 600;
margin-bottom: 1.5rem;
}
.b3-hero h1 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(2.5rem, 6.4vw, 5rem);
line-height: 1;
letter-spacing: -0.022em;
margin: 0 0 1.5rem;
text-wrap: balance;
}
.b3-hero h1 em {
font-style: italic;
color: hsl(210, 9%, 28%);
font-weight: 400;
}
.b3-hero__sub {
font-family: var(--font-primary);
font-style: italic;
font-size: clamp(1.125rem, 1.8vw, 1.5rem);
line-height: 1.4;
color: hsl(210, 9%, 24%);
max-width: 44rem;
margin: 0 0 2rem;
}
.b3-hero__meta {
font-family: var(--font-secondary);
font-size: 0.9rem;
color: hsl(210, 9%, 36%);
border-top: 1px solid rgba(0,0,0,0.12);
padding-top: 1.25rem;
display: flex;
gap: 0.75rem;
align-items: center;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.b3-hero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.4; }
/* Feel-the-difference comparison */
.b3-compare {
max-width: 72rem;
margin: 4rem auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 2rem;
align-items: center;
}
.b3-compare__panel { padding: 2.5rem 1.5rem; text-align: center; }
.b3-compare__panel--without { background: #d8d0c4; border-radius: 12px; }
.b3-compare__panel--with { background: #1f2329; color: #f5f3f1; border-radius: 12px; }
.b3-compare__lab {
font-family: var(--font-secondary);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
opacity: 0.7;
margin-bottom: 1rem;
}
.b3-compare__t {
font-family: var(--font-primary);
font-style: italic;
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.2;
}
.b3-compare__arrow {
font-family: var(--font-primary);
font-style: italic;
font-size: 2rem;
color: hsl(210, 9%, 28%);
}
@media (max-width: 760px) {
.b3-compare { grid-template-columns: 1fr; gap: 1rem; }
.b3-compare__arrow { transform: rotate(90deg); padding: 0.5rem; }
}
/* Body container — narrower for editorial reading */
.b3-body {
max-width: 48rem;
margin: 0 auto;
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
font-family: var(--font-secondary);
}
.b3-body > * + * { margin-top: 1.5rem; }
.b3-body p {
font-size: 1.0625rem;
line-height: 1.85;
color: hsl(210, 9%, 22%);
}
.b3-body p.lede {
font-family: var(--font-primary);
font-style: italic;
font-size: clamp(1.25rem, 2vw, 1.625rem);
line-height: 1.45;
color: hsl(210, 9%, 18%);
border-left: 2px solid hsl(210, 9%, 18%);
padding-left: 1.5rem;
margin: 1.5rem 0 2rem;
}
.b3-body h2 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.875rem, 3.2vw, 2.5rem);
line-height: 1.15;
letter-spacing: -0.012em;
margin: 4rem 0 1rem !important;
}
.b3-body h2::before {
content: '';
display: block;
width: 40px;
height: 1px;
background: hsl(210, 9%, 18%);
margin-bottom: 1.25rem;
}
.b3-body h3 {
font-family: var(--font-primary);
font-style: italic;
font-weight: 500;
font-size: 1.375rem;
margin: 2rem 0 0.5rem !important;
color: hsl(210, 9%, 18%);
}
.b3-body ul { list-style: none; padding: 0; margin: 1.25rem 0; }
.b3-body ul li {
position: relative;
padding-left: 1.5rem;
font-size: 1.0625rem;
line-height: 1.7;
margin-bottom: 0.5rem;
}
.b3-body ul li::before {
content: "\2014";
position: absolute;
left: 0;
color: hsl(210, 9%, 28%);
}
/* Best-sellers gallery — alternating large editorial spreads */
.b3-gallery {
max-width: 72rem;
margin: 4rem auto !important;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b3-gallery__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
margin-bottom: 5rem;
}
.b3-gallery__row:nth-child(even) .b3-gallery__media { order: 2; }
.b3-gallery__media {
aspect-ratio: 4 / 5;
background: #e6dfd1;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.b3-gallery__media img { width: 100%; height: 100%; object-fit: cover; }
.b3-gallery__copy .b3-gallery__num {
font-family: var(--font-primary);
font-style: italic;
font-size: clamp(3rem, 6vw, 5rem);
line-height: 0.9;
color: hsl(210, 9%, 18%);
margin: 0 0 1rem;
}
.b3-gallery__copy h3 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.5rem, 2.8vw, 2.125rem);
line-height: 1.15;
letter-spacing: -0.008em;
margin: 0 0 1rem !important;
color: hsl(210, 9%, 14%);
}
.b3-gallery__copy p {
font-family: var(--font-secondary);
font-size: 1rem;
line-height: 1.75;
color: hsl(210, 9%, 28%);
margin-bottom: 1rem;
}
.b3-gallery__role {
font-family: var(--font-secondary);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: hsl(210, 9%, 28%);
font-weight: 700;
padding-top: 1rem;
border-top: 1px solid rgba(0,0,0,0.12);
margin-top: 1.25rem;
}
.b3-gallery__cta {
display: inline-block;
margin-top: 1rem;
font-family: var(--font-secondary);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
color: hsl(210, 9%, 14%);
border-bottom: 1px solid hsl(210, 9%, 14%);
padding-bottom: 2px;
}
@media (max-width: 760px) {
.b3-gallery__row { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
.b3-gallery__row:nth-child(even) .b3-gallery__media { order: 0; }
}
/* Margin big-number callout */
.b3-margin {
max-width: 72rem;
margin: 5rem auto !important;
padding: 4rem clamp(1.25rem, 4vw, 3rem);
background: #1f2329;
color: #f5f3f1;
text-align: center;
border-radius: 4px;
}
.b3-margin__big {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(5rem, 14vw, 11rem);
line-height: 0.9;
letter-spacing: -0.04em;
margin: 0 0 1rem;
}
.b3-margin__big em { font-style: italic; color: #d4cdbf; font-size: 0.45em; vertical-align: middle; }
.b3-margin__lab {
font-family: var(--font-secondary);
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 700;
color: rgba(255,255,255,0.7);
margin-bottom: 2rem;
}
.b3-margin__desc {
font-family: var(--font-primary);
font-style: italic;
font-size: clamp(1.125rem, 1.8vw, 1.5rem);
line-height: 1.5;
max-width: 36rem;
margin: 0 auto;
color: rgba(255,255,255,0.85);
}
/* Seasonality strip */
.b3-season {
max-width: 72rem;
margin: 4rem auto !important;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b3-season__strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 2rem;
position: relative;
}
.b3-season__strip::before {
content: '';
position: absolute;
top: 1rem;
left: 0;
right: 0;
height: 1px;
background: rgba(0,0,0,0.15);
z-index: 0;
}
.b3-season__cell {
position: relative;
text-align: center;
background: #f5f3f1;
padding: 1.75rem 0.5rem 0;
}
.b3-season__cell::before {
content: '';
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: hsl(210, 9%, 18%);
margin: 0 auto 1.25rem;
position: relative;
z-index: 1;
}
.b3-season__season {
font-family: var(--font-primary);
font-style: italic;
font-size: 1.25rem;
color: hsl(210, 9%, 14%);
margin-bottom: 0.5rem;
}
.b3-season__demand {
font-family: var(--font-secondary);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: hsl(210, 9%, 28%);
margin-bottom: 0.5rem;
}
.b3-season__desc {
font-size: 0.875rem;
line-height: 1.5;
color: hsl(210, 9%, 32%);
}
@media (max-width: 760px) { .b3-season__strip { grid-template-columns: 1fr 1fr; } }
/* Supplier criteria — clean numbered list */
.b3-criteria {
max-width: 48rem;
margin: 3rem auto !important;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
counter-reset: b3crit;
}
.b3-criteria__item {
display: grid;
grid-template-columns: 3.5rem 1fr;
gap: 1.5rem;
padding: 1.75rem 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
counter-increment: b3crit;
}
.b3-criteria__item:first-child { border-top: 1px solid rgba(0,0,0,0.1); }
.b3-criteria__item::before {
content: counter(b3crit, decimal-leading-zero);
font-family: var(--font-primary);
font-style: italic;
font-size: 1.5rem;
color: hsl(210, 9%, 28%);
line-height: 1.2;
}
.b3-criteria__item h4 {
font-family: var(--font-secondary);
font-weight: 700;
font-size: 1.0625rem;
margin: 0 0 0.5rem;
color: hsl(210, 9%, 14%);
}
.b3-criteria__item p {
font-size: 0.9375rem;
line-height: 1.65;
color: hsl(210, 9%, 32%);
margin: 0;
}
/* Mix bars */
.b3-mix {
max-width: 48rem;
margin: 2rem auto !important;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.b3-mix__bar {
margin-bottom: 1.5rem;
}
.b3-mix__bar__row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.b3-mix__bar__name {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1rem;
}
.b3-mix__bar__pct {
font-family: var(--font-primary);
font-style: italic;
font-size: 1.25rem;
color: hsl(210, 9%, 28%);
}
.b3-mix__bar__track {
height: 8px;
background: rgba(0,0,0,0.06);
border-radius: 999px;
overflow: hidden;
}
.b3-mix__bar__fill {
height: 100%;
background: hsl(210, 9%, 18%);
border-radius: 999px;
}
.b3-mix__bar__desc {
margin-top: 0.5rem;
font-size: 0.9375rem;
color: hsl(210, 9%, 32%);
}
/* FAQ override for B3 lookbook */
.b3-body .b2-faq { margin: 2rem 0; }
.b3-body .b2-faq details { background: #faf8f5; border-color: rgba(0,0,0,0.08); }
/* ============================================================
B4 — TREND REPORT (Eyewear Trends 2026)
Magazine-style with huge year numerals + indexed sections
============================================================ */
.b4 { background: #ffffff; color: #1f2329; }
.b4-cover {
padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
border-bottom: 2px solid #1f2329;
}
.b4-cover__inner {
max-width: 80rem;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b4-cover__eyebrow {
font-family: var(--font-secondary);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(210, 9%, 28%);
font-weight: 700;
margin-bottom: 1.5rem;
}
.b4-cover__layout {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: end;
}
.b4-cover__year {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(8rem, 22vw, 18rem);
line-height: 0.85;
letter-spacing: -0.05em;
color: #1f2329;
}
.b4-cover__year em {
font-style: italic;
font-size: 0.5em;
vertical-align: top;
display: inline-block;
line-height: 1;
color: hsl(210, 9%, 30%);
}
.b4-cover h1 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.875rem, 4vw, 3rem);
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0 0 1.25rem;
}
.b4-cover h1 em { font-style: italic; color: hsl(210, 9%, 30%); }
.b4-cover__sub {
font-family: var(--font-secondary);
font-size: 1.0625rem;
line-height: 1.6;
color: hsl(210, 9%, 30%);
max-width: 36rem;
}
.b4-cover__meta {
font-family: var(--font-secondary);
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: hsl(210, 9%, 36%);
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(0,0,0,0.12);
}
@media (max-width: 800px) {
.b4-cover__layout { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.b4-cover__year { font-size: clamp(6rem, 26vw, 12rem); }
}
/* Table of contents */
.b4-toc {
max-width: 80rem;
margin: 3rem auto 5rem !important;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b4-toc__head {
font-family: var(--font-secondary);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(210, 9%, 28%);
font-weight: 700;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #1f2329;
}
.b4-toc__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.875rem 3rem;
}
.b4-toc__grid a {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: 1rem;
padding: 0.5rem 0;
border-bottom: 1px dotted rgba(0,0,0,0.15);
font-family: var(--font-secondary);
color: hsl(210, 9%, 18%);
align-items: baseline;
}
.b4-toc__grid a::before {
content: attr(data-n);
font-family: var(--font-primary);
font-style: italic;
color: hsl(210, 9%, 30%);
font-size: 1rem;
}
@media (max-width: 700px) { .b4-toc__grid { grid-template-columns: 1fr; } }
/* Body intro */
.b4-intro {
max-width: 56rem;
margin: 0 auto 4rem !important;
padding: 0 clamp(1.25rem, 4vw, 3rem);
font-family: var(--font-secondary);
}
.b4-intro .lede {
font-family: var(--font-primary);
font-style: italic;
font-size: clamp(1.375rem, 2.4vw, 1.875rem);
line-height: 1.35;
color: hsl(210, 9%, 14%);
margin: 0 0 1.5rem;
}
.b4-intro p {
font-size: 1.0625rem;
line-height: 1.8;
color: hsl(210, 9%, 24%);
margin-bottom: 1rem;
}
/* Approach box */
.b4-approach {
max-width: 80rem;
margin: 4rem auto !important;
padding: 3rem clamp(1.25rem, 4vw, 3rem);
background: #f5f3f1;
border-top: 1px solid #1f2329;
border-bottom: 1px solid #1f2329;
}
.b4-approach__inner {
max-width: 56rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.b4-approach h3 {
font-family: var(--font-primary);
font-style: italic;
font-weight: 500;
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
margin: 0 0 1rem;
}
.b4-approach ul { list-style: none; padding: 0; margin: 0; }
.b4-approach li {
padding: 0.625rem 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
font-family: var(--font-secondary);
font-size: 0.9375rem;
color: hsl(210, 9%, 24%);
}
.b4-approach li:last-child { border-bottom: 0; }
@media (max-width: 700px) { .b4-approach__inner { grid-template-columns: 1fr; gap: 2rem; } }
/* Trend entries — full-width report rows */
.b4-trends {
max-width: 80rem;
margin: 4rem auto !important;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b4-trend {
display: grid;
grid-template-columns: 8rem 1fr;
gap: clamp(1.5rem, 4vw, 4rem);
padding: 3rem 0;
border-top: 1px solid #1f2329;
align-items: start;
}
.b4-trend:last-child { border-bottom: 1px solid #1f2329; }
.b4-trend__num {
font-family: var(--font-primary);
font-weight: 500;
font-style: italic;
font-size: clamp(4rem, 10vw, 7rem);
line-height: 0.9;
color: #1f2329;
}
.b4-trend__body h3 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.625rem, 2.8vw, 2.25rem);
line-height: 1.15;
letter-spacing: -0.008em;
margin: 0 0 1rem;
color: hsl(210, 9%, 14%);
}
.b4-trend__body p {
font-family: var(--font-secondary);
font-size: 1rem;
line-height: 1.75;
color: hsl(210, 9%, 28%);
margin-bottom: 1rem;
}
.b4-trend__meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px dotted rgba(0,0,0,0.18);
}
.b4-trend__lab {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: hsl(210, 9%, 30%);
margin-bottom: 0.625rem;
}
.b4-trend__list { list-style: none; padding: 0; margin: 0; }
.b4-trend__list li {
font-family: var(--font-secondary);
font-size: 0.9rem;
line-height: 1.5;
color: hsl(210, 9%, 24%);
padding: 0.25rem 0;
padding-left: 1rem;
position: relative;
}
.b4-trend__list li::before {
content: "\00b7";
position: absolute;
left: 0;
color: hsl(210, 9%, 30%);
font-weight: 700;
}
.b4-trend__strategy {
font-size: 0.9rem;
line-height: 1.55;
color: hsl(210, 9%, 24%);
}
@media (max-width: 700px) {
.b4-trend { grid-template-columns: 1fr; gap: 0.5rem; }
.b4-trend__meta { grid-template-columns: 1fr; gap: 1rem; }
}
/* Inventory mix horizontal bar */
.b4-mix {
max-width: 80rem;
margin: 5rem auto !important;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b4-mix__head {
font-family: var(--font-secondary);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(210, 9%, 28%);
font-weight: 700;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #1f2329;
}
.b4-mix h2 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.875rem, 3.2vw, 2.5rem);
line-height: 1.15;
letter-spacing: -0.012em;
margin: 0 0 2rem;
}
.b4-mix__bar {
height: 64px;
display: flex;
border-radius: 4px;
overflow: hidden;
margin-bottom: 1.5rem;
}
.b4-mix__seg--core { background: #1f2329; color: #f5f3f1; flex: 55; }
.b4-mix__seg--premium { background: #5a6068; color: #f5f3f1; flex: 25; }
.b4-mix__seg--trend { background: #a8aeb5; color: #1f2329; flex: 20; }
.b4-mix__seg {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: var(--font-secondary);
text-align: center;
padding: 0 0.5rem;
}
.b4-mix__seg__pct { font-family: var(--font-primary); font-style: italic; font-size: 1.125rem; line-height: 1; }
.b4-mix__seg__lab { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-top: 0.25rem; opacity: 0.8; }
.b4-mix__legend {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
font-family: var(--font-secondary);
}
.b4-mix__legend > div { font-size: 0.9rem; line-height: 1.55; color: hsl(210, 9%, 28%); }
.b4-mix__legend strong { color: hsl(210, 9%, 14%); display: block; margin-bottom: 0.25rem; }
@media (max-width: 700px) { .b4-mix__legend { grid-template-columns: 1fr; gap: 0.75rem; } }
/* Closing report sections */
.b4-section {
max-width: 56rem;
margin: 4rem auto !important;
padding: 0 clamp(1.25rem, 4vw, 3rem);
font-family: var(--font-secondary);
}
.b4-section h2 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.625rem, 2.8vw, 2.25rem);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 1rem;
}
.b4-section h2::before {
content: '';
display: block;
width: 40px;
height: 1px;
background: #1f2329;
margin-bottom: 1.25rem;
}
.b4-section p {
font-size: 1.0625rem;
line-height: 1.8;
color: hsl(210, 9%, 24%);
margin-bottom: 1rem;
}
.b4-section ul { list-style: none; padding: 0; margin: 1.25rem 0; }
.b4-section ul li {
padding: 0.625rem 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
font-size: 1rem;
color: hsl(210, 9%, 22%);
}
.b4-section ul li:last-child { border-bottom: 0; }
.b4-section .b2-faq details { background: #f5f3f1; border-color: rgba(0,0,0,0.08); }
/* ============================================================
B5 — CHART REPORT (Best Selling Wholesale Sunglasses 2026)
White editorial with heavy hairline rule system,
sales-ledger / industry-report feel.
============================================================ */
.b5 { background: #fff; color: #1f2329; }
.b5-hero {
border-top: 1.5px solid #1f2329;
border-bottom: 1px solid rgba(0,0,0,0.1);
padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}
.b5-hero__inner {
max-width: 78rem;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b5-hero__strap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem 2rem;
border-bottom: 1px solid rgba(0,0,0,0.12);
padding-bottom: 1rem;
margin-bottom: 2rem;
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-contrast-medium);
font-weight: 600;
}
.b5-hero__strap strong { color: #1f2329; }
.b5-hero h1 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(2.25rem, 5.4vw, 4.25rem);
line-height: 1.04;
letter-spacing: -0.015em;
color: #1f2329;
margin: 0 0 1.25rem;
text-wrap: balance;
max-width: 24ch;
}
.b5-hero h1 em { font-style: italic; color: hsl(210, 9%, 28%); font-weight: 400; }
.b5-hero__sub {
font-family: var(--font-secondary);
font-size: 1.0625rem;
line-height: 1.65;
color: hsl(210, 9%, 25%);
max-width: 44rem;
margin: 0 0 1.5rem;
}
.b5-hero__byline {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-contrast-medium);
font-weight: 600;
}
/* Body container */
.b5-body {
max-width: 78rem;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.b5-section {
padding: clamp(3rem, 6vw, 4.5rem) 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.b5-section:last-of-type { border-bottom: 0; }
.b5-section__num {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-contrast-medium);
font-weight: 700;
margin-bottom: 0.875rem;
}
.b5-section h2 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.875rem, 3.6vw, 2.875rem);
line-height: 1.12;
letter-spacing: -0.01em;
color: #1f2329;
margin: 0 0 1.5rem;
text-wrap: balance;
max-width: 30ch;
}
.b5-section h2 em { font-style: italic; color: hsl(210, 9%, 30%); font-weight: 400; }
.b5-section > p {
font-family: var(--font-secondary);
font-size: 1.0625rem;
line-height: 1.75;
color: hsl(210, 9%, 22%);
max-width: 56rem;
margin: 0 0 1.25rem;
}
.b5-section .b5-lede {
font-family: var(--font-primary);
font-style: italic;
font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
line-height: 1.5;
color: hsl(210, 9%, 18%);
border-left: 2px solid #1f2329;
padding-left: 1.25rem;
margin: 0 0 2rem;
max-width: 50rem;
}
.b5-section a.inline-link {
color: #1f2329;
border-bottom: 1px solid rgba(0,0,0,0.3);
transition: border-color .15s;
}
.b5-section a.inline-link:hover { border-bottom-color: #1f2329; }
/* Sub heading */
.b5-section h3 {
font-family: var(--font-secondary);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1f2329;
margin: 2.25rem 0 1rem;
}
/* Bestseller chart — ranked rows */
.b5-chart {
margin: 1.5rem 0 0;
border-top: 1.5px solid #1f2329;
}
.b5-chart__row {
display: grid;
grid-template-columns: 6rem 1fr 11rem;
gap: 2rem;
align-items: baseline;
padding: 1.75rem 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.b5-chart__rank {
font-family: var(--font-primary);
font-weight: 500;
font-style: italic;
font-size: clamp(2.25rem, 4vw, 3rem);
line-height: 0.9;
color: #1f2329;
letter-spacing: -0.02em;
}
.b5-chart__main h4 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.1875rem, 1.8vw, 1.4rem);
line-height: 1.2;
color: #1f2329;
margin: 0 0 0.5rem;
letter-spacing: -0.005em;
}
.b5-chart__main p {
font-family: var(--font-secondary);
font-size: 0.95rem;
line-height: 1.6;
color: hsl(210, 9%, 28%);
margin: 0;
}
.b5-chart__role {
font-family: var(--font-secondary);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-contrast-medium);
font-weight: 700;
line-height: 1.5;
text-align: right;
}
@media (max-width: 760px) {
.b5-chart__row { grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.25rem 0; }
.b5-chart__role { grid-column: 1 / -1; text-align: left; margin-top: 0.25rem; }
}
/* Trend chips */
.b5-trends {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
margin: 1.5rem 0 0;
}
.b5-trends span {
font-family: var(--font-secondary);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1f2329;
font-weight: 600;
padding: 0.55rem 1rem;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 999px;
}
/* Seasonality table */
.b5-season {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0 0;
font-family: var(--font-secondary);
}
.b5-season thead th {
text-align: left;
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-contrast-medium);
font-weight: 700;
border-top: 1.5px solid #1f2329;
border-bottom: 1.5px solid #1f2329;
padding: 0.875rem 1rem;
background: #fff;
}
.b5-season tbody td {
font-size: 0.95rem;
line-height: 1.5;
color: hsl(210, 9%, 22%);
border-bottom: 1px solid rgba(0,0,0,0.08);
padding: 1rem;
vertical-align: top;
}
.b5-season tbody td:first-child {
font-family: var(--font-primary);
font-size: 1.0625rem;
font-weight: 500;
color: #1f2329;
width: 28%;
}
.b5-season tbody td:nth-child(2) {
font-family: var(--font-secondary);
font-weight: 600;
color: #1f2329;
width: 22%;
}
@media (max-width: 700px) {
.b5-season thead { display: none; }
.b5-season tr { display: block; padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,0.12); }
.b5-season td { display: block; border: 0; padding: 0.25rem 0; width: 100% !important; }
.b5-season td:first-child { font-size: 1.125rem; margin-bottom: 0.25rem; }
}
/* Ledger — margin examples */
.b5-ledger {
margin: 1.5rem 0 0;
border-top: 1.5px solid #1f2329;
}
.b5-ledger__row {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
gap: 1.5rem;
padding: 1.25rem 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
align-items: baseline;
}
.b5-ledger__row--head > div {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-contrast-medium);
font-weight: 700;
}
.b5-ledger__lab {
font-family: var(--font-secondary);
font-size: 0.95rem;
color: #1f2329;
font-weight: 500;
}
.b5-ledger__num {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.25rem, 1.8vw, 1.625rem);
color: #1f2329;
letter-spacing: -0.01em;
}
.b5-ledger__num em { font-style: italic; color: hsl(210, 9%, 32%); font-weight: 400; font-size: 0.75em; }
@media (max-width: 600px) {
.b5-ledger__row { grid-template-columns: 1fr; gap: 0.25rem; padding: 1rem 0; }
.b5-ledger__row--head { display: none; }
.b5-ledger__lab { font-size: 0.85rem; color: hsl(210, 9%, 35%); }
}
/* Numbered supplier criteria */
.b5-criteria {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
margin: 1.5rem 0 0;
counter-reset: b5crit;
border-top: 1px solid rgba(0,0,0,0.15);
}
.b5-criteria__item {
counter-increment: b5crit;
padding: 1.75rem 1.5rem 1.75rem 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.b5-criteria__item:nth-child(2n) {
padding-left: 1.5rem;
padding-right: 0;
border-left: 1px solid rgba(0,0,0,0.1);
}
.b5-criteria__item h4 {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1.25rem;
line-height: 1.2;
color: #1f2329;
margin: 0 0 0.5rem;
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.b5-criteria__item h4::before {
content: counter(b5crit, decimal-leading-zero);
font-family: var(--font-primary);
font-style: italic;
font-weight: 400;
font-size: 1.5rem;
color: hsl(210, 9%, 36%);
flex-shrink: 0;
}
.b5-criteria__item p {
font-family: var(--font-secondary);
font-size: 0.95rem;
line-height: 1.6;
color: hsl(210, 9%, 28%);
margin: 0;
padding-left: 2.25rem;
}
@media (max-width: 700px) {
.b5-criteria { grid-template-columns: 1fr; }
.b5-criteria__item:nth-child(2n) { padding-left: 0; border-left: 0; }
}
/* Bullet list - body */
.b5-section ul.b5-list {
list-style: none;
padding: 0;
margin: 1.25rem 0 0;
}
.b5-section ul.b5-list li {
position: relative;
padding: 0.75rem 0 0.75rem 1.5rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
font-family: var(--font-secondary);
font-size: 1rem;
line-height: 1.55;
color: hsl(210, 9%, 22%);
}
.b5-section ul.b5-list li::before {
content: '';
position: absolute;
left: 0; top: 1.25em;
width: 0.75rem;
height: 1.5px;
background: #1f2329;
}
.b5-section ul.b5-list li strong { color: #1f2329; font-weight: 600; }
/* NYWD advantages — split block */
.b5-advantages {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 4rem);
margin: 1.5rem 0 0;
padding-top: 2rem;
border-top: 1.5px solid #1f2329;
}
.b5-advantages h3 {
font-family: var(--font-primary);
font-weight: 500;
font-style: italic;
font-size: clamp(1.5rem, 2.4vw, 1.875rem);
line-height: 1.2;
color: #1f2329;
margin: 0 0 1rem;
letter-spacing: -0.005em;
text-transform: none;
}
.b5-advantages p {
font-family: var(--font-secondary);
font-size: 1rem;
line-height: 1.7;
color: hsl(210, 9%, 22%);
margin: 0 0 1rem;
}
@media (max-width: 760px) { .b5-advantages { grid-template-columns: 1fr; } }
/* FAQ override - reuse .b2-faq tokens, override colors */
.b5 .b2-faq { margin: 1.5rem 0 0; }
.b5 .b2-faq details { background: #fff; border: 1px solid rgba(0,0,0,0.1); }
.b5 .b2-faq summary { color: #1f2329; }
/* B5 — figure / image patterns (editorial, hairline-ruled) */
.b5-figure {
margin: 2.5rem 0 0;
border-top: 1px solid rgba(0,0,0,0.12);
padding-top: 1.5rem;
}
.b5-figure__media {
aspect-ratio: 16 / 9;
background: #f4f1ec;
overflow: hidden;
position: relative;
border-radius: 2px;
}
.b5-figure__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.b5-figure__media .b5-figure__glyph {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(31,35,41,0.25);
pointer-events: none;
}
.b5-figure__media .b5-figure__glyph svg { width: 22%; max-width: 220px; height: auto; }
.b5-figure__cap {
margin-top: 1rem;
font-family: var(--font-secondary);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-contrast-medium);
font-weight: 600;
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.b5-figure__cap::before {
content: '';
width: 1.5rem;
height: 1px;
background: #1f2329;
flex-shrink: 0;
transform: translateY(-0.25em);
}
.b5-figure--wide {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-top: 1.5px solid #1f2329;
padding: 2rem clamp(1.25rem, 4vw, 3rem) 0;
border-bottom: 1.5px solid #1f2329;
padding-bottom: 2rem;
}
.b5-figure--wide .b5-figure__media { aspect-ratio: 24 / 9; }
.b5-figure--wide .b5-figure__cap {
max-width: 78rem;
margin: 1rem auto 0;
padding: 0;
}
@media (max-width: 760px) {
.b5-figure--wide { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.b5-figure__media { aspect-ratio: 4 / 3; }
}
/* ════════════════════════════════════════════════════════════
.b6-* : "Buyer's Catalog" (Best Products to Dropship)
numbered category directory, alternating media rows
════════════════════════════════════════════════════════════ */
.b6 { background:#fff; }
.b6-hero { max-width:74rem; margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) clamp(1.25rem,4vw,2.5rem) clamp(2rem,4vw,3rem); }
.b6-hero__strap { display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; font-family:var(--font-secondary); font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--color-contrast-medium); margin-bottom:1.5rem; }
.b6-hero__strap strong { color:var(--nywd-green); font-weight:700; }
.b6-hero h1 { font-family:var(--font-primary); font-weight:500; font-size:clamp(2.3rem,5.2vw,4.2rem); line-height:1.04; letter-spacing:-0.015em; color:var(--color-primary); margin:0; text-wrap:pretty; }
.b6-hero h1 em { font-style:italic; color:var(--nywd-green); }
.b6-hero__sub { font-family:var(--font-primary); font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.55; color:var(--color-contrast-high); margin:1.5rem 0 0; max-width:46rem; }
.b6-hero__meta { margin-top:1.5rem; font-family:var(--font-secondary); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--nywd-green); font-weight:600; border-top:1.5px solid var(--color-primary); padding-top:0.75rem; display:inline-block; }
.b6-body { max-width:50rem; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); font-family:var(--font-secondary); }
.b6-body > section { padding:clamp(2.25rem,4vw,3.25rem) 0; border-top:1px solid hsl(210,8%,90%); }
.b6-body > section:first-child { border-top:none; }
.b6-eyebrow { font-family:var(--font-secondary); font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--nywd-green); font-weight:700; margin-bottom:0.875rem; }
.b6-body h2 { font-family:var(--font-primary); font-weight:500; font-size:clamp(1.7rem,2.8vw,2.4rem); line-height:1.12; letter-spacing:-0.01em; color:var(--color-primary); margin:0 0 1rem; }
.b6-body h2 em { font-style:italic; color:var(--nywd-green); }
.b6-body h3 { font-family:var(--font-secondary); font-weight:700; font-size:1.0625rem; color:var(--color-primary); margin:1.75rem 0 0.625rem; }
.b6-body p { font-size:1rem; line-height:1.7; color:var(--color-contrast-high); margin:0 0 1rem; }
.b6-body .lede { font-family:var(--font-primary); font-size:clamp(1.2rem,1.9vw,1.45rem); line-height:1.5; color:var(--color-primary); border-left:3px solid var(--nywd-green); padding-left:1.4rem; margin:0 0 1.75rem; }
.b6-body a.inline-link { color:var(--color-primary); text-decoration:underline; text-decoration-color:hsl(210,8%,78%); text-underline-offset:2px; }
.b6-body a.inline-link:hover { color:var(--nywd-green); text-decoration-color:var(--nywd-green); }
/* checklist of qualifying questions */
.b6-check { list-style:none; margin:1.25rem 0; padding:0; display:grid; gap:0.7rem; }
.b6-check li { position:relative; padding-left:2rem; font-size:0.98rem; line-height:1.55; color:var(--color-contrast-high); }
.b6-check li::before { content:''; position:absolute; left:0; top:0.15em; width:1.15rem; height:1.15rem; border-radius:50%; border:1.5px solid var(--nywd-green); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2332908F' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/0.75rem no-repeat; }
/* featured category (eyewear) */
.b6-feature { margin:1.5rem 0; }
.b6-figph { background:linear-gradient(135deg,#2a2e33,#3a4047); border-radius:8px; aspect-ratio:16/9; display:grid; place-items:center; text-align:center; color:rgba(255,255,255,0.6); }
.b6-figph svg { width:46px; height:46px; color:var(--nywd-green); margin-bottom:0.6rem; }
.b6-figph span { display:block; font-family:var(--font-secondary); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; }
.b6-feature .b6-figph { aspect-ratio:21/9; }
.b6-callout { background:var(--nywd-accent-soft); border-left:3px solid var(--nywd-green); border-radius:0 8px 8px 0; padding:1.5rem 1.75rem; margin:1.75rem 0; }
.b6-callout p { margin:0; font-size:0.98rem; }
.b6-callout strong { color:var(--color-primary); }
.b6-tags { display:flex; flex-wrap:wrap; gap:0.5rem; margin:1.25rem 0; }
.b6-tags span { font-family:var(--font-secondary); font-size:0.78rem; font-weight:600; letter-spacing:0.02em; color:var(--color-primary); background:#fff; border:1px solid hsl(210,8%,84%); border-radius:999px; padding:0.4rem 0.9rem; }
/* eyewear benefit two-col list */
.b6-why { columns:2; column-gap:2rem; list-style:none; margin:1.25rem 0; padding:0; }
.b6-why li { break-inside:avoid; position:relative; padding:0.45rem 0 0.45rem 1.4rem; font-size:0.95rem; line-height:1.5; color:var(--color-contrast-high); }
.b6-why li::before { content:''; position:absolute; left:0; top:0.85em; width:9px; height:1.5px; background:var(--nywd-green); }
/* numbered category directory (2..8) */
.b6-cat { display:grid; grid-template-columns:auto 1fr; gap:1.25rem 1.5rem; padding:1.6rem 0; border-top:1px solid hsl(210,8%,90%); align-items:start; }
.b6-cat__n { font-family:var(--font-primary); font-weight:500; font-size:2.6rem; line-height:0.9; color:var(--nywd-green); }
.b6-cat h3 { margin:0 0 0.4rem; font-family:var(--font-primary); font-weight:500; font-size:1.35rem; color:var(--color-primary); }
.b6-cat p { margin:0; font-size:0.95rem; line-height:1.6; color:var(--color-contrast-medium); }
/* numbered selection steps */
.b6-steps { counter-reset:b6s; display:grid; gap:1rem; margin:1.5rem 0; }
.b6-step { display:grid; grid-template-columns:auto 1fr; gap:1.25rem; padding:1.4rem 1.5rem; border:1px solid hsl(210,8%,88%); border-radius:8px; }
.b6-step::before { counter-increment:b6s; content:counter(b6s,decimal-leading-zero); font-family:var(--font-primary); font-size:1.5rem; font-weight:500; color:var(--nywd-green); line-height:1; }
.b6-step h3 { margin:0 0 0.35rem; }
.b6-step p { margin:0; font-size:0.95rem; color:var(--color-contrast-medium); }
/* caution panel */
.b6-avoid { background:#fbf4f1; border:1px solid hsl(14,40%,86%); border-radius:8px; padding:1.5rem 1.75rem; margin:1.5rem 0; }
.b6-avoid h3 { margin-top:0; color:hsl(8,55%,42%); }
.b6-avoid ul { margin:0; padding-left:1.1rem; }
.b6-avoid li { font-size:0.95rem; line-height:1.6; color:var(--color-contrast-high); margin-bottom:0.4rem; }
@media (max-width:640px){
.b6-why { columns:1; }
.b6-cat { grid-template-columns:1fr; gap:0.5rem; }
.b6-cat__n { font-size:2rem; }
}
/* ════════════════════════════════════════════════════════════
.b7-* : "Research Method" (How to Find Products to Dropship)
platform card grid, method blocks, mistakes grid
════════════════════════════════════════════════════════════ */
.b7 { background:#fff; }
.b7-hero { background:var(--nywd-accent-soft); border-bottom:1px solid hsl(210,8%,90%); }
.b7-hero__inner { max-width:74rem; margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) clamp(1.25rem,4vw,2.5rem); }
.b7-hero__strap { font-family:var(--font-secondary); font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--nywd-green); font-weight:700; margin-bottom:1.25rem; }
.b7-hero h1 { font-family:var(--font-primary); font-weight:500; font-size:clamp(2.3rem,5.2vw,4.2rem); line-height:1.04; letter-spacing:-0.015em; color:var(--color-primary); margin:0; text-wrap:pretty; }
.b7-hero h1 em { font-style:italic; color:var(--nywd-green); }
.b7-hero__sub { font-family:var(--font-primary); font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.55; color:var(--color-contrast-high); margin:1.5rem 0 0; max-width:46rem; }
.b7-learn { margin:1.75rem 0 0; padding:1.5rem 1.75rem; background:#fff; border:1px solid hsl(210,8%,88%); border-radius:8px; }
.b7-learn p { font-family:var(--font-secondary); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--nywd-green); font-weight:700; margin:0 0 0.75rem; }
.b7-learn ul { list-style:none; margin:0; padding:0; display:grid; gap:0.5rem; }
.b7-learn li { position:relative; padding-left:1.4rem; font-family:var(--font-secondary); font-size:0.95rem; line-height:1.5; color:var(--color-contrast-high); }
.b7-learn li::before { content:''; position:absolute; left:0; top:0.7em; width:9px; height:1.5px; background:var(--nywd-green); }
.b7-body { max-width:50rem; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); font-family:var(--font-secondary); }
.b7-body > section { padding:clamp(2.25rem,4vw,3.25rem) 0; border-top:1px solid hsl(210,8%,90%); }
.b7-body > section:first-child { border-top:none; }
.b7-eyebrow { font-family:var(--font-secondary); font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--nywd-green); font-weight:700; margin-bottom:0.875rem; }
.b7-body h2 { font-family:var(--font-primary); font-weight:500; font-size:clamp(1.7rem,2.8vw,2.4rem); line-height:1.12; letter-spacing:-0.01em; color:var(--color-primary); margin:0 0 1rem; }
.b7-body h2 em { font-style:italic; color:var(--nywd-green); }
.b7-body h3 { font-family:var(--font-secondary); font-weight:700; font-size:1.0625rem; color:var(--color-primary); margin:1.75rem 0 0.625rem; }
.b7-body p { font-size:1rem; line-height:1.7; color:var(--color-contrast-high); margin:0 0 1rem; }
.b7-body .lede { font-family:var(--font-primary); font-size:clamp(1.2rem,1.9vw,1.45rem); line-height:1.5; color:var(--color-primary); border-left:3px solid var(--nywd-green); padding-left:1.4rem; margin:0 0 1.75rem; }
.b7-body a.inline-link { color:var(--color-primary); text-decoration:underline; text-decoration-color:hsl(210,8%,78%); text-underline-offset:2px; }
.b7-body a.inline-link:hover { color:var(--nywd-green); text-decoration-color:var(--nywd-green); }
.b7-body ul.b7-bul { list-style:none; margin:1.1rem 0; padding:0; display:grid; gap:0.55rem; }
.b7-body ul.b7-bul li { position:relative; padding-left:1.4rem; font-size:0.97rem; line-height:1.55; color:var(--color-contrast-high); }
.b7-body ul.b7-bul li::before { content:''; position:absolute; left:0; top:0.7em; width:9px; height:1.5px; background:var(--nywd-green); }
/* platform / channel cards */
.b7-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin:1.5rem 0; }
.b7-card { border:1px solid hsl(210,8%,88%); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.b7-card__ph { background:linear-gradient(135deg,#2a2e33,#3a4047); aspect-ratio:4/3; display:grid; place-items:center; color:rgba(255,255,255,0.55); }
.b7-card__ph svg { width:34px; height:34px; color:var(--nywd-green); }
.b7-card__body { padding:1.25rem; }
.b7-card h3 { margin:0 0 0.4rem; font-family:var(--font-secondary); font-weight:700; font-size:1rem; color:var(--color-primary); }
.b7-card p { margin:0; font-size:0.9rem; line-height:1.55; color:var(--color-contrast-medium); }
/* live-marketplace highlight panel */
.b7-live { background:var(--color-primary); color:#fff; border-radius:10px; padding:clamp(1.75rem,4vw,2.5rem); margin:1.75rem 0; }
.b7-live .b7-eyebrow { color:var(--nywd-green); }
.b7-live h3 { color:#fff; margin-top:0; }
.b7-live p { color:rgba(255,255,255,0.78); }
.b7-chips { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.1rem; }
.b7-chips span { font-family:var(--font-secondary); font-size:0.78rem; font-weight:600; color:#fff; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:0.4rem 0.9rem; }
/* steps */
.b7-steps { counter-reset:b7s; display:grid; gap:1rem; margin:1.5rem 0; }
.b7-step { display:grid; grid-template-columns:auto 1fr; gap:1.25rem; padding:1.4rem 1.5rem; border:1px solid hsl(210,8%,88%); border-radius:8px; }
.b7-step::before { counter-increment:b7s; content:counter(b7s,decimal-leading-zero); font-family:var(--font-primary); font-size:1.5rem; font-weight:500; color:var(--nywd-green); line-height:1; }
.b7-step h3 { margin:0 0 0.35rem; }
.b7-step p { margin:0; font-size:0.95rem; color:var(--color-contrast-medium); }
/* mistakes grid */
.b7-mistakes { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.5rem 0; }
.b7-mistake { border:1px solid hsl(210,8%,88%); border-radius:8px; padding:1.4rem 1.5rem; }
.b7-mistake h3 { margin:0 0 0.4rem; display:flex; align-items:center; gap:0.6rem; }
.b7-mistake h3::before { content:'\2715'; color:hsl(8,55%,48%); font-size:0.9em; }
.b7-mistake p { margin:0; font-size:0.92rem; line-height:1.55; color:var(--color-contrast-medium); }
.b7-callout { background:var(--nywd-accent-soft); border-left:3px solid var(--nywd-green); border-radius:0 8px 8px 0; padding:1.5rem 1.75rem; margin:1.75rem 0; }
.b7-callout p { margin:0; font-size:0.98rem; }
.b7-callout strong { color:var(--color-primary); }
@media (max-width:760px){ .b7-cards { grid-template-columns:1fr; } .b7-mistakes { grid-template-columns:1fr; } }
/* B6/B7 stock photo overlays (img sits over the glyph placeholder; onerror reveals glyph) */
.b6-feature { position: relative; }
.b6-feature .b6-figph { aspect-ratio: 21/9; }
.b6-feat__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }
.b7-card__ph { position: relative; }
.b7-card__ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.b7-card__ph .b7-ph-ico { position:relative; }
/* B6 category line-icons (engaging, scannable directory) */
.b6-cat__n { display:flex; flex-direction:column; align-items:flex-start; gap:0.7rem; }
.b6-cat__ico { width:32px; height:32px; color:var(--nywd-green); }
.b6-cat__ico svg { width:100%; height:100%; display:block; }
@media (max-width:640px){ .b6-cat__n{ flex-direction:row; align-items:center; gap:0.9rem; } }
/* ════════════════════════════════════════════════════════════════════
NYWD PILLAR / LANDING PAGES — distinct body layouts (P1–P7)
Loads AFTER style.css + nywd-chrome.css + blog-styles.css.
Reuses shared helpers: .b2-cta, .b2-faq, .btn-pill, .img-slot, .more-news
════════════════════════════════════════════════════════════════════ */
/* ───────── SHARED PILLAR HELPERS (.pg-*) ───────── */
.pg-shell { background: #fff; }
.pg-wrap { max-width: 74rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.pg-narrow { max-width: 52rem; }
.pg-eyebrow {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 700;
margin-bottom: 1rem;
}
.pg-section { padding: clamp(3rem, 6vw, 5rem) 0; }
.pg-section--tight { padding: clamp(2rem, 4vw, 3.25rem) 0; }
.pg-prose p {
font-family: var(--font-secondary);
font-size: 1.0625rem;
line-height: 1.8;
color: hsl(210, 9%, 26%);
}
.pg-prose p + p { margin-top: 1.25rem; }
.pg-prose strong { font-weight: 600; color: var(--color-contrast-high); }
.pg-h2 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.75rem, 3.4vw, 2.75rem);
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--color-contrast-high);
text-wrap: balance;
}
.pg-h2 em { font-style: italic; color: var(--nywd-green); font-weight: 400; }
/* ════════════════════════════════════════════════════════════════════
P1 — VERSUS (Off-Price vs Authorized Eyewear Distribution)
Head-to-head split panels + numbered showdown rounds
════════════════════════════════════════════════════════════════════ */
.p1-hero {
background: linear-gradient(160deg, #23272c 0%, #2f353c 100%);
color: #fff;
position: relative;
overflow: hidden;
}
.p1-hero__inner {
max-width: 74rem;
margin: 0 auto;
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem);
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 0.6fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.p1-hero__media { align-self: stretch; }
.p1-hero__media img {
width: 100%; height: 100%; min-height: 400px;
object-fit: cover; object-position: 55% 18%;
display: block;
}
@media (max-width: 860px) {
.p1-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
.p1-hero__media img { min-height: 0; aspect-ratio: 4 / 3; }
}
.p1-hero__strap {
font-family: var(--font-secondary);
font-size: 0.7rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--nywd-green);
font-weight: 700;
margin-bottom: 1.5rem;
}
.p1-hero h1 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(2.2rem, 5.2vw, 4rem);
line-height: 1.08;
letter-spacing: -0.015em;
color: #fff;
max-width: 18ch;
text-wrap: balance;
}
.p1-hero h1 em { font-style: italic; color: #79c3c2; font-weight: 400; }
.p1-hero__sub {
font-family: var(--font-secondary);
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
line-height: 1.7;
color: rgba(255,255,255,0.74);
max-width: 54ch;
margin-top: 1.5rem;
}
.p1-hero__note {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.14);
font-family: var(--font-secondary);
font-size: 0.95rem;
line-height: 1.7;
color: rgba(255,255,255,0.6);
max-width: 56ch;
}
.p1-hero__note strong { color: #fff; font-weight: 600; }
/* Versus panels */
.p1-versus {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: 74rem;
margin: clamp(2.5rem, 5vw, 4rem) auto 0;
border: 1px solid hsl(210, 8%, 88%);
}
.p1-panel { padding: clamp(2rem, 3.5vw, 3rem); }
.p1-panel--auth { background: #f3f4f5; }
.p1-panel--off {
background: var(--nywd-accent-soft);
border-left: 1px solid hsl(210, 8%, 88%);
box-shadow: inset 4px 0 0 var(--nywd-green);
}
.p1-panel__tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-secondary);
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
padding: 0.35rem 0.7rem;
border-radius: 999px;
margin-bottom: 1.25rem;
}
.p1-panel--auth .p1-panel__tag { background: #e0e3e6; color: #4a525c; }
.p1-panel--off .p1-panel__tag { background: var(--nywd-green); color: #fff; }
.p1-panel h2 {
font-family: var(--font-primary);
font-weight: 500;
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
line-height: 1.18;
color: var(--color-contrast-high);
margin-bottom: 0.75rem;
}
.p1-panel > p {
font-family: var(--font-secondary);
font-size: 1rem;
line-height: 1.7;
color: hsl(210, 9%, 30%);
margin-bottom: 1.25rem;
}
.p1-panel__lead {
font-size: 0.7rem !important;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--color-contrast-medium) !important;
margin-bottom: 0.875rem !important;
}
.p1-list { display: flex; flex-direction: column; gap: 0.875rem; }
.p1-list li {
position: relative;
padding-left: 1.75rem;
font-family: var(--font-secondary);
font-size: 0.95rem;
line-height: 1.55;
color: hsl(210, 9%, 28%);
}
.p1-list li::before {
position: absolute;
left: 0;
top: 0.05em;
font-size: 0.95rem;
font-weight: 700;
}
.p1-panel--auth .p1-list li::before { content: "\2715"; color: #9aa1a8; }
.p1-panel--off .p1-list li::before { content: "\2713"; color: var(--nywd-green); }
@media (max-width: 800px) {
.p1-versus { grid-template-columns: 1fr; }
.p1-panel--off { border-left: 0; border-top: 1px solid hsl(210, 8%, 88%); box-shadow: inset 0 4px 0 var(--nywd-green); }
}
/* Showdown rounds */
.p1-showdown { background: #fff; }
.p1-showdown__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); }
.p1-rounds { display: flex; flex-direction: column; gap: 1.5rem; }
.p1-round {
border: 1px solid hsl(210, 8%, 88%);
background: #fff;
}
.p1-round__title {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
border-bottom: 1px solid hsl(210, 8%, 90%);
background: var(--nywd-muted);
}
.p1-round__num {
font-family: var(--font-primary);
font-style: italic;
font-size: 1.5rem;
color: var(--nywd-green);
line-height: 1;
}
.p1-round__title h3 {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1.0625rem;
color: var(--color-contrast-high);
letter-spacing: -0.005em;
}
.p1-round__cells { display: grid; grid-template-columns: 1fr 1fr; }
.p1-cell { padding: 1.5rem clamp(1.25rem, 3vw, 2rem); }
.p1-cell + .p1-cell { border-left: 1px solid hsl(210, 8%, 90%); }
.p1-cell__label {
font-family: var(--font-secondary);
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 0.625rem;
}
.p1-cell--auth .p1-cell__label { color: #8a929a; }
.p1-cell--off .p1-cell__label { color: var(--nywd-green); }
.p1-cell p {
font-family: var(--font-secondary);
font-size: 0.95rem;
line-height: 1.65;
color: hsl(210, 9%, 30%);
}
.p1-cell--off { background: hsl(179, 30%, 97%); }
@media (max-width: 700px) {
.p1-round__cells { grid-template-columns: 1fr; }
.p1-cell + .p1-cell { border-left: 0; border-top: 1px solid hsl(210, 8%, 90%); }
}
/* Where NYWD fits */
.p1-fit { background: var(--nywd-accent-soft); }
.p1-fit__head { max-width: 44rem; margin: 0 auto clamp(2.5rem, 4vw, 3.25rem); text-align: center; }
.p1-fit__head p { margin-top: 1rem; }
.p1-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.p1-benefit {
background: #fff;
border-top: 3px solid var(--nywd-green);
padding: 1.75rem;
}
.p1-benefit h3 {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1.3rem;
color: var(--color-contrast-high);
margin-bottom: 0.625rem;
}
.p1-benefit p {
font-family: var(--font-secondary);
font-size: 0.95rem;
line-height: 1.65;
color: hsl(210, 9%, 30%);
}
@media (max-width: 800px) { .p1-benefits { grid-template-columns: 1fr; } }
/* Closing argument */
.p1-close { background: #fff; }
.p1-close__inner { max-width: 52rem; margin: 0 auto; text-align: center; }
.p1-close .pg-h2 { margin-bottom: 1.25rem; }
.p1-close__hidden {
margin-top: 2rem;
padding: 1.5rem 1.75rem;
border: 1px solid hsl(210, 8%, 88%);
border-left: 3px solid var(--nywd-green);
background: var(--nywd-muted);
font-family: var(--font-secondary);
font-size: 0.975rem;
line-height: 1.7;
color: hsl(210, 9%, 28%);
text-align: left;
}
/* ════════════════════════════════════════════════════════════════════
P2 — PRIMER / FIELD GUIDE (What Is Off-Price Eyewear?)
Editorial explainer: definition device, myth vs reality, field notes
════════════════════════════════════════════════════════════════════ */
.p2-hero { background: #fff; border-bottom: 1px solid hsl(210, 8%, 90%); }
.p2-hero__inner { max-width: 64rem; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 4vw, 3.5rem); }
.p2-hero__strap {
font-family: var(--font-secondary);
font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
color: var(--nywd-green); font-weight: 700; margin-bottom: 1.25rem;
}
.p2-hero h1 {
font-family: var(--font-primary); font-weight: 500;
font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.14; letter-spacing: -0.015em;
color: var(--color-contrast-high); max-width: 20ch; text-wrap: balance;
margin-bottom: 2.25rem;
}
.p2-hero h1 em { font-style: italic; color: var(--nywd-green); font-weight: 400; }
.p2-hero__sub {
font-family: var(--font-secondary); font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
line-height: 1.75; color: hsl(210, 9%, 30%); max-width: 58ch; margin-top: 0;
}
/* Definition device */
.p2-def {
max-width: 64rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
background: var(--nywd-accent-soft);
border-left: 4px solid var(--nywd-green);
}
.p2-def__label {
font-family: var(--font-secondary); font-size: 0.66rem; letter-spacing: 0.2em;
text-transform: uppercase; font-weight: 700; color: var(--nywd-green); margin-bottom: 0.875rem;
}
.p2-def p {
font-family: var(--font-primary); font-size: clamp(1.35rem, 2.4vw, 1.85rem);
line-height: 1.4; color: var(--color-contrast-high); font-weight: 400;
}
.p2-def p em { font-style: italic; color: var(--nywd-green); }
/* Myth vs reality */
.p2-myth { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.p2-myth__card { padding: 1.75rem; border: 1px solid hsl(210, 8%, 88%); }
.p2-myth__card--no { background: #f3f4f5; }
.p2-myth__card--yes { background: hsl(179, 30%, 97%); border-color: hsl(179, 25%, 82%); }
.p2-myth__k {
font-family: var(--font-secondary); font-size: 0.66rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 700; margin-bottom: 0.75rem;
}
.p2-myth__card--no .p2-myth__k { color: #8a929a; }
.p2-myth__card--yes .p2-myth__k { color: var(--nywd-green); }
.p2-myth__card p { font-family: var(--font-secondary); font-size: 1rem; line-height: 1.7; color: hsl(210, 9%, 28%); }
@media (max-width: 760px) { .p2-myth { grid-template-columns: 1fr; } }
/* Field notes — numbered supply-chain shifts */
.p2-shifts { display: flex; flex-direction: column; }
.p2-shift {
display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; align-items: baseline;
padding: 1.75rem 0; border-top: 1px solid hsl(210, 8%, 88%);
}
.p2-shift:last-child { border-bottom: 1px solid hsl(210, 8%, 88%); }
.p2-shift__num {
font-family: var(--font-primary); font-style: italic; font-size: 2.75rem;
color: var(--nywd-green); line-height: 1; font-feature-settings: "lnum";
}
.p2-shift h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.15rem; color: var(--color-contrast-high); margin-bottom: 0.4rem; }
.p2-shift p { font-family: var(--font-secondary); font-size: 1rem; line-height: 1.7; color: hsl(210, 9%, 30%); }
@media (max-width: 600px) { .p2-shift { grid-template-columns: 1fr; gap: 0.5rem; } .p2-shift__num { font-size: 2rem; } }
/* Four advantages */
.p2-adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.p2-adv {
background: #fff; border: 1px solid hsl(210, 8%, 88%); border-top: 3px solid var(--color-primary);
padding: 1.75rem;
}
.p2-adv__n {
font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 700; color: var(--nywd-green); margin-bottom: 0.6rem;
}
.p2-adv h3 { font-family: var(--font-primary); font-weight: 500; font-size: 1.4rem; color: var(--color-contrast-high); margin-bottom: 0.6rem; }
.p2-adv p { font-family: var(--font-secondary); font-size: 0.95rem; line-height: 1.65; color: hsl(210, 9%, 30%); }
@media (max-width: 760px) { .p2-adv-grid { grid-template-columns: 1fr; } }
/* Authenticity split */
.p2-auth { background: var(--nywd-accent-soft); }
.p2-auth__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.p2-auth__media .img-slot { aspect-ratio: 4 / 3; border-radius: 0; }
.p2-auth__copy h2 { margin-bottom: 1rem; }
.p2-guarantees { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.p2-guarantee {
display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
background: #fff; padding: 1.25rem 1.5rem; border: 1px solid hsl(210, 8%, 88%);
}
.p2-guarantee__ic {
width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
background: hsl(179, 30%, 94%); color: var(--nywd-green);
display: flex; align-items: center; justify-content: center;
}
.p2-guarantee__ic svg { width: 19px; height: 19px; }
.p2-guarantee h4 { font-family: var(--font-secondary); font-weight: 600; font-size: 1rem; color: var(--color-contrast-high); margin-bottom: 0.2rem; }
.p2-guarantee p { font-family: var(--font-secondary); font-size: 0.92rem; line-height: 1.6; color: hsl(210, 9%, 32%); }
@media (max-width: 800px) { .p2-auth__grid { grid-template-columns: 1fr; } .p2-auth__media { order: 2; } }
/* 3-step process (shared style reused by other pages) */
.pg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: pgstep; }
.pg-step { counter-increment: pgstep; padding-top: 1.25rem; border-top: 2px solid var(--color-primary); }
.pg-step__n {
font-family: var(--font-primary); font-style: italic; font-size: 2.5rem;
color: var(--nywd-green); line-height: 1; display: block; margin-bottom: 0.75rem;
}
.pg-step h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.0625rem; color: var(--color-contrast-high); margin-bottom: 0.4rem; }
.pg-step p { font-family: var(--font-secondary); font-size: 0.95rem; line-height: 1.65; color: hsl(210, 9%, 30%); }
@media (max-width: 760px) { .pg-steps { grid-template-columns: 1fr; gap: 1.25rem; } }
/* ───────── SHARED COMPARISON TABLE (.pg-cmp) — used by P3/P4/P5/P6 ───────── */
.pg-cmp { border: 1px solid hsl(210, 8%, 86%); background: #fff; overflow: hidden; }
.pg-cmp__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-bottom: 1px solid hsl(210, 8%, 92%); }
.pg-cmp__row:last-child { border-bottom: 0; }
.pg-cmp__row > div { padding: 1.1rem 1.35rem; font-family: var(--font-secondary); font-size: 0.95rem; line-height: 1.55; }
.pg-cmp__row > div + div { border-left: 1px solid hsl(210, 8%, 92%); }
.pg-cmp__row--head > div {
background: var(--nywd-muted); font-weight: 700; font-size: 0.66rem;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-contrast-medium);
}
.pg-cmp__row--head > div:nth-child(3) { background: var(--color-primary); color: #fff; }
.pg-cmp__metric { font-weight: 600 !important; color: var(--color-contrast-high); }
.pg-cmp__trad { color: var(--color-contrast-medium); }
.pg-cmp__nywd { background: hsl(179, 32%, 96.5%); color: var(--color-primary); font-weight: 500; }
.pg-cmp__nywd strong { color: var(--nywd-green-dark); font-weight: 700; }
@media (max-width: 720px) {
.pg-cmp__row { grid-template-columns: 1fr; }
.pg-cmp__row > div + div { border-left: 0; border-top: 1px solid hsl(210, 8%, 92%); }
.pg-cmp__row--head { display: none; }
.pg-cmp__metric { background: var(--nywd-muted); }
.pg-cmp__trad::before { content: "Traditional \2014 "; font-weight: 700; color: #8a929a; }
.pg-cmp__nywd::before { content: "NYWD \2014 "; font-weight: 700; color: var(--nywd-green-dark); }
}
/* ════════════════════════════════════════════════════════════════════
P3 — BLUEPRINT / SCHEMATIC (The Profit Blueprint of Off-Price Eyewear)
Technical flow diagram + comparison + execution steps
════════════════════════════════════════════════════════════════════ */
.p3-hero {
background: #1f2329; color: #fff;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 32px 32px;
}
.p3-hero__inner { max-width: 66rem; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem); }
.p3-hero__strap {
font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.7rem;
letter-spacing: 0.2em; text-transform: uppercase; color: #79c3c2; margin-bottom: 1.5rem;
}
.p3-hero h1 {
font-family: var(--font-primary); font-weight: 500; color: #fff;
font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.12; letter-spacing: -0.015em;
max-width: 22ch; text-wrap: balance; margin-bottom: 1.75rem;
}
.p3-hero h1 em { font-style: italic; color: #79c3c2; font-weight: 400; }
.p3-hero p { font-family: var(--font-secondary); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; color: rgba(255,255,255,0.72); max-width: 60ch; }
.p3-hero p + p { margin-top: 1rem; }
/* Flow schematic */
.p3-flow {
margin: clamp(2rem, 4vw, 3rem) 0;
padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
background: #fbfbfa;
border: 1px solid hsl(210, 8%, 86%);
background-image:
linear-gradient(hsl(210,12%,93%) 1px, transparent 1px),
linear-gradient(90deg, hsl(210,12%,93%) 1px, transparent 1px);
background-size: 26px 26px;
}
.p3-flow__inputs { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0.75rem; }
.p3-input {
background: #fff; border: 1px solid hsl(210, 8%, 80%);
padding: 0.85rem 1.1rem; text-align: center; max-width: 14rem;
font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.78rem;
line-height: 1.4; color: var(--color-contrast-high); font-weight: 500;
display: flex; align-items: center; justify-content: center;
}
.p3-plus { display: flex; align-items: center; font-family: var(--font-secondary); font-weight: 700; color: var(--nywd-green); font-size: 1.2rem; }
.p3-arrow { display: flex; justify-content: center; padding: 0.5rem 0; color: var(--nywd-green); }
.p3-arrow svg { width: 22px; height: 26px; }
.p3-stage {
margin: 0 auto; max-width: 40rem; text-align: center;
background: #fff; border: 1.5px solid var(--color-primary);
padding: 1rem 1.5rem;
font-family: var(--font-secondary); font-weight: 600; font-size: 1.0625rem; color: var(--color-contrast-high);
}
.p3-stage--accent { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.p3-stage--result { background: hsl(179, 35%, 95%); border: 1.5px solid var(--nywd-green); color: var(--nywd-green-dark); }
.p3-stage--result strong { font-family: var(--font-primary); font-style: italic; font-weight: 500; font-size: 1.35rem; }
@media (max-width: 640px) { .p3-input { max-width: 100%; width: 100%; } .p3-plus { display: none; } .p3-flow__inputs { flex-direction: column; } }
/* Sector cards */
.p3-sectors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.p3-sector {
background: #fff; border: 1px solid hsl(210, 8%, 88%);
padding: 1.5rem 1.6rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
}
.p3-sector__tick { color: var(--nywd-green); font-weight: 700; font-size: 1.1rem; line-height: 1.4; }
.p3-sector h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.0625rem; color: var(--color-contrast-high); margin-bottom: 0.3rem; }
.p3-sector p { font-family: var(--font-secondary); font-size: 0.93rem; line-height: 1.6; color: hsl(210, 9%, 32%); }
@media (max-width: 720px) { .p3-sectors { grid-template-columns: 1fr; } }
/* ───────── SHARED LEAD FORM (.pg-form) — mirrors nywd.com register form ───────── */
.pg-form {
background: #fff; border: 1px solid hsl(210, 8%, 84%);
padding: clamp(1.5rem, 3vw, 2.25rem);
box-shadow: 0 20px 50px -30px rgba(31,35,41,0.35);
}
.pg-form__head {
font-family: var(--font-primary); font-weight: 500; font-size: 1.5rem;
color: var(--color-contrast-high); margin-bottom: 0.4rem; line-height: 1.2;
}
.pg-form__sub { font-family: var(--font-secondary); font-size: 0.9rem; color: var(--color-contrast-medium); margin-bottom: 1.5rem; line-height: 1.5; }
/* register-style placeholder fields, 2-up grid (textarea full width) */
.pg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.pg-input {
width: 100%; font-family: var(--font-secondary); font-size: 0.95rem;
padding: 0.72rem 0.85rem; border: 1px solid hsl(210, 8%, 80%); border-radius: 4px;
background: #fff; color: var(--color-contrast-high);
transition: border-color .15s, box-shadow .15s;
}
.pg-input::placeholder { color: hsl(210, 8%, 52%); }
.pg-input:focus { outline: none; border-color: var(--nywd-green); box-shadow: 0 0 0 3px hsl(179, 30%, 90%); }
.pg-select { position: relative; }
.pg-select select { width: 100%; appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer; color: hsl(210, 8%, 38%); }
.pg-select::after {
content: ""; position: absolute; right: 0.95rem; top: 50%; width: 9px; height: 9px;
border-right: 2px solid hsl(210, 8%, 45%); border-bottom: 2px solid hsl(210, 8%, 45%);
transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.pg-textarea { grid-column: 1 / -1; min-height: 84px; resize: vertical; font-family: var(--font-secondary); }
@media (max-width: 480px) { .pg-form__grid { grid-template-columns: 1fr; } }
.pg-form__btn {
width: 100%; margin-top: 1.25rem; padding: 0.85rem 1rem;
background: #2A2E33; color: #fff; border-radius: 4px;
font-family: var(--font-secondary); font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
transition: background .2s;
}
.pg-form__btn:hover { background: #3a4047; }
.pg-form__fine { margin-top: 1rem; font-family: var(--font-secondary); font-size: 0.74rem; line-height: 1.55; color: var(--color-contrast-medium); text-align: center; }
.pg-form__fine a { color: var(--color-contrast-high); text-decoration: underline; text-underline-offset: 2px; }
.pg-form__fine a:hover { opacity: 0.7; }
/* reCAPTCHA v2 "I'm not a robot" checkbox replica (real widget swapped in at integration) */
.pg-recaptcha {
margin-top: 1.25rem;
display: flex; align-items: center; gap: 0.75rem;
width: 304px; max-width: 100%; height: 78px;
padding: 0 0.85rem 0 0.75rem;
background: #f9f9f9; border: 1px solid #d3d3d3; border-radius: 3px;
box-shadow: 0 0 4px 1px rgba(0,0,0,0.06) inset;
font-family: 'Roboto', var(--font-secondary), sans-serif;
}
.pg-recaptcha__check {
width: 28px; height: 28px; flex-shrink: 0;
background: #fff; border: 2px solid #c1c1c1; border-radius: 2px;
}
.pg-recaptcha__label { font-size: 0.85rem; color: #222; flex: 1; }
.pg-recaptcha__brand { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; color: #555; }
.pg-recaptcha__brand svg { width: 30px; height: 30px; }
.pg-recaptcha__brand b { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.01em; color: #555; }
.pg-recaptcha__brand small { font-size: 0.5rem; color: #9b9b9b; }
/* ════════════════════════════════════════════════════════════════════
P4 — AUTHORITY PILLAR (Designer Eyewear Wholesale Distributor USA)
Split hero with lead form, industry guide, trust scaffolding
════════════════════════════════════════════════════════════════════ */
.p4-hero { background: var(--nywd-accent-soft); border-bottom: 1px solid hsl(210,8%,90%); }
.p4-hero__inner {
max-width: var(--max-w-lg); margin: 0 auto;
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.p4-hero__strap {
font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--nywd-green); font-weight: 700; margin-bottom: 1.25rem;
}
.p4-hero h1 {
font-family: var(--font-primary); font-weight: 500;
font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.12; letter-spacing: -0.015em;
color: var(--color-contrast-high); text-wrap: balance; margin-bottom: 1.6rem;
}
.p4-hero h1 em { font-style: italic; color: var(--nywd-green); font-weight: 400; }
.p4-hero__sub { font-family: var(--font-secondary); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.7; color: hsl(210, 9%, 30%); max-width: 48ch; }
.p4-trust { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; }
.p4-trust__num { font-family: var(--font-primary); font-weight: 500; font-size: 2rem; color: var(--color-contrast-high); line-height: 1; }
.p4-trust__lab { font-family: var(--font-secondary); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-contrast-medium); margin-top: 0.4rem; }
@media (max-width: 880px) {
.p4-hero__inner { grid-template-columns: 1fr; }
.p4-hero__form { max-width: 30rem; }
}
/* Three verticals */
.p4-verticals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.p4-vertical { background: #fff; border: 1px solid hsl(210, 8%, 88%); overflow: hidden; }
.p4-vertical .img-slot { aspect-ratio: 16/10; border-radius: 0; }
.p4-vertical__body { padding: 1.5rem; }
.p4-vertical h3 { font-family: var(--font-primary); font-weight: 500; font-size: 1.25rem; color: var(--color-contrast-high); margin-bottom: 0.5rem; }
.p4-vertical p { font-family: var(--font-secondary); font-size: 0.93rem; line-height: 1.6; color: hsl(210, 9%, 32%); }
@media (max-width: 820px) { .p4-verticals { grid-template-columns: 1fr; } }
/* Sourcing model — 4 numbered feature rows */
.p4-model { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.p4-feature {
background: #fff; border: 1px solid hsl(210, 8%, 88%); border-left: 3px solid var(--nywd-green);
padding: 1.6rem 1.75rem;
}
.p4-feature h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.1rem; color: var(--color-contrast-high); margin-bottom: 0.5rem; }
.p4-feature p { font-family: var(--font-secondary); font-size: 0.95rem; line-height: 1.65; color: hsl(210, 9%, 30%); }
@media (max-width: 760px) { .p4-model { grid-template-columns: 1fr; } }
/* Partner sectors — compact list */
.p4-partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; }
.p4-partner { padding: 1.25rem 0; border-top: 1px solid hsl(210, 8%, 86%); }
.p4-partner h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.0625rem; color: var(--color-contrast-high); margin-bottom: 0.35rem; }
.p4-partner p { font-family: var(--font-secondary); font-size: 0.93rem; line-height: 1.6; color: hsl(210, 9%, 32%); }
@media (max-width: 720px) { .p4-partners { grid-template-columns: 1fr; } }
/* ════════════════════════════════════════════════════════════════════
P5 — HIGH-VELOCITY GATEWAY (Off-Price Eyewear Wholesale USA)
Dark centered hero + gateway form, market-factor cards, guarantee band
════════════════════════════════════════════════════════════════════ */
.p5-hero { background: linear-gradient(165deg, #22262b 0%, #2e343b 100%); color: #fff; }
.p5-hero__inner { max-width: 56rem; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem); text-align: center; }
.p5-hero__strap { font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: #79c3c2; font-weight: 700; margin-bottom: 1.25rem; }
.p5-hero h1 {
font-family: var(--font-primary); font-weight: 500; color: #fff;
font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.12; letter-spacing: -0.015em;
max-width: 20ch; margin: 0 auto 1.25rem; text-wrap: balance;
}
.p5-hero h1 em { font-style: italic; color: #79c3c2; font-weight: 400; }
.p5-hero__sub { font-family: var(--font-secondary); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.7; color: rgba(255,255,255,0.74); max-width: 50ch; margin: 0 auto; }
.p5-hero__form { max-width: 40rem; margin: clamp(2rem, 4vw, 3rem) auto 0; text-align: left; }
.p5-hero__form .pg-field--row3 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
@media (max-width: 560px) { .p5-hero__form .pg-field--row3 { grid-template-columns: 1fr; } }
/* Market-factor cards */
.p5-factors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.p5-factor { background: #fff; border: 1px solid hsl(210, 8%, 88%); padding: 1.75rem; }
.p5-factor__n { font-family: var(--font-primary); font-style: italic; font-size: 2.25rem; color: var(--nywd-green); line-height: 1; margin-bottom: 0.75rem; }
.p5-factor h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.1rem; color: var(--color-contrast-high); margin-bottom: 0.5rem; }
.p5-factor p { font-family: var(--font-secondary); font-size: 0.95rem; line-height: 1.65; color: hsl(210, 9%, 30%); }
@media (max-width: 760px) { .p5-factors { grid-template-columns: 1fr; } }
/* Fulfill-from-stock guarantee band */
.p5-guarantee {
background: #1f2329; color: #fff;
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
max-width: var(--max-w-lg); margin: 0 auto;
display: grid; grid-template-columns: 1fr 1px 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.p5-guarantee__rule { background: rgba(255,255,255,0.14); width: 1px; height: 100%; }
.p5-guarantee__k { font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #79c3c2; font-weight: 700; margin-bottom: 1rem; }
.p5-guarantee h2 { font-family: var(--font-primary); font-weight: 500; color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; text-wrap: balance; }
.p5-guarantee h2 em { font-style: italic; color: #79c3c2; }
.p5-guarantee p { font-family: var(--font-secondary); font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.74); }
.p5-guarantee p + p { margin-top: 1rem; }
.p5-guarantee strong { color: #fff; font-weight: 600; }
@media (max-width: 800px) { .p5-guarantee { grid-template-columns: 1fr; } .p5-guarantee__rule { display: none; } }
/* ════════════════════════════════════════════════════════════════════
P6 — DIRECTORY / GUIDE (Best Eyewear Distributors in the USA)
Light editorial: model directory cards, criteria checklist, myth-buster
════════════════════════════════════════════════════════════════════ */
.p6-hero { background: #fff; border-bottom: 1px solid hsl(210,8%,90%); }
.p6-hero__inner {
max-width: var(--max-w-lg); margin: 0 auto;
padding: clamp(1.75rem,3vw,2.75rem) clamp(1.25rem,4vw,2.5rem);
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,4rem); align-items: stretch;
}
.p6-hero__copy { align-self: center; }
.p6-hero__media { align-self: stretch; }
.p6-hero__media img {
width: 100%; height: 100%; min-height: 360px;
object-fit: cover; object-position: 46% 74%;
display: block;
}
@media (max-width: 860px) {
.p6-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
.p6-hero__media img { min-height: 0; aspect-ratio: 4 / 3; }
}
.p6-hero__strap { font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--nywd-green); font-weight: 700; margin-bottom: 1.25rem; }
.p6-hero h1 { font-family: var(--font-primary); font-weight: 500; font-size: clamp(2.2rem,4.8vw,3.6rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--color-contrast-high); max-width: 18ch; text-wrap: balance; margin-bottom: 1.5rem; }
.p6-hero h1 em { font-style: italic; color: var(--nywd-green); font-weight: 400; }
.p6-hero__sub { font-family: var(--font-secondary); font-size: clamp(1.0625rem,1.5vw,1.2rem); line-height: 1.7; color: hsl(210,9%,30%); max-width: 54ch; margin-bottom: 1.75rem; }
/* Model directory cards */
.p6-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.p6-model {
background: #fff; border: 1px solid hsl(210, 8%, 86%);
display: flex; flex-direction: column;
}
.p6-model--feature { border-color: var(--nywd-green); box-shadow: 0 0 0 1px var(--nywd-green); }
.p6-model__top { padding: 1.5rem 1.6rem; border-bottom: 1px solid hsl(210, 8%, 90%); }
.p6-model--feature .p6-model__top { background: hsl(179, 32%, 96%); }
.p6-model__n { font-family: var(--font-primary); font-style: italic; font-size: 1.5rem; color: var(--nywd-green); line-height: 1; }
.p6-model h3 { font-family: var(--font-primary); font-weight: 500; font-size: 1.35rem; color: var(--color-contrast-high); margin: 0.5rem 0 0; line-height: 1.2; }
.p6-model__body { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.p6-model__line { font-family: var(--font-secondary); font-size: 0.92rem; line-height: 1.55; color: hsl(210, 9%, 32%); }
.p6-model__line b { display: block; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-contrast-medium); font-weight: 700; margin-bottom: 0.25rem; }
.p6-model__best { margin-top: auto; padding: 1rem 1.6rem; border-top: 1px solid hsl(210, 8%, 90%); background: var(--nywd-muted); font-family: var(--font-secondary); font-size: 0.9rem; line-height: 1.5; color: hsl(210, 9%, 28%); }
.p6-model__best b { display: block; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nywd-green); font-weight: 700; margin-bottom: 0.3rem; }
.p6-model--feature .p6-model__best { background: hsl(179, 32%, 96%); }
@media (max-width: 880px) { .p6-models { grid-template-columns: 1fr; } }
/* Misconceptions */
.p6-myths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.p6-myth { background: #fff; border: 1px solid hsl(210, 8%, 88%); padding: 1.75rem; }
.p6-myth__claim { font-family: var(--font-primary); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: var(--color-contrast-medium); margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid hsl(210, 8%, 90%); }
.p6-myth__r { font-family: var(--font-secondary); font-size: 0.95rem; line-height: 1.65; color: hsl(210, 9%, 28%); }
.p6-myth__r b { color: var(--nywd-green-dark); font-weight: 700; }
@media (max-width: 760px) { .p6-myths { grid-template-columns: 1fr; } }
/* Selection criteria checklist */
.p6-criteria { display: flex; flex-direction: column; }
.p6-crit { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid hsl(210, 8%, 88%); align-items: baseline; }
.p6-crit:last-child { border-bottom: 1px solid hsl(210, 8%, 88%); }
.p6-crit__n { font-family: var(--font-primary); font-style: italic; font-size: 2rem; color: var(--nywd-green); line-height: 1; }
.p6-crit h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.0625rem; color: var(--color-contrast-high); margin-bottom: 0.3rem; }
.p6-crit p { font-family: var(--font-secondary); font-size: 0.95rem; line-height: 1.65; color: hsl(210, 9%, 30%); }
@media (max-width: 600px) { .p6-crit { grid-template-columns: 1fr; gap: 0.4rem; } }
/* ════════════════════════════════════════════════════════════════════
P7 — CONVERSION LANDING (Dropship Designer Sunglasses)
E-commerce: image hero, benefit cards, curation themes, access form
════════════════════════════════════════════════════════════════════ */
.p7-hero { background: var(--nywd-accent-soft); border-bottom: 1px solid hsl(210,8%,90%); }
.p7-hero__inner {
max-width: var(--max-w-lg); margin: 0 auto;
padding: clamp(2.5rem,5vw,4.5rem) clamp(1.25rem,4vw,2.5rem);
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,4rem); align-items: center;
}
.p7-hero__strap { font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nywd-green); font-weight: 700; margin-bottom: 1.25rem; }
.p7-hero h1 { font-family: var(--font-primary); font-weight: 500; font-size: clamp(2.1rem,4.4vw,3.4rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--color-contrast-high); text-wrap: balance; margin-bottom: 1.5rem; }
.p7-hero h1 em { font-style: italic; color: var(--nywd-green); font-weight: 400; }
.p7-hero__sub { font-family: var(--font-secondary); font-size: clamp(1rem,1.4vw,1.15rem); line-height: 1.7; color: hsl(210,9%,30%); max-width: 50ch; margin-bottom: 1.75rem; }
.p7-hero__media .img-slot { aspect-ratio: 4/5; border-radius: 0; }
@media (max-width: 860px) { .p7-hero__inner { grid-template-columns: 1fr; } .p7-hero__media { max-width: 26rem; } }
/* Benefit cards */
.p7-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.p7-benefit { background: #fff; border: 1px solid hsl(210, 8%, 88%); border-top: 3px solid var(--nywd-green); padding: 1.75rem; }
.p7-benefit__ic { width: 40px; height: 40px; border-radius: 50%; background: hsl(179, 30%, 94%); color: var(--nywd-green); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.p7-benefit__ic svg { width: 20px; height: 20px; }
.p7-benefit h3 { font-family: var(--font-primary); font-weight: 500; font-size: 1.3rem; color: var(--color-contrast-high); margin-bottom: 0.5rem; }
.p7-benefit p { font-family: var(--font-secondary); font-size: 0.95rem; line-height: 1.65; color: hsl(210, 9%, 30%); }
@media (max-width: 820px) { .p7-why { grid-template-columns: 1fr; } }
/* Benchmarks — numbered */
.p7-benchmarks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.p7-bench { background: #fff; border: 1px solid hsl(210, 8%, 88%); padding: 1.6rem 1.75rem; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.p7-bench__n { font-family: var(--font-primary); font-style: italic; font-size: 2rem; color: var(--nywd-green); line-height: 1; }
.p7-bench h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.0625rem; color: var(--color-contrast-high); margin-bottom: 0.35rem; }
.p7-bench p { font-family: var(--font-secondary); font-size: 0.93rem; line-height: 1.6; color: hsl(210, 9%, 30%); }
@media (max-width: 760px) { .p7-benchmarks { grid-template-columns: 1fr; } }
/* Curation themes */
.p7-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.p7-theme { background: #fff; border: 1px solid hsl(210, 8%, 88%); overflow: hidden; }
.p7-theme .img-slot { aspect-ratio: 4/3; border-radius: 0; }
.p7-theme__body { padding: 1.5rem; }
.p7-theme__k { font-family: var(--font-secondary); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nywd-green); font-weight: 700; margin-bottom: 0.5rem; }
.p7-theme h3 { font-family: var(--font-primary); font-weight: 500; font-size: 1.3rem; color: var(--color-contrast-high); margin-bottom: 0.4rem; }
.p7-theme p { font-family: var(--font-secondary); font-size: 0.93rem; line-height: 1.6; color: hsl(210, 9%, 32%); }
@media (max-width: 820px) { .p7-themes { grid-template-columns: 1fr; } }
/* Access — steps + form */
.p7-access { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.p7-access__steps { display: flex; flex-direction: column; }
.p7-access__step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid hsl(210, 8%, 86%); align-items: baseline; }
.p7-access__step:last-child { border-bottom: 1px solid hsl(210, 8%, 86%); }
.p7-access__n { font-family: var(--font-primary); font-style: italic; font-size: 1.75rem; color: var(--nywd-green); line-height: 1; }
.p7-access__step h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1rem; color: var(--color-contrast-high); margin-bottom: 0.25rem; }
.p7-access__step p { font-family: var(--font-secondary); font-size: 0.92rem; line-height: 1.55; color: hsl(210, 9%, 32%); }
@media (max-width: 860px) { .p7-access { grid-template-columns: 1fr; } }
/* ════════════════════════════════════════════════════════════════════
B9 — LIQUIDATION MANIFEST (Amazon Return Pallets)
Light "manifest sheet" hero, reuses .b8-body / .b8-h2 / .b8-table etc.
════════════════════════════════════════════════════════════════════ */
.b9-hero { background: var(--nywd-muted); border-bottom: 1px solid hsl(210,8%,88%); position: relative; }
.b9-hero__inner { max-width: 54rem; margin: 0 auto; padding: clamp(2.75rem,6vw,4.75rem) clamp(1.25rem,4vw,2.5rem); position: relative; z-index: 1; }
.b9-stamp { display: inline-flex; align-items: center; gap: 0.6rem; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nywd-green-dark); border: 1px dashed hsl(179,25%,55%); background: #fff; padding: 0.4rem 0.8rem; border-radius: 3px; margin-bottom: 1.5rem; }
.b9-hero__eyebrow { font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nywd-green); font-weight: 700; margin-bottom: 1rem; }
.b9-hero h1 { font-family: var(--font-primary); font-weight: 500; font-size: clamp(2.1rem,4.8vw,3.55rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--color-contrast-high); margin: 0 0 1.25rem; text-wrap: balance; }
.b9-hero h1 em { font-style: italic; color: var(--nywd-green); font-weight: 400; }
.b9-hero__dek { font-family: var(--font-secondary); font-size: clamp(1.05rem,1.6vw,1.22rem); line-height: 1.65; color: hsl(210,9%,30%); max-width: 56ch; margin: 0; }
.b9-hero__byline { margin-top: 1.75rem; font-family: var(--font-secondary); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--color-contrast-medium); }
/* ════════════════════════════════════════════════════════════════════
B10 — GIFT EDITORIAL (Corporate Holiday Gifts)
Warm cream editorial hero, reuses .b8-body / .b8-h2 / .b8-table etc.
════════════════════════════════════════════════════════════════════ */
.b10-hero { background: var(--nywd-accent-soft); border-bottom: 1px solid hsl(30,20%,86%); position: relative; overflow: hidden; }
.b10-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 88% -10%, rgba(50,144,143,0.12), transparent 55%); pointer-events: none; }
.b10-hero__inner { max-width: 54rem; margin: 0 auto; padding: clamp(2.75rem,6vw,5rem) clamp(1.25rem,4vw,2.5rem); position: relative; z-index: 1; }
.b10-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-secondary); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nywd-green-dark); background: #fff; border: 1px solid hsl(179,22%,80%); padding: 0.4rem 0.85rem; border-radius: 999px; margin-bottom: 1.5rem; }
.b10-hero__eyebrow { font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nywd-green); font-weight: 700; margin-bottom: 1rem; }
.b10-hero h1 { font-family: var(--font-primary); font-weight: 500; font-size: clamp(2.1rem,4.8vw,3.6rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--color-contrast-high); margin: 0 0 1.25rem; text-wrap: balance; }
.b10-hero h1 em { font-style: italic; color: var(--nywd-green); font-weight: 400; }
.b10-hero__dek { font-family: var(--font-secondary); font-size: clamp(1.05rem,1.6vw,1.22rem); line-height: 1.65; color: hsl(210,9%,30%); max-width: 56ch; margin: 0; }
.b10-hero__byline { margin-top: 1.75rem; font-family: var(--font-secondary); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--color-contrast-medium); }
/* ════════════════════════════════════════════════════════════════════
B8 — LIVE BROADCAST / RUNDOWN (How to Do a Live Auction)
Dark broadcast hero w/ LIVE badge, inline lead card, rundown steps
════════════════════════════════════════════════════════════════════ */
.b8-wrap { max-width: 62rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.b8-narrow { max-width: 46rem; margin: 0 auto; }
/* ════════════════════════════════════════════════════════════════════
HW — HOW IT WORKS hub (process journey layout)
════════════════════════════════════════════════════════════════════ */
.hw-wrap { max-width: 74rem; margin: 0 auto; padding: 0 clamp(1.25rem,4vw,2.5rem); }
.hw-narrow { max-width: 52rem; }
.hw-eyebrow { font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nywd-green); font-weight: 700; margin-bottom: 1rem; }
.hw-h2 { font-family: var(--font-primary); font-weight: 500; font-size: clamp(1.9rem,3.6vw,2.9rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--color-contrast-high); text-wrap: balance; margin: 0; }
.hw-h2 em { font-style: italic; color: var(--nywd-green); font-weight: 400; }
.hw-sec { padding: clamp(3.25rem,6vw,5rem) 0; }
.hw-sec__head { max-width: 44rem; margin: 0 auto clamp(2.25rem,4vw,3.25rem); text-align: center; }
.hw-sec__head p { font-family: var(--font-secondary); font-size: 1.0625rem; line-height: 1.7; color: hsl(210,9%,32%); margin: 1rem auto 0; max-width: 52ch; }
/* Hero — split with image slot */
.hw-hero { background: var(--nywd-accent-soft); border-bottom: 1px solid hsl(30,20%,88%); }
.hw-hero__inner { max-width: 82rem; margin: 0 auto; display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: stretch; }
.hw-hero__copy { padding: clamp(2.75rem,6vw,5rem) clamp(1.5rem,4vw,4rem); align-self: center; }
.hw-hero__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-secondary); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nywd-green); border: 1px solid hsl(179,22%,78%); background: #fff; padding: 0.4rem 0.85rem; border-radius: 999px; margin-bottom: 1.5rem; }
.hw-hero h1 { font-family: var(--font-primary); font-weight: 500; font-size: clamp(2.3rem,4.6vw,3.8rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--color-contrast-high); margin: 0 0 1.25rem; text-wrap: balance; }
.hw-hero h1 em { font-style: italic; color: var(--nywd-green); font-weight: 400; }
.hw-hero__sub { font-family: var(--font-secondary); font-size: clamp(1.05rem,1.5vw,1.22rem); line-height: 1.6; color: hsl(210,9%,30%); max-width: 46ch; margin: 0 0 2rem; }
.hw-hero__reassure { font-family: var(--font-secondary); font-size: 0.85rem; color: var(--color-contrast-medium); margin: 1rem 0 0; }
.hw-hero__media { position: relative; min-height: 22rem; }
.hw-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: 8px; }
@media (max-width: 860px) { .hw-hero__inner { grid-template-columns: 1fr; } .hw-hero__media { order: -1; min-height: 0; aspect-ratio: 3/2; } .hw-hero__img { position: static; height: 100%; border-radius: 6px; } }
/* Image slot (dashed placeholder w/ suggestion) */
.hw-slot { position: absolute; inset: 0; background: repeating-linear-gradient(135deg,#f3f1ec,#f3f1ec 14px,#eae7df 14px,#eae7df 28px); display: flex; align-items: center; justify-content: center; text-align: center; }
.hw-slot__note { max-width: 32ch; font-family: var(--font-secondary); font-size: 0.8rem; line-height: 1.5; color: #8a8477; padding: 1.5rem; }
.hw-slot__note b { display: block; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nywd-green-dark); margin-bottom: 0.5rem; }
.hw-slot--band { position: relative; aspect-ratio: 16/6; border-top: 1px solid hsl(210,8%,88%); border-bottom: 1px solid hsl(210,8%,88%); }
.hw-slot--tall { position: relative; aspect-ratio: 16/9; border: 1px solid hsl(210,8%,88%); margin-top: 1.5rem; }
/* Trust strip */
.hw-trust { background: var(--color-primary); color: #fff; }
.hw-trust__inner { max-width: 74rem; margin: 0 auto; padding: clamp(1.5rem,3vw,2rem) clamp(1.25rem,4vw,2.5rem); display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; text-align: center; }
.hw-trust__n { font-family: var(--font-primary); font-weight: 500; font-size: clamp(1.7rem,3vw,2.4rem); color: #fff; line-height: 1; }
.hw-trust__l { font-family: var(--font-secondary); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 0.5rem; }
@media (max-width: 620px) { .hw-trust__inner { grid-template-columns: repeat(2,1fr); gap: 1.75rem; } }
/* Benefit grid */
.hw-bens { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem 2rem; }
.hw-ben { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.hw-ben__c { width: 26px; height: 26px; border-radius: 50%; background: hsl(179,30%,94%); color: var(--nywd-green-dark); display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; margin-top: 0.15rem; }
.hw-ben h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.02rem; color: var(--color-contrast-high); margin: 0 0 0.2rem; }
.hw-ben p { font-family: var(--font-secondary); font-size: 0.93rem; line-height: 1.55; color: hsl(210,9%,34%); margin: 0; }
@media (max-width: 680px) { .hw-bens { grid-template-columns: 1fr; } }
/* Pain -> fix */
.hw-pains { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.hw-pain { background: #fff; border: 1px solid hsl(210,8%,88%); border-radius: 6px; padding: 1.6rem 1.5rem; text-align: center; }
.hw-pain__k { font-family: var(--font-secondary); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9a9a9a; margin-bottom: 0.35rem; }
.hw-pain__before { font-family: var(--font-secondary); font-size: 0.95rem; color: #8a5a2e; text-decoration: line-through; text-decoration-color: #d0b48f; }
.hw-pain__arrow { color: var(--nywd-green); margin: 0.6rem 0; font-size: 1.1rem; }
.hw-pain__k--good { color: var(--nywd-green); }
.hw-pain__after { font-family: var(--font-secondary); font-weight: 600; font-size: 1.02rem; color: var(--color-contrast-high); line-height: 1.4; }
@media (max-width: 760px) { .hw-pains { grid-template-columns: 1fr; } }
/* Steps — numbered */
.hw-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.hw-step { background: #fff; border: 1px solid hsl(210,8%,88%); border-top: 3px solid var(--nywd-green); border-radius: 6px; padding: 1.5rem 1.4rem; }
.hw-step__n { font-family: var(--font-primary); font-style: italic; font-size: 2rem; color: var(--nywd-green); line-height: 1; }
.hw-step__tag { font-family: var(--font-secondary); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-contrast-medium); margin: 0.75rem 0 0.4rem; }
.hw-step h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.05rem; color: var(--color-contrast-high); margin: 0 0 0.4rem; }
.hw-step p { font-family: var(--font-secondary); font-size: 0.9rem; line-height: 1.55; color: hsl(210,9%,34%); margin: 0; }
@media (max-width: 860px) { .hw-steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .hw-steps { grid-template-columns: 1fr; } }
/* Buyer cards */
.hw-buyers { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.hw-buyer { border: 1px solid hsl(210,8%,88%); border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.hw-buyer__slot { position: relative; aspect-ratio: 3/2; background: repeating-linear-gradient(135deg,#f3f1ec,#f3f1ec 12px,#eae7df 12px,#eae7df 24px); border-bottom: 1px solid hsl(210,8%,90%); display: flex; align-items: center; justify-content: center; }
.hw-buyer__slot span { font-family: var(--font-secondary); font-size: 0.68rem; line-height: 1.4; color: #8a8477; text-align: center; padding: 0.75rem; }
.hw-buyer__body { padding: 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.hw-buyer h3 { font-family: var(--font-primary); font-weight: 500; font-size: 1.25rem; color: var(--color-contrast-high); margin: 0 0 0.4rem; }
.hw-buyer p { font-family: var(--font-secondary); font-size: 0.92rem; line-height: 1.55; color: hsl(210,9%,34%); margin: 0 0 0.9rem; }
.hw-buyer a { margin-top: auto; font-family: var(--font-secondary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nywd-green); text-decoration: none; }
.hw-buyer a:hover { opacity: 0.65; }
@media (max-width: 860px) { .hw-buyers { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .hw-buyers { grid-template-columns: 1fr; } }
/* Confidence */
.hw-conf { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-top: 2rem; }
.hw-conf__card { background: #fff; border: 1px solid hsl(210,8%,88%); border-radius: 6px; padding: 1.5rem 1.5rem; }
.hw-conf__label { font-family: var(--font-secondary); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nywd-green); margin-bottom: 0.4rem; }
.hw-conf__value { font-family: var(--font-primary); font-weight: 500; font-size: 1.2rem; color: var(--color-contrast-high); margin-bottom: 0.5rem; }
.hw-conf__card p { font-family: var(--font-secondary); font-size: 0.9rem; line-height: 1.55; color: hsl(210,9%,34%); margin: 0; }
@media (max-width: 760px) { .hw-conf { grid-template-columns: 1fr; } }
/* Final CTA + form */
.hw-final { background: #1b1e22; color: #fff; }
.hw-final__grid { max-width: 66rem; margin: 0 auto; padding: 0 clamp(1.25rem,4vw,2.5rem); display: grid; grid-template-columns: 1fr 0.95fr; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.hw-final .hw-h2 { color: #fff; }
.hw-final__copy p { font-family: var(--font-secondary); font-size: 1.05rem; line-height: 1.65; color: rgba(255,255,255,0.76); margin: 1rem 0 0; }
.hw-final__checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.hw-final__checks li { position: relative; padding-left: 1.7rem; font-family: var(--font-secondary); font-size: 0.95rem; color: rgba(255,255,255,0.85); }
.hw-final__checks li::before { content: "\2713"; position: absolute; left: 0; color: #79c3c2; font-weight: 700; }
@media (max-width: 820px) { .hw-final__grid { grid-template-columns: 1fr; } }
/* Hero — broadcast panel */
.b8-hero { background: #1b1e22; color: #fff; position: relative; overflow: hidden; }
.b8-hero::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 90% at 82% -10%, rgba(50,144,143,0.28), transparent 55%);
pointer-events: none;
}
.b8-hero__inner { max-width: 74rem; margin: 0 auto; padding: 0; position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
.b8-hero__copy { padding: clamp(2.75rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem); align-self: center; }
.b8-hero__media { position: relative; min-height: 320px; }
.b8-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 26%; }
.b8-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #1b1e22 0%, rgba(27,30,34,0.45) 9%, transparent 26%); pointer-events: none; }
@media (max-width: 820px) { .b8-hero__inner { grid-template-columns: 1fr; } .b8-hero__media { min-height: 0; aspect-ratio: 3 / 2; order: -1; } .b8-hero__media::after { background: linear-gradient(0deg, #1b1e22 0%, rgba(27,30,34,0.15) 40%, transparent 70%); } }
.b8-live {
display: inline-flex; align-items: center; gap: 0.55rem;
font-family: var(--font-secondary); font-size: 0.66rem; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase; color: #fff;
background: rgba(226,73,73,0.16); border: 1px solid rgba(226,73,73,0.5);
padding: 0.4rem 0.8rem; border-radius: 999px; margin-bottom: 1.5rem;
}
.b8-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #e24949; animation: b8pulse 1.6s ease-in-out infinite; }
@keyframes b8pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.b8-hero__eyebrow { font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: #79c3c2; font-weight: 700; margin-bottom: 1rem; }
.b8-hero h1 {
font-family: var(--font-primary); font-weight: 500; color: #fff;
font-size: clamp(2.1rem, 4.8vw, 3.55rem); line-height: 1.12; letter-spacing: -0.015em;
margin: 0 0 1.25rem; text-wrap: balance;
}
.b8-hero h1 em { font-style: italic; color: #79c3c2; font-weight: 400; }
.b8-hero__dek { font-family: var(--font-secondary); font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.65; color: rgba(255,255,255,0.76); max-width: 54ch; }
.b8-hero__byline { margin-top: 1.75rem; font-family: var(--font-secondary); font-size: 0.78rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); }
/* Body prose */
.b8-body { background: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.b8-body p, .b8-body li { font-family: var(--font-secondary); font-size: 1.0625rem; line-height: 1.8; color: hsl(210, 9%, 26%); }
.b8-body p { margin: 0 0 1.25rem; }
.b8-body ul, .b8-body ol { margin: 0 0 1.5rem; padding-left: 1.35rem; }
.b8-body li { margin-bottom: 0.6rem; }
.b8-body strong { font-weight: 600; color: var(--color-contrast-high); }
.b8-body a { color: var(--nywd-green-dark); text-decoration: underline; text-underline-offset: 2px; }
.b8-body a:hover { opacity: 0.7; }
.b8-h2 { font-family: var(--font-primary); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.14; letter-spacing: -0.01em; color: var(--color-contrast-high); margin: 0.4rem 0 1rem; text-wrap: balance; }
.b8-h2 em { font-style: italic; color: var(--nywd-green); }
.b8-h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.2rem; color: var(--color-contrast-high); margin: 1.75rem 0 0.5rem; }
/* Rundown step marker */
.b8-step { display: flex; align-items: center; gap: 0.85rem; margin: 2.75rem 0 0; }
.b8-step__tag { font-family: var(--font-secondary); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: var(--nywd-green); padding: 0.32rem 0.7rem; border-radius: 3px; white-space: nowrap; }
.b8-step__rule { flex: 1; height: 1px; background: hsl(210, 8%, 88%); }
/* Platform table */
.b8-table-wrap { overflow-x: auto; margin: 1.25rem 0 1.75rem; border: 1px solid hsl(210, 8%, 88%); border-radius: 6px; }
.b8-table { width: 100%; border-collapse: collapse; min-width: 34rem; font-family: var(--font-secondary); }
.b8-table th, .b8-table td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid hsl(210, 8%, 91%); font-size: 0.95rem; line-height: 1.5; vertical-align: top; }
.b8-table th { background: var(--color-primary); color: #fff; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.b8-table tr:last-child td { border-bottom: 0; }
.b8-table td:first-child { font-weight: 600; color: var(--color-contrast-high); white-space: nowrap; }
.b8-table tbody tr:nth-child(even) td, .b8-table tbody tr:nth-child(even) td { background: var(--nywd-muted); }
/* Callout */
.b8-callout { background: var(--nywd-accent-soft); border-left: 3px solid var(--nywd-green); padding: 1.25rem 1.5rem; margin: 1.75rem 0; }
.b8-callout p { margin: 0; font-size: 1rem; }
/* Inline lead form card */
.b8-lead { background: #1b1e22; color: #fff; padding: clamp(2rem, 4vw, 3rem) 0; position: relative; overflow: hidden; }
.b8-lead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 100% 0%, rgba(50,144,143,0.22), transparent 60%); pointer-events: none; }
.b8-lead__grid { max-width: 66rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); display: grid; grid-template-columns: 1fr 0.95fr; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; position: relative; z-index: 1; }
.b8-lead__eyebrow { font-family: var(--font-secondary); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #79c3c2; font-weight: 700; margin-bottom: 0.9rem; }
.b8-lead h2 { font-family: var(--font-primary); font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.18; color: #fff; margin: 0 0 1rem; text-wrap: balance; }
.b8-lead h2 em { font-style: italic; color: #79c3c2; }
.b8-lead p { font-family: var(--font-secondary); font-size: 1rem; line-height: 1.68; color: rgba(255,255,255,0.76); margin: 0; }
.b8-lead__points { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.b8-lead__points li { position: relative; padding-left: 1.6rem; font-family: var(--font-secondary); font-size: 0.95rem; line-height: 1.5; color: rgba(255,255,255,0.82); }
.b8-lead__points li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #79c3c2; font-weight: 700; }
@media (max-width: 820px) { .b8-lead__grid { grid-template-columns: 1fr; } }
/* FAQ + related reuse .b2-faq / .more-news */
.b8-related { background: var(--nywd-muted); padding: clamp(2.5rem, 4vw, 3.5rem) 0; }
.b8-related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2rem; }
.b8-related a { font-family: var(--font-secondary); font-size: 0.98rem; line-height: 1.5; color: var(--color-contrast-high); text-decoration: none; padding: 0.85rem 0; border-top: 1px solid hsl(210, 8%, 86%); display: block; transition: opacity .15s; }
.b8-related a:hover { opacity: 0.62; }
@media (max-width: 700px) { .b8-related__grid { grid-template-columns: 1fr; } }
/* B8 imagery */
.b8-figure { margin: 0; }
.b8-figure img { display: block; width: 100%; height: auto; }
.b8-figure figcaption { font-family: var(--font-secondary); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--color-contrast-medium); padding: 0.7rem clamp(1.25rem, 4vw, 2.5rem); max-width: 74rem; margin: 0 auto; }
.b8-figure--band img { max-height: 560px; object-fit: cover; object-position: 50% 22%; }
.b8-inline { margin: 1.5rem 0 0.5rem; border-radius: 6px; overflow: hidden; border: 1px solid hsl(210, 8%, 88%); }
.b8-inline img { display: block; width: 100%; height: auto; }
.b8-inline figcaption { font-family: var(--font-secondary); font-size: 0.75rem; color: var(--color-contrast-medium); padding: 0.6rem 0.9rem; background: var(--nywd-muted); }
/* ASP.NET validation and real reCAPTCHA support for dynamic page */
.hw-page .text-red-500 {
display: block;
margin-top: 5px;
color: #c0362c;
font-family: var(--font-secondary);
font-size: 12px;
line-height: 1.35;
}
.pg-form__captcha {
display: flex;
justify-content: center;
margin-top: 1.25rem;
}
.hw-page .pg-form__message {
display: block;
min-height: 1.25rem;
margin-top: 0.6rem;
color: #c0362c;
font-family: var(--font-secondary);
font-size: 0.82rem;
line-height: 1.35;
text-align: center;
}
.hw-page .pg-form__btn.is-submitting {
opacity: 0.78;
}
.hw-page .btn-pill,
.hw-page .btn-pill:visited,
.hw-page .btn-pill:hover,
.hw-page .btn-pill:focus {
color: #fff !important;
}
.hw-page .pg-field--full {
grid-column: 1 / -1;
}
.hw-page .pg-textarea {
display: block;
width: 100%;
box-sizing: border-box;
}