:root{color-scheme:light}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}


:root{
  --ground:#F6F7FA; --surface:#FFFFFF; --ink:#16233A; --muted:#4A5568; --line:#DCE1E8; --line-soft:#E8EBF0;
  --brand:#FF405B; --accent:#D42A44; --on-accent:#FFFFFF; --accent-soft:#FFF0F2; --result:#FFF5F6;
  --good:#1F7A6B; --good-soft:#E3F3EF;
  --warn:#A35C08; --warn-soft:#FBEFDD; --tag:#FFFFFF; --shadow:0 1px 2px rgba(22,35,58,.06),0 6px 18px rgba(22,35,58,.06);
  --display:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#141A26; --surface:#1C2433; --ink:#ECEFF5; --muted:#BCC4D2; --line:#2E3747; --line-soft:#262E3C;
    --brand:#FF6B80; --accent:#FF7A8E; --on-accent:#141A26; --accent-soft:#3A2130; --result:#2A2130;
    --good:#62C4B6; --good-soft:#15302C;
    --warn:#F0B062; --warn-soft:#352812; --tag:#1C2433; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#141A26; --surface:#1C2433; --ink:#ECEFF5; --muted:#BCC4D2; --line:#2E3747; --line-soft:#262E3C;
  --brand:#FF6B80; --accent:#FF7A8E; --on-accent:#141A26; --accent-soft:#3A2130; --result:#2A2130;
  --good:#62C4B6; --good-soft:#15302C;
  --warn:#F0B062; --warn-soft:#352812; --tag:#1C2433; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box}
/* ---------- Brand: top bar, logo, layout ---------- */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.logomark{color:var(--brand);flex:none}
.wordmark{font:800 1.4rem/1 var(--display);letter-spacing:-.035em;color:var(--ink)}
.wordmark span{color:var(--brand)}
.topnav{display:flex;flex-wrap:wrap;gap:4px 22px}
.topnav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent}
.topnav a:hover{color:var(--ink)}
.topnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)}
.toprow{display:grid;gap:18px}
.combo{max-width:480px}
.popular{display:none}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchips button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 .86rem var(--body);padding:6px 12px;border-radius:99px;cursor:pointer}
.pchips button:hover{border-color:var(--ink)}
.pchips button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
@media (min-width:900px){
  .toprow{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start}
  .combo{max-width:none}
  .popular{display:grid;gap:8px;margin-top:10px}
}
@media (max-width:640px){
  .navhome{display:none}
  .topbar{gap:2px 16px;padding-bottom:8px}
  .topnav{gap:4px 16px}
  .topnav a{font-size:.88rem}
  .logomark{width:34px;height:34px}
  .wordmark{font-size:1.2rem}
}
/* ---------- Live answer: line under the fields + phone bar ---------- */
.lblrow{display:flex;align-items:center;gap:6px}
.infobtn{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font:700 .75rem/1 var(--body);cursor:pointer;display:inline-grid;place-items:center;padding:0}
.infobtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.pop{background:var(--ground);border-radius:8px;padding:8px 12px}
.answer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;width:100%;text-align:left;border:1.5px solid var(--line);border-left:4px solid var(--brand);background:var(--result);color:var(--ink);border-radius:12px;padding:12px 16px;font:500 1rem var(--body);cursor:pointer}
.answer:hover{border-color:var(--brand)}
.answer .a-main{font-weight:600}
.answer .a-size{font:800 1.35rem/1 var(--display);color:var(--accent);letter-spacing:-.02em;margin-inline:2px}
.answer .a-status{color:var(--good);font-weight:600;font-size:.92rem}
.answer .a-status.warn{color:var(--warn)}
.answer .a-go{margin-left:auto;color:var(--accent);font-weight:700;font-size:.92rem;white-space:nowrap}
.answer .a-list{font-weight:600}
.answer .a-list b{color:var(--accent)}
.answerbar{display:none}
@media (max-width:640px){
  .hero h1{font-size:1.75rem}
  .hero .lede{font-size:.98rem}
  .hero{gap:6px}
  .answer .a-go{margin-left:0}
  body{padding-bottom:84px}
  .answerbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:10px;width:100%;border:0;border-top:1px solid var(--line);
    background:var(--surface);color:var(--ink);box-shadow:0 -6px 18px rgba(22,35,58,.12);text-align:left;cursor:pointer;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));font:500 .95rem var(--body)}
  .answerbar[hidden]{display:none!important}
  .answerbar .a-size{font:800 1.3rem/1 var(--display);color:var(--accent)}
  .answerbar .a-status{color:var(--good);font-weight:600}
  .answerbar .a-go{margin-left:auto;color:var(--accent);font-weight:700;white-space:nowrap}
  .answerbar .a-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.cardicon{display:inline-flex;color:var(--muted);flex:none}
