:root{
  /* gray */ --gray-0:#FFFFFF;--gray-50:#F5F5F7;--gray-100:#E8E8ED;--gray-150:#D2D2D7;
  --gray-200:#C7C7CC;--gray-300:#AEAEB2;--gray-400:#8E8E93;--gray-500:#6E6E73;
  --gray-600:#515154;--gray-700:#424245;--gray-800:#333336;--gray-850:#2C2C2E;
  --gray-900:#1D1D1F;--gray-950:#161617;--gray-1000:#000000;
  /* accent */ --accent-50:#EAF3FF;--accent-100:#D5E7FC;--accent-200:#A9CFF9;--accent-300:#7DB5F4;
  --accent-400:#4E99EE;--accent-500:#0071E3;--accent-600:#0060C2;--accent-700:#004FA1;
  --accent-800:#003D7E;--accent-900:#002A58;
  /* status */ --error-50:#FDECEE;--error-100:#F9CFD4;--error-500:#D70015;--error-600:#AF0011;--error-700:#8A000E;
  --warning-50:#FFF4E5;--warning-100:#FBDDB4;--warning-500:#C25E00;--warning-600:#9E4C00;--warning-700:#7C3B00;
  --success-50:#EAF7EE;--success-100:#C9EBD4;--success-500:#1E7F3C;--success-600:#176A31;--success-700:#115427;
  --info-50:#EAF3FF;--info-100:#D5E7FC;--info-500:#0071E3;--info-600:#0060C2;--info-700:#004FA1;
  /* semantic (light) */
  --color-bg-base:var(--gray-0);--color-bg-subtle:var(--gray-50);
  --color-surface-base:var(--gray-0);--color-surface-raised:var(--gray-0);
  --color-surface-overlay:var(--gray-0);--color-surface-sunken:var(--gray-100);
  --color-text-primary:var(--gray-900);--color-text-secondary:rgba(29,29,31,.62);
  --color-text-tertiary:rgba(29,29,31,.32);--color-text-disabled:rgba(29,29,31,.24);
  --color-text-inverse:var(--gray-0);--color-text-link:var(--accent-500);
  --color-border-subtle:rgba(29,29,31,.08);--color-border-default:rgba(29,29,31,.14);
  --color-border-strong:rgba(29,29,31,.28);--color-border-focus:var(--accent-500);
  --color-icon-default:var(--gray-500);--color-icon-muted:var(--gray-300);--color-icon-accent:var(--accent-500);
  --color-scrim:rgba(0,0,0,.40);
  /* type */
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --type-display:700 64px/1.05 var(--font-sans);--type-h1:700 40px/1.1 var(--font-sans);
  --type-h2:700 28px/1.15 var(--font-sans);--type-h3:600 22px/1.2 var(--font-sans);
  --type-h4:600 20px/1.25 var(--font-sans);--type-h5:600 17px/1.3 var(--font-sans);
  --type-h6:600 15px/1.35 var(--font-sans);--type-body-lg:400 19px/1.55 var(--font-sans);
  --type-body-md:400 17px/1.5 var(--font-sans);--type-body-sm:400 15px/1.45 var(--font-sans);
  --type-caption:400 13px/1.4 var(--font-sans);--type-overline:600 12px/1.35 var(--font-sans);
  --type-label:500 13px/1.2 var(--font-sans);
  --tracking-display:-0.022em;--tracking-h1:-0.02em;--tracking-h2:-0.018em;--tracking-h3:-0.015em;
  --tracking-overline:0.06em;--measure:680px;
  /* space */ --space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;--space-12:12px;
  --space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;
  --space-48:48px;--space-64:64px;--space-80:80px;--space-96:96px;--space-128:128px;
  /* radius */ --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;
  --radius-xl:16px;--radius-2xl:20px;--radius-3xl:28px;--radius-full:999px;
  /* elevation */
  --elev-sm:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.04);
  --elev-md:0 4px 16px rgba(0,0,0,.06);--elev-lg:0 8px 30px rgba(0,0,0,.08);
  --elev-xl:0 16px 48px rgba(0,0,0,.12);--elev-modal:0 24px 80px rgba(0,0,0,.20);
  /* opacity */ --opacity-disabled:.4;--opacity-hover:.04;--opacity-pressed:.08;--opacity-scrim:.4;
  /* borders */ --border-hairline:.5px;--border-1:1px;--border-2:2px;
  /* z */ --z-base:0;--z-sticky:100;--z-dropdown:200;--z-overlay:300;--z-modal:400;
  --z-popover:500;--z-toast:600;--z-tooltip:700;
  /* motion */ --dur-instant:80ms;--dur-fast:150ms;--dur-base:250ms;--dur-slow:400ms;--dur-slower:600ms;
  --ease-enter:cubic-bezier(.2,.9,.3,1);--ease-exit:cubic-bezier(.4,0,.7,.2);
  --ease-standard:cubic-bezier(.4,0,.2,1);--ease-emphasis:cubic-bezier(.34,1.56,.64,1);
  /* layout */ --container-text:680px;--container-page:1120px;--container-wide:1280px;
  /* icons */ --icon-xs:12px;--icon-sm:16px;--icon-md:20px;--icon-lg:24px;--icon-xl:32px;
  /* glass */ --color-glass-bg:rgba(255,255,255,.72);
}
@media (prefers-color-scheme: dark){:root{
  --color-bg-base:var(--gray-1000);--color-bg-subtle:var(--gray-950);
  --color-surface-base:var(--gray-900);--color-surface-raised:var(--gray-850);
  --color-surface-overlay:var(--gray-800);--color-surface-sunken:#0D0D0E;
  --color-text-primary:var(--gray-50);--color-text-secondary:rgba(245,245,247,.62);
  --color-text-tertiary:rgba(245,245,247,.34);--color-text-disabled:rgba(245,245,247,.26);
  --color-text-inverse:var(--gray-900);--color-text-link:var(--accent-300);
  --color-border-subtle:rgba(245,245,247,.10);--color-border-default:rgba(245,245,247,.16);
  --color-border-strong:rgba(245,245,247,.30);--color-border-focus:var(--accent-200);
  --color-icon-default:var(--gray-300);--color-icon-muted:var(--gray-600);--color-icon-accent:var(--accent-300);
  --color-scrim:rgba(0,0,0,.55);--opacity-hover:.06;--opacity-pressed:.10;
  --color-glass-bg:rgba(22,22,23,.72);
}}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--color-bg-base); color: var(--color-text-primary); font: var(--type-body-md); display: flex; flex-direction: column; min-height: 100vh; }
main { flex-grow: 1; display: flex; flex-direction: column; width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-border-focus); }

