/* Ask Goldie — Golden Plumbing. Generated from the approved v5.1 design prototype. */
@keyframes goldie-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes goldie-hotpulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes goldie-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1)}}

#ask-goldie-app{
    --purple:#3B2544; --purple-deep:#2C1B33; --gold:#FFCA6B; --gold-deep:#F5B84A; --gold-text:#8A6A12;
    --cream:#FFF9F0; --charcoal:#2D2D2D; --muted:#6E6478; --line:#EFE6D9; --white:#FFF;
    --danger:#C0392B; --ok:#2E7D52; --bronze:#A9793C; --silver:#8E8E93;
    --shadow:0 10px 30px rgba(59,37,68,.10), 0 2px 8px rgba(59,37,68,.06);
    --lift:0 18px 50px rgba(59,37,68,.16), 0 4px 12px rgba(59,37,68,.08);
  }
#ask-goldie-app *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#ask-goldie-app .goldie-bg{
    font-family:'Nunito',system-ui,sans-serif;color:var(--charcoal);
    background:
      radial-gradient(1200px 800px at 80% -10%, rgba(255,202,107,.16), transparent 60%),
      radial-gradient(1000px 700px at -10% 110%, rgba(59,37,68,.12), transparent 55%),
      linear-gradient(180deg,#F6F0E6,#EDE4D6);
    display:block;padding:0;min-height:100vh;
  }
