/* ============================================================
   Fanded — shared site chrome + components (used on every page)
   Pairs with fanded.css (design tokens, glass, buttons, tags).
   ============================================================ */

.wrap{max-width:1140px;margin:0 auto;padding:0 28px}

/* warm ambient for talent-facing pages (overrides gradient stops) */
body.amb-warm{
  --amb-a:#E7A468; --amb-b:#C76C7E; --amb-c:#6B4E9E;
  --amb-base1:#C2746E; --amb-base2:#8B5790; --amb-base3:#574785;
}

/* ---- TOP NAV (shared) ---- */
.topnav{position:sticky;top:0;z-index:60;background:rgba(8,18,24,0.5);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.topnav-in{max-width:1140px;margin:0 auto;padding:0 28px;height:70px;display:flex;align-items:center;gap:22px}
.navbrand{display:flex;align-items:center;gap:10px}
.navbrand .mark{width:34px;height:34px;flex:none;display:block;object-fit:contain}
.navbrand .nm{font-weight:700;font-size:21px;letter-spacing:-0.03em;color:#fff}
.navbrand .beta{font-size:10px;font-weight:600;color:var(--ink-3);align-self:flex-end;margin:0 0 5px -3px}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:8px}
.navlinks a.tlink{padding:8px 14px;border-radius:10px;font-size:14.5px;color:var(--ink-2);transition:background .14s,color .14s;white-space:nowrap}
.navlinks a.tlink:hover{background:rgba(255,255,255,.08);color:#fff}
.navlinks a.tlink.on{color:#fff;background:rgba(255,255,255,.08)}
.navcta{flex:none}
.navtoggle{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line-2);background:var(--glass-hi);flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.navtoggle span{width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:720px){
  .topnav-in{padding:0 16px;gap:12px}
  .navcta{margin-left:auto}
  .navtoggle{display:flex}
  .navlinks{position:fixed;top:70px;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:6px;padding:14px 18px 20px;
    background:rgba(8,18,24,0.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
    transform:translateY(-14px);opacity:0;pointer-events:none;transition:transform .2s ease,opacity .2s ease}
  .navlinks.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .navlinks a.tlink{padding:13px 14px;font-size:16px;border-radius:11px}
}

/* ---- FOOTER (shared) ---- */
.foot{margin-top:90px;border-top:1px solid var(--line)}
.foot-in{max-width:1140px;margin:0 auto;padding:34px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot-in .l{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3)}
.foot-in .l a:hover{color:#fff}
.foot-in .c{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-4)}

/* ---- explainer scaffolding ---- */
.phero{padding:64px 0 0;max-width:820px}
.phero.center{margin:0 auto;text-align:center}
.phero h1{margin:18px 0 16px;font-weight:700;font-size:52px;line-height:1.04;letter-spacing:-0.035em;color:#fff;text-wrap:balance}
.phero h1 em{font-style:normal;background:linear-gradient(90deg,#8FB8FF,#C7B4FF);-webkit-background-clip:text;background-clip:text;color:transparent}
body.amb-warm .phero h1 em{background:linear-gradient(90deg,#FFD2A6,#F4A9C0);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero .lede{font-size:19px;color:var(--ink-2);line-height:1.55;max-width:54ch;letter-spacing:-0.005em;text-wrap:pretty;margin:0 0 28px}
.phero.center .lede{margin-left:auto;margin-right:auto}
.cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.phero.center .cta-row{justify-content:center}

.sec{padding:72px 0 0}
.sec-head{max-width:680px;margin-bottom:30px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin:13px 0 12px;font-size:32px;font-weight:700;letter-spacing:-0.03em;color:#fff;line-height:1.1;text-wrap:balance}
.sec-head p{margin:0;font-size:17px;color:var(--ink-2);line-height:1.55}

/* alternating media/text rows */
.exrow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:44px}
.exrow.rev .ex-media{order:2}
.ex-media{display:flex;justify-content:center;align-items:center;padding:6px}
.ex-num{font-size:13px;font-weight:700;letter-spacing:0.04em;color:var(--sky);font-variant-numeric:tabular-nums}
body.amb-warm .ex-num{color:#F4C68A}
.ex-copy h3{margin:13px 0 10px;font-size:24px;font-weight:700;letter-spacing:-0.02em;color:#fff;line-height:1.15}
.ex-copy p{margin:0;font-size:16px;color:var(--ink-2);line-height:1.6;max-width:46ch}
.ex-copy .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ex-copy .chips span{font-size:12.5px;color:var(--ink-2);padding:6px 12px;border-radius:99px;background:var(--glass-hi);border:1px solid var(--line)}

/* bottom cross-link band */
.crossband{margin-top:64px;padding:40px 38px;text-align:center}
.crossband h2{font-size:28px;font-weight:700;letter-spacing:-0.025em;color:#fff;margin-bottom:10px;text-wrap:balance}
.crossband p{font-size:16px;color:var(--ink-2);line-height:1.55;max-width:48ch;margin:0 auto 22px}
.crossband .cta-row{justify-content:center}

/* ============================================================
   iPhone-frame mockups (shared with homepage)
   ============================================================ */
.phone{width:262px;flex:none;border-radius:42px;background:#0b0b0c;padding:10px;position:relative;box-shadow:0 40px 70px -34px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.phone::after{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:23px;border-radius:14px;background:#000;z-index:6}
.phscreen{border-radius:33px;overflow:hidden;height:524px;position:relative;display:flex;flex-direction:column;background:radial-gradient(125% 70% at 50% -5%,#6E5384,#2b2331 58%,#221c29)}
.phsb{height:40px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px 7px;font-size:12px;font-weight:700;color:#fff;z-index:3}
.phbody{flex:1;overflow-y:auto;padding:2px 14px 20px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none}
.phbody::-webkit-scrollbar{display:none}
.ph-cover{border-radius:16px;padding:13px;min-height:90px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(150deg,#C2746E,#8B5790);position:relative;overflow:hidden}
.ph-cover .nmm{font-size:16px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.ph-cover .tg{position:absolute;top:11px;left:11px;font-size:8.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.3);padding:3px 7px;border-radius:6px}
.ph-cover .sub2{font-size:10px;color:rgba(255,255,255,.85);margin-top:2px}
.ph-btn{height:38px;border-radius:11px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.ph-btn.ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.ph-card{border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:12px 13px}
.ph-h{font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.ph-sub{font-size:11px;color:rgba(255,255,255,.6);line-height:1.4}
.ph-lbl{font-size:9.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ph-row{display:flex;align-items:center;gap:10px}
.ph-row + .ph-row{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.ph-row .dt{flex:none;width:34px;text-align:center;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:4px 0}
.ph-row .dt .m{display:block;font-size:8px;font-weight:700;color:#F0B27A;letter-spacing:.06em}
.ph-row .dt .d{display:block;font-size:14px;font-weight:700;color:#fff;line-height:1.05}
.ph-row .mn{flex:1;min-width:0}
.ph-row .mn .t{font-size:12px;font-weight:600;color:#fff}
.ph-row .mn .s{font-size:10px;color:rgba(255,255,255,.6);margin-top:1px}
.ph-row .pr{font-size:12.5px;font-weight:700;color:#fff;text-align:right;white-space:nowrap}
.ph-row .pr .lim{display:block;font-size:8.5px;color:#F0B27A;font-weight:600}
.ph-pass{border-radius:14px;padding:14px;color:#EAF0FF;background:linear-gradient(150deg,#2E6CF0,#3A57D8 48%,#7B5CF6);position:relative;overflow:hidden;box-shadow:0 14px 30px -16px rgba(20,40,120,.8)}
.ph-pass .pr1{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700}
.ph-pass .lo{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,240,255,.7)}
.ph-pass .who2{font-size:16px;font-weight:700;letter-spacing:-0.01em}
.ph-pass .bar{display:flex;gap:2px;align-items:flex-end;height:16px}
.ph-pass .bar i{width:2px;background:rgba(234,240,255,.85)}
.ph-collect{border-radius:14px;aspect-ratio:1.2/1;display:flex;flex-direction:column;justify-content:space-between;padding:14px;background:linear-gradient(145deg,#d3b06f,#8a6a3a);position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 30px -16px rgba(80,60,20,.7)}
.ph-collect::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.45),transparent 52%)}
.ph-collect .cl{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(40,28,10,.65);position:relative}
.ph-collect .ct{font-size:17px;font-weight:700;color:#2a1d08;letter-spacing:-0.01em;position:relative;margin-top:2px}
.ph-collect .cn{font-size:13px;font-weight:700;color:#2a1d08;position:relative}
.ph-ind{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:98px;height:4px;border-radius:3px;background:rgba(255,255,255,.4);z-index:4}

@media (max-width:860px){
  .phero h1{font-size:40px}
  .exrow{grid-template-columns:1fr;gap:24px}
  .exrow.rev .ex-media{order:0}
  .sec-head h2{font-size:27px}
}
@media (max-width:520px){.phone{width:240px}.phscreen{height:486px}}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .phero{padding:42px 0 0}
  .phero h1{font-size:33px}
  .foot-in{padding:30px 16px}
}