@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-var-v51.woff2") format("woff2");
}

/* ==========================================================================
   MONEY COPILOT AI — HOME
   --------------------------------------------------------------------------
   Built from the supplied design, which is a 1586x992 composition. Every
   measurement below is taken from that image at 1:1, so the page matches it
   pixel for pixel at a 1586px viewport and holds its proportions from there.

   Design geometry, measured:
     canvas 1586 wide, content inset 48px each side  -> shell 1490
     hero copy column 48..578 (530)                  -> phone 810..1120 (310)
     insights pane 1155..1540 (385)                  -> mascot sits at 590..800
     journey rules span 77..1508, cards below them
   ========================================================================== */

:root {
  /*
   * The palette. Before this existed the sheet carried 139 colour literals --
   * 53 distinct greens, 40 blue-greys, 43 near-whites -- against the dozen
   * tokens declared here, which almost nothing used. Most of that was accident:
   * #0c7a45, #0c7f45, #0c7c46, #0d7a45, #0d7a42 and #0f7a45 are six spellings
   * of one green. Each token below is a role; the value is whichever spelling
   * the page already used most, so naming them moved nothing on screen.
   */
  /* type */
  --ink:     #0d1526;
  --ink-2:   #16233a;
  --ink-3:   #2b3a52;  /* folds 7 near-duplicates */
  --slate:   #41506b;  /* folds 8 near-duplicates */
  --muted:   #647186;
  --muted-2: #5c6b83;  /* folds 4 near-duplicates */
  --faint:   #93a3b8;
  --faint-2: #7a8798;

  /* green scale -- --green-lit is the accent, --green the deeper glyph green */
  --green-lit:    #0aa05f;  /* folds 9 near-duplicates */
  --green-mid:    #0f9455;
  --green:        #0a8a45;  /* folds 6 near-duplicates */
  --green-deep:   #037a3f;  /* folds 10 near-duplicates */
  --green-dark:   #0b6b39;
  --green-shade:  #0b3f27;
  --green-bright: #35b37e;
  --green-vivid:  #12b070;
  --green-pale:   #7fd6a8;
  --green-pale-2: #a8e6c6;
  --green-pale-3: #cbf1dd;
  --green-soft:   #23a464;
  --black-green:  #07130d;

  /* mint tints, and the hairlines drawn on them */
  --mint:        #e9f7f0;  /* folds 4 near-duplicates */
  --mint-soft:   #f1faf5;  /* folds 7 near-duplicates */
  --mint-line:   #e2f0e9;  /* folds 8 near-duplicates */
  --mint-line-2: #d9efe3;
  --mint-line-3: #cfe6da;
  --mint-line-4: #bfe6d2;

  /* neutral hairlines and page grounds */
  --line:        #e8eef1;  /* folds 9 near-duplicates */
  --line-soft:   #eef3f5;  /* folds 8 near-duplicates */
  --line-strong: #dfe6ea;
  --ground:      #fbfdfd;  /* folds 4 near-duplicates */
  --ground-2:    #f6f8f9;

  /* secondary accents: the blue the MCP affordances take, and chart colours */
  --blue:       #2f86d6;
  --blue-ink:   #1f76c8;
  --blue-soft:  #4a86c8;
  --blue-tint:  #e8f1fb;
  --blue-line:  #e2edf6;
  --blue-wash:  #f3f8fd;
  --cyan:       #1f9fc4;
  --blue-vivid: #1f7ae0;
  --amber:      #f5a623;
  --amber-soft: #f0a24a;
  --orange:     #f07c2b;

  /* official social-mark colours */
  --social-instagram: #e4405f;
  --social-threads:   #101010;
  --social-tiktok:    #010101;
  --social-linkedin:  #0a66c2;
  --social-facebook:  #1877f2;
  --social-email:     #079455;

  /* dark theme values stay named here so both themes use the same roles */
  --dark-ink:         #f4f7f5;
  --dark-ink-2:       #e5ede9;
  --dark-ink-3:       #ccd8d2;
  --dark-slate:       #b1c0b9;
  --dark-muted:       #8fa198;
  --dark-faint:       #758a80;
  --dark-green:       #3add91;
  --dark-green-lit:   #45e39a;
  --dark-green-mid:   #35d88c;
  --dark-green-deep:  #25c77b;
  --dark-blue:        #5aa7ff;
  --dark-blue-soft:   #7ab8ff;
  --dark-ground:      #07110d;
  --dark-ground-2:    #0a1611;
  --dark-surface:     #101e18;
  --dark-card:        #13231c;
  --dark-line:        #263a31;
  --dark-line-soft:   #1d3028;
  --dark-line-strong: #32483e;
  --dark-mint:        #153329;
  --dark-mint-soft:   #10271f;
  --dark-mint-line:   #234438;
  --dark-blue-tint:   #112a3c;
  --dark-blue-line:   #1d4159;
  --dark-blue-wash:   #0d1e2a;

  --surface: #ffffff;
  --surface-glass-55: rgba(255, 255, 255, .55);
  --surface-glass-72: rgba(255, 255, 255, .72);
  --surface-glass-80: rgba(255, 255, 255, .8);
  --card: #ffffff;
  --shadow-card: 0 10px 30px -18px rgba(15, 50, 40, .28);
  --shadow-lift: 0 18px 44px -22px rgba(15, 50, 40, .34);
  --radius: 16px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: var(--dark-ink);
  --ink-2: var(--dark-ink-2);
  --ink-3: var(--dark-ink-3);
  --slate: var(--dark-slate);
  --muted: var(--dark-muted);
  --muted-2: var(--dark-muted);
  --faint: var(--dark-faint);
  --faint-2: var(--dark-faint);
  --green: var(--dark-green);
  --green-lit: var(--dark-green-lit);
  --green-mid: var(--dark-green-mid);
  --green-deep: var(--dark-green-deep);
  --green-dark: var(--dark-green-deep);
  --blue: var(--dark-blue);
  --blue-ink: var(--dark-blue);
  --blue-soft: var(--dark-blue-soft);
  --blue-vivid: var(--dark-blue);
  --cyan: var(--dark-blue);
  --ground: var(--dark-ground);
  --ground-2: var(--dark-ground-2);
  --surface: var(--dark-surface);
  --card: var(--dark-card);
  --line: var(--dark-line);
  --line-soft: var(--dark-line-soft);
  --line-strong: var(--dark-line-strong);
  --mint: var(--dark-mint);
  --mint-soft: var(--dark-mint-soft);
  --mint-line: var(--dark-mint-line);
  --mint-line-2: var(--dark-mint-line);
  --mint-line-3: var(--dark-mint-line);
  --social-threads: #fff;
  --social-tiktok: #fff;
  --mint-line-4: var(--dark-mint-line);
  --blue-tint: var(--dark-blue-tint);
  --blue-line: var(--dark-blue-line);
  --blue-wash: var(--dark-blue-wash);
  --surface-glass-55: rgba(16, 30, 24, .72);
  --surface-glass-72: rgba(16, 30, 24, .82);
  --surface-glass-80: rgba(16, 30, 24, .88);
  --shadow-card: 0 14px 36px -22px rgba(0, 0, 0, .75);
  --shadow-lift: 0 20px 48px -24px rgba(0, 0, 0, .82);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--slate);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The page sits on a white ground with a mint wash that pools behind the phone
   and fades out to the left, which is what the design's background does. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 620px at 68% 6%, #e3f7f0 0%, rgba(227, 247, 240, 0) 62%),
    radial-gradient(900px 700px at 96% 34%, #e8f8f3 0%, rgba(232, 248, 243, 0) 66%),
    linear-gradient(180deg, #fdfefe 0%, #f6fbfa 52%, #fbfdfd 100%);
}

html[data-theme="dark"] body::before {
  background:
    radial-gradient(760px 620px at 68% 6%, rgba(37, 199, 123, .12) 0%, rgba(37, 199, 123, 0) 62%),
    radial-gradient(900px 700px at 96% 34%, rgba(90, 167, 255, .08) 0%, rgba(90, 167, 255, 0) 66%),
    linear-gradient(180deg, var(--dark-ground) 0%, var(--dark-ground-2) 52%, var(--dark-ground) 100%);
}

h1, h2, h3, h4 { margin: 0; font-family: Roboto, system-ui, sans-serif; color: var(--ink); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.shell { width: min(1490px, 100% - 96px); margin-inline: auto; }

/* A single branded rule separates each top-level content section. Keeping the
   divider on the following section avoids drawing an extra edge above the hero
   or below the FAQ, while the transparent ends let it fade into the page wash. */
main > section + section {
  position: relative;
  margin-top: 32px;
}
main > section + section::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: min(1490px, calc(100% - 96px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--mint-line-3) 8%,
    var(--green-pale) 50%,
    var(--mint-line-3) 92%,
    transparent 100%
  );
  pointer-events: none;
}

/* The two green buttons share one fill: header CTA and hero CTA are the same
   gradient in the design, measured #037a3f -> #0aa05f left to right. */
.btn-green {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(96deg, var(--green-deep) 0%, var(--green-lit) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 12px 26px -14px rgba(4, 122, 63, .75);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-green:hover { transform: translateY(-1px); box-shadow: 0 18px 32px -16px rgba(4, 122, 63, .8); filter: saturate(1.06); }

/* ==========================================================================
   HEADER
   ========================================================================== */
/* The header sticks to the top once the page scrolls. It is transparent while
   it sits over the hero, exactly as designed, and only takes a background once
   it is over content -- otherwise the page would show through it. */
.hd {
  position: sticky; top: 0; z-index: 90;
  /* 10px top and bottom, asked for directly. Both states carry the same figure so
     the bar does not grow by 4px the moment it sticks -- the transition is still
     doing work on the background and the shadow. */
  padding: 10px 0;
  transition: padding .2s ease, background .2s ease, box-shadow .2s ease;
}
.hd.is-stuck {
  padding: 10px 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 10px 30px -22px rgba(15, 50, 40, .5);
}
html[data-theme="dark"] .hd.is-stuck { background: rgba(7, 17, 13, .92); }
#topSentinel { display: block; height: 1px; }

/* With the header sticking, an in-page link would otherwise land its target
   underneath it. The offset is the stuck header's own height. */
:target, #features, #pricing, #faq, #assistant { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  .hd { transition: none; }
}
.hd-in { position: relative; display: flex; align-items: center; gap: 40px; }

.hd-brand { display: flex; align-items: center; gap: 14px; }
.hd-mark { width: 54px; height: 54px; }
.hd-brand-text { display: flex; flex-direction: column; gap: 3px; }
.hd-name { font-family: Roboto, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.3px; line-height: 1; }
.hd-name b { color: var(--ink); font-weight: 700; }
.hd-name i { color: var(--green); font-style: normal; font-weight: 700; }
.hd-tag { font-size: 13.2px; color: var(--muted-2); letter-spacing: -.1px; }

.hd-nav { display: flex; align-items: center; gap: 46px; margin-left: 82px; margin-right: auto; }
.hd-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: Roboto, sans-serif; font-size: 15.8px; font-weight: 400; color: var(--ink-3);
  transition: color .16s ease;
}
.hd-link svg { stroke-width: 2.1; opacity: .75; }
.hd-link:hover { color: var(--green); }

.hd-act { display: flex; align-items: center; gap: 26px; }
.theme-toggle {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--green); color: var(--green); }
.theme-toggle svg { width: 20px; height: 20px; stroke-width: 2; }
.theme-toggle .theme-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
.hd-signin { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.hd-signin:hover { color: var(--green); }
.hd-cta { height: 50px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 600; }
.hd-cta-short { display: none; }
.hd-cta svg { stroke-width: 2.2; }

.mobile-nav-toggle {
  display: none; place-items: center; align-content: center; gap: 4px; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-card); cursor: pointer;
}
.mobile-nav-toggle span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 120;
  display: none; width: min(420px, 100%); max-height: calc(100vh - 100px);
  padding: 20px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow-lift);
}
.mobile-nav-section + .mobile-nav-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.mobile-nav-section h2 { font-size: 12px; line-height: 1; letter-spacing: 1.3px; text-transform: uppercase; color: var(--green-deep); }
.mobile-nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mobile-nav-links a {
  display: flex; align-items: center; min-height: 42px; padding: 8px 12px;
  border-radius: 10px; background: var(--mint-soft);
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.mobile-nav-links a:hover { background: var(--mint); color: var(--green-deep); }
.mobile-nav-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.mobile-nav-signin, .mobile-nav-cta { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 11px; font-size: 14.5px; font-weight: 700; }
.mobile-nav-signin { border: 1px solid var(--line); color: var(--ink); }
.mobile-nav-cta { gap: 8px; }
.mobile-nav-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(7, 17, 13, .34); backdrop-filter: blur(2px); }
.mobile-nav[hidden], .mobile-nav-backdrop[hidden] { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding: 32px 0 0; }
.hero-in {
  display: grid;
  grid-template-columns: 530px minmax(0, 1fr);
  /* Two rows in the copy column, so a phone can lift the mocks between them
     without disturbing the desktop composition. */
  grid-template-areas:
    "copy  stage"
    "extra stage";
  gap: 0 60px;
  align-items: start;
}
.hero-copy { grid-area: copy; }
.hero-extra { grid-area: extra; }
.stage { grid-area: stage; }

