/* ==========================================================================
   LOWKEY — components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Task bar
   -------------------------------------------------------------------------- */
.bar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  height:var(--bar-h);
  display:flex;
  align-items:center;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:transform .55s var(--ease-out), background .4s var(--ease-soft);
}
.bar[data-hidden="true"]{ transform:translate3d(0,-101%,0); }

.bar__inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
}

.bar__brand{
  font-family:var(--f-bubble);
  font-size:clamp(1.4rem, 1.05rem + 1.55vw, 2.35rem);
  line-height:1;
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:0.004em;
  padding-block:.1em;
  transition:color .4s var(--ease-soft), transform .5s var(--ease-out);
  transform-origin:left center;
}
.bar__brand:hover{ color:var(--orange-deep); transform:scale(1.02); }

.bar__nav{
  display:flex;
  justify-content:center;
  gap:clamp(1.1rem, 2.4vw, 2.6rem);
  font-size:var(--t-sm);
  font-weight:500;
}
.bar__nav a{ position:relative; padding-block:.4em; color:var(--ink-2); transition:color .3s var(--ease-soft); }
.bar__nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:.15em;
  width:100%; height:1.2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.bar__nav a:hover,
.bar__nav a[aria-current="page"]{ color:var(--ink); }
.bar__nav a:hover::after,
.bar__nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

.bar__end{ display:flex; align-items:center; gap:.55rem; justify-self:end; }

.cart-btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding:.62em 1.05em .62em 1.15em;
  border-radius:100px;
  font-size:var(--t-sm);
  font-weight:600;
  box-shadow:inset 0 0 0 1.3px var(--line-strong);
  transition:background .35s var(--ease-soft), color .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.cart-btn:hover{ background:var(--ink); color:var(--paper); box-shadow:inset 0 0 0 1.3px var(--ink); }
.cart-btn__count{
  display:grid;
  place-items:center;
  /* [hidden] must win over display:grid */
  min-width:1.45em;
  height:1.45em;
  padding-inline:.35em;
  border-radius:100px;
  background:var(--orange);
  color:var(--ink);
  font-size:.78em;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:transform .45s var(--ease-out);
}
.cart-btn__count[data-bump="true"]{ transform:scale(1.35); }
.cart-btn__count[hidden]{ display:none; }

.bar__menu{
  display:none;
  width:2.6rem; height:2.6rem;
  place-items:center;
  border-radius:100px;
  box-shadow:inset 0 0 0 1.3px var(--line-strong);
}
.bar__menu span{ display:block; width:15px; height:1.5px; background:var(--ink); transition:transform .4s var(--ease-out), opacity .25s; }
.bar__menu span + span{ margin-top:4px; }
.bar__menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.bar__menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.bar__menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width:860px){
  .bar__nav{ display:none; }
  .bar__menu{ display:grid; }
  .cart-btn__label{ display:none; }
  .cart-btn{ padding:.62em .85em; }
}

/* Mobile sheet */
.sheet{
  position:fixed;
  inset:var(--bar-h) 0 auto 0;
  z-index:88;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:1.5rem var(--gut) 2.2rem;
  transform:translate3d(0,-102%,0);
  visibility:hidden;
  transition:transform .55s var(--ease-out), visibility .55s;
}
.sheet[data-open="true"]{ transform:translate3d(0,0,0); visibility:visible; }
.sheet a{
  display:block;
  padding-block:.72em;
  font-family:var(--f-display);
  font-size:var(--t-lg);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 60;
  letter-spacing:-0.02em;
  border-bottom:1px solid var(--line);
}
.sheet a:last-child{ border-bottom:0; }

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  margin-top:var(--bar-h);
  height:calc(100svh - var(--bar-h));
  min-height:520px;
  overflow:hidden;
  background:#A99A8C;           /* mid-tone of the footage: no white flash */
  isolation:isolate;
}
.hero__media{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.hero__video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  will-change:transform;
}
.hero__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to top, rgba(14,11,10,.88) 0%, rgba(14,11,10,.62) 20%, rgba(14,11,10,.20) 44%, rgba(14,11,10,0) 66%),
    linear-gradient(to right, rgba(14,11,10,.42) 0%, rgba(14,11,10,0) 52%);
}

.hero__content{
  position:relative;
  z-index:2;
  height:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0 var(--gut) clamp(2.2rem, 4.5vw, 4rem);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:var(--paper);
}
.hero__eyebrow{
  color:rgba(253,250,247,.72);
  margin-bottom:clamp(.9rem,1.6vw,1.4rem);
}
.hero__title{
  font-size:var(--t-3xl);
  max-width:14ch;
  margin-bottom:clamp(1rem,1.8vw,1.5rem);
  text-shadow:0 1px 40px rgba(10,8,7,.25);
}
.hero__sub{
  font-size:var(--t-md);
  line-height:1.4;
  letter-spacing:-0.014em;
  color:rgba(253,250,247,.9);
  max-width:38ch;
  margin-bottom:clamp(1.6rem,2.8vw,2.4rem);
  text-wrap:pretty;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }

