/* =========================================================================
   SEQUENCE · Shared stylesheet for compound & protocol reference pages
   ========================================================================= */

:root{
  --ground:#2A1A14;--shadow:#1C110C;--mid:#3E2A22;--cream:#F1E8DC;--oat:#E8DCC8;--hairline:#D4C4A8;--white-pill:#FAF7F0;
  --on-dark:#F1E8DC;--on-dark-muted:#B09884;--on-dark-soft:#8A7A60;--on-cream:#2A1A14;--on-cream-2:#7A5A48;--on-cream-3:#B09884;
  --repair:#742406;--regenerate:#797559;--revive:#d8cbb0;--resolve:#f1e8dc;--regain:#d48057;--restore:#291a14;
  --utility:#8A7A60;
  --ok:#8FA87A;--no:#C07A6A;
  --display:"Neue Haas Grotesk Display","Söhne","Inter",system-ui,sans-serif;
  --serif:"Instrument Serif","GT Super Text","Tiempos",serif;
  --body:"DM Sans","Söhne Buch",system-ui,sans-serif;
  --max:1160px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ground);color:var(--on-dark);font-family:var(--body);font-weight:400;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.eyebrow{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:400;color:var(--on-dark-muted)}
.eyebrow-cream{color:var(--on-cream-3)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sec-dark{background:var(--ground);color:var(--on-dark)}
.sec-cream{background:var(--cream);color:var(--on-cream)}
.sec-oat{background:var(--oat);color:var(--on-cream)}

/* ---------- PILLS ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid transparent;white-space:nowrap;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;transition:all .25s ease}
.pill-ghost-dark{border-color:var(--mid);color:var(--on-dark)}
.pill-ghost-dark:hover{background:rgba(241,232,220,0.08)}
.pill-ghost-cream{border-color:var(--hairline);color:var(--on-cream)}
.pill-filled-cream{background:var(--white-pill);color:var(--on-cream);border-color:var(--white-pill)}
.pill-filled-dark{background:var(--ground);color:var(--cream);border-color:var(--ground)}
.pill-tag{padding:6px 12px;font-size:10px;letter-spacing:0.12em;border:1px solid var(--hairline);color:var(--on-cream-2);background:transparent}
.pill-tag-dark{padding:6px 12px;font-size:10px;letter-spacing:0.12em;border:1px solid var(--mid);color:var(--on-dark-muted)}

/* ---------- NAV ---------- */
.nav-wrap{position:absolute;top:18px;left:0;right:0;display:flex;justify-content:center;z-index:20}
.nav{display:flex;align-items:center;gap:28px;padding:10px 18px;border-radius:999px;border:1px solid var(--mid);background:rgba(28,17,12,0.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav .brand{display:flex;align-items:center;gap:10px;padding-right:16px;border-right:1px solid var(--mid)}
.nav .brand-word{font-family:var(--display);font-size:13px;letter-spacing:0.18em;text-transform:uppercase}
.nav .links{display:flex;gap:22px;font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark-muted)}
.nav .links a:hover,.nav .links a.active{color:var(--on-dark)}
.nav .tail{padding-left:16px;border-left:1px solid var(--mid);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark-muted)}
@media (max-width:768px){.nav .links,.nav .tail{display:none}.nav{gap:12px}.nav .brand{border-right:0;padding-right:0}}

/* ---------- HERO ---------- */
.hero{position:relative;padding:160px 24px 64px;overflow:hidden}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo.repair{background:radial-gradient(70% 60% at 50% 45%,#8A4028 0%,#5A2A18 50%,#2A1A14 100%)}
.hero-photo.regenerate{background:radial-gradient(70% 60% at 50% 45%,#9B9470 0%,#6A6848 50%,#2A1A14 100%)}
.hero-photo.revive{background:radial-gradient(70% 60% at 50% 45%,#E8DCC0 0%,#B0A588 45%,#3E2A22 100%)}
.hero-photo.resolve{background:radial-gradient(70% 60% at 50% 45%,#F5ECD8 0%,#C9B89A 45%,#3E2A22 100%)}
.hero-photo.regain{background:radial-gradient(70% 60% at 50% 45%,#E09670 0%,#A85A3A 50%,#2A1A14 100%)}
.hero-photo.restore{background:radial-gradient(70% 60% at 50% 45%,#5A3F2E 0%,#3E2A22 50%,#1C110C 100%)}
.hero-photo.utility{background:radial-gradient(70% 60% at 50% 45%,#A89878 0%,#6A5A48 50%,#2A1A14 100%)}
.hero-photo::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='13'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.1 0 0 0 0 0.06 0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.7;mix-blend-mode:overlay}
.hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,26,20,0.45) 0%,rgba(42,26,20,0.15) 40%,rgba(42,26,20,0.65) 100%)}
.hero-inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto}

.breadcrumb{display:flex;gap:10px;align-items:center;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:32px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--on-dark)}
.breadcrumb .sep{color:var(--on-dark-soft)}

.category-tag{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(241,232,220,0.05);border:1px solid var(--mid);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark);margin-bottom:24px}
.category-tag .dot{width:10px;height:10px;border-radius:999px;border:1px solid var(--hairline);flex:none}
.category-tag .dot.repair{background:var(--repair)}
.category-tag .dot.regenerate{background:var(--regenerate)}
.category-tag .dot.revive{background:var(--revive)}
.category-tag .dot.resolve{background:var(--resolve)}
.category-tag .dot.regain{background:var(--regain);border-color:var(--regain)}
.category-tag .dot.restore{background:var(--restore)}
.category-tag .dot.utility{background:var(--utility);border-color:var(--utility)}

.hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.035em;line-height:.92;font-size:clamp(52px,10vw,128px);margin-bottom:16px}
.hero .serif-sub{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,30px);line-height:1.2;color:var(--on-dark);margin-bottom:32px;max-width:640px}

/* Price + CTA block under hero serif sub */
.price-block{display:flex;align-items:center;gap:20px;margin-bottom:48px;flex-wrap:wrap}
.price-block .price{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,44px);color:var(--on-dark);letter-spacing:-0.02em;line-height:1}
.price-block .strength{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark-muted);padding-left:20px;border-left:1px solid var(--mid)}
.price-block .stock{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark-muted)}
.price-block .stock::before{content:"";display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--ok);margin-right:8px;vertical-align:middle}
.price-block .pill{margin-left:auto}
@media (max-width:720px){
  .price-block{gap:14px}
  .price-block .strength{padding-left:0;border-left:0}
  .price-block .pill{margin-left:0;width:100%;justify-content:center}
}

/* Reconstitution hint pill (e.g., "Needs AA water") */
.recon-hint{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--mid);background:rgba(241,232,220,0.04);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:18px}
.recon-hint .dot{width:6px;height:6px;border-radius:999px;background:var(--regain)}
.recon-hint a{color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--mid);text-underline-offset:3px}

