@font-face{
  font-family:"Berline Black";
  src:url("fonts/berline-black.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}

:root{
  color-scheme:light;

  --ds-canvas:#fbfcfe;
  --ds-surface:#fff;
  --ds-surface-subtle:#f5f7fa;
  --ds-ink:#0a0a0a;
  --ds-text:#3f4247;
  --ds-muted:#686b70;
  --ds-quiet:#8f9398;
  --ds-border:#e3e8ee;
  --ds-border-strong:#c5ced8;
  --ds-brand:#40519b;
  --ds-brand-dark:#33427f;
  --ds-brand-soft:#f4f6ff;
  --ds-knowledge:#535083;
  --ds-knowledge-soft:#f5f3fa;
  --ds-community:#6755a0;
  --ds-community-soft:#f2f0fa;
  --ds-editorial:#526a7f;
  --ds-editorial-soft:#f6f8fa;
  --ds-atmosphere-start:#fcfbfe;
  --ds-atmosphere-end:#f0edf7;
  --ds-night:#0d0d0f;
  --ds-night-surface:#18181b;
  --ds-night-muted:#b9bac1;
  --ds-success:#2f7d53;
  --ds-warning:#a66a12;
  --ds-danger:#b33a32;
  --ds-info:#3f5f91;

  --ds-ui:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --ds-data:"IBM Plex Mono",SFMono-Regular,Menlo,monospace;

  --ds-display:clamp(48px,5vw,72px);
  --ds-page-title:clamp(32px,2.8vw,40px);
  --ds-product-title:clamp(34px,3.2vw,46px);
  --ds-section-title:clamp(28px,2.6vw,38px);
  --ds-card-title:clamp(19px,1.6vw,22px);
  --ds-body-lead:clamp(17px,1.2vw,18px);
  --ds-body:16px;
  --ds-dense:14px;
  --ds-label:12px;

  --ds-space-1:4px;
  --ds-space-2:8px;
  --ds-space-3:12px;
  --ds-space-4:16px;
  --ds-space-5:24px;
  --ds-space-6:32px;
  --ds-space-7:48px;
  --ds-space-8:64px;
  --ds-space-9:80px;
  --ds-space-10:104px;
  --ds-space-11:128px;

  --ds-radius-sm:4px;
  --ds-radius-md:8px;
  --ds-radius-lg:12px;
  --ds-shadow-hover:0 12px 32px rgba(10,10,10,.07);
  --ds-shadow-floating:0 18px 48px rgba(10,10,10,.10);
  --ds-motion:160ms cubic-bezier(.2,.8,.2,1);

  --ds-shell:1440px;
  --ds-gutter:63px;
  --ds-reading:760px;
  --ds-evidence:920px;

  /* Legacy aliases: one visual truth while older templates are retired gradually. */
  --fg:var(--ds-ink);
  --fg2:var(--ds-text);
  --fg3:var(--ds-muted);
  --fg4:var(--ds-quiet);
  --fg5:#a8abb0;
  --bg:var(--ds-canvas);
  --bg2:var(--ds-surface-subtle);
  --bg3:#eff1f3;
  --line:var(--ds-border);
  --line2:var(--ds-border-strong);
  --blue:var(--ds-info);
  --hi:var(--ds-success);
  --mid:var(--ds-warning);
  --lo:var(--ds-quiet);
  --ink:var(--ds-ink);
  --ink-2:var(--ds-text);
  --ink-3:var(--ds-muted);
  --panel:var(--ds-surface-subtle);
  --cool:var(--ds-surface-subtle);
  --gold:var(--ds-brand);
  --gold-lt:#7d89bd;
  --gold-dk:var(--ds-brand-dark);
  --line-2:#eff0f1;
  --line-hi:var(--ds-ink);
  --paper:var(--ds-canvas);
  --text:var(--ds-ink);
  --muted:var(--ds-muted);
  --sand:var(--ds-brand);
  --sand-soft:var(--ds-brand-soft);
  --maxw:var(--ds-shell);
  --max:var(--ds-shell);
  --pad:var(--ds-gutter);
  --en:var(--ds-ui);
  --mono:var(--ds-data);
  --radius-sm:var(--ds-radius-sm);
  --radius-md:var(--ds-radius-sm);
  --radius-lg:var(--ds-radius-md);
  --radius-xl:var(--ds-radius-lg);
  --shadow:none;
  --shadow-hover:var(--ds-shadow-hover);
  --commerce-ink:var(--ds-ink);
  --commerce-muted:var(--ds-muted);
  --commerce-line:var(--ds-border);
  --commerce-gold:var(--ds-brand);
  --commerce-bg:var(--ds-surface-subtle);
}

html{
  scroll-behavior:smooth;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ds-canvas);
  color:var(--ds-ink);
  font-family:var(--ds-ui);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html[lang^="zh"] body{letter-spacing:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{display:block;max-width:100%;height:auto}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ds-brand-dark)!important;
  outline-offset:3px!important;
}

::selection{background:#e2e7ff;color:var(--ds-ink)}

/* One shell. Backgrounds may bleed; content returns to this grid. */
.wrap,
.nav-in,
.shell,
.wiki-shell,
.commerce-wrap,
.company-page .wrap,
.forum-wrap{
  width:100%;
  max-width:var(--ds-shell);
  margin-inline:auto;
  padding-inline:var(--ds-gutter);
}

.nav-in,nav .nav-in,.top{
  min-height:68px;
}

.logo,.brand,.foot-logo{
  font-family:"Berline Black",var(--ds-ui);
  font-weight:400;
}

.shead h1,
.products-hero h1,
.forum-hero h1,
.commerce-page h1,
.index-hero h1{
  color:var(--ds-ink);
  font-size:var(--ds-page-title);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.wiki-hero h1{
  color:var(--ds-ink);
  font-size:var(--ds-product-title);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.03em;
  text-wrap:balance;
}

html:not([lang="en"]) :where(.shead,.products-hero,.forum-hero,.commerce-page,.index-hero) h1{
  letter-spacing:0;
}

.pdp h1{
  color:var(--ds-ink);
  font-size:var(--ds-product-title);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.buy h1{
  color:var(--ds-ink);
  font-size:var(--ds-product-title);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.03em;
  text-wrap:balance;
}

html:not([lang="en"]) .buy h1{
  font-size:var(--ds-product-title);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.012em;
}

.sh h2,
.sec-head h2,
.section-head h2,
.company-page h2,
.commerce-empty h2,
.confirmation-card h2,
.wiki h2,
.wiki-section h2{
  color:var(--ds-ink);
  font-size:var(--ds-section-title);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.02em;
  text-wrap:balance;
}

/* Role-based headings: a semantic h2 is not automatically a section title. */
.forum-index-head h2,
.pdp .final-cta h2,
.pdp .cta h2{
  color:var(--ds-ink);
  font-size:var(--ds-section-title);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.community-note h2,
.checkout-section h2,
.confirmation-card h2{
  color:var(--ds-ink);
  font-size:var(--ds-card-title);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.018em;
}

.cart-line h2,
.order-summary h2{
  color:var(--ds-ink);
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:0;
}

.sh p,
.sec-head p,
.section-head p,
.shead p,
.hero .sub,
.products-hero p,
.forum-hero p,
.company-page .lead{
  color:var(--ds-muted);
  font-size:var(--ds-body-lead);
  line-height:1.65;
  max-width:var(--ds-reading);
}

.eyebrow,.kicker,.section-kicker,.slide-kicker,.cat,.k{
  color:var(--ds-brand-dark);
  font-family:var(--ds-data);
  font-size:var(--ds-label);
  font-weight:600;
  line-height:1.35;
  letter-spacing:.08em;
  text-transform:uppercase;
}

:where(section,.section,.company-section){
  border-color:var(--ds-border);
}

.btn,.add-cart,.mission-primary,.commerce-primary,.primary-btn,.buy-btn{
  min-height:44px;
  border-radius:var(--ds-radius-sm);
  font-family:var(--ds-ui);
  font-size:14px;
  font-weight:600;
  line-height:1;
  transition:background-color var(--ds-motion),color var(--ds-motion),border-color var(--ds-motion),transform var(--ds-motion);
}

.btn-dark,.add-cart,.mission-primary,.commerce-primary,.primary-btn,.buy-btn{
  border-color:var(--ds-ink);
  background:var(--ds-ink);
  color:#fff;
}

.btn-line,.secondary-btn,.outline-btn{
  border-color:var(--ds-border-strong);
  background:var(--ds-surface);
  color:var(--ds-ink);
}

.pcard .add-cart,
.commerce-page .commerce-primary,
.commerce-page .commerce-secondary{
  min-height:44px;
  border-radius:var(--ds-radius-sm);
  font-family:var(--ds-ui);
  font-size:14px;
  font-weight:600;
}

.commerce-page .commerce-panel,
.commerce-page .confirmation-card{
  border-radius:var(--ds-radius-lg);
  box-shadow:none;
}

.commerce-page .checkout-field input,
.commerce-page .checkout-field select{
  height:44px;
  border-color:var(--ds-border-strong);
  border-radius:var(--ds-radius-sm);
  font-family:var(--ds-ui);
}

.commerce-page .payment-option,
.commerce-page .card-fields,
.commerce-page .checkout-security{
  border-radius:var(--ds-radius-md);
}

.card,.fcard,.jcard,.pcard .ph,.qcard,.wiki-card,.evidence-card,.commerce-card,.company-card{
  border-color:var(--ds-border);
}

.mock,.demo-panel,.pdp-img,.gallery-main,.commerce-card,.company-card,.wiki-card{
  border-radius:var(--ds-radius-lg);
}

.fcard,.jcard,.pcard,.wiki-card,.company-card,.commerce-card{
  transition:border-color var(--ds-motion),box-shadow var(--ds-motion),transform var(--ds-motion);
}

@media (hover:hover){
  .fcard:hover,.jcard:hover,.wiki-card:hover,.company-card:hover,.commerce-card:hover{
    box-shadow:var(--ds-shadow-hover);
  }
}

.mono,.pmid,.doi,.batch,.dose,.price{
  font-variant-numeric:tabular-nums;
}

/* Shared section rhythm; page-specific internal density remains intact. */
:where(.company-page,.commerce-page,.products-page) section{
  padding-block:var(--ds-space-9);
}

:where(.company-page,.commerce-page,.products-page) :where(.section-head,.sec-head,.sh){
  margin-bottom:var(--ds-space-7);
}

footer{
  border-top:1px solid var(--ds-border);
  background:var(--ds-surface-subtle);
}

/* Color architecture: one stable brand anchor plus editorial wayfinding.
   Product packaging may keep its own colors; site chrome never inherits them. */
.nav-active,
.menu a:hover,
.more-top,
.view-all,
.wiki a,
.source a{
  color:var(--ds-brand-dark);
}

.filter-option.is-active,
.ingredient-filter.is-active,
.pdp-toc-link.is-active{
  border-color:var(--ds-brand);
  color:var(--ds-brand-dark);
}

.filter-option.is-active{
  background:var(--ds-brand-soft);
}

.products-hero,
.pdp-hero{
  background:var(--ds-brand-soft);
}

.forum-hero{
  background:var(--ds-community-soft);
}

.index-hero{
  background:var(--ds-knowledge-soft);
}

.journal-page > .shead{
  background:var(--ds-editorial-soft);
}

.personalization-page > .shead{
  background:var(--ds-brand-soft);
}

.forum-page .forum-kicker{
  color:var(--ds-community);
}

.index-hero .eyebrow{
  color:var(--ds-knowledge);
}

.journal-page .eyebrow{
  color:var(--ds-editorial);
}

.catalog-controls{
  background:var(--ds-surface);
  border-color:var(--ds-border);
}

.pcard{
  background:var(--ds-surface);
}

.pcard .ph{
  background:var(--ds-surface-subtle);
}

.pcard .benefit,
.pdp .buy .k,
.pdp .section-kicker{
  color:var(--ds-brand-dark);
}

.pdp-toc-link.is-active::after,
.ingredient-filter.is-active::after{
  background:var(--ds-brand);
}

/* Homepage grid enforcement.
   The hero remains an authored carousel composition; all information sections
   below it use normal flow and the shared 1440 / 63px shell. */
.page > main > .products,
.page > main > .section{
  width:100%;
  padding-inline:max(var(--ds-gutter),calc((100vw - var(--ds-shell))/2 + var(--ds-gutter)));
}

.page > main > .products{
  height:auto;
  padding-top:var(--ds-space-6);
  padding-bottom:var(--ds-space-7);
}

.page > main > .products .product-discovery-head,
.page > main > .products .product-row{
  width:100%;
  max-width:calc(var(--ds-shell) - var(--ds-gutter) * 2);
}

.page > main > .products .trust{
  position:static;
  width:100%;
  height:auto;
  min-height:64px;
  margin:var(--ds-space-6) auto 0;
}

.page > main > .news,
.page > main > .forum{
  height:auto;
  padding-top:var(--ds-space-10);
  padding-bottom:var(--ds-space-9);
}

.page > main > .news{
  background:var(--ds-surface);
}

.page > main > .forum{
  background:var(--ds-surface-subtle);
}

.page > main > .section > .section-title,
.page > main > .recommend > h2,
.page > main > .messages > h2{
  position:static;
  margin:0;
  color:var(--ds-ink);
  font-size:var(--ds-section-title);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.02em;
  text-align:center;
  text-wrap:balance;
}

.page > main > .news > .section-title,
.page > main > .forum > .section-title{
  margin-bottom:var(--ds-space-7);
}

.page > main > .news > .more-top,
.page > main > .forum > .more-top{
  top:calc(var(--ds-space-10) + 14px);
  right:max(var(--ds-gutter),calc((100vw - var(--ds-shell))/2 + var(--ds-gutter)));
}

.page > main > .news .news-grid,
.page > main > .forum .forum-grid{
  width:100%;
  max-width:calc(var(--ds-shell) - var(--ds-gutter) * 2);
}

.page > main > .wiki{
  height:auto;
  padding-top:var(--ds-space-10);
  padding-bottom:var(--ds-space-10);
  background:linear-gradient(
    180deg,
    var(--ds-atmosphere-start) 0%,
    var(--ds-knowledge-soft) 34%,
    var(--ds-atmosphere-end) 100%
  );
}

.page > main > .wiki > .section-title{
  margin-bottom:var(--ds-space-3);
}

.page > main > .wiki > .more-top{
  top:calc(var(--ds-space-10) + 14px);
  right:max(var(--ds-gutter),calc((100vw - var(--ds-shell))/2 + var(--ds-gutter)));
}

.page > main > .wiki .source,
.page > main > .wiki .ingredient-filters,
.page > main > .wiki .ingredient-directory{
  position:static;
  width:100%;
  max-width:1104px;
  transform:none;
  margin-inline:auto;
}

.page > main > .wiki .source{
  margin-bottom:var(--ds-space-5);
  text-align:center;
}

.page > main > .wiki .ingredient-filters{
  min-height:46px;
}

.page > main > .wiki .ingredient-directory{
  margin-top:var(--ds-space-6);
}

.page > main > .recommend,
.page > main > .messages{
  height:auto;
  padding-top:var(--ds-space-10);
  padding-bottom:var(--ds-space-10);
}

.page > main > .recommend{
  display:grid;
  grid-template-columns:minmax(440px,1fr) minmax(500px,1fr);
  gap:clamp(56px,6vw,96px);
  align-items:center;
  background:#fff;
}

.page > main > .recommend .rec-left,
.page > main > .recommend .rec-copy{
  position:static;
  width:auto;
  margin:0;
}

.page > main > .recommend .rec-left{
  position:relative;
  left:auto;
  top:auto;
  min-height:692px;
  overflow:hidden;
  border-radius:14px;
  background:
    radial-gradient(circle at 12% 8%,rgba(130,108,187,.62),transparent 34%),
    radial-gradient(circle at 92% 90%,rgba(156,92,67,.58),transparent 38%),
    linear-gradient(145deg,#27252d 0%,#111115 60%,#1b1515 100%);
  color:var(--ds-ink);
  isolation:isolate;
}

.page > main > .recommend .rec-left::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.12) .7px,transparent .8px);
  background-size:13px 13px;
  mask-image:linear-gradient(125deg,#000,transparent 72%);
  opacity:.42;
}

.page > main > .recommend .rec-left::after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-180px;
  top:-160px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
}

.page > main > .recommend .rec-report{
  position:absolute;
  left:5%;
  top:54px;
  width:90%;
  max-width:none;
  height:581px;
  min-height:0;
  padding:0;
  border:1px solid rgba(20,20,20,.12);
  border-radius:10px;
  background:rgba(255,255,255,.97);
  box-shadow:0 34px 80px rgba(0,0,0,.28);
}

.page > main > .recommend .rec-report-panel{
  position:absolute;
  inset:26px;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity 320ms ease,transform 420ms cubic-bezier(.2,.8,.2,1);
}

.page > main > .recommend .rec-report-panel.is-active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.page > main > .recommend .rec-report-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
}

.page > main > .recommend .rec-report-head span,
.page > main > .recommend .rec-report-head b{
  display:block;
}

.page > main > .recommend .rec-report-head span{
  color:var(--ds-quiet);
  font:600 10px/1.4 var(--ds-data);
  letter-spacing:.08em;
}

.page > main > .recommend .rec-report-head b{
  margin-top:5px;
  font-size:18px;
  line-height:1.4;
}

.page > main > .recommend .rec-report-head em{
  padding:5px 8px;
  border-radius:3px;
  background:var(--ds-ink);
  color:#fff;
  font-size:10px;
  font-style:normal;
}

.page > main > .recommend .rec-profile{
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  padding:13px 0;
  border-top:1px solid var(--ds-border);
  border-bottom:1px solid var(--ds-border);
}

.page > main > .recommend .rec-profile span{
  position:relative;
  padding-left:10px;
  color:var(--ds-text);
  font-size:10px;
  line-height:1.4;
}

.page > main > .recommend .rec-profile span::before{
  content:"";
  position:absolute;
  left:0;
  top:.48em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--ds-brand);
}

.page > main > .recommend .rec-answer{
  padding:24px 0 21px;
}

.page > main > .recommend .rec-answer > small{
  display:block;
  color:var(--ds-quiet);
  font-size:10px;
}

.page > main > .recommend .rec-answer h3{
  margin:8px 0 0;
  font-size:25px;
  font-weight:650;
  line-height:1.3;
  letter-spacing:-.025em;
}

.page > main > .recommend .rec-answer h3 i{
  margin:0 5px;
  color:var(--ds-brand);
  font-style:normal;
  font-weight:400;
}

.page > main > .recommend .rec-answer > p{
  max-width:38ch;
  margin:9px 0 0;
  color:var(--ds-muted);
  font-size:11px;
  line-height:1.65;
}

.page > main > .recommend .rec-evidence{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:20px;
}

.page > main > .recommend .rec-evidence span{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px;
  align-items:end;
}

.page > main > .recommend .rec-evidence i{
  grid-column:1/-1;
  position:relative;
  height:3px;
  overflow:hidden;
  background:#e4e4e2;
}

.page > main > .recommend .rec-evidence i::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--score);
  background:var(--ds-brand);
}

