/* ==========================================================================
   Daallo Milk — public site
   Structure follows the reference layout: a deep branded hero with a photo
   card and floating chips, a stat band, a thin assurance ticker, alternating
   light sections, a dark testimonial grid and a wordmark footer.
   Palette is Daallo's own: deep maroon, brand red, gold, cream.
   ========================================================================== */

:root{
  --brand:#C1121F;                  /* set from Admin → Theme */
  --brand-deep:#8E0D17;
  --gold:#E8A33D;
  --gold-2:#F3C77A;

  --deep:#1C0B0D;                   /* hero / dark sections */
  --deep-2:#28110F;
  --deep-3:#150809;
  --ink:#16100E;
  --ink-2:#4A403B;
  --ink-3:#6F645E;
  --cream:#FFFBF3;
  --sand:#F7EDDD;
  --sand-2:#EFE0C9;
  --line:rgba(22,16,14,.11);
  --line-soft:rgba(22,16,14,.06);
  --line-dark:rgba(255,255,255,.13);


  /* --- Type scale -------------------------------------------------------
     Ten steps on a 1.2-1.25 ratio. Nothing outside this set is used, which is
     what makes the pages read as one designed system rather than a pile of
     one-off values. */
  --fs-3xs:0.6875rem;
  --fs-2xs:0.75rem;
  --fs-xs:0.8125rem;
  --fs-sm:0.9375rem;
  --fs-md:1rem;
  --fs-lg:clamp(1.0625rem,1rem + .28vw,1.1875rem);
  --fs-xl:clamp(1.125rem,1.04rem + .42vw,1.375rem);
  --fs-2xl:clamp(1.75rem,1.3rem + 2.1vw,2.75rem);
  --fs-3xl:clamp(2.25rem,1.55rem + 3.4vw,3.9rem);
  --fs-display:clamp(2.5rem,1.6rem + 4.6vw,4.75rem);

  /* --- Spacing scale ---------------------------------------------------- */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:5.5rem;
  --section-y:clamp(3.25rem,7vw,6rem);
  --section-y-sm:clamp(2.25rem,4.5vw,3.5rem);
  --tap:44px;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;
  --pad:clamp(1.1rem,4vw,2.5rem);
  --maxw:1280px;
  --bar-h:72px;

  --display:'Fraunces',ui-serif,Georgia,serif;
  --sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --sh:0 8px 26px -14px rgba(22,16,14,.28);
  --sh-lg:0 30px 66px -28px rgba(22,16,14,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:var(--fs-md);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:var(--ink)}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.022em;
  margin:0 0 .45em;text-wrap:balance}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-2xl)}
h3{font-family:var(--sans);font-weight:800;font-size:var(--fs-lg);
  letter-spacing:-.01em;line-height:1.35}

.wrap{width:min(100% - 2*var(--pad),var(--maxw));margin-inline:auto}
.wrap--narrow{width:min(100% - 2*var(--pad),880px);margin-inline:auto}
.section{padding-block:var(--section-y);position:relative}
/* No line of body copy runs past a comfortable reading measure, whichever
   layout or theme is active. Headings and short labels are exempt. */
/* No line of body copy runs past a comfortable reading measure. The CSS `ch`
   unit is the width of a zero, which is wider than the average letter, so 52ch
   lands at roughly 70-75 real characters. In narrow cards the cap is inert. */
main p{max-width:52ch}
.head--center p,.promise p,.cta p,.faqcard p,.bl-contact p,.center{margin-inline:auto}
.section--sm{padding-block:var(--section-y-sm)}
.section,.hero,[id]{scroll-margin-top:6rem}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:.6rem;top:-5rem;z-index:300;background:#fff;color:var(--ink);
  padding:.75rem 1.15rem;border-radius:var(--r-sm);font-weight:700;transition:top .18s}
.skip-link:focus{top:.6rem}

