/* Marketing homepage theme, components and motion. Values follow the reference stylesheet. */
:root {
    --radius: 12px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-pop: cubic-bezier(.34, 1.4, .64, 1);
    --background: oklch(.982 .005 80);
    --foreground: oklch(.21 .012 260);
    --card: oklch(1 0 0);
    --card-foreground: var(--foreground);
    --popover: oklch(1 0 0);
    --primary: oklch(.65 .235 24);
    --primary-strong: oklch(.56 .215 25);
    --primary-foreground: oklch(1 0 0);
    --primary-soft: oklch(.95 .035 20);
    --civic: oklch(.5 .09 215);
    --civic-soft: oklch(.95 .025 215);
    --secondary: oklch(.955 .004 80);
    --muted: oklch(.95 .004 80);
    --muted-foreground: oklch(.48 .012 260);
    --accent: oklch(.94 .006 80);
    --border: oklch(.9 .006 80);
    --band: oklch(.962 .006 80);
    --silk-a: oklch(.99 .006 80);
    --silk-b: oklch(.93 .012 75);
    --silk-c: oklch(.905 .01 70);
    --silk-sheen: oklch(1 0 0 / .75);
    --grid-dot: oklch(.3 .01 260 / .09);
    --tone-deep: oklch(.93 .01 75 / .55);
    --tone-tint: oklch(.95 .03 20 / .5);
    --cta-bg: oklch(.24 .012 260);
    --cta-fg: oklch(.97 .004 80);
    --cta-muted: oklch(.78 .01 260);
    --street: oklch(.9 .008 75);
    --street-line: oklch(1 0 0 / .9);
    --shop-wall: oklch(.95 .01 75);
    --shop-glass: oklch(.9 .03 215);
    --shop-ink: oklch(.55 .012 260);
    --gutter-ink: oklch(.3 .01 260 / .08);
    --glass-bg: oklch(1 0 0 / .6);
    --glass-border: oklch(1 0 0 / .85);
    --glass-highlight: oklch(1 0 0 / .9);
    --shadow-soft: 0 1px 2px oklch(.2 .01 260 / .05), 0 8px 24px -12px oklch(.2 .01 260 / .14);
    --shadow-lift: 0 2px 4px oklch(.2 .01 260 / .06), 0 18px 36px -16px oklch(.2 .01 260 / .22);
    --ill-wall: oklch(.97 .012 80);
    --ill-wall-shade: oklch(.9 .015 75);
    --ill-roof: oklch(.32 .015 260);
    --ill-glass: oklch(.88 .04 215);
    --ill-light: oklch(.93 .11 90);
    --ill-wood: oklch(.62 .09 55);
    --ill-tile: oklch(1 0 0);
    --ill-ink: oklch(.28 .015 260);
    --ill-ground: oklch(.2 .01 260 / .08);
}

html.dark {
    color-scheme: dark;
    --background: oklch(.19 .006 260);
    --foreground: oklch(.96 .004 80);
    --card: oklch(.235 .007 260);
    --popover: oklch(.235 .007 260);
    --primary: oklch(.68 .22 24);
    --primary-strong: oklch(.6 .21 25);
    --primary-soft: oklch(.3 .06 22);
    --civic: oklch(.75 .09 215);
    --civic-soft: oklch(.3 .04 215);
    --secondary: oklch(.26 .007 260);
    --muted: oklch(.26 .007 260);
    --muted-foreground: oklch(.72 .01 260);
    --accent: oklch(.28 .008 260);
    --border: oklch(1 0 0 / .1);
    --band: oklch(.215 .007 260);
    --silk-a: oklch(.2 .006 260);
    --silk-b: oklch(.25 .008 260);
    --silk-c: oklch(.28 .01 260);
    --silk-sheen: oklch(1 0 0 / .06);
    --grid-dot: oklch(1 0 0 / .07);
    --tone-deep: oklch(.16 .006 260 / .55);
    --tone-tint: oklch(.3 .06 22 / .35);
    --cta-bg: oklch(.27 .012 260);
    --cta-fg: oklch(.97 .004 80);
    --cta-muted: oklch(.78 .01 260);
    --street: oklch(.26 .008 260);
    --street-line: oklch(1 0 0 / .18);
    --shop-wall: oklch(.32 .008 260);
    --shop-glass: oklch(.45 .05 215);
    --shop-ink: oklch(.6 .01 260);
    --gutter-ink: oklch(1 0 0 / .07);
    --glass-bg: oklch(.28 .008 260 / .55);
    --glass-border: oklch(1 0 0 / .1);
    --glass-highlight: oklch(1 0 0 / .08);
    --shadow-soft: 0 1px 2px oklch(0 0 0 / .3), 0 8px 24px -12px oklch(0 0 0 / .5);
    --shadow-lift: 0 2px 4px oklch(0 0 0 / .35), 0 18px 36px -16px oklch(0 0 0 / .6);
    --ill-wall: oklch(.9 .01 80);
    --ill-wall-shade: oklch(.78 .012 75);
    --ill-roof: oklch(.38 .01 260);
    --ill-glass: oklch(.55 .06 215);
    --ill-light: oklch(.88 .13 88);
    --ill-wood: oklch(.55 .08 55);
    --ill-tile: oklch(.29 .008 260);
    --ill-ink: oklch(.22 .01 260);
    --ill-ground: oklch(0 0 0 / .3);
}

