/* Shared stylesheet for the hand-built long form pages.
   Used by /forgotten-charges-index and /sms-opt-in.

   Same deal as leaks.css: these pages do not load the Webflow bundle, because
   most of their traffic arrives cold from Reddit, Hacker News, a newsletter, or
   a carrier reviewer's browser. They ship the brand font, one logo, and this
   file. Brand system: instagram_campaign/CONTENT_SYSTEM.md */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/6199281eaf046ee138e150bb_SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/6199281e0b5fa910c90af817_SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/6199281ea841877b48a694b6_SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --navy: #1a1b27;
  --navy-soft: #232435;
  --navy-line: #33344a;
  --teal: #6fb7ab;
  --teal-bright: #8ad3c6;
  --white: #ffffff;
  --gray: #9a9aab;
  --font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--teal); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; }

strong { font-weight: 700; color: var(--white); }

/* The Index quotes two identifiers from the analysis script, and the default
   monospace fallback renders noticeably smaller than the body text. */
code {
  padding: 1px 5px;
  background: rgba(111, 183, 171, 0.12);
  border-radius: 5px;
  color: var(--teal-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  word-break: break-word;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 10;
  background: var(--teal);
  color: var(--navy);
  padding: 8px 14px;
  border-radius: 8px;
}

main, .site-head, .site-foot {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand img { display: block; width: 130px; height: auto; }
.head-cta {
  font-size: 15px;
  font-weight: 500;
  color: var(--teal);
  text-decoration: none;
  border: 1px solid var(--navy-line);
  border-radius: 999px;
  padding: 7px 15px;
  white-space: nowrap;
}
.head-cta:hover { border-color: var(--teal); }

/* Article */
.article-head { padding: 10px 0 8px; }
.eyebrow {
  margin: 0 0 10px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.article-head h1 { margin: 0 0 14px; font-size: 32px; font-weight: 700; }
.lede { margin: 0; color: var(--gray); font-size: 17px; }

article h2 {
  margin: 38px 0 12px;
  font-size: 22px;
  font-weight: 700;
}
article p { margin: 0 0 16px; color: var(--gray); }
article ul { margin: 0 0 18px; padding-left: 22px; color: var(--gray); }
article li { margin-bottom: 8px; }

.callout {
  margin: 0 0 18px;
  padding: 18px 20px;
  background: var(--navy-soft);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--teal);
  border-radius: 14px;
  color: var(--white);
}
.callout p { color: var(--white); }
.callout p:last-child { margin-bottom: 0; }

/* Wide content scrolls inside its own box, never the page */
.table-wrap {
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid var(--navy-line);
  border-radius: 14px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
th, td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--navy-line);
}
/* Nothing here is nowrap: the table has to fit a 390px screen without the reader
   discovering a hidden third column. */
tbody th { font-weight: 500; }
thead th.num { text-align: right; }
tbody td.num { text-align: right; }
thead th {
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
/* Figures stay on one line, because a wrapped "47.4%" reads as two numbers.
   The column headings above them are free to wrap. */
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.footnote { color: var(--gray); font-size: 14px; }

/* Buttons */
.actions { padding: 12px 0 8px; text-align: center; }
.btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn + .btn { margin-top: 10px; }
.btn-primary { background: var(--teal); color: var(--navy); }
.btn-primary:hover { background: var(--teal-bright); }
.btn-ghost { background: transparent; border-color: var(--navy-line); color: var(--white); }
.btn-ghost:hover { border-color: var(--teal); }
.actions-note { margin: 14px 0 0; color: var(--gray); font-size: 14px; }

/* Real screenshot, framed. A carrier reviewer looks at this before they read
   anything else on the page, so it stays a genuine capture at native size. */
.shot {
  margin: 0 0 18px;
  text-align: center;
}
.shot img {
  display: block;
  width: 100%;
  /* wide enough that the consent line inside the capture stays readable at 1x,
     which is the whole reason the screenshot is on the page */
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  background: var(--navy-soft);
  border: 1px solid var(--navy-line);
  border-radius: 22px;
}
.shot-caption { margin: 12px auto 0; max-width: 460px; color: var(--gray); font-size: 14px; }

/* Two captures, app and web, shown together. They stack on a phone and sit side
   by side once there is room for both to stay readable. The captures have
   different aspect ratios (a 3x iOS screen is taller than the web one), so the
   images are matched on width and allowed to differ in height rather than being
   cropped, which would weaken them as evidence. */
.shot-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: flex-start;
  justify-content: center;
  margin: 0 0 18px;
}
.shot-pair .shot { flex: 1 1 260px; max-width: 340px; margin-bottom: 0; }
.shot-pair .shot-caption { max-width: 340px; }

/* Footer */
.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: 30px;
  padding-top: 22px;
  padding-bottom: 40px;
  border-top: 1px solid var(--navy-line);
  font-size: 14px;
}
.site-foot a { color: var(--gray); text-decoration: none; }
.site-foot a:hover { color: var(--teal); }
.copyright { flex: 1 1 100%; margin: 4px 0 0; color: #6b6b7d; font-size: 13px; }

@media (min-width: 700px) {
  .article-head { padding-top: 24px; }
  .article-head h1 { font-size: 42px; }
  .btn { display: inline-block; width: auto; min-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}