.g-cream{background:var(--cream)}
.g-sand{background:var(--sand)}
.g-deep{background:var(--deep);color:#fff}
.g-deep h2,.g-deep h3{color:#fff}

/* --- Editorial helpers ---------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;padding:.36rem .85rem;
  border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;
  font-size:var(--fs-2xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
  font-family:var(--sans)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.eyebrow--light{background:rgba(255,255,255,.08);border-color:var(--line-dark);color:var(--gold)}
.lede{font-size:var(--fs-lg);color:var(--ink-2);max-width:58ch;line-height:1.68}
.g-deep .lede{color:rgba(255,255,255,.72)}
.head{margin-bottom:clamp(2rem,4.5vw,3.25rem);max-width:56ch}
.head--center{text-align:center;margin-inline:auto}
.head--center .lede{margin-inline:auto}
.accent{color:var(--gold)}

/* --- Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.65rem;border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm);
  border:1.5px solid transparent;min-height:50px;
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s}
.btn svg{width:16px;height:16px;flex:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 12px 26px -14px var(--brand)}
.btn--primary:hover{background:var(--brand-deep)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-2)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--deep-2)}
.btn--outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn--outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ghost-light{border-color:rgba(255,255,255,.3);color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.13)}
.btn--wa{background:#1A7D45;color:#fff}
.btn--wa:hover{background:#146637}
.btn--block{width:100%}
.btn--round{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%}

/* ==========================================================================
   HEADER — a normal, solid, full-width bar on every screen size
   ========================================================================== */
.hdr{position:sticky;top:0;z-index:120;
  transition:transform .32s var(--ease)}
/* Theme & site -> Header: let the bar scroll away entirely. */
body[data-hdr="static"] .hdr{position:relative}
/* Theme & site -> Header: tuck it away going down, return it going up. */
.hdr[data-hidden="1"]{transform:translateY(-100%)}
.hdr__bar{
  background:var(--card);border-bottom:1px solid transparent;
  padding:0 var(--pad);min-height:64px;display:flex;align-items:center;
  transition:box-shadow .28s var(--ease),background .28s var(--ease),
             border-color .28s var(--ease),backdrop-filter .28s var(--ease);
}
/* Once the page moves, the bar lifts off it: a hair of translucency, a real
   border and a soft shadow, so content passing underneath stays legible. */
.hdr[data-scrolled="1"] .hdr__bar{
  background:color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(20,14,10,.55)}
@supports not (backdrop-filter:blur(2px)){
  .hdr[data-scrolled="1"] .hdr__bar{background:var(--card)}
}
@media (prefers-reduced-motion:reduce){.hdr{transition:none}}
.hdr__inner{width:min(100%,var(--maxw));margin-inline:auto;display:flex;align-items:center;
  gap:var(--s4);min-height:64px}
.hdr__logo{display:flex;align-items:center;margin-right:auto;flex:none}
.hdr__logo img{height:30px;width:auto}
.hdr__logo .l-light{display:none}
.hdr__logo .l-dark{display:block}
.hdr__nav{display:none}
.hdr__tools{display:flex;align-items:center;gap:var(--s2)}
.hdr__cta{display:none}

.langsw{display:flex;gap:2px;padding:2px;border-radius:var(--r-sm);
  background:var(--sand);border:1px solid var(--line)}
.langsw a{display:grid;place-items:center;min-width:34px;height:30px;padding:0 .5rem;
  border-radius:calc(var(--r-sm) - 2px);font-size:var(--fs-2xs);font-weight:800;
  color:var(--ink-3);transition:background .2s,color .2s}
.langsw a:hover{color:var(--ink)}
.langsw a[aria-current="true"]{background:var(--brand);color:var(--on-brand)}

.burger{width:var(--tap);height:var(--tap);flex:none;display:grid;place-items:center;
  border-radius:var(--r-sm);background:var(--sand);border:1px solid var(--line);color:var(--ink)}
.burger:hover{background:var(--sand-2)}
.burger i{display:block;width:17px;height:2px;background:currentColor;border-radius:2px;
  position:relative;transition:background .25s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:2px;
  background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

/* Mobile menu drops straight out of the bar */
.hdr__panel{position:absolute;left:0;right:0;top:100%;padding:var(--s2) var(--pad) var(--s4);
  background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.hdr__panel[data-open="1"]{opacity:1;visibility:visible;transform:none}
.hdr__panel a{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s2);border-radius:var(--r-sm);color:var(--ink);font-weight:600;
  min-height:var(--tap);border-bottom:1px solid var(--line-soft)}
.hdr__panel a:last-child{border-bottom:0}
.hdr__panel a:hover{background:var(--sand)}
.hdr__panel a[aria-current="page"]{color:var(--brand)}
.hdr__panel a span{opacity:.35;font-size:var(--fs-sm)}

@media (min-width:900px){
  .hdr__bar{min-height:74px}
  .hdr__inner{min-height:74px;gap:var(--s6)}
  .hdr__logo img{height:34px}
  .burger,.hdr__panel{display:none}
  .hdr__nav{display:flex;align-items:center;gap:.15rem;margin-inline:auto}
  .hdr__nav a{padding:.55rem .9rem;border-radius:var(--r-sm);font-weight:600;
    font-size:var(--fs-sm);color:var(--ink-2);position:relative;
    transition:color .2s var(--ease),background .2s var(--ease)}
  .hdr__nav a:hover{color:var(--ink);background:var(--sand)}
  .hdr__nav a[aria-current="page"]{color:var(--ink)}
  /* The marker grows out from the middle on hover and sits full width on the
     page you are actually on. */
  .hdr__nav a::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.2rem;
    height:2px;border-radius:2px;background:var(--brand);
    transform:scaleX(0);transform-origin:50% 50%;
    transition:transform .26s var(--ease)}
  .hdr__nav a:hover::after{transform:scaleX(.55)}
  .hdr__nav a[aria-current="page"]::after{transform:scaleX(1)}
  .hdr__cta{display:inline-flex;align-items:center;gap:.4rem;padding:.62rem 1.25rem;
    border-radius:var(--r-sm);background:var(--brand);color:var(--on-brand);font-weight:700;
    font-size:var(--fs-sm);box-shadow:0 10px 22px -14px var(--brand);
    transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
  .hdr__cta:hover{background:var(--brand-deep);transform:translateY(-1px);
    box-shadow:0 14px 26px -14px var(--brand)}
  .hdr__cta:active{transform:none}
  @media (prefers-reduced-motion:reduce){
    .hdr__nav a::after{transition:none}
    .hdr__cta:hover{transform:none}
  }
}

/* ==========================================================================
   MOBILE BOTTOM BAR — a plain solid bar, flush to the edge
   ========================================================================== */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:130;background:var(--card);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -4px 18px -12px rgba(0,0,0,.28)}
.tabbar__inner{display:flex;align-items:stretch;gap:0;
  width:min(100%,var(--maxw));margin-inline:auto;padding:.3rem var(--s2)}
.tabbar a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.15rem;padding:.4rem .2rem;border-radius:var(--r-sm);
  min-height:56px;color:var(--ink-3);font-size:var(--fs-3xs);font-weight:600;
  transition:color .2s,background .2s}
.tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar a svg{width:22px;height:22px;flex:none}
.tabbar a:hover{color:var(--ink)}
.tabbar a[aria-current="page"]{color:var(--brand)}
/* WhatsApp is a normal button that sits inside the bar like the rest */
.tabbar__wa{flex:0 0 auto!important;flex-direction:row!important;gap:.4rem!important;
  align-self:center;min-height:40px!important;margin-left:.35rem;padding:0 .9rem;
  background:#1A7D45;color:#fff!important;font-size:var(--fs-2xs)!important;font-weight:700;
  border-radius:var(--r-sm)}
.tabbar__wa span{max-width:none!important;overflow:visible!important}
.tabbar__wa svg{width:17px;height:17px}
.tabbar__wa:hover{background:#146637;color:#fff!important}
@media (max-width:359px){
  .tabbar a:not(.tabbar__wa) span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .tabbar a:not(.tabbar__wa) svg{width:24px;height:24px}
}
/* Reserve exactly the bar's height so nothing is ever hidden behind it. */
body[data-tabbar="1"]{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){.tabbar{display:none}body[data-tabbar="1"]{padding-bottom:0}}

/* ==========================================================================
   HERO — deep block, headline left, photo card right, floating chips
   ========================================================================== */
.hero{position:relative;background:
  radial-gradient(90% 70% at 78% 8%, #4A1418 0%, transparent 58%),
  radial-gradient(70% 60% at 8% 92%, #33110F 0%, transparent 60%),
  linear-gradient(168deg,#2A1012 0%,var(--deep) 52%,var(--deep-3) 100%);
  color:#fff;overflow:hidden;
  /* Breathing room under the header. This used to be written against two
     custom properties that were never defined, so the whole declaration was
     invalid and the hero sat hard against the bar. */
  padding-top:clamp(1.9rem,7vw,3.4rem)}
.hero>.wrap{position:relative;z-index:1}
.hero__grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center;
  padding-bottom:clamp(2.5rem,6vw,4rem)}
@media (min-width:1000px){.hero__grid{grid-template-columns:1.02fr .98fr;gap:clamp(2.5rem,4vw,4rem)}}
.hero h1{color:#fff;margin-bottom:.4em}
.hero__lede{max-width:44ch;margin-bottom:2rem;color:rgba(255,255,255,.74)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem}
.hero__actions .btn{flex:1 1 auto;min-width:max-content}
@media (min-width:520px){.hero__actions .btn{flex:0 0 auto}}

/* Photo card with floating chips, mirroring the reference */
.hero__card{position:relative;border-radius:var(--r-2xl);overflow:visible}
.hero__card>img{width:100%;border-radius:var(--r-2xl);object-fit:cover;aspect-ratio:1/1.02;
  box-shadow:var(--sh-lg)}
.chip{position:absolute;display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;
  border-radius:var(--r-pill);background:rgba(255,255,255,.9);color:var(--ink);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 30px -12px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:var(--fs-2xs);font-weight:800;letter-spacing:.01em;white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;display:block}
.chip--a{top:7%;left:-4%}
.chip--b{top:38%;right:-5%}
.chip--c{bottom:9%;left:6%;background:rgba(28,11,13,.82);color:#fff;border-color:var(--line-dark)}
.chip--c i{background:var(--gold)}
.chip--c b{color:var(--gold);font-family:var(--display);font-size:var(--fs-md);line-height:1}
@media (max-width:760px){
  .chip{font-size:var(--fs-3xs);padding:.42rem .7rem}
  .chip--a{top:5%;left:4%}
  .chip--b{top:auto;bottom:26%;right:4%}
  .chip--c{bottom:5%;left:4%}
}

/* Stat band along the foot of the hero */
.statband{border-top:1px solid var(--line-dark);display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.statband{grid-template-columns:repeat(4,1fr)}}
.statband div{padding:clamp(1.25rem,3vw,1.9rem) .4rem;text-align:left}
@media (min-width:820px){.statband div+div{border-left:1px solid var(--line-dark);padding-left:2rem}}
@media (max-width:819px){
  .statband div:nth-child(even){border-left:1px solid var(--line-dark);padding-left:1.25rem}
  .statband div:nth-child(n+3){border-top:1px solid var(--line-dark)}
}
.statband b{display:block;font-family:var(--display);font-weight:600;line-height:1;
  font-size:var(--fs-2xl);color:#fff}
.statband span{display:block;margin-top:.45rem;font-size:var(--fs-3xs);font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}

/* --- Assurance ticker ----------------------------------------------------- */
.ticker{background:var(--deep-3);color:rgba(255,255,255,.82);overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07)}
.ticker__grid{display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.ticker__grid{grid-template-columns:repeat(4,1fr)}}
.ticker__grid div{display:flex;align-items:center;gap:.6rem;padding:1rem .5rem;font-size:var(--fs-xs);
  font-weight:600}
@media (min-width:900px){.ticker__grid div+div{border-left:1px solid rgba(255,255,255,.07);
  padding-left:1.5rem}}
.ticker__grid svg{width:16px;height:16px;color:var(--gold);flex:none}

/* --- About row ------------------------------------------------------------ */
.about{display:grid;gap:clamp(1.75rem,4.5vw,3.5rem);align-items:center}
@media (min-width:900px){
  .about{grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,5vw,4.5rem)}
  .about--flip .about__media{order:2}
}
.about__media{position:relative}
.about__media img{width:100%;border-radius:var(--r-2xl);object-fit:cover;box-shadow:var(--sh-lg)}
.about__body p{color:var(--ink-2)}
.about__body p:last-of-type{margin-bottom:1.6rem}

/* --- Metric pills --------------------------------------------------------- */
.metrics{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.metrics{grid-template-columns:repeat(4,1fr);gap:1rem}}
.metric{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:var(--s5) var(--s4);box-shadow:var(--sh);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:132px}
.metric:hover{transform:translateY(-4px)}
.metric__t{display:flex;align-items:flex-start;gap:.4rem;font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:auto;
  line-height:1.35;padding-bottom:var(--s3)}
.metric__t svg{width:14px;height:14px;color:var(--brand);flex:none;margin-top:1px}
.metric b{font-family:var(--display);font-weight:600;font-size:var(--fs-2xl);
  line-height:1;display:block}

/* --- Nutrition cards ------------------------------------------------------ */
.nutri{background:radial-gradient(80% 90% at 50% 0%,#3A1417 0%,transparent 62%),var(--deep)}
.nutri__grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr);
  list-style:none;padding:0;margin:0}
@media (min-width:700px){.nutri__grid{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media (min-width:1060px){.nutri__grid{grid-template-columns:repeat(6,1fr)}}
.ncard{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.75rem;
  text-align:center;padding:1.5rem .75rem;border-radius:var(--r-lg);min-height:150px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark);
  transition:transform .3s var(--ease),background .25s,border-color .25s}
.ncard:hover{transform:translateY(-5px);background:rgba(255,255,255,.11);border-color:rgba(232,163,61,.4)}
.ncard img{height:30px;width:auto;object-fit:contain}
.ncard span{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.56);line-height:1.4}

/* --- Standard: text + 2x2 features + image -------------------------------- */
.std{display:grid;gap:clamp(1.75rem,4.5vw,3rem);align-items:center}
@media (min-width:960px){.std{grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,4vw,4rem)}}
.std__feats{display:grid;gap:.7rem;grid-template-columns:1fr;margin-top:1.75rem}
@media (min-width:560px){.std__feats{grid-template-columns:repeat(2,1fr)}}
.feat{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:1.15rem;
  box-shadow:var(--sh)}
.feat__ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  margin-bottom:.7rem;background:linear-gradient(150deg,rgba(193,18,31,.1),rgba(232,163,61,.2));
  color:var(--brand)}
.feat__ico svg{width:18px;height:18px}
.feat b{display:block;font-size:var(--fs-sm);margin-bottom:.2rem}
.feat p{margin:0;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.55}
.std__media img{width:100%;border-radius:var(--r-2xl);object-fit:cover;box-shadow:var(--sh-lg)}

/* --- Process -------------------------------------------------------------- */
.steps{display:grid;gap:1rem;counter-reset:st}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:1.1rem}}
.step{position:relative;padding-top:2.25rem}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--brand);
  position:absolute;top:0;left:0}
