/* Podchat web — white field, typographic, with the opening stage panel
   carrying the page. This is the new brand direction; the iOS app follows it. */

/* Self-hosted webfonts. Served from this origin rather than Google Fonts:
   nothing for browser shields to block, and no visitor IPs sent to Google.
   Subset unicode-ranges are Google's own, so only the needed file loads.
     Arimo                — sans, variable 400-700, roman + italic
     Hedvig Letters Serif — display serif, 400 only, no italic
     IBM Plex Mono        — labels and code, 400/500/600 */
@font-face {
  font-family: "Arimo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/arimo-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: "Arimo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/arimo-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: "Arimo";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/arimo-latin-italic.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: "Arimo";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/arimo-latin-ext-italic.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: "Hedvig Letters Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/hedvig-letters-serif-latin-400.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: "Hedvig Letters Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/hedvig-letters-serif-latin-ext-400.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-ext-400.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-ext-500.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-600.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-ext-600.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;
}
/* ---------------------------------------------------------------------------
   Design tokens. Values are lifted directly from the Paper "Production" page
   rather than eyeballed, so the two stay in sync.
--------------------------------------------------------------------------- */
:root {
  --bg: #ffffff;

  --ink: #16151b;
  --muted: #6e6e73;
  --hair: rgba(22, 21, 27, 0.08);
  --outline: #888891;

  /* The podchat card. Its hairlines are a pale blue, not a neutral grey —
     they tie the card to the portal behind it. */
  --card-bg: #fcfdfe;
  --card-ink: #1a1a1e;
  --card-muted: #71717a;
  /* One pale blue for every rule on the site — the card's dividers, the blog
     table, and the footer. Was #B8CFFF, which read too bright at full width. */
  --rule: #d9e6ff;
  --accent: #4c6fcc;

  /* In-app chrome for the phone mock. */
  --app-ink: #15141a;
  --app-muted: #68647a;
  --app-indigo: #5366d1;

  --serif: "Hedvig Letters Serif", Georgia, serif;
  --sans: "Arimo", Arial, Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The phone mock imitates iOS chrome, so it uses the viewer's system UI
     face. IBM Plex Sans is what the Paper file specifies but it is not among
     the self-hosted subsets, and adding it for ~40 characters is not worth
     the request. */
  --app-sans: system-ui, -apple-system, "Segoe UI", sans-serif;

  --display: var(--sans);
  --text: var(--serif);

  /* The content lane. 1226px inside a 1440px canvas leaves 107px each side,
     which is where the nav, hero and footer all align. */
  --lane: 1226px;

  /* Raised-cosine falloff. Values are the eased curve, not linear stops —
     see .portal for why. */
  --portal-mask: linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.001) 0.6%, rgba(0,0,0,0.007) 1.5%,
    rgba(0,0,0,0.028) 3%, rgba(0,0,0,0.069) 4.8%, rgba(0,0,0,0.156) 7.5%,
    rgba(0,0,0,0.282) 10.5%, rgba(0,0,0,0.425) 13.5%, rgba(0,0,0,0.575) 16.5%,
    rgba(0,0,0,0.718) 19.5%, rgba(0,0,0,0.844) 22.5%, rgba(0,0,0,0.931) 25.2%,
    rgba(0,0,0,0.972) 27%, rgba(0,0,0,0.993) 28.5%, rgba(0,0,0,0.999) 29.4%,
    rgba(0,0,0,1) 30%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.999) 50.7%,
    rgba(0,0,0,0.993) 51.75%, rgba(0,0,0,0.972) 53.5%, rgba(0,0,0,0.931) 55.6%,
    rgba(0,0,0,0.844) 58.75%, rgba(0,0,0,0.718) 62.25%, rgba(0,0,0,0.575) 65.75%,
    rgba(0,0,0,0.425) 69.25%, rgba(0,0,0,0.282) 72.75%, rgba(0,0,0,0.156) 76.25%,
    rgba(0,0,0,0.069) 79.4%, rgba(0,0,0,0.028) 81.5%, rgba(0,0,0,0.007) 83.25%,
    rgba(0,0,0,0.001) 84.3%, rgba(0,0,0,0) 85%);
}

