/* ============================================================
   HumanUp — THE EXPERIENCE SECTION  |  css/experience.css
   v2026-09-11
   Loaded ONLY by index.html, after css/style.css.

   Everything here is scoped under .xp. It is the module from
   _Inbox/HumanUp_Homepage_Experience_Section_v1.html, imported
   verbatim from the "THE MODULE" marker down.

   Deliberately NOT imported from the prototype (they were demo
   page chrome and would have leaked site-wide):
     :root{...}          duplicated tokens already in style.css,
                         identical values, so redundant
     *{box-sizing}       unscoped; .xp *{...} covers the module
     body{...}           unscoped
     .demo-note, .demo-note b, .demo-spacer

   This lives in its own file rather than index.html's inline
   <style> on purpose: component CSS trapped in that block is why
   the book strip rendered as seven stacked covers when it was
   reused on /pediatricians/. See Website/README.md.
   ============================================================ */

/* ================= THE MODULE ================= */
.xp{
  --brand-gradient: linear-gradient(35deg, #05060b 0%, #15192b 45%, #6375cf 80%, #4b59a1 100%);
  --apricot:#FFCF99; --ink:#15192b; --paper:#FBFAF7; --paper-ink:#1f2433; --paper-sub:#4d5368; --amber:#9A4606;
  --glass:rgba(255,255,255,0.08); --glass-b:rgba(255,255,255,0.12);
  --serif:'Source Serif 4', Georgia, serif; --ui:'DM Sans', -apple-system, system-ui, sans-serif;
  width:100%;padding:100px 0;background:var(--bg-light);overflow:hidden;color:var(--text-primary)
}
.xp *{margin:0;padding:0;box-sizing:border-box}
.xp-wrap{max-width:1140px;margin:0 auto;padding:0 5%}
.xp-head{text-align:center;max-width:720px;margin:0 auto 48px}
.xp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(99,117,207,0.08);border:1px solid rgba(99,117,207,0.15);color:#3b4a8f;padding:7px 14px;border-radius:999px;margin-bottom:22px}
.xp-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent-amber)}
.xp-h2{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.12;font-weight:400;letter-spacing:-0.02em;color:#111;margin-bottom:18px;text-wrap:balance}
/* 2026-09-11 — measure widened 600 -> 720px (matching .xp-head) so the three-clause sub sits on
   ONE line from 901px up, rather than wrapping and stranding "step ahead.". text-wrap:balance was
   tried and is WORSE here: it evens the two lines by breaking after "keep", which splits "keep
   moving forward" mid-phrase. Below 901px it still wraps, so the markup carries a
   <br class="sub-br"> that only shows there and breaks at the comma instead. */
.xp-sub{font-size:1.125rem;line-height:1.6;color:var(--text-secondary);max-width:720px;margin:0 auto;text-wrap:pretty}
.sub-br{display:none}
@media (max-width:900px){
  .sub-br{display:inline}
  /* Below ~430px the sub needs a third line, and left to itself it breaks after "and stay",
     mid-phrase. Keeping the last clause whole forces the break at the second comma instead, so
     every line is a complete clause. */
  .sub-clause{white-space:nowrap}
}

/* ---- desktop layout: steps | stage ---- */
.xp-layout{display:grid;grid-template-columns:0.95fr 1.15fr;gap:44px;align-items:stretch}
.xp-steps{display:flex;flex-direction:column;gap:12px;justify-content:center}
/* 2026-09-11 — active vs inactive. The old version dimmed every inactive step to opacity .72
   against an identical white card, so the only difference between the two states was a slight
   haze: weak as a signal AND slightly harder to read, which is the worst of both. Inactive steps
   now sit FLAT on the section background with no card, no border and no accent rail, and the
   active one is the only white, raised, amber-railed card in the column. Nothing is dimmed or
   blurred — inactive text stays fully opaque and above AA — the difference is carried by surface
   and elevation, which is how a list like this reads unambiguously while staying legible. */
.xp-step{position:relative;text-align:left;width:100%;background:transparent;border:1px solid transparent;border-radius:22px;padding:20px 24px 20px 26px;cursor:pointer;opacity:1;transition:background .25s,box-shadow .25s,border-color .25s,transform .25s,color .25s;overflow:hidden;font-family:var(--ui);color:var(--text-primary)}
.xp-step .tag{color:var(--text-secondary)}   /* #64748b = 4.6:1 on the cream band; #7C8496 was 3.63 and failed AA */
.xp-step h3{color:#4A5163}
.xp-step .bar{background:transparent;transition:background .25s}

/* Hover previews the scene, so it needs a real affordance — but a quieter one than the active
   card, or the two states compete for the same meaning. */
.xp-step:hover{background:rgba(255,255,255,0.62);border-color:rgba(15,23,42,0.06)}
.xp-step:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.xp-step.on{background:#fff;border-color:rgba(255,207,153,0.9);box-shadow:0 18px 44px -14px rgba(15,23,42,0.16);transform:scale(1.02);z-index:2}
.xp-step.on .tag{color:var(--amber)}
.xp-step.on h3{color:#111}
.xp-step.on .bar{background:rgba(255,207,153,0.35)}
.xp-step .tag{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.xp-step h3{font-family:var(--serif);font-size:1.35rem;font-weight:600;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance}
.xp-step p{font-size:1rem;line-height:1.55;color:var(--text-secondary);margin-top:8px;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease,margin .3s;text-wrap:pretty}
.xp-step.on p{max-height:120px;opacity:1}
.xp-step .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.xp-step .bar i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--apricot)}
.xp-step.on.auto .bar i{animation:xpfill 6s linear forwards}
@keyframes xpfill{to{height:100%}}

/* ---- the stage (desktop) ---- */
.xp-stage{position:relative;border-radius:28px;overflow:hidden;background:var(--brand-gradient);min-height:560px;box-shadow:0 30px 80px -30px rgba(0,0,0,0.35)}
.xp-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 100%,rgba(99,117,207,0.35),transparent 70%);pointer-events:none}
.xp .scene{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.xp .scene.in{opacity:1}
.xp .phone{position:absolute;left:50%;top:30px;width:min(70%,300px);height:120%;transform:translateX(-50%);border-radius:40px 40px 0 0;border:1.5px solid rgba(255,255,255,0.22);border-bottom:none;background:var(--brand-gradient);box-shadow:0 30px 80px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.12);overflow:hidden;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease;transform-origin:50% 30%;color:#fff;font-family:var(--ui)}
.xp .phone .inner{position:absolute;inset:0;padding:22px 14px 0;font-size:12px;line-height:1.4}
.xp .scene.in .phone.recede{transform:translateX(-50%) scale(.86) translateY(14px);filter:blur(2.5px) brightness(.55)}
.xp .pop{position:absolute;left:50%;top:50%;width:min(86%,372px);transform:translate(-50%,-46%) scale(.62);opacity:0;z-index:5;filter:drop-shadow(0 30px 50px rgba(0,0,0,0.6));transition:transform .75s cubic-bezier(.2,.8,.2,1) .12s,opacity .5s ease .12s;pointer-events:none;color:#fff;font-family:var(--ui)}
.xp .scene.in .pop{transform:translate(-50%,-46%) scale(1);opacity:1}
.xp .pop.hi{top:44%}

/* ---- answer card (scene 1 composite) ---- */
.xp .ans{border-radius:24px;overflow:hidden}
.xp .ans-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(rgba(0,0,0,0.18),rgba(0,0,0,0.18)),var(--brand-gradient);background-size:auto,393px 852px;background-position:0 0,0 var(--oy);border:1px solid rgba(255,255,255,0.14);border-bottom:none;border-radius:24px 24px 0 0}
.xp .ans-head .hd{width:46px;height:46px;border-radius:50%;border:2px solid var(--apricot);overflow:hidden;flex-shrink:0;background:#111}
.xp .ans-head .hd img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transform-origin:center 25%;display:block}
.xp .ans-head .e{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
.xp .ans-head .n{font-family:var(--serif);font-size:19px;font-weight:600;color:#fff;line-height:1.05;margin-top:2px}
.xp .ans-head .n .cr{font-family:var(--ui);font-size:10px;color:var(--apricot);font-weight:800;vertical-align:super;margin-left:2px}
.xp .ans-head .c{font-size:12px;color:rgba(255,255,255,0.8);margin-top:2px}
.xp .ans .reply{border-radius:0 0 24px 24px}

/* ---- sms card (scene 3) ---- */
.xp .pop .sms{background:#f4f4f6;color:#1c1c1e;border-radius:24px;padding:18px 20px 14px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.xp .pop .sms .from{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#585e67;margin-bottom:8px}
.xp .pop .sms .from .fc{width:26px;height:26px;border-radius:50%;overflow:hidden;border:1.5px solid #e5e7eb;flex-shrink:0}
.xp .pop .sms .from .fc img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(1.7);transform-origin:50% 12%;display:block}
.xp .pop .sms .msg{font-size:17px;line-height:1.45;background:#e9e9eb;border-radius:18px 18px 18px 6px;padding:12px 14px}
.xp .pop .sms .when{font-size:12px;color:#5c626b;margin-top:10px;text-align:right}

/* (co-parent band rules removed 2026-09-04: the band itself was dropped from index.html) */

/* ---- mobile: stacked tour-style cards ---- */
.xp-mobile{display:none}
@media (max-width:900px){
  .xp{padding:72px 0}
  .xp-head{margin-bottom:28px}
  .xp-layout{display:none}
  .xp-mobile{display:flex;flex-direction:column;gap:22px}
  .xp-card{border-radius:24px;overflow:hidden;box-shadow:0 20px 50px -22px rgba(0,0,0,0.35);background:#fff;border:1px solid rgba(0,0,0,0.05)}
  .xp-card .copy{padding:22px 22px 20px;background:var(--paper);position:relative}
  .xp-card .copy::after{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,207,153,0.3),transparent 65%)}
  .xp-card .copy>*{position:relative}
  .xp-card .copy .tag{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
  .xp-card .copy h3{font-family:var(--serif);font-size:clamp(24px,6.6vw,29px);font-weight:600;line-height:1.14;letter-spacing:-0.015em;color:#111;text-wrap:balance;margin-bottom:8px}
  .xp-card .copy p{font-size:17px;line-height:1.45;color:var(--paper-sub);text-wrap:pretty}
  .xp-card .mstage{position:relative;aspect-ratio:4/4.7;background:var(--brand-gradient);overflow:hidden}
  .xp-card .mstage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 100%,rgba(99,117,207,0.35),transparent 70%)}
  .xp-card .scene{opacity:1}
  .xp-card .phone{width:min(74%,300px);top:24px}
  .xp-card .pop{width:min(88%,372px)}
}
@media (prefers-reduced-motion:reduce){ .xp .phone,.xp .pop,.xp .scene{transition:none!important} .xp-step .bar i{animation:none!important} }

/* ================= product components (from the tour, scoped) ================= */
/* ---------- reusable product pieces (production-faithful) ---------- */
.xp .s-head{display:flex;justify-content:space-between;align-items:flex-start;padding:0 6px}
.xp .s-head h3{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-0.01em}
.xp .pf{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.22);display:flex;align-items:center;justify-content:center}
.xp .pf svg{width:15px;height:15px}
.xp .s-sub{padding:0 6px;margin:4px 0 12px;font-size:11.5px;font-weight:600;color:var(--apricot)}
.xp .hero{margin:0 2px;min-height:136px;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04));border:1px solid rgba(255,194,161,0.28);box-shadow:0 10px 30px rgba(0,0,0,0.3);display:flex;align-items:stretch;overflow:hidden;position:relative}
.xp .orbz{width:108px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}
.xp .ring{position:absolute;border-radius:50%;border:1px solid rgba(255,207,153,.25);background:rgba(255,207,153,.05);animation:xppulse 3s ease-in-out infinite}
.xp .r1{width:72px;height:72px}.xp .r2{width:88px;height:88px;animation-delay:.3s}.xp .r3{width:104px;height:104px;animation-delay:.6s}
@keyframes xppulse{0%,100%{transform:scale(.95);opacity:.5}50%{transform:scale(1.02);opacity:1}}
.xp .core{position:absolute;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,120,0.95) 0%,rgba(255,165,80,0.5) 60%,transparent 100%);filter:blur(10px);animation:xpbreathe 3s ease-in-out infinite alternate}
@keyframes xpbreathe{0%{opacity:.7}100%{opacity:1;transform:scale(1.1)}}
.xp .orbt{position:relative;z-index:2;font-weight:700;font-size:12px;line-height:1.15;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.xp .htz{flex:1;min-width:0;padding:14px 10px 13px 6px;display:flex;flex-direction:column;justify-content:center}
.xp .badge{display:inline-flex;align-items:center;gap:4px;font-size:8.5px;font-weight:800;letter-spacing:.11em;color:var(--apricot);text-transform:uppercase;margin-bottom:6px}
.xp .badge svg{width:10px;height:10px}
.xp .hline{font-size:11px;font-weight:500;color:rgba(255,255,255,0.82);line-height:1.4}
.xp .fat{margin-top:10px;width:100%;min-height:40px;border-radius:12px;border:none;background:var(--apricot);color:var(--ink);font-family:var(--ui);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(255,175,100,0.26)}
.xp .sec{margin-top:14px}
.xp .sec-h{display:flex;justify-content:space-between;align-items:center;padding:0 4px;margin-bottom:8px;font-size:12.5px;font-weight:700}
.xp .sec-h span{font-size:10px;color:var(--apricot);font-weight:600}
.xp .rail{display:flex;gap:9px;padding:0 2px;overflow:hidden}
.xp .mcard{flex:0 0 118px;min-height:118px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-b);padding:11px 11px 10px;display:flex;flex-direction:column;gap:4px}
.xp .mcard .ic{width:30px;height:30px;border-radius:10px;background:rgba(255,207,153,0.14);border:1px solid rgba(255,207,153,0.35);display:flex;align-items:center;justify-content:center;margin-bottom:auto;color:var(--apricot)}
.xp .mcard .ic svg{width:15px;height:15px}
.xp .mcard .eb{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-top:8px}
.xp .mcard .tt{font-size:12px;font-weight:700;line-height:1.2}
.xp .mcard .dd{font-size:9.5px;color:rgba(255,255,255,0.6);line-height:1.3}
.xp .tabs{position:absolute;left:0;right:0;bottom:0;height:62px;background:rgba(8,10,20,0.85);border-top:1px solid rgba(255,255,255,0.08);display:flex;justify-content:space-around;align-items:center;padding:0 10px;backdrop-filter:blur(10px)}
.xp .tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;font-weight:600;opacity:.5}
.xp .tab.on{opacity:1;color:var(--apricot)}
.xp .tab svg{width:20px;height:20px}
.xp .facepile{display:flex}
.xp .facepile .fc{width:22px;height:22px;border-radius:50%;overflow:hidden;border:2px solid #1d2338;margin-right:-7px;background:#1e3053}
.xp .facepile .fc img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(1.7);transform-origin:50% 12%;display:block}
.xp .facepile .more{width:22px;height:22px;border-radius:50%;background:#2a3154;border:2px solid #1d2338;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;color:var(--apricot)}

/* ask space / conversation */
.xp .smh{text-align:center;padding-top:14px}
.xp .smh .e{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:5px}
.xp .smh .t{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-0.015em}
.xp .smh .s{font-size:11.5px;color:rgba(255,255,255,0.65);margin-top:3px}
.xp .bigorb{position:relative;width:170px;height:170px;margin:26px auto 0;display:flex;align-items:center;justify-content:center}
.xp .bigorb .ring{border-color:rgba(255,207,153,0.16);background:rgba(255,207,153,0.035);animation:none}
.xp .bigorb .b1{width:140px;height:140px}.xp .bigorb .b2{width:156px;height:156px}.xp .bigorb .b3{width:170px;height:170px}
.xp .bigorb .core{width:120px;height:120px;filter:blur(14px)}
.xp .convo-top{text-align:center;padding-top:10px}
.xp .pme{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--apricot)}
.xp .pmn{margin-top:4px;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1;letter-spacing:-0.02em;white-space:nowrap}
.xp .pmn .cr{font-family:var(--ui);font-size:9px;color:var(--apricot);font-weight:800;vertical-align:super;margin-left:2px}
.xp .pmc{margin-top:5px;font-size:11.5px;font-weight:500;color:rgba(255,255,255,0.88)}
.xp .pmc i{font-family:var(--serif)}
.xp .pmt{margin-top:3px;font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,207,153,0.85)}
.xp .head{width:96px;height:96px;border-radius:50%;border:2.5px solid var(--apricot);overflow:hidden;background:#111;margin:10px auto 0;box-shadow:0 14px 34px rgba(0,0,0,0.45)}
.xp .head img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transform-origin:center 25%;display:block}
.xp .thread{padding:12px 4px 0;display:flex;flex-direction:column;gap:9px}
.xp .bub{align-self:flex-end;background:rgba(255,255,255,0.17);border:1px solid rgba(255,255,255,0.12);border-radius:16px 16px 5px 16px;padding:10px 12px;font-size:11px;line-height:1.4;max-width:230px}
.xp .reply{background:#fff7ed;color:#20262f;border-radius:18px;padding:14px 14px 12px;box-shadow:0 14px 34px rgba(0,0,0,0.28)}
.xp .reply p{font-family:var(--serif);font-size:11.5px;line-height:1.55;margin-bottom:8px}
.xp .reply .script{position:relative;margin:12px 0 2px;padding:14px 12px 10px;background:linear-gradient(180deg,#fffdf8,#fff2df);border:1px solid #f1d9b4;border-radius:13px}
.xp .reply .tag{position:absolute;top:-9px;left:12px;background:var(--apricot);color:#5a3d16;font-size:7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:20px}
.xp .reply .line{font-family:var(--serif);font-style:italic;font-size:11.5px;line-height:1.55;color:#4a3a2b}
.xp .priv{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.7);font-size:11px;font-weight:500;margin-top:6px}
.xp .priv svg{width:11px;height:11px}
.xp .controls{position:absolute;left:0;right:0;bottom:0;height:88px;padding:8px 22px 18px;background:linear-gradient(180deg,rgba(5,6,11,0),rgba(5,6,11,0.85) 40%,rgba(5,6,11,0.96));display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:end}
.xp .ctl{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9.5px;font-weight:800}
.xp .ctl .ci{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.09);display:flex;align-items:center;justify-content:center}
.xp .ctl .ci svg{width:17px;height:17px}

/* family */
.xp .kid{border-radius:18px;background:var(--glass);border:1px solid var(--glass-b);padding:14px;display:flex;gap:12px;align-items:center;margin:0 2px 10px}
.xp .kid .av{width:46px;height:46px;border-radius:50%;background:rgba(255,207,153,0.14);border:2px solid rgba(255,207,153,0.45);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px;font-weight:700;color:var(--apricot);flex-shrink:0}
.xp .kid .kn{font-family:var(--serif);font-size:18px;font-weight:600}
.xp .kid .kw{font-size:10.5px;color:rgba(255,255,255,0.6);margin-top:2px}
.xp .note{border-radius:14px;background:var(--glass);border:1px solid var(--glass-b);padding:10px 12px;margin:0 2px 8px}
.xp .note .nc{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--apricot)}
.xp .note .nb{font-size:11px;line-height:1.35;margin-top:3px;color:rgba(255,255,255,0.9)}
.xp .lrow{border-radius:14px;background:var(--glass);border:1px solid var(--glass-b);padding:11px 12px;margin:0 2px 8px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600}
.xp .lrow small{display:block;font-size:9.5px;font-weight:500;color:rgba(255,255,255,0.55);margin-top:1px}
.xp .lrow svg{width:16px;height:16px;flex-shrink:0;color:var(--apricot)}

/* summary card (production Session Wrap-Up) */
.xp .wrap{background:#FBFAF7;color:#1f2433;border-radius:16px;border-top:5px solid #d48a6e;padding:14px 14px 12px;box-shadow:0 14px 34px rgba(0,0,0,0.3);position:relative;overflow:hidden}
.xp .wrap::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.28 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.xp .wrap > *{position:relative}
.xp .wrap .wt{font-family:var(--serif);font-size:17px;font-weight:600;margin-bottom:8px}
.xp .wrap .ws{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#b5573a;border-bottom:1px solid #eadfd6;padding-bottom:4px;margin:8px 0 6px}
.xp .wrap li{list-style:none;font-family:var(--serif);font-size:11.5px;line-height:1.45;padding-left:12px;position:relative;margin-bottom:4px}
.xp .wrap li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:#d48a6e}

/* expert card (production) */
.xp .ecard{border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--glass-b);flex:0 0 122px;height:186px;box-shadow:0 4px 16px rgba(0,0,0,0.3);position:relative}
.xp .ecard .vis{height:104px;position:relative;overflow:hidden;flex-shrink:0}
.xp .ecard .vis img{position:absolute;top:-6px;left:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.xp .ecard .vis::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#15192b 5%,rgba(21,25,43,0.98) 12%,rgba(21,25,43,0.5) 20%,transparent 45%)}
.xp .ecard .nm{position:absolute;z-index:2;bottom:3px;left:9px;font-family:var(--serif);color:var(--apricot);font-weight:600;font-size:11.5px;white-space:nowrap;text-shadow:0 2px 8px #000}
.xp .ecard .nm .cr{font-family:var(--ui);font-size:.6em;color:#fff;font-weight:700;vertical-align:top;position:relative;top:-1px}
.xp .ecard .ct{flex:1;background:linear-gradient(to bottom,#15192b 0%,rgba(30,48,83,0.9) 100%);padding:4px 9px 8px}
.xp .ecard .tp{font-weight:700;font-size:11.5px;line-height:1.22;min-height:28px;margin-bottom:3px}
.xp .ecard .tg{display:flex;flex-wrap:wrap;gap:3px;height:34px;overflow:hidden}
.xp .ecard .tg span{font-size:7px;color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.08);border-radius:5px;padding:2px 6px;height:14px;display:flex;align-items:center;font-weight:600}

/* trending question card */
.xp .qcard{flex:0 0 200px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-b);padding:12px;display:flex;flex-direction:column;gap:7px}
.xp .qcard .pill{align-self:flex-start;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--apricot);background:rgba(255,207,153,0.13);border:1px solid rgba(255,207,153,0.45);border-radius:20px;padding:3px 8px}
.xp .qcard h4{font-family:var(--serif);font-size:13.5px;font-weight:600;line-height:1.28}
.xp .qcard .by{display:flex;align-items:center;gap:6px;font-size:9.5px;color:rgba(255,255,255,0.7);margin-top:auto}
.xp .qcard .by .fc{width:18px;height:18px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,207,153,0.35)}
.xp .qcard .by .fc img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(1.7);transform-origin:50% 12%;display:block}

/* ---------- POP-OUT versions (high fidelity, bigger) ---------- */
/* SOLID BACKDROP RULE: a popped element is never see-through. Under its glass we paint the
   brand gradient, sized to a full phone screen (393x852) and shifted by --oy to the spot the
   element occupies on the real screen, so the backdrop matches what sits behind it in the app. */
.xp .pop{--oy:-120px}
.xp .pop .hero{background:linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04)),var(--brand-gradient);background-size:auto,393px 852px;background-position:0 0,0 var(--oy)}
.xp .pop .qcard,.xp .pop .kid,.xp .pop .note,.xp .pop .lrow,.xp .pop .mcard,.xp .pop .bmode.text,.xp .pop .ecard{background:linear-gradient(var(--glass),var(--glass)),var(--brand-gradient);background-size:auto,393px 852px;background-position:0 0,0 var(--oy);border-color:rgba(255,255,255,0.16)}
.xp .pop .glassbox{background:linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)),var(--brand-gradient);background-size:auto,393px 852px;background-position:0 0,0 var(--oy)}
.xp .pop .choose{--oy:-560px}
.xp .pop .hero{min-height:178px;border-radius:24px;margin:0}
.xp .pop .orbz{width:132px}.xp .pop .r1{width:84px;height:84px}.xp .pop .r2{width:100px;height:100px}.xp .pop .r3{width:116px;height:116px}.xp .pop .core{width:80px;height:80px;filter:blur(12px)}
.xp .pop .orbt{font-size:15.5px}.xp .pop .htz{padding:20px 14px 18px 8px}.xp .pop .badge{font-size:10.5px;margin-bottom:9px}.xp .pop .badge svg{width:13px;height:13px}
.xp .pop .hline{font-size:14.5px}.xp .pop .fat{margin-top:14px;min-height:52px;border-radius:16px;font-size:15.5px;white-space:nowrap}
.xp .pop .reply{border-radius:24px;padding:20px 20px 18px}.xp .pop .reply p{font-size:16px;line-height:1.58;margin-bottom:13px}
.xp .pop .reply .script{margin:18px 0 4px;padding:20px 18px 15px;border-radius:18px}.xp .pop .reply .tag{font-size:9.5px;top:-11px;left:16px;padding:4px 10px}.xp .pop .reply .line{font-size:16px}
.xp .pop .wrap{border-radius:20px;border-top-width:6px;padding:20px 20px 16px}.xp .pop .wrap .wt{font-size:23px;margin-bottom:12px}.xp .pop .wrap .ws{font-size:10.5px;margin:12px 0 8px}.xp .pop .wrap li{font-size:16px;padding-left:16px;margin-bottom:6px}.xp .pop .wrap li::before{top:9px;width:6px;height:6px}
.xp .pop .ecard{flex:none;width:200px;height:300px;border-radius:22px;margin:0 auto}.xp .pop .ecard .vis{height:168px}.xp .pop .ecard .nm{font-size:18px;left:14px;bottom:5px}.xp .pop .ecard .tp{font-size:18px;min-height:46px;margin:2px 0 6px}.xp .pop .ecard .ct{padding:6px 14px 12px}
.xp .pop .ecard .tg{height:56px;gap:5px}.xp .pop .ecard .tg span{font-size:11px;height:22px;padding:3px 9px;border-radius:7px}
.xp .pop .qcard{flex:none;width:100%;border-radius:22px;padding:20px;gap:12px}.xp .pop .qcard .pill{font-size:11px;padding:5px 12px}.xp .pop .qcard h4{font-size:22px}.xp .pop .qcard .by{font-size:14px;gap:9px}.xp .pop .qcard .by .fc{width:28px;height:28px}
.xp .pop .kid{margin:0 0 12px;border-radius:22px;padding:18px}.xp .pop .kid .av{width:62px;height:62px;font-size:27px}.xp .pop .kid .kn{font-size:24px}.xp .pop .kid .kw{font-size:14px;margin-top:4px}
.xp .pop .note{margin:0 0 10px;border-radius:18px;padding:14px 16px}.xp .pop .note .nc{font-size:10.5px}.xp .pop .note .nb{font-size:15.5px;margin-top:5px}
.xp .pop .lrow{margin:0 0 10px;border-radius:20px;padding:16px 18px;font-size:17px}.xp .pop .lrow small{font-size:13px;margin-top:3px}.xp .pop .lrow svg{width:22px;height:22px}
.xp .pop .glassbox{border:1px solid rgba(255,255,255,0.14);border-radius:24px;padding:22px 20px;text-align:center}
.xp .pop .pme{font-size:12px}.xp .pop .pmn{font-size:34px;margin-top:8px}.xp .pop .pmn .cr{font-size:13px}.xp .pop .pmc{font-size:17px;margin-top:9px}.xp .pop .pmt{font-size:12px;margin-top:5px}
.xp .pop .head{width:150px;height:150px;border-width:3px;margin:14px auto 0}
.xp .pop .priv{font-size:17px;gap:8px;margin-top:10px}.xp .pop .priv svg{width:16px;height:16px}


/* press state used by the hero pop */
@keyframes xppress{0%,100%{transform:scale(1);background:var(--apricot);color:var(--ink)}45%,60%{transform:scale(.95);background:#D98F3F;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.35)}}
.xp .scene.in .pressable{animation:xppress 1.1s cubic-bezier(.3,.7,.3,1) 1.5s 1 both}
