/* Ask flow + Choice component. Black and white only, heavy type, big tap targets. */
.flow { display: grid; gap: 20px; }
.step { scroll-margin-top: 16px; }
.step-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.step-head .kicker { margin: 0; }
.step-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.slow { background: var(--k); color: var(--w); border: 1px dashed var(--w); font: 700 13px var(--heavy); padding: 8px 12px; cursor: pointer; min-height: 40px; }
.slow:hover { background: var(--w); color: var(--k); }
.slow:disabled { opacity: .6; cursor: default; background: var(--k); color: var(--g); }
.loading { font: 800 clamp(22px, 3vw, 32px)/1.2 var(--heavy); letter-spacing: -.02em; margin: 6px 0; animation: tePulse 1.2s infinite alternate; }
@keyframes tePulse { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loading { animation: none; } }

/* the analysis */
.an-block { border-top: 1px solid var(--line); padding: 18px 0; }
.an-block:first-child { border-top: 0; padding-top: 0; }
.an-block h3 { font: 800 12px var(--heavy); letter-spacing: .16em; text-transform: uppercase; color: var(--g); margin: 0 0 10px; }
.an-big { font: 900 clamp(26px, 4vw, 46px)/1.05 var(--heavy); letter-spacing: -.035em; margin: 0; overflow-wrap: anywhere; }
.an-block ul { list-style: none; padding: 0; margin: 0; }
.an-block li { font: 700 clamp(18px, 2vw, 22px)/1.35 var(--heavy); padding: 8px 0 8px 26px; position: relative; overflow-wrap: anywhere; }
.an-block li::before { content: "—"; position: absolute; left: 0; color: var(--g); }
.an-tags ul { display: flex; flex-wrap: wrap; gap: 8px; }
.an-tags li { border: 2px solid var(--w); padding: 8px 12px; font-size: 16px; }
.an-tags li::before { content: none; }
.an-step { font: 800 12px var(--heavy); letter-spacing: .16em; text-transform: uppercase; color: var(--g); margin: 0 0 12px; }
.simple .an-big { font-size: clamp(24px, 3.4vw, 36px); }
.mini { border: 1px dashed var(--g); padding: 14px; margin-top: 18px; }
.mini .ch-q { font-size: 20px; }
.mini .ch-hint { display: none; }

/* Choice component */
.ch-prog { font: 800 12px var(--heavy); letter-spacing: .16em; text-transform: uppercase; color: var(--g); margin: 0 0 10px; min-height: 1em; }
.ch-q { font: 900 clamp(24px, 3.6vw, 40px)/1.08 var(--heavy); letter-spacing: -.03em; margin: 0 0 18px; overflow-wrap: anywhere; }
.ch-q:focus { outline: none; }
.ch-opts { display: grid; gap: 10px; }
.ch-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; text-align: left; background: var(--k); color: var(--w);
  border: 2px solid var(--w); padding: 12px 14px; cursor: pointer; border-radius: 0; font: 700 18px/1.3 var(--heavy); }