.page > main > .recommend .rec-evidence b,
.page > main > .recommend .rec-evidence em{
  font-size:9px;
  line-height:1.3;
}

.page > main > .recommend .rec-evidence b{
  color:var(--ds-muted);
  font-weight:500;
}

.page > main > .recommend .rec-evidence em{
  font-style:normal;
  font-variant-numeric:tabular-nums;
}

.page > main > .recommend .rec-ingredient-tiers{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:8px;
  padding-top:4px;
  border-top:1px solid var(--ds-border);
}

.page > main > .recommend .rec-ingredient-tiers section{
  padding:10px;
  border-radius:4px;
  background:#f4f4f2;
}

.page > main > .recommend .rec-ingredient-tiers header{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 8px;
  align-items:end;
}

.page > main > .recommend .rec-ingredient-tiers header span{
  grid-column:1/-1;
  color:var(--ds-quiet);
  font:600 8px/1.3 var(--ds-data);
  letter-spacing:.04em;
}

.page > main > .recommend .rec-ingredient-tiers header b{
  font-size:10px;
}

.page > main > .recommend .rec-ingredient-tiers header em{
  color:var(--ds-brand-dark);
  font-size:8px;
  font-style:normal;
}

.page > main > .recommend .rec-ingredient-tiers section > div{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px;
}

