@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#f5f4f0; --paper-raised:#ffffff; --paper-sunk:#efeee8;
  --ink:#16181c; --ink-soft:#52565c; --ink-faint:#8b8e93;
  --line:#dcdad2; --line-strong:#c4c1b6;
  --accent:#8a6a2f; --accent-soft:#f1e6cf;
  --mi:#0b1e3a; --mi-2:#0b7a70;
  --fb:#14241d; --fb-2:#2f9e69;
  --pc:#0a2149; --pc-2:#6f5fce;
  --shadow: 0 1px 2px rgba(22,24,28,.05), 0 8px 24px -12px rgba(22,24,28,.12);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  font-size:16px; line-height:1.55; padding:0 20px;
}
h1,h2,h3,h4{ font-family:'Archivo', ui-sans-serif, system-ui, sans-serif; letter-spacing:-.01em; margin:0; text-wrap:balance; }
code,.mono{ font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
a{ color:var(--mi-2); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wrap{ max-width:1280px; margin:0 auto; }
.topbar{
  max-width:1280px; margin:0 auto; padding:20px 0; display:flex; align-items:center;
  justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.topbar .home{ font-family:'IBM Plex Mono'; font-size:13px; font-weight:600; color:var(--ink); }
.topbar .badge{
  font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:100px;
}
.dot{ width:9px; height:9px; border-radius:2px; display:inline-block; }
.dot.mi{ background:linear-gradient(135deg,var(--mi),var(--mi-2)); }
.dot.fb{ background:linear-gradient(135deg,var(--fb),var(--fb-2)); }
.dot.pc{ background:linear-gradient(135deg,var(--pc),var(--pc-2)); }

/* breakpoint control bar */
.control-bar{
  max-width:1280px; margin:24px auto 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.control-bar .pills{ display:flex; gap:4px; background:var(--paper-sunk); padding:4px; border-radius:10px; }
.control-bar button{
  font-family:'IBM Plex Mono'; font-size:12.5px; font-weight:600; border:none; background:transparent;
  color:var(--ink-soft); padding:7px 14px; border-radius:7px; cursor:pointer;
}
.control-bar button.active{ background:var(--paper-raised); color:var(--ink); box-shadow:var(--shadow); }
.control-bar .hint{ font-size:13px; color:var(--ink-faint); }

.compare-grid{
  max-width:1280px; margin:18px auto 60px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media (max-width:980px){ .compare-grid{ grid-template-columns:1fr; } }

.col{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.col-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.col-name{ font-family:'IBM Plex Mono'; font-weight:700; font-size:13px; display:flex; align-items:center; gap:8px; }
.col-open{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-faint); }
.col-note{ font-size:13px; color:var(--ink-soft); background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }

.frame-wrap{
  border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; background:var(--paper-raised);
  box-shadow:var(--shadow); position:relative;
}
.frame-wrap iframe{ border:0; display:block; transform-origin:top left; background:#fff; }
.frame-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-faint); background:var(--paper-raised);
}

.page-head{ max-width:1280px; margin:36px auto 0; display:flex; flex-direction:column; gap:10px; }
.page-head h1{ font-size:clamp(26px,3.6vw,36px); font-weight:800; }
.page-head p{ max-width:74ch; color:var(--ink-soft); font-size:15.5px; }
.eyebrow{ font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); font-weight:600; }