/* Dear Lingo public pages: header, the homepage, help (with the FAQ), legal pages, 404 and the quiet
   footer. Since 30 September 2026 they follow "Landing v7 — Quiet" (Figma): america.gov's quiet
   pages in our colours. Big serif titles in open space, one column, hairlines, big rounded picture
   tiles, and tiles that never sit behind text. Tokens, buttons and bubbles are in base.css. */

html {
  scroll-padding-top: 88px;
}
h1,
h2 {
  letter-spacing: -0.028em;
}

/* Header: the logo, Help and Start in a translucent bar that stays at the top. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fdfcf8eb;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.bar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}
.bar .brand {
  --mark: 32px;
  gap: 10px;
}
.bar .wordmark {
  font-size: 23px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  font: 500 16px / 1 var(--body);
}
.nav > a:not(.btn) {
  padding: 14px 8px;
  color: var(--slate);
  text-decoration: none;
}
.nav > a:not(.btn):hover,
.nav a[aria-current="page"] {
  color: var(--cobalt-ink);
}
.bar .cta {
  min-height: 44px;
}
.bar .back {
  margin-left: auto;
}
.back .icon {
  width: 18px;
  height: 18px;
}

/* Homepage titles: the quiet pages' big serif, centred, and the calm line under them. */
.big-title {
  font: 400 clamp(40px, 4.5cqi, 64px) / 1.05 var(--serif);
  letter-spacing: -0.035em;
  color: var(--cobalt-ink);
}
.big-title > span,
.hero-title > span {
  display: block;
}
.big-sub {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: clamp(18px, 1.5cqi, 21px);
  line-height: 1.5;
  color: var(--slate);
}

/* Hero: an inset panel, glaze fading to soft blue, with the episode card and the way in. */
.hero {
  margin: 24px 24px 0;
  padding: clamp(56px, 6cqi, 88px) var(--pad) 64px;
  border-radius: 48px;
  background: linear-gradient(var(--glaze), #e8edf7);
  text-align: center;
}
.hero-title {
  font: 400 clamp(46px, 6.7cqi, 96px) / 1.02 var(--serif);
  letter-spacing: -0.04em;
  color: var(--cobalt-ink);
}
.hero-sub {
  max-width: 620px;
  margin: 28px auto 0;
  font-size: clamp(18px, 1.5cqi, 21px);
  line-height: 1.5;
  color: var(--slate);
}
.hero-episode {
  width: min(100%, 600px);
  margin: 48px auto 0;
}
/* The way in: one white pill across the card's top edge, a cobalt arrow at its end. */
.start-pill {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, 540px);
  min-height: 64px;
  margin: 0 auto -32px;
  padding: 0 8px 0 26px;
  border-radius: 999px;
  background: #fff;
  color: var(--cobalt-ink);
  font: 600 19px / 1.2 var(--body);
  text-align: left;
  text-decoration: none;
  box-shadow:
    0 1px 2px #172e7314,
    0 16px 36px -12px #172e7340;
}
.start-pill:hover {
  color: var(--cobalt-ink);
}
.start-pill-go {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  transition: background-color 0.18s var(--ease);
}
.start-pill-go .icon {
  width: 22px;
  height: 22px;
  transition: transform 0.18s var(--ease);
}
.start-pill:hover .start-pill-go {
  background: var(--cobalt-ink);
}
.start-pill:hover :where(.icon) {
  transform: translateX(3px);
}
/* The café: a whitewashed wall, a thin cobalt dado line, a softened tiled wainscot, and the host in
   a cobalt-rimmed doorway. */