.page > main > .recommend .rec-ingredient-tiers section > div > span{
  min-width:calc(50% - 3px);
  padding:6px 7px;
  border:1px solid var(--ds-border);
  border-radius:3px;
  background:#fff;
}

.page > main > .recommend .rec-ingredient-tiers section:last-child > div > span{
  min-width:calc(33.333% - 4px);
}

.page > main > .recommend .rec-ingredient-tiers section > div b,
.page > main > .recommend .rec-ingredient-tiers section > div small{
  display:block;
}

.page > main > .recommend .rec-ingredient-tiers section > div b{
  font-size:9px;
  line-height:1.3;
}

.page > main > .recommend .rec-ingredient-tiers section > div small{
  margin-top:3px;
  color:var(--ds-quiet);
  font-size:7px;
  line-height:1.3;
}

.page > main > .recommend .rec-choice-groups{
  padding-top:15px;
  border-top:1px solid var(--ds-border);
}

.page > main > .recommend .rec-choice-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.page > main > .recommend .rec-choice-head b{
  font-size:11px;
}

.page > main > .recommend .rec-choice-head span{
  color:var(--ds-quiet);
  font-size:9px;
}

.page > main > .recommend .rec-choice-groups > section{
  min-height:63px;
  padding:9px 11px 10px;
  border-bottom:1px solid var(--ds-border);
  border-radius:4px;
}

