/* Valuely — soft colour per screen, dark ink, one narrow centred column, lots of air. */
:root{
  --home:#DCE7F6; --q0:#FBDAD2; --q1:#E3DAF7; --q2:#D4EEDD;
  --ink:#17171A; --muted:#5F6068; --paper:#FFFFFF; --soft:#F2F2EF; --rule:#E3E3DE;
  --f-disp:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f:"Inter","Segoe UI",system-ui,sans-serif;
  --col:var(--home); --w:560px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--col); color:var(--ink); font-family:var(--f); font-size:16px; line-height:1.5; transition:background .4s; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100%}
body.c-q0{--col:var(--q0)} body.c-q1{--col:var(--q1)} body.c-q2{--col:var(--q2)}
main{flex:1; display:flex; flex-direction:column}
main>.band:first-child.fill{flex:1; display:flex; align-items:center}
button,input,a{font-family:inherit}
button{cursor:pointer}
a{color:inherit; text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
input:focus{outline:none; box-shadow:0 0 0 3px rgba(23,23,26,.25)}
.wrap{max-width:var(--w); margin:0 auto; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px)); width:100%}
.k{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0}
.disp{font-family:var(--f-disp); font-weight:800; letter-spacing:-.04em; line-height:.95; margin:0}

/* top bar */
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:60px; font-size:14px; font-weight:500}
.top nav{display:flex; gap:18px}
.top button,.top nav a{background:none; border:0; color:var(--ink); padding:0; font:inherit; opacity:.75}
.top button:hover{opacity:1}
.top .back{width:36px; height:36px; border-radius:999px; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; opacity:1}
.top .back svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.top .back[hidden]{display:none}
.brand{font-family:var(--f-disp); font-size:20px; font-weight:800; letter-spacing:-.02em; opacity:1}
.top .brand{opacity:1}
@media (max-width:640px){ .top .sec{display:none} }

/* bands */
.band{padding:72px 0 64px}
.white{background:var(--paper)}
.white.band{padding:56px 0 64px}
#below:not([hidden])+#info{padding-top:0}
@media (max-width:640px){ .band{padding:48px 0 44px} .white.band{padding:40px 0 48px} }

/* shared column */
.col{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px}

/* home */
.h1{font-size:clamp(42px,9vw,68px); margin-top:4px}
.lead{font-size:17px; line-height:1.55; max-width:30ch; color:var(--muted); margin:0}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 30px; background:var(--ink); color:#fff; font-size:15px; font-weight:600; border:0; border-radius:999px}
.btn.line{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn:not(:disabled):hover{opacity:.9}
.btn:disabled{background:transparent; color:var(--muted); border:1.5px solid rgba(23,23,26,.25); cursor:not-allowed}
.meta{font-size:13px; color:var(--muted); margin:-4px 0 0}
.qrow{display:flex; gap:28px; justify-content:center; align-items:center; margin-top:8px}
.qrow span{display:flex; align-items:center; gap:8px; color:var(--ink); opacity:.8}
.qrow span.done{opacity:.45}
.qrow em{font-style:normal; font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--muted)}
.qrow svg{width:26px; height:26px}

