/* ============================================
   LUXARO COFFEE — Premium Design System
   Typography: Playfair Display + Outfit
   Palette: Stone / Antique Gold / Obsidian
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  --stone:#F0ECE4;--stone-light:#F7F5F0;--stone-mid:#E4DED4;--stone-dark:#D4CEC4;
  --gold:#A68B5B;--gold-light:#C4A97A;--gold-muted:rgba(166,139,91,0.12);--gold-dark:#7A6640;
  --obsidian:#111118;--obsidian-light:#1C1C28;--obsidian-mid:#2A2A3A;
  --ink:#333340;--ink-muted:#717180;--warm-gray:#9B978F;--white:#FFFFFF;
  --divider:rgba(166,139,91,0.15);--divider-dark:rgba(255,255,255,0.08);
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  --space-2xs:.25rem;--space-xs:.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2.5rem;
  --space-xl:5rem;--space-2xl:8rem;--space-3xl:12rem;
  --max-width:1280px;--max-width-narrow:780px;--nav-height:80px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);--ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --duration:0.6s;--duration-slow:1s;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--font-body);font-weight:300;color:var(--obsidian);background:var(--stone);line-height:1.75;overflow-x:hidden;position:relative}
body::after{content:'';position:fixed;inset:0;z-index:10000;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-dark);text-decoration:none;transition:color var(--duration) var(--ease-out)}
a:hover{color:var(--gold)}
::selection{background:var(--gold-muted);color:var(--obsidian)}

h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:400;line-height:1.1;letter-spacing:-0.02em;color:var(--obsidian)}
h1{font-size:clamp(3rem,7vw,5.5rem)}
h2{font-size:clamp(2.2rem,4.5vw,3.5rem)}
h3{font-size:clamp(1.6rem,3vw,2.2rem)}
h4{font-size:clamp(1.15rem,2vw,1.45rem)}
p{max-width:60ch}
.small{font-size:.82rem;color:var(--ink-muted)}
.text-gold{color:var(--gold)}.text-muted{color:var(--ink-muted)}.text-center{text-align:center}
.section-label{font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-sm);display:block}
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 clamp(1.5rem,4vw,3rem)}
.container--narrow{max-width:var(--max-width-narrow)}
.section{padding:var(--space-2xl) 0}.section--lg{padding:var(--space-3xl) 0}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);z-index:9000;transition:all .5s var(--ease-out)}
.nav--scrolled{background:rgba(240,236,228,.88);backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);border-bottom:1px solid var(--divider);box-shadow:0 1px 40px rgba(0,0,0,.04)}
.nav__inner{max-width:var(--max-width);margin:0 auto;padding:0 clamp(1.5rem,4vw,3rem);height:100%;display:flex;align-items:center;justify-content:space-between}
.nav__logo{font-family:var(--font-display);font-size:1.5rem;font-weight:500;color:var(--obsidian);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.nav__logo span{color:var(--gold);font-weight:400}
.nav__links{display:flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);list-style:none}
.nav__links a{font-size:.8rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;position:relative;transition:color var(--duration) var(--ease-out)}
.nav__links a::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:1px;background:var(--gold);transition:width .5s var(--ease-out)}
.nav__links a:hover{color:var(--gold-dark)}.nav__links a:hover::after{width:100%}
.nav__toggle{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:6px}
.nav__toggle span{width:26px;height:1px;background:var(--obsidian);transition:all .4s var(--ease-out);display:block}

/* Hero */
.hero{min-height:100vh;min-height:100dvh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:var(--nav-height);background:var(--stone)}
.hero--image{background-size:cover;background-position:center;background-repeat:no-repeat}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,24,.85) 0%,rgba(17,17,24,.6) 50%,rgba(17,17,24,.3) 100%);z-index:1}
.hero--image .hero__content{color:var(--white);z-index:2}
.hero--image h1{color:var(--white)}
.hero--image h1 em{color:var(--gold-light)}
.hero--image .hero__tagline{color:var(--gold-light)}
.hero--image .hero__tagline::before{background:var(--gold-light)}
.hero--image .hero__subtitle{color:rgba(255,255,255,.7)}