.step::after{content:"";position:absolute;top:.6rem;left:2.2rem;right:0;height:1px;
  background:var(--line);display:none}
@media (min-width:900px){.step::after{display:block}.step:last-child::after{display:none}}
.step__ico{width:52px;height:52px;border-radius:var(--r);display:grid;place-items:center;
  margin-bottom:1rem;background:#fff;border:1px solid var(--line-soft);box-shadow:var(--sh);
  color:var(--brand)}
.step__ico svg{width:24px;height:24px}
.step h3{margin-bottom:.4rem}
.step p{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}

/* --- Testimonials: dark grid ---------------------------------------------- */
.tgrid{display:grid;gap:.9rem}
@media (min-width:720px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.tcard{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:1.4rem;display:flex;flex-direction:column;transition:background .25s,border-color .25s}
.tcard:hover{background:rgba(255,255,255,.09);border-color:rgba(232,163,61,.35)}
.tcard__stars{display:flex;gap:2px;margin-bottom:.9rem;color:var(--gold)}
.tcard__stars svg{width:14px;height:14px}
.tcard__q{font-size:var(--fs-sm);color:rgba(255,255,255,.86);flex:1;margin:0 0 1.2rem;line-height:1.65}
.tcard__q span{display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;
  overflow:hidden}
.tcard__who{display:flex;align-items:center;gap:.7rem;padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.1)}
.tcard__who img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.tcard__name{font-weight:800;font-size:var(--fs-sm);color:#fff;line-height:1.3}
.tcard__role{font-size:var(--fs-2xs);color:rgba(255,255,255,.5)}

/* --- FAQ: two-column accordion ---------------------------------------------
   Cards showed every answer at once, which made the section a wall of text.
   An accordion keeps the questions scannable and opens one answer at a time. */
.faqwrap{display:grid;gap:.7rem;align-items:start}
@media (min-width:860px){.faqwrap{grid-template-columns:repeat(2,1fr);gap:.7rem 1.1rem}}
.faqi{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--sh);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faqi[open]{border-color:rgba(193,18,31,.3);box-shadow:0 14px 34px -18px rgba(22,16,14,.4)}
.faqi summary{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.25rem;cursor:pointer;
  list-style:none;font-weight:700;font-size:var(--fs-md);line-height:1.4;transition:color .2s}
.faqi summary::-webkit-details-marker{display:none}
.faqi summary:hover{color:var(--brand)}
.faqi__n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(193,18,31,.1),rgba(232,163,61,.22));color:var(--brand);
  font-family:var(--display);font-weight:600;font-size:var(--fs-xs)}