.hero__cue{
  position:absolute;
  right:var(--gut);
  bottom:clamp(2.2rem,4.5vw,4rem);
  z-index:2;
  display:flex;
  align-items:center;
  gap:.6em;
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(253,250,247,.66);
}
.hero__cue i{
  display:block;
  width:1px; height:34px;
  background:linear-gradient(to bottom, rgba(253,250,247,.66), rgba(253,250,247,0));
  transform-origin:top;
  animation:cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue{
  0%,100%{ transform:scaleY(.35); opacity:.4; }
  45%    { transform:scaleY(1);   opacity:1; }
}
@media (max-width:700px){ .hero__cue{ display:none; } }

/* --------------------------------------------------------------------------
   3. Ticker
   -------------------------------------------------------------------------- */
.ticker{
  background:var(--orange);
  color:var(--ink);
  border-block:1px solid rgba(20,17,16,.14);
  overflow:hidden;
  padding-block:clamp(.75rem,1.2vw,1.05rem);
  display:flex;
}
.ticker__track{
  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:clamp(1.6rem,3vw,3rem);
  padding-right:clamp(1.6rem,3vw,3rem);
  white-space:nowrap;
  animation:marquee 46s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  font-size:var(--t-sm);
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.ticker__dot{ width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:.45; flex:none; }
@keyframes marquee{ to{ transform:translate3d(-100%,0,0); } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

/* --------------------------------------------------------------------------
   4. Statement — the number
   -------------------------------------------------------------------------- */
.statement{ padding-block:var(--sec); }
.statement__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:end;
}
/* The mask wrapper is the grid item, so the column span belongs on it —
   on the numeral it would be ignored and the wrapper would collapse to one
   track, clipping the glyph. */
.statement__figure{
  grid-column:1 / span 5;
  display:flex;
  align-items:flex-end;
  gap:clamp(.9rem,1.8vw,1.8rem);
}
.statement__unit{
  flex:none;
  font-size:var(--t-sm);
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--ink-2);
  padding-bottom:1.65em;   /* sits the last line on the numeral's baseline */
}
.statement__num{
  font-family:var(--f-display);
  /* A low optical size keeps the strokes sturdy. At opsz 144 Fraunces uses its
     display cut, whose hairline joins break up at this scale and read as a
     rendering fault rather than a numeral. */
  font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 24;
  font-size:var(--t-mega);
  line-height:.92;      /* tight, but not so tight the glyph clips in the mask */
  letter-spacing:-0.055em;
  color:var(--orange);
  display:block;
}
.statement__body{ grid-column:7 / span 6; }
.statement__body h2{
  font-size:var(--t-xl);
  margin-bottom:1rem;
}
.statement__foot{
  margin-top:clamp(2.5rem,5vw,4.5rem);
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 2.4rem;
}
.statement__foot dt{ font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.statement__foot dd{ font-size:var(--t-sm); font-weight:500; }
@media (max-width:900px){
  .statement__num{ grid-column:1 / -1; }
  .statement__body{ grid-column:1 / -1; }
}

/* --------------------------------------------------------------------------
   5. The ledger — what is missing
   -------------------------------------------------------------------------- */
.ledger{
  background:var(--ink);
  color:var(--paper);
  padding-block:var(--sec);
}
.ledger__head{ margin-bottom:clamp(3rem,6vw,5.5rem); }
/* Measure is set in em so it tracks the display face, not the body face —
   `ch` here would resolve against the inherited sans and crush the heading. */
.ledger__head h2{ font-size:var(--t-2xl); color:var(--paper); max-width:11em; }
.ledger__head p{
  margin-top:1.2rem;
  color:rgba(253,250,247,.62);
  font-size:var(--t-base);
  max-width:44ch;
}
.ledger__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,7rem);
}
@media (max-width:820px){ .ledger__cols{ grid-template-columns:1fr; gap:3.5rem; } }

.ledger__col h3{
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.145em;
  text-transform:uppercase;
  color:rgba(253,250,247,.5);
  padding-bottom:.9rem;
  border-bottom:1px solid rgba(253,250,247,.18);
  margin-bottom:.35rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
}
.ledger__col--ours h3{ color:var(--orange); border-bottom-color:rgba(239,120,105,.42); }

.ledger__list li{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding-block:.62rem;
  border-bottom:1px solid rgba(253,250,247,.09);
  font-size:var(--t-base);
  letter-spacing:-0.01em;
}
.ledger__list .n{
  flex:none;
  width:2.1em;
  font-size:var(--t-xs);
  font-variant-numeric:tabular-nums;
  color:rgba(253,250,247,.5);
}
.ledger__col--ours .ledger__list .n{ color:var(--orange); }
.ledger__col--ours .ledger__list li{ border-bottom-color:rgba(253,250,247,.14); }
.ledger__col--ours .ledger__list .t{ font-weight:500; }

