/* ============================================================
   Indiexis Social: the app skin

   Indiexis's own voice, applied to a social app: navy ink, one
   saffron, Archivo set wide for display, IBM Plex Mono for labels
   and figures, hairline rules. Surfaces are warm paper by day and
   deep navy by night, with glass bars over media.

   Layout: rail | feed | suggestions on desktop; the rail folds to
   icons on tablets; phones get a top bar and a bottom tab bar.
   ============================================================ */

body.pg-social{
  --ink:#0b1b3f;--saf:#e85d04;--saf2:#ff8a3d;--amber:#f5a524;--rose:#e2457a;
  --bg:#f6f4ef;--bg2:#efece5;--card:#ffffff;--text:#0b1b3f;--mute:#5d677d;--faint:#8e96a8;
  --line:rgba(11,27,63,.09);--line2:rgba(11,27,63,.16);--glass:rgba(255,255,255,.74);--glass-dark:rgba(8,16,38,.55);
  --shadow:0 1px 2px rgba(11,27,63,.05),0 8px 28px -12px rgba(11,27,63,.18);
  --shadow-lg:0 30px 80px -30px rgba(11,27,63,.45);
  --ring:conic-gradient(from 210deg,#e85d04,#f5a524,#ffd166,#e2457a,#e85d04);
  --disp:'Archivo','Inter Tight','Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --body:'Inter Tight','Segoe UI',system-ui,Arial,sans-serif;
  --e:cubic-bezier(.16,1,.3,1);
  --rail:248px;--feed:600px;--side:320px;
  margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (prefers-color-scheme:dark){
  :root:not([data-xs-theme="light"]) body.pg-social{
    --bg:#060d20;--bg2:#0a1430;--card:#0c1834;--text:#edf0f7;--mute:#97a1b8;--faint:#6c7690;
    --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);--glass:rgba(9,18,42,.72);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-xs-theme="dark"] body.pg-social{
  --bg:#060d20;--bg2:#0a1430;--card:#0c1834;--text:#edf0f7;--mute:#97a1b8;--faint:#6c7690;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);--glass:rgba(9,18,42,.72);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
}
/* The site-wide extras have no place inside the app. */
body.pg-social .scroll-progress,body.pg-social .back-to-top,body.pg-social .toast,body.pg-social .skip-link:not(:focus){display:none!important}
body.pg-social main#main{display:contents}
:where(body.pg-social) a{color:inherit;text-decoration:none}
:where(body.pg-social) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:where(body.pg-social) :is(input,textarea,select){font:inherit;color:inherit}
:where(body.pg-social) :is(img,video){display:block;max-width:100%}
body.pg-social [hidden]{display:none!important}
.xs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.xs-lock{overflow:hidden}

/* ------------------------------------------------------------ shell */
.xs-app{display:grid;grid-template-columns:var(--rail) minmax(0,var(--feed)) var(--side);justify-content:center;gap:0 44px;min-height:100vh}
.xs-rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:22px 14px 18px;border-right:1px solid var(--line);margin-left:-44px;padding-left:22px;box-sizing:border-box}
.xs-brand{display:flex;align-items:center;gap:11px;padding:6px 10px 26px}
.xs-brand svg{width:36px;height:36px;flex:none;filter:drop-shadow(0 6px 14px rgba(232,93,4,.25))}
.xs-brand-t{display:flex;align-items:baseline;gap:6px;line-height:1}
.xs-brand-t b{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.01em;font-stretch:115%;font-variation-settings:'wdth' 115}
.xs-brand-t em{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--saf);border:1px solid currentColor;padding:3px 6px 2px;border-radius:5px}
.xs-nav{display:flex;flex-direction:column;gap:2px}
.xs-nav-i{display:flex;align-items:center;gap:15px;padding:11px 12px;border-radius:14px;font-weight:600;font-size:15.5px;transition:background .2s,transform .2s var(--e);width:100%;text-align:left}
.xs-nav-i:hover{background:var(--bg2)}
.xs-nav-i:active{transform:scale(.97)}
.xs-nav-i.is-on{font-weight:800}
.xs-nav-i.is-on .xs-nav-ic{color:var(--saf)}
.xs-nav-ic{position:relative;width:26px;height:26px;display:grid;place-items:center;font-size:21px;flex:none}
.xs-rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:12px}
.xs-back .xs-nav-l{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--mute)}
.xs-me-av{border-radius:50%;overflow:hidden;background:var(--bg2);font-size:14px!important}
.xs-me-av img{width:100%;height:100%;object-fit:cover}
.xs-dot{position:absolute;top:-4px;right:-7px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--saf);color:#fff;font:700 10.5px/18px var(--mono);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.xs-top{display:none}
.xs-main{min-width:0;padding:22px 0 80px;outline:none}
.xs-side{position:sticky;top:0;height:100vh;overflow:auto;padding:34px 0 20px;scrollbar-width:none}
.xs-side::-webkit-scrollbar{display:none}
.xs-tabs{display:none}

