/* === Brand corner: TINY, just "Kyoto" === */
.brand-corner{
  position:fixed;top:14px;left:16px;z-index:50;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink3);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
  padding:5px 9px;border-radius:6px;
  border:1px solid var(--line);
  pointer-events:none;
}

/* === App shell — full-screen question pages === */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#faf8f3;
  --bg2:#f3efe6;
  --ink:#1a1814;
  --ink2:#4a4640;
  --ink3:#8a857c;
  --line:rgba(26,24,20,.12);
  --line2:rgba(26,24,20,.06);
  --red:#ff5a3c;
  --red2:#ff8a6a;
  --yellow:#ffd166;
  --green:#1f9d5a;
  --blue:#3b6bff;
  --purple:#9b5de5;
  --pink:#ff477e;
  --teal:#2ec4b6;
  --shadow:0 4px 18px rgba(26,24,20,.06);
  --shadow-lift:0 12px 40px rgba(26,24,20,.12);
}
html,body{
  height:100%;
  background:var(--bg);color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 1px 1px, rgba(26,24,20,.05) 1px, transparent 0);
  background-size:24px 24px;
}
body{overflow-x:hidden;min-height:100vh}
a{color:var(--ink);text-decoration:none}

.app{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;
  padding:60px 20px 100px; /* top: room for brand corner; bottom: room for nav */
  position:relative;
}
@media(max-height:600px){.app{padding-top:48px;padding-bottom:80px}}

/* === Rail: 7 dots, top of page === */
.rail{
  display:flex;gap:6px;align-items:center;
  margin:0 auto 28px;
  padding:6px 12px;
  background:rgba(255,255,255,.5);
  border:1px solid var(--line2);
  border-radius:999px;
  width:max-content;
}
.rail-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--line);
  transition:all .3s;
}
.rail-dot.done{background:var(--green)}
.rail-dot.active{
  background:var(--red);
  width:24px;border-radius:999px;
  box-shadow:0 0 0 4px var(--red2);
}

/* === Screen: full-bleed question page === */
.screen{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  max-width:560px;width:100%;
  margin:0 auto;
  padding:20px 0 80px;
}
.screen-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px 28px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.screen-card::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red) 0%,var(--yellow) 50%,var(--green) 100%);
}
@media(max-width:600px){.screen-card{padding:24px 20px}}

.q-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink3);
  margin-bottom:10px;
}
.q-title{
  font-family:'Instrument Serif',serif;
  font-size:34px;line-height:1.05;
  letter-spacing:-0.01em;
  margin-bottom:6px;
  font-weight:400;
}
.q-sub{
  color:var(--ink2);font-size:14px;margin-bottom:24px;line-height:1.5;
}
.q-sub b{color:var(--ink);background:var(--yellow);padding:0 4px;border-radius:3px}

/* === Options: big tap targets === */
.options{display:grid;gap:10px}
.options.cols-2{grid-template-columns:1fr 1fr}
.options.cols-3{grid-template-columns:1fr 1fr 1fr}
.options.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
.options.multi{grid-template-columns:1fr 1fr 1fr}
@media(max-width:600px){.options.multi{grid-template-columns:1fr 1fr}}
@media(max-width:480px){
  .options.cols-3,.options.cols-4{grid-template-columns:1fr 1fr}
  .options.multi{grid-template-columns:1fr 1fr}
}
.text-input{
  width:100%;min-height:90px;
  padding:14px 16px;border:1.5px solid var(--line);
  border-radius:12px;background:#fff;
  font:inherit;font-size:15px;color:var(--ink);
  resize:vertical;transition:border-color .2s;
}
.text-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(26,24,20,.06)}
.text-input::placeholder{color:var(--ink3);font-size:13px}
.opt{
  display:flex;align-items:center;gap:12px;
  padding:16px 16px;background:var(--bg);
  border:1.5px solid var(--line);border-radius:14px;
  cursor:pointer;transition:all .15s ease;
  text-align:left;font:inherit;color:inherit;font-size:15px;
  min-height:64px;
  -webkit-tap-highlight-color:transparent;
}
.opt:hover{border-color:var(--ink);background:#fff;transform:translateY(-1px)}
.opt:active{transform:scale(0.99)}
.opt.selected{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.opt-icon{font-size:24px;line-height:1;flex-shrink:0;width:32px;text-align:center}
.opt-body{flex:1;min-width:0}
.opt-title{font-weight:600;line-height:1.2}
.opt-sub{font-size:11px;color:var(--ink3);font-family:'JetBrains Mono',monospace;letter-spacing:0.04em;margin-top:2px}
.opt.selected .opt-sub{color:rgba(255,255,255,.55)}
.opt-check{font-size:18px;opacity:0;transition:opacity .15s;color:var(--green);flex-shrink:0}
.opt.selected .opt-check{opacity:1;color:var(--green2)}

/* === Bottom nav: Back + Next, always visible === */
.qnav{
  position:fixed;left:0;right:0;bottom:0;
  background:rgba(250,248,243,.92);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:12px 20px;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
  z-index:40;
}
.qnav-inner{max-width:560px;margin:0 auto;display:flex;gap:10px;width:100%;align-items:center}
.qnav-counter{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink3);letter-spacing:0.06em;text-transform:uppercase;
  flex:1;text-align:left;
}
.qnav-counter b{color:var(--ink);font-weight:600}
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:13px 22px;border-radius:999px;
  font:inherit;font-size:14px;font-weight:500;
  cursor:pointer;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);
  transition:all .2s;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:disabled{opacity:0.35;cursor:not-allowed}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink);padding:14px 26px;font-size:15px}
