/* =============================================================================
   HydroSure secondary pages: how-it-works.html, subscribe.html, cell-demo.html
   Load after hydrosure.css. Uses its tokens and base parts (kicker, h-l, lead,
   btn, tlink, head, sec, bleed, faq, capture, mechanism, turn) and adds only
   what these three pages need. Nothing here restyles a hydrosure.css rule
   globally; every selector is scoped to a class defined in this file.
   ========================================================================== */

/* ---- page hero ------------------------------------------------------------------------- */
.pg-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(52px,8vh,104px) 0 clamp(64px,9vh,120px);background:#FFFFFF url(../hs/orbs-white-2400.webp) 62% 30%/cover no-repeat}
.pg-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-1;background:linear-gradient(to bottom,rgba(247,242,231,0),rgba(247,242,231,.6))}
.pg-title{margin-top:22px;font-family:var(--disp);font-weight:600;font-size:clamp(42px,6.8vw,104px);line-height:.98;letter-spacing:-.036em;text-wrap:balance;color:var(--ink)}
.pg-title .accent{font-size:1.06em}
.pg-hero .ctas{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:28px}
.pg-hero .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,96px);align-items:start;margin-top:clamp(36px,5vw,64px)}
@media(max-width:900px){.pg-hero .row{grid-template-columns:1fr}}

/* on-this-page list */
.toc{border-top:1px solid var(--ink)}
.toc a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:14px;align-items:baseline;padding:16px 0 17px;border-bottom:1px solid var(--line)}
.toc .n{font-family:var(--num);font-weight:600;font-size:14px;letter-spacing:.12em;color:var(--gold-deep)}
.toc .t{font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.6vw,22px);line-height:1.15;letter-spacing:-.014em;transition:color .3s var(--ease)}
.toc .d{grid-column:2;margin-top:4px;font-size:14px;color:var(--ink-3)}
.toc .arr{grid-column:3;grid-row:1;color:var(--ink-3)}
.toc a:hover .t{color:var(--gold-deep)}
.toc a:hover .arr{transform:translateY(3px);color:var(--navy)}

