/* Website typography: one source for both languages, pages and viewport sizes.
   Load after page CSS. Color tokens come from design/colors.json, unchanged.
   Enable with .site-typography on body; never apply to the product workbench. */
.site-typography {
  --site-type-section: 3rem;
  --site-type-faq-title: 2.1875rem;
  --site-type-lead: 1.125rem;
  --site-type-body: 1rem;
  --site-type-question: 1.0625rem;
  --site-type-label: .875rem;
  --site-type-ui: .9375rem;
  --site-type-caption: .875rem;
  --site-leading-heading: 1.3;
  --site-leading-body: 1.8;
  --site-leading-label: 1.6;
  --site-text: var(--ink);
  --site-text-secondary: var(--muted);
  --site-text-meta: var(--subtle);
  --site-text-accent: var(--accent-ink);
  font-size: var(--site-type-body);
  color: var(--site-text);
  line-height: var(--site-leading-body);
}
.site-typography:lang(en) { --site-leading-body: 1.7; }
.site-typography .site-type-body { font-size: var(--site-type-body); line-height: var(--site-leading-body); color: var(--site-text); }
.site-typography .site-type-label { font-size: var(--site-type-label); line-height: var(--site-leading-label); color: var(--site-text-secondary); }
.site-typography .site-type-caption { font-size: var(--site-type-caption); line-height: var(--site-leading-label); color: var(--site-text-meta); }
.site-typography .site-type-lead { font-size: var(--site-type-lead); line-height: var(--site-leading-body); color: var(--site-text-secondary); }
.site-typography .site-type-section { font-size: var(--site-type-section); line-height: var(--site-leading-heading); font-weight: 600; color: var(--site-text); }
.site-typography .site-amount { white-space: nowrap; }

/* The same FAQ component on home and pricing. No page-specific type scale. */
.site-typography :is(.faq, .faq-section) { width: min(840px, calc(100% - 96px)); max-width: none; margin-inline: auto; }
.site-typography :is(.faq, .faq-section) h2.section-heading,
.site-typography :is(.faq, .faq-section) h2 {
  font-size: var(--site-type-faq-title); line-height: 1.4; font-weight: 550;
  letter-spacing: -.025em; color: var(--site-text); text-align: center; margin-bottom: 34px;
}
.site-typography :is(.faq, .faq-section) details { border-bottom: 1px solid var(--line); }
.site-typography :is(.faq, .faq-section) summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 2px; font-size: var(--site-type-question); line-height: 1.6;
  font-weight: 400; color: var(--site-text); list-style: none; cursor: pointer;
}
.site-typography :is(.faq, .faq-section) summary::after {
  content: "+"; flex: none; width: 16px; text-align: center;
  font-size: 22px; line-height: 1; font-weight: 300; color: var(--site-text-secondary);
}
.site-typography :is(.faq, .faq-section) details[open] summary::after { content: "−"; }
.site-typography :is(.faq, .faq-section) summary > span[aria-hidden="true"] { display: none; }
.site-typography :is(.faq, .faq-section) details p {
  margin: 0; padding: 0 35px 24px 2px;
  font-size: var(--site-type-body); line-height: 1.95; color: var(--site-text-secondary);
}

/* Shared controls, pricing conditions and footer. Navigation lives in website/assets/navigation.css. */

.site-typography :is(.period-switch button, .annual-note, .price > span, .recommend-label,
  .max-service .eyebrow, .availability, .plan-description, .plan-list, .plan-metrics span,
  .site-footer > p, .footer-links, .ending .trial-terms, .closing-terms) { font-size: var(--site-type-label); }
.site-typography :is(.annual-note, .price > span, .plan-description, .plan-metrics span,
  .availability, .site-footer > p) { color: var(--site-text-secondary); }
.site-typography :is(.service-intro p, .service-list p, .closing-copy, .ending > p) { font-size: var(--site-type-body); line-height: var(--site-leading-body); }
.site-typography :is(.closing, .ending) h2 { text-wrap: balance; }
.site-typography .period-switch button { padding-inline: 9px; }
.site-typography .plan-heading { flex-wrap: wrap; }
.site-typography .site-footer { white-space: normal; }
.site-typography .footer-links { flex-wrap: wrap; }

