@font-face {
  font-family:Manrope;
  src:url('fonts/Manrope-Medium.woff2') format('woff2');
  font-weight:400 500;
  font-display:swap;
}

@font-face {
  font-family:Manrope;
  src:url('fonts/Manrope-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-display:swap;
}

@font-face {
  font-family:Manrope;
  src:url('fonts/Manrope-Bold.woff2') format('woff2');
  font-weight:700 900;
  font-display:swap;
}

:root {
  color-scheme:light;
  --paper:#faf8f4;
  --ink:#1f1d1a;
  --muted:#656562;
  --teal:#0f7b8a;
  --pale:#def2f2;
  --line:#deded7;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
}

a {
  color:var(--teal);
  text-underline-offset:.25em;
}

a:hover {
  text-decoration-thickness:2px;
}

a:focus-visible,summary:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:6px;
  border-radius:3px;
}

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

button,a,summary {
  -webkit-tap-highlight-color:transparent;
}

.wrap {
  width:min(1392px,calc(100% - 112px));
  margin-inline:auto;
}

.site-header {
  border-bottom:1px solid var(--line);
}

.header-inner {
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:var(--ink);
  font-size:24px;
  font-weight:800;
  letter-spacing:-1px;
  text-decoration:none;
}

.brand-icon {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  flex-shrink:0;
  background:var(--pale);
  border-radius:50%;
}

.brand-icon img {
  width:34px;
  height:34px;
}

.header-link {
  text-decoration:none;
  font-size:17px;
}

.skip-link {
  position:absolute;
  top:-100px;
  left:12px;
  background:white;
  padding:12px;
  z-index:5;
}

.skip-link:focus {
  top:12px;
}

.hero {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:54px;
  padding-block:46px 48px;
  align-items:center;
}

.status {
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--teal);
  font-weight:700;
  font-size:18px;
  margin:0 0 23px;
}

.status-check {
  display:grid;
  place-items:center;
  background:var(--pale);
  border-radius:50%;
  width:40px;
  height:40px;
  font-size:25px;
}

h1,h2,h3,p {
  margin-top:0;
}

h1 {
  font-size:clamp(42px,4.5vw,68px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-2.8px;
  margin-bottom:22px;
}

.lead {
  font-size:clamp(19px,2vw,27px);
  line-height:1.5;
  color:#4e4e50;
  margin-bottom:28px;
}

.steps {
  list-style:none;
  counter-reset:step;
  padding:0;
  margin:0;
  display:grid;
  gap:22px;
}

.steps li {
  counter-increment:step;
  position:relative;
  padding-left:66px;
  min-height:48px;
}

.steps li:before {
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--pale);
  color:var(--teal);
  font-size:24px;
  font-weight:700;
}

.steps strong {
  display:block;
  font-size:18px;
  line-height:1.4;
  margin:1px 0 3px;
}

.steps p {
  color:var(--muted);
  margin:0;
  font-size:16px;
}

.browser-figure {
  margin:0;
  align-self:center;
  position:relative;
}

.browser-figure svg {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 16px 18px #2927270a);
}

.browser-caption {
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin:15px 0 0;
}

.first-listen {
  border-top:1px solid var(--line);
  padding-block:40px 46px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:48px;
  align-items:center;
}

h2 {
  font-size:clamp(29px,3vw,43px);
  line-height:1.2;
  letter-spacing:-1.7px;
  margin-bottom:26px;
}

.first-listen .steps {
  grid-template-columns:1fr 1.15fr;
  gap:22px;
}

.first-listen .steps li {
  padding-left:59px;
}

.first-listen .steps strong {
  font-size:16px;
}

.first-listen .steps p {
  font-size:14px;
}

.button {
  display:inline-flex;
  align-items:center;
  gap:27px;
  background:var(--teal);
  border:1px solid var(--teal);
  color:white;
  padding:15px 24px;
  border-radius:11px;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  margin-top:28px;
  transition:background .15s;
}

.button:hover {
  background:#096271;
}

.button span {
  font-size:26px;
  line-height:1;
}

.help-section {
  padding-block:32px 50px;
  border-top:1px solid var(--line);
}

.help-section h2 {
  font-size:25px;
  margin-bottom:18px;
  letter-spacing:-.7px;
}

.help-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 40px;
}

details {
  border-bottom:1px solid var(--line);
  padding:15px 0;
}

summary {
  cursor:pointer;
  font-weight:600;
  list-style-position:outside;
  margin-left:19px;
  padding-left:5px;
}

details p {
  color:var(--muted);
  margin:12px 0 0 24px;
  font-size:15px;
  max-width:64ch;
}

.site-footer {
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}

.footer-inner {
  min-height:76px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.footer-inner p {
  margin:0;
}

.footer-inner nav {
  display:flex;
  gap:24px;
}

.footer-inner a {
  text-decoration:none;
}

.article-layout {
  max-width:820px;
  padding-block:52px 70px;
}

.article-layout h1 {
  font-size:clamp(37px,5vw,57px);
  letter-spacing:-2px;
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--teal);
  font-size:12px;
  font-weight:700;
  margin-bottom:17px;
}

.reading-note {
  background:var(--pale);
  padding:18px 23px;
  border-radius:10px;
  margin-bottom:38px;
  color:#25535b;
  font-size:15px;
}

.reading-note p {
  margin:0;
}

.sample-article {
  font-family:Georgia,serif;
  font-size:20px;
  line-height:1.85;
}

.sample-article h1 {
  font-family:Manrope,Arial,sans-serif;
}

.sample-article .article-deck {
  font-size:23px;
  line-height:1.6;
  color:var(--muted);
}

.sample-article p {
  margin-bottom:25px;
}