/* visible "proposed" note */
.pending{display:flex;gap:12px;align-items:flex-start;max-width:60ch;margin-top:26px;padding:13px 16px;border-radius:14px;background:rgba(201,169,97,.12);box-shadow:inset 0 0 0 1px rgba(201,169,97,.45);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.pending svg{flex:none;width:17px;height:17px;margin-top:1px;color:var(--gold-deep)}
.pending b{font-weight:600;color:var(--gold-deep)}
.pl{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(201,169,97,.6);font-family:var(--disp);font-style:normal;font-weight:600;font-size:10.5px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:var(--gold-deep)}

/* ---- the six actives: dose split + profiles -------------------------------------------- */
.split{margin:0 0 clamp(16px,2vw,20px);padding:clamp(22px,2.6vw,32px);border-radius:24px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.split figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.split figcaption b{font-family:var(--num);font-weight:600;font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:0;color:var(--ink)}
.split figcaption b small{font-size:.42em;margin-left:3px;letter-spacing:0;color:var(--ink-3)}
.split figcaption span{font-size:15px;color:var(--ink-3)}
.split .bar{display:flex;gap:3px;height:20px;margin-top:20px;border-radius:999px;overflow:hidden}
.split .bar span{flex:var(--g) 1 0;min-width:0;background:var(--c)}
.split .keys{display:flex;flex-wrap:wrap;gap:10px 26px;margin:18px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
.split .keys li{display:inline-flex;align-items:center;gap:8px}
.split .keys i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.split .keys b{font-family:var(--disp);font-weight:600;letter-spacing:.02em;color:var(--ink)}
.js .split .bar span{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--ease)}
.js .split.on .bar span{transform:none}
.js .split.on .bar span:nth-child(2){transition-delay:.06s}
.js .split.on .bar span:nth-child(3){transition-delay:.12s}
.js .split.on .bar span:nth-child(4){transition-delay:.18s}
.js .split.on .bar span:nth-child(5){transition-delay:.24s}
.js .split.on .bar span:nth-child(6){transition-delay:.3s}

.pfs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pf{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,36px);border-radius:24px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);scroll-margin-top:calc(var(--nav-h) + 16px)}
.pf .head-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.pf .dose{font-family:var(--num);font-weight:600;font-size:clamp(58px,6vw,84px);line-height:.82;letter-spacing:0;color:var(--ink)}
.pf .dose small{font-size:.38em;margin-left:4px;letter-spacing:.02em;color:var(--ink-3)}
.pf h3{font-family:var(--disp);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.016em}
.pf h3 i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:12px;vertical-align:.12em;background:var(--c)}
.pf dl{flex:1;display:grid;grid-template-rows:auto auto 1fr;margin:0}
.pf dl>div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:4px 18px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.pf dt{padding-top:4px;font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.pf dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.pf dl>.why{align-self:end;margin-top:18px;padding:16px 18px;border-bottom:0;border-radius:16px;background:rgba(201,169,97,.12)}
.pf .why dt{color:var(--gold-deep)}
.pf .why dd{color:var(--ink)}
.pf-note{margin-top:22px;font-size:13.5px;color:var(--ink-3)}
.pf-note a{color:var(--gold-deep);border-bottom:1px solid rgba(125,98,41,.4)}
.pf-note a:hover{border-color:currentColor}
@media(max-width:900px){.pfs{grid-template-columns:1fr}}
@media(max-width:520px){.pf dl>div{grid-template-columns:1fr}.pf dt{padding-top:0}}

/* ---- what is not in it ----------------------------------------------------------------- */
.zeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.zeros article{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,34px);border-radius:24px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.zeros .z{font-family:var(--num);font-weight:600;font-size:clamp(84px,9vw,132px);line-height:.78;letter-spacing:0;color:var(--gold)}
.zeros h3{margin-top:26px;font-family:var(--disp);font-weight:600;font-size:clamp(20px,1.7vw,23px);line-height:1.12;letter-spacing:-.014em}
.zeros p{margin-top:10px;font-size:15.5px;color:var(--ink-2)}
@media(max-width:900px){
  .zeros{grid-template-columns:1fr}
  .zeros article{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:start}
  .zeros .z{grid-row:1/3;font-size:76px}
  .zeros h3{margin-top:2px}
}

/* ---- closing band on a photograph ------------------------------------------------------- */
.cta-band{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(480px,46vw,660px);border-radius:32px;background:#0F1730;color:#fff}
.cta-band picture{position:absolute;inset:0;z-index:-1}
.cta-band picture img{width:100%;height:100%;object-fit:cover;object-position:74% 50%}
.cta-band picture::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,48,.92) 0%,rgba(15,23,48,.62) 36%,rgba(15,23,48,0) 62%)}
.cta-band .copy{position:relative;max-width:680px;padding:clamp(32px,5vw,72px)}
.cta-band .kicker{color:var(--gold)}
.cta-band .h-l{margin-top:18px;color:#fff;font-size:clamp(36px,4.4vw,68px)}
.cta-band .accent{color:var(--gold)}
.cta-band .lead{margin-top:20px;color:#B9C0C8}
.cta-band .ctas{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:30px}
.cta-band .tlink{color:#fff;border-color:rgba(255,255,255,.28)}
.cta-band .tlink:hover{border-color:#fff}
.cta-band .fine{margin-top:20px;font-size:12.5px;color:#9AA3B8}
@media(max-width:820px){
  .cta-band{display:block;min-height:0;border-radius:26px}
  .cta-band picture{position:relative;inset:auto;display:block}
  .cta-band picture img{height:auto;aspect-ratio:4/5;object-position:50% 42%}
  .cta-band picture::after{background:linear-gradient(to bottom,rgba(15,23,48,0) 62%,#0F1730 100%)}
  .cta-band .copy{padding:6px 24px 36px}
}

/* ---- subscribe: hero with the tub on a 30-day dial ------------------------------------- */
.sub-hero .grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px clamp(32px,5vw,80px);align-items:center}
.sub-hero .pg-title{font-size:clamp(46px,7vw,108px)}
.sub-hero .lead{margin-top:24px}
.tubstage{position:relative}
.tubwrap{position:relative;display:grid;place-items:center;min-height:clamp(440px,44vw,620px)}
.tubwrap .dial{position:absolute;left:50%;top:50%;width:min(100%,560px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.tubwrap .dial::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -.5deg,rgba(125,98,41,.4) 0 1deg,transparent 1deg 12deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));mask:radial-gradient(closest-side,transparent calc(100% - 15px),#000 calc(100% - 14px))}
.tubwrap .dial::after{content:"";position:absolute;inset:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(22,32,63,.09);background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0))}
.tubwrap .dial i{position:absolute;left:50%;top:-4px;width:4px;height:24px;margin-left:-2px;border-radius:2px;background:var(--gold)}
.tubwrap .floor{position:absolute;z-index:1;left:50%;bottom:calc(50% - clamp(165px,15vw,230px) - 12px);width:min(70%,380px);height:40px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(22,32,63,.26),rgba(22,32,63,0) 70%);filter:blur(5px)}
.tubwrap .tub{position:relative;z-index:2;height:clamp(330px,30vw,460px);width:auto;filter:drop-shadow(0 40px 34px rgba(22,32,63,.2)) drop-shadow(0 10px 12px rgba(22,32,63,.14))}
.ptag{position:absolute;z-index:3;left:max(0px,calc(50% - 270px));bottom:9%;display:grid;gap:3px;margin:0;padding:14px 18px 15px;border-radius:18px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:0 22px 44px -26px rgba(22,32,63,.5),inset 0 0 0 1px rgba(22,32,63,.07)}
.ptag b{font-family:var(--num);font-weight:600;font-size:36px;line-height:1;letter-spacing:0}
.ptag span{font-size:13.5px;color:var(--ink-2)}
.ptag small{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
@media(max-width:900px){
  .sub-hero .grid{grid-template-columns:1fr}
  .tubwrap{min-height:0;padding:28px 0 8px}
  .tubwrap .floor{bottom:-10px}
  .ptag{position:relative;left:auto;bottom:auto;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 10px;width:max-content;max-width:100%;margin:26px auto 0;padding:12px 18px}
  .ptag b{font-size:28px}
}

/* ---- subscribe: the plan ---------------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.6vw,34px);border-radius:24px;background:var(--tint);box-shadow:inset 0 0 0 1px rgba(201,169,97,.3)}
.tier.is-feat{background:var(--paper);box-shadow:inset 0 0 0 2px var(--navy),0 34px 60px -40px rgba(22,32,63,.45)}
.tier .badge{position:absolute;right:22px;top:-11px;padding:4px 10px;border-radius:999px;background:var(--navy);color:#fff;font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.tier h3{font-family:var(--disp);font-weight:600;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.014em}
.tier .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:18px}
.tier .price b{font-family:var(--num);font-weight:600;font-size:clamp(58px,5vw,76px);line-height:.9;letter-spacing:0}
.tier .price span{font-size:15px;color:var(--ink-3)}
.tier .per{margin-top:8px;font-size:15px;color:var(--ink-2)}
.tier .save{align-self:flex-start;margin-top:14px;padding:5px 11px;border-radius:999px;background:rgba(201,169,97,.16);font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.tier ul{list-style:none;margin:22px 0 26px;padding:0;border-top:1px solid var(--line)}
.tier li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink-2)}
.tier li svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--gold-deep)}
.tier li .pl{margin-left:auto;margin-top:-1px}
.tier .btn{width:100%;margin-top:auto}
.tier .fine{margin-top:12px;font-size:12px;text-align:center;color:var(--ink-3)}
@media(max-width:980px){.tiers{grid-template-columns:1fr;max-width:560px}}

/* twelve-tub comparison, bars start at zero */
.math{margin-top:16px;padding:clamp(22px,2.6vw,32px);border-radius:24px;background:var(--tint);box-shadow:inset 0 0 0 1px rgba(201,169,97,.3)}
.math .mh{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.math dl{display:grid;gap:12px;margin:16px 0 0}
.math dl>div{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:4px 20px;align-items:center}
.math dt{font-size:14.5px;color:var(--ink-2)}
.math dd{margin:0;display:flex;align-items:center;gap:16px}
.math .bar{flex:1;height:12px;border-radius:999px;background:rgba(22,32,63,.07);overflow:hidden}
.math .bar i{display:block;height:100%;border-radius:inherit;background:var(--navy-30)}
.math .us .bar i{background:var(--gold)}
.math .us dt{font-weight:600;color:var(--ink)}
.math dd b{min-width:62px;text-align:right;font-family:var(--num);font-weight:600;font-size:20px;letter-spacing:.01em}
.math .mf{margin-top:16px;font-size:14px;color:var(--ink-2)}
@media(max-width:600px){.math dl>div{grid-template-columns:1fr}}

/* ---- subscribe: planned features --------------------------------------------------------- */
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feat{display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:22px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.feat .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(201,169,97,.14);color:var(--gold-deep)}
.feat .ic svg{width:22px;height:22px}
.feat h3{margin-top:22px;font-family:var(--disp);font-weight:600;font-size:20px;line-height:1.15;letter-spacing:-.012em}
.feat p{margin:10px 0 20px;font-size:15px;color:var(--ink-2)}
.feat .pl{align-self:flex-start;margin-top:auto}
@media(max-width:1100px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.feats{grid-template-columns:1fr}}

/* photograph band with the copy on the right (mirror of .bleed.ritual) */
.bleed.ritual.flip .flip-copy{max-width:31rem}
.bleed.ritual.flip .tlink{margin-top:26px}
@media(min-width:821px){
  .bleed.ritual.flip::after{background:linear-gradient(270deg,rgba(250,250,250,.95) 0%,rgba(250,250,250,.72) 36%,rgba(250,250,250,0) 62%)}
  .bleed.ritual.flip .wrap{display:flex;justify-content:flex-end}
  .bleed.ritual.flip img{object-position:28% 50%}
}
@media(max-width:820px){
  .bleed.ritual.flip{background:#F2F3F4}
  .bleed.ritual.flip img{object-position:40% 50%}
}

/* closing call to action */
.closer .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;margin-top:32px}

/* ---- cell demo (standalone) ------------------------------------------------------------- */
.demo-page{background:var(--night);color:#E6EAF4}
.demo-top{position:absolute;left:0;right:0;top:0;z-index:5;height:var(--nav-h)}
.demo-top .in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.demo-top .brand .lk{height:28px}
.demo-top .tlink{color:#E6EAF4;border-color:rgba(235,223,196,.22)}
.demo-top .tlink:hover{border-color:#fff}
.mechanism.demo{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + clamp(16px,3vh,40px)) 0 clamp(28px,4vh,48px)}
.mechanism.demo .disc{max-width:92ch}

/* ---- preferences ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .js .split .bar span{transform:none!important;transition:none!important}
}
@media (prefers-reduced-transparency: reduce){
  .ptag{background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none}
}
.tier .badge.good{background:var(--ink-2)}
.tier .save{text-transform:none;letter-spacing:.02em;font-size:12.5px}
/* design review fixes, 2026-10-19: small type floor */
.tier .badge,.pl,.ptag small{font-size:11.5px}