/* Dark nav for image hero */
.nav--dark .nav__logo{color:var(--white)}
.nav--dark .nav__links a{color:rgba(255,255,255,.8)}
.nav--dark .nav__links a:hover{color:var(--gold-light)}
.nav--dark .nav__links a::after{background:var(--gold-light)}
.nav--dark .nav__toggle span{background:var(--white)}
.nav--dark.nav--scrolled .nav__logo{color:var(--obsidian)}
.nav--dark.nav--scrolled .nav__links a{color:var(--ink)}
.nav--dark.nav--scrolled .nav__links a:hover{color:var(--gold-dark)}
.nav--dark.nav--scrolled .nav__links a::after{background:var(--gold)}
.nav--dark.nav--scrolled .nav__toggle span{background:var(--obsidian)}
.hero__content{position:relative;z-index:2;max-width:720px}
.hero__tagline{font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-lg);display:flex;align-items:center;gap:var(--space-sm)}
.hero__tagline::before{content:'';width:40px;height:1px;background:var(--gold);display:block}
.hero h1{margin-bottom:var(--space-lg)}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero__subtitle{font-size:1.1rem;font-weight:300;color:var(--ink-muted);margin-bottom:var(--space-xl);max-width:520px;line-height:1.9}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-body);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:1.15rem 2.8rem;border:none;cursor:pointer;transition:all .5s var(--ease-out);text-decoration:none;position:relative;overflow:hidden}
.btn--primary{background:var(--obsidian);color:var(--stone-light)}
.btn--primary:hover{background:var(--obsidian-light);color:var(--stone-light);transform:translateY(-2px);box-shadow:0 20px 60px rgba(17,17,24,.2)}
.btn--outline{background:transparent;color:var(--obsidian);border:1px solid var(--obsidian)}
.btn--outline:hover{background:var(--obsidian);color:var(--stone-light)}
.btn--gold{background:var(--gold);color:var(--white)}
.btn--gold:hover{background:var(--gold-dark);color:var(--white);transform:translateY(-2px);box-shadow:0 20px 50px rgba(166,139,91,.25)}
.btn--sm{padding:.8rem 1.6rem;font-size:.75rem}
.btn__arrow{transition:transform .5s var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(6px)}

/* Features Strip */
.features-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--divider);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.feature-item{background:var(--stone);padding:var(--space-xl) var(--space-lg);text-align:center;transition:background .5s var(--ease-out)}
.feature-item:hover{background:var(--stone-light)}
.feature-item__icon{font-size:.72rem;margin-bottom:var(--space-md);color:var(--gold);letter-spacing:.25em;font-weight:600;text-transform:uppercase;font-family:var(--font-body)}
.feature-item h4{font-size:1.15rem;margin-bottom:var(--space-xs);font-weight:500}
.feature-item p{font-size:.88rem;color:var(--ink-muted);margin:0 auto;font-weight:300}

/* Setup Cards */
.setups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1px;background:var(--divider)}
.setup-card{background:var(--white);padding:clamp(2rem,4vw,3rem);transition:all .6s var(--ease-out);position:relative;overflow:hidden;display:flex;flex-direction:column}
.setup-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.setup-card:hover{background:var(--stone-light)}
.setup-card:hover::before{transform:scaleX(1)}
.setup-card__badge{display:inline-block;font-size:.65rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-md)}
.setup-card__number{position:absolute;top:var(--space-md);right:var(--space-lg);font-family:var(--font-display);font-size:4rem;font-weight:300;color:rgba(166,139,91,.08);line-height:1;z-index:1}
.setup-card__image{width:100%;aspect-ratio:3/2;background:var(--white);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-md);overflow:hidden}
.setup-card__image img{width:100%;height:100%;object-fit:contain;padding:var(--space-sm);transition:transform .6s var(--ease-out)}
.setup-card:hover .setup-card__image img{transform:scale(1.03)}
.setup-card h3{margin-bottom:var(--space-xs);font-weight:500;font-size:1.6rem}
.setup-card__machines{font-size:.85rem;color:var(--ink-muted);margin-bottom:var(--space-md);font-weight:300;line-height:1.6}
.setup-card__price{font-family:var(--font-display);font-size:2.4rem;font-weight:400;color:var(--gold);margin-bottom:var(--space-md);letter-spacing:-.02em}
.setup-card__desc{font-size:.85rem;color:var(--ink-muted);line-height:1.8;margin-bottom:var(--space-lg);font-weight:300;flex-grow:1}
.setup-card__link{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--obsidian);display:inline-flex;align-items:center;gap:.5rem;transition:color .4s var(--ease-out),gap .4s var(--ease-out)}
.setup-card__link:hover{color:var(--gold);gap:.8rem}