/* Homepage: large headings stay expressive; supporting copy stays readable. */
.site-typography .lower-page .home-section:not(.faq-section) .section-heading {
  font-size: var(--site-type-section); line-height: var(--site-leading-heading); color: var(--site-text);
}
.site-typography .lower-page .section-copy { font-size: var(--site-type-lead); line-height: var(--site-leading-body); color: var(--site-text-secondary); }
.site-typography .lower-page .section-kicker { font-size: var(--site-type-label); line-height: var(--site-leading-label); color: var(--site-text-accent); }
.site-typography .hero .hero-copy { color: var(--site-text-secondary); }

/* Native text inside the illustrations uses these same semantic roles. */
.site-typography .lower-page :is(.story-switch button, .story-overline, .question-step,
  .path-note, .demo-window-head, .demo-window-title, .demo-assistant, .professional-caption,
  .source-node small, .material-columns, .source-note, .inline-proof, .memory-time,
  .remembered-rule, .memory-limit > span, .memory-change, .time-label, .paper-subtitle,
  .daily-metrics span, .daily-metrics small, .review-lines > div, .scene-caption,
  .team-node-title, .contributor small, .report-overline, .shared-report p,
  .shared-comparison > div, .share-indication, .team-bottom, .mobile-demo-caption,
  .story-metrics span, .story-metrics small, .visual-title > span, .impact-rows > div,
  .plan-comparison small, .scenario-takeaway > span, .range-ends, .threshold-explanation,
  .schedule-top, .schedule-focus span, .schedule-preview > span, .reconcile-parts span,
  .reconcile-parts p, .receipt-table > div, .next-check p, .cash-chart-footer,
  .budget-equation small, .materials-delivery span, .material-checklist > div > span,
  .view-note) {
  font-size: var(--site-type-label); line-height: var(--site-leading-label);
  color: var(--site-text-secondary);
}
.site-typography .lower-page :is(.story-overline, .memory-time, .paper-subtitle, .report-overline, .mobile-demo-caption) { color: var(--site-text-meta); }
.site-typography .lower-page :is(.story-switch button[aria-selected="true"], .question-step[aria-pressed="true"], .share-indication, .remembered-rule) { color: var(--site-text-accent); }
.site-typography .lower-page :is(.demo-question, .demo-answer, .memory-bubble,
  .memory-response, .routine-prompt, .followup-question, .followup-answer,
  .schedule-preview p, .tax-context-map p, .business-lanes p, .material-checklist > div) {
  font-size: var(--site-type-body); line-height: var(--site-leading-body); color: var(--site-text);
}
.site-typography .lower-page :is(.source-node strong, .ready-material .heading,
  .contributor strong, .paper-heading, .visual-title h3, .next-check strong) {
  font-size: var(--site-type-body); line-height: var(--site-leading-label); color: var(--site-text);
}
.site-typography .lower-page :is(.plan-comparison > div, .review-lines strong, .shared-comparison strong,
  .threshold-input label, .threshold-result > span, .calculator-fields label, .calculator-result > span,
  .cash-budget > span, .mobile-action) { font-size: var(--site-type-ui); line-height: var(--site-leading-label); }
.site-typography .lower-page :is(.threshold-input label, .threshold-result > span,
  .calculator-fields label, .calculator-result > span, .cash-budget > span) { color: var(--site-text-secondary); }
.site-typography .lower-page :is(.shared-comparison strong, .memory-limit strong, .scenario-takeaway strong, .reconcile-parts strong, .schedule-top) { color: var(--site-text-accent); }
.site-typography .lower-page .review-lines .negative { color: var(--danger); }
.site-typography .lower-page :is(.story-metrics strong, .impact-rows strong,
  .threshold-explanation strong, .receipt-table strong, .demo-window-title, .demo-assistant,
  .plan-comparison strong, .shared-report h3, .business-lanes h3, .tax-context-map h3,
  .materials-delivery h3) { color: var(--site-text); }
.site-typography .lower-page :is(.threshold-result strong, .cash-budget > strong,
  .calculator-result strong, .threshold-input output, .calculator-fields output,
  .memory-response strong, .mobile-action) { color: var(--site-text-accent); }
