/* ETG Calculator tools page (page 1412). Design tokens, fonts and weights follow the supplied reference file. Every rule is scoped to #etgt. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-var.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/plex-sans-var.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

#etgt{
  box-sizing:border-box;
  --paper:#FFFFFF; --paper-2:#F4F6F9; --ink:#0B2A4E; --ink-soft:#3D5876; --ink-faint:#7E93AB; --line:#D7DEE7; --card:#FFFFFF;
  --amber:#0B2A4E; --amber-soft:#D6E0EC; --teal:#0B2A4E; --teal-soft:#D6E0EC; --flag:#A6402B; --ok:#3C7A5E;
  --serif:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
#etgt *{box-sizing:inherit}
#etgt svg{max-width:100%; display:block}
#etgt a{color:inherit}
#etgt h2,#etgt h3,#etgt p,#etgt ul,#etgt li,#etgt b{margin:0; padding:0}
#etgt h2,#etgt h3{color:inherit; font-family:var(--serif)}
#etgt .wrap{max-width:1280px; margin:0 auto; padding:0 clamp(24px,3.2vw,40px)}
#etgt section[id]{scroll-margin-top:16px}

/* ---------- hero (light: white background, no blue band, no glow or scan lines) ---------- */
#etgt .hero-dark{position:relative; overflow:hidden; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line); padding:env(safe-area-inset-top, 0px) 0 0}
#etgt .hero-inner{position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px, 5vw, 64px); align-items:center; padding-top:clamp(56px, 8vw, 96px); padding-bottom:clamp(48px, 7vw, 84px)}
@media (max-width:880px){#etgt .hero-inner{grid-template-columns:1fr}}
#etgt .eyebrow-live{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--ok); margin-bottom:18px}
#etgt .eyebrow-live .rec{width:7px; height:7px; border-radius:50%; background:var(--ok); animation:etgtBlink 1.6s ease-in-out infinite; display:inline-block}
@keyframes etgtBlink{0%,100%{opacity:1}50%{opacity:.25}}
#etgt .hero-dark .hero-title{font-family:var(--serif); font-weight:800; letter-spacing:-.025em; font-size:clamp(2.4rem, 5vw, 3.85rem); line-height:1.04; margin:0 0 18px; color:var(--ink)}
#etgt .hero-dark p.lede{font-size:1.08rem; color:var(--ink-soft); max-width:46ch; margin:0 0 28px}
#etgt .cta-row{display:flex; gap:14px; margin-bottom:34px; flex-wrap:wrap}
#etgt .btn-primary,#etgt .btn-ghost{font-family:var(--sans); font-weight:600; font-size:.94rem; padding:13px 22px; text-decoration:none; border:1px solid transparent}
#etgt .btn-primary{background:var(--ink); color:#fff}
#etgt .btn-primary:hover{background:var(--ink-soft); color:#fff}
#etgt .btn-ghost{border-color:var(--line); color:var(--ink)}
#etgt .btn-ghost:hover{border-color:var(--ink); color:var(--ink)}
#etgt .stat-row.dark{border-top:1px solid var(--line); padding-top:18px; gap:clamp(20px,4vw,40px); display:flex}
#etgt .stat{display:flex; flex-direction:column; gap:2px}
#etgt .stat .n{font-family:var(--mono); font-size:1.5rem; color:var(--ink)}
#etgt .stat .l{font-size:.82rem; color:var(--ink-faint)}
#etgt .n.roll{overflow:hidden; height:1.6rem; display:inline-block}
#etgt .n.roll span{display:block; animation:etgtRoll 4s steps(1) infinite}
@keyframes etgtRoll{0%,85%{transform:translateY(0)}90%{transform:translateY(-1.6rem)}95%{transform:translateY(0)}100%{transform:translateY(0)}}

/* device mockup (light card) */
#etgt .device{position:relative; background:var(--card); border:1px solid var(--line); box-shadow:0 30px 60px -32px rgba(11,42,78,0.28)}
#etgt .device-bar{display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; color:var(--ink-faint)}
#etgt .dot-status{width:7px; height:7px; border-radius:50%; background:var(--ok)}
#etgt .badge-flip{margin-left:auto; position:relative; height:1.3em; overflow:hidden; font-family:var(--mono); font-size:.68rem; width:5.4em; text-align:right}
#etgt .badge-flip b{display:block; font-weight:500; animation:etgtFlip 5s steps(1) infinite}
#etgt .badge-flip b:first-child{color:var(--flag)}
#etgt .badge-flip b:last-child{color:var(--ok); position:absolute; top:100%; right:0; animation:etgtFlip 5s steps(1) infinite}
@keyframes etgtFlip{0%,55%{transform:translateY(0)}60%,100%{transform:translateY(-1.3em)}}
#etgt .device-screen{padding:22px 18px 18px; --glow:var(--ink)}
#etgt .readout-chart{position:relative; height:190px}
#etgt .readout-chart svg{width:100%; height:100%; overflow:visible}
#etgt .curve-path{fill:none; stroke:var(--glow); stroke-width:2.4; stroke-linecap:round}
#etgt .curve-fill{fill:url(#etgtFillGrad); opacity:.55}
#etgt .threshold-line{stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:3 4}
#etgt .dot-main{width:9px; height:9px; border-radius:50%; background:var(--glow); box-shadow:0 0 0 5px rgba(11,42,78,0.12); offset-path:path("M6,150 C40,150 46,40 96,32 C150,24 180,120 240,132 C300,144 330,60 394,54"); animation:etgtTravel 5.5s ease-in-out infinite}
@keyframes etgtTravel{0%{offset-distance:0%}100%{offset-distance:100%}}
#etgt .device-inputs{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); margin-top:16px; border-top:1px solid var(--line)}
#etgt .di{background:var(--paper-2); padding:12px 10px; display:flex; flex-direction:column; gap:4px}
#etgt .di .dl{font-family:var(--mono); font-size:.62rem; color:var(--ink-faint)}
#etgt .di .dv{font-family:var(--mono); font-size:1.05rem; color:var(--ink)}
#etgt .di.result .dv{color:var(--ok)}


/* ---------- sections ---------- */
#etgt section.group{padding:clamp(30px,5vw,52px) 0}
#etgt .group-head{display:flex; align-items:baseline; gap:16px; margin-bottom:22px; border-bottom:1px solid var(--line); padding-bottom:14px}
#etgt .group-head h2{font-family:var(--serif); font-weight:800; font-style:normal; letter-spacing:-.01em; font-size:1.55rem; line-height:1.25; margin:0; color:var(--ink)}
#etgt .group-head .count{font-family:var(--mono); font-size:.8rem; color:var(--ink-faint)}
#etgt .group-head p{margin:0 0 0 auto; color:var(--ink-soft); font-size:.92rem; max-width:34ch; text-align:right}
@media (max-width:700px){#etgt .group-head{flex-wrap:wrap} #etgt .group-head p{text-align:left; margin-left:0}}
#etgt .grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media (max-width:980px){#etgt .grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:620px){#etgt .grid{grid-template-columns:1fr}}

/* prevent a dangling empty grid cell when a group's card count doesn't divide evenly */
#etgt #urine .grid > .card:last-child{grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto 1fr; align-items:center; column-gap:32px}
#etgt #urine .grid > .card:last-child .tag-row,#etgt #urine .grid > .card:last-child h3,#etgt #urine .grid > .card:last-child p.desc{grid-column:1}
#etgt #urine .grid > .card:last-child .viz{grid-column:2; grid-row:1 / span 3; height:100px}
#etgt #urine .grid > .card:last-child .card-foot{grid-column:1 / -1}
@media (max-width:620px){#etgt #urine .grid > .card:last-child{grid-template-columns:1fr} #etgt #urine .grid > .card:last-child .viz{grid-column:1; grid-row:auto}}
/* same rule for the other groups: at two columns an odd card count would leave one empty cell */
@media (max-width:980px) and (min-width:621px){#etgt #blood .grid > .card:last-child,#etgt #live .grid > .card:last-child,#etgt #more .grid > .card:last-child{grid-column:1 / -1}}

#etgt .card{background:var(--card); padding:20px 20px 18px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--ink); position:relative; transition:background .2s ease}
#etgt .card:hover{background:color-mix(in srgb, var(--card) 80%, var(--paper-2)); color:var(--ink)}
#etgt .card:focus-visible{outline:2px solid var(--amber); outline-offset:-2px}
#etgt .tag-row{display:flex; justify-content:space-between; align-items:center}
#etgt .tag{font-family:var(--mono); font-size:.68rem; letter-spacing:.02em; padding:3px 7px; border:1px solid var(--line); color:var(--ink-faint)}
#etgt .tag.urine{color:var(--amber); border-color:color-mix(in srgb, var(--amber) 45%, var(--line))}
#etgt .tag.blood{color:var(--teal); border-color:color-mix(in srgb, var(--teal) 45%, var(--line))}
#etgt .tag.live{color:var(--flag); border-color:color-mix(in srgb, var(--flag) 45%, var(--line))}
#etgt .tag.guide{color:var(--ink-soft)}
#etgt .card h3{font-family:var(--serif); font-weight:700; letter-spacing:-.01em; font-size:1.12rem; margin:0; line-height:1.25; color:var(--ink)}
#etgt .card p.desc{font-size:.88rem; color:var(--ink-soft); margin:0; min-height:2.6em}
#etgt .viz{height:78px; position:relative; margin-top:2px}
#etgt .viz svg{width:100%; height:100%; overflow:visible}
#etgt .card-foot{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:10px; border-top:1px solid var(--line); font-family:var(--mono); font-size:.76rem; color:var(--ink-faint)}
#etgt .card-foot .open{color:var(--ink); position:relative}
#etgt .card-foot .open::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
#etgt .card:hover .card-foot .open::after{transform:scaleX(1)}
#etgt .mini-curve{fill:none; stroke-width:2; stroke-linecap:round}
#etgt .bar-row{display:flex; align-items:flex-end; gap:6px; height:78px}
#etgt .bar{flex:1; background:var(--amber); opacity:.85; transform-origin:bottom; animation:etgtRise 3.6s ease-in-out infinite}
@keyframes etgtRise{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
#etgt .gauge-wrap{display:flex; align-items:center; justify-content:center; height:78px}
#etgt .needle{transform-origin:60px 60px; animation:etgtSweep 4s ease-in-out infinite}
@keyframes etgtSweep{0%{transform:rotate(-46deg)}50%{transform:rotate(46deg)}100%{transform:rotate(-46deg)}}
#etgt .ratio{height:78px; display:flex; flex-direction:column; justify-content:center; gap:10px}
#etgt .ratio-track{height:10px; background:var(--paper-2); position:relative; overflow:hidden}
#etgt .ratio-fill{position:absolute; top:0; left:0; bottom:0}
#etgt .ratio-fill.a{background:var(--amber); animation:etgtGrowA 4.4s ease-in-out infinite}
#etgt .ratio-fill.b{background:var(--teal); animation:etgtGrowB 4.4s ease-in-out infinite}
@keyframes etgtGrowA{0%,100%{width:14%}50%{width:34%}}
@keyframes etgtGrowB{0%,100%{width:55%}50%{width:85%}}
#etgt .ratio-legend{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.68rem; color:var(--ink-faint)}

/* ---------- features ---------- */
#etgt .features{padding:clamp(30px,5vw,52px) 0; border-top:1px solid var(--line); display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px, 5vw, 56px)}
@media (max-width:820px){#etgt .features{grid-template-columns:1fr}}
#etgt .features h2{font-family:var(--serif); font-weight:800; letter-spacing:-.01em; font-size:1.9rem; line-height:1.25; margin:0 0 14px; max-width:14ch; color:var(--ink)}
#etgt .features p{color:var(--ink-soft); max-width:42ch}
#etgt .feat-list{list-style:none; margin:0; padding:0; display:grid; gap:0}
#etgt .feat-list li{display:grid; grid-template-columns:28px 1fr; gap:14px; padding:16px 0; border-top:1px solid var(--line); font-size:.94rem; list-style:none}
#etgt .feat-list li:last-child{border-bottom:1px solid var(--line)}
#etgt .feat-list .idx{font-family:var(--mono); color:var(--ink-faint); font-size:.82rem}
#etgt .feat-list b{display:block; font-family:var(--serif); font-weight:700; letter-spacing:-.005em; font-size:1.02rem; margin-bottom:2px; color:var(--ink)}
#etgt .feat-list span.d{color:var(--ink-soft)}

/* ---------- disclaimer ---------- */
#etgt .disclaimer{margin:clamp(20px,4vw,40px) 0; border:1px solid var(--line); border-left:3px solid var(--amber); background:var(--card); padding:18px 22px; font-size:.88rem; color:var(--ink-soft)}
#etgt .disclaimer b{color:var(--ink); font-family:var(--serif); font-weight:700}

@media (prefers-reduced-motion: reduce){
  #etgt .hero-glow,#etgt .eyebrow-live .rec,#etgt .n.roll span,#etgt .badge-flip b,#etgt .dot-main,#etgt .bar,#etgt .needle,#etgt .ratio-fill{animation:none !important}
}

/* theme wrappers on this page only; the shared header and the theme footer are not touched */
.page-id-1412 .entry-header{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-id-1412 #content>.ast-container{max-width:none!important;width:100%!important;padding:0!important;margin:0!important;display:block!important}
.page-id-1412 #primary{width:100%!important;margin:0!important;padding:0!important}
.page-id-1412 .ast-article-single,.page-id-1412 .entry-content{margin:0!important;padding:0!important}
.page-id-1412 .site-main{margin:0!important;padding:0!important}
.page-id-1412 .entry-content>#etgt{max-width:none!important;width:100%!important;margin:0!important}