.page > main > .recommend .rec-choice-groups > section.is-primary{
  background:#efefed;
}

.page > main > .recommend .rec-choice-groups header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.page > main > .recommend .rec-choice-groups header b{
  font-size:10px;
  line-height:1.35;
}

.page > main > .recommend .rec-choice-groups header em{
  color:var(--ds-brand-dark);
  font-size:8px;
  font-style:normal;
}

.page > main > .recommend .rec-choice-groups section > div{
  display:flex;
  flex-wrap:wrap;
  gap:5px 13px;
  margin-top:7px;
}

.page > main > .recommend .rec-choice-groups section > div span{
  position:relative;
  padding-left:8px;
  color:var(--ds-quiet);
  font-size:8px;
  line-height:1.4;
}

.page > main > .recommend .rec-choice-groups section > div span::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--ds-brand);
}

.page > main > .recommend .rec-report-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:34px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--ds-border);
  font-size:10px;
  font-weight:600;
}

.page > main > .recommend .rec-panel-progress{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px 0;
  border-top:1px solid var(--ds-border);
  border-bottom:1px solid var(--ds-border);
  color:var(--ds-quiet);
  font-size:9px;
}

.page > main > .recommend .rec-panel-progress span:first-child{
  color:var(--ds-ink);
  font-weight:600;
}

.page > main > .recommend .rec-panel-progress i{
  height:1px;
  background:var(--ds-border);
}

.page > main > .recommend .rec-panel-progress i:first-of-type{
  background:var(--ds-brand);
}

.page > main > .recommend .rec-question-card{
  padding:27px 0 22px;
}

.page > main > .recommend .rec-question-card > small{
  color:var(--ds-quiet);
  font-size:10px;
}

.page > main > .recommend .rec-question-card h3{
  margin:8px 0 18px;
  font-size:24px;
  line-height:1.3;
  letter-spacing:-.025em;
}

.page > main > .recommend .rec-question-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.page > main > .recommend .rec-question-options span{
  min-height:40px;
  display:flex;
  align-items:center;
  padding:0 11px;
  border:1px solid var(--ds-border);
  border-radius:4px;
  color:var(--ds-text);
  font-size:10px;
}

.page > main > .recommend .rec-question-options .is-selected{
  border-color:var(--ds-ink);
  background:var(--ds-ink);
  color:#fff;
}

.page > main > .recommend .rec-input-summary{
  border-top:1px solid var(--ds-border);
}

.page > main > .recommend .rec-input-summary > div{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-height:42px;
  border-bottom:1px solid var(--ds-border);
}

.page > main > .recommend .rec-input-summary span{
  color:var(--ds-quiet);
  font-size:9px;
}

.page > main > .recommend .rec-input-summary b{
  font-size:10px;
  line-height:1.4;
}

.page > main > .recommend .rec-cost-summary{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 16px;
  align-items:end;
  margin-top:20px;
  padding:17px 18px;
  border-radius:5px;
  background:#efefed;
}

.page > main > .recommend .rec-cost-summary span{
  color:var(--ds-muted);
  font-size:9px;
}

.page > main > .recommend .rec-cost-summary b{
  grid-column:1;
  font-size:23px;
}

.page > main > .recommend .rec-cost-summary em{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  color:var(--ds-brand-dark);
  font-size:9px;
  font-style:normal;
}

.page > main > .recommend .rec-example-note{
  position:absolute;
  right:24px;
  bottom:19px;
  color:rgba(255,255,255,.62);
  font-size:9px;
  letter-spacing:.03em;
}

.page > main > .recommend .rec-copy{
  width:100%;
}

.page > main > .recommend .rec-kicker{
  display:block;
  margin-bottom:var(--ds-space-4);
  color:var(--ds-brand-dark);
  font:600 11px/1.4 var(--ds-data);
  letter-spacing:.1em;
}

.page > main > .recommend .rec-copy > h2{
  position:static;
  inset:auto;
  max-width:12ch;
  margin:0;
  text-align:left;
  font-size:var(--ds-section-title);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.02em;
}

.page > main > .recommend .rec-intro{
  max-width:34ch;
  margin:var(--ds-space-5) 0 0;
  color:var(--ds-muted);
  font-size:var(--ds-body);
  line-height:1.75;
}

.page > main > .recommend .rec-steps{
  margin-top:var(--ds-space-7);
  border-top:1px solid var(--ds-border-strong);
  min-height:390px;
}

.page > main > .recommend .rec-step{
  border-bottom:1px solid var(--ds-border);
}

.page > main > .recommend .rec-step-toggle{
  width:100%;
  min-height:76px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:var(--ds-space-4);
  align-items:center;
  padding:15px 0;
  border:0;
  background:transparent;
  color:var(--ds-text);
  text-align:left;
  cursor:pointer;
}

.page > main > .recommend .rec-step-toggle:hover .rec-step-title strong{
  color:var(--ds-brand-dark);
}

.page > main > .recommend .rec-step-toggle:focus-visible{
  outline:2px solid var(--ds-brand);
  outline-offset:4px;
}

.page > main > .recommend .rec-step-index{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid var(--ds-border-strong);
  border-radius:50%;
  color:var(--ds-muted);
  font:600 10px/1 var(--ds-data);
}

.page > main > .recommend .rec-step.is-active .rec-step-index{
  border-color:var(--ds-ink);
  background:var(--ds-ink);
  color:#fff;
}

.page > main > .recommend .rec-step-title small,
.page > main > .recommend .rec-step-title strong{
  display:block;
}