.site-typography .lower-page .narrative-cash :is(.cash-values, .cash-periods) { fill: var(--site-text-secondary); }
.site-typography .lower-page .cash-shortfall strong { color: var(--warning); }
.site-typography .lower-page .budget-equation { color: var(--site-text); flex-wrap: wrap; }
.site-typography .lower-page .budget-equation b { color: var(--site-text-secondary); }
.site-typography .lower-page :is(.tax-context-map > div > span, .lane-index) { font-size: var(--site-type-label); color: var(--site-text-accent); }
.site-typography .cash-plot { position: relative; }
.site-typography .cash-plot :is(.cash-value-labels, .cash-period-labels) {
  font-size: var(--site-type-label); line-height: 1.4; color: var(--site-text-secondary);
  font-variant-numeric: tabular-nums;
}
.site-typography .cash-value-labels span { position: absolute; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; }
.site-typography .cash-value-labels span:last-child { transform: translate(-50%, calc(-100% - 24px)); }
.site-typography .cash-period-labels span { position: absolute; top: 92%; transform: translate(-50%, -50%); white-space: nowrap; }
.site-typography .lower-page .question-number { font-size: var(--site-type-label); color: var(--site-text-secondary); }
.site-typography .lower-page .question-step[aria-pressed="true"] .question-number { color: var(--on-accent); }
.site-typography .lower-page :is(.inline-proof svg, .team-bottom svg, .memory-response img) { flex: none; }

/* Reflow accommodates the type; do not scale labels with illustration width. */
.site-typography .source-visual { display: grid; grid-template-columns: 1fr; min-height: 0; }
.site-typography .source-nodes { grid-area: 1 / 1; }
.site-typography .source-node { min-width: 0; padding: 20px 10px; }
.site-typography .source-node :is(strong, small) { text-wrap: balance; }
.site-typography .source-lines { position: static; grid-area: 2 / 1; height: 210px; margin: 0; }
.site-typography .source-hub { grid-area: 2 / 1; align-self: start; margin: 70px auto 0; }
.site-typography .ready-material { grid-area: 3 / 1; margin-top: 0; width: min(100%, 430px); max-width: none; }
.site-typography .material-columns { gap: 16px; flex-wrap: wrap; }
.site-typography .memory-change { line-height: var(--site-leading-body); }
.site-typography .memory-response strong { white-space: nowrap; }
.site-typography .lower-page .person-avatar { font-size: var(--site-type-label); color: var(--site-text-accent); }
.site-typography .routine-paper { height: auto; min-height: 230px; }
.site-typography .team-flow {
  --team-gap: 56px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1.5fr) minmax(0, 1fr);
  gap: var(--team-gap); max-width: 1000px; margin-inline: auto;
}
.site-typography :is(.team-sources, .team-recipients) { width: max-content; max-width: 100%; }
.site-typography .team-sources { justify-self: end; }
.site-typography .team-recipients { justify-self: start; }
.site-typography :is(.team-sources, .shared-report)::after {
  right: calc((var(--team-gap) + 28px) / -2); width: 28px;
}
.site-typography :is(.team-sources, .shared-report)::before {
  right: calc((var(--team-gap) + 28px) / -2);
}
.site-typography .team-node-title { line-height: 1.7; }
.site-typography .contributor { align-items: flex-start; }
.site-typography .contributor small { line-height: 1.65; }

/* Device previews keep their physical proportions. Condense the content rather
   than stretching a phone to fit the full webpage type scale. */