.marketing-page {
    min-height: 100vh;
    overflow-x: clip;
    background: var(--background);
    color: var(--foreground);
    font-family: 'Bricolage Grotesque', var(--font-sans), ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.marketing-page * { border-color: var(--border); }
.marketing-page :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
.marketing-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.marketing-icon { display: block; width: 100%; height: 100%; }
.marketing-content { position:relative; z-index:1; }
.page-route { position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.35; pointer-events:none; }
.marketing-gutters { position:absolute; inset:0; z-index:0; display:none; overflow:hidden; pointer-events:none; }
.gutter-icon { position:absolute; width:180px; height:180px; color:var(--gutter-ink); opacity:.08; filter:grayscale(1); }

/* Shared backdrop and header */
.silk { position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: linear-gradient(115deg,transparent 0 18%,var(--silk-b) 26%,transparent 34% 48%,var(--silk-c) 56%,transparent 64%),linear-gradient(100deg,transparent 0 40%,var(--silk-sheen) 47%,transparent 54%),linear-gradient(160deg,transparent 0 30%,var(--silk-b) 40%,transparent 52% 70%,var(--silk-b) 80%,transparent 90%),radial-gradient(120% 60% at 50% 0%,var(--silk-a),transparent 70%),var(--background); background-size:140% 140%,180% 180%,160% 160%,100% 100%,auto; background-position:0 0,0 0,100% 0,0 0,0 0; filter:blur(10px); }
.map-grid { position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(var(--grid-dot) 1.2px,transparent 1.4px); background-size:22px 22px; }
.marketing-header { position:sticky; top:0; z-index:30; border-bottom:1px solid color-mix(in oklab,var(--border) 60%,transparent); background:color-mix(in oklab,var(--background) 70%,transparent); backdrop-filter:blur(14px); }
.marketing-header-inner { display:flex; align-items:center; justify-content:space-between; width:min(100%,1152px); height:64px; margin:auto; padding:0 20px; }
.wordmark { display:flex; align-items:center; gap:6px; color:var(--foreground); text-decoration:none; }
.wordmark-label { font-size:20px; font-weight:800; letter-spacing:-.035em; }
.wordmark-logo { display:block; width:48px; height:48px; border-radius:10px; object-fit:contain; }
.wordmark-logo-dark { display:none; }
.dark .wordmark-logo-light { display:none; }
.dark .wordmark-logo-dark { display:block; }
.desktop-nav,.mobile-nav-controls { display:flex; align-items:center; gap:4px; }
.nav-link { display:inline-flex; align-items:center; min-height:40px; padding:8px 12px; border-radius:8px; color:var(--muted-foreground); font-size:15px; font-weight:500; text-decoration:none; transition:color .2s,background-color .2s; }
.nav-link:hover { color:var(--foreground); background:var(--accent); }
.nav-divider { width:1px; height:24px; margin:0 8px; background:var(--border); }
.theme-toggle,.menu-toggle { display:grid; width:44px; height:44px; place-items:center; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--foreground); cursor:pointer; transition:transform .25s var(--ease); }
.theme-toggle:hover,.menu-toggle:hover { transform:translateY(-2px); }
.theme-toggle svg,.menu-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.theme-sun,.menu-close-icon { display:none; }
.dark .theme-moon,.menu-toggle[aria-expanded="true"] .menu-open-icon { display:none; }
.dark .theme-sun,.menu-toggle[aria-expanded="true"] .menu-close-icon { display:block; }
.mobile-nav-controls,.mobile-menu { display:none; }