/* ---------- badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 18px 0 14px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--green-dark);
  font-size: 14.2px; font-weight: 700; letter-spacing: -.1px;
}
.badge-spark { color: var(--green-lit); stroke: none; }

/* ---------- headline ---------- */
.h1 {
  margin: 10px 0 0;
  font-size: 56.8px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
}
.h1-green { color: var(--green); }
/* the short mint stroke the design tucks under "AI." */
.h1-underline {
  display: inline-block; position: relative; top: 14px; left: -6px;
  width: 34px; height: 7px; border-radius: 4px;
  background: linear-gradient(90deg, var(--green-pale-2), var(--green-pale-3));
}

.lead {
  margin: 21px 0 0;
  max-width: 430px;
  font-size: 18px;
  line-height: 1.42;
  color: var(--slate);
}

/* ---------- call to action ---------- */
.cta-row { display: flex; align-items: stretch; gap: 27px; margin: 17px 0 0; }

.cta-main {
  height: 63px; padding: 0 26px;
  border-radius: 14px;
  gap: 11px;
}
.cta-star { stroke: none; color: #fff; flex: none; width: 20px; height: 20px; }
.cta-main-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.cta-main-title { display: inline-flex; align-items: center; gap: 7px; font-family: Roboto, sans-serif; font-size: 16.9px; font-weight: 700; }
.cta-main-mobile { display: none; }
.cta-main-title svg { stroke-width: 2.4; opacity: .85; }
.cta-main-sub { font-size: 12.6px; font-weight: 400; color: rgba(255, 255, 255, .88); }

.cta-demo, .cta-signin-mobile {
  display: inline-flex; align-items: center; gap: 14px;
  height: 63px; padding: 0 23px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: Roboto, sans-serif; font-size: 17.3px; font-weight: 700; color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta-signin-mobile {
  position: relative; display: none; justify-content: flex-start;
  border: 1.5px solid var(--mint-line-4);
  background: linear-gradient(110deg, var(--surface), var(--mint-soft));
  color: var(--ink); box-shadow: 0 12px 28px -20px rgba(4, 122, 63, .55);
}
.cta-demo:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.cta-signin-mobile:hover {
  transform: translateY(-1px); border-color: var(--green-lit);
  background: linear-gradient(110deg, var(--mint-soft), var(--mint));
  box-shadow: 0 16px 34px -20px rgba(4, 122, 63, .7);
}
.cta-signin-icon {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border: 1px solid var(--mint-line); border-radius: 12px;
  background: var(--mint); color: var(--green-deep);
}
.cta-signin-icon svg, .cta-signin-arrow { stroke-width: 2; }
.cta-signin-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; text-align: left; }
.cta-signin-copy b { font-size: 16px; font-weight: 700; color: var(--ink); }
.cta-signin-copy small { font-size: 12px; font-weight: 500; color: var(--muted-2); }
.cta-signin-arrow { flex: none; margin-left: auto; color: var(--green-deep); }
.cta-play {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
}
.cta-play svg { stroke: none; margin-left: 2px; }

/* ---------- four feature lines ---------- */
.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 26px;
  margin: 27px 0 0;
}
.feat-item { display: flex; gap: 12px; align-items: flex-start; }
.feat-ico {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--mint); color: var(--green);
}
.feat-item h3 { font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.feat-item p { margin-top: 3px; font-size: 12.3px; line-height: 1.55; color: var(--muted-2); }

/* ---------- privacy strip ---------- */
.trust {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 26px;
  margin: 36px 0 0; padding: 11px 18px;
  border: 1px solid var(--mint-line);
  border-radius: var(--radius);
  background: var(--surface-glass-72);
}
.trust-item { display: flex; align-items: center; gap: 13px; }
.trust-item + .trust-item { padding-left: 26px; border-left: 1px solid var(--mint-line); }
.trust-ico { flex: none; color: var(--green-deep); }
.trust-item h3 { font-family: Roboto, sans-serif; font-size: 14.2px; font-weight: 700; color: var(--green-deep); }
.trust-item p { margin-top: 2px; font-size: 12.8px; line-height: 1.45; color: var(--muted-2); }

/* ==========================================================================
   STAGE — mascot, phone, insights pane
   ========================================================================== */
.stage {
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: 35px;
  padding-left: 200px;
  margin-top: -26px;      /* the lane the mascot stands in */
}

/* ---------- mascot ---------- */
.mascot { position: absolute; left: -63px; bottom: 108px; width: 215px; }
.mascot-img { width: 215px; height: auto; filter: drop-shadow(0 24px 30px rgba(13, 60, 45, .18)); }
.mascot-bubble {
  position: absolute; left: 27px; bottom: 346px;
  padding: 14px 19px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--green-lit), var(--green-deep));
  color: #fff;
  font-size: 14.4px; font-weight: 500; line-height: 1.4;
  box-shadow: 0 16px 30px -18px rgba(6, 90, 52, .8);
}
.mascot-bubble::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -11px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: var(--green-deep);
  border-bottom: 0;
  filter: drop-shadow(0 6px 6px rgba(6, 90, 52, .18));
}
.mascot-bubble b { font-weight: 700; }
.mascot-wave { font-size: 15px; }

