/* Long-form pages: features, guides, use cases, help, comparisons, research,
   tools and trust pages. The build adds this sheet for those types (and for
   hubs). Every colour is a token from tokens.css, so the light and dark themes
   follow the rest of the site; the reading column is about 68 characters.

   Layout: .article (a .section-wrap) holds .article-header and .article-layout.
   Both use the same two tracks, a contents rail and the reading column, so the
   headline, the updated line and the prose share one left edge. Below 1000px
   the rail folds away and the contents list sits above the prose. */

.article {
  --article-rail: minmax(170px, 230px);
  --article-measure: minmax(0, 740px);
  --article-gap: clamp(40px, 7vw, 112px);
  padding-block: 28px 120px;
}

/* ---------------------------------------------------------------- header */

.article-header,
.article-layout {
  display: grid;
  grid-template-columns: var(--article-rail) var(--article-measure);
  column-gap: var(--article-gap);
  justify-content: center;
}
.article-header > *,
.article-layout > .article-body { grid-column: 2; }

.article-header { padding-bottom: 48px; }
.article-header .breadcrumb { margin-bottom: 36px; }
.article-header .section-index { display: block; margin-bottom: 20px; color: var(--muted); }
.article-header h1 {
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -.05em;
  font-weight: 450;
  text-wrap: balance;
}
.article-lede { margin-top: 26px; font-size: clamp(19px, 1.55vw, 22px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.article-header .article-meta { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }

/* Editorial introductions use the full page width. Product features have
   their own visual introductions; the prose below shares this reading grid. */
.reading-page .article-header { display: block; max-width: 1160px; margin-inline: auto; padding-bottom: 62px; }
.reading-page .article-header .breadcrumb { margin-bottom: 48px; }
.reading-category { margin-bottom: 22px; color: var(--accent-text); font-size: 13px; line-height: 1.5; font-weight: 500; }
.reading-page .article-header h1 { max-width: 25ch; font-size: clamp(44px, 5.8vw, 84px); line-height: 1.045; letter-spacing: -.055em; }
.reading-page .article-lede { max-width: 730px; margin-top: 32px; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.65; }
.reading-page .article-header .article-meta { border-top: 0; padding-top: 0; margin-top: 28px; }
.reading-page .article-layout { padding-top: 48px; border-top: 1px solid var(--line); }
.reading-help .article-header h1,
.reading-legal .article-header h1 { font-size: clamp(42px, 5vw, 70px); }
.reading-help .article-header { padding-bottom: 40px; }

/* ---------------------------------------------------------------- contents */

.toc { grid-column: 1; grid-row: 1; position: sticky; top: 32px; align-self: start; max-height: calc(100dvh - 64px); overflow: auto; padding: 4px; }
.toc-title { margin-bottom: 20px; color: var(--ink); font-size: 13px; font-weight: 500; }
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc a {
  display: block;
  margin-left: -1px;
  padding: 10px 0 10px 18px;
  border-left: 1px solid transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  transition: color .2s, border-color .2s;
}
@media (hover: hover) {
  .toc a:hover { color: var(--ink); border-left-color: var(--ink); }
}
.toc a[aria-current="location"] { color: var(--accent-text); border-left: 2px solid var(--accent-text); padding-left: 17px; font-weight: 500; }
.toc-toggle { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 0; color: var(--ink); font: inherit; font-size: 15px; text-align: left; }
.toc-toggle::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-right: 3px; }
.toc-toggle[aria-expanded="true"]::after { transform: rotate(225deg); }
.toc a:focus-visible,
.toc-toggle:focus-visible { outline-offset: -2px; }

/* ---------------------------------------------------------------- prose */

.article-body { font-size: 18px; line-height: 1.8; color: var(--ink); color: color-mix(in srgb, var(--ink) 90%, var(--paper)); min-width: 0; }
.article-body > * + * { margin-top: 24px; }
.article-body > :first-child { margin-top: 0; }

.article-body h2 {
  margin-top: 80px;
  margin-bottom: -2px;
  color: var(--ink);
  font-size: clamp(29px, 2.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -.035em;
  font-weight: 450;
  scroll-margin-top: 32px;
  text-wrap: balance;
}
.article-body h3 {
  margin-top: 44px;
  margin-bottom: -6px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 500;
  scroll-margin-top: 32px;
}
.article-body h4 { margin-top: 32px; margin-bottom: -10px; color: var(--ink); font-size: 18px; font-weight: 600; }

.article-body a:not(.button, .text-link) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-text);
  text-underline-offset: 4px;
  transition: color .2s, text-decoration-thickness .2s;
}
@media (hover: hover) {
  .article-body a:not(.button, .text-link):hover { color: var(--accent-text); text-decoration-thickness: 2px; }
}
.article-body strong { color: var(--ink); font-weight: 600; }

