/* Website accents only. Native app tokens and original captures stay intact. */
body.site-page {
  --feature-sage: #CEDCC4;
  --feature-terra: #E8B79A;
  --feature-terra-ink: #79361F;
  --feature-blue: #C7D9E8;
  --feature-blue-ink: #284A63;
  --feature-forest: #2E4232;
  --feature-cream: #F7F2E9;
  --feature-ink: #1B211C;
}

/* Emphasize only the worldwide benchmark's number and time units. */
body.site-page .social-average {
  max-width: 390px;
  margin-block: 25px 0;
  padding: 17px 20px;
  border: 0;
  border-left: 2px solid var(--time-accent);
  border-radius: 0 8px 8px 0;
  background: var(--time-panel);
  color: var(--feature-ink);
}
body.site-page .social-average .average-label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--feature-ink);
}
body.site-page .social-average > strong {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-block: 12px 10px;
  font-size: clamp(3rem, 5vw, 4.25rem);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.1;
  color: var(--time-muted);
}
body.site-page .social-average > strong > span {
  white-space: normal;
  color: #C8372D;
}
body.site-page .social-average small {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--time-muted);
}
body.site-page .social-average .average-context,
body.site-page .social-average .average-source {
  font-size: 14px;
  line-height: 1.65;
  color: var(--time-muted);
}
body.site-page .social-average .average-source {
  margin-top: 9px;
}
body.site-page .social-average .average-source a { color: var(--time-accent); }
body.site-page .social-average a:focus-visible {
  outline: 2px solid var(--time-accent);
  outline-offset: 4px;
}
@media (max-width: 760px) {
  body.site-page .social-average { max-width: none; }
}
@media (max-width: 460px) {
  body.site-page .social-average { padding: 16px 18px; }
}

