:root{
    --navy:#2f3150; --ink:#2c3154; --muted:#8a8da6; --faint:#b9bcce; --line:#eef0f6;
    --mint:#69dcb0; --mintdk:#17805e; --paper:#ffffff; --wash:#fbfcfe;
    --sky:#e0f7f8; --skyink:#22757b; --gold:#e0a83a; --goldsoft:#f6eccf; --red:#c9364b;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--paper);color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}

  /* THE LAW: nothing in a box ever hides its letters */
  .nm,.qt,.htag,.chip,.ot,.slab,.stat .l{overflow-wrap:anywhere}
  .htag,.chip{white-space:normal;text-align:start}

  /* mock note + simulator */
  .note{max-width:640px;margin:14px auto 0;padding:0 22px;color:var(--muted);font-size:13px}
  .note b{color:var(--navy)}
  .sim{max-width:640px;margin:10px auto 0;padding:0 22px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--faint)}
  .sim button{border:1px solid var(--line);background:var(--wash);color:var(--muted);border-radius:50px;padding:4px 11px;font-family:inherit;font-weight:700;font-size:12px;cursor:pointer}
  .sim button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

  /* HEADER */
  /* Aug 9 P0-2: claim header brought into the one navy brand system (matches BW_UI2.topbar). */
  .bar{background:var(--navy);position:sticky;top:0;z-index:50;display:none}   /* W-230E-10: legacy claim bar retired everywhere; the ONE governed header is bw_header.js (element kept in DOM so its JS references never null) */
  .bar .in{max-width:none;margin:0;display:flex;align-items:center;gap:12px;padding:10px 18px}
  .logo{font-weight:900;letter-spacing:-.02em;font-size:19px;color:#fff}
  .rpill{color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.14em;border:1px solid rgba(255,255,255,.33);border-radius:50px;padding:2px 9px;flex:none}
  .barnav{display:flex;gap:14px;align-items:center;margin-inline-start:auto;margin-inline-end:4px}
  .barnav a{color:var(--ice,#d7ffff);text-decoration:none;font-size:12.5px;font-weight:700;opacity:.92}
  .barnav a:hover{opacity:1;text-decoration:underline}
  /* Ask/Tour/Share moved OUT of the bar into the page body (secondary actions, not competing nav). */
  .topacts{max-width:640px;margin:12px auto 0;padding:0 22px;display:flex;gap:8px;justify-content:flex-end}
  .askbtn{background:var(--wash);color:var(--navy);border:1px solid var(--line);border-radius:50px;padding:5px 12px;font-family:inherit;font-weight:800;font-size:12.5px;cursor:pointer}
  .tool .imgspot{margin-top:10px;overflow:visible}
  .imgspot svg{display:block;max-width:100%;height:auto}
  @media (max-width:520px){
    .bar .in{padding:11px 14px;gap:8px;flex-wrap:nowrap}
    .logo small{display:none}
    .logo{flex:none}
    .askbtn{padding:5px 9px;font-size:12px;flex:none}
    /* The account button shrinks to the space it is given so the top bar never widens the page.
       (Fable Aug 2, finding 5: the real horizontal overflow at 390 was this button hitting its
       fixed 158px cap with the long "Claim your name" label, not the position ticker.) */
    .who{min-width:0;flex:0 1 auto}
    .whoBtn{max-width:100%}
    .whoBtn .bwlogo,.whoBtn .car{flex:none}
    .whoBtn #whoLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  }
  @media (max-width:430px){
    .barnav{display:none}                 /* dashboard nav collapses on phones (like the standard bar) */
    .bar .in{padding:10px 12px;gap:8px}
    .rpill{display:none}
    .whoBtn{max-width:none}
    .whoBtn #whoLabel,.whoBtn .car{display:none}   /* @ icon only, never a truncated "Cla..." label */
  }
  .trainsec{border:1px solid var(--line);border-radius:10px;margin:6px 0;overflow:hidden;background:#fff}
  .trainsec>summary{cursor:pointer;list-style:none;padding:10px 13px;font-weight:800;font-size:13.5px;color:var(--navy)}
  .trainsec>summary::-webkit-details-marker{display:none}
  .trainsec>summary::after{content:'\25B8';float:inline-end;color:var(--faint);font-weight:700}
  .trainsec[open]>summary::after{content:'\25BE'}
  .trainsec>div{padding:0 13px 11px;font-size:13px;color:var(--muted);line-height:1.55}
  .who{margin-inline-start:14px;position:relative;min-width:0}
  .whoBtn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.22);
    border-radius:50px;padding:6px 12px;font-family:inherit;font-weight:700;font-size:12.5px;cursor:pointer;max-width:180px;overflow:hidden}
  .whoBtn #whoLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .whoBtn .car{font-size:10px;color:rgba(255,255,255,.7)}
  .whoMenu{position:absolute;inset-inline-end:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:14px;
    box-shadow:0 16px 44px rgba(28,30,51,.18);width:280px;padding:8px;display:none;z-index:30}
  .whoMenu.open{display:block}
  .whoMenu .lab{font-size:10.5px;font-weight:800;letter-spacing:.07em;color:var(--faint);padding:8px 10px 3px}
  .acc{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer}
  .acc:hover{background:var(--wash)}
  /* B288: the moved jobs (Ask, Share, hashtag search, business, partner tools, goodies) live in the menu now */
  .whoMenu .mitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:700;color:var(--navy);font-size:13.5px}
  .whoMenu .mitem:hover{background:var(--wash)}
  .whoMenu .mitem .mi{width:20px;text-align:center;color:var(--muted);flex:none}
  /* B288: the one guide card is screen one (personal); hidden on the commercial world */
  body[data-world="comm"] #bwGuideCard{display:none}
  .av{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px}
  .av.p{background:var(--navy)} .av.b{background:#54bcc3}
  .acc .nmm{font-weight:800;font-size:13.5px}
  .acc .ty{font-size:11px;color:var(--muted)}

  /* master toggle */
  .master{max-width:640px;margin:14px auto 0;padding:0 22px;display:flex;justify-content:center}
  .seg{display:inline-flex;align-items:center;background:#eceeffe0;border:1px solid var(--line);border-radius:50px;padding:4px;gap:2px}
  .seg button{border:0;background:transparent;font-family:inherit;font-weight:800;font-size:14px;color:var(--muted);padding:9px 18px;border-radius:50px;cursor:pointer}
  .seg button.on{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(47,49,80,.12)}
  body[data-world="comm"] #mComm.on{background:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(47,49,80,.28)}
  .nextstep{max-width:640px;margin:12px auto 2px;padding:0 22px;cursor:pointer}
  .nextstep .nsCard{display:flex;align-items:center;gap:12px;background:#eafbf3;border:1px solid #b5ecd6;border-radius:12px;padding:10px 14px}
  .nextstep .nsLbl{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#17805e;flex:none}
  .nextstep .nsTxt{flex:1;font-size:13.5px;color:var(--navy);font-weight:700;line-height:1.3}
  .nextstep .nsSub{font-weight:600;color:var(--muted);font-size:12px}
  .nextstep .nsArr{color:#17805e;font-weight:800;font-size:16px;flex:none}
  /* B309 item I: THE LADDER (five rungs, first three incomplete window) */
  .nextstep .nsLadder{flex-direction:column;align-items:stretch;gap:6px}
  .nextstep .nsRung{display:flex;align-items:center;gap:10px;background:transparent;border:0;font-family:inherit;text-align:start;cursor:pointer;padding:4px 0;width:100%;color:var(--navy)}
  .nextstep .nsRung .nsTxt{flex:1;font-size:13.5px;font-weight:700}
  .nextstep .nsRung.done{cursor:default}
  .nextstep .nsRung.done .nsTxt{color:var(--muted)}
  .nextstep .nsDone{color:#17805e;font-weight:900;flex:none}
  .bdp3row{display:flex;align-items:center;gap:8px;margin:6px 0}
  .bdp3pri{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:var(--muted);flex:none;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
  .bdp3in{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit}
  .bdp3st{flex:none;font-size:11px;font-weight:800;min-width:74px;text-align:end}
  .bdp3st.ok{color:#17805e}
  .bdp3st.no{color:#c9364b}
  .whyband{max-width:640px;margin:12px auto 2px;padding:0 22px;cursor:pointer;overflow:hidden}
  .whyband .wbInner{display:flex;align-items:center;gap:10px;border-radius:12px;padding:9px 14px;overflow:hidden;min-width:0}
  .wbLbl{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;flex:none}
  .wbMask{flex:1;min-width:0;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .wbTrack{display:inline-flex;white-space:nowrap;animation:wbmarq 24s linear infinite;will-change:transform}
  .wbSeq{display:inline-flex;align-items:center;gap:12px;padding-inline-end:24px;flex:none}
  .wbChip{font-size:13px;font-weight:700}
  .wbDot{opacity:.45;font-weight:800}
  @keyframes wbmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion: reduce){ .wbTrack{animation:none} }
  /* R-230C-K4: /claim phone fix F230-8, one header and one marquee at phone widths */
  @media (max-width:520px){
    .bar{display:none}
    .wbTrack>.wbSeq:nth-of-type(2){display:none}
    .wbTrack{animation:none}
  }
  body[data-world="pers"] .whyband .wbInner{background:#eafbf3;border:1px solid #b5ecd6}
  body[data-world="pers"] .wbLbl{color:#17805e}
  body[data-world="pers"] .wbChip{color:var(--navy)}
  body[data-world="pers"] .wbDot{color:#17805e}
  body[data-world="comm"] .whyband .wbInner{background:var(--navy);border:1px solid #3a3d63}
  body[data-world="comm"] .wbLbl{color:var(--gold)}
  body[data-world="comm"] .wbChip{color:#fff}
  body[data-world="comm"] .wbDot{color:var(--gold)}
  .tabintro{display:none;background:#f4f7ff;border:1px solid #dfe4fb;border-radius:12px;padding-block:11px 11px;padding-inline:13px 34px;margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--navy);position:relative}
  .tabintro.show{display:block}
  .tabintro b{font-weight:800}
  .tabintro .til{display:inline-flex;align-items:flex-start;gap:7px}
  .tabintro .tix{position:absolute;top:7px;inset-inline-end:10px;cursor:pointer;color:var(--muted);font-weight:800;font-size:17px;line-height:1;padding:2px}
  body[data-world="comm"] .tabintro{background:#eef0ff;border-color:#d3d7f5}
  .badge{display:flex;align-items:center;gap:10px;margin:12px 0 0;flex-wrap:wrap}
  .bChip{display:inline-flex;align-items:center;gap:6px;border-radius:50px;padding:5px 13px;font-size:12.5px;font-weight:800}
  .bChip .bIc{font-size:14px;line-height:1}
  .bChip.b0{background:#eef0f6;color:#8a8da6}
  .bChip.b1{background:#eafbf3;color:#17805e;border:1px solid #b5ecd6}
  .bChip.b2{background:#fff4d6;color:#9a6a00;border:1px solid #f0d488}
  .bChip.b3{background:linear-gradient(135deg,#ffe9a8,#ffd34d);color:#6b4a00;border:1px solid #e6b800}
  .bNext{font-size:12px;color:var(--muted);font-weight:600}
  .geohd{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
  .geo{display:flex;flex-wrap:wrap;gap:6px}
  .geopill{display:inline-flex;align-items:center;gap:5px;background:#f4f7ff;border:1px solid #dfe4fb;border-radius:50px;padding:5px 11px;font-size:12.5px;font-weight:700;color:var(--navy)}
  .seg .swap{color:var(--faint);font-size:15px}

  /* commercial helper strip (only when this device has no personal name) */
  .helper{max-width:640px;margin:12px auto 0;padding:0 22px;display:none}
  .helper .inh{display:flex;align-items:center;gap:10px;background:#e6faf2;border:1px solid #b5ecd6;border-radius:12px;padding:10px 14px;font-size:13px;color:#17805e}
  .helper b{font-weight:800}
  .helper button{margin-inline-start:auto;flex:none;background:var(--mint);color:#0c3b2c;border:0;border-radius:50px;padding:8px 13px;font-family:inherit;font-weight:800;font-size:12.5px;cursor:pointer}
  .helper.show{display:block}

  .wrap{max-width:640px;margin:0 auto;padding:12px 22px 40px}
  .orient{color:var(--muted);font-size:14.5px;margin:8px 0 4px}
  .orient b{color:var(--navy)}

  /* commercial identity header */
  .cid{background:linear-gradient(140deg,#22757b,#1b5e63);color:#fff;border-radius:16px;padding:16px 20px;margin:8px 0 0}
  .cid .k{font-size:11px;font-weight:800;letter-spacing:.07em;color:#bfe9ec;margin-bottom:2px}
  .cid .n{font-size:22px;font-weight:800;overflow-wrap:anywhere}

  /* tabs */
  .tabs{display:flex;gap:6px;margin:12px 0 0}
  .tab{flex:1;text-align:center;padding:11px;border-radius:12px 12px 0 0;font-weight:800;font-size:14.5px;cursor:pointer;
    color:var(--muted);background:var(--wash);border:1px solid var(--line);border-bottom:none}
  .tab.on{color:#fff;font-size:15px}
  .tab.on.idn{background:var(--navy);border-color:var(--navy)}
  .tab.on.idb{background:var(--skyink);border-color:var(--skyink)}
  .tab.on.grn{background:var(--mintdk);border-color:var(--mintdk)}
  .pane{background:#fff;border:1px solid var(--line);border-top:none;border-radius:0 0 14px 14px;padding:18px}

  /* STAGE (one loud thing) + WINGS (closed rows with an interest teaser) */
  .stage{margin:2px 0 6px}
  .wings{margin-top:22px}
  .wings .h{font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--faint);margin:0 0 4px}
  .q{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--muted)}
  .q:hover .qt b{color:var(--navy)}
  .q .qi{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:14px;background:var(--wash);color:var(--muted);border:1px solid var(--line)}
  .q .qi.gold{background:#fbf4e2;border-color:var(--goldsoft);color:#a97f22}
  /* B292 W4-6: a flex text column that cannot shrink is what forces one word per line (the K3 bug) on any
     screen. Letting it shrink and wrap normally fixes the pattern everywhere it appears, not per instance. */
  .qt{font-size:14px;min-width:0;overflow-wrap:anywhere;word-break:normal}
  .qt b{color:#4a4d68;font-weight:700}
  .qt span{color:var(--faint);font-size:12.5px}
  .qt .tease{color:var(--mintdk);font-weight:700}
  /* B319 I.3: the active-offer line under a club name in the memberships glance (mint, one line, truncated). */
  .qt .qoffer{display:block;color:var(--mintdk,#17805e);font-weight:700;font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .qarr{margin-inline-start:auto;color:var(--faint);font-weight:700;flex:none}

  /* doors */
  .door{background:var(--navy);color:#fff;border-radius:20px;padding:26px 24px;box-shadow:0 18px 44px rgba(47,49,80,.22)}
  .door .who2{font-size:12.5px;color:#b6bbe6;letter-spacing:.02em;margin-bottom:9px;opacity:.9}
  .door .nm{font-size:31px;font-weight:800;letter-spacing:-.02em;line-height:1.08}
  .door .say{color:#dfe2f5;font-size:14.5px;margin:11px 0 18px;max-width:46ch}
  .door .under{color:#aeb4e0;font-size:12.5px;margin-top:13px;line-height:1.6}
  .door.biz{background:linear-gradient(140deg,#22757b,#1b5e63)}
  .door.biz .who2{color:#bfe9ec} .door.biz .say{color:#d6f0f2} .door.biz .under{color:#a8dde1}
  .door.grn{background:linear-gradient(150deg,#1f9576,#17805e)}
  .door.grn .who2{color:#bff0e0} .door.grn .say{color:#d6f5ea} .door.grn .under{color:#a7ddcb}
  .door.empty{background:#fff;border:1px solid var(--line);border-top:5px solid var(--teal);box-shadow:0 8px 24px rgba(28,30,51,.06)}
  .door.empty .who2{color:var(--skyink)} .door.empty .nm{color:var(--navy)} .door.empty .say{color:var(--muted)} .door.empty .under{color:var(--faint)}
  .cta{display:inline-flex;align-items:center;gap:9px;background:var(--mint);color:#0c3b2c;border:0;border-radius:50px;
    padding:14px 22px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer}
  .cta:active{transform:scale(.98)}

  /* quiet white cards (staged tools) */
  .tool{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 17px}
  .tool h4{margin:0 0 4px;font-size:16px;color:var(--navy)}
  .tool .sub{color:var(--muted);font-size:13px;margin:0 0 12px}
  .tool.gold{border-color:var(--goldsoft);border-inline-start:5px solid var(--gold)}
  .backrow{margin-top:10px;color:var(--muted);font-size:13px;cursor:pointer;font-weight:600}
  .backrow:hover{color:var(--navy)}

  /* v4.1: the STAGED card must boom. World-tinted, heavy border, one focus; its inner items are real boxes, not hairlines */
  .stage .tool{border-width:2px;box-shadow:0 16px 40px rgba(28,30,51,.13);padding:20px 19px}
  .stage .tool h4{font-size:19px}
  #stage-pname .tool{border-color:var(--navy);background:#f7f8fe}
  #stage-cbiz .tool{border-color:var(--skyink);background:#f2fafb}
  #stage-cbiz .tool h4{color:var(--skyink)}
  #stage-ppart .tool,#stage-cbp .tool{border-color:var(--mintdk);background:#f2fbf7}
  #stage-ppart .tool h4,#stage-cbp .tool h4{color:var(--mintdk)}
  .tool .q{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin:9px 0}
  .tool .stat{background:#fff}
  .tool .goodie{background:#fff}

  /* v4.1: personal-plan calculator */
  .pw{border:1.5px solid var(--line);background:#fff;color:var(--muted);border-radius:50px;padding:7px 12px;font-family:inherit;font-weight:800;font-size:12px;cursor:pointer}
  .pw.on{background:#e6faf2;border-color:var(--mint);color:var(--mintdk)}
  .qrow{margin:10px 0 2px}
  .qh{display:flex;justify-content:space-between;align-items:baseline}
  .ql{font-weight:700;font-size:13.5px}
  .qv{font-weight:800;font-size:15px;color:var(--navy)}
  input[type=range]{width:100%;accent-color:var(--mintdk);margin:6px 0 0}
  /* inline claim form (name + email, nothing else) */
  .bwform{margin-top:14px;text-align:start}
  .bwfield{display:flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;margin:0 0 8px}
  .bwfield:focus-within{border-color:var(--navy)}
  .bwfield .bwat{font-weight:800;font-size:16px;color:var(--faint);flex:none}
  .bwfield input{flex:1;border:0;outline:0;background:transparent;font-family:inherit;font-size:16px;font-weight:600;color:var(--navy);padding:12px 6px}
  .bwavail{min-height:16px;font-size:12.5px;font-weight:700;margin:-2px 2px 8px;color:var(--muted)}
  .bwavail.ok{color:#17805e} .bwavail.no{color:#c0392b}
  .bwerr{background:#fdecea;border:1px solid #f5c6cb;color:#a83232;border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:700;margin-top:9px}
  /* Fable Layer 2 invite builder, a white panel inside the green door (copied from FABLE_INVITE_BUILDERS_JUL22.html) */
  .bwbuild{background:#fff;border-radius:16px;padding:16px;margin-top:16px;text-align:start;color:var(--ink)}
  .bstep{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--navy);margin:14px 0 6px}
  .bstep:first-child{margin-top:0}
  .bpay{display:flex;gap:8px;flex-wrap:wrap}
  .bpayopt{flex:1;min-width:150px;background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:11px 13px;cursor:pointer}
  .bpayopt.on{border-color:var(--mint);background:#e6faf2}
  .bpayopt .bpt{font-weight:800;font-size:13.5px;color:var(--ink)}
  .bpayopt .bpd{font-size:11.5px;color:var(--muted)}
  .bhrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .bhrow input{flex:1;min-width:170px;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
  .baddbtn{background:#fff;color:var(--mintdk);border:1.5px dashed var(--mint);border-radius:50px;padding:9px 14px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
  .bchips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 0}
  .bchipx{background:#e6faf2;color:#17805e;border:1px solid #b5ecd6;border-radius:12px;padding:6px 11px;font-weight:800;font-size:13px;max-width:100%;overflow-wrap:anywhere}
  .bchipx .bok{color:var(--mintdk);font-weight:800;margin-inline-start:5px}
  .bchipx.no{background:#fdecea;color:#a83232;border-color:#f5c6cb}
  .bchipx.pending{opacity:.7}
  .bpreview{background:var(--wash);border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-top:6px}
  .bcap{font-size:10.5px;font-weight:800;letter-spacing:.07em;color:var(--faint);margin-bottom:7px}
  .binvline{background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:12px;color:var(--muted);margin-bottom:8px}
  .binvline b{color:var(--navy)}
  .bbig{font-weight:800;font-size:16px;color:var(--navy)}
  .balertchip{display:inline-block;background:#e0596b;color:#fff;border-radius:50px;font-size:10.5px;font-weight:900;padding:1px 7px;margin-inline-start:5px}
  .bpd{font-size:12.5px;color:var(--muted);margin-top:3px}
  .blinkbox{display:none;background:var(--navy);color:#fff;border-radius:13px;padding:13px 15px;margin-top:12px;font-size:13px}
  .blinkbox.show{display:block}
  .blinkbox code{display:block;background:rgba(255,255,255,.12);border-radius:8px;padding:8px 10px;margin:8px 0;font-size:12px;overflow-wrap:anywhere;color:#fff}
  .blinkbox .bs{color:#c9d4f0;font-size:11.5px;line-height:1.6}
  .bcopy{background:var(--mint);color:#0c3b2c;border:0;border-radius:50px;padding:9px 15px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;margin:2px 0 6px}
  .btextarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink);resize:vertical;min-height:180px}
  .btree{margin-top:8px}
  .bkid{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin:7px 0 0}
  .bkid.hq{border:2px solid var(--skyink);background:var(--wash)}
  .bkid .bt{font-weight:800;font-size:13.5px;color:var(--ink)}
  .bkid .bd{font-size:11.5px;color:var(--muted)}
  .bkid .bst{margin-inline-start:auto;flex:none;font-size:10.5px;font-weight:800;border-radius:50px;padding:2px 8px;background:#fdeef0;color:#a33546}
  .pwcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin:10px 0 0}
  .pwcard .k{font-size:12px;color:var(--muted);font-weight:700}
  .pwcard .n{font-size:20px;font-weight:800;color:var(--navy)}
  .pwcard .m{font-size:11px;color:var(--faint);margin-top:3px;line-height:1.5}
  .pwcard.total{background:#e6faf2;border-color:#b5ecd6}
  .pwcard.total .n{color:var(--mintdk)}

  /* v4.2: invited-by strip, tinted panes, fixed-order numbered wings, the activation nudge */
  .invited{border-bottom:1px solid var(--line);background:var(--wash)}
  .invited .in{max-width:640px;margin:0 auto;padding:7px 22px;font-size:12.5px;color:var(--muted)}
  .invited b{color:var(--navy)}
  .striphint{max-width:640px;margin:0 auto;padding:0 22px 8px;font-size:12px;line-height:1.5;color:var(--muted);display:none}
  .striphint.show{display:block}
  #pane-pname{border-color:#c9cde6;background:#fbfbfe}
  #pane-ppart{border-color:#b5ecd6;background:#f7fcfa}
  #pane-cbiz{border-color:#aee4e7;background:#f3fbfc}
  #pane-cbp{border-color:#b5ecd6;background:#f7fcfa}
  .q.now{background:#fff;border:1.5px solid #b5ecd6;border-radius:12px;padding:13px 12px;cursor:default}
  .nowchip{background:#e6faf2;color:var(--mintdk);border:1px solid #b5ecd6;border-radius:50px;font-size:10.5px;font-weight:800;padding:2px 8px;margin-inline-start:7px;vertical-align:1px;white-space:nowrap;display:inline-block}
  .seen{color:var(--mintdk);font-weight:800;margin-inline-start:6px;font-size:12px}
  .h2{margin-top:16px}
  .event{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff;border:1.5px solid var(--goldsoft);border-inline-start:5px solid var(--gold);border-radius:12px;padding:10px 13px;margin:0 0 12px;font-size:12.5px;color:var(--muted)}
  .event>div{min-width:0;flex:1 1 60%}
  .event b{color:var(--navy)}
  .event button{margin-inline-start:auto;flex:none;background:var(--navy);color:#fff;border:0;border-radius:50px;padding:7px 12px;font-family:inherit;font-weight:800;font-size:12px;cursor:pointer}

  /* v4.3: side-switch toast + toggle flash, so a cross-side jump is impossible to miss */
  .toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;border-radius:50px;
    padding:9px 18px;font-weight:800;font-size:13px;box-shadow:0 12px 30px rgba(28,30,51,.3);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s}
  .toast.show{opacity:1}
  @keyframes segflash{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 4px #69dcb066}}
  .seg.flash{animation:segflash .9s ease 2}

  /* v4.4: the FOMO clock */
  .fomobar{font-size:12.5px;color:var(--muted);font-weight:700;margin:12px 0 4px}
  .fomobar span{float:inline-end;color:var(--red);font-weight:800}
  .meter2{height:9px;background:var(--line);border-radius:50px;overflow:hidden;clear:both}
  .meter2 i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#e0596b,#c9364b);border-radius:50px;transition:width .25s linear}

  /* v4.5: the Bitword badge beside every name. Muted while held; lights to full color at verification */
  .bwlogo{height:.8em;width:auto;vertical-align:-1px;margin-inline-end:8px;opacity:.6}

  /* the ladder */
  .ladder{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:13px;padding:12px 14px;margin:0 0 16px}
  .ladder .lk{font-size:11px;font-weight:800;letter-spacing:.06em;color:#bff0e0}
  .ladder .lv{font-size:19px;font-weight:800;color:#fff;margin:2px 0 8px}
  .lmeter{height:8px;background:rgba(255,255,255,.2);border-radius:50px;overflow:hidden}
  .lmeter i{display:block;height:100%;width:12%;background:var(--mint);border-radius:50px}
  .ladder .ls{font-size:11.5px;color:#a7ddcb;margin-top:8px;line-height:1.5}

  /* info icons */
  .info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
    background:var(--sky);color:var(--skyink);font-size:11px;font-weight:800;cursor:help;flex:none;vertical-align:middle;margin-inline-start:4px}
  .info.dk{background:rgba(255,255,255,.22);color:#fff}

  /* chips */
  .tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px}
  .htag{background:var(--sky);color:var(--skyink);border:1px solid #aee4e7;border-radius:14px;padding:7px 13px;font-weight:800;font-size:13.5px;max-width:100%}
  .addtag{background:#fff;color:var(--skyink);border:1.5px dashed #aee4e7;border-radius:14px;padding:7px 13px;font-weight:700;font-size:13px;cursor:pointer}
  .chip{background:rgba(255,255,255,.14);color:#eafff7;border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:6px 12px;font-weight:800;font-size:13px;max-width:100%}

  /* payload picker (the one invite object) */
  .pay{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
  .payopt{display:flex;gap:11px;align-items:center;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.22);border-radius:13px;padding:11px 13px;cursor:pointer}
  .payopt.on{background:rgba(255,255,255,.22);border-color:var(--mint)}
  .payopt .pi{font-size:19px;flex:none}
  .payopt .pt{font-weight:800;font-size:14px;color:#fff}
  .payopt .pd{font-size:12px;color:#bff0e0}
  .paypeek{font-size:12.5px;color:#d6f5ea;margin:0 0 14px;border-top:1px solid rgba(255,255,255,.18);padding-top:11px}

  /* stats + strength */
  .prog{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
  .stat{flex:1;min-width:88px;background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:11px 12px;text-align:center}
  .stat .n{font-size:20px;font-weight:800;color:var(--navy)}
  .stat .l{font-size:11px;color:var(--muted);font-weight:600;margin-top:1px}
  .noboard{color:var(--faint);font-size:12px;margin-top:8px}
  .strength{display:flex;align-items:center;gap:14px;margin:4px 0 10px}
  .fig{width:50px;height:50px;flex:none}
  .slab .t{font-weight:800;font-size:14px}
  .slab .s{color:var(--muted);font-size:12.5px}

  .wframe{width:100%;border:0;border-radius:14px;background:#fff;height:640px}
  .imgspot{border:2px dashed var(--line);border-radius:14px;background:var(--wash);display:flex;align-items:center;justify-content:center;
    height:190px;color:var(--faint);font-size:13px;font-weight:600;text-align:center;padding:14px;margin:6px 0 10px}

  /* goodies */
  .goodie{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin:8px 0;cursor:pointer}
  .goodie .gi{font-size:20px;flex:none}
  .goodie .gt{font-weight:800;font-size:13.5px}
  .goodie .gd{color:var(--muted);font-size:12px}
  .goodie .ga{margin-inline-start:auto;flex:none;color:var(--mintdk);font-weight:800;font-size:12.5px}

  .ytrow{display:flex;align-items:center;gap:9px;margin-top:12px}
  .yt{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:700;font-size:13.5px;text-decoration:none}
  .yt .play{width:26px;height:18px;background:#ff0000;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10px}

  /* FOOTER */
  .sitefoot{border-top:1px solid var(--line);margin-top:26px}
  .sitefoot .in{max-width:640px;margin:0 auto;padding:20px 22px 34px;color:var(--muted);font-size:13px}
  .sitefoot .claim b{color:var(--navy)}
  .sitefoot a{color:var(--skyink);font-weight:700;text-decoration:none;cursor:pointer}
  .footlinks{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:12px;font-size:12.5px}
  .footlinks .yt{font-size:12.5px}

  /* exit modal */
  .modal{position:fixed;inset:0;background:rgba(28,30,51,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:22px}
  .modal.open{display:flex}
  .mbox{background:#fff;border-radius:18px;max-width:400px;padding:22px;box-shadow:0 24px 60px rgba(28,30,51,.35)}
  .mbox h4{margin:0 0 6px;font-size:16px;color:var(--navy)}
  .mbox p{margin:0 0 14px;color:var(--muted);font-size:13.5px}
  .mbox p b{color:var(--navy)}
  .mbox .cta{width:100%;justify-content:center;margin-bottom:8px}
  .mbox .ghost{display:block;width:100%;text-align:center;background:#fff;border:1px solid var(--line);color:var(--muted);
    border-radius:50px;padding:12px;font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer}

  .hide{display:none}
  .foot{max-width:640px;margin:16px auto 0;padding:0 22px 30px;color:var(--faint);font-size:12px}

  /* ============ v4.7 · THE SAMPLED BITWORD.CO PALETTE (Jul 4 restyle spec, design/DESIGN_SPEC.html) ============
     indigo #2f3150 dark panels · body #2c3154 · page bg #f2f2f2 · mint #69dcb0 pills (#17805e readable) ·
     teal #54bcc3 · ice #d7ffff on dark · white cards with 6px colored top borders · pill buttons.
     Mark coding: @ = TEAL · # = MINT · partner worlds = INDIGO + ICE. No gold, no green fills, no black. */
  :root{--navy:#2f3150;--ink:#2c3154;--mint:#69dcb0;--mintdk:#17805e;--teal:#54bcc3;--ice:#d7ffff;
    --sky:#e0f7f8;--skyink:#17805e;--gold:#54bcc3;--goldsoft:#cdeef1;--line:#e4e6ee;--wash:#f7f8fb}
  html,body{background:#f2f2f2;color:var(--ink)}
  .invited{background:#fff}  /* .bar removed Aug 9: it forced the header white and overrode the navy re-skin */
  .pane,#pane-pname,#pane-ppart,#pane-cbiz,#pane-cbp{background:#fff;border-color:var(--line)}
  .tab{background:#eaebf2;color:#8a8da6;border-color:var(--line)}
  .tab.on{background:#fff;color:var(--navy);font-size:15px;border-top:6px solid var(--navy);padding-top:6px}
  .tab.on.idn{background:#fff;border-top-color:var(--teal)}
  .tab.on.idb{background:#fff;border-top-color:var(--mint)}
  .tab.on.grn{background:#fff;border-top-color:var(--navy);color:var(--navy)}
  .door{background:var(--navy);border-radius:22px;border-top:6px solid var(--teal)}
  .door.biz{background:var(--navy);border-top-color:var(--mint)}
  .door.grn{background:var(--navy);border-top-color:var(--ice)}
  .door.grn .who2,.door.grn .under{color:var(--ice)}
  .door.grn .say{color:#e8fbff}
  .door.biz .who2{color:var(--ice)}
  .door.biz .say{color:#e8fbff}
  .door.biz .under{color:#c9f0f4}
  .door.empty{background:#fff;border:1px solid var(--line);border-top:5px solid var(--teal)}
  .cta{background:var(--mint);color:#2c3154}
  .stage .tool{background:#fff;border:1px solid var(--line);border-top:6px solid var(--navy);box-shadow:0 16px 40px rgba(44,49,84,.12)}
  #stage-pname .tool{background:#fff;border-top-color:var(--teal)}
  #stage-cbiz .tool{background:#fff;border-top-color:var(--mint)}
  #stage-cbiz .tool h4{color:var(--navy)}
  #stage-ppart .tool,#stage-cbp .tool{background:#fff;border-top-color:var(--navy)}
  #stage-ppart .tool h4,#stage-cbp .tool h4{color:var(--navy)}
  .htag{background:#e6faf2;color:#17805e;border-color:#b5ecd6}
  .cid{background:var(--navy);border-radius:20px;border-top:6px solid var(--mint)}
  .cid .k{color:var(--ice)}
  .q.now{border-color:var(--teal)}
  .nowchip{background:#e0f7f8;color:var(--navy);border-color:#aee4e7}
  .event{border-color:#cdeef1;border-inline-start:5px solid var(--teal)}
  .tool.gold{border-inline-start:5px solid var(--teal);border-top-color:var(--teal)}
  .qi.gold{background:#e0f7f8;border-color:#aee4e7;color:var(--teal)}  /* B267 C5 (Fable ruling 1): the premium / Brand Partner marker is teal, not gold; icon tinted teal. */
  .helper .inh{background:#e6faf2;border-color:#b5ecd6;color:#17805e}
  .opt .oi{background:#e6faf2}
  .pwcard.total{background:#e6faf2;border-color:#b5ecd6}
  .pwcard.total .n{color:#17805e}
  .lmeter i{background:var(--mint)}
  .ladder{border-color:rgba(215,255,255,.35)}
  .ladder .lk,.ladder .ls{color:var(--ice)}
  .sitefoot{background:#fff}
  .paypeek{color:var(--ice)}
  .payopt .pd{color:var(--ice)}

  /* B288: the fixed HASHTAG SEARCH dock is unpinned (R-230F-19 one job law); search now
     opens from the menu into #hashModal. The bottom padding for the old fixed bar is gone. */
  body{padding-bottom:24px}
  .hsearch{position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(44,49,84,.10)}
  .hsearch .hin{max-width:640px;margin:0 auto;display:flex;gap:8px;padding:12px 22px;position:relative}
  .hsearch input{flex:1;border:1.5px solid var(--line);border-radius:50px;padding:11px 16px;font-family:inherit;font-size:14px;min-width:0}
  .hsearch button{background:var(--mint);color:#2c3154;border:0;border-radius:50px;padding:10px 18px;font-weight:800;font-family:inherit;font-size:14px;cursor:pointer;flex:none}
  .hsearch .tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--navy);color:var(--ice);font-size:9.5px;font-weight:800;letter-spacing:.06em;border-radius:50px;padding:2px 10px;white-space:nowrap}
/* B300 owner door: the create wizard sections + the account's clubs list (R-230G-10 tap grammar) */
.bwWizIntro{font-size:12.5px;color:var(--muted);margin:14px 0 8px;line-height:1.5}
.bwWizSec{border:1px solid var(--line);border-radius:14px;margin-top:10px;overflow:hidden;background:#fff}
.bwWizHd{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:var(--wash);border:0;border-bottom:1px solid var(--line);padding:12px 14px;font-family:inherit;cursor:pointer}
.bwWizHd .bwWizNum{flex:none;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.bwWizHd .bwWizTtl{flex:1;font-weight:800;color:var(--navy);font-size:14px}
.bwWizHd .bwWizChev{color:var(--muted);font-size:13px}
.bwWizSec.bwWizDone .bwWizNum{background:#17805e}
.bwWizBody{padding:12px 14px}
.bwWizBody.bwWizHide{display:none}
.bwWizSaveBtn{margin-top:12px}
.bwOwnerClub{border:1px solid var(--line);border-inline-start:5px solid #69dcb0;border-radius:14px;padding:13px 14px;margin-top:10px;background:#fff}
.bwOwnerClub .ocn{font-weight:800;color:var(--navy);font-size:15px}
.bwOwnerClub .oco{font-size:12.5px;color:var(--muted);margin-top:1px}
.bwOwnerClubConsole{display:inline-block;background:#2f3150;color:#fff;border:0;border-radius:11px;padding:11px 15px;font-weight:800;font-size:14px;font-family:inherit;cursor:pointer;margin-top:10px;text-decoration:none}
.bwOwnerClubPrev{display:inline-block;margin-top:9px;color:var(--navy);font-weight:700;font-size:13px;text-decoration:underline;cursor:pointer}
.bwCreateAnother{display:inline-block;margin-top:12px;color:var(--navy);font-weight:800;font-size:13.5px;text-decoration:underline;cursor:pointer;background:none;border:0;font-family:inherit;padding:0}