/* ═══════════════════════════════════════════════════════════════════════════
   WealthKhoj · guided-check phone — STYLES

   Scoped: every rule starts with .wkp, every class is prefixed wkp-, every
   keyframe is prefixed wkp-. Nothing here can leak into the host page, and the
   host page's generic rules (button, p, h3, input) are neutralised inside.

   Size knob: --wkp-phone-w on .wkp (default 300px). The phone never exceeds
   78vw, so it is safe on any screen.

   The token block below repeats the WealthKhoj design tokens with the same
   names and values the theme uses. If the host already defines them the values
   are identical, so keeping the block is harmless; delete it if you prefer one
   source of truth.
   ═══════════════════════════════════════════════════════════════════════════ */

.wkp{
  --b-050:#EEF1FF; --b-100:#DCE3FF; --b-200:#C3CDFF; --b-300:#A3B2FF;
  --b-500:#5271FF; --b-600:#3A56E8; --b-700:#2A3FBD; --b-800:#22349B; --b-900:#101A4A;
  --ink:#121A33; --ink-2:#38425F; --ink-3:#667289;
  --line:#E2E6F2; --line-2:#C8CFE4;
  --paper:#F7F9FD; --wash:#EDF1FC; --white:#fff;
  --ok:#12A150; --ok-soft:#7ED9A0; --ok-bg:#E8F7EE;
  --danger:#C62828;
  --teal:#0E9C9C; --violet:#7A5AF8; --amber:#C77A0A;
  --f-d:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-pill:999px;
  --e1:0 1px 2px rgba(18,26,51,.04), 0 8px 24px -14px rgba(18,26,51,.12);
  --e2:0 2px 4px rgba(18,26,51,.05), 0 22px 44px -18px rgba(42,63,189,.24);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-ui:cubic-bezier(.4,0,.2,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --dur:220ms;
  --wkp-phone-w:300px;

  position:relative;perspective:1600px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  font-family:var(--f-d);font-size:16px;line-height:1.6;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-align:left;
}

/* ── neutralise the host theme's generic rules inside the widget ────────── */
.wkp *,.wkp *::before,.wkp *::after{box-sizing:border-box}
.wkp p,.wkp h3{margin:0;padding:0}
.wkp h3{font-family:var(--f-d);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--b-900)}
/* :where() so the reset carries the specificity of .wkp alone (0,1,0) and no more.
   Written as `.wkp button` it was (0,1,1) — higher than .wkp-opt (0,1,0) — so
   `font:inherit` beat every component font-size and each option inherited the
   widget's 16px/1.6 instead of its own 13px/1.3, wrapping the labels onto two
   lines and overflowing the screen. It still outranks a host theme's bare
   `button {}` rule, which is the point of the reset. */
.wkp :where(button){font:inherit;color:inherit;background:none;border:0;margin:0;cursor:pointer;
  text-transform:none;letter-spacing:normal;box-shadow:none;line-height:inherit}
.wkp :focus-visible{outline:2px solid var(--b-700);outline-offset:2px;border-radius:6px}
.wkp [hidden]{display:none!important}

/* ═══ PHONE ══════════════════════════════════════════════════════════════ */
.wkp-phone{position:relative;width:min(var(--wkp-phone-w),78vw);aspect-ratio:41/80;
  transform:rotateY(-13deg) rotateX(5deg) rotateZ(-1.2deg);transform-style:preserve-3d;
  transition:transform .7s var(--ease-out);animation:wkp-float 7s ease-in-out infinite}
.wkp-phone:hover{transform:rotateY(-6deg) rotateX(2deg) rotateZ(-.4deg)}
@keyframes wkp-float{0%,100%{translate:0 0}50%{translate:0 -12px}}