body.site-page .hero-shape-sage {
  background: linear-gradient(145deg, #CEDCC4, #DDE7D6);
}
body.site-page .hero-shape-sand {
  background: linear-gradient(125deg, #EED5BF, #F7F2E9 85%);
}

body.site-page .product-card-block,
body.site-page .limits-card { background: #EDE6DA; }
body.site-page .product-card-focus,
body.site-page .boundary-card { background: var(--feature-sage); }
body.site-page .product-card-reset { background: var(--feature-terra); }
body.site-page .stats-card { background: var(--feature-blue); }
body.site-page .product-card { border-color: #2E423226; }
body.site-page .product-card .product-description { color: var(--feature-ink); }
body.site-page .product-reels-row {
  background: #FCE4E1;
  border-color: #C8372D;
  color: #A12620;
}
body.site-page .product-reels-row::after { background: #C8372D; }
body.site-page .home-app-details { margin-top: 24px; padding-bottom: 0; }
body.site-page .home-app-details details { scroll-margin-top: 105px; }
body.site-page .home-limits-copy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
body.site-page .home-limits-copy h3 { font-size: 20px; line-height: 1.4; margin-bottom: 10px; }
body.site-page .home-limits-copy p { font-size: 16px; line-height: 1.65; color: var(--feature-ink); }
body.site-page .home-app-screen-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #2E423226; font-size: 14px; line-height: 1.6; }
body.site-page .home-app-screen-links a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  body.site-page .home-limits-copy { grid-template-columns: 1fr; gap: 20px; }
}
body.site-page .product-card-focus .product-ring-track { stroke: #2E423233; }
body.site-page .product-card-focus .product-timer > span { color: var(--feature-forest); }
body.site-page .product-card-reset .product-link,
body.site-page .product-card-reset h3 { color: var(--feature-terra-ink); }
body.site-page .product-card-reset .product-activity {
  background: #F6DAC7;
  border-color: #79361F33;
  color: var(--feature-terra-ink);
}
body.site-page .product-card-reset .product-activity > p { color: var(--feature-ink); }
body.site-page .product-card-reset .product-learn-tabs button {
  color: var(--feature-terra-ink);
  border-color: #79361F66;
}
body.site-page .product-card-reset .product-learn-tabs button[aria-pressed="true"] {
  background: var(--feature-terra-ink);
  border-color: var(--feature-terra-ink);
  color: var(--feature-cream);
}
body.site-page .product-card-reset:has([data-card-kind="brain"][aria-pressed="true"]) {
  background: var(--feature-blue);
}
body.site-page .product-card-reset:has([data-card-kind="brain"][aria-pressed="true"]) :is(h3, .product-link, .product-activity, .product-learn-tabs button) {
  color: var(--feature-blue-ink);
}
body.site-page .product-card-reset:has([data-card-kind="brain"][aria-pressed="true"]) .product-activity {
  background: #DDE8F0;
  border-color: #284A6333;
}
body.site-page .product-card-reset:has([data-card-kind="brain"][aria-pressed="true"]) .product-learn-tabs button {
  border-color: #284A6366;
}
body.site-page .product-card-reset:has([data-card-kind="brain"][aria-pressed="true"]) .product-learn-tabs button[aria-pressed="true"] {
  background: var(--feature-blue-ink);
  border-color: var(--feature-blue-ink);
  color: var(--feature-cream);
}
body.site-page .stats-card :is(h3, .card-number, .stats-art) { color: var(--feature-blue-ink); }
body.site-page .stats-card .stats-art i { background: var(--feature-blue-ink); }
body.site-page .feature-card .feature-card-copy > p { color: var(--feature-ink); }
body.site-page .library-grid article[data-feature-tone="focus"] { background: var(--feature-sage); }
body.site-page .library-grid article[data-feature-tone="learn"] { background: var(--feature-terra); }
body.site-page .library-grid article[data-feature-tone="brain"] { background: var(--feature-blue); }
body.site-page .library-grid article p { color: var(--feature-ink); }
body.site-page .library-grid article[data-feature-tone="learn"] :is(strong, h3) { color: var(--feature-terra-ink); }
body.site-page .library-grid article[data-feature-tone="brain"] :is(strong, h3) { color: var(--feature-blue-ink); }

body.site-page .page-cta,
body.site-page .beta-card {
  background: var(--feature-forest);
  border-color: var(--feature-forest);
  color: var(--feature-cream);
}
body.site-page .page-cta h2,
body.site-page .page-cta p,
body.site-page .beta-card h2,
body.site-page .beta-card h2 > span,
body.site-page .beta-card p:not(.eyebrow):not(.beta-release-note),
body.site-page .beta-card .eyebrow,
body.site-page .beta-card .beta-release-note,
body.site-page .beta-card .beta-install h3,
body.site-page .beta-card .beta-install ol,
body.site-page .beta-card .beta-qr-copy h3,
body.site-page .beta-card .beta-qr-copy a,
body.site-page .beta-card .beta-art > span,
body.site-page .beta-card .text-link { color: var(--feature-cream); }
body.site-page .page-cta .scroll-highlight::after { background: var(--feature-terra); }
body.site-page .page-cta .button-dark,
body.site-page .beta-card .button-dark {
  background: var(--feature-cream);
  border-color: var(--feature-cream);
  color: var(--feature-forest);
}
body.site-page .page-cta .button-dark:hover,
body.site-page .beta-card .button-dark:hover { background: #E3EAD9; }
body.site-page .page-cta .button:focus-visible,
body.site-page .beta-card :is(a, button):focus-visible { outline-color: var(--feature-terra); }
body.site-page .beta-card :is(.beta-install, .beta-qr) { border-top-color: #F7F2E94D; }
body.site-page .beta-card .status-dot { background: var(--feature-sage); }
body.site-page .beta-card .beta-art rect { fill: var(--feature-sage); }
body.site-page .beta-card .beta-art path { fill: var(--feature-forest); }

/* Colour around the interactive phone follows the feature being explored. */
body.site-page .native-demo-section {
  position: relative;
  isolation: isolate;
  --demo-wash: var(--feature-sage);
}
body.site-page .native-demo-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 10% -12px 5% 34%;
  border-radius: 48% 52% 42% 58% / 38% 42% 58% 62%;
  background: var(--demo-wash);
  filter: blur(24px);
  opacity: .75;
  transition: background-color .45s ease;
}
body.site-page .native-demo-section:has(#native-nav-apps[aria-selected="true"]) { --demo-wash: #EDE6DA; }
body.site-page .native-demo-section:has(#native-nav-home[aria-selected="true"]) { --demo-wash: var(--feature-terra); }
body.site-page .native-demo-section:has(#native-nav-stats[aria-selected="true"]),
body.site-page .native-demo-section:has(#native-screen [data-native-action="sequence"], #native-screen .native-sequence, #native-screen .native-game-result, #native-screen .native-exercise-help) { --demo-wash: var(--feature-blue); }
body.site-page .native-demo-shortcuts button[data-native-shortcut="apps"] { background: #EDE6DA; }
body.site-page .native-demo-shortcuts button[data-native-shortcut="work"] { background: var(--feature-sage); }
body.site-page .native-demo-shortcuts button[data-native-shortcut="home"] {
  background: var(--feature-terra);
  color: var(--feature-terra-ink);
  border-color: #79361F66;
}
body.site-page .native-demo-shortcuts button[aria-pressed="true"] {
  background: var(--feature-forest);
  color: var(--feature-cream);
  border-color: var(--feature-forest);
}
body.site-page .native-demo-shortcuts button[data-native-shortcut="home"][aria-pressed="true"] {
  background: var(--feature-terra-ink);
  color: var(--feature-cream);
  border-color: var(--feature-terra-ink);
}
body.site-page .native-demo-copy > p:not(.eyebrow),
body.site-page .native-preview-caption { color: var(--feature-forest); }
@media (max-width: 850px) {
  body.site-page .native-demo-section::before { inset: 45% 0 4%; }
}
@media (prefers-reduced-motion: reduce) {
  body.site-page .native-demo-section::before { transition: none; }
}