/* ---------- phone ---------- */
.phone {
  flex: none;
  width: 310px; height: 664px;
  padding: 11px;
  border-radius: 48px;
  background: linear-gradient(160deg, #171b1f 0%, #05070a 42%, #1d2226 100%);
  box-shadow: 0 33.6px 58.8px -25.2px rgba(8, 40, 30, .55), 0 1.7px 0 rgba(255, 255, 255, .1) inset;
}
.phone-screen {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  border-radius: 38px;
  background: var(--surface);
  overflow: hidden;
}

.ph-head { display: flex; align-items: center; gap: 6.7px; padding: 10.9px 11.8px 9.2px; border-bottom: 0.8px solid var(--line-soft); }
.ph-mark { width: 25.2px; height: 25.2px; }
.ph-name { font-family: Roboto, sans-serif; font-size: 13.4px; font-weight: 700; letter-spacing: -0.17px; }
.ph-name b { color: var(--ink); }
.ph-name i { color: var(--green-deep); font-style: normal; }
.ph-burger { margin-left: auto; display: grid; gap: 3.4px; }
.ph-burger i { display: block; width: 16.0px; height: 2.0px; border-radius: 1.7px; background: var(--ink-3); }

.ph-chat { flex: 1; overflow: hidden; padding: 11px 10px 4px; display: flex; flex-direction: column; gap: 8px; }

.ph-row-me { display: flex; align-items: flex-start; gap: 6.7px; justify-content: flex-end; }
.ph-me {
  max-width: 159.6px; padding: 7.6px 10.1px;
  border-radius: 11.8px 11.8px 3.4px 11.8px;
  background: var(--mint);
  color: var(--ink-2); font-size: 10.6px; font-weight: 500; line-height: 1.32;
}
.ph-av { width: 33.6px; height: 33.6px; border-radius: 50%; flex: none; }

.ph-bot { display: flex; gap: 5.9px; padding: 7.6px 8.4px 8.4px; border: 0.8px solid var(--line-soft); border-radius: 11.8px; background: var(--surface); box-shadow: 0 5.0px 15.1px -11.8px rgba(15, 50, 40, .5); }
.ph-bot-mark { width: 21.8px; height: 21.8px; flex: none; }
.ph-bot-body { flex: 1; min-width: 0; }
.ph-bot-a .ph-bot-body { display: flex; align-items: center; gap: 8.4px; }
.ph-bot-text { font-size: 10.3px; line-height: 1.38; color: var(--ink-3); }
.ph-bot-text b { color: var(--ink); font-weight: 700; }

/* the four-slice ring in the first answer */
.ph-donut {
  flex: none;
  width: 60.5px; height: 60.5px; border-radius: 50%;
  background: conic-gradient(var(--blue-vivid) 0deg 150deg, var(--amber) 150deg 246deg, var(--orange) 246deg 288deg, var(--green-pale) 288deg 330deg, var(--green-bright) 330deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
  mask: radial-gradient(circle, transparent 54%, #000 55%);
}

.ph-cats { padding: 8.4px; border: 0.8px solid var(--line-soft); border-radius: 11.8px; background: var(--surface); }
.ph-cats h4 { font-family: Roboto, sans-serif; font-size: 10.6px; font-weight: 700; }
.ph-cats ul { display: flex; flex-direction: column; gap: 5.0px; margin-top: 5.9px; }
.ph-cats li { display: flex; align-items: center; gap: 7.6px; }
.ph-cat-ico { display: grid; place-items: center; flex: none; width: 23.5px; height: 23.5px; border-radius: 7.6px; background: var(--mint); color: var(--green); }
.ph-cat-main { flex: 1; min-width: 0; }
.ph-cat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6.7px; }
.ph-cat-top b { font-size: 10.2px; font-weight: 500; color: var(--ink-3); }
.ph-cat-top i { font-size: 10.2px; font-style: normal; font-weight: 600; color: var(--ink); }
.ph-bar { display: block; margin-top: 3.4px; height: 3.8px; border-radius: 2.5px; background: var(--line-soft); }
/* These carried their colour in a style attribute, where the palette could not
   see them: four bars spelled the mid green #0d9a55 -- a sixth spelling of it --
   and the fifth spelled amber #f59e0b, a second one. The width is data and stays
   inline; the colour is a role and belongs here. */
.ph-bar i { display: block; height: 100%; border-radius: 2.5px; background: var(--green-mid); }
/* Not a state: the design gives this one row the amber its donut uses for the
   same category, and leaves the other four green whatever their slice colour. */
.ph-bar i.amber { background: var(--amber); }

.ph-subs { margin-top: 6.7px; display: flex; flex-direction: column; gap: 3.4px; }
.ph-subs li { position: relative; padding-left: 9.2px; font-size: 9.9px; line-height: 1.4; color: var(--ink-3); }
.ph-subs li::before { content: "•"; position: absolute; left: 1.7px; color: var(--faint-2); }
.ph-subs span { color: var(--muted); }

.ph-report {
  display: inline-flex; align-items: center; gap: 5.9px;
  margin-top: 6.7px; padding: 5.0px 10.1px;
  border-radius: 8.4px; background: var(--mint);
  color: var(--green-deep); font-size: 10.2px; font-weight: 600;
}

.ph-ask { display: flex; align-items: center; gap: 6.7px; padding: 5.0px 8.4px 8.4px; }
.ph-ask-field {
  flex: 1; height: 33.6px; display: flex; align-items: center; padding: 0 11.8px;
  border: 0.8px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 10.9px;
}
.ph-send {
  display: grid; place-items: center; flex: none;
  width: 33.6px; height: 33.6px; border-radius: 50%;
  background: linear-gradient(150deg, var(--green-lit), var(--green-deep)); color: #fff;
  box-shadow: 0 8.4px 16.8px -10.1px rgba(6, 122, 65, .9);
}

/* ---------- insights pane ---------- */
.pane {
  flex: none;
  align-self: flex-start;
  width: 385px;
  margin-top: 11px;
  display: flex; gap: 6px;
  padding: 13px 12px 12px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface-glass-55);
  box-shadow: var(--shadow-card);
}
.pane-rail { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 26px 6px 0; color: var(--faint); }
.pane-rail .on { color: var(--green-deep); }
.pane-body { flex: 1; min-width: 0; }

.pane-month {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px; margin: 0 0 4px auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font-size: 12.6px; font-weight: 500; color: var(--ink-3);
  float: right;
}
.pane-month svg { stroke-width: 2.1; }

.card { border: 1px solid var(--line-soft); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); }

.pane-sum { clear: both; padding: 12px 14px 12px; }
.pane-sum h3 { font-family: Roboto, sans-serif; font-size: 13.6px; font-weight: 700; }
.pane-sum p { margin-top: 5px; max-width: 205px; font-size: 13.3px; line-height: 1.5; color: var(--slate); }
.pane-sum p b { color: var(--ink); font-weight: 700; }

