/**
 * AI Advisor v2 — styles from the approved mockup.
 * Shared chrome (util bar, header, dropdowns, mobile menu, search popover,
 * footer, scroll-top) comes from v2-chrome.css.
 */
:root{
  --paper:#F9F9FB; --cream:#ffedde; --red:#ff3f3f;
  --line:rgba(0,0,0,.13); --line-soft:rgba(0,0,0,.08);
  --muted:rgba(0,0,0,.62); --muted-2:rgba(0,0,0,.45);
  --r:14px; --r-sm:9px;
  --sh-1:0 1px 2px rgba(0,0,0,.05), 0 6px 18px -10px rgba(0,0,0,.14);
  --sh-2:0 2px 4px rgba(0,0,0,.06), 0 22px 44px -20px rgba(0,0,0,.26);
  --display:'Archivo', system-ui, sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --wrap:1120px; --hdr:66px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:#000;font-family:var(--body);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.1;font-variation-settings:'wdth' 110}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:5px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;display:block;margin-bottom:11px}
.eyebrow::before{content:'';display:inline-block;width:14px;height:2px;background:var(--red);vertical-align:3px;margin-right:9px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;font-weight:600;font-size:14px;padding:11px 18px;transition:transform .12s,background .16s,border-color .16s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover:not(:disabled){background:#000}
.btn--light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.btn--light:hover{background:rgba(255,255,255,.2)}
.btn--wide{width:100%}
.btn--lg{padding:14px 24px;font-size:15px}

/* ============ hero ============ */
.hero{background:#000;color:#fff;position:relative;overflow:hidden;padding:32px 0 36px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(820px 360px at 85% -25%,rgba(255,63,63,.34),transparent 62%)}
.hero::after{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,#000,transparent 84%)}
.hero > *{position:relative;z-index:2}
.crumbs{font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:20px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:#fff}
.crumbs span{color:rgba(255,255,255,.3)}
.hero .eyebrow{color:#fff}
.hero h1{font-size:clamp(30px,4.6vw,46px);font-variation-settings:'wdth' 106;letter-spacing:-.035em;margin-bottom:14px}
.hero .lede{color:rgba(255,255,255,.72);font-size:16.5px;max-width:62ch;margin:0 0 20px}
.hero__trust{display:flex;gap:26px;flex-wrap:wrap}
.htrust{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.7)}
.htrust svg{color:var(--red);flex:0 0 16px}
.htrust b{color:#fff;font-weight:600}

/* ============ layout ============ */
.advisor{padding:30px 0 56px}
.ad__grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}

/* ============ the tool ============ */
.tool{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);overflow:hidden;min-width:0}
.tool__bar{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--line-soft);background:var(--paper)}
.tool__bar .step-lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:600;white-space:nowrap}
.progress{flex:1;height:6px;background:rgba(0,0,0,.08);border-radius:6px;overflow:hidden}
.progress__fill{height:100%;background:var(--red);border-radius:6px;width:20%;transition:width .3s cubic-bezier(.2,.8,.25,1)}
.tool__body{padding:30px 24px}
.step{display:none}
.step.on{display:block;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step__q{font-size:22px;margin-bottom:6px;font-variation-settings:'wdth' 102}
.step__hint{color:var(--muted);font-size:13.8px;margin:0 0 22px}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.opt{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 17px;cursor:pointer;transition:.15s;background:#fff;text-align:left;display:flex;gap:13px;align-items:flex-start}
.opt:hover{border-color:var(--red);background:var(--cream)}
.opt.sel{border-color:#000;background:#000;color:#fff}
.opt__ico{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--cream);display:grid;place-items:center;color:#000;transition:.15s}
.opt.sel .opt__ico{background:rgba(255,255,255,.14);color:#fff}
.opt__ico svg{width:18px;height:18px}
.opt b{display:block;font-size:14.5px;font-weight:600;font-variation-settings:'wdth' 100}
.opt span span{font-size:12.4px;color:var(--muted)}
.opt.sel span span{color:rgba(255,255,255,.6)}

.field{margin-bottom:20px}
.field > label{display:block;font-size:13.5px;font-weight:600;margin-bottom:9px}
.field .val{font-family:var(--mono);color:var(--red);font-weight:600}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:rgba(0,0,0,.1);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--red);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--red);cursor:pointer;border:3px solid #fff}
.scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted-2);margin-top:7px}
input[type=text]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);font-size:14.5px}
input[type=text]:focus{outline:none;border-color:var(--red);background:#fff}

.tool__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-top:1px solid var(--line-soft);background:var(--paper)}
.tool__foot .back{font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;background:none;border:0;display:inline-flex;align-items:center;gap:7px}
.tool__foot .back:hover{color:#000}
.tool__foot .back:disabled{opacity:0;pointer-events:none}

/* ============ result panel ============ */
.result{position:sticky;top:calc(var(--hdr) + 20px);background:#000;color:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2);min-width:0}
.result__ph{padding:30px 24px;text-align:center}
.result__ph .ico{width:56px;height:56px;margin:0 auto 16px;border-radius:15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:var(--cream)}
.result__ph h3{font-size:18px;margin-bottom:8px}
.result__ph p{color:rgba(255,255,255,.6);font-size:13.5px;margin:0 auto;max-width:34ch}
.result__ph .steps{display:flex;flex-direction:column;gap:10px;margin-top:20px;text-align:left}
.rstep{display:flex;gap:11px;align-items:center;font-size:13px;color:rgba(255,255,255,.7)}
.rstep .n{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;color:rgba(255,255,255,.6)}
.rstep.done .n{background:var(--red);border-color:var(--red);color:#fff}
.rstep.done{color:#fff}

.result__pick{display:none}
.result__pick.on{display:block}
.rp__flag{display:flex;align-items:center;gap:8px;padding:14px 20px;background:var(--red);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.rp__flag.closest{background:#000;color:var(--cream);border-bottom:1px solid rgba(255,255,255,.14)}
.rp__body{padding:20px}
.rp__top{display:flex;align-items:center;gap:12px;margin-bottom:14px;min-width:0}
.rp__top .mk{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:#fff;color:#000;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:19px}
.rp__top .mk.logo-tile{overflow:hidden}
.rp__top .mk.logo-tile img{width:32px;height:32px;object-fit:contain}
.rp__top h3{font-size:19px;font-variation-settings:'wdth' 100;overflow-wrap:anywhere}
.rp__plan{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55);margin-top:2px;overflow-wrap:anywhere}
.rp__top .sc{margin-left:auto;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.04em;font-variation-settings:'wdth' 100}
.rp__why{font-size:13.6px;color:rgba(255,255,255,.78);line-height:1.55;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.13)}
.rp__row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0}
.rp__row .k{color:rgba(255,255,255,.55)}
.rp__row .v{font-family:var(--mono);font-weight:600;text-align:right}
.rp__row .v.warn{color:var(--red)}
.rp__btns{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.rp__alt{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13)}
.rp__alt .lab,.rp__gaps .lab,.rp__email .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600;margin-bottom:10px}
.rp__altrow{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;min-width:0}
.rp__altrow .mk{width:26px;height:26px;flex:0 0 26px;border-radius:7px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:12px}
.rp__altrow .mk.logo-tile{background:#fff;overflow:hidden}
.rp__altrow .mk.logo-tile img{width:19px;height:19px;object-fit:contain}
.rp__altrow .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp__altrow .sc{margin-left:auto;font-family:var(--mono);color:rgba(255,255,255,.7);white-space:nowrap}
a.rp__altrow:hover .nm{color:var(--cream)}
.rp__gaps{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13)}
.rp__gaps ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rp__gaps li{font-size:12.4px;color:rgba(255,255,255,.68);line-height:1.5;padding-left:14px;position:relative}
.rp__gaps li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--red)}
.rp__how{margin:2px 0 16px}
.rp__how summary{list-style:none;cursor:pointer;font-size:12.6px;font-weight:600;color:var(--cream);display:inline-flex;align-items:center;gap:7px}
.rp__how summary::-webkit-details-marker{display:none}
.rp__how summary::before{content:"+";font-family:var(--mono);color:var(--red);font-weight:700}
.rp__how[open] summary::before{content:"–"}
.rp__how ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rp__how li{font-size:12.4px;color:rgba(255,255,255,.7);display:flex;gap:8px;align-items:flex-start}
.rp__how li svg{flex:0 0 13px;width:13px;height:13px;margin-top:3px;color:var(--cream)}
.rp__vs{margin-top:12px;padding:11px 13px;background:rgba(255,63,63,.14);border-radius:var(--r-sm);font-size:12.6px;color:rgba(255,255,255,.85);line-height:1.5}
.rp__email{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13)}
.rp__email p{font-size:12.4px;color:rgba(255,255,255,.62);margin:0 0 10px;line-height:1.5}
.rp__emailrow{display:flex;gap:8px}
.rp__emailrow input{flex:1;min-width:0;padding:11px 13px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);background:rgba(255,255,255,.06);color:#fff;font-size:14px}
.rp__emailrow input::placeholder{color:rgba(255,255,255,.4)}
.rp__emailrow input:focus{outline:none;border-color:var(--red);background:rgba(255,255,255,.1)}
.rp__emailok{color:var(--cream);font-weight:600;font-size:12.8px;margin:10px 0 0}

/* ============ how it works ============ */
.how{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.howc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-1)}
.howc .n{font-family:var(--mono);font-size:11px;color:var(--red);font-weight:600;letter-spacing:.1em}
.howc h3{font-size:15.5px;margin:9px 0 7px;font-variation-settings:'wdth' 100}
.howc p{margin:0;font-size:13.4px;color:var(--muted);line-height:1.5}

@media (max-width:920px){
  .ad__grid{grid-template-columns:1fr}
  .result{position:static}
}
@media (max-width:800px){
  .how{grid-template-columns:1fr}
}
@media (max-width:600px){
  .opts{grid-template-columns:1fr}
  .tool__body{padding:24px 18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Alternative rows name the plan too, so two plans from the same provider
   are still distinguishable. */
.rp__altrow .nm em{font-style:normal;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5)}