.cafe {
  --tile: 52px;
  display: grid;
  place-items: end center;
  background:
    linear-gradient(var(--wash) 0 64%, #1e3e9e8c 64% calc(64% + 3px), #fdfcf8c2 calc(64% + 3px)),
    url("/tiles/az.svg") 0 100% / var(--tile) var(--tile),
    var(--wash);
}
.door {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 35%;
  aspect-ratio: 7 / 10;
  overflow: hidden;
  border: 4px solid var(--cobalt);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: var(--sky);
}
.door img {
  width: 100%;
  height: auto;
}
.episode-card {
  position: relative;
  height: 380px;
  overflow: hidden;
  border-radius: 40px;
  box-shadow:
    0 2px 6px #172e7312,
    0 44px 80px -36px #172e7366;
}
.episode-card .cafe {
  height: 100%;
}
.episode-line {
  position: absolute;
  left: 32px;
  bottom: 32px;
  max-width: min(208px, 36%);
}
/* The five hosts, as tabs that change the card's host (js/hero-hosts.js). */
.faces {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.face {
  position: relative;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--sky);
  transition: box-shadow 0.18s var(--ease);
}
.face img {
  position: absolute;
  top: 8%;
  left: -9%;
  width: 118%;
  max-width: none;
  height: auto;
}
.face:hover {
  box-shadow: 0 0 0 2px var(--blue-line);
}
.face[aria-pressed="true"] {
  box-shadow:
    0 0 0 2px var(--glaze),
    0 0 0 5px var(--cobalt);
}
.face:focus-visible {
  outline-offset: 7px;
  border-radius: 50%;
}
.hero-note {
  margin-top: 20px;
  font-size: 15px;
  color: var(--slate);
}

/* The idea in one sentence, after Lingo waves. */
.statement {
  padding: clamp(96px, 10cqi, 144px) var(--pad) 0;
  text-align: center;
}
.statement-lingo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--cobalt);
}
.statement-lingo img {
  width: 58px;
  height: 58px;
  margin-top: 6px;
}
.statement p {
  max-width: 1040px;
  margin-inline: auto;
  font: 400 clamp(31px, 3.6cqi, 52px) / 1.14 var(--serif);
  letter-spacing: -0.025em;
  color: var(--cobalt-ink);
  text-wrap: balance;
}

/* How it works: five rows, a big picture tile beside the words, sides taking turns. */
.features {
  display: grid;
  gap: clamp(96px, 8.4cqi, 120px);
  max-width: calc(1104px + 2 * var(--pad));
  margin-inline: auto;
  padding: clamp(96px, 10cqi, 144px) var(--pad);
}
.feature {
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 440fr);
  align-items: center;
  gap: clamp(48px, 7.2cqi, 104px);
}
.feature-tile {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 48px;
}
.feature-tile .bubble {
  font-size: 18px;
}
.feature-tile .bubble .en {
  font-size: 15px;
}
.feature-words h2 {
  font: 600 clamp(27px, 2.4cqi, 34px) / 1.15 var(--display);
  letter-spacing: -0.02em;
}
.feature:nth-child(even) {
  grid-template-columns: minmax(0, 440fr) minmax(0, 560fr);
}
.feature:nth-child(even) .feature-tile {
  grid-column: 2;
}
.feature:nth-child(even) .feature-words {
  grid-area: 1 / 1;
}
.feature-words p {
  margin-top: 16px;
  font-size: clamp(17px, 1.35cqi, 19px);
  line-height: 1.55;
  color: var(--slate);
}
.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 12px;
  font-weight: 600;
  text-decoration: none;
}
.more .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.18s var(--ease);
}
.more:hover {
  text-decoration: underline;
}
.more:hover :where(.icon) {
  transform: translateX(3px);
}
.feature-words .btn {
  margin-top: 24px;
}

/* Say it out loud: Rosa's line, the microphone listening, your reply. */
.tile-speak {
  grid-template-rows: auto 1fr auto;
  padding: clamp(24px, 3cqi, 40px);
  background: var(--cobalt-ink);
}
.tile-speak .bubble {
  justify-self: start;
}
.tile-speak .bubble-you {
  justify-self: end;
}
.speak-mic {
  display: grid;
  place-items: center;
  place-self: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  box-shadow:
    0 0 0 26px #1e3e9e59,
    0 0 0 54px #1e3e9e26;
}
.speak-mic .icon {
  width: 60px;
  height: 60px;
}