@media (max-width:1240px){.xs-app{grid-template-columns:var(--rail) minmax(0,var(--feed))}.xs-side{display:none}}
@media (max-width:1000px){
  body.pg-social{--rail:84px}
  .xs-app{gap:0 28px}
  .xs-rail{margin-left:0;padding:22px 12px;align-items:center}
  .xs-brand{padding:6px 0 26px}.xs-brand-t,.xs-nav-l{display:none}
  .xs-nav-i{justify-content:center;padding:12px;width:auto}
}
@media (max-width:700px){
  .xs-app{display:block}
  .xs-rail{display:none}
  .xs-top{display:flex;position:sticky;top:0;z-index:30;align-items:center;justify-content:space-between;height:56px;padding:0 14px;background:var(--glass);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line)}
  .xs-brand-sm{padding:0}.xs-brand-sm .xs-brand-t{display:flex}.xs-brand-sm svg{width:30px;height:30px}.xs-brand-sm .xs-brand-t b{font-size:19px}
  .xs-top-act{display:flex;gap:6px}
  .xs-ib{position:relative;width:40px;height:40px;display:grid;place-items:center;font-size:20px;border-radius:50%}
  .xs-ib.xs-me-av{width:32px;height:32px;margin:4px}
  .xs-main{padding:0 0 calc(76px + env(safe-area-inset-bottom))}
  .xs-tabs{display:flex;position:fixed;z-index:40;left:0;right:0;bottom:0;height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--glass);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--line);justify-content:space-around;align-items:center}
  .xs-tab{position:relative;width:56px;height:46px;display:grid;place-items:center;font-size:22px;color:var(--mute);border-radius:14px;transition:transform .2s var(--e)}
  .xs-tab:active{transform:scale(.9)}
  .xs-tab.is-on{color:var(--text)}
  .xs-tab .xs-dot{top:4px;right:6px}
  .xs-tab-create i{width:44px;height:34px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--saf),var(--amber));color:#fff;font-size:17px;box-shadow:0 8px 18px -6px rgba(232,93,4,.6)}
  body.xs-reels-on .xs-top{display:none}
  body.xs-reels-on .xs-tabs{background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.08)}
  body.xs-reels-on .xs-tab{color:rgba(255,255,255,.65)}body.xs-reels-on .xs-tab.is-on{color:#fff}
}

/* SEO block before the app takes over */
.xs-seo{padding:20px 4px}
.xs-kick{font:600 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--saf);margin:0 0 10px}
.xs-seo h1{font:800 34px/1.05 var(--disp);font-stretch:112%;margin:0 0 12px}
.xs-seo p{color:var(--mute)}
.xs-seo-list{columns:2;padding:0;list-style:none;font-size:14px}
.xs-seo-list span{color:var(--faint);font-size:12px}
.xs-app:not([data-state="boot"]) .xs-seo{display:none}