.check h3,.remind h3,.cmpbox h3{display:flex;align-items:flex-start;gap:8px}

[hidden]{display:none!important}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;padding-inline:16px;padding-block:18px 56px}
.wrap{max-width:1040px;margin:0 auto;display:grid;gap:22px}
h1,h2,h3{font-family:var(--display);line-height:1.1;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,5vw,2.6rem);font-weight:800;letter-spacing:-.03em}
h2{font-size:1.45rem;font-weight:700}
p{margin:0}
a{color:var(--accent)}
.lede{color:var(--muted);max-width:62ch;font-size:1.05rem}
.eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.hero{display:grid;gap:10px}
section{display:grid;gap:14px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:16px;box-shadow:var(--shadow)}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.field{display:grid;gap:6px;flex:1 1 160px}
#measure .field{flex-basis:118px}
label,.lbl{font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.inp{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;background:var(--ground);overflow:hidden}
.inp:focus-within{border-color:var(--accent)}
.inp input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:600 1.25rem var(--body);padding:10px 12px;font-variant-numeric:tabular-nums}
.inp input:focus{outline:none}
.inp span{padding-right:12px;color:var(--muted);font-weight:600}
.inp select{border:0;background:transparent;color:var(--muted);font:600 .95rem var(--body);padding:0 6px 0 0;margin-right:6px;cursor:pointer;max-width:92px}
.inp select:focus{outline:none;color:var(--ink)}
.inp select{align-self:stretch;min-height:40px}
.infobtn,.editbtn,.linkbtn,#brandclear{position:relative}
.infobtn::after{content:"";position:absolute;inset:-12px}
.editbtn::after,#brandclear::after{content:"";position:absolute;inset:-8px}
.linkbtn::after{content:"";position:absolute;inset:-10px 0}
.slider input[type=range]{min-height:32px}
.sexnote{margin:6px 0 0;color:var(--muted);font-size:.92rem}
.field.extra .inp{border-style:dashed}
.inp:has(input[aria-invalid="true"]){border-color:var(--accent)}
.field.extra.req .inp{border-style:solid;border-color:var(--accent)}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--ground)}
.seg button{border:0;background:transparent;color:var(--muted);font:600 .9rem var(--body);padding:11px 14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hint{font-size:.9rem;color:var(--muted)}

.types{display:flex;flex-wrap:wrap;gap:7px}
.types button{border:1.5px solid var(--line-soft);background:var(--surface);color:var(--muted);font:600 .86rem var(--body);padding:6px 12px;border-radius:99px;cursor:pointer}
.types button:hover{border-color:var(--line);color:var(--ink)}
.types button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.moretypes{display:inline-flex}
.moretypes select{appearance:none;-webkit-appearance:none;border:1.5px dashed var(--line);background:var(--surface);color:var(--muted);font:600 .86rem var(--body);padding:6px 28px 6px 12px;border-radius:99px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.moretypes select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tip{display:flex;gap:10px;align-items:flex-start;background:var(--ground);border-left:3px solid var(--line);border-radius:8px;padding:10px 14px;font-size:.92rem}
.tip b{white-space:nowrap}

.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.combo{position:relative}
.selwrap{position:relative;display:none}
.selwrap select{appearance:none;-webkit-appearance:none;width:100%;border:1.5px solid var(--line);border-radius:10px;background:var(--ground);color:var(--ink);font:600 1rem var(--body);padding:10px 40px 10px 12px;cursor:pointer}
.selwrap select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.selwrap svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.combohelp{font-size:.85rem;color:var(--muted)}
.cbox{position:relative;display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:10px;background:var(--ground);padding-inline:12px 6px}
.cbox:focus-within{border-color:var(--accent)}
.cbox svg{color:var(--muted);flex:none}
.cbox input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:600 1.05rem var(--body);padding:11px 0}
.cbox input:focus{outline:none}
.cbox button{border:0;background:none;color:var(--muted);font:700 1.3rem/1 var(--body);width:32px;height:32px;border-radius:8px;cursor:pointer}
.cbox button:hover{background:var(--line)}
#brandlist{position:absolute;z-index:20;left:0;right:0;top:100%;margin:6px 0 0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:min(340px,55vh);overflow-y:auto}
#brandlist li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-weight:600}
#brandlist li[aria-selected="true"]{background:var(--accent-soft)}
#brandlist li.compare{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px;color:var(--accent)}
#brandlist li mark{background:none;color:var(--accent);font-weight:800}
#brandlist li .flag{flex:none}
#brandlist li.empty{cursor:default;color:var(--muted);font-weight:500}
.count{font-size:.85rem;color:var(--muted)}
.emptyhint{margin:0;padding:18px 20px;border:1.5px dashed var(--line);border-radius:14px;color:var(--muted);background:var(--surface)}

.tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tag{position:relative;background:var(--tag);border:1.5px solid var(--line);border-radius:6px 6px 14px 14px;padding:26px 14px 14px;display:grid;gap:8px;align-content:start;box-shadow:var(--shadow)}
.tag::before{content:"";position:absolute;top:9px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--ground);border:1.5px solid var(--line)}
.tag .brand{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);text-align:center;display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}
.flag{font-size:.7rem;letter-spacing:.06em;border:1px solid var(--line);border-radius:4px;padding:0 4px;color:var(--muted)}
.tag .size{font-family:var(--display);font-weight:800;font-size:2.2rem;line-height:1.05;text-align:center;letter-spacing:-.02em;text-wrap:balance}
.tag .range{text-align:center;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.src{justify-self:center;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.src.specific{color:var(--good)}
.meter{height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--good)}
.meter.warn i{background:var(--warn)}
.pill{justify-self:center;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--good-soft);color:var(--good);text-align:center}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.off{background:var(--accent-soft);color:var(--accent)}
.note{font-size:.82rem;color:var(--muted);text-align:center}
.nochart{font-size:.85rem;color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:12px 14px}