.btn-primary:hover:not(:disabled){background:var(--red);border-color:var(--red)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink3)}
.btn-ghost:hover:not(:disabled){color:var(--ink);box-shadow:none;transform:none}
.btn .arrow{font-size:18px;line-height:1;transition:transform .15s}
.btn-primary:hover:not(:disabled) .arrow{transform:translateX(2px)}

/* === Range slider: big, colorful, thumb === */
.range-wrap{padding:8px 0 0}
.range-now{
  text-align:center;
  font-family:'Instrument Serif',serif;
  font-size:42px;line-height:1;
  color:var(--ink);
  font-style:italic;
  margin-bottom:4px;
  transition:color .2s;
}
.range-now.warn{color:var(--red)}
.range-now.good{color:var(--green)}
.range-suffix{
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;color:var(--ink3);
  letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:14px;
}
input[type=range]{
  -webkit-appearance:none;width:100%;
  height:6px;background:var(--bg2);
  border-radius:999px;border:1px solid var(--line2);
  outline:none;cursor:pointer;
  margin:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--red);border:4px solid var(--bg);
  cursor:pointer;box-shadow:0 4px 12px rgba(255,90,60,.4);
  transition:transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;
  background:var(--red);border:4px solid var(--bg);
  cursor:pointer;box-shadow:0 4px 12px rgba(255,90,60,.4);
}
.range-ticks{
  display:flex;justify-content:space-between;
  margin-top:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--ink3);
  letter-spacing:0.04em;
}
.range-warn{
  text-align:center;margin-top:14px;
  padding:10px 12px;border-radius:10px;
  background:var(--red-bg);color:#a83020;
  font-size:12px;line-height:1.4;
  border:1px solid rgba(168,48,32,.15);
}
.range-warn.good{background:#d4f0df;color:#0a5e2e;border-color:rgba(31,157,90,.2)}

/* === "Your priorities" recap on result === */
.your-priorities{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:14px 18px;
  margin:0 0 18px;
  text-align:left;
  position:relative;
  z-index:2;
}
.yp-label{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:rgba(255,255,255,.55);
  margin-bottom:6px;
}
.yp-tags{display:flex;flex-wrap:wrap;gap:5px}
.yp-tag{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:var(--bg);
  text-transform:capitalize;
  font-weight:500;
}
.yp-tag.p-reliability{background:#9ee0c0;color:#0a3d20}
.yp-tag.p-safety{background:#ffd166;color:#5a3a00}
.yp-tag.p-comfort{background:#ffb3c1;color:#5a0a1f}
.yp-tag.p-mileage{background:#7ce0ff;color:#0a3a5a}
.yp-tag.p-features{background:#c5b3ff;color:#2a0a5a}
.yp-tag.p-performance{background:#ffaa66;color:#5a2200}
.yp-tag.p-status{background:#ffd700;color:#5a4400}
.yp-tag.p-tech{background:#aaffc5;color:#0a5a2a}
.yp-tag.p-lowMaint{background:#ffe0a5;color:#5a4400}
.yp-tag.s-suv{background:#aac5ff;color:#0a205a}
.yp-tag.s-sedan{background:#ffaaca;color:#5a0a30}
.yp-tag.s-hatch{background:#aaffcc;color:#0a5a30}
.yp-tag.s-mpv{background:#ffd0aa;color:#5a300a}
.yp-tag.s-luxe{background:#ffd700;color:#5a4400}
.yp-tag.s-jdm{background:#ffaaaa;color:#5a0a0a}
.yp-tag.s-electric{background:#aaf0ff;color:#0a4a5a}
.yp-tag.s-muscle{background:#ff8866;color:#5a1100}
.yp-tag.s-vintage{background:#d0c0a0;color:#3a2a0a}
.yp-dream{
  font-family:'Instrument Serif',serif;
  font-size:15px;
  font-style:italic;
  color:var(--yellow);
}

/* === Result screen === */
.result{
  max-width:680px;margin:0 auto;
  display:flex;flex-direction:column;gap:18px;
}
.result-hero{
  background:linear-gradient(135deg, var(--ink) 0%, #2a2722 100%);
  color:var(--bg);
  border-radius:24px;
  padding:40px 32px 36px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-lift);
}
.result-hero::before{
  content:"";position:absolute;
  top:-100px;right:-100px;
  width:300px;height:300px;
  background:radial-gradient(circle, var(--red) 0%, transparent 70%);
  opacity:0.5;pointer-events:none;
}
.result-hero::after{
  content:"";position:absolute;
  bottom:-100px;left:-100px;
  width:280px;height:280px;
  background:radial-gradient(circle, var(--yellow) 0%, transparent 70%);
  opacity:0.25;pointer-events:none;
}
.result-emoji{
  font-size:60px;line-height:1;
  display:inline-block;margin-bottom:10px;
  animation:floaty 3s ease-in-out infinite;
  position:relative;
}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.result-tag{
  display:inline-block;
  background:var(--yellow);color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:10px;
  padding:4px 10px;border-radius:4px;letter-spacing:0.1em;
  margin-bottom:14px;text-transform:uppercase;
  position:relative;
}
.result-h{
  font-family:'Instrument Serif',serif;
  font-size:clamp(36px,7vw,52px);line-height:0.98;
  letter-spacing:-0.02em;margin-bottom:10px;
  position:relative;
}
.result-h em{color:var(--yellow);font-style:italic}
.result-sub{
  color:rgba(255,255,255,.7);
  font-size:14px;max-width:480px;margin:0 auto 22px;
  position:relative;
}
.result-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;overflow:hidden;
  margin:18px 0 0;position:relative;
}
@media(max-width:600px){.result-stats{grid-template-columns:repeat(2,1fr)}}
.result-stat{background:rgba(0,0,0,.25);padding:14px;text-align:left}
.result-stat .v{font-family:'Instrument Serif',serif;font-size:24px;line-height:1;margin-bottom:3px}
.result-stat .v.good{color:#7ee2a3}
.result-stat .v.warn{color:#ffd166}
.result-stat .v.bad{color:#ff9a8a}
.result-stat .k{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:0.08em}

.section-h{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:18px 0 4px;padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.section-h h2{
  font-family:'Instrument Serif',serif;
  font-size:24px;line-height:1;letter-spacing:-0.01em;
}
.section-h .right{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink3);text-transform:uppercase;letter-spacing:0.08em;
}

/* === Featured car card (with image) === */
.featured{
  background:#fff;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow);
  position:relative;
}
.featured-img{
  width:100%;height:200px;object-fit:cover;
  background:var(--bg2);
  display:block;
}
.featured-img-fallback{
  width:100%;height:200px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--bg2) 0%, var(--line2) 100%);
  font-size:80px;color:var(--ink3);
}
.featured-body{padding:20px 22px 22px;position:relative}
.featured .ribbon{
  position:absolute;top:12px;right:12px;z-index:2;
  background:var(--red);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  padding:5px 10px;border-radius:4px;
  text-transform:uppercase;letter-spacing:0.1em;
  box-shadow:0 2px 8px rgba(255,90,60,.4);
}
.featured-name{font-size:20px;font-weight:600;margin-bottom:4px;line-height:1.2}
.featured-tag{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink3);letter-spacing:0.06em;margin-bottom:10px;text-transform:uppercase}
.featured-why{font-size:13px;color:var(--ink2);margin-bottom:14px;line-height:1.5}
.featured-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.featured-costline{
  background:var(--ink);color:var(--bg);
  padding:8px 12px;border-radius:8px;margin-bottom:12px;
  font-size:12px;line-height:1.4;
}
.featured-costline b{color:var(--yellow);font-size:14px;font-weight:600}
.featured-price{font-family:'Instrument Serif',serif;font-size:30px;line-height:1}
.featured-price-sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:0.06em}
.featured-specs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.featured-spec{font-size:10px;padding:4px 8px;background:var(--bg);border-radius:4px;color:var(--ink2);font-family:'JetBrains Mono',monospace;letter-spacing:0.02em}
.featured-reason{font-size:12px;color:var(--ink3);font-style:italic;padding-top:12px;border-top:1px solid var(--line2);line-height:1.5}
.featured-img-attr{position:absolute;bottom:6px;left:8px;font-family:'JetBrains Mono',monospace;font-size:8px;color:rgba(255,255,255,.85);background:rgba(0,0,0,.55);padding:2px 6px;border-radius:3px;letter-spacing:0.04em;z-index:2}

/* === Other car cards: image + minimal text === */
.car-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
@media(max-width:560px){.car-grid{grid-template-columns:1fr}}
.car-card{
  background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
  transition:all .2s;
  display:block;color:inherit;
}
.car-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--ink)}
.car-card-img{
  width:100%;height:130px;object-fit:cover;
  background:var(--bg2);display:block;
}
.car-card-img-fallback{
  width:100%;height:130px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--bg2) 0%, var(--line2) 100%);
  font-size:48px;color:var(--ink3);
}
.car-card-body{padding:14px 16px 16px;position:relative}
.car-card .tag{
  position:absolute;top:8px;right:8px;
  font-family:'JetBrains Mono',monospace;font-size:8px;
  background:rgba(26,24,20,.85);color:#fff;
  padding:3px 7px;border-radius:4px;
  text-transform:uppercase;letter-spacing:0.08em;
}
.car-card .used-tag{background:var(--green)}
.car-card .ev-tag{background:var(--blue)}
.car-card .name{font-size:14px;font-weight:600;line-height:1.25;padding-right:50px;margin-bottom:4px}
.car-card .price{font-family:'Instrument Serif',serif;font-size:22px;line-height:1;margin-bottom:2px}
.car-card .price-sub{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:8px}
.car-card .specs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.car-card .spec{font-size:9px;padding:2px 6px;background:var(--bg);border-radius:3px;color:var(--ink2);font-family:'JetBrains Mono',monospace}
.car-card .why{font-size:11px;color:var(--ink2);line-height:1.4;margin-top:6px}

/* === Money picture: 6-stat grid === */
.money{
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:20px;
}
.money-h{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid var(--line2);
}
.money-h h3{font-family:'Instrument Serif',serif;font-size:22px;line-height:1}
.money-h .right{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:0.08em}
.money-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:480px){.money-grid{grid-template-columns:1fr}}
.money-row{
  background:var(--bg);border-radius:10px;padding:10px 12px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.money-row .k{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:0.06em}
.money-row .v{font-family:'Instrument Serif',serif;font-size:18px;line-height:1}
.money-row .v.good{color:var(--green)}
.money-row .v.warn{color:#c47c00}
.money-row .v.bad{color:#a83020}
.money-verdict{
  margin-top:12px;padding:12px;
  background:var(--bg2);border-radius:10px;
  font-size:12px;color:var(--ink2);line-height:1.5;
}
.money-verdict b{color:var(--ink)}
.money-verdict.good{background:#d4f0df;color:#0a5e2e}
.money-verdict.good b{color:#0a3d20}
.money-verdict.warn{background:#fff3d6;color:#7a4d00}
.money-verdict.warn b{color:#5a3a00}

/* === Dream vs reality === */
.dream{
  background:linear-gradient(135deg, #fff5e8 0%, #ffe9d6 100%);
  border:1px solid #ffd9b3;
  border-radius:16px;padding:20px;
}
.dream h3{
  font-family:'Instrument Serif',serif;font-size:22px;
  line-height:1;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.dream-vs{
  display:flex;align-items:stretch;gap:10px;
  margin:12px 0 6px;
}
.dream-vs .v-block{
  flex:1;padding:12px 14px;background:rgba(255,255,255,.7);
  border-radius:10px;border:1px solid rgba(0,0,0,.05);
}
.dream-vs .v-arrow{
  align-self:center;font-size:18px;color:var(--ink3);
  flex:0 0 auto;
}
.dream-vs .v-label{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--ink3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;
}
.dream-vs .v-name{font-weight:600;font-size:14px;line-height:1.2}
.dream-vs .v-meta{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink3);margin-top:3px;letter-spacing:0.04em}
.dream-verdict{font-size:13px;color:#5a3a00;line-height:1.5;margin-top:12px}
.dream-verdict b{color:#3a2a00}

/* === Finance breakdown === */
.finance{
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:20px;
}
.finance-h{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line2);
}
.finance-h h3{font-family:'Instrument Serif',serif;font-size:20px;line-height:1}
.finance-h .right{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:0.08em}
.finance-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--line2);
  font-size:13px;gap:10px;
}
.finance-row:last-of-type{border-bottom:none;font-weight:600;padding-top:12px;margin-top:4px;border-top:1.5px solid var(--ink);font-size:14px}
.finance-row .k{color:var(--ink2);flex:1}
.finance-row .k .sub-k{color:var(--ink3);font-size:9px;display:block;margin-top:1px;font-family:'JetBrains Mono',monospace;letter-spacing:0.04em;text-transform:uppercase}
.finance-row .v{font-family:'Instrument Serif',serif;font-size:18px;line-height:1;text-align:right}
.finance-row.avg{
  background:var(--bg2);
  padding:10px 12px !important;
  margin:4px -8px;
  border-radius:8px;
  border-bottom:none !important;
  border-top:1.5px solid var(--ink) !important;
}
.finance-row.avg .k{color:var(--ink)}
.finance-row.avg .v{color:var(--ink);font-size:22px}
.finance-row.avg:last-of-type{border-bottom:none !important}
.finance-note{
  margin-top:14px;padding:14px;
  background:var(--bg2);border-radius:10px;
  font-size:12px;color:var(--ink2);line-height:1.5;
}
.finance-note b{color:var(--ink)}

/* === Tips === */
.tips{
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:18px 20px;
}
.tips-h{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--ink3);text-transform:uppercase;letter-spacing:0.08em;
  margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid var(--line2);
}
.tip{
  display:flex;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line2);
  font-size:12px;color:var(--ink2);line-height:1.5;
}
.tip:last-child{border-bottom:none}
.tip-icon{width:24px;height:24px;border-radius:6px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.tip b{color:var(--ink)}

/* === Affordability ladder (visual) === */
.ladder{
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:20px;
}
.ladder h3{font-family:'Instrument Serif',serif;font-size:20px;line-height:1;margin-bottom:14px}
.ladder-row{
  display:flex;align-items:center;gap:12px;padding:8px 0;
}
.ladder-bar-wrap{flex:1;height:8px;background:var(--bg2);border-radius:999px;overflow:hidden;position:relative;border:1px solid var(--line2)}
.ladder-bar{height:100%;background:var(--red);border-radius:999px;transition:width .5s}
.ladder-bar.healthy{background:var(--green)}
.ladder-bar.warn{background:var(--yellow)}
.ladder-bar.over{background:var(--red)}
.ladder-label{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:0.06em;width:80px;flex-shrink:0}
.ladder-val{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;width:60px;flex-shrink:0;text-align:right}

/* === Share/download bar (bottom, on result page only) === */
.sharebar{
  position:fixed;left:0;right:0;bottom:0;
  background:rgba(250,248,243,.95);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:10px 20px;
  display:flex;gap:8px;align-items:center;justify-content:center;
  z-index:40;
}
.chip-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 16px;border-radius:999px;
  font:inherit;font-size:13px;font-weight:500;
  background:#fff;color:var(--ink);
  border:1.5px solid var(--line);
  cursor:pointer;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.chip-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--ink)}
.chip-btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip-btn.primary:hover{background:var(--red);border-color:var(--red)}

/* === Toast === */
.toast{
  position:fixed;top:60px;left:50%;
  transform:translateX(-50%) translateY(-100px);
  background:var(--ink);color:var(--bg);
  padding:11px 20px;border-radius:10px;
  font-size:13px;z-index:200;
  transition:transform .3s;box-shadow:var(--shadow-lift);
  max-width:90vw;
}
.toast.show{transform:translateX(-50%) translateY(0)}

.hidden{display:none !important}

/* === Decorative shapes on result === */
.deco-circle{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle, var(--yellow) 0%, transparent 70%);
  opacity:0.3;pointer-events:none;
}

/* === Driving-the-numbers callout === */
.callout{
  background:linear-gradient(135deg, #f0f7ff 0%, #e0e7ff 100%);
  border:1px solid #cdd9ff;
  border-radius:16px;padding:18px 20px;
}
.callout-h{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:#3b6bff;text-transform:uppercase;letter-spacing:0.1em;
  margin-bottom:8px;
}
.callout-body{font-size:14px;color:#1a3a8a;line-height:1.5}
.callout-body b{color:#0a1f5a}
.callout-stat{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(59,107,255,.15);
}
.callout-stat .k{font-family:'JetBrains Mono',monospace;font-size:10px;color:#3b6bff;text-transform:uppercase;letter-spacing:0.06em}
.callout-stat .v{font-family:'Instrument Serif',serif;font-size:22px;color:#0a1f5a}