/* PT Sans + PT Mono — ParaType, SIL OFL 1.1. Self-hosted: see fonts/OFL.txt */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-sans-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-sans-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/pt-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/pt-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- site */
:root{
  --ink:#282C2E;          /* ground */
  --ink-2:#31363A;        /* raised panel */
  --blue:#4488B8;         /* Reply Blue — mark and display */
  --blue-lt:#6BA6CE;      /* Reply Blue Light — links on dark, 5.35:1 */
  --mist:#B9BDBF;         /* body text on dark, 7.45:1 */
  --white:#fff;
  --line:#3C4247;
  --sans:"PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"PT Mono",Menlo,"SF Mono",Consolas,monospace;
  --pad:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--mist);
  font:16px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px;margin:0 auto;padding:0 var(--pad)}
a{color:var(--blue-lt);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--white)}
h1,h2,h3{color:var(--white);margin:0}
h1{font:400 32px/1.15 var(--mono);letter-spacing:-.02em}
h2{font:700 24px/1.2 var(--sans)}
h3{font:700 18px/1.3 var(--sans)}
p{margin:0 0 16px;max-width:62ch}
p:last-child{margin-bottom:0}
.label{font:12px/1.4 var(--mono);color:var(--blue);letter-spacing:.1em;text-transform:uppercase}
.mono{font-family:var(--mono);white-space:nowrap}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;
             gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
header img{width:150px;height:auto;display:block}
header .contact{font:13px/1.5 var(--mono);text-align:left}
header .contact a{display:block;white-space:nowrap}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 52px;
      border-bottom:1px solid var(--line)}
.hero .glyph{position:absolute;right:-70px;top:-30px;width:300px;opacity:.05;
             pointer-events:none;user-select:none}
.hero .wrap{position:relative}
.hero .copy{position:relative}
.hero h1{margin-bottom:20px}
.hero h1 span{display:block}
.hero p{font-size:18px;color:var(--mist)}
.cta{display:inline-block;margin-top:20px;padding:13px 22px;border-radius:6px;
     background:var(--blue);color:#10161A;font:15px/1 var(--mono);
     text-decoration:none;border:1px solid var(--blue)}
.cta:hover{background:var(--blue-lt);border-color:var(--blue-lt);color:#10161A}

/* ---------- sections ---------- */
section{padding:44px 0;border-bottom:1px solid var(--line)}
section .label{margin-bottom:10px}
section h2{margin-bottom:14px}

.cards{display:grid;gap:14px;margin-top:22px}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:20px}
.card h3{margin-bottom:6px}
.card p{font-size:15px;margin:0}

.pending{background:var(--ink-2);border:1px dashed var(--line);border-radius:8px;
         padding:24px;margin-top:20px}
.pending p{margin:0;font-size:15px}

/* the reply promise — the one section that gets emphasis */
.promise{background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--blue);
         border-radius:8px;padding:24px;margin-top:22px}
.promise .addr{font:19px/1.4 var(--mono);margin:0 0 14px;word-break:break-word}
.promise ul{margin:16px 0 0;padding-left:20px}
.promise li{margin-bottom:7px}
.promise li::marker{color:var(--blue)}

/* details grid */
.details{display:grid;gap:22px;margin-top:20px}
.details .k{font:12px/1.4 var(--mono);color:var(--blue);
            letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.details .k-2{margin-top:18px}
.details address{font-style:normal;line-height:1.62}
.details .v{font-size:16px}

.legal{font-size:14px;color:#8E9599}
.legal p{max-width:70ch}

/* ---------- footer ---------- */
footer{padding:34px 0 44px;font-size:13px;color:#8E9599}
footer .wrap{display:flex;flex-direction:column;gap:16px}
footer nav a{margin-right:18px;font-family:var(--mono);font-size:13px}
footer .reg{max-width:70ch;line-height:1.6}
.todo{color:#C99A3F}

/* ---------- tablet ---------- */
@media (min-width:700px){
  :root{--pad:32px}
  header .contact{text-align:right}
  h1{font-size:40px}
  .hero{padding:80px 0 72px}
  .hero .glyph{width:420px;right:-90px;top:-50px}
  section{padding:56px 0}
  .cards{grid-template-columns:1fr 1fr}
  .details{grid-template-columns:1fr 1fr}
  footer .wrap{flex-direction:row;justify-content:space-between;align-items:flex-start}
}

/* ---------- desktop ----------
   The measure stays where it was — what widens is the shell, so the logo and
   contact details sit at the page edges instead of floating in from the middle,
   and each section's label moves out into the margin beside its content. */
@media (min-width:1000px){
  :root{--pad:40px}
  .wrap{max-width:1120px}

  header .wrap{padding-top:26px;padding-bottom:26px}
  header img{width:168px}

  /* hero: text and mark as a single composition, not a stray corner watermark */
  .hero{padding:104px 0 96px}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;
              column-gap:64px;align-items:center}
  .hero .glyph{position:static;width:300px;opacity:.08;justify-self:end}
  .hero .copy{max-width:640px}
  .hero p{font-size:19px}

  /* sections: label in the margin column, everything else in the main column */
  section .wrap,
  .doc .wrap{display:grid;grid-template-columns:200px minmax(0,1fr);
             column-gap:56px;align-items:start}
  section .wrap > *,
  .doc .wrap > *{grid-column:2;min-width:0}
  section .wrap > .label,
  .doc .wrap > .label{grid-column:1;grid-row:1;margin-top:8px}

  .cards{gap:18px}
  .details{gap:40px}

  footer .wrap{align-items:center}
}

@media (min-width:1280px){
  h1{font-size:50px}
  .hero .wrap{grid-template-columns:minmax(0,1fr) 360px}
  .hero .glyph{width:360px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- long-form document pages (/privacy) ---------- */
.doc{padding:44px 0 20px}
.doc h1{font:400 30px/1.15 var(--mono);letter-spacing:-.02em;margin-bottom:8px}
.doc .updated{font:13px/1.5 var(--mono);color:#8E9599;margin-bottom:30px}
.doc h2{font:700 20px/1.3 var(--sans);margin:32px 0 10px}
.doc p,.doc li{max-width:66ch}
.doc ul{padding-left:20px;margin:0 0 16px}
.doc li{margin-bottom:8px}
.doc li::marker{color:var(--blue)}
.back{display:inline-block;margin:34px 0 0;font:14px/1 var(--mono)}
.back::before{content:"← "}
@media (min-width:700px){
  .doc{padding:60px 0 24px}
  .doc h1{font-size:36px}
}
@media (min-width:1000px){
  .doc{padding:72px 0 32px}
}