.faqi__q{flex:1;min-width:0}
.faqi__s{flex:none;width:22px;height:22px;position:relative}
.faqi__s::before,.faqi__s::after{content:"";position:absolute;top:50%;left:50%;
  width:12px;height:2px;border-radius:2px;background:var(--brand);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s}
.faqi__s::after{transform:translate(-50%,-50%) rotate(90deg)}
.faqi[open] .faqi__s::after{transform:translate(-50%,-50%) rotate(0);opacity:0}
.faqi__a{padding:0 1.25rem 1.25rem 4.15rem;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.68}
.faqi__a p{margin:0}
@media (max-width:480px){.faqi__a{padding-left:1.25rem}}

/* --- Newsletter ----------------------------------------------------------- */
.news{background:radial-gradient(85% 110% at 20% 0%,#3A1417,transparent 60%),var(--deep);color:#fff}
.news__grid{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.news__grid{grid-template-columns:1.1fr .9fr;gap:3.5rem}}
.news h2{color:#fff;margin-bottom:.3em}
.news h2 em{font-style:normal;color:var(--gold)}
.news p{color:rgba(255,255,255,.7);max-width:48ch;margin-bottom:1.5rem}
.newsform{display:flex;gap:.6rem;flex-wrap:wrap}
.newsform input{flex:1 1 220px;min-width:0;padding:.95rem 1.2rem;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);background:rgba(255,255,255,.09);color:#fff;font:inherit;
  font-size:var(--fs-sm);min-height:50px}
.newsform input::placeholder{color:rgba(255,255,255,.45)}
.newsform input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.14)}
.news__note{font-size:var(--fs-2xs);color:rgba(255,255,255,.45);margin:.9rem 0 0}

