/* Shared look for WeSay's static pages (/compare, /developers), matching the landing page. */
:root { --ink:#171713; --cream:#f4f0e6; --paper:#fffdf8; --coral:#ff5d42; --lime:#d8fa67; --muted:#5b5a52; --line:rgba(23,23,19,.16); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--cream); color:var(--ink); font:16px/1.6 Arial, Helvetica, sans-serif; }
a { color:inherit; }
em { font-family:Georgia, 'Times New Roman', serif; font-weight:400; }
code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.88em; background:rgba(23,23,19,.07); padding:.1em .35em; border-radius:4px; overflow-wrap:anywhere; }
pre { background:var(--ink); color:#f5f5f0; padding:1rem 1.1rem; border-radius:12px; overflow-x:auto; line-height:1.5; }
pre code { background:none; padding:0; color:inherit; font-size:.82rem; overflow-wrap:normal; }

.site-nav { display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:center; justify-content:space-between; padding:1rem clamp(1rem,4vw,4.5rem); border-bottom:1px solid var(--line); background:rgba(244,240,230,.92); position:sticky; top:0; z-index:5; backdrop-filter:blur(12px); }
.site-nav nav { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.2rem; font-weight:700; font-size:.95rem; }
.site-nav nav a { text-decoration:none; }
.logo { display:flex; align-items:center; gap:10px; font-size:1.1rem; font-weight:800; letter-spacing:-.04em; text-decoration:none; }
.mark { width:34px; height:34px; display:grid; place-items:center; background:var(--ink); border-radius:50% 50% 48% 52%/55% 45% 55% 45%; transform:rotate(-8deg); }
.mark span { color:var(--lime); transform:rotate(8deg); font-family:Georgia, serif; font-style:italic; }

.btn { display:inline-flex; align-items:center; gap:.5rem; border:1.5px solid var(--ink); padding:.7rem 1.1rem; font-weight:800; text-decoration:none; background:transparent; margin:.25rem .4rem .25rem 0; transition:transform .18s, box-shadow .18s; }
.btn:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.btn-dark { background:var(--ink); color:#fff; }
.btn-dark:hover { box-shadow:4px 4px 0 var(--coral); }
.btn-coral { background:var(--coral); color:var(--ink); }
.site-nav .btn { padding:.5rem .9rem; margin:0; }

main { max-width:68rem; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) 3rem; }
section { padding:2.2rem 0; border-bottom:1px solid var(--line); }
section:last-of-type { border-bottom:0; }
.hero { padding:3.5rem 0 2.5rem; }
.overline { text-transform:uppercase; letter-spacing:.16em; font-size:.73rem; font-weight:900; margin:0 0 1rem; }
.overline a { text-decoration:none; }
h1 { font-size:clamp(2.1rem,5.5vw,3.8rem); line-height:1.02; letter-spacing:-.04em; margin:0 0 1rem; }
h2 { font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.03em; line-height:1.15; margin:0 0 1rem; }
h3 { font-size:1.1rem; margin:1.6rem 0 .5rem; }
.lead { font-size:1.15rem; max-width:44rem; color:#2c2b26; }
.note, .muted { color:var(--muted); font-size:.88rem; }

.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
table { width:100%; border-collapse:collapse; font-size:.94rem; min-width:36rem; }
th, td { text-align:left; vertical-align:top; padding:.75rem .9rem; border-top:1px solid var(--line); }
thead th { border-top:0; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
tbody th { font-weight:700; white-space:nowrap; }
tr.us { background:rgba(216,250,103,.35); }

.two-col { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); }
ul.ticks, ul.dots { padding:0; list-style:none; }
ul.ticks li, ul.dots li { position:relative; padding-left:1.6rem; margin:.55rem 0; }
ul.ticks li::before { content:'✓'; position:absolute; left:0; font-weight:900; color:#2f6b12; }
ul.dots li::before { content:'•'; position:absolute; left:.35rem; font-weight:900; }

ul.cards { list-style:none; padding:0; display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); }
ul.cards a { display:block; height:100%; padding:1rem 1.1rem; border:1.5px solid var(--ink); background:var(--paper); text-decoration:none; transition:transform .18s, box-shadow .18s; }
ul.cards a:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
ul.cards strong { display:block; }
ul.cards span { color:var(--muted); font-size:.9rem; }

details { border-top:1px solid var(--line); padding:.85rem 0; }
details:last-child { border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:700; }
details p { margin:.6rem 0 0; color:#2c2b26; }

.cta { text-align:center; padding:3.5rem 1rem; }
.cta p { color:#2c2b26; }

.site-footer { border-top:1px solid var(--line); padding:1.5rem clamp(1rem,4vw,4.5rem); font-size:.9rem; color:var(--muted); }
.site-footer p { margin:.35rem 0; }