/* A hint: the three steps, Lingo's nudge, then the exact words. */
.tile-hint {
  place-items: center;
  padding: clamp(24px, 4cqi, 60px);
  background: var(--wash);
}
.hint-demo {
  display: grid;
  justify-items: start;
  gap: 18px;
  width: 100%;
}
.hint-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hint-steps span {
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--blue-line);
  font: 600 15px / 1.3 var(--body);
}
.hint-steps .on {
  background: var(--cobalt);
  color: #fff;
  box-shadow: none;
}
.hint-note {
  justify-self: stretch;
  padding: 18px 22px 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.hint-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 13px / 1 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cobalt);
}
.hint-lingo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cobalt);
}
.hint-lingo img {
  width: 26px;
  height: 26px;
  margin-top: 3px;
}
.hint-note p:last-child {
  margin-top: 12px;
  font: 600 19px / 1.35 var(--body);
}
.tile-hint .bubble-hint .en {
  color: var(--cobalt-ink);
}

/* Five cities: a doorway for each host, her city under it. */
.tile-hosts {
  place-items: center;
  padding: 0 clamp(16px, 2cqi, 28px);
  background: var(--sky);
}
.arches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 0.8cqi, 12px);
  width: 100%;
}
.arch {
  display: grid;
  justify-items: center;
  gap: 10px;
  font: 500 15px / 1.2 var(--body);
}
.arch .door {
  width: 100%;
  border-width: 3px;
}
.arch img {
  width: 100%;
}

/* Three to five minutes: the time on a chip, Lingo cheering. */
.tile-time {
  grid-template-rows: auto 1fr;
  justify-items: center;
  padding: clamp(32px, 5cqi, 64px) 24px 24px;
  background: var(--tag);
}
.time-chip {
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  font: 700 19px / 1.2 var(--body);
  box-shadow: var(--shadow-chip);
}
.tile-time img {
  align-self: center;
  width: 52%;
  height: auto;
}

/* Nothing to install: the café in a browser window. */
.tile-browser {
  place-items: center;
  padding: 24px;
  background: var(--porcelain);
}
.browser {
  width: min(100%, 400px);
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-float);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 10px;
}
.browser-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue-line);
}
.browser-bar span {
  margin-left: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--porcelain);
  font: 500 14px / 1.2 var(--body);
  color: var(--slate);
}
.browser .cafe {
  --tile: 30px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}
.browser .door {
  border-width: 3px;
}

/* Season one: five white cards, a picture well each, on the whitewash. */
.season {
  padding: clamp(88px, 9cqi, 128px) var(--pad);
  background: var(--wash);
  text-align: center;
}
.episodes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.episodes:focus-visible {
  border-radius: 30px;
}
.episode {
  display: grid;
  align-content: start;
  padding: 10px 10px 24px;
  border-radius: 30px;
  background: #fff;
  box-shadow:
    0 0 0 1px #172e730f,
    var(--shadow-chip);
}
.episode-well {
  display: grid;
  place-items: center;
  height: 150px;
  margin-bottom: 8px;
  border-radius: 22px;
  background: var(--wash);
}
.episode:nth-child(even) .episode-well {
  background: var(--sky);
}
.episode-well .scene-art {
  width: 68px;
  height: 68px;
}
.episode > span:not(.episode-well) {
  padding-inline: 8px;
}
.episode-num {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--slate);
}
.episode-goal {
  margin-top: 6px;
  font: 400 22px / 1.2 var(--serif);
  letter-spacing: -0.01em;
}
.episode-twist {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--slate);
}