/* ---------- FACTS ROW ---------- */
.facts{margin-top:32px;border:1px solid var(--mid);border-radius:20px;background:rgba(28,17,12,0.5);backdrop-filter:blur(10px);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.facts .f{padding:22px 24px;border-right:1px solid var(--mid)}
.facts .f:last-child{border-right:0}
.facts .f .label{display:block;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:8px}
.facts .f .val{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--on-dark);line-height:1}
.facts .f .unit{font-family:var(--body);font-size:11px;color:var(--on-dark-muted);letter-spacing:0.04em;text-transform:none;margin-left:6px}
@media (max-width:720px){.facts{grid-template-columns:repeat(2,1fr)}.facts .f{border-right:0;border-bottom:1px solid var(--mid)}.facts .f:nth-child(2n){border-right:0}}

/* ---------- TWO-COLUMN ---------- */
.two-col{padding:96px 24px}
.two-col .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.two-col h3{font-family:var(--display);text-transform:uppercase;font-size:14px;letter-spacing:0.14em;color:var(--on-dark);margin-bottom:16px;font-weight:400}
.two-col .lede{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,28px);line-height:1.22;color:var(--on-dark);margin-bottom:20px}
.two-col p{font-size:15px;line-height:1.65;color:var(--on-dark-muted);margin-bottom:14px}
.two-col p strong{color:var(--on-dark);font-weight:400}
@media (max-width:900px){.two-col .inner{grid-template-columns:1fr;gap:40px}}