* { box-sizing: border-box; }

/* Clipped horizontally only. The portal sticks out past the right edge and
   would otherwise scroll the page sideways — but clipping vertically as well
   would cut the drop shadows off the card and the phone. */
html { background: var(--bg); overflow-x: clip; }

html, body {
  margin: 0; padding: 0;
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Hedvig Letters Serif's "ff" ligature rasterises as a single heavy f at
     body sizes — "effectively" came out as "efectively". It's correct at 34px
     and above, and its fi/fl/ffi ligatures are fine at every size, so this is
     the f_f glyph specifically. CSS can't disable one ligature, so common
     ligatures are off site-wide; the loss of fi/fl is invisible at 17px. */
  font-variant-ligatures: no-common-ligatures;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(22, 21, 27, 0.14); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

img, svg { max-width: 100%; }

/* The single horizontal rhythm every section aligns to. */
.lane {
  width: 100%;
  max-width: var(--lane);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------------------------------------------------------------------------
   Nav — three slots. The outer two grow equally so the middle group sits on
   the page's centre line regardless of how long the wordmark or link is.
--------------------------------------------------------------------------- */
.site-nav {
  display: flex; align-items: center;
  padding-top: 41px;
  position: relative; z-index: 2;
}
.site-nav .mark-slot { display: flex; align-items: center; flex: 1 1 0; }
.site-nav .contact-slot { display: flex; align-items: center; flex: 1 1 0; justify-content: flex-end; }
.site-nav .links { display: flex; align-items: center; gap: 36px; flex-shrink: 0; }

.mark {
  font-family: var(--display); font-size: 22px;
  letter-spacing: -0.01em; line-height: 28px; color: var(--ink);
  white-space: nowrap;
}
.site-nav a,
.site-nav .links > * {
  font-family: var(--display); font-size: 17px; line-height: 22px;
  color: var(--ink); white-space: nowrap;
  transition: color 0.2s ease;
}
/* The wordmark is excluded — it's the identity, not a nav item, so it holds
   its colour on hover. */
.site-nav a:not(.mark):hover { color: var(--muted); text-decoration: none; }

/* ---------------------------------------------------------------------------
   Hover menus. The labels are buttons, not links: their job is to open the
   panel, and giving them a destination would mean inventing one. Opening on
   :focus-within as well as :hover keeps them reachable from the keyboard.
--------------------------------------------------------------------------- */
.menu { position: relative; display: flex; align-items: center; }
.menu-label {
  border: 0; padding: 0; background: none; cursor: pointer;
  font-family: var(--display); font-size: 17px; line-height: 22px;
  color: var(--ink); white-space: nowrap;
  transition: color 0.2s ease;
}
.menu:hover .menu-label,
.menu:focus-within .menu-label { color: var(--muted); }

.menu-panel {
  position: absolute; top: 100%; left: -20px; z-index: 50;
  /* Transparent padding, not margin — it bridges the gap from label to card
     so the menu doesn't close as the cursor travels down. */
  padding-top: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.menu:hover .menu-panel,
.menu:focus-within .menu-panel { opacity: 1; visibility: visible; transform: none; }

.menu-card {
  display: flex; flex-direction: column;
  min-width: 190px; padding: 14px 20px;
  background: #f6f7f9;
  border: 1px solid var(--hair); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(22, 21, 27, 0.06);
}
.menu-card a {
  display: block; padding: 7px 0;
  font-family: var(--display); font-size: 15px; line-height: 22px;
  color: var(--ink); white-space: nowrap;
}
/* Podchat fills with the hero's mesh on hover. It uses the exported still,
   clipped to the glyphs, rather than the live shader: the hero's knockout
   needs a white backdrop to disappear against, and this sits on the menu
   card's #F6F7F9. Clipping composites cleanly over any colour. */
.menu-card a.mesh-link:hover span {
  background-image: url("/img/mesh.png");
  background-size: 100% 100%;
  /* Clipped on the inline span, not the block <a> — the anchor fills the card's
     width, so the gradient would spread over 150px and only its left third
     would land on the word. The span hugs the text, so the full sweep shows. */
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mark { transition: none; }
.mark:hover { color: var(--ink); text-decoration: none; }


/* ---------------------------------------------------------------------------
   Stage — hero over the portal.
--------------------------------------------------------------------------- */
.stage { position: relative; }

/* The portal. Everything here mirrors the Paper node: the trapezoid is a
   clip-path, the soft sides are a mask, and the blue comes from a screen wash
   over the saturated mesh rather than from the mesh colours themselves.
   The mask uses ~32 eased stops instead of four hard ones — with four, the
   slope breaks at 30% and 50% read as two vertical bands down the middle. */
.portal {
  position: absolute;
  top: -200px;
  left: calc(50% + 161px);
  width: 420px; height: 1400px;
  clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 0% 88%);
  -webkit-mask-image: var(--portal-mask);
  mask-image: var(--portal-mask);
  filter: blur(34px) saturate(1.2) hue-rotate(-22deg);
  opacity: 0.92;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.portal-mesh { position: absolute; inset: 0; }
.portal-mesh canvas { display: block; width: 100%; height: 100%; }
/* Second, larger mesh offset from the first so its blobs don't line up with
   the base layer — breaks up the vertical striping the stretch introduces. */
.portal-mesh-b { position: absolute; inset: -300px -100px; opacity: 0.5; }
.portal-wash {
  position: absolute; inset: 0; z-index: 1;
  background: #a0c0f5;
  mix-blend-mode: screen;
}

/* Spacing below is derived from the Paper node coordinates, not estimated.
   Nav occupies 41..69, so 139 puts the headline's top at 208 as designed. */
.hero { position: relative; z-index: 1; padding-top: 139px; }
/* Left-aligned in the lane. Wide enough that "Interactive Dimension" stays on
   one line at 68px — if it wraps, the knockout plate breaks. */
.hero-inner { max-width: 660px; }
.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(40px, 4.72vw, 68px);
  line-height: 1.015; letter-spacing: -0.025em;
  margin: 0;
  /* The headline's ink sits ~6px inside its box at 68px, while every other
     element on the page sits ~1px inside its own. Pulling it back aligns the
     ink rather than the boxes. Scales with the type size. */
  margin-left: -0.074em;
}
/* "Interactive Dimension" is filled with a live mesh, using the same knockout
   the design uses: a white plate in `lighten` over the shader lets only the
   black glyphs through. `isolation` keeps the blend inside this box so the
   plate doesn't lighten the page. It needs a white backdrop to disappear
   against — fine here, since the headline sits well clear of the portal. */
/* Structured exactly like the Paper node: a box clipped to the line, the mesh
   filling it, and a white plate that overhangs on every side so it covers the
   mesh completely. The overhang is what makes the knockout clean — and the
   clip is what stops that overhang painting over the line above, which would
   otherwise slice the descender off "Explore the".
   Block-level with fit-content width, not inline-block: an inline-block with
   `overflow: hidden` takes its baseline from its bottom edge, which throws the
   line box off. */
.hero h1 .l1 { display: block; }
/* The white background is load-bearing, not decoration. Two of the four mesh
   colours carry alpha (#241D9AB3, #F7509280); they only reach the pale tone in
   the design by compositing over white. Without it the canvas sits on
   transparency, the blend multiplies the colour down instead, and the letters
   come out dark navy. */
.mesh-word {
  position: relative; display: block; width: fit-content;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}
.mesh-word .hero-mesh { position: absolute; inset: 0; }
.mesh-word .hero-mesh canvas { display: block; width: 100%; height: 100%; }
.mesh-word .plate {
  position: relative; display: block;
  padding: 24px 0; margin: -24px 0;
  background: #fff; color: #000;
  mix-blend-mode: lighten;
}
.hero .lede {
  font-family: var(--display);
  font-size: 19px; line-height: 30px; letter-spacing: 0.01em;
  color: var(--muted);
  max-width: 530px;
  margin: 15px 0 0;
}
.hero-actions {
  display: flex; align-items: center; gap: 30px;
  margin-top: 14px;
}
.hero-actions a {
  font-family: var(--display); font-size: 17px; line-height: 24px;
  color: var(--muted);
  transition: color 0.2s ease;
}
.hero-actions a:hover { color: var(--ink); text-decoration: none; }
/* The inset reads as a button without needing a border. */
.hero-actions .btn { padding: 10px 18px; }

/* ---------------------------------------------------------------------------
   Showcase — the card and the phone, centred as one group.
--------------------------------------------------------------------------- */
.showcase { position: relative; z-index: 1; padding-top: 189px; }
/* The anchor sits on the heading, not the section: the section carries 189px
   of top padding, so targeting it would land with an empty band on screen. */
.showcase h2 {
  scroll-margin-top: 40px;
  font-family: var(--text); font-weight: 400;
  font-size: 34px; line-height: 46px; letter-spacing: -0.01em;
  text-align: center; color: var(--ink);
  margin: 0 0 45px;
}
/* Tops aligned, with the phone lifted 21px above the card as in the design —
   not centred against it, which would drift as the card's height changes. */
.showcase-row {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 75px;
}
.showcase-row .phone { margin-top: -21px; }

/* ---------------------------------------------------------------------------
   podchat card.
--------------------------------------------------------------------------- */
.card {
  flex: 0 0 auto;
  width: 600px; padding: 36px;
  background: var(--card-bg);
  border-radius: 20px;
  box-shadow:
    rgba(138, 138, 150, 0.22) 0 -3px 10px,
    rgba(138, 138, 150, 0.22) 0 1px 2px,
    rgba(138, 138, 150, 0.28) 0 14px 32px;
  font-family: var(--mono);
}
/* Fixed 36px box. The 34px line-height would otherwise stack on top of the
   padding and push the rule ~18px further down than the design. */
.card .masthead {
  display: flex; align-items: baseline;
  height: 36px; padding-bottom: 20px;
}
.card .masthead .name {
  flex: 1;
  font-family: var(--text); font-size: 28px;
  letter-spacing: -0.02em; line-height: 34px; color: var(--card-ink);
}
.card .masthead .platform {
  font-size: 12px; letter-spacing: 0.08em; line-height: 34px;
  color: var(--card-muted);
}
.card hr {
  border: 0; height: 1px; width: 100%;
  background: var(--rule);
  margin: 0;
}
.card .row { display: flex; padding-block: 18px; }
.card .row-label {
  flex: 0 0 75px; width: 75px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; line-height: 26px;
  color: var(--card-muted);
}
.card .row-body { flex: 1; display: flex; flex-direction: column; }
.card .row-body li { font-size: 15px; line-height: 26px; color: var(--card-ink); }

.card .about { display: flex; flex-direction: column; gap: 6px; padding-block: 18px; }
.card .about .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; line-height: 22px; color: var(--accent);
}
.card .about p { margin: 0; font-size: 15px; line-height: 26px; color: var(--card-ink); }

.card ul { list-style: none; margin: 0; padding: 0; }

/* The steps stagger to the right as they go — the indent carries the sense of
   progression, so the numbers do not have to. */
.card .steps li { display: flex; font-size: 15px; line-height: 26px; color: var(--card-ink); }
.card .steps li .n { flex: 0 0 34px; width: 34px; color: var(--accent); }
.card .steps li:nth-child(2) { padding-left: 34px; }
.card .steps li:nth-child(3) { padding-left: 66px; }
.card .steps li:nth-child(4) { padding-left: 98px; color: var(--accent); }

/* ---------------------------------------------------------------------------
   Phone mock. Sizes derive from the 297px body so it scales as one piece.
--------------------------------------------------------------------------- */
.phone {
  flex: 0 0 auto;
  position: relative;
  width: 297px; height: 609px;
  background: #fff;
  border: 1px solid #bfbfc7;
  border-radius: 53px;
  box-shadow: rgba(150, 150, 160, 0.20) 0 1px 2px, rgba(150, 150, 160, 0.30) 0 16px 38px;
  font-family: var(--app-sans);
}
.phone .screen {
  position: absolute; inset: 12px;
  background: #fafafa; border-radius: 43px;
  padding: 13px 19px 19px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: clip;
}
.phone .island {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 24px; border-radius: 999px; background: #7c7c86;
}
.phone .home {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 107px; height: 5px; border-radius: 999px; background: var(--muted);
}
.phone .btn-side {
  position: absolute; width: 5px; border-radius: 2px; background: #bfbfc7;
}
.phone .btn-action { left: -4px; top: 79px;  height: 24px; }
.phone .btn-up     { left: -4px; top: 127px; height: 39px; }
.phone .btn-down   { left: -4px; top: 201px; height: 39px; }
.phone .btn-power  { right: -4px; top: 153px; height: 51px; }

.phone .bookmark { display: flex; justify-content: flex-end; }
.phone .art {
  display: flex; align-items: center; justify-content: center;
  height: 277px; border-radius: 13px; background: #ededef;
}
.phone .meta { display: flex; flex-direction: column; gap: 5px; }
.phone .show {
  font-size: 9.6px; font-weight: 500; letter-spacing: 0.32px;
  line-height: 12px; color: var(--app-muted);
}
.phone .episode {
  font-size: 19px; font-weight: 700; letter-spacing: -0.32px;
  line-height: 23px; color: var(--app-ink);
}
.phone .scrub { display: flex; flex-direction: column; gap: 4px; }
.phone .track {
  position: relative; height: 3px; border-radius: 999px;
  background: rgba(20, 20, 30, 0.1);
}
.phone .track span {
  position: absolute; inset: 0 auto 0 0; width: 56%;
  border-radius: 999px; background: var(--app-indigo);
}
.phone .times { display: flex; justify-content: space-between; }
.phone .times span {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  line-height: 12px; color: var(--app-muted);
}
.phone .controls { display: flex; align-items: center; justify-content: space-between; }
.phone .rate { width: 40px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--app-muted); }
.phone .moon { width: 40px; display: flex; justify-content: flex-end; }
.phone .skip { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; }
.phone .play { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; }
.phone .ask {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 35px; border: 1px solid var(--app-indigo); border-radius: 999px;
  background: #fff;
  font-size: 12px; font-weight: 600; color: var(--app-indigo);
}

/* ---------------------------------------------------------------------------
   Mission.
--------------------------------------------------------------------------- */
/* 135px below the phone, matching the design. Tight enough that the heading
   crests the bottom of a ~900px viewport while the whole card is still on
   screen, so there's a visible cue that the page continues. */
.mission { padding-top: 135px; }
.mission-inner { max-width: 760px; margin-inline: auto; }
.mission h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 30px; line-height: 40px; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 30px;
}
.mission h3 {
  font-family: var(--display); font-weight: 400;
  font-size: 24px; line-height: 34px; letter-spacing: -0.01em;
  color: var(--ink); margin: 40px 0 30px;
}
/* 17/28 is the running-prose size across the whole site — legal pages, blog
   posts and this block. The Paper file has 21px here and 19px on the post, but
   they read too large next to the 19px lede; the lede should be the step above
   body copy, not level with it. */
