@import url('/assets/css/navigation.css?v=20261004-1');

/* TESORIN — central typography and motion tokens
   Loaded statically in the document head after bright.css. */

:root {
  /* Shared page backgrounds. Editorial typography uses the same values. */
  --bg: #FFFFFF;
  --bg-2: #FFFFFF;
  --bg-3: #FFFFFF;
  --editorial-bg: #FFFFFF;

  /* Typography: the brand guide's two typefaces, Cormorant Garamond for
     headlines and big numbers and Inter for everything read or tapped. The
     small capital labels are Inter too, as the guide's eyebrows are. */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono: var(--sans);
  --font-sans: var(--sans);
  --font-serif: var(--serif);
  --font-brand: 'Cormorant Garamond', Georgia, serif;
  --font-mono: var(--sans);

  /* One type scale for every page but the documents, after wealthsimple.com's
     (the sans sizes are theirs at 1440px): Cormorant Garamond SemiBold for
     page titles and statements, at the brand guide's sizes (larger than
     their serif's, since Cormorant runs small), Inter Medium for section,
     feature and card headings (the rules near the end of this file), Inter
     for text, sans headings at 1.16 and text at 1.4. */
  --text-title: clamp(44px, 6.4vw, 92px);
  --text-title-leading: 1.05;
  --text-statement: clamp(52px, 9.7vw, 140px);
  --head-serif: clamp(38px, 4.45vw, 64px);
  --head-section: clamp(30px, 3.34vw, 48px);
  --head-feature: clamp(26px, 2.78vw, 40px);
  --head-card: clamp(22px, 2.23vw, 32px);
  --head-leading: 1.16;
  /* The words under a heading: a page title's lede, and the line under a
     section, feature or card's name. */
  --text-lede: clamp(20px, 1.67vw, 24px);
  --text-lede-leading: 1.4;
  --text-sub: clamp(17px, 1.39vw, 20px);
  --text-sub-leading: 1.4;
  --text-small: 16px;

  /* Brand accents. Keep every decorative color in one of these two hues. */
  --accent-olive: #737C47;
  --accent-terracotta: #BD6038;
  --accent-olive-soft: #F5F4F0;
  --accent-terracotta-soft: #F5F4F0;

  /* Compatibility aliases for existing components. */
  --lilac: var(--accent-olive);
  --lilac-deep: var(--accent-olive);
  --lilac-soft: var(--accent-olive-soft);
  --sage: var(--accent-olive);
  --sage-deep: var(--accent-olive);
  --sage-soft: var(--accent-olive-soft);
  --gold: var(--accent-olive);
  --gold-light: var(--accent-olive);
  --gold-soft: var(--accent-olive-soft);
  --clay: var(--accent-terracotta);
  --clay-deep: var(--accent-terracotta);
  --clay-soft: var(--accent-terracotta-soft);

  /* Type rhythm */
  --tracking-tight: -0.025em;
  --tracking-heading: -0.018em;
  --tracking-brand: 0.095em;

  /* Motion */
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.16, .72, .16, 1);
  --motion-fast: 180ms;
  --motion-base: 250ms;
  --motion-nav: 300ms;

  /* Centralized Otalo-style scroll reveal */
  --motion-reveal: 1.05s;
  --reveal-y: 30px;
  --reveal-delay-auto: 0ms;
  --reveal-delay-1: 0.14s;
  --reveal-delay-2: 0.28s;
  --reveal-delay-3: 0.42s;
  --reveal-delay-4: 0.56s;

  /* Home hero page-load entrance */
  --motion-hero: 900ms;
  --motion-phone: 1800ms;
  --hero-reveal-y: 24px;

  /* Appearance surfaces. */
  --theme-switch-track: #e8e7e2;
  --theme-switch-thumb: #ffffff;
  --theme-switch-border: rgba(11, 11, 11, .16);
}

html,
body {
  background: var(--bg);
}

body {
  background-image: none;
  font-family: var(--font-sans);
}

/* Keep every page on one continuous white surface. The stronger selectors
   override page-level surface colors without touching cards. */
html body main,
html body main > section,
html body main > .pg-head,
html body main > .legal-head,
html body .pg-head,
html body .legal-head,
html body .legal-glance,
html body .story,
html body .detail,
html body .feature-preview {
  background-color: var(--bg);
  background-image: none;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--tracking-heading);
}