/* ---------- STACK GRID (protocol pages) ---------- */
.stack{padding:64px 24px 96px}
.stack .section-head{max-width:var(--max);margin:0 auto 40px}
.stack .section-head .eyebrow{display:block;margin-bottom:16px}
.stack .section-head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(32px,4vw,48px);line-height:1.02}
.stack .section-head .desc{font-size:14px;color:var(--on-dark-muted);max-width:640px;margin-top:14px;line-height:1.6}
.stack-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stack-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.stack-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.stack-card{border:1px solid var(--mid);border-radius:20px;padding:24px;background:rgba(62,42,34,0.22);min-height:220px;display:flex;flex-direction:column;gap:14px}
.stack-card .stripe{width:28px;height:28px;border-radius:999px;border:1px solid var(--mid);flex:none}
.stack-card h4{font-family:var(--display);text-transform:uppercase;font-size:17px;letter-spacing:-0.005em;color:var(--on-dark);line-height:1.1}
.stack-card .role{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--on-dark-muted);line-height:1.4}
.stack-card .dose{margin-top:auto;padding-top:14px;border-top:1px solid var(--mid);font-family:var(--display);text-transform:uppercase;font-size:10.5px;letter-spacing:0.14em;color:var(--on-dark);font-variant-numeric:tabular-nums}
@media (max-width:900px){.stack-grid,.stack-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stack-grid,.stack-grid.cols-3,.stack-grid.cols-2{grid-template-columns:1fr}}

/* ---------- BENEFITS ---------- */
.benefits{padding:48px 24px 96px}
.benefits .section-head{max-width:var(--max);margin:0 auto 40px}
.benefits .section-head .eyebrow{display:block;margin-bottom:16px}
.benefits .section-head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(32px,4vw,48px);line-height:1.02}
.benefits .grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.benefits .grid.cols-6{grid-template-columns:repeat(6,1fr)}
.benefit{border:1px solid var(--mid);border-radius:16px;padding:24px;background:rgba(62,42,34,0.2);min-height:160px;display:flex;flex-direction:column;justify-content:space-between}
.benefit .num{font-family:var(--display);font-size:11px;letter-spacing:0.18em;color:var(--on-dark-soft);text-transform:uppercase}
.benefit h4{font-family:var(--display);text-transform:uppercase;font-size:15px;letter-spacing:-0.005em;color:var(--on-dark);line-height:1.15;margin-top:12px}
@media (max-width:900px){.benefits .grid,.benefits .grid.cols-6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.benefits .grid,.benefits .grid.cols-6{grid-template-columns:1fr}}

/* ---------- TIMELINE ---------- */
.timeline{padding:96px 24px;border-top:1px solid var(--hairline)}
.timeline .section-head{max-width:var(--max);margin:0 auto 48px}
.timeline .section-head .eyebrow{display:block;margin-bottom:16px;color:var(--on-cream-3)}
.timeline .section-head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(32px,4vw,48px);line-height:1.02;color:var(--on-cream)}
.tl-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.tl-cell{padding:32px 24px;border-right:1px solid var(--hairline)}
.tl-cell:last-child{border-right:0}
.tl-cell .tag{display:inline-block;font-family:var(--display);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--on-cream-3);margin-bottom:14px}
.tl-cell .num{font-family:var(--display);font-weight:400;font-size:36px;letter-spacing:-0.02em;color:var(--on-cream);line-height:1;margin-bottom:14px}
.tl-cell .body{font-size:13px;line-height:1.55;color:var(--on-cream-2)}
@media (max-width:900px){.tl-grid{grid-template-columns:1fr 1fr}.tl-cell:nth-child(2n){border-right:0}.tl-cell{border-bottom:1px solid var(--hairline)}.tl-cell:nth-last-child(-n+2){border-bottom:0}}