.pane-figures { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.pane-donut {
  position: relative; flex: none;
  width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(var(--green-mid) 0deg 300deg, var(--line-strong) 300deg 344deg, var(--amber-soft) 344deg 360deg);
  display: grid; place-items: center;
}
.pane-donut::after { content: ""; position: absolute; inset: 19px; border-radius: 50%; background: var(--surface); }
.pane-donut span { position: relative; z-index: 1; display: grid; justify-items: center; }
.pane-donut b { font-family: Roboto, sans-serif; font-size: 17.5px; font-weight: 700; color: var(--ink); }
.pane-donut i { font-size: 10.8px; font-style: normal; color: var(--muted); }

.pane-stats { display: flex; flex-direction: column; gap: 12px; }
.pane-stat { display: flex; align-items: center; gap: 11px; }
.pane-stat-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--mint); color: var(--green); }
.pane-stat b { display: block; font-family: Roboto, sans-serif; font-size: 15.4px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.pane-stat i { font-size: 11.6px; font-style: normal; color: var(--muted); }

.pane-save { margin-top: 11px; padding: 10px 13px 2px; }
.pane-save-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: -2px; }
.pane-save-head h3 { font-family: Roboto, sans-serif; font-size: 13.4px; font-weight: 500; }
.pane-save-head a { font-size: 13px; font-weight: 600; color: var(--green-deep); }
.pane-save ul { margin-top: 4px; }
.pane-save li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.pane-save li + li { border-top: 1px solid var(--line-soft); }
.pane-save-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 12px; background: var(--mint); color: var(--green); }
.pane-save-txt { flex: 1; min-width: 0; }
.pane-save-txt b { display: block; font-size: 11.9px; font-weight: 500; color: var(--ink-2); }
.pane-save-txt i { font-size: 11.2px; font-style: normal; color: var(--muted); }
.pane-chev { color: var(--muted); stroke-width: 2.2; flex: none; }

.pane-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.pane-chips span {
  display: grid; place-items: center;
  height: 38px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-glass-80);
  font-size: 11.6px; color: var(--slate); text-align: center; white-space: nowrap;
}

/* ==========================================================================
   BACK TO TOP
   --------------------------------------------------------------------------
   Fixed, and hidden with visibility rather than opacity alone: a transparent
   button still takes a focus stop and still swallows clicks.
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--green);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  box-shadow: var(--shadow-card);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.is-up { visibility: visible; opacity: 1; transform: none; }
.back-to-top:hover { color: var(--green-deep); box-shadow: var(--shadow-lift); }
.back-to-top svg { stroke-width: 2.2; }

/* Small screens keep a sticky action bar at the bottom edge on other pages of
   this site, so the offset is lifted clear of it rather than sat under it. */

@media (max-width: 820px) {
  .back-to-top {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 76px);
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   PERFECT FOR EVERY MONEY JOURNEY
   ========================================================================== */
.journey { padding: 19px 0 64px; }
.journey-title {
  display: flex; align-items: center; gap: 26px;
  margin: 0 0 7px; padding: 0 30px;
  font-size: 17.9px; font-weight: 700; color: var(--green-deep);
  white-space: nowrap;
}
.journey-title::before, .journey-title::after { content: ""; flex: 1; height: 1px; background: var(--mint-line); }

.journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 0 29px; }
.jcard {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 18px;
  border: 1px solid var(--line-soft); border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.jcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.jcard-ico { display: block; flex: none; margin-top: 2px; color: var(--green-soft); }
.jcard-txt { min-width: 0; }
.jcard-ico svg { width: 46px; height: 46px; }
.jcard h3 { font-family: Roboto, sans-serif; font-size: 14.3px; font-weight: 700; }
.jcard-kick { margin-top: 2px; font-size: 12.4px; font-weight: 700; color: var(--ink-3); }
.jcard-body { margin-top: 5px; max-width: 166px; font-size: 12.3px; line-height: 1.45; color: var(--muted-2); }

/* ==========================================================================
   RESPONSIVE — the composition is built for 1586; below that it steps down
   ========================================================================== */
/* Below the design's own width there is no lane left for the mascot: the copy
   column is fixed and the handset keeps its size, so from 1560 down the robot
   was crossing the phone -- 111px into it at 1440, 220px by 1331. It stands
   down instead, and the stage stops reserving its lane. */
@media (max-width: 1560px) {
  .hero-in { gap: 0 40px; }
  .stage { padding-left: 0; }
  .mascot { display: none; }
}

@media (max-width: 1330px) {
  .hd-nav { gap: 26px; }
  .hero-in { grid-template-columns: 460px minmax(0, 1fr); }
  .h1 { font-size: 46px; letter-spacing: -1.4px; }
  .lead { font-size: 17.5px; }
  .stage { padding-left: 0; }
  .mascot { display: none; }
  .pane { width: 340px; }
}

@media (max-width: 1120px) {
  /* The nav carries margin-right:auto and was the only thing pushing the
     actions to the right edge, so hiding it packed them against the brand
     and left the rest of the row empty. */
  .hd-nav, .hd-tag, .hd-signin { display: none; }
  .hd-act { margin-left: auto; }
  .mobile-nav-toggle { display: grid; }
  .mobile-nav:not([hidden]) { display: block; }
  .hd-name, .hd-signin, .hd-cta { white-space: nowrap; }
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "extra" "stage";
    gap: 0;
  }
  /* 18px, which is what the 44px row gap came to against the stage's own
     -26px mascot lane -- the spacing this range already had. */
  .stage { margin-top: 18px; }
  .lead { max-width: 46ch; }
  .stage { justify-content: flex-start; padding-left: 0; }
  .pane { width: 360px; }
  .journey-grid { grid-template-columns: 1fr 1fr; }
}

/* One column from 1120 down, which hands the copy the whole shell -- and
   left-aligned that left about 300px of every row it wrote empty, since the
   headline's line breaks are the design's own and cannot be made to fill the
   width. The copy is centred through this range instead, and the two grids
   under it spread across the width rather than sitting in a half of it. */
@media (min-width: 781px) and (max-width: 1120px) {
  .hero-copy { text-align: center; }
  .lead { max-width: 54ch; margin-inline: auto; }
  .cta-row { justify-content: center; }
  /* the rows themselves stay left-read, only the block is centred */
  .feat { margin-top: 34px; text-align: left; }
  .trust { text-align: left; }
  .stage { justify-content: center; }
  /* the pane takes the width the row has rather than leaving it beside itself */
  .pane { flex: 1 1 auto; width: auto; max-width: 480px; }
}