/* Setup Detail */
.setup-detail{padding:var(--space-3xl) 0;border-bottom:1px solid var(--divider)}
.setup-detail:last-child{border-bottom:none}
.setup-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--space-xl);flex-wrap:wrap;gap:var(--space-md)}
.setup-header__price{font-family:var(--font-display);font-size:3rem;font-weight:400;color:var(--gold);white-space:nowrap;letter-spacing:-.02em}
.setup-products{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-bottom:var(--space-lg)}
.product-block{background:var(--white);border:1px solid var(--divider);padding:clamp(1.5rem,3vw,2.5rem);transition:border-color .5s var(--ease-out)}
.product-block:hover{border-color:var(--gold-light)}
.product-block__type{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-sm);display:block}
.product-block h4{margin-bottom:var(--space-xs);font-weight:500}
.product-block__price{font-family:var(--font-display);font-size:1.4rem;color:var(--gold);margin-bottom:var(--space-md);font-weight:400}
.product-block__image{width:100%;aspect-ratio:4/3;background:var(--white);border:1px solid var(--divider);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-lg);overflow:hidden;position:relative}
.product-block__image img{width:100%;height:100%;object-fit:contain;padding:var(--space-md);position:relative;z-index:1}
.product-block__image-placeholder{color:var(--warm-gray);font-size:.75rem;text-align:center;padding:var(--space-lg);position:relative;z-index:1;font-weight:400;letter-spacing:.05em}
.product-block__image-placeholder span{display:block;font-size:1.4rem;margin-bottom:var(--space-xs);opacity:.5}
.product-block__desc{font-size:.88rem;color:var(--ink-muted);line-height:1.85;margin-bottom:var(--space-lg);font-weight:300}
.product-block__specs{list-style:none;font-size:.82rem;color:var(--ink-muted);font-weight:300}
.product-block__specs li{padding:.5rem 0;border-bottom:1px solid var(--divider);display:flex;align-items:center;gap:.75rem}
.product-block__specs li::before{content:'';width:4px;height:4px;background:var(--gold);border-radius:50%;flex-shrink:0}
.setup-verdict{background:var(--stone-light);border-left:2px solid var(--gold);padding:var(--space-lg) clamp(1.5rem,3vw,2.5rem);margin-top:var(--space-lg)}
.setup-verdict h4{margin-bottom:var(--space-sm);font-weight:500;color:var(--obsidian)}
.setup-verdict p{color:var(--ink-muted);font-size:.95rem;font-weight:300;line-height:1.85}
.buy-links{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--divider)}
.buy-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.75rem 1.4rem;border:1px solid var(--obsidian);color:var(--obsidian);background:transparent;transition:all .4s var(--ease-out)}
.buy-link:hover{background:var(--obsidian);color:var(--stone-light);border-color:var(--obsidian);transform:translateY(-1px);box-shadow:0 8px 24px rgba(17,17,24,.12)}

