:root{
    --bg:#0d1117; --bg2:#161b22; --bg3:#1c2128; --bg4:#21262d;
    --felt-1:#081911; --felt-2:#0f2e1a; --felt-3:#123321;
    --green:#3fb950; --green-bright:#56d364;
    --pink:#f778ba; --blue:#58a6ff; --orange:#d29922;
    --text:#e6edf3; --dim:#8b949e; --dimmer:#76808b; --border:#30363d; --border-soft:#21262d;
    --display:'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
    --body:'IBM Plex Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
    --mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
    --maxw:1160px;
    color-scheme:dark;
  }
  *{box-sizing:border-box;}
  body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.02; margin:0; text-wrap:balance;}
  p{margin:0;}
  a{color:inherit;}
  img{max-width:100%;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  .eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-bright); font-weight:600; display:flex; align-items:center; gap:10px;}
  .eyebrow::before{content:""; width:18px; height:1px; background:var(--green-bright); display:inline-block;}
  .btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; padding:13px 24px; border-radius:8px; border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;}
  .btn-primary{background:var(--green); color:#04150a;}
  .btn-primary:hover{background:var(--green-bright);}
  .btn-ghost{background:transparent; color:var(--text); border-color:var(--border);}
  .btn-ghost:hover{border-color:var(--dim); background:var(--bg3);}
  .btn:focus-visible, a:focus-visible, summary:focus-visible{outline:2px solid var(--green-bright); outline-offset:3px;}

  .skip-link{position:absolute; left:16px; top:-60px; z-index:100; background:var(--green); color:#04150a;
    padding:12px 20px; border-radius:8px; font-weight:700; font-size:14px; text-decoration:none; transition:top .15s ease;}
  .skip-link:focus{top:16px;}

  header.nav{position:sticky; top:0; z-index:40; background:rgba(13,17,23,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:76px;}
  .brand{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:32px;}
  .brand .fg{color:var(--green);}
  .nav-actions{display:flex; align-items:center; gap:12px;}
  .nav-links{display:flex; align-items:center; gap:34px; font-size:14.5px; font-weight:500; color:var(--dim);}
  .nav-links a{text-decoration:none;}
  .nav-links a:hover{color:var(--text);}
  .nav-links .nav-icon{display:flex; align-items:center;}
  .nav-links .nav-icon svg{width:19px; height:19px;}
  .nav-links a{white-space:nowrap;}
  @media (max-width:1020px){ .nav-links{display:none;} }

  /* Mobile menu — .nav-links itself disappears below 860px (see above),
     so this is the only way to reach FAQ/Blog/Showcase/X on a phone.
     A plain <details>/<summary> would work without JS, but the site
     already ships a tiny toggle script for other things, so nav.js
     just adds one more listener rather than mixing patterns. */
  .nav-toggle{display:none; align-items:center; justify-content:center;
    width:40px; height:40px; padding:0; border:1px solid var(--border);
    border-radius:8px; background:transparent; cursor:pointer; flex-shrink:0;}
  .nav-toggle svg{width:20px; height:20px; color:var(--text);}
  @media (max-width:1020px){ .nav-toggle{display:flex;} }
  .nav-mobile{display:none !important; flex-direction:column; gap:2px;
    padding:10px 0 16px; border-top:1px solid var(--border-soft);}
  @media (max-width:1020px){ .nav-mobile.is-open{display:flex !important;} }
  .nav-mobile a{display:block; padding:12px 4px; font-size:15px; font-weight:500;
    color:var(--dim); text-decoration:none; border-bottom:1px solid var(--border-soft);}
  .nav-mobile a:last-child{border-bottom:none;}
  .nav-mobile a:hover{color:var(--text);}
  /* At phone widths the 32px wordmark + the header's own Download button
     no longer both fit on one line at their normal size -- confirmed
     visually (the button rendered on top of the tail end of "PokerForge"
     at 375px) rather than assumed, so this shrinks both and adds a wrap
     fallback rather than guessing at one fix alone. */
  @media (max-width:480px){
    .nav-row{flex-wrap:wrap; row-gap:8px; height:auto; padding:12px 0;}
    .brand{font-size:22px; gap:7px;}
    .brand img{width:30px; height:30px;}
    .nav-row .btn{padding:9px 16px; font-size:13.5px;}
  }

  .hero{position:relative; padding:96px 0 72px; overflow:hidden;
    background:radial-gradient(ellipse 900px 480px at 14% -10%, var(--felt-3), transparent 60%), linear-gradient(180deg, var(--felt-1) 0%, var(--bg) 78%);
    border-bottom:1px solid var(--border-soft);}
  .hero .suits{position:absolute; inset:0; font-size:150px; color:rgba(255,255,255,.025); display:flex; align-items:center; justify-content:space-between; padding:0 40px; pointer-events:none;}
  .hero-grid{position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center;}
  @media (max-width:980px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{font-size:clamp(38px,4.6vw,58px);}
  .hero h1 .fg{color:var(--green-bright);}
  .hero p.lead{margin-top:20px; font-size:18px; color:var(--dim); max-width:52ch;}
  .hero .ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
  /* Reassurances, not fine print: set in the body face with a tick each,
     rather than dim monospace which read like debug output. */
  .hero .trust{list-style:none; display:flex; flex-wrap:wrap; gap:9px 24px;
    margin:26px 0 0; padding:0; font-size:13.5px; color:var(--dim);}
  .hero .trust li{display:flex; align-items:center; gap:8px;}
  .hero .trust li::before{content:"\2713"; color:var(--green-bright); font-weight:700; font-size:12.5px;}
  .hero .ship-note{margin-top:18px; font-size:13px; color:var(--dimmer);}
  .hero .ship-note a{color:var(--dim); text-decoration:underline; text-underline-offset:2px;}
  .hero .ship-note a:hover{color:var(--text);}
  .device{background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:10px; box-shadow:0 40px 90px -30px rgba(0,0,0,.7);}
  .device .bar{display:flex; gap:6px; padding:6px 8px 12px;}
  .device .dot{width:10px; height:10px; border-radius:50%; background:var(--bg4);}
  .device img{width:100%; display:block; border-radius:8px; border:1px solid var(--border-soft);}

  .compat{padding:42px 0 38px; border-bottom:1px solid var(--border-soft); text-align:center;}
  .compat-label{font-size:11.5px; color:var(--dimmer); font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase;}
  .compat-row{display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:8px 34px; margin-top:18px;}
  /* Set as wordmarks rather than tags: at this scale the type carries the
     same weight a logo row would, without borrowing anyone's marks. */
  .room{font-family:var(--display); font-weight:700; font-size:clamp(19px,2.3vw,26px);
    text-transform:uppercase; letter-spacing:.045em; color:var(--dim); transition:color .18s ease;}
  .room:hover{color:var(--text);}
  .compat-note{margin-top:20px; font-size:13px; color:var(--dimmer);}

  section{padding:96px 0;}
  .sec-head{max-width:640px; margin-bottom:52px;}
  .sec-head h2, .sec-head h1{font-size:clamp(30px,3.4vw,42px); margin-top:14px;}
  .sec-head p{margin-top:16px; color:var(--dim); font-size:16.5px;}

  .props{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  @media (max-width:920px){ .props{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .props{grid-template-columns:1fr;} }
  .prop-card{background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:24px 22px; border-top:3px solid var(--accent,var(--green));
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
  .prop-card:hover{transform:translateY(-4px); border-color:var(--accent,var(--green)); box-shadow:0 16px 32px -18px rgba(0,0,0,.55);}
  .prop-icon{width:32px; height:32px; margin-bottom:16px; color:var(--accent,var(--green));}
  .prop-card h3{font-family:var(--body); font-weight:700; font-size:16.5px;}
  .prop-card p{margin-top:10px; font-size:14.5px; color:var(--dim);}

  .frow{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; padding:72px 0; border-top:1px solid var(--border-soft);}
  .frow.rev{grid-template-columns:1.15fr 1fr;}
  .frow.rev .art{order:-1;}
  @media (max-width:920px){ .frow, .frow.rev{grid-template-columns:1fr; gap:34px;} .frow.rev .art{order:0;} }
  .frow h3{font-size:clamp(24px,2.6vw,32px);}
  .frow .kicker{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin-bottom:12px;}
  .frow p.copy{margin-top:16px; color:var(--dim); font-size:15.5px; max-width:48ch;}
  .frow ul{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .frow li{font-size:14.5px; display:flex; gap:10px;}
  .frow li::before{content:"✓"; color:var(--green-bright); font-weight:700; flex-shrink:0;}
  .shot{border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.65); background:var(--bg2); display:block;}

  .compare-table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px;}
  .compare-table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:540px;}
  .compare-table th, .compare-table td{padding:16px 22px; text-align:left; border-bottom:1px solid var(--border-soft); white-space:nowrap;}
  .compare-table thead th{color:var(--dim); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; background:var(--bg2);}
  .compare-table tbody th{color:var(--dim); font-weight:500; text-align:left;}
  .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td{border-bottom:none;}
  .compare-table td.good{color:var(--green-bright); font-weight:600;}
  .compare-table th:nth-child(2), .compare-table td:nth-child(2){background:rgba(63,185,80,.06);}
  .compare-note{margin-top:16px; font-size:13px; color:var(--dimmer);}
  @media (max-width:640px){ .compare-table th, .compare-table td{white-space:normal;} }
  .shot img{display:block; width:100%;}
  /* Only offer the zoom affordance once lightbox.js has wired it up, so
     with JS off the cursor doesn't promise something that won't happen. */
  .shot img[role="button"]{cursor:zoom-in;}
  .shot img[role="button"]:focus-visible{outline:2px solid var(--green-bright); outline-offset:3px;}

  .lightbox{position:fixed; inset:0; z-index:100; background:rgba(4,6,9,.93);
            display:flex; align-items:center; justify-content:center; padding:32px;
            cursor:zoom-out; backdrop-filter:blur(4px);}
  /* Required, and easy to miss: a display value in a stylesheet beats the
     hidden attribute's UA display:none, so without this the overlay covers
     the page permanently and the site renders as a blank dark rectangle. */
  .lightbox[hidden]{display:none;}
  .lightbox img{max-width:100%; max-height:100%; width:auto; height:auto;
                border:1px solid var(--border); border-radius:10px;
                box-shadow:0 40px 90px -30px rgba(0,0,0,.8);}
  .lightbox-close{position:absolute; top:18px; right:22px; width:42px; height:42px;
                  font-size:30px; line-height:1; color:var(--dim); cursor:pointer;
                  background:transparent; border:1px solid var(--border-soft);
                  border-radius:8px;}
  .lightbox-close:hover{color:var(--text); border-color:var(--border);}
  @media (max-width:620px){ .lightbox{padding:12px;} }


  .cta-band{background:linear-gradient(180deg,var(--felt-2),var(--felt-1)); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); text-align:center; padding:88px 0;}
  .cta-band h2{font-size:clamp(28px,4vw,44px);}
  .cta-band p{margin-top:14px; color:var(--dim); font-size:16px;}
  .cta-band .ctas{display:flex; justify-content:center; gap:14px; margin-top:30px; flex-wrap:wrap;}

  .faq{max-width:760px;}
  details{border-bottom:1px solid var(--border-soft); padding:20px 0;}
  summary{cursor:pointer; font-weight:600; font-size:16px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
  summary::-webkit-details-marker{display:none;}
  summary::after{content:"+"; color:var(--dim); font-size:22px; font-weight:400;}
  details[open] summary::after{content:"–";}
  details p{margin-top:14px; color:var(--dim); font-size:14.5px; max-width:66ch;}
  details p a{color:var(--green-bright); text-decoration:underline; text-underline-offset:2px;}
  .notify-row{display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap;}
  .notify-row > span{font-size:13.5px; color:var(--dimmer);}
  .notify-btn{padding:9px 16px; font-size:13.5px; gap:8px;}
  .notify-btn svg{width:16px; height:16px;}

  /* An illustrative recreation of the Windows SmartScreen dialog, not a
     real screenshot -- deliberately light/OS-chrome styled rather than
     matching the page's dark theme, since that's what makes it read as
     "a window from Windows" instead of just another dark card. */
  .smartscreen-mock{margin-top:20px; max-width:420px; border:1px solid #3a3a3a; border-radius:10px; overflow:hidden; background:#f3f3f3; box-shadow:0 20px 45px -20px rgba(0,0,0,.6);}
  .smartscreen-mock-panel{display:flex; gap:14px; align-items:flex-start; padding:20px 22px 14px;}
  .smartscreen-mock-panel svg{width:30px; height:30px; flex-shrink:0; margin-top:2px;}
  .smartscreen-mock-panel strong{display:block; color:#1a1a1a; font-family:var(--body); font-size:15px; font-weight:700; margin-bottom:4px;}
  .smartscreen-mock-panel span{display:block; color:#444; font-size:13px; line-height:1.45;}
  .smartscreen-mock-step{display:flex; align-items:center; gap:10px; padding:12px 22px 18px; border-top:1px solid #ddd; font-size:12.5px;}
  .smartscreen-mock-link{color:#0067c0; text-decoration:underline; font-weight:600;}
  .smartscreen-mock-arrow{color:#999;}
  .smartscreen-mock-btn{background:#0067c0; color:#fff; padding:6px 14px; border-radius:4px; font-weight:600;}
  .smartscreen-mock-caption{margin-top:10px; font-size:12.5px; color:var(--dimmer); font-style:italic;}

  footer{padding:28px 0; border-top:1px solid var(--green);}
  .foot-row{display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;}
  .foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; font-size:13.5px;}
  .foot-links a{text-decoration:none; color:var(--dim);}
  .foot-links a:hover{color:var(--text);}
  .foot-copy{font-size:12.5px; color:var(--dimmer);}
  @media (max-width:720px){ .foot-row{flex-direction:column; text-align:center;} }
  @media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }

  /* --- blog --- */
  .post-list{max-width:760px;}
  .post{display:block; text-decoration:none; padding:26px 0; border-bottom:1px solid var(--border-soft);}
  .post:first-child{border-top:1px solid var(--border-soft);}
  .post time{font-family:var(--mono); font-size:12px; color:var(--dimmer); letter-spacing:.06em; text-transform:uppercase;}
  .post h3{font-size:clamp(21px,2.4vw,27px); margin-top:8px; transition:color .18s ease;}
  .post p{margin-top:10px; color:var(--dim); font-size:15px; max-width:62ch;}
  .post:hover h3{color:var(--green-bright);}
  .empty-note{border:1px dashed var(--border); border-radius:12px; padding:44px 34px; max-width:760px; color:var(--dim);}
  .empty-note strong{color:var(--text); font-weight:600; display:block; margin-bottom:10px; font-size:16px;}

  /* --- policy / long-form pages --- */
  /* 70ch keeps the measure readable; margin:0 auto centres that column in
     the 1160px .wrap, which otherwise leaves it pinned to the left with
     half the page empty beside it. */
  .prose{max-width:70ch; margin:0 auto;}
  .prose h1{font-size:clamp(32px,4vw,44px); margin-bottom:10px;}
  .prose h2{font-size:clamp(20px,2.2vw,25px); margin:44px 0 14px; padding-top:22px; border-top:1px solid var(--border-soft);}
  .prose h2:first-of-type{border-top:none; padding-top:0;}
  .prose p{margin:14px 0; color:var(--dim); font-size:15.5px;}
  .prose p em{color:var(--dimmer); font-style:normal; font-family:var(--mono); font-size:13px;}
  .prose ul{margin:14px 0; padding-left:20px; color:var(--dim); font-size:15.5px;}
  .prose li{margin:8px 0;}
  .prose strong{color:var(--text);}
  .prose a{color:var(--green-bright);}
  .changelog-date{font-family:var(--mono); font-size:14px; font-weight:500; color:var(--dimmer); letter-spacing:0;}