/* Product information keeps the homepage's paper, Karla and typewriter voice. */
.product-overview, .product-faq-preview {
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 60px);
}
.product-inner { width: min(100%, 850px); margin-inline: auto; }
.product-page .product-overview { padding: 0; }
.product-page .product-faq-preview { padding: 48px 0 0; }
.product-page .product-inner { width: 100%; }
.product-page .product-overview h1 { max-width: 23ch; }
.product-kicker {
  color: var(--coral-text);
  font: 500 11px/1.6 "Karla", var(--font-sans);
  letter-spacing: .09em;
  text-transform: none;
  margin: 0 0 18px;
}
.product-overview h2, .product-faq-preview h2 {
  max-width: 23ch;
  margin: 0 0 24px;
  color: var(--text-ink);
  font: 300 clamp(30px, 4vw, 46px)/1.16 "Karla", var(--font-sans);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.product-inner > p:not(.product-kicker), .product-sharing p {
  max-width: 68ch;
  color: var(--text-ink-soft);
  font: 400 13px/1.9 var(--font-mono);
  margin: 0 0 18px;
}
.product-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  margin-top: 32px;
}
.product-paths a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding-block: 14px;
  border-block-start: 1px solid var(--line-default);
  color: var(--text-ink);
  font: 400 14px/1.5 "Karla", var(--font-sans);
  text-decoration: none;
}
.product-paths a span { color: var(--coral-text); }
.product-capture { margin-top: 32px; }
.product-capture h2 { font-size: clamp(25px, 3vw, 32px); }
.product-capture p { max-width: 68ch; color: var(--text-ink-soft); font: 400 13px/1.9 var(--font-mono); margin: 0 0 18px; }
.product-sharing { margin-top: 32px; padding-left: 22px; border-left: 2px solid var(--line-default); }
.product-sharing h3 { margin: 0 0 10px; font: 400 21px/1.35 "Karla", var(--font-sans); }
.product-audiences { margin-top: 64px; }
.product-audiences > h2 { font: 300 clamp(30px, 4vw, 46px)/1.16 "Karla", var(--font-sans); letter-spacing: -.025em; margin: 0 0 24px; text-wrap: balance; }
.product-audience-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; margin-top: 40px; }
.product-audience-stories > section { scroll-margin-top: 28px; }
.product-audience-stories h3 { font: 400 23px/1.3 "Karla", var(--font-sans); letter-spacing: -.015em; margin: 0 0 18px; text-wrap: balance; }
.product-audience-stories p { font: 400 13px/1.9 var(--font-mono); color: var(--text-ink-soft); margin: 0 0 18px; }
.product-audience-stories .product-text-link { margin-top: 0; padding-top: 0; }
.product-question { border-bottom: 1px solid var(--line-default); }
.product-question summary {
  padding: 21px 0;
  color: var(--text-ink);
  cursor: pointer;
  font: 400 17px/1.5 "Karla", var(--font-sans);
}
.product-question p { max-width: 68ch; margin: 0 0 24px; color: var(--text-ink-soft); font: 400 13px/1.9 var(--font-mono); }
.product-question summary:focus-visible { outline: 2px solid var(--coral-fill); outline-offset: 4px; }
.product-text-link { display: inline-block; padding-block: 16px; margin-top: 12px; color: var(--text-ink); font: 400 14px/1.5 "Karla", var(--font-sans); text-underline-offset: 4px; }
.product-page { margin: 0; background: var(--ground-paper); color: var(--text-ink); -webkit-font-smoothing: antialiased; }
.product-page *, .product-page *::before, .product-page *::after { box-sizing: border-box; }
.product-page :is(a, summary):focus-visible { outline: 2px solid var(--coral-fill); outline-offset: 5px; }
.product-skip { position: absolute; left: 24px; top: 8px; transform: translateY(-200%); padding: 12px; background: var(--ground-paper); color: var(--text-ink); }
.product-skip:focus { transform: none; z-index: 5; }
.product-header { max-width: 1320px; margin: auto; padding: 28px clamp(24px, 5vw, 60px); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.product-brand { display: flex; gap: 10px; align-items: center; }
.product-brand img:first-child { width: 36px; height: 36px; border-radius: 10px; }
.product-brand img:last-child { width: auto; height: 17px; }
.product-header nav, .product-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.product-header nav a, .product-footer a { color: var(--text-ink-soft); font: 400 13px/1.5 "Karla", var(--font-sans); text-underline-offset: 4px; }
.product-header nav a[aria-current] { color: var(--text-ink); text-decoration-thickness: 2px; }
.product-shell { max-width: 1100px; margin: auto; padding: clamp(40px, 7vw, 85px) clamp(24px, 5vw, 60px) 60px; }
.product-page-heading { max-width: 740px; margin-bottom: 54px; }
.product-page h1 { font: 300 clamp(38px, 6vw, 64px)/1.08 "Karla", var(--font-sans); letter-spacing: -.035em; text-wrap: balance; margin: 0 0 28px; }
.product-lead { font: 400 15px/1.9 var(--font-mono); color: var(--text-ink-soft); max-width: 62ch; }
.product-story { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(40px, 7vw, 100px); align-items: start; }
.product-story-copy section + section { margin-top: 40px; }
.product-story-copy h2, .product-download h2 { font: 300 clamp(25px, 3vw, 32px)/1.25 "Karla", var(--font-sans); letter-spacing: -.02em; text-wrap: balance; margin: 0 0 18px; }
.product-story-copy p, .product-download > p:not(.product-kicker), .product-policy-links { font: 400 13px/1.95 var(--font-mono); color: var(--text-ink-soft); margin: 0 0 20px; }
.product-app-figure { margin: 0; }
.product-app-figure img { display: block; width: 100%; height: auto; border-radius: 22px; }
.product-app-figure figcaption { font: 400 11px/1.8 var(--font-mono); color: var(--text-ink-soft); margin-top: 16px; }
.product-policy-links { margin-top: 28px; }
.product-policy-links a { color: var(--text-ink); text-underline-offset: 4px; }
.product-download { margin-top: 64px; padding-block: 32px; border-block: 1px solid var(--line-default); }
.product-stores { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.product-stores a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.product-stores img { display: block; height: auto; }
.product-stores [data-store="app-store"] img { width: 120px; }
.product-stores [data-store="google-play"] img { width: 138px; }
.product-footer { max-width: 980px; margin: auto; padding: 24px clamp(24px, 5vw, 60px) 40px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--text-ink-soft); font: 400 12px/1.6 "Karla", var(--font-sans); }
.product-trademarks { width: 100%; margin: 0; font-size: 10px; }
@media (hover: hover) {
  .product-paths a:hover, .product-header nav a:hover, .product-footer a:hover, .product-text-link:hover { color: var(--coral-text); }
}
@media (max-width: 640px) {
  .product-paths { grid-template-columns: 1fr; }
  .product-story, .product-audience-stories { grid-template-columns: 1fr; }
  .product-app-figure { grid-row: 1; width: min(62%, 230px); margin: 0 auto 8px; }
  .product-header { gap: 12px; }
  .product-header nav { gap: 10px; }
  .product-brand img:first-child { width: 30px; height: 30px; }
  .product-brand img:last-child { height: 13px; }
  .product-page-heading { margin-bottom: 36px; }
}