/* Pricing: the annual plan on cobalt beside the monthly one on white. */
.pricing {
  padding: clamp(88px, 9cqi, 128px) var(--pad);
  text-align: center;
}
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 460px));
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
  text-align: left;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 34px 34px 36px;
  border-radius: 36px;
  background: #fff;
  color: var(--cobalt-ink);
  box-shadow: inset 0 0 0 1px #172e731a;
}
.plan-annual {
  background: var(--cobalt);
  color: #fff;
  box-shadow: var(--shadow-float);
}
.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}
.plan h3 {
  font: 600 19px / 1.2 var(--body);
  letter-spacing: 0;
}
.plan-tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--saffron);
  color: var(--cobalt-ink);
  font: 700 14px / 1.2 var(--body);
}
.plan-price {
  margin-top: 18px;
  font-size: 18px;
  color: var(--slate);
}
.plan-price b {
  font: 400 64px / 1 var(--serif);
  letter-spacing: -0.03em;
  color: var(--cobalt-ink);
}
.plan-billed {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--slate);
}
.plan-annual :is(.plan-price, .plan-billed) {
  color: var(--caption);
}
.plan-annual .plan-price b {
  color: #fff;
}
.ticks {
  display: grid;
  gap: 12px;
  margin: 22px 0 30px;
  padding: 0;
  list-style: none;
}
.ticks li {
  position: relative;
  padding-left: 34px;
  line-height: 1.45;
}
.ticks li::before {
  content: "";
  position: absolute;
  top: 0.12em;
  left: 0;
  width: 22px;
  height: 22px;
  background: url("/art/tick.svg") 0 0 / 100% 100%;
}
.plan-annual .ticks li::before {
  background-image: url("/art/tick-saffron.svg");
}
.plan .btn {
  width: 100%;
  margin-top: auto;
}
.plan-monthly .btn-light {
  box-shadow:
    inset 0 0 0 1px #172e731f,
    var(--shadow-chip);
}
/* Focus stays visible on the cobalt card. */
.plan-annual :focus-visible {
  outline-color: #fff;
}
.small-print {
  max-width: 640px;
  margin: 40px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
}

/* The last call: Lingo cheers, then the button. */
.final {
  padding: clamp(40px, 4cqi, 64px) var(--pad) clamp(96px, 10cqi, 144px);
  text-align: center;
}
.final img {
  width: 140px;
  height: 140px;
  margin: 0 auto 28px;
}
.final .btn {
  margin-top: 32px;
}

/* Quiet pages (help, articles, privacy, company information, 404), after america.gov: a big serif
   title centred in open space, one calm column, and tiles only where they carry meaning. */
.quiet {
  background: var(--glaze);
}
.quiet-hero {
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(64px, 9cqi, 128px) var(--pad) clamp(40px, 5cqi, 72px);
  text-align: center;
}
.quiet-hero h1 {
  font: 400 clamp(46px, 7cqi, 96px) / 1 var(--serif);
  letter-spacing: -0.04em;
}
.quiet-hero-article h1 {
  font-size: clamp(40px, 5.2cqi, 72px);
}
.quiet-sub {
  max-width: 34em;
  margin: 22px auto 0;
  font-size: clamp(18px, 1.6cqi, 21px);
  line-height: 1.5;
  color: var(--slate);
}
.crumbs {
  margin-bottom: 20px;
  font: 500 16px / 1.4 var(--body);
  color: var(--slate);
}
.crumbs a {
  color: var(--slate);
}
.crumbs a:hover {
  color: var(--cobalt-ink);
}
.quiet-title {
  margin-bottom: 36px;
  font: 400 clamp(38px, 4.8cqi, 64px) / 1.05 var(--serif);
  letter-spacing: -0.035em;
  text-align: center;
}

/* The search: one pill, like america.gov's "Ask anything". */
.ask {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 620px;
  margin: 36px auto 0;
  padding: 4px 8px 4px 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--slate);
  box-shadow:
    inset 0 0 0 1px #172e7314,
    var(--shadow-card);
}
.ask:focus-within {
  box-shadow:
    0 0 0 3px var(--cobalt),
    var(--shadow-card);
}
.ask input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  border: 0;
  background: transparent;
  font-size: 18px;
  color: var(--cobalt-ink);
  outline: none;
}
.popular {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
}
.popular a {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--wash);
  color: var(--cobalt-ink);
  font: 500 15px / 1.2 var(--body);
  text-decoration: none;
}
.popular a:hover {
  background: var(--porcelain);
  color: var(--cobalt-ink);
}