.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-glass-bg); backdrop-filter: blur(20px) saturate(180%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.header-inner, .hero-content, .collections-inner, .footer-inner { width: 100%; max-width: var(--container-page); margin: auto; padding-right: var(--space-16); padding-left: var(--space-16); box-sizing: border-box; }
.site-header::after { position: absolute; right: 0; bottom: 0; left: 0; height: var(--border-hairline); background: var(--color-border-subtle); content: ""; }
.wordmark { display: inline-flex; align-items: center; }
.site-logo { height: var(--icon-sm); width: auto; display: block; }
nav { display: flex; gap: var(--space-24); color: var(--color-text-secondary); font: var(--type-body-sm); }
nav a { transition: color var(--dur-instant) var(--ease-standard); }
nav a:hover, nav a.active { color: var(--color-text-primary); }
nav a:focus-visible, .button:focus-visible, .collection-card:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.hero { position: relative; display: flex; width: 100%; min-height: calc(100vh - 64px); flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding-top: var(--space-96); padding-bottom: var(--space-96); text-align: center; }
.hero-network { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-enter); }
.hero-network.is-ready { opacity: 1; }
.hero-content { display: flex; width: 100%; flex-direction: column; align-items: center; text-align: center; transform: translateY(-32px); }
.hero-content { position: relative; z-index: 1; }
.hero-content .button { align-self: center; }
.eyebrow { margin: 0 0 var(--space-16); color: var(--color-text-secondary); font: var(--type-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: var(--container-page); margin-bottom: var(--space-24); font: var(--type-display); letter-spacing: var(--tracking-display); text-shadow: var(--elev-lg); }
h2 { max-width: var(--container-page); margin-bottom: 0; font: var(--type-h1); letter-spacing: var(--tracking-h1); }
h3 { margin-bottom: var(--space-8); font: var(--type-h3); letter-spacing: var(--tracking-h3); }
.hero-copy { max-width: var(--measure); margin-bottom: var(--space-32); color: var(--color-text-secondary); font: var(--type-body-lg); }
.button { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; gap: var(--space-8); min-height: 44px; padding: 0 var(--space-20); border-radius: var(--radius-lg); font: var(--type-label); transition: background var(--dur-instant) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); }
.button:active { transform: scale(.96); }
.button-primary { background: var(--gray-0); color: var(--gray-900); }
.button-primary:hover { background: var(--gray-100); }
.button-secondary { border: 1px solid var(--color-border-default); background: transparent; color: var(--color-text-primary); }
.button-secondary:hover { border-color: var(--gray-400); background: rgba(255, 255, 255, .06); }

