/* check.css - lifts tokens from apps/web/index.html and styles the Check app. */
:root{
  --bg:#FFFFFF;--dark:#0C0C0C;--card:#F5F5F3;--card-h:#EBEBEA;
  --tx:#0C0C0C;--tx2:#5A5A5A;--tx3:#999;
  --teal:#0C9A8A;--teal-hover:#0EA896;
  --fh:'Funnel Display',-apple-system,sans-serif;
  --f:'Geist','Inter',-apple-system,sans-serif;
  --fm:'Geist Mono','SF Mono','Courier New',monospace;
  --r:8px;--rl:16px;--e:cubic-bezier(.22,.61,.36,1);
  --brd:#E5E5E3;
}
#dots{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55}
.check__header,.check__main,.check__footer,.result{position:relative;z-index:1}
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:var(--f);color:var(--tx);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.skip{position:absolute;top:-100%;left:16px;background:var(--teal);color:#fff;padding:8px 16px;border-radius:4px;font-size:.85rem;font-weight:600;z-index:9999}
.skip:focus{top:16px}

.check__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--brd);position:sticky;top:0;background:var(--bg);z-index:10}
.check__home{font-family:'Major Mono Display',monospace;font-size:1.4rem;font-weight:400;letter-spacing:-.04em;position:relative;text-transform:lowercase;text-decoration:none;color:var(--tx)}
.check__home .logo-8{margin-left:-.12em;margin-right:-.09em}
.check__home .logo-dot{display:inline-block;width:5px;height:5px;background:var(--teal);border-radius:1px;margin-left:5px;vertical-align:text-bottom;position:relative;top:-2px;font-size:0}
.progress{display:flex;align-items:center;gap:12px;min-width:240px}
.progress__track{flex:1;height:6px;background:var(--card);border-radius:99px;overflow:hidden}
.progress__fill{height:100%;width:0;background:var(--teal);transition:width .3s var(--e)}
.progress__label{font-family:var(--fm);font-size:.78rem;color:var(--tx2);min-width:48px;text-align:right}

.check__main{max-width:780px;margin:0 auto;padding:48px 24px 96px}

.h1{font-family:var(--fh);font-weight:300;font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-.03em;line-height:1.04;margin-bottom:20px}
.h2{font-family:var(--fh);font-weight:300;font-size:clamp(1.5rem,2.8vw,2rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:12px}
.h3{font-family:var(--fh);font-weight:400;font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.01em;line-height:1.2;margin-bottom:10px}
.sub{font-size:1rem;line-height:1.7;color:var(--tx2);max-width:620px;margin-bottom:24px}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:var(--r);font-family:var(--f);font-size:.82rem;font-weight:500;letter-spacing:.02em;cursor:pointer;border:1.5px solid transparent;transition:all .4s var(--e);text-decoration:none;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e)}
.btn:hover::after{transform:scaleX(1)}
.btn--primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn--primary:hover{background:var(--teal-hover);border-color:var(--teal-hover);transform:translateY(-2px)}
.btn--primary:disabled{background:var(--card);color:var(--tx3);border-color:var(--card);cursor:not-allowed;transform:none}
.btn--primary:disabled::after{transform:scaleX(0)}
.btn--primary:disabled:hover{background:var(--card);border-color:var(--card);transform:none}
.btn--ghost{background:transparent;color:var(--tx);border-color:var(--brd)}
.btn--ghost:hover{background:var(--card);transform:translateY(-2px)}

.tag{display:inline-flex;align-items:center;gap:12px;font-family:var(--fm);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin-bottom:24px}
.tag::before{content:'';width:32px;height:1.5px;background:var(--teal)}

/* Reveal-on-render (lifted from homepage .rv) */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--e),transform .6s var(--e);will-change:transform,opacity}
.rv--v{opacity:1;transform:translateY(0)}

.welcome{max-width:680px}
.welcome .btn{margin-top:32px}
.welcome__duration{margin-top:12px;font-family:var(--fm);font-size:.7rem;color:var(--tx3);letter-spacing:.08em;text-transform:uppercase}

.step{display:grid;gap:32px;margin-bottom:32px}
.step__head .h2{margin-bottom:8px}
.step__intro{color:var(--tx2);max-width:560px;font-size:.95rem;line-height:1.65;margin-top:4px}
.step__explainer{display:grid;gap:18px;padding:24px 26px;background:var(--card);border-radius:var(--r);margin-top:8px;position:relative;overflow:hidden;transition:transform .5s var(--e)}
.step__explainer::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e)}
.step__explainer:hover::after{transform:scaleX(1)}
.step__explainerBlock{display:grid;gap:6px}
.step__explainerTerm{font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700}
.step__explainerDef{font-size:.92rem;line-height:1.65;color:var(--tx);margin:0;max-width:560px}

.q{display:grid;gap:14px;padding:20px 22px;border:1px solid var(--brd);border-radius:var(--r);background:var(--bg);position:relative;overflow:hidden;transition:transform .4s var(--e),border-color .3s var(--e)}
.q::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e)}
.q:hover::after{transform:scaleX(1)}
.q:hover{transform:translateY(-2px);border-color:var(--tx3)}
.q__label{font-family:var(--fh);font-weight:400;font-size:.98rem;line-height:1.4;color:var(--teal)}

