/* =============================================================================
   VitaNouvelle LifeScience: house inner pages (about, ingredients, faq,
   professionals, insights). Load after vitanouvelle.css. This file only adds
   components. Tokens, the type scale, buttons, reveals and motion all come
   from vitanouvelle.css, and nothing here redefines them.
   ========================================================================== */


@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}

/* ---- shared helpers ------------------------------------------------------ */
.sec.tight-top{padding-top:clamp(32px,4vw,56px)}
.k{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--vita)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:36px}
main [id]{scroll-margin-top:calc(var(--nav-h) + 28px)}

/* current page inside the mobile sheet: vita ink and a small gilt mark */
.vn-sheet nav a[aria-current="page"]{color:var(--vita)}
.vn-sheet nav a[aria-current="page"]::after{content:"";flex:none;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--gilt)}

/* ---- inner-page hero additions --------------------------------------------- */
.page-hero .topics{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.page-hero .topics a{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.4);font-size:14px;font-weight:500;color:var(--ink-2);transition:border-color .3s var(--ease),color .3s var(--ease);-webkit-tap-highlight-color:transparent}
.page-hero .topics a:hover{border-color:var(--ink);color:var(--ink)}
.page-hero .topics a:active{transform:scale(.97)}

/* ---- figures ---------------------------------------------------------------- */
.fig{margin:0;border-radius:22px;overflow:hidden;background:#E6E1D7}
.fig img{width:100%;height:100%;object-fit:cover}
.fig-wide{margin-top:clamp(56px,7vw,96px);aspect-ratio:1800/1018}
@media(max-width:700px){.fig-wide{aspect-ratio:4/3;border-radius:18px}.fig-wide img{object-position:72% 50%}}

/* ---- split: heading left, prose right ----------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px clamp(40px,7vw,120px);align-items:start}
.split .h2{margin-top:22px;max-width:13ch}
.prose p{font-size:17px;line-height:1.7;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.prose p+p{margin-top:20px}
.prose .sf{font-family:var(--serif);font-weight:300;font-size:clamp(25px,2.3vw,34px);line-height:1.22;letter-spacing:-.014em;color:var(--ink);max-width:24ch}
.prose .sf+p{margin-top:34px}
.prose a,.lead a{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
.prose a:hover,.lead a:hover{border-color:var(--ink)}
@media(max-width:900px){.split{grid-template-columns:1fr}.split .h2{max-width:14ch}}

/* ---- statement: one sentence, set large (the pedigree line) --------------- */
.statement-sec{text-align:center}
.statement{margin:30px auto 0;max-width:23ch;font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.4vw,66px);line-height:1.08;letter-spacing:-.024em;text-wrap:balance}
.statement-sec .rule{display:block;width:44px;height:1px;margin:44px auto 0;background:var(--gilt)}

/* ---- ledger: a title and its explanation, ruled like a register --------- */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ledger>li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px clamp(32px,6vw,96px);padding:36px 0 38px;border-bottom:1px solid var(--line)}
.ledger h3{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.2vw,32px);line-height:1.1;letter-spacing:-.012em}
.ledger p{color:var(--ink-2);font-size:16.5px;line-height:1.62;max-width:54ch;text-wrap:pretty}
.ledger p+p{margin-top:10px}
@media(max-width:760px){.ledger>li{grid-template-columns:1fr;padding:28px 0 30px}}