.collections { padding-top: var(--space-96); padding-bottom: var(--space-96); border-top: 1px solid var(--color-border-subtle); }
.section-heading { margin-bottom: var(--space-48); }

.collection-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }

.collection-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-32); padding: var(--space-24); min-height: 480px; background: var(--color-bg-subtle); border-radius: var(--radius-3xl); transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
a.collection-card { cursor: pointer; }
a.collection-card:hover, a.collection-card:focus-visible { background: var(--color-surface-base); transform: scale(1.02); outline: none; }
a.collection-card:focus-visible { box-shadow: 0 0 0 4px rgba(169, 207, 249, 0.2); }

.product-card-img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius-2xl); margin-bottom: var(--space-16); display: block; border: 1px solid var(--color-border-subtle); }

.collection-card h3 { font: var(--type-h3); letter-spacing: var(--tracking-h3); margin-bottom: var(--space-12); margin-top: 0; }
.collection-copy p { margin: 0; color: var(--color-text-secondary); font: var(--type-body-md); }

.card-action { align-self: flex-start; display: flex; align-items: center; gap: var(--space-8); color: var(--color-text-primary); font: var(--type-label); }
.card-arrow { transition: color var(--dur-base) var(--ease-standard); }

.card-link-muted { align-self: flex-start; color: var(--color-text-secondary); font: var(--type-label); }

