html, body { margin: 0; }
body { -webkit-text-size-adjust: 100%; }
/* Pigeon SMS site shell: light theme only (the site commits to one look).
   Tokens come from the Pigeon SMS design system. The header and footer
   classes use the sh- and sf- prefixes so the shell drops into any page. */
:root {
  color-scheme: light;
  --surface: #f6f7f8; --raised: #ffffff; --sunken: #eceef0; --hover: #eef4f9;
  --line: #d4d5d7; --line-strong: #83888e;
  --ink: #232427; --ink-muted: #58585a; --ink-faint: #646666;
  --primary: #4a97ca; --primary-strong: #2f7cb0; --on-primary: #ffffff;
  --primary-text: #276a98; --primary-soft: #e1eff8;
  --seal: #b23a31; --seal-text: #8f2d26; --seal-soft: #fbe3e0;
  --postmark: #b88017; --postmark-text: #7a5410; --postmark-soft: #fbf0d9;
  --success: #2a7d50; --success-text: #1f6e44; --success-soft: #dcf3e5;
  --nav-bg: #58585a; --nav-fg: #ffffff; --nav-fg-muted: #d4d5d7; --nav-active: #2f7cb0;
  --pb: #58585a; --pw: #6c6e6e; --pe: #d4d5d7; --env: #eceef0;
  --chrome: #e3e5e8; --device: #1b1c1f; --device-screen: #ffffff;
  --band-bg: #2a2b2f; --band-fg: #f3f4f5; --band-muted: #b8bcc1;
  --shadow-md: 0 4px 12px rgba(35,36,39,.08), 0 1px 3px rgba(35,36,39,.06);
  --shadow-lg: 0 24px 60px rgba(35,36,39,.16), 0 2px 6px rgba(35,36,39,.06);
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-flutter: cubic-bezier(.34,1.56,.64,1);
}
* { box-sizing: border-box; }
body { background: var(--surface); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; }
a { color: var(--primary-text); }
:focus-visible { outline: 2px solid var(--primary-strong); outline-offset: 2px; border-radius: 4px; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.sh-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 520px) { .sh-wrap { padding-inline: 16px; } }
.sh-note { background: var(--ink); color: #eceef0; font-size: 14px; }
.sh-note .sh-wrap { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; align-items: center; padding-block: 9px; text-align: center; }
.sh-note a { color: #8fc2e3; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.sh-note a:hover { text-decoration: underline; }
.sh-airmail { height: 6px; background: repeating-linear-gradient(-45deg, var(--seal) 0 12px, var(--raised) 12px 20px, var(--primary-strong) 20px 32px, var(--raised) 32px 40px); }
.sh-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.sh-row { display: flex; align-items: center; gap: 24px; height: 68px; }
.sh-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: 21px; white-space: nowrap; }
.sh-brand svg { width: 38px; height: 38px; }
.sh-nav { display: flex; gap: 4px; margin-left: 12px; }
.sh-nav a { color: var(--ink-muted); text-decoration: none; font-weight: 700; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.sh-nav a:hover { color: var(--ink); background: var(--sunken); }
.sh-nav a[aria-current="page"] { color: var(--primary-text); background: var(--primary-soft); }
.sh-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sh-login { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 999px; }
.sh-login:hover { background: var(--sunken); }
.sh-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 18px; border-radius: 999px; background: var(--primary-strong); color: var(--on-primary); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-md); }
.sh-btn:hover { background: var(--primary-text); }
.sh-menu { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); place-items: center; cursor: pointer; font-size: 20px; }
@media (max-width: 860px) {
  .sh-menu { display: grid; }
  .sh-login { display: none; }
  .sh-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; flex-direction: column; gap: 2px; padding: 10px 16px 16px; background: var(--raised); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .sh-nav.open { display: flex; }
  .sh-nav a { font-size: 17px; padding: 12px 14px; }
  .sh-nav .sh-nav-login { display: block; }
}
.sh-nav .sh-nav-login { display: none; }
@media (max-width: 400px) { .sh-btn { padding-inline: 14px; } .sh-brand { font-size: 19px; } }

.sf { margin-top: 96px; background: var(--raised); border-top: 1px solid var(--line); }
.sf-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 48px 32px; }
.sf-brand p { color: var(--ink-muted); margin: 12px 0 0; max-width: 34ch; }
.sf-brand .mono { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--ink); }
.sf h4 { margin: 4px 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.sf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sf ul a { color: var(--ink); text-decoration: none; font-weight: 600; }
.sf ul a:hover { color: var(--primary-text); text-decoration: underline; }
.sf-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 18px 28px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 14px; }
@media (max-width: 760px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

[id] { scroll-margin-top: 96px; }