/* Postroom — postroom.travelersvpn.com
   Paper, navy and one blue, taken from the app icon. The page is built like
   a sorting rack: hairline shelves, recessed cubbies, letterpress labels. */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/bodoni-moda-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/bodoni-moda.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans.woff2) format('woff2');
}

:root {
  --paper:      #FAF9F6;
  --paper-deep: #F0ECE3;
  --ink:        #1B2135;
  /* Secondary ink, not faint ink. It carries most of the running text, so it
     is 9:1 against the paper rather than the 5.7:1 it started at — enough to
     sit below --ink in the hierarchy, not enough to make anyone squint. */
  --ink-soft:   #3F4657;
  --blue:       #2D43D6;
  --rule:       rgba(27, 33, 53, 0.16);
  --rule-faint: rgba(27, 33, 53, 0.09);

  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --display-weight: 600;
  --body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1080px;
  --gutter: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17.5px;
  /* Instrument Sans is a variable face, so 450 is a real weight rather than a
     synthesised one: the stems thicken without the text turning into a
     heading. And no -webkit-font-smoothing: antialiased — on a Mac it thins
     every stroke on the page, which is the opposite of what is wanted here. */
  font-weight: 450;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 720px; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Letterpress label: the cubby vocabulary, used all over the page ───── */

.label {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 246, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule-faint);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px; gap: 20px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink); text-decoration: none;
  font-family: var(--display); font-style: italic;
  font-size: 24px; letter-spacing: 0.01em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.masthead nav { display: flex; align-items: center; gap: 26px; }
.masthead nav a {
  color: var(--ink-soft); text-decoration: none;
  font-size: 14.5px; font-weight: 550;
}
.masthead nav a:hover, .masthead nav a[aria-current] { color: var(--ink); }
@media (max-width: 640px) {
  .masthead nav { gap: 18px; }
  .masthead nav a.hide-sm { display: none; }
}

/* ── Type scale ───────────────────────────────────────────────────────── */

h1, h2, h3 { font-weight: 400; margin: 0; }

/* Bodoni Moda is a Didone: the thin strokes are meant to be hair-thin, and at
   400 they are about a pixel and vanish against paper. The face is variable,
   so every use of it is set at --display-weight instead — heavy enough to
   have stems, light enough to still be a Didone. Change it here, not per
   rule, or the page ends up with three different Bodonis on it. */
.display,
h2.section-title,
.doc h2,
.brand,
.gesture .term,
.artifact-head .title,
.cubby .tally,
.contact-card h2 { font-weight: var(--display-weight); }

.display {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(44px, 7.6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0;
}
.display em { font-style: italic; color: var(--blue); }

h2.section-title {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.008em;
}

h3 {
  font-family: var(--body);
  font-size: 18.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.lead {
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ── Shelf: a hairline rule with the section's label sitting on it ────── */

.shelf {
  display: flex; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--ink);
  padding-top: 10px;
  margin-bottom: 34px;
}
.shelf .label { flex: none; }
.shelf .shelf-note { margin-left: auto; font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 560px) { .shelf .shelf-note { display: none; } }

section { padding: 76px 0; }
section + section { padding-top: 0; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

/* Long-hand on purpose: .hero sits on the same element as .wrap and at the
   same specificity, so a `padding` shorthand here would silently wipe out the
   page gutter. Which it did, and only mobile showed it. */
.hero { padding-top: 68px; padding-bottom: 40px; }

/* The hero copy sits on its own sheet rather than straight on the paper —
   white, so the ink has a cleaner surface under it than the cream page, and
   bounded, so the headline has an edge to sit against instead of floating.
   It reads as the docket on the counter, above the rack it describes. */
.hero-card {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 44px 46px 40px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
              0 22px 52px -40px rgba(27, 33, 53, 0.62);
}
@media (max-width: 720px) { .hero-card { padding: 30px 24px 28px; } }

.hero .display { max-width: 17ch; }
.hero .lead { margin-top: 22px; }
.hero-meta {
  margin-top: 30px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

/* The franking mark — a blue rubber stamp, the one loud small thing */
.frank {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  border-radius: 3px;
  padding: 7px 13px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  transform: rotate(-1.4deg);
}
.frank::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); flex: none;
}
.hero-meta .aside { font-size: 14.5px; color: var(--ink-soft); }

/* ── The rack: the signature ──────────────────────────────────────────── */

.rack {
  position: relative;
  margin-top: 52px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: linear-gradient(180deg, #FDFCFA 0%, var(--paper-deep) 100%);
  padding: 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 44px -32px rgba(27,33,53,0.55);
}
.rack-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 2px 4px 16px;
  border-bottom: 1px solid var(--rule-faint);
}
.rack-head .counter { font-size: 13.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.cubbies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 780px) { .cubbies { grid-template-columns: repeat(2, 1fr); } }

.cubby {
  position: relative;
  min-height: 104px;
  border: 1px solid var(--rule-faint);
  border-radius: 3px;
  background: #FCFBF8;
  /* the recess: a shadow across the top inner edge, like a real shelf */
  box-shadow: inset 0 5px 9px -6px rgba(27, 33, 53, 0.34);
  padding: 10px 11px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.cubby .label { font-size: 10.5px; letter-spacing: 0.14em; }
.cubby .tally {
  font-family: var(--display);
  font-size: 26px; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  align-self: flex-end;
}
.cubby .tally[data-empty="true"] { color: rgba(27, 33, 53, 0.28); }

.cubby--you {
  border-color: rgba(45, 67, 214, 0.4);
  background: #FBFAFF;
  box-shadow: inset 0 5px 9px -6px rgba(45, 67, 214, 0.32);
}
.cubby--you .label { color: var(--blue); }
.cubby--you .tally { color: var(--blue); }

/* Envelopes. They start stacked at the mouth of the rack and fly to a
   cubby; with reduced motion they are simply already there. */
.mouth { position: relative; height: 0; }
.env {
  position: absolute;
  width: 52px; height: 32px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #FFFEFB;
  box-shadow: 0 3px 6px -3px rgba(27,33,53,0.45);
  will-change: transform, opacity;
  overflow: hidden;
}
/* the flap, creased rather than filled in */
.env::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: -12px;
  height: 22px;
  border-bottom: 1px solid var(--rule-faint);
  transform: rotate(0deg);
  background: linear-gradient(180deg, transparent 60%, rgba(27,33,53,0.045));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env--you { border-color: rgba(45,67,214,0.5); background: #FFFFFF; }
.env--you::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--blue);
}

.rack-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-faint);
  font-size: 14.5px;
  color: var(--ink-soft);
}
.rack-foot strong { color: var(--ink); font-weight: 650; }