/* Quiz */
.quiz-container{max-width:680px;margin:0 auto}
.quiz-progress{display:flex;gap:6px;margin-bottom:var(--space-xl)}
.quiz-progress__bar{flex:1;height:2px;background:var(--divider);transition:background .5s var(--ease-out)}
.quiz-progress__bar--active{background:var(--gold)}
.quiz-question{text-align:center;margin-bottom:var(--space-xl)}
.quiz-question h2{margin-bottom:var(--space-sm)}
.quiz-question p{color:var(--ink-muted);margin:0 auto;font-weight:300}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-bottom:var(--space-xl)}
.quiz-option{background:var(--white);border:1px solid var(--divider);padding:var(--space-lg) var(--space-md);text-align:center;cursor:pointer;transition:all .4s var(--ease-out);font-family:var(--font-body);font-size:.95rem;font-weight:300}
.quiz-option:hover{border-color:var(--gold-light);transform:translateY(-3px);box-shadow:0 15px 40px rgba(17,17,24,.05)}
.quiz-option--selected{border-color:var(--gold);background:var(--gold-muted)}
.quiz-option__icon{font-size:1.6rem;margin-bottom:.75rem;display:block}
.quiz-option__label{font-weight:600;display:block;margin-bottom:.3rem;letter-spacing:.02em}
.quiz-option__desc{font-size:.8rem;color:var(--ink-muted);font-weight:300}
.quiz-result{text-align:center;padding:var(--space-xl) 0}
.quiz-result h2{margin-bottom:var(--space-md)}
.quiz-result__card{background:var(--white);border:1px solid var(--divider);padding:var(--space-xl);margin-top:var(--space-xl);text-align:left}

/* Guide Content */
.guide-content{font-size:1.08rem;line-height:2;font-weight:300}
.guide-content h2{margin-top:var(--space-xl);margin-bottom:var(--space-lg)}
.guide-content h3{margin-top:var(--space-lg);margin-bottom:var(--space-md)}
.guide-content p{margin-bottom:var(--space-md);color:var(--ink)}
.guide-content blockquote{border-left:2px solid var(--gold);padding-left:var(--space-lg);margin:var(--space-xl) 0;font-family:var(--font-display);font-size:1.4rem;font-style:italic;color:var(--ink-muted);line-height:1.6}

/* Affiliate Notice */
.affiliate-notice{background:var(--gold-muted);border:1px solid var(--divider);padding:var(--space-md) var(--space-lg);font-size:.85rem;color:var(--ink-muted);margin-bottom:var(--space-lg);display:flex;align-items:center;gap:.75rem;font-weight:300}
.affiliate-notice::before{content:'ℹ';font-size:1rem;color:var(--gold)}
.affiliate-banner{display:none}

/* Newsletter */
.newsletter{background:var(--obsidian);color:var(--stone);padding:var(--space-2xl) 0;text-align:center;position:relative}
.newsletter::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(166,139,91,.04) 0%,transparent 70%);pointer-events:none}
.newsletter h2{color:var(--stone-light);margin-bottom:var(--space-sm)}
.newsletter p{color:var(--warm-gray);margin:0 auto var(--space-lg);font-weight:300}
.newsletter-form{display:flex;max-width:480px;margin:0 auto;gap:0;position:relative;z-index:1}
.newsletter-form input{flex:1;padding:1rem 1.4rem;border:1px solid var(--divider-dark);background:rgba(255,255,255,.04);color:var(--stone);font-family:var(--font-body);font-size:.88rem;font-weight:300;outline:none;transition:border-color .4s,background .4s}
.newsletter-form input::placeholder{color:var(--warm-gray)}
.newsletter-form input:focus{border-color:var(--gold);background:rgba(255,255,255,.06)}
.newsletter-form button{padding:1rem 2rem;background:var(--gold);color:var(--white);border:1px solid var(--gold);font-family:var(--font-body);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .4s var(--ease-out)}
.newsletter-form button:hover{background:var(--gold-dark);border-color:var(--gold-dark)}

/* Footer */
.footer{background:var(--obsidian);color:var(--stone-dark);padding:var(--space-3xl) 0 var(--space-lg)}
.footer__grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-2xl)}
.footer__brand{font-family:var(--font-display);font-size:1.5rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-light);margin-bottom:var(--space-md)}
.footer__brand span{color:var(--gold-light)}
.footer__tagline{font-size:.88rem;color:var(--warm-gray);max-width:320px;line-height:1.8;font-weight:300}
.footer__heading{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-bottom:var(--space-lg)}
.footer__links{list-style:none}.footer__links li{margin-bottom:.8rem}
.footer__links a{font-size:.88rem;font-weight:300;color:var(--warm-gray);transition:color .4s var(--ease-out)}.footer__links a:hover{color:var(--stone-light)}
.footer__bottom{border-top:1px solid var(--divider-dark);padding-top:var(--space-lg);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-md)}
.footer__copy{font-size:.78rem;color:var(--warm-gray);font-weight:300}
.footer__disclosure{font-size:.78rem;color:var(--warm-gray);font-weight:300}.footer__disclosure a{color:var(--gold-light)}

