/* ============================================================
   CONTENT PAGES — info, concern, ingredient, wishlist, search, 404
   ============================================================ */
.info{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.6vw,56px);
  padding-top:clamp(20px,2.2vw,32px);padding-bottom:var(--sec);
  align-items:start}
.info__nav{grid-column:1/4;position:sticky;top:calc(var(--bar-h-stuck) + 24px);display:grid;gap:2px;
  border-top:1px solid var(--line-soft)}
.info__nav a{display:flex;align-items:center;justify-content:space-between;padding:12px 0;
  border-bottom:1px solid var(--line-soft);font-size:var(--t-meta);color:var(--ink-45);
  transition:color .3s,padding-left .4s var(--slow)}
.info__nav a:hover,.info__nav a.is-on{color:var(--ink);padding-left:7px}
/* the icon carries a viewBox but no intrinsic size, so inside a flex row it
   stretched to whatever space was going — every other arrow on the site is
   given its size explicitly, and this one was missed */
.info__nav a svg{
  width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.3;
  transition:transform .4s var(--slow);
}
.info__nav a:hover svg,.info__nav a.is-on svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.info__nav a svg{transition:none}}
.info__body{grid-column:5/13;display:grid;gap:clamp(30px,4vw,60px)}
.info__sec{display:grid;gap:14px;scroll-margin-top:calc(var(--bar-h-stuck) + 30px)}
.info__sec h2{font-family:var(--display);font-weight:300;font-size:var(--d3);
  line-height:1.06;letter-spacing:-.015em}
.info__sec p{color:var(--ink-70);max-width:64ch}
.ddl{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.ddl div{display:grid;grid-template-columns:minmax(150px,1fr) 2fr;gap:clamp(12px,2vw,28px);
  padding:14px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.ddl dt{font-size:var(--t-meta);font-weight:500}
.ddl dd{font-size:var(--t-meta);color:var(--ink-70);margin:0}
.paycards{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}
.paycards span{height:40px;padding:0 16px;display:inline-flex;align-items:center;
  box-shadow:inset 0 0 0 1px var(--line);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-70)}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,32px);padding-top:6px}
.steps3 li{display:grid;gap:9px;align-content:start;padding-top:16px;border-top:1px solid var(--line)}
.steps3 b{font-size:var(--t-label);letter-spacing:.14em;color:var(--ink-25)}
.steps3 p{font-size:var(--t-meta);color:var(--ink-70)}
.steps3 strong{display:block;font-weight:500;font-size:clamp(1rem,.8vw + .84rem,1.125rem);color:var(--ink)}
@media (max-width:900px){
  .info__nav{display:none}
  .info__body{grid-column:1/13}
  .steps3{grid-template-columns:1fr}
}

/* faq */
/* the top of the page is two jobs side by side: find an answer, or reach a
   person. Everything below it stays full width. */
.faqtop{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,32fr);
  gap:clamp(28px,5vw,88px);align-items:start;padding-bottom:clamp(0px,.4vw,6px)}
.faqtop__help{align-self:end;padding-top:clamp(14px,1.6vw,22px);border-top:1px solid var(--line)}
.faqtop__h{font-family:var(--display);font-weight:300;font-size:var(--d4);line-height:1.1;
  letter-spacing:-.012em;margin-bottom:10px}
.faqtop__p{color:var(--ink-70);font-size:var(--t-meta);line-height:1.6;max-width:36ch}
.faqtop__links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  margin-top:clamp(16px,1.8vw,22px)}
@media (max-width:900px){
  .faqtop{grid-template-columns:1fr;gap:clamp(26px,4vw,38px)}
  .faqtop__help{align-self:start}
}
.faqsearch{display:flex;align-items:center;gap:14px;width:100%;box-shadow:inset 0 0 0 1px var(--line);
  height:56px;padding:0 18px;transition:box-shadow .3s}
.faqsearch:focus-within{box-shadow:inset 0 0 0 1px var(--ink)}
.faqsearch svg{width:17px;height:17px;stroke:var(--ink-45);fill:none;stroke-width:1.3;flex:none}
.faqsearch input{flex:1;border:0;background:none;outline:none;font-size:var(--t-body)}
.faqcats{display:flex;gap:8px;flex-wrap:wrap;padding-top:clamp(18px,2vw,26px)}
.faqgroup{padding-bottom:clamp(26px,3vw,44px);scroll-margin-top:calc(var(--bar-h-stuck) + 30px)}
.faqgroup__h{font-family:var(--display);font-weight:300;font-size:var(--d4);
  padding-bottom:12px;letter-spacing:-.012em}