/* ---- roster: the five-release roadmap ------------------------------------- */
.roster{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.roster>li{border-bottom:1px solid var(--line)}
.roster .row{display:grid;grid-template-columns:clamp(72px,9vw,128px) minmax(0,.9fr) minmax(0,1.3fr) minmax(170px,auto);align-items:baseline;gap:8px clamp(20px,3vw,40px);padding:30px 0}
.roster .no{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.2vw,60px);line-height:.9;letter-spacing:-.03em;color:rgba(20,24,21,.24)}
.roster .nm{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.3vw,34px);line-height:1.05;letter-spacing:-.014em}
.roster .ds{font-size:15.5px;color:var(--ink-2);max-width:44ch}
.roster .st{grid-column:4;justify-self:end;display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.roster .live .no{color:var(--gilt)}
.roster .live .st{color:var(--vita)}
.roster .veiled .nm{font-style:italic;font-weight:300;color:var(--ink-3)}
.roster a.row{-webkit-tap-highlight-color:transparent}
.roster a.row .nm{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.roster a.row:hover .nm{background-size:100% 1px}
.roster a.row .arr{display:inline-block;transition:transform .5s var(--ease)}
.roster a.row:hover .arr{transform:translateX(3px)}
@media(max-width:760px){
  .roster .row{grid-template-columns:52px minmax(0,1fr);gap:6px 18px;padding:24px 0}
  .roster .ds,.roster .st{grid-column:2}
  .roster .st{justify-self:start;margin-top:8px;white-space:normal}
}

/* ---- ingredients: library intro, label index, monographs ------------------- */
.lib-intro{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:40px clamp(40px,6vw,96px);align-items:start;margin-bottom:clamp(72px,9vw,128px)}
.lib-intro .fig{aspect-ratio:1200/679}
@media(max-width:900px){.lib-intro{grid-template-columns:1fr}.lib-intro .fig{order:-1}}

.onlabel{max-width:440px;border-top:2px solid var(--ink)}
.onlabel .cap{display:block;padding:12px 0 10px;border-bottom:1px solid var(--ink);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.onlabel ol{list-style:none;margin:0;padding:0}
.onlabel a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;transition:color .3s var(--ease)}
.onlabel a:hover{color:var(--vita)}
.onlabel .tot{display:flex;justify-content:space-between;gap:16px;padding:13px 0 0;font-size:15.5px;font-weight:500}

.monos{border-top:1px solid var(--line)}
.mono{display:grid;grid-template-columns:clamp(120px,13vw,180px) minmax(0,.75fr) minmax(0,1.5fr);gap:20px clamp(28px,4vw,56px);padding:clamp(40px,5vw,60px) 0;border-bottom:1px solid var(--line)}
.mono .dose{font-family:var(--serif);font-weight:300;font-size:clamp(60px,6.4vw,96px);line-height:.86;letter-spacing:-.045em;color:var(--ink);white-space:nowrap}
.mono .dose small{font-size:.34em;letter-spacing:0;margin-left:.14em;color:var(--ink-2)}
.mono h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,38px);line-height:1.04;letter-spacing:-.016em;text-wrap:balance}
.mono .also{margin-top:12px;font-size:14px;color:var(--ink-3)}
.mono dl{margin:0;display:grid;gap:24px}
.mono dt{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--vita)}
.mono dd{margin:8px 0 0;color:var(--ink-2);font-size:16.5px;line-height:1.62;max-width:60ch;text-wrap:pretty}
@media(max-width:1000px){.mono{grid-template-columns:clamp(110px,16vw,150px) minmax(0,1fr)}.mono dl{grid-column:2}}
@media(max-width:600px){.mono{grid-template-columns:1fr;gap:14px}.mono dl{grid-column:auto;margin-top:12px}.mono .dose{font-size:64px}}

/* label notes: directions, caution, net weight, set as on the tub */
.labelnotes{margin:0;border-top:1px solid var(--line)}
.labelnotes>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.labelnotes dt{padding-top:4px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.labelnotes dd{margin:0;font-size:16px;line-height:1.6;color:var(--ink)}
@media(max-width:560px){.labelnotes>div{grid-template-columns:1fr}}

/* ---- faq: groups with a sticky title, native accordions --------------------- */
.faq-group{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:24px clamp(40px,7vw,110px);padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line)}
.faq-group:first-child{border-top:0;padding-top:0}
.faq-group:last-child{padding-bottom:0}
.faq-group .gh{position:sticky;top:calc(var(--nav-h) + 32px);align-self:start}
.faq-group .gh h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.3vw,48px);line-height:1.04;letter-spacing:-.022em;max-width:11ch;text-wrap:balance}
.faq-group .gh p{margin-top:16px;font-size:15px;color:var(--ink-3);max-width:30ch}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:24px;align-items:center;padding:26px 0;font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.75vw,25px);line-height:1.25;letter-spacing:-.008em;transition:color .3s var(--ease);-webkit-tap-highlight-color:transparent}
.qa summary::-webkit-details-marker{display:none}
.qa summary::marker{content:""}
.qa summary:hover{color:var(--vita)}
.qa summary:focus-visible{outline-offset:4px}
.qa .pm{position:relative;width:22px;height:22px}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.qa .pm::after{transform:rotate(90deg)}
.qa details[open] .pm::after{transform:rotate(0deg)}
.qa .a{padding:0 46px 30px 0}
.qa .a p{color:var(--ink-2);font-size:16.5px;line-height:1.65;max-width:62ch;text-wrap:pretty}
.qa .a p+p{margin-top:12px}
.qa .a a{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
.qa .a a:hover{border-color:var(--ink)}
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .qa details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s var(--ease) allow-discrete}
  .qa details[open]::details-content{block-size:auto}
}
@media(max-width:900px){.faq-group{grid-template-columns:1fr}.faq-group .gh{position:static}.qa .a{padding-right:0}}

.closing{text-align:center}
.closing .h2{margin:22px auto 0;max-width:14ch}
.closing .lead{margin:22px auto 0}
.closing .ctas{justify-content:center}