/* ------------------------------------------------------------ atoms */
.xs-av{position:relative;flex:none;width:var(--s,40px);height:var(--s,40px);border-radius:50%;background:var(--bg2);display:grid;place-items:center;font:700 calc(var(--s,40px)*.38) var(--disp);color:var(--ink);overflow:hidden}
.xs-av img{width:100%;height:100%;object-fit:cover}
.xs-av.is-ring{padding:2.5px;background:var(--ring);overflow:visible}
.xs-av.is-ring>span{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--card);box-shadow:0 0 0 2px var(--card)}
.xs-av.is-ring.is-seen{background:var(--line2)}
.xs-av-mono{background:linear-gradient(140deg,#13285a,#0b1b3f);color:#fff}
.xs-av.is-ring{background:var(--ring)}
.xs-av.is-ring.is-seen{background:var(--line2)}
.xs-av-mono.is-ring>span{background:linear-gradient(140deg,#13285a,#0b1b3f);color:#fff}
.xs-tick{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--saf);color:#fff;font-size:8.5px;vertical-align:-2px;margin-left:4px}
.xs-meta{font:500 11.5px var(--mono);color:var(--mute);letter-spacing:.02em}
.xs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:12px;font-weight:700;font-size:14.5px;transition:transform .15s var(--e),filter .2s,background .2s;white-space:nowrap}
.xs-btn:active{transform:scale(.96)}
.xs-btn-p{background:linear-gradient(135deg,var(--saf),#f47318);color:#fff;box-shadow:0 10px 22px -10px rgba(232,93,4,.7)}
.xs-btn-p:hover{filter:brightness(1.06)}
.xs-btn-s{background:var(--bg2);color:var(--text)}
.xs-btn-s:hover{background:var(--line2)}
.xs-btn-o{border:1.5px solid var(--line2)}
.xs-btn-ink{background:var(--ink);color:#fff}
.xs-btn-sm{height:32px;padding:0 13px;font-size:13px;border-radius:10px}
.xs-btn-block{width:100%}
.xs-btn[disabled]{opacity:.55;pointer-events:none}
.xs-link{color:var(--saf);font-weight:700}
.xs-card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.xs-h{font:800 26px/1.1 var(--disp);font-stretch:112%;margin:0}
.xs-sub{color:var(--mute);margin:6px 0 0}
.xs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:6px 4px 18px}
.xs-empty{text-align:center;padding:56px 24px;color:var(--mute)}
.xs-empty i.xs-empty-ic{font-size:30px;width:74px;height:74px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line2);margin:0 auto 16px;color:var(--text)}
.xs-empty h3{font:800 20px var(--disp);color:var(--text);margin:0 0 6px}
.xs-spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line2);border-top-color:var(--saf);animation:xs-spin .8s linear infinite;margin:30px auto}
@keyframes xs-spin{to{transform:rotate(360deg)}}
.xs-sk{background:linear-gradient(90deg,var(--bg2) 25%,var(--line) 50%,var(--bg2) 75%);background-size:300% 100%;animation:xs-sh 1.4s infinite}
@keyframes xs-sh{from{background-position:100% 0}to{background-position:-100% 0}}
.xs-field{display:block;margin:0 0 14px}
.xs-field>span{display:block;font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 7px}
.xs-in{width:100%;box-sizing:border-box;border:1.5px solid var(--line2);background:var(--card);border-radius:12px;padding:11px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.xs-in:focus{border-color:var(--saf);box-shadow:0 0 0 4px rgba(232,93,4,.14)}
textarea.xs-in{resize:vertical;min-height:110px}
.xs-err{color:#d33;font-size:13.5px;margin:0 0 12px}
.xs-seg{display:flex;padding:4px;background:var(--bg2);border-radius:13px;gap:4px}
.xs-seg button{flex:1;height:38px;border-radius:10px;font-weight:700;font-size:14px;color:var(--mute);transition:all .2s var(--e)}
.xs-seg button.is-on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}

/* ------------------------------------------------------------ stories */
.xs-stories{display:flex;gap:16px;overflow-x:auto;padding:4px 4px 18px;scrollbar-width:none;scroll-snap-type:x proximity}
.xs-stories::-webkit-scrollbar{display:none}
.xs-story{flex:none;width:76px;display:flex;flex-direction:column;align-items:center;gap:7px;scroll-snap-align:start}
.xs-story .xs-av{--s:70px;transition:transform .25s var(--e)}
.xs-story:hover .xs-av{transform:scale(1.05)}
.xs-story-n{font-size:12px;font-weight:600;max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xs-story-add .xs-av{background:var(--bg2);border:1.5px dashed var(--line2);font-size:20px;color:var(--saf)}
@media (max-width:700px){.xs-stories{padding:14px 14px 14px;border-bottom:1px solid var(--line)}}

/* ------------------------------------------------------------ post card */
.xs-feed{display:flex;flex-direction:column;gap:22px}
.xs-post{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);animation:xs-in .5s var(--e) both}
@keyframes xs-in{from{opacity:0;transform:translateY(14px)}}
@media (max-width:700px){.xs-feed{gap:0}.xs-post{border-radius:0;border-left:0;border-right:0;box-shadow:none;border-top:0}}
.xs-ph{display:flex;align-items:center;gap:11px;padding:12px 14px}
.xs-ph-t{flex:1;min-width:0;line-height:1.25}
.xs-ph-n{font-weight:800;font-size:14.5px;display:flex;align-items:center}
.xs-ph-n a:hover{text-decoration:underline}
.xs-more{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--mute)}
.xs-more:hover{background:var(--bg2)}
.xs-media{position:relative;background:#0b1220;overflow:hidden;user-select:none}
.xs-car{width:100%;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:var(--ar,4/5);max-height:min(78vh,760px)}
.xs-car::-webkit-scrollbar{display:none}
.xs-slide{flex:none;width:100%;height:100%;scroll-snap-align:center;position:relative}
.xs-slide img,.xs-slide video{width:100%;height:100%;object-fit:cover}
.xs-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:5px;pointer-events:none}
.xs-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.5);transition:all .3s var(--e)}
.xs-dots i.is-on{width:18px;background:#fff}
.xs-count{position:absolute;top:12px;right:12px;font:600 11.5px var(--mono);color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);padding:4px 9px;border-radius:20px}
.xs-arr{position:absolute;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:rgba(255,255,255,.88);color:#0b1b3f;display:grid;place-items:center;font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;transition:opacity .2s}
.xs-media:hover .xs-arr{opacity:1}
.xs-arr-l{left:12px}.xs-arr-r{right:12px}
@media (hover:none){.xs-arr{display:none}}
.xs-vid-badge{position:absolute;top:12px;left:12px;color:#fff;font-size:15px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.xs-mute{position:absolute;bottom:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:12px;display:grid;place-items:center}
.xs-heart{position:absolute;left:50%;top:50%;font-size:96px;color:#fff;transform:translate(-50%,-50%) scale(0);filter:drop-shadow(0 10px 30px rgba(232,93,4,.6));pointer-events:none}
.xs-heart.is-pop{animation:xs-pop .9s var(--e)}
@keyframes xs-pop{15%{transform:translate(-50%,-50%) scale(1.2);opacity:1}30%{transform:translate(-50%,-50%) scale(.95)}45%{transform:translate(-50%,-50%) scale(1.05)}80%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-80%) scale(.6);opacity:0}}
/* The business's call to action sits on the media, in glass. */
.xs-cta{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:16px;background:rgba(10,18,40,.55);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);color:#fff;border:1px solid rgba(255,255,255,.14)}
.xs-cta-p{font:700 15px var(--disp);font-stretch:108%}
.xs-cta-p small{display:block;font:500 10.5px var(--mono);opacity:.75;letter-spacing:.06em;text-transform:uppercase}
.xs-cta .xs-btn{margin-left:auto;height:36px;font-size:13.5px}
.xs-has-dots .xs-cta{bottom:30px}
.xs-acts{display:flex;align-items:center;gap:4px;padding:8px 8px 2px}
.xs-act{width:42px;height:42px;display:grid;place-items:center;font-size:23px;border-radius:50%;transition:transform .2s var(--e),color .2s}
.xs-act:hover{color:var(--mute)}
.xs-act:active{transform:scale(.85)}
.xs-act.is-on{color:#ef3d5a}
.xs-act.is-on.xs-save{color:var(--text)}
.xs-act.is-bounce{animation:xs-b .45s var(--e)}
@keyframes xs-b{40%{transform:scale(1.3)}}
.xs-save{margin-left:auto}
.xs-pb{padding:0 16px 16px}
.xs-likes{font-weight:800;font-size:14.5px;margin:2px 0 6px}
.xs-cap{font-size:14.5px;line-height:1.5;white-space:pre-line;word-wrap:break-word}
.xs-cap b{font-weight:800;margin-right:5px}
.xs-cap .xs-tag{color:var(--saf);font-weight:600}
.xs-cap.is-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xs-cap-more{color:var(--mute);font-weight:600;font-size:14px}
.xs-vc{display:block;color:var(--mute);font-size:14px;margin:8px 0 2px}
.xs-time{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:8px}
.xs-qc{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:6px 6px 6px 16px}
.xs-qc input{flex:1;border:0;background:none;outline:none;padding:10px 0;font-size:14px}
.xs-qc button{color:var(--saf);font-weight:800;font-size:14px;padding:8px 10px}

/* ------------------------------------------------------------ grid (explore, profile) */
.xs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
/* Posts are 4:5 magazine covers, so the grids keep that shape (as Instagram's grid does). */
.xs-tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg2);border-radius:6px}
.xs-tile img,.xs-tile video{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.xs-tile:hover img{transform:scale(1.04)}
.xs-tile-i{position:absolute;top:8px;right:8px;color:#fff;font-size:15px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
.xs-tile-o{position:absolute;inset:0;background:rgba(6,13,32,.42);display:flex;align-items:center;justify-content:center;gap:20px;color:#fff;font-weight:800;opacity:0;transition:opacity .2s}
.xs-tile:hover .xs-tile-o{opacity:1}
@media (max-width:700px){.xs-grid{gap:2px}.xs-tile{border-radius:0}}
.xs-search{position:relative;margin:0 0 16px}
.xs-search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--faint)}
.xs-search input{width:100%;box-sizing:border-box;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--card);padding:0 16px 0 44px;outline:none;font-size:15px;box-shadow:var(--shadow)}
.xs-search input:focus{border-color:var(--saf)}
@media (max-width:700px){.xs-search{margin:12px 12px 12px}.xs-explore-head{padding:0 12px}}
.xs-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding:0 2px}
.xs-chips::-webkit-scrollbar{display:none}
.xs-chip{flex:none;height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--line2);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;background:var(--card)}
.xs-chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:700px){.xs-chips{padding:0 12px}}

