/* TestD customer dashboard (2 Oct 2026; rebuilt 7 Oct 2026, condensed and calmed the same day).
   The look of the app screens in the homepage phone: the warm brown gradient, glass cards and white sheets, Graphik,
   pure black and white neutrals, sand and peach for warmth, and one red (#FF0046) for the main action.
   Status colours match the app: green #35C66B in range, amber #F2A43C just outside, red #FF5A5F out of range.
   Small status text uses darker inks of the same three so it stays readable (4.5:1 or better).
   The results table borrows the range bar from the homepage's eight panels: amber, green, amber, with a black marker.
   Colour is kept for meaning only: the three status colours, the one red action, and the warm brown of the app screens.
   Panels, chips and tags are neutral sand and black, not a colour each. */
@font-face{font-family:Graphik;src:url(/etch/assets/fonts/Graphik-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Graphik;src:url(/etch/assets/fonts/Graphik-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:Graphik;src:url(/etch/assets/fonts/Graphik-Semibold.woff) format("woff");font-weight:600;font-display:swap}

:root{
  --ink:#000;--paper:#fff;--red:#FF0046;
  --g:#35C66B;--g-ink:#0B7A3B;--amb:#F2A43C;--a-ink:#8A5300;--rd:#FF5A5F;--rd-ink:#C8202A;
  --bar-g:#12A150;--bar-a:#E3A33C;
  --sand:#F4E4CF;--sand2:#FBF4EC;--peach:#F2C29A;--line:#F1E4DA;--line2:#E6D3C4;--muted:#856555;--grey:#77716C;
  --warm:radial-gradient(130% 120% at 18% 0%,#B8714A 0%,#7A3D22 45%,#3A1B0E 82%,#2E150B 100%);
  --r:28px;--ease:cubic-bezier(.16,1,.3,1);--side:184px;--gut:clamp(16px,1.8vw,24px);--toph:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Lenis drives smooth scrolling when it runs; native smooth anchors would fight it */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:#fff;color:#000;font-family:Graphik,system-ui,sans-serif;font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;caret-color:var(--red)}
::selection{background:var(--peach);color:#000}
html.modal-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
svg{flex:none}
:focus-visible{outline:2px solid #000;outline-offset:3px;border-radius:10px}
.hello :focus-visible,.ask :focus-visible{outline-color:#fff}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#000;color:#fff;padding:10px 16px;border-radius:99px;font-weight:600}
.skip:focus{top:12px}
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}

/* ---------- Shell: the rail on desktop, each item an icon with its name to the right ---------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:stretch;padding:20px 14px 16px;border-right:1px solid var(--line)}
.mark{display:block;align-self:flex-start;margin:0 0 24px 2px;border-radius:12px}
/* The mark, drawn exactly as the favicon. On hover the red tile turns a very light grey, the D slides away to the left and
   a black back arrow (a small chevron with a shaft) slides in from the right */
.side .mark svg{display:block;width:42px;height:42px;overflow:visible;fill:initial;stroke:none}
.mark .m-bg{fill:var(--red);transition:fill .35s var(--ease)}
.mark .m-d,.mark .m-back{transition:opacity .3s var(--ease),transform .5s var(--ease)}
.mark .m-back{fill:none;stroke:#000;stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(12px)}
.mark:hover .m-bg,.mark:focus-visible .m-bg{fill:#F0F0EF}
.mark:hover .m-d,.mark:focus-visible .m-d{opacity:0;transform:translateX(-12px)}
.mark:hover .m-back,.mark:focus-visible .m-back{opacity:1;transform:none}
/* Each item: the icon on the left, the name on the right. A name that runs long (Kit Journey, Order a Test) wraps to a
   second line rather than widening the rail. */
.side-nav,.side-foot{display:grid;gap:3px;width:100%}
.side-nav a,.side-foot a,.side-foot button{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;min-height:42px;padding:8px 12px;border-radius:12px;font-size:14px;font-weight:500;line-height:1.15;text-align:left;transition:background .2s,color .2s}
.side-nav a:hover,.side-foot a:hover,.side-foot button:hover{background:var(--sand2)}
.side-nav a.on{background:#000;color:#fff}
.side svg,.tabbar svg,.top .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side-foot{margin-top:auto}
/* the account: the picture with the first name beside it */
.side-foot .me{gap:10px;padding:6px 8px;margin-top:4px}
.side-foot .me .av{width:34px;height:34px;font-size:14px}
.side-foot .me:hover .av{box-shadow:0 0 0 3px var(--sand)}
.me-t{display:grid;min-width:0}
.me-t b{font-size:14px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-t small{font-size:12px;font-weight:400;color:var(--grey)}
.side{overflow-y:auto;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.side-sep{width:auto;height:0;margin:8px 12px;border:0;border-top:1px solid var(--line2)}
/* short screens: the rows tighten so the whole rail still fits */
@media (max-height:820px){
  .mark{margin-bottom:16px}
  .side-nav a,.side-foot a,.side-foot button{min-height:38px}
  .side-sep{margin:5px 12px}
}
.top{display:none}
.tabbar{display:none}

/* The avatar: their picture, or their first initial on peach */
.av{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--peach);color:#000;font-weight:600;font-size:16px;overflow:hidden;flex:none;transition:box-shadow .2s}
.av img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.av svg{width:55%;height:55%;fill:none;stroke:#000;stroke-width:1.8;stroke-linecap:round}
.av.lg{width:64px;height:64px;font-size:26px;box-shadow:0 0 0 3px rgba(255,255,255,.28)}

main{width:100%;max-width:1360px;padding:28px clamp(20px,3vw,44px) 56px}

/* ---------- Buttons, pills, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:99px;font-weight:600;font-size:15px;white-space:nowrap;transition:transform .3s var(--ease),background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn.red{background:var(--red);color:#fff}
.btn.ink{background:#000;color:#fff}
.btn.white{background:#fff;color:#000}
.btn.line{box-shadow:inset 0 0 0 1.5px currentColor}
.btn.sm{height:40px;padding:0 18px;font-size:14px}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.btn[disabled]{cursor:default;transform:none}
.pill{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:8px}
.pill.white{background:#fff;color:#000}
.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;background:#000;color:#fff;white-space:nowrap}
.chip.soft{background:var(--sand);color:#000}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.g{color:var(--g-ink)}.a{color:var(--a-ink)}.rd{color:var(--rd-ink)}

/* ---------- 1. The greeting on the left, a short summary of blood, wearables and DNA on the right ---------- */
.hello{position:relative;overflow:hidden;border-radius:var(--r);background:var(--warm);color:#fff;padding:clamp(24px,2.8vw,40px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(24px,3.4vw,56px);align-items:center}
.hello > *:not(.topo){position:relative;z-index:1}
/* The homepage's topographic map, very faint, off the top right corner, drawn as a live vector so its rings can move */
.topo{position:absolute;right:calc(14% - 220px);top:-62%;width:72%;height:215%;z-index:0;pointer-events:none;opacity:.3;
  -webkit-mask-image:radial-gradient(75% 70% at 70% 35%,#000 40%,transparent 100%);mask-image:radial-gradient(75% 70% at 70% 35%,#000 40%,transparent 100%)}
.topo svg{display:block;width:100%;height:100%;overflow:visible}
.topo .ring{transform-box:view-box;transform-origin:677px 684px;transform:scale(var(--s,1.3));opacity:0;vector-effect:non-scaling-stroke;
  transition:transform var(--t,2.2s) cubic-bezier(.16,1,.3,1) var(--d,0s),opacity 1.1s ease var(--d,0s)}
.topo.in .ring{transform:none;opacity:1}
.topo .tx{opacity:0;transition:opacity 1.4s ease 1.5s}
.topo.in .tx{opacity:1}
.who{display:flex;align-items:center;gap:12px}
.hello .date{font-size:13.5px;font-weight:400;color:var(--peach)}
.next-line{font-size:13.5px;font-weight:400;line-height:1.3;color:var(--peach)}
.next-line b{display:block;font-size:15px;font-weight:600;color:#fff}
/* The greeting's question box: the Ask row's field, sized to sit beside See your results */
.askf.hero-ask{margin:0;padding:0;flex:1 1 320px;max-width:440px}
.hero-ask input{height:48px;padding-right:54px}
.hero-ask button{right:5px;bottom:5px;width:38px;height:38px}
.hello h1{font-size:clamp(44px,4.8vw,72px);font-weight:500;letter-spacing:-.04em;line-height:.95;margin:18px 0 14px;overflow-wrap:break-word}
.hello .msg{font-size:clamp(16px,1.3vw,18px);line-height:1.35;font-weight:400;color:rgba(255,255,255,.86)}
.attn{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:clamp(16px,1.3vw,18px);font-weight:500;line-height:1.35}
.warn{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.hello .ctas{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;margin-top:22px}
.tag{font-style:normal;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.16);white-space:nowrap}
.glance{display:grid;gap:8px}
.glance a{display:grid;grid-template-columns:72px minmax(0,1fr) 16px;gap:14px;align-items:center;padding:12px 14px 12px 12px;border-radius:18px;background:rgba(46,21,11,.38);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);transition:background .2s}
/* The charts in the summary: a ring per row and the number inside it, counting up from zero */
.gx{position:relative;display:block;width:72px;height:72px}
.gx svg{width:72px;height:72px;transform:rotate(-90deg)}
.gx .trk{fill:none;stroke:rgba(255,255,255,.14);stroke-width:5}
.gx .arc{fill:none;stroke-width:5;stroke-dasharray:0 169.65;transition:stroke-dasharray 1.3s var(--ease)}
.gx .gn{position:absolute;inset:0;display:grid;place-items:center;font-size:23px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gx .gn.sm{font-size:16px}
.gx .gn.lg{font-size:30px}
.glance a:hover{background:rgba(46,21,11,.24)}
.gi{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.12)}
.gi svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.glance b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.glance small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:#F3D3BD}
.go{width:16px;height:16px;fill:none;stroke:rgba(255,255,255,.7);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.glance a:hover .go{transform:translateX(3px)}

/* ---------- 1b. Three calls to action: the homepage photograph on the left on its own colour, the words, an arrow ---------- */
.ctas3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:var(--gut)}
.cta{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;height:190px;border-radius:24px;overflow:hidden;background:var(--c);color:#000;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.cta:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(46,21,11,.18)}
.cta.dk{color:#fff}
.cta-img{position:relative;height:100%;aspect-ratio:1/1;overflow:hidden}
.cta-img img{width:100%;height:100%;object-fit:cover;transform-origin:30% 50%;transition:transform .6s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,#000 74%,transparent 99%);mask-image:linear-gradient(90deg,#000 74%,transparent 99%)}
.cta:hover .cta-img img{transform:scale(1.05)}
.cta-t{display:flex;flex-direction:column;gap:5px;padding:0 4px 0 12px;min-width:0}
.cta b{white-space:nowrap;font-size:clamp(18px,1.5vw,23px);font-weight:600;letter-spacing:-.025em;line-height:1.08}
.cta small{font-size:13.5px;font-weight:400;line-height:1.3;opacity:.78}
.cta-go{display:grid;place-items:center;width:40px;height:40px;margin-right:16px;border-radius:50%;background:rgba(255,255,255,.55);transition:transform .35s var(--ease),background .2s}
.cta.dk .cta-go{background:rgba(255,255,255,.18)}
.cta-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cta:hover .cta-go{transform:translateX(4px);background:#fff}
.cta.dk:hover .cta-go{background:rgba(255,255,255,.3)}

/* ---------- Cards ---------- */
.card{border-radius:var(--r);background:#fff;border:1px solid var(--line);padding:clamp(22px,2.3vw,32px);margin-top:var(--gut)}
.card h2{font-size:clamp(28px,2.5vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.card h3{font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.card .sub{margin-top:10px;font-size:15px;font-weight:400;color:#000;max-width:42em;line-height:1.5}
.row-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hh{display:flex;align-items:center;gap:14px}
.hi{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--sand2);flex:none}
.hi svg{width:21px;height:21px;fill:none;stroke:#000;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ask .hi{background:rgba(255,255,255,.12)}
.ask .hi svg{stroke:#fff}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:15px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--line2)}
.more:hover{text-decoration-color:currentColor}
.more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.more[aria-expanded="true"] svg{transform:rotate(180deg)}
.foot{margin-top:28px;font-size:12.5px;font-weight:400;color:#000;max-width:52em}

/* ---------- 2. Blood results ---------- */
.res-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:start}
.more-text{display:grid;gap:10px;margin-top:12px;max-width:40em}
.more-text[hidden]{display:none}
.more-text p{font-size:15px;font-weight:400;line-height:1.5}
.tally{display:grid;grid-template-columns:120px auto;gap:6px 22px;align-items:center;position:relative}
.tally svg{width:120px;height:120px}
.tally .arc{transition:stroke-dasharray 1.1s var(--ease)}
.tally-n{position:absolute;left:0;top:0;width:120px;height:120px;display:grid;place-content:center;text-align:center}
.tally-n b{font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:1}
.tally-n small{font-size:12px;font-weight:400;color:var(--grey);margin-top:2px}
.tally dl{display:grid;gap:8px;min-width:160px}
.tally dl div{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.tally dl div:last-child{border-bottom:0;padding-bottom:0}
.tally dt{font-size:14px;font-weight:400;color:#000}
.tally dd{min-width:28px;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1}

.filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:26px}
.fchip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:99px;background:var(--sand2);font-size:14px;font-weight:500;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.fchip:hover{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)}
.fchip small{font-size:12.5px;font-weight:600;opacity:.62;font-variant-numeric:tabular-nums}
.fchip[aria-pressed="true"]{background:#000;color:#fff;box-shadow:none}
.fchip[aria-pressed="true"] small{opacity:.75}

.rtable{width:100%;margin-top:18px;border-collapse:collapse;table-layout:fixed}
.rtable th{text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);padding:0 14px 10px 0;border-bottom:1px solid var(--line)}
.rtable th:nth-child(1){width:32%}.rtable th:nth-child(2){width:18%}.rtable th:nth-child(3){width:32%}.rtable th:nth-child(4){width:18%;padding-right:0}
.rtable:not(.dtable) th:nth-child(1){width:20%}.rtable:not(.dtable) th:nth-child(2){width:14%}.rtable:not(.dtable) th:nth-child(3){width:14%}
.rtable:not(.dtable) th:nth-child(4){width:18%}.rtable:not(.dtable) th:nth-child(5){width:12%;padding-right:14px}.rtable:not(.dtable) th:nth-child(6){width:14%}
/* small laptops, beside the menu: the compare heading keeps its room, the sparkline gives a little */
@media (min-width:1024px) and (max-width:1279px){
  .rtable:not(.dtable) th:nth-child(1){width:19%}.rtable:not(.dtable) th:nth-child(2){width:12%}.rtable:not(.dtable) th:nth-child(3){width:19%}
  .rtable:not(.dtable) th:nth-child(4){width:16%}.rtable:not(.dtable) th:nth-child(5){width:13%;padding-right:10px}.rtable:not(.dtable) th:nth-child(6){width:12%}
  .rtable:not(.dtable) td:nth-child(5){padding-right:10px}
  .rtable .st{padding:5px 8px}
}
.rtable th.th-go{width:52px;padding-right:0}
.dtable th:nth-child(1){width:30%}.dtable th:nth-child(2){width:18%}.dtable th:nth-child(3){width:28%}.dtable th:nth-child(4){width:18%}
/* Sorting from the column headings: an up and down chevron, the one in use goes black */
.sorter{display:inline-flex;align-items:center;gap:3px;font-size:inherit;font-weight:inherit;color:inherit;cursor:pointer;border-radius:6px;transition:color .2s}
.sorter:hover{color:#000}
.si{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.si path{opacity:.4;transition:opacity .2s}
[aria-sort] .sorter{color:#000}
[aria-sort="ascending"] .si .su,[aria-sort="descending"] .si .sd{opacity:1}
[aria-sort="ascending"] .si .sd,[aria-sort="descending"] .si .su{opacity:.15}
.th-cmp{white-space:nowrap}
/* The pop-up picker: the button reads like the column heading; the list is a white rounded card with a soft shadow */
.pop{position:relative;display:inline-block}
.pop-btn{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted);padding:3px 4px 3px 0;border-radius:6px;white-space:nowrap;transition:color .2s}
.pop-btn:hover,.pop-btn[aria-expanded="true"]{color:#000}
.pop-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.pop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.pop-list{position:absolute;left:-10px;top:calc(100% + 8px);z-index:30;min-width:236px;margin:0;padding:6px;list-style:none;border-radius:16px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.05),0 18px 40px rgba(46,21,11,.16),0 3px 8px rgba(46,21,11,.08);animation:popin .22s var(--ease) both;outline:none}
@keyframes popin{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.pop-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:center;padding:9px 12px 9px 8px;border-radius:11px;cursor:pointer;color:#000;text-align:left;white-space:nowrap}
.pop-list li.act{background:#F3F3F2}
.pop-list li svg{width:16px;height:16px;fill:none;stroke:#000;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.pop-list li[aria-selected="true"] svg{opacity:1}
.pop-list li b{display:block;font-size:14px;font-weight:500}
.pop-list li[aria-selected="true"] b{font-weight:600}
.pop-list li small{display:block;margin-top:1px;font-size:12px;font-weight:400;color:var(--grey)}
/* The change since the compared result */
.chg{display:block}
.chg b{font-size:14.5px;font-weight:500;font-variant-numeric:tabular-nums}
.vwrap{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 9px}
.dl{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--grey);white-space:nowrap}
.dl svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dl.good{color:var(--g-ink)}.dl.bad{color:var(--rd-ink)}
.chg-l{display:none;font-weight:400;color:var(--grey)}
/* The past year in each row */
.spark{display:block;width:112px;max-width:100%;height:34px;overflow:visible}
.spark .sl{fill:none;stroke:#1a1a1a;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;opacity:.65}
.spark .sp{fill:#1a1a1a;opacity:.55}
.rtable td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.rtable td:last-child{padding-right:0}
.rtable tr.r{cursor:pointer;transition:background .2s}
.rtable tr.r td:first-child{padding-left:12px}
.rtable tr.r td:last-child{padding-right:12px}
@media (hover:hover){.rtable tr.r:hover td{background:#f5f5f5}}
.nm{display:flex;align-items:center;gap:10px;width:100%;text-align:left}
.go-td{text-align:right}
.rgo{display:inline-grid;place-items:center;width:28px;height:28px;transition:transform .3s var(--ease)}
.rgo svg{width:20px;height:20px;fill:none;stroke:#000;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.rtable tr.r:hover .rgo{transform:translateX(3px)}
.nm svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.nm b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:transparent;transition:text-decoration-color .2s}
.nm:hover b{text-decoration-color:currentColor}
.ptag{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--grey)}
.val{font-size:17px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.val small{font-size:12.5px;font-weight:400;color:var(--grey);margin-left:4px;letter-spacing:0}
.rng{display:grid;gap:7px}
.rbar{position:relative;height:5px;border-radius:9px;background:var(--bg)}
.rbar i{position:absolute;top:-4px;left:var(--x,50%);width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:#000;border:2.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rng small{font-size:12px;font-weight:400;color:var(--grey);font-variant-numeric:tabular-nums}
.st{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:99px;white-space:nowrap}
.st.in{background:#E7F6EC;color:var(--g-ink)}
.st.near{background:#FCEFD9;color:var(--a-ink)}
.st.out{background:#FFE6E7;color:var(--rd-ink)}
/* The blood detail view: what to know and how to keep it on the left, the past year's chart on the right, what it
   affects across the bottom, then Learn more. (DNA keeps the two-column layout below.) */
.det-in.det-b{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);grid-template-areas:"txt chart" "rel chart" "learn learn";align-items:start}
.det-b .det-rel .rel{max-width:660px}
.det-b .det-txt{grid-area:txt}.det-b .det-chart{grid-area:chart}.det-b .det-rel{grid-area:rel}.det-b .learn{grid-area:learn}
.det-chart{padding:18px 18px 12px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.det-chart h4{display:flex;flex-direction:column;gap:2px}
.det-chart h4 small{font-size:13px;font-weight:400;letter-spacing:0;color:var(--grey)}
.big{display:block;width:100%;height:auto;margin-top:4px;overflow:visible;font-family:Graphik,system-ui,sans-serif}
.big .band{fill:rgba(53,198,107,.09)}
.big .gy{stroke:rgba(0,0,0,.07);stroke-width:1}
.big .gx{stroke:rgba(0,0,0,.035);stroke-width:1}
.big .ax{stroke:rgba(0,0,0,.35);stroke-width:1}
.big .tk{stroke:rgba(0,0,0,.35);stroke-width:1}
.big .ytk,.big .yunit{fill:var(--grey);font-size:10.5px;font-variant-numeric:tabular-nums}
.big .yunit{font-weight:600}
.big .edge{stroke:#35C66B;stroke-opacity:.8;stroke-width:1;stroke-dasharray:3 3}
.big .etx{fill:var(--g-ink);font-size:10.5px;font-weight:500}
.big .mtx{fill:#3a3a3a;font-size:10px}
.big .yrx{fill:var(--grey);font-size:10px;font-weight:600;letter-spacing:.02em}
.big .today{stroke:#000;stroke-opacity:.35;stroke-width:1;stroke-dasharray:2 3}
.big .ttx{fill:#000;font-size:10px;font-weight:600}
.big .ln{fill:none;stroke:#111;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:drawln 1.2s var(--ease) .1s forwards}
@keyframes drawln{to{stroke-dashoffset:0}}
.big .pt{fill:#fff;stroke:#111;stroke-width:1.6}
.big .pt.now{stroke:#fff;stroke-width:2.5}
.big .vtx{fill:#000;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.big .vtx.now{font-size:12.5px}
.rel-row{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
/* Phones: the order and compare controls sit above the table */
.tbar{display:none}
.det-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px 52px;padding:28px 12px 34px}
.det-in h4{margin:0 0 10px;font-size:16.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:#000}
.det-in p{font-size:14.5px;font-weight:400;line-height:1.6;color:#000;max-width:62ch}
.det-in .blk + .blk{margin-top:28px}
.rel{display:grid;gap:8px}
.rel button,.rel a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;align-items:center;width:100%;padding:12px 14px;border-radius:14px;background:#F6F6F5;text-align:left;transition:background .2s,box-shadow .2s}
.rel button:hover,.rel a:hover{background:#EFEFEE}
.rel b{font-size:14px;font-weight:600}
.rel .rv{font-size:13px;font-weight:500;color:var(--grey);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rel .rv.near{color:var(--a-ink)}.rel .rv.out{color:var(--rd-ink)}
.rel small{grid-column:1 / -1;font-size:12.5px;font-weight:400;line-height:1.4;color:#000}
.rel .none{padding:0;font-size:14px;text-align:left}
.learn{grid-column:1 / -1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line)}
.learn a{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--line2)}
.learn a:hover{text-decoration-color:currentColor}
.learn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.learn span{font-size:12.5px;font-weight:400;color:var(--grey)}
.det-in .learn{max-width:none}
.pgroup td{padding:20px 0 8px;border-bottom:0}
.pgroup span{display:inline-flex;align-items:baseline;gap:8px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.pgroup small{font-size:12.5px;font-weight:600;opacity:.6}
.res-foot{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:20px}
.res-foot p{font-size:12.5px;font-weight:400;color:#000}

/* ---------- 3. Wearables: the devices on the left, the week's data on the right ---------- */
.wear-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px 24px;flex-wrap:wrap}
.wear-head > div{flex:1 1 320px}
.wear.is-empty .wear-head .btn{display:none}
.wear-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,2.4vw,36px);margin-top:24px;align-items:start}
.wear.is-empty .wear-body{grid-template-columns:minmax(0,1fr)}
.lab{font-size:14.5px !important;font-weight:600;letter-spacing:0 !important;margin-bottom:10px}
.devices{display:grid;gap:8px}
.dev{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:10px;border-radius:20px;background:var(--sand2);animation:in .5s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.pic{width:48px;height:48px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.pic img{width:86%;height:86%;object-fit:contain}
.dev h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.dev .sy{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--grey);white-space:nowrap}
.dev .sy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dev .sy .spin{width:12px;height:12px;border-width:1.8px}
.dev .acts{display:flex;align-items:center;gap:0}
.dev .acts button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:99px;font-size:13px;font-weight:600;white-space:nowrap}
.dev .acts button:hover{background:#fff}
.dev .acts button[disabled]{opacity:.5;cursor:default}
.dev .acts svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dev .acts .rm{font-size:12.5px;font-weight:500;color:var(--grey);padding:0 8px}
.dev .acts .rm:hover{background:none;color:#000;text-decoration:underline;text-underline-offset:3px}
.dev .acts .yes{background:#000;color:#fff}
.dev .acts .yes:hover{background:#000}
.dev .acts .q{font-size:13px;font-weight:600;padding:0 6px}
.empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;padding:20px;border-radius:20px;background:var(--sand2)}
.empty .trio{display:flex}
.empty .trio span{width:64px;height:64px;border-radius:18px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px var(--sand2)}
.empty .trio span + span{margin-left:-14px}
.empty .trio img{width:80%;height:80%;object-fit:contain}
.empty h3{font-size:17px;font-weight:600}
.empty p{margin-top:5px;font-size:14px;font-weight:400;color:#000}
.empty .btn{margin-top:14px}

.metrics{padding:22px;border-radius:22px;background:var(--sand2)}
.metrics[hidden]{display:none}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{height:38px;padding:0 15px;border-radius:99px;background:#fff;font-size:14px;font-weight:500;transition:background .2s,color .2s}
.seg button:hover{background:var(--sand)}
.seg button[aria-selected="true"]{background:#000;color:#fff}
.mval{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-top:22px;flex-wrap:wrap}
.mval b{display:block;font-size:clamp(40px,4vw,54px);font-weight:500;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.mval b small{font-size:16px;font-weight:400;letter-spacing:0;margin-left:8px}
.mcap{margin-top:8px;font-size:13.5px;font-weight:400;color:var(--grey)}
.msrc{text-align:right}
.msrc .chip.soft{background:#fff}
.delta{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--g-ink)}
.chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,1vw,12px);height:170px;margin-top:22px}
.chart .bar{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-width:0}
.chart .bar i{display:block;border-radius:10px;background:var(--sand);height:var(--h,0%);min-height:10px;transition:height .8s var(--ease)}
.chart .bar.today i{background:var(--g)}
.chart .bar span{font-size:12px;font-weight:400;color:var(--grey);text-align:center}
.chart .bar.today span{color:#000;font-weight:600}
.insight{display:flex;gap:14px;align-items:flex-start;margin-top:20px;padding:14px 16px;border-radius:18px;background:var(--warm);color:#fff}
.insight em{font-style:normal;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.16);white-space:nowrap;margin-top:1px}
.insight p{font-size:14.5px;font-weight:400;line-height:1.4}

/* ---------- 4. DNA ---------- */
.dna-sum{display:grid;gap:8px;min-width:210px}
.dna-sum div{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.dna-sum div:last-child{border-bottom:0;padding-bottom:0}
.dna-sum dt{font-size:14px;font-weight:400;color:#000}
.dna-sum dd{min-width:28px;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.dtable{margin-top:22px}
.gene{font-size:14.5px;font-weight:600;letter-spacing:.01em}
.gene small{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--grey);letter-spacing:0}
.dres{font-size:14.5px;font-weight:500;line-height:1.3}
.st.watch{background:#FCEFD9;color:var(--a-ink)}
.st.typ{background:var(--sand2);color:#000;box-shadow:inset 0 0 0 1px var(--line2)}

/* ---------- 5. Ask about your results: the athlete and the graph on the left third, the questions on the right ---------- */
.ask{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);margin-top:var(--gut);border-radius:var(--r);background:var(--warm);color:#fff;overflow:hidden;min-height:480px}
.ask::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ask-art{position:relative;z-index:1;min-height:100%}
.ask-graph{position:absolute;left:-6%;width:122%;top:10%;aspect-ratio:680/350;z-index:0;pointer-events:none;opacity:.9}
.ask-graph svg{width:100%;height:100%;overflow:visible}
.ask-graph{position:absolute;left:41%;width:57%;top:30px;aspect-ratio:680/350;z-index:1;pointer-events:none}
.ask-graph svg{width:100%;height:100%;overflow:visible}
.ask-graph .g{animation:lgfade 6.4s linear infinite}
.ask-graph .lgline{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:lgdraw 6.4s linear infinite;filter:drop-shadow(0 0 8px rgba(255,255,255,.55))}
.ask-graph .lgdot,.ask-graph .lgping,.ask-graph .lgstart{transform-box:fill-box;transform-origin:center}
.ask-graph .lgstart{fill:none;stroke:#fff;stroke-width:2;animation:lgstart 6.4s ease-out infinite;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
.ask-graph .lgdot{fill:#fff;animation:lgdot 6.4s ease-out infinite;filter:drop-shadow(0 0 10px rgba(255,255,255,.9))}
.ask-graph .lgping{fill:none;stroke:#fff;stroke-width:1.8;opacity:0;animation:lgping 6.4s ease-out infinite}
.ask-graph .lgtick{stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;animation-duration:6.4s;animation-timing-function:ease-out;animation-iteration-count:infinite}
.ask-graph .lgtick.t1{animation-name:lgtick1}.ask-graph .lgtick.t2{animation-name:lgtick2}.ask-graph .lgtick.t3{animation-name:lgtick3}.ask-graph .lgtick.t4{animation-name:lgtick4}.ask-graph .lgtick.t5{animation-name:lgtick5}
@keyframes lgtick1{0%,17.7%{opacity:0;transform:scaleY(.7)}20.7%{opacity:.85;transform:scaleY(1.05)}24.2%{opacity:.5;transform:scaleY(1)}40.2%{opacity:.26}55.2%{opacity:.46}71.2%{opacity:.28}90%{opacity:.42}95%,100%{opacity:0}}
@keyframes lgtick2{0%,25.3%{opacity:0;transform:scaleY(.7)}28.3%{opacity:.85;transform:scaleY(1.05)}31.8%{opacity:.5;transform:scaleY(1)}47.8%{opacity:.26}62.8%{opacity:.46}78.8%{opacity:.28}90%{opacity:.42}95%,100%{opacity:0}}
@keyframes lgtick3{0%,33.0%{opacity:0;transform:scaleY(.7)}36.0%{opacity:.85;transform:scaleY(1.05)}39.5%{opacity:.5;transform:scaleY(1)}55.5%{opacity:.26}70.5%{opacity:.46}86.5%{opacity:.28}90%{opacity:.42}95%,100%{opacity:0}}
@keyframes lgtick4{0%,40.7%{opacity:0;transform:scaleY(.7)}43.7%{opacity:.85;transform:scaleY(1.05)}47.2%{opacity:.5;transform:scaleY(1)}63.2%{opacity:.26}78.2%{opacity:.46}88.0%{opacity:.28}90%{opacity:.42}95%,100%{opacity:0}}
@keyframes lgtick5{0%,48.3%{opacity:0;transform:scaleY(.7)}51.3%{opacity:.85;transform:scaleY(1.05)}54.8%{opacity:.5;transform:scaleY(1)}70.8%{opacity:.26}85.8%{opacity:.46}88.0%{opacity:.28}90%{opacity:.42}95%,100%{opacity:0}}
@keyframes lgfade{0%,4%{opacity:0}9%{opacity:1}90%{opacity:1}97%,100%{opacity:0}}
@keyframes lgstart{0%{transform:scale(0);opacity:0}7%{transform:scale(1.25);opacity:1}12%,100%{transform:scale(1);opacity:1}}
@keyframes lgdraw{0%,10%{stroke-dashoffset:1000}56%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes lgdot{0%,54%{transform:scale(0)}61%{transform:scale(1.3)}67%,100%{transform:scale(1)}}
@keyframes lgping{0%,56%{transform:scale(1);opacity:0}60%{opacity:.8}86%,100%{transform:scale(3.6);opacity:0}}
.ask-graph{left:0;width:100%;top:auto;bottom:34%}
.ask-graph{top:22px;bottom:auto}
@media (prefers-reduced-motion:reduce){.ask-graph .g,.ask-graph .lgline,.ask-graph .lgdot,.ask-graph .lgping,.ask-graph .lgstart,.ask-graph .lgtick{animation:none}.ask-graph .lgline{stroke-dashoffset:0}.ask-graph .lgping{opacity:0}.ask-graph .lgtick{opacity:.34}}
.ask-man{position:absolute;z-index:1;left:50%;bottom:-23%;height:130%;width:auto;max-width:none;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
.ask-main{position:relative;z-index:2;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,38px) clamp(24px,3vw,48px) clamp(24px,2.6vw,38px) clamp(28px,4vw,64px)}
.ask h2{font-size:clamp(24px,2.1vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.qa-sub{margin-top:10px;font-size:14.5px;font-weight:400;line-height:1.45;color:#F3D3BD;max-width:40em}
.thread{display:flex;flex-direction:column;gap:10px;margin-top:16px;max-height:340px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:rgba(255,255,255,.25) transparent}
.thread:empty{display:none}
.bub{max-width:88%;padding:11px 14px;border-radius:18px;font-size:14.5px;font-weight:400;line-height:1.5;animation:in .45s var(--ease) both}
.bub.me{align-self:flex-end;background:#fff;color:#000;border-bottom-right-radius:6px}
.bub.ai{align-self:flex-start;background:rgba(255,255,255,.12);border-bottom-left-radius:6px}
.bub.ai .who-ai{display:block;font-size:12px;font-weight:600;color:#F9C9A8;margin-bottom:4px}
.bub.wait{display:inline-flex;align-items:center;gap:9px;color:#F3D3BD}
.sugs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.sugs button{min-height:36px;padding:7px 14px;border-radius:99px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32);font-size:14px;font-weight:400;line-height:1.25;text-align:left;transition:background .2s,box-shadow .2s}
.sugs button:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.sugs button[disabled]{opacity:.5;cursor:default}
.askf{position:relative;margin-top:auto;padding-top:16px}
.askf input{width:100%;height:52px;border:0;border-radius:99px;padding:0 60px 0 20px;background:#fff;color:#000;font-size:16px;font-weight:400;-webkit-appearance:none;appearance:none}
.askf input::placeholder{color:var(--grey)}
.askf input:focus{outline:2px solid #fff;outline-offset:2px}
.askf button{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;transition:transform .3s var(--ease),opacity .2s}
.askf button:hover{transform:scale(1.05)}
.askf button[disabled]{opacity:.45;transform:none;cursor:default}
.askf button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.qa-note{margin-top:12px;font-size:12px;font-weight:400;line-height:1.4;color:rgba(255,255,255,.72)}

/* ---------- 2b. Subscribe: the Ask row's shape on a blue-grey charcoal, with the offer and a ferritin chart ---------- */
.subrow{min-height:460px}
.ask.slate{background:radial-gradient(130% 120% at 18% 0%,#66798A 0%,#3B4855 46%,#212B35 82%,#19212A 100%)}
.slate .qa-sub{color:#CBD6E1}
.sub-man{height:118%;bottom:-6%}
.sub-main{justify-content:center}
.sub-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:18px clamp(24px,3vw,40px);align-items:start}
.sub-grid .sub-h{grid-column:1 / -1}
.sub-h{font-size:clamp(32px,3.2vw,48px) !important;font-weight:500;letter-spacing:-.04em !important;line-height:.98 !important}
.sub-copy .qa-sub{margin-top:0}
.ticks{display:grid;gap:10px;margin-top:20px}
.ticks li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:400;line-height:1.35}
.ticks svg{width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(255,255,255,.14);fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sub-ctas{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:26px}
.sub-ctas .btn.line{color:#fff}
/* The chart: a hairline grid, the in-range zone as a soft green wash, the bottom of the range as a fine dashed line,
   today's reading pulsing, and the goal line drawing in left to right in a red-to-green gradient with a soft glow */
.trend2{margin:0;padding:13px 15px 11px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 50px rgba(8,12,18,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:0}
.trend2 figcaption b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.trend2 figcaption small{display:block;margin-top:0;font-size:12.5px;font-weight:400;color:#CBD6E1}
.trend2 svg{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.trend2 .grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.trend2 .base{stroke:rgba(255,255,255,.18);stroke-width:1}
.trend2 .thr{stroke:#7FE3AA;stroke-opacity:.55;stroke-width:1;stroke-dasharray:2 4}
.trend2 .thr-t,.trend2 .goal-t{fill:#9FE9BE;font-size:10.5px;font-family:Graphik,system-ui,sans-serif;font-weight:500;letter-spacing:.01em}
.trend2 .goal-t{fill:rgba(255,255,255,.7)}
.trend2 .goal{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:1 6;filter:drop-shadow(0 0 6px rgba(255,190,140,.45))}
.trend2 .area{opacity:.9}
.trend2 .nxt{fill:#25303B;stroke:rgba(255,255,255,.75);stroke-width:1.5}
.trend2 .now{fill:#FF5A5F;stroke:#fff;stroke-width:2}
.trend2 .now-t{fill:#fff;font-size:12px;font-family:Graphik,system-ui,sans-serif;font-weight:600}
.trend2 .ping{fill:none;stroke:#FF5A5F;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3.2);opacity:0}}
.trend2 .reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s var(--ease) .2s}
.trend2.in .reveal{clip-path:inset(0 0 0 0)}
.trend-x{display:flex;justify-content:space-between;margin-top:2px;padding:0 2px;font-size:12px;font-weight:400;color:#CBD6E1}
.trend-x span:first-child{color:#fff;font-weight:600}

/* ---------- Add a wearable ---------- */
dialog.add{width:min(580px,calc(100vw - 32px));max-width:none;max-height:min(780px,calc(100vh - 48px));border:0;border-radius:var(--r);padding:0;background:#fff;color:#000;box-shadow:0 30px 90px rgba(46,21,11,.35);overflow:hidden}
dialog.add::backdrop{background:rgba(46,21,11,.55)}
dialog.add[open]{animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.add-in{display:flex;flex-direction:column;max-height:inherit}
.add-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:28px 28px 0}
.add-head h2{font-size:30px;font-weight:500;letter-spacing:-.03em;line-height:1.05}
.add-head p{margin-top:8px;font-size:14.5px;font-weight:400;color:#000}
.x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sand2)}
.x:hover{background:var(--sand)}
.x svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:2;stroke-linecap:round}
.plist{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 12px}
.prov{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 12px;border-radius:18px}
.prov:hover{background:var(--sand2)}
.prov .pic{width:52px;height:52px;border-radius:14px;background:var(--sand2)}
.prov .pic img{width:80%;height:80%}
.prov:hover .pic{background:#fff}
.prov h3{font-size:16px;font-weight:600;line-height:1.2}
.prov p{margin-top:3px;font-size:13px;font-weight:400;color:var(--grey)}
.prov .btn{height:38px;padding:0 16px;font-size:14px;min-width:104px}
.prov .done{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--g-ink);padding:0 6px}
.prov .done svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.none{padding:28px 12px;font-size:15px;font-weight:500;color:var(--muted);text-align:center}
.add-foot{padding:14px 28px 22px;border-top:1px solid var(--line);font-size:12.5px;font-weight:400;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:28px;z-index:90;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:13px 20px;border-radius:99px;background:#000;color:#fff;font-size:14.5px;font-weight:500;
  opacity:0;transform:translate(-50%,16px);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;fill:none;stroke:var(--g);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Narrower desktops ---------- */
@media (max-width:1279px){
  .wear-body{grid-template-columns:minmax(0,1fr)}
  .sub-grid{grid-template-columns:minmax(0,1fr)}
}
/* the wider menu leaves less room for the three cards: smaller pictures on laptops, then one per row beside the menu */
@media (max-width:1365px){
  .cta{height:170px}
  .cta-go{width:36px;height:36px;margin-right:14px}
}
@media (min-width:1024px) and (max-width:1180px){
  .ctas3{grid-template-columns:minmax(0,1fr);gap:12px}
  .cta{height:132px}
}
@media (max-width:1100px){
  .hello{grid-template-columns:minmax(0,1fr);align-items:start}
  .glance{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ---------- Tablet: the top bar and the tab bar replace the rail ---------- */
@media (max-width:1023px){
  html{scroll-padding-top:calc(var(--toph) + 16px)}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;height:var(--toph);padding:0 20px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .top .logo img{height:28px}
  .top-r{display:flex;align-items:center;gap:6px}
  .top .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%}
  .top .ico:hover{background:var(--sand2)}
  .top .av{width:36px;height:36px;font-size:15px}
  main{padding:16px 20px calc(104px + env(safe-area-inset-bottom))}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 5px;border-radius:16px;font-size:11.5px;font-weight:500;color:var(--muted)}
  .tabbar a.on{color:#000;font-weight:600}
  .tabbar a.on svg{stroke-width:2.1}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))}
  .ask{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr)}
}
@media (max-width:860px){
  .ctas3{grid-template-columns:minmax(0,1fr);gap:10px}
  .cta{height:150px}
  .ask{grid-template-columns:minmax(0,1fr);min-height:0}
  .ask-art{height:260px;min-height:0}
  .ask-graph{left:8%;width:84%;top:6%}
  .ask-man{height:132%;bottom:-26%;transform:translateX(-50%)}
  .sub-man{height:124%;bottom:-10%}

  .ask-main{padding:6px 18px 22px}
  .res-head{grid-template-columns:minmax(0,1fr)}
  .tally{justify-self:start}
  /* the table becomes stacked rows: name and result, then the range bar and the status */
  .rtable,.rtable tbody{display:block}
  .rtable thead{display:none}
  .rtable tr.r{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "g s";gap:12px 16px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}
  .rtable tr.r td{display:block;padding:0 !important;border:0 !important;background:none !important;border-radius:0 !important}
  .rtable tr.r td:nth-child(1){grid-area:n}
  .rtable tr.r td:nth-child(2){grid-area:v;text-align:right}
  .rtable tr.r td:nth-child(3){grid-area:g}
  .rtable tr.r td:nth-child(4){grid-area:s;justify-self:end}
  .det-in{grid-template-columns:minmax(0,1fr);padding-left:26px}
  .rtable tr.pgroup{display:block}
  .rtable tr.pgroup td{display:block;padding:18px 0 6px}
  .rtable:not(.dtable) tr.r{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n v o" "c t t" "g s s"}
  .rtable tr.r td.go-td{grid-area:o}
  .rgo{width:28px;height:28px;border-radius:8px}
  .rtable:not(.dtable) tr.r td:nth-child(3){grid-area:c}
  .rtable:not(.dtable) tr.r td:nth-child(4){grid-area:g}
  .rtable:not(.dtable) tr.r td:nth-child(5){grid-area:s;justify-self:end}
  .rtable:not(.dtable) tr.r td:nth-child(6){grid-area:t;justify-self:end}
  .rtable .chg-l{display:inline}
  .rtable .chg b{white-space:nowrap}
  .rtable td .vwrap{justify-content:flex-end}
  .det-in.det-b{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "chart" "rel" "learn"}
  .tbar{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:13px;font-weight:400}
  .tbar-i{display:inline-flex;align-items:center;gap:6px}
  .tbar .pop-btn{color:#000;font-size:13px}
  .dtable tr.r td:nth-child(2){grid-area:g;text-align:left}
  .dtable tr.r td:nth-child(3){grid-area:v;text-align:right;max-width:46vw}
  .dtable tr.r{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n v o" "g s s"}
  .rel button,.rel a{background:#fff}
}
@media (max-width:760px){
  .hello{border-radius:24px;padding:22px 18px 18px;gap:22px}
  .hello h1{margin:16px 0 12px}
  .hello .ctas .btn{flex:1}
  .hi{width:38px;height:38px;border-radius:12px}
  .hi svg{width:19px;height:19px}
  .hh{gap:12px}
  .glance{grid-template-columns:minmax(0,1fr)}
  .av.lg{width:56px;height:56px;font-size:22px}
  .card{border-radius:24px;padding:22px 18px}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:22px -18px 0;padding:0 18px 4px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .fchip{flex:none}
  .res-foot .btn{width:100%}
  .det-in{padding-left:0}
  .wear-head .btn{width:100%}
  .dev{grid-template-columns:44px minmax(0,1fr) auto;gap:4px 10px;padding:9px}
  .dev .pic{width:44px;height:44px}
  .dev .sy{white-space:normal}
  .dev .acts button{padding:0 8px}
  .dev .acts .rm{padding:0 4px;font-size:12px}
  .dev .acts .sync-t{display:none}
  .empty{grid-template-columns:minmax(0,1fr)}
  .metrics{padding:18px 14px;margin:0 -4px}
  .chart{height:140px}
  .seg{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:0 14px 2px;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:none}
  .mval{align-items:flex-start;flex-direction:column}
  .msrc{text-align:left}
  .insight{flex-direction:column;gap:10px}
  .dna-sum{min-width:0;width:100%}
  .bub{max-width:100%}
  dialog.add{width:100%;max-height:88vh;margin:auto 0 0;border-radius:24px 24px 0 0}
  dialog.add[open]{animation:up .45s var(--ease)}
  .add-head{padding:24px 20px 0}
  .plist{padding:12px 8px 10px}
  .prov{gap:12px;padding:10px 12px}
  .prov .btn{min-width:0;padding:0 14px}
  .add-foot{padding:12px 20px calc(16px + env(safe-area-inset-bottom))}
}
/* ---------- The result lightbox ---------- */
dialog.lb{width:min(1020px,calc(100vw - 32px));max-width:none;max-height:min(900px,calc(100vh - 64px));border:0;border-radius:var(--r);padding:0;background:#fff;color:#000;box-shadow:0 30px 90px rgba(46,21,11,.35);overflow:hidden}
dialog.lb::backdrop{background:rgba(46,21,11,.55)}
dialog.lb[open]{animation:pop .4s var(--ease)}
.lb-in{display:flex;flex-direction:column;max-height:inherit}
.lb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:26px 28px 20px;border-bottom:1px solid var(--line)}
.lb-panel{font-size:12.5px;font-weight:400;color:var(--grey)}
.lb-head h2{margin-top:6px;font-size:clamp(26px,2.4vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.lb-head h2:focus{outline:none}
.lb-one{margin-top:8px;font-size:15px;font-weight:400;line-height:1.45;max-width:36em}
.lb-acts{display:flex;align-items:center;gap:8px;flex:none}
.lb-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:99px;background:var(--sand2);font-size:14px;font-weight:600;transition:background .2s}
.lb-btn:hover{background:var(--sand)}
.lb-btn svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px 28px 28px}
.lb-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lb-cell{display:grid;align-content:start;gap:9px;padding:14px 16px 16px;border-radius:16px;background:#F6F6F5}
.lb-cell > small{font-size:12.5px;font-weight:500;color:var(--grey)}
.lb-v{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.lb-cell .rbar{margin-top:6px}
.lb-cell .rbar i{border-color:#F6F6F5}
.lb-cell .chg b{font-size:20px;font-weight:500}
.lb-cell .lb-v .val{font-size:24px}
.lb-cell .dl{font-size:13.5px}
.lb-date{font-size:12.5px;font-weight:400;color:var(--grey)}
.lb-cell .dres{font-size:17px;font-weight:500}
.lb-cell .gene{font-size:17px}
@media (min-width:1024px){
  dialog.lb{left:var(--side);width:min(1020px,calc(100vw - var(--side) - 64px))}
}
.lb .det-in,.lb-sheet .det-in{padding:24px 0 0}
@media (min-width:861px){.lb .det-in.det-b{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.lb .rel button,.lb .rel a{background:#F6F6F5}
.lb .rel button:hover,.lb .rel a:hover{background:#EFEFEE}
.lb-when{margin-top:18px;font-size:12.5px;font-weight:400;color:var(--grey)}
.lb-sheet{display:none}
@media (max-width:760px){
  dialog.lb{width:100%;max-height:92vh;margin:auto 0 0;border-radius:24px 24px 0 0}
  dialog.lb[open]{animation:up .45s var(--ease)}
  .lb-head{flex-direction:column-reverse;gap:10px;padding:16px 18px}
  .lb-acts{align-self:stretch;justify-content:flex-end}
  .lb-head h2{margin-top:4px}
  .lb-body{padding:16px 18px calc(22px + env(safe-area-inset-bottom))}
  .lb-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lb-sum .lb-cell:nth-child(2){grid-column:1 / -1;order:3}
}

/* Print from the lightbox (or Cmd+P while it is open): only the result prints, on plain paper */
@media print{
  @page{margin:16mm}
  html.lb-open,html.lb-open body{height:auto !important;overflow:visible !important;background:#fff}
  html.lb-open body > *:not(.lb-sheet){display:none !important}
  html.lb-open .lb-sheet{display:block;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lb-sheet h2{margin:4px 0 6px;font-size:26px;font-weight:500;letter-spacing:-.02em}
  .lb-sheet .lb-sum{margin-top:16px}
  .lb-sheet .det-in.det-b{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .lb-sheet .big .ln{animation:none;stroke-dashoffset:0}
  .lb-sheet .rel button,.lb-sheet .rel a,.lb-sheet .lb-cell,.lb-sheet .det-chart{break-inside:avoid}
  .lb-sheet .learn svg{display:none}
  .lb-foot{margin-top:14px;font-size:11px;color:var(--grey)}
}
/* ---------- Pages inside the dashboard: Kit Journey and Order a Test ---------- */
main.paged > :not(.page){display:none}
.page[hidden]{display:none}
.page > .card:first-child{margin-top:0}
.page-head h2{font-size:clamp(28px,2.5vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.page-head h2:focus{outline:none}
.page-head .sub{margin-top:12px}
.kit-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.kit-head .sub{margin-top:6px}
/* the steps: a line of dots joined by a rule, done in black, the current one ringed, the rest hollow */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:26px 0 0;padding:0;list-style:none}
.steps .s{position:relative;display:grid;align-content:start;gap:10px}
.steps .s::before{content:"";position:absolute;left:24px;right:-8px;top:11px;height:2px;background:var(--line2)}
.steps .s:last-child::before{display:none}
.steps .s.done::before{background:#000}
.dot{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--line2)}
.s.done .dot{background:#000;box-shadow:none}
.s.done .dot svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.s.now .dot{box-shadow:inset 0 0 0 2px #000,0 0 0 4px var(--sand)}
.s.now .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#000}
.s-t{display:grid;gap:3px;padding-right:6px}
.s-t b{font-size:14px;font-weight:600;line-height:1.25}
.s-t small{font-size:12.5px;font-weight:400;color:var(--grey);line-height:1.35}
.s:not(.done):not(.now) .s-t b{color:#4a4a4a;font-weight:500}
.kit-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:var(--gut)}
.opts .card{margin-top:0}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.opt-tag{display:inline-flex;padding:5px 10px;border-radius:99px;background:var(--sand2);font-size:12.5px;font-weight:600}
.opt h3{margin-top:4px}
.opt p{font-size:14.5px;font-weight:400;line-height:1.5}
.opt-when{color:var(--grey);font-size:13.5px !important}
.opt-when b{color:#000;font-weight:600}
.opt .btn{margin-top:auto}
.opt p:last-of-type{margin-bottom:8px}

/* ---------- Your account (the picture), Settings and Help ---------- */
.side-foot button,.top button.ico,.top .me-sm{font:inherit;color:inherit}
.top .me-sm{display:grid;place-items:center;border-radius:50%}
.top .me-sm:hover .av{box-shadow:0 0 0 3px var(--sand)}
dialog.acct{width:min(640px,calc(100vw - 32px));max-width:none;max-height:min(820px,calc(100vh - 64px));border:0;border-radius:var(--r);padding:0;background:#fff;color:#000;box-shadow:0 30px 90px rgba(46,21,11,.35);overflow:hidden}
dialog.acct::backdrop{background:rgba(46,21,11,.55)}
dialog.acct[open]{animation:pop .4s var(--ease)}
@media (min-width:1024px){dialog.acct{left:var(--side);width:min(640px,calc(100vw - var(--side) - 64px))}}
.acct-in{display:flex;flex-direction:column;max-height:inherit}
.acct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 26px 14px}
.acct-who{display:flex;align-items:center;gap:14px;min-width:0}
.acct-av{width:52px;height:52px;font-size:21px}
.acct-head h2{font-size:26px;font-weight:500;letter-spacing:-.025em;line-height:1.1}
.acct-head p{margin-top:4px;font-size:13.5px;color:var(--grey);overflow-wrap:anywhere}
.acct-tabs{display:flex;gap:6px;padding:0 26px 14px;border-bottom:1px solid var(--line)}
.acct-tabs [role=tab]{height:38px;padding:0 15px;border-radius:99px;background:var(--sand2);font-size:14px;font-weight:500;transition:background .2s,color .2s}
.acct-tabs [role=tab]:hover{background:var(--sand)}
.acct-tabs [role=tab][aria-selected="true"]{background:#000;color:#fff}
.acct-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px 26px 24px}
.acct-p[hidden]{display:none}
.acct-p h3{margin:22px 0 10px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.acct-p h3:first-child{margin-top:0}
.photo-row{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.acct-photo{width:72px;height:72px;font-size:28px}
.hint{margin-top:6px;font-size:12.5px;font-weight:400;color:var(--grey)}
.hint:empty{display:none}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px}
.fgrid .wide{grid-column:1 / -1}
.fld{display:grid;gap:6px}
.fld span{font-size:13px;font-weight:500}
.fld input{width:100%;height:44px;padding:0 13px;border-radius:12px;border:1px solid var(--line2);background:#fff;font-size:15px;transition:border-color .2s,box-shadow .2s}
.fld input:hover{border-color:#cdb7a6}
.fld input:focus{outline:none;border-color:#000;box-shadow:0 0 0 3px var(--sand)}
.fld input[aria-invalid="true"]{border-color:var(--rd-ink);box-shadow:0 0 0 3px #FFE6E7}
.fset{margin:6px 0 0;padding:0;border:0;min-width:0}
.fset legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:600}
.acct-foot{position:sticky;bottom:-24px;display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:22px -26px -24px;padding:14px 26px 18px;background:#fff;border-top:1px solid var(--line)}
.acct-foot .hint{margin:0 auto 0 0;color:#000}
.tog{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.tog input{position:absolute;opacity:0;width:1px;height:1px}
.tog-ui{position:relative;width:44px;height:26px;border-radius:99px;background:var(--line2);transition:background .2s}
.tog-ui::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.tog input:checked + .tog-ui{background:#000}
.tog input:checked + .tog-ui::after{transform:translateX(18px)}
.tog input:focus-visible + .tog-ui{outline:2px solid #000;outline-offset:3px}
.tog-t,.set-row > span{display:grid;gap:3px}
.tog-t b,.set-row b{font-size:14.5px;font-weight:600}
.tog-t small,.set-row small{font-size:13px;font-weight:400;color:var(--grey);line-height:1.4}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font-size:14.5px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;margin-right:4px;border-right:2px solid #000;border-bottom:2px solid #000;transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease);flex:none}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq p{padding:0 0 14px;font-size:14.5px;line-height:1.55;max-width:56ch}
@media (max-width:1180px){
  .steps{grid-auto-flow:row;grid-auto-columns:auto;gap:0}
  .steps .s{grid-template-columns:24px minmax(0,1fr);gap:14px;padding-bottom:18px}
  .steps .s::before{left:11px;right:auto;top:24px;bottom:0;width:2px;height:auto}
  .steps .s:last-child{padding-bottom:0}
}
@media (max-width:1023px){
  .top-r{gap:2px}
  .top .ico.on{background:#000;color:#fff}
}
@media (max-width:860px){
  .opts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  dialog.acct{width:100%;max-height:92vh;margin:auto 0 0;border-radius:24px 24px 0 0}
  dialog.acct[open]{animation:up .45s var(--ease)}
  .acct-head{padding:20px 18px 12px}
  .acct-tabs{padding:0 18px 12px}
  .acct-body{padding:18px 18px calc(22px + env(safe-area-inset-bottom))}
  .acct-foot{margin:20px -18px calc(-22px - env(safe-area-inset-bottom));padding:12px 18px calc(16px + env(safe-area-inset-bottom));bottom:calc(-22px - env(safe-area-inset-bottom))}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .kit-head{flex-direction:column;gap:10px}
  .kit-acts .btn{flex:1}
}
@keyframes up{from{transform:translateY(100%)}}
@media (hover:hover) and (max-width:860px){.rtable tr.r:hover{background:#f5f5f5}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
/* v49c (11 Oct 2026): past orders on Kit Journey. A list by date; each order opens to its journey */
.kit.orders .olist{margin-top:18px;border-top:1px solid var(--line)}
.order{border-bottom:1px solid var(--line)}
.order:last-child{border-bottom:0}
.order summary{display:grid;grid-template-columns:110px minmax(0,1fr) auto 22px;align-items:center;gap:16px;padding:16px 4px;cursor:pointer;list-style:none}
.order summary::-webkit-details-marker{display:none}
.order summary:hover{background:rgba(0,0,0,.02)}
.order .o-date{font-size:14px;color:var(--mut,#6E6E73);font-variant-numeric:tabular-nums}
.order .o-what{display:flex;flex-direction:column;gap:2px;min-width:0}
.order .o-what b{font-size:15.5px;font-weight:600}
.order .o-what small{font-size:13px;color:var(--mut,#6E6E73)}
.order .o-go{display:grid;place-items:center;transition:transform .3s}
.order .o-go svg{width:16px;height:16px}
.order[open] .o-go{transform:rotate(90deg)}
.order .o-body{padding:0 4px 20px}
.order .o-body .steps{margin-top:8px}
@media (max-width:760px){.order summary{grid-template-columns:minmax(0,1fr) auto 18px;row-gap:4px}.order .o-date{grid-column:1 / -1}}