/* ============================================================
   I WON'T READ THIS: visual identity. Site-specific.

   WHO THIS IS FOR
   Anyone with thousands of unread emails who's tired of handing
   out their real address, a little worried about scams, and not
   interested in becoming a tech person to fix it.

   WHAT THE DESIGN HAS TO SAY
   Your inbox, but calm. The guide looks like a tidy mail app:
   unread dots, sender and subject lines, a zero badge. Friendly
   and a little funny, like the name, with the safety parts plain
   and serious.

   SIGNATURES
   The guide as an inbox list, each page a message row with an
   unread dot. A zero unread badge as the brand mark. The three
   tier cards for which address to give. Scam signs in a rose
   panel labeled in words.

   COLOR
   Mail-app grey, white rows, ink, indigo for links and buttons,
   magenta for unread dots and scam labels, teal for safe steps.
   Every text pair is checked by the build script.

   TYPE
   Rubik for headings: rounded and friendly. Red Hat Text for
   reading: clear and even at small sizes.
   ============================================================ */

:root {
  --bg:        #f3f4f8;
  --card:      #ffffff;
  --ink:       #1d2130;
  --ink-soft:  #50566a;
  --indigo:    #3b3bb3;
  --magenta:   #a3245f;
  --teal:      #0e6b63;
  --teal-wash: #dff2ef;
  --rose-wash: #fbe7ef;
  --unread:    #eef0fb;
  --dark:      #1d2130;
  --lav:       #c9ccff;
  --line:      #e2e4ec;

  --accent:     var(--indigo);
  --accent-ink: #ffffff;
  --focus:      #3b3bb3;
  --measure:    66ch;

  --display: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Red Hat Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[hidden] { display: none !important; }
body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--bg); }
.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; }
h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); margin-bottom: 0.6rem; }
h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.3rem; }
p + p { margin-top: 0.8rem; }
a { color: var(--indigo); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }
a[href^="mailto:"] { overflow-wrap: anywhere; }
.kicker { font-family: var(--display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); margin-bottom: 0.5rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 54ch; }
.fine { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.8rem; }
.label { font-family: var(--display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin: 0 0 0.3rem; }
.label--alert { color: var(--magenta); }
.source { font-size: 0.8125rem; color: var(--ink-soft); margin-top: auto; padding-top: 0.5rem; overflow-wrap: anywhere; }

.site-header { background: var(--dark); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.55rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: #ffffff; text-decoration: none; }
.badge { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--lav); color: var(--dark); font-size: 0.9rem; font-weight: 700; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: #ffffff; text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { color: #ffffff; border-bottom-color: #ffffff; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--lav); }
.site-header :focus-visible { outline-color: var(--lav); }

main { padding-block: 2.75rem 4rem; }
.hero { padding-bottom: 1rem; }
.hero h1 { max-width: 20ch; margin-bottom: 0.9rem; }
.section { margin-top: 3.25rem; }

/* The inbox list */
.inbox { list-style: none; margin: 1rem 0 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.inbox li { max-width: none; border-bottom: 1px solid var(--line); }
.inbox li:last-child { border-bottom: 0; }
.row { display: grid; grid-template-columns: 1rem 13rem minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.1rem 0.9rem; align-items: baseline; padding: 0.9rem 1.1rem; background: var(--unread); color: var(--ink); text-decoration: none; min-height: 44px; }
.row:hover { background: #ffffff; }
.dot { grid-row: 1 / span 2; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--magenta); }
.from { font-weight: 700; }
.subject { font-weight: 600; color: var(--indigo); }
.preview { grid-column: 2 / -1; color: var(--ink-soft); font-size: 0.95rem; }

/* Tiers */
.tiers { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.tier { max-width: none; background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--ink-soft); border-radius: 12px; padding: 1rem 1.2rem; display: flex; flex-direction: column; }
.tier--throw { border-top-color: var(--magenta); }
.tier--alias { border-top-color: var(--indigo); }
.tier--real { border-top-color: var(--teal); }
.go { font-weight: 700; margin-top: auto; padding-top: 0.4rem; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

/* Cards, facts, tables */
.cards, .facts { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.card, .fact { max-width: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem 0.9rem; display: flex; flex-direction: column; }
.fact { border-left: 5px solid var(--indigo); border-radius: 0 12px 12px 0; }
.figure { font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1.1; color: var(--magenta); margin: 0.1rem 0 0.4rem; }
.figure span { font-size: 0.45em; color: var(--ink-soft); }
.specs { margin: 0.6rem 0 0; font-size: 0.95rem; }
.specs div { padding: 0.35rem 0; border-top: 1px solid var(--line); }
.specs dt { font-weight: 700; }
.specs dd { margin: 0; color: var(--ink-soft); }
.table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; margin-top: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.compare { border-collapse: collapse; min-width: 44rem; width: 100%; font-size: 0.95rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--display); font-weight: 600; background: var(--unread); }
.plain { margin: 0.6rem 0 0; padding-left: 1.2rem; max-width: 52rem; }
.plain li { margin-bottom: 0.6rem; overflow-wrap: anywhere; }

/* Panels */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.2rem, 3vw, 1.9rem); }
.panel--rose { background: var(--rose-wash); border-color: var(--rose-wash); }
.panel--teal { background: var(--teal-wash); border-color: var(--teal-wash); }
.panel ul, .panel ol { padding-left: 1.25rem; }
.panel li { margin-bottom: 0.45rem; }
.signs { columns: 2 20rem; column-gap: 2rem; }
.signs li { break-inside: avoid; }

/* Buttons, forms, prose */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.3rem; background: var(--indigo); color: #ffffff; border: 2px solid var(--indigo); border-radius: 12px; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; font-family: var(--body); }
.btn:hover { background: var(--dark); border-color: var(--dark); color: #ffffff; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }
.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--ink-soft); border-radius: 10px; background: #ffffff; font: inherit; }
.signup button { justify-self: start; }

.site-footer { background: var(--dark); color: #ffffff; margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lav); margin-bottom: 0.5rem; }
.site-footer p { color: #dfe1ea; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; }
.site-footer a:hover { color: var(--lav); }
.site-footer .fine { color: #d3d6e2; margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--lav); }

@media (max-width: 40rem) {
  .row { grid-template-columns: 1rem minmax(0, 1fr); }
  .subject, .preview { grid-column: 2; }
  .dot { grid-row: 1 / span 3; align-self: start; margin-top: 0.45rem; }
}
@media (forced-colors: active) { .inbox, .tier, .card, .fact, .panel, .btn, .table-wrap, .badge { border: 1px solid; } }