.mission p {
  font-family: var(--text); font-size: 17px; line-height: 28px;
  color: var(--ink); margin: 0 0 30px;
}
.mission p:last-child { margin-bottom: 0; }

/* Links inside running prose stay underlined. An address that only reveals
   itself as clickable on hover isn't discoverable — and on touch there is no
   hover at all. */
.mission p a,
.doc-body p a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------------------
   Footer.
--------------------------------------------------------------------------- */
.site-footer { padding-top: 160px; padding-bottom: 67px; }
/* The rule is the same pale blue as the card's hairlines, not a neutral grey. */
.site-footer .inner { border-top: 1px solid var(--rule); padding-top: 28px; }
.site-footer .cols { display: flex; gap: 32px; align-items: flex-start; }
/* The first column is deliberately empty — the wordmark and tagline were cut
   from the design, leaving the link columns weighted to the right. */
.site-footer .spacer { flex: 1.5 1 0; min-width: 0; height: 28px; }
.site-footer .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.site-footer h4 {
  margin: 0 0 8px; font-family: var(--display);
  font-size: 14px; font-weight: 500; line-height: 18px; color: var(--muted);
}
.site-footer .col a {
  display: block; padding-bottom: 6px;
  font-family: var(--text); font-size: 15px; line-height: 22px; color: var(--ink);
}
.site-footer .col a:hover { color: var(--muted); text-decoration: none; }
.site-footer .legal-line {
  margin: 0; padding-top: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  line-height: 14px; color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Documents — legal pages and blog posts. A 680px reading column with a
   section index parked in the left margin.
--------------------------------------------------------------------------- */
/* 232 index + 41 gutter + 680 column = 953, left-packed in the 1226 lane, so
   the index lands in the same lane as the nav wordmark. */
.doc {
  display: grid; grid-template-columns: 232px 680px;
  column-gap: 41px; padding-top: 150px;
}
.doc-index {
  position: sticky; top: 40px; align-self: start;
  display: flex; flex-direction: column; gap: 18px;
}
.doc-index a {
  font-family: var(--display); font-size: 15px; line-height: 22px;
  color: var(--muted);
  transition: color 0.25s ease;
}
/* The section you're reading darkens to ink; the rest sit back in muted.
   Driven by /js/doc.js as you scroll. */
.doc-index a:hover,
.doc-index a[aria-current] { color: var(--ink); text-decoration: none; }

/* Anchor jumps shouldn't tuck the heading under the top of the window. */
.doc-body h2, .doc-body { scroll-margin-top: 48px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.doc-body { min-width: 0; }
.doc-head h1 {
  font-family: var(--display); font-weight: 400;
  font-size: 44px; line-height: 50px; letter-spacing: -0.02em;
  margin: 0;
}

/* Blog post head — rule underneath, eyebrow above the title, byline below. */
.doc-post .doc-head { padding-bottom: 40px; border-bottom: 1px solid var(--hair); }
.doc-post .doc-head .eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  line-height: 16px; color: var(--muted); margin: 0 0 18px;
}
.doc-post .doc-head .byline { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 0; }
.doc-post .doc-head .byline .who { font-family: var(--display); font-size: 15px; line-height: 18px; color: var(--muted); }
.doc-post .doc-head .byline .read { font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 16px; color: var(--muted); }

/* Legal head — no rule, and the opening paragraph belongs to the head. */
.doc-legal .doc-head { padding-bottom: 44px; }
.doc-legal .doc-head .updated {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.05em; line-height: 16px; color: var(--muted);
  margin: 14px 0 0;
}
.doc-legal .doc-head .standfirst {
  font-family: var(--text); font-size: 17px; line-height: 28px;
  color: var(--ink); margin: 24px 0 0;
}

/* Blog body runs one step larger than the legal body. */
.doc-post .doc-body h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 22px; line-height: 28px; letter-spacing: -0.01em;
  margin: 36px 0 0;
}
.doc-post .doc-body p { font-family: var(--text); font-size: 17px; line-height: 28px; margin: 24px 0 0; }