/* the strike-out */
.ledger__list .t{ position:relative; display:inline-block; transition:color .7s var(--ease-soft), opacity .7s var(--ease-soft); }
.ledger__list .t::after{
  content:"";
  position:absolute;
  left:-.08em; top:52%;
  width:calc(100% + .16em); height:1.4px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .62s var(--ease-out);
}
.js-motion .ledger__col--theirs .ledger__list li.is-struck .t{ color:rgba(253,250,247,.48); }
.js-motion .ledger__col--theirs .ledger__list li.is-struck .t::after{ transform:scaleX(1); }

.ledger__note{
  margin-top:2.4rem;
  font-size:var(--t-sm);
  color:rgba(253,250,247,.56);
  max-width:46ch;
}
.ledger__tally{
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:1.6rem;
  border-top:1px solid rgba(253,250,247,.18);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.6rem 1.2rem;
  font-family:var(--f-display);
  font-size:var(--t-lg);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 60;
  letter-spacing:-0.022em;
}
.ledger__tally b{ color:var(--orange); font-weight:500; }

/* --------------------------------------------------------------------------
   6. Product duo
   -------------------------------------------------------------------------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:860px){ .duo{ grid-template-columns:1fr; } }

.duo__panel{
  position:relative;
  overflow:hidden;
  padding:clamp(2.6rem,5vw,4.5rem) clamp(1.5rem,3.4vw,3.5rem) clamp(2.6rem,5vw,4rem);
  min-height:min(96vh, 940px);
  display:flex;
  flex-direction:column;
  color:var(--ink);
}
.duo__panel--red{
  background:radial-gradient(78% 62% at 50% 40%, #F17C6D 0%, var(--orange) 44%, #E97263 100%);
}
.duo__panel--green{
  background:radial-gradient(78% 62% at 50% 40%, #83A085 0%, #7C997E 44%, #75917A 100%);
}
/* The panel aspect is close to the photograph's, so a full-bleed `cover` shows
   the bottle whole with no crop. The figure is nudged right of centre to open
   up a clear column for the copy at bottom-left — the overhang is clipped by
   the panel, and the feather mask hides the photo's edges either way. */
.duo__figure{
  position:absolute;
  inset:0 -16% 0 8%;
  z-index:0;
  pointer-events:none;
}
@media (max-width:860px){ .duo__figure{ inset:0 -4% 0 2%; } }
.duo__figure img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  /* the shot background and the panel background are the same colour, so a
     soft feather makes the photograph dissolve into the page */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%,  #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%,  #000 94%, transparent 100%);
  mask-composite:intersect;
  will-change:transform;
}
.duo__top,.duo__bottom{ position:relative; z-index:1; flex:none; }
.duo__bottom{ margin-top:auto; max-width:20rem; }
.duo__name{
  font-family:var(--f-display);
  font-size:var(--t-xl);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 80;
  line-height:.98;
  letter-spacing:-0.028em;
}
.duo__desc{ margin-top:.5rem; font-size:var(--t-base); color:rgba(20,17,16,.82); max-width:24ch; }
.duo__meta{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-top:1.4rem;
  margin-bottom:1.2rem;
  font-size:var(--t-sm);
  font-weight:600;
}
.duo__meta .sep{ width:18px; height:1px; background:rgba(20,17,16,.3); }
.duo__panel--green .duo__desc{ color:rgba(20,17,16,.82); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.45em .95em;
  border-radius:100px;
  background:rgba(253,250,247,.86);
  color:var(--ink);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   7. Pairings
   -------------------------------------------------------------------------- */
.pair__head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:end;
  margin-bottom:clamp(2.6rem,5vw,4.5rem);
}
.pair__head h2{ grid-column:1 / span 6; font-size:var(--t-2xl); }
.pair__head p{ grid-column:8 / span 5; color:var(--ink-2); }
@media (max-width:900px){ .pair__head h2,.pair__head p{ grid-column:1 / -1; } }