/* Help by topic: big rounded tiles, one picture each, and a caption with a bold lead-in. */
.help-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 24px;
  max-width: 1180px;
  margin-inline: auto;
  padding: 24px var(--pad) clamp(80px, 9cqi, 128px);
}
.help-tile {
  display: grid;
  align-content: start;
  gap: 22px;
  color: var(--slate);
  text-decoration: none;
}
.help-tile:hover {
  color: var(--slate);
}
.tile-art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: clamp(28px, 3.4cqi, 48px);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.help-tile:hover .tile-art {
  box-shadow: var(--shadow-float);
  transform: translateY(-4px);
}
.tile-caption {
  padding-inline: 12px;
  font-size: clamp(18px, 1.5cqi, 21px);
  line-height: 1.4;
}
.help-tile .tile-caption b {
  font-weight: 600;
  color: var(--cobalt-ink);
}
.help-tile:hover b {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.tile-art-getting-started {
  background: var(--cobalt);
}
.tile-art-getting-started img {
  width: 64%;
  height: auto;
  filter: drop-shadow(0 18px 24px #0e1a4466);
}
.tile-art-scenes-speaking {
  background: var(--wash);
}
.tile-chat {
  display: grid;
  gap: 14px;
  width: 78%;
}
.tile-chat .bubble {
  font-size: clamp(16px, 1.5cqi, 20px);
  box-shadow: var(--shadow-chip);
}
.tile-chat .bubble-hint {
  justify-self: end;
}
.tile-art-languages {
  background: var(--sky);
}
.tile-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 70%;
}
.tile-flags img {
  width: clamp(48px, 5cqi, 72px);
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-chip);
}
.tile-art-devices-troubleshooting {
  background: var(--cobalt-ink);
}
.tile-mic {
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  box-shadow:
    0 0 0 18px #1e3e9e59,
    0 0 0 38px #1e3e9e26;
}
.tile-mic .icon {
  width: 44%;
  height: auto;
}
.tile-art-account-membership {
  background: var(--tag);
}
.tile-plan {
  display: grid;
  justify-items: start;
  gap: 6px;
  width: 64%;
  padding: 22px 24px 24px;
  border-radius: 24px;
  background: #fff;
  color: var(--cobalt-ink);
  box-shadow: var(--shadow-card);
}
.tile-plan-name {
  font: 600 17px / 1.3 var(--body);
}
.tile-plan-price {
  font-size: 16px;
  color: var(--slate);
}
.tile-plan .tile-plan-price b {
  font: 700 clamp(30px, 3cqi, 40px) / 1 var(--display);
  letter-spacing: -0.03em;
  color: var(--cobalt-ink);
}
.tile-plan-tag {
  margin-top: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--saffron);
  font: 600 14px / 1.2 var(--body);
}
.tile-art-privacy-safety {
  background: var(--porcelain);
}
.tile-shield {
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  color: var(--cobalt);
  box-shadow: var(--shadow-card);
}
.tile-shield .icon {
  width: 46%;
  height: auto;
}

/* The questions and the guides: one centred column, hairlines instead of boxes. */
.quiet-body {
  max-width: 860px;
  margin-inline: auto;
  padding: 0 var(--pad) clamp(88px, 10cqi, 136px);
}
.quiet-section + .quiet-section {
  margin-top: clamp(80px, 9cqi, 128px);
}
.help-empty {
  margin-bottom: 24px;
  font-weight: 600;
  text-align: center;
}
.faq-group + .faq-group {
  margin-top: 44px;
}
.faq-group > h3,
.guide-group > h3 {
  margin-bottom: 6px;
  font: 600 14px / 1.3 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cobalt);
}
.faq-list details {
  border-bottom: 1px solid var(--blue-line);
}
.faq-list summary {
  position: relative;
  padding: 20px 48px 20px 0;
  font: 500 20px / 1.4 var(--body);
  color: var(--cobalt-ink);
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 11px;
  height: 11px;
  margin-top: -8px;
  border-right: 2px solid var(--cobalt);
  border-bottom: 2px solid var(--cobalt);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq-list details[open] summary::after {
  margin-top: -3px;
  transform: rotate(-135deg);
}
.faq-list details > :not(summary) {
  padding: 0 48px 24px 0;
  font-size: 18px;
  color: var(--slate);
}
.guides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 56px;
}
.guide-group ul {
  padding: 0;
  list-style: none;
}
.guide-group a,
.more-list a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--blue-line);
  color: var(--cobalt-ink);
  font-size: 18px;
  line-height: 1.35;
  text-decoration: none;
}
.guide-group a:hover,
.more-list a:hover {
  color: var(--cobalt);
  text-decoration: underline;
}
.quiet-contact {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}
.quiet-contact .quiet-title {
  margin-bottom: 0;
}
.quiet-contact p {
  max-width: 30em;
  font-size: 19px;
  color: var(--slate);
}