.doc-legal .doc-body h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 20px; line-height: 28px; letter-spacing: -0.01em;
  margin: 34px 0 0;
}
.doc-legal .doc-body p { font-family: var(--text); font-size: 17px; line-height: 28px; margin: 12px 0 0; }
.doc-legal .doc-body ul { list-style: none; margin: 12px 0 0; padding: 0; }
.doc-legal .doc-body li {
  position: relative; padding-left: 26px;
  font-family: var(--text); font-size: 17px; line-height: 28px; margin-top: 12px;
}
.doc-legal .doc-body li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }

/* No emphasis in document prose. Hedvig ships weight 400 only, so a bold
   would be a synthesised, smeared face — and the earlier workaround of setting
   these in the sans made them stand out more, not less. They read as plain
   text; the sentence carries the emphasis. */
.doc-body strong {
  font-family: inherit; font-weight: inherit; font-size: inherit;
}
/* Sub-headings below a section, if a document needs them. */
.doc-body h3 {
  font-family: var(--display); font-weight: 500;
  font-size: 17px; line-height: 26px; letter-spacing: -0.01em;
  margin: 24px 0 0;
}

/* ---------------------------------------------------------------------------
   Blog index — a table, not a card list: filters and search on one row, then
   date / title / author / read-time columns.
--------------------------------------------------------------------------- */
.blog { padding-top: 130px; }
.blog-controls { display: flex; align-items: center; justify-content: space-between; }
.blog-tabs { display: flex; align-items: center; gap: 28px; }
.blog-tabs button {
  border: 0; padding: 0; background: none; cursor: pointer;
  font-family: var(--display); font-size: 17px; line-height: 22px;
  color: var(--muted);
  transition: color 0.2s ease;
}
.blog-tabs button.on, .blog-tabs button:hover { color: var(--ink); }
.blog-search {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  width: 260px; height: 38px; padding-inline: 14px;
  border: 1px solid var(--hair); border-radius: 999px;
  transition: border-color 0.2s ease;
}
.blog-search:focus-within { border-color: var(--outline); }
.blog-search input {
  flex: 1; min-width: 0;
  border: 0; padding: 0; background: none; outline: none;
  font-family: var(--display); font-size: 15px; line-height: 18px; color: var(--ink);
}
.blog-search input::placeholder { color: var(--muted); }
/* Chrome's own clear button doesn't fit the field. */
.blog-search input::-webkit-search-cancel-button { display: none; }