@media (max-width: 820px) {
  .shell { width: min(1490px, 100% - 40px); }
  main > section + section { margin-top: 24px; }
  main > section + section::before {
    top: -12px;
    width: calc(100% - 40px);
  }
  /* Both of these hold a single line by design at desktop width; on a phone
     that is what pushed the page 21px wider than the viewport. */
  .pane-chips { grid-template-columns: 1fr; }
  .pane-chips span { white-space: normal; height: auto; min-height: 36px; padding: 8px 12px; }
  .feat-item h3 { white-space: normal; }
  .h1 { font-size: 38px; letter-spacing: -1px; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-title { white-space: normal; text-align: center; }
}

/* Below 780 there is no longer room to stand things side by side: the two
   feature columns are 200px each, and the handset and the insights pane
   together want 705. */
@media (max-width: 780px) {
  /* The mocks come up between the buttons and the feature lines: on a phone
     they sat four rows and a privacy strip below the fold, and they are the
     only picture of the product the page has. */
  .hero-in { grid-template-areas: "copy" "stage" "extra"; }
  .stage { margin-top: 30px; }

  /* The headline's three lines are the design's own, so at a fixed size the
     longest of them stopped 30px short of the margin and the other two well
     inside that -- a column of empty page beside the copy. It is sized off the
     viewport here so the longest line reaches the margin at any phone width,
     and the copy centres, so what is left of the ragged edge falls both sides
     rather than all down the right. Same treatment as 781-1120. */
  .h1 { font-size: min(46px, 10.9vw); }
  .hero-copy { text-align: center; }
  .lead { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .feat { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; gap: 18px; }
  .trust-item + .trust-item { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--mint-line); }
  .stage { flex-direction: column; align-items: center; }
  .pane { width: 100%; max-width: 420px; margin-top: 0; }
}

/* The header row from 700 down: the brand and both actions still fit, but only
   at these sizes -- and by 520 the wordmark has to go, leaving the mark to
   carry the brand as it does on a phone. */
@media (max-width: 700px) {
  /* 10px, as at every other width. This was 22px from a mobile polish pass,
     which left the phone header lopsided once the base rule became 10px 0. */
  .hd { padding-top: 10px; }
  .hero { padding-top: 34px; }
  .hd-in { gap: 16px; }
  .hd-act { gap: 12px; }
  .hd-brand-text { display: none; }
  .theme-toggle { width: 42px; height: 42px; }
  .mobile-nav-toggle { width: 42px; height: 42px; }
  .hd-mark { width: 46px; height: 46px; }
  .hd-name { font-size: 22px; }
  .hd-signin { font-size: 15.5px; }
  .hd-cta { height: 46px; padding: 0 18px; font-size: 15px; }
}

/* At large-phone widths the desktop CTA spacing makes both button labels wrap.
   They keep equal lanes here, while their icons and copy tighten just enough
   to remain readable on one line. */
@media (max-width: 560px) {
  .cta-row { gap: 12px; }
  .cta-main, .cta-demo { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
  .cta-main { gap: 8px; }
  .cta-star { width: 18px; height: 18px; }
  .cta-main-title { gap: 5px; font-size: 15.5px; }
  .cta-main-title, .cta-main-sub, .cta-demo { white-space: nowrap; }
  .cta-main-sub { font-size: 12px; }
  .cta-demo { gap: 9px; font-size: 15.5px; }
  .cta-play { width: 32px; height: 32px; flex: none; }
}

@media (max-width: 520px) {
  .hd-cta-full { display: none; }
  .hd-cta-short { display: inline; }
}

/* Narrow phones: the brand block plus both header actions is 7px too wide at
   360, so the actions tighten rather than the logo shrinking. */
@media (max-width: 430px) {
  /* The two hero buttons are 452px side by side; below 430 they stack. */
  .cta-row {
    flex-direction: column;
    gap: 12px;
    width: min(330px, calc(100% - 32px));
    margin-inline: auto;
  }
  /* The 560px rule gives these flex-basis:0 for an equal two-column row.
     Once the row turns into a column that basis collapses them to their text;
     reset it so the declared 63px control height becomes the touch target. */
  .cta-main, .cta-demo, .cta-signin-mobile {
    flex: none;
    width: 100%;
    min-height: 63px;
    justify-content: center;
  }
  .cta-main-full, .cta-demo { display: none; }
  .cta-main-mobile { display: inline; }
  .cta-signin-mobile { display: inline-flex; justify-content: flex-start; padding-inline: 16px; }

  /* Tighter still: at 320 the mark and the two actions have 280px to share. */
  .hd-in { gap: 14px; }
  .hd-mark { width: 42px; height: 42px; }
  .hd-act { gap: 10px; }
  .theme-toggle { width: 40px; height: 40px; }
  .mobile-nav-toggle { width: 40px; height: 40px; }
  .hd-cta { height: 44px; padding: 0 16px; font-size: 14.5px; gap: 7px; }
  .phone { width: 100%; max-width: 310px; height: auto; aspect-ratio: 310 / 664; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   FOOTER
   --------------------------------------------------------------------------
   Measured off the supplied 1672x941 design, which is drawn on this same 1490
   shell (gutters of 91px at that width). Column left edges 715 / 1006 / 1330
   against a container starting at 91, so the link columns are 624 / 915 / 1239
   from its left edge -- unevenly spaced, which is why the grid states the two
   inner tracks outright instead of splitting the row evenly.
   ========================================================================== */
.ft {
  position: relative;
  padding: 48px 0 0;
  border-top: 1px solid var(--mint-line-3);
}

/*
 * Same fix as site-shell.css: three fixed columns totalling 1239px inside a
 * shell only 1290px wide at the breakpoint below left the last column 51px for
 * 64px links, and the page scrolled sideways. The brand column shrinks instead.
 */
.ft-top {
  display: grid;
  grid-template-columns: minmax(0, 624px) 291px 324px minmax(150px, 1fr);
  align-items: start;
}

/* ---------- brand block ---------- */
.ft-logo { display: flex; align-items: center; gap: 18px; }
.ft-logo img { width: 68px; height: 68px; }
.ft-word { font-size: 32px; font-weight: 700; letter-spacing: -.5px; line-height: 1; }
.ft-word b { color: var(--ink); font-weight: 700; }
.ft-word i { color: var(--green); font-style: normal; }

.ft-tag { margin: 24px 0 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.ft-note { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--slate); }
.ft-address { margin: 12px 0 0; color: var(--slate); font-size: 14px; font-style: normal; line-height: 1.55; }
.ft-address strong { color: var(--ink); }

.ft-social { display: flex; gap: 14px; margin: 16px 0 0; }
.ft-social a {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface); color: var(--social-color, var(--ink-2));
  box-shadow: 0 8px 20px -16px rgba(15, 50, 40, .5);
  transition: transform .16s ease, border-color .16s ease, color .16s ease;
}
.ft-social a:hover { transform: translateY(-2px); border-color: var(--social-color, var(--mint-line-4)); color: var(--social-color, var(--green)); }
.ft-social .social-instagram { --social-color: var(--social-instagram); }
.ft-social .social-threads { --social-color: var(--social-threads); }
.ft-social .social-tiktok { --social-color: var(--social-tiktok); }
.ft-social .social-linkedin { --social-color: var(--social-linkedin); }
.ft-social .social-facebook { --social-color: var(--social-facebook); }
.ft-social .social-email { --social-color: var(--social-email); }

/* ---------- link columns ---------- */
.ft-head {
  display: flex; align-items: center; gap: 12px;
  font-size: 21px; font-weight: 600; letter-spacing: -.3px;
}
.ft-tile {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--mint); color: var(--green);
}
/* The short rule follows the compact heading tile above it. */
.ft-col ul { margin: 28px 0 0; }
.ft-head::after { content: none; }
.ft-col { position: relative; }
.ft-col::before {
  content: "";
  position: absolute; left: 0; top: 56px;
  width: 46px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--green-bright));
}
.ft-col li + li { margin-top: 22px; }
.ft-col a { font-size: 16px; color: var(--slate); transition: color .16s ease; }
.ft-col a:hover { color: var(--green); }

/* ---------- query-focused product overview ---------- */
.brand-seo {
  padding: 82px 0;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(145deg, var(--ground), var(--mint-soft));
}
.brand-seo-in { max-width: 1180px; }
.brand-seo-kicker {
  margin: 0 0 12px;
  color: var(--green-deep);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.brand-seo h2 { margin: 0; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -.8px; }
.brand-seo-lead { max-width: 930px; margin: 18px 0 0; color: var(--slate); font-size: 19px; line-height: 1.7; }
.brand-seo-lead strong { color: var(--ink); }
.brand-seo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 34px 0 0; }
.brand-seo-grid article {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.brand-seo-grid h3 { margin: 0; font-size: 20px; }
.brand-seo-grid p { margin: 12px 0 0; color: var(--slate); font-size: 15.5px; line-height: 1.65; }
.brand-seo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin: 52px 0 0; }
.brand-seo-split h2, .brand-seo-faq h2 { font-size: 28px; }
.brand-seo-split ol { margin: 20px 0 0; padding: 0 0 0 22px; color: var(--slate); }
.brand-seo-split li { padding: 0 0 13px 6px; line-height: 1.6; }
.brand-seo-split li::marker { color: var(--green); font-weight: 800; }
.brand-seo-split strong, .brand-seo-split dt { color: var(--ink); }
.brand-seo-split dl { display: grid; gap: 0; margin: 20px 0 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.brand-seo-split dl div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 13px 16px; background: var(--surface); }
.brand-seo-split dl div + div { border-top: 1px solid var(--line-soft); }
.brand-seo-split dt { font-weight: 700; }
.brand-seo-split dd { margin: 0; color: var(--slate); }
.brand-seo-faq { margin: 48px 0 0; }
.brand-seo-faq details { padding: 18px 0; border-bottom: 1px solid var(--line); }
.brand-seo-faq summary { color: var(--ink); font-size: 17px; font-weight: 700; cursor: pointer; }
.brand-seo-faq p { max-width: 850px; margin: 12px 0 0; color: var(--slate); line-height: 1.65; }
.brand-seo-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; }
.brand-seo-links a { padding: 12px 16px; border: 1px solid var(--mint-line-3); border-radius: 999px; background: var(--surface); color: var(--green-deep); font-weight: 700; }
.brand-seo-links a:first-child { background: var(--green); color: #fff; border-color: var(--green); }
.brand-seo-links a:hover { transform: translateY(-1px); text-decoration: none; }

@media (max-width: 820px) {
  .brand-seo { padding: 58px 0; }
  .brand-seo-grid, .brand-seo-split { grid-template-columns: 1fr; }
  .brand-seo-grid { gap: 12px; }
  .brand-seo-split { gap: 38px; }
}

@media (max-width: 560px) {
  .brand-seo-lead { font-size: 17px; }
  .brand-seo-grid article { padding: 20px; }
  .brand-seo-split dl div { grid-template-columns: 1fr; gap: 2px; }
  .brand-seo-links { display: grid; }
  .brand-seo-links a { text-align: center; }
}

/* ---------- bottom bar ---------- */
.ft-base { margin-top: 48px; border-top: 1px solid var(--line); background: var(--ground); }
.ft-base-in { display: flex; align-items: center; min-height: 88px; }
.ft-copy { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--ink-3); }
.ft-copy svg { color: var(--green-lit); flex: none; }
.ft-copy span { margin-left: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The design draws the back-to-top control at the right of this bar: a white
   disc with a green ring. It stays fixed to the viewport -- that is what makes
   it useful before the visitor reaches the footer -- so at the bottom of the
   page it lands where the design shows it. */
.back-to-top { width: 58px; height: 58px; right: 48px; bottom: 20px; border: 1.6px solid var(--green-lit); color: var(--green); }
.back-to-top svg { width: 22px; height: 22px; stroke-width: 2.2; }

@media (max-width: 1330px) {
  .ft-top { grid-template-columns: 1fr 1fr 1fr; row-gap: 32px; }
  .ft-brand { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .ft { padding-top: 40px; }
  .ft-top { grid-template-columns: 1fr 1fr; }
  .ft-word { font-size: 28px; }
  .ft-head { font-size: 18px; }
  .ft-col a { font-size: 15px; }
  .ft-col li + li { margin-top: 18px; }
  .ft-base-in { min-height: 78px; }
  .ft-copy { font-size: 14.5px; }
  .back-to-top { width: 52px; height: 52px; right: 16px; }
}

@media (max-width: 560px) {
  .ft-top { grid-template-columns: 1fr; }
  .ft-social { flex-wrap: wrap; gap: 14px; }
  .ft-social a { width: 54px; height: 54px; }
}

/* ==========================================================================
   ASSISTANT SECTION
   --------------------------------------------------------------------------
   From the supplied 1672x941 design, on the same 1490 shell. Measured: copy
   column 107..600, the platform rail at 637 (88 wide), the laptop 752..1410,
   four cards across the shell, then two banners and a six-item strip.
   ========================================================================== */
.as { padding: 64px 0 40px; }
.as-top { display: grid; grid-template-columns: 545px minmax(0, 1fr); gap: 0 12px; align-items: start; }

/* ---------- copy ---------- */
.as-badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 15px;
  border: 1px solid var(--mint-line-2); border-radius: 999px;
  background: var(--mint-soft);
  font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--green-deep);
}
.as-title { margin: 22px 0 0; font-size: 44px; font-weight: 700; line-height: 0.98; letter-spacing: -1.3px; }
.as-title span { color: var(--green-lit); }
.as-lead { margin: 15px 0 0; max-width: 480px; font-size: 17px; line-height: 1.55; color: var(--slate); }
.as-lead b { color: var(--ink); font-weight: 700; }

