/* ===== Affluency Bundle — component styles (used on the landing teaser and the feature page) ===== */

/* hero — the lookup is the hero action, so the copy above it stays tight */
.ahero{padding:72px 0 84px;background:
  radial-gradient(900px 500px at 88% -10%,var(--nk-blue-soft),transparent 60%),
  linear-gradient(180deg,#fff,var(--nk-canvas))}
.ahero .grid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:start}
.ahero h1{font-size:46px;line-height:1.06;margin:18px 0 16px;max-width:620px}
.ahero h1 em{font-style:normal;color:var(--nk-blue)}
.ahero .lead{margin-bottom:26px;font-size:17px;max-width:540px}
.herofoot{margin-top:16px;font-size:13.5px;color:var(--nk-ink-3)}
.herofoot a{color:var(--nk-brand-text);font-weight:600}
.herofoot a:hover{text-decoration:underline}

/* ---- AffluenceQ score panel ---- */
.aq{background:var(--nk-navy);color:#fff;border-radius:var(--r-lg);padding:24px 24px 22px;position:relative;box-shadow:var(--sh-hero)}
.aq .hd{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#A6A199;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.aq .hd code{font-family:var(--mono);color:#fff;font-size:12.5px}
.aq .hd .lat{font-family:var(--mono)}
.score{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;min-height:118px}
.ring{position:relative;width:118px;height:118px;border-radius:50%;background:conic-gradient(var(--nk-blue) 0 var(--aq,90%),#332F2C var(--aq,90%) 100%);display:grid;place-items:center;flex-shrink:0}
.ring>div:not(.sat){width:92px;height:92px;border-radius:50%;background:var(--nk-navy);display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring b{font-family:var(--serif);font-size:42px;font-weight:400;line-height:1}
.ring small{font-size:11.5px;color:#9C9890;margin-top:2px;font-family:var(--mono)}
.score .pill{background:rgba(242,107,29,.22);color:#FFCBA6;margin-bottom:8px}
.score p{color:#D6D2CB;font-size:14.5px;line-height:1.5;min-height:87px}
.buckets{display:grid;gap:7px}
.bk{display:grid;grid-template-columns:150px 1fr 28px;gap:10px;align-items:center;font-size:12.5px;color:#C4C0B8}
.bk i{display:block;height:8px;border-radius:4px;background:#332F2C;overflow:hidden}
.bk i::after{content:"";display:block;height:100%;width:var(--w);background:var(--nk-blue);border-radius:4px}
.bk b{text-align:right;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.attrs{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;padding-top:16px;border-top:1px solid #333131}
.attrs span{font-size:12px;padding:4px 10px;border-radius:var(--r-control);background:#232323;color:#C4C0B8}
.aq .cap{position:absolute;right:20px;bottom:-14px;background:#fff;color:var(--nk-ink-2);border:1px solid var(--nk-line);border-radius:var(--r-control);padding:6px 14px;font-size:12.5px}

/* ---- lookup widget ---- */
.lookup{background:#fff;border:1px solid var(--nk-line);border-radius:var(--r-lg);padding:22px 24px 24px;box-shadow:var(--sh-hero);scroll-margin-top:90px}
#lg-s1 .err{min-height:0}
#lg-s1 .err:not(:empty){margin-bottom:8px}
.lookup .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:14px;color:var(--nk-ink-2);gap:12px;flex-wrap:wrap}
.lookup .top .tt{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--nk-navy);letter-spacing:-.01em}
.microcopy{font-size:13px;color:var(--nk-ink-3);margin-top:0;line-height:1.5;max-width:52ch}
.bar{display:flex;gap:10px}
.bar .in{flex:1;display:flex;align-items:center;gap:9px;border:1px solid var(--nk-field);border-radius:var(--r-control);height:52px;padding:0 20px;background:#fff;min-width:0}
.bar .in:focus-within{border-color:var(--nk-blue);box-shadow:0 0 0 3px var(--nk-blue-soft)}
.bar .in span{color:var(--nk-ink-2);font-size:15px}
.bar .in input{flex:1;border:0;outline:0;font:inherit;font-size:15px;background:transparent;min-width:0}

/* ---- how it reads: score anatomy ---- */
.anatomy{margin-top:44px;background:#fff;border:1px solid var(--nk-line);border-radius:var(--r-lg);padding:26px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.an{border-left:2px solid var(--nk-blue);padding-left:16px}
.an .n{font-family:var(--mono);font-size:11.5px;color:var(--nk-brand-text);margin-bottom:8px}
.an b{display:block;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--nk-navy);margin-bottom:6px}
.an p{font-size:13.5px;color:var(--nk-ink-2)}

/* ---- bucket reference table ---- */
.btab{margin-top:44px;border:1px solid var(--nk-line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.btab .row{display:grid;grid-template-columns:1.1fr 60px 2fr 1.2fr;gap:0;font-size:14px;border-bottom:1px solid var(--nk-line)}
.btab .row:last-child{border-bottom:0}
.btab .row>div{padding:14px 18px}
.btab .row.h{background:var(--nk-canvas);font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--nk-ink-3)}
.btab .row b{color:var(--nk-navy);font-weight:600}
.btab .row .w{font-family:var(--mono);color:var(--nk-brand-text);font-weight:600}
.btab .row p{font-size:13.5px;color:var(--nk-ink-2)}
.btab .row .src{font-size:12.5px;color:var(--nk-ink-3);font-family:var(--mono)}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:44px}
.stp{position:relative;padding:0 22px 0 0}
.stp .num{width:36px;height:36px;border-radius:50%;background:var(--nk-blue);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px;margin-bottom:14px;position:relative;z-index:1}
.stp::before{content:"";position:absolute;left:34px;right:0;top:17px;border-top:2px dashed var(--nk-blue-line)}
.stp:last-child::before{display:none}
.stp h3{font-size:16px;margin-bottom:6px}
.stp p{font-size:14px;color:var(--nk-ink-2);line-height:1.5}
.stp code{font-family:var(--mono);font-size:12px;background:var(--nk-canvas);border:1px solid var(--nk-line);border-radius:6px;padding:2px 8px;display:inline-block;margin-top:8px;color:var(--nk-ink)}

/* ---- payload ---- */
.payload{margin-top:34px;background:var(--nk-navy);border-radius:var(--r-lg);padding:22px 24px;overflow:auto}
.payload pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#D6D2CB;white-space:pre}
.payload .k{color:#A6A199}
.payload .s{color:#63D6A2}
.payload .n{color:#FFB27A}
.payload .hd{font-family:var(--mono);font-size:11.5px;color:#9C9890;letter-spacing:.05em;margin-bottom:14px}

@media (max-width:1000px){
  .ahero{padding:56px 0 64px}
  .ahero .grid{grid-template-columns:1fr;gap:40px}
  .ahero h1{font-size:38px;max-width:none}
  .anatomy{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:22px}
  .stp::before{display:none}
  .btab .row{grid-template-columns:1fr 60px 1.6fr;font-size:13.5px}
  .btab .row .src{display:none}
}
@media (max-width:640px){
  .anatomy{grid-template-columns:1fr}
  .bar{flex-direction:column}
  .bar .btn{justify-content:center}
  .bk{grid-template-columns:110px 1fr 28px}
  .btab .row{grid-template-columns:1fr 56px}
  .btab .row p{display:none}
}

/* small phones: keep the lookup's primary action inside the first fold */
@media (max-width:480px){
  .ahero{padding:44px 0 56px}
  .ahero h1{font-size:32px;line-height:1.1;margin:14px 0 12px}
  .ahero .lead{font-size:16px;margin-bottom:20px}
  .lookup{padding:18px 18px 20px}
  .lookup .top{margin-bottom:12px}
  .lookup .top .tt{font-size:15px}
  .herofoot{margin-top:14px}
}

/* ===== the score card as a live response =====
   Idle it shows the sample profile. On "Check profile" it scans: satellites
   converge on the ring while the score counts up and the bars refill. */
.scorewrap{position:relative;margin-bottom:26px}
.aq .hd code{transition:opacity .2s}

/* satellites — one per signal family group, different radii and directions */
.sat{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .35s}
.aq.scanning .sat{opacity:1}
.orb{position:absolute;border-radius:50%;border:1px dashed rgba(255,255,255,.13);animation:aqspin 2.6s linear infinite}
.orb s{position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%}
.o1{inset:-62px;animation-duration:2.6s}
.o1 s{background:var(--orange);box-shadow:0 0 12px rgba(255,90,31,.85)}
.o2{inset:-69px;animation-duration:4s;animation-direction:reverse}
.o2 s{background:#63D6A2;box-shadow:0 0 12px rgba(99,214,162,.75)}
.o3{inset:-76px;animation-duration:5.6s}
.o3 s{background:#6E93FF;box-shadow:0 0 12px rgba(110,147,255,.7)}
@keyframes aqspin{to{transform:rotate(360deg)}}

/* while scanning, the copy steps back so the orbits own the space */
.score p,.score .pill{transition:opacity .25s}
.aq.scanning .score p,.aq.scanning .score .pill{opacity:0}
.scanlabel{position:absolute;left:140px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--orange);
  opacity:0;transition:opacity .3s;pointer-events:none}
.scanlabel::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);animation:aqpulse 1.1s ease-in-out infinite}
@keyframes aqpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.aq.scanning .scanlabel{opacity:1}

/* bars and chips animate to their new values */
.bk i::after{transition:width .85s cubic-bezier(.2,.7,.2,1)}
.bk b{transition:opacity .2s}
.aq.scanning .bk b{opacity:0}
.attrs span{animation:aqchip .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes aqchip{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}

/* the in-card conversion, revealed once a profile has been built */
.aqcta{display:grid;gap:15px;justify-items:start;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--dark-line);
  animation:aqchip .45s cubic-bezier(.2,.7,.2,1) both}
.aqcta b{display:block;font-size:15px;font-weight:600;color:#fff}
.aqcta span{display:block;font-size:13px;line-height:1.5;color:var(--on-dark);margin-top:3px}
.aqcta .btn{height:46px;font-size:14.5px}

/* the illustrative-data note sits directly under the card */
.aqnote{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:52ch}

@media (prefers-reduced-motion:reduce){
  .orb{animation:none}
  .scanlabel::before{animation:none}
  .sat{transition:none}
  .attrs span{animation:none}
  .aqcta{animation:none}
  .bk i::after{transition:none}
}
@media (max-width:560px){
  .scanlabel{left:0;top:auto;bottom:-4px;transform:none}
  .aqcta{justify-items:stretch}
  .aqcta .btn{width:100%}
}