/* Fitheidsmeter, alleen op /fitheidsmeter. Alles hangt onder #sakino-fm. */
#sakino-fm{
  --ink:#131313; --muted:#62625E; --muted2:#8A877C; --bg:#F6F6F4; --card:#FFFFFF;
  --line:#E6E6E2; --sun:#F2DE4F; --sun-soft:#F6ECC0; --dark:#17181A;
  --z1:#BFD9B0; --z2:#E3E8A6; --z3:#F2C46B; --z4:#E9917A;
  --r:22px;
}
#sakino-fm *, #sakino-fm{box-sizing:border-box;margin:0;padding:0}
#sakino-fm{font-family:"DM Sans",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;}
#sakino-fm h1, #sakino-fm h2, #sakino-fm h3, #sakino-fm .serif{font-family:"Fraunces",Georgia,serif;font-weight:400;letter-spacing:-.01em}
#sakino-fm button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
#sakino-fm a{color:inherit}
#sakino-fm /* header */
.top{display:flex;justify-content:center;padding:20px 16px 0}
#sakino-fm .nav{display:flex;align-items:center;gap:18px;background:#fff;border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 1px 0 var(--line),0 8px 30px rgba(19,19,19,.05)}
#sakino-fm .brand{display:flex;align-items:center;gap:8px;font-weight:500;letter-spacing:.14em;font-size:14px;text-decoration:none}
#sakino-fm .brand svg{width:22px;height:22px}
#sakino-fm .pill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:999px;padding:11px 20px;font-weight:500;font-size:15px;text-decoration:none;transition:transform .15s,background .15s}
#sakino-fm .pill:hover{transform:translateY(-1px);background:#000}
#sakino-fm .pill.light{background:#fff;color:var(--ink);border:1px solid var(--line)}
#sakino-fm .pill.sm{padding:8px 16px;font-size:14px}
#sakino-fm .pill[disabled]{opacity:.35;pointer-events:none}
#sakino-fm .wrap{max-width:680px;margin:0 auto;padding:36px 18px 80px}
#sakino-fm .eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
#sakino-fm .eyebrow::before, #sakino-fm .eyebrow::after{content:"";width:22px;height:6px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 6'%3E%3Cpath d='M1 1l5 4 5-4 5 4 5-4' fill='none' stroke='%238A877C' stroke-width='1.2'/%3E%3C/svg%3E")}
#sakino-fm .hl{background:linear-gradient(transparent 78%,var(--sun) 78%,var(--sun) 92%,transparent 92%);font-style:italic}
#sakino-fm /* intro */
.intro{text-align:center}
#sakino-fm .intro h1{font-size:clamp(40px,8vw,64px);line-height:1.05;margin:16px 0 18px}
#sakino-fm .intro p.lead{color:var(--muted);font-size:17px;max-width:520px;margin:0 auto 28px}
#sakino-fm .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:34px 0 0}
#sakino-fm .fact{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 12px;text-align:left}
#sakino-fm .fact b{display:block;font-family:"Fraunces",serif;font-weight:400;font-size:26px;line-height:1.1}
#sakino-fm .fact span{font-size:13px;color:var(--muted)}
#sakino-fm /* quiz */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px 26px;box-shadow:0 20px 50px rgba(19,19,19,.05)}
#sakino-fm .progress{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:13px;color:var(--muted)}
#sakino-fm .bar{flex:1;height:6px;background:var(--bg);border-radius:9px;overflow:hidden}
#sakino-fm .bar i{display:block;height:100%;background:var(--sun);border-radius:9px;transition:width .35s ease}
#sakino-fm .block{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px}
#sakino-fm .q{font-size:clamp(26px,5vw,34px);line-height:1.15;margin-bottom:8px}
#sakino-fm .hint{color:var(--muted);font-size:15px;margin-bottom:22px}
#sakino-fm .opts{display:grid;gap:10px}
#sakino-fm .opts.two{grid-template-columns:1fr 1fr}
#sakino-fm .opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:15px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:border-color .15s,background .15s,transform .1s}
#sakino-fm .opt:hover{border-color:var(--ink)}
#sakino-fm .opt:active{transform:scale(.99)}
#sakino-fm .opt.sel{border-color:var(--ink);background:var(--sun-soft)}
#sakino-fm .opt .ic{flex:none;width:38px;height:38px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:18px}
#sakino-fm .opt.sel .ic{background:#fff}
#sakino-fm .opt .t{font-weight:500}
#sakino-fm .opt .s{display:block;font-size:13px;color:var(--muted);font-weight:400}
#sakino-fm .opt .chk{margin-left:auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);flex:none;display:grid;place-items:center}
#sakino-fm .opt.sel .chk{background:var(--ink);border-color:var(--ink)}
#sakino-fm .opt.sel .chk::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
#sakino-fm .fields{display:grid;gap:12px}
#sakino-fm .fields.two{grid-template-columns:1fr 1fr}
#sakino-fm .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
#sakino-fm .inp{display:flex;align-items:center;border:1px solid var(--line);border-radius:16px;padding:0 16px;background:#fff;transition:border-color .15s}
#sakino-fm .inp:focus-within{border-color:var(--ink)}
#sakino-fm .inp input::-webkit-outer-spin-button, #sakino-fm .inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#sakino-fm .inp input{-moz-appearance:textfield;flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:22px;padding:14px 0;background:none;font-family:"Fraunces",serif}
#sakino-fm .inp span{color:var(--muted2);font-size:14px}
#sakino-fm .err{color:#B4462E;font-size:13px;margin-top:10px;min-height:18px}
#sakino-fm .nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
#sakino-fm .back{font-size:14px;color:var(--muted);padding:8px 2px}
#sakino-fm .back:hover{color:var(--ink)}
#sakino-fm .skip{font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;margin-right:14px}
#sakino-fm /* heart rate helper */
.hr-box{margin-top:14px;background:var(--bg);border-radius:16px;padding:16px;display:flex;gap:14px;align-items:center}
#sakino-fm .hr-ring{flex:none;width:64px;height:64px;position:relative}
#sakino-fm .hr-ring svg{width:64px;height:64px;transform:rotate(-90deg)}
#sakino-fm .hr-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:"Fraunces",serif;font-size:20px;font-weight:400}
#sakino-fm .hr-box p{font-size:14px;color:var(--muted)}
#sakino-fm /* result */
.res-head{text-align:center;margin-bottom:22px}
#sakino-fm .res-head h2{font-size:clamp(30px,6vw,42px);line-height:1.1;margin-top:12px}
#sakino-fm .score{background:var(--dark);color:#F6F6F4;border-radius:var(--r);padding:30px 28px;position:relative;overflow:hidden}
#sakino-fm .score .row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
#sakino-fm .score .big{font-family:"Fraunces",serif;font-size:clamp(84px,18vw,128px);line-height:.9}
#sakino-fm .score .lbl{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,246,244,.6);margin-bottom:6px}
#sakino-fm .score .real{text-align:right}
#sakino-fm .score .real b{font-family:"Fraunces",serif;font-weight:400;font-size:40px;line-height:1}
#sakino-fm .zone{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 14px;border-radius:999px;font-weight:500;font-size:14px;color:var(--ink)}
#sakino-fm .score p.sum{margin-top:14px;color:rgba(246,246,244,.78);font-size:16px;max-width:520px}
#sakino-fm .gauge{margin-top:26px;position:relative;padding-top:14px}
#sakino-fm .gauge .track{display:grid;grid-template-columns:5fr 6fr 6fr 7fr;gap:4px;height:10px}
#sakino-fm .gauge .track i{border-radius:9px}
#sakino-fm .gauge .mk{position:absolute;top:0;width:2px;height:28px;background:#fff;transform:translateX(-1px);transition:left .9s cubic-bezier(.2,.8,.2,1)}
#sakino-fm .gauge .mk::before{content:"";position:absolute;top:-6px;left:-5px;width:12px;height:12px;border-radius:50%;background:#fff}
#sakino-fm .gauge .ticks{display:grid;grid-template-columns:5fr 6fr 6fr 7fr;gap:4px;margin-top:10px;font-size:12px;color:rgba(246,246,244,.6)}
#sakino-fm .minis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
#sakino-fm .mini{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
#sakino-fm .mini span{font-size:12px;color:var(--muted);letter-spacing:.04em}
#sakino-fm .mini b{display:block;font-family:"Fraunces",serif;font-weight:400;font-size:26px;line-height:1.2}
#sakino-fm .mini small{font-size:12px;color:var(--muted2)}
#sakino-fm .sec{margin-top:34px}
#sakino-fm .sec h3{font-size:26px;margin-bottom:14px}
#sakino-fm .tips{display:grid;gap:10px}
#sakino-fm .tip{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}
#sakino-fm .tip .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-family:"Fraunces",serif;font-size:17px}
#sakino-fm .tip h4{font-size:16px;font-weight:700;margin-bottom:3px}
#sakino-fm .tip p{font-size:15px;color:var(--muted)}
#sakino-fm .tip .gain{display:inline-block;margin-top:8px;font-size:12px;font-weight:500;background:var(--bg);border-radius:999px;padding:3px 10px;color:var(--ink)}
#sakino-fm .goal{background:var(--sun-soft);border-radius:var(--r);padding:26px}
#sakino-fm .goal .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
#sakino-fm .goal h3{margin:8px 0 10px}
#sakino-fm .goal p{color:#3d3c37;font-size:16px}
#sakino-fm .goal .tx{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
#sakino-fm .goal .tx a{background:#fff;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500;text-decoration:none;border:1px solid rgba(19,19,19,.08)}
#sakino-fm .goal .tx a:hover{border-color:var(--ink)}
#sakino-fm .ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#sakino-fm .mail{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
#sakino-fm .mail form{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
#sakino-fm .mail input[type=email]{flex:1;min-width:220px;border:1px solid var(--line);border-radius:999px;padding:12px 18px;font:inherit;outline:0}
#sakino-fm .mail input[type=email]:focus{border-color:var(--ink)}
#sakino-fm .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin-top:12px}
#sakino-fm .consent input{margin-top:3px;accent-color:var(--ink)}
#sakino-fm .ok{margin-top:12px;font-size:14px;background:var(--bg);border-radius:12px;padding:12px 14px;display:none}
#sakino-fm .disc{margin-top:34px;font-size:13px;color:var(--muted2);text-align:center;max-width:560px;margin-left:auto;margin-right:auto}
#sakino-fm .again{display:block;margin:18px auto 0;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
#sakino-fm .fade{animation:sfm-fade .35s ease both}
@keyframes sfm-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:560px){#sakino-fm .card{padding:24px 18px 20px}
#sakino-fm .facts{grid-template-columns:1fr 1fr 1fr;gap:8px}
#sakino-fm .fact b{font-size:22px}
#sakino-fm .opts.two{grid-template-columns:1fr}
#sakino-fm .minis{grid-template-columns:1fr 1fr 1fr;gap:8px}
#sakino-fm .mini b{font-size:22px}
#sakino-fm .nav{gap:10px}
}
#sakino-fm{scroll-margin-top:100px}
#sakino-fm h1,#sakino-fm h2,#sakino-fm h3,#sakino-fm h4,#sakino-fm p{margin:0;color:inherit;text-transform:none}
#sakino-fm button{text-transform:none;letter-spacing:normal;box-shadow:none}
#sakino-fm input{box-shadow:none}
#sakino-fm .skipBtn{margin-right:10px}