/* Page Header */
.page-header{padding:calc(var(--nav-height) + var(--space-2xl)) clamp(1.5rem,4vw,3rem) var(--space-2xl);text-align:center;position:relative}
.page-header::after{content:'';display:block;width:60px;height:1px;background:var(--gold);margin:var(--space-lg) auto 0}
.page-header h1{margin-bottom:var(--space-md)}
.page-header p{color:var(--ink-muted);font-size:1.1rem;font-weight:300;margin:0 auto;max-width:580px;line-height:1.85}
.page-header--image{min-height:45vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-size:cover;background-position:center;overflow:hidden}
.page-header--image::before{content:'';position:absolute;inset:0;background:rgba(17,17,24,.7)}
.page-header--image *{position:relative;z-index:2}
.page-header--image h1{color:var(--white)}
.page-header--image p{color:rgba(255,255,255,.7)}
.page-header--image .section-label{color:var(--gold-light)}
.page-header--image::after{background:var(--gold-light)}
.page-header--image em{color:var(--gold-light)}

/* Animations */
.reveal{opacity:0;transform:translateY(40px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}
.reveal--visible{opacity:1;transform:translateY(0)}
.reveal--delay-1{transition-delay:.15s}.reveal--delay-2{transition-delay:.3s}.reveal--delay-3{transition-delay:.45s}

/* Image Break */
.image-break{min-height:50vh;display:flex;align-items:center;justify-content:center;position:relative;background-size:cover;background-position:center;background-attachment:fixed}
.image-break__overlay{position:absolute;inset:0;background:rgba(17,17,24,.75)}
.image-break__content{position:relative;z-index:2;text-align:center;padding:var(--space-2xl) var(--space-lg);max-width:600px}
.image-break__content h2{color:var(--white);margin-bottom:var(--space-sm)}
.image-break__content p{color:rgba(255,255,255,.65);font-weight:300;font-size:1.1rem;margin:0 auto var(--space-lg)}

/* Featured Grid — 2x2 */
.setups-grid--featured{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--divider);border:1px solid var(--divider)}

/* Steam */
.steam-container{position:absolute;top:0;right:0;width:50%;height:100%;overflow:hidden;pointer-events:none;z-index:1}
.steam-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold-light);opacity:0;animation:steamFloat 8s infinite var(--ease-out)}
@keyframes steamFloat{0%{opacity:0;transform:translateY(0) scale(.4)}15%{opacity:.2}85%{opacity:.03}100%{opacity:0;transform:translateY(-350px) translateX(50px) scale(1.8)}}

/* Responsive */
@media(max-width:1024px){.setups-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}
@media(max-width:900px){
  .nav__links{display:none}.nav__toggle{display:flex}
  .nav__links--open{display:flex;flex-direction:column;position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;background:rgba(240,236,228,.98);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);padding:var(--space-xl) var(--space-lg);gap:var(--space-md);z-index:8999}
  .nav__links--open a{font-size:1.2rem;letter-spacing:.15em}
  .hero{min-height:70vh;padding:calc(var(--nav-height) + var(--space-xl)) 0 var(--space-2xl)}
  .hero__overlay{background:rgba(17,17,24,.8)!important}
  .setups-grid,.setups-grid--featured{grid-template-columns:1fr;gap:1px}
  .image-break{background-attachment:scroll;min-height:40vh}
  .setup-products{grid-template-columns:1fr}
  .features-strip{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-lg)}
  .quiz-options{grid-template-columns:1fr}
  .newsletter-form{flex-direction:column}
  .steam-container{display:none}
  .guides-grid{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  :root{--space-2xl:5rem;--space-3xl:7rem}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;text-align:center}
  .setup-header{flex-direction:column}
  .setup-header__price{font-size:2.2rem}
  h1{font-size:clamp(2.4rem,8vw,3.5rem)}
}