/* --- Contact -------------------------------------------------------------- */
.cinfo{display:grid;gap:.85rem}
@media (min-width:640px){.cinfo{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.cinfo{grid-template-columns:repeat(4,1fr)}}
.cinfo__c{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.6vw,1.7rem);box-shadow:var(--sh);transition:transform .3s var(--ease)}
.cinfo__c:hover{transform:translateY(-4px)}
.cinfo__ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:.9rem;background:linear-gradient(150deg,rgba(193,18,31,.1),rgba(232,163,61,.2));
  color:var(--brand)}
.cinfo__ico svg{width:20px;height:20px}
.cinfo__c h3{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);
  margin-bottom:.55rem;font-weight:800}
.cinfo__c a,.cinfo__c p{display:block;font-weight:600;font-size:var(--fs-sm);margin:0 0 .2rem;
  word-break:break-word;transition:color .2s}
.cinfo__c a:hover{color:var(--brand)}

.form{display:grid;gap:.95rem}
@media (min-width:640px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}}
.field{display:grid;gap:.35rem}
.field label{font-weight:700;font-size:var(--fs-xs)}
.field label i{font-style:normal;font-weight:500;color:var(--ink-3)}
.field .req{color:var(--brand)}
.field input,.field textarea{width:100%;padding:.9rem 1.1rem;border-radius:var(--r-sm);font:inherit;
  font-size:var(--fs-md);background:var(--cream);border:1.5px solid var(--line);color:var(--ink);min-height:52px;
  transition:border-color .2s,box-shadow .2s,background .2s}
.field textarea{min-height:145px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 4px rgba(193,18,31,.1)}
.field__err{color:var(--brand);font-size:var(--fs-xs);font-weight:600}
.formcard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-2xl);
  padding:clamp(1.4rem,4vw,2.4rem);box-shadow:var(--sh)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:.95rem 1.15rem;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-sm);
  margin-bottom:1.2rem}
.alert--ok{background:#E7F6F0;color:#12805C;border:1px solid #A7E0CB}
.alert--err{background:#FDECEA;color:var(--brand-deep);border:1px solid #F3B9B3}
.map{border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--line-soft);box-shadow:var(--sh)}
.map iframe{display:block;width:100%;height:clamp(280px,40vw,420px);border:0}

/* --- Promise / rich text -------------------------------------------------- */
.promise{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-2xl);
  padding:clamp(1.9rem,5vw,3.5rem);text-align:center;box-shadow:var(--sh)}
.promise p{max-width:62ch;margin-inline:auto;color:var(--ink-2)}
.promise p:last-child{margin-bottom:0}

/* --- CTA ------------------------------------------------------------------ */
.cta{border-radius:var(--r-2xl);padding:clamp(2.1rem,6vw,4rem);text-align:center;color:#fff;
  position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(80% 110% at 50% 0%,#4A181C,transparent 60%),var(--deep)}
.cta::before{content:"";position:absolute;width:min(80%,440px);aspect-ratio:1;border-radius:50%;
  top:-40%;left:50%;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(circle,rgba(232,163,61,.36),transparent 66%);filter:blur(46px)}
.cta h2{color:#fff;margin-bottom:.45em}
.cta p{color:rgba(255,255,255,.75);max-width:50ch;margin:0 auto 1.9rem}
.cta__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* --- Footer with wordmark watermark --------------------------------------- */
.ftr{position:relative;background:var(--deep-3);color:rgba(255,255,255,.66);
  padding-top:clamp(3rem,6vw,4.5rem);font-size:var(--fs-sm);overflow:hidden}
/* A hairline of brand colour where the page meets the footer, and a soft glow
   in the corner so the block has some depth rather than reading as a slab. */
.ftr::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand) 22%,var(--gold) 68%,transparent)}
.ftr::after{content:"";position:absolute;inset:auto auto -35% -12%;width:60%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 66%)}
.ftr>.wrap{position:relative;z-index:1}
.ftr__grid{display:grid;gap:2rem}
@media (min-width:820px){.ftr__grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:2.5rem}}
.ftr h3{color:#fff;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.14em;margin:0 0 1rem;
  font-weight:800;font-family:var(--sans)}