.pair__list{ border-top:1px solid var(--line); }
.pair__row{
  display:grid;
  grid-template-columns:5.5rem 1fr auto;
  gap:clamp(1rem,3vw,2.5rem);
  align-items:center;
  padding-block:clamp(1.3rem,2.4vw,2rem);
  border-bottom:1px solid var(--line);
  transition:background .5s var(--ease-soft), padding-inline .5s var(--ease-out);
}
.pair__row:hover{ background:var(--orange-wash); padding-inline:clamp(.6rem,1.6vw,1.4rem); }
.pair__n{ font-size:var(--t-xs); letter-spacing:.14em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.pair__name{
  font-family:var(--f-display);
  font-size:var(--t-lg);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 60;
  letter-spacing:-0.024em;
  line-height:1.05;
}
.pair__with{ font-size:var(--t-sm); color:var(--ink-2); text-align:right; }
.pair__with b{ font-weight:600; color:var(--ink); }
@media (max-width:640px){
  .pair__row{ grid-template-columns:2.6rem 1fr; }
  .pair__with{ grid-column:2; text-align:left; margin-top:.3rem; }
}

/* --------------------------------------------------------------------------
   8. Process
   -------------------------------------------------------------------------- */
.process{ background:var(--orange-wash); }
.process__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);
  margin-top:clamp(2.4rem,4.5vw,4rem);
}
@media (max-width:820px){ .process__grid{ grid-template-columns:1fr; } }
.process__step{ padding-top:1.3rem; border-top:1.6px solid var(--ink); }
.process__step h3{
  font-family:var(--f-display);
  font-size:var(--t-lg);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 60;
  letter-spacing:-0.024em;
  margin:.55rem 0 .7rem;
}
.process__step p{ color:var(--ink-2); font-size:var(--t-sm); line-height:1.62; }

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding-block:clamp(1.2rem,2.2vw,1.75rem);
  text-align:left;
  font-family:var(--f-display);
  font-size:var(--t-md);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 40;
  letter-spacing:-0.02em;
  transition:color .35s var(--ease-soft);
}
.faq__q:hover{ color:var(--orange-deep); }
.faq__icon{ position:relative; flex:none; width:16px; height:16px; }
.faq__icon::before,.faq__icon::after{
  content:"";
  position:absolute; left:0; top:50%;
  width:16px; height:1.6px;
  background:currentColor;
  transition:transform .5s var(--ease-out);
}
.faq__icon::after{ transform:rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after{ transform:rotate(0deg); }
.faq__a{
  overflow:hidden;
  height:0;
  transition:height .55s var(--ease-out);
}
.faq__a > div{ padding-bottom:1.6rem; color:var(--ink-2); max-width:60ch; font-size:var(--t-sm); line-height:1.68; }

/* --------------------------------------------------------------------------
   10. CTA band
   -------------------------------------------------------------------------- */
.band{
  background:var(--orange);
  color:var(--ink);
  padding-block:clamp(4rem,8vw,8rem);
  text-align:center;
}
.band h2{ font-size:var(--t-2xl); margin-inline:auto; max-width:16ch; }
.band p{ margin:1.2rem auto clamp(1.8rem,3vw,2.6rem); max-width:42ch; color:rgba(20,17,16,.82); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.foot{ background:var(--ink); color:var(--paper); padding-top:clamp(3.5rem,6vw,6rem); }
.foot__top{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(3rem,5vw,5rem);
  border-bottom:1px solid rgba(253,250,247,.14);
}
.foot__sign{ grid-column:1 / span 5; }
.foot__sign h2{
  font-family:var(--f-display);
  font-size:var(--t-xl);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 80;
  letter-spacing:-0.028em;
  line-height:1;
}
.foot__sign p{ margin-top:.9rem; color:rgba(253,250,247,.55); font-size:var(--t-sm); max-width:34ch; }
.foot__cols{ grid-column:7 / span 6; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
@media (max-width:860px){
  .foot__sign{ grid-column:1 / -1; }
  .foot__cols{ grid-column:1 / -1; grid-template-columns:repeat(2,1fr); gap:2.4rem; }
}
.foot__col h3{
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.145em;
  text-transform:uppercase;
  color:rgba(253,250,247,.56);
  margin-bottom:1rem;
}
.foot__col a{ display:block; padding-block:.34em; font-size:var(--t-sm); color:rgba(253,250,247,.82); transition:color .3s var(--ease-soft); }
.foot__col a:hover{ color:var(--orange); }

.signup{ display:flex; gap:.5rem; margin-top:1.6rem; max-width:420px; }
.signup input{
  flex:1;
  min-width:0;
  padding:1em 1.2em;
  border-radius:100px;
  border:1.3px solid rgba(253,250,247,.24);
  background:transparent;
  color:var(--paper);
  font-size:var(--t-sm);
  transition:border-color .35s var(--ease-soft);
}
.signup input::placeholder{ color:rgba(253,250,247,.55); }
.signup input:focus{ outline:none; border-color:var(--orange); }
.signup .btn{ flex:none; }
.signup__msg{ margin-top:.8rem; font-size:var(--t-xs); color:var(--orange); min-height:1.2em; }

.foot__mark{
  font-family:var(--f-bubble);
  font-size:clamp(4rem,17vw,15rem);
  line-height:.82;
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:0.004em;
  padding-block:clamp(2rem,4vw,3.5rem) 0;
  text-align:center;
  user-select:none;
}
.foot__base{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.6rem 2rem;
  padding-block:1.6rem 2rem;
  font-size:var(--t-xs);
  color:rgba(253,250,247,.56);
}
.foot__base a:hover{ color:var(--orange); }
.foot__base nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }

/* --------------------------------------------------------------------------
   12. Cart drawer
   -------------------------------------------------------------------------- */
.scrim{
  position:fixed;
  inset:0;
  z-index:98;
  background:rgba(14,11,10,.42);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .5s var(--ease-soft), visibility .5s;
}
.scrim[data-open="true"]{ opacity:1; visibility:visible; }

.drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  z-index:99;
  width:min(468px, 100vw);
  background:var(--paper);
  display:flex;
  flex-direction:column;
  transform:translate3d(101%,0,0);
  visibility:hidden;
  transition:transform .62s var(--ease-out), visibility .62s;
  box-shadow:-20px 0 60px rgba(14,11,10,.14);
}
.drawer[data-open="true"]{ transform:translate3d(0,0,0); visibility:visible; }

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.3rem clamp(1.2rem,3vw,1.8rem);
  border-bottom:1px solid var(--line);
}
.drawer__head h2{ font-size:var(--t-sm); font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.drawer__close{ width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:100px; transition:background .3s; }
.drawer__close:hover{ background:rgba(20,17,16,.07); }

.ship{
  padding:1rem clamp(1.2rem,3vw,1.8rem);
  border-bottom:1px solid var(--line);
  background:var(--orange-wash);
}
.ship p{ font-size:var(--t-xs); letter-spacing:.03em; margin-bottom:.6rem; }
.ship p b{ font-weight:700; }
.ship__bar{ height:3px; border-radius:100px; background:rgba(20,17,16,.14); overflow:hidden; }
.ship__fill{ height:100%; background:var(--orange-deep); width:0; transition:width .7s var(--ease-out); }

.drawer__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding-inline:clamp(1.2rem,3vw,1.8rem); }
.drawer__empty{ padding:3.5rem 0; text-align:center; color:var(--ink-3); }
.drawer__empty p{ margin-bottom:1.4rem; }