.faqgroup[hidden]{display:none}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,58fr);
  gap:clamp(36px,6.5vw,104px);padding-top:clamp(40px,4.4vw,66px);
  padding-bottom:var(--space-section);align-items:start}
.contact__side{display:grid;gap:clamp(26px,2.6vw,38px);align-content:start}
.contact__block{display:grid;gap:8px}
/* only the first group carries a rule — the rest are held apart by space */
.contact__block--lead{padding-top:16px;border-top:1px solid var(--line)}
.contact__block b{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.contact__block a,.contact__block p{font-size:var(--t-body);color:var(--ink);line-height:1.5}
.contact__block a:hover{color:var(--accent)}
.contact__mail{font-size:clamp(1.125rem,1.2vw,1.375rem);letter-spacing:-.01em}
.contact__rows{display:grid;gap:8px}
.contact__rows li{display:flex;align-items:baseline;gap:14px}
.contact__rows span{font-size:var(--t-meta);color:var(--ink-45);min-width:72px}

.contact__form{display:grid;gap:14px}
.contact__formhead{display:grid;gap:8px;margin-bottom:clamp(8px,1vw,14px)}
.contact__formt{font-family:var(--display);font-weight:300;font-size:var(--d4);line-height:1.1;
  letter-spacing:-.012em}
.contact__formp{color:var(--ink-70);font-size:var(--t-meta);line-height:1.6;max-width:46ch}
.contact__form .field__in{height:60px;padding:24px 16px 8px}
.contact__form .field__in--area{height:176px;padding-top:26px}
.contact__form .field__lb{left:17px;top:20px}
/* the topic picker is a form field here, not a toolbar control */
.contact__form .sel{display:flex;width:100%}
.contact__form .sel select{width:100%;height:60px;padding:0 42px 0 16px;font-size:var(--t-body)}
.contact__form .sel__ico{right:18px}
.contact__send{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(6px,.8vw,12px)}
.contact__send .btn{min-width:200px;justify-content:center}
.contact__send .btn:hover{background:var(--ink-70)}
.contact__promise{font-size:var(--t-label);letter-spacing:.06em;color:var(--ink-45)}
@media (max-width:900px){
  .contact{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .contact__form .field__in--area{height:160px}
}

/* concern page */
.cnc__intro{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,44px);
  padding-block:var(--sec-sm);border-top:1px solid var(--line-soft)}
.cnc__intro h2{grid-column:1/5;font-family:var(--display);font-weight:300;font-size:var(--d3);
  line-height:1.06;letter-spacing:-.015em}
.cnc__intro p{grid-column:6/13;font-size:var(--t-lead);line-height:1.64;color:var(--ink-70);max-width:64ch}
.cnc__routine{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,24px)}
/* a column, so however long the name runs the buy row lands on one line
   across all four cards */
.rstep{display:flex;flex-direction:column;gap:10px}
.rstep__media{border-radius:var(--radius-md);display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ivory)}
.rstep__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--slow)}
.rstep:hover .rstep__media img{transform:scale(1.02)}
.rstep__n{font-size:var(--t-label);letter-spacing:.14em;color:var(--ink-25)}
.rstep__t{font-size:clamp(1rem,.9vw + .8rem,1.1875rem);font-weight:500}

/* the buy row belongs to the card: one hairline separates it from the copy */
.rstep__buy{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  transition:border-color .35s var(--ease);
}
.rstep:hover .rstep__buy{border-top-color:var(--line)}
.rstep__add{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-70);transition:color .3s var(--ease);
}
.rstep:hover .rstep__add{color:var(--ink)}
.rstep__add:hover{color:var(--accent)}
.rstep__add:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rstep__ico{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;
  transition:transform .4s var(--slow)}
.rstep__add:hover .rstep__ico--plus{transform:rotate(90deg)}
.rstep__ico--done{display:none;stroke-width:1.8}
.rstep__add.done{color:#5B7A4F}
.rstep__add.done .rstep__ico--plus{display:none}
.rstep__add.done .rstep__ico--done{display:inline-block}
@media (prefers-reduced-motion:reduce){
  .rstep__media img,.rstep__ico,.rstep__buy{transition:none}
}
@media (max-width:900px){
  .cnc__intro h2,.cnc__intro p{grid-column:1/13}
  .cnc__routine{grid-template-columns:repeat(2,1fr)}
}

/* ingredient page */
.ing__hero{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,44px);align-items:end;
  padding-block:clamp(26px,3.4vw,56px)}