.wkp-phone__body{position:absolute;inset:0;border-radius:46px;padding:11px;
  background:linear-gradient(160deg,#2A3350 0%,#161C30 38%,#0C1020 100%);
  box-shadow:0 2px 3px rgba(255,255,255,.35) inset,0 -2px 4px rgba(0,0,0,.5) inset,
    0 60px 90px -40px rgba(16,26,74,.62),0 24px 48px -28px rgba(16,26,74,.5)}
.wkp-phone__body::before{content:"";position:absolute;inset:0;border-radius:46px;padding:1.5px;
  background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 32%,rgba(255,255,255,0) 60%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.wkp-phone__btn{position:absolute;left:-2.5px;width:3px;border-radius:3px;background:linear-gradient(180deg,#39405c,#1b2036)}
.wkp-phone__btn--a{top:23%;height:32px}
.wkp-phone__btn--b{top:32%;height:52px}
.wkp-phone__btn--c{right:-2.5px;left:auto;top:27%;height:64px}

.wkp-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:var(--white);display:flex;flex-direction:column}
.wkp-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:8;
  background:linear-gradient(118deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 74%,rgba(255,255,255,.14) 100%)}
.wkp-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:78px;height:22px;border-radius:14px;background:#0A0E1C;z-index:7}

/* header: soft gradient band, brand row, progress dots */
.wkp-shead{flex:none;padding:13px 20px 12px;background:linear-gradient(165deg,#EEF2FF 0%,#F7F9FF 100%);border-bottom:1px solid var(--line)}
.wkp-sbar{display:flex;justify-content:space-between;font-family:var(--f-m);font-size:9.5px;color:var(--ink-3)}
.wkp-brandrow{display:flex;align-items:center;gap:7px;margin-top:12px}
.wkp-brandrow b{font-size:13px;letter-spacing:-.01em;color:var(--b-900)}
.wkp-livedot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px rgba(18,161,80,.16)}

/* Dots: colour + halo marks the live one, never transform:scale — a scaled 7px
   element inside the 3D-rotated frame rasterises unevenly and reads as a dot
   stretching. Every dot stays 7px and round. State classes are is-past / is-now,
   deliberately scoped names: generic ones (done/live) collide with host CSS. */
.wkp-dots{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px}
.wkp-dots i{display:block;width:7px;height:7px;flex:none;border-radius:50%;background:var(--b-200);
  transition:background .3s var(--ease-ui),box-shadow .3s var(--ease-ui)}
.wkp-dots i.is-past{background:var(--b-500)}
.wkp-dots i.is-now{background:var(--b-700);box-shadow:0 0 0 3px var(--b-100)}

/* sliding track — one step per screen, nothing scrolls inside a step */
.wkp-viewport{position:relative;flex:1;overflow:hidden}
.wkp-track{display:flex;height:100%;width:100%;transition:transform .5s var(--ease-out)}
.wkp-step{flex:0 0 100%;height:100%;padding:14px 18px 10px;overflow:hidden;opacity:.3;transition:opacity .38s var(--ease-ui)}
.wkp-step.is-live{opacity:1}

.wkp-qn{font-family:var(--f-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--b-500);margin-bottom:7px}
.wkp-qt{font-size:16.5px;line-height:1.24;letter-spacing:-.018em;margin-bottom:3px}
.wkp-qs{font-size:11.5px;line-height:1.4;color:var(--ink-3);margin-bottom:11px}

/* options — each carries its own accent */
.wkp-opts{display:grid;gap:6px}
.wkp-opt{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 11px 8px 9px;border-radius:12px;background:var(--white);min-height:42px;
  border:1.5px solid var(--line);font-size:13px;line-height:1.3;color:var(--ink-2);
  transition:border-color var(--dur) var(--ease-ui),background var(--dur) var(--ease-ui),
             color var(--dur) var(--ease-ui),transform 160ms var(--ease-pop),
             box-shadow var(--dur) var(--ease-ui),opacity var(--dur) var(--ease-ui)}
.wkp-opt__ico{width:26px;height:26px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--b-050);color:var(--b-600);transition:background var(--dur),color var(--dur),transform 260ms var(--ease-pop)}
.wkp-opt__ico svg{width:15px;height:15px;display:block}
.wkp-opt:nth-child(2) .wkp-opt__ico{background:#E6F6F6;color:var(--teal)}
.wkp-opt:nth-child(3) .wkp-opt__ico{background:#F0EBFE;color:var(--violet)}
.wkp-opt:nth-child(4) .wkp-opt__ico{background:#FDF1DF;color:var(--amber)}
.wkp-opt:nth-child(5) .wkp-opt__ico{background:#E8F7EE;color:var(--ok)}
.wkp-opt__t{flex:1;min-width:0}
.wkp-opt__tick{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease-ui)}
.wkp-opt__tick svg{width:11px;height:11px;color:#fff;opacity:0;transition:opacity 150ms;display:block}
.wkp-opt:hover{border-color:var(--b-300);background:var(--b-050);color:var(--b-700);transform:translateX(3px)}
.wkp-opt:active{transform:scale(.985)}

/* the reaction: the chosen row locks green, the rest recede */
.wkp-opt.is-picked{border-color:var(--ok);background:var(--ok-bg);color:#0B5B31;
  box-shadow:0 0 0 3px rgba(18,161,80,.13);transform:none}
.wkp-opt.is-picked .wkp-opt__ico{background:var(--ok);color:#fff;transform:scale(1.08)}
.wkp-opt.is-picked .wkp-opt__tick{background:var(--ok);border-color:var(--ok)}
.wkp-opt.is-picked .wkp-opt__tick svg{opacity:1}
.wkp-opts.is-answered .wkp-opt:not(.is-picked){opacity:.38;transform:none}

/* fixed footer: Back and Skip in the same place on every screen, so the control
   never moves with the length of the question above it */
.wkp-sfoot{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:9px 18px 12px;border-top:1px solid var(--line);background:var(--white);min-height:50px}
.wkp-back{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-3);
  padding:8px 12px 8px 9px;border-radius:var(--r-pill);border:1px solid var(--line);
  transition:color var(--dur),border-color var(--dur),background var(--dur)}
.wkp-back svg{width:13px;height:13px;display:block}
.wkp-back:hover{color:var(--b-700);border-color:var(--b-300);background:var(--b-050)}
.wkp-skip{font-size:11.5px;color:var(--ink-3);padding:8px 4px}
.wkp-skip:hover{color:var(--b-700)}

/* contact step */
.wkp-recap{margin-bottom:11px;padding:9px 11px;border-radius:10px;background:var(--wash);font-size:10.5px;line-height:1.5;color:var(--ink-2)}
/* The answer items, and the separator the JS no longer joins in. Identical on
   screen to the old "<b>a</b> &middot; <b>b</b>" — but a middot that is a STYLE
   can be dropped by a variant, where one baked into the markup cannot. That is
   what lets the same recap read as a run of text here and as chips elsewhere
   without the JS knowing which. */
.wkp-recap__i{color:var(--b-900);font-weight:700}
.wkp-recap__i:not(:last-child)::after{content:" · ";font-weight:400;color:var(--ink-3)}
.wkp-field{margin-bottom:9px}
.wkp-field label{display:block;font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.wkp-field input{display:block;width:100%;height:42px;margin:4px 0 0;padding:0 12px;font:inherit;font-size:13.5px;
  font-weight:400;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:11px;
  box-shadow:none;-webkit-appearance:none;appearance:none}
.wkp-field input:focus{outline:none;border-color:var(--b-500);box-shadow:0 0 0 3px var(--b-050)}
.wkp-submit{display:block;width:100%;height:46px;margin-top:8px;padding:0;border-radius:var(--r-pill);
  background:linear-gradient(67deg,var(--b-800) 10%,var(--b-500) 94%);color:#fff;font-size:14px;font-weight:600;
  box-shadow:var(--e1);transition:transform var(--dur) var(--ease-ui),box-shadow var(--dur) var(--ease-ui),opacity var(--dur)}
.wkp-submit:hover{transform:translateY(-1px);box-shadow:var(--e2)}
.wkp-submit:disabled{opacity:.7;cursor:default;transform:none}
.wkp-micro{margin-top:9px;font-size:10.5px;line-height:1.45;color:var(--ink-3);display:flex;gap:6px}
.wkp-micro svg{width:12px;height:12px;flex:none;color:var(--ok);margin-top:1px}

/* done screen */
.wkp-done{text-align:center;padding-top:30px}
.wkp-done__tick{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--ok-bg);
  display:flex;align-items:center;justify-content:center;animation:wkp-pop .5s var(--ease-pop)}
.wkp-done__tick svg{width:28px;height:28px;color:var(--ok)}
.wkp-done h3{font-size:17px;margin-bottom:8px}
.wkp-done p{font-size:12.5px;line-height:1.55;color:var(--ink-2)}

/* ═══ GUIDE (optional block — delete .wkp-guide from the markup to drop it) ══ */
.wkp-guide{position:relative;z-index:4;display:flex;align-items:center;gap:12px;width:min(340px,86vw)}
.wkp-avatar{position:relative;width:76px;height:76px;flex:none;border-radius:50%;
  background:linear-gradient(150deg,var(--b-500),var(--b-800));
  box-shadow:0 14px 30px -12px rgba(42,63,189,.7),0 0 0 5px rgba(255,255,255,.92);
  animation:wkp-bob 4.2s ease-in-out infinite}
@keyframes wkp-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
.wkp-avatar svg{position:absolute;inset:0;width:100%;height:100%}

/* The celebration: a squash-and-stretch hop plus a particle burst — a reward
   bigger than the action deserves, which is what makes progress feel physical.
   620ms, running OUTSIDE the phone while the screen is already sliding, so the
   slide never waits for it. */
.wkp-avatar.cheer{animation:wkp-cheer .62s var(--ease-pop)}
@keyframes wkp-cheer{
  0%{transform:scale(1) rotate(0)}
  25%{transform:scale(1.16,.88) rotate(-7deg)}
  55%{transform:scale(.94,1.1) translateY(-12px) rotate(6deg)}
  100%{transform:scale(1) translateY(0) rotate(0)}}

.wkp-spark{position:absolute;inset:-16px;pointer-events:none}
.wkp-spark i{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:2px;opacity:0}
.wkp-spark.go i{animation:wkp-burst .66s var(--ease-out) forwards}
.wkp-spark i:nth-child(1){background:var(--ok);--tx:-42px;--ty:-30px;--r:-40deg}
.wkp-spark i:nth-child(2){background:var(--b-500);--tx:38px;--ty:-36px;--r:35deg;animation-delay:.04s}
.wkp-spark i:nth-child(3){background:var(--amber);--tx:46px;--ty:14px;--r:70deg;animation-delay:.07s}
.wkp-spark i:nth-child(4){background:var(--violet);--tx:-46px;--ty:16px;--r:-70deg;animation-delay:.02s}
.wkp-spark i:nth-child(5){background:var(--ok-soft);--tx:6px;--ty:-50px;--r:12deg;animation-delay:.09s}
.wkp-spark i:nth-child(6){background:var(--teal);--tx:-14px;--ty:44px;--r:-20deg;animation-delay:.05s}
@keyframes wkp-burst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  22%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.7) rotate(var(--r))}}

.wkp-bubble{position:relative;flex:1;min-width:0;background:var(--white);border:1px solid var(--line);
  border-radius:16px 16px 16px 5px;padding:12px 15px;font-size:13px;line-height:1.45;color:var(--ink-2);
  box-shadow:var(--e1);animation:wkp-pop .4s var(--ease-pop)}
.wkp-bubble::before{content:"";position:absolute;left:-6px;bottom:14px;width:12px;height:12px;background:var(--white);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);border-radius:0 0 0 3px}
.wkp-bubble b{color:var(--b-900)}
/* ── the guide's correction voice ──
   A STATE on the bubble, not a variant of it. The wording is still the guide
   speaking; it is just the one thing it ever says that is not reassurance —
   and since every line before it in the flow HAS been reassurance, a correction
   set in the same calm blue does not register as a correction at all.

   !important, deliberately, on this one declaration. Every skin of this device
   re-colours .wkp-bubble for its own context, and the hero does it from an
   inline <style> in the page body, which outranks anything this stylesheet can
   say at equal weight. A state that has to beat every skin is what !important
   is actually for. The alternative is restating this rule in each new skin, and
   the first skin that forgets shows the visitor a silent error.

   #C62828 is 5.9:1 on white: a red that stays legible at 15px for the older
   readers this whole device is built around, rather than a pure red that only
   looks urgent. */
.wkp-bubble.is-warn{color:var(--danger)!important}
.wkp-bubble.is-warn b{color:inherit}
@keyframes wkp-pop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}

/* ── responsive: the two design-system breakpoints ─────────────────────── */
/* Below 1024 the phone is usually stacked under the copy rather than beside it,
   so the 3D tilt comes off and it sits flat and centred. */
@media(max-width:1024px){
  .wkp-phone{transform:none;animation:none;width:min(320px,86vw)}
  .wkp-phone:hover{transform:none}
}
@media(max-width:560px){
  .wkp-avatar{width:58px;height:58px}
  .wkp-bubble{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .wkp-phone,.wkp-avatar{animation:none}
  .wkp-track{transition:none}
  .wkp-spark{display:none}
  .wkp *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE WIDE VARIANT, PROMOTED FROM THE SCREEN LAB
   ══════════════════════════════════════════════════════════════════════════
   Everything below was designed and measured in /screen-lab/ against a copy of
   the homepage hero, then moved here so it belongs to the COMPONENT rather than
   to one page. Any page rendering .wkp--wide now gets this screen; only the
   questions, the CTA labels and the closing message change per page.

   It lives in .wkp--wide and not in .wkp, because the 300px portrait default is
   a different set of proportions and these numbers were measured against the
   500x455 landscape device.

   The hero keeps its own block in template-homepage.php for SIZE and PLACEMENT
   only — the 500px device, the guide sitting on the screen. Anything in there
   that duplicates a rule below has been removed, because two owners for one
   property is how the lab and the hero drifted apart in the first place.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · the question stops looking like a control ──
   The bubble had a fill, a 1px border and a rounded box — the same costume
   every button on this screen wears. A question that looks pressable competes
   with the six things that actually are, and the eye has to work out which is
   which. It is now just text beside the character: nothing to press, so
   nothing to rule out. */
.wkp--wide .wkp-bubble{
  background:none;border:0;box-shadow:none;border-radius:0;
  /* padding:0, not 4px 0 0. The 4px was the top inset of a box this bubble no
     longer has, and inside a centred row it only pushed the one line of text
     off the character's middle. */
  padding:0;color:var(--b-900)}
.wkp--wide .wkp-guide{padding:14px 20px 2px}

/* ── 1b · the question sits level with the character ──
   Promoted from the lab. Three things were pulling it off centre and they
   compounded:

     · the row was align-items:flex-start, written when the bubble was a
       two-line box with a fill. Every question in the set renders on ONE line
       — 23.8px, measured, all eight of them — against a 42px avatar, so
       top-aligning put the text's centre about 4px above the character's.
     · the bubble's leftover 4px of top padding, removed above.
     · the avatar was still running wkp-bob: a 7px rise and fall every 4.2s.
       Larger than the other two together and never still, so no static
       alignment could have looked right at any given moment. The rest of this
       device had its ambient motion removed deliberately; this was the last
       piece of it.

   Measured after the change: the text's line box sits 0.59px off the disc's
   centre, and steady.

   No min-height is needed to stop the character jumping between steps — the
   avatar is a 42px flex item, so the row's cross size is already max(42, text)
   whether a question runs to one line or two.

   The cheer is restated one class heavier because animation:none would
   otherwise eat it. That one is the reaction to a pick, not ambience, and the
   whole point of removing the bob is that the motion which remains means
   something. */
.wkp--wide .wkp-guide{align-items:center}
.wkp--wide .wkp-avatar{animation:none}
.wkp--wide .wkp-avatar.cheer{animation:wkp-cheer .62s var(--ease-pop)}

/* ── 2 · the options look pressable before they are touched ──
   A flat card with a hairline border is a list item. These get a hard bottom
   edge and a shadow beneath it, so they sit ON the screen rather than in it —
   the read of a physical key. That, not the hover state, has to do the work:
   on a touch screen there IS no hover, and on desktop hover only arrives after
   the visitor has already decided to try.

   The press is the other half. It travels down onto its own edge and the
   shadow collapses, so the button goes where the finger pushes it. */
.wkp--wide .wkp-opt{
  border:1.5px solid var(--b-100);
  box-shadow:0 3px 0 0 var(--b-100), 0 5px 10px -4px rgba(18,26,51,.16);
  transition:transform 120ms var(--ease-ui), box-shadow 120ms var(--ease-ui),
             border-color var(--dur) var(--ease-ui), background var(--dur) var(--ease-ui)}
.wkp--wide .wkp-opt:hover{
  transform:translateY(-1px);background:var(--white);border-color:var(--b-300);
  box-shadow:0 4px 0 0 var(--b-200), 0 8px 14px -5px rgba(42,63,189,.26)}
.wkp--wide .wkp-opt:active{
  transform:translateY(3px);
  box-shadow:0 0 0 0 var(--b-100), 0 1px 2px rgba(18,26,51,.12)}
.wkp--wide .wkp-opt:focus-visible{
  border-color:var(--b-500);border-radius:12px;outline:2px solid var(--b-700);outline-offset:2px}
/* Once chosen it stops being a button and becomes a record: the edge goes, so
   the row settles flat instead of still inviting a press. */
.wkp--wide .wkp-opt.is-picked{
  transform:none;box-shadow:0 0 0 3px rgba(18,161,80,.13)}

/* ── 3 · the header: instruction left, progress right, one line ──
   The dots are back in the header, but NOT on a tier of their own. Measured on
   the live stage: the screen has 10px of slack before the options overflow, and
   a separate dot row costs about 20px. Their own line does not fit. That is
   arithmetic, not taste.

   On the label's row it costs nothing vertically — and it is the better layout
   regardless. What made them look wrong before was never that they were at the
   top; it was a CENTRED row sitting under LEFT-ALIGNED text, so the header ran
   two competing axes three rows deep. Instruction left, progress right, sharing
   one baseline, is the read every wizard header uses.

   The label drops to 12px/600 to make the room, and that is the right hierarchy
   anyway: it had been 13px bold, competing with the 15px question that is the
   actual content. Chrome should be quieter than the thing it frames. Free space
   on the row goes from 17px to roughly 55px.

   flex-wrap with a row-gap is the narrow-width fallback — below the width where
   both fit, the dots drop to their own line rather than crushing the label. The
   phone is taller at mobile, so that tier is affordable exactly where it is
   needed.

   The glow is static, not pulsing: ambient motion was deliberately taken off
   this device and a blinking dot would put it straight back. */
.wkp--wide .wkp-brandrow{flex-wrap:wrap;row-gap:8px}
/* flex:1 1 0 rather than min-width:0 alone. Flex breaks a line on items'
   HYPOTHETICAL size, before any shrinking, so at 375 the label's full 295px
   pushed it onto its own line and left the live dot stranded above it. A zero
   basis means it always fits on the line and wraps its TEXT instead -- dot and
   label stay together, and only the dots drop below. */
.wkp--wide .wkp-brandrow b{font-size:12px;font-weight:600;flex:1 1 0;min-width:0}
.wkp--wide .wkp-dots{margin:0 0 0 auto;gap:5px}
.wkp--wide .wkp-dots i{width:7px;height:7px;background:var(--b-200)}
.wkp--wide .wkp-dots i.is-past{background:var(--b-500)}
.wkp--wide .wkp-dots i.is-now{
  background:var(--b-600);
  box-shadow:0 0 0 3px rgba(82,113,255,.20), 0 0 10px 2px rgba(82,113,255,.50)}

/* ── 4 · the label reads in two registers ──
   It was one run of 12px/600 navy: 49 characters at a single weight, which the
   eye has to read end to end before it knows whether it is an instruction or a
   description. Split at the "|" into what to do and why:

     Answer 6 quick questions   so we can study your case
     ^ brand blue, 700          ^ --ink-3, 500

   The instruction now carries the weight and the colour; the reason stays and
   stops competing. Same words, same width, and the action is legible at a
   glance instead of at the end of a sentence.

   Blue rather than navy because this line sits between a green live dot and a
   row of blue progress dots, and --b-700 is the deep brand blue those dots are
   drawn from — the row reads as one object instead of three unrelated marks.
   Kept in the display face, not the mono the status bar uses: mono at this
   length would run wide and read as a terminal, not an invitation. */
/* One blue, one weight, across the whole line -- the owner asked why it could
   not simply be uniform, and the answer is that it can. The earlier two-tone
   step was a hierarchy preference of mine, not a constraint; nothing required
   it. Both --b-700 and --b-600 clear AA on this background independently, so
   the choice was always open.

   --b-700 throughout at 7.58:1, weight 600 throughout. The line now reads as
   one statement rather than an instruction with a footnote attached.

   The two spans stay. They cost nothing, the split is genuinely useful for a
   set that wants emphasis later, and re-introducing a step is then one
   declaration rather than a rebuild. */
.wkp--wide .wkp-lbl-do,
.wkp--wide .wkp-lbl-why{color:var(--b-700);font-weight:600}

/* ── 5 · the contact step has to FIT. It is the screen that converts. ──
   Chips were the right instinct and the wrong budget. Measured: the step's
   viewport is 257.4px and the chip recap alone took 102.9px across two rows,
   so the content needed 312px and the step scrolled. A phone mockup that
   scrolls stops reading as a phone and starts reading as a web page in a frame
   — and this is the one screen where a visitor has to see a button and decide.
   Nothing here may ever scroll.

   Worse than the 55px, the chip block's height was VARIABLE: it grew with the
   number and the length of the answers, so a set with eight questions or wordier
   options would overflow again later with nothing in the CSS to warn anyone.

   So the recap goes back to one run of text, as the owner asked — but bounded
   rather than merely smaller. One line, ellipsis at the end, label inline. Its
   height is now CONSTANT at any answer count, which is the property that
   actually matters: this cannot come back.

   What is lost is reading every answer at a glance, and that is an acceptable
   trade here. On this screen the recap's job is reassurance that the answers
   were captured, not review — Back is one tap away for anyone who wants to
   check.

   Budget after: recap 39, fields 67.6, submit 54, micro 48.4, padding 16,
   margin 14 = about 239 in 257.4. */
.wkp--wide .wkp-micro{margin-top:18px}
.wkp--wide .wkp-recap{
  display:flex;align-items:center;gap:9px;
  background:var(--b-050);border:1px solid var(--b-100);
  padding:8px 12px;border-radius:10px;margin-bottom:14px;
  font-size:11px;line-height:1.45;
  white-space:nowrap;overflow:hidden}
/* The label no longer needs to MASK anything — the tracks are clipped inside
   .wkp-recap__vp now, so they cannot reach it. Background and z-index stay as
   belt and braces, and cost nothing. */
.wkp--wide .wkp-recap::before{
  content:"YOUR ANSWERS";flex:none;font-family:var(--f-m);font-size:9px;
  letter-spacing:.08em;color:var(--b-600);
  padding-right:9px;border-right:1px solid var(--b-200);
  position:relative;z-index:2;background:var(--b-050)}
/* And the right edge fades instead of guillotining a word mid-letter. */
.wkp--wide .wkp-recap.is-marquee{
  -webkit-mask-image:linear-gradient(90deg,#000 0 90%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 90%,transparent 100%)}
/* Every answer carries its OWN dot and its own space, drawn as a positioned
   pseudo rather than the base stylesheet's text middot. Three reasons, all of
   which the owner hit at once:
     · the text middot was :not(:last-child), so the join between the two ticker
       copies had no separator at all and two answers ran together there;
     · a character separator inherits the run's tight tracking, which is why six
       answers read as one sentence;
     · 18px of padding with the dot at 8px gives a real gap either side, so the
       eye gets a rhythm instead of a wall. */
.wkp--wide .wkp-recap__i{
  font-weight:600;color:var(--b-900);position:relative;padding-right:20px}
.wkp--wide .wkp-recap__i::after{
  content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--b-300)}

/* The clipping viewport the tracks live in. flex:1 takes the room left beside
   the label; min-width:0 lets it actually shrink; overflow:hidden is what keeps
   the moving text off the label. */
.wkp--wide .wkp-recap__vp{
  flex:1 1 auto;min-width:0;overflow:hidden;display:flex;align-items:center}

/* ── the fields: this is the ask, so it should look worth answering ──
   They were 40px boxes with a hairline. On the screen where someone hands over
   a phone number, an input that looks provisional makes the whole thing feel
   provisional. Taller, white, a real border, and a focus ring that responds
   properly rather than shifting the layout. */
.wkp--wide .wkp-field input{
  height:44px;background:var(--white);border:1.5px solid var(--line-2);
  border-radius:11px;font-size:13px;transition:border-color var(--dur) var(--ease-ui),
  box-shadow var(--dur) var(--ease-ui)}
.wkp--wide .wkp-field input:focus{
  border-color:var(--b-500);box-shadow:0 0 0 3px var(--b-050);outline:none}
.wkp--wide .wkp-field label{font-size:11px;font-weight:600;color:var(--ink-2)}
/* The button is the point of the screen — give it the weight of one. */
.wkp--wide .wkp-submit{height:50px;font-size:14.5px;letter-spacing:.01em}

/* ── 6 · the recap tickers, because it cannot all fit ──
   Truncation bounded the height but hid most of the answers behind an ellipsis.
   A ticker shows all of them in the same fixed height, which is the trade the
   owner asked for.

   Worth saying plainly: this is ambient motion, and ambient motion was
   deliberately taken off this device earlier today. It earns its place back
   only because it is the sole way to show six answers in one line — the phone
   and the avatar had no such reason.

   So it is a considerate one:
     · it runs ONLY when the content actually overflows. If every answer fits,
       nothing moves. The script measures rather than assumes.
     · it pauses on hover and on focus-within, so a line that is moving can
       always be stopped and read.
     · duration is derived from the content width, so a long set and a short one
       travel at the SAME speed rather than the same duration — a fixed duration
       would make eight answers race and three crawl.
     · reduced-motion gets the static truncated line back. */
.wkp--wide .wkp-recap__track{
  display:inline-flex;flex:none;white-space:nowrap;padding-right:16px}
.wkp--wide .wkp-recap.is-marquee .wkp-recap__track{
  animation:wkp-marquee var(--wkp-marquee,16s) linear infinite}
.wkp--wide .wkp-recap.is-marquee:hover .wkp-recap__track,
.wkp--wide .wkp-recap.is-marquee:focus-within .wkp-recap__track{
  animation-play-state:paused}
@keyframes wkp-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){
  .wkp--wide .wkp-recap.is-marquee .wkp-recap__track{animation:none}
  .wkp--wide .wkp-recap__track[aria-hidden="true"]{display:none}
}

/* ── 7 · the name and the number are the point of this screen ──
   They were 11px labels in --ink-2 over a 13.5px placeholder in the browser's
   own grey: quieter than the reassurance smallprint underneath them, on the one
   screen whose entire job is collecting two facts. Everything else here was
   shouting and the actual ask was whispering.

   Labels go to --b-900 at 12px, the same weight the question carries. The typed
   value goes to 14.5px/600 — what someone enters should look more substantial
   than the hint it replaces. The placeholder stays a placeholder at --ink-3,
   but it is now clearly a level below the label rather than level with it, so
   the three states read in order: label, then hint, then what you typed. */
.wkp--wide .wkp-field label{
  font-size:12px;font-weight:600;color:var(--b-900);letter-spacing:-.005em;margin-bottom:6px}
.wkp--wide .wkp-field input{
  font-size:14.5px;font-weight:600;color:var(--b-900);padding:0 14px}
.wkp--wide .wkp-field input::placeholder{
  color:var(--ink-3);font-weight:400;font-size:13px}

/* ── 8 · the done screen: the moment the promise is made ──
   Reached in the lab through the real flow — see the stub in the script below,
   which resolves without sending anything anywhere.

   Bigger, because this screen carries the only commitment on the device:
   someone will call. A 62px mark and 13px type made that read as a receipt.
   78px and 14.5px make it read as a confirmation.

   THREE THINGS BUILD THE TRUST, and all three are one-shot. This device had its
   ambient motion deliberately removed; these are not ambient, they are the
   reaction to an event that just happened, which is the one kind of motion that
   was kept.

     · the check DRAWS ITSELF rather than appearing. A mark being made is read
       as something happening now; a mark already there is read as a picture.
       stroke-dashoffset does it in CSS, so no markup changes and the homepage
       is untouched.
     · a ring expands out of the disc once and fades — the gesture of a stamp
       landing.
     · a soft static halo stays behind, so the mark keeps the weight of a seal
       after the motion has finished.

   GATED ON .is-live, which matters more than it looks: every step including
   this one is built at init, so an ungated animation would play at page load,
   off-screen, and be over before anyone arrived. The class is added when the
   step becomes current, so the draw happens when it is actually seen. */
/* Centred in the screen, not resting at the top of it. The done step was
   top-aligned with its padding doing the positioning, which left the mark high
   and a block of empty white beneath — the screen read as unfinished rather
   than concluded. Centring it makes the tick the middle of the frame, which is
   where a confirmation belongs.

   display:flex is restated here rather than inherited: the base rule that makes
   a step a flex column is inside @media(min-width:900px), so below that the
   step is a plain block and justify-content would do nothing. This step centres
   at every width. */
.wkp.wkp--wide .wkp-step:has(.wkp-done){
  display:flex;flex-direction:column;align-items:center;
  /* The step's own vertical padding is 6px top and 10px bottom, and space-evenly
     distributes inside the CONTENT box — so those 4px of difference landed
     straight on the gaps and left a 10px spread across three that were meant to
     match. Zeroed here only; the horizontal padding stays because the text still
     needs a margin. */
  padding-top:0;padding-bottom:0}
/* space-evenly, not a hand-set margin.
   Centring the whole block left 83.1px between the heading and the tick and
   22.0px between the tick and the text — the mark was nowhere near the middle of
   the two things it sits between, which is what the owner saw. The arithmetic
   for an even split is easy enough, but a fixed margin is only correct at one
   screen height: the step is 316.6px here and something else at every other
   width, so it would drift straight back out of balance.

   Letting .wkp-done fill the step and distribute its own children hands that
   sum to the browser. The sr-only title is position:absolute so it is out of
   flow and does not take a share. Two children, three equal gaps, at any
   height. */
.wkp--wide .wkp-done{
  display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;
  flex:1 1 auto;width:100%;padding:0}
/* Bigger again, and the margin goes: spacing is space-evenly's job now, and a
   margin left on the tick would be added on top of its share and tilt the
   balance the rule exists to hold. */
.wkp--wide .wkp-done__tick{
  width:94px;height:94px;margin:0;position:relative;
  box-shadow:0 0 0 11px rgba(18,161,80,.07)}
.wkp--wide .wkp-done__tick svg{width:46px;height:46px}
/* Two lines, not three. 32ch painted 284px and broke this 91-character
   sentence three ways; measured on the live screen, 38ch is the boundary where
   it becomes two. 42ch is used rather than 38 to keep headroom — sitting on the
   exact boundary means a different font render tips it back to three.
   text-wrap:balance splits the two evenly instead of leaving a long line above a
   short one. At 375 the step is narrower than 42ch, so it wraps to the width it
   has; a narrow screen legitimately needs more lines. */
.wkp--wide .wkp-done p{
  font-size:14.5px;line-height:1.6;max-width:42ch;margin-inline:auto;color:var(--ink-2);
  text-wrap:balance}

.wkp--wide .wkp-done__tick::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--ok);opacity:0}
.wkp--wide .wkp-step.is-live .wkp-done__tick::after{
  animation:wkp-seal .95s var(--ease-out) forwards}
@keyframes wkp-seal{
  0%{transform:scale(.8);opacity:.85}
  100%{transform:scale(1.55);opacity:0}}

.wkp--wide .wkp-done__tick svg path{stroke-dasharray:20;stroke-dashoffset:20}
.wkp--wide .wkp-step.is-live .wkp-done__tick svg path{
  animation:wkp-draw .6s var(--ease-out) .15s forwards}
@keyframes wkp-draw{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  .wkp--wide .wkp-done__tick::after{display:none}
  .wkp--wide .wkp-done__tick svg path{stroke-dashoffset:0;animation:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE WIDE DEVICE, 500 x 455.

   These rules lived in template-homepage.php, scoped to .wk-hero__visual, and
   that is why .wkp--wide was a class the stylesheet did not re-proportion: the
   proportions that make it landscape existed on one page. Any other page using
   the widget got the 300x585 portrait phone with an oversized guide and a
   contact step that ran off the bottom of the screen.

   Moved here whole and re-keyed on .wkp--wide, because "the same screen with
   different questions" is only true if the screen is one thing. The homepage
   copies are deleted in the same change rather than left as dead weight that
   would quietly diverge.

   Every comment below came with its rule. They explain decisions made for the
   hero and they still apply here -- the device is the same device.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  
  /* The device used to sit here with order:-1 and max-height:260px;overflow:hidden.
  It is 535px tall, so the clip sliced it through the middle of an option row —
  the "cut screen" — and being ordered first it pushed the headline and the
  button off the first screen. On a phone the visitor met a cropped graphic
  before they met the promise or the way to act on it.
  Now: the words come first and the device follows the button, at its full
  height. Nothing is cropped and nothing is hidden. */
  .wk-hero__visual{order:1;max-height:none;overflow:visible;margin-top:34px}
}


/* ══════════ WealthKhoj · fitting the guided-check widget into the hero ══════════
   The hero is not modified. Its content box is 547px tall at the 720px cap
   (720 - 2 x 86px padding) and its right column is ~550px wide. Everything
   below sizes the widget to sit inside that.

   The widget's own styles come from assets/css/phone-widget.css (enqueued in
   functions.php). This block only re-proportions it — every rule here is
   scoped to the hero so the widget keeps its shipped behaviour anywhere else
   it is used. */

.wkp{display:flex;flex-direction:column;align-items:center;gap:14px}


/* ── the wide device · 500 x 455 ───────────────────────────────────────────
   Deliberately re-laid, not squashed: a portrait design stretched sideways
   reads as a mistake. Past roughly 1:1 it stops looking like a phone and
   reads as a tablet, which suits a financial site at least as well. */
.wkp--wide .wkp-phone{
  width:min(500px,78vw); aspect-ratio:100/91;
  /* Square on, not tilted. The 3D rotation straightened on hover, so the
     device moved the moment a visitor pointed at the thing they were meant to
     read — motion that draws the eye away from the question on the screen. */
  transform:none;
}

.wkp--wide .wkp-phone__body{border-radius:30px;padding:9px}

.wkp--wide .wkp-phone__body::before{border-radius:30px}

.wkp--wide .wkp-screen{border-radius:22px}


/* A wide device has a small centred camera, not a tall phone's pill. */
.wkp--wide .wkp-island{width:52px;height:14px;top:7px;border-radius:9px}


/* The point of the extra width: two options per row, so six questions fit in
   three rows instead of six. That is what buys back the height the guide needs. */
.wkp--wide .wkp-opts{grid-template-columns:1fr 1fr;gap:7px}


.wkp--wide .wkp-step{padding:16px 20px 10px}

.wkp--wide .wkp-shead{padding:12px 22px 11px}

.wkp--wide .wkp-sfoot{padding:9px 22px 12px}

/* NOTE: a `.wkp-fields` rule used to sit here. There is no such class in the
   widget — the contact step holds two sibling `.wkp-field` divs — so it styled
   nothing. The real fix is in the v2 block below. */
/* the bubble can be wider than the widget's 340px default here */
.wkp--wide .wkp-guide{width:min(430px,100%)}

@media(max-width:1024px){
  
  /* Stacked hero: the column is full width and the phone is no longer beside
  the copy, so it drops to a size that suits a single column and the tilt
  comes off — the widget's own responsive rules do the same thing. */
  .wkp{gap:16px}
  
  /* 86vw ignored the 22px frame and 38px panel padding either side, so the
  device was always wider than the space it had. 100% is that space. */
  .wkp--wide .wkp-phone{width:min(420px,100%);transform:none}
  
  /* The widget's inner columns were sized for a desktop device and overflowed a
  narrow one. They shrink with it now. */
  .wkp--wide .wkp-step,
  .wkp--wide .wkp-opts,
  .wkp--wide .wkp-opt{min-width:0;max-width:100%}
  
  .wkp--wide .wkp-step{padding:14px 12px 8px}
  
  .wkp--wide .wkp-opt{padding:9px 10px;font-size:12.5px}
  
  .wkp--wide .wkp-opt__t{min-width:0;overflow-wrap:anywhere}
}

@media(max-width:560px){
  
  .wkp--wide .wkp-opts{grid-template-columns:1fr}
  
  .wkp--wide .wkp-phone{aspect-ratio:41/68}
}


/* ══════════ v2 · hero widget adjustments ══════════
   Scoped to the hero so the widget keeps its shipped behaviour anywhere else.
   Everything here overrides assets/css/phone-widget.css deliberately; the
   widget's own files are untouched. */

/* ── 1 · the tilt straightens on hover again ──────────────────────────────
   The widget ships this interaction. It stopped working when the hero-fit
   block set a transform on `.wkp--wide .wkp-phone` (0,3,0),
   which outranks the widget's own `.wkp-phone:hover` (0,2,0) — so the hover
   transform was being computed and then discarded, silently.

   Matched here at the same specificity plus the pseudo-class, and taken to
   fully square rather than the widget's half-straighten, because the point of
   the gesture is that the device faces you when you reach for it. Rotations are
   written as explicit zeros rather than `transform:none` so the .7s transition
   the widget already declares interpolates smoothly in both directions.

   The float animation is untouched: it animates `translate`, a separate
   property, so it never fought the transform and still does not. */
/* (the hover rule that used to straighten the tilt is gone with it) */
/* Keyboard users get the same straightening via :focus-within above. Anyone who
   asked not to be moved gets neither the tilt nor the float. */
@media(prefers-reduced-motion:reduce){
  .wkp--wide .wkp-phone,
  .wkp--wide .wkp-phone:hover{transform:none;animation:none}
}


/* ── 2 · "Question 1 of 7" removed ────────────────────────────────────────
   It was also counting wrong — TOTAL is QUIZ.length + 1, so the name and phone
   step was being announced as a seventh question when there are six. The dots
   above the card already show position, so removing the label loses nothing.
   Hidden rather than cut from the JS because the JS is the shared widget, and
   this change has not been promoted yet. */
.wkp--wide .wkp-qn{display:none}


/* ── 3 · the per-question sub-line removed ───────────────────────────────
   "Choose the one that's closest." and its five equivalents. At this size the
   question is the instruction. */
.wkp--wide .wkp-qs{display:none}


/* The two removed lines carried the spacing between the question and the first
   option. Without them the gap collapses to 3px, so the question takes it over.
   The step's own top padding grows a little as well: two fewer lines of chrome
   leaves the card looking top-light otherwise. */
.wkp--wide .wkp-qt{margin-bottom:14px}

.wkp--wide .wkp-step{padding:22px 20px 10px}

/* ══════════ v2 · the last step must never clip its own submit button ══════════
   Measured before changing anything: the phone was 500x464 against a declared
   455, the step content overflowed by 12px behind `overflow:hidden`, and the
   two contact fields were stacked. */

/* ── 1 · the two contact fields, side by side ─────────────────────────────
   The widget gives the name and phone no shared wrapper — they are two sibling
   .wkp-field divs — so there is nothing to put a grid on except the step
   itself. The step becomes a two-column grid, everything in it spans both
   columns, and only the two fields opt back into a single column each. :has()
   picks out the contact step by the thing that makes it the contact step,
   rather than by an index that would break if a question were added.
   Worth ~70px on the one step with the least room. */
.wkp--wide .wkp-step:has(.wkp-submit){
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 12px;
  align-content:start;
}

.wkp--wide .wkp-step:has(.wkp-submit) > *{grid-column:1 / -1}

.wkp--wide .wkp-step:has(.wkp-submit) > .wkp-field{grid-column:auto}


/* ── 2 · a guard, not a fix ───────────────────────────────────────────────
   I thought the phone had grown past its declared ratio — 464 against 455 —
   and wrote this to stop it. It had not. getBoundingClientRect() reports the
   rect of the ROTATED box, and the phone carries rotateY(-7deg)/rotateX(3deg)
   plus a float that translates it; offsetHeight is exactly 455. The ratio was
   being honoured all along.

   Kept anyway, as one line of insurance rather than a correction: .wkp-phone
   IS a flex item in a column flex container, so its automatic minimum size
   could grow it if a step ever contributed intrinsic height. Nothing does
   today — every step either clips or, after fix 3, scrolls — and if that ever
   changes, the hero's height is what would pay for it.

   Measure this element with offsetHeight, never getBoundingClientRect. */
.wkp--wide .wkp-phone{min-height:0}


/* ── 3 · and if it ever does not fit, it scrolls rather than disappears ───
   `.wkp-step` clips with overflow:hidden. That is right for a question — the
   options are all short — but on the last step the thing that gets cut is the
   submit button. After fix 1 there is room to spare; this is here so that a
   longer label, a wrapped recap line or a larger default font size can never
   silently hide the only button that matters. */
.wkp--wide .wkp-step:has(.wkp-submit){
  overflow-y:auto;
  scrollbar-width:thin;
}

/* ══════════ v2 · the guide moves INSIDE the phone screen (placement A) ══════════
   It shipped as a sibling of the phone, floating above the device. Inside, it
   reads as the assistant speaking on the screen rather than a sticker beside it,
   and it stops costing ~90px of hero height above the phone.

   The move itself is a DOM change, not a style one — see the script below. This
   block only restyles the guide for its new home. */

/* WHAT LOOKED ODD, measured: the header was 101px and the guide row another 69px
   — 170px of a 444px screen, 38% of it, spent on chrome before the first
   question. And because the guide row carried its own background and a bottom
   border, it read as a SECOND header band stacked under the first. Two bands is
   the odd part, not the guide itself.

   Fixed by giving the guide no band of its own — it sits on the same white as
   the question, so the screen reads as one header and then content — and by
   tightening the header, which was spending 12px gaps on three stacked rows. */

/* ── the header: same content, less air ── */
.wkp--wide .wkp-shead{padding:10px 16px 9px}

.wkp--wide .wkp-brandrow{margin-top:8px}

/* The dots no longer have a tier of their own — they sit on the label's row,
   right-aligned, positioned by the component. A margin-top here would fight it. */

/* ── the guide: on the screen, not a band on it ── */
.wkp--wide .wkp-guide{
  width:auto;gap:11px;flex:none;
  background:none;border-bottom:0;
  /* align-items is NOT set here any more. It used to say flex-start, "the
     avatar lines up with the first line of text", which was true when the
     bubble was a two-line box and wrong once every question fitted on one.
     The component now centres it — see .wkp--wide .wkp-guide in
     assets/css/phone-widget.css — and a page-level rule at this weight would
     silently win, which is exactly how the hero and the lab drifted apart
     before. One owner. */
}

/* 42px, not 38: the face is drawn for 58 and below about 40 the eyes and mouth
   stop resolving, which reads as a smudge rather than a character. */
.wkp--wide .wkp-avatar{
  width:42px;min-width:42px;max-width:42px;height:42px;aspect-ratio:1;flex:0 0 42px}

.wkp--wide .wkp-avatar svg{width:100%;height:100%}

.wkp--wide .wkp-spark{display:none}

/* The bubble's APPEARANCE — background, border, radius, padding — belongs to the
   component now: see the promoted .wkp--wide block in phone-widget.css, where it
   is borderless so the question stops looking pressable. The rule that used to
   set all of that here is gone. Two owners for one property is exactly how the
   hero and the lab drifted apart. */
/* the tail pointed at where the phone used to be, outside the screen */
.wkp--wide .wkp-bubble::before,
.wkp--wide .wkp-bubble::after{display:none}

/* ── the guide asks the question ─────────────────────────────────────────
   The bubble now carries the step's question instead of a separate heading
   underneath it, so the character is asking rather than commenting on a
   question asked by the panel. It is the primary text on the screen, so it
   takes the weight the heading used to have. */
.wkp--wide .wkp-bubble{
  font-size:15px;line-height:1.32;font-weight:600;color:var(--b-900);
  letter-spacing:-.015em;
}

/* The heading stays in the DOM, visually hidden: it keeps the step's heading
   structure for anyone navigating by headings, while the bubble — which is a
   live region — is what actually announces each new question. */
.wkp--wide .wkp-qt{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

.wkp--wide .wkp-step{padding-top:6px}

/* The per-step hint, drawn inside the bubble now that the bubble carries the
   question (see .wkp--wide .wkp-qt above). The size is the one .wkp-qs already
   used, so no type changes -- only where it is drawn. It is dropped
   automatically if the screen would otherwise scroll.

   .wkp-bgreet went with the greeting: the header label above the screen
   already says how many questions there are. */
.wkp-bhint{display:block;font-size:11.5px;line-height:1.4;font-weight:500;color:var(--ink-3);margin-top:4px}


/* Desktop only. That is where the device is the 500px wide variant with real
   slack under its last option row. Below 900px the screen is already tight and
   stretching the rows would only push text into the base. minmax(min-content,1fr):
   the rows take the slack but never shrink below the text. */
@media(min-width:900px){
  .wkp--wide .wkp-step{display:flex;flex-direction:column;min-height:0}
  /* SIX FIXED SLOTS: two columns by three rows, the same on every step
     whatever the option count. Three explicit 1fr rows, and flex:1 1 auto to
     stretch the grid over the whole option area, so the three rows always
     divide the same height and a tile is the same size on a three-option step
     as on a six-option one. Options fill the slots in order and the unused
     ones are simply left empty -- three options are two tiles in row 1, one in
     row 2 and an empty row 3.

     The row count must not follow the option count, which is what both earlier
     attempts got wrong. grid-auto-rows:minmax(min-content,1fr) sized the rows
     to however many there were, so three options made three tall tiles and six
     made six short ones; align-content:start then fixed the height but left
     each step a different one, because the rows were still content-sized. Only
     a fixed template makes the tiles comparable across steps.

     Six is the ceiling by design: a seventh option would open an implicit
     fourth row and overflow the screen, so a longer set belongs in a branch. */
  .wkp--wide .wkp-opts{flex:1 1 auto;min-height:0;grid-template-rows:repeat(3,1fr)}
  .wkp--wide .wkp-opt{padding:10px 13px 10px 11px;font-size:13.5px}
}

/* The tablet band only. Below 561 the phone is already portrait at 41/68; above
   1024 it is the 500x455 device. At 112 the question step clears by 43.6px and
   the contact step by 16.2px -- both were measured, not just the one reported. */
@media(min-width:561px) and (max-width:1024px){
  .wkp--wide .wkp-phone{aspect-ratio:100/112}
}