/* Hero and rotating headline */
.hero-section { position:relative; padding:48px 20px 16px; }
.hero-glow { position:absolute; top:40px; left:50%; z-index:-1; width:min(1000px,96vw); height:420px; transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%,var(--silk-sheen),transparent 70%); pointer-events:none; }
.hero-copy { position:relative; z-index:1; max-width:900px; margin:0 auto; text-align:center; }
.hero-title { margin:0; font-size:clamp(2.6rem,7.4vw,5.75rem); font-weight:800; line-height:1.02; letter-spacing:-.035em; }
.text-primary { color:var(--primary); }
.word-roll { position:relative; display:inline-block; }
.reel { position:relative; display:inline-block; height:1.08em; overflow:hidden; overflow:clip; vertical-align:bottom; line-height:1.08em; clip-path:inset(1px 0 2px); }
.reel-track { display:flex; height:max-content; flex-direction:column; transition:transform .7s var(--ease); will-change:transform; }
.reel-track>span { display:block; flex:0 0 1.08em; height:1.08em; overflow:hidden; line-height:1.08em; white-space:nowrap; }
.reel-track.no-transition { transition:none; }
.squiggle { position:absolute; bottom:-.12em; left:0; width:100%; height:.22em; overflow:visible; }
.squiggle path { stroke-dasharray:320; stroke-dashoffset:320; animation:draw .9s .4s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.hero-description { max-width:440px; margin:24px auto 0; color:var(--muted-foreground); font-size:20px; line-height:1.5; }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:32px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px; border:1px solid transparent; border-radius:10px; font-size:16px; font-weight:600; line-height:1; text-decoration:none; transition:transform .25s var(--ease),background-color .2s,box-shadow .25s var(--ease),color .2s; }
.btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn:active { transform:translateY(1px) scale(.98); }
.btn-primary { background:var(--primary-strong); color:var(--primary-foreground); box-shadow:var(--shadow-soft); }
.btn-primary:hover { transform:translateY(-2px); background:var(--primary); box-shadow:var(--shadow-lift); }
.btn-secondary { border-color:var(--border); background:var(--card); color:var(--foreground); box-shadow:var(--shadow-soft); }
.btn-secondary:hover { transform:translateY(-2px); border-color:color-mix(in oklab,var(--foreground) 25%,transparent); }
.btn-ghost { min-height:44px; padding:0 12px; color:var(--muted-foreground); font-weight:500; }
.btn-ghost:hover { background:var(--accent); color:var(--foreground); }