.line{
  display:grid;
  grid-template-columns:74px 1fr auto;
  gap:1rem;
  padding-block:1.3rem;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.line__img{
  width:74px; height:92px;
  border-radius:6px;
  overflow:hidden;
  background:var(--orange);
  flex:none;
}
.line__img img{ width:100%; height:100%; object-fit:cover; }
.line__img--green{ background:#7C997E; }
.line__name{ font-weight:600; font-size:var(--t-sm); letter-spacing:-0.01em; }
.line__sub{ font-size:var(--t-xs); color:var(--ink-3); margin-top:.15rem; }
.line__price{ font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.line__rm{ display:block; margin-top:.5rem; font-size:var(--t-xs); color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; }
.line__rm:hover{ color:var(--orange-deep); }

.qty{
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  margin-top:.7rem;
  border-radius:100px;
  box-shadow:inset 0 0 0 1.3px var(--line-strong);
}
.qty button{
  width:2rem; height:2rem;
  display:grid; place-items:center;
  border-radius:100px;
  font-size:1rem;
  line-height:1;
  transition:background .25s, color .25s;
}
.qty button:hover{ background:var(--ink); color:var(--paper); }
.qty span{ min-width:1.9rem; text-align:center; font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums; }

.drawer__foot{ padding:1.3rem clamp(1.2rem,3vw,1.8rem) clamp(1.4rem,3vw,1.8rem); border-top:1px solid var(--line); }
.drawer__row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.drawer__row b{ font-size:var(--t-md); font-weight:600; font-variant-numeric:tabular-nums; }
.drawer__fine{ font-size:var(--t-xs); color:var(--ink-3); margin-bottom:1rem; }

/* --------------------------------------------------------------------------
   13. Toast
   -------------------------------------------------------------------------- */
.toast{
  position:fixed;
  left:50%; bottom:2rem;
  z-index:120;
  transform:translate3d(-50%, calc(100% + 3rem), 0);
  visibility:hidden;
  background:var(--ink);
  color:var(--paper);
  padding:.95em 1.5em;
  border-radius:100px;
  font-size:var(--t-sm);
  font-weight:500;
  box-shadow:0 12px 34px rgba(14,11,10,.24);
  transition:transform .6s var(--ease-out), visibility .6s;
  pointer-events:none;
  max-width:calc(100vw - 2rem);
  text-align:center;
}
.toast[data-show="true"]{ transform:translate3d(-50%,0,0); visibility:visible; }

/* --------------------------------------------------------------------------
   14. Product blocks (shop)
   -------------------------------------------------------------------------- */
.shop-intro{ padding-block:clamp(3.5rem,7vw,7rem) clamp(2.5rem,5vw,4.5rem); }
.shop-intro__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:end;
}
.shop-intro h1{ grid-column:1 / span 7; font-size:var(--t-2xl); }
.shop-intro p{ grid-column:9 / span 4; color:var(--ink-2); }
@media (max-width:900px){ .shop-intro h1,.shop-intro p{ grid-column:1 / -1; } }

.pdp{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  border-top:1px solid var(--line);
}
@media (max-width:900px){ .pdp{ grid-template-columns:1fr; } }

.pdp__media{
  position:relative;
  overflow:hidden;
  min-height:min(92vh,880px);
}
@media (max-width:900px){ .pdp__media{ min-height:min(72vh,600px); } }
.pdp--flip .pdp__media{ order:2; }
@media (max-width:900px){ .pdp--flip .pdp__media{ order:0; } }

.pdp__media--red{   background:radial-gradient(78% 62% at 50% 42%, #F17C6D 0%, var(--orange) 44%, #E97263 100%); }
.pdp__media--green{ background:radial-gradient(78% 62% at 50% 42%, #83A085 0%, #7C997E 44%, #75917A 100%); }

.pdp__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%,  #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%,  #000 94%, transparent 100%);
  mask-composite:intersect;
}
.pdp__badge{
  position:absolute;
  z-index:2;
  top:clamp(1.4rem,2.6vw,2.4rem);
  left:clamp(1.4rem,2.6vw,2.4rem);
}

.pdp__panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(2.8rem,5vw,5.5rem) clamp(1.5rem,4vw,4.5rem);
  max-width:660px;
}
.pdp__name{
  font-family:var(--f-display);
  font-size:var(--t-2xl);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 90;
  line-height:.94;
  letter-spacing:-0.03em;
  margin:.5rem 0 .2rem;
}
.pdp__price{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  font-size:var(--t-md);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  margin-bottom:1.2rem;
}
.pdp__price span{ font-size:var(--t-sm); font-weight:400; color:var(--ink-3); }
.pdp__desc{ color:var(--ink-2); max-width:46ch; margin-bottom:1.6rem; text-wrap:pretty; }

.spec{
  border-top:1px solid var(--line);
  margin-bottom:1.8rem;
}
.spec__row{
  display:grid;
  grid-template-columns:8.5rem 1fr;
  gap:1rem;
  padding-block:.72rem;
  border-bottom:1px solid var(--line);
  font-size:var(--t-sm);
}
.spec__row dt{ color:var(--ink-3); letter-spacing:.04em; }
.spec__row dd{ margin:0; }
.spec__row dd b{ font-weight:600; }
@media (max-width:480px){ .spec__row{ grid-template-columns:1fr; gap:.1rem; } }

.buy{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.buy .qty{ margin-top:0; height:3.35rem; padding-inline:.35rem; }
.buy .btn{ flex:1 1 14rem; }
.pdp__note{
  margin-top:1rem;
  font-size:var(--t-xs);
  color:var(--ink-3);
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .9rem;
  align-items:center;
}
.pdp__note i{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); flex:none; }

/* --------------------------------------------------------------------------
   15. Bundle band
   -------------------------------------------------------------------------- */
.bundle{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(3.5rem,6vw,6rem);
}
.bundle__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
}
.bundle__text{ grid-column:1 / span 6; }
.bundle__buy{ grid-column:8 / span 5; }
@media (max-width:900px){ .bundle__text,.bundle__buy{ grid-column:1 / -1; } }
.bundle h2{
  font-family:var(--f-display);
  font-size:var(--t-xl);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 80;
  letter-spacing:-0.028em;
  line-height:1;
}
.bundle p{ margin-top:1rem; color:rgba(253,250,247,.62); max-width:44ch; }
.bundle__price{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  margin-bottom:1.2rem;
  font-size:var(--t-lg);
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 60;
}
.bundle__was{ font-family:var(--f-sans); font-size:var(--t-sm); color:rgba(253,250,247,.58); text-decoration:line-through; }
.bundle__save{
  font-family:var(--f-sans);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--orange);
  padding:.35em .8em;
  border-radius:100px;
}

/* --------------------------------------------------------------------------
   16. Assurance row
   -------------------------------------------------------------------------- */
.assure{ border-top:1px solid var(--line); }
.assure__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  padding-block:clamp(2.5rem,4vw,3.5rem);
}
@media (max-width:760px){ .assure__grid{ grid-template-columns:1fr; gap:1.6rem; } }
.assure__item h3{ font-size:var(--t-sm); font-weight:600; margin-bottom:.3rem; }
.assure__item p{ font-size:var(--t-sm); color:var(--ink-2); }

/* --------------------------------------------------------------------------
   17. Checkout
   -------------------------------------------------------------------------- */
.bar--slim .bar__inner{ grid-template-columns:auto 1fr auto; }
.bar--slim .bar__secure{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:.5em;
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.checkout{ padding-block:clamp(2.5rem,5vw,4.5rem) clamp(4rem,7vw,7rem); }
.checkout__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
@media (max-width:900px){
  .checkout__grid{ grid-template-columns:1fr; }
  .checkout__summary{ order:-1; }
}

.checkout h1{ font-size:var(--t-xl); margin-bottom:.5rem; }
.checkout__lede{ color:var(--ink-2); margin-bottom:clamp(2rem,3.5vw,2.8rem); max-width:46ch; }

.fieldset{ border:0; padding:0; margin:0 0 clamp(1.8rem,3vw,2.6rem); }
.fieldset legend{
  padding:0 0 1rem;
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.145em;
  text-transform:uppercase;
  color:var(--ink-3);
  width:100%;
  border-bottom:1px solid var(--line);
  margin-bottom:1.3rem;
}
.field{ margin-bottom:.9rem; }
.field label{
  display:block;
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink-2);
  margin-bottom:.4rem;
}
.field input,
.field select{
  width:100%;
  padding:.95em 1.1em;
  border:1.3px solid var(--line-strong);
  border-radius:10px;
  background:var(--white);
  font-size:var(--t-sm);
  transition:border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.field input::placeholder{ color:var(--ink-3); }
.field input:focus,
.field select:focus{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(239,120,105,.28);
}
.field input:user-invalid{ border-color:var(--orange-deep); }
.field__row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:520px){ .field__row{ grid-template-columns:1fr; } }
.field__hint{ font-size:var(--t-xs); color:var(--ink-3); margin-top:.4rem; }

.ship-opt{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1rem 1.15rem;
  border:1.3px solid var(--line-strong);
  border-radius:10px;
  margin-bottom:.6rem;
  cursor:pointer;
  transition:border-color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.ship-opt:hover{ background:var(--orange-wash); }
.ship-opt:has(input:checked){ border-color:var(--ink); background:var(--orange-wash); }
.ship-opt input{ accent-color:var(--ink); width:1.05rem; height:1.05rem; flex:none; }
.ship-opt__body{ flex:1; }
.ship-opt__body b{ display:block; font-size:var(--t-sm); font-weight:600; }
.ship-opt__body span{ font-size:var(--t-xs); color:var(--ink-3); }
.ship-opt__price{ font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums; }

.pay-note{
  border:1.3px dashed var(--line-strong);
  border-radius:10px;
  padding:1.2rem 1.3rem;
  background:var(--orange-wash);
}
.pay-note h3{ font-size:var(--t-sm); font-weight:600; margin-bottom:.35rem; }
.pay-note p{ font-size:var(--t-xs); color:var(--ink-2); max-width:52ch; }

.checkout__summary{
  position:sticky;
  top:calc(var(--bar-h) + 1.5rem);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(1.3rem,2.4vw,1.9rem);
}
/* One column on mobile — the summary sits inline, not pinned over the form. */
@media (max-width:900px){ .checkout__summary{ position:static; } }
.checkout__summary h2{
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.145em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.sum__rows{ padding-top:1rem; border-top:1px solid var(--line); margin-top:.4rem; }
.sum__row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-block:.34rem;
  font-size:var(--t-sm);
}
.sum__row span:last-child{ font-variant-numeric:tabular-nums; }
.sum__row--total{
  margin-top:.7rem;
  padding-top:.9rem;
  border-top:1px solid var(--line);
  font-size:var(--t-md);
  font-weight:600;
}
.sum__empty{ padding:2rem 0; text-align:center; color:var(--ink-3); font-size:var(--t-sm); }

/* --------------------------------------------------------------------------
   18. 404
   -------------------------------------------------------------------------- */
.lost{
  min-height:calc(100svh - var(--bar-h));
  margin-top:var(--bar-h);
  background:var(--orange);
  color:var(--ink);
  display:flex;
  align-items:center;
  overflow:hidden;
  position:relative;
}
.lost__mark{
  position:absolute;
  right:-2%;
  bottom:-14%;
  font-family:var(--f-bubble);
  font-size:clamp(11rem,34vw,32rem);
  line-height:.8;
  color:rgba(20,17,16,.10);
  user-select:none;
  pointer-events:none;
}
.lost__inner{ position:relative; z-index:1; padding-block:clamp(4rem,9vw,8rem); }
.lost h1{ font-size:var(--t-2xl); max-width:13em; }
.lost p{ margin-top:1.3rem; max-width:44ch; color:rgba(20,17,16,.82); font-size:var(--t-md); line-height:1.42; }
.lost__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(1.8rem,3vw,2.6rem); }
.lost__links{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.3rem;
  border-top:1px solid rgba(20,17,16,.22);
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.8rem;
  font-size:var(--t-sm);
}

/* --------------------------------------------------------------------------
   19. Legal / prose
   -------------------------------------------------------------------------- */
.legal-head{
  padding-block:clamp(3.5rem,6vw,6rem) clamp(2rem,3.5vw,3rem);
  border-bottom:1px solid var(--line);
}
.legal-head h1{ font-size:var(--t-2xl); }
.legal-head p{ margin-top:1rem; color:var(--ink-3); font-size:var(--t-sm); }

.legal{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  padding-block:clamp(2.5rem,5vw,4.5rem) clamp(4rem,7vw,7rem);
  align-items:start;
}
@media (max-width:860px){ .legal{ grid-template-columns:1fr; } }

.legal__toc{ position:sticky; top:calc(var(--bar-h) + 1.6rem); }
/* One column on mobile — the contents list sits inline, not pinned over the text. */
@media (max-width:860px){ .legal__toc{ position:static; } }
.legal__toc h2{
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.145em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:.9rem;
}
.legal__toc a{
  display:block;
  padding-block:.34em;
  font-size:var(--t-sm);
  color:var(--ink-2);
  transition:color .3s var(--ease-soft);
}
.legal__toc a:hover{ color:var(--orange-deep); }

.prose{ max-width:68ch; }
.prose h2{
  font-family:var(--f-display);
  font-size:var(--t-lg);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 60;
  letter-spacing:-0.024em;
  line-height:1.06;
  margin:clamp(2.2rem,4vw,3.2rem) 0 .85rem;
  scroll-margin-top:calc(var(--bar-h) + 1.5rem);
}
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:var(--t-base); font-weight:600; margin:1.6rem 0 .5rem; }
.prose p,.prose li{ color:var(--ink-2); line-height:1.7; }
.prose p{ margin-bottom:1rem; }
.prose ul{ list-style:none; margin:0 0 1.2rem; padding:0; }
.prose ul li{ position:relative; padding-left:1.4rem; margin-bottom:.5rem; }
.prose ul li::before{
  content:"";
  position:absolute;
  left:.15rem; top:.72em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--orange);
}
.prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--orange-deep); }
.prose__note{
  margin-top:2.5rem;
  padding:1.2rem 1.3rem;
  background:var(--orange-wash);
  border-radius:12px;
  font-size:var(--t-sm);
}
.prose__note b{ font-weight:600; }