.as-note {
  display: flex; align-items: flex-start; gap: 13px;
  margin: 18px 0 0; padding: 14px 18px;
  max-width: 500px;
  border: 1px solid var(--mint-line); border-radius: 12px;
  background: var(--mint-soft);
  font-size: 14.5px; line-height: 1.55; color: var(--slate);
}
.as-note svg { color: var(--green-lit); flex: none; margin-top: 3px; }

/* ---------- rail, laptop, mascot ---------- */
.as-stage { position: relative; display: flex; align-items: flex-start; gap: 27px; margin-top: -19px; }
.as-rail { display: flex; flex-direction: column; gap: 5px; flex: none; width: 104px; }
.as-rail li {
  display: flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 10px;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  box-shadow: 0 8px 18px -16px rgba(15, 50, 40, .6);
}
.as-rail img { width: 24px; height: 24px; flex: none; }
.as-rail-mcp { justify-content: center; font-size: 15px; font-weight: 700; letter-spacing: .4px; }
.as-rail-more {
  justify-content: center; height: 36px !important;
  border-style: dashed !important; background: var(--ground) !important;
  font-size: 12.5px !important; font-weight: 500 !important; color: var(--muted) !important;
}
/* the dashed leaders running from the rail across to the screen */
.as-stage::before {
  content: ""; position: absolute; left: 96px; top: 32px;
  width: 27px; height: 314px;
  border-left: 1px dashed var(--mint-line-3); border-top: 1px dashed var(--mint-line-3); border-bottom: 1px dashed var(--mint-line-3);
  border-radius: 4px 0 0 4px;
  pointer-events: none;
}
.as-laptop { width: 658px; max-width: 100%; height: auto; flex: 0 1 auto; }
.as-bot { position: absolute; right: -58px; bottom: 4px; width: 190px; height: auto; }

/* ---------- the six cards ----------
   The design was a 1672x941 image, and the first build read its type off that
   image geometrically: scaled onto this shell, the card copy landed at 11.4px
   and the little fixtures beside it at 9-9.8px, which is not a size anyone
   reads. These are the site's own sizes instead -- body copy at 14px, the same
   register as the pricing blurbs -- and the layout gives that scale the room it
   needs. A 356px card cannot seat a 14px paragraph and a fixture side by side,
   so the fixture drops under the copy and takes the full width; the two wide
   cards keep theirs alongside, because 734px has room for both. */
.as-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 14px 0 0; }
.as-card {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "ico num" "ico title" "ico body" "art art";
  align-content: start; align-items: start; gap: 2px 13px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-card);
}
.as-card-ico { grid-area: ico; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--mint); color: var(--green); }
.as-card-n { grid-area: num; font-size: 12.5px; font-weight: 700; color: var(--green-deep); }
.as-card h3 { grid-area: title; margin-top: 2px; font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; }
.as-card-b { grid-area: body; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted-2); }
.as-card-art { grid-area: art; margin-top: 16px; max-width: 340px; }

/* 05 and 06 span two columns, so their fixture stays beside the copy. */
.as-card-wide {
  grid-column: span 2;
  grid-template-columns: 44px minmax(0, 1fr) 236px;
  grid-template-areas: "ico num art" "ico title art" "ico body art";
  grid-template-rows: auto auto 1fr;
}
.as-card-wide .as-card-b { max-width: 360px; }
.as-card-wide .as-card-art { align-self: center; margin-top: 0; }

.as-art-chat { display: flex; flex-direction: column; gap: 8px; }
.as-bub-q, .as-bub-a {
  padding: 9px 12px; border-radius: 10px;
  font-size: 13px; line-height: 1.45; color: var(--ink-3);
}
.as-bub-q { background: var(--line-soft); }
.as-bub-a { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 14px -12px rgba(15, 50, 40, .6); }
.as-bub-a b { font-weight: 700; color: var(--ink); }

.as-art-logos { display: flex; align-items: center; gap: 11px; }
.as-art-logos img { width: 26px; height: 26px; }
.as-more { color: var(--faint); font-size: 17px; }

.as-art-receipt, .as-art-save, .as-art-privacy, .as-art-who {
  padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: 13px; background: var(--surface);
  box-shadow: 0 8px 18px -16px rgba(15, 50, 40, .6);
}
.as-art-head { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.as-receipt { display: grid; gap: 3px; margin: 9px 0; padding: 9px 11px; border-radius: 7px; background: var(--ground-2); }
.as-receipt i { display: block; height: 2px; border-radius: 1px; background: var(--line-strong); }
.as-receipt i:nth-child(2n) { width: 72%; }
.as-receipt i:nth-child(3n) { width: 84%; }
.as-art-receipt dl { display: grid; gap: 6px; }
.as-art-receipt div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.as-art-receipt dt { color: var(--muted-2); }
.as-art-receipt dd { margin: 0; font-weight: 700; color: var(--ink); }
.as-art-receipt div:first-child dt, .as-art-receipt div:first-child dd { font-size: 14.5px; font-weight: 700; color: var(--ink); }

.as-art-copy { margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--muted-2); }
.as-art-copy b { color: var(--green-deep); }
.as-spark { display: block; width: 100%; height: 40px; margin-top: 8px; }
.as-spark polyline { fill: none; stroke: var(--green-lit); stroke-width: 2; stroke-linejoin: round; }

.as-bank { position: relative; display: grid; place-items: center; margin: 8px 0 10px; color: var(--muted); }
.as-lock { position: absolute; left: 50%; bottom: -3px; margin-left: 2px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--green-mid); color: #fff; }
.as-lock svg { stroke-width: 2.2; }
.as-tick { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; line-height: 1.3; color: var(--slate); }
.as-tick svg { color: var(--green-lit); flex: none; }

.as-art-who ul { margin-top: 8px; display: grid; gap: 6px; }
.as-art-who li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; color: var(--slate); }
.as-art-who svg { width: 15px; height: 15px; color: var(--green-lit); flex: none; }