.page > main > .recommend .rec-step-title small{
  color:var(--ds-quiet);
  font-size:10px;
  line-height:1.4;
}

.page > main > .recommend .rec-step-title strong{
  margin-top:4px;
  color:var(--ds-text);
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  transition:color var(--ds-motion),font-size var(--ds-motion);
}

.page > main > .recommend .rec-step.is-active .rec-step-title strong{
  color:var(--ds-ink);
  font-size:21px;
  font-weight:650;
}

.page > main > .recommend .rec-step-state{
  flex:0 0 auto;
  color:var(--ds-quiet);
  font:600 10px/1.4 var(--ds-data);
}

.page > main > .recommend .rec-step.is-active .rec-step-state{
  color:var(--ds-brand-dark);
}

.page > main > .recommend .rec-step-detail{
  max-height:0;
  overflow:hidden;
  padding:0 0 0 56px;
  opacity:0;
  transform:translateY(-4px);
  transition:max-height 420ms cubic-bezier(.2,.8,.2,1),padding 420ms cubic-bezier(.2,.8,.2,1),opacity 240ms ease,transform 320ms ease; /* impeccable-disable-line layout-transition: approved three-step recommendation disclosure */
}

.page > main > .recommend .rec-step.is-active .rec-step-detail{
  max-height:252px;
  padding-bottom:24px;
  opacity:1;
  transform:none;
}

.page > main > .recommend .rec-step-detail > p{
  max-width:40ch;
  margin:0;
  color:var(--ds-muted);
  font-size:11px;
  line-height:1.6;
}

.page > main > .recommend .rec-detail-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
}

.page > main > .recommend .rec-detail-list span{
  min-height:58px;
  display:flex;
  align-items:center;
  padding:10px;
  border:1px solid var(--ds-border);
  border-radius:4px;
  color:var(--ds-text);
  font-size:10px;
  line-height:1.45;
}

.page > main > .recommend .rec-starters{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:18px;
}

.page > main > .recommend .rec-starters a{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  border:1px solid var(--ds-border);
  border-radius:4px;
  background:#fff;
  font-size:12px;
  font-weight:550;
  transition:border-color var(--ds-motion),background var(--ds-motion),color var(--ds-motion);
}

.page > main > .recommend .rec-starters a:hover{
  border-color:var(--ds-ink);
  background:var(--ds-ink);
  color:#fff;
}

.page > main > .recommend .rec-starters a:focus-visible,
.page > main > .recommend .ask:focus-visible{
  outline:2px solid var(--ds-brand);
  outline-offset:3px;
}

.page > main > .recommend .ask{
  flex:0 0 auto;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:226px;
  margin:0;
  padding:0 15px;
  border-radius:4px;
  background:var(--ds-ink);
  color:#fff;
  font-size:13px;
  font-weight:600;
}

.page > main > .recommend .rec-action-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ds-space-5);
  margin-top:20px;
}

.page > main > .recommend .rec-method{
  margin:0;
  color:var(--ds-quiet);
  font-size:10px;
  line-height:1.6;
}

.page > main > .messages > .quotes,
.page > main > .messages > .message-form{
  position:static;
  width:100%;
  transform:none;
  margin-inline:auto;
}

.page > main > .messages > .sub{
  position:static;
  inset:auto;
  width:auto;
  max-width:720px;
  margin:var(--ds-space-4) auto 0;
  color:var(--ds-muted);
  font-size:var(--ds-body-lead);
  line-height:1.65;
  text-align:center;
}

.page > main > .messages > .quotes{
  max-width:1030px;
  margin-top:var(--ds-space-8);
}

.page > main > .messages .quote{
  display:grid;
  grid-template-columns:minmax(0,1fr) 56px;
  gap:var(--ds-space-4);
  margin:0;
  padding:var(--ds-space-5) 0;
  border-bottom:1px solid var(--ds-border);
  color:var(--ds-text);
  font-size:var(--ds-body-lead);
  line-height:1.65;
  text-align:left;
}

.page > main > .messages .quote:first-child{
  padding-top:0;
}

.page > main > .messages .quote small{
  grid-column:1;
  margin-top:var(--ds-space-2);
  color:var(--ds-quiet);
  font-size:var(--ds-label);
  line-height:1.4;
  text-align:left;
}

.page > main > .messages .quote .like{
  position:static;
  grid-column:2;
  grid-row:1/3;
  align-self:start;
  color:var(--ds-muted);
  font-size:var(--ds-dense);
  line-height:1.5;
  text-align:right;
}

.page > main > .messages .view-messages{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:var(--ds-space-4);
  color:var(--ds-info);
  font-size:var(--ds-dense);
}

.page > main > .messages > .message-form{
  max-width:1030px;
  margin-top:var(--ds-space-7);
}

.page > main > .messages .message-form textarea{
  min-height:112px;
  height:auto;
  padding:var(--ds-space-4);
  border:1px solid var(--ds-border);
  background:var(--ds-surface-subtle);
  color:var(--ds-text);
  font-size:var(--ds-body);
  line-height:1.6;
}

.page > main > .messages .form-actions{
  grid-template-columns:220px minmax(0,1fr) 160px;
  gap:var(--ds-space-3);
  margin-top:var(--ds-space-3);
}

.page > main > .messages .form-actions input,
.page > main > .messages .form-actions button{
  min-height:44px;
  height:auto;
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-sm);
  font-size:var(--ds-dense);
}

.page > main > .messages .form-actions input{
  padding-inline:var(--ds-space-4);
  background:var(--ds-surface-subtle);
}

.page > main > .messages .form-actions button{
  background:var(--ds-ink);
  color:#fff;
  font-weight:600;
}

.page > main > .messages{
  background:var(--ds-canvas);
}

.page > main > .news .more-top{
  color:var(--ds-editorial);
}

.page > main > .forum .more-top,
.page > main > .messages .view-messages{
  color:var(--ds-community);
}

.page > main > .wiki .more-top,
.page > main > .wiki .source a{
  color:var(--ds-knowledge);
}

.page > main > .recommend .chip{
  border-color:#c9cee1;
  background:var(--ds-surface);
}

.page > main > .recommend .product-result{
  border-color:transparent;
  background:#fff;
}

.page > main > .recommend .principle-icons svg,
.page > main > .recommend .principle-icons i{
  color:var(--ds-brand);
}

@media (max-width:1120px){
  :root{--ds-gutter:32px}
  .page > main > .recommend{
    grid-template-columns:minmax(370px,1fr) minmax(470px,1fr);
    gap:var(--ds-space-7);
  }
  .page > main > .recommend .rec-report{
    left:4%;
    width:92%;
  }
}