/* ---------- DOSING ---------- */
.dosing{padding:96px 24px}
.dosing .section-head{max-width:var(--max);margin:0 auto 40px}
.dosing .section-head .eyebrow{display:block;margin-bottom:16px}
.dosing .section-head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(32px,4vw,48px);line-height:1.02}
.dose-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dose-grid.cols-1{grid-template-columns:1fr;max-width:720px}
.dose-card{border:1px solid var(--mid);border-radius:20px;padding:32px;background:rgba(62,42,34,0.2);display:flex;flex-direction:column;gap:20px;min-height:280px}
.dose-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dose-card .top .tag{font-family:var(--display);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--on-dark-muted);padding:6px 12px;border:1px solid var(--mid);border-radius:999px}
.dose-card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:26px;letter-spacing:-0.015em;color:var(--on-dark)}
.dose-card .big{font-family:var(--display);font-weight:400;font-size:56px;letter-spacing:-0.025em;color:var(--on-dark);line-height:.95}
.dose-card .big .unit{font-size:14px;color:var(--on-dark-muted);letter-spacing:0.04em;margin-left:8px}
.dose-card .sub{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--on-dark-muted)}
.dose-card .specs{margin-top:auto;list-style:none;border-top:1px solid var(--mid);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.dose-card .specs li{font-size:12px;color:var(--on-dark-muted);display:flex;justify-content:space-between;gap:16px}
.dose-card .specs li strong{font-family:var(--display);color:var(--on-dark);font-weight:400;letter-spacing:0.04em}
@media (max-width:720px){.dose-grid{grid-template-columns:1fr}}

/* ---------- UNIT TABLE ---------- */
.unit-table{padding:48px 24px 96px}
.unit-table .section-head{max-width:var(--max);margin:0 auto 32px}
.unit-table .section-head h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:20px;letter-spacing:-0.005em;color:var(--on-dark)}
.unit-table .section-head .desc{font-size:13px;color:var(--on-dark-muted);margin-top:8px;max-width:560px}
.unit-table table{max-width:var(--max);margin:0 auto;width:100%;border-collapse:collapse;border-top:1px solid var(--mid);border-bottom:1px solid var(--mid)}
.unit-table th,.unit-table td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--mid);font-variant-numeric:tabular-nums}
.unit-table thead th{font-family:var(--display);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--on-dark-soft);font-weight:400;background:rgba(62,42,34,0.25)}
.unit-table tbody tr:last-child td{border-bottom:0}
.unit-table td{font-size:14px;color:var(--on-dark)}
.unit-table td:first-child{font-family:var(--display);letter-spacing:-0.005em}

/* ---------- STRIP (cycle + vial) ---------- */
.strip{padding:48px 24px;border-top:1px solid var(--mid);border-bottom:1px solid var(--mid)}
.strip .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.strip h3{font-family:var(--display);font-size:14px;letter-spacing:0.14em;text-transform:uppercase;color:var(--on-dark);margin-bottom:14px}
.strip .serif{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--on-dark);line-height:1.3;margin-bottom:10px}
.strip p{font-size:13.5px;color:var(--on-dark-muted);line-height:1.6}
.strip table{width:100%;border-collapse:collapse;margin-top:12px}
.strip td{padding:10px 0;border-bottom:1px solid var(--mid);font-size:13px;vertical-align:top}
.strip tr:last-child td{border-bottom:0}
.strip td:first-child{color:var(--on-dark-muted);font-family:var(--display);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;width:40%}
.strip td:last-child{color:var(--on-dark);font-variant-numeric:tabular-nums}
@media (max-width:720px){.strip .inner{grid-template-columns:1fr;gap:32px}}

/* ---------- MECHANISM (cream) ---------- */
.mech{padding:96px 24px}
.mech .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.mech .eyebrow{display:block;margin-bottom:16px;color:var(--on-cream-3)}
.mech h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(32px,4vw,48px);line-height:1.02;color:var(--on-cream)}
.mech p{font-size:15px;color:var(--on-cream-2);line-height:1.7;margin-bottom:14px}
.mech ul{list-style:none;margin-top:20px;border-top:1px solid var(--hairline)}
.mech ul li{padding:14px 0;border-bottom:1px solid var(--hairline);display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:baseline}
.mech ul li strong{font-family:var(--display);text-transform:uppercase;font-size:10.5px;letter-spacing:0.16em;color:var(--on-cream);font-weight:400}
.mech ul li span{font-size:13.5px;color:var(--on-cream-2);line-height:1.55}
@media (max-width:900px){.mech .inner{grid-template-columns:1fr;gap:32px}.mech ul li{grid-template-columns:1fr}}