/* ---------- the two banners ---------- */
.as-banners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.as-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 20px;
  border: 1px solid var(--mint-line); border-radius: 14px;
  background: linear-gradient(100deg, var(--mint-soft), var(--ground));
  overflow: hidden;
}
.as-banner > img { width: 52px; height: auto; object-fit: contain; object-position: center; flex: none; }
.as-banner h3 { font-size: 17.5px; font-weight: 700; }
.as-banner p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted-2); }
.as-banner > div { flex: 1; min-width: 0; }
.as-banner-cta {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  height: 46px; padding: 0 22px; border-radius: 10px;
  font-size: 14.8px; font-weight: 700;
}
.as-banner-alt { background: linear-gradient(100deg, var(--blue-wash), var(--ground)); border-color: var(--blue-line); }
.as-banner-logos { display: flex; align-items: center; gap: 7px; flex: none; }
.as-banner-logos img { width: 26px; height: 26px; }
.as-banner-logos .as-more { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-soft); font-size: 16px; }
.as-banner-ghost {
  border: 1.4px solid var(--blue); background: var(--surface); color: var(--blue-ink);
  transition: background .16s ease, color .16s ease;
}
.as-banner-ghost:hover { background: var(--blue-ink); color: #fff; }

/* ---------- the closing strip ---------- */
.as-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  margin: 12px 0 0; padding: 16px 0;
  border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface);
  box-shadow: var(--shadow-card);
}
.as-strip li { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14.5px; color: var(--slate); }
.as-strip li + li { border-left: 1px solid var(--line-soft); }
.as-strip svg { color: var(--green-lit); flex: none; }

@media (max-width: 1330px) {
  .as-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .as-stage { justify-content: flex-start; }
  .as-bot { display: none; }
  .as-grid { grid-template-columns: repeat(2, 1fr); }
  /* Two across makes the wide cards shell-width, and a 236px fixture pinned to
     the far right of that leaves a void where the copy stops. It stacks under
     the copy here, the same as every other card. */
  .as-card-wide {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "ico num" "ico title" "ico body" "art art";
  }
  .as-card-wide .as-card-b { max-width: none; }
  .as-card-wide .as-card-art { align-self: start; margin-top: 16px; }
  .as-banners { grid-template-columns: 1fr; }
  .as-strip { grid-template-columns: repeat(3, 1fr); gap: 14px 0; }
  .as-strip li:nth-child(3n + 1) { border-left: 0; }
}

@media (max-width: 980px) {
  .as-laptop { width: 100%; max-width: 658px; }
}

@media (max-width: 820px) {
  .as { padding-top: 44px; }
  .as-title { font-size: 34px; letter-spacing: -.9px; }
  .as-grid { grid-template-columns: 1fr; }
  .as-card-wide { grid-column: auto; }
  .as-stage { flex-direction: column; }
  .as-rail { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .as-stage::before { display: none; }
  /* the banners clip their own overflow, so a CTA that does not fit is not
     just cramped -- it is cut in half. They stack instead. */
  .as-banner { flex-wrap: wrap; }
  .as-banner > div { flex-basis: 100%; order: 1; }
  .as-banner-cta { order: 2; width: 100%; justify-content: center; }
  .as-strip { grid-template-columns: 1fr 1fr; }
  .as-strip li { justify-content: flex-start; padding: 0 16px; }
  .as-strip li:nth-child(3n + 1) { border-left: 1px solid var(--line-soft); }
  .as-strip li:nth-child(2n + 1) { border-left: 0; }
}

/* ==========================================================================
   PRICING
   --------------------------------------------------------------------------
   From the supplied 1600x900 design. Its content is narrower than the shell:
   the three cards span 208..1387, so the row is a 1180 track centred inside
   the page container. Card 1 is 361x506 at y216, the Pro card 383 wide and a
   little taller, sitting proud of the other two.
   ========================================================================== */
.pr {
  position: relative;
  padding: 74px 0 30px;
  background:
    radial-gradient(620px 330px at 82% 12%, rgba(10, 138, 69, .10), transparent 72%),
    radial-gradient(520px 280px at 12% 72%, rgba(3, 122, 63, .08), transparent 74%),
    linear-gradient(180deg, var(--ground) 0%, var(--mint-soft) 52%, var(--ground) 100%);
}
.pr-in { width: min(1180px, 100%); margin-inline: auto; text-align: center; }

.pr-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--green-deep);
}
.pr-title {
  margin: 12px 0 0;
  font-size: 43px; font-weight: 700; letter-spacing: -1.1px; line-height: 1.1;
}
/* The highlighted phrase carries the same light-to-dark green sweep as the
   brand mark, without introducing a separate blue/teal identity. */
.pr-title span {
  background: linear-gradient(96deg, var(--green-lit) 0%, var(--green) 52%, var(--green-shade) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pr-sub {
  margin: 14px auto 0; max-width: 630px;
  font-size: 16.4px; line-height: 1.55; color: var(--muted-2);
}

.pr-grid {
  display: grid; grid-template-columns: 361px 383px 371px;
  justify-content: center; align-items: start;
  gap: 0 31px;
  margin: 46px 0 0;
}

.pr-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 35px 26px;
  border: 1px solid var(--mint-line-3); border-radius: 18px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--mint-soft) 145%);
  text-align: left;
  box-shadow: 0 18px 42px -30px rgba(3, 80, 42, .58);
  overflow: hidden;
}
.pr-card::before {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--green-lit), var(--green-deep));
}
/* The featured plan is the dark anchor of the row: near-black at the base,
   deep brand green above it, and a crisp green rim. */
.pr-card-pop {
  margin-top: -6px; padding-bottom: 36px;
  border: 1.6px solid var(--green-bright);
  background:
    radial-gradient(340px 230px at 18% 0%, rgba(53, 179, 126, .22), transparent 72%),
    linear-gradient(155deg, var(--green-shade) 0%, var(--black-green) 88%);
  color: #fff;
  box-shadow: 0 24px 54px -28px rgba(3, 92, 48, .82);
}