.gift{display:grid;gap:14px}
.slider{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.slider input[type=range]{flex:1 1 220px;accent-color:var(--accent)}
.age-out{font-family:var(--display);font-weight:700;font-size:1.3rem;min-width:9ch}
.remind{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:10px}
.remind h3{font-size:1.1rem}
.remindform{display:flex;flex-wrap:wrap;gap:8px}
.remindform input{flex:1 1 180px;min-width:0;border:1.5px solid var(--line);border-radius:99px;background:var(--ground);color:var(--ink);font:500 .95rem var(--body);padding:9px 14px}
.remindform input:focus{outline:none;border-color:var(--accent)}
.fine{font-size:.84rem;color:var(--muted)}
.remindmsg{font-size:.85rem;font-weight:600}
.remindmsg:empty{display:none}
.remindmsg.ok{color:var(--good)} .remindmsg.bad{color:var(--warn)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sitenav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.85rem}
.sitenav a{color:var(--muted);font-weight:600;text-decoration:none}
.sitenav a:hover{color:var(--accent)}
.solosrc a{color:var(--muted)}
.agerow{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end}
.agerow .hint{flex:1 1 240px;padding-bottom:10px}
.timeline{display:grid;gap:10px}
.timeline h3{font-size:1.05rem}
.steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.steps li{display:grid;gap:2px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);min-width:110px}
.steps li b{font-family:var(--display);font-size:1.35rem;font-weight:800}
.steps li span{font-size:.84rem;color:var(--muted)}
.steps li.now{border-color:var(--ink)}
.steps li.pick{box-shadow:0 0 0 2px var(--brand) inset}
.sharebox{display:grid;gap:10px}
.sharelbl{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);width:100%}
.solocard .sharebox{border-top:1px solid var(--line);padding-top:10px}
.solocard .sharebar{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.solocard .sharebar .sharelbl,.solocard .sharebar .toast{grid-column:1/-1}
.solocard .sharebtn,.sharelinks .sharebtn{justify-content:center}
.sharelinks{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}
.sharelinks .sharebtn{padding:7px 6px;font-size:.84rem}
.sharepanel .inp input{font-size:1rem;padding:8px 10px}
.solocard .sharebtn{padding:7px 13px;font-size:.84rem}
.solocard .sharepanel{max-width:none;padding:12px;background:var(--ground)}
.sharebox.ingrid .sharebar{margin-top:0}
.sharebar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.sharebtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);background:var(--ink);color:var(--surface);font:700 .9rem var(--body);padding:9px 16px;border-radius:99px;cursor:pointer;text-decoration:none}
.sharebtn.alt{background:var(--surface);color:var(--ink);border-color:var(--line)}
.sharebtn.alt:hover{border-color:var(--ink)}
.toast{font-size:.85rem;font-weight:700;color:var(--good)}
.sharepanel{display:grid;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;max-width:640px}
.sharepanel textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;background:var(--ground);color:var(--ink);font:500 .95rem/1.5 var(--body);padding:10px 12px;resize:vertical}
.sharelinks{display:flex;flex-wrap:wrap;gap:10px}
.copyfallback{width:100%;border:1.5px solid var(--accent);border-radius:10px;background:var(--ground);color:var(--ink);font:500 .9rem var(--body);padding:9px 12px}
.giftbig{font-size:1.15rem;font-weight:600;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 18px;border-radius:12px;background:var(--ground);border:1px solid var(--line)}
.giftbig b{font-family:var(--display);font-size:2.2rem;font-weight:800;line-height:1;color:var(--brand)}
.giftrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.chip{border:1.5px dashed var(--line);border-radius:12px;padding:10px;display:grid;gap:2px;text-align:center}
.chip b{font-family:var(--display);font-size:1.3rem;font-weight:800}
.chip small{color:var(--muted);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}