/* ---------- SAFETY ---------- */
.safety{padding:96px 24px}
.safety .section-head{max-width:var(--max);margin:0 auto 40px}
.safety .section-head .eyebrow{display:block;margin-bottom:16px}
.safety .section-head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(32px,4vw,48px);line-height:1.02}
.safety-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.safety-col{border-radius:20px;padding:32px;min-height:280px}
.safety-col.caution{background:rgba(192,122,106,0.08);border:1px solid rgba(192,122,106,0.35)}
.safety-col.stop{background:rgba(192,122,106,0.12);border:1px solid rgba(192,122,106,0.45)}
.safety-col .lbl{font-family:var(--display);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--no);margin-bottom:20px}
.safety-col ul{list-style:none}
.safety-col li{padding:14px 0;border-bottom:1px solid var(--mid);font-size:14px;color:var(--on-dark);line-height:1.5;display:flex;gap:12px;align-items:flex-start}
.safety-col li:last-child{border-bottom:0}
.safety-col li::before{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--no);margin-top:8px;flex-shrink:0}
@media (max-width:720px){.safety-grid{grid-template-columns:1fr}}

/* ---------- CRITICAL NOTE ---------- */
.critical{padding:72px 24px;background:var(--shadow);border-top:1px solid var(--mid);border-bottom:1px solid var(--mid);text-align:center}
.critical .eyebrow{display:block;margin-bottom:18px;color:var(--no)}
.critical p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,28px);line-height:1.3;color:var(--on-dark);max-width:720px;margin:0 auto 16px}
.critical .meta{font-size:12px;letter-spacing:0.06em;color:var(--on-dark-muted);max-width:640px;margin:0 auto}

/* ---------- NEXT UP ---------- */
.next{padding:96px 24px;text-align:center}
.next h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(32px,4vw,48px);line-height:1.02;margin-bottom:18px}
.next .sub{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--on-dark-muted);margin-bottom:32px}
.next .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--mid);padding:72px 24px 0}
.foot-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:40px;padding-bottom:56px;align-items:flex-start}
.foot-brand{display:flex;flex-direction:column;gap:18px}
.foot-brand .wm{font-family:var(--display);font-size:20px;letter-spacing:0.2em;text-transform:uppercase}
.foot-col h5{font-family:var(--display);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:18px;font-weight:400}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col li{font-size:12px;color:var(--cream);letter-spacing:0.04em}
.foot-legal{border-top:1px solid var(--mid);max-width:var(--max);margin:0 auto;padding:22px 0 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-dark-muted)}
.foot-watermark{position:relative;overflow:hidden;padding:40px 0 48px;text-align:center}
.foot-watermark .wm{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(36px,6vw,72px);color:rgba(241,232,220,0.28);line-height:1}
.meta{font-size:11px;letter-spacing:0.04em;color:var(--on-dark-muted)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}
[data-stagger] > *{opacity:0;transform:translateY(10px);transition:opacity .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1)}
[data-stagger].is-in > *{opacity:1;transform:none}
[data-stagger].is-in > *:nth-child(2){transition-delay:.06s}
[data-stagger].is-in > *:nth-child(3){transition-delay:.12s}
[data-stagger].is-in > *:nth-child(4){transition-delay:.18s}
[data-stagger].is-in > *:nth-child(5){transition-delay:.24s}
[data-stagger].is-in > *:nth-child(6){transition-delay:.30s}

/* --- Add-to-cart -------------------------------------------------------
   The monograph uses WooCommerce's own add-to-cart template so variations,
   quantity rules and cart plugins keep working. These rules give Woo's
   markup the pill treatment the static design used.                      */
.seq-cart-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seq-cart-form form.cart{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.seq-cart-form .quantity{display:inline-flex;align-items:center;border:1px solid var(--mid);border-radius:999px;overflow:hidden}
.seq-cart-form .quantity input[type=number]{width:56px;padding:9px 0 9px 14px;background:transparent;color:var(--on-dark);border:0;font-size:11px;letter-spacing:0.08em;text-align:center;-moz-appearance:textfield}
.seq-cart-form .quantity input[type=number]::-webkit-outer-spin-button,
.seq-cart-form .quantity input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.seq-cart-form button.single_add_to_cart_button{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid var(--white-pill);background:var(--white-pill);color:var(--on-cream);white-space:nowrap;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;transition:background-color .25s ease,border-color .25s ease}
.seq-cart-form button.single_add_to_cart_button:hover{background:#fff;border-color:#fff}
.seq-cart-form button.single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed}
.seq-cart-form .stock{font-size:11px;letter-spacing:0.08em;color:var(--on-dark-muted)}
.seq-cart-form .variations{width:100%}
.seq-cart-form .variations label{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-dark-muted)}
.seq-cart-form .variations select{padding:9px 14px;border:1px solid var(--mid);border-radius:999px;background:transparent;color:var(--on-dark);font-size:11px;letter-spacing:0.08em}
.seq-cart-form .woocommerce-variation-price{font-size:13px;color:var(--on-dark)}