/* Checkout Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-16); background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(12px); }
.modal-card { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: var(--color-surface-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-3xl); padding: var(--space-32); position: relative; box-shadow: var(--elev-lg); scrollbar-width: none; }
.modal-card::-webkit-scrollbar { display: none; }
.modal-close { position: absolute; top: var(--space-24); right: var(--space-24); background: transparent; border: none; color: var(--color-text-secondary); font-size: 28px; line-height: 1; cursor: pointer; transition: color var(--dur-instant); }
.modal-close:hover { color: var(--color-text-primary); }

.modal-header { margin-bottom: var(--space-24); border-bottom: 1px solid var(--color-border-subtle); padding-bottom: var(--space-16); }
.modal-header h2 { margin: var(--space-8) 0 0 0; font: var(--type-h2); }

.checkout-product-summary { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16); background: var(--color-bg-subtle); border-radius: var(--radius-xl); margin-bottom: var(--space-24); border: 1px solid var(--color-border-subtle); }
.checkout-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--color-border-subtle); }
.checkout-product-info h4 { margin: 0 0 var(--space-4); font: var(--type-h3); }
.checkout-price { margin: 0; color: var(--color-text-secondary); font: var(--type-label); }

.form-section-title { font: var(--type-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-text-secondary); margin: var(--space-24) 0 var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--color-border-subtle); }

.form-group { margin-bottom: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.form-group label { font: var(--type-caption); color: var(--color-text-secondary); }
.form-control { width: 100%; padding: var(--space-12) var(--space-16); background: var(--color-surface-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); color: var(--color-text-primary); font: var(--type-body-md); transition: border-color var(--dur-instant); }
.form-control:focus { outline: none; border-color: var(--color-border-focus); }
.flex-row { display: flex; gap: var(--space-16); }
.flex-1 { flex: 1; }

.radio-group { display: flex; gap: var(--space-24); margin-top: var(--space-4); }
.radio-label { display: flex; align-items: center; gap: var(--space-8); cursor: pointer; font: var(--type-body-sm); color: var(--color-text-primary); }
.radio-label input { accent-color: var(--gray-0); cursor: pointer; }

.checkout-error { margin-top: var(--space-16); padding: var(--space-12); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-md); color: #f87171; font: var(--type-body-sm); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-16); margin-top: var(--space-32); padding-top: var(--space-20); border-top: 1px solid var(--color-border-subtle); }

/* Internal Product Brief Pages */
.brief-hero { padding-top: var(--space-96); padding-bottom: var(--space-64); text-align: left; }
.brief-hero-inner { max-width: var(--container-page); margin: auto; padding-right: var(--space-16); padding-left: var(--space-16); box-sizing: border-box; }
.back-link { display: inline-flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-32); color: var(--color-text-secondary); font: var(--type-label); transition: color var(--dur-instant) var(--ease-standard); }
.back-link:hover { color: var(--color-text-primary); }
.brief-content { max-width: var(--container-page); margin: auto; padding-right: var(--space-16); padding-left: var(--space-16); padding-bottom: var(--space-128); display: flex; flex-direction: column; gap: var(--space-64); box-sizing: border-box; }
.brief-pillar h2 { font: var(--type-h2); letter-spacing: var(--tracking-h2); margin-bottom: var(--space-16); margin-top: 0; }
.brief-pillar p { font: var(--type-body-lg); color: var(--color-text-secondary); margin: 0; }
.brief-action { padding-top: var(--space-32); border-top: 1px solid var(--color-border-subtle); display: flex; justify-content: flex-start; }

footer { border-top: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); font: var(--type-caption); padding-top: var(--space-64); padding-bottom: var(--space-64); }
.footer-inner { max-width: var(--container-page); margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32); }
.footer-col { display: flex; flex-direction: column; gap: var(--space-12); align-items: flex-start; }
.footer-col a { transition: color var(--dur-instant) var(--ease-standard); }
.footer-col a:hover { color: var(--color-text-primary); }
.footer-col .eyebrow { color: var(--color-text-primary); margin-bottom: 0; font: var(--type-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; }
footer .wordmark { color: var(--color-text-primary); margin-bottom: var(--space-8); }

@media (min-width: 600px) { .header-inner, .hero-content, .collections-inner, .footer-inner, .brief-hero-inner, .brief-content { padding-right: var(--space-24); padding-left: var(--space-24); } }
@media (min-width: 1024px) { .header-inner, .hero-content, .collections-inner, .footer-inner, .brief-hero-inner, .brief-content { padding-right: var(--space-32); padding-left: var(--space-32); } }
@media (min-width: 1280px) { .header-inner, .hero-content, .collections-inner, .footer-inner, .brief-hero-inner, .brief-content { padding-right: var(--space-40); padding-left: var(--space-40); } }
@media (max-width: 900px) { .collection-list { grid-template-columns: 1fr 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-48); } }
@media (max-width: 599px) { .header-inner { min-height: 64px; padding-top: 0; padding-bottom: 0; } nav { gap: var(--space-16); font: var(--type-caption); } .hero { min-height: calc(100vh - 64px); padding-top: var(--space-64); padding-bottom: var(--space-64); } h1 { font: var(--type-h1); letter-spacing: var(--tracking-h1); } h2 { font: var(--type-h2); letter-spacing: var(--tracking-h2); } .hero-copy { font: var(--type-body-md); } .collections { padding-top: var(--space-64); padding-bottom: var(--space-64); } .collection-list { grid-template-columns: 1fr; } .collection-card { min-height: auto; padding: var(--space-32) var(--space-24); gap: var(--space-32); border-radius: var(--radius-2xl); } .footer-inner { grid-template-columns: 1fr; gap: var(--space-40); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 80ms !important; } }