/* ── Cards laid out as cubbies, reused down the page ──────────────────── */

.grid { display: grid; gap: 14px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.slot {
  border: 1px solid var(--rule-faint);
  border-radius: 3px;
  background: #FCFBF8;
  box-shadow: inset 0 5px 9px -6px rgba(27, 33, 53, 0.26);
  padding: 20px 20px 22px;
}
.slot h3 { margin-bottom: 8px; }
.slot p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.55; }

/* The four gestures, set like dictionary entries */
.gesture .term {
  font-family: var(--display);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 4px;
}
.gesture .gloss {
  font-size: 12.5px; color: var(--ink-soft); font-style: italic;
  margin-bottom: 10px;
}
.gesture p { font-size: 15.5px; }

kbd {
  font-family: var(--body);
  font-size: 0.85em; font-weight: 600;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  background: var(--paper-deep);
  color: var(--ink);
}

/* ── Two-column feature: type beside a drawn artifact ─────────────────── */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; gap: 30px; } }
.feature .body p { color: var(--ink-soft); max-width: 32em; }
.feature h2.section-title { margin-bottom: 14px; }

/* A trip, drawn as the page the app makes */
.artifact {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #FCFBF8;
  box-shadow: 0 16px 40px -34px rgba(27,33,53,0.7);
  overflow: hidden;
}
.artifact-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule-faint);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.artifact-head .title {
  font-family: var(--display); font-style: italic; font-size: 25px; line-height: 1.1;
}
.artifact-head .when { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }

.timeline { list-style: none; margin: 0; padding: 6px 18px 18px; }
.timeline li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-faint);
  align-items: baseline;
}
.timeline li:last-child { border-bottom: 0; padding-bottom: 2px; }
.timeline .day { font-size: 11.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.timeline .what { font-size: 15.5px; }
.timeline .what small { display: block; color: var(--ink-soft); font-size: 13.5px; }

/* A parcel, drawn as the tracking line the app draws */
.parcels { list-style: none; margin: 0; padding: 8px 18px 18px; }
.parcels li { padding: 14px 0; border-bottom: 1px solid var(--rule-faint); }
.parcels li:last-child { border-bottom: 0; }
.parcels .what { font-size: 15.5px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.parcels .what .eta { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.track { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.track span {
  height: 3px; flex: 1; border-radius: 2px;
  background: var(--rule-faint);
}
.track span[data-done] { background: var(--blue); }
/* The legend shares the track's four columns, so each word starts where its
   own leg of the journey starts. */
.track-legend {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 7px;
  font-size: 10.5px; font-weight: 550; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}

/* ── What the app does with the user's Google account ─────────────────────
   Google's OAuth review requires the homepage to describe the app's
   functionality and to state, transparently, why it asks for user data.
   This is that statement, and it is deliberately plain rather than
   decorated — it is the part of the page a person checks rather than
   reads. Every row must stay true of the shipped app: the source of truth
   is docs/oauth-justification.md, and it is what the console was told. */

.disclosure {
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 16px 40px -36px rgba(27, 33, 53, 0.6);
}
.disclosure-intro {
  padding: 24px 28px;
  border-bottom: 1px solid var(--rule);
  background: #FCFBF8;
}
.disclosure-intro p { font-size: 16.5px; }
.disclosure-intro p + p { margin-top: 0.7em; }

.disclosure dl { margin: 0; }
.disclosure .row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--rule-faint);
}
.disclosure .row:last-child { border-bottom: 0; }
.disclosure dt { font-weight: 650; }
.disclosure dd { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
@media (max-width: 760px) {
  .disclosure .row { grid-template-columns: 1fr; gap: 5px; padding: 16px 20px; }
  .disclosure-intro { padding: 20px; }
}

.disclosure-foot {
  padding: 22px 28px;
  border-top: 1px solid var(--rule);
  background: #FCFBF8;
  font-size: 16px;
}
@media (max-width: 760px) { .disclosure-foot { padding: 20px; } }

/* ── The quiet list ───────────────────────────────────────────────────── */

.ledger { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 44px; }
@media (max-width: 700px) { .ledger { column-count: 1; } }
.ledger li {
  break-inside: avoid;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-faint);
}
.ledger li strong { display: block; font-weight: 650; font-size: 16.5px; margin-bottom: 3px; }
.ledger li span { font-size: 15.5px; color: var(--ink-soft); line-height: 1.5; }

/* ── The one inverted band ────────────────────────────────────────────── */

.band {
  background: var(--ink);
  color: var(--paper);
  margin-top: 76px;
  padding: 78px 0;
}
.band .shelf { border-top-color: rgba(250,249,246,0.6); }
.band .label { color: rgba(250,249,246,0.78); }
.band .section-title { color: var(--paper); }
.band p { color: rgba(250,249,246,0.88); }
.band a { color: #9FB0F2; }
.band .grid { margin-top: 34px; }
.band .slot {
  background: rgba(250,249,246,0.045);
  border-color: rgba(250,249,246,0.16);
  box-shadow: inset 0 5px 9px -6px rgba(0,0,0,0.6);
}
.band .slot h3 { color: var(--paper); }
.band .slot p { color: rgba(250,249,246,0.88); }

/* ── Coming soon ──────────────────────────────────────────────────────── */

.soon { text-align: center; padding: 92px 0 84px; }
.soon .display { margin: 0 auto; max-width: 16ch; }
.soon .lead { margin: 22px auto 0; }
.soon .actions { margin-top: 32px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body);
  font-size: 15.5px; font-weight: 650;
  padding: 13px 22px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.btn--primary:hover { background: #2337B8; border-color: #2337B8; }
.btn--plain { background: transparent; color: var(--ink); }
.btn--plain:hover { background: var(--ink); color: var(--paper); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule-faint);
  padding: 44px 0 60px;
  font-size: 15px;
  color: var(--ink-soft);
}
.site-footer .wrap { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.site-footer .brand { font-size: 20px; }
.site-footer .colophon { margin-top: 12px; font-size: 13.5px; max-width: 34em; }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.site-footer nav a { color: var(--ink-soft); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); }

/* ── Document pages: support, privacy, terms ──────────────────────────── */

.doc { padding: 62px 0 30px; }
.doc-head { margin-bottom: 44px; }
.doc-head .display { font-size: clamp(38px, 6vw, 60px); }
.doc-head .lead { margin-top: 16px; }
.doc-head .effective { margin-top: 18px; font-size: 13.5px; color: var(--ink-soft); }

.doc h2 {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  line-height: 1.15;
  margin: 46px 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.doc h3 { margin: 28px 0 8px; }
/* A privacy policy is the page, not a footnote to it — its running text gets
   the primary ink. --ink-soft is left for what is genuinely secondary here:
   the effective date, and the note under a heading. */
.doc p, .doc li { color: var(--ink); }
.doc p strong, .doc li strong { color: var(--ink); font-weight: 650; }
.doc ul { padding-left: 1.15em; margin: 0 0 1em; }
.doc li { margin-bottom: 0.5em; }
.doc .callout {
  border: 1px solid var(--rule-faint);
  border-left: 3px solid var(--blue);
  border-radius: 3px;
  background: #FCFBF8;
  padding: 18px 20px;
  margin: 22px 0;
}
.doc .callout p { color: var(--ink); }

/* FAQ — the support page's spine */
.faq { margin: 0; padding: 0; }
.faq details {
  border-bottom: 1px solid var(--rule-faint);
}
.faq details[open] { background: linear-gradient(180deg, rgba(45,67,214,0.03), transparent 60%); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 19px 34px 19px 0;
  position: relative;
  font-size: 17.5px;
  font-weight: 550;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--blue); }
.faq .answer { padding: 0 30px 22px 0; }
.faq .answer p, .faq .answer li { font-size: 16px; color: var(--ink); }

.faq-group { margin-bottom: 46px; }
.faq-group > .shelf { margin-bottom: 6px; }

.contact-card {
  margin-top: 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-deep);
  padding: 26px 28px;
}
.contact-card h2 { border: 0; margin: 0 0 8px; padding: 0; }
.contact-card p { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}