/* Blood Balanced - editorial, high-contrast, set large for a 50+ reader */
:root{
  --ink:#13302e; --teal:#0f6f68; --teal-dk:#0b514c; --gold:#c9a227;
  --paper:#faf7f2; --rule:#e2dbd0; --muted:#5c6b69; --white:#fff;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1060px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:var(--teal-dk)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:40px} h2{font-size:28px} h3{font-size:20px}
p{margin:0 0 1.1em}

/* masthead */
.topbar{background:var(--ink);color:#cfe0de;font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.masthead{background:var(--white);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.masthead img{height:46px;width:auto;display:block}
nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;letter-spacing:.2px;padding-bottom:3px;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current=page]{border-bottom-color:var(--gold)}

/* hero */
.hero{background:var(--white);border-bottom:1px solid var(--rule)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero h1{font-size:46px;margin-bottom:.35em}
.hero .lede{font-size:20px;color:var(--muted);margin-bottom:1.4em}
.kicker{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;font-weight:700;
     padding:15px 30px;border-radius:2px;border:0;font-size:16px;cursor:pointer}
.btn:hover{background:var(--teal-dk)}
.btn--ghost{background:transparent;color:var(--teal-dk);border:2px solid var(--teal);padding:13px 28px}
.herocard{background:var(--paper);border:1px solid var(--rule);padding:30px}
.herocard h3{margin-bottom:.6em}
.herocard ul{margin:0;padding-left:20px;color:var(--muted)}
.herocard li{margin-bottom:9px}

/* sections */
section{padding:56px 0}
.section-rule{border-top:1px solid var(--rule)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* products */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:26px}
.card{background:var(--white);border:1px solid var(--rule);padding:26px;display:flex;flex-direction:column}
.card .sku{font-size:12px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.card h3{margin:.45em 0 .3em;font-size:19px}
.card .size{font-size:14px;color:var(--muted);margin-bottom:12px}
.card p{font-size:15px;color:var(--muted);flex:1}
.price{font-family:var(--serif);font-size:27px;color:var(--teal-dk);margin:14px 0 16px}

/* trust strip */
.strip{background:var(--ink);color:#d7e4e2}
.strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;padding-top:40px;padding-bottom:40px}
.strip h3{color:#fff;font-size:17px;font-family:var(--sans);font-weight:700}
.strip p{font-size:15px;margin:0;color:#aec4c1}

/* content pages */
.doc{background:var(--white);border:1px solid var(--rule);padding:44px}
.doc h2{margin-top:1.6em} .doc h2:first-child{margin-top:0}
.doc li{margin-bottom:.5em}
.updated{font-size:14px;color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:16px;margin-bottom:28px}

/* contact form */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px 13px;border:1px solid #c9c0b3;background:#fff;
  font:16px var(--sans);border-radius:2px}
.field input:focus,.field textarea:focus{outline:2px solid var(--teal);border-color:var(--teal)}
.note{font-size:14px;color:var(--muted)}
.callout{background:#fff;border-left:4px solid var(--gold);padding:20px 24px;margin:26px 0}
.alert{padding:14px 16px;border-radius:2px;margin-bottom:20px;font-size:15px}
.alert--ok{background:#e6f2f0;border:1px solid var(--teal)}
.alert--bad{background:#fdeceb;border:1px solid #c0392b;color:#8e2419}

/* footer */
footer{background:#0b1f1e;color:#9fb5b2;font-size:15px;padding:48px 0 34px;margin-top:10px}
footer a{color:#dfeae8;text-decoration:none}
footer a:hover{text-decoration:underline}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:32px}
.fgrid h4{color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:9px}
.legal{border-top:1px solid #1d3836;padding-top:24px;font-size:13.5px;line-height:1.7;color:#7f9794}
@media(max-width:860px){
  .hero .wrap,.cols,.fgrid{grid-template-columns:1fr;gap:32px}
  h1,.hero h1{font-size:32px} .doc{padding:26px}
}

/* supplement facts, printed the way it appears on the bottle */
.facts{width:100%;border-collapse:collapse;border:2px solid var(--ink);margin:18px 0 10px;font-size:14px}
.facts caption{caption-side:top;text-align:left;font-family:var(--serif);font-size:19px;
  border:2px solid var(--ink);border-bottom:0;padding:7px 10px;background:var(--ink);color:#fff}
.facts th,.facts td{border-top:1px solid var(--rule);padding:7px 10px;text-align:left;font-weight:400}
.facts tr:first-child th,.facts tr:first-child td{border-top:0}
.facts td{text-align:right;white-space:nowrap;font-weight:700}

/* multi bottle pricing on the hero product */
.packrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border:1px solid var(--rule);background:var(--paper);padding:12px 14px;margin-bottom:10px}
.packrow .note{display:block;margin:2px 0 0}
.packprice{font-family:var(--serif);font-size:23px;color:var(--teal-dk);white-space:nowrap}

/* photography */
.hero{position:relative}
.hero-art{display:block;width:100%;height:clamp(260px,26vw,340px);object-fit:cover;
  object-position:center 42%}
.hero-over{position:absolute;inset:0;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(250,247,242,.97) 0%,rgba(250,247,242,.92) 42%,rgba(250,247,242,0) 76%)}
.hero-over .wrap{width:100%;display:block;padding-top:0;padding-bottom:0}
.hero-copy{max-width:46ch}
.hero-copy h1{font-size:clamp(28px,3.1vw,40px);margin-bottom:.3em}
.hero-copy .lede{font-size:17px;margin-bottom:1.1em}
.hero-copy .kicker{margin-bottom:10px}
.card figure{margin:0 0 16px;background:#fff;border:1px solid var(--rule);overflow:hidden;line-height:0}
.card figure img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:10px}
.shot{background:#fff;border:1px solid var(--rule);overflow:hidden;line-height:0}
.shot{max-width:260px}
.shot img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:10px}
.figwide{margin:0 0 34px;border:1px solid var(--rule)}
.figwide img{display:block;width:100%;height:clamp(220px,30vw,340px);object-fit:cover}
.figwide figcaption{font-size:14px;color:var(--muted);padding:12px 16px;background:#fff;
  border-top:1px solid var(--rule)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split img{display:block;width:100%;height:100%;max-height:360px;object-fit:cover;
  border:1px solid var(--rule)}
@media (max-width:820px){.split{grid-template-columns:1fr}
  .hero-over{background:linear-gradient(180deg,rgba(250,247,242,.93),rgba(250,247,242,.97))}}

/* counsel's terms and privacy policy
   A long numbered instrument set for a reader in their sixties: the clause
   number sits in the left margin so it can be found from the contents list
   and from the three places the text cites a section by number. */
.lawdoc{font-size:16px;line-height:1.72}
.lawdoc h1{font-size:30px;letter-spacing:.2px}
.lawdoc h2{font-size:21px;margin-top:2.1em}
.lawdoc h3{font-size:17.5px;margin-top:1.7em;color:var(--teal-dk)}
.lawdoc h2.clause{position:relative;padding-left:3.2em;scroll-margin-top:24px}
.lawdoc .clause-n{position:absolute;left:0;top:.06em;font-family:var(--sans);
  font-size:15px;font-weight:700;color:var(--teal);letter-spacing:.3px}
.lawdoc p{margin:0 0 1em}
/* The three all-capitals paragraphs counsel set in bold: the read-this-first
   notice, the product safety disclosure and the arbitration warning. Bold
   capitals alone read as shouting with no shape, so they get a rule and a
   tint instead and stay distinct from the headings around them. */
.lawdoc .legal-notice{background:#fcfaf4;border-left:3px solid var(--gold);
  padding:16px 18px;margin:0 0 1.3em;font-size:14.5px;line-height:1.6}
.lawdoc .legal-list{padding-left:1.3em;margin:0 0 1.2em}
.lawdoc .toc{border:1px solid var(--rule);background:var(--paper);
  padding:22px 26px 22px 12px;margin:0 0 2.4em}
.lawdoc .toc ol{margin:0;padding-left:1.9em}
.lawdoc .toc li{margin-bottom:.42em;font-size:15px}
.lawdoc .toc a{text-decoration:none;border-bottom:1px solid transparent}
.lawdoc .toc a:hover{border-bottom-color:var(--gold)}
.lawdoc .totop{margin-top:2.4em;padding-top:18px;border-top:1px solid var(--rule);
  font-size:14px}
@media (max-width:640px){
  .lawdoc h2.clause{padding-left:0}
  .lawdoc .clause-n{position:static;display:block;margin-bottom:2px}
}


/* Cart in the masthead. The count sits in a filled pill so the eye finds it
   without reading: after an Add the page looks otherwise identical, and the
   number is the only thing confirming the click did anything. */
.navcart{display:inline-flex;align-items:center;gap:7px}
.navcart__n{display:inline-flex;align-items:center;justify-content:center;
  min-width:21px;height:21px;padding:0 6px;border-radius:11px;
  background:var(--brand,#0f6f68);color:#fff;font-size:12px;font-weight:700;line-height:1}


/* .cols is a fixed two column grid. A three up row (city/state/ZIP, and the
   card expiry) needs its own, and it collapses on a phone rather than putting
   a ZIP field 90px wide. */
.cols--3{grid-template-columns:2fr 1fr 1fr;gap:16px}
@media (max-width:720px){
  .cols,.cols--3{grid-template-columns:1fr;gap:0}
}

/* A field the handler rejected. The border carries the signal and the label
   turns with it, so the eye lands on the right row rather than hunting the
   list of messages at the top of the page. */
.field--bad input,.field--bad select,.field--bad textarea{border-color:#c8102e;background:#fffafa}
.field--bad label{color:#c8102e}

/* Used by three pages for labels that belong to a screen reader and not to the
   eye. It had never been defined, so each one rendered as visible text in the
   middle of a row. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;
  padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Quantity stepper in the cart. Two one-button forms either side of the number,
   so it works with scripting switched off. */
.stepper{display:inline-flex;align-items:center;border:1px solid #c9c0b3;border-radius:4px;
  overflow:hidden;background:#fff}
.stepper form{display:block;margin:0}
.stepper__b{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:0;background:#fff;color:var(--teal);font-size:19px;line-height:1;cursor:pointer;font-family:inherit}
.stepper__b:hover{background:#f4f1ea}
.stepper__b--off{color:var(--muted);cursor:default}
.stepper__b:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.stepper__n{min-width:40px;text-align:center;font-size:16px;font-weight:700;
  border-left:1px solid #c9c0b3;border-right:1px solid #c9c0b3;line-height:38px}


/* The expiry row needs the opposite shape to the address row: Month and Year
   are two and four characters, "Security code" is two words. Giving Month the
   widest column wrapped that label and pushed its input out of line. */
.cols--card{grid-template-columns:1fr 1fr 1.5fr;gap:16px}
@media (max-width:720px){ .cols--card{grid-template-columns:1fr;gap:0} }

/* Subscribe and Save at checkout. The box is never pre-ticked and never gates
   the button: its own sentence says a subscription is not required to buy, and
   a box that argues with its printed words is worse than no box at all. */
.optin{border:2px solid var(--teal);border-radius:4px;padding:18px 20px;background:#fff}
.optin__row{display:flex;gap:12px;align-items:flex-start}
.optin__row input{width:20px;height:20px;margin:2px 0 0;flex:0 0 20px}
.optin__row label{font-weight:700;font-size:16px;margin:0;cursor:pointer}
.optin__terms{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--muted);line-height:1.6}
.optin__terms strong{color:var(--ink,#13302e)}


/* What is actually in a package. The tiles previously named only a bottle
   count, which read as that many bottles of the product above them. */
.packbox{list-style:none;margin:10px 0 0;padding:0}
.packbox li{font-size:14px;line-height:1.7;display:flex;justify-content:space-between;gap:16px}
.packbox li strong{color:var(--teal)}

/* The same box on the cart and the checkout, a size down from the shop page. */
.packbox--tight{margin-top:6px}
.packbox--tight li{font-size:13px;line-height:1.6}

/* Agreement to the terms. Unlike the subscription tick this one gates the
   button, because agreeing to the terms genuinely is a condition of sale. */
.agree{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:14px 16px;
  border:1px solid #c9c0b3;border-radius:4px;background:#fff}
.agree input{width:20px;height:20px;margin:1px 0 0;flex:0 0 20px}
.agree label{font-size:15px;line-height:1.5;margin:0;cursor:pointer;font-weight:400}
.agree--bad{border-color:#c8102e;background:#fffafa}
.agree--bad label{color:#c8102e}

/* Subscribe and Save and the terms agreement read as one stack of two
   decisions above the button, rather than two unrelated panels. */
.optin--stacked{margin-top:20px}
.optin--stacked + .agree{margin-top:10px}

/* Quantity stepper on a product. Same parts as the cart's, but the number is a
   real input because nothing has been added to a cart yet. The native spinner
   is hidden only once ours is live, so no-script keeps a usable control. */
.qstep{display:inline-flex}
.qstep input.stepper__n{width:54px;border:0;border-left:1px solid #c9c0b3;border-right:1px solid #c9c0b3;
  text-align:center;font:700 16px var(--sans);padding:0;height:38px;border-radius:0;background:#fff}
.qstep input.stepper__n:focus{outline:2px solid var(--teal);outline-offset:-2px}
.stepper--on input.stepper__n{-moz-appearance:textfield;appearance:textfield}
.stepper--on input.stepper__n::-webkit-outer-spin-button,
.stepper--on input.stepper__n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}