.ftr a{color:rgba(255,255,255,.68);transition:color .2s var(--ease)}
.ftr a:hover{color:var(--gold)}
/* Links slide a touch on hover — enough to feel responsive, not enough to jump. */
.ftr__list a{transition:color .2s var(--ease),transform .2s var(--ease)}
.ftr__list a:hover{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.ftr__list a:hover{transform:none}}
.ftr__logo img{height:38px;width:auto;margin-bottom:1rem}
.ftr__list{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.ftr__list a,.ftr__list li{display:flex;align-items:center;min-height:var(--tap);line-height:1.4}
@media (min-width:820px){
  .ftr__list{gap:.5rem}
  .ftr__list a,.ftr__list li{min-height:0}
}
.ftr__social{display:flex;gap:.5rem;margin-top:1.1rem}
.ftr__social a{width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;
  transition:background .2s,transform .2s}
.ftr__social a:hover{background:var(--brand);transform:translateY(-2px)}
.ftr__social svg{width:16px;height:16px}
.ftr__bar{margin-top:clamp(2rem,4vw,2.75rem);padding-block:1.3rem;
  border-top:1px solid rgba(255,255,255,.09);display:flex;flex-wrap:wrap;gap:.6rem;
  justify-content:space-between;font-size:var(--fs-xs);color:rgba(255,255,255,.56)}
.ftr__mark{font-family:var(--display);font-weight:600;text-align:center;line-height:.8;
  font-size:clamp(2.4rem,13.5vw,10rem);letter-spacing:-.03em;color:rgba(255,255,255,.055);
  margin:0;padding:0 var(--pad) .1em;user-select:none;white-space:nowrap;
  overflow:hidden;text-overflow:clip;max-width:100%}

/* --- Reveal --------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.06s}.rv-2{transition-delay:.12s}.rv-3{transition-delay:.18s}
.rv-4{transition-delay:.24s}.rv-5{transition-delay:.3s}

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

/* ==========================================================================
   MOBILE RAILS

   On a phone, a group of cards reads far better as one row you swipe than as
   a long column you scroll past. Each group below keeps its desktop grid and
   becomes a snapping rail under 720px.

   Cards are sized so the next one peeks in from the right — that overhang is
   the only affordance people need to know a row scrolls. The rail bleeds to
   both screen edges with a negative margin, then pads itself back in, so the
   first card still lines up with the text above it.
   ========================================================================== */
@media (max-width:719px){
  .metrics,
  .nutri__grid,
  .steps,
  .std__feats,
  .faqwrap,
  .statband{
    display:grid;
    grid-auto-flow:column;
    grid-template-columns:none;
    /* A plain width, not minmax(0,…): with a zero minimum the browser is free
       to squeeze every card in to avoid overflowing, and the row then never
       scrolls at all. */
    grid-auto-columns:78%;
    gap:.7rem;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scroll-padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    padding-bottom:.45rem;
    scrollbar-width:none;
  }
  .metrics::-webkit-scrollbar,
  .nutri__grid::-webkit-scrollbar,
  .steps::-webkit-scrollbar,
  .std__feats::-webkit-scrollbar,
  .faqwrap::-webkit-scrollbar,
  .statband::-webkit-scrollbar{display:none}

  .metrics>*,.nutri__grid>*,.steps>*,.std__feats>*,
  .faqwrap>*,.statband>*{
    scroll-snap-align:start;
    height:100%;
    min-width:0;
  }

  /* Grid and flex items are min-width:auto by default, so they refuse to
     shrink below their contents. A rail sitting inside one makes its parent as
     wide as the whole row of cards, which then drags the section's heading and
     body copy off the side of the screen. Letting these shrink is what keeps
     the text where it belongs. */
  .metrics,.nutri__grid,.steps,.std__feats,.faqwrap,.statband,
  .std,.std>*,.hero__grid,.hero__grid>*,.wrap,.wrap--narrow{min-width:0}

  /* The stat band drew its dividers with nth-child rules written for a 2x2
     grid; in one row those land in the wrong places, so each figure becomes
     a self-contained card instead. */
  .statband{border-top:0;padding-top:.25rem}
  .statband div,
  .statband div:nth-child(even),
  .statband div:nth-child(n+3){
    border:1px solid var(--line-dark);border-radius:var(--r-lg);
    background:rgba(255,255,255,.04);
    padding:1.05rem 1rem;}

  /* Short cards fit two to a screen; wordy ones get the width to themselves. */
  .metrics,.nutri__grid,.statband{grid-auto-columns:44%}
  .steps,.std__feats{grid-auto-columns:72%}
  .faqwrap{grid-auto-columns:82%}

  /* Reveal-on-scroll watches the vertical axis, so cards waiting off to the
     right would otherwise never fade in. Inside a rail they start visible. */
  .metrics .rv,.nutri__grid .rv,.steps .rv,.std__feats .rv,
  .faqwrap .rv,.certgrid .rv,.specgrid .rv,.statband .rv{opacity:1;transform:none}

  /* A rail of dropdowns would mean tapping every card to read it, so on a
     phone the questions are simply open and the toggle chevron goes away.
     The number then sits on its own line above the question, which puts the
     number, the question and the answer all on the same left edge — indenting
     the question past the badge and starting the answer at the card edge is
     what made these cards look broken. */
  .faqi{height:100%;display:flex;flex-direction:column}
  /* Two mechanisms, because browsers disagree on how a closed <details> hides
     its content: older ones use display:none on the children, current Chrome
     uses content-visibility on a ::details-content box that display cannot
     reach. site.js also sets the open attribute outright, which is what makes
     this reliable — these two are the no-JS fallback. */
  .faqi:not([open])>*:not(summary){display:block}
  .faqi::details-content{content-visibility:visible;block-size:auto;overflow:visible}
  .faqi summary{display:block;cursor:default;padding:1.15rem 1.15rem .55rem}
  .faqi__s{display:none}
  .faqi__n{display:inline-grid;margin-bottom:.7rem}
  .faqi__q{display:block;font-size:var(--fs-sm);line-height:1.4}
  .faqi__a{padding:0 1.15rem 1.15rem;flex:1}
  .faqi__a p{
    display:-webkit-box;-webkit-line-clamp:8;line-clamp:8;-webkit-box-orient:vertical;
    overflow:hidden}

  /* One long description would otherwise set the height of every card in the
     row and leave the short ones half empty. */
  .feat p{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;
    -webkit-box-orient:vertical;overflow:hidden}
  .step p{display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;
    -webkit-box-orient:vertical;overflow:hidden}
}

/* ==========================================================================
   Product verification page (/verify)

   Every block is a normal section row, so the owner can reorder or hide them.
   They all paint the same flat dark ground, which lets consecutive blocks meet
   without a visible seam whatever order they end up in.
   ========================================================================== */
/* The dark ground and its glow are painted once, across the whole page, so the
   blocks can be reordered without a seam ever appearing between two of them. */
body[data-page="verify"]{background:var(--deep-3)}
/* Confined to a band at the very top, so further down the ground is exactly
   --deep-3 and the photograph's scrim melts into it precisely. */
body[data-page="verify"] #main{
  background-image:radial-gradient(70% 100% at 76% 0%,var(--deep-2) 0%,transparent 62%),
                   radial-gradient(58% 100% at 2% 30%,rgba(255,255,255,.055) 0%,transparent 64%);
  background-size:100% 400px,100% 320px;
  background-position:top center,top center;
  background-repeat:no-repeat,no-repeat}
/* flow-root: blocks inside keep their own margins instead of letting them
   collapse out through the section and open a gap of page background. */