.solo{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.solo{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}}
.aside{display:grid;gap:16px;align-content:start}
.check{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:12px}
.check h3{font-size:1.15rem}
.check ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline}
.check li .k{font-weight:700}
.check li .v{text-align:right;font-weight:600}
.check li .v.ok{color:var(--good)} .check li .v.up{color:var(--warn)}
.check li .d{grid-column:1/-1;font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}
.check .nextline{border-top:1px solid var(--line);padding-top:10px;font-size:.88rem;color:var(--muted)}
.solocard{position:relative;background:var(--result);border:1.5px solid var(--line);border-radius:8px 8px 16px 16px;padding:20px 20px 16px;display:grid;gap:10px;box-shadow:var(--shadow)}
.sizeline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.solofoot{display:grid;gap:4px}
.solocard::before{content:"";position:absolute;top:10px;right:16px;width:10px;height:10px;border-radius:50%;background:var(--ground);border:1.5px solid var(--line)}
.solohead{font-family:var(--display);font-size:clamp(1.1rem,3vw,1.4rem);font-weight:700;letter-spacing:-.01em;line-height:1.15;padding-right:28px}
.solohead span{color:var(--accent);font-weight:800}
.bigsize{font-family:var(--display);font-weight:800;color:var(--ink);font-size:clamp(2.8rem,10vw,4.2rem);line-height:1;letter-spacing:-.03em}
.bigletter{font-size:.55em;letter-spacing:0}
.solocard .pill{justify-self:start;font-size:.8rem;padding:4px 11px}
.facts{margin:0;display:grid;gap:4px;border-top:1px solid var(--line);padding-top:10px}
.facts div{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.facts dt{font-weight:700;min-width:9ch}
.facts dd{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}
.editbtn{border:1px solid var(--line);background:var(--surface);color:var(--accent);font:700 .8rem var(--body);padding:2px 12px;border-radius:99px;cursor:pointer;min-height:28px}
.editbtn:hover{border-color:var(--accent)}
.gauge{display:grid;gap:4px}
.gauge-lbl{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.track{position:relative;height:8px;border-radius:99px;background:var(--line);margin-inline:8px}
.track i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--good);opacity:.35}
.track b{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--good);border:3px solid var(--tag);box-shadow:0 0 0 1px var(--good)}
.track.warn i{background:var(--warn)} .track.warn b{background:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.gauge-ends{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.track b{transition:left .35s ease}.track i{transition:width .35s ease}}
.solosrc{font-size:.82rem;color:var(--muted);line-height:1.45}
.why{border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--surface)}
.why summary{cursor:pointer;font-weight:700}
.why p{margin-top:10px;max-width:68ch;font-size:.95rem;line-height:1.6}
.why p b{font-weight:800}
.why .whymore{color:var(--muted);font-size:.9rem}
.why .goodtoknow{font-size:.9rem;background:var(--ground);border-radius:8px;padding:8px 12px}
.nbrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:12px}
.cmpbox{display:grid;gap:4px;padding:16px 18px;border:1.5px dashed var(--line);border-radius:14px}
.cmpbox h3{font-size:1.05rem}
.nb{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.nb small{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.nb b{font-family:var(--display);font-size:1.4rem;font-weight:800}
.nb span{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.showall{justify-self:center;margin:4px auto 0;display:block;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:700 .95rem var(--body);padding:10px 22px;border-radius:99px;cursor:pointer}
.showall:hover{border-color:var(--accent);color:var(--accent)}
.linkbtn{justify-self:start;border:0;background:none;color:var(--accent);font:700 .95rem var(--body);padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
select{border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:600 .95rem var(--body);padding:9px 12px;max-width:100%}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:440px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);font-size:.92rem}
th{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--ground)}
tr:last-child td{border-bottom:0}
tr.hit td{background:var(--result);font-weight:700}
tr.hit td:first-child{box-shadow:inset 4px 0 0 var(--brand);white-space:nowrap}
.yours{margin-left:8px;font-size:.78rem;font-weight:700;color:var(--accent);white-space:nowrap}
.brandnote{font-size:.88rem;color:var(--muted)}

.soon{display:flex;flex-wrap:wrap;gap:8px}
.soon span{border:1px dashed var(--line);border-radius:99px;padding:4px 12px;font-size:.85rem;color:var(--muted)}
.faq{display:grid;gap:14px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin-top:8px;color:var(--muted);max-width:65ch}
/* 7 Nov 2026: was a global footer{max-width:75ch} rule that squeezed the shared site footer; scoped to the notes block the old footer became */
.pagenotes{font-size:.88rem;color:var(--muted)}
/* ---------- Phone layout: compact inputs ---------- */
@media (max-width:640px){
  .panel{padding:16px;gap:14px}
  .cbox{padding-inline:10px 4px}
  .cbox input{font-size:1rem;padding:9px 0}
  .cbox button{width:28px;height:28px;font-size:1.15rem}
  .combohelp{font-size:.74rem}
  /* clothing types: a grouped dropdown instead of 17 chips */
  .types{display:none}
  .selwrap{display:block}
  /* measurements two per row */
  #measure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  #measure .field{min-width:0;align-content:end}
  .inp input{font-size:1.1rem;padding:8px 10px}
  .inp span{padding-right:10px;font-size:.9rem}
  #measure .seg{display:flex}
  #measure .seg button{flex:1;padding:9px 6px;font-size:.84rem}
  .tip{padding:8px 12px;font-size:.84rem}
}
@media (prefers-reduced-motion:no-preference){.meter i{transition:width .35s ease}}

/* =====================================================================================
   Oct 2026 additions (calculator pages, result status, accessibility). Same palette:
   coral stays the brand accent; focus is teal; red is used only for a real input error.
   ===================================================================================== */
:root{--focus:#0E7C70;--bad:#B42318;--bad-soft:#FDECEA}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--focus:#5FD0C2;--bad:#FF9C94;--bad-soft:#3A1F22}}
:root[data-theme="dark"]{--focus:#5FD0C2;--bad:#FF9C94;--bad-soft:#3A1F22}

/* focus and error states (H7: a coral outline read as an error) */
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.moretypes select:focus-visible,.selwrap select:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
.inp:focus-within,.cbox:focus-within{border-color:var(--focus)}
.remindform input:focus{border-color:var(--focus)}
.infobtn[aria-expanded="true"]{border-color:var(--focus);color:var(--focus)}
.field.extra.req .inp{border-style:solid;border-color:var(--line)}
.field.extra.req .inp:focus-within{border-color:var(--focus)}
.inp:has(input[aria-invalid="true"]){border-color:var(--bad)}
.inp:has(input[aria-invalid="true"]):focus-within{border-color:var(--bad)}

/* clothing / shoes switch, shoe type, chart options */
.modebar{display:grid;gap:6px}
.seg.mode{display:flex;max-width:340px}
.seg.mode button{flex:1;font-size:.95rem}
.selwrap.on{display:block}
.tracks{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start}
.tracks .field{flex:1 1 220px;max-width:380px}
.fulllink{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px;padding:6px 0;min-height:44px}

/* result status */
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.est,.pill.prov{background:var(--warn-soft);color:var(--warn)}
.solocard .sizeline .pill{margin-right:6px}
.answer .a-status.bad{color:var(--bad)}
.perdim{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px;font-size:.92rem}
.perdim .k{font-weight:700;margin-right:4px}
.tag .perdim{font-size:.82rem;text-align:left}
.check li .v.na{color:var(--muted)}
.fam{font-size:.78rem;color:var(--muted);font-weight:600;text-align:center}
.famline{font-size:.88rem;color:var(--muted);font-weight:600}
.rv{display:inline-block;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;vertical-align:baseline}
.rv-verified{background:var(--good-soft);color:var(--good)}
.rv-checked{background:var(--ground);color:var(--muted);border:1px solid var(--line)}
.rv-needs_review{background:var(--warn-soft);color:var(--warn)}
.rvbasis{color:var(--muted)}
.rvissue{display:block;font-size:.82rem;color:var(--muted);margin-top:4px;line-height:1.45}
#chart tbody th{text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--ink);background:none;font-weight:600;border-bottom:1px solid var(--line)}
#chart tr:last-child th{border-bottom:0}
tr.hit th{background:var(--result);font-weight:700;box-shadow:inset 4px 0 0 var(--brand);white-space:nowrap}

/* breadcrumbs and guide text on the calculator pages */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;font-size:.85rem;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:4px}
.crumbs a{color:var(--muted)}
.guide{display:grid;gap:12px;max-width:72ch}
.guide h2{margin-top:6px}
.guide h3{font-size:1.1rem;margin-top:4px}
.guide p,.guide li{color:var(--muted)}
.guide ul,.guide ol{margin:0;padding-left:1.2em;display:grid;gap:6px}
.guide table{min-width:0}
.statuslist{display:grid;gap:8px;list-style:none;padding:0!important}
.statuslist li{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.statuslist b{color:var(--ink)}

/* narrow phones: nothing wider than the screen (H4), 44px touch targets, 16px inputs (no zoom on focus) */
.topbar,.topnav,.hero,.panel,.toprow>*,#results,.solo>*{min-width:0;max-width:100%}
.hero h1,.solohead,.lede{overflow-wrap:break-word}
@media (max-width:640px){
  .topnav{gap:2px 14px}
  .topnav a{font-size:.86rem;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
  .seg button,.pchips button,.sharebtn,.showall{min-height:44px}
  .linkbtn{min-height:44px}
  .inp select,.selwrap select,.cbox input,.moretypes select,.sharepanel .inp input,textarea{font-size:16px}
  .tracks .field{max-width:none}
}
@media (max-width:360px){
  body{padding-inline:12px}
  .wordmark{font-size:1.1rem}
  .seg button{padding-inline:10px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media (max-width:420px){
  .topnav{gap:0 12px}
  .topnav a{font-size:.82rem}
  #measure .field:has(#u-us){grid-column:1/-1}
}
.toprow{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.toprow{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.field.combo,.cbox,.cbox input{min-width:0}
.cbox input{width:100%}

.pagenotes .fine[style]{opacity:1!important}     /* contrast: was 70% opacity */
.facts dd .editbtn{margin-left:8px}
@media (max-width:640px){
  .inp input,.cbox input{min-height:44px}
  .selwrap select,.moretypes select{min-height:44px}
}

/* chart options sit in the right-hand column, beside the brand, so the answer stays on the first screen */
.toprow .tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px}
.toprow .tracks .field{max-width:none}
.toprow .tracks .combohelp{font-size:.74rem}
.crumbs+.hero{margin-top:-8px}
.crumbs+.hero h1{font-size:clamp(1.8rem,4vw,2.3rem)}
.crumbs+.hero .lede{max-width:none}
#answer+.tip{margin-top:-4px}
/* shorter screens (most laptops): tighter header and hero so the answer line is on the first screen */
@media (min-width:641px) and (max-height:820px){
  body{padding-block:12px 56px}
  .wrap{gap:16px}
  .topbar{padding-bottom:8px}
  .hero{gap:6px}
  .hero h1{font-size:2.1rem}
  .hero .lede{font-size:1rem}
  .panel{gap:12px;padding:16px 20px}
  .toprow{gap:12px}
  .hero .fine{margin-top:-4px;font-size:.85rem}
  .lede{line-height:1.45}
}

/* ---------- Kids shoe size chart page: content sections under the calculator ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.guide .srcline{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;color:var(--muted)}
.guide .srcline b{color:var(--ink)}
.guide a{color:var(--ink)}
.guide table th[scope=row]{text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--ink);background:none;font-weight:600}
.guide table .sub{display:block;font-size:.78rem;font-weight:500;color:var(--muted)}
.guide table td .sub{display:inline;margin-left:2px}
.kssc,.guide.wide{max-width:none}
.guide table td.cm{white-space:nowrap}   /* 7 Nov 2026 */
.kssc .tablewrap{max-width:72ch}
.guide table.pairs{min-width:620px}
.guide table.pairs td{text-align:center;padding:8px 6px}
.guide table.dir td,.guide table.dir th{padding:8px 12px}
/* How to measure kids shoe size (7 Nov 2026): three illustrated step cards in the site's card style */
.howto .msteps{list-style:none;padding:0;margin:0;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.howto .msteps>li{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:12px 12px 18px;margin:0;box-shadow:0 8px 24px rgba(20,43,77,.05)}
.howto figure{margin:0;display:grid;gap:14px;align-content:start;border:0;padding:0;background:none}
.howto figure svg{width:100%;height:auto;display:block;border-radius:16px;overflow:hidden}
.howto figcaption{font-size:.95rem;line-height:1.55;color:var(--muted);padding:0 6px}
.howto figcaption b{display:block;color:var(--ink);margin-bottom:4px;font-size:1.05rem;line-height:1.35}
.howto .hm-floor{fill:#eef6ff}
.howto .hm-wall{fill:#d6e3f5}
.howto .hm-walledge{stroke:#0f2f63;stroke-width:3}
.howto .hm-walltxt{fill:#0f2f63;font:800 9px Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.18em}
.howto .hm-paper{fill:#fff;stroke:#cfdbec;stroke-width:1.2}
.howto .hm-shadow{fill:#0f2f63;opacity:.07}
.howto .hm-tape{fill:#ffd3dc;opacity:.9}
.howto .hm-fshadow{fill:#0f2f63;opacity:.06}
.howto .hm-foot{fill:#f6d5bf;stroke:#0f2f63;stroke-width:2.2;stroke-linejoin:round}
.howto .hm-ghost{fill:none;stroke:#9fb2cc;stroke-width:1.6;stroke-dasharray:4 4}
.howto .hm-ring{fill:none;stroke:#e8193f;stroke-width:2.6}
.howto .hm-dot{fill:#e8193f;stroke:#fff;stroke-width:1.4}
.howto .hm-guide{stroke:#e8193f;stroke-width:1.4;stroke-dasharray:3 4;opacity:.55}
.howto .hm-mark{stroke:#e8193f;stroke-width:3.4;stroke-linecap:round}
.howto .hm-lead2{stroke:#0f2f63;stroke-width:1.4;fill:none}
.howto .hm-pill{fill:#fff;stroke:#f3b7c4;stroke-width:1.3}
.howto .hm-lab{fill:#0f2f63;font:800 10.5px Inter,"Segoe UI",Arial,sans-serif}
.howto .hm-pbody{fill:#0f2f63}
.howto .hm-pline{stroke:#3d5f99;stroke-width:1.2}
.howto .hm-wood{fill:#f3d9b1;stroke:#0f2f63;stroke-width:1.2;stroke-linejoin:round}
.howto .hm-lead{fill:#0f2f63}
.howto .hm-eraser{fill:#f0294f}
.howto .hm-ruler{fill:#fff;stroke:#0f2f63;stroke-width:1.6}
.howto .hm-ticks path{stroke:#0f2f63;stroke-width:1.1}
.howto .hm-num text{fill:#0f2f63;font:700 8.5px Inter,"Segoe UI",Arial,sans-serif}
.howto .hm-dim{stroke:#e8193f;stroke-width:2.6}
.howto .hm-dimend{fill:none;stroke:#e8193f;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .howto .msteps{grid-template-columns:minmax(0,1fr);gap:14px}
  .howto figure{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:18px}
  .howto figcaption{padding:0}
}
@media (max-width:560px){
  .howto figure{grid-template-columns:minmax(0,1fr);gap:12px}
  .howto figcaption{padding:0 4px}
}
.guide table.kssc-t{min-width:0}
.guide table.kssc-t td{white-space:nowrap}
.guide table.cmp{min-width:600px}
@media (max-width:640px){
  .guide table.dir{min-width:0}
  .guide table.dir thead{display:none}
  .guide table.dir tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .guide table.dir tr:last-child{border-bottom:0}
  .guide table.dir th,.guide table.dir td{padding:0;border:0}
  .guide table.dir td:nth-child(3){grid-column:2;grid-row:1}
  .guide table.dir td:nth-child(2),.guide table.dir td:nth-child(4){grid-column:1/-1;font-size:.86rem;color:var(--muted)}
  .guide table.kssc-t th,.guide table.kssc-t td{padding:9px 10px}
}

/* B-4 (30 Oct 2026): the result side column could not shrink below its content in current Chromium (Chrome 14x),
   so the "Dimensions checked" box ran 1–26 px past the screen at 320–768 px. Layout fix only; nothing else changes. */
.aside>*,.aside>*>*{min-width:0}
/* Brand-aware categories (31 Oct 2026) */
.catnote{margin:8px 0 0;font-size:.85rem}
.catnote summary{cursor:pointer;color:var(--muted)}
.catnote ul{margin:6px 0 0;padding-left:18px}
.catnote li{margin:2px 0}
.catwhy{display:inline}
#typeselwrap.nocat{display:none!important}
/* 7 Nov 2026: Beta notice on the shoe calculator page, in the homepage Beta tag's colours */
.betanote{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:2px 0 0;padding:8px 14px;max-width:none;border:1px solid #c6ddf7;border-radius:12px;background:#f3f8fe;color:var(--ink);font-size:.92rem;line-height:1.45}
.betapill{display:inline-block;padding:2px 9px;border-radius:99px;font:700 11px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#1565c0;background:#e3effc;border:1px solid #c6ddf7}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .betanote{background:#16263d;border-color:#2b4466;color:var(--ink)}:root:not([data-theme="light"]) .betapill{color:#9ccbff;background:#1d3150;border-color:#2b4466}}
:root[data-theme="dark"] .betanote{background:#16263d;border-color:#2b4466}
:root[data-theme="dark"] .betapill{color:#9ccbff;background:#1d3150;border-color:#2b4466}