/* The original 1200 x 525 illustrated street, orbiting tiles and storefront. */
.scene { position:relative; container-type:inline-size; width:min(100%,1200px); aspect-ratio:16/7; margin:40px auto 0; }
.scene.is-paused,.scene.is-paused * { animation-play-state:paused!important; }
.motion-paused { animation-play-state:paused!important; }
.scene-street { position:absolute; inset:0; width:100%; height:100%; }
.store { position:absolute; bottom:10.5%; left:50%; z-index:2; width:38%; transform:translateX(-50%); }
.store-body { transform-origin:50% 100%; animation:breathe 4.5s ease-in-out infinite; }
.store-awning { transform-box:fill-box; transform-origin:50% 0%; animation:flutter 3.2s ease-in-out infinite; }
.store-light { animation:glow 3.6s ease-in-out infinite; }
.store-sign { transform-box:fill-box; transform-origin:50% 0%; animation:swing 5s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform:scale(1,1); } 50% { transform:scale(1.012,.988); } }
@keyframes flutter { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(1.05); } }
@keyframes glow { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes swing { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); } }
.orbit { position:absolute; z-index:1; animation:gather 11s var(--ease) infinite; animation-delay:3s; }
.orbit-pop { animation:pop-in .6s var(--ease-pop) both; }
.orbit-float { animation:float var(--fd,6s) ease-in-out infinite; animation-delay:var(--fdl,0s); }
.tile { display:grid; width:var(--s,64px); height:var(--s,64px); place-items:center; border:1px solid var(--border); border-radius:14px; background:var(--ill-tile); box-shadow:var(--shadow-lift); rotate:var(--r,0deg); }
.tile svg { width:58%; height:58%; }
@keyframes float { 0%,100% { transform:translate(0,0); } 50% { transform:translate(var(--dx,4px),var(--dy,-10px)); } }
@keyframes pop-in { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }
@keyframes gather { 0%,76% { transform:translate(0,0) scale(1); opacity:1; } 88% { transform:translate(var(--gx),var(--gy)) scale(.45); opacity:0; } 89% { transform:translate(var(--gx),var(--gy)) scale(.45); opacity:0; } 100% { transform:translate(0,0) scale(1); opacity:1; } }
.ground { position:absolute; bottom:8%; left:50%; z-index:1; width:46%; height:6%; transform:translateX(-50%); border-radius:50%; background:var(--ill-ground); filter:blur(6px); }
.route-dash { stroke-dasharray:2 10; animation:route 18s linear infinite; }
@keyframes route { to { stroke-dashoffset:-240; } }

/* Stats glass cards */
.tone-deep { background:var(--tone-deep); }
.tone-tint { background:var(--tone-tint); }
.stats-section { position:relative; padding:48px 20px 64px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:32px; width:min(100%,1100px); margin:0 auto; }
.offset-y:nth-child(1) { margin-top:32px!important; }
.offset-y:nth-child(2) { margin-top:0!important; }
.offset-y:nth-child(3) { margin-top:48px!important; }
.glass { position:relative; overflow:hidden; padding:20px 24px 24px; border:1px solid var(--glass-border); border-radius:14px; background:var(--glass-bg); box-shadow:inset 0 1px 0 var(--glass-highlight),var(--shadow-soft); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); }
.glass::after { position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(110deg,transparent 30%,var(--glass-highlight) 50%,transparent 70%); content:""; pointer-events:none; transition:transform .9s var(--ease); }
.glass:hover::after { transform:translateX(120%); }
.tilt { rotate:var(--tilt,0deg); transition:rotate .4s var(--ease),translate .4s var(--ease),box-shadow .4s var(--ease); }
.tilt:hover,.tilt:focus-within { translate:0 -4px; rotate:0deg; box-shadow:var(--shadow-lift); }
.drift { animation:drift var(--fd,7s) ease-in-out infinite; animation-delay:var(--fdl,0s); }
@keyframes drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.stat-icon { width:36px; height:36px; color:var(--foreground); }
.stat-ghost { position:absolute; right:-18px; bottom:-22px; width:140px; height:140px; color:var(--foreground); opacity:.1; pointer-events:none; }
.stat-num { margin-top:16px; font-size:clamp(3.5rem,6vw,5.25rem); font-weight:800; letter-spacing:-.04em; line-height:.95; font-variant-numeric:tabular-nums; }
.stat-label { margin-top:8px; color:var(--muted-foreground); font-size:18px; font-weight:600; }