#ask-goldie-app .stage{width:100%;max-width:430px;margin:0 auto;min-height:100vh;background:#fff;box-shadow:var(--lift);display:block;position:relative}
  @media (max-width:470px){
#ask-goldie-app .stage{max-width:none;box-shadow:none}}
#ask-goldie-app header{display:flex;align-items:center;justify-content:space-between;padding:13px 20px 11px;border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:40;background:var(--purple)}
#ask-goldie-app header img{height:40px;display:block}
#ask-goldie-app .phead{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#ask-goldie-app .pbar{width:110px;height:5px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
#ask-goldie-app .pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-deep));border-radius:3px;transition:width .35s;width:0}
#ask-goldie-app .plabel{font-size:10.5px;font-weight:800;color:#CBBFD6;letter-spacing:1px;text-transform:uppercase}
#ask-goldie-app /* display:block scroll column — flex here caused two paint/measure bugs */
  #scroll{display:block}
#ask-goldie-app .screen{padding:14px 22px 30px;animation:goldie-enter .26s ease-out;display:block}
  
  @media (prefers-reduced-motion:reduce){
#ask-goldie-app .screen{animation:none}}
#ask-goldie-app .grow{height:18px}
#ask-goldie-app .backbtn{border:none;background:none;color:var(--muted);font-weight:700;font-size:14px;cursor:pointer;padding:2px 8px 10px 0;font-family:'Nunito';display:inline-flex;align-items:center;gap:5px}
#ask-goldie-app .backbtn:hover{color:var(--purple)}
#ask-goldie-app .ic{display:inline-flex;vertical-align:-4px}
#ask-goldie-app .ic svg{width:20px;height:20px}
#ask-goldie-app .ic.sm svg{width:16px;height:16px}
#ask-goldie-app h1.act{font-family:'Montserrat',sans-serif;font-weight:900;font-size:28px;line-height:1.12;color:var(--purple);margin:8px 0 8px;letter-spacing:-.4px}
#ask-goldie-app p.sub{font-size:16px;line-height:1.6;color:#5d5566;margin:0 0 16px}
#ask-goldie-app .goldbar{width:60px;height:5px;background:var(--gold);border-radius:3px;margin:0 0 12px}
#ask-goldie-app .why{font-size:13px;color:#6E6478;font-weight:600;margin:-4px 0 14px;display:flex;gap:7px;align-items:flex-start}
#ask-goldie-app .why .ic{color:#C9BFA6;flex:none;margin-top:1px}
#ask-goldie-app .goldie{display:flex;gap:12px;align-items:flex-start;margin:4px 0 16px}
#ask-goldie-app .pup{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE3AC,#F5B84A);flex:none;overflow:hidden;box-shadow:var(--shadow);border:2.5px solid #fff;outline:2px solid rgba(245,184,74,.5)}
#ask-goldie-app .pup img{width:150%;margin-top:24%}
#ask-goldie-app .gsay{background:var(--cream);border:1px solid #F3E7CF;border-radius:16px;border-top-left-radius:4px;padding:11px 14px;font-size:15px;line-height:1.55;color:#4a4152;box-shadow:0 3px 10px rgba(59,37,68,.05)}
#ask-goldie-app .gsay b{color:var(--purple)}
#ask-goldie-app .gname{font-family:'Caveat',cursive;font-weight:700;font-size:16px;color:var(--gold-text);display:block;margin-bottom:1px}
#ask-goldie-app .chips{display:flex;flex-direction:column;gap:10px}
#ask-goldie-app .chip{text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:15px 17px;font-family:'Nunito';font-weight:700;font-size:16px;color:var(--purple);cursor:pointer;display:flex;align-items:center;gap:13px;min-height:54px;transition:all .15s;box-shadow:0 2px 6px rgba(59,37,68,.04)}
#ask-goldie-app .chip .ic{color:var(--gold-text);flex:none}
#ask-goldie-app .chip small{display:block;font-weight:600;color:var(--muted);font-size:13px;margin-top:2px}
#ask-goldie-app .chip:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow)}
#ask-goldie-app .chip:active{transform:scale(.985)}
#ask-goldie-app .chip.ghost{border-style:dashed;color:#6E6478;font-weight:600}
#ask-goldie-app .chip.ghost .ic{color:#6E6478}
#ask-goldie-app .chip.warn{border-color:#F1C7C0;color:var(--danger)}
#ask-goldie-app .chip.warn .ic{color:var(--danger)}
#ask-goldie-app .chip.warn:hover{border-color:var(--danger);background:#FFF7F5}
#ask-goldie-app .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#ask-goldie-app .grid2 .chip{flex-direction:column;align-items:flex-start;gap:7px;padding:13px;min-height:78px;font-size:14.5px}
#ask-goldie-app #bar{position:sticky;bottom:0;width:100%;border-top:1px solid var(--line);background:rgba(255,255,255,.97);backdrop-filter:blur(14px);padding:10px 18px calc(12px + env(safe-area-inset-bottom));z-index:60;display:none}
#ask-goldie-app #bar.show{display:block}
#ask-goldie-app .cta{display:block;width:100%;border:none;cursor:pointer;border-radius:17px;padding:17px 20px;background:linear-gradient(180deg,#FFD98C,var(--gold) 55%,var(--gold-deep));color:var(--purple-deep);font-family:'Montserrat';font-weight:900;font-size:16.5px;box-shadow:0 10px 24px rgba(245,184,74,.45),inset 0 1px 0 rgba(255,255,255,.55);transition:all .15s}
#ask-goldie-app .cta:hover{transform:translateY(-1px)}
#ask-goldie-app .cta:active{transform:scale(.985)}
#ask-goldie-app .cta:disabled{opacity:.45;box-shadow:none;cursor:not-allowed;transform:none}
#ask-goldie-app .quiet{display:block;width:100%;text-align:center;background:none;border:none;color:var(--muted);font-family:'Nunito';font-weight:700;font-size:13.5px;margin-top:9px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#ask-goldie-app .quiet:hover{color:var(--purple)}
/* Fable round 4: touch-action:manipulation is the standard fix for a sticky
   tap target sitting flush against a horizontally-pannable sibling (.rail)
   -- removes the ~300ms double-tap-to-zoom delay and reduces gesture
   ambiguity between "tap this bar" and "this is part of the scroll below". */
/* Fix 1, round 7: collapsed cart bar is exactly ONE line — sel-name (ellipsis
   truncated, takes the remaining space) + sel-amt + caret. See cartBarShell()
   in app.js; amtSub + "+ I have another issue" now render inside
   .sheet-detail instead of here. */
#ask-goldie-app .sheet-top{display:flex;align-items:center;gap:10px;cursor:pointer;padding:9px 2px;touch-action:manipulation}
#ask-goldie-app .sheet-top:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
#ask-goldie-app .sheet-top .sel-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:800;color:var(--purple)}
#ask-goldie-app .sheet-top .sel-amt{flex:none;font-family:'Montserrat';font-weight:900;color:var(--purple);font-size:17px;white-space:nowrap}
#ask-goldie-app .sheet-sub{font-size:11.5px;color:var(--muted);font-weight:700;padding:0 2px 8px}
#ask-goldie-app .sheet-detail{max-height:0;overflow:hidden;transition:max-height .3s ease}
#ask-goldie-app .sheet-detail.open{max-height:380px;overflow-y:auto}
#ask-goldie-app .bline{display:grid;grid-template-columns:1fr auto 26px;align-items:center;font-size:13.5px;padding:6px 2px;color:#5d5566;font-weight:600;gap:8px}
#ask-goldie-app .bline b{color:var(--purple);white-space:nowrap;text-align:right}
#ask-goldie-app .bline .rm{border:none;background:none;color:#6E6478;width:26px;height:26px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#ask-goldie-app .bline .rm svg{width:16px;height:16px}
#ask-goldie-app .bline .rm:hover{color:var(--danger);background:#FFF3F0}
#ask-goldie-app .bline .rm:hover{background:#F1E2C4}
#ask-goldie-app .bline.total{border-top:1.5px solid var(--line);margin-top:5px;padding-top:9px;font-size:15px}
#ask-goldie-app .chev{color:var(--muted);font-size:13px;transition:transform .25s}
#ask-goldie-app .chev.up{transform:rotate(180deg)}
#ask-goldie-app .hero-pup{display:flex;justify-content:center;margin:2px 0}
#ask-goldie-app .ring{width:116px;height:116px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 28%,#FFE9BE,#F5B84A);box-shadow:var(--lift);border:4px solid #fff;outline:3px solid rgba(245,184,74,.45);display:flex;justify-content:center}
#ask-goldie-app .ring img{width:150%;margin-top:18%}
#ask-goldie-app .tagline{font-family:'Caveat';font-weight:700;font-size:21px;color:var(--gold-text);text-align:center;margin:6px 0 0}
#ask-goldie-app .doorstep h1{text-align:center;font-size:28px}
#ask-goldie-app .doorstep p.sub{text-align:center}
#ask-goldie-app .freeinput{width:100%;border:1.5px solid var(--line);border-radius:15px;padding:14px 15px;font-family:'Nunito';font-size:16px;background:var(--cream);outline:none;margin-bottom:11px}
#ask-goldie-app .freeinput:focus{border-color:var(--gold)}
#ask-goldie-app .emg{text-align:center;margin:0 0 6px}
#ask-goldie-app .emg button{background:none;border:none;color:var(--danger);font-weight:800;font-family:'Nunito';font-size:13px;cursor:pointer;padding:5px 10px;border-radius:10px;display:inline-flex;align-items:center;gap:6px}
#ask-goldie-app .trust{display:flex;justify-content:center;gap:12px;margin-top:14px;font-size:12.5px;color:#6E6478;font-weight:700;flex-wrap:wrap}
#ask-goldie-app .giftcard{background:var(--cream);border:1.5px solid #F0E2C6;border-radius:20px;padding:20px;box-shadow:var(--shadow)}
#ask-goldie-app .gifttag{display:inline-block;background:var(--purple);color:var(--gold);font-family:'Montserrat';font-weight:800;font-size:11.5px;letter-spacing:1.5px;padding:6px 12px;border-radius:99px;margin-bottom:10px}
#ask-goldie-app .giftsteps{margin:10px 0 0;padding:0;list-style:none}
#ask-goldie-app .giftsteps li{display:flex;gap:12px;margin-bottom:11px;font-size:15px;line-height:1.5}
#ask-goldie-app .giftsteps .n{flex:none;width:25px;height:25px;border-radius:50%;background:var(--gold);color:var(--purple-deep);font-weight:900;font-family:'Montserrat';font-size:12.5px;display:flex;align-items:center;justify-content:center;margin-top:1px}
#ask-goldie-app /* ---------- intake ---------- */
  .field{margin-bottom:12px}
#ask-goldie-app .field label{display:block;font-weight:800;color:var(--purple);font-size:13.5px;margin-bottom:6px}
#ask-goldie-app .field label span{color:var(--danger)}
#ask-goldie-app .field input{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:13px 14px;font-family:'Nunito';font-size:16px;background:var(--cream);outline:none}
#ask-goldie-app .field input:focus{border-color:var(--gold)}
/* ---- native-iOS autofill: kill Safari's yellow wash ----
   iOS Safari paints autofilled fields with its own opaque yellow background
   that no CSS `background` property can override directly (Spencer, iPhone
   review — "Your Info" fields all went solid yellow). The only reliable fix
   is the inset-box-shadow trick: an enormous inset shadow in the field's OWN
   background color paints over Safari's internal autofill layer, and
   -webkit-text-fill-color (NOT `color`) is required because autofill also
   locks the text-color property. Covers every text input in the app (all
   share the same --cream field background), all four autofill pseudo-states,
   and a long transition delay as a defensive fallback for the delayed-paint
   variant of this bug on some iOS versions. */
#ask-goldie-app input:-webkit-autofill,
#ask-goldie-app input:-webkit-autofill:hover,
#ask-goldie-app input:-webkit-autofill:focus,
#ask-goldie-app input:-webkit-autofill:active{
  box-shadow:inset 0 0 0 1000px var(--cream)!important;
  -webkit-text-fill-color:var(--charcoal)!important;
  caret-color:var(--charcoal);
  border-color:var(--line);
  transition:background-color 9999s ease-in-out 0s,color 9999s ease-in-out 0s;
}
#ask-goldie-app input:-webkit-autofill:focus{border-color:var(--gold)}
/* Modern unprefixed equivalent (Safari 16.4+ / Chromium 120+). Kept as its
   OWN separate rule (not merged into the :-webkit-autofill list above) on
   purpose: some older engines drop an ENTIRE comma-separated selector list
   the moment one entry uses a pseudo-class they don't recognize, which would
   have silently killed the whole autofill override, not just the new part.
   Same values, so both rules simply agree when both apply. */
#ask-goldie-app input:autofill,
#ask-goldie-app input:autofill:hover,
#ask-goldie-app input:autofill:focus,
#ask-goldie-app input:autofill:active{
  box-shadow:inset 0 0 0 1000px var(--cream)!important;
  -webkit-text-fill-color:var(--charcoal)!important;
  caret-color:var(--charcoal);
  border-color:var(--line);
  transition:background-color 9999s ease-in-out 0s,color 9999s ease-in-out 0s;
}
#ask-goldie-app input:autofill:focus{border-color:var(--gold)}
#ask-goldie-app .frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#ask-goldie-app .consent{display:flex;gap:10px;align-items:flex-start;margin:10px 0;cursor:pointer}
#ask-goldie-app .consent input{width:19px;height:19px;margin-top:2px;accent-color:var(--gold-text);flex:none}
#ask-goldie-app .consent span{font-size:12.3px;line-height:1.5;color:#6d6377}
#ask-goldie-app .prefnote{display:flex;gap:9px;align-items:flex-start;background:var(--cream);border:1px solid #F0E2C6;border-radius:13px;padding:11px 13px;font-size:12.8px;line-height:1.5;color:#6d6377;font-weight:600;margin:2px 0 12px}
#ask-goldie-app .prefnote .ic{color:var(--gold-text);flex:none;margin-top:1px}
#ask-goldie-app /* ---------- dark / reveal ---------- */
  .screen.dark{background:linear-gradient(175deg,var(--purple),var(--purple-deep) 90%);color:#EFE8F3}
#ask-goldie-app .screen.dark h1.act{color:#fff}
#ask-goldie-app .screen.dark .backbtn{color:#B9A9C4}
#ask-goldie-app .conf{display:inline-flex;align-items:center;gap:7px;background:rgba(255,202,107,.14);border:1px solid rgba(255,202,107,.4);color:var(--gold);font-weight:800;font-size:11.5px;letter-spacing:1.1px;font-family:'Montserrat';border-radius:99px;padding:6px 13px;margin:0 0 10px;text-transform:uppercase;width:fit-content}
/* Fable round 4: every video placeholder now reads as a clearly-labeled
   "Coming soon" state -- no play button, no onclick alert(), not tappable
   (cursor stays default, not pointer) -- instead of a live-looking button
   that led to a dead alert(). Sweep covers .vidhero (this one) + .vid
   (below) at all 3 occurrences (reveal(), render['x-reveal'], render['c-reveal']). */
#ask-goldie-app .vidhero{border-radius:20px;overflow:hidden;position:relative;aspect-ratio:16/9;margin:2px 0 16px;border:1px solid rgba(255,255,255,.16);background:
    radial-gradient(340px 200px at 82% 110%, rgba(255,202,107,.30), transparent 65%),
    radial-gradient(300px 190px at 12% -14%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(150deg,#4A3457,#241528 70%)}
#ask-goldie-app .vidhero .soon-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:rgba(45,26,51,.72);border:1.5px solid rgba(255,202,107,.55);color:#F3ECD9;font-family:'Montserrat';font-weight:800;font-size:12px;letter-spacing:.6px;text-transform:uppercase;padding:9px 16px;border-radius:99px;backdrop-filter:blur(3px)}
#ask-goldie-app .vidhero .soon-badge .ic{color:var(--gold)}
#ask-goldie-app .vidhero .cap{position:absolute;left:14px;bottom:11px;right:96px;color:#F3ECD9;font-size:12.5px;font-weight:800;line-height:1.4;text-shadow:0 2px 8px rgba(0,0,0,.5)}
#ask-goldie-app .vidhero .cap small{display:block;color:#C9B7D4;font-weight:700;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:2px}
#ask-goldie-app .vidhero .pupcorner{position:absolute;right:-6px;bottom:-10px;width:96px;opacity:.96;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
/* Fable round 4: answer-edit chips modernized + ALIGNED (Spencer, iPhone
   screenshot review) -- a uniform 2-column CSS grid (equal column widths;
   rows auto-equalize the height of whatever chips share that row) replaces
   the old flex-wrap layout, whose per-chip width tracked its own label
   length and produced a visibly ragged, uneven-width block layout.
   Sleeker cream/outline treatment replaces the old heavy solid-fill pill:
   a soft translucent cream fill + a thin gold-toned outline (brand palette
   kept), tap-to-edit behavior unchanged. */
#ask-goldie-app .profile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 14px}
/* Native-iOS answer chips (Spencer, iPhone review — "needs a native iOS
   feel", same complaint repeated from an earlier round): a quiet system-like
   surface instead of a gold slab — thin hairline border, no fill saturation,
   a 44px minimum tap target (Apple HIG), and a deliberately quiet pencil
   glyph (low opacity) so it reads as an affordance, not a CTA. Grid stretch
   (the .profile grid's default align-items) already equalizes row heights;
   min-height here just guarantees no row ever falls under the tap-target
   floor even with a one-word label. */
#ask-goldie-app .pfchip{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#F3ECD9;font-size:13px;font-weight:700;font-family:'Nunito';border-radius:13px;padding:11px 13px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-align:left;touch-action:manipulation}
#ask-goldie-app .pfchip:hover{border-color:rgba(255,202,107,.55);background:rgba(255,255,255,.1)}
#ask-goldie-app .pfchip:active{background:rgba(255,255,255,.14);transform:scale(.985)}
#ask-goldie-app .pfchip-main{display:flex;align-items:center;gap:8px;min-width:0}
#ask-goldie-app .pfchip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ask-goldie-app .pfchip .ic{color:var(--gold);flex:none}
#ask-goldie-app .pfchip .ic:last-child{opacity:.45;width:13px;height:13px}
#ask-goldie-app .pfchip .ic:last-child svg{width:13px;height:13px}
#ask-goldie-app .diagwrap{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:16px 8px 6px;margin:0 0 16px}
#ask-goldie-app .diagwrap svg{display:block}
#ask-goldie-app .diagcap{text-align:center;font-size:12px;color:#CBBFD6;font-weight:700;padding:8px 10px 8px;line-height:1.5}
#ask-goldie-app .diagcap b{color:var(--gold)}
#ask-goldie-app .dl{font-family:'Nunito';font-size:10px;font-weight:800;fill:#B7A8C4;letter-spacing:.5px}
#ask-goldie-app .dl.hot{fill:var(--gold)}
#ask-goldie-app .dln{stroke:#6B5880;stroke-width:1}
#ask-goldie-app .dpart{stroke:#9384A6;stroke-width:2;fill:none}
#ask-goldie-app .dpart.hot{stroke:var(--gold);stroke-width:3;filter:drop-shadow(0 0 7px rgba(255,202,107,.85))}
#ask-goldie-app .dpart.hot, #ask-goldie-app .dl.hot{animation:goldie-hotpulse 2.4s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){
#ask-goldie-app .dpart.hot, #ask-goldie-app .dl.hot{animation:none}}
#ask-goldie-app .chapters{margin:0 0 6px}
#ask-goldie-app .chap{display:flex;gap:15px;padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.09)}
#ask-goldie-app .chap:last-child{border-bottom:none}
#ask-goldie-app .chapn{font-family:'Montserrat';font-weight:800;font-size:21px;color:var(--gold);opacity:.9;line-height:1.15;flex:none;width:34px}
#ask-goldie-app .chap h4{margin:0 0 4px;font-family:'Montserrat';font-weight:800;font-size:15px;color:#fff;letter-spacing:.1px}
#ask-goldie-app .chap p{margin:0;font-size:14px;line-height:1.62;color:#D9CFE2}
#ask-goldie-app .chap p b{color:var(--gold)}
#ask-goldie-app .stake{border:1px solid rgba(255,202,107,.45);background:linear-gradient(135deg,rgba(255,202,107,.15),rgba(255,202,107,.04));border-radius:18px;padding:15px 17px;margin:10px 0 16px}
#ask-goldie-app .stake h5{margin:0 0 6px;font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase}
#ask-goldie-app .stake p{margin:0;font-size:14.5px;line-height:1.65;color:#F6F0E6}
#ask-goldie-app .stake p b{color:var(--gold)}
#ask-goldie-app details.full{margin:0 0 14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden}
#ask-goldie-app details.full summary{cursor:pointer;list-style:none;padding:13px 15px;font-weight:800;font-size:14px;color:var(--gold);display:flex;align-items:center;justify-content:space-between}
#ask-goldie-app details.full summary::-webkit-details-marker{display:none}
#ask-goldie-app details.full .teach{padding:0 15px 14px;font-size:14.5px;line-height:1.7;color:#E7DFEE}
#ask-goldie-app details.full .teach b{color:var(--gold)}
#ask-goldie-app .cites{margin:0 0 14px;padding:14px 16px;background:rgba(255,255,255,.06);border-radius:14px;border:1px solid rgba(255,202,107,.25)}
#ask-goldie-app .cites h4{margin:0 0 9px;font-family:'Montserrat';font-size:11.5px;letter-spacing:1.4px;color:var(--gold);text-transform:uppercase}
#ask-goldie-app .cites div{display:flex;gap:9px;font-size:13.8px;line-height:1.55;margin-bottom:7px;color:#E7DFEE}
#ask-goldie-app .cites div b{color:var(--gold)}
#ask-goldie-app /* ---------- diagnosis card + evidence ---------- */
  .diagcard{border:2px solid var(--gold);border-radius:20px 20px 0 0;background:linear-gradient(180deg,rgba(255,202,107,.17),rgba(255,202,107,.05));padding:16px 16px 14px;margin:0}
#ask-goldie-app .diagcard .eyebrow{font-family:'Montserrat';font-weight:800;font-size:10.5px;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase;margin-bottom:9px;display:flex;justify-content:space-between;gap:8px;align-items:center}
#ask-goldie-app .diagcard .eyebrow em{font-style:normal;font-weight:700;color:#C9B7D4;letter-spacing:.4px;text-transform:none;font-size:10.5px}
#ask-goldie-app .diagcard .drow{display:flex;gap:13px;align-items:center}
#ask-goldie-app .diagcard .dthumb{width:66px;height:66px;border-radius:14px;background:#fff;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.35)}
#ask-goldie-app .diagcard .dthumb img{max-width:88%;max-height:88%;object-fit:contain}
#ask-goldie-app .diagcard h2{margin:0;font-family:'Montserrat';font-weight:900;font-size:20px;color:#fff;line-height:1.18;letter-spacing:-.2px}
#ask-goldie-app .diagcard .plain{font-size:13.8px;color:#F0E6F4;line-height:1.6;margin-top:10px}
#ask-goldie-app .diagcard .tag{display:inline-flex;gap:6px;align-items:center;background:rgba(46,125,82,.28);border:1px solid rgba(110,200,150,.55);color:#A5E4C1;font-size:11px;font-weight:800;padding:4px 11px;border-radius:99px;margin-top:10px}
#ask-goldie-app .evidence{border:2px solid var(--gold);border-top:1px dashed rgba(255,202,107,.5);border-radius:0 0 20px 20px;margin:0 0 14px;padding:13px 16px 11px;background:rgba(255,255,255,.045)}
#ask-goldie-app .evidence h4{margin:0 0 9px;font-family:'Montserrat';font-size:11px;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase}
#ask-goldie-app .evidence div{display:flex;gap:9px;font-size:13.6px;line-height:1.55;margin-bottom:8px;color:#E7DFEE}
#ask-goldie-app .evidence div b{color:var(--gold)}
#ask-goldie-app .storylab{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:1.5px;color:#B9A9C4;text-transform:uppercase;margin:4px 0 2px}
#ask-goldie-app .chgnote{font-size:12px;color:#B9A9C4;font-weight:700;margin:-6px 0 12px}
#ask-goldie-app /* ---------- inline helpers ---------- */
  .helper{display:none;margin-top:12px}
#ask-goldie-app .helper.open{display:block}
#ask-goldie-app .helper .hint{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;margin-bottom:10px;color:#4a4152}
#ask-goldie-app .helper .hint .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--purple-deep);font-weight:900;font-family:'Montserrat';font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
#ask-goldie-app .helper .hchips{display:flex;flex-direction:column;gap:9px;margin-top:12px}
#ask-goldie-app /* ---------- featured water-test ---------- */
  .wfeat{border:2px solid var(--gold);border-radius:20px;background:linear-gradient(135deg,#FFF6E1,#FFFDF8 65%);padding:14px;margin:0 0 16px;box-shadow:var(--shadow)}
#ask-goldie-app .wfeat .weyebrow{font-family:'Montserrat';font-weight:800;font-size:10.5px;letter-spacing:1.5px;color:#A9793C;text-transform:uppercase;margin-bottom:8px}
#ask-goldie-app .wfeat .wrow{display:flex;gap:12px}
#ask-goldie-app .wfeat .wthumb{width:64px;height:64px;border-radius:13px;border:1px solid var(--line);background:#fff;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
#ask-goldie-app .wfeat .wthumb img{max-width:88%;max-height:88%;object-fit:contain}
#ask-goldie-app .wfeat h5{margin:0 0 3px;font-family:'Montserrat';font-weight:900;font-size:15.5px;color:var(--purple)}
#ask-goldie-app .wfeat p{margin:0;font-size:13px;line-height:1.55;color:#5d5566}
#ask-goldie-app .wfeat p b{color:var(--purple)}
#ask-goldie-app .wfeat .wbtn{margin-top:11px;width:100%;border-radius:13px;border:1.5px solid var(--gold-deep);background:#fff;color:var(--purple);font-family:'Montserrat';font-weight:800;font-size:13.5px;padding:12px;cursor:pointer;transition:all .14s}
#ask-goldie-app .wfeat .wbtn.added{background:var(--purple);color:var(--gold);border-color:var(--purple)}
#ask-goldie-app /* ---------- showroom ---------- */
  .seg{display:flex;background:#F3EDE2;border-radius:13px;padding:4px;margin:2px 0 14px}
#ask-goldie-app .seg button{flex:1;border:none;background:none;font-family:'Nunito';font-weight:800;font-size:13.5px;color:var(--muted);padding:9px;border-radius:10px;cursor:pointer;transition:all .15s}
#ask-goldie-app .seg button.on{background:#fff;color:var(--purple);box-shadow:0 2px 8px rgba(59,37,68,.10)}
#ask-goldie-app .rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:12px 4px 16px;margin:0 -22px;padding-left:22px;padding-right:22px;scroll-padding-left:22px;scrollbar-width:none}
#ask-goldie-app .rail::-webkit-scrollbar{display:none}
/* Fable round 4: .pcard is now a FLEX COLUMN (badge stays position:absolute,
   unaffected) so .pickrow (the Choose/Selected button) always pins to the
   bottom via .body{flex:1} below -- one consistent button position and
   size regardless of how long a given plan's title/description happens to
   run. Kept at the base (not mobile-only) since it's a strict improvement
   for the existing desktop 2-up grid too -- no visual change there, just
   removes the same "button floats wherever the content above it ends" risk. */
#ask-goldie-app .pcard{flex:0 0 86%;scroll-snap-align:start;border:1.5px solid var(--line);border-radius:24px;background:#fff;padding:0 0 16px;cursor:pointer;transition:all .18s;position:relative;display:flex;flex-direction:column}
#ask-goldie-app .pcard.sel{border-color:var(--gold);border-width:2.5px;box-shadow:var(--lift);background:linear-gradient(180deg,#FFFDF8,#FFF9EE)}
#ask-goldie-app .pcard .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--purple);color:var(--gold);font-family:'Montserrat';font-weight:800;font-size:10px;letter-spacing:1.2px;padding:5px 13px;border-radius:99px;text-transform:uppercase;white-space:nowrap;z-index:2}
/* align-items:flex-end (was center): different product shapes (a tall tank
   vs a flat tankless unit) share one visual "floor" instead of each
   floating at its own object-fit:contain center -- the actual source of
   the "images at different heights" read, since the box height was already
   a fixed 165px in every card. */
#ask-goldie-app .pcard .photo{height:165px;border-radius:22px 22px 0 0;background:#fff;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line);padding:14px}
#ask-goldie-app .pcard .photo img{max-width:100%;max-height:100%;object-fit:contain}
#ask-goldie-app .pcard .body{padding:12px 18px 0;flex:1}
#ask-goldie-app .tdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
#ask-goldie-app .pcard .tname{font-size:10.5px;letter-spacing:1.8px;color:var(--muted);font-family:'Montserrat';font-weight:800;text-transform:uppercase}
#ask-goldie-app .pcard h3{margin:4px 0 5px;font-family:'Montserrat';font-weight:900;font-size:18.5px;color:var(--purple);line-height:1.2;min-height:44px;overflow-wrap:break-word}
#ask-goldie-app .pcard .out{font-size:13.8px;line-height:1.52;color:#5d5566;min-height:42px;overflow-wrap:break-word}
#ask-goldie-app .pcard .out b{color:var(--purple)}
#ask-goldie-app .specs{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 10px}
#ask-goldie-app .spec{display:inline-flex;align-items:center;gap:6px;background:var(--cream);border:1px solid #F0E2C6;color:#7a6f47;font-size:11.5px;font-weight:800;border-radius:99px;padding:4px 11px}
#ask-goldie-app .spec .ic{color:var(--gold-text)}
#ask-goldie-app .spec .ic svg{width:13px;height:13px}
#ask-goldie-app .pcard .price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
#ask-goldie-app .pcard .mo{font-family:'Montserrat';font-weight:900;font-size:25px;color:var(--purple)}
#ask-goldie-app .pcard .mo small{font-size:12.5px;font-weight:700;color:var(--muted)}
#ask-goldie-app .pcard .tot{font-size:13px;color:var(--muted);font-weight:700}
#ask-goldie-app .pcard .whyme{margin-top:10px;background:var(--cream);border:1px solid #F0E2C6;border-radius:12px;padding:10px 12px;font-size:12.8px;line-height:1.52;color:#6d6377}
#ask-goldie-app .pcard .whyme b{color:var(--purple)}
#ask-goldie-app .pcard .pickrow{margin:12px 18px 0;display:flex}
#ask-goldie-app .pcard .pick{flex:1;border-radius:13px;border:1.5px solid var(--line);background:#fff;font-family:'Montserrat';font-weight:800;font-size:13.5px;color:var(--purple);padding:12px;cursor:pointer;transition:all .14s}
#ask-goldie-app .pcard.sel .pick{background:var(--purple);color:var(--gold);border-color:var(--purple)}
#ask-goldie-app .raildots{display:flex;justify-content:center;gap:6px;margin:0 0 10px}
#ask-goldie-app .raildots span{width:7px;height:7px;border-radius:50%;background:#E7DECF;transition:all .2s}
#ask-goldie-app .raildots span.on{width:20px;border-radius:5px;background:var(--gold)}
#ask-goldie-app .cfg h4{font-family:'Montserrat';font-size:12px;letter-spacing:1.4px;color:var(--purple);text-transform:uppercase;margin:8px 0 3px}
#ask-goldie-app .cfg .cfgsub{font-size:12.5px;color:var(--muted);font-weight:600;margin:0 0 11px}
#ask-goldie-app .li{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:16px;padding:11px 13px;margin-bottom:9px;background:#fff;transition:all .15s}
#ask-goldie-app .li.on{border-color:var(--gold);background:#FFFDF6}
#ask-goldie-app .li.core{background:var(--cream);border-color:#F0E2C6}
#ask-goldie-app .li .thumb{width:52px;height:52px;border-radius:12px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
#ask-goldie-app .li .thumb img{max-width:88%;max-height:88%;object-fit:contain}
#ask-goldie-app .li .thumb .ic{color:var(--gold-text)}
#ask-goldie-app .li .mid{flex:1;min-width:0}
#ask-goldie-app .li .t{font-weight:800;color:var(--purple);font-size:14px;line-height:1.3}
#ask-goldie-app .li .d{font-size:12.3px;color:#6d6377;line-height:1.45;margin-top:2px}
#ask-goldie-app .li .p{font-family:'Montserrat';font-weight:800;color:var(--purple);font-size:13.5px;flex:none;text-align:right}
#ask-goldie-app .li .p.free{color:var(--ok);font-size:12px}
#ask-goldie-app .li .lock{color:#6E6478;flex:none}
#ask-goldie-app .sw{width:44px;height:26px;border-radius:13px;background:#E3DACB;position:relative;transition:background .2s;flex:none;cursor:pointer;border:none;padding:0}
#ask-goldie-app .sw:after{content:'';position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:left .2s}
#ask-goldie-app .li.on .sw{background:var(--gold-deep)}
#ask-goldie-app .li.on .sw:after{left:20px}
#ask-goldie-app .promise{display:flex;gap:10px;align-items:flex-start;background:var(--cream);border:1px solid #F0E2C6;border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.5;color:#5d5566;margin:6px 0 12px;font-weight:600}
#ask-goldie-app .promise .ic{color:var(--gold-text);flex:none;margin-top:1px}
#ask-goldie-app .review{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px;margin:0 0 4px}
#ask-goldie-app .review .stars{color:var(--gold-text);font-size:14px;letter-spacing:2px;flex:none}
#ask-goldie-app .review .q{font-size:13.5px;line-height:1.5;color:#5d5566;font-style:italic}
#ask-goldie-app .review .who{font-size:12px;color:var(--muted);font-weight:700;margin-top:3px;font-style:normal}
#ask-goldie-app .fine{font-size:10.8px;line-height:1.5;color:#6E6478;margin-top:10px}
#ask-goldie-app .cmpwrap{overflow-x:auto;margin:0 -22px;padding:0 22px 8px}
#ask-goldie-app table.cmp{border-collapse:separate;border-spacing:0;min-width:560px;width:100%}
#ask-goldie-app .cmp th, #ask-goldie-app .cmp td{padding:11px 12px;font-size:13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
#ask-goldie-app .cmp thead th{font-family:'Montserrat';font-weight:900;color:var(--purple);font-size:13.5px;background:var(--cream);position:sticky;top:0}
#ask-goldie-app .cmp td:first-child, #ask-goldie-app .cmp th:first-child{position:sticky;left:0;background:#fff;font-weight:800;color:var(--purple);min-width:110px;z-index:1}
#ask-goldie-app .cmp thead th:first-child{background:var(--cream)}
#ask-goldie-app .cmp .gcol{background:#FFF9EE}
#ask-goldie-app .cmp .mo2{font-family:'Montserrat';font-weight:900;color:var(--purple);font-size:15px}
#ask-goldie-app .cmp .cimg{width:64px;height:52px;object-fit:contain;display:block;margin-bottom:5px}
#ask-goldie-app .screen.safety{background:linear-gradient(170deg,#231226,#180D1B);color:#F3E9F6}
#ask-goldie-app .safety .shield{display:flex;justify-content:center;margin:8px 0 4px;color:var(--gold)}
#ask-goldie-app .safety .shield svg{width:46px;height:46px}
#ask-goldie-app .safety h1.act{color:#fff;text-align:center;font-size:26px}
#ask-goldie-app .safety p.lead{text-align:center;font-size:15.5px;line-height:1.6;color:#E0D3E6}
#ask-goldie-app .steps{margin:16px 0;padding:0;list-style:none}
#ask-goldie-app .steps li{display:flex;gap:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:15px;padding:14px;margin-bottom:10px;font-size:15px;line-height:1.5}
#ask-goldie-app .steps .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--purple-deep);display:flex;align-items:center;justify-content:center;font-family:'Montserrat';font-weight:900;font-size:13px}
#ask-goldie-app .callrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 12px}
#ask-goldie-app .callbtn{border-radius:15px;padding:14px;text-align:center;font-family:'Montserrat';font-weight:900;font-size:14.5px;border:none;cursor:pointer}
#ask-goldie-app .call911{background:#C0392B;color:#fff}
#ask-goldie-app .calllge{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}
#ask-goldie-app .callbtn small{display:block;font-family:'Nunito';font-weight:700;font-size:11px;opacity:.85;margin-top:2px}
#ask-goldie-app .timechips{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
#ask-goldie-app .timechips .chip{justify-content:center;text-align:center;padding:12px 5px;font-size:13.5px;min-height:46px}
#ask-goldie-app .timechips .chip.on{background:var(--gold);border-color:var(--gold-text);color:var(--purple-deep)}
/* ---- Reserve step: real date + window picker, matching gp-booking's own
   day-strip pattern (Spencer, iPhone review — replaces the plain <input
   type=date> + Morning/Afternoon/First-open chips). See agBuildDayList()/
   agPickDay()/agPickPeriod() in app.js. ---- */
#ask-goldie-app .agdaystripwrap{position:relative;margin:0 0 10px}
#ask-goldie-app .agdaystrip{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 26px 6px 2px}
#ask-goldie-app .agdaystrip::-webkit-scrollbar{display:none}
#ask-goldie-app .agdaystripwrap:after{content:'';position:absolute;top:0;right:0;bottom:6px;width:26px;background:linear-gradient(to right,rgba(255,255,255,0),#fff 78%);pointer-events:none}
#ask-goldie-app .agdaychip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:0 0 auto;width:56px;min-height:54px;border-radius:13px;border:1.5px solid var(--line);background:#fff;cursor:pointer;touch-action:manipulation;transition:all .15s}
#ask-goldie-app .agdaychip-top{font-family:'Nunito';font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
#ask-goldie-app .agdaychip-num{font-family:'Montserrat';font-weight:800;font-size:16px;color:var(--charcoal)}
#ask-goldie-app .agdaychip.on{background:var(--purple);border-color:var(--purple);box-shadow:0 0 0 2px var(--gold)}
#ask-goldie-app .agdaychip.on .agdaychip-top,#ask-goldie-app .agdaychip.on .agdaychip-num{color:#fff}
#ask-goldie-app .agdaychip:disabled{opacity:.4;cursor:not-allowed}
#ask-goldie-app .agdaylabel{font-family:'Montserrat';font-weight:700;font-size:12.5px;color:var(--purple);margin:0 0 9px}
#ask-goldie-app .agwindow-row{display:flex;gap:9px}
#ask-goldie-app .agwindow-chip{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:44px;text-align:center;border:1.5px solid var(--line);background:#fff;border-radius:13px;padding:12px 8px;font-family:'Nunito';font-weight:800;font-size:12.8px;line-height:1.3;color:var(--purple);cursor:pointer;touch-action:manipulation;transition:all .15s}
#ask-goldie-app .agwindow-chip:hover{border-color:var(--gold-deep)}
#ask-goldie-app .agwindow-chip.on{background:var(--gold);border-color:var(--gold-text);color:var(--purple-deep)}
#ask-goldie-app .agwindow-chip:disabled{opacity:.4;cursor:not-allowed}
#ask-goldie-app .agtimehint{font-size:12px;font-weight:700;color:var(--danger);margin:8px 0 0}
#ask-goldie-app .visitsum{background:var(--cream);border:1px solid #F0E2C6;border-radius:15px;padding:13px 15px;margin-bottom:14px}
#ask-goldie-app .visitsum .r{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0;color:#5d5566;font-weight:600;gap:12px}
#ask-goldie-app .visitsum .r b{color:var(--purple);text-align:right}
#ask-goldie-app .prefill{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px 15px;margin-bottom:14px}
#ask-goldie-app .prefill .pr{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:5px 0;color:#5d5566;font-weight:600;gap:10px}
#ask-goldie-app .prefill .pr b{color:var(--purple);text-align:right}
#ask-goldie-app .prefill h6{margin:0 0 6px;font-family:'Montserrat';font-size:11px;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
#ask-goldie-app .prefill h6 button{border:none;background:none;color:var(--gold-text);font-weight:800;font-size:12px;cursor:pointer;font-family:'Nunito';text-decoration:underline;text-underline-offset:2px}
#ask-goldie-app .bigcheck{width:72px;height:72px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--purple-deep);margin:12px auto 4px;box-shadow:0 12px 30px rgba(245,184,74,.5);animation:goldie-pop .5s cubic-bezier(.2,1.6,.4,1)}
#ask-goldie-app .bigcheck svg{width:34px;height:34px}
#ask-goldie-app .tl{margin:14px 0;padding:0;list-style:none;position:relative}
#ask-goldie-app .tl:before{content:'';position:absolute;left:15px;top:10px;bottom:10px;width:2px;background:var(--line)}
#ask-goldie-app .tl li{display:flex;gap:15px;margin-bottom:16px;position:relative}
#ask-goldie-app .tl .dot{flex:none;width:31px;height:31px;border-radius:50%;background:#fff;border:2.5px solid var(--gold);display:flex;align-items:center;justify-content:center;z-index:1;color:var(--purple)}
#ask-goldie-app .tl .dot svg{width:15px;height:15px}
#ask-goldie-app .tl .tt{font-weight:800;color:var(--purple);font-size:15px}
#ask-goldie-app .tl .td{font-size:13.5px;color:#6d6377;line-height:1.5;margin-top:2px}
#ask-goldie-app .expectvid{margin:4px 0 16px}
#ask-goldie-app .expectvid .evlabel{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin:0 0 8px}
#ask-goldie-app .evframe{border-radius:18px;overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/9;background:#000}
#ask-goldie-app .evframe iframe{width:100%;height:100%;display:block;border:0}
#ask-goldie-app .evcap{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:8px;text-align:center}
/* ---- v0.2: address autocomplete ---- */
#ask-goldie-app .acwrap{position:relative}
/* Native-iOS list redesign (Spencer, iPhone review — the old design read as
   one giant solid-gold tappable block, not a system picker). Cream/white
   rounded card floating under the field, hairline-separated rows, a small
   pin glyph, primary line (street) + muted secondary line (city/state/zip),
   quiet pressed state. Selection behavior (acPick, fills street/city/state/
   zip) is unchanged — see acRender()/acPick() in app.js. */
#ask-goldie-app .acbox{display:none;position:absolute;left:0;right:0;top:100%;margin-top:6px;background:#FFFDF8;border:1px solid var(--line);border-radius:16px;box-shadow:var(--lift);z-index:80;overflow:hidden;max-height:288px;overflow-y:auto}
#ask-goldie-app .acitem{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:none;background:transparent;padding:11px 14px;font-family:'Nunito';cursor:pointer;border-bottom:1px solid var(--line);transition:background .12s}
#ask-goldie-app .acitem:last-child{border-bottom:none}
#ask-goldie-app .acitem:hover{background:var(--cream)}
#ask-goldie-app .acitem:active{background:#F3EAD4}
#ask-goldie-app .acpin{flex:none;width:28px;height:28px;border-radius:50%;background:var(--cream);color:var(--gold-text);display:flex;align-items:center;justify-content:center}
#ask-goldie-app .acpin svg{width:14px;height:14px}
#ask-goldie-app .acitem-lines{min-width:0;display:flex;flex-direction:column;gap:1px}
#ask-goldie-app .acitem-primary{font-size:14.5px;font-weight:800;color:var(--purple);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ask-goldie-app .acitem-secondary{font-size:12.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ask-goldie-app .frow3{display:grid;grid-template-columns:1.4fr .6fr .8fr;gap:8px}
/* ---- v0.2: photo capture ---- */
#ask-goldie-app .phgrid{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
#ask-goldie-app .phth{width:72px;height:72px;border-radius:14px;overflow:hidden;border:1.5px solid var(--line);position:relative;background:#fff}
#ask-goldie-app .phth img{width:100%;height:100%;object-fit:cover}
#ask-goldie-app .phth span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(59,37,68,.45);color:#fff;font-weight:900;font-size:18px}
#ask-goldie-app .phth.done{border-color:var(--ok)}
#ask-goldie-app .phth.failed{border-color:var(--danger)}
/* ---- v0.2: confirmation video star (TAYA) ---- */
#ask-goldie-app .vstar{border:2px solid var(--gold);border-radius:22px;background:linear-gradient(180deg,#FFF9EE,#FFFDF8 60%);padding:18px 16px 16px;margin:6px 0 18px;box-shadow:var(--shadow)}
#ask-goldie-app .vstar .vlabel{font-family:'Montserrat';font-weight:800;font-size:10.5px;letter-spacing:1.7px;color:var(--gold-text);text-transform:uppercase;margin-bottom:8px}
#ask-goldie-app .vstar h2{margin:0 0 8px;font-family:'Montserrat';font-weight:900;font-size:20px;line-height:1.2;color:var(--purple);letter-spacing:-.2px}
#ask-goldie-app .vstar p{margin:0 0 13px;font-size:14.5px;line-height:1.6;color:#5d5566}
#ask-goldie-app .vstar p b{color:var(--purple)}
/* ---- v0.2: pre-visit reading slot (future TAYA blog library) ---- */
#ask-goldie-app .reads{border:1.5px solid var(--line);border-radius:18px;padding:16px;margin:0 0 16px;background:#fff}
#ask-goldie-app .reads h4{margin:0 0 10px;font-family:'Montserrat';font-weight:800;font-size:12px;letter-spacing:1.4px;color:var(--purple);text-transform:uppercase}
#ask-goldie-app .read{display:block;padding:11px 13px;border:1.5px solid var(--line);border-radius:13px;margin-bottom:8px;font-weight:800;font-size:14px;color:var(--purple);text-decoration:none}
#ask-goldie-app .read:hover{border-color:var(--gold)}
#ask-goldie-app .read small{display:block;font-weight:600;color:var(--muted);font-size:12.5px;margin-top:2px}
/* This stylesheet loads ONLY on Ask Goldie pages: hide the theme's sticky CTA bar
   (Spencer 2026-07-01 — the diagnostic IS the page; no competing chrome). */
#golden-mobile-cta{display:none!important}
/* Full-bleed containment: some theme-injected element overflows the viewport ~35px
   for logged-out visitors and shifts the whole page. This sheet loads ONLY on
   Ask Goldie pages, so clamp the page here. */
html,body{overflow-x:hidden;overflow-x:clip}  /* clip ≠ scroll-container → position:sticky keeps working */

/* ---- v0.3: helper plate illustration ---- */
#ask-goldie-app .platesvg{display:flex;justify-content:center;margin:4px 0 12px}
/* ---- v0.3: real call buttons are anchors ---- */
#ask-goldie-app a.callbtn{display:block;text-decoration:none}

/* ---- v0.5: unified desktop surface with functional rail ---- */
#ask-goldie-app .grail{display:none}
#ask-goldie-app .gmain{display:block;min-width:0}
@media (min-width:1024px){
  #ask-goldie-app .goldie-bg{padding:0;min-height:100vh;display:block}
  #ask-goldie-app .stage{display:grid;grid-template-columns:330px minmax(0,1fr);max-width:none;margin:0;
    min-height:100vh;border-radius:0;overflow:visible;box-shadow:none;border-bottom:none}
  #ask-goldie-app .grail{display:block;background:linear-gradient(172deg,var(--purple),var(--purple-deep) 90%)}
  #ask-goldie-app .grail-inner{position:sticky;top:0;padding:34px 28px 26px;display:flex;flex-direction:column;min-height:100vh;max-height:100vh}
  #ask-goldie-app .grail-brand{text-align:center;margin-bottom:26px}
  #ask-goldie-app .grail-pup{width:104px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
  #ask-goldie-app .grail-tag{font-family:'Caveat',cursive;font-weight:700;font-size:23px;color:var(--gold);margin-top:4px}
  #ask-goldie-app .gsteps{list-style:none;margin:0 0 24px;padding:0}
  #ask-goldie-app .gsteps li{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:15px;font-weight:700;color:#8E7FA0;transition:color .2s}
  #ask-goldie-app .gsteps li span{width:26px;height:26px;border-radius:50%;border:2px solid #5A4468;flex:none;display:flex;align-items:center;justify-content:center;transition:all .2s}
  #ask-goldie-app .gsteps li.on{color:#fff}
  #ask-goldie-app .gsteps li.on span{border-color:var(--gold);background:var(--gold);box-shadow:0 0 14px rgba(255,202,107,.55)}
  #ask-goldie-app .gsteps li.done{color:#CBBFD6}
  #ask-goldie-app .gsteps li.done span{border-color:var(--gold);background:transparent}
  #ask-goldie-app .gsteps li.done span:after{content:'';width:8px;height:5px;border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(-45deg);margin-top:-2px}
  #ask-goldie-app .grail-info ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.14)}
  #ask-goldie-app .grail-info li{position:relative;padding-left:26px;margin-bottom:12px;font-size:13.8px;line-height:1.5;color:#D9CFE2;font-weight:600}
  #ask-goldie-app .grail-info li:before{content:'';position:absolute;left:2px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
  #ask-goldie-app .grail-quote{display:none;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.14)}
  #ask-goldie-app .grail-quote.show{display:block}
  #ask-goldie-app .grail-quote h5{margin:0 0 10px;font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase}
  #ask-goldie-app .grail-quote .rqname{font-weight:800;font-size:15px;color:#fff;line-height:1.35;margin-bottom:8px}
  #ask-goldie-app .grail-quote .rqamt{font-family:'Montserrat';font-weight:900;font-size:26px;color:var(--gold)}
  #ask-goldie-app .grail-quote .rqamt small{font-size:13px;color:#CBBFD6;font-weight:700;font-family:'Nunito'}
  #ask-goldie-app .grail-quote .rqtot{font-size:13px;color:#CBBFD6;font-weight:700;margin-top:2px}
  #ask-goldie-app .grail-quote .rqpromise{margin-top:12px;font-size:12.3px;line-height:1.5;color:#D9CFE2;font-weight:600}
  #ask-goldie-app .grail-trust{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:700;color:#B7A8C4;text-align:center;letter-spacing:.3px}
  /* content zone breathes */
  #ask-goldie-app .gmain{background:#fff}
  #ask-goldie-app .screen{padding:22px max(48px, calc((100% - 780px)/2)) 40px}
  #ask-goldie-app .screen.dark,#ask-goldie-app .screen.safety{padding:22px max(48px, calc((100% - 780px)/2)) 40px}
  #ask-goldie-app #bar{padding:12px max(48px, calc((100% - 780px)/2)) calc(14px + env(safe-area-inset-bottom))}
  #ask-goldie-app .rail{margin:0;padding-left:0;padding-right:0}
  #ask-goldie-app h1.act{font-size:31px}
  /* chips: two-up where the list is long */
  #ask-goldie-app .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  #ask-goldie-app .chips .chip.warn,#ask-goldie-app .chips .chip.ghost:last-child{grid-column:1/-1}
  #ask-goldie-app .grid2{grid-template-columns:1fr 1fr 1fr}
  /* showroom: plans as a 2-up GRID — no phone swiping on a computer */
  #ask-goldie-app .rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;overflow:visible;margin:0;padding:14px 0 10px}
  #ask-goldie-app .pcard{width:auto}
  #ask-goldie-app .raildots{display:none}
  /* two-col compact form rows already grid — widen gaps */
  #ask-goldie-app .frow{gap:12px}
}

@media (min-width:1600px){
  #ask-goldie-app .stage{grid-template-columns:380px minmax(0,1fr)}
  #ask-goldie-app .grail-inner{padding:44px 36px 30px}
}

/* ---- v0.6: mobile journey stepper ---- */
/* Fix 1 (Spencer, iPhone review — IMG_5300): shrunk padding/circle/type well
   below the original size so the stepper reads as a slim progress strip
   instead of a second full-height header — same 5 steps, same click-to-jump
   behavior (updateRail() in app.js targets `.gsteps li`, which this is still
   one of), just far less height claimed. */
#ask-goldie-app .gsteps-m{display:flex;justify-content:space-between;list-style:none;margin:0;padding:5px 14px 5px;
  background:var(--purple-deep);border-bottom:3px solid var(--gold);position:sticky;top:66px;z-index:39}
#ask-goldie-app .gsteps-m li{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:0;flex:1}
#ask-goldie-app .gsteps-m li span{width:14px;height:14px;border-radius:50%;border:1.5px solid #5A4468;display:flex;align-items:center;justify-content:center;transition:all .2s}
#ask-goldie-app .gsteps-m li em{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.2px;color:#8E7FA0;text-transform:uppercase}
#ask-goldie-app .gsteps-m li.on span{border-color:var(--gold);background:var(--gold);box-shadow:0 0 10px rgba(255,202,107,.55)}
#ask-goldie-app .gsteps-m li.on em{color:#fff}
#ask-goldie-app .gsteps-m li.done span{border-color:var(--gold)}
#ask-goldie-app .gsteps-m li.done span:after{content:'';width:5px;height:3px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg);margin-top:-1px}
#ask-goldie-app .gsteps-m li.done em{color:#CBBFD6}
@media (min-width:1024px){#ask-goldie-app .gsteps-m{display:none}}
/* header border handoff to the stepper on mobile */
@media (max-width:1023px){#ask-goldie-app header{border-bottom:none}}
/* Fix 1 (Spencer, iPhone review — IMG_5300): the purple logo row + 5-step
   stepper together ate ~2/3 of the viewport on the OPTIONS screen, crowding
   out the actual shopping cards. Shrinks the header + gsteps-m footprint on
   phones/small tablets (desktop is untouched — .gsteps-m is display:none at
   min-width:1024px and the sidebar .gsteps rail is a completely separate,
   unaffected rule set). No content removed, no functionality lost — same
   logo, same 5 steps, same tap targets — just far less vertical padding and
   smaller glyphs. See .gsteps-m shrink below (v0.17 mobile-polish block) and
   cartBarShell()'s one-line collapsed bar (app.js) for the matching cart fix. */
@media (max-width:1023px){
  #ask-goldie-app header{padding:8px 16px 7px}
  #ask-goldie-app header img{height:28px}
}
/* ---- v0.6: sticky top CTA on the diagnosis ---- */
/* Fix 1 follow-through: this offset must equal the mobile header + gsteps-m
   stack height so the sticky "What are my options?" button sits flush under
   them instead of leaving a gap of scrolled content peeking through above it
   (verified via Playwright: scroll the c-reveal screen and confirm topcta's
   top edge meets .gsteps-m's bottom edge with no gap). Was 118px, matching
   the OLD (pre-shrink) 64px header + 61px stepper; now 43px header + 40px
   stepper = 83px. */
#ask-goldie-app .topcta{position:sticky;top:83px;z-index:30;margin:0 0 14px;padding:2px 0 10px}
#ask-goldie-app .screen.dark .topcta{background:linear-gradient(180deg,var(--purple) 62%,rgba(59,37,68,0))}
@media (min-width:1024px){#ask-goldie-app .topcta{top:64px}}
/* ---- v0.6: dark action bar on dark screens ---- */
#ask-goldie-app #bar.dark{background:rgba(30,16,34,.97);border-top-color:rgba(255,255,255,.14)}
#ask-goldie-app #bar.dark .quiet{color:#C9BBD1}
/* ---- v0.6: inline answer editing on the diagnosis ---- */
#ask-goldie-app .editpanel{border:1.5px solid rgba(255,202,107,.5);background:rgba(255,255,255,.06);border-radius:16px;padding:14px 15px;margin:0 0 14px}
#ask-goldie-app .editpanel h6{margin:0 0 10px;font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase}
#ask-goldie-app .editopts{display:flex;flex-wrap:wrap;gap:8px}
#ask-goldie-app .editopt{border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#E7DFEE;border-radius:99px;padding:9px 15px;font-family:'Nunito';font-weight:700;font-size:13.5px;cursor:pointer;transition:all .14s}
#ask-goldie-app .editopt:hover{border-color:var(--gold);color:var(--gold)}
#ask-goldie-app .editopt.cur{background:var(--gold);border-color:var(--gold);color:var(--purple-deep)}

/* ---- v0.8: overflow-safe chips + tier details + multi-issue ---- */
#ask-goldie-app .chip{min-width:0}
#ask-goldie-app .chip>div{min-width:0;overflow-wrap:break-word}
#ask-goldie-app .pcard{min-width:0}
#ask-goldie-app .chip small{overflow-wrap:break-word}
#ask-goldie-app .tierdetails{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
#ask-goldie-app .tierdetails summary{cursor:pointer;list-style:none;font-weight:800;font-size:12.5px;color:var(--gold-text)}
#ask-goldie-app .tierdetails summary::-webkit-details-marker{display:none}
#ask-goldie-app .tierdetails p{font-size:13px;line-height:1.55;color:#5d5566;margin:8px 0 0}
#ask-goldie-app .inlineask{margin-top:14px}
#ask-goldie-app .inlineask label{display:block;font-weight:800;color:var(--purple);font-size:13.5px;margin-bottom:6px}
#ask-goldie-app .inlineask .row{display:flex;gap:8px}
#ask-goldie-app .inlineask input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:13px;padding:12px 13px;font-family:'Nunito';font-size:15px;background:var(--cream);outline:none}
#ask-goldie-app .inlineask button{border:none;border-radius:13px;background:var(--purple);color:var(--gold);font-family:'Montserrat';font-weight:800;font-size:13px;padding:0 16px;cursor:pointer}
#ask-goldie-app .issuelist{margin:0 0 12px}
#ask-goldie-app .issuerow{display:grid;grid-template-columns:1fr auto 26px;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--purple);padding:8px 0;border-bottom:1px dashed var(--line)}
#ask-goldie-app .issuerow em{font-style:normal;color:var(--muted);font-weight:600}

/* ---- v0.9: multi-issue cart + combined screens ---- */
#ask-goldie-app .chip.qsel{border-color:var(--gold);background:#FFFDF6}
#ask-goldie-app .chip .qtick{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid #D9CEBB;flex:none;display:flex;align-items:center;justify-content:center;transition:all .15s}
#ask-goldie-app .chip.qsel .qtick{background:var(--gold);border-color:var(--gold-text)}
#ask-goldie-app .chip.qsel .qtick:after{content:'';width:8px;height:5px;border-left:2.5px solid var(--purple-deep);border-bottom:2.5px solid var(--purple-deep);transform:rotate(-45deg);margin-top:-2px}
#ask-goldie-app .cissue{margin:0 0 22px}
#ask-goldie-app .cissue-h{font-family:'Montserrat';font-weight:800;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin:0 0 10px;display:flex;align-items:center;gap:10px}
#ask-goldie-app .cissue-h:after{content:'';flex:1;height:1px;background:rgba(255,202,107,.35)}
#ask-goldie-app .screen:not(.dark) .cissue-h{color:var(--purple)}
#ask-goldie-app .screen:not(.dark) .cissue-h:after{background:var(--line)}
#ask-goldie-app details.cstory{margin:10px 0 0;border:1px solid rgba(255,255,255,.14);border-radius:14px}
#ask-goldie-app details.cstory summary{cursor:pointer;list-style:none;padding:12px 15px;font-weight:800;font-size:13.5px;color:var(--gold)}
#ask-goldie-app details.cstory summary::-webkit-details-marker{display:none}
#ask-goldie-app details.cstory .inner{padding:0 15px 12px}

/* ---- v0.9.1: overflow + regressions + polish ---- */
/* theme CSS bleeds white-space:nowrap into buttons — force wrapping app-wide */
#ask-goldie-app .chip,#ask-goldie-app button{white-space:normal}
#ask-goldie-app .chip>div{overflow-wrap:anywhere}
/* .vid compact explainer bar (rules lost in an earlier CSS pass — restored + hardened) */
#ask-goldie-app .vid{margin:0 0 14px;border-radius:15px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);padding:12px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#ask-goldie-app .vid .soon-chip{display:inline-flex;align-items:center;gap:6px;flex:none;background:rgba(255,202,107,.12);border:1.5px solid rgba(255,202,107,.45);color:var(--gold);font-family:'Montserrat';font-weight:800;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;padding:6px 11px;border-radius:99px}
#ask-goldie-app .vid .soon-chip .ic{color:var(--gold)}
#ask-goldie-app .vid span{font-size:13px;color:#CBBFD6;font-weight:700}
/* generic modern remove button (booking issue rows had unstyled yellow blocks) */
#ask-goldie-app .rm{border:none;background:none;color:#6E6478;width:26px;height:26px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#ask-goldie-app .rm svg{width:16px;height:16px}
#ask-goldie-app .rm:hover{color:var(--danger);background:#FFF3F0}
/* split "help me tell them apart" card */
#ask-goldie-app .tellcard{display:none;margin-top:12px}
#ask-goldie-app .tellcard.open{display:block}
#ask-goldie-app .tellcard .tellrow{display:flex;gap:10px;margin-bottom:10px;font-size:14.5px;line-height:1.55}
#ask-goldie-app .tellcard .tellrow b{color:var(--purple)}

/* ---- v0.12: style picker + seg row + booking items ---- */
#ask-goldie-app .segrow{display:flex;gap:10px;align-items:center;margin:0 0 16px;flex-wrap:wrap}
#ask-goldie-app .segrow .seg{margin:0;flex:1;min-width:200px}
#ask-goldie-app .seg-mini{flex:0 0 auto;min-width:0}
#ask-goldie-app .seg-mini button{padding:9px 14px;font-size:11.5px}
#ask-goldie-app .stylebtn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;border:1.5px dashed var(--gold-deep);background:#FFFDF6;color:var(--gold-text);border-radius:99px;padding:7px 13px;font-family:'Montserrat';font-weight:800;font-size:11.5px;cursor:pointer}
#ask-goldie-app .styles{display:flex;flex-direction:column;gap:7px;margin-top:9px}
#ask-goldie-app .style{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:8px 11px;cursor:pointer;text-align:left}
#ask-goldie-app .style img{width:38px;height:38px;object-fit:contain}
#ask-goldie-app .style .sn{font-family:'Nunito';font-weight:700;font-size:12.5px;color:var(--charcoal);line-height:1.3}
#ask-goldie-app .style b{font-family:'Montserrat';font-weight:800;font-size:13px;color:var(--purple)}
#ask-goldie-app .style.cur{border-color:var(--gold);background:#FFFDF6;box-shadow:0 0 0 1.5px var(--gold)}
#ask-goldie-app .sw.off{background:#D9D2E0}
#ask-goldie-app .sw.off:before{transform:translateX(0)}
#ask-goldie-app .bookitems{margin:4px 0 10px;border:1px dashed var(--line);border-radius:13px;padding:8px 12px}
#ask-goldie-app .bookitems summary{cursor:pointer;list-style:none;font-weight:800;font-size:12.5px;color:var(--gold-text)}
#ask-goldie-app .bookitems summary::-webkit-details-marker{display:none}

/* ---- v0.13: service line, image blending, checkout ---- */
#ask-goldie-app .svc{font-family:'Montserrat';font-weight:800;font-size:13px;color:var(--gold-text);margin:5px 0 2px;line-height:1.3}
#ask-goldie-app .cmp .cimg,#ask-goldie-app .cfg .li .thumb img,#ask-goldie-app .styles .style img,#ask-goldie-app .pcard .photo img{mix-blend-mode:multiply}
#ask-goldie-app .bline .rm{margin-left:8px}
#ask-goldie-app .bline{grid-template-columns:1fr auto auto}

/* ---- v0.13.2: multi-issue affordance on the doorstep ---- */
#ask-goldie-app .multihint{display:flex;gap:10px;align-items:flex-start;border:1.5px dashed var(--gold-deep);background:#FFFDF6;border-radius:15px;padding:12px 14px;margin:0 0 14px;font-size:13.5px;line-height:1.55;color:#5d5566}
#ask-goldie-app .multihint svg{flex:none;margin-top:2px;color:var(--gold-text)}
#ask-goldie-app .multihint b{color:var(--purple)}
#ask-goldie-app .multihint.got{border-style:solid;border-color:var(--gold);background:linear-gradient(180deg,#FFF9EE,#FFFDF6)}

/* ---- v0.14: style rows v2, booking cart, financing CTA ---- */
#ask-goldie-app .styles .style{display:flex;align-items:center;gap:11px;padding:10px 12px}
#ask-goldie-app .style .simg{flex:none;width:46px;height:46px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
#ask-goldie-app .style .simg img{width:44px;height:44px;object-fit:contain;mix-blend-mode:multiply}
#ask-goldie-app .style .smid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#ask-goldie-app .style .sn{font-family:'Nunito';font-weight:800;font-size:13px;color:var(--charcoal);line-height:1.3;overflow-wrap:anywhere}
#ask-goldie-app .style .sd{font-size:11.5px;line-height:1.45;color:var(--muted);font-weight:600}
#ask-goldie-app .style b{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
#ask-goldie-app .style b i{font-style:normal;font-size:10px;font-weight:800;color:var(--gold-text);letter-spacing:.4px}
#ask-goldie-app .li.styling{flex-wrap:wrap}
#ask-goldie-app .li.styling .thumb{display:none}
#ask-goldie-app .li.styling .mid{flex-basis:100%}
#ask-goldie-app .bookcart{margin:6px 0 12px}
#ask-goldie-app .bookcart .cfg{border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff;margin:0}
#ask-goldie-app .fincta{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:2px solid var(--gold);background:linear-gradient(180deg,#FFF9EE,#FFFDF6);border-radius:16px;padding:14px 16px;margin:0 0 16px;cursor:pointer;box-shadow:var(--shadow)}
#ask-goldie-app .fincta svg{flex:none;color:var(--gold-text)}
#ask-goldie-app .fincta b{display:block;font-family:'Montserrat';font-weight:800;font-size:15px;color:var(--purple)}
#ask-goldie-app .fincta small{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}

/* ---- v0.15: teach summary, financing hero ---- */
#ask-goldie-app .teachsum{list-style:none;margin:0 0 12px;padding:0}
#ask-goldie-app .teachsum li{position:relative;padding-left:22px;margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#E7DFEE}
#ask-goldie-app .teachsum li:before{content:'→';position:absolute;left:0;color:var(--gold);font-weight:800}
#ask-goldie-app .screen:not(.dark) .teachsum li{color:#5d5566}
#ask-goldie-app details.fullstory{margin:4px 0 14px;border:1px solid rgba(255,255,255,.16);border-radius:14px}
#ask-goldie-app details.fullstory summary{cursor:pointer;list-style:none;padding:12px 15px;font-weight:800;font-size:13.5px;color:var(--gold)}
#ask-goldie-app details.fullstory summary::-webkit-details-marker{display:none}
#ask-goldie-app details.fullstory[open] summary{border-bottom:1px dashed rgba(255,255,255,.14)}
#ask-goldie-app details.fullstory .teach{padding:0 15px}
#ask-goldie-app details.fullstory[open]{padding-bottom:8px}
#ask-goldie-app .screen:not(.dark) details.fullstory{border-color:var(--line)}
#ask-goldie-app .screen:not(.dark) details.fullstory summary{color:var(--gold-text)}
#ask-goldie-app .finhero{border:2px solid var(--gold);border-radius:22px;background:linear-gradient(180deg,#FFF9EE,#FFFDF8);padding:26px 20px;margin:6px auto 18px;max-width:420px;box-shadow:var(--shadow)}
#ask-goldie-app .finlabel{font-family:'Montserrat';font-weight:800;font-size:10.5px;letter-spacing:1.8px;color:var(--gold-text)}
#ask-goldie-app .finamt{font-family:'Montserrat';font-weight:900;font-size:52px;color:var(--purple);line-height:1.1;margin:6px 0 2px}
#ask-goldie-app .finamt small{font-size:22px;font-weight:800}
#ask-goldie-app .fintot{font-size:14px;font-weight:700;color:var(--muted)}

#ask-goldie-app .finok{display:flex;gap:9px;align-items:flex-start;max-width:420px;margin:0 auto 14px;border:1.5px solid var(--ok);background:#F0FAF4;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.55;color:#2E5D45;text-align:left}
#ask-goldie-app .finok svg{flex:none;color:var(--ok);margin-top:2px}

/* ================= v0.17 MOBILE POLISH ================= */
/* 1. header ↔ stepper 2px white seam */
/* Fix 1 follow-through: this sticky `top` must track the header's own height
   (top = headerHeight - 2, same relationship as before the shrink: was 64px
   header → top:62px; header is now 43px → top:41px) or a gap of scrolled
   content shows between the two sticky bars. Verified via Playwright. */
#ask-goldie-app .gsteps-m{top:41px;margin-top:-2px}

@media (max-width:1023px){
  /* 2. Plans = horizontal CAROUSEL, reverted back from the vertical stack
     (Spencer, explicit: the vertical stack "is against our buying/shopping
     experience goals" — round 5 iPhone review). The PRIOR carousel attempt
     (IMG_5256/5257) clipped a trailing card's text at the viewport edge; the
     root cause was `scroll-snap-align:center` on an edge card that can never
     fully center within a mandatory-snap track, so it rested partially past
     the viewport bound. Fixed at the base rule (see `.rail`/`.pcard` above,
     not mobile-only): `scroll-snap-align:start` + `scroll-padding-left`
     matching the rail's own edge padding means every card — including the
     first and last — always snaps FULLY inside the padded viewport from its
     own left edge; the ~14% left uncovered by `.pcard{flex:0 0 86%}` is the
     deliberate peek of the next card, never a clip. Dots stay visible here
     (removed the earlier `display:none`) since they're the pagination cue a
     carousel needs that a stack doesn't. Desktop (min-width:1024px, below)
     is untouched — still the 2-up grid. */
  #ask-goldie-app .raildots{display:flex}
  /* room so the sticky cart never covers the active card's Choose button */
  #ask-goldie-app #scroll{padding-bottom:136px}
}
#ask-goldie-app .cmphint{display:none}
@media (max-width:1023px){
  #ask-goldie-app .cmphint{display:flex;align-items:center;justify-content:flex-end;gap:5px;font-size:11.5px;font-weight:800;color:var(--gold-text);letter-spacing:.3px;margin:0 0 6px}
}

/* 3. modern Choose button */
#ask-goldie-app .pcard .pick{border-radius:14px;border:1.6px solid #E7D9BE;background:#fff;color:var(--purple);padding:14px;font-size:14.5px;letter-spacing:.2px;transition:all .16s}
#ask-goldie-app .pcard .pick:hover{border-color:var(--gold-text);color:var(--gold-text)}
#ask-goldie-app .pcard.sel .pick{background:linear-gradient(180deg,#FFD680,var(--gold-deep));color:var(--purple-deep);border-color:var(--gold-text);box-shadow:0 8px 20px rgba(245,184,74,.38)}

/* 4. bullets were UNSTYLED (browser default disc poked out of the card) */
#ask-goldie-app .pcard .inc{list-style:none;margin:12px 0 2px;padding:0}
#ask-goldie-app .pcard .inc li{position:relative;padding-left:19px;margin:0 0 8px;font-size:13.3px;line-height:1.5;color:#5d5566;overflow-wrap:anywhere}
#ask-goldie-app .pcard .inc li:before{content:'';position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold-deep)}

/* 5. compare: proper frozen label column (opaque + shadow, no overlap), readable data cols */
#ask-goldie-app .cmp td:first-child,#ask-goldie-app .cmp th:first-child{min-width:104px;max-width:120px;box-shadow:7px 0 10px -7px rgba(59,37,68,.22);z-index:2}
#ask-goldie-app .cmp thead th:first-child{z-index:3}
#ask-goldie-app .cmp td:not(:first-child),#ask-goldie-app .cmp th:not(:first-child){min-width:150px}
#ask-goldie-app .cmpwrap{position:relative;-webkit-overflow-scrolling:touch}

/* 6. Reserve/showroom style-picker button: clean, obviously tappable, not a giant slab */
#ask-goldie-app .stylebtn{display:inline-flex;align-items:center;gap:7px;margin-top:9px;border:1.6px solid var(--gold-deep);background:#fff;color:var(--gold-text);border-radius:12px;padding:9px 15px;font-family:'Montserrat';font-weight:800;font-size:12.5px;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(245,184,74,.16)}
#ask-goldie-app .stylebtn:hover{background:#FFFBF2}
#ask-goldie-app .stylebtn svg{width:13px;height:13px}

/* v0.18: Spencer — compare first column scrolls too (not frozen) */
@media (max-width:1023px){
  #ask-goldie-app .cmp td:first-child,#ask-goldie-app .cmp th:first-child{position:static;box-shadow:none;min-width:86px;max-width:96px}
}

/* ---- v0.30: persistent issue-context tag on diagnostic screens ---- */
#ask-goldie-app .issuetag{display:inline-flex;align-items:center;gap:7px;background:#FFF3DC;border:1.5px solid #F0DFBC;color:var(--purple);font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:.9px;text-transform:uppercase;padding:7px 13px;border-radius:99px;margin:0 0 12px}
#ask-goldie-app .issuetag svg{width:12px;height:12px;color:var(--gold-text)}
#ask-goldie-app .issuetag b{color:var(--gold-text)}
#ask-goldie-app .issuetag .dotsep{color:var(--muted);margin:0 2px}

/* a11y: headings receive programmatic focus on screen change (screen-reader announce) — never show a ring on them; interactive elements keep :focus-visible rings */
#ask-goldie-app [tabindex="-1"]:focus{outline:none!important;box-shadow:none!important}

/* v0.32: completed progress steps are clickable */
#ask-goldie-app .gsteps li.done, .gsteps li.done{cursor:pointer}
#ask-goldie-app .gsteps li.done:hover, .gsteps li.done:hover{opacity:.8}

/* Clickable logo → home (both the header wordmark and the rail brand). */
#ask-goldie-app .ag-logo-home{text-decoration:none;color:inherit;cursor:pointer;transition:opacity .15s ease}
#ask-goldie-app .ag-logo-home:hover{opacity:.85}
#ask-goldie-app header .ag-logo-home{display:inline-block;line-height:0}
#ask-goldie-app a.grail-brand{display:block}