/* --------------------------------------------------------------------------
   20. Small-screen corrections
   -------------------------------------------------------------------------- */

/* The bag label is hidden below 860px, so the icon takes over rather than
   leaving an empty pill. */
.cart-btn__icon{ display:none; }
@media (max-width:860px){ .cart-btn__icon{ display:block; } }

@media (max-width:900px){
  /* Matching the panel to the photograph's aspect makes `cover` an exact fit,
     so the bottle is never cropped and the feather still lands on the real
     edges of the image. */
  .pdp__media{
    min-height:0;
    aspect-ratio:1500 / 1862;
    max-height:78svh;
  }
}

@media (max-width:860px){
  /* One column: the product gets its own band and the copy sits under it,
     instead of the two overlapping in a narrow panel. */
  .duo__panel{
    min-height:0;
    padding-block:clamp(1.8rem,5vw,2.6rem) clamp(2.4rem,6vw,3.2rem);
  }
  .duo__figure{
    position:relative;
    inset:auto;
    width:min(78%, 360px);
    aspect-ratio:1500 / 1862;
    margin:clamp(1rem,4vw,2rem) auto clamp(1.4rem,4vw,2.2rem);
  }
  .duo__bottom{ margin-top:0; max-width:none; }
  .duo__name{ font-size:var(--t-lg); }
}