.ch-opt:hover, .ch-opt:focus-visible { background: var(--w); color: var(--k); }
.ch-opt:hover .ch-key, .ch-opt:focus-visible .ch-key { border-color: var(--k); }
.ch-key { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--w); font: 900 16px var(--heavy); }
.ch-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ch-label { overflow-wrap: anywhere; }
.ch-detail { font: 500 14px/1.4 var(--heavy); color: var(--g); }
.ch-opt:hover .ch-detail, .ch-opt:focus-visible .ch-detail { color: #333; }
.ch-alt { border-style: dashed; color: var(--g); font-size: 16px; min-height: 52px; }
.ch-pre { box-shadow: inset 0 0 0 2px var(--w); }
.ch-pre .ch-key { background: var(--w); color: var(--k); }
.ch-picked, .ch-picked:hover { background: var(--w); color: var(--k); }
.ch-picked .ch-key { background: var(--k); color: var(--w); border-color: var(--k); }
.ch-other { display: flex; gap: 8px; margin-top: 10px; }
.ch-other[hidden] { display: none; }
.ch-other input { flex: 1; min-width: 0; background: var(--k); color: var(--w); border: 1px solid var(--w); padding: 14px; font: 600 18px var(--heavy); border-radius: 0; }
.ch-ok { background: var(--w); color: var(--k); border: 2px solid var(--w); font: 900 16px var(--heavy); padding: 0 20px; cursor: pointer; min-height: 52px; }
.ch-hint { font: 500 13px var(--heavy); color: var(--g); margin: 12px 0 0; }
.ch-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.ch-back { background: none; border: 0; color: var(--w); font: 700 15px var(--heavy); padding: 10px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; }
@media (hover: none) { .ch-hint { display: none; } }

/* final step */
.get { list-style: none; padding: 0; margin: 0 0 14px; }
.get li { font: 700 17px/1.4 var(--heavy); padding: 8px 0; border-top: 1px solid var(--line); }
.get li::before { content: "✓  "; }
.promise { font: 800 16px/1.45 var(--heavy); border: 2px solid var(--w); padding: 12px 14px; }
.choices { font: 600 14px var(--heavy); color: var(--g); }
.remember { display: flex; gap: 10px; align-items: center; font: 600 15px var(--heavy); margin-top: 16px; cursor: pointer; }
.remember input { width: 20px; height: 20px; }
#changeprefs { margin-top: 12px; }
.box[hidden], .step[hidden] { display: none !important; }
.flow [hidden] { display: none !important; }
.flow p.l { font: 800 12px var(--heavy); letter-spacing: .16em; text-transform: uppercase; color: var(--g); margin: 18px 0 8px; }
#sharp { min-height: 120px; }
/* tier cards + add-on + continue */
.ch-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
.ch-cards .ch-opt { align-items: flex-start; min-height: 220px; padding: 20px; }
.ch-cards .ch-label { font: 900 clamp(24px, 3vw, 34px)/1 var(--heavy); letter-spacing: -.02em; }
.ch-price { font: 900 clamp(34px, 4.4vw, 56px)/1 var(--heavy); letter-spacing: -.04em; margin: 6px 0 4px; }
.ch-cards .ch-detail { font-size: 15px; line-height: 1.5; }
@media (max-width: 640px) { .ch-cards { grid-template-columns: 1fr; } .ch-cards .ch-opt { min-height: 0; } }
.addon { display: flex; gap: 12px; align-items: flex-start; border: 2px dashed var(--w); padding: 14px; margin-top: 14px; cursor: pointer; font: 600 15px/1.45 var(--heavy); }
.addon input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }
.addon b { font-weight: 900; letter-spacing: .04em; }
.addon-note { display: block; color: var(--g); font-size: 13px; margin-top: 4px; }
.addon.off { opacity: .55; cursor: default; }
.ch-continue { background: var(--w); color: var(--k); border: 2px solid var(--w); font: 900 17px var(--heavy); text-transform: uppercase; letter-spacing: .03em; padding: 14px 22px; cursor: pointer; min-height: 52px; order: 2; }
.ch-continue:disabled { opacity: .4; cursor: default; }
.ch-continue:not(:disabled):hover { background: var(--k); color: var(--w); }
/* friendly line, vague note, agreed scope, discovery */
.friendly { font: 600 15px/1.5 var(--heavy); color: var(--w); border-left: 3px solid var(--w); padding: 2px 0 2px 12px; margin: 14px 0 0; }
.vague { font: 800 17px/1.4 var(--heavy); border: 2px dashed var(--w); padding: 12px 14px; margin: 0 0 16px; }
.scope { border: 2px solid var(--w); padding: 18px; margin-bottom: 18px; }
.scope h3 { font: 900 clamp(22px, 3vw, 32px)/1.1 var(--heavy); letter-spacing: -.02em; margin: 0 0 12px; }
.scope-q { font: 800 clamp(20px, 2.4vw, 26px)/1.3 var(--heavy); margin: 0 0 10px; overflow-wrap: anywhere; }
.scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nocover { list-style: none; padding: 0; margin: 0 0 14px; }
.nocover li { font: 600 16px/1.4 var(--heavy); color: var(--g); padding: 8px 0; border-top: 1px solid var(--line); }
.nocover li::before { content: "✕  "; }
@media (max-width: 640px) { .scope-cols { grid-template-columns: 1fr; } }
.linkbtn { background: none; border: 0; color: var(--w); font: 700 15px var(--heavy); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 12px 4px; min-height: 44px; }
#goal { margin-bottom: 10px; }
body.simple .ch-detail, body.simple .ch-hint, body.simple .why { display: none; }
.flow section.box textarea, .flow section.box input[type=text] { width: 100%; background: var(--k); color: var(--w); border: 1px solid #555;
  padding: 14px; font: 700 20px/1.35 var(--heavy); border-radius: 0; }