.post-empty {
  padding-block: 28px;
  font-family: var(--display); font-size: 15px; line-height: 22px; color: var(--muted);
}
.post-row[hidden] { display: none; }
.post-table { padding-top: 34px; min-height: 702px; }
/* Content is inset from the row's edges while the rules still run the full
   width, so the date and read-time aren't sitting on the rule's terminus. */
.post-row {
  display: flex; align-items: center;
  padding-block: 18px; padding-inline: 18px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.post-row:last-child { border-bottom: 1px solid var(--rule); }
/* The whole row is the target, so the whole row responds — the 18px inset is
   what gives the highlight something to sit in. */
.post-row:hover {
  background: rgba(22, 21, 27, 0.035);
  text-decoration: none;
}
.post-row .date {
  flex: 0 0 270px; width: 270px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  line-height: 16px; color: var(--muted);
}
.post-row .title {
  flex: 1 1 0; min-width: 0;
  font-family: var(--display); font-size: 17px; line-height: 22px; color: var(--ink);
}
.post-row .author {
  flex: 0 0 250px; width: 250px;
  font-family: var(--display); font-size: 15px; line-height: 18px; color: var(--muted);
}
.post-row .read {
  flex: 0 0 56px; width: 56px; text-align: right;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  line-height: 16px; color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Responsive. The design is drawn at 1440; these are the points where holding
   it literally starts to break the reading experience.
--------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  /* No margin left for the index to sit in, so it becomes a contents block
     above the document. */
  .doc { grid-template-columns: minmax(0, 680px); justify-content: center; padding-top: 80px; }
  .doc-index { position: static; padding-bottom: 48px; }
}

@media (max-width: 1080px) {
  .showcase-row { flex-direction: column; gap: 56px; }
  .portal { left: auto; right: -120px; opacity: 0.7; }
}

@media (max-width: 720px) {
  .site-nav { padding-top: 28px; }
  .site-nav .links { gap: 22px; }
  .site-nav .contact-slot { display: none; }
  /* No hover on touch, so the labels would trap their menus. */
  .menu-panel { display: none; }
  .hero { padding-top: 72px; }
  .hero .lede { font-size: 17px; line-height: 28px; margin-top: 26px; }
  .hero-actions { margin-top: 32px; gap: 12px; }
  .hero-actions .btn { padding-left: 0; }
  .showcase { padding-top: 96px; }
  .showcase h2 { font-size: 26px; line-height: 34px; }
  .card { width: 100%; padding: 24px; }
  .card .row-label { flex-basis: 64px; width: 64px; }
  .card .steps li:nth-child(2) { padding-left: 16px; }
  .card .steps li:nth-child(3) { padding-left: 32px; }
  .card .steps li:nth-child(4) { padding-left: 48px; }
  .mission { padding-top: 104px; }
  .mission h2 { font-size: 26px; line-height: 34px; }
  .mission h3 { font-size: 21px; line-height: 30px; }
  .mission p { font-size: 16px; line-height: 27px; }
  .site-footer { margin-top: 96px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .site-footer .brand-col { grid-column: 1 / -1; }
  .doc-body h1 { font-size: 32px; line-height: 38px; }
  .doc-body p, .doc-body li { font-size: 16px; line-height: 27px; }
  .portal { display: none; }
}

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