@media (max-width:700px){
  :root{--ds-gutter:20px}
  body{line-height:1.68}
  .nav-in,nav .nav-in,.top{min-height:58px}
  .shead h1,.products-hero h1,.forum-hero h1,.commerce-page h1,.wiki-hero h1,.index-hero h1,.pdp h1{
    letter-spacing:-.025em;
  }
  :where(.company-page,.commerce-page,.products-page) section{
    padding-block:var(--ds-space-8);
  }
  :where(.company-page,.commerce-page,.products-page) :where(.section-head,.sec-head,.sh){
    margin-bottom:var(--ds-space-6);
  }
  .page > main > .products,
  .page > main > .section{
    padding-inline:var(--ds-gutter);
  }
  .page > main > .news,
  .page > main > .forum,
  .page > main > .wiki,
  .page > main > .recommend,
  .page > main > .messages{
    padding-top:var(--ds-space-8);
    padding-bottom:var(--ds-space-8);
  }
  .page > main > .section > .section-title,
  .page > main > .recommend > h2,
  .page > main > .messages > h2{
    font-size:var(--ds-section-title);
    text-align:left;
  }
  .page > main > .news > .more-top,
  .page > main > .forum > .more-top,
  .page > main > .wiki > .more-top{
    position:static;
    margin:var(--ds-space-3) 0 var(--ds-space-6);
  }
  .page > main > .news > .section-title,
  .page > main > .forum > .section-title,
  .page > main > .wiki > .section-title{
    margin-bottom:0;
  }
  .page > main > .wiki .source,
  .page > main > .recommend > .sub,
  .page > main > .messages > .sub{
    margin-top:var(--ds-space-3);
    text-align:left;
  }
  .page > main > .wiki .ingredient-filters{
    width:calc(100% + var(--ds-gutter) * 2);
    margin-inline:calc(var(--ds-gutter) * -1);
  }
  .page > main > .recommend{
    display:flex;
    flex-direction:column;
  }
  .page > main > .recommend .rec-copy{order:1}
  .page > main > .recommend .rec-left{order:2}
  .page > main > .recommend .rec-left,
  .page > main > .messages > .quotes{
    margin-top:var(--ds-space-7);
  }
  .page > main > .recommend .rec-copy{
    margin-top:0;
  }
  .page > main > .recommend .rec-copy > h2{
    max-width:14ch;
    font-size:34px;
  }
  .page > main > .recommend .rec-intro{
    font-size:15px;
  }
  .page > main > .recommend .rec-steps{
    margin-top:var(--ds-space-6);
    min-height:480px;
  }
  .page > main > .recommend .rec-starters{
    grid-template-columns:1fr;
  }
  .page > main > .recommend .rec-left{
    width:100%;
    min-height:652px;
  }
  .page > main > .recommend .rec-report{
    left:18px;
    top:36px;
    width:calc(100% - 36px);
    max-width:none;
    height:580px;
    min-height:0;
    padding:0;
  }
  .page > main > .recommend .rec-report-panel{
    inset:20px;
  }
  .page > main > .recommend .rec-example-note{
    right:16px;
    bottom:14px;
  }
  .page > main > .recommend .rec-answer{
    padding:19px 0 17px;
  }
  .page > main > .recommend .rec-answer h3{
    font-size:22px;
  }
  .page > main > .recommend .rec-evidence{
    gap:10px;
    margin-top:16px;
  }
  .page > main > .recommend .rec-choice-groups > section{
    min-height:58px;
  }
  .page > main > .recommend .rec-step-toggle{
    grid-template-columns:36px minmax(0,1fr) auto;
    gap:var(--ds-space-3);
  }
  .page > main > .recommend .rec-step-detail{
    padding-left:48px;
  }
  .page > main > .recommend .rec-action-row{
    flex-direction:column;
    align-items:stretch;
  }
  .page > main > .recommend .rec-action-row .ask{
    width:100%;
  }
  .page > main > .messages .quote{
    grid-template-columns:minmax(0,1fr) 48px;
    padding:var(--ds-space-5) 0;
    font-size:17px;
  }
  .page > main > .messages .form-actions{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ==========================================================================
   BIOGEEK DESIGN SYSTEM 1.8 · PRECISION SHELL
   The homepage recommendation stage is intentionally excluded from this
   refinement. It is the reference composition, not a target for re-styling.
   ========================================================================== */

:root{
  --ds-canvas:#f8f9fb;
  --ds-surface-subtle:#f2f4f7;
  --ds-text:#36393e;
  --ds-muted:#62666c;
  --ds-quiet:#8a8f96;
  --ds-border:#e1e5ea;
  --ds-border-strong:#c8ced6;
  --ds-brand:#46558f;
  --ds-brand-dark:#34416f;
  --ds-brand-soft:#f6f7fb;
  --ds-knowledge:#57537a;
  --ds-knowledge-soft:#f7f6fa;
  --ds-community:#62558a;
  --ds-community-soft:#f7f6fa;
  --ds-editorial:#4d6170;
  --ds-editorial-soft:#f6f7f8;
  --ds-night:#101113;
  --ds-control-height:44px;
  --ds-shadow-panel:0 22px 54px rgba(15,18,24,.08);
  --ds-motion:180ms cubic-bezier(.22,1,.36,1);
}

body{
  background:var(--ds-canvas);
  color:var(--ds-ink);
}

/* The navigation is an open alignment rail, not a card. */
.site-nav{
  position:relative;
  z-index:60;
  height:68px;
  padding-top:0;
  border:0;
  background:var(--ds-surface);
  box-shadow:none;
  backdrop-filter:none;
}

.site-nav > .nav-in,
.site-nav > .navin,
nav.site-nav > .nav-in{
  width:100%;
  max-width:var(--ds-shell);
  min-height:68px;
  height:68px;
  margin:0 auto;
  padding:0 var(--ds-gutter);
  border:0;
  border-radius:0;
  background:var(--ds-surface);
  box-shadow:none;
}

.site-nav .menu,
.site-nav .nav-links,
.site-nav .navlinks{
  gap:clamp(24px,2.4vw,38px);
}

.site-nav .menu a,
.site-nav .nav-links a,
.site-nav .navlinks a{
  padding:19px 0 18px;
  color:var(--ds-muted);
  font-size:13px;
  font-weight:550;
  transition:color var(--ds-motion);
}

.site-nav .menu a::after,
.site-nav .nav-links a::after,
.site-nav .navlinks a::after{
  display:none;
}

.site-nav .menu a:hover,
.site-nav .nav-links a:hover,
.site-nav .navlinks a:hover,
.site-nav .menu a.nav-active,
.site-nav .nav-links a.nav-active,
.site-nav .navlinks a.nav-active{
  color:var(--ds-ink);
}

.site-nav .menu a.nav-active::before,
.site-nav .nav-links a.nav-active::before,
.site-nav .navlinks a.nav-active::before{
  content:"";
  position:absolute;
  right:0;
  bottom:10px;
  left:0;
  height:2px;
  border-radius:2px;
  background:var(--ds-ink);
}

.site-nav .nav-lang,
.site-nav .nav-right .lang-sw,
.site-nav .nav-actions .lang,
.site-nav .navright .lang{
  height:30px;
  border-color:var(--ds-border);
  background:var(--ds-surface);
}

/* Page mastheads use a clean reading field. A small local accent identifies
   the page; full-width tinted slabs no longer do that job. */
.shead,
.products-hero,
.forum-hero,
.index-hero,
.journal-page > .shead,
.personalization-page > .shead,
.pdp-hero{
  border:0;
  background:var(--ds-canvas);
}

.shead,
.forum-hero,
.index-hero{
  padding:64px 0 48px;
}

.shead .wrap,
.forum-hero .forum-wrap{
  position:relative;
}

.shead .wrap > *,
.forum-hero .forum-wrap > *{
  position:relative;
  z-index:1;
}

.shead h1,
.forum-hero h1{
  max-width:17ch;
  margin-top:16px;
}

.shead p,
.forum-hero p{
  max-width:650px;
  margin-top:22px;
}

.eyebrow,
.kicker,
.section-kicker,
.slide-kicker,
.cat,
.k,
.forum-kicker{
  letter-spacing:.065em;
}

/* Broad rules are replaced by spacing and local surfaces. */
body:not(.page) > section,
.journal-page > section,
.about-page > section,
.personalization-page > section,
.forum-page section{
  border-bottom:0;
}

.sh{
  margin-bottom:var(--ds-space-7);
}

.btn,
.add-cart,
.mission-primary,
.commerce-primary,
.primary-btn,
.buy-btn{
  min-height:var(--ds-control-height);
  padding-inline:20px;
}

@media (hover:hover){
  .btn:hover,
  .add-cart:hover,
  .mission-primary:hover,
  .commerce-primary:hover,
  .primary-btn:hover,
  .buy-btn:hover{
    transform:translateY(-1px);
  }
}

/* Products: editorial masthead, open controls, calm product stage. */
.products-hero{
  padding:40px 0 20px;
}

.products-hero-in{
  gap:16px;
}

.products-hero h1{
  font-size:var(--ds-page-title);
}

.catalog-controls{
  padding:0 0 var(--ds-space-5);
  border:0;
  background:var(--ds-surface);
}

.catalog-controls-in{
  width:100%;
  max-width:calc(var(--ds-shell) - var(--ds-gutter) * 2);
  min-height:64px;
  margin-inline:auto;
  padding:10px 0;
  border:0;
  border-radius:0;
  background:transparent;
}

.catalog{
  padding-top:var(--ds-space-7);
  background:var(--ds-surface);
}

.products-page,
.products-hero{
  background:var(--ds-surface);
}

.pcard .ph{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.pcard .ph img{
  padding:0;
}

@media (hover:hover){
  .pcard:hover .ph{
    background:transparent;
  }
}

/* PDP: the product and its facts sit on white; media receives the quiet field. */
.pdp-hero{
  padding-top:var(--ds-space-7);
}

.pdp-hero .gallery .main{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.pdp-toc{
  border-color:var(--ds-border);
  background:rgba(255,255,255,.96);
}

.pdp-toc-in{
  max-width:var(--ds-shell);
}

/* WIKI index: dense directory separated by whitespace, not spreadsheet lines. */
#wiki-index .index-hero{
  border-bottom:0;
  background:var(--ds-canvas);
}

#wiki-index .index-meta{
  border-top:0;
  padding-top:0;
}

#wiki-index .library{
  background:var(--ds-canvas);
}

#wiki-index .ingredient-list{
  gap:8px 24px;
  border-top:0;
}