.flow section.box textarea:focus { outline: 2px solid var(--w); border-color: var(--w); }
.flow section.box label.l { display: block; font: 800 12px var(--heavy); letter-spacing: .16em; text-transform: uppercase; color: var(--g); margin: 18px 0 8px; }
/* Add Intelligence card, "Truth is enough" note, already-answered */
.intelcard, .suggest { border: 2px solid var(--w); padding: 16px; margin-top: 18px; }
.suggest { border-style: dashed; }
.ic-h { font: 900 clamp(18px, 2.2vw, 24px)/1.25 var(--heavy); margin: 0 0 6px; }
.ic-d { font: 500 15px/1.5 var(--heavy); color: var(--g); margin: 0 0 12px; }
.intelcard a.btn { display: inline-block; text-decoration: none; }
/* speeds under the tier cards */
.speeds { margin-top: 18px; }
.speed-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ch-opt.speed { align-items: flex-start; min-height: 120px; padding: 14px; }
.ch-opt.speed .ch-label { font: 900 18px/1 var(--heavy); letter-spacing: .04em; }
.speed-price { font: 800 15px/1.3 var(--heavy); margin: 4px 0; }
.ch-opt.speed .ch-detail { font-size: 13px; }
.ch-opt.speed:disabled { opacity: .45; cursor: default; border-style: dashed; }
.ch-opt.speed:disabled:hover { background: var(--k); color: var(--w); }
@media (max-width: 640px) { .speed-row { grid-template-columns: 1fr; } .ch-opt.speed { min-height: 0; } }
/* "Where do you want to invest?" toggle cards */
.inv-base { font: 600 16px/1.45 var(--heavy); margin: 0 0 10px; }
.inv-base b { font-weight: 900; }
.inv-why { font: 800 17px/1.4 var(--heavy); border-left: 3px solid var(--w); padding: 2px 0 2px 12px; margin: 0 0 16px; }
.inv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.inv-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; background: var(--k); color: var(--w);
  border: 2px solid var(--w); padding: 18px; cursor: pointer; border-radius: 0; font: 600 15px/1.45 var(--heavy); min-height: 44px; min-width: 0; }
.inv-card:focus-visible { outline: 3px solid var(--w); outline-offset: 3px; }
.inv-card.on { background: var(--w); color: var(--k); }
.inv-card.on .ch-key { background: var(--k); color: var(--w); border-color: var(--k); }
.inv-top { display: flex; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; }
.inv-rec { font: 900 12px var(--heavy); letter-spacing: .12em; text-transform: uppercase; border: 2px solid currentColor; padding: 3px 7px; }
.inv-check { margin-left: auto; font: 900 13px var(--heavy); letter-spacing: .08em; text-transform: uppercase; }
.inv-title { font: 900 clamp(21px, 2.4vw, 28px)/1.1 var(--heavy); letter-spacing: -.02em; overflow-wrap: anywhere; }
.inv-price { font: 900 clamp(30px, 3.6vw, 46px)/1 var(--heavy); letter-spacing: -.04em; }
.inv-get { font-weight: 700; }
.inv-inc { list-style: none; padding: 0; margin: 0; width: 100%; }
.inv-inc li { padding: 5px 0; border-top: 1px solid var(--line); }
.inv-inc li::before { content: "+  "; font-weight: 900; }
.inv-card.on .inv-inc li { border-color: #bbb; }
.inv-cards + .inv-lines { margin-top: 10px; }
.inv-sum { border-top: 2px solid var(--w); margin-top: 18px; padding-top: 12px; }
.inv-total { font: 900 clamp(30px, 4vw, 48px)/1 var(--heavy); letter-spacing: -.03em; margin: 0 0 6px; min-height: 1em; }
.inv-lines { font: 600 14px/1.45 var(--heavy); color: var(--g); margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .inv-cards { grid-template-columns: 1fr; } .inv-card { padding: 16px; } }