/* ══════════════════════════════════════════════════════════════════════════
   grabmail.io — one stylesheet, light only.

   The site declares `color-scheme: light` and never ships a dark variant, so
   there is deliberately no prefers-color-scheme block: a half-built dark theme
   that only some components honour looks worse than none at all.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── fonts ────────────────────────────────────────────────────────────── */
@font-face{font-family:Plex;src:url(../fonts/ibm-plex-sans-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Plex;src:url(../fonts/ibm-plex-sans-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Plex;src:url(../fonts/ibm-plex-sans-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:PlexMono;src:url(../fonts/ibm-plex-mono-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:PlexMono;src:url(../fonts/ibm-plex-mono-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ── tokens ───────────────────────────────────────────────────────────── */
:root{
  --ink:#0d1220;          /* headings */
  --ink-2:#2c3547;        /* body */
  --muted:#5f6a80;        /* secondary text — 5.4:1 on white */
  --line:#e3e8f0;
  --line-2:#eef1f7;
  --bg:#ffffff;
  --bg-2:#f7f9fc;
  --brand:#1b54d6;        /* 6.4:1 on white */
  --brand-d:#123fa6;
  --tint:#eaf0fe;
  --ok:#0b7a54;
  --bad:#c22a38;

  --ff:Plex,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --ff-mono:PlexMono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-s:8px; --r:12px; --r-l:18px;
  --gut:20px;
  --hd-h:68px;

  --sh-1:0 1px 2px rgba(13,18,32,.06), 0 1px 1px rgba(13,18,32,.04);
  --sh-2:0 4px 16px rgba(13,18,32,.07), 0 1px 3px rgba(13,18,32,.05);
  --sh-3:0 24px 64px rgba(13,18,32,.12), 0 2px 10px rgba(13,18,32,.05);

  --ease:cubic-bezier(.2,.7,.3,1);
  color-scheme:light;
}
@media(min-width:720px){:root{--gut:32px}}

/* ── reset ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font:400 17px/1.62 var(--ff);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure,dl{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,select{font:inherit;color:inherit}
code,pre{font-family:var(--ff-mono)}
table{border-collapse:collapse;width:100%}

/* One focus style for the whole site, and it is always visible on keyboard. */
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

/* ── helpers ──────────────────────────────────────────────────────────── */
.wrap{width:min(1160px,100% - var(--gut)*2);margin-inline:auto}
.wrap-narrow{width:min(760px,100% - var(--gut)*2)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{width:1em;height:1em;flex:none}

.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:100;
  background:var(--brand);color:#fff;padding:12px 18px;border-radius:0 0 var(--r) var(--r);
  font-weight:500;transition:top .18s var(--ease);
}
.skip:focus{top:0;text-decoration:none}

/* Anchor targets must clear the sticky header. */
[id]{scroll-margin-top:calc(var(--hd-h) + 18px)}

.eyebrow{
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);margin-bottom:14px;
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:var(--r-s);border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:500;font-size:15px;line-height:1.2;white-space:nowrap;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .08s var(--ease);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{--btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:var(--brand);box-shadow:var(--sh-1)}
.btn-primary:hover{--btn-bg:var(--brand-d);--btn-bd:var(--brand-d)}
.btn-ghost{--btn-fg:var(--ink);--btn-bd:var(--line);--btn-bg:#fff}
.btn-ghost:hover{--btn-bg:var(--bg-2);--btn-bd:#d3dae6}
.btn-quiet{--btn-fg:var(--muted);padding:9px 12px;font-size:14px}
.btn-quiet:hover{--btn-bg:var(--bg-2);--btn-fg:var(--ink)}
.btn-lg{padding:14px 26px;font-size:16px}
.btn-block{width:100%}
/* A copy that worked says so in place, for exactly as long as it takes to read. */
.btn[data-copied]{--btn-bg:var(--ok);--btn-fg:#fff;--btn-bd:var(--ok)}
.btn-quiet[data-copied]{--btn-bg:transparent;--btn-fg:var(--ok);--btn-bd:transparent}

/* ── header ───────────────────────────────────────────────────────────── */
.hd{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
/* The rule only fires once the page has actually moved, so the bar is flat at
   rest and lifts off the content as soon as anything scrolls under it. */
.hd[data-scrolled]{border-bottom-color:var(--line);box-shadow:var(--sh-1)}
/* On the homepage the hero band starts at y=0 and this bar floats over it, so
   the image reads as one piece from the very top of the window. The instant the
   page moves the bar goes opaque, so scrolling text never slides under it. */
.page-home .hd:not([data-scrolled]){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

.hd-in{display:flex;align-items:center;gap:14px;height:var(--hd-h)}

.hd-brand{display:inline-flex;align-items:center;gap:10px;color:var(--brand);flex:none}
.hd-brand:hover{text-decoration:none}
.hd-mark{width:29px;height:29px}
.hd-word{font-size:19px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
/* The suffix in mono, one shade back: the wordmark says what the product is
   and where it lives without needing a second line of type. */
.hd-tld{font-family:var(--ff-mono);font-weight:400;font-size:.82em;color:var(--muted);letter-spacing:0}

.hd-sep{display:none;width:1px;height:22px;background:var(--line);flex:none}

.hd-nav{display:none}
.hd-list{display:flex;align-items:center;gap:2px}
.hd-link{
  position:relative;display:block;padding:9px 12px;
  color:var(--ink-2);font-size:15px;font-weight:450;
  transition:color .15s var(--ease);
}
.hd-link:hover{color:var(--ink);text-decoration:none}
/* A rule that grows under the current section, instead of a filled pill: it
   marks position without competing with the one filled button on the bar. */
.hd-link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .18s var(--ease);
}
.hd-link:hover::after{transform:scaleX(1);background:var(--line)}
/* Scroll-spy: app.js marks the section currently in view. */
.hd-link[aria-current=true]{color:var(--brand);font-weight:500}
.hd-link[aria-current=true]::after{transform:scaleX(1);background:var(--brand)}

.hd-act{display:none;gap:8px;margin-left:auto}

.hd-burger{
  margin-left:auto;display:grid;place-items:center;
  width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:var(--r-s);
  background:#fff;cursor:pointer;
}
.hd-burger:hover{background:var(--bg-2)}
.hd-burger-box{display:block;width:18px;height:12px;position:relative}
.hd-burger-box span{
  position:absolute;left:0;height:2px;width:100%;border-radius:2px;background:var(--ink);
  transition:transform .22s var(--ease),opacity .16s var(--ease),top .22s var(--ease);
}
.hd-burger-box span:nth-child(1){top:0}
.hd-burger-box span:nth-child(2){top:5px}
.hd-burger-box span:nth-child(3){top:10px}
/* The icon is driven by aria-expanded, never by a separate class, so the
   picture and the announced state cannot drift apart. */
.hd-burger[aria-expanded=true] span:nth-child(1){top:5px;transform:rotate(45deg)}
.hd-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.hd-burger[aria-expanded=true] span:nth-child(3){top:5px;transform:rotate(-45deg)}

@media(min-width:960px){
  .hd-nav{display:block}
  .hd-sep{display:block}
  .hd-act{display:flex}
  .hd-burger{display:none}
}

/* ── mobile drawer ────────────────────────────────────────────────────── */
/* A class that sets `display` outranks the user-agent `[hidden]{display:none}`
   at equal specificity, so without this guard the drawer would sit open on
   every page load. Fleet-wide rule, learned the hard way. */
.drawer[hidden]{display:none!important}
.drawer{
  position:fixed;inset:var(--hd-h) 0 0;z-index:45;
  background:#fff;overflow-y:auto;
  animation:drawer-in .2s var(--ease);
}
@keyframes drawer-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.drawer{animation:none}}
.drawer-in{padding:20px var(--gut) 40px;display:flex;flex-direction:column;gap:8px}
.drawer-list{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.drawer-link{
  display:block;padding:14px 4px;color:var(--ink);font-size:18px;font-weight:500;
  border-bottom:1px solid var(--line-2);
}
.drawer-link:hover{color:var(--brand);text-decoration:none}
.drawer-list li:last-child .drawer-link{border-bottom:0}
.drawer-note{margin-top:14px;color:var(--muted);font-size:14px;text-align:center}
body[data-locked]{overflow:hidden}
@media(min-width:960px){.drawer{display:none!important}}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — a full-bleed band carrying only the promise. The composer that acts
   on it lives in .tool below and is lifted back over this band's lower edge,
   so neither has to share a half-empty column with the other.
   ══════════════════════════════════════════════════════════════════════════ */
/* Pulled up under the sticky bar so the band starts at the very top of the
   window; the padding puts the header's height back so nothing hides behind it.
   Kept deliberately short — a hero that costs two screens of scrolling before
   the tool appears is a hero that gets scrolled past. */
.hero{
  position:relative;isolation:isolate;text-align:center;overflow:hidden;
  margin-top:calc(var(--hd-h) * -1);
  padding:calc(var(--hd-h) + clamp(36px,4.6vw,62px)) 0 clamp(44px,5.4vw,70px);
  border-bottom:1px solid var(--line);
}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
/* ONE wash, and a restrained one: it lifts only the middle of the frame so the
   centred headline keeps its contrast, and leaves the edges of the image alone.
   The previous version also faded the whole band to solid white at the bottom,
   which is why the picture was invisible and the section did not read as a hero
   at all. The band now ends on a hard edge instead of dissolving. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(78% 62% at 50% 46%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.52) 48%, rgba(255,255,255,0) 82%);
}
.hero-in{position:relative}
.hero-h{
  font-size:clamp(33px,5vw,55px);line-height:1.05;letter-spacing:-.035em;
  font-weight:600;color:var(--ink);max-width:17ch;margin-inline:auto;
  text-wrap:balance;
}
.hero-sub{
  margin:14px auto 0;font-size:clamp(16px,1.5vw,18.5px);color:var(--muted);
  max-width:72ch;text-wrap:pretty;
}

/* ── the composer ─────────────────────────────────────────────────────── */
/* The card used to be pulled up over the hero. That let it eat the lower third
   of the picture and made the band look like a caption for the card rather than
   a section of its own. It now sits below, on the page's own white. */
.tool{position:relative;padding:clamp(26px,3.4vw,44px) 0 clamp(20px,2.6vw,34px)}
.panel{
  position:relative;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-2);padding:clamp(20px,2.4vw,26px) clamp(16px,2.6vw,26px);
}
.composer{--fld-h:clamp(54px,6.2vw,62px)}
.composer-bar{display:flex;flex-direction:column;gap:12px;max-width:900px;margin-inline:auto}
@media(min-width:760px){.composer-bar{flex-direction:row;align-items:stretch}}

/* TWO VISIBLY DISTINCT SEGMENTS inside one bar. The first attempt fused them
   into a single flat box: the name drifted at the far left, the domain floated
   at the far right with a whole empty field between them, and nothing said the
   domain could be changed at all. The divider and the tint fix both problems —
   the pair still reads as one address, but the right half now looks pressable. */
.composer-field{
  flex:1 1 auto;min-width:0;display:flex;align-items:stretch;overflow:hidden;
  border:1.5px solid #d5dce7;border-radius:var(--r);background:#fff;
  box-shadow:var(--sh-1);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.composer-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--tint)}
.composer-field:has(.composer-user[aria-invalid=true]){border-color:var(--bad);box-shadow:0 0 0 4px #fdeced}

.composer-user{
  flex:1 1 auto;min-width:0;height:var(--fld-h);
  border:0;background:transparent;outline:none;
  padding:0 12px 0 18px;
  font-family:var(--ff-mono);font-size:clamp(17px,2.6vw,21px);font-weight:500;
  color:var(--ink);letter-spacing:-.015em;
}
.composer-user::placeholder{color:#a3adbf;font-weight:400;letter-spacing:0}

/* Tinted, divided and hover-lit: it has to look like something you can press. */
.composer-domain{
  flex:none;max-width:58%;height:var(--fld-h);
  border:0;border-left:1.5px solid #d5dce7;outline:none;cursor:pointer;appearance:none;
  padding:0 42px 0 16px;
  background-color:var(--bg-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%232c3547' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:16px;
  font-family:var(--ff-mono);font-size:clamp(15px,2.2vw,18px);font-weight:500;color:var(--ink);
  transition:background-color .15s var(--ease);
}
.composer-domain:hover{background-color:#e9eef6}
.composer-domain:focus-visible{outline:3px solid var(--brand);outline-offset:-3px;border-radius:0}
@media(min-width:760px){.composer-domain{max-width:44%}}

.composer-go{flex:none;height:var(--fld-h);padding-inline:28px;font-size:16px;border-radius:var(--r)}

.composer-under{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  max-width:900px;margin:14px auto 0;
}
.composer-tools{display:flex;flex-wrap:wrap;gap:2px}
.composer-note{font-size:13px;color:var(--muted);text-align:left}
/* A class that sets `display` would outrank the UA sheet's [hidden] rule, so
   this guard is not optional — without it the error line sits open for ever. */
.composer-hint[hidden]{display:none!important}
.composer-hint{max-width:900px;margin:10px auto 0;text-align:left;font-size:13px;color:var(--bad)}

.facts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  margin-top:26px;color:var(--muted);font-size:14.5px;
}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none}

.pulse{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 0 rgba(27,84,214,.45);
  animation:pulse 2.1s var(--ease) infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 14px rgba(27,84,214,0)}100%{box-shadow:0 0 0 0 rgba(27,84,214,0)}}
@media(prefers-reduced-motion:reduce){.pulse{animation:none}}

/* ══════════════════════════════════════════════════════════════════════════
   INBOX PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.page-inbox #main{background:var(--bg-2);min-height:70vh}

/* Sticky: the address is what the visitor came for, and they should never have
   to scroll back up to copy it. Sits directly under the site header. */
.ibx-bar{
  position:sticky;top:var(--hd-h);z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.ibx-bar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:13px 0}
.ibx-id{min-width:0}
.ibx-l{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ibx-addr{
  margin-top:3px;font-family:var(--ff-mono);font-size:clamp(15px,2.4vw,21px);
  font-weight:500;color:var(--ink);letter-spacing:-.01em;word-break:break-all;
}
.ibx-act{display:flex;flex-wrap:wrap;gap:8px}
.ibx-act .btn[data-busy]{opacity:.65;pointer-events:none}
.ibx-act .btn[data-busy] .ic{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ibx-act .btn[data-busy] .ic{animation:none}}

.ibx-warn{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:18px;padding:12px 14px;border-radius:var(--r-s);
  background:#fff8e6;border:1px solid #f0dfae;color:#5f4a10;font-size:14px;line-height:1.5;
}
.ibx-warn .ic{width:17px;height:17px;margin-top:2px;color:#a8790c}
.ibx-warn a{color:#7a4f00;text-decoration:underline}

.ibx-main{display:grid;gap:18px;margin-top:18px;align-items:start}
@media(min-width:1000px){.ibx-main{grid-template-columns:minmax(300px,370px) minmax(0,1fr);gap:20px}}

.ibx-list-pane,.ibx-read-pane{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden;
}
.ibx-list-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.ibx-list-h{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ibx-count{font-size:13px;color:var(--muted)}

.ibx-list[hidden]{display:none!important}
.ibx-list li+li{border-top:1px solid var(--line-2)}
.ibx-item{
  display:block;width:100%;text-align:left;padding:14px 18px;
  background:#fff;border:0;cursor:pointer;
  transition:background .12s var(--ease);
}
.ibx-item:hover{background:var(--bg-2)}
.ibx-item[aria-current=true]{background:var(--tint)}
.ibx-item-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ibx-from{font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibx-time{font-size:12.5px;color:var(--muted);flex:none}
.ibx-subject{margin-top:3px;font-size:15px;font-weight:500;color:var(--ink)}
.ibx-item[data-unseen] .ibx-subject::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--brand);margin-right:8px;vertical-align:middle;
}

.ibx-empty{padding:46px 24px;text-align:center}
.ibx-empty[hidden]{display:none!important}
.ibx-empty-h{margin-top:14px;font-size:15px;font-weight:500;color:var(--ink)}
.ibx-empty-p{margin:6px auto 0;font-size:14px;color:var(--muted);max-width:46ch;line-height:1.75}
/* inline-block + overflow-wrap, never word-break:break-all: break-all split the
   address mid-word ("s / ignup-test@…"), which reads as a rendering fault. The
   chip now moves to its own line rather than shattering. */
.ibx-empty-p code{
  display:inline-block;font-size:13px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:5px;padding:2px 6px;word-break:normal;overflow-wrap:anywhere;
}

.ibx-read-pane{min-height:340px;display:flex;flex-direction:column}
.ibx-read-empty{
  flex:1;display:grid;place-content:center;justify-items:center;gap:12px;
  padding:48px 24px;color:var(--muted);text-align:center;font-size:15px;
}
.ibx-read-empty[hidden]{display:none!important}
.ibx-read-ic{width:46px;height:46px;color:#ccd5e2}
.ibx-read[hidden]{display:none!important}
.ibx-read{padding:20px 22px 26px}
.ibx-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;font-size:14px;color:var(--muted);background:none;border:0;cursor:pointer;padding:6px 2px}
.ibx-back:hover{color:var(--brand)}
@media(min-width:1000px){.ibx-back{display:none}}
.ibx-msg-sub{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.ibx-msg-meta{margin-top:8px;padding-bottom:16px;border-bottom:1px solid var(--line-2);font-size:14px;color:var(--muted)}
.ibx-msg-meta b{font-weight:500;color:var(--ink-2)}
.ibx-msg-body{margin-top:18px;font-size:15.5px;line-height:1.7;color:var(--ink-2);overflow-wrap:anywhere}
.ibx-msg-body pre{white-space:pre-wrap;font-family:var(--ff);margin:0}

/* One pane at a time on a narrow screen: the list IS the page until a message
   is opened, and the reading pane takes over with its own way back. */
@media(max-width:999px){
  .ibx[data-view=read] .ibx-list-pane{display:none}
  .ibx:not([data-view=read]) .ibx-read-pane{display:none}
}

.ibx-foot{margin:18px 0 44px;font-size:13px;color:var(--muted);text-align:center}

.ibx-pick{padding:clamp(56px,10vw,110px) 0 clamp(60px,9vw,100px)}
.ibx-pick-h{font-size:clamp(28px,4vw,42px);font-weight:600;letter-spacing:-.03em;color:var(--ink);text-align:center}
.ibx-pick-p{margin:12px auto 28px;color:var(--muted);text-align:center;max-width:52ch}

/* ── sections ─────────────────────────────────────────────────────────── */
/* Vertical rhythm is this page's biggest cost: five sections at 96px top AND
   bottom spent 960px on nothing but air. Trimmed to a still-generous 74px. */
.sec{padding:clamp(46px,6vw,74px) 0}
.sec-alt{background:var(--bg-2);border-block:1px solid var(--line-2)}
.sec-hd{max-width:64ch;margin-bottom:clamp(24px,2.8vw,34px)}
.sec-hd-c{max-width:none;margin-inline:auto;text-align:center}
.sec-h{font-size:clamp(26px,3.4vw,38px);line-height:1.14;letter-spacing:-.025em;font-weight:600;color:var(--ink);text-wrap:balance}
/* The heading stays short so it lands; the paragraph under it gets the width.
   At 60ch every intro wrapped to three lines while half the container sat
   empty. Past roughly 78ch a line stops being comfortable to read, so 76 is the
   ceiling worth taking — not the full 1160px. */
.sec-hd-c .sec-h{max-width:24ch;margin-inline:auto}
.sec-hd-c .sec-sub{max-width:76ch;margin-inline:auto}
.sec-sub{margin-top:12px;color:var(--muted);font-size:17px}
.note{margin-top:16px;font-size:14px;color:var(--muted)}

/* steps */
.steps{display:grid;gap:22px}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr);gap:28px}}
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px 28px;box-shadow:var(--sh-1);
}
.step-n{font-family:var(--ff-mono);font-size:13px;font-weight:500;color:var(--brand);letter-spacing:.06em}
.step-h{margin-top:12px;font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.step-p{margin-top:8px;color:var(--muted);font-size:15.5px}

/* split layouts */
.split{display:grid;gap:clamp(32px,5vw,64px);align-items:start}
@media(min-width:940px){
  .split{grid-template-columns:1.05fr .95fr}
  .split-rev .split-txt{order:1}
  .split-rev .split-aside{order:2}
}
.split-txt .sec-h{max-width:18ch}
.split-txt .sec-sub{max-width:52ch}

/* ── API explorer ─────────────────────────────────────────────────────── */
.apix{display:grid;gap:20px;align-items:start}
@media(min-width:940px){.apix{grid-template-columns:minmax(270px,340px) minmax(0,1fr);gap:26px}}

.apix-tabs{display:grid;gap:8px;align-content:start}
.apix-tab{
  display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.apix-tab:hover{border-color:#ccd5e3;background:var(--bg-2)}
.apix-tab[aria-selected=true]{border-color:var(--brand);background:var(--tint)}
.apix-tab .verb{flex:none;margin-top:1px}
.apix-tab-txt{min-width:0}
.apix-tab-h{display:block;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.apix-tab-p{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}

.apix-rate{
  margin-top:6px;padding:12px 14px;border-radius:var(--r);
  background:var(--bg-2);border:1px solid var(--line-2);
  font-size:13px;line-height:1.55;color:var(--muted);
}
.apix-rate strong{display:block;color:var(--ink);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}

/* Without this guard a class that sets `display` would outrank the UA sheet's
   [hidden] rule and every panel would render stacked on top of each other. */
.apix-panel[hidden]{display:none!important}
.apix-panel:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:var(--r)}
.apix-desc{margin-bottom:12px;font-size:15px;color:var(--muted);max-width:62ch}

.verb{
  display:inline-block;padding:2px 7px;border-radius:5px;
  font-family:var(--ff-mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;
}
.verb-get{background:var(--tint);color:var(--brand-d)}
.verb-delete{background:#fdeced;color:#a51d29}

.code{border-radius:var(--r);overflow:hidden;border:1px solid #1d2534;box-shadow:var(--sh-2)}
.code-hd{
  display:flex;align-items:center;gap:9px;padding:9px 12px 9px 16px;
  background:#161c29;color:#9aa6bd;font-size:13px;border-bottom:1px solid #232c3d;
}
.code-dot{width:9px;height:9px;border-radius:50%;background:#3ba55d;flex:none}
.code-copy{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:none;
  padding:5px 9px;border:1px solid #2b3547;border-radius:6px;
  background:transparent;color:#9aa6bd;font-size:12.5px;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.code-copy:hover{background:#1e2637;color:#e2e8f5;border-color:#3a465c}
.code-copy[data-copied]{background:#13543c;border-color:#13543c;color:#c8f0dd}
.code-copy:focus-visible{outline:2px solid #6d94ff;outline-offset:1px}
.code-p{color:#6f7d95;user-select:none}
.code-body{
  margin:0;padding:18px 16px;background:#0f141e;color:#d6dded;
  font-size:13px;line-height:1.72;overflow-x:auto;
}
.code-body code{color:inherit;white-space:pre}

/* ── custom domains: a setup path, then the reason to bother ──────────── */
.setup{display:grid;gap:16px}
@media(min-width:940px){
  .setup{grid-template-columns:repeat(2,1fr)}
  .setup-i-wide{grid-column:1 / -1}
}
.setup-i{
  display:flex;gap:15px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh-1);
}
.setup-n{
  display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:50%;
  background:var(--brand);color:#fff;
  font-family:var(--ff-mono);font-size:14px;font-weight:500;line-height:1;
}
.setup-b{flex:1;min-width:0}
.setup-h{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.012em}
.setup-p{margin-top:8px;color:var(--muted);font-size:15px}
.setup-p code,.sec-sub code{
  font-size:13.5px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:5px;padding:2px 6px;color:var(--ink-2);overflow-wrap:anywhere;
}

/* The DNS record as four labelled fields. It used to be a four-column table for
   a single row, whose value cell held a flex box — which pushed the hostname,
   the one string anyone needs to copy, onto a line of its own. */
.rec{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;padding:14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
}
.rec-f{display:grid;gap:6px;min-width:0}
.rec-f-grow{flex:1 1 280px}
.rec-l{font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rec-l-hint{text-transform:none;letter-spacing:0;font-weight:400}
.rec-v{
  display:block;padding:9px 12px;border-radius:var(--r-s);
  background:#fff;border:1px solid var(--line);
  font-family:var(--ff-mono);font-size:14px;color:var(--ink);white-space:nowrap;
}
.rec-val{display:flex;gap:8px;min-width:0}
.rec-v-strong{flex:1 1 auto;min-width:0;font-weight:500;border-color:#cfd8e6;overflow-x:auto}
.rec-copy{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:9px 13px;border:1px solid var(--line);border-radius:var(--r-s);
  background:#fff;color:var(--ink);font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.rec-copy:hover{background:var(--bg-2);border-color:#cfd8e6}
.rec-copy[data-copied]{background:var(--ok);border-color:var(--ok);color:#fff}

/* The comparison replaced a "Public domains" card that listed one domain and
   repeated a warning already made twice further up the page. */
.cmp{
  margin-top:26px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;box-shadow:var(--sh-1);overflow-x:auto;
}
.cmp-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp-t{font-size:14.5px;min-width:660px}
.cmp-t thead th{
  text-align:left;padding:15px 18px;vertical-align:top;
  font-size:14.5px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);
}
.cmp-sub{display:block;margin-top:4px;font-family:var(--ff-mono);font-size:12px;font-weight:400;color:var(--muted)}
.cmp-t tbody th{
  text-align:left;padding:13px 18px;white-space:nowrap;
  font-size:14px;font-weight:450;color:var(--ink-2);border-bottom:1px solid var(--line-2);
}
.cmp-t td{padding:13px 18px;color:var(--muted);border-bottom:1px solid var(--line-2)}
.cmp-t tbody tr:last-child th,.cmp-t tbody tr:last-child td{border-bottom:0}
/* The column being sold is tinted the brand colour end to end, so the eye lands
   on it without a single word of salesmanship. */
.cmp-mine{background:var(--tint)}
.cmp-t td.cmp-mine{color:var(--ink-2)}
.cmp-t strong{font-weight:600;color:var(--ink)}

/* features */
/* A single hairline grid rather than six floating cards. The 1px gaps are drawn
   by the container's own background showing through, so there is no nth-child
   arithmetic to keep in step with the breakpoints. */
.feats{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-1);
}
@media(min-width:620px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.feats{grid-template-columns:repeat(3,1fr)}}
.feat{background:#fff;padding:20px 20px 22px}

/* The figure carries the cell. Whoever is scanning reads six numbers; whoever
   has stopped reads the line underneath. */
.feat-fig{display:flex;align-items:center;gap:10px}
.feat-ic{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex:none;
  background:var(--tint);color:var(--brand);
}
.feat-ic svg{width:16px;height:15px}
.feat-v{font-size:17px;font-weight:600;color:var(--brand);letter-spacing:-.015em}
.feat-h{margin-top:12px;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.feat-p{margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.55}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 2px;cursor:pointer;list-style:none;
  font-size:17px;font-weight:500;color:var(--ink);
}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--brand)}
.faq-chev{width:16px;height:16px;flex:none;color:var(--muted);transition:transform .2s var(--ease)}
.faq-i[open] .faq-chev{transform:rotate(180deg)}
.faq-a{padding:0 2px 18px}
.faq-a p{color:var(--muted);font-size:16px;max-width:76ch}

/* CTA */
.cta{padding:clamp(46px,6vw,70px) 0;background:var(--bg-2);border-top:1px solid var(--line-2)}
.cta-in{text-align:center}
.cta-h{font-size:clamp(26px,3.4vw,36px);line-height:1.16;letter-spacing:-.025em;font-weight:600;color:var(--ink)}
.cta-p{margin-top:10px;color:var(--muted);font-size:17px}
.cta-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}

/* ── footer ───────────────────────────────────────────────────────────── */
.ft{background:#fff;border-top:1px solid var(--line);padding:clamp(44px,6vw,64px) 0 28px}
.ft-top{display:grid;gap:36px}
@media(min-width:680px){.ft-top{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ft-top{grid-template-columns:1.5fr repeat(4,1fr);gap:40px}}
.ft-logo{display:inline-flex;align-items:center;gap:10px;color:var(--brand)}
.ft-logo:hover{text-decoration:none}
.ft-mark{width:28px;height:28px}
.ft-word{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ft-blurb{margin-top:14px;color:var(--muted);font-size:14.5px;max-width:38ch}
.ft-status{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.ft-h{font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.ft-col ul{display:grid;gap:10px}
.ft-col a{color:var(--muted);font-size:14.5px}
.ft-col a:hover{color:var(--brand)}
.ft-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  margin-top:clamp(36px,5vw,52px);padding-top:22px;border-top:1px solid var(--line-2);
  color:var(--muted);font-size:13.5px;
}
.ft-facts{display:flex;flex-wrap:wrap;gap:8px 20px}
.ft-facts li{display:flex;align-items:center;gap:8px}
.ft-facts li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:#c3ccdb;margin-right:12px}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.e404{padding:clamp(70px,12vw,140px) 0;text-align:center}
.e404-c{font-family:var(--ff-mono);font-size:14px;font-weight:500;letter-spacing:.1em;color:var(--brand)}
.e404-h{margin-top:14px;font-size:clamp(28px,4.4vw,42px);line-height:1.12;letter-spacing:-.025em;font-weight:600;color:var(--ink)}
.e404-p{margin-top:14px;color:var(--muted);font-size:17px;margin-inline:auto;max-width:48ch}
.e404-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}

/* ══════════════════════════════════════════════════════════════════════════
   DOCUMENTATION PAGES
   ══════════════════════════════════════════════════════════════════════════ */
.page-docs #main{background:var(--bg-2)}

.doc-top{padding:clamp(28px,4vw,44px) 0 clamp(20px,2.6vw,28px)}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--muted)}
.crumb li+li::before{content:"/";margin-right:8px;color:#b9c2d2}
.crumb [aria-current]{color:var(--ink-2)}
.doc-h{margin-top:12px;font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-.032em;font-weight:600;color:var(--ink)}
.doc-lede{margin-top:12px;color:var(--muted);font-size:17.5px;max-width:70ch}

.doc-flag{
  display:flex;gap:11px;align-items:flex-start;
  margin-top:20px;padding:13px 15px;border-radius:var(--r-s);max-width:88ch;
  background:#fff8e6;border:1px solid #f0dfae;color:#5f4a10;font-size:14.5px;line-height:1.55;
}
.doc-flag .ic{width:18px;height:18px;margin-top:2px;color:#a8790c;flex:none}
.doc-flag strong{font-weight:600}

.doc-body{display:grid;gap:26px;align-items:start;padding-bottom:clamp(40px,6vw,72px)}
@media(min-width:1000px){.doc-body{grid-template-columns:220px minmax(0,1fr);gap:44px}}

/* Contents ride along with the reader rather than sitting at the top and being
   scrolled away from — on a reference page the map is needed most at the bottom. */
.doc-toc{display:none}
@media(min-width:1000px){
  .doc-toc{display:block;position:sticky;top:calc(var(--hd-h) + 20px)}
}
.doc-toc-h{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.doc-toc ul{display:grid;gap:1px;border-left:2px solid var(--line)}
.doc-toc a{
  display:block;padding:6px 12px;margin-left:-2px;
  border-left:2px solid transparent;
  color:var(--muted);font-size:14px;
}
.doc-toc a:hover{color:var(--ink);text-decoration:none}
.doc-toc a[aria-current=true]{color:var(--brand);border-left-color:var(--brand);font-weight:500}

.doc-main{min-width:0}
.doc-s{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,30px);box-shadow:var(--sh-1);
}
.doc-s+.doc-s{margin-top:18px}
.doc-s-h{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
.doc-s p{color:var(--ink-2);font-size:15.5px;line-height:1.68;max-width:78ch}
.doc-s p+p{margin-top:12px}
.doc-s code{
  font-size:13.5px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:5px;padding:2px 6px;color:var(--ink);overflow-wrap:anywhere;
}
/* The chip styling above must stop at the edge of a dark code block, or every
   line of the JSON sample gets a pale rectangle behind it. Two classes beat the
   one above on specificity, so no !important is needed. */
.doc-s .code code,.doc-s .doc-pre code{
  background:none;border:0;border-radius:0;padding:0;color:inherit;
  font-size:13px;overflow-wrap:normal;
}
.doc-n{margin-top:14px;font-size:14px!important;color:var(--muted)!important}
.doc-link{font-weight:500}

.doc-l{margin-top:12px;display:grid;gap:8px;max-width:78ch}
.doc-l li{position:relative;padding-left:20px;color:var(--ink-2);font-size:15.5px}
.doc-l li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--brand)}

.doc-inline{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.doc-code{
  padding:10px 14px!important;font-size:15px!important;font-weight:500;
  background:var(--bg-2)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-s)!important;
}
.doc-copy{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:9px 13px;border:1px solid var(--line);border-radius:var(--r-s);
  background:#fff;color:var(--ink);font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.doc-copy:hover{background:var(--bg-2);border-color:#cfd8e6}
.doc-copy[data-copied]{background:var(--ok);border-color:var(--ok);color:#fff}

.doc-pre{
  margin-top:14px;padding:16px;border-radius:var(--r);overflow-x:auto;
  background:#0f141e;color:#d6dded;font-size:13px;line-height:1.7;
}
.doc-pre code{background:none!important;border:0!important;padding:0!important;color:inherit;font-size:13px}

/* ── one endpoint ─────────────────────────────────────────────────────── */
.ep{margin-top:26px;padding-top:26px;border-top:1px solid var(--line-2)}
.ep:first-of-type{margin-top:18px}
.ep-hd{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ep-path{
  font-size:15px!important;font-weight:500;padding:5px 10px!important;
  background:var(--bg-2)!important;border:1px solid var(--line)!important;
}
.ep-desc{margin-top:10px;color:var(--muted)!important}
.ep-h{margin-top:20px;margin-bottom:10px;font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* The table scrolls inside its own box; the page never scrolls sideways. */
.ep-tw{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
.ep-t{font-size:14px;min-width:620px}
.ep-t th{
  text-align:left;padding:10px 14px;background:var(--bg-2);border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.ep-t td{padding:11px 14px;border-bottom:1px solid var(--line-2);color:var(--muted);vertical-align:top}
.ep-t tbody tr:last-child td{border-bottom:0}
.ep-t td:first-child code{background:none;border:0;padding:0;font-weight:500;color:var(--ink)}
.ep-req{color:var(--bad);font-weight:500}
.ep-opt{color:var(--muted)}

.ep-codes{display:grid;gap:8px}
.ep-code{display:flex;gap:12px;align-items:baseline}
.ep-code dd{margin:0;color:var(--muted);font-size:14.5px}
.ep-num{
  display:inline-block;min-width:44px;text-align:center;padding:3px 8px;border-radius:5px;
  font-family:var(--ff-mono);font-size:12.5px;font-weight:500;
}
.ep-num-2{background:#e7f6ee;color:#0b6b48}
.ep-num-4{background:#fdeced;color:#a51d29}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED PAGE COMPONENTS

   Every one of these is built to fill the row it sits in. A policy or reference
   page written as prose in a single narrow column wastes half the window and
   doubles the scrolling; these put the label at the left edge and the substance
   across the rest, so the page is read sideways as well as downwards.
   ══════════════════════════════════════════════════════════════════════════ */

.doc-updated{margin-top:14px;font-size:13.5px;color:var(--muted)}

/* ── term / description, edge to edge ─────────────────────────────────── */
.defs{margin-top:6px;border-top:1px solid var(--line-2)}
.def{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--line-2)}
@media(min-width:720px){
  .def{grid-template-columns:minmax(160px,240px) minmax(0,1fr);gap:24px;align-items:baseline}
}
.def dt{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.def dd{margin:0;font-size:15px;line-height:1.62;color:var(--muted)}
.def dd code{font-size:13px}

/* ── card grid ────────────────────────────────────────────────────────── */
.cards{display:grid;gap:14px;margin-top:6px}
@media(min-width:700px){.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.card{padding:18px 18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.card-h{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.012em}
.card-b{margin-top:7px}
.card-b p{font-size:14.5px!important;color:var(--muted)!important;line-height:1.6}
.card-b p+p{margin-top:10px}

/* ── explanation beside its command ───────────────────────────────────── */
.duo{display:grid;gap:16px;align-items:start}
@media(min-width:900px){.duo{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:26px}}
.duo-a p{font-size:15px!important}
.duo-b{min-width:0}

/* ── numbered walkthrough ─────────────────────────────────────────────── */
.steps-n{margin-top:12px;counter-reset:sn;display:grid;gap:12px}
.steps-n li{position:relative;padding-left:36px;color:var(--muted);font-size:15px;line-height:1.62}
.steps-n li::before{
  counter-increment:sn;content:counter(sn);
  position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--tint);color:var(--brand);
  font-family:var(--ff-mono);font-size:12.5px;font-weight:500;
}
.steps-n strong{color:var(--ink);font-weight:600}

/* ── the limits board ─────────────────────────────────────────────────── */
.board{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
@media(min-width:560px){.board{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.board{grid-template-columns:repeat(3,1fr)}}
.board-i{background:#fff;padding:18px}
.board-v{font-size:30px!important;line-height:1.05;font-weight:600;letter-spacing:-.03em;color:var(--brand)}
.board-u{margin-left:4px;font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.board-l{margin-top:6px;font-size:14.5px!important;font-weight:500;color:var(--ink)!important}
.board-n{margin-top:3px;font-size:13.5px!important;color:var(--muted)!important;line-height:1.5}

/* ── pricing ──────────────────────────────────────────────────────────── */
.plans{display:grid;gap:18px;align-items:stretch;margin-bottom:26px}
@media(min-width:820px){.plans{grid-template-columns:repeat(2,1fr);gap:22px}}
.plan{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--sh-1);
}
/* The one being sold gets the accent. No "most popular" badge required. */
.plan-hi{border-color:var(--brand);box-shadow:var(--sh-2),0 0 0 1px var(--brand) inset}
.plan-k{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.plan-h{margin-top:8px;font-size:clamp(30px,3.4vw,38px);line-height:1.05;letter-spacing:-.03em;font-weight:600;color:var(--ink)}
.plan-per{margin-left:6px;font-size:15px;font-weight:400;color:var(--muted);letter-spacing:0}
.plan-p{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.6}
.plan .btn{margin-top:18px}
.plan-l{margin-top:20px;display:grid;gap:10px;flex:1}
.plan-l li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2)}
.plan-l li::before{
  content:"";position:absolute;left:1px;top:.46em;width:13px;height:7px;
  border-left:2px solid #b9c3d4;border-bottom:2px solid #b9c3d4;
  transform:rotate(-45deg);border-radius:1px;
}
.plan-l-hi li::before{border-color:var(--brand)}
.plan-n{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);font-size:13.5px;color:var(--muted);line-height:1.55}

.cmp-wide{margin-top:0}
.pricing-faq{margin:34px 0 clamp(40px,6vw,72px)}
.pricing-faq .sec-h{margin-bottom:14px;font-size:clamp(22px,2.6vw,28px)}

/* ── status ───────────────────────────────────────────────────────────── */
.st-dot{width:10px;height:10px;border-radius:50%;flex:none;background:#b9c3d4}
.st-up .st-dot{background:var(--ok)}
.st-degraded .st-dot,.st-maintenance .st-dot,.st-partial .st-dot{background:#c98a05}
.st-down .st-dot{background:var(--bad)}
.st-pending .st-dot,.st-unknown .st-dot{background:#b9c3d4}

.st-hero{
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;
  padding:20px 22px;border-radius:var(--r);border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);
}
.st-hero .st-dot{grid-row:1 / span 2;width:14px;height:14px}
.st-hero-h{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.st-hero-p{font-size:14px;color:var(--muted);max-width:70ch}
.st-up.st-hero{border-color:#bfe4d2;background:#f4fbf7}
.st-partial.st-hero,.st-degraded.st-hero,.st-maintenance.st-hero{border-color:#f0dfae;background:#fffaef}
.st-down.st-hero{border-color:#f3c6cb;background:#fdf4f5}

.st-board{
  margin-top:18px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.st-i{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:15px 18px;background:#fff}
.st-i-h{font-size:15px;font-weight:600;color:var(--ink)}
.st-i-d{font-size:13.5px;color:var(--muted);margin-top:2px}
.st-i-s{font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.st-i.st-up .st-i-s{color:var(--ok)}
.st-i.st-down .st-i-s{color:var(--bad)}

.st-notes{display:grid;gap:14px;margin:22px 0 clamp(40px,6vw,72px)}
@media(min-width:820px){.st-notes{grid-template-columns:repeat(3,1fr);gap:18px}}
.st-note{padding:18px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.st-note-h{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:7px}
.st-note p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ── contact channels (abuse page) ────────────────────────────────────── */
.chan{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(min-width:760px){.chan{grid-template-columns:repeat(3,1fr)}}
.chan-i{background:#fff;padding:16px 18px}
.chan-k{font-size:11.5px!important;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)!important}
.chan-a{margin-top:7px}
.chan-a code{font-size:14px!important;font-weight:500;background:var(--bg-2)!important;padding:5px 9px!important}
.chan-d{margin-top:9px;font-size:13.5px!important;color:var(--muted)!important;line-height:1.55}

/* ══════════════════════════════════════════════════════════════════════════
   CUSTOM DOMAINS + THE LIVE INBOX
   ══════════════════════════════════════════════════════════════════════════ */

/* ── /domains ─────────────────────────────────────────────────────────── */
.dom2{display:grid;gap:20px;align-items:start;margin-bottom:clamp(40px,6vw,72px)}
@media(min-width:1000px){.dom2{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:26px}}
.setup-1col{grid-template-columns:1fr!important}

.verify{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh-1)}
.verify-l{display:block;font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.verify-row{display:flex;gap:10px}
.verify-in{
  flex:1 1 auto;min-width:0;height:48px;padding:0 14px;
  border:1.5px solid #d5dce7;border-radius:var(--r-s);background:#fff;
  font-family:var(--ff-mono);font-size:15px;color:var(--ink);
}
.verify-in:focus-visible{border-color:var(--brand);box-shadow:0 0 0 3px var(--tint);outline:none}
.verify-row .btn{height:48px;flex:none}
.verify-err{
  margin-top:12px;padding:10px 12px;border-radius:var(--r-s);
  background:#fdeced;border:1px solid #f3c6cb;color:#8d1f29;font-size:14px;line-height:1.5;
}
.verify-n{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.55}

.dom2-facts{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh-1)}
.dom2-facts-h{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:12px}
.dom2-facts .ticks{margin-top:0}
.dom2-facts .ticks li{font-size:14.5px}

/* The key, shown exactly once. Loud on purpose: a value nobody can reissue
   deserves to be hard to scroll past. */
.keybox{
  margin-bottom:24px;padding:22px;border-radius:var(--r);
  background:#f4fbf7;border:1px solid #bfe4d2;box-shadow:var(--sh-1);
}
.keybox-k{font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#0b6b48}
.keybox-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.keybox-v{
  flex:1 1 320px;min-width:0;padding:12px 14px;border-radius:var(--r-s);
  background:#fff;border:1px solid #bfe4d2;
  font-family:var(--ff-mono);font-size:15px;font-weight:500;color:var(--ink);
  overflow-x:auto;white-space:nowrap;
}
.keybox-n{margin-top:12px;font-size:14px;line-height:1.6;color:#2f5a49}
.keybox-use{margin-top:18px;padding-top:16px;border-top:1px solid #cfe7db}
.keybox-use-h{font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#0b6b48;margin-bottom:8px}
.keybox-use .doc-pre{margin-top:0}
.keybox-use .doc-n{color:#2f5a49!important}

/* ── the key prompt on a private inbox ───────────────────────────────── */
.keyask[hidden]{display:none!important}
.keyask{
  margin-top:18px;padding:18px 20px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
}
.keyask-h{font-size:16px;font-weight:600;color:var(--ink)}
.keyask-p{margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.6;max-width:70ch}
.keyask-row{display:flex;gap:10px;margin-top:14px;max-width:560px}
.keyask-in{
  flex:1 1 auto;min-width:0;height:44px;padding:0 13px;
  border:1.5px solid #d5dce7;border-radius:var(--r-s);background:#fff;
  font-family:var(--ff-mono);font-size:14.5px;color:var(--ink);
}
.keyask-in:focus-visible{border-color:var(--brand);box-shadow:0 0 0 3px var(--tint);outline:none}
.keyask-row .btn{height:44px;flex:none}
.keyask-err[hidden]{display:none!important}
.keyask-err{margin-top:10px;font-size:14px;color:var(--bad)}
.keyask-n{margin-top:10px;font-size:13px;color:var(--muted)}

.ibx-pick-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.ibx-pick-p code{font-size:13.5px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px}

/* ── message list and reading pane ───────────────────────────────────── */
.ibx-clip{display:block;margin-top:4px;font-size:12.5px;color:var(--brand)}
.ibx-msg-tools{display:flex;gap:8px;margin-top:14px}
.ibx-msg-tools .btn{font-size:13.5px;padding:7px 12px}

.ibx-atts{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);display:grid;gap:8px}
.ibx-atts li{display:flex;align-items:center;gap:10px;font-size:14.5px}
.ibx-atts a{font-weight:500;overflow-wrap:anywhere}
.ibx-att-size{color:var(--muted);font-size:13px;flex:none}

.ibx-html{margin-top:16px}
/* A stranger's HTML never enters this document: it is rendered inside a
   sandboxed iframe with no allow-scripts and no allow-same-origin, so it cannot
   run code, read this page, or reach the key held in the tab. */
.ibx-frame{
  width:100%;height:min(60vh,520px);margin-top:12px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
}

/* status board: what the probe actually observed */
.st-i-n { margin: .25rem 0 0; font-size: .8125rem; color: #64748b; font-variant-numeric: tabular-nums; }