.article-layout h2 {
  font-size:28px;
  letter-spacing:-.8px;
  margin-top:32px;
  margin-bottom:14px;
}

.article-layout ul {
  padding-left:25px;
}

.article-layout a {
  overflow-wrap:anywhere;
}

.article-layout .back-link {
  display:inline-block;
  margin-top:20px;
}

@media(max-width:1050px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .hero {
    gap:26px;
    grid-template-columns:1fr 1fr;
  }
  h1 {
    letter-spacing:-1.8px;
  }
  .lead {
    font-size:20px;
  }
  .steps strong {
    font-size:16px;
  }
  .steps p {
    font-size:14px;
  }
  .first-listen {
    gap:28px;
    grid-template-columns:1.05fr 1fr;
  }
  .first-listen .steps {
    grid-template-columns:1fr;
    gap:18px;
  }
  .first-listen .steps li {
    min-height:46px;
  }
}

@media(max-width:760px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .header-inner {
    min-height:80px;
  }
  .brand {
    font-size:21px;
    gap:10px;
  }
  .brand-icon {
    width:43px;
    height:43px;
  }
  .brand-icon img {
    width:29px;
    height:29px;
  }
  .hero {
    grid-template-columns:1fr;
    gap:34px;
    padding-block:30px 32px;
  }
  .status {
    font-size:16px;
    margin-bottom:20px;
  }
  .status-check {
    width:35px;
    height:35px;
  }
  h1 {
    font-size:clamp(39px,8.3vw,59px);
    letter-spacing:-1.7px;
    max-width:600px;
  }
  .lead {
    font-size:21px;
    max-width:570px;
  }
  .steps {
    gap:20px;
  }
  .steps strong {
    font-size:17px;
  }
  .steps p {
    font-size:15px;
  }
  .browser-figure {
    width:min(100%,580px);
    justify-self:center;
  }
  .browser-caption {
    margin-top:10px;
  }
  .first-listen {
    grid-template-columns:1fr;
    gap:32px;
    padding-block:31px 36px;
  }
  .first-listen h2 {
    font-size:33px;
    letter-spacing:-1.2px;
  }
  .first-listen .steps {
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .help-grid {
    grid-template-columns:1fr;
  }
  .help-section {
    padding-block:29px 35px;
  }
  .article-layout {
    padding-block:30px 45px;
  }
  .sample-article {
    font-size:18px;
  }
  .sample-article .article-deck {
    font-size:21px;
  }
  .footer-inner {
    min-height:78px;
  }
  .button {
    font-size:17px;
  }
}

@media(max-width:420px) {
  .wrap {
    width:calc(100% - 32px);
  }
  .brand {
    font-size:19px;
  }
  .header-link {
    font-size:15px;
  }
  h1 {
    font-size:40px;
  }
  .lead {
    font-size:19px;
  }
  .first-listen .steps {
    grid-template-columns:1fr;
  }
  .first-listen h2 {
    font-size:29px;
  }
  .footer-inner nav {
    gap:16px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .button {
    transition:none;
  }
}

/* Two illustrated steps fill the opening desktop viewport; help follows below. */
.welcome-page .first-listen .browser-figure { width:100%; }
@media(min-width:1100px) {
  .welcome-page .wrap { width:calc(100% - 80px); max-width:1800px; }
  .welcome-page .header-inner { height:68px; min-height:68px; }
  .welcome-page .brand { font-size:22px; }
  .welcome-page .brand-icon { width:42px; height:42px; }
  .welcome-page .onboarding {
    min-height:calc(100svh - 69px);
    display:grid;
    grid-template-rows:auto 1fr;
    padding-bottom:32px;
  }
  .welcome-page .hero,
  .welcome-page .first-listen {
    grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
    gap:28px;
    padding-block:clamp(18px,2.5vh,32px);
  }
  .welcome-page .status { font-size:16px; margin-bottom:14px; gap:10px; }
  .welcome-page .status-check { width:32px; height:32px; font-size:22px; }
  .welcome-page h1 { font-size:clamp(38px,min(3.6vw,5.5vh),60px); margin-bottom:16px; letter-spacing:-2px; }
  .welcome-page .lead { font-size:clamp(18px,1.5vw,24px); margin-bottom:20px; }
  .welcome-page .steps { gap:18px; }
  .welcome-page .steps li { padding-left:56px; min-height:42px; }
  .welcome-page .steps li:before { width:40px; height:40px; font-size:22px; }
  .welcome-page .steps strong { font-size:clamp(15px,1.15vw,19px); }
  .welcome-page .steps p { font-size:clamp(13px,1vw,16px); }
  .welcome-page .browser-figure { width:100%; max-width:none; justify-self:stretch; }
  .welcome-page .browser-figure svg { max-height:max(220px,calc((100svh - 269px) / 2)); }
  .welcome-page .browser-caption { font-size:11px; margin-top:7px; }
  .welcome-page .first-listen h2 { font-size:clamp(28px,2.5vw,42px); margin-bottom:22px; letter-spacing:-1px; }
  .welcome-page .first-listen .steps { grid-template-columns:1fr; gap:16px; }
  .welcome-page .button { margin-top:20px; padding:12px 22px; font-size:17px; }
}
@media(min-width:1100px) and (max-height:750px) {
  .welcome-page .hero,.welcome-page .first-listen { padding-block:14px; }
  .welcome-page h1 { font-size:38px; margin-bottom:10px; }
  .welcome-page .status { margin-bottom:10px; }
  .welcome-page .lead { font-size:18px; margin-bottom:14px; }
  .welcome-page .steps,.welcome-page .first-listen .steps { gap:10px; }
  .welcome-page .first-listen h2 { font-size:28px; margin-bottom:14px; }
  .welcome-page .button { margin-top:14px; padding:10px 20px; }
}