/* Shared shell for the SEO surface (/tools, /blog and their children).
   Header, footer, cards and prose live here once instead of in every page's
   <style> block — these pages exist to be added to, so duplication would rot.
   Colour comes from tokens.css; nothing here invents a hex. */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'proxima-nova','pn-fallback',var(--font);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}
.page-title{font-family:'proxima-nova','pn-fallback-display',var(--font)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
a{color:var(--primary)}
img{max-width:100%;height:auto}

/* skip link — keyboard users should not tab the whole nav on every page */
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--text);padding:10px 16px;border-radius:0 0 8px 0;z-index:300}
.skip:focus{left:0}

/* ── header ── */
/* min-height + nowrap: measured on /partners, the nav wrapped to two rows in the
   fallback font and collapsed to one when Proxima Nova arrived, moving the whole
   page up 27px (CLS 0.278). Reserving the header's height stops that entirely. */
.header{background:var(--surface-2);border-bottom:1px solid var(--border);padding:16px 30px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;gap:10px;flex-wrap:wrap;min-height:69px}
.header-logo{font-size:18px;font-weight:800;color:var(--text);text-decoration:none;letter-spacing:.5px;white-space:nowrap}
.header-logo span{color:var(--primary)}
.header-nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px 0}
.header-nav a{color:var(--text-muted);font-size:14px;text-decoration:none;margin-left:22px}
.header-nav a:hover{color:var(--text)}
.header-nav a[aria-current="page"]{color:var(--text)}
.header-nav a.cta{background:var(--link);color:#fff;padding:8px 18px;border-radius:8px;font-weight:700}
.header-nav a.cta:hover{background:var(--link-hover)}
@media(max-width:860px){
  /* Reserving a height did not help: the nav itself re-wrapped from two rows to one
     when the webfont swapped, and any fixed height is a guess that breaks at some
     width. Pin the nav to a SINGLE non-wrapping row that scrolls sideways instead —
     its height is then identical in every font, so the header cannot move the page.
     The scroll is contained to the nav, never the document. */
  .header{padding:10px 14px;min-height:0;flex-wrap:nowrap;gap:12px}
  .header-logo{flex:0 0 auto}
  .header-nav{flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;justify-content:flex-end;scrollbar-width:none;-ms-overflow-style:none}
  .header-nav::-webkit-scrollbar{display:none}
  .header-nav a{margin-left:0;margin-right:14px;font-size:14px;flex:0 0 auto}
  .header-nav a.cta{margin-right:0}
}

/* ── page ── */
.main{max-width:1120px;margin:0 auto;padding:56px 20px 80px}
.main.narrow{max-width:760px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px}
.page-title{font-size:40px;font-weight:800;line-height:1.15;letter-spacing:-.5px;margin-bottom:14px}
.page-sub{color:var(--text-muted);font-size:17px;max-width:680px;margin-bottom:40px}
@media(max-width:640px){.main{padding:36px 16px 60px}.page-title{font-size:30px}.page-sub{font-size:16px}}

/* ── cards ── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:26px;display:flex;flex-direction:column}
.card h2,.card h3{font-size:20px;font-weight:700;margin-bottom:8px;line-height:1.3}
.card h2 a,.card h3 a{color:var(--text);text-decoration:none}
.card h2 a:hover,.card h3 a:hover{color:var(--primary)}
.card p{color:var(--text-muted);font-size:15px;margin-bottom:16px}
.card .card-go{margin-top:auto;color:var(--primary);font-weight:700;text-decoration:none;font-size:15px}
.card .card-go:hover{text-decoration:underline}
.card-tag{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px}

/* ── tool controls ── */
.tool-panel{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:26px;margin-bottom:24px}
label{display:block;font-size:14px;font-weight:700;color:var(--text-soft);margin-bottom:8px}
input[type=text],textarea,select{width:100%;background:var(--surface);border:1px solid var(--border-2);border-radius:10px;padding:13px 15px;color:var(--text);font-size:16px;font-family:inherit}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--primary);outline:none}
textarea{min-height:150px;resize:vertical;line-height:1.6}
.help{color:var(--text-muted);font-size:14px;margin-top:8px}
.btn{display:inline-block;background:var(--link);color:#fff;border:none;padding:13px 26px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none}
.btn:hover{background:var(--link-hover)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-ghost{background:transparent;border:1px solid var(--border-soft);color:var(--text-soft)}
.btn-ghost:hover{background:var(--surface);color:var(--text)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.out{background:var(--surface);border:1px solid var(--border-2);border-radius:10px;padding:18px;white-space:pre-wrap;word-break:break-word;color:var(--text-soft);font-size:15px;line-height:1.7;margin-top:18px}
.out:empty{display:none}
.status{font-size:14px;color:var(--text-muted);margin-top:12px;min-height:20px}

/* ── conversion strip shared by every tool + post ── */
.convert{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:14px;padding:28px;margin-top:44px}
.convert h2{font-size:22px;font-weight:800;margin-bottom:10px}
.convert p{color:var(--text-muted);font-size:16px;margin-bottom:18px}

/* ── prose (blog posts) ── */
.prose{color:var(--text-body);font-size:17px;line-height:1.8}
.prose h2{font-size:26px;font-weight:800;color:var(--text);margin:38px 0 14px;line-height:1.25}
.prose h3{font-size:20px;font-weight:700;color:var(--text);margin:28px 0 10px}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--text)}
.prose blockquote{border-left:3px solid var(--primary);padding:4px 0 4px 18px;margin:24px 0;color:var(--text-soft)}
.prose table{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:15px}
.prose th,.prose td{border:1px solid var(--border-2);padding:10px 12px;text-align:left}
.prose th{background:var(--surface-2);color:var(--text);font-weight:700}
.table-scroll{overflow-x:auto;margin-bottom:22px}
.table-scroll:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
.post-meta{color:var(--text-muted);font-size:15px;margin-bottom:30px}
.post-meta .dot{margin:0 8px;color:var(--text-dim)}

/* ── footer ── */
footer{border-top:1px solid var(--border);padding:34px 20px 44px;text-align:center}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin-bottom:16px}
.footer-links a{color:var(--text-muted);font-size:14px;text-decoration:none}
.footer-links a:hover{color:var(--text)}
.footer-copy{color:var(--text-faint);font-size:13px}