#wiki-index .ingredient-card,
#wiki-index .ingredient-card:nth-child(n){
  min-height:96px;
  padding:16px 0;
  border:0;
}

#wiki-index .ingredient-card.is-published{
  padding-inline:16px;
  border-radius:var(--ds-radius-md);
  background:var(--ds-surface);
}

/* Journal: one lead story plus a precise reading queue, not six equal cards. */
.journal-page > section:nth-of-type(2){
  padding:0 0 var(--ds-space-10);
  background:var(--ds-canvas);
}

.journal-page .art-grid{
  display:grid;
  grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr);
  grid-template-rows:repeat(5,minmax(88px,auto));
  gap:0 var(--ds-space-7);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.journal-page .art{
  position:relative;
  min-height:0;
  padding:20px 0;
  border:0;
  border-bottom:1px solid var(--ds-border);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.journal-page .art:first-child{
  grid-row:1 / span 5;
  min-height:480px;
  padding:36px;
  border:0;
  border-radius:var(--ds-radius-md);
  background:var(--ds-night);
  color:#fff;
}

.journal-page .art:first-child::after{
  content:"↗";
  position:absolute;
  right:32px;
  bottom:28px;
  color:#fff;
  font-size:22px;
}

.journal-page .art:first-child .art-cat,
.journal-page .art:first-child .art-m{
  color:var(--ds-night-muted);
}

.journal-page .art:first-child .art-t{
  max-width:15ch;
  margin-top:auto;
  font-size:clamp(28px,2.4vw,38px);
  line-height:1.18;
  letter-spacing:-.025em;
}

.journal-page .art:not(:first-child){
  grid-column:2;
  display:grid;
  grid-template-columns:130px minmax(0,1fr) auto;
  align-items:center;
  gap:20px;
}

.journal-page .art:not(:first-child) .art-t{
  font-size:16px;
}

.journal-page .art:not(:first-child):last-child{
  border-bottom:0;
}

.journal-page .art:hover{
  box-shadow:none;
}

@media (hover:hover){
  .journal-page .art:not(:first-child):hover .art-t{
    color:var(--ds-brand-dark);
  }
}

/* Forum: discussion remains an open list. */
.forum-index{
  padding:0 0 var(--ds-space-10);
  background:var(--ds-canvas);
}

.forum-index > .forum-wrap{
  padding-top:var(--ds-space-7);
  padding-bottom:var(--ds-space-7);
  border:0;
  border-radius:0;
  background:transparent;
}

.thread-list{
  border-top-color:var(--ds-border);
}

.forum-thread{
  padding:26px 0;
  transition:background-color var(--ds-motion),transform var(--ds-motion);
}

@media (hover:hover){
  .forum-thread:hover{
    transform:translateX(4px);
  }
}

.thread-tag{
  border-radius:var(--ds-radius-sm);
  background:var(--ds-community-soft);
  color:var(--ds-community);
}

.community-note{
  margin-top:var(--ds-space-7);
  padding:var(--ds-space-6);
  border:0;
  border-radius:var(--ds-radius-md);
  background:var(--ds-surface-subtle);
}

/* About: asymmetrical mission, one controlled dark trust surface. */
.about-page > section:nth-of-type(2){
  padding:var(--ds-space-10) 0;
}

.about-page > section:nth-of-type(2) > .wrap{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:var(--ds-space-7) var(--ds-space-9);
  align-items:start;
}

.about-page > section:nth-of-type(2) .sh,
.about-page > section:nth-of-type(2) > .wrap > p{
  margin:0!important;
}

.about-page > section:nth-of-type(2) .bento{
  grid-column:1 / -1;
  gap:var(--ds-space-5);
  margin-top:var(--ds-space-5)!important;
}

.about-page .bento .cell{
  position:relative;
  min-height:210px;
  padding:var(--ds-space-6) 0;
  border:0;
  border-radius:0;
  background:transparent;
}

.about-page .bento .cell::before{
  display:block;
  margin-bottom:var(--ds-space-7);
  color:var(--ds-quiet);
  font:600 11px/1 var(--ds-data);
}

.about-page .bento .cell:nth-child(1)::before{content:"01 / FORMULA"}
.about-page .bento .cell:nth-child(2)::before{content:"02 / PRICE"}
.about-page .bento .cell:nth-child(3)::before{content:"03 / OPENNESS"}

.about-page > section:nth-of-type(3){
  padding:0 0 var(--ds-space-10);
}

.about-page > section:nth-of-type(3) > .wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--ds-space-8);
  align-items:end;
  padding:var(--ds-space-8);
  border-radius:var(--ds-radius-lg);
  background:var(--ds-night);
  color:#fff;
}

