/* /platforms — where ATLAS runs, one card per platform plus a capability table.
   Sits on top of the shared inline base in the page head (reset + --bg,
   --bg-card, --border, --text, --text-dim, --orange, --orange-text, --font,
   --mono) exactly like plans.css and reviews.css do. The base has no tile or
   hairline token, so the three this page needs are declared here, in both
   themes, rather than hardcoding a colour that only works on one of them. */
:root{--pf-tile:#F5F5FA;--pf-line:#EDEDF2;--pf-soft:#FFF2E8;--pf-edge:#FFD5B8}
[data-theme=dark]{--pf-tile:#0E0E1A;--pf-line:#1A1A2C;--pf-soft:#2B1709;--pf-edge:#4A2A12}

.pf-wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* ── hero ───────────────────────────────────────────────────────────── */
.pf-hero{padding:52px 0 34px;text-align:center}
.pf-kicker{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange-text);margin-bottom:14px}
.pf-hero h1{font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:2.7rem;
  font-weight:800;letter-spacing:-1.2px;line-height:1.12;margin-bottom:16px}
.pf-hero h1 em{font-style:normal;color:var(--orange)}
.pf-lead{max-width:660px;margin:0 auto;font-size:1.08rem;line-height:1.7;color:var(--text-dim)}

/* ── the grid ───────────────────────────────────────────────────────── */
/* auto-fill, not auto-fit: seven cards over a four column grid leaves a row of
   three, and auto-fit would stretch those three across the full width so the
   last row reads as a different component. auto-fill keeps the empty track. */
.platform-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:18px;align-items:stretch;margin:0 0 30px}
.platform-card{display:flex;flex-direction:column;background:var(--bg-card);
  border:1px solid var(--border);border-radius:14px;padding:24px 24px 22px}
.platform-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
/* A tile behind the mark so a wide logo and a tall one still line their
   headings up; without it the Apple mark sits a couple of pixels high. */
.platform-logo{flex:none;width:48px;height:48px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;background:var(--pf-tile);
  border:1px solid var(--pf-line)}
.platform-logo img,.platform-logo svg{display:block}
/* Apple and Steam are inline SVG so they can follow the text colour. An
   external <img> cannot see currentColor, and the black Apple mark on a dark
   card would be a black square on a near black background. */
.platform-logo-mono{color:var(--text)}
.platform-id{min-width:0}
.platform-name{font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.08rem;
  font-weight:700;line-height:1.25;margin:0}
.platform-sub{display:block;margin-top:2px;font-size:.71rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim)}
.platform-facts{list-style:none;margin:0;padding:0;flex:1}
.platform-facts li{position:relative;padding-left:19px;margin-bottom:8px;
  font-size:.9rem;line-height:1.55}
.platform-facts li:before{content:"";position:absolute;left:0;top:.6em;width:6px;
  height:6px;border-radius:50%;background:var(--orange)}
.platform-req{margin-top:14px;padding-top:13px;border-top:1px solid var(--pf-line);
  font-size:.78rem;color:var(--text-dim);line-height:1.5}
/* margin-top:auto so the buttons line up across a row whatever the fact count
   is, which is the whole reason the card is a flex column. */
.platform-cta{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.platform-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  border-radius:9px;font-size:.83rem;font-weight:700;text-decoration:none;
  border:1px solid var(--border);color:var(--text);background:var(--bg);transition:border-color .15s}
.platform-btn:hover{border-color:var(--orange);opacity:1}
.platform-btn-primary{background:var(--orange);border-color:var(--orange);color:#fff}
.platform-btn-primary:hover{background:#E55A00;border-color:#E55A00}
.platform-card-soon{opacity:.74}
.platform-tag{align-self:flex-start;margin-top:auto;font-size:.68rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:6px;
  background:var(--pf-soft);color:var(--orange-text);border:1px solid var(--pf-edge)}
/* The tag is pushed down by margin-top:auto, so in the tallest card of a row
   there is no slack left and it would touch the last fact. The other cards get
   that gap from .platform-cta's padding-top. */
.platform-card-soon .platform-facts{margin-bottom:10px}

/* ── capability table ───────────────────────────────────────────────── */
.pf-sec{margin-top:52px}
.pf-sec h2{font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.55rem;
  font-weight:800;letter-spacing:-.4px;margin-bottom:8px}
.pf-sec p.pf-sub{color:var(--text-dim);font-size:.98rem;margin-bottom:20px}
/* The table is the one thing on the page that cannot be made narrow enough for
   a phone, so it scrolls inside its own box instead of putting a scrollbar on
   the document. */
.pf-table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:14px;
  background:var(--bg-card)}
.pf-table{width:100%;border-collapse:collapse;min-width:660px;font-size:.9rem}
.pf-table th,.pf-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--pf-line)}
.pf-table thead th{font-size:.72rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.pf-table tbody tr:last-child th,.pf-table tbody tr:last-child td{border-bottom:0}
.pf-table tbody th{font-weight:600;color:var(--text)}
.pf-table td{text-align:center;color:var(--text-dim)}
/* Qualified with td, not bare: `.pf-table td` already sets a colour and its two
   class selectors outrank a lone `.pf-yes`, so the green never arrived. Only
   visible on a render, since every cell still had the right text. */
.pf-table td.pf-yes{color:#16a34a;font-weight:700}
.pf-table td.pf-no{color:var(--text-dim);opacity:.6}
[data-theme=dark] .pf-table td.pf-yes{color:#4ade80}

/* ── closing ────────────────────────────────────────────────────────── */
.pf-cta{margin:52px 0 0;padding:34px 28px;text-align:center;background:var(--bg-card);
  border:1px solid var(--orange);border-radius:14px}
.pf-cta h2{font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.4rem;
  font-weight:800;margin-bottom:8px}
.pf-cta p{color:var(--text-dim);font-size:.96rem;margin-bottom:18px}
.pf-cta a{display:inline-block;background:var(--orange);color:#fff;padding:12px 30px;
  border-radius:9px;font-weight:700;text-decoration:none}
.pf-cta a:hover{background:#E55A00;opacity:1}
.pf-related{margin:44px 0 60px;padding-top:24px;border-top:1px solid var(--border);
  font-size:.92rem;color:var(--text-dim)}
.pf-related a{color:var(--orange-text);text-decoration:none;font-weight:600}
.pf-related a:hover{text-decoration:underline}

@media(max-width:640px){
  .pf-wrap{padding:0 18px}
  .pf-hero{padding:36px 0 26px}
  .pf-hero h1{font-size:1.95rem;letter-spacing:-.7px}
  .pf-lead{font-size:1rem}
  .platform-grid{grid-template-columns:1fr;gap:14px}
  .platform-card{padding:20px}
}