.ing__t{grid-column:1/8;font-family:var(--display);font-weight:300;font-size:var(--d0);
  line-height:.94;letter-spacing:-.028em}
.ing__tag{grid-column:9/13;font-size:var(--t-lead);color:var(--ink-70);padding-bottom:10px}
.ing__fig{border-radius:var(--radius-md);grid-column:1/13;aspect-ratio:16/6;overflow:hidden;background:var(--ivory)}
.ing__fig img{width:100%;height:100%;object-fit:cover}
.ing__cols{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.6vw,52px);padding-block:var(--sec-sm)}
.ing__main{grid-column:1/8;display:grid;gap:clamp(22px,2.6vw,38px)}
.ing__aside{grid-column:9/13;display:grid;gap:18px;align-content:start;position:sticky;
  top:calc(var(--bar-h-stuck) + 24px)}
.ing__block{display:grid;gap:12px}
.ing__block h2{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.ing__block p{font-size:var(--t-lead);line-height:1.62;color:var(--ink-70)}
.ing__list{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.ing__list li{padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:var(--t-meta);
  display:flex;gap:12px;align-items:baseline}
.ing__list li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--accent);flex:none}
.ing__warn{background:var(--clay-wash);padding:clamp(18px,2vw,26px);display:grid;gap:10px}
.ing__warn b{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase}
.ing__warn p{font-size:var(--t-meta);color:var(--ink-70)}
@media (max-width:1000px){
  .ing__t,.ing__tag,.ing__main,.ing__aside{grid-column:1/13}
  .ing__aside{position:static}
}

/* search results page */
.sr__head{display:grid;gap:14px;padding-block:clamp(26px,3.4vw,52px) clamp(18px,2vw,28px)}
.sr__q{font-family:var(--display);font-weight:300;font-size:var(--d1);line-height:1.02;
  letter-spacing:-.02em;text-wrap:balance}
.sr__q em{font-style:italic;color:var(--accent)}
.sr__n{font-size:var(--t-meta);color:var(--ink-45)}
.sr__sug{display:flex;gap:8px;flex-wrap:wrap;padding-top:18px}
.brow{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.brow a{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft);
  transition:padding-left .4s var(--slow)}
.brow a:hover{padding-left:8px}
.brow img{width:52px;height:64px;object-fit:cover;background:var(--ivory)}
.brow b{font-weight:500}
.brow span{font-size:var(--t-meta);color:var(--ink-45)}

/* wishlist */
.wl__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:clamp(14px,1.6vw,22px);border-block:1px solid var(--line-soft)}
.wl__bar p{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.card .card__move{
  position:absolute;left:0;right:0;bottom:0;height:44px;background:rgba(252,250,247,.95);
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--t-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;transform:translateY(100%);
  transition:transform .5s var(--slow),background .3s,color .3s;
}
.card:hover .card__move{transform:none}
.card__move:hover{background:var(--ink);color:var(--milk)}

/* 404 */
.nf{min-height:calc(100svh - var(--bar-h));display:grid;align-items:center;
  grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,44px);padding-block:clamp(40px,6vw,90px)}
.nf__text{grid-column:1/7;display:grid;gap:clamp(14px,2vw,24px);justify-items:start}
.nf__n{font-family:var(--display);font-weight:300;font-size:clamp(5rem,15vw,12rem);line-height:.8;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--ink-25)}
.nf__t{font-family:var(--display);font-weight:300;font-size:var(--d2);line-height:1.04;
  letter-spacing:-.02em;text-wrap:balance}
.nf__p{color:var(--ink-70);max-width:40ch}
.nf__figs{grid-column:8/13;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px)}
.nf__figs figure{border-radius:var(--radius-md);overflow:hidden;background:var(--ivory);aspect-ratio:4/5}
.nf__figs figure:first-child{margin-top:clamp(20px,4vw,60px)}
.nf__figs img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .nf__text{grid-column:1/13}
  .nf__figs{grid-column:1/13;margin-top:30px}
}

.sr__sug--center{justify-content:center}