.site-typography .lower-page .mobile-section { grid-template-columns: .9fr 1.1fr; gap: 66px; }
.site-typography .mobile-visual { gap: 24px; align-items: flex-end; }
.site-typography .mobile-visual .phone-mock {
  width: 240px; flex: none; min-width: 0; border-width: 5px; border-radius: 33px;
  --phone-body: clamp(.75rem, 5cqi, .875rem);
  --phone-label: clamp(.6875rem, 4.6cqi, .8125rem);
}
.site-typography .mobile-visual .secondary-phone {
  width: 208px; border-width: 4px; border-radius: 29px; margin: 0 0 4px;
}
.site-typography .lower-page .mobile-visual .phone-screen {
  height: auto; min-height: 0; aspect-ratio: 390 / 844; padding: 0 4.8cqi 2.5cqi;
  font-size: var(--phone-body); line-height: 1.5; color: var(--site-text);
}
.site-typography .phone-screen > * { flex-shrink: 0; }
.site-typography .phone-screen svg { width: 5.7cqi; height: 5.7cqi; }
.site-typography .lower-page .mobile-visual .phone-status {
  height: 11cqi; padding: 1cqi 4cqi 0; font-size: var(--phone-label);
}
.site-typography .phone-status-icons { gap: 1.2cqi; }
.site-typography .phone-status-icons svg { width: 4.8cqi; height: 3.7cqi; }
.site-typography .phone-status-icons .phone-battery { width: 6cqi; }
.site-typography .lower-page .mobile-visual .phone-toolbar {
  min-height: 11cqi; gap: 2cqi; font-size: var(--phone-label);
  white-space: normal; line-height: 1.35; text-align: center;
}
.site-typography .phone-circle { width: 9cqi; height: 9cqi; flex: none; }
.site-typography .phone-toolbar-actions { gap: 3cqi; }
.site-typography .phone-toolbar-actions svg { width: 5cqi; height: 5cqi; }
.site-typography .phone-report-content { padding: 5cqi 1cqi; }
.site-typography .lower-page .mobile-visual .phone-report-date {
  font-size: var(--phone-label); color: var(--site-text-meta); margin-bottom: 2.5cqi;
}
.site-typography .lower-page .mobile-visual .phone-report h3 {
  font-size: 8cqi; line-height: 1.35; letter-spacing: -.02em;
}
.site-typography .phone-key-metrics { grid-template-columns: 1fr 1fr; gap: 3cqi; margin: 5cqi 0 6cqi; }
.site-typography .lower-page .mobile-visual .phone-key-metric {
  padding: 3.5cqi 3cqi; border-radius: 3cqi;
  font-size: var(--phone-label); white-space: normal;
}
.site-typography .lower-page .mobile-visual .phone-key-metric strong {
  font-size: 8.5cqi; line-height: 1.4; letter-spacing: -.04em; margin: 1cqi 0; white-space: nowrap;
}
.site-typography .lower-page .mobile-visual :is(.phone-key-metric small, .phone-answer-result small) {
  font-size: var(--phone-label); margin-left: .5cqi; letter-spacing: 0;
}
.site-typography .lower-page .mobile-visual .phone-profit-chart h4 {
  font-size: var(--phone-body); line-height: 1.5; margin-bottom: 3cqi;
}
.site-typography .lower-page .mobile-visual .phone-chart-row > div:first-child {
  font-size: var(--phone-label); gap: 2cqi; margin-bottom: 2cqi;
}
.site-typography .phone-chart-row + .phone-chart-row { margin-top: 4cqi; }
.site-typography .phone-chart-track { height: 2.7cqi; border-radius: 1cqi; }
.site-typography .phone-stock-note { margin-top: 6cqi; border-radius: 3cqi; padding: 3.5cqi; }
.site-typography .lower-page .mobile-visual :is(.phone-stock-item, .phone-stock-note p) {
  font-size: var(--phone-label); line-height: 1.5;
}
.site-typography .phone-stock-item { gap: 2cqi; margin: 0 0 2cqi; }
.site-typography .lower-page .mobile-visual .phone-stock-item strong { font-size: 7cqi; white-space: nowrap; }
.site-typography .lower-page .mobile-visual .phone-stock-note p { color: var(--site-text-secondary); }
.site-typography .lower-page .mobile-visual .phone-report-followup {
  font-size: var(--phone-label); gap: 2cqi; padding: 3cqi 0; border-radius: 3cqi;
}
.site-typography .phone-home-indicator { height: 1.2cqi; width: 31cqi; margin: 4cqi auto 0; }
.site-typography .lower-page .mobile-visual .phone-question {
  font-size: var(--phone-body); line-height: 1.55; padding: 4cqi; margin-top: 7cqi;
  border-radius: 5cqi 5cqi 1.5cqi 5cqi; max-width: 95%;
}
.site-typography .lower-page .mobile-visual .phone-assistant {
  font-size: var(--phone-body); gap: 2cqi; margin: 6cqi 0 3cqi;
}
.site-typography .phone-mock .phone-assistant img { width: 7cqi; height: 7cqi; }
.site-typography .lower-page .mobile-visual .phone-answer { font-size: var(--phone-body); line-height: 1.55; }
.site-typography .lower-page .mobile-visual .phone-answer-result {
  font-size: var(--phone-label); color: var(--site-text-secondary);
  border-left-width: .7cqi; padding-left: 4cqi; margin: 5cqi 0;
}
.site-typography .lower-page .mobile-visual .phone-answer-result strong {
  font-size: 13cqi; line-height: 1.4; letter-spacing: -.04em;
}
.site-typography .lower-page .mobile-visual .phone-answer .phone-answer-note {
  font-size: var(--phone-label); line-height: 1.55; margin-bottom: 5cqi;
}
.site-typography .lower-page .mobile-visual .phone-voice-composer {
  font-size: var(--phone-label); min-height: 13cqi; padding: 0 3.3cqi; border-radius: 8cqi; gap: 2cqi;
}
.site-typography .mobile-demo-caption { bottom: -40px; }