/* question */
.prog{display:flex; gap:6px}
.prog span{width:28px; height:4px; border-radius:2px; background:rgba(23,23,26,.18)}
.prog span.on{background:var(--ink)}
.qtext{font-family:var(--f-disp); font-size:clamp(28px,5.2vw,38px); font-weight:800; line-height:1.12; letter-spacing:-.03em; margin:0; text-wrap:balance; max-width:22ch}
.bid{display:flex; flex-direction:column; gap:12px; width:100%; max-width:420px; align-items:center; margin-top:4px}
.amt{position:relative; width:100%}
.amt .cur{position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:24px; font-weight:700; color:var(--muted)}
.amt .unit{position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--muted); max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.amt input{width:100%; font-family:var(--f-disp); font-size:clamp(28px,6vw,36px); font-weight:800; letter-spacing:-.03em; color:var(--ink); background:#fff; border:0; border-radius:14px; padding:18px 64px 18px 46px; font-variant-numeric:tabular-nums; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.amt.nocur input{padding-left:20px}
.amt input::placeholder{color:#B8B8B3}
.readout{font-size:14px; color:var(--muted); min-height:1.5em; margin:0}
.fine{font-size:13px; color:var(--muted); margin:0}

/* result */
.mult{font-size:clamp(64px,13vw,104px)}
.tier{font-size:14px; font-weight:600; color:var(--muted); margin-top:-8px}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:380px; margin-top:4px}
.pair div{background:rgba(255,255,255,.65); border-radius:14px; padding:12px 16px; display:flex; flex-direction:column; gap:2px; min-width:0}
.pair .v{font-family:var(--f-disp); font-size:24px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.beat{margin:0; font-size:15px; color:var(--muted)}
.beat b{color:var(--ink); font-weight:600}
.notes{display:flex; flex-direction:column; gap:22px}
.note{display:flex; flex-direction:column; gap:6px; margin:0}
.note span{font-size:16px; line-height:1.6}
.src{font-size:13px; color:var(--muted)}
.chartwrap{display:flex; flex-direction:column; gap:8px; min-width:0; width:100%; max-width:420px; margin-top:4px}
.chartwrap[hidden]{display:none}
.chart{width:100%; height:auto; display:block}
.chart .bar{fill:rgba(255,255,255,.75)} .chart .you{fill:var(--ink)}
.chart text{fill:var(--muted); font-size:12px; font-weight:600}
.chart .youlab{fill:var(--ink); font-weight:800} .chart .anslab{fill:var(--ink); font-weight:600}
.chart .ansline{stroke:var(--ink); stroke-width:1.2; stroke-dasharray:4 4}
.wait{font-size:14px; color:var(--muted); margin:0}
.nextrow{display:none}
.why{background:none; border:0; color:var(--muted); font-size:14px; font-weight:500; padding:4px 8px; text-decoration:underline; text-underline-offset:4px}

/* summary */
.rows{display:flex; flex-direction:column; gap:8px; width:100%; max-width:460px; margin-top:4px}
.row{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.65); border:0; width:100%; color:var(--ink); font:inherit; text-align:left}
.row:hover{background:rgba(255,255,255,.85)}
.row .qn{font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--muted)}
.row svg{width:22px; height:22px; opacity:.8; flex-shrink:0}
.row .tt{font-size:14px; font-weight:500; min-width:0; flex:1; line-height:1.35}
.row .p{font-family:var(--f-disp); font-size:22px; font-weight:800; letter-spacing:-.03em; margin-left:auto}
.row .chev{font-size:20px; color:var(--muted); line-height:1}
.row .dot{width:10px; height:10px; border-radius:50%; flex-shrink:0}
.row.q0 .dot{background:#D9603F} .row.q1 .dot{background:#7A5FC9} .row.q2 .dot{background:#2F9A5E}
.share{font-family:inherit; font-size:14px; line-height:1.6; white-space:pre-wrap; background:var(--soft); border-radius:14px; padding:14px 18px; margin:0; width:100%; max-width:420px; text-align:left}
.acts{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.toast{font-size:13px; color:var(--muted); min-height:1.2em; margin:0}
.next{display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:8px}
.next .v{font-family:var(--f-disp); font-size:32px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.next .s{font-size:14px; color:var(--muted); margin:0}

/* info */
.about{text-align:left; display:flex; flex-direction:column; gap:10px}
.about h2{font-family:var(--f-disp); font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.15; margin:0 0 2px}
.about p{margin:0; font-size:16px; line-height:1.6; color:#2A2A2E}
.info{display:flex; flex-direction:column; gap:18px; text-align:left}
.info>div{display:flex; gap:14px; align-items:flex-start}
.info>div>div{min-width:0}
.info .n{font-family:var(--f-disp); font-size:20px; font-weight:800; color:var(--muted); width:28px; flex-shrink:0; line-height:1.4}
.info strong{font-size:16px; font-weight:600; display:block}
.info p{margin:2px 0 0; font-size:15px; line-height:1.5; color:var(--muted)}
.hr{border:0; border-top:1px solid var(--rule); margin:36px 0}
.ex{margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--muted); text-align:left}
.days{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.day{font-size:13px; font-weight:600; color:var(--ink); background:var(--soft); border:0; border-radius:999px; padding:8px 14px}
.day[aria-current="true"]{background:var(--ink); color:#fff}
.foot{font-size:13px; color:var(--muted); margin:12px 0 0; text-align:left}
footer{background:var(--paper); color:var(--muted); font-size:13px}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:18px; padding-bottom:28px; border-top:1px solid var(--rule)}
footer nav{display:flex; gap:18px}

/* overlays */
.scrim{position:fixed; inset:0; background:rgba(23,23,26,.4); z-index:20}
.drawer{position:fixed; top:0; bottom:0; left:0; width:300px; max-width:86vw; background:var(--paper); color:var(--ink); z-index:21; display:flex; flex-direction:column; padding:16px 20px 24px; overflow-y:auto}
.drawer.right{left:auto; right:0; width:400px; max-width:92vw; gap:22px}
.dhead{display:flex; align-items:center; justify-content:space-between; height:40px; margin-bottom:12px}
.dhead .brand{font-size:20px}
.dhead h2{margin:0; font-family:var(--f-disp); font-size:20px; font-weight:800; letter-spacing:-.02em}
.x{width:36px; height:36px; border:0; background:var(--soft); border-radius:999px; display:flex; align-items:center; justify-content:center; color:var(--ink)}
.x svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}
.nav{display:flex; align-items:center; min-height:46px; padding:0 4px; font-size:16px; font-weight:500; color:var(--ink); background:none; border:0; text-align:left; width:100%; border-bottom:1px solid var(--rule)}
.nav.on{font-weight:600}
.dfoot{margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:16px; font-size:14px; color:var(--muted)}
.dfoot .links{display:flex; gap:16px; font-size:13px}
.sec{display:flex; flex-direction:column; gap:10px}
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.stats div{background:var(--soft); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:2px; min-width:0}
.stats b{font-family:var(--f-disp); font-size:26px; font-weight:800; letter-spacing:-.03em}
.hist{display:flex; align-items:flex-end; gap:5px; height:80px}
.hist span{flex:1; background:var(--rule); border-radius:3px}
.hist span.on{background:var(--ink)}
.sec .s{font-size:13px; color:var(--muted)}
.cta2{margin-top:auto; border-top:1px solid var(--rule); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.cta2 h3{margin:0; font-size:16px; font-weight:600}
.cta2 p{margin:0; font-size:14px; color:var(--muted)}
.cta2 .btn{min-height:44px; font-size:14px}
.nmrow{display:flex; gap:8px}
.nmrow input{flex:1; min-width:0; font:500 14px var(--f); background:var(--soft); border:0; border-radius:999px; padding:10px 14px; color:var(--ink)}
.lb{display:flex; flex-direction:column; font-size:15px}
.lb div{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--rule)}
.lb .you{font-weight:700}
@media (prefers-reduced-motion:no-preference){ #stage>*,#belowInner>*{animation:in .35s cubic-bezier(.2,.7,.2,1)} @keyframes in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}} }

/* calculator sheet */
.sheet{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,380px); background:var(--paper); color:var(--ink); border-radius:20px; padding:18px 20px 20px; z-index:21; display:flex; flex-direction:column; gap:12px; box-shadow:0 30px 60px -20px rgba(0,0,0,.3)}
.sheet .dhead{margin-bottom:0}
.sheet input{width:100%; font:600 18px var(--f); background:var(--soft); border:0; border-radius:12px; padding:12px 14px; color:var(--ink)}
.cres{font-family:var(--f-disp); font-size:28px; font-weight:800; letter-spacing:-.03em; min-height:1.3em; font-variant-numeric:tabular-nums}
.keys{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.keys button{min-height:44px; border:0; border-radius:10px; background:var(--soft); color:var(--ink); font:600 17px var(--f); cursor:pointer}
.keys button:hover{background:var(--rule)}
.sheet .acts{justify-content:flex-start}
.sheet .btn{min-height:46px; font-size:14px; padding:0 20px}
/* archive rows */
.arow{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 4px; border:0; border-bottom:1px solid var(--rule); background:none; width:100%; text-align:left; font:inherit; color:var(--ink)}
.arow>span:first-child{display:flex; flex-direction:column; gap:2px}
.arow .s{font-size:13px; color:var(--muted)}
.arow .done{font-family:var(--f-disp); font-weight:800; font-size:18px}
.arow .todo{font-size:13px; font-weight:600; color:var(--ink); border:1.5px solid var(--ink); border-radius:999px; padding:5px 12px}
/* submit form */
.sform{display:flex; flex-direction:column; gap:8px}
.sform .k{margin-top:8px}
.sform input,.sform textarea{width:100%; font:500 15px var(--f); background:var(--soft); border:0; border-radius:10px; padding:10px 12px; color:var(--ink); resize:vertical}
.sform .btn{margin-top:12px; align-self:flex-start; min-height:46px; font-size:14px}

/* cookie notice (shown only to visitors in European time zones) */
.consent{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); width:min(92vw,520px); background:var(--paper); color:var(--ink); border-radius:14px; padding:14px 16px; box-shadow:0 20px 50px -20px rgba(0,0,0,.35); display:flex; gap:12px; align-items:center; z-index:30; font-size:14px}
.consent p{margin:0; flex:1; color:var(--muted)}
.consent .btn{min-height:40px; padding:0 16px; font-size:14px}