/*
  Article pages (mac-voice-control, offline-dictation-mac, clarify-vs-wispr-flow).
  They also link home.css, which supplies the tokens, the Recursive face, the shared header and
  footer styling and the status tags (all scoped to body.home). This file adds the reading
  layout only. No motion: these pages are for reading and search.
*/

.article {
  width: min(760px, calc(100vw - 32px));
  margin: 0 auto;
  padding-block: clamp(32px, 7vh, 72px) clamp(64px, 12vh, 120px);
}

.article-hero {
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.article-kicker {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
}

.article-kicker a {
  text-underline-offset: 4px;
}

.article h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(40px, 6.4vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.article .lede {
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.6;
}

.article-cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.article-cta p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.article section {
  padding-top: 44px;
}

.article h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.article h3 {
  margin: 28px 0 8px;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.article p,
.article li {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.7;
}

.article p {
  margin: 0 0 16px;
}

.article strong {
  color: var(--ink);
}

.article ul,
.article ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.article li + li {
  margin-top: 8px;
}

.article a:not(.button) {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* A spoken command, set in Recursive's Mono axis like the homepage stages. */
.say {
  display: inline-block;
  padding: 1px 9px 2px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--ink);
  font-size: 0.88em;
  font-weight: 600;
  font-variation-settings: var(--command);
  white-space: nowrap;
}

.say-list {
  list-style: none;
  padding-left: 0 !important;
  border-top: 1px solid var(--line);
}

.say-list li {
  margin: 0 !important;
  padding: 14px 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 6px 20px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
}

.say-list .say {
  justify-self: start;
  white-space: normal;
}

.status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

/* Comparison tables scroll sideways on their own, never the page. */
.table-wrap {
  margin: 8px 0 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--screen);
}

.table-wrap table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.table-wrap caption {
  padding: 14px 16px 0;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: left;
}

.table-wrap th,
.table-wrap td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  text-align: left;
  vertical-align: top;
}

.table-wrap thead th {
  color: var(--ink);
  font-weight: 750;
}

.table-wrap tbody th {
  color: var(--ink);
  font-weight: 650;
}

.table-wrap tr:last-child th,
.table-wrap tr:last-child td {
  border-bottom: 0;
}

.callout {
  margin: 8px 0 18px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #e6e5f3;
}

.callout p:last-child {
  margin-bottom: 0;
}

.sources {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.sources h2 {
  font-size: 20px;
}

.sources p,
.sources li {
  font-size: 14px;
}

.related {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.related a {
  padding: 18px 20px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--screen);
  font-weight: 700;
  text-decoration: none;
}

.related a span {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 450;
}

.related a:hover {
  border-color: var(--ink);
}

@media (max-width: 560px) {
  .say-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .article p,
  .article li {
    font-size: 16px;
  }
}