/* An article, a policy: one readable column. */
.prose {
  max-width: 720px;
  margin-inline: auto;
  padding: 0 var(--pad);
  font-size: 19px;
  line-height: 1.65;
  color: var(--slate);
}
.prose h2 {
  margin: 52px 0 12px;
  font: 600 25px / 1.25 var(--body);
  letter-spacing: -0.012em;
  color: var(--cobalt-ink);
  scroll-margin-top: 96px;
}
.prose h3 {
  margin: 32px 0 8px;
  font: 600 20px / 1.3 var(--body);
  color: var(--cobalt-ink);
}
.prose p + p,
.prose :is(ul, ol) {
  margin-top: 14px;
}
.prose :is(ul, ol) {
  padding-left: 1.3em;
}
.prose li + li {
  margin-top: 8px;
}
.prose :is(ul, ol) + p {
  margin-top: 14px;
}
.prose strong {
  color: var(--cobalt-ink);
}
.prose-foot {
  margin-top: 52px;
  padding: 22px 26px;
  border-radius: 22px;
  background: var(--wash);
  font-size: 17px;
}
.more-guides {
  max-width: 860px;
  margin: clamp(80px, 9cqi, 120px) auto 0;
  padding: 0 var(--pad) clamp(88px, 10cqi, 136px);
}
.more-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  padding: 0;
  list-style: none;
}
.more-all {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 36px;
  font: 500 17px / 1.4 var(--body);
}

/* Privacy and company information: the same column; the contents in a soft panel. */
.legal {
  padding-bottom: clamp(88px, 10cqi, 136px);
}
.legal .intro {
  font-size: 20px;
  line-height: 1.55;
}
.on-this-page {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 8px;
  padding: 22px;
  border-radius: 24px;
  background: var(--wash);
}
.on-this-page strong {
  width: 100%;
  margin-bottom: 4px;
  font: 600 14px / 1.3 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cobalt);
}
.on-this-page a {
  padding: 9px 15px;
  border-radius: 999px;
  background: #fff;
  color: var(--cobalt-ink);
  font: 500 15px / 1.2 var(--body);
  text-decoration: none;
  box-shadow: var(--shadow-chip);
}
.on-this-page a:hover {
  background: var(--porcelain);
}
.legal section {
  margin-top: 14px;
}
.company-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 24px;
  margin-top: 16px;
}
.company-details dt {
  font-weight: 600;
  color: var(--cobalt-ink);
}

/* 404: the one missing tile. */
.notfound {
  padding-bottom: clamp(96px, 12cqi, 160px);
}
.gap-tiles {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  gap: 6px;
  width: fit-content;
  margin: 0 auto 36px;
}
.gap-tiles span {
  aspect-ratio: 1;
  border-radius: 12px;
  background: url("/tiles/az.svg") 0 0 / 100% 100%;
}
.gap-tiles .missing {
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--grout-2);
  animation: missing 2.8s ease-in-out infinite;
}
@keyframes missing {
  50% {
    transform: rotate(-6deg) translateY(3px);
  }
}
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

/* The quiet footer: big serif links, the wordmark across the page, then the small print. */
.quiet-footer {
  padding: clamp(72px, 9cqi, 128px) var(--pad) 28px;
  border-top: 1px solid #172e7312;
  background: var(--wash);
  color: var(--slate);
  text-align: center;
}
.quiet-links {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.quiet-links a {
  font: 400 clamp(34px, 4.6cqi, 60px) / 1.15 var(--serif);
  letter-spacing: -0.035em;
  color: var(--cobalt-ink);
  text-decoration: none;
}
.quiet-links a:hover {
  color: var(--cobalt);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}
.quiet-wordmark {
  margin-top: clamp(56px, 7cqi, 104px);
  font: 700 min(16cqi, 236px) / 0.9 var(--logo);
  letter-spacing: -0.045em;
  color: var(--cobalt-ink);
  white-space: nowrap;
}
.quiet-credits {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 32px;
  max-width: 1260px;
  margin: clamp(32px, 4cqi, 56px) auto 0;
  padding-top: 24px;
  border-top: 1px solid #172e7314;
  font-size: 15px;
}
.quiet-credits > :first-child {
  text-align: left;
}
.quiet-motto {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--cobalt-ink);
}
.quiet-motto img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}
.quiet-small {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 18px;
}
.quiet-small a {
  padding-block: 4px;
  color: var(--slate);
  text-decoration: none;
}
.quiet-small a:hover {
  color: var(--cobalt-ink);
  text-decoration: underline;
}