.pr-ico {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 15px;
  border: 1px solid var(--mint-line-3);
  background: var(--mint); color: var(--green-deep);
}
.pr-card-pop .pr-ico {
  border-color: rgba(255, 255, 255, .24);
  background: linear-gradient(140deg, var(--green-vivid), var(--green-deep)); color: #fff;
}
.pr-pop {
  position: absolute; right: 30px; top: 38px;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: linear-gradient(96deg, var(--green-lit), var(--green-dark));
  color: #fff; font-size: 11.4px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}

.pr-card h3 { margin-top: 22px; font-size: 19px; font-weight: 700; }
.pr-price { margin-top: 8px; font-size: 35px; font-weight: 700; letter-spacing: -1px; color: var(--ink); }
.pr-price b { font-weight: 700; }
.pr-price i { font-size: 16px; font-weight: 400; font-style: normal; color: var(--muted); }
.pr-card-pop .pr-price { font-size: 32px; }
.pr-blurb { margin-top: 12px; max-width: 252px; font-size: 14.6px; line-height: 1.5; color: var(--muted-2); }
.pr-card-pop h3,
.pr-card-pop .pr-price,
.pr-card-pop .pr-list li { color: #fff; }
.pr-card-pop .pr-blurb,
.pr-card-pop .pr-price i { color: rgba(255, 255, 255, .74); }

.pr-list {
  margin: 26px 0 0; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 14px;
}
.pr-list li { display: flex; align-items: center; gap: 12px; font-size: 14.6px; color: var(--ink-3); }
.pr-list svg { color: var(--green-lit); flex: none; stroke-width: 2.6; }
.pr-card-pop .pr-list { border-top-color: rgba(255, 255, 255, .17); }
.pr-card-pop .pr-list svg { color: var(--green-pale); }

.pr-cta {
  display: grid; place-items: center;
  margin-top: 26px; height: 50px; border-radius: 11px;
  font-size: 15.4px; font-weight: 700;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.pr-ghost {
  border: 1px solid var(--mint-line-4);
  background: var(--mint); color: var(--green-deep);
}
.pr-ghost:hover {
  border-color: var(--green-deep);
  background: var(--green-deep); color: #fff;
  transform: translateY(-1px);
}
.pr-solid {
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(96deg, var(--green-vivid) 0%, var(--green-deep) 100%);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .82);
}
.pr-solid:hover {
  transform: translateY(-1px);
  background: linear-gradient(96deg, var(--green-lit) 0%, var(--green-dark) 100%);
  box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .88);
}

html[data-theme="dark"] .pr-title span {
  background: linear-gradient(96deg, var(--green-pale) 0%, var(--green-bright) 48%, var(--green-lit) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="dark"] .pr-ghost { color: var(--green-pale); }

/* the four reassurances under the row, divided by hairlines */
.pr-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 54px 0 0;
  text-align: left;
}
.pr-strip li { display: flex; align-items: center; gap: 13px; padding: 10px 16px; }
.pr-strip li + li { border-left: 1px solid var(--line); }
.pr-strip li > svg {
  flex: none; width: 44px; height: 44px; padding: 11px;
  border: 1px solid var(--mint-line); border-radius: 12px;
  background: var(--mint-soft); color: var(--green-lit); box-sizing: border-box;
}
.pr-strip span { display: flex; flex-direction: column; gap: 3px; }
.pr-strip b { font-size: 13.8px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.pr-strip i { font-size: 13px; font-style: normal; color: var(--muted); }

/* ==========================================================================
   FAQ
   --------------------------------------------------------------------------
   From the supplied 1600x600 design: copy on the left from x265, the list on
   the right at 713..1307 (594 wide). The open item is 140 tall on mint, the
   closed ones 62 on white, with 11px between them.
   ========================================================================== */
.fq { padding: 40px 0 70px; }
.fq-in {
  display: grid; grid-template-columns: 377px 594px;
  justify-content: center; gap: 0 71px;
  width: min(1042px, 100%); margin-inline: auto;
}

.fq-badge {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 16px; border-radius: 999px;
  background: var(--line-soft); color: var(--slate);
  font-size: 14px; font-weight: 500;
}
.fq-title { margin: 22px 0 0; font-size: 46px; font-weight: 700; line-height: 1.16; letter-spacing: -1.3px; }
.fq-title span {
  background: linear-gradient(96deg, var(--green-lit) 0%, var(--cyan) 60%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fq-lead { margin: 20px 0 0; max-width: 330px; font-size: 15.6px; line-height: 1.62; color: var(--muted-2); }

.fq-help {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  margin: 30px 0 0; padding: 32px 22px;
  width: 377px;
  border: 1px solid var(--mint-line); border-radius: 16px;
  background: linear-gradient(120deg, var(--mint-soft), var(--ground));
  overflow: hidden;
}
.fq-help-ico {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--mint); color: var(--green-mid);
}
.fq-help-copy { min-width: 0; max-width: 232px; }
.fq-help h3 { font-size: 15.4px; font-weight: 700; }
.fq-help p { margin-top: 7px; font-size: 13.2px; line-height: 1.55; color: var(--muted-2); }
.fq-help a {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px;
  font-size: 13.6px; font-weight: 700; color: var(--green-deep);
  text-decoration: underline; text-underline-offset: 4px;
}
.fq-help-bot { position: absolute; right: 12px; bottom: -6px; width: 70px; height: auto; }

.fq-list { display: grid; gap: 11px; align-content: start; }
.fq-item {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 26px -24px rgba(15, 50, 40, .5);
}
.fq-item[open] { border-color: var(--mint-line-4); background: var(--mint-soft); }
.fq-item summary {
  display: flex; align-items: center; gap: 15px;
  padding: 21px 22px;
  cursor: pointer; list-style: none;
}
.fq-item summary::-webkit-details-marker { display: none; }
.fq-n { font-size: 13px; font-weight: 700; color: var(--green-deep); flex: none; }
.fq-q { flex: 1; min-width: 0; font-size: 14.6px; font-weight: 700; color: var(--ink); }

/* the plus turns into a minus when the item opens, drawn rather than swapped */
.fq-sign { position: relative; flex: none; width: 15px; height: 15px; color: var(--faint); }
.fq-sign::before, .fq-sign::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 15px; height: 1.6px; border-radius: 2px; background: currentColor;
  transform: translateY(-50%);
  transition: transform .18s ease, opacity .18s ease;
}
.fq-sign::after { transform: translateY(-50%) rotate(90deg); }
.fq-item[open] .fq-sign { color: var(--green); }
.fq-item[open] .fq-sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.fq-a { padding: 0 26px 34px 53px; margin-top: -8px; font-size: 13.6px; line-height: 1.72; color: var(--slate); }

@media (max-width: 1330px) {
  .pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fq-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 48px; width: 100%; }
  .fq-help { width: 100%; }
}

@media (max-width: 980px) {
  .pr-grid { grid-template-columns: minmax(0, 420px); justify-content: center; gap: 20px; }
  .pr-card-pop { margin-top: 0; }
  .pr-strip { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .pr-strip li:nth-child(2n + 1) { border-left: 0; }
  .fq-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fq-lead { max-width: none; }
}

@media (max-width: 640px) {
  .pr { padding-top: 48px; }
  .pr-title { font-size: 32px; letter-spacing: -.8px; }
  .pr-strip { grid-template-columns: 1fr; }
  .pr-strip li { border-left: 0 !important; padding: 0; }
  .fq-title { font-size: 34px; }
  .fq-help-bot { display: none; }
  .fq-help-copy { max-width: none; }
  .fq-item summary { padding: 15px 16px; gap: 12px; }
  .fq-q { font-size: 14px; }
  .fq-a { padding: 0 16px 16px 44px; font-size: 13.4px; }
}

/* ==========================================================================
   FOCUS AND SKIP LINK
   --------------------------------------------------------------------------
   The page had no focus styles of its own, so keyboard users were left with
   whatever the browser draws -- which all but disappears on the green and
   mint fills. One visible ring, only for keyboard focus.
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--green-lit);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn-green:focus-visible, .pr-solid:focus-visible {
  outline-color: var(--green-shade);
  outline-offset: 3px;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 12px 18px; border-radius: 0 0 10px 10px;
  background: var(--green-shade); color: #fff; font-size: 15px; font-weight: 700;
  transition: top .16s ease;
}
.skip:focus { top: 0; }
main:focus { outline: none; }

/* Touch targets. The footer and nav links are 16-20px of text; on a touch
   screen that is a small thing to hit. The padding grows the hit area and the
   negative margin gives the space back, so nothing moves visually. */
@media (pointer: coarse) {
  .ft-col a, .ft-social a, .hd-link, .hd-signin, .fq-help a, .pane-chips span {
    padding-block: 10px;
    margin-block: -10px;
  }
}

/* Compact footer navigation for phones. The brand keeps its own row, followed
   by Product, Resources and Company in one equal three-column navigation row. */
@media (max-width: 560px) {
  .ft { padding-top: 32px; }

  .ft-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 8px;
    align-items: start;
  }

  .ft-brand {
    grid-column: 1 / -1;
    margin-bottom: 10px;
  }

  .ft-social {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
  }

  .ft-social li {
    min-width: 0;
  }

  .ft-social a {
    width: 100%;
    max-width: 48px;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    justify-self: center;
    border-radius: 12px;
  }

  .ft-col {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .ft-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 15px;
    letter-spacing: -.2px;
  }

  .ft-tile {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: transparent;
  }

  .ft-tile svg {
    width: 19px;
    height: 19px;
  }

  .ft-col::before {
    display: none;
  }

  .ft-col ul {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 12px 0 0;
  }

  .ft-col li + li {
    margin-top: 0;
  }

  .ft-col li {
    border-bottom: 1px solid var(--line-soft);
  }

  .ft-col li:last-child {
    border-bottom: 0;
  }

  .ft-col a,
  .ft-col a:hover {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .ft-col a:hover {
    color: var(--green-deep);
  }

  .ft-base {
    margin-top: 28px;
  }

  .ft-copy {
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.45;
  }

  .ft-copy span {
    width: 100%;
    margin-left: 33px;
  }
}

/* ==========================================================================
   Mega-menus — Product and Resources. The nav hides below 1120, so these only
   ever run on a desktop-width header.
   ========================================================================== */
.hd-nav { position: relative; }

.mm {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  z-index: 95;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  width: 460px;
  padding: 18px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 30px 70px -34px rgba(9, 50, 33, .45), 0 2px 8px rgba(16, 24, 40, .05);
}
.mm[hidden] { display: none; }
.mm-wide { grid-template-columns: minmax(0, 1fr) 232px; width: 760px; }

.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.mm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  color: var(--ink);
}
.mm-item:hover { background: var(--mint-soft); }
.mm-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--mint);
  color: var(--green);
}
.mm-ico svg { stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mm-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mm-txt b { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.mm-txt small { font-size: 12.6px; line-height: 1.45; color: var(--muted-2); }

.mm-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--mint-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--mint-soft), var(--mint));
}
.mm-promo img { width: 76px; height: auto; }
.mm-promo b { font-size: 15px; font-weight: 700; }
.mm-promo p { margin: 0; font-size: 12.6px; line-height: 1.5; color: var(--slate); }
.mm-promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: auto;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--green-lit), var(--green));
  color: #fff;
  font-size: 13.8px;
  font-weight: 600;
}
.mm-promo-cta:hover { filter: brightness(1.05); }

/* The trigger is a button now, so it needs the link's own metrics back. */
.hd-nav button.hd-link {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.hd-nav button.hd-link[aria-expanded="true"] { color: var(--green); }
.hd-nav button.hd-link[aria-expanded="true"] svg { transform: rotate(180deg); }