/* --------------------------------------------------------------------------
   21. Utilities replacing inline style attributes
   These exist so the Content-Security-Policy can ship style-src 'self' with
   no 'unsafe-inline'. Values are identical to the inline rules they replaced,
   so nothing moves on the page.
   -------------------------------------------------------------------------- */
.u-pt-bar{ padding-top:var(--bar-h); }
.u-bt-0{ border-top:0; }
.u-mt-1{ margin-top:1rem; }
.u-note-center{ text-align:center; margin-top:.9rem; }

.faq__title{ font-size:var(--t-xl); margin-bottom:clamp(2rem,4vw,3rem); }
.process__title{ font-size:var(--t-2xl); max-width:18ch; }

.ry-26{ --reveal-y:26px; }

.d-200{ --reveal-delay:200ms; }
.d-220{ --reveal-delay:220ms; }
.d-240{ --reveal-delay:240ms; }
.d-260{ --reveal-delay:260ms; }
.d-300{ --reveal-delay:300ms; }
.d-320{ --reveal-delay:320ms; }
.d-340{ --reveal-delay:340ms; }
.d-400{ --reveal-delay:400ms; }
.d-440{ --reveal-delay:440ms; }
.d-480{ --reveal-delay:480ms; }

/* --------------------------------------------------------------------------
   21. Nutrition declaration
   Mandatory for prepacked food, and for distance selling it has to be
   available before the customer pays — not just on the bottle when it lands.
   Reuses the FAQ disclosure so it adds no new interaction pattern.
   -------------------------------------------------------------------------- */