.q__options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.q__opt{display:flex;align-items:center;justify-content:center;padding:8px 10px;background:#fff;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;font-family:var(--f);text-align:center;color:var(--tx);transition:transform .3s var(--e),background .25s var(--e),border-color .25s var(--e),color .25s var(--e);min-height:38px;font-size:.78rem;letter-spacing:.01em;position:relative;overflow:hidden}
.q__opt::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e)}
.q__opt:hover{background:var(--card);border-color:var(--tx3);transform:translateY(-2px)}
.q__opt:hover::after{transform:scaleX(1)}
.q__opt.is-active{background:var(--tx);border-color:var(--tx);color:#fff;font-weight:500;transform:translateY(0)}
.q__opt.is-active::after{transform:scaleX(0)}
.q__opt-label{line-height:1.25}

/* yesno */
.q__yesnoRow{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.q__yesnoBtn{padding:10px 16px;background:#fff;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;font-family:var(--f);font-size:.85rem;color:var(--tx);transition:transform .3s var(--e),background .25s var(--e),border-color .25s var(--e),color .25s var(--e);min-height:42px;position:relative;overflow:hidden}
.q__yesnoBtn::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e)}
.q__yesnoBtn:hover{background:var(--card);border-color:var(--tx3);transform:translateY(-2px)}
.q__yesnoBtn:hover::after{transform:scaleX(1)}
.q__yesnoBtn.is-active{background:var(--tx);border-color:var(--tx);color:#fff;font-weight:500;transform:translateY(0)}
.q__yesnoBtn.is-active::after{transform:scaleX(0)}

/* textarea */
.q__textarea{padding:12px 14px;border-radius:var(--r);border:1px solid var(--brd);font-family:var(--f);font-size:.92rem;background:#fff;color:var(--tx);width:100%;min-height:80px;resize:vertical;line-height:1.55}
.q__textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(12,154,138,.1)}

.q__sliderRow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px}
.q__sliderMin,.q__sliderMax{font-size:.7rem;color:var(--tx3);font-family:var(--fm)}
.q__sliderInput{appearance:none;width:100%;height:4px;background:var(--card);border-radius:99px;outline:none}
.q__sliderInput::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--teal);cursor:pointer}
.q__sliderInput::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--teal);cursor:pointer;border:0}
.q__sliderValue{font-family:var(--fm);font-weight:600;color:var(--teal);min-width:20px;text-align:right;font-size:.85rem}

.q__dualRow{display:grid;gap:5px;padding:10px 0;border-top:1px dashed var(--brd)}
.q__dualRow:first-of-type{border-top:none;padding-top:0}
.q__dualLabel{font-size:.7rem;color:var(--tx2);font-family:var(--fm);letter-spacing:.06em;text-transform:uppercase}

.q__input{padding:10px 12px;border-radius:var(--r);border:1px solid var(--brd);font-family:var(--f);font-size:.92rem;background:#fff;color:var(--tx);width:100%}
.q__input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(12,154,138,.1)}

.nav{display:flex;justify-content:space-between;gap:12px;margin-top:32px}

.check__footer{padding:48px 24px;border-top:1px solid var(--brd);text-align:center}
.check__quote{max-width:680px;margin:0 auto;font-family:var(--fh);font-weight:300;font-size:1.1rem;line-height:1.55;color:var(--tx);font-style:italic;letter-spacing:-.01em}
.check__quote::before{content:'"';margin-right:2px;color:var(--teal);font-style:normal;font-weight:400}
.check__quote::after{content:'"';margin-left:2px;color:var(--teal);font-style:normal;font-weight:400}
.check__quoteAuthor{display:block;margin-top:12px;font-family:var(--fm);font-size:.7rem;color:var(--tx3);letter-spacing:.1em;text-transform:uppercase;font-style:normal}

/* result */
.result{max-width:1100px;margin:0 auto;padding:48px 24px 96px}
.banner{padding:16px 20px;border-radius:var(--rl);margin-bottom:32px;font-size:.95rem}
.banner--warn{background:#FFF7E5;border:1px solid #F0D38A;color:#7A5B14}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:48px}
.charts__col{padding:24px;background:var(--card);border-radius:var(--rl)}
.charts__note{color:var(--tx2);font-size:.88rem;margin-bottom:16px}
.chartWrap{aspect-ratio:1/1;max-width:420px;margin:0 auto}
.chartWrap--wide{aspect-ratio:1/1;max-width:520px}
.gap{margin-bottom:48px;padding:24px;background:var(--card);border-radius:var(--rl)}
.topGap{padding:32px;background:#0C0C0C;color:#fff;border-radius:var(--rl);display:grid;gap:16px;justify-items:start}
.topGap .h3{color:#fff}
.topGap__hint{color:#D5D5D3;max-width:640px}
.topGap .btn--primary{background:var(--teal);border-color:var(--teal)}

.chart__axisLabel{font-family:var(--fm);font-size:11px;fill:var(--tx2)}
.chart__bubbleLabel{font-family:var(--fm);font-size:11px;fill:var(--tx);font-weight:600}

@media (max-width:720px){
  .q__options{grid-template-columns:1fr}
  .q__opt{justify-content:flex-start;padding:10px 14px;text-align:left;min-height:0;font-size:.85rem}
  .charts{grid-template-columns:1fr}
  .check__header{flex-wrap:wrap;gap:12px}
  .progress{min-width:100%;order:2}
}