/* biz rows (suggestions, search) */
.xs-bl{display:flex;flex-direction:column;gap:4px}
.xs-br{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;transition:background .2s}
.xs-br:hover{background:var(--bg2)}
.xs-br-t{flex:1;min-width:0;line-height:1.25}
.xs-br-t b{display:flex;align-items:center;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xs-br-t span{display:block;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xs-follow-l{color:var(--saf);font-weight:800;font-size:13px;padding:6px 4px}
.xs-follow-l.is-on{color:var(--mute)}
.xs-side-h{display:flex;justify-content:space-between;align-items:center;font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:22px 10px 8px}
.xs-mecard{display:flex;align-items:center;gap:12px;padding:6px 10px}
.xs-promo{margin:22px 4px 0;padding:20px;border-radius:22px;background:radial-gradient(120% 120% at 100% 0,rgba(232,93,4,.35),transparent 55%),linear-gradient(150deg,#13285a,#0b1b3f);color:#fff;position:relative;overflow:hidden}
.xs-promo::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(200deg,#000,transparent 70%);pointer-events:none}
.xs-promo h4{font:800 19px/1.15 var(--disp);font-stretch:110%;margin:6px 0 8px}
.xs-promo p{font-size:13.5px;opacity:.8;margin:0 0 14px}
.xs-promo .xs-kick{color:#ffb27a}
.xs-foot{font:500 11px var(--mono);color:var(--faint);margin:22px 10px;line-height:1.8}
.xs-foot a:hover{color:var(--saf)}

/* ------------------------------------------------------------ profile */
.xs-prof{margin:0 0 18px;overflow:hidden}
.xs-cover{--bc:#e85d04;height:150px;background:radial-gradient(90% 140% at 85% 0,color-mix(in srgb,var(--bc) 70%,transparent),transparent 60%),radial-gradient(60% 100% at 0 100%,rgba(245,165,36,.25),transparent 60%),linear-gradient(140deg,#16306b,#0b1b3f 60%);position:relative}
.xs-cover::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent)}
.xs-prof-b{padding:0 22px 22px;position:relative}
.xs-prof-av{margin-top:-56px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.xs-prof-av .xs-av{--s:118px;box-shadow:0 0 0 5px var(--card);font-size:40px}
.xs-prof-av .xs-av.is-ring{box-shadow:none}
.xs-prof-av .xs-av.is-ring>span{box-shadow:0 0 0 3px var(--card)}
.xs-prof h1{font:800 27px/1.1 var(--disp);font-stretch:112%;margin:14px 0 4px;display:flex;align-items:center;flex-wrap:wrap}
.xs-prof h1 .xs-tick{width:20px;height:20px;font-size:11px;margin-left:8px}
.xs-stats{display:flex;gap:26px;margin:16px 0}
.xs-stats div{line-height:1.15}
.xs-stats b{display:block;font:800 19px var(--disp)}
.xs-stats span{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.xs-bio{font-size:14.5px;color:var(--text);margin:0 0 16px;max-width:520px}
.xs-prof-act{display:flex;gap:8px;flex-wrap:wrap}
.xs-prof-act .xs-btn{flex:1;min-width:110px}
.xs-ptabs{display:flex;border-top:1px solid var(--line);margin:0 0 4px}
.xs-ptabs button{flex:1;height:50px;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;justify-content:center;gap:8px;border-top:2px solid transparent;margin-top:-1px}
.xs-ptabs button.is-on{color:var(--text);border-color:var(--text)}
@media (max-width:700px){.xs-prof{border-radius:0;border:0;box-shadow:none;margin:0}.xs-cover{height:120px}.xs-prof-b{padding:0 16px 18px}.xs-prof-av .xs-av{--s:96px}.xs-prof-av{margin-top:-46px}}

/* ------------------------------------------------------------ reels */
.xs-reels{height:calc(100vh - 44px);overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;border-radius:24px;background:#000;max-width:440px;margin:0 auto}
.xs-reels::-webkit-scrollbar{display:none}
.xs-reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;background:#000;overflow:hidden}
.xs-reel video{width:100%;height:100%;object-fit:cover}
.xs-reel-g{position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.75));pointer-events:none}
.xs-reel-i{position:absolute;left:16px;right:78px;bottom:22px;color:#fff}
.xs-reel-i .xs-ph-n{color:#fff;gap:8px}
.xs-reel-i .xs-cap{font-size:14px;margin:10px 0 12px;color:rgba(255,255,255,.92)}
.xs-reel-s{position:absolute;right:10px;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff}
.xs-reel-s button,.xs-reel-s a{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 12px var(--mono);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.xs-reel-s i{font-size:27px}
.xs-reel-s .is-on i{color:#ef3d5a}
.xs-reel-play{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.9);font-size:64px;pointer-events:none;opacity:0;transition:opacity .2s}
.xs-reel.is-paused .xs-reel-play{opacity:1}
.xs-reel .xs-btn-follow{height:28px;padding:0 10px;border:1.5px solid rgba(255,255,255,.8);border-radius:8px;font-size:12.5px;color:#fff}
@media (max-width:700px){.xs-reels{height:calc(100vh - 60px - env(safe-area-inset-bottom));height:calc(100dvh - 60px - env(safe-area-inset-bottom));border-radius:0;max-width:none}.xs-main.is-reels{padding:0}}

/* ------------------------------------------------------------ layers (modal, sheet, story) */
.xs-layer{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(4,9,24,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:xs-fade .25s ease both}
@keyframes xs-fade{from{opacity:0}}
.xs-x{position:fixed;top:14px;right:16px;z-index:3;width:42px;height:42px;border-radius:50%;color:#fff;font-size:22px;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.xs-x:hover{background:rgba(255,255,255,.18)}
.xs-modal{background:var(--card);color:var(--text);border-radius:26px;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;box-shadow:var(--shadow-lg);animation:xs-up .4s var(--e) both}
@keyframes xs-up{from{opacity:0;transform:translateY(30px) scale(.97)}}
.xs-modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.xs-modal-h h3{font:800 17px var(--disp);margin:0}
.xs-modal-b{padding:20px}
@media (max-width:700px){
  .xs-layer{place-items:end center}
  .xs-modal{width:100%;border-radius:26px 26px 0 0;max-height:92vh;animation:xs-sheet .4s var(--e) both;padding-bottom:env(safe-area-inset-bottom)}
}
@keyframes xs-sheet{from{transform:translateY(100%)}}
.xs-menu button,.xs-menu a{display:block;width:100%;text-align:center;padding:15px;border-bottom:1px solid var(--line);font-weight:600}
.xs-menu .is-bad{color:#e03b3b;font-weight:800}
.xs-menu button:last-child{border:0}
/* Post detail */
.xs-pd{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);width:min(1180px,calc(100vw - 80px));height:min(860px,calc(100vh - 60px));background:var(--card);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);animation:xs-up .4s var(--e) both}
.xs-pd .xs-media{height:100%;display:flex;align-items:center}
.xs-pd .xs-car{aspect-ratio:auto;height:100%;max-height:none;width:100%}
.xs-pd .xs-slide img,.xs-pd .xs-slide video{object-fit:contain}
.xs-pd-r{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line)}
.xs-pd-r .xs-ph{border-bottom:1px solid var(--line)}
.xs-cl{flex:1;overflow:auto;padding:14px 16px}
.xs-cm{display:flex;gap:11px;margin:0 0 16px}
.xs-cm .xs-av{--s:32px}
.xs-cm-t{flex:1;font-size:14px;line-height:1.45;word-wrap:break-word;min-width:0}
.xs-cm-t b{font-weight:800;margin-right:5px;display:inline-flex;align-items:center}
.xs-cm-m{display:flex;gap:12px;font:500 11px var(--mono);color:var(--faint);margin-top:4px}
.xs-cm-m button{font:inherit;color:var(--mute);font-weight:600}
.xs-pd-f{border-top:1px solid var(--line)}
.xs-pd-f .xs-acts{padding:6px 8px 0}
.xs-pd-f .xs-pb{padding:0 16px 10px}
@media (max-width:900px){
  .xs-pd{grid-template-columns:1fr;grid-template-rows:auto 1fr;width:100%;height:100%;border-radius:0}
  .xs-pd .xs-media{height:auto;max-height:55vh}
  .xs-pd .xs-car{height:auto;aspect-ratio:var(--ar,1);max-height:55vh}
  .xs-pd-r{border-left:0}
}
/* Story viewer */
.xs-sv{position:relative;width:min(420px,100vw);height:min(calc(100vh - 40px),calc((100vw) * 16 / 9));aspect-ratio:9/16;max-height:calc(100vh - 40px);background:#000;border-radius:18px;overflow:hidden;color:#fff;animation:xs-up .35s var(--e) both}
@media (max-width:700px){.xs-sv{width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;aspect-ratio:auto}}
.xs-sv-m{position:absolute;inset:0}
.xs-sv-m img,.xs-sv-m video{width:100%;height:100%;object-fit:cover}
.xs-sv-top{position:absolute;left:0;right:0;top:0;padding:12px 12px 30px;background:linear-gradient(rgba(0,0,0,.55),transparent);z-index:2}
.xs-sv-bars{display:flex;gap:4px;margin:0 0 12px}
.xs-sv-bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.xs-sv-bars i b{display:block;height:100%;width:0;background:#fff}
.xs-sv-bars i.is-done b{width:100%}
.xs-sv-h{display:flex;align-items:center;gap:10px}
.xs-sv-h .xs-av{--s:34px}
.xs-sv-h b{font-size:14px}
.xs-sv-h .xs-meta{color:rgba(255,255,255,.75)}
.xs-sv-h button{margin-left:auto;font-size:20px;width:36px;height:36px;color:#fff}
.xs-sv-tap{position:absolute;top:70px;bottom:90px;width:35%;z-index:1}
.xs-sv-tap.l{left:0}.xs-sv-tap.r{right:0;width:65%}
.xs-sv-cap{position:absolute;left:16px;right:16px;bottom:86px;text-align:center;font:700 18px/1.3 var(--disp);text-shadow:0 2px 12px rgba(0,0,0,.6);z-index:2}
.xs-sv-f{position:absolute;left:0;right:0;bottom:0;padding:14px 12px calc(14px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;background:linear-gradient(transparent,rgba(0,0,0,.6));z-index:2}
.xs-sv-f input{flex:1;height:44px;border-radius:22px;border:1px solid rgba(255,255,255,.5);background:transparent;padding:0 18px;color:#fff;outline:none}
.xs-sv-f input::placeholder{color:rgba(255,255,255,.75)}
.xs-sv-f button{width:44px;height:44px;font-size:21px;color:#fff}
.xs-sv-views{font:500 12px var(--mono);display:flex;align-items:center;gap:6px}

/* ------------------------------------------------------------ inbox */
.xs-inbox{display:grid;grid-template-columns:330px 1fr;height:calc(100vh - 44px);overflow:hidden}
.xs-main.is-wide{padding-bottom:0}
.xs-tl{border-right:1px solid var(--line);overflow:auto;display:flex;flex-direction:column}
.xs-tl-h{padding:12px 18px 14px;font:800 22px var(--disp);font-stretch:110%;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--card);z-index:1}
.xs-tl-i{display:flex;align-items:center;gap:12px;padding:10px 18px;transition:background .15s}
.xs-tl-i:hover,.xs-tl-i.is-on{background:var(--bg2)}
.xs-tl-i .xs-av{--s:52px}
.xs-tl-t{flex:1;min-width:0;line-height:1.3}
.xs-tl-t b{display:flex;align-items:center;font-size:14.5px;font-weight:600}
.xs-tl-t span{display:block;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xs-tl-i.is-unread b{font-weight:800}.xs-tl-i.is-unread span{color:var(--text);font-weight:600}
.xs-tl-i .xs-ud{width:9px;height:9px;border-radius:50%;background:var(--saf);flex:none}
.xs-tl-side{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--saf);border:1px solid currentColor;border-radius:4px;padding:1px 5px;margin-left:6px}
.xs-cv{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card)}
.xs-cv-h{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.xs-cv-h .xs-av{--s:42px}
.xs-cv-h .xs-btn{margin-left:auto}
.xs-msgs{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:4px}
.xs-msg{max-width:72%;align-self:flex-start;padding:10px 14px;border-radius:20px 20px 20px 6px;background:var(--bg2);font-size:14.5px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;animation:xs-in .3s var(--e) both}
.xs-msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--saf),#f47318);color:#fff;border-radius:20px 20px 6px 20px}
.xs-msg img{border-radius:14px;max-height:280px;margin:-4px -8px 4px;max-width:calc(100% + 16px)}
.xs-msg .xs-msg-post{display:flex;gap:10px;align-items:center;margin:-2px -4px 6px;padding:6px;border-radius:12px;background:rgba(0,0,0,.08);font-size:13px}
.xs-msg .xs-msg-post img{width:46px;height:46px;object-fit:cover;margin:0;border-radius:8px}
.xs-msg-t{font:500 10.5px var(--mono);color:var(--faint);text-align:center;margin:12px 0 6px}
.xs-comp{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.xs-comp-in{flex:1;display:flex;align-items:center;border:1.5px solid var(--line2);border-radius:24px;padding:0 6px 0 16px;min-height:46px}
.xs-comp-in textarea{flex:1;border:0;outline:none;background:none;resize:none;max-height:120px;padding:12px 0;font-size:14.5px;line-height:1.35}
.xs-comp-in button{width:38px;height:38px;border-radius:50%;font-size:17px;color:var(--mute)}
.xs-comp-send{color:var(--saf)!important;font-weight:800;width:auto!important;padding:0 10px;font-size:14.5px!important}
.xs-cv-empty{flex:1;display:grid;place-items:center;text-align:center;color:var(--mute);padding:30px}
.xs-quick{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 12px}
.xs-quick button{border:1px solid var(--line2);border-radius:18px;padding:7px 13px;font-size:13px;font-weight:600}
@media (max-width:1000px){.xs-inbox{grid-template-columns:96px 1fr}.xs-tl-t,.xs-tl-h span,.xs-tl-i .xs-ud{display:none}.xs-tl-i{justify-content:center;padding:10px}}
@media (max-width:700px){
  .xs-inbox{display:block;height:auto}
  .xs-inbox.is-thread .xs-tl{display:none}
  .xs-inbox:not(.is-thread) .xs-cv{display:none}
  .xs-tl{border:0}.xs-tl-t,.xs-tl-h span,.xs-tl-i .xs-ud{display:block}.xs-tl-t{display:block}.xs-tl-i{justify-content:flex-start;padding:10px 16px}
  .xs-inbox.is-thread .xs-cv{position:fixed;inset:0;z-index:60;height:100vh;height:100dvh}
  .xs-comp{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------------ activity */
.xs-nl{display:flex;flex-direction:column}
.xs-n{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px}
.xs-n:hover{background:var(--bg2)}
.xs-n.is-new{background:rgba(232,93,4,.07)}
.xs-n .xs-av{--s:44px}
.xs-n-ic{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;box-shadow:0 0 0 2px var(--card)}
.xs-n-t{flex:1;font-size:14px;line-height:1.4;min-width:0}
.xs-n-t b{font-weight:800}
.xs-n-t small{color:var(--faint);font:500 11px var(--mono);margin-left:4px}
.xs-n-th{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none}
.xs-day{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:18px 12px 6px}

/* ------------------------------------------------------------ create */
.xs-cr{padding:24px}
.xs-cr-g{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:860px){.xs-cr-g{grid-template-columns:1fr}.xs-cr{padding:16px}}
.xs-drop{position:relative;border:2px dashed var(--line2);border-radius:20px;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;cursor:pointer;transition:border-color .2s,background .2s;background:var(--bg)}
.xs-drop:hover,.xs-drop.is-over{border-color:var(--saf);background:rgba(232,93,4,.05)}
.xs-drop i{font-size:40px;color:var(--saf)}
.xs-drop b{font:800 18px var(--disp)}
.xs-drop span{color:var(--mute);font-size:13.5px}
.xs-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.xs-pv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.xs-pv-i{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--bg2)}
.xs-pv-i img,.xs-pv-i video{width:100%;height:100%;object-fit:cover}
.xs-pv-i button{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:12px;display:grid;place-items:center}
.xs-pv-i .xs-pv-n{position:absolute;left:6px;top:6px;font:700 11px var(--mono);background:rgba(0,0,0,.6);color:#fff;border-radius:6px;padding:2px 6px}
.xs-pv-i .xs-pv-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.3)}
.xs-pv-i .xs-pv-bar b{display:block;height:100%;background:var(--saf);width:0;transition:width .2s}
.xs-pv-i.is-err{outline:2px solid #e03b3b}
.xs-pv-add{display:grid;place-items:center;border:2px dashed var(--line2);color:var(--mute);font-size:22px;cursor:pointer;position:relative}
.xs-pv-add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.xs-cnt{font:500 11px var(--mono);color:var(--faint);text-align:right;margin:-8px 0 12px}
.xs-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xs-prog{height:6px;border-radius:3px;background:var(--bg2);overflow:hidden;margin:0 0 12px}
.xs-prog b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--saf),var(--amber));transition:width .25s}
.xs-hint{font-size:13px;color:var(--mute);margin:0 0 14px}
.xs-gate{padding:36px 28px;text-align:center}
.xs-gate .xs-empty-ic{font-size:30px;width:80px;height:80px;display:grid;place-items:center;border-radius:24px;margin:0 auto 18px;background:linear-gradient(135deg,var(--saf),var(--amber));color:#fff;box-shadow:0 18px 40px -16px rgba(232,93,4,.7)}
.xs-gate h2{font:800 25px/1.15 var(--disp);font-stretch:110%;margin:0 0 10px}
.xs-gate p{color:var(--mute);max-width:420px;margin:0 auto 20px}
.xs-gate .xs-btn{margin:4px}
.xs-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 0;text-align:left}
.xs-perks div{padding:14px;border:1px solid var(--line);border-radius:16px;font-size:13px;color:var(--mute)}
.xs-perks b{display:block;color:var(--text);font-size:14px;margin:6px 0 2px}
.xs-perks i{color:var(--saf)}
@media (max-width:600px){.xs-perks{grid-template-columns:1fr}}

/* ------------------------------------------------------------ me */
.xs-acct{padding:22px;display:flex;gap:16px;align-items:center}
.xs-acct .xs-av{--s:64px}
.xs-acct h2{font:800 22px var(--disp);margin:0}
.xs-list{margin:16px 0 0}
.xs-li{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--line);font-weight:600}
.xs-li:hover{background:var(--bg2)}
.xs-li i.fa-chevron-right{margin-left:auto;color:var(--faint);font-size:12px}
.xs-li>i:first-child{width:22px;text-align:center;color:var(--saf)}

/* ------------------------------------------------------------ toast */
.xs-toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,30px);opacity:0;padding:12px 20px;border-radius:14px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;box-shadow:var(--shadow-lg);transition:all .35s var(--e);pointer-events:none;max-width:calc(100vw - 40px)}
.xs-toast.is-in{transform:translate(-50%,0);opacity:1}
.xs-toast.is-err{background:#b42318}
@media (max-width:700px){.xs-toast{bottom:calc(76px + env(safe-area-inset-bottom))}}

@media (prefers-reduced-motion:reduce){body.pg-social *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- members-only wall (logged-out visitors) ---------- */
.xs-app[data-state="wall"]{display:block;max-width:none;padding:0}
.xs-app[data-state="wall"] .xs-rail,.xs-app[data-state="wall"] .xs-top,.xs-app[data-state="wall"] .xs-tabs,.xs-app[data-state="wall"] .xs-side{display:none!important}
.xs-app[data-state="wall"] .xs-main{max-width:none;padding:0;margin:0}
.xs-wall{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(400px,.82fr);background:var(--bg)}
.xs-wl-hero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px;padding:56px clamp(32px,4.5vw,72px);color:#fff;background:radial-gradient(120% 90% at 0% 0%,#1b3f9c 0%,#0f2560 38%,#081233 72%,#050a1c 100%)}
.xs-wl-glow{position:absolute;z-index:-1;right:-14%;bottom:-22%;width:74%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,138,42,.62),rgba(232,93,4,.26) 52%,transparent);filter:blur(24px)}
.xs-wl-grid{position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(80% 70% at 40% 40%,#000 10%,transparent 100%);mask-image:radial-gradient(80% 70% at 40% 40%,#000 10%,transparent 100%)}
.xs-wl-copy{max-width:470px}
.xs-wl-kick{margin:0 0 20px}
.xs-wl-kick span{display:inline-block;font:600 11.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#ffb46b;border:1px solid rgba(255,180,107,.45);background:rgba(255,138,42,.1);border-radius:99px;padding:7px 13px}
.xs-wl-hero h2{margin:0;font:800 clamp(34px,3.7vw,56px)/1.02 var(--disp);font-stretch:112%;letter-spacing:-.03em;color:#fff}
.xs-wl-hero h2 em{font-style:normal;background:linear-gradient(100deg,#ffc24a,#ff8a2a 55%,#ff5a1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.xs-wl-lead{margin:18px 0 26px;font-size:17px;line-height:1.55;color:rgba(255,255,255,.78)}
.xs-wl-pts{list-style:none;margin:0;padding:0;display:grid;gap:13px;font-weight:600;font-size:15px}
.xs-wl-pts li{display:flex;align-items:center;gap:12px}
.xs-wl-pts i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#ffb46b;font-size:14px}
.xs-wl-proof{display:flex;align-items:center;gap:14px;margin:34px 0 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.75)}
.xs-wl-proof b{color:#fff}
.xs-wl-faces{display:flex;flex:none}
.xs-wl-faces img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid #0d2057;margin-left:-10px}
.xs-wl-faces img:first-child{margin-left:0}
.xs-wl-stage{position:relative;width:300px;flex:none}
.xs-wl-phone{position:relative;width:286px;height:590px;margin:0 auto;border-radius:46px;padding:10px;background:linear-gradient(150deg,#39446a,#0a0f20 38%,#1c2548);box-shadow:0 50px 90px -30px rgba(0,0,0,.75),inset 0 0 0 1.5px rgba(255,255,255,.16);transform:rotate(3deg)}
.xs-wl-isl{position:absolute;z-index:3;left:50%;top:19px;width:82px;height:22px;margin-left:-41px;border-radius:14px;background:#000}
.xs-wl-scr{height:100%;border-radius:37px;overflow:hidden;background:#fffdf8;color:#0b1b3f;display:flex;flex-direction:column}
.xs-wl-top{padding:40px 16px 8px;display:flex;align-items:center;gap:7px;font:800 16px var(--disp);letter-spacing:-.02em}
.xs-wl-top em{font:600 8.5px var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#e85d04;border:1px solid rgba(232,93,4,.5);border-radius:5px;padding:2px 5px}
.xs-wl-rings{display:flex;gap:9px;padding:6px 14px 12px;border-bottom:1px solid rgba(11,27,63,.08)}
.xs-wl-ring{width:44px;height:44px;flex:none;border-radius:50%;padding:2px;background:rgba(11,27,63,.14);transition:background .4s}
.xs-wl-ring.is-on{background:conic-gradient(#ff8a2a,#f5a524,#ef3d5a,#ff8a2a)}
.xs-wl-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff;border:2px solid #fffdf8;box-sizing:border-box;display:block}
.xs-wl-feed{position:relative;flex:1;min-height:0}
.xs-wl-slide{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s var(--e),transform .7s var(--e)}
.xs-wl-slide.is-on{opacity:1;transform:none}
.xs-wl-ph{display:flex;align-items:center;gap:9px;padding:10px 14px}
.xs-wl-av{width:32px;height:32px;flex:none;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(11,27,63,.1)}
.xs-wl-av img{width:100%;height:100%;object-fit:cover;display:block}
.xs-wl-nm{min-width:0;flex:1;line-height:1.2}
.xs-wl-nm b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xs-wl-nm small{font:500 10px var(--mono);color:#6b7590}
.xs-wl-ph>i{color:#6b7590;font-size:13px}
.xs-wl-img{position:relative;flex:1;min-height:0;background:#0b1b3f}
.xs-wl-img>img{width:100%;height:100%;object-fit:cover;display:block}
.xs-wl-cta{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;font:700 11.5px var(--body);color:#fff;background:linear-gradient(135deg,#ff8a2a,#e85d04);border-radius:99px;padding:8px 13px;box-shadow:0 8px 18px -6px rgba(232,93,4,.8)}
.xs-wl-act{display:flex;gap:15px;padding:11px 15px 16px;font-size:16px;color:#0b1b3f}
.xs-wl-act i:first-child{color:#ef3d5a}
.xs-wl-act i:last-child{margin-left:auto}
.xs-wl-float{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;padding:11px 15px 11px 12px;border-radius:16px;background:rgba(255,255,255,.96);color:#0b1b3f;box-shadow:0 22px 44px -18px rgba(0,0,0,.7);white-space:nowrap}
.xs-wl-float>i{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#fff1e3;color:#e85d04;font-size:15px}
.xs-wl-float.f2>i{background:#e3f9ec;color:#16a34a;font-size:18px}
.xs-wl-float b{display:block;font-size:13px;line-height:1.2}
.xs-wl-float small{font-size:11.5px;color:#6b7590}
.xs-wl-float.f1{top:318px;left:-96px}
.xs-wl-float.f2{bottom:86px;right:-34px}
.xs-wl-side{display:flex;flex-direction:column;justify-content:center;padding:40px clamp(24px,4vw,64px)}
.xs-wl-box{width:100%;max-width:400px;margin:0 auto}
.xs-wl-brand{display:flex;align-items:center;gap:11px;margin:0 0 30px}
.xs-wl-brand svg{width:42px;height:42px;border-radius:12px;box-shadow:0 10px 22px -10px rgba(11,27,63,.6)}
.xs-wl-brand span{display:flex;align-items:center;gap:8px}
.xs-wl-brand b{font:800 21px var(--disp);letter-spacing:-.02em}
.xs-wl-brand em{font:600 10px var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--saf);border:1px solid var(--saf);border-radius:6px;padding:3px 6px}
.xs-wl-h{margin:0 0 8px;font:800 30px/1.1 var(--disp);font-stretch:108%;letter-spacing:-.025em}
.xs-wl-sub{margin:0 0 24px;color:var(--mute);font-size:15px;line-height:1.5}
.xs-wl-box .xs-seg{margin:0 0 22px!important}
.xs-wl-box .xs-seg button{height:42px}
.xs-wl-box .xs-in{height:50px;padding:0 15px;border-radius:14px;font-size:15.5px}
.xs-wl-box .xs-btn-block{height:52px;border-radius:14px;font-size:16px;margin-top:6px}
.xs-wl-pw{position:relative;display:block}
.xs-wl-pw .xs-in{padding-right:48px}
.xs-wl-eye{position:absolute;right:6px;top:6px;width:38px;height:38px;border-radius:10px;color:var(--mute)}
.xs-wl-eye:hover{background:var(--bg2);color:var(--text)}
.xs-wl-safe{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 0;font-size:13px;color:var(--mute)}
.xs-wl-safe i{color:#16a34a;font-size:12px}
.xs-wall-foot{text-align:center;margin:26px auto 0;max-width:400px;line-height:1.7}
@media (max-width:1180px){.xs-wl-hero{grid-template-columns:minmax(0,1fr);justify-items:start}.xs-wl-stage{display:none}}
@media (max-width:860px){
  .xs-wall{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .xs-wl-hero{padding:34px 22px 30px}
  .xs-wl-hero h2{font-size:30px}
  .xs-wl-lead{font-size:15px;margin:12px 0 0}
  .xs-wl-pts{display:none}
  .xs-wl-proof{margin:20px 0 0;padding:16px 0 0}
  .xs-wl-side{justify-content:flex-start;padding:28px 20px 36px}
  .xs-wl-brand{display:none}
  .xs-wl-h{font-size:26px}
}
@media (prefers-reduced-motion:no-preference){.xs-wl-phone{animation:xsFloat 7s ease-in-out infinite}.xs-wl-float.f1{animation:xsBob 6s ease-in-out infinite}.xs-wl-float.f2{animation:xsBob 6s ease-in-out -3s infinite}@keyframes xsFloat{50%{transform:rotate(3deg) translateY(-12px)}}@keyframes xsBob{50%{transform:translateY(-8px)}}}