/* Reveal: blocks below the fold when the page opened rise into place as they appear (site.js). */
.pending {
  opacity: 0;
}
.revealed {
  animation: rise 0.7s var(--ease) backwards;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* Tablets: the rows stack, the tile over the words; the help tiles go two across. */
@media (max-width: 1023px) {
  .episodes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .help-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .features {
    max-width: calc(560px + 2 * var(--pad));
  }
  .feature,
  .feature:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .feature:nth-child(even) .feature-tile {
    grid-column: auto;
  }
  .feature:nth-child(even) .feature-words {
    grid-area: auto;
  }
}

/* Phones: a tighter panel, one column, and the episodes scroll sideways. */
@media (max-width: 760px) {
  .bar {
    gap: 16px;
    height: 64px;
  }
  html {
    scroll-padding-top: 76px;
  }
  .hero {
    margin: 12px 12px 0;
    padding: 48px 12px 36px;
    border-radius: 32px;
  }
  .hero-sub {
    margin-top: 20px;
  }
  .hero-episode {
    margin-top: 32px;
  }
  .start-pill {
    width: 100%;
    padding-left: 20px;
    font-size: 17px;
  }
  .episode-card {
    height: 250px;
    border-radius: 30px;
  }
  .episode-card .cafe {
    --tile: 36px;
  }
  .episode-card .door {
    width: 36%;
  }
  .episode-line {
    top: 44px;
    bottom: auto;
    left: 14px;
    max-width: 62%;
    padding: 8px 12px 9px;
    font-size: 15px;
  }
  .episode-line .en {
    font-size: 13px;
  }
  .statement-lingo {
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
  }
  .statement-lingo img {
    width: 46px;
    height: 46px;
  }
  .feature-tile {
    border-radius: 32px;
  }
  .feature-tile .bubble {
    font-size: 16px;
  }
  .feature-tile .bubble .en {
    font-size: 14px;
  }
  .speak-mic {
    width: 104px;
    height: 104px;
    box-shadow:
      0 0 0 18px #1e3e9e59,
      0 0 0 36px #1e3e9e26;
  }
  .speak-mic .icon {
    width: 44px;
    height: 44px;
  }
  .hint-steps {
    gap: 6px;
  }
  .hint-steps span {
    padding: 5px 10px;
    font-size: 13px;
  }
  .hint-note p:last-child {
    font-size: 17px;
  }
  .arch {
    font-size: 13px;
  }
  .episodes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 232px;
    margin-inline: calc(-1 * var(--pad));
    padding: 4px var(--pad) 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .episode {
    scroll-snap-align: start;
  }
  .plans {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .plan {
    padding: 28px 24px 26px;
    border-radius: 30px;
  }
  .plan-price b {
    font-size: 52px;
  }
  .final img {
    width: 112px;
    height: 112px;
  }
  .help-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .tile-art {
    aspect-ratio: 4 / 3;
  }
  .guides,
  .more-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-list summary {
    padding-block: 18px;
    font-size: 18px;
  }
  .prose {
    font-size: 18px;
  }
  .prose h2 {
    font-size: 22px;
  }
  .quiet-credits {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .quiet-credits > :first-child {
    text-align: center;
  }
  .quiet-small {
    justify-content: center;
  }
  .company-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .company-details dd {
    margin-bottom: 10px;
  }
}
@media (max-width: 400px) {
  .bar .wordmark {
    font-size: 21px;
  }
  .hero-title {
    font-size: 42px;
  }
  .start-pill {
    font-size: 16px;
  }
}