.vfsec{position:relative;display:flow-root;color:#fff}
.vfsec>.wrap{position:relative;z-index:1}
.vfsec--top{padding-top:clamp(1.9rem,7vw,3.4rem)}
.vfsec--end{padding-bottom:clamp(3rem,7vw,5rem)}
.vf{max-width:660px;margin-inline:auto;text-align:center}

.vfcrumb{margin-bottom:1.4rem}
.vfcrumb ol{list-style:none;display:flex;gap:.5rem;padding:0;margin:0;justify-content:center;
  font-size:var(--fs-2xs);color:rgba(255,255,255,.4)}
.vfcrumb a{color:rgba(255,255,255,.6);transition:color .2s}
.vfcrumb a:hover{color:var(--gold)}
.vfcrumb [aria-current]{color:var(--gold);font-weight:700}
.vf__title{font-size:var(--fs-2xl);color:#fff;margin:0 0 .45rem;letter-spacing:-.01em}
.vf__lede{color:rgba(255,255,255,.7);max-width:48ch;margin:0 auto;line-height:1.7}

/* --- The photograph, fading into the page so the seal can sit over it ----- */
.vfshot{position:relative;margin:1.9rem 0 0;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--line-dark);box-shadow:0 32px 72px -34px rgba(0,0,0,.9)}
.vfshot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.vfshot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 32%,rgba(0,0,0,.3) 68%,var(--deep-3) 99%)}