.nutri{ border-top:1px solid var(--line); margin-bottom:1.8rem; }
.nutri .faq__item:last-child{ border-bottom:1px solid var(--line); }
.nutri .faq__q{
  font-family:var(--f-sans);
  font-size:var(--t-sm);
  font-weight:600;
  font-variation-settings:normal;
  letter-spacing:.01em;
  padding-block:.85rem;
  gap:1rem;
}
.nutri .faq__q:hover{ color:var(--orange-deep); }
.nutri .faq__icon{ width:13px; height:13px; }
.nutri .faq__icon::before,
.nutri .faq__icon::after{ width:13px; }
.nutri .faq__a > div{ padding-bottom:1.3rem; max-width:none; }

.nutri__table{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.nutri__table th,
.nutri__table td{
  padding:.48rem 0;
  border-bottom:1px solid var(--line);
  font-weight:400;
  text-align:left;
}
.nutri__table th{ color:var(--ink-2); }
.nutri__table td{ text-align:right; font-weight:500; font-variant-numeric:tabular-nums; }
.nutri__table tr:last-child th,
.nutri__table tr:last-child td{ border-bottom:0; }
.nutri__sub th{ padding-left:1.15rem; color:var(--ink-3); }
.nutri__foot{ margin-top:.8rem; font-size:var(--t-xs); color:var(--ink-3); }