@media (max-width: 1100px) {
  .site-typography { --site-type-section: 2.75rem; }
  .site-typography .lower-page .mobile-section { grid-template-columns: 1fr; }
  .site-typography .mobile-section .section-intro { max-width: 640px; }
  .site-typography .mobile-visual { gap: 28px; }
}

@media (max-width: 900px) {
  .site-typography .team-flow { --team-gap: 32px; }
  .site-typography :is(.team-sources, .shared-report)::after { width: 18px; right: calc((var(--team-gap) + 18px) / -2); }
  .site-typography :is(.team-sources, .shared-report)::before { right: calc((var(--team-gap) + 18px) / -2); }
  .site-typography .lower-page .question-step { min-width: 220px; width: 220px; }
}
@media (max-width: 820px) {
  .site-typography .team-flow { grid-template-columns: 1fr; max-width: 430px; gap: 28px; }
  .site-typography :is(.team-sources, .team-recipients) {
    display: flex; flex-wrap: wrap; gap: 4px 24px; width: 100%; justify-self: stretch;
  }
  .site-typography .team-node-title { width: 100%; margin-bottom: 0; }
  .site-typography .contributor { margin: 14px 0 4px; }
  .site-typography :is(.team-sources, .shared-report)::before,
  .site-typography :is(.team-sources, .shared-report)::after { display: none; }
}
@media (max-width: 760px) {
  .site-typography { --site-type-faq-title: 1.75rem; }

  .site-typography :is(.faq, .faq-section) { width: calc(100% - 40px); }
  .site-typography :is(.faq, .faq-section) h2 { margin-bottom: 20px; }
  .site-typography :is(.faq, .faq-section) summary { padding: 21px 0; gap: 18px; }
  .site-typography :is(.faq, .faq-section) details p { padding: 0 10px 24px 0; }
  .site-typography .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .site-typography .site-footer > p { order: 3; width: 100%; line-height: 1.7; }
}
@media (max-width: 640px) {
  .site-typography { --site-type-section: 2.25rem; --site-type-lead: 1rem; }
  .site-typography .hero .hero-copy { font-size: var(--site-type-body); }
  .site-typography .lower-page .story-switch button { padding: 9px 12px; }
  .site-typography .lower-page .question-step { min-width: 235px; width: 235px; }
  .site-typography .lower-page .impact-rows > div { grid-template-columns: minmax(5rem, 1fr) minmax(1rem, 1fr) max-content; gap: 8px; }
  .site-typography .lower-page .plan-comparison > div { grid-template-columns: minmax(0, 1fr) max-content; gap: 9px 12px; }
  .site-typography .plan-comparison .comparison-track { grid-row: 2; grid-column: 1 / -1; }
  .site-typography .plan-comparison strong { grid-row: 1; grid-column: 2; }
  .site-typography .source-nodes { gap: 8px; }
  .site-typography .source-node { padding: 16px 8px; }
  .site-typography .source-node strong { min-height: 3.2em; display: flex; align-items: center; justify-content: center; }
  .site-typography .source-lines { height: 175px; }
  .site-typography .source-hub { margin-top: 52px; }
  .site-typography .ready-material { padding: 16px; }
  .site-typography .material-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .site-typography .routine-paper { min-height: 0; }
  .site-typography .team-flow { grid-template-columns: 1fr; }
  .site-typography :is(.team-sources, .team-recipients) { width: 100%; justify-self: stretch; }
  .site-typography .lower-page .mobile-section { gap: 34px; }
  .site-typography .mobile-visual { flex-direction: column; align-items: center; gap: 32px; }
  .site-typography .mobile-visual .phone-mock { width: min(100%, 300px); margin: 0; }
  .site-typography .mobile-visual .secondary-phone { width: min(100%, 268px); }
  .site-typography .mobile-demo-caption { position: static; }
}
@media (max-width: 365px) {
  .site-typography { --site-type-section: 2.125rem; }

  .site-typography .home-section { margin-inline: 20px; }
  .site-typography .source-nodes { grid-template-columns: 1fr; gap: 10px; }
  .site-typography .source-node { display: grid; grid-template-columns: 26px 1fr; gap: 4px 12px; text-align: left; padding: 14px; }
  .site-typography .source-node svg { grid-row: 1 / 3; margin: 4px 0 0; }
  .site-typography .source-node strong { min-height: 0; justify-content: flex-start; }
  .site-typography .source-node small { margin: 0; }
  .site-typography .source-lines { height: 150px; }
  .site-typography .source-lines path:not(.active-path) { display: none; }
  .site-typography .source-hub { margin-top: 35px; }
}