.about-page > section:nth-of-type(3) .sh{
  margin:0;
}

.about-page > section:nth-of-type(3) h2{
  color:#fff;
}

.about-page > section:nth-of-type(3) .sh p{
  color:var(--ds-night-muted);
}

.about-page > section:nth-of-type(3) .btn-line{
  border-color:#fff;
  background:#fff;
  color:var(--ds-night);
}

.about-page > #company{
  padding:0 0 var(--ds-space-10);
}

.about-page > #company .wrap{
  display:grid;
  grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);
  gap:var(--ds-space-9);
  padding-top:var(--ds-space-7);
  border-top:1px solid var(--ds-border);
}

/* Personalization route: the existing three facts become one connected system.
   This does not alter the homepage recommendation reference composition. */
.personalization-page > section:nth-of-type(2){
  padding:0 0 var(--ds-space-10);
}

.personalization-page .eng-grid{
  position:relative;
  gap:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.personalization-page .eng-grid::before{
  display:none;
}

.personalization-page .ecard{
  min-height:270px;
  padding:var(--ds-space-6);
  border-right:1px solid var(--ds-border);
}

.personalization-page .ecard:last-child{
  border-right:0;
}

.personalization-page .ecard .step{
  margin-bottom:var(--ds-space-6);
  color:var(--ds-brand-dark);
}

.personalization-page .ecard h3{
  font-size:var(--ds-card-title);
  line-height:1.3;
}

.personalization-page .ecard .d{
  min-height:40px;
  margin:10px 0 var(--ds-space-5);
}

.personalization-page .eng-grid + .sh{
  display:grid;
  grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);
  gap:var(--ds-space-9);
  margin-top:var(--ds-space-8)!important;
  padding-top:var(--ds-space-7);
  border-top:1px solid var(--ds-border);
}

/* Footer: a quiet closing field with less visual weight than the content. */
footer,
.forum-page footer{
  border-top:0;
  background:#eef1f4;
}

.foot-grid{
  gap:var(--ds-space-8);
}

.foot-col h4{
  color:var(--ds-muted);
}

/* Homepage uses legacy header markup; keep the same open alignment rail. */
.page > .top{
  width:100%;
  max-width:var(--ds-shell);
  height:68px;
  min-height:68px;
  margin:0 auto;
  padding:0 var(--ds-gutter);
  border:0;
  border-radius:0;
  background:var(--ds-surface);
}

.page > .top .navlinks{
  margin-left:0;
}

.page > .top .navlinks a{
  color:var(--ds-muted);
}

.page > .top .navlinks a:hover{
  color:var(--ds-ink);
}

.page > .top .account{
  gap:20px;
}

.page > .top .home-lang{
  background:var(--ds-surface);
}

.forum-page{
  background:var(--ds-canvas);
}

@media (max-width:960px){
  .journal-page .art-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:0;
  }
  .journal-page .art:first-child{
    grid-row:auto;
    min-height:380px;
    margin-bottom:var(--ds-space-4);
  }
  .journal-page .art:not(:first-child){
    grid-column:auto;
  }
  .about-page > section:nth-of-type(2) > .wrap,
  .about-page > #company .wrap,
  .personalization-page .eng-grid + .sh{
    grid-template-columns:1fr;
    gap:var(--ds-space-5);
  }
  .about-page > section:nth-of-type(3) > .wrap{
    grid-template-columns:1fr;
    align-items:start;
  }
  .personalization-page .eng-grid{
    grid-template-columns:1fr;
  }
  .personalization-page .ecard{
    min-height:0;
    border-right:0;
    border-bottom:1px solid var(--ds-border);
  }
  .personalization-page .ecard:last-child{
    border-bottom:0;
  }
}

@media (max-width:700px){
  .page > .top{
    width:100%;
    height:58px;
    min-height:58px;
    margin:0;
    padding:0 20px;
    border-radius:0;
  }
  .site-nav{
    height:58px;
    padding-top:0;
  }
  .site-nav > .nav-in,
  .site-nav > .navin,
  nav.site-nav > .nav-in{
    width:100%;
    min-height:58px;
    height:58px;
    padding:0 20px;
    border-radius:0;
  }
  .site-nav .logo,
  .site-nav .brand{
    font-size:20px;
  }
  .site-nav .logo img,
  .site-nav .logo svg,
  .site-nav .brand img,
  .site-nav .brand svg{
    width:21px;
    height:25px;
  }
  .shead,
  .forum-hero,
  .index-hero{
    padding:40px 0 32px;
  }
  .products-hero{
    padding:32px 0 20px;
  }
  .catalog-controls-in{
    width:calc(100% - 16px);
    margin-inline:auto;
    padding-inline:12px;
  }
  .journal-page .art-grid,
  .forum-index > .forum-wrap{
    padding:var(--ds-space-4);
    border-right:0;
    border-left:0;
    border-radius:0;
  }
  .journal-page .art:first-child{
    min-height:340px;
    padding:var(--ds-space-6);
  }
  .journal-page .art:not(:first-child){
    grid-template-columns:1fr auto;
    gap:10px;
  }
  .journal-page .art:not(:first-child) .art-cat{
    grid-column:1;
  }
  .journal-page .art:not(:first-child) .art-t{
    grid-column:1 / -1;
  }
  .about-page > section:nth-of-type(2),
  .about-page > #company,
  .personalization-page > section:nth-of-type(2),
  .forum-index,
  .journal-page > section:nth-of-type(2){
    padding-bottom:var(--ds-space-8);
  }
  .about-page .bento .cell{
    min-height:0;
  }
  .about-page > section:nth-of-type(3) > .wrap{
    padding:var(--ds-space-6);
    border-radius:0;
  }
  .personalization-page .eng-grid{
    padding:0;
    border-right:0;
    border-left:0;
    border-radius:0;
    box-shadow:none;
  }
}