/* Health Support Group
   Dark, type-led, full bleed. No cards, no borders around content blocks.
   Structure comes from scale and from hairline rules, not from boxes. */

:root{
  --void:#0d1012;
  --raise:#15191c;
  --line:#272d31;
  --text:#e9ecee;
  --dim:#8d969c;
  --lime:#c8f04a;
  --lime-deep:#a9cf33;
  --warn:#ff8f6b;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--text);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--lime)}

/* everything is measured off this one container */
.bleed{max-width:1240px;margin:0 auto;padding:0 32px}

/* type: headings are huge, tight and uppercase. that is the whole identity. */
h1,h2{margin:0 0 .35em;font-weight:800;letter-spacing:-.03em;line-height:.98;text-transform:uppercase}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem)}
h3{margin:0 0 .4em;font-size:1.05rem;font-weight:700;letter-spacing:.01em}
p{margin:0 0 1.15em;max-width:66ch}
.dim{color:var(--dim)}

/* header: no bar, no logo block. a thin line of links. */
.top{border-bottom:1px solid var(--line)}
.top .bleed{display:flex;align-items:baseline;justify-content:space-between;gap:30px;
            padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.sig{font-weight:800;letter-spacing:-.02em;font-size:1.05rem;text-decoration:none;color:var(--text);text-transform:uppercase}
.sig em{font-style:normal;color:var(--lime)}
.links{display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.links a{color:var(--dim);text-decoration:none;font-size:.9rem;font-weight:600;letter-spacing:.02em}
.links a:hover{color:var(--text)}
.links a.on{color:var(--lime)}

/* a mono status line instead of a coloured ribbon */
.meta{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--dim);
      border-bottom:1px solid var(--line)}
.meta .bleed{display:flex;gap:26px;justify-content:space-between;flex-wrap:wrap;padding:11px 32px}
.meta b{color:var(--lime);font-weight:600}

/* opening block */
.open{padding:92px 0 72px}
.open p.say{font-size:1.3rem;color:var(--dim);max-width:52ch;margin-top:1.4em}
.kick{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;color:var(--lime);
      text-transform:uppercase;margin-bottom:26px}

.go{display:inline-block;background:var(--lime);color:#0d1012;font-weight:800;text-decoration:none;
    padding:16px 32px;border:0;cursor:pointer;font-size:.95rem;letter-spacing:.03em;
    text-transform:uppercase;font-family:var(--sans)}
.go:hover{background:var(--lime-deep)}
.go--quiet{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.go--quiet:hover{background:var(--raise);color:var(--lime)}

/* bands, separated by rules not boxes */
.band{border-top:1px solid var(--line);padding:68px 0}
.band--raise{background:var(--raise)}

/* products as a numbered menu, not cards */
.list{margin-top:40px;counter-reset:n}
.entry{display:grid;grid-template-columns:62px 1fr auto;gap:28px;align-items:baseline;
       padding:30px 0;border-top:1px solid var(--line)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry::before{counter-increment:n;content:counter(n,decimal-leading-zero);
               font-family:var(--mono);font-size:.95rem;color:var(--lime)}
.entry h3{font-size:1.45rem;text-transform:uppercase;letter-spacing:-.015em;font-weight:800}
.entry .sub{font-family:var(--mono);font-size:.76rem;color:var(--dim);letter-spacing:.05em;margin-bottom:.7em}
.entry p{font-size:.97rem;color:var(--dim);margin:0}
.entry .tag{font-size:1.5rem;font-weight:800;white-space:nowrap;letter-spacing:-.02em}

/* tables, borderless */
table{width:100%;border-collapse:collapse;margin-top:26px;font-size:.95rem}
thead th{text-align:left;padding:0 10px 12px;font-family:var(--mono);font-size:.72rem;
         letter-spacing:.12em;text-transform:uppercase;color:var(--lime);border-bottom:1px solid var(--line)}
tbody td{padding:15px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--dim)}
tbody td:first-child{color:var(--text);font-weight:700}
td.num,th.num{text-align:right;white-space:nowrap}
td.num strong{color:var(--text)}
tfoot td{padding:15px 10px;border-top:1px solid var(--line);color:var(--text)}

/* notes */
.note{border-left:2px solid var(--lime);padding:4px 0 4px 22px;margin:30px 0;color:var(--dim)}
.note strong{color:var(--text)}
.micro{font-size:.86rem;color:var(--dim)}
.stamp{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;color:var(--dim);
       padding-bottom:22px;margin-bottom:34px;border-bottom:1px solid var(--line)}

/* long form */
.prose h2{margin-top:2.1em;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.prose h2:first-child{margin-top:0}

/* form */
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:70px}
.fld{margin-bottom:20px}
.fld label{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
           text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;padding:14px 0;background:transparent;color:var(--text);
  border:0;border-bottom:1px solid var(--line);font:1rem var(--sans)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-bottom-color:var(--lime)}
.fld select{padding:14px 0}
.flash{padding:16px 20px;margin-bottom:26px;font-size:.93rem;border-left:2px solid}
.flash--ok{border-color:var(--lime);background:#19210f}
.flash--no{border-color:var(--warn);background:#241510;color:#ffc4b0}

/* three facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:48px}
.facts h3{color:var(--lime);font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.facts p{font-size:.95rem;color:var(--dim);margin:0}

/* footer: one column, large, left */
.end{border-top:1px solid var(--line);padding:70px 0 44px;font-size:.93rem;color:var(--dim)}
.end a{color:var(--text);text-decoration:none}
.end a:hover{color:var(--lime)}
.end-nav{display:flex;gap:34px;flex-wrap:wrap;margin:0 0 42px;padding:0;list-style:none;
         font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.end-where{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;margin-bottom:44px}
.fine{border-top:1px solid var(--line);padding-top:26px;font-size:.82rem;line-height:1.8;color:#6c757b;max-width:none}
.fine strong{color:var(--dim)}

@media(max-width:820px){
  .two{grid-template-columns:1fr;gap:42px}
  .entry{grid-template-columns:1fr;gap:10px}
  .entry::before{display:block}
  .open{padding:58px 0 48px}
  .band{padding:48px 0}
  .bleed{padding:0 22px}
}

/* Counsel's terms and privacy policy.
   Numbered instrument, 26 clauses. The number rides in the heading rather
   than the margin, in mono, because the page has no boxes to hang it off. */
.terms{font-size:16px}
.terms h1{letter-spacing:-.01em}
.terms h2{margin-top:2.4em;font-size:clamp(1.15rem,1.9vw,1.4rem);
          scroll-margin-top:20px;font-variant-numeric:tabular-nums}
.terms h2::first-line{letter-spacing:.01em}
.terms h3{margin-top:1.9em;font-size:1.02rem;color:var(--lime-deep)}
.terms p{margin:0 0 1em}
/* The three capitalised blocks counsel set bold. Warn tint, hairline, no box,
   which is this site's whole idiom. */
.terms .callout{border-left:2px solid var(--warn);padding:14px 0 14px 18px;
                margin:0 0 1.3em;font-size:.88rem;line-height:1.62;color:#d9d2cd}
.terms .bullets{padding-left:1.2em;margin:0 0 1.2em}
.terms .bullets li{margin-bottom:.55em}
.terms .index{margin:0 0 2.6em;padding-left:2.4em;font-size:.9rem;
              font-variant-numeric:tabular-nums}
.terms .index li{margin-bottom:.4em}
.terms .index a{text-decoration:none;color:var(--text);
                border-bottom:1px solid var(--line)}
.terms .index a:hover{color:var(--lime);border-bottom-color:var(--lime)}
.terms .back{margin-top:2.6em;padding-top:18px;border-top:1px solid var(--line);
             font-family:var(--mono);font-size:.76rem;letter-spacing:.05em}

/* ------------------------------------------------------------------ basket
   Shop, basket and checkout. Same hairline idiom as the rest of the site: no
   cards, no boxes, rules and spacing only. */

/* A label that only a screen reader needs. Not display:none, which would take
   it out of the accessibility tree along with the eye. */
.offscreen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* quantity, as one object */
.count{display:inline-flex;align-items:stretch;box-shadow:inset 0 0 0 1px var(--line)}
.count__b{background:transparent;color:var(--text);border:0;cursor:pointer;
  font:700 1.1rem var(--sans);padding:0 16px;line-height:1}
.count__b:hover{background:var(--raise);color:var(--lime)}
.count__n{width:62px;padding:12px 0;text-align:center;background:transparent;color:var(--text);
  border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  font:700 1rem var(--sans)}
.count__n:focus{outline:1px solid var(--lime);outline-offset:-1px}
/* The native spinner is only suppressed once ours is live, so with scripting
   off the field keeps a usable control. */
.count--live .count__n{-moz-appearance:textfield;appearance:textfield}
.count--live .count__n::-webkit-outer-spin-button,
.count--live .count__n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.buy{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.qty{display:flex;gap:10px;align-items:center}
.qty .count__n{border-left:0;border-right:0;box-shadow:inset 0 0 0 1px var(--line)}

/* a field that needs fixing, and what is wrong with it */
.fld--bad input{border-bottom-color:var(--warn)}
.fld__no{margin:8px 0 0;font-size:.84rem;color:#ffc4b0;max-width:none}

/* the one box that gates the order button */
.agree{display:flex;gap:12px;align-items:flex-start;margin:24px 0;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}
.agree input{margin-top:4px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--lime)}
.agree label{font-size:.9rem;color:var(--dim);margin:0;flex:1}
.agree a{color:var(--lime)}
.agree--bad{border-color:var(--warn)}
.agree--bad label{color:#ffc4b0}
.agree .fld__no{flex:0 0 100%}

@media(max-width:820px){
  .buy{gap:10px}
  .count__b{padding:0 13px}
}

/* the basket link: state, not a section, so it sits apart from the four links */
.hold{margin-left:auto;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);text-decoration:none;padding:8px 14px;
  box-shadow:inset 0 0 0 1px var(--line)}
.hold:hover{color:var(--lime);border-color:var(--lime)}
.hold--full{color:var(--lime)}
.hold b{color:var(--lime)}