/* --- Cart / checkout / account -----------------------------------------
   WooCommerce renders these from its own templates. Rather than override
   the templates (which breaks on every Woo update), the markup is styled
   in place so it reads as part of the system.                            */
.woocommerce-cart main,
.woocommerce-checkout main,
.woocommerce-account main{padding-top:120px;min-height:60vh}
.woocommerce-cart .wrap,
.woocommerce-checkout .wrap,
.woocommerce-account .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce{max-width:var(--max);margin:0 auto;padding:0 24px 96px}

.woocommerce h1,.woocommerce h2,.woocommerce h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;line-height:1.06}
.woocommerce h2{font-size:clamp(24px,3vw,34px);margin:0 0 20px}
.woocommerce h3{font-size:16px;margin:0 0 14px}

.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--mid);border-radius:16px;overflow:hidden;margin:0 0 28px}
.woocommerce table.shop_table th{text-align:left;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-dark-muted);font-weight:400;padding:14px 16px;border-bottom:1px solid var(--mid)}
.woocommerce table.shop_table td{padding:16px;border-bottom:1px solid var(--mid);font-size:13px;vertical-align:middle}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}
.woocommerce table.shop_table img{width:56px;border-radius:8px}
.woocommerce .product-name a{text-decoration:none}
.woocommerce .product-name a:hover{opacity:.75}

.woocommerce .cart-collaterals{display:grid;grid-template-columns:1fr;gap:24px;max-width:420px;margin-left:auto}
.woocommerce .cart_totals table{border:1px solid var(--mid);border-radius:16px;width:100%;border-collapse:collapse}
.woocommerce .cart_totals th,.woocommerce .cart_totals td{padding:14px 16px;font-size:13px;text-align:left;border-bottom:1px solid var(--mid)}
.woocommerce .cart_totals tr:last-child th,.woocommerce .cart_totals tr:last-child td{border-bottom:0}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;border-radius:999px;border:1px solid var(--white-pill);background:var(--white-pill);color:var(--on-cream);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background-color .25s ease}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #place_order:hover{background:#fff}
.woocommerce .button.alt{background:var(--white-pill);color:var(--on-cream)}
.woocommerce a.button.wc-backward{background:transparent;color:var(--on-dark);border-color:var(--mid)}

.woocommerce form .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.woocommerce form .form-row label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-dark-muted)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection{padding:12px 16px;border:1px solid var(--mid);border-radius:12px;background:transparent;color:var(--on-dark);font-size:13px;font-family:var(--body);width:100%}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:2px solid var(--on-dark-muted);outline-offset:2px}

.woocommerce #payment{border:1px solid var(--mid);border-radius:16px;padding:20px;margin-top:20px}
.woocommerce #payment ul.payment_methods{list-style:none;margin:0 0 16px;padding:0}
.woocommerce #payment ul.payment_methods li{padding:10px 0;border-bottom:1px solid var(--mid);font-size:13px}
.woocommerce #payment ul.payment_methods li:last-child{border-bottom:0}

.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:10px}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:inline-flex;padding:9px 16px;border:1px solid var(--mid);border-radius:999px;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-dark-muted);text-decoration:none}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{border-color:var(--on-dark);color:var(--on-dark)}

@media (max-width:768px){
  .woocommerce table.shop_table thead{display:none}
  .woocommerce table.shop_table tr{display:block;border-bottom:1px solid var(--mid);padding:8px 0}
  .woocommerce table.shop_table td{display:flex;justify-content:space-between;gap:16px;border-bottom:0;padding:8px 16px}
  .woocommerce table.shop_table td::before{content:attr(data-title);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-dark-muted)}
  .woocommerce .cart-collaterals{max-width:none}
}