/* Reveal and path cards */
.reveal { opacity:0; transform:translateY(16px) scale(.97); }
.reveal.is-in { opacity:1; transform:none; transition:opacity .5s var(--ease),transform .55s var(--ease-pop); transition-delay:var(--rd,0s); }
html:not(.js) .reveal { opacity:1; transform:none; }
.pin-pop { display:inline-block; width:36px; height:36px; vertical-align:middle; animation:pop-in .6s .6s var(--ease-pop) both; }
.paths-section { position:relative; background:var(--band); }
.scallop-wrap,.footer-scallop { position:absolute; top:-27px; right:0; left:0; pointer-events:none; }
.scallop { display:block; width:100%; height:28px; color:var(--band); }
.section-inner { width:min(100%,1240px); margin:0 auto; padding:64px 20px 96px; }
.paths-heading { margin:0; text-align:center; font-size:clamp(2.25rem,4vw,3rem); font-weight:700; letter-spacing:-.025em; }
.paths-grid { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; margin-top:48px; }
.paths-connector { position:absolute; top:50%; left:50%; z-index:2; display:block; width:64px; height:112px; transform:translate(-50%,-50%); pointer-events:none; }
.path-card { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:var(--shadow-soft); }
.path-card.offset-y { margin-top:32px; }
.path-card .skeleton { display:none; }
html.js .path-card:not(.is-loaded) .skeleton { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; gap:16px; padding:24px; background:var(--card); }
html.js .path-card:not(.is-loaded) .path-content { transform:translateY(8px); opacity:0; }
.path-content { display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:20px; padding:24px; transition:opacity .45s var(--ease),transform .45s var(--ease); }
.path-icon { display:grid; width:64px; height:64px; place-items:center; border-radius:12px; transition:transform .5s var(--ease-pop); }
.path-icon svg,.path-icon .pin-drop { width:36px; height:36px; }
.civic-icon { background:var(--civic-soft); color:var(--civic); }
.primary-icon { background:var(--primary-soft); color:var(--primary-strong); }
.path-card:hover .path-icon,.path-card:focus-within .path-icon { transform:translateY(-4px) rotate(-4deg); }
.path-card:hover .pin-drop,.path-card:focus-within .pin-drop { animation:pin-drop .6s var(--ease-pop); }
@keyframes pin-drop { 0% { transform:translateY(-10px); } 60% { transform:translateY(2px); } 100% { transform:none; } }
.path-copy h3 { margin:20px 0 0; font-size:30px; font-weight:700; letter-spacing:-.025em; }
.path-title { background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0 2px; transition:background-size .35s var(--ease),color .2s; }
.path-card:hover .path-title,.path-card:focus-within .path-title { background-size:100% 2px; }
.path-copy p { margin:8px 0 0; color:var(--muted-foreground); font-size:18px; line-height:1.5; }
.path-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:24px; }
.path-art { display:grid; aspect-ratio:11/10; place-items:center; padding:12px; border-radius:12px; }
.civic-art { background:var(--civic-soft); }
.primary-art { background:var(--primary-soft); }
.path-illustration { width:100%; height:100%; }
.shimmer { flex:none; border-radius:8px; background:linear-gradient(90deg,var(--muted) 25%,var(--accent) 50%,var(--muted) 75%); background-size:200% 100%; animation:shimmer 1.1s linear infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.skeleton-icon { width:64px; height:64px; }
.skeleton-title { width:66%; height:28px; }
.skeleton-copy { width:84%; height:16px; }
.skeleton-button { width:160px; height:48px; margin-top:16px; }

/* Icon belt, subscription CTA and footer */
.marquee { position:relative; overflow:hidden; border-block:1px solid color-mix(in oklab,var(--border) 60%,transparent); padding:16px 0; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee-track { display:flex; width:max-content; gap:40px; animation:marquee 40s linear infinite; color:var(--muted-foreground); }
.marquee-track>span { display:block; width:28px; height:28px; opacity:.7; }
@keyframes marquee { to { transform:translateX(-50%); } }
.plan-section { position:relative; padding:80px 20px; }
.plan-inner { width:min(100%,1240px); margin:0 auto; }
.awning-stripes { height:34px; border-radius:14px 14px 0 0; background:repeating-linear-gradient(90deg,var(--primary) 0 40px,var(--cta-fg) 40px 80px); -webkit-mask:radial-gradient(circle at 20px 34px,transparent 12px,#000 12.5px) 0 0/40px 34px repeat-x; mask:radial-gradient(circle at 20px 34px,transparent 12px,#000 12.5px) 0 0/40px 34px repeat-x; }
.cta-band { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px; margin-top:-1px; padding:40px 48px; border-radius:0 0 14px 14px; background:var(--cta-bg); color:var(--cta-fg); box-shadow:var(--shadow-lift); }
.shop-row { width:auto; height:96px; }
.cta-copy h2 { margin:0; font-size:clamp(1.9rem,3vw,2.5rem); font-weight:700; letter-spacing:-.025em; }
.cta-copy h2 span { color:var(--primary); }
.cta-copy p { margin:8px 0 0; color:var(--cta-muted); font-size:18px; }
.cta-band .btn { white-space:nowrap; }
.marketing-footer { position:relative; overflow:hidden; background:var(--band); }
.footer-mark { position:absolute; bottom:-.28em; left:50%; transform:translateX(-50%); color:var(--foreground); font-size:clamp(6rem,24vw,22rem); font-weight:800; letter-spacing:-.06em; line-height:1; opacity:.05; pointer-events:none; white-space:nowrap; user-select:none; }
.footer-grid { position:relative; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; width:min(100%,1240px); margin:0 auto; padding:48px 20px 40px; }
.footer-brand p { max-width:320px; margin:12px 0 0; color:var(--muted-foreground); }
.footer-group h2 { margin:0; font-size:14px; font-weight:600; }
.footer-group a { display:flex; min-height:36px; align-items:center; gap:8px; width:max-content; color:var(--muted-foreground); font-size:14px; text-decoration:none; transition:color .2s; }
.footer-group a:first-of-type { margin-top:12px; }
.footer-group a:hover { color:var(--foreground); }
.soon { padding:2px 8px; border-radius:999px; background:var(--muted); font-size:12px; }
.footer-route { position:relative; display:flex; align-items:center; gap:12px; width:min(100%,1240px); margin:0 auto; padding:0 20px; }
.footer-route>span:nth-child(2) { height:0; flex:1; border-top:2px dotted color-mix(in oklab,var(--muted-foreground) 40%,transparent); }
.route-pin { width:16px; height:16px; color:var(--primary); }
.footer-bottom { position:relative; width:min(100%,1240px); margin:0 auto; padding:20px 20px 160px; color:var(--muted-foreground); font-size:14px; }

@media (max-width:767px) {
    .desktop-nav { display:none; }
    .mobile-nav-controls { display:flex; align-items:center; gap:8px; }
    .mobile-menu:not([hidden]) { display:grid; gap:4px; border-top:1px solid var(--border); padding:8px 20px 12px; }
    .hero-section { padding-top:48px; }
    .hero-title { font-size:clamp(1.9rem,8.6vw,2.75rem); letter-spacing:-.04em; }
    .hero-description { font-size:18px; }
    .hero-actions { align-items:stretch; flex-direction:column; }
    .scene { aspect-ratio:1.2; }
    .store { width:48%; }
    .stats-section { padding:48px 20px 64px; }
    .stats-grid { grid-template-columns:1fr; gap:20px; }
    .stats-grid > .offset-y:nth-child(n) { margin-top:0!important; }
    .offset-y { margin-top:0!important; }
    .glass { padding:20px 24px 24px; }
    .paths-section .section-inner { padding:48px 20px 64px; }
    .paths-grid { grid-template-columns:1fr; gap:24px; margin-top:32px; }
    .paths-heading .pin-pop,.path-card .path-icon { display:none; }
    .paths-connector { display:none; }
    .path-card.offset-y { margin-top:0; }
    .path-content { grid-template-columns:1fr; }
    .path-content { display:flex; flex-direction:column-reverse; align-items:stretch; }
    .path-art { aspect-ratio:11/8; }
    .plan-section { padding:56px 20px; }
    .cta-band { grid-template-columns:1fr; gap:20px; padding:28px 24px; }
    .shop-row { height:72px; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:28px 20px; padding-top:48px; }
    .footer-brand { grid-column:1/-1; }
    .footer-bottom { padding-bottom:100px; }
    .hide-sm { display:none; }
    .hide-sm-svg { display:none; }
    .route-dash { display:none; }
    .tilt,.offset-y { rotate:0deg!important; margin-top:0!important; }
}

@media (min-width:1400px) {
    .marketing-gutters { display:block; }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none!important; transition-duration:.01ms!important; }
    .reveal { opacity:1; transform:none; }
    .tilt { rotate:0deg; }
    html.js .path-card .skeleton { display:none!important; }
    html.js .path-card .path-content { transform:none!important; opacity:1!important; }
    .squiggle path { stroke-dashoffset:0; }
}