/* --- The verdict ---------------------------------------------------------- */
.vfstate{position:relative;padding-bottom:clamp(2rem,5vw,3rem)}
.vfstate[data-over="1"]{margin-top:clamp(-78px,-9vw,-58px)}
.vfstate:not([data-over="1"]){padding-top:clamp(2rem,5vw,3rem)}
.vfstate[data-tone="ok"],.vfseal[data-tone="ok"]{
  --vf-hi:#34D399;--vf-lo:#059669;--vf-glow:rgba(16,185,129,.4);--vf-shadow:rgba(5,150,105,.5)}
.vfstate[data-tone="warn"],.vfseal[data-tone="warn"]{
  --vf-hi:#FBBF24;--vf-lo:#D97706;--vf-glow:rgba(245,158,11,.36);--vf-shadow:rgba(217,119,6,.5)}
.vfstate[data-tone="bad"],.vfseal[data-tone="bad"]{
  --vf-hi:#FB7185;--vf-lo:#E11D48;--vf-glow:rgba(244,63,94,.32);--vf-shadow:rgba(225,29,72,.5)}
/* No code in the link is not a failure — it is simply someone who has not
   scanned yet, so it wears the brand gold and reads as an invitation. */
.vfstate[data-tone="neutral"],.vfseal[data-tone="neutral"]{
  --vf-hi:var(--gold-2);--vf-lo:var(--gold);
  --vf-glow:rgba(232,163,61,.30);--vf-shadow:rgba(184,134,11,.45)}

.vfseal{position:relative;display:grid;place-items:center;
  width:clamp(146px,38vw,196px);aspect-ratio:1;margin:0 auto 1.3rem}
.vfseal__svg{position:relative;z-index:2;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 20px 38px var(--vf-shadow));
  animation:vfpop .8s cubic-bezier(.2,1.3,.36,1) both}
.vfseal__s1{stop-color:var(--vf-hi)}
.vfseal__s2{stop-color:var(--vf-lo)}
.vfseal__ring{stroke:rgba(255,255,255,.4);stroke-width:2.5;animation:vffade .7s .3s both}
.vfseal__mark{fill:none;stroke:#fff;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:260;stroke-dashoffset:260;
  animation:vfdraw .75s .32s cubic-bezier(.6,0,.28,1) forwards}
.vfseal__mark--o{stroke-width:8}
.vfseal__mark--dot,.vfseal__mark--thin{stroke-dasharray:none;stroke-dashoffset:0;
  animation:vffade .5s .7s both}
.vfseal__mark--dot{stroke-width:15}
.vfseal__mark--thin{stroke-width:7;opacity:.6}
.vfseal__glow{position:absolute;inset:-26%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,var(--vf-glow) 0%,transparent 68%);
  animation:vfbreathe 4.5s ease-in-out infinite}
.vfseal__ping{position:absolute;inset:5%;border-radius:50%;z-index:1;opacity:0;
  border:2px solid var(--vf-hi);animation:vfping 3.4s cubic-bezier(.2,.6,.3,1) infinite}
.vfseal__ping--b{animation-delay:1.7s}

@keyframes vfpop{from{opacity:0;transform:scale(.5) rotate(-16deg)}to{opacity:1;transform:none}}
@keyframes vfdraw{to{stroke-dashoffset:0}}
@keyframes vffade{from{opacity:0}to{opacity:1}}
@keyframes vfbreathe{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes vfping{0%{opacity:.5;transform:scale(1)}72%,100%{opacity:0;transform:scale(1.45)}}

.vfchips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 1rem}
.vfchip{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .9rem;
  border-radius:var(--r-pill);font-family:var(--sans);font-size:var(--fs-2xs);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;border:1px solid}
.vfchip--ok{background:rgba(16,185,129,.16);color:#6EE7B7;border-color:rgba(16,185,129,.45)}
.vfchip--warn{background:rgba(245,158,11,.16);color:#FCD34D;border-color:rgba(245,158,11,.45)}
.vfchip--bad{background:rgba(244,63,94,.16);color:#FDA4AF;border-color:rgba(244,63,94,.45)}
.vfchip--neutral{background:rgba(232,163,61,.15);color:var(--gold-2);
  border-color:rgba(232,163,61,.45)}

.vfstate__eyebrow{font-family:var(--sans);font-size:var(--fs-2xs);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .5rem}
/* Centred text only reads well on a short measure, so the headline and the
   paragraph are both held to a narrow column rather than the full container. */
.vfstate__t{font-size:clamp(1.45rem,1.05rem + 1.75vw,2.2rem);color:#fff;
  max-width:22ch;margin:0 auto .85rem;line-height:1.22;letter-spacing:-.015em;
  text-wrap:balance}
.vfstate__b{font-size:var(--fs-sm);color:rgba(255,255,255,.66);max-width:38ch;
  margin:0 auto;line-height:1.8;text-wrap:pretty}
.vfstate__b--own{margin-top:.85rem;color:rgba(255,255,255,.5)}
.vfstamp{display:inline-flex;align-items:center;gap:.45rem;margin:1.4rem 0 0;
  font-size:var(--fs-2xs);letter-spacing:.02em;color:rgba(255,255,255,.42)}
.vfstamp svg{color:var(--vf-hi);flex:none}
/* Staff-only banner, so a demo screenshot can never pass for a real result. */
/* Staff preview marker. Pinned out of the layout so a test screenshot shows the
   page exactly as a customer would see it, but never anonymously — it is only
   ever rendered for someone signed in to the dashboard. */
.vfpreview{position:fixed;left:50%;transform:translateX(-50%);
  top:calc(env(safe-area-inset-top,0px) + .55rem);z-index:200;
  display:inline-flex;align-items:center;gap:.45rem;margin:0;max-width:calc(100vw - 1.5rem);
  padding:.4rem .8rem;border-radius:var(--r-pill);font-family:var(--sans);
  font-size:var(--fs-2xs);font-weight:700;line-height:1.35;text-align:start;
  background:rgba(20,16,14,.9);border:1px dashed rgba(255,255,255,.45);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.7)}
.vfpreview svg{flex:none;color:var(--gold)}
.vfpreview b{font-weight:800;color:var(--gold-2)}
.vfpreview .vfpreview__long{display:none}
@media (min-width:760px){.vfpreview .vfpreview__long{display:inline}}
.vfpreview--live{background:rgba(245,158,11,.94);border-style:solid;
  border-color:rgba(120,70,10,.5);color:#231604}
.vfpreview--live svg{color:#231604}
.vfnote{display:flex;align-items:flex-start;gap:.6rem;text-align:start;margin:1.5rem auto 0;
  max-width:52ch;padding:.9rem 1.1rem;border-radius:var(--r);font-size:var(--fs-sm);line-height:1.6;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.38);color:#FCD34D}
.vfnote svg{flex:none;margin-top:.15rem}

/* Typing the serial in by hand: submits to /verify?qr=…, which is looked up
   against ScanTrust exactly like a scan. */
.vfform{margin:1.75rem auto 0;max-width:26rem;text-align:start}
.vfform label{display:block;font-family:var(--sans);font-size:var(--fs-2xs);font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.6rem}
.vfform__row{display:flex;flex-wrap:wrap;gap:.5rem}
.vfform input{flex:1 1 11rem;min-width:0;min-height:48px;padding:.7rem 1rem;
  border-radius:var(--r);border:1px solid var(--line-dark);background:rgba(255,255,255,.07);
  color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-sm);
  letter-spacing:.04em}
.vfform input::placeholder{color:rgba(255,255,255,.35);letter-spacing:0}
.vfform input:focus{outline:2px solid var(--gold);outline-offset:1px;
  background:rgba(255,255,255,.11)}
.vfform .btn{flex:0 0 auto;min-height:48px}
.vfform__hint{display:block;margin-top:.6rem;font-size:var(--fs-xs);color:rgba(255,255,255,.45)}

/* --- Detail / help cards --------------------------------------------------- */
.vfcard{position:relative;text-align:start;background:rgba(255,255,255,.055);
  border:1px solid var(--line-dark);border-radius:var(--r-xl);
  padding:clamp(1.25rem,3vw,1.9rem);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 22px 50px -34px rgba(0,0,0,.8)}
/* A thin lit edge along the top, so the card reads as raised rather than as a
   flat rectangle cut out of the background. */
.vfcard::before{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.vfsec>.wrap>.vf>.vfcard{margin-bottom:clamp(1rem,3vw,1.5rem)}
.vfcard__h{font-family:var(--sans);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.52);margin:0 0 1.1rem}
.vfcard__lede{color:rgba(255,255,255,.68);font-size:var(--fs-sm);margin:-.5rem 0 1.1rem;line-height:1.7}
.vfcard__list{margin:0;display:grid;gap:0}
.vfcard__list>div{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;
  align-items:baseline;padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .2s var(--ease)}
.vfcard__list>div:last-child{border-bottom:0;padding-bottom:0}
/* Wide enough to lose your place across, so each row lights up under the
   pointer and the label/value pair stays visually tied together. */
@media (hover:hover){
  .vfcard__list>div:hover{background:rgba(255,255,255,.035);
    box-shadow:0 0 0 .6rem rgba(255,255,255,.035);border-radius:2px}
}
.vfcard__list dt{color:rgba(255,255,255,.58);font-size:var(--fs-xs);margin:0}
.vfcard__list dd{margin:0;color:#fff;font-weight:700;font-size:var(--fs-sm);text-align:end;
  word-break:break-word}
.vfcard__list dd.mono,.vfcard__code .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-sm);letter-spacing:.02em;color:var(--gold-2)}
.vfcard__code{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:var(--fs-xs);color:rgba(255,255,255,.45)}
.vfcard--help{background:rgba(244,63,94,.07);border-color:rgba(244,63,94,.26)}
.vfcontact{display:grid;gap:.6rem}
.vfcontact a{display:flex;align-items:center;gap:.65rem;color:#fff;font-weight:600;
  font-size:var(--fs-sm);padding:.8rem 1rem;border-radius:var(--r);background:rgba(255,255,255,.07);
  border:1px solid var(--line-dark);transition:background .2s,border-color .2s}
.vfcontact a:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26)}
.vfcontact svg{color:var(--gold);flex:none}
.vfacts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

@media (prefers-reduced-motion:reduce){
  .vfseal__svg,.vfseal__glow{animation:none;opacity:1;transform:none}
  .vfseal__ping{display:none}
  .vfseal__mark,.vfseal__ring{animation:none;opacity:1;stroke-dashoffset:0}
}