/* --- Loop card (related products, shortcodes, block grids) ------------- */
ul.products{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:0;margin:0}
.seq-card{border:1px solid var(--mid);border-radius:16px;overflow:hidden;transition:border-color .25s ease}
.seq-card:hover{border-color:var(--on-dark-muted)}
.seq-card a{display:grid;grid-template-columns:3px 1fr auto;grid-template-rows:auto auto;gap:0 14px;align-items:center;padding:16px 18px;text-decoration:none}
.seq-card .stripe{grid-row:1 / span 2;width:3px;height:100%;min-height:34px;border-radius:2px}
.seq-card .name{font-size:14px;color:var(--on-dark)}
.seq-card .desc{grid-column:2;font-size:11px;letter-spacing:0.02em;color:var(--on-dark-muted)}
.seq-card .arrow{grid-row:1 / span 2;grid-column:3;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-dark-muted)}

  /* --- Default page content block -------------------------------------
     page.php emits <section class="general sec-cream"> for every ordinary
     page (contact, FAQ, shipping, returns, terms, accessibility, quality
     & testing, and — via compound.css — cart / checkout / account).
     .general carried no vertical padding in this file, so the prose sat
     flush against the hero above and the footer below. Values follow the
     96px section rhythm used in page-dosing.css, with a little extra at
     the foot because the footer block is visually dense.               */
  .general{padding:96px 24px 112px}
  @media (max-width:768px){
    .general{padding:64px 20px 72px}
  }

  /* --- Protocols dropdown ------------------------------------------------
     The primary menu now carries one level of children (header.php passes
     depth 2). Only "Protocols" uses it: its six children are the six
     product_cat archives. Each child is tagged with a seq-cat-* class when
     the menu item is created, which is what colours the dot.
     Colours are hardcoded rather than tokenised because chrome.css — which
     dresses the calculator page — carries neither --mid nor the category
     tokens, and this block has to be byte-identical across all six
     stylesheets that render the nav.
     Below 768px .nav .links is display:none, so there is no hover surface
     on phones and nothing to do there.                                    */
  .nav .links li{position:relative}

  .nav .links .menu-item-has-children > a::after{
    content:"";display:inline-block;width:4px;height:4px;margin-left:8px;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:rotate(45deg) translateY(-2px);opacity:.7;
    transition:transform .22s ease,opacity .22s ease}
  .nav .links .menu-item-has-children:hover > a::after,
  .nav .links .menu-item-has-children:focus-within > a::after{
    transform:rotate(225deg) translateY(-2px);opacity:1}

  .nav .links .sub-menu{
    position:absolute;top:calc(100% + 16px);left:50%;
    transform:translateX(-50%) translateY(-6px);
    min-width:212px;margin:0;padding:10px;list-style:none;
    display:flex;flex-direction:column;gap:2px;
    border-radius:18px;border:1px solid var(--mid,#3E2A22);
    background:rgba(28,17,12,0.92);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;pointer-events:none;z-index:30;
    transition:opacity .22s ease,transform .22s ease,visibility .22s}

  /* Invisible bridge over the 16px gap, so the panel does not close while
     the pointer travels from the parent item down into it. */
  .nav .links .sub-menu::before{
    content:"";position:absolute;left:0;right:0;top:-18px;height:18px}

  .nav .links .menu-item-has-children:hover > .sub-menu,
  .nav .links .menu-item-has-children:focus-within > .sub-menu{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0)}

  .nav .links .sub-menu li{display:block}
  .nav .links .sub-menu a{
    display:flex;align-items:center;gap:11px;
    padding:9px 12px;border-radius:11px;
    font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--on-dark-muted);white-space:nowrap;
    transition:background-color .2s ease,color .2s ease}
  .nav .links .sub-menu a::before{
    content:"";flex:none;width:9px;height:9px;border-radius:50%;
    background:currentColor;box-shadow:0 0 0 1px rgba(241,232,220,.22)}
  .nav .links .sub-menu a:hover,
  .nav .links .sub-menu a:focus-visible{
    background:rgba(241,232,220,.08);color:var(--on-dark)}

  .nav .links .seq-cat-repair     > a::before{background:#742406}
  .nav .links .seq-cat-regenerate > a::before{background:#797559}
  .nav .links .seq-cat-revive     > a::before{background:#d8cbb0}
  .nav .links .seq-cat-resolve    > a::before{background:#f1e8dc}
  .nav .links .seq-cat-regain     > a::before{background:#d48057}
  .nav .links .seq-cat-restore    > a::before{background:#291a14}