.article-body ul,
.article-body ol:not(.steps) { padding-left: 1.3em; }
.article-body li + li { margin-top: 10px; }
.article-body li::marker { color: var(--accent-text); }
.article-body ul > li { padding-left: .2em; }

.article-body blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--accent-text);
  color: var(--ink);
  font-size: 20px;
  line-height: 1.6;
}
.article-body blockquote cite, .article-body blockquote footer { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; font-style: normal; }

.article-body code, .article-body kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .84em;
}
.article-body code { padding: 2px 6px; border-radius: 5px; background: var(--surface); }
.article-body kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--paper);
  line-height: 1.5;
  white-space: nowrap;
}
.article-body hr { margin-block: 56px; border: 0; border-top: 1px solid var(--line); }

/* An in-app label or screen name, quoted exactly as the app shows it. */
.ui-label { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------------- facts */

/* "At a glance": plain statements an answer engine can lift. */
.facts {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  margin-block: 34px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.6;
}
.facts dt, .facts dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { padding-right: 20px; color: var(--muted); font-size: 14px; }
.facts dd { color: var(--ink); }

/* ---------------------------------------------------------------- callouts */

.callout {
  padding: 28px 30px;
  border-left: 2px solid var(--accent-text);
  border-radius: 0 16px 16px 0;
  background: var(--surface);
  font-size: 16px;
  line-height: 1.7;
}
.article-body > .callout { margin-block: 34px; }
.callout > * + * { margin-top: 10px; }
.callout-title { color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
/* The brand keeps its lowercase spelling inside uppercase labels (Design/Brand/IDENTITY.md). */
.callout-title .brand-word { text-transform: none; }
.callout-limit { border-left-color: var(--muted); }
.callout ul { margin: 0; }

/* A representative scenario (a labelled composite, never a customer story). */
.scenario {
  margin-block: 34px;
  padding: 30px 32px;
  border-radius: 18px;
  background: var(--surface);
  font-size: 17px;
  line-height: 1.75;
}
.scenario > * + * { margin-top: 14px; }
.scenario-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.scenario-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }

/* ---------------------------------------------------------------- steps */

.article-body .steps { margin-block: 30px; padding: 0; list-style: none; counter-reset: step; }
.steps > li { position: relative; min-height: 38px; padding-left: 60px; counter-increment: step; }
.steps > li + li { margin-top: 26px; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-bottom: 1px solid var(--line);
  color: var(--accent-text);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.steps > li > :first-child { margin-top: 0; }
.steps h3 { margin: 4px 0 6px; font-size: 19px; }

/* ---------------------------------------------------------------- tables */

.table-wrap { margin-block: 38px; padding: 22px 24px; border-radius: 16px; background: var(--surface); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 4px; }
.table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.table-wrap caption { padding-bottom: 12px; color: var(--muted); font-size: 13px; text-align: left; caption-side: top; }
.table-wrap th, .table-wrap td { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-wrap thead th { color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.table-wrap tbody th { color: var(--ink); font-weight: 500; }
.table-wrap td { color: var(--ink); }
.table-note { color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- figures */

.figure { margin: 44px 0; }
.figure img { display: block; }
.figure figcaption {
  max-width: 54ch;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* A real app capture in the same phone frame the home page uses. */
.phone-frame {
  --phone-w: min(280px, 64vw);
  width: var(--phone-w);
  margin-inline: auto;
  padding: calc(var(--phone-w) * .0116);
  border-radius: calc(var(--phone-w) * .11);
  background: #0a0813;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .24), 0 calc(var(--phone-w) * .06) calc(var(--phone-w) * .14) rgb(10 8 19 / .24);
}
.phone-frame img { width: 100%; height: auto; border-radius: calc(var(--phone-w) * .098); }
.figure-pair .figure-phones { display: flex; justify-content: center; gap: clamp(16px, 4vw, 36px); }
.figure-pair .phone-frame { --phone-w: min(240px, 40vw); margin-inline: 0; }

.figure-wide img { width: 100%; height: auto; border-radius: 8px; }
.figure-bleed { margin-inline: calc((100% - min(100vw - 40px, 1000px)) / 2); }

/* A product view has its own breathing room within a long guide. Captions
   explain the capture beside it, instead of becoming another paragraph. */
.reading-page .figure-phone { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 36px; padding: 42px 36px; border-radius: 22px; background: var(--surface); }
.reading-page .figure-phone .phone-frame { --phone-w: 240px; width: min(240px, 100%); padding: 3px; border-radius: 30px; }
.reading-page .figure-phone .phone-frame img { border-radius: 27px; }
.reading-page .figure-phone figcaption { margin: 0; max-width: 25ch; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; text-align: left; text-wrap: pretty; }
.reading-page .audience-stage { max-width: 1160px; margin: 0 auto 72px; padding: 58px clamp(36px, 8vw, 120px); gap: 64px; }
.reading-page .audience-stage .phone-frame { --phone-w: 280px; width: min(280px, 100%); border-radius: 34px; }
.reading-page .audience-stage .phone-frame img { border-radius: 31px; }
.reading-page .audience-stage figcaption { font-size: clamp(24px, 3vw, 40px); line-height: 1.2; letter-spacing: -.03em; color: var(--ink); }

/* ---------------------------------------------------------------- questions */

.article-faq { margin-top: 96px; padding-block: 64px 8px; border-top: 1px solid var(--line); }
.article-faq h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.045em; }
.article-faq .section-index { color: var(--muted); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .article-header,
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-header > *,
  .article-layout > .article-body,
  .toc { grid-column: 1; }
  .article-header, .article-layout { max-width: 720px; margin-inline: auto; }
  .toc {
    grid-row: auto;
    position: static;
    max-height: none;
    margin-bottom: 40px;
    padding: 12px 0;
    border-block: 1px solid var(--line);
    border-radius: 0;
  }
  .toc ol { border-left: 0; }
  .toc a { margin-left: 0; padding: 6px 0; border-left: 0; }
  .toc.is-enhanced .toc-title { display: none; }
  .toc ol { padding-block: 10px 14px; }
  .toc a[aria-current="location"] { border-left: 0; padding-left: 0; }
  .reading-page .article-header { max-width: 840px; }
  .reading-page .article-layout { padding-top: 0; border-top: 0; }
  .reading-page .article-header h1 { font-size: clamp(44px, 6.4vw, 68px); }
}

@media (max-width: 700px) {
  .article { padding-block: 12px 72px; }
  .reading-page .article-header { padding-bottom: 32px; }
  .reading-page .article-header .breadcrumb { margin-bottom: 30px; }
  .reading-category { font-size: 12px; margin-bottom: 18px; }
  .reading-page .article-header h1 { font-size: clamp(38px, 10.5vw, 58px); letter-spacing: -.05em; }
  .reading-page .article-lede { font-size: 18px; margin-top: 24px; }
  .reading-page .article-header .article-meta { margin-top: 24px; }
  .article-header { padding-bottom: 36px; }
  .article-header .breadcrumb { margin-bottom: 26px; }
  .article-header h1 { font-size: clamp(36px, 10vw, 48px); letter-spacing: -.045em; }
  .article-lede { font-size: 18px; margin-top: 20px; }
  .article-body { font-size: 17px; line-height: 1.72; }
  .article-body h2 { margin-top: 56px; }
  .article-body h3 { margin-top: 36px; font-size: 20px; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
  .facts dd { padding-top: 4px; }
  .callout { padding: 18px 20px; }
  .scenario { padding: 22px 20px; font-size: 16px; }
  .steps > li { padding-left: 52px; }
  .figure { margin: 36px 0; }
  .reading-page .figure-phone { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px 26px; border-radius: 18px; }
  .reading-page .figure-phone .phone-frame { --phone-w: 220px; width: min(220px, 100%); }
  .reading-page .figure-phone figcaption { max-width: 28ch; margin-inline: auto; font-size: 18px; text-align: center; }
  .reading-page .audience-stage { margin-bottom: 44px; }
  .reading-page .audience-stage figcaption { font-size: 24px; }
  .table-wrap { padding: 18px; border-radius: 12px; }
  .article-faq { margin-top: 72px; padding-top: 48px; }
}