em.serif,
.serif-em,
.serif {
  font-family: var(--font-serif);
  font-style: normal !important;
}

.legal-row-n {
  font-style: normal;
}

.mono {
  font-family: var(--font-mono);
}

.display {
  letter-spacing: var(--tracking-tight);
}

.btn .arrow,
.carousel-dot {
  transition-duration: var(--motion-base);
}

.btn,
.card {
  transition-timing-function: var(--ease-standard);
}

/* Scroll reveal: one centralized slow entrance, shared across pages. */
.reveal,
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition:
    opacity var(--motion-reveal) var(--ease-soft),
    transform var(--motion-reveal) var(--ease-soft);
}

[data-reveal][data-motion-auto] {
  transition-delay: var(--reveal-delay-auto);
  will-change: opacity, transform;
}

.reveal.d1,
[data-reveal][data-delay="1"] { transition-delay: var(--reveal-delay-1); }

.reveal.d2,
[data-reveal][data-delay="2"] { transition-delay: var(--reveal-delay-2); }

.reveal.d3,
[data-reveal][data-delay="3"] { transition-delay: var(--reveal-delay-3); }

.reveal.d4,
[data-reveal][data-delay="4"] { transition-delay: var(--reveal-delay-4); }

.reveal.visible,
[data-reveal].visible,
[data-reveal].vis {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Home hero entrance: page-load animation, separate from scroll reveal. */
@keyframes tesorinHeroRise {
  from {
    opacity: 0;
    transform: translateY(var(--hero-reveal-y));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-rise {
  opacity: 0;
  transform: translateY(var(--hero-reveal-y));
  animation: tesorinHeroRise var(--motion-hero) var(--ease-standard) both;
  will-change: opacity, transform;
}

.hero-rise.d1 { animation-delay: .38s; }
.hero-rise.d2 { animation-delay: .66s; }
.hero-rise.d3 { animation-delay: .92s; }
.hero-rise.d4 { animation-delay: 1.08s; }

.carousel-slide {
  transition: opacity var(--motion-hero) ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .reveal,
  [data-reveal],
  .hero-rise {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* Quiet ink appearance. The app screenshots keep their native presentation;
   only the website chrome and editorial surfaces change. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111111;
  --bg-2: #151515;
  --bg-3: #181818;
  --paper: #1B1B1B;
  --surface: #1B1B1B;
  --editorial-bg: #111111;
  --editorial-paper: #1B1B1B;
  --editorial-paper-soft: rgba(27, 27, 27, .78);
  --editorial-ink: #F2F2F2;
  --editorial-muted: #B8B8B8;
  --editorial-faint: #888888;
  --editorial-line: rgba(255, 255, 255, .10);
  --editorial-line-strong: rgba(255, 255, 255, .16);
  --accent-olive: #737C47;
  --accent-terracotta: #BD6038;
  --accent-olive-soft: #242424;
  --accent-terracotta-soft: #242424;
  --editorial-peach: var(--accent-terracotta);
  --editorial-peach-soft: var(--accent-terracotta-soft);
  --editorial-gold: var(--accent-olive);
  --editorial-shadow: 0 24px 62px -42px rgba(0, 0, 0, .74);
  --editorial-shadow-soft: 0 16px 44px -32px rgba(0, 0, 0, .64);
  --ink: #F2F2F2;
  --ink-2: #C7C7C7;
  --ink-3: #999999;
  --ink-4: #737373;
  --ink-5: #5A5A5A;
  --hair: rgba(255, 255, 255, .10);
  --hair-2: rgba(255, 255, 255, .16);
  --bd: rgba(255, 255, 255, .10);
  --bd-md: rgba(255, 255, 255, .17);
  --lilac: var(--accent-olive);
  --lilac-deep: var(--accent-olive);
  --lilac-soft: var(--accent-olive-soft);
  --clay: var(--accent-terracotta);
  --clay-deep: var(--accent-terracotta);
  --clay-soft: var(--accent-terracotta-soft);
  --sage: var(--accent-olive);
  --sage-deep: var(--accent-olive);
  --sage-soft: var(--accent-olive-soft);
  --gold: var(--accent-olive);
  --gold-light: var(--accent-olive);
  --gold-soft: var(--accent-olive-soft);
  --umber: var(--accent-olive);
  --site-card-bg: linear-gradient(180deg, rgba(27, 27, 27, .98), rgba(24, 24, 24, .94));
  --site-card-border: rgba(255, 255, 255, .105);
  --site-card-shadow: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 22px 52px -36px rgba(0, 0, 0, .72);
  --site-card-shadow-hover: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 28px 62px -34px rgba(0, 0, 0, .82);
  --site-compact-shadow: 0 16px 38px -28px rgba(0, 0, 0, .74);
  --theme-switch-track: #262626;
  --theme-switch-thumb: var(--accent-terracotta);
  --theme-switch-border: rgba(255, 255, 255, .14);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body main,
html[data-theme="dark"] body main > section,
html[data-theme="dark"] body main > .pg-head,
html[data-theme="dark"] body main > .legal-head,
html[data-theme="dark"] body .pg-head,
html[data-theme="dark"] body .legal-head,
html[data-theme="dark"] body .legal-glance,
html[data-theme="dark"] body .story,
html[data-theme="dark"] body .detail,
html[data-theme="dark"] body .feature-preview {
  background-color: var(--bg);
  color: var(--ink);
}

html[data-theme="dark"] .brand-mark { filter: invert(1) brightness(1.12); }
html[data-theme="dark"] .nav-links a { color: var(--ink-2); }
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.on { color: var(--ink); }
html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .check {
  color: #111111;
}
html[data-theme="dark"] .nav-cta:hover,
html[data-theme="dark"] .btn-primary:hover {
  background: var(--accent-olive);
  color: #111111;
}
html[data-theme="dark"] .btn-ghost:hover { color: #111111; }
html[data-theme="dark"] .panel-ink .btn-primary,
html[data-theme="dark"] .panel-ink .btn-primary:hover,
html[data-theme="dark"] .panel-ink .btn-ghost:hover { color: #111111; }

/* These sections are deliberately ink panels in both appearances. Avoid
   deriving their background from --ink: that token becomes light in dark
   mode and would wash the panel out beneath its light typography. */
html[data-theme="dark"] .panel-ink,
html[data-theme="dark"] .legal-cta,
html[data-theme="dark"] .about-card {
  background-color: #0B0B0B;
  color: #f5f2ec;
}
html[data-theme="dark"] .panel-ink .lede,
html[data-theme="dark"] .legal-cta p { color: rgba(245, 242, 236, .76) !important; }
html[data-theme="dark"] .panel-ink .micro { color: rgba(245, 242, 236, .62) !important; }
html[data-theme="dark"] .panel-ink h1,
html[data-theme="dark"] .panel-ink h2,
html[data-theme="dark"] .panel-ink h3,
html[data-theme="dark"] .panel-ink h4,
html[data-theme="dark"] .legal-cta h2 { color: #f5f2ec; }
html[data-theme="dark"] .panel-ink .btn-primary,
html[data-theme="dark"] .panel-ink .btn-primary:hover {
  background: #f5f2ec;
  border-color: #f5f2ec;
}
html[data-theme="dark"] .panel-ink .btn-ghost {
  border-color: rgba(245, 242, 236, .32);
  color: #f5f2ec;
}

/* Monochrome artwork turns paper-white on the ink theme. Store badges are
   product marks, not editorial art, so they retain their official artwork. */
html[data-theme="dark"] .editorial-sketch,
html[data-theme="dark"] img[src$=".svg"] {
  filter: brightness(0) invert(1);
}
html[data-theme="dark"] .footer-store-badge img { filter: none; }
html[data-theme="dark"] body:has(.about-reveal) .pg-head .hero-grid::after,
html[data-theme="dark"] body:has(.about-reveal) .story-grid > div:first-child::after,
html[data-theme="dark"] .detail .detail-row > div:first-child::after,
html[data-theme="dark"] .safety-head .container::after,
html[data-theme="dark"] body:has(.compare-title) .pg-head .container::after,
html[data-theme="dark"] #why-paid .container::after {
  filter: brightness(0) invert(1);
}

/* Watercolor art keeps its colour on the ink theme. theme-init.js swaps each
   image to its light-pencil twin in assets/watercolor/dark/ instead. */
html[data-theme="dark"] img[src^="/assets/watercolor/"] {
  filter: none;
}
html[data-theme="dark"] body:has(.faq-wrap) .pg-head .container::after {
  background-image: url('/assets/watercolor/dark/community.svg');
}
html[data-theme="dark"] .channel-icon,
html[data-theme="dark"] .section-nav-icon,
html[data-theme="dark"] .privacy-service-icon,
html[data-theme="dark"] .privacy-contact-icon,
html[data-theme="dark"] .footer-social-icon { color: #fff !important; }

html[data-theme="dark"] .hero {
  border-color: rgba(255, 255, 255, .08);
  background: #171717;
  box-shadow: 0 34px 82px -62px rgba(0, 0, 0, .86);
}
html[data-theme="dark"] .hero h1 em.serif { color: var(--accent-olive); }
html[data-theme="dark"] .home-type-cursor__bar { background: var(--accent-olive); }
html[data-theme="dark"] .home-arrow-particle { background: var(--accent-olive); }
html[data-theme="dark"] .home-scroll-cue,
html[data-theme="dark"] .home-scroll-cue:hover { color: #fff; }
html[data-theme="dark"] .home-review-card {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(27, 27, 27, .82);
  box-shadow: 0 22px 50px -34px rgba(0, 0, 0, .82);
  color: var(--ink);
}
html[data-theme="dark"] .home-review-title { color: var(--ink); }
html[data-theme="dark"] .home-review-body { color: rgba(241, 238, 230, .70); }
html[data-theme="dark"] .home-review-meta { color: rgba(241, 238, 230, .46); }
html[data-theme="dark"] .phone-scene::before { background: rgba(115, 124, 71, .07); }

html[data-theme="dark"] .nav-mobile-panel.open {
  background: linear-gradient(180deg, #111111 0%, #171717 58%, #1B1B1B 100%);
  color: var(--ink);
}
html[data-theme="dark"] .nav-mobile-panel-links > a,
html[data-theme="dark"] .nav-mobile-panel-links > a:link,
html[data-theme="dark"] .nav-mobile-panel-links > a:visited {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
html[data-theme="dark"] .nav-mobile-panel-links > a.on {
  border-color: rgba(189, 96, 56, .20);
  background: rgba(189, 96, 56, .10);
}
html[data-theme="dark"] .nav-mobile-get,
html[data-theme="dark"] .nav-mobile-get:link,
html[data-theme="dark"] .nav-mobile-get:visited {
  background: var(--ink);
  color: #111111;
  -webkit-text-fill-color: #111111;
}
html[data-theme="dark"] .nav-mobile-get .arrow {
  background: #111111;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

html[data-theme="dark"] .nav-inner,
html[data-theme="dark"] .nav.nav-open .nav-inner {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(24, 24, 24, .90);
  box-shadow: 0 16px 36px -28px rgba(0, 0, 0, .82), 0 1px 0 rgba(255, 255, 255, .035) inset;
}
@media (min-width: 1101px) {
  html[data-theme="dark"] .nav-inner,
  html[data-theme="dark"] .nav.nav-open .nav-inner { background: transparent; border-color: transparent; box-shadow: none; }
}
html[data-theme="dark"] .nav-burger {
  border-color: rgba(255, 255, 255, .12);
  background: #202020;
  color: var(--ink);
}
html[data-theme="dark"] .nav-burger.open { background: var(--ink); color: #111111; }

html[data-theme="dark"] .billing-toggle,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .faq-nav,
html[data-theme="dark"] .feature-detail-layout > .feature-nav,
html[data-theme="dark"] .q,
html[data-theme="dark"] .safety-note {
  border-color: var(--site-card-border);
  background: var(--paper);
}
html[data-theme="dark"] .price-card:hover { border-color: rgba(255, 255, 255, .18); }
html[data-theme="dark"] .billing-toggle button.is-active { color: #111111; }

html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] thead th,
html[data-theme="dark"] tbody td,
html[data-theme="dark"] tbody td:first-child {
  background: var(--paper);
}
html[data-theme="dark"] tbody td.ours { background: rgba(115, 124, 71, .34); }
html[data-theme="dark"] thead th.ours { background: #EBE8DF; color: #111111; }
html[data-theme="dark"] thead th.ours .nm { color: #111111; }

html[data-theme="dark"] .footer,
html[data-theme="dark"] .footer-inner.footer-inner--minimal,
html[data-theme="dark"] .footer-meta {
  --footer-green: var(--ink);
  --footer-orange: var(--accent-terracotta);
  background: var(--bg);
}
html[data-theme="dark"] .footer-meta { border-top-color: rgba(242, 242, 242, .13); color: rgba(242, 242, 242, .62); }
html[data-theme="dark"] .footer-disclaimer,
html[data-theme="dark"] .footer-copyright { color: rgba(242, 242, 242, .62); }
html[data-theme="dark"] .footer-editorial-art img { filter: brightness(0) invert(1); }

/* The legal pages retain their deliberately plain document typography. */
html[data-theme="dark"] body.terms-document,
html[data-theme="dark"] body.terms-document main,
html[data-theme="dark"] body.terms-document .footer {
  background: #111111 !important;
  color: #f0ede5 !important;
}
html[data-theme="dark"] body.terms-document .terms-document-title,
html[data-theme="dark"] body.terms-document .terms-document-title strong,
html[data-theme="dark"] body.terms-document .terms-document-section h2 {
  color: #f0ede5 !important;
}
html[data-theme="dark"] body.terms-document .terms-document-section h3 { color: #d8d5cd !important; }
html[data-theme="dark"] body.terms-document .terms-document-section h4 { color: #cbc8c0 !important; }
html[data-theme="dark"] body.terms-document .terms-document-section p,
html[data-theme="dark"] body.terms-document .terms-document-section li,
html[data-theme="dark"] body.terms-document .terms-document-meta { color: #aaa8a1 !important; }
html[data-theme="dark"] body.terms-document .terms-document-section a,
html[data-theme="dark"] body.terms-document .terms-document-meta a,
html[data-theme="dark"] body.terms-document .terms-document-provider strong,
html[data-theme="dark"] body.terms-document .terms-document-section strong { color: #d0cdc5 !important; }
html[data-theme="dark"] body.terms-document .terms-document-section + .terms-document-section,
html[data-theme="dark"] body.terms-document .terms-document-note,
html[data-theme="dark"] body.terms-document .safety-document-index,
html[data-theme="dark"] body.terms-document .safety-document-index a {
  border-color: #303030 !important;
}
html[data-theme="dark"] body.terms-document .safety-document-index a { color: #b8b5ae !important; }
html[data-theme="dark"] body.terms-document .safety-document-index a:hover,
html[data-theme="dark"] body.terms-document .safety-document-index a:focus-visible { color: #f0ede5 !important; }
html[data-theme="dark"] body.privacy-document .privacy-summary-heading,
html[data-theme="dark"] body.privacy-document .privacy-service h3,
html[data-theme="dark"] body.privacy-document .privacy-contact-card strong { color: #ddd9d1 !important; }
html[data-theme="dark"] body.privacy-document .privacy-service p,
html[data-theme="dark"] body.privacy-document .privacy-service strong { color: #aaa8a1 !important; }
html[data-theme="dark"] body.privacy-document .privacy-service-icon,
html[data-theme="dark"] body.privacy-document .privacy-contact-icon { color: #bcb9b1; }
html[data-theme="dark"] body.privacy-document .privacy-policy-content,
html[data-theme="dark"] body.privacy-document .privacy-contact-section { border-color: #363636; }

@media (prefers-reduced-motion: no-preference) {
  body,
  main,
  .hero,
  .card,
  .home-review-card,
  .footer,
  .footer-meta,
  .price-card,
  .billing-toggle,
  .faq-nav,
  .feature-nav {
    transition: background-color .34s ease, color .28s ease, border-color .28s ease, box-shadow .34s ease;
  }
}

/* --------------------------------------------------------------------------
   Headings: Cormorant Garamond SemiBold, tightened 1% as the brand guide's
   display line is, on every page, the documents and the changelog too; sans
   headings use Inter's display cut (optical size 30). Apricity's page keeps
   its own Newsreader and Jost.
   -------------------------------------------------------------------------- */
body.apricity-page {
  --serif: 'Newsreader', Georgia, serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  font-family: var(--sans);
}

html body :is(h1, h2, h3, h4, h5, .display, .h-xl, .h-lg, .h-md, .h-sm, em.serif, .serif-em) {
  font-variation-settings: 'opsz' 30;
}

html body :is(h1, h2, .display, .h-xl, .h-lg) {
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

html body :is(h1, h2, .display, .h-xl, .h-lg) :is(em, .serif-em) {
  font-weight: inherit !important;
}

html body :is(h3, h4, h5, .h-md, .h-sm, .plan-card h2, .cmp-hub__card h2) {
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
}

html body.apricity-page :is(h1, h2, h3, h4, h5, .display, .h-xl, .h-lg, .h-md, .h-sm, .plan-card h2) {
  font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   Headings and text on the type scale (the tokens at the top of this file),
   after wealthsimple.com: section, feature and card headings in Inter Medium,
   as their The Future headings are, with an optional quieter second half
   (.head-quiet) in grey; FAQ heads and the pricing promise stay serif.
   Ledes are in ink and the lines under headings a step softer. Apricity,
   the documents, the changelog and the homepage keep their own type.
   -------------------------------------------------------------------------- */
html body:not(.terms-document):not(.changelog-page):not(.apricity-page) :is(
  .ms-head h2, .ms-split__text h2, .ms-cta h2, .features-group__title h2, .story__heading h2, main h2.h-xl, main h2.h-lg,
  .features-story__step h3, .story__step h3,
  .ms-card h3, .split-cell h3, .legal-card h3, .legal-body h3, .cmp-hub__title
) {
  font-family: var(--font-sans, var(--sans)) !important;
  font-weight: 500 !important;
  line-height: var(--head-leading) !important;
  letter-spacing: -.02em !important;
}

html body:not(.terms-document):not(.changelog-page):not(.apricity-page) :is(.ms-head h2, .ms-split__text h2, .ms-cta h2, .features-group__title h2, .story__heading h2, main h2.h-xl, main h2.h-lg) {
  font-size: var(--head-section) !important;
}

html body:not(.terms-document):not(.changelog-page):not(.apricity-page) :is(.features-story__step h3, .story__step h3) {
  font-size: var(--head-feature) !important;
}

html body:not(.terms-document):not(.changelog-page):not(.apricity-page) :is(.ms-card h3, .split-cell h3, .legal-card h3, .legal-body h3, .cmp-hub__title) {
  font-size: var(--head-card) !important;
}

.head-quiet {
  color: color-mix(in srgb, currentColor 52%, transparent);
}

html body:not(.terms-document):not(.changelog-page):not(.apricity-page) .ms-faq__head :is(h2, h3) {
  font-size: var(--head-serif) !important;
  line-height: var(--head-leading) !important;
}

html body.pricing-page .pricing-promise__inner h2 {
  font-size: var(--text-statement) !important;
  line-height: 1.02 !important;
}

html body:not(.terms-document):not(.changelog-page):not(.apricity-page) :is(.ms-section--hero .ms-head > p:not(.ms-eyebrow), .ms-split__text > p:not(.ms-eyebrow, .ms-definition), main > :is(.pg-head, .legal-head) .lede, .box .lead, .nf-lead) {
  color: var(--ink) !important;
}

html body:not(.terms-document):not(.changelog-page):not(.apricity-page) :is(.features-story__points li, .story__step > p, .ms-card > p, .ms-faq__head > p, .split-cell p, .legal-card p, .legal-body p, .legal-list li, .legal-intro) {
  color: color-mix(in srgb, var(--ink) 80%, transparent) !important;
}

/* --------------------------------------------------------------------------
   Buttons and the bar, after wealthsimple.com: a flat ink pill for the main
   action, a thin outlined pill beside it, both in Jost Medium.
   -------------------------------------------------------------------------- */
.btn {
  font-size: 16px;
}

.btn-primary {
  box-shadow: none;
}

.btn-ghost {
  border-color: currentColor;
}

.nav-links {
  font-size: 14px;
  font-weight: 500;
}

.nav-cta,
.nav .nav-login {
  font-size: 14px;
  white-space: nowrap;
}

.nav .nav-login {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px currentColor;
  font-weight: 500;
}