:root{
  --bg:#ffffff;
  --paper:#ffffff;
  --surface:#f8fafc;
  --surface-strong:#eef4ff;
  --ink:#0f172a;
  --muted:#5f6878;
  --line:#dbe5f3;
  --primary:#2f5bff;
  --primary-dark:#2445d7;
  --cyan:#06b6d4;
  --teal:#00a88f;
  --mint:#2dd4bf;
  --raspberry:#d91e73;
  --pink:#d91e73;
  --purple:#7c3aed;
  --orange:#f97316;
  --amber:#d97706;
  --buy:#008f78;
  --sample:#d97706;
  --skip:#d91e73;
  --shadow:0 22px 54px rgba(47,91,255,.14);
  --shadow-soft:0 10px 28px rgba(15,23,42,.07);
  --r:8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    linear-gradient(180deg,#fff 0,#fff 34%,#fbfdff 100%);
  color:var(--ink);
  font-family:"Inter","Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.5;
}
body::before{
  content:"";
  position:fixed;
  inset:0 0 auto;
  z-index:60;
  height:4px;
  pointer-events:none;
  background:linear-gradient(90deg,var(--primary),var(--raspberry),var(--teal),var(--amber));
}
button,input,select,textarea{font:inherit}
a{color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(6,182,212,.46);
  outline-offset:3px;
}
.skip-link{
  position:absolute;
  left:18px;
  top:12px;
  z-index:100;
  transform:translateY(-140%);
  border-radius:999px;
  padding:9px 12px;
  background:var(--ink);
  color:#fff;
  font-weight:900;
}
.skip-link:focus{transform:none}
.loading-shell{padding:80px 24px;color:var(--muted);font-weight:900}
.muted{color:var(--muted)}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(221,231,243,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.9),0 10px 30px rgba(15,23,42,.035);
}
.head{
  max-width:1180px;
  margin:auto;
  min-height:76px;
  padding:14px 24px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width:max-content;
}
.logo{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1px var(--line),0 8px 20px rgba(47,91,255,.12);
}
.brand-symbol svg,.mini-brand-symbol svg{display:block;width:100%;height:100%}
.symbol-ring{fill:none;stroke:var(--primary);stroke-width:5;stroke-linecap:round;stroke-dasharray:116 36}
.symbol-gap{fill:none;stroke:var(--surface);stroke-width:7;stroke-linecap:round}
.symbol-needle{fill:var(--ink)}
.symbol-core{fill:#fff;stroke:var(--teal);stroke-width:2}
.symbol-marker{rx:1.5}
.symbol-marker.buy{fill:var(--buy)}
.symbol-marker.sample{fill:var(--sample)}
.symbol-marker.skip{fill:var(--skip)}
.brand strong{display:block;font-weight:900;font-size:1rem}
.brand small{display:block;color:var(--muted);font-size:.76rem}
.desktop-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:4px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.desktop-nav a{
  border-radius:999px;
  padding:8px 12px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:900;
  text-decoration:none;
}
.desktop-nav a.active{
  background:var(--primary);
  color:#fff;
}
.head-actions{display:flex;align-items:center;gap:10px}
.saved-shortcut{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 10px;
  background:#fff;
  color:var(--muted);
  font-size:.76rem;
  font-weight:900;
  text-decoration:none;
}
.saved-shortcut strong{
  display:grid;
  place-items:center;
  min-width:22px;
  height:22px;
  border-radius:50%;
  background:#fff4fb;
  color:var(--pink);
}
.toggle{
  display:flex;
  gap:4px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
  background:var(--paper);
  box-shadow:var(--shadow-soft);
}
.pill{padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:900;color:var(--muted)}
.pill.on{background:var(--primary);color:#fff}

.app-shell{
  max-width:1180px;
  margin:auto;
  padding:34px 24px 78px;
}
.page-hero{
  display:grid;
  gap:10px;
  padding:34px 0 24px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.page-hero h1,.home-hero h1,.section-title h2,.method-preview h2{
  font-family:"Sora","Manrope","Inter",ui-sans-serif,system-ui,sans-serif;
  letter-spacing:0;
  line-height:1.03;
}
.page-hero h1{
  max-width:860px;
  margin:0;
  font-size:clamp(2.05rem,4.4vw,3.9rem);
  font-weight:950;
}
.page-hero p:not(.eyebrow){max-width:760px;margin:0;color:var(--muted);font-size:1.02rem}
.eyebrow{
  margin:0;
  color:var(--primary);
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.16em;
  font-weight:950;
}

.home-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  gap:28px;
  align-items:center;
  padding:22px 0 22px;
}
.home-copy::before{
  content:"";
  display:block;
  width:76px;
  height:5px;
  border-radius:999px;
  margin-bottom:16px;
  background:linear-gradient(90deg,var(--primary),var(--raspberry),var(--teal));
}
.home-hero h1{
  max-width:700px;
  margin:8px 0 12px;
  font-size:clamp(2.05rem,4.2vw,3.65rem);
  font-weight:950;
}
.home-hero p:not(.eyebrow){max-width:600px;color:var(--muted);font-size:1.02rem}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border:1px solid transparent;
  border-radius:999px;
  padding:12px 17px;
  font-weight:950;
  text-decoration:none;
  background:transparent;
}
.btn.primary{
  background:var(--primary);
  color:#fff;
  box-shadow:0 10px 24px rgba(47,91,255,.22);
}
.btn.secondary{border-color:#b8c5d9;background:#fff;color:var(--ink)}
.btn:hover{filter:saturate(1.05) brightness(.98)}
.identity-panel{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px;
  background:linear-gradient(180deg,#fff,var(--surface));
  box-shadow:var(--shadow-soft);
}
.identity-panel strong{display:block;font-size:1.02rem}
.identity-panel p{margin:0;color:var(--muted)}
.product-preview{display:grid;gap:14px}
.preview-head{display:flex;gap:10px;align-items:center}
.mini-brand-symbol{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 auto;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1px var(--line);
}
.hero-preview-card{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:12px;
  color:inherit;
  text-decoration:none;
}
.hero-preview-photo{
  grid-row:span 3;
  margin:0;
  aspect-ratio:1;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  overflow:hidden;
}
.hero-preview-photo img{width:100%;height:100%;object-fit:contain;padding:10px}
.hero-preview-copy{display:grid;gap:4px;align-content:start}
.hero-preview-copy small{
  color:var(--muted);
  font-size:.7rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-preview-copy strong{font-size:1.08rem;line-height:1.12}
.hero-preview-copy em{color:var(--muted);font-size:.8rem;font-style:normal}
.preview-scores{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.preview-reason{grid-column:1/-1;color:var(--muted);font-size:.86rem}
.hero-preview-card>b{
  grid-column:1/-1;
  color:var(--primary);
  font-size:.86rem;
}

.notice{
  border:1px solid #fde68a;
  border-left:5px solid var(--amber);
  background:linear-gradient(90deg,#fff9e8,#fff);
  border-radius:var(--r);
  padding:13px 15px;
  color:#6b4300;
  margin:0 0 26px;
}
.notice.slim{margin:0 0 18px}
.notice strong{margin-right:5px}

.app-section{
  padding:34px 0;
  border-top:1px solid var(--line);
}
.section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:22px;
  margin-bottom:20px;
}
.section-title h2{
  margin:6px 0 0;
  font-size:clamp(1.8rem,3vw,3rem);
  font-weight:950;
}
.section-title p:not(.eyebrow){
  max-width:560px;
  margin:0;
  color:var(--muted);
}
.compact-title{align-items:center}

.match-section{border-top:0}
.match-layout{
  display:grid;
  grid-template-columns:minmax(260px,.36fr) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.finder-card{
  position:sticky;
  top:96px;
  display:grid;
  gap:12px;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.finder-card label,.filter-panel label,.compare-picker label{
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:950;
}
select,input,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  color:var(--ink);
  padding:11px;
}
.match-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.match-card,.feature-card,.fragrance-card,.method-card,.ranking-section,.climate-lane,.local-grid article{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.match-card{
  display:grid;
  gap:12px;
  padding:14px;
  border-top:4px solid var(--primary);
}
.match-card.bestMatch{border-top-color:var(--primary)}
.match-card.saferAlternative{border-top-color:var(--teal)}
.match-card.bestValue{border-top-color:var(--amber)}
.match-card>small{
  color:var(--primary);
  text-transform:uppercase;
  font-size:.68rem;
  letter-spacing:.1em;
  font-weight:950;
}
.match-card p{margin:0;color:var(--muted);font-size:.88rem}

.mini-result{
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:10px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:8px;
  color:inherit;
  text-decoration:none;
  background:#fff;
}
.mini-photo{
  margin:0;
  width:54px;
  aspect-ratio:1;
  border-radius:7px;
  overflow:hidden;
  background:#fff;
}
.mini-photo img{width:100%;height:100%;object-fit:contain;padding:4px}
.mini-result small,.brandname{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mini-result strong{display:block;line-height:1.15}
.mini-result em{display:block;color:var(--muted);font-style:normal;font-size:.78rem}

.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feature-card{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:14px;
  padding:14px;
}
.feature-photo,.fragrance-photo,.detail-photo{
  margin:0;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:#fff;
}
.feature-photo{border:1px solid var(--line);border-radius:var(--r)}
.feature-photo img,.fragrance-photo img,.detail-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:14px;
  background:#fff;
}
.feature-card h3,.fragrance-card h3{margin:5px 0 7px;font-size:1.1rem;line-height:1.15}
.feature-card h3 a,.fragrance-card h3 a{text-decoration:none}
.feature-card p,.card-reason,.reference{margin:0;color:var(--muted);font-size:.88rem}

.intent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.intent-card{
  display:grid;
  gap:7px;
  min-height:138px;
  border:1px solid var(--line);
  border-top:4px solid var(--primary);
  border-radius:var(--r);
  padding:16px;
  background:#fff;
  text-align:left;
  box-shadow:var(--shadow-soft);
}
.intent-card:nth-child(2){border-top-color:var(--amber)}
.intent-card:nth-child(3){border-top-color:var(--teal)}
.intent-card:nth-child(4){border-top-color:var(--raspberry)}
.intent-card:nth-child(5){border-top-color:var(--cyan)}
.intent-card:nth-child(6){border-top-color:var(--purple)}
.intent-card span{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-weight:950;
}
.intent-card strong{font-size:1.02rem}
.intent-card small{color:var(--muted);font-size:.86rem}
.method-preview{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin:22px 0 0;
  padding:28px 0 0;
  border-top:1px solid var(--line);
}
.method-preview h2{margin:6px 0 8px;font-size:2rem}
.method-preview p:not(.eyebrow){max-width:760px;color:var(--muted)}

.explore-layout{display:grid;gap:16px}
.explore-toolbar{
  position:sticky;
  top:87px;
  z-index:20;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:12px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-soft);
}
.search{
  display:flex;
  align-items:center;
  gap:10px;
}
.search span{color:var(--pink);font-weight:950}
.search input{padding:13px}
.filter-toggle{display:none}
.filter-panel{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)) auto;
  gap:10px;
  align-items:end;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:12px;
  background:#fff;
}
.clear{
  min-height:43px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  font-weight:950;
}
.results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.result{margin:0;color:var(--muted);font-weight:950;white-space:nowrap}
.active-filters{display:flex;flex-wrap:wrap;gap:8px}
.active-chip,.no-active{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  background:#fff;
  color:var(--muted);
  font-size:.72rem;
  font-weight:950;
}
.active-chip{display:inline-flex;gap:6px;align-items:center}
.active-chip span{color:var(--ink)}
.active-chip small{color:var(--pink);text-transform:uppercase;letter-spacing:.04em}

.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fragrance-card{
  position:relative;
  display:flex;
  min-height:100%;
  flex-direction:column;
  overflow:hidden;
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.fragrance-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#b7c8e6}
.fragrance-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,var(--primary),var(--cyan));
}
.fragrance-card:nth-child(6n+2)::before{background:var(--raspberry)}
.fragrance-card:nth-child(6n+3)::before{background:var(--teal)}
.fragrance-card:nth-child(6n+4)::before{background:var(--purple)}
.fragrance-card:nth-child(6n+5)::before{background:var(--amber)}
.fragrance-card:nth-child(6n+6)::before{background:var(--cyan)}
.card-photo-link{
  display:block;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(135deg,rgba(47,91,255,.06),rgba(6,182,212,.05) 42%,rgba(217,30,115,.045));
  text-decoration:none;
}
.fragrance-photo{margin-top:5px}
.card-content{display:grid;gap:10px;padding:16px;flex:1}
.card-kicker{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.card-kicker>span:not(.verdict-badge){
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 8px;
  background:var(--surface);
  color:var(--muted);
  font-size:.68rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.score-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.score-pill{
  display:grid;
  gap:2px;
  position:relative;
  overflow:hidden;
  border:1px solid #e7eef8;
  border-radius:var(--r);
  padding:9px 9px 8px;
  background:linear-gradient(180deg,#fff,#f9fbff);
}
.score-pill::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--cyan));
}
.score-pill small{color:var(--muted);font-size:.68rem;font-weight:950}
.score-pill strong{font-size:1.05rem;line-height:1}
.card-actions{
  display:flex;
  align-items:center;
  gap:8px;
  border-top:1px solid var(--line);
  padding:12px 16px 16px;
}
.detail-link{
  margin-right:auto;
  color:var(--primary);
  border-bottom:2px solid var(--primary);
  padding:2px 0;
  font-weight:950;
  text-decoration:none;
}
.icon-action{
  display:grid;
  place-items:center;
  min-width:40px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  font-weight:950;
  box-shadow:0 5px 14px rgba(15,23,42,.05);
}
.icon-action:hover{border-color:#b8c9e6;background:#f8fbff}

.verdict-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  border:1px solid transparent;
  border-radius:999px;
  padding:5px 9px;
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.verdict-badge span{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  color:#fff;
  background:currentColor;
  line-height:1;
}
.verdict-badge.buy{background:#e6f8f5;color:#006b5a;border-color:#a9e7dc}
.verdict-badge.sample{background:#fff5e8;color:#92400e;border-color:#f3c98c}
.verdict-badge.skip{background:#fff0f6;color:var(--skip);border-color:#f4b8d2}
.verdict-badge.buy span,.verdict-badge.sample span,.verdict-badge.skip span{color:#fff}
.verdict-badge.buy span{background:var(--buy)}
.verdict-badge.sample span{background:var(--sample)}
.verdict-badge.skip span{background:var(--skip)}

.fragrance-detail{display:grid;gap:20px}
.back-link{
  width:max-content;
  color:var(--primary);
  font-weight:950;
  text-decoration:none;
}
.detail-hero{
  display:grid;
  grid-template-columns:minmax(260px,.36fr) minmax(0,1fr);
  gap:26px;
  align-items:center;
  padding:24px 0 28px;
  border-bottom:1px solid var(--line);
}
.detail-photo{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:
    linear-gradient(135deg,rgba(47,91,255,.06),rgba(6,182,212,.05) 42%,rgba(217,30,115,.045));
  box-shadow:var(--shadow-soft);
}
.detail-summary h1{
  margin:6px 0 10px;
  font:950 clamp(2.15rem,5vw,4.8rem)/1.02 "Sora","Manrope","Inter",ui-sans-serif,system-ui,sans-serif;
}
.detail-verdict{
  display:grid;
  gap:10px;
  max-width:720px;
  margin:18px 0 14px;
}
.detail-verdict p{margin:0;color:var(--muted)}
.detail-block{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:var(--shadow-soft);
}
.overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.overview-grid.tight{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:12px}
.overview-grid div{
  border:1px solid #edf2fb;
  border-radius:var(--r);
  padding:12px;
  background:linear-gradient(180deg,#fff,#f8fbff);
}
.overview-grid small,.split-panel small,.climate-card small{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.overview-grid strong{display:block;line-height:1.18}

.compass-profile{
  display:grid;
  grid-template-columns:184px minmax(0,1fr);
  gap:22px;
  align-items:center;
}
.compass-profile.compact{grid-template-columns:124px 1fr}
.compass-rose{
  position:relative;
  display:grid;
  place-items:center;
  width:184px;
  aspect-ratio:1;
  border:1px solid var(--line);
  border-radius:50%;
  background:
    radial-gradient(circle,#fff 0 35%,transparent 36%),
    conic-gradient(from -90deg,#eef4ff,#fff0f6,#fff5e8,#e6f8f5,#ecfeff,#f5f3ff,#eef4ff);
  box-shadow:inset 0 0 0 9px #fff,var(--shadow-soft);
}
.compact .compass-rose{width:124px}
.compass-rose span{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-weight:950;
}
.compact .compass-rose span{width:52px;height:52px}
.compass-rose i{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--level) * .58);
  height:5px;
  border-radius:999px;
  transform-origin:left center;
  transform:rotate(var(--angle));
  background:linear-gradient(90deg,var(--primary),var(--cyan));
}
.compass-rose i:nth-of-type(2){background:linear-gradient(90deg,var(--teal),var(--mint))}
.compass-rose i:nth-of-type(3){background:linear-gradient(90deg,var(--amber),var(--orange))}
.compass-rose i:nth-of-type(4){background:linear-gradient(90deg,var(--purple),var(--raspberry))}
.compass-rose i:nth-of-type(5){background:linear-gradient(90deg,var(--cyan),var(--purple))}
.profile-metrics{display:grid;gap:9px}
.metric-line{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}
.metric-line span{color:var(--muted);font-size:.82rem;font-weight:950}
.metric-line strong{font-size:.9rem}
.metric-line i{
  grid-column:1/-1;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:#edf2f7;
}
.metric-line b{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--cyan));
}
.detail-stack{display:grid;gap:12px}
.detail-accordion{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:0;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.detail-accordion summary{
  min-height:52px;
  padding:15px 17px;
  font-weight:950;
  cursor:pointer;
  background:linear-gradient(90deg,#fff,#fbfdff);
  border-bottom:1px solid transparent;
}
.detail-accordion[open] summary{
  border-bottom-color:#edf2fb;
}
.detail-accordion>p,.detail-accordion>.split-panel,.detail-accordion>.overview-grid,.detail-accordion>.climate-grid,.detail-accordion>.source-links,.detail-accordion>.summary-list,.detail-accordion>.compact-list,.detail-accordion>.accord-block,.detail-accordion>.note-pyramid,.detail-accordion>.notes-pending{
  margin:0;
  padding:0 17px 17px;
}
.detail-accordion p{color:var(--muted)}
.accord-block h3,.note-pyramid h3{
  margin:0 0 12px;
  color:var(--ink);
  font-size:.86rem;
  letter-spacing:0;
}
.accord-bars{
  display:grid;
  gap:3px;
  max-width:680px;
  padding:4px 0;
}
.accord-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--accord-width);
  min-height:40px;
  padding:7px 14px;
  border-radius:0 12px 12px 0;
  color:#101828;
  font-weight:950;
  text-transform:lowercase;
  box-shadow:0 5px 14px rgba(15,23,42,.07);
}
.accord-citrus{background:#f5ff39}
.accord-fresh{background:#92e0e5}
.accord-green{background:#49a64d;color:#fff}
.accord-freshSpicy{background:#9bd664}
.accord-aromatic{background:#9ecdc3}
.accord-sweet{background:#ff83c2}
.accord-warmSpicy{background:#ff9d3f}
.accord-vanilla{background:#f7d88a}
.accord-amber{background:#ffbd62}
.accord-woody{background:#b88a60;color:#fff}
.accord-aquatic,.accord-marine{background:#62d3ff}
.accord-musky{background:#eee8df}
.accord-fruity{background:#ff7378}
.accord-powdery{background:#d9c7ff}
.accord-leather{background:#5d4435;color:#fff}
.accord-smoky{background:#747484;color:#fff}
.accord-tropical,.accord-coconut{background:#7de8b5}
.accord-tea{background:#8fd08a}
.accord-ozonic{background:#b7ecff}
.accord-oud{background:#6d3d72;color:#fff}
.accord-lavender{background:#b6a2ff}
.accord-mossy{background:#6e9f60;color:#fff}
.note-pyramid{display:grid;gap:12px}
.note-group{
  border:1px solid #e7eef8;
  border-radius:var(--r);
  padding:14px;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.note-group h4{
  margin:0 0 9px;
  color:var(--muted);
  font-size:.76rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.note-tags{display:flex;flex-wrap:wrap;gap:7px}
.note-tags span{
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink);
  font-size:.8rem;
  font-weight:900;
}
.note-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:5px 11px 5px 5px;
  box-shadow:0 5px 14px rgba(15,23,42,.04);
}
.note-chip b{font-size:.8rem}
.note-visual{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:12px;
  color:#101828;
  font-size:1rem;
  font-style:normal;
  font-weight:950;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 5px 12px rgba(15,23,42,.08);
}
.note-citrus{background:radial-gradient(circle at 30% 30%,#fff7ad,#efff38 58%,#f4b62d)}
.note-fruit{background:radial-gradient(circle at 35% 35%,#ffd1e8,#ff6f9f 58%,#d92763);color:#fff}
.note-spice{background:radial-gradient(circle at 35% 30%,#ffe3b2,#ff9c3f 60%,#a94c13)}
.note-floral{background:radial-gradient(circle at 40% 30%,#ffe7fb,#d6b8ff 58%,#8a62ff)}
.note-fresh{background:radial-gradient(circle at 35% 35%,#edfff8,#82ead8 55%,#37b6ce)}
.note-sweet{background:radial-gradient(circle at 35% 35%,#fff2da,#ffc26d 58%,#eb7a33)}
.note-wood{background:radial-gradient(circle at 35% 30%,#f7d9b1,#b88052 60%,#6f432b);color:#fff}
.note-base{background:radial-gradient(circle at 35% 30%,#f0e8ff,#9c86ff 55%,#5343be);color:#fff}
.note-dark{background:radial-gradient(circle at 35% 30%,#c6b09d,#72533f 60%,#2e221b);color:#fff}
.note-neutral{background:radial-gradient(circle at 35% 30%,#ffffff,#dbe4f0 58%,#98a2b3)}
.notes-source,.notes-pending p{margin:0;color:var(--muted);font-size:.84rem}
.notes-pending strong{display:block;margin-bottom:6px;color:var(--ink)}
.split-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split-panel>div{
  border:1px solid #edf2fb;
  border-radius:var(--r);
  padding:14px;
  background:#fff;
}
.summary-list{margin:0;padding-left:20px;color:var(--muted)}
.summary-list li+li{margin-top:7px}
.climate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.climate-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:12px;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.climate-card strong{display:block;margin-bottom:7px}
.climate-card p{margin:0;color:var(--muted);font-size:.86rem}
.climate-card[data-rating="excellent"]{box-shadow:inset 4px 0 0 var(--teal)}
.climate-card[data-rating="good"]{box-shadow:inset 4px 0 0 var(--cyan)}
.climate-card[data-rating="conditional"]{box-shadow:inset 4px 0 0 var(--amber)}
.climate-card[data-rating="poor"]{box-shadow:inset 4px 0 0 var(--skip)}
.source-links{display:flex;flex-wrap:wrap;gap:8px}
.source-links a,.source-links span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  color:var(--primary);
  background:#fff;
  font-size:.78rem;
  font-weight:950;
  text-decoration:none;
}

.compare-picker{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}
.decision-answers{padding:24px 0;border-top:1px solid var(--line)}
.decision-answers h2{margin:0 0 14px;font-size:1.8rem}
.answer-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.answer-grid article{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:12px;
  background:#fff;
}
.answer-grid small{display:block;color:var(--muted);font-weight:950;font-size:.72rem}
.answer-grid strong{display:block;margin:8px 0;line-height:1.18}
.answer-grid p{margin:0;color:var(--muted);font-size:.85rem}
.compare-table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.compare-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}
.compare-table th,.compare-table td{
  border-bottom:1px solid var(--line);
  padding:13px;
  text-align:left;
  vertical-align:top;
}
.compare-table thead th{
  position:sticky;
  top:0;
  background:#f8fbff;
  z-index:1;
}
.compare-table th:first-child{width:190px;color:var(--muted)}
.compare-table button{
  display:block;
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 8px;
  background:#fff;
  color:var(--pink);
  font-size:.72rem;
  font-weight:950;
}
.compare-table .winner{
  background:#f0fffb;
  box-shadow:inset 4px 0 0 var(--mint);
  font-weight:950;
}

.climate-page-grid{display:grid;gap:18px}
.climate-lane{
  display:grid;
  grid-template-columns:minmax(220px,.34fr) 1fr;
  gap:18px;
  padding:18px;
}
.climate-lane h2{margin:5px 0 8px;font-size:1.8rem}
.climate-lane p{color:var(--muted)}
.lane-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lane-columns h3{margin:0 0 10px}
.climate-pick{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:10px;
  background:#fff;
  text-decoration:none;
}
.climate-pick+.climate-pick{margin-top:8px}
.climate-pick small{display:block;color:var(--muted)}
.climate-pick em{
  display:grid;
  place-items:center;
  min-width:42px;
  height:42px;
  border-radius:50%;
  background:#ecfeff;
  color:#0369a1;
  font-style:normal;
  font-weight:950;
}

.ranking-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.ranking-section{padding:16px}
.ranking-section h2{margin:0 0 12px;font-size:1.35rem}
.ranking-item{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:12px;
  align-items:center;
  border-top:1px solid var(--line);
  padding:12px 0;
  text-decoration:none;
}
.ranking-item span{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-weight:950;
}
.ranking-item p{margin:3px 0 0;color:var(--muted);font-size:.86rem}
.ranking-item em{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  background:#fff;
  color:var(--primary);
  font-style:normal;
  font-weight:950;
}

.method-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.method-card{
  padding:18px;
  border-top:4px solid var(--cyan);
}
.method-card.buy{border-top-color:var(--teal)}
.method-card.sample{border-top-color:var(--amber)}
.method-card.skip{border-top-color:var(--raspberry)}
.method-card h2{margin:10px 0 8px;font-size:1.25rem}
.method-card p{margin:0;color:var(--muted)}
.local-data-section{margin-top:28px}
.local-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}
.local-grid article{padding:15px}
.local-grid h3{margin:0 0 10px}
.compact-list{display:grid;gap:8px}

.empty{
  border:1px dashed var(--line);
  border-radius:var(--r);
  padding:46px 20px;
  background:#fff;
  text-align:center;
}
.route-empty{margin-top:40px}
.static-page{
  width:min(900px,calc(100% - 32px));
  margin:0 auto;
  padding:54px 0 72px;
}
.static-page h1{
  margin:0 0 14px;
  font-size:clamp(2.1rem,4vw,4rem);
  line-height:1;
}
.static-page h2{margin:0 0 10px}
.static-page p{
  color:var(--muted);
  line-height:1.7;
}
.static-page section{
  margin:18px 0;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
}
.site-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  max-width:1180px;
  margin:auto;
  padding:30px 24px 42px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.86rem;
}
.site-footer p{max-width:720px;margin:6px 0 0}
.footer-links{display:flex;gap:12px;align-items:flex-start}
.footer-links a,.footer-links button{
  border:0;
  border-bottom:2px solid var(--primary);
  padding:3px 0;
  background:transparent;
  color:var(--primary);
  font-weight:950;
  text-decoration:none;
}
.mobile-nav{display:none}
.dialog{
  width:min(680px,calc(100% - 28px));
  border:0;
  border-radius:var(--r);
  padding:0;
  background:#fff;
  color:var(--ink);
  box-shadow:0 30px 90px rgba(15,23,42,.28);
}
.dialog::backdrop{background:rgba(17,19,31,.62);backdrop-filter:blur(6px)}
.close{
  position:absolute;
  right:14px;
  top:12px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  font-size:1.35rem;
}
.dialog-body{padding:34px}
.dialog h2{margin:6px 48px 10px 0;font-size:2rem}
textarea{resize:vertical;margin:12px 0}
.copy-status{min-height:1.4em;color:var(--buy);font-weight:950}

@media(max-width:1040px){
  .head{grid-template-columns:1fr auto}
  .desktop-nav{grid-column:1/-1;justify-self:start}
  .catalog-grid,.feature-grid,.method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .match-results{grid-template-columns:1fr}
  .answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  body{padding-bottom:78px}
  .app-shell{padding:22px 16px 52px}
  .head{display:flex;padding:14px 16px;gap:10px}
  .head .brand{min-width:0;flex:1}
  .head .brand strong{
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.96rem;
  }
  .head-actions{gap:6px;flex-shrink:0}
  .saved-shortcut{padding:7px}
  .toggle{padding:3px}
  .pill{padding:5px 7px}
  .brand small,.saved-shortcut span{display:none}
  .desktop-nav{display:none}
  .mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:55;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:4px;
    padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));
    border-top:1px solid var(--line);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);
  }
  .mobile-nav a{
    display:grid;
    place-items:center;
    gap:2px;
    min-height:52px;
    border-radius:var(--r);
    color:var(--muted);
    text-decoration:none;
    font-weight:950;
  }
  .mobile-nav a.active{
    background:var(--primary);
    color:#fff;
  }
  .mobile-nav span{font-size:1.1rem}
  .mobile-nav small{font-size:.66rem}
  .home-hero,.match-layout,.detail-hero,.climate-lane,.method-preview{grid-template-columns:1fr}
  .identity-panel{max-width:520px}
  .finder-card{position:static}
  .section-title{align-items:flex-start;flex-direction:column}
  .filter-toggle{display:inline-flex}
  .explore-toolbar{top:80px;grid-template-columns:1fr;position:sticky}
  .filter-panel{
    display:none;
    grid-template-columns:1fr;
    position:fixed;
    left:12px;
    right:12px;
    bottom:82px;
    z-index:58;
    max-height:calc(100dvh - 125px);
    overflow:auto;
    box-shadow:0 18px 60px rgba(17,19,31,.2);
  }
  .filter-panel.open{display:grid}
  .results-head{align-items:flex-start;flex-direction:column}
  .catalog-grid,.feature-grid,.intent-grid,.ranking-grid,.method-grid,.local-grid,.compare-picker{grid-template-columns:1fr}
  .feature-card{grid-template-columns:96px 1fr}
  .overview-grid,.overview-grid.tight,.split-panel,.climate-grid,.lane-columns{grid-template-columns:1fr}
  .compass-profile{grid-template-columns:1fr}
  .compass-rose{margin:auto;width:168px}
  .compare-table-wrap{margin-left:-16px;margin-right:-16px;border-radius:0;border-left:0;border-right:0}
  .site-footer{padding:28px 16px 96px;flex-direction:column}
}
@media(max-width:460px){
  .home-hero h1,.page-hero h1{font-size:2rem}
  .home-hero{padding-top:14px}
  .hero-preview-card{grid-template-columns:78px 1fr}
  .preview-scores{grid-template-columns:1fr}
  .score-row{grid-template-columns:1fr}
  .feature-card{grid-template-columns:1fr}
  .mini-result{grid-template-columns:48px 1fr}
  .mini-result .verdict-badge{grid-column:1/-1}
  .card-actions{flex-wrap:wrap}
  .detail-summary h1{font-size:2.25rem}
  .dialog-body{padding:30px 20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fragrance-card{transition:none}
}