/* GoIRL static site: shared rules the build does not generate per page.
   Ben's pages carry their styles inline; these rules only cover state that
   used to live in the React runtime (menu, nav current item, pickers,
   carousel arrows, Join selection, Login focus). !important is needed to
   beat the inline declarations. */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:90px}
[data-if]{display:contents}
[data-if][hidden]{display:none}
img{max-width:100%}
.brand{text-transform:none !important}
[data-hx-view]::-webkit-scrollbar{display:none}

/* --- header: current section + mobile menu ------------------------------ */
header nav a[aria-current="false"]{font-weight:600 !important}
header nav a[aria-current="page"]{font-weight:800 !important}
header nav a[aria-current="false"]>span:first-child{opacity:0 !important;margin-left:-13px !important}
header nav a[aria-current="page"]>span:first-child{opacity:1 !important;margin-left:0 !important}
[data-if="menuOpen"] a.is-current{color:#FFA500 !important}
.menu-open [data-on="toggleMenu"]{opacity:1 !important;pointer-events:auto !important;transform:scale(1) !important}
.menu-open [data-on="toggleMenu"] span:first-child{transform:translateY(0) rotate(45deg) !important}
.menu-open [data-on="toggleMenu"] span:last-child{transform:translateY(0) rotate(-45deg) !important}
.menu-open{overflow:hidden}

/* --- pay plan section chips --------------------------------------------- */
nav[aria-label="Pay plan sections"] a[aria-current="page"]{color:#073568 !important;background:#FFA500 !important}

/* --- pay plan rank pickers ---------------------------------------------- */
button[role="tab"][aria-selected="true"]{background:#0D2F5A !important;color:#fff !important;box-shadow:0 6px 14px -6px rgba(13,47,90,0.6) !important}
button[role="tab"][aria-selected="false"]{background:transparent !important;color:#3A5272 !important;box-shadow:none !important}
table th.on{background:#F5A400 !important;color:#0D2F5A !important}
table th.off{background:#0D2F5A !important;color:#fff !important}
table td.on{background:rgba(245,164,0,0.14) !important;font-weight:800 !important}
table td.off{background:transparent !important;font-weight:600 !important}
table td.on.dash,table td.off.dash{font-weight:400 !important}
table tr.on{background:rgba(245,164,0,0.14) !important}
table tr.on th{background:#FEF3DC !important}
table tr.off{background:rgba(245,164,0,0) !important}
table tr.off th{background:#fff !important}

/* --- experiences carousel arrows ---------------------------------------- */
.hx-arrow{position:absolute;top:50%;z-index:3;width:56px;height:56px;margin-top:-48px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,0.94);color:#0D2F5A;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -10px rgba(13,47,90,0.5);transition:background .25s,transform .25s,opacity .25s}
.hx-arrow:hover{background:#F5A400;transform:scale(1.06)}
.hx-arrow[disabled]{opacity:0.35;cursor:default;transform:none;background:rgba(255,255,255,0.94)}
.hx-prev{left:clamp(10px,2vw,28px)}
.hx-next{right:clamp(10px,2vw,28px)}
@media (max-width:759px){.hx-arrow{width:44px;height:44px;font-size:18px}}
[data-hx-pn]{padding:6px 4px;margin:-6px -4px;border-radius:6px}
[data-hx-pn]:hover{color:#D98F00 !important}
[data-hx-pn]:focus-visible{outline:2px solid #F5A400;outline-offset:2px}

/* --- join: membership selection ----------------------------------------- */
#memberships article{box-shadow:0 0 0 0px #0D2F5A,0 30px 60px -36px rgba(13,47,90,0.45) !important}
#memberships article.vip{box-shadow:0 0 0 1px #F5A400,0 40px 80px -36px rgba(6,42,82,0.75) !important}
#memberships article.sel{box-shadow:0 0 0 3px #0D2F5A,0 30px 60px -36px rgba(13,47,90,0.45) !important}
#memberships article.vip.sel{box-shadow:0 0 0 3px #F5A400,0 40px 80px -36px rgba(6,42,82,0.75) !important}
#memberships article .sel-badge{display:none !important}
#memberships article.sel .sel-badge{display:inline-flex !important}
[data-on="toggleConnMonthly"]{border-color:rgba(13,47,90,0.3) !important;background:transparent !important}
[data-on="toggleConnMonthly"][aria-pressed="true"]{border-color:#D98F00 !important;background:#FFF6E0 !important}
[data-on="toggleConnMonthly"]>span:first-child{background:transparent !important}
[data-on="toggleConnMonthly"][aria-pressed="true"]>span:first-child{background:#0D2F5A !important}
[data-on="toggleConnVip"]{border-color:rgba(255,255,255,0.3) !important;background:transparent !important}
[data-on="toggleConnVip"][aria-pressed="true"]{border-color:#F5A400 !important;background:rgba(245,164,0,0.14) !important}
[data-on="toggleConnVip"]>span:first-child{background:transparent !important}
[data-on="toggleConnVip"][aria-pressed="true"]>span:first-child{background:#F5A400 !important}
[role="radio"][aria-checked="false"]{background:transparent !important;color:#0D2F5A !important}
[role="radio"][aria-checked="true"]{background:#0D2F5A !important;color:#fff !important}
[data-on="segVip"][aria-checked="true"]{color:#F5A400 !important}

/* --- login ---------------------------------------------------------------- */
#goirl-username:focus,#goirl-password:focus,#goirl-reset:focus{border-color:#F5A400 !important;background:#fff !important;box-shadow:0 0 0 4px rgba(245,164,0,0.18) !important}
#goirl-username[aria-invalid="true"],#goirl-password[aria-invalid="true"],#goirl-reset[aria-invalid="true"]{border-color:#D9534F !important}
#goirl-username[aria-invalid="true"]:focus,#goirl-password[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(217,83,79,0.15) !important}
div:focus-within>svg[stroke]{stroke:#D98F00 !important}
input[type="checkbox"]:not(:checked)+span{background:#fff !important;border-color:#C9C2B2 !important}
input[type="checkbox"]:not(:checked)+span svg{opacity:0 !important}
input[type="checkbox"]:focus-visible+span{box-shadow:0 0 0 3px rgba(245,164,0,0.45) !important}

/* --- responsive guards --------------------------------------------------- */
/* clip (not hidden) so position:sticky inside the page keeps working */
/* not on html/body: an overflow value on the root makes iOS Safari treat the
   page as a scroll container and position:sticky lags a frame behind the
   scroll (the "shaky cards" video). Clip the page blocks instead. */
/* Never on an ancestor of the sticky How cards (#how and main): iOS Safari
   updates sticky children of a clipping ancestor on the main thread, a frame
   behind the scroll, which reads as shaking. Ben's own overflow-x:clip on
   #how is moved to its heading block, where the IRL letters fly in. */
footer,body>section,[data-about-root]>section,[data-join-root]>section,main>section:not(#how),#how>div>div:first-child{overflow-x:clip}
#how{overflow-x:visible !important}
@supports not (overflow-x:clip){footer,body>section,[data-about-root]>section,[data-join-root]>section,main>section:not(#how),#how>div>div:first-child{overflow-x:hidden}}
@media (hover:none){[data-how-wrap]{perspective:none !important}}
/* phones: the header pill (logo + Join) must fit beside the burger button */
@media (max-width:759px){
  header>div:first-child{padding-right:calc(16px + 60px) !important}
  header>div:first-child>div{padding-left:14px !important;gap:10px !important;height:54px !important}
  header>div:first-child>div>a[href="/join/"]{padding:0 12px !important;font-size:11px !important;height:40px !important;gap:6px !important}
  header>div:first-child>div>a[href="/join/"]>span{font-size:12px !important}
}
@media (max-width:379px){
  header>div:first-child>div>a[href="/join/"]{padding:0 10px !important;font-size:10px !important}
  header>div:first-child>div>a[aria-label="GoIRL home"] img{height:24px !important}
  h1,h2{overflow-wrap:anywhere}
}

/* --- how it works: card progress bars stacked vertically (cards stack) --- */
[data-how-card]>div:first-child>div:first-child{align-items:flex-start !important}
[data-how-card]>div:first-child>div:first-child>div{flex-direction:column;gap:5px !important}
[data-how-card]>div:first-child>div:first-child>div>span{width:4px !important;height:18px !important}

/* pay plan hero eyebrow: Ben set a fixed 36px; on phones "Compensation" did
   not fit and was clipped by the section's overflow */
[data-pp-root] div[style*="font-size:36px"]{font-size:clamp(20px,5.5vw,36px) !important;flex-wrap:wrap}

/* pay plan tables on phones: smaller type and padding so more fits across */
@media (max-width:759px){
  [data-pp-root] table{font-size:13px !important;min-width:0 !important}
  [data-pp-root] table th,[data-pp-root] table td{padding:10px 8px !important;font-size:13px !important}
  [data-pp-root] table th[scope="row"]{font-size:15px !important;padding-left:14px !important;padding-right:10px !important;white-space:nowrap}
  [data-pp-root] table thead th{font-size:10px !important;letter-spacing:0.08em !important;padding:12px 6px !important}
  [data-pp-root] table th[scope="row"] span>span:first-child{width:8px !important;height:8px !important}
  [data-pp-root] table tr:last-child td[style*="font-size:24px"]{font-size:15px !important}
  [data-pp-root] #matching table{min-width:440px !important}
  [data-pp-root] #fast-start table{min-width:520px !important}
  [data-pp-root] #matrix-earnings table{min-width:600px !important}
}