:root{
      --ink:#0d1b3d; --muted:#5a6b8c; --line:#e3eaf6;
      --blue:#155fea; --teal:#10c8d6; --navy:#1424b8;
      --bg:#f7faff;
      --card:#fff; --soft:#f4f7fd; --code:#eef2fb; --input:#fbfdff;
      --grad:linear-gradient(100deg,var(--navy),var(--blue) 55%,var(--teal));
    }
    *{box-sizing:border-box;margin:0}
    img,video,canvas{max-width:100%;height:auto}
    body{font:500 1rem/1.65 Poppins,system-ui,sans-serif;color:var(--ink);background:var(--bg);
      background-image:radial-gradient(900px 480px at 12% -8%, #155fea14, transparent 60%),
                       radial-gradient(800px 420px at 95% 4%, #10c8d61a, transparent 55%),
                       radial-gradient(700px 500px at 50% 108%, #1424b810, transparent 60%);}
    a{color:var(--blue);text-decoration:none}
    header{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:1rem 1.4rem}
    .brand img{height:60px;display:block}
    .session{color:var(--muted);font-size:.9rem;display:flex;gap:.7rem;align-items:center;min-width:0}
    .session b{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
    nav.menu{display:flex;gap:1.4rem;font-size:.95rem;font-weight:600}
    nav.menu a{color:var(--ink)}
    nav.menu a:hover{color:var(--blue)}
    html{scroll-behavior:smooth}
    @media(max-width:640px){nav.menu{display:none}}
    .cta.signin{padding:.55rem 1.2rem;font-size:.92rem}
    .brand{display:flex;align-items:center;gap:.5rem}
    .beta-chip{font-size:.65rem;font-weight:800;letter-spacing:.08em;background:var(--grad);color:#fff;border-radius:6px;padding:.15rem .45rem}
    /* Mobile burger: <details> dropdown mirroring the desktop nav (no JS). */
    .mobnav{display:none;position:relative}
    .mobnav>summary{list-style:none;cursor:pointer;padding:.45rem;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--ink)}
    .mobnav>summary::-webkit-details-marker{display:none}
    .mobnav>nav{position:absolute;top:calc(100% + .4rem);right:0;z-index:30;display:flex;flex-direction:column;min-width:12rem;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #0d1b3d24;overflow:hidden}
    .mobnav>nav a{padding:.7rem 1rem;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
    .mobnav>nav a:last-child{border-bottom:0}
    .mobnav>nav a.current{color:var(--blue)}
    [dir=rtl] .mobnav>nav{right:auto;left:0}
    @media(max-width:640px){.mobnav{display:block}.brand img{height:42px}header{padding:.7rem .9rem;flex-wrap:wrap;row-gap:.4rem}header .right{gap:.5rem;flex-wrap:wrap;justify-content:flex-end;min-width:0}.session{font-size:.78rem;gap:.4rem}.session b{max-width:9ch}}
    /* Utility classes referenced by templates (were missing entirely). */
    .muted{color:var(--muted);font-size:.9rem}
    .btn{font:inherit;font-weight:600;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:.55rem 1rem;cursor:pointer}
    .btn-ok{background:var(--grad);color:#fff;border:0;box-shadow:0 6px 16px #155fea33}
    a.tile{color:inherit;display:block}
    .toc-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.9rem 0 0}
    .toc-chips a{border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;font-size:.9rem;background:var(--card);color:var(--ink);font-weight:600}
    .toc-chips a:hover{color:var(--blue);border-color:#155fea3d}
    /* Sign-in chooser: one button per identity provider + email fallback. */
    .signin-options{max-width:420px;margin:1.4rem auto 0;display:flex;flex-direction:column;gap:.7rem}
    .provider{display:block;padding:.85rem 1rem;border-radius:12px;font-weight:700;text-align:center;
      border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:1rem;transition:transform .12s}
    .provider:hover{transform:translateY(-1px)}
    .provider.steam{background:#171a21;color:#fff;border-color:#2a475e}
    .provider.bnet{background:#0d3e63;color:#fff;border-color:#148eff55}
    .provider.riot{background:#d13639;color:#fff;border-color:#d1363955}
    .provider.epic{background:#2f2f2f;color:#fff;border-color:#555}
    .signin-or{color:var(--muted);font-size:.85rem;text-align:center}
    .signin-email{display:flex;gap:.5rem}
    .signin-email input{flex:1;min-width:0;padding:.7rem .9rem;border-radius:12px;border:1.5px solid var(--line);background:var(--input);color:var(--ink);font:inherit}
    @media(max-width:640px){.signin-email{flex-direction:column}.signin-email .cta{width:100%}.signin-options{padding:0 .2rem}}
    /* CSS-only tab panes (pricing): hidden radios drive visibility. */
    .tabbar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1.1rem 0 0}
    .tabbar label{cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:.5rem 1.15rem;font-weight:700;font-size:.95rem;background:var(--card);color:var(--ink);transition:transform .12s}
    .tabbar label:hover{transform:translateY(-1px)}
    .tabs>.tabpane{display:none}
    #tab-studios:checked~.tabbar label[for=tab-studios],#tab-players:checked~.tabbar label[for=tab-players],
    #tab-organizers:checked~.tabbar label[for=tab-organizers],
    #tab-passes:checked~.tabbar label[for=tab-passes],#tab-casters:checked~.tabbar label[for=tab-casters]{
      background:var(--grad);color:#fff;border-color:transparent}
    #tab-studios:checked~#studios,#tab-players:checked~#players,#tab-organizers:checked~#organizers,
    #tab-passes:checked~#passes,#tab-casters:checked~#casters{display:block}
    header .right{display:flex;align-items:center;gap:1rem}
    .langpick{position:relative}
    .langpick>summary{list-style:none;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink);padding:.35rem .6rem;border:1px solid var(--line);border-radius:8px}
    .langpick>summary::-webkit-details-marker{display:none}
    .langpick>summary::after{content:' ▾';color:var(--muted)}
    .langpick>form{position:absolute;top:calc(100% + .3rem);right:0;z-index:20;display:flex;flex-direction:column;min-width:8rem;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 22px #0d1b3d1f;overflow:hidden}
    .langpick .langopt{background:none;border:0;cursor:pointer;font:inherit;font-size:.9rem;color:var(--ink);text-align:left;padding:.5rem .8rem}
    .langpick .langopt:hover:not(:disabled){background:var(--soft);color:var(--blue)}
    .langpick .langopt.current{color:var(--blue);font-weight:700}
    .linkish{background:none;border:0;color:var(--blue);cursor:pointer;font:inherit;padding:0}
    main{max-width:1080px;margin:0 auto;padding:1rem 1.4rem 4rem;text-align:center}
    h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:1.6rem 0 1rem}
    .neon{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
    .lede{font-size:1.15rem;color:var(--muted);max-width:640px;margin:0 auto 1.8rem}
    .cta{display:inline-block;background:var(--grad);color:#fff;font-weight:700;font-size:1.05rem;
      padding:.95rem 2rem;border-radius:14px;border:0;cursor:pointer;
      box-shadow:0 10px 28px #155fea3d,0 3px 8px #10c8d62e;transition:transform .15s,box-shadow .15s}
    .cta:hover{transform:translateY(-2px);box-shadow:0 14px 36px #155fea52}
    .ghost{color:var(--muted);font-size:.85rem;margin-top:.8rem}
    section{margin-top:4.5rem}
    .kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
    h2{font-size:1.9rem;font-weight:800;letter-spacing:-.01em;margin:.3rem 0 1.6rem}
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;text-align:left}
    .tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.2rem;
      box-shadow:0 6px 24px #0d1b3d0a;transition:transform .15s,box-shadow .15s}
    .tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px #155fea1f}
    .tile .ico{font-size:1.5rem}
    .tile h3{font-size:1.02rem;font-weight:700;margin:.5rem 0 .25rem}
    .tile p{color:var(--muted);font-size:.9rem}
    #paths{margin-top:1.9rem;display:flex;flex-direction:column;gap:.9rem;text-align:left}
    @media(max-width:640px){
      h1{margin-top:.9rem}
      .lede{font-size:1.02rem;margin-bottom:1rem}
      #paths{margin-top:1rem}
      .path{padding:.7rem .8rem}
      .path .badge{width:38px;height:38px;font-size:1.15rem}
    }
    .path{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;border:1px solid var(--line);
      border-radius:16px;padding:.9rem 1.1rem;color:inherit;box-shadow:0 6px 24px #0d1b3d0a;transition:transform .15s,box-shadow .15s}
    .path:hover{transform:translateY(-2px);box-shadow:0 12px 30px #155fea1f}
    .path.studio{background:#155fea0d}
    .path.org{background:#10c8d60f}
    .path.player{background:#7c3aed0d}
    .path .badge{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;
      box-shadow:0 4px 12px #0d1b3d1f}
    .path.studio .badge{background:linear-gradient(135deg,var(--navy),var(--blue))}
    .path.org .badge{background:linear-gradient(135deg,#0aa7b4,var(--teal))}
    .path.player .badge{background:linear-gradient(135deg,#6d28d9,#a78bfa)}
    .path .who{font-weight:800;font-size:.98rem}
    .path .arr{flex:none;width:22px;height:11px;color:#9db1d9}
    [dir=rtl] .path .arr{transform:scaleX(-1)}
    .path .node{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.32rem .75rem;font-size:.85rem;color:var(--muted)}
    .path .node.mono{font-family:ui-monospace,Consolas,monospace;color:var(--blue)}
    .path.studio .node.last{color:var(--blue);border-color:#155fea3d;font-weight:600}
    .path.org .node.last{color:#0a8894;border-color:#10c8d64d;font-weight:600}
    .path.player .node.last{color:#6d28d9;border-color:#7c3aed3d;font-weight:600}
    .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;counter-reset:s}
    .step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.2rem;text-align:left;position:relative;box-shadow:0 6px 24px #0d1b3d0a}
    .step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:1.1rem;
      width:30px;height:30px;border-radius:10px;background:var(--grad);color:#fff;font-weight:800;
      display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px #155fea45}
    .step h3{font-size:1rem;font-weight:700;margin:.4rem 0 .3rem}
    .step p{color:var(--muted);font-size:.9rem}
    .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
    /* Player plans — the Braket MVP tile must read 2x at EVERY viewport:
       wide:   1fr 2fr 1fr  (one row, MVP exactly double its neighbours)
       medium: 2-col grid, MVP spans the FULL row above the two 1x tiles
       narrow: single column (phones) — the .hot gradient border carries the emphasis.
       The old single 900px collapse made MVP equal-width at zoomed/half-screen
       desktop viewports, which read as "not 2x". */
    .plans.plans-wide{grid-template-columns:1fr 2fr 1fr}
    @media (max-width:900px){
      .plans.plans-wide{grid-template-columns:1fr 1fr}
      .plans.plans-wide .plan-2x{grid-column:1 / -1;order:-1}
    }
    @media (max-width:560px){
      .plans.plans-wide{grid-template-columns:1fr}
      .plans.plans-wide .plan-2x{grid-column:auto}
    }
    .plan{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.3rem;box-shadow:0 6px 24px #0d1b3d0a;text-align:left}
    .plan.hot{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;box-shadow:0 14px 34px #155fea24}
    .plan .name{font-weight:700}
    .plan .price{font-size:1.9rem;font-weight:800;margin:.2rem 0}
    .plan .price small{font-size:.85rem;font-weight:600;color:var(--muted)}
    .plan ul{list-style:none;padding:0;margin:.7rem 0 0;color:var(--muted);font-size:.88rem}
    .plan li{padding:.18rem 0}
    .plan li::before{content:"✓ ";color:var(--teal);font-weight:700}
    .band{margin-top:4.5rem;background:var(--grad);border-radius:20px;color:#fff;padding:2.6rem 1.6rem;box-shadow:0 18px 44px #155fea3d}
    .band h2{color:#fff;margin-bottom:.4rem}
    .band p{opacity:.9;margin-bottom:1.4rem}
    .band .cta{background:#fff;color:var(--navy);box-shadow:0 8px 22px #0d1b3d33}
    .formwrap{max-width:480px;margin:2.5rem auto 0;text-align:left}
    .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.7rem 1.5rem;box-shadow:0 16px 40px #0d1b3d12}
    label{display:block;margin:.85rem 0;font-size:.9rem;font-weight:600;color:var(--ink)}
    .card select{width:100%;max-width:100%;padding:.65rem .8rem;margin-top:.3rem;border-radius:10px;border:1.5px solid var(--line);background:var(--input);color:var(--ink);font:inherit}
    input{width:100%;padding:.65rem .8rem;margin-top:.3rem;border-radius:10px;border:1.5px solid var(--line);background:var(--input);color:var(--ink);font:inherit}
    input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #155fea22}
    .hint{color:var(--muted);font-size:.82rem;font-weight:500}
    .flash{border-radius:12px;padding:.7rem 1rem;margin:1.2rem auto;max-width:560px;font-weight:600;font-size:.92rem}
    .flash.err{background:#fdeef0;color:#c22a3e;border:1px solid #f5c6cd}
    .flash.ok{background:#e9fbf3;color:#0e7a4d;border:1px solid #bfead6}
    .personas{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
    .personas button{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:.45rem .9rem;cursor:pointer;font:inherit}
    footer{text-align:center;color:var(--muted);font-size:.82rem;padding:2rem 1rem;border-top:1px solid var(--line);margin-top:3rem}
    /* Docs/About in the footer exist for MOBILE only — desktop has the header nav
       (which is display:none under 640px). */
    .footlinks{display:none}
    @media(max-width:640px){.footlinks{display:inline}}
    .plan-cta{display:block;text-align:center;margin-top:1rem;font-size:.95rem;padding:.6rem 1rem}
    .plan-cta.ghost-cta{background:var(--card);color:var(--blue);border:1.5px solid var(--line);box-shadow:none;margin-top:.55rem}
    .plan-year{display:block;text-align:center;margin-top:.5rem;font-size:.82rem;color:var(--muted)}
    /* Showcase: compact tiles, 2 per row up to a max of 4, always centered.
       max-width caps the row at four ~180px tiles; flex-wrap + justify-center
       keeps partial rows (2 or 3 arenas) centered too. */
    /* Showcase tiles are 1.5x the pricing-tile width (~250px → ~375px), wrapping
       and centered — max-width caps a row at two tiles. */
    .showcase{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;max-width:790px;margin:0 auto 1.6rem}
    .showcase .arena-feature{flex:1 1 375px;max-width:375px;min-width:260px}
    .arena-feature{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 26px #155fea14;transition:transform .15s,box-shadow .15s;text-align:left}
    .arena-feature:hover{transform:translateY(-3px);box-shadow:0 16px 38px #155fea2b}
    .arena-feature img,.arena-card img{width:100%;aspect-ratio:460/215;object-fit:cover;display:block}
    .arena-feature-body,.arena-card-body{padding:.9rem 1rem}
    .arena-feature h3,.arena-card h3{font-size:1.05rem;font-weight:700;margin:0 0 .2rem}
    .arena-stat{font-size:.82rem;color:var(--blue);font-weight:600}
    .arena-search{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:1rem 0 1.6rem}
    .arena-search input,.arena-search select{padding:.55rem .7rem;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit}
    .arena-search input{min-width:220px}
    .arena-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;text-align:left}
    .arena-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 6px 20px #0d1b3d0d;transition:transform .15s,box-shadow .15s}
    .arena-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px #155fea1f}

/* --- Network player profile --- */
.netplayer-head { display: flex; align-items: center; gap: 1.2rem; margin: 1rem 0 1.5rem; }
.netplayer-avatar { width: 84px; height: 84px; border-radius: 14px; }
.net-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; max-width: 640px; }

/* --- Features subpage --- */
.featgroup { margin: 2.4rem 0; }
.featgroup-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.featgroup-head h2 { margin: 0; border: 0; }
.featgroup-ico { font-size: 1.5rem; width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, #eef2fb, #dce7fb); box-shadow: inset 0 0 0 1px #ffffff; }
.featlist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.featlist li { background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 1.05rem 1.15rem 1.1rem; position: relative; overflow: hidden; transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease; }
.featlist li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--blue, #155fea), var(--green, #10c8d6)); opacity: .0; transition: opacity .13s ease; }
.featlist li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px #0d1b3d16; border-color: #cdd9f2; }
.featlist li:hover::before { opacity: 1; }
.featlist li b { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: .3rem; }
.soon { display: inline-block; font-family: Poppins, sans-serif; font-weight: 700; font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--blue, #155fea); background: #eaf1ff; border: 1px solid #cfe0ff; border-radius: 999px; padding: .12rem .5rem; margin-left: .45rem; vertical-align: middle; white-space: nowrap; }
.featlist li span { color: #5b6b86; font-size: .93rem; line-height: 1.5; }

/* --- Documentation --- */
.doccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.doccard { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.doccard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px #0d1b3d1a; border-color: var(--blue, #155fea); }
.doccard .ico { font-size: 2rem; }
.doccard h3 { margin: .4rem 0; }
.doccard-cta { color: var(--blue, #155fea); font-weight: 700; }
.docpage { max-width: 820px; }
.doctoc { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: 1rem 0 2rem; padding: .8rem 1rem; background: var(--soft); border-radius: 12px; }
.doctoc a { font-size: .9rem; }
.docsection { scroll-margin-top: 1rem; margin: 2rem 0; }
.docsection h2 { border-bottom: 2px solid #e3eaf6; padding-bottom: .3rem; }
.docbody p { line-height: 1.6; }
.docbody code { background: var(--code); padding: .1rem .35rem; border-radius: 5px; font-size: .9em; }
.docbody ul { line-height: 1.6; }

/* --- Documentation: sidebar layout (industry standard) --- */
.docs-shell { display: grid; grid-template-columns: 25% minmax(0, 1fr); gap: 2.4rem; max-width: 1240px; margin: 0 auto; padding: 1.4rem 1.6rem 3rem; align-items: start; }
.docs-side { position: sticky; top: 1rem; align-self: start; border-right: 1px solid var(--line); padding-right: 1.2rem; }
.docs-side-title { font-family: Poppins, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; color: #8794ad; margin: 0 0 1rem; }
.docs-side-title a { color: inherit; }
.docs-side-group { margin-bottom: .5rem; }
.docs-side-guide { display: block; padding: .4rem .6rem; border-radius: 8px; font-weight: 700; color: var(--ink, #12203a); }
.docs-side-guide:hover { background: var(--soft); }
.docs-side-guide.current { background: #eaf1ff; color: var(--blue, #155fea); }
.docs-side-sections { list-style: none; margin: .2rem 0 .6rem; padding: 0 0 0 .6rem; border-left: 2px solid #e7edf7; }
.docs-side-sections li a { display: block; padding: .28rem .6rem; font-size: .9rem; color: #5b6b86; border-radius: 6px; }
.docs-side-sections li a:hover { color: var(--blue, #155fea); background: var(--soft); }
.docs-side-sections li a.current { color: var(--blue, #155fea); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.docs-content { min-width: 0; }
.docs-content h1 { font-size: 2rem; }
.docs-content .docsection { scroll-margin-top: 1rem; margin: 2.2rem 0; }
.docs-content .docsection h2 { border-bottom: 2px solid #e7edf7; padding-bottom: .3rem; }
.docs-content .docbody p, .docs-content .docbody li { line-height: 1.65; }
.docs-content .docbody code { background: var(--code); padding: .1rem .35rem; border-radius: 5px; font-size: .9em; }
@media (max-width: 820px) {
  /* minmax(0, 1fr) — NOT a bare `1fr` (= minmax(auto,1fr)) whose auto-min would
     grow the column to the widest <pre> line and push the page past the viewport. */
  .docs-shell { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.2rem 1rem 3rem; }
  .docs-side { position: static; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 1rem; }
  /* Keep the section list on phones — hiding it left prev/next as the only
     way to move inside a guide. */
  .docs-side-sections { display: block; }
}

/* Network directory tables (ladder, casters, all-stars) — shared look,
   theme-aware borders (the old inline styles hardcoded light-grey). */
.nettable{width:100%;max-width:640px;margin:0 auto;border-collapse:collapse;text-align:left}
.nettable td{padding:.45rem .5rem;border-bottom:1px solid var(--line)}
.nettable tr:last-child td{border-bottom:0}
.nettable td:last-child{text-align:right}
.nettable img{width:22px;height:22px;border-radius:5px;vertical-align:middle}
.nettable-sm{max-width:560px}

/* --- About us --- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.team-card { background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 1.2rem; }
.team-card h3 { margin: 0 0 .2rem; }
.team-card .role { color: #5b6b86; font-size: .92rem; }
.team-card .steamtag { display: inline-block; margin-top: .5rem; font-size: .85rem; }

/* Active top-nav item */
nav.menu a.current { color: var(--blue, #155fea); border-bottom: 2px solid var(--blue, #155fea); padding-bottom: 3px; }
/* Language picker holds 7 options */
.langpick > form { max-height: 60vh; overflow-y: auto; }

/* --- Documentation: rendered markdown (prose, left-aligned, not bulleted-by-default) --- */
.docs-hub { max-width: 1000px; margin: 0 auto; padding: 1.4rem 1.6rem 3rem; }
.docs-md { line-height: 1.7; color: #1c2740; font-size: 1.02rem; }
.docs-md > *:first-child { margin-top: 0; }
.docs-md h1 { font-size: 2rem; margin: 0 0 .3rem; }
.docs-md h2 { font-size: 1.4rem; margin: 2.2rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.docs-md h3 { font-size: 1.12rem; margin: 1.6rem 0 .4rem; }
.docs-md p { margin: .8rem 0; }
.docs-md ul, .docs-md ol { margin: .8rem 0; padding-left: 1.4rem; }
.docs-md li { margin: .3rem 0; }
.docs-md a { color: var(--blue, #155fea); }
.docs-md code { background: var(--code); padding: .12rem .38rem; border-radius: 5px; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.docs-md pre { background: #0f1b32; color: #e6edfb; padding: 1rem 1.1rem; border-radius: 12px; overflow-x: auto; margin: 1rem 0; line-height: 1.55; }
.docs-md pre code { background: none; padding: 0; color: inherit; font-size: .88rem; }
.docs-md blockquote { margin: 1rem 0; padding: .6rem 1rem; border-left: 4px solid var(--blue, #155fea); background: var(--soft); border-radius: 0 8px 8px 0; }
.docs-md table { border-collapse: collapse; width: 100%; margin: 1rem 0; display: block; overflow-x: auto; }
.docs-md th, .docs-md td { border: 1px solid #e0e7f5; padding: .5rem .7rem; text-align: left; }
.docs-md th { background: var(--soft); }
.docs-md hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.docs-prevnext { display: flex; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.docs-prevnext .pn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink, #12203a); font-weight: 600; }
.docs-prevnext .pn:hover { border-color: var(--blue, #155fea); color: var(--blue, #155fea); }
.docs-prevnext .next { margin-left: auto; text-align: right; }

/* Right-to-left languages (Arabic, Urdu): correct flow + a few mirror tweaks */
[dir="rtl"] .docs-shell { direction: rtl; }
[dir="rtl"] .docs-side { border-right: 0; border-left: 1px solid var(--line); padding-right: 0; padding-left: 1.2rem; }
[dir="rtl"] .docs-md pre, [dir="rtl"] .docs-md code { direction: ltr; text-align: left; unicode-bidi: embed; }
[dir="rtl"] .docs-prevnext .next { margin-left: 0; margin-right: auto; }
[dir="rtl"] nav.menu a.current { }

/* --- Pricing page --- */
.pricelist { list-style: none; padding: 0; margin: .6rem 0 1rem; text-align: left; }
.pricelist li { padding: .25rem 0 .25rem 1.5rem; position: relative; font-size: .93rem; line-height: 1.45; }
.pricelist li::before { content: "✓"; position: absolute; left: 0; color: var(--green, #10c8d6); font-weight: 700; }
.pricebox { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.5rem; max-width: 760px; }
.pricebox .price { font-family: Poppins, sans-serif; font-weight: 800; font-size: 1.8rem; margin-bottom: .4rem; }
.pricebox .pricelist { columns: 2; column-gap: 2rem; }
.pricecols { display: grid; gap: 1rem; }
@media (max-width: 640px){ .pricebox .pricelist { columns: 1; } }

/* Docs content + sidebar are left-aligned prose, never centered (override main{text-align:center}) */
.docs-shell, .docs-side, .docs-content, .docs-md { text-align: left; }
[dir="rtl"] .docs-shell, [dir="rtl"] .docs-side, [dir="rtl"] .docs-content, [dir="rtl"] .docs-md { text-align: right; }

/* Pricing page: left-aligned prose; only the studio plan cards stay centered */
.pricing-page { text-align: center; }
.pricing-page .hint { max-width: 640px; margin-left: auto; margin-right: auto; }
/* Every plan tile the SAME width across sections (2-, 3- and 4-tile rows alike):
   flex-wrap + a fixed max-width tile, centered — not grid 1fr, which stretches
   a 2-tile row wider than a 4-tile row. */
.pricing-page .plans { display: flex; flex-wrap: wrap; justify-content: center; }
.pricing-page .plan { flex: 1 1 220px; max-width: 250px; }
.pricing-page .plan { text-align: center; }
.pricing-page .plan .pricelist { text-align: left; }
.pricing-page .pricebox { text-align: left; margin-left: auto; margin-right: auto; }
.pricing-page .pricecols { justify-items: center; }
[dir="rtl"] .pricing-page .pricelist li { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .pricing-page .pricelist li::before { left: auto; right: 0; }

/* Documentation: content must never overflow the viewport */
.docs-content { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.docs-md { overflow-wrap: anywhere; word-break: break-word; }
.docs-md pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.docs-md table { max-width: 100%; display: block; overflow-x: auto; }
/* Tables scroll horizontally (above), so cells must NOT inherit the prose's
   `overflow-wrap: anywhere` — that collapses each column's min-content to one
   character and wraps cells letter-by-letter. Break only over-long words, and
   keep inline-code identifiers (field names) intact. */
.docs-md th, .docs-md td { overflow-wrap: break-word; word-break: normal; }
.docs-md th code, .docs-md td code { white-space: nowrap; }
.docs-md img { max-width: 100%; height: auto; }
.docs-side-sections li a { overflow-wrap: anywhere; }

/* ── Dark scheme: token overrides + the few rules whose light values don't
      invert cleanly (flashes, tinted journey cards, icon plates). ── */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e7edfb; --muted:#93a4c6; --line:#243252;
    --bg:#0b1220; --card:#121b30; --soft:#16203a; --code:#1a2542; --input:#0f1830;
  }
  .flash.err{background:#3a1420;color:#ff9aa8;border-color:#5c2130}
  .flash.ok{background:#0f2c20;color:#5fd8a1;border-color:#1d4a35}
  .featgroup-ico{background:linear-gradient(135deg,#1a2542,#243252);box-shadow:inset 0 0 0 1px #243252}
  .soon{background:#16264a;border-color:#24417a}
  .docs-side-guide.current{background:#16264a}
  .path.studio{background:#155fea1f}
  .path.org{background:#10c8d61f}
  .path.player{background:#7c3aed26}
  .path .arr{color:#4a5d85}
  .path.org .node.last{color:#3fd6e2}
  .path.player .node.last{color:#b794f6}
  .arena-search input,.arena-search select,input,select{color-scheme:dark}
}

/* A11y: visible keyboard focus + calm mode for motion-sensitive visitors. */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .tile,.path,.cta,.btn,.arena-card,.arena-feature,.provider,.tabbar label,.toc-chips a{transition:none}
  .tile:hover,.path:hover,.cta:hover,.provider:hover{transform:none}
}