/* ---- professionals: the formulation table ------------------------------------ */
.mtable{width:100%;border-collapse:collapse}
.mtable thead th{padding:0 28px 16px 0;text-align:left;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--ink)}
.mtable thead th:last-child,.mtable td:last-child{padding-right:0}
.mtable tbody tr{border-bottom:1px solid var(--line)}
.mtable tbody th{width:19%;padding:28px 28px 28px 0;text-align:left;vertical-align:top;font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.8vw,26px);line-height:1.15;letter-spacing:-.01em}
.mtable td{padding:30px 28px 28px 0;vertical-align:top;font-size:15px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.mtable td.amt{width:10%;padding-top:24px;font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.5vw,36px);line-height:1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.mtable .cite{color:var(--ink-3);white-space:nowrap}
@media(max-width:860px){
  .mtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mtable,.mtable tbody,.mtable tr,.mtable th,.mtable td{display:block;width:auto}
  .mtable tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:26px 0}
  .mtable tbody th{grid-column:1;grid-row:1;width:auto;padding:0}
  .mtable td.amt{grid-column:2;grid-row:1;width:auto;padding:0;text-align:right;font-size:30px}
  .mtable td{grid-column:1/-1;padding:14px 0 0}
  .mtable td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
  .mtable td.amt::before{display:none}
}
.mtable-notes{display:flex;flex-wrap:wrap;gap:10px 36px;margin:26px 0 0;font-size:14px;color:var(--ink-2)}
.mtable-notes div{display:flex;gap:8px}
.mtable-notes dt{color:var(--ink-3)}
.mtable-notes dd{margin:0;color:var(--ink)}

/* separation: two audiences, ruled columns */
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(40px,6vw,96px);border-top:1px solid var(--line);padding-top:clamp(36px,4vw,52px)}
.two-col h3{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.2vw,32px);line-height:1.1;letter-spacing:-.012em}
.two-col p{margin-top:16px;color:var(--ink-2);font-size:16.5px;line-height:1.62;max-width:48ch}
@media(max-width:760px){.two-col{grid-template-columns:1fr}}

/* program list inside the dark band */
.pro .plan{list-style:none;margin:28px 0 0;padding:0;max-width:46ch;border-top:1px solid var(--line-d)}
.pro .plan li{padding:14px 0;border-bottom:1px solid var(--line-d);color:#E9EEF2;font-size:15.5px;line-height:1.5}
.pro .fine{margin-top:20px;font-size:12.5px;color:var(--sage)}

/* references */
.refs-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:32px clamp(40px,7vw,110px);align-items:start}
.refs-grid .h3{margin-top:20px}
.refs-grid .note{margin-top:16px;font-size:15px;color:var(--ink-3);max-width:34ch}
.refs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.refs li{padding:18px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.refs a{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
.refs a:hover{border-color:var(--ink)}
@media(max-width:900px){.refs-grid{grid-template-columns:1fr}}

/* ---- insights: one featured article, then two, then three -------------------- */
.feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px clamp(32px,5vw,80px);align-items:center}
.feature .im{border-radius:20px;overflow:hidden;aspect-ratio:3/2;background:#E7EAE6}
.feature .im img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.4s var(--ease)}
.feature:hover .im img{transform:scale(1.03)}
.feature h2{margin-top:20px;font-family:var(--serif);font-weight:300;font-size:clamp(38px,4.2vw,62px);line-height:1.02;letter-spacing:-.026em;text-wrap:balance}
.feature p{margin-top:20px;color:var(--ink-2);font-size:17.5px;line-height:1.6;max-width:40ch;text-wrap:pretty}
.feature .go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:30px}
.feature .min{font-size:12.5px;color:var(--ink-3)}
.feature:hover .tlink{border-color:var(--ink)}
.feature:hover .tlink .arr{transform:translateX(3px)}
@media(max-width:900px){.feature{grid-template-columns:1fr}}

.ix-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:64px 24px;margin-top:clamp(72px,9vw,128px);padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--line)}
.ix-grid .card-a{grid-column:span 2}
.ix-grid .card-a.wide{grid-column:span 3}
.ix-grid .card-a .im,.ix-grid .card-a:first-child .im{aspect-ratio:3/2}
.ix-grid .card-a.wide h3{font-size:clamp(25px,2.2vw,33px)}
.card-a .min{display:block;margin-top:14px;font-size:12.5px;color:var(--ink-3)}
/* tablet: the five smaller articles become an index, thumbnail beside text */
@media(max-width:1000px){
  .ix-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
  .ix-grid .card-a,.ix-grid .card-a.wide,.ix-grid .card-a:first-child{grid-column:auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line)}
  .ix-grid .card-a.wide h3{font-size:clamp(23px,1.9vw,29px)}
}
/* phone: stacked cards, image first */
@media(max-width:620px){
  .ix-grid{gap:48px;padding-top:48px}
  .ix-grid .card-a,.ix-grid .card-a.wide,.ix-grid .card-a:first-child{display:flex;flex-direction:column;gap:18px;padding:0;border-bottom:0}
}

/* ---- preferences ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .feature .im img,.feature:hover .im img{transform:none!important;transition:none!important}
  .qa details::details-content{transition:none!important}
  .roster a.row .nm,.qa .pm::before,.qa .pm::after{transition:none}
  .page-hero .topics a:active{transform:none}
}
@media (prefers-contrast: more){
  .roster .no,.roster .veiled .nm{color:var(--ink-3)}
}


.nw{white-space:nowrap}