:root {
  --navy: #12224b;
  --ink: #26355f;
  --muted: #68728a;
  --green: #3f7548;
  --green-dark: #2e6038;
  --green-soft: #eef6eb;
  --coral: #f05d3c;
  --purple: #7654df;
  --blue: #4c83d0;
  --line: #e7e8ec;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Desktop/tablet blueprint refresh. This scope is intentionally separate from the mobile flow. */
@media (min-width: 681px) {
  .desktop-refresh {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    color: var(--navy);
    background: #fff;
  }

  .desktop-refresh *,
  .desktop-refresh *::before,
  .desktop-refresh *::after { box-sizing: border-box; }

  .desktop-refresh h1,
  .desktop-refresh h2,
  .desktop-refresh h3,
  .desktop-refresh p { margin: 0; }

  .desktop-refresh a { color: inherit; text-decoration: none; }
  .desktop-refresh img,
  .desktop-refresh svg { display: block; max-width: 100%; }

  .desktop-refresh-header,
  .desktop-refresh-hero,
  .desktop-refresh-insights,
  .desktop-refresh-actions,
  .desktop-refresh-bottom,
  .desktop-refresh-footer {
    width: min(1280px, calc(100% - 64px));
    margin-inline: auto;
  }

  .desktop-refresh-header {
    min-height: 74px;
    padding: 12px 0 10px;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
  }

  .desktop-refresh-brand img { width: 128px; height: auto; }

  .desktop-refresh-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(17px, 2.2vw, 36px);
    color: var(--navy);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .desktop-refresh-nav a {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-bottom: 2px solid transparent;
  }

  .desktop-refresh-nav a:hover,
  .desktop-refresh-nav a.is-active { border-bottom-color: var(--green); }
  .desktop-refresh-nav svg { width: 11px; height: 11px; stroke-width: 2; }

  .desktop-refresh-header-cta,
  .desktop-refresh-button {
    min-height: 38px;
    padding: 10px 17px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #fff !important;
    background: var(--green);
    border-radius: 999px;
    box-shadow: 0 8px 16px rgba(49, 91, 58, .16);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.15;
  }

  .desktop-refresh-header-cta { min-width: 245px; }
  .desktop-refresh-header-cta svg,
  .desktop-refresh-button svg { width: 16px; height: 16px; flex: none; stroke-width: 1.7; }
  .desktop-refresh-header-cta:hover,
  .desktop-refresh-button:hover { background: var(--green-dark); }

  .desktop-refresh-hero {
    min-height: 455px;
    padding: 18px 0 19px;
    display: grid;
    grid-template-columns: minmax(390px, .9fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: center;
  }

  .desktop-refresh-hero-copy { position: relative; z-index: 2; padding-left: 22px; }

  .desktop-refresh-eyebrow {
    margin-bottom: 12px !important;
    color: var(--green-dark);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
    line-height: 1.2;
  }

  .desktop-refresh-hero h1 {
    max-width: 545px;
    color: var(--navy);
    font: 700 clamp(41px, 4.45vw, 54px)/.96 var(--serif);
    letter-spacing: -.055em;
  }

  .desktop-refresh-hero h1 span,
  .desktop-refresh-closing h2 span { color: var(--green); }

  .desktop-refresh-lead {
    max-width: 500px;
    margin-top: 19px !important;
    color: var(--ink);
    font-size: 13px;
    font-style: italic;
    line-height: 1.55;
  }

  .desktop-refresh-hero .desktop-refresh-button {
    width: min(100%, 360px);
    margin-top: 20px;
  }

  .desktop-refresh-trust {
    max-width: 560px;
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 25px;
    color: #355842;
    font-size: 9px;
    font-weight: 800;
  }

  .desktop-refresh-trust span,
  .desktop-refresh-closing-trust span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .desktop-refresh-trust svg,
  .desktop-refresh-closing-trust svg { width: 12px; height: 12px; color: var(--green); stroke-width: 2; }

  .desktop-refresh-hero-art {
    min-height: 430px;
    position: relative;
    isolation: isolate;
  }

  .desktop-refresh-hero-image {
    width: min(550px, 100%);
    position: absolute;
    z-index: 1;
    top: -34px;
    right: 18px;
  }

  .desktop-refresh-hero-image img { width: 100%; height: auto; object-fit: contain; }

  .desktop-refresh-privacy {
    width: 285px;
    min-height: 84px;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 151px;
    padding: 14px 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--navy);
    background: rgba(241, 239, 255, .88);
    border-radius: 11px;
  }

  .desktop-refresh-privacy-icon {
    width: 33px;
    height: 33px;
    flex: none;
    display: grid;
    place-items: center;
    color: #5f51c8;
    background: #e8e6ff;
    border-radius: 50%;
  }

  .desktop-refresh-privacy-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
  .desktop-refresh-privacy p { font-size: 9px; line-height: 1.35; }
  .desktop-refresh-privacy b { font-weight: 900; }

  .desktop-refresh-story-grid {
    width: min(650px, 100%);
    position: absolute;
    right: -4px;
    bottom: -1px;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    text-align: center;
  }

  .desktop-refresh-story-icon,
  .desktop-refresh-process-icon,
  .desktop-refresh-audience-icon {
    display: grid;
    place-items: center;
    border-radius: 50%;
  }

  .desktop-refresh-story-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 8px;
  }

  .desktop-refresh-story-icon svg { width: 22px; height: 22px; stroke-width: 1.7; }
  .refresh-story-green { color: #4d8848; background: #eef7ea; }
  .refresh-story-blue { color: #4f86d5; background: #edf3ff; }
  .refresh-story-purple { color: #7953e1; background: #f2ebff; }
  .refresh-story-coral { color: #ef6a45; background: #fff0e9; }
  .desktop-refresh-story-grid h3 { min-height: 26px; color: var(--navy); font: 700 12px/1.08 var(--serif); }
  .desktop-refresh-story-grid p { margin-top: 5px !important; color: #5d6980; font-size: 8px; line-height: 1.35; }

  .desktop-refresh-insights {
    padding: 26px 22px 25px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .75fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    background: #fbfcf8;
    border-top: 1px solid #f0f2ed;
    border-bottom: 1px solid #f0f2ed;
  }

  .desktop-refresh-how h2,
  .desktop-refresh-dashboard h2 {
    color: var(--navy);
    font: 700 clamp(28px, 2.7vw, 40px)/.99 var(--serif);
    letter-spacing: -.045em;
  }

  .desktop-refresh-process {
    margin-top: 21px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .desktop-refresh-process article { min-width: 0; position: relative; text-align: center; }
  .desktop-refresh-process article::after { content: ""; height: 1px; position: absolute; top: 22px; left: calc(50% + 25px); right: -13px; background: #d4dccf; }
  .desktop-refresh-process article:last-child::after { display: none; }
  .desktop-refresh-process-icon { width: 52px; height: 52px; margin: 0 auto 3px; position: relative; z-index: 1; }
  .desktop-refresh-process-icon svg { width: 22px; height: 22px; stroke-width: 1.7; }
  .refresh-process-green { color: #578c4f; background: #eff7ec; }
  .refresh-process-blue { color: #4e86dc; background: #edf3ff; }
  .refresh-process-purple { color: #7b55dc; background: #f1ebff; }
  .refresh-process-lime { color: #71943d; background: #eef6df; }
  .refresh-process-coral { color: #ec6c4e; background: #fff0e9; }
  .desktop-refresh-process article > b { display: block; color: #6d7b87; font-size: 8px; font-weight: 900; }
  .desktop-refresh-process h3 { min-height: 25px; margin-top: 3px; color: var(--navy); font: 700 11px/1.08 var(--serif); }
  .desktop-refresh-process p { margin-top: 8px !important; color: #58657c; font-size: 8px; line-height: 1.4; }

  .desktop-refresh-phone { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .desktop-refresh-phone img { width: min(100%, 340px); height: 360px; object-fit: contain; }
  .desktop-refresh-phone p { max-width: 250px; margin-top: 4px !important; color: #344667; font: 500 12px/1.35 var(--serif); }

  .desktop-refresh-dashboard { min-width: 0; }
  .desktop-refresh-dashboard h2 { font-size: clamp(27px, 2.5vw, 36px); }
  .desktop-refresh-dashboard > img { width: 100%; margin: 5px auto 0; object-fit: contain; }
  .desktop-refresh-dashboard > p:last-child { max-width: 460px; margin: -1px auto 0 !important; color: #354665; text-align: center; font-size: 9px; line-height: 1.4; }

  .desktop-refresh-actions {
    padding: 12px 0 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 12px;
  }

  .desktop-refresh-action,
  .desktop-refresh-closing {
    min-height: 165px;
    position: relative;
    overflow: hidden;
    padding: 19px 20px;
    border: 1px solid transparent;
    border-radius: 13px;
  }

  .desktop-refresh-action-green { display: grid; grid-template-columns: minmax(0, 1fr) 74px; background: linear-gradient(118deg, #f4f8ef, #fcfdfb); border-color: #e8eee0; }
  .desktop-refresh-action-purple { display: grid; grid-template-columns: minmax(0, 1fr) 78px; background: linear-gradient(118deg, #f8f5ff, #fcfbff); border-color: #ece6fb; }
  .desktop-refresh-action .desktop-refresh-eyebrow { margin-bottom: 13px !important; }
  .desktop-refresh-action ul { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; list-style: none; color: var(--ink); font-size: 8px; font-weight: 700; }
  .desktop-refresh-action-purple ul { grid-template-columns: 1fr; }
  .desktop-refresh-action li { display: flex; align-items: center; gap: 7px; }
  .desktop-refresh-action li svg { width: 12px; height: 12px; flex: none; color: var(--green); stroke-width: 2; }
  .desktop-refresh-action-purple li svg { color: #9271e5; }
  .desktop-refresh-action-art { width: 76px; align-self: end; }
  .desktop-refresh-action-art svg { width: 100%; height: auto; }
  .desktop-refresh-clipboard { display: grid; place-items: center; align-self: center; color: #a780e9; opacity: .75; }
  .desktop-refresh-clipboard svg { width: 70px; height: 70px; stroke-width: 1.2; }

  .desktop-refresh-closing { padding: 18px 20px 15px; background: linear-gradient(118deg, #fff4ec, #fffaf8); border-color: #f4e9e1; }
  .desktop-refresh-closing .desktop-refresh-eyebrow { margin-bottom: 7px !important; }
  .desktop-refresh-closing h2 { color: var(--navy); font: 700 20px/1.02 var(--serif); letter-spacing: -.035em; }
  .desktop-refresh-closing h2 span { color: var(--coral); }
  .desktop-refresh-closing > p:not(.desktop-refresh-eyebrow) { margin-top: 7px !important; color: #46546b; font-size: 8px; line-height: 1.35; }
  .desktop-refresh-closing .desktop-refresh-button { min-height: 32px; width: min(100%, 220px); margin-top: 10px; padding: 8px 12px; font-size: 8px; }
  .desktop-refresh-closing-trust { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px 12px; color: #40526b; font-size: 7px; font-weight: 750; }
  .desktop-refresh-closing-trust span { gap: 4px; }
  .desktop-refresh-closing-trust svg { width: 10px; height: 10px; }

  .desktop-refresh-bottom {
    padding: 18px 22px 19px;
    display: grid;
    grid-template-columns: minmax(260px, .95fr) minmax(0, 1.8fr);
    grid-template-areas: "partners audience" "phase phase";
    gap: 18px 30px;
    align-items: center;
    border-top: 1px solid #f0f1ef;
  }

  .desktop-refresh-partners { grid-area: partners; }
  .desktop-refresh-partners h2 { color: var(--navy); font: 700 clamp(28px, 2.6vw, 39px)/.99 var(--serif); letter-spacing: -.045em; }
  .desktop-refresh-partners > p:last-child { max-width: 340px; margin-top: 12px !important; color: #53617a; font-size: 9px; line-height: 1.45; }
  .desktop-refresh-audience-grid { grid-area: audience; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; text-align: center; }
  .desktop-refresh-audience-icon { width: 42px; height: 42px; margin: 0 auto 8px; }
  .desktop-refresh-audience-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
  .refresh-audience-green { color: #4a884e; background: #eef7ec; }
  .refresh-audience-blue { color: #4f86d5; background: #edf3ff; }
  .refresh-audience-coral { color: #ee6a47; background: #fff0e9; }
  .desktop-refresh-audience-grid span { display: block; color: var(--navy); font-size: 8px; font-weight: 800; line-height: 1.25; }

  .desktop-refresh-phase { grid-area: phase; min-height: 126px; padding: 16px 22px; display: grid; grid-template-columns: 1fr 100px; gap: 15px; align-items: center; background: #f8f8ef; border: 1px solid #eef0e3; border-radius: 13px; }
  .desktop-refresh-phase .desktop-refresh-eyebrow { margin-bottom: 6px !important; }
  .desktop-refresh-phase h2 { color: var(--navy); font: 700 24px/1 var(--serif); letter-spacing: -.04em; }
  .desktop-refresh-phase > div:first-child > p:last-child { max-width: 570px; margin-top: 7px !important; color: #536078; font-size: 8px; line-height: 1.4; }
  .desktop-refresh-phase-art { width: 100px; justify-self: end; }

  .desktop-refresh-footer { padding: 17px 22px 21px; display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 22px; border-top: 1px solid #e9ebeb; }
  .desktop-refresh-footer > div:not(.desktop-refresh-footer-brand) { display: grid; align-content: start; gap: 5px; color: #59667e; font-size: 8px; }
  .desktop-refresh-footer strong { margin-bottom: 3px; color: var(--navy); font-size: 8px; }
  .desktop-refresh-footer a:hover { color: var(--coral); }
  .desktop-refresh-footer-brand img { width: 112px; height: auto; }
  .desktop-refresh-footer-brand p { max-width: 170px; margin-top: 7px !important; color: #68748a; font-size: 8px; line-height: 1.4; }
  .desktop-refresh-footer-brand small { display: block; margin-top: 12px; color: #8b94a4; font-size: 7px; }
}

@media (min-width: 681px) and (max-width: 1050px) {
  .desktop-refresh-header,
  .desktop-refresh-hero,
  .desktop-refresh-insights,
  .desktop-refresh-actions,
  .desktop-refresh-bottom,
  .desktop-refresh-footer { width: min(100% - 36px, 920px); }

  .desktop-refresh-header { grid-template-columns: 115px minmax(0, 1fr) auto; gap: 12px; }
  .desktop-refresh-brand img { width: 108px; }
  .desktop-refresh-nav { gap: 12px; font-size: 8px; }
  .desktop-refresh-header-cta { min-width: 192px; padding-inline: 12px; font-size: 8px; }
  .desktop-refresh-hero { grid-template-columns: minmax(300px, .87fr) minmax(0, 1.13fr); gap: 8px; min-height: 415px; }
  .desktop-refresh-hero-copy { padding-left: 8px; }
  .desktop-refresh-hero h1 { font-size: clamp(35px, 5vw, 50px); }
  .desktop-refresh-hero-art { min-height: 380px; }
  .desktop-refresh-hero-image { width: 505px; top: -25px; right: -52px; }
  .desktop-refresh-privacy { width: 245px; left: -7px; bottom: 142px; }
  .desktop-refresh-privacy p { font-size: 8px; }
  .desktop-refresh-story-grid { right: -8px; gap: 4px; }
  .desktop-refresh-story-grid h3 { font-size: 10px; }
  .desktop-refresh-story-grid p { font-size: 7px; }
  .desktop-refresh-insights { grid-template-columns: minmax(0, 1fr) minmax(140px, .75fr) minmax(0, 1fr); gap: 15px; padding-inline: 8px; }
  .desktop-refresh-how h2, .desktop-refresh-dashboard h2 { font-size: clamp(25px, 3vw, 32px); }
  .desktop-refresh-process { gap: 4px; }
  .desktop-refresh-process article::after { left: calc(50% + 23px); right: -8px; }
  .desktop-refresh-process h3 { font-size: 9px; }
  .desktop-refresh-process p { font-size: 7px; }
  .desktop-refresh-phone img { height: 320px; }
  .desktop-refresh-phone p { font-size: 10px; }
  .desktop-refresh-action,
  .desktop-refresh-closing { padding-inline: 14px; }
  .desktop-refresh-action ul { gap: 6px 8px; font-size: 7px; }
  .desktop-refresh-bottom { grid-template-columns: minmax(220px, .9fr) minmax(0, 1.7fr); gap: 15px; padding-inline: 8px; }
  .desktop-refresh-audience-grid { gap: 4px; }
  .desktop-refresh-audience-grid span { font-size: 7px; }
  .desktop-refresh-footer { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 10px; padding-inline: 8px; }
}

@media (min-width: 681px) and (max-width: 800px) {
  .desktop-refresh-header { grid-template-columns: 95px minmax(0, 1fr) auto; }
  .desktop-refresh-brand img { width: 90px; }
  .desktop-refresh-nav { gap: 8px; font-size: 7px; }
  .desktop-refresh-header-cta { min-width: 165px; font-size: 7px; }
  .desktop-refresh-hero h1 { font-size: 34px; }
  .desktop-refresh-lead { font-size: 10px; }
  .desktop-refresh-trust { gap: 6px 10px; font-size: 7px; }
  .desktop-refresh-hero-art { min-height: 340px; }
  .desktop-refresh-hero-image { top: -18px; width: 465px; right: -82px; }
  .desktop-refresh-privacy { width: 205px; min-height: 67px; bottom: 125px; padding: 9px; gap: 7px; }
  .desktop-refresh-privacy-icon { width: 27px; height: 27px; }
  .desktop-refresh-privacy p { font-size: 7px; }
  .desktop-refresh-story-icon { width: 34px; height: 34px; }
  .desktop-refresh-story-icon svg { width: 17px; height: 17px; }
  .desktop-refresh-story-grid h3 { font-size: 8px; }
  .desktop-refresh-story-grid p { font-size: 6px; }
  .desktop-refresh-insights { grid-template-columns: 1fr .75fr 1fr; }
  .desktop-refresh-process-icon { width: 38px; height: 38px; }
  .desktop-refresh-process-icon svg { width: 17px; height: 17px; }
  .desktop-refresh-process article::after { top: 19px; left: calc(50% + 20px); }
  .desktop-refresh-action-art { width: 54px; }
  .desktop-refresh-clipboard svg { width: 50px; height: 50px; }
  .desktop-refresh-closing h2 { font-size: 16px; }
  .desktop-refresh-phase { grid-template-columns: 1fr 76px; }
  .desktop-refresh-phase-art { width: 76px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--navy); background: #f2f1ee; font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, svg { display: block; max-width: 100%; }
.mockup-page h1, .mockup-page h2, .mockup-page h3, .mockup-page h4, .mockup-page p { margin: 0; }

.mockup-page { width: min(1230px, calc(100% - 28px)); margin: 18px auto; }
.mockup-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mockup-panel { overflow: hidden; background: #fff; border: 1px solid #e0e2e5; border-radius: 18px; box-shadow: 0 16px 36px rgba(28, 36, 58, .1); }
.mockup-panel-left { padding-bottom: 25px; }
.mockup-panel-right { padding: 35px 32px 22px; }

.mockup-header { height: 78px; padding: 0 29px; display: flex; align-items: center; justify-content: space-between; }
.mockup-brand { display: inline-flex; align-items: center; }.mockup-brand img { width: 146px; height: auto; }
.mockup-menu-button { width: 42px; height: 42px; padding: 10px; display: grid; align-content: center; gap: 4px; color: var(--navy); background: #fff; border: 1px solid #e0e4ea; border-radius: 50%; box-shadow: 0 5px 12px rgba(18, 34, 75, .08); cursor: pointer; }
.mockup-menu-button span { width: 19px; height: 2px; margin: 0 auto; display: block; background: currentColor; border-radius: 9px; transition: transform .2s, opacity .2s; }
.mockup-menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }.mockup-menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }.mockup-menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mockup-mobile-menu { margin: 0 25px 16px; padding: 9px; position: relative; z-index: 5; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 26px rgba(22, 32, 65, .1); }
.mockup-mobile-menu[hidden] { display: none; }.mockup-mobile-menu a { padding: 11px 7px; border-radius: 9px; text-align: center; color: var(--navy); font-size: 10px; font-weight: 800; }.mockup-mobile-menu a:hover { color: var(--green-dark); background: var(--green-soft); }.mockup-mobile-menu a:last-child { grid-column: 1 / -1; color: #fff; background: var(--green); }

.mockup-hero { padding: 30px 34px 23px; }
.mockup-eyebrow { margin-bottom: 12px !important; color: var(--green-dark); font-size: 9px; line-height: 1.15; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.mockup-hero h1 { max-width: 520px; color: var(--navy); font: 700 clamp(37px, 4vw, 53px)/1.02 var(--serif); letter-spacing: -.045em; }
.mockup-hero h1 span { color: var(--coral); }.mockup-lead { max-width: 470px; margin-top: 18px !important; color: var(--ink); font-size: 13px; line-height: 1.6; }
.mockup-button { min-height: 45px; padding: 12px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border-radius: 999px; font-size: 11px; font-weight: 850; line-height: 1.2; transition: transform .2s, box-shadow .2s, background .2s; }.mockup-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(31, 78, 41, .18); }.mockup-button svg.lucide { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mockup-button-primary { width: min(100%, 340px); margin-top: 23px; color: #fff; background: var(--green); box-shadow: 0 8px 14px rgba(44, 90, 50, .18); }.mockup-button-green { width: 100%; color: #fff; background: var(--green); }
.mockup-trust { max-width: 460px; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; color: #334d3b; font-size: 8px; font-weight: 760; }.mockup-trust span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }.mockup-trust svg.lucide { width: 11px; height: 11px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mockup-lake-scene { height: 336px; position: relative; margin: 0 24px; }.mockup-lake-blob { position: absolute; border-radius: 50%; }.mockup-lake-blob-purple { width: 83%; height: 50%; top: 5px; right: 0; background: #f4f0ff; transform: rotate(-7deg); }.mockup-lake-blob-green { width: 88%; height: 44%; right: -1%; bottom: 20px; background: #f0f7eb; transform: rotate(8deg); }
.mockup-lake-image { width: 74%; height: 221px; position: absolute; z-index: 1; top: 18px; left: 12%; overflow: hidden; border: 7px solid #fff; border-radius: 50%; box-shadow: 0 12px 24px rgba(27, 43, 72, .12); transform: rotate(-2deg); }.mockup-lake-image img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 48%; }
.mockup-benefits-card { width: 88%; position: absolute; z-index: 2; right: 2%; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: rgba(255, 255, 255, .96); border: 1px solid #e9ebed; border-radius: 15px; box-shadow: 0 9px 22px rgba(24, 38, 70, .11); }.mockup-benefit { min-height: 61px; padding: 10px 11px; display: flex; align-items: center; gap: 9px; color: var(--navy); font-size: 8px; font-weight: 800; line-height: 1.25; }.mockup-benefit:nth-child(odd) { border-right: 1px solid #edf0f1; }.mockup-benefit:nth-child(-n+2) { border-bottom: 1px solid #edf0f1; }.mockup-benefit svg.lucide { flex: none; width: 25px; height: 25px; fill: none; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.mockup-benefit:nth-child(2) svg.lucide { stroke: #b58a28; }.mockup-benefit:nth-child(3) svg.lucide { stroke: #7067d9; }.mockup-benefit:nth-child(4) svg.lucide { stroke: var(--coral); }

.mockup-section { padding: 28px 34px 0; border-top: 1px solid #eef0f0; }.mockup-needs-section { margin-top: 1px; }.mockup-section h2, .mockup-picture-section h2, .mockup-phase-card h2 { color: var(--navy); font: 700 clamp(27px, 3.1vw, 39px)/1.06 var(--serif); letter-spacing: -.045em; }.mockup-section h2 span { color: var(--green); }.mockup-body-copy { max-width: 460px; margin-top: 15px !important; color: #4b5873; font-size: 11px; line-height: 1.55; }
.mockup-live-link { min-height: 42px; margin-top: 22px; padding: 8px 9px; display: flex; align-items: center; gap: 8px; color: var(--navy); border: 1px solid #e9eaf0; border-radius: 11px; box-shadow: 0 3px 10px rgba(18, 34, 75, .04); font-size: 8px; }.mockup-live-link strong { flex: 1; }.mockup-live-link > svg.lucide { width: 17px; height: 17px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.mockup-live-icon { width: 24px; height: 24px; display: grid; place-items: center; color: #5b6bd4; background: #eceeff; border-radius: 50%; }.mockup-live-icon svg.lucide { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mockup-snapshot-card { margin-top: 0; padding: 12px 12px 14px; border: 1px solid #e9eaed; border-radius: 12px; box-shadow: 0 8px 16px rgba(21, 33, 68, .08); }.mockup-snapshot-head { padding-bottom: 10px; display: flex; justify-content: space-between; border-bottom: 1px solid #edf0f2; }.mockup-snapshot-head strong { font-size: 9px; }.mockup-snapshot-head span { color: var(--green-dark); font-size: 9px; font-weight: 800; }.mockup-snapshot-head small { display: block; margin-top: 4px; color: #8790a3; font-size: 7px; }.mockup-snapshot-head > svg.lucide { width: 15px; height: 15px; color: #8d96a7; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mockup-snapshot-stats { padding: 11px 0; display: grid; grid-template-columns: 1fr 1fr 1.45fr; border-bottom: 1px solid #edf0f2; }.mockup-snapshot-stats > div { min-width: 0; padding: 0 9px; display: grid; gap: 5px; border-right: 1px solid #edf0f2; }.mockup-snapshot-stats > div:first-child { padding-left: 0; }.mockup-snapshot-stats > div:last-child { padding-right: 0; border-right: 0; }.mockup-snapshot-stats small { color: #69758d; font-size: 7px; }.mockup-snapshot-stats b { min-width: 0; color: var(--navy); font: 500 21px/1 var(--serif); }.mockup-snapshot-stats > div:last-child b { font: 800 8px/1.2 var(--sans); }.mockup-snapshot-stats em { display: block; margin-top: 3px; color: var(--navy); font-style: normal; font-size: 15px; font-weight: 500; }
.mockup-snapshot-chart { padding-top: 11px; display: grid; gap: 9px; }.mockup-snapshot-chart > strong { margin-bottom: 1px; font-size: 8px; }.mockup-snapshot-chart > div { display: grid; grid-template-columns: 1.05fr 2fr auto; gap: 7px; align-items: center; color: #55627a; font-size: 7px; }.mockup-snapshot-chart i { height: 5px; display: block; overflow: hidden; background: #eef1ed; border-radius: 99px; }.mockup-snapshot-chart i em { height: 100%; display: block; background: var(--green); border-radius: inherit; }.mockup-snapshot-chart b { color: #6e778c; font-size: 7px; }

.mockup-how-section { padding-top: 29px; padding-bottom: 4px; }.mockup-how-section h2 { font-size: clamp(28px, 3.5vw, 40px); }.mockup-vertical-process { margin: 23px 0 0 5px; position: relative; display: grid; gap: 15px; }.mockup-vertical-process::before { content: ""; width: 1px; position: absolute; top: 33px; bottom: 35px; left: 22px; background: repeating-linear-gradient(to bottom, #bfcae0 0 5px, transparent 5px 10px); }.mockup-vertical-process article { min-height: 58px; position: relative; display: grid; grid-template-columns: 45px 17px 1fr; gap: 7px; align-items: start; }.mockup-process-icon { width: 43px; height: 43px; position: relative; z-index: 1; display: grid; place-items: center; border-radius: 50%; }.mockup-process-icon svg.lucide { width: 21px; height: 21px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.process-green { color: #4a894c; background: #eff7ed; }.process-blue { color: #397ed4; background: #edf3ff; }.process-purple { color: #7351dc; background: #f3edff; }.process-lime { color: #708f38; background: #eef5dd; }.process-coral { color: #ec6a46; background: #fff0ea; }.mockup-process-number { padding-top: 14px; color: var(--navy); font-size: 9px; font-weight: 850; }.mockup-vertical-process article h3 { margin: 1px 0 4px; color: var(--navy); font-size: 10px; line-height: 1.2; }.mockup-vertical-process article p { max-width: 300px; color: #5b6780; font-size: 8px; line-height: 1.45; }

.mockup-picture-section { padding: 0; }.mockup-picture-section h2 { max-width: 470px; font-size: clamp(29px, 3.4vw, 42px); }.mockup-story-phone-wrap { height: 405px; position: relative; margin-top: 12px; }.mockup-story-blob { position: absolute; z-index: 0; border-radius: 50%; }.story-blob-green { width: 56%; height: 28%; top: 28px; right: 1%; background: #edf6e5; transform: rotate(12deg); }.story-blob-blue { width: 60%; height: 28%; top: 112px; left: -2%; background: #edf2ff; transform: rotate(20deg); }.story-blob-purple { width: 57%; height: 28%; top: 214px; left: 0; background: #f1eaff; transform: rotate(-11deg); }.story-blob-coral { width: 60%; height: 29%; top: 176px; right: -1%; background: #fff0e8; transform: rotate(13deg); }
.mockup-story-phone { width: 191px; height: 366px; padding: 7px; position: absolute; z-index: 1; top: 21px; left: 50%; transform: translateX(-50%); background: #131416; border: 4px solid #1c1d1f; border-radius: 28px; box-shadow: 0 12px 18px rgba(12, 17, 22, .24); }.mockup-story-phone::after { content: ""; width: 3px; height: 41px; position: absolute; top: 73px; left: -7px; background: #202226; border-radius: 2px; }.mockup-phone-notch { width: 56px; height: 9px; position: absolute; z-index: 3; top: 7px; left: 50%; transform: translateX(-50%); background: #111; border-radius: 99px; }.mockup-phone-screen { height: 100%; overflow: hidden; padding: 21px 10px 10px; background: #fff; border-radius: 20px; }.mockup-phone-brand { display: flex; align-items: center; gap: 4px; color: var(--navy); font-size: 7px; }.mockup-phone-mark { width: 15px; height: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #e8a63c, #5c8fc6); border-radius: 50%; font-size: 8px; }.mockup-question-count { display: block; margin-top: 17px; color: #5e6980; font-size: 7px; }.mockup-phone-screen h4 { margin: 7px 0 4px; color: var(--navy); font-size: 9px; line-height: 1.35; }.mockup-phone-screen > p { margin: 0 0 9px; color: #7f899d; font-size: 6px; }.mockup-phone-screen label { min-height: 23px; margin-top: 4px; padding: 5px 6px; display: flex; align-items: center; gap: 7px; color: #536079; border: 1px solid #dfe2e7; border-radius: 5px; font-size: 6px; }.mockup-phone-screen label svg.lucide { width: 10px; height: 10px; flex: none; fill: none; stroke: #a3abb9; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.mockup-phone-screen label.selected { color: #42526d; border-color: #becbc1; background: #fff; }.mockup-phone-screen label.selected svg.lucide { padding: 1px; color: #fff; background: var(--green); border-radius: 2px; stroke: #fff; }.mockup-phone-screen button { width: 100%; min-height: 29px; margin-top: 8px; padding: 6px 10px; display: flex; align-items: center; justify-content: center; gap: 18px; color: #fff; background: var(--green); border: 0; border-radius: 999px; font-size: 7px; font-weight: 850; }.mockup-phone-screen button svg.lucide { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mockup-picture-lead { max-width: 315px; margin: -2px auto 15px !important; color: #334362; text-align: center; font: 500 14px/1.35 var(--serif); }.mockup-story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; text-align: center; }.mockup-story-icon { width: 46px; height: 46px; margin: 0 auto 9px; display: grid; place-items: center; border-radius: 50%; }.mockup-story-icon svg.lucide { width: 22px; height: 22px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.story-green { color: #568343; background: #f0f8e9; }.story-blue { color: #4f83d5; background: #edf3ff; }.story-purple { color: #7951e3; background: #f1eaff; }.story-coral { color: #f06b46; background: #fff0ea; }.mockup-story-grid h3 { min-height: 26px; color: var(--navy); font: 700 13px/1.12 var(--serif); }.mockup-story-grid p { margin-top: 6px !important; color: #5f6b82; font-size: 8px; line-height: 1.45; }
.mockup-privacy-note { margin-top: 22px; padding: 13px 14px; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; background: linear-gradient(100deg, #f2f3ff, #fafaff); border: 1px solid #e7e7f5; border-radius: 13px; }.mockup-lock { width: 36px; height: 36px; display: grid; place-items: center; color: var(--navy); background: #e7e7ff; border-radius: 50%; }.mockup-lock svg.lucide { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.mockup-privacy-note p { color: #3c4b6a; font-size: 8px; line-height: 1.4; }.mockup-privacy-note b { color: var(--navy); font-size: 9px; }

.mockup-handoff-section { margin-top: 15px; display: grid; gap: 10px; }.mockup-handoff-card { padding: 14px 16px; border: 1px solid #e9eceb; border-radius: 13px; }.mockup-handoff-green { background: linear-gradient(115deg, #f0f8ec, #fbfdf9); }.mockup-handoff-blue { background: linear-gradient(115deg, #faf9ff, #fbfaff); }.mockup-handoff-card h3 { margin-bottom: 10px !important; font: 700 16px/1.1 var(--serif); }.mockup-handoff-green h3 { color: var(--green-dark); }.mockup-handoff-blue h3 { color: var(--navy); }.mockup-handoff-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 15px; }.mockup-handoff-blue > div { grid-template-columns: 1fr; }.mockup-handoff-card span { display: flex; align-items: center; gap: 6px; color: #41506b; font-size: 8px; line-height: 1.3; }.mockup-handoff-card span svg.lucide { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.mockup-handoff-blue span svg.lucide { stroke: var(--coral); }

.mockup-partners-section { margin-top: 15px; padding: 24px 0 0; border-top: 1px solid #eef0f0; }.mockup-partners-section h2 { font-size: clamp(28px, 3.4vw, 39px); }.mockup-audience-list { margin: 19px 0 14px; padding: 0; display: grid; gap: 9px; list-style: none; }.mockup-audience-list li { display: flex; align-items: center; gap: 9px; color: var(--navy); font-size: 9px; font-weight: 750; }.mockup-audience-list svg.lucide { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.mockup-partner-note { max-width: 335px; color: #58657c; font-size: 9px; line-height: 1.5; }
.mockup-phase-card { min-height: 177px; margin-top: 19px; padding: 18px; display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: center; background: #f8f9f6; border: 1px solid #e9ece8; border-radius: 14px; }.mockup-phase-card .mockup-eyebrow { margin-bottom: 8px !important; font-size: 8px; }.mockup-phase-card h2 { font-size: clamp(24px, 3vw, 35px); }.mockup-phase-card > div:first-child > p:not(.mockup-eyebrow) { margin-top: 8px !important; color: #4b5870; font-size: 8px; line-height: 1.4; }.mockup-sprout-art { width: 94px; height: 94px; justify-self: end; }.mockup-sprout-art svg { width: 100%; height: 100%; }

.mockup-closing-cta { margin-top: 12px; padding: 16px; display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: start; background: linear-gradient(118deg, #fff5ed, #fffaf7); border: 1px solid #f6ece6; border-radius: 14px; }.mockup-closing-cta > img { width: 48px; height: 48px; }.mockup-closing-copy h2 { font: 700 18px/1.05 var(--serif); }.mockup-closing-copy p { margin-top: 5px !important; color: #3d4a65; font-size: 8px; line-height: 1.35; }.mockup-closing-copy p span { color: var(--coral); font: 700 16px/1 var(--serif); }.mockup-closing-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }.mockup-closing-actions .mockup-button { grid-column: 1 / -1; min-height: 36px; padding: 8px 12px; font-size: 9px; }.mockup-closing-actions small { display: flex; align-items: center; gap: 4px; color: #44516c; font-size: 7px; }.mockup-closing-actions small svg.lucide { width: 10px; height: 10px; flex: none; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mockup-footer { margin-top: 18px; padding-top: 16px; display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 14px; border-top: 1px solid #eef0f1; }.mockup-footer-brand img { width: 112px; height: auto; }.mockup-footer-brand p { max-width: 135px; margin-top: 7px !important; color: #69738a; font-size: 7px; line-height: 1.4; }.mockup-footer-brand small { display: block; margin-top: 14px; color: #8992a3; font-size: 6px; }.mockup-footer-column { display: grid; align-content: start; gap: 5px; color: #56627a; font-size: 7px; }.mockup-footer-column strong { margin-bottom: 2px; color: var(--navy); font-size: 7px; }.mockup-footer-column a:hover { color: var(--coral); }

@media (max-width: 900px) {
  .mockup-page { width: min(760px, calc(100% - 20px)); }.mockup-spread { gap: 13px; }.mockup-panel-right { padding-inline: 24px; }.mockup-header { padding-inline: 23px; }.mockup-hero, .mockup-section { padding-inline: 25px; }.mockup-lake-scene { margin-inline: 16px; }.mockup-hero h1 { font-size: clamp(34px, 4.5vw, 47px); }.mockup-section h2, .mockup-picture-section h2 { font-size: clamp(25px, 3.2vw, 34px); }.mockup-benefit { padding-inline: 8px; gap: 6px; font-size: 7px; }.mockup-benefit svg.lucide { width: 21px; height: 21px; }.mockup-story-phone { transform: translateX(-50%) scale(.9); transform-origin: top center; }.mockup-story-phone-wrap { height: 385px; }.mockup-story-grid { gap-inline: 10px; }.mockup-story-grid h3 { font-size: 12px; }.mockup-phase-card { grid-template-columns: 1fr 80px; padding-inline: 14px; }.mockup-sprout-art { width: 80px; height: 80px; }
}

@media (max-width: 680px) {
  body { background: #fff; }.mockup-page { width: 100%; margin: 0; }.mockup-spread { display: block; }.mockup-panel { border: 0; border-radius: 0; box-shadow: none; }.mockup-panel-left { padding-bottom: 30px; }.mockup-panel-right { padding: 35px 20px 22px; border-top: 12px solid #f2f1ee; }.mockup-header { height: 72px; padding-inline: 20px; }.mockup-brand img { width: 137px; }.mockup-menu-button { width: 40px; height: 40px; }.mockup-hero { padding: 27px 20px 20px; }.mockup-hero h1 { font-size: clamp(39px, 10vw, 54px); }.mockup-lead { font-size: 12px; }.mockup-button-primary { width: 100%; margin-top: 19px; }.mockup-trust { font-size: 7px; gap: 8px 12px; }.mockup-lake-scene { height: 321px; margin-inline: 20px; }.mockup-lake-image { width: 80%; left: 10%; height: 214px; }.mockup-benefits-card { width: 92%; right: 1%; }.mockup-benefit { min-height: 58px; font-size: 8px; }.mockup-benefit svg.lucide { width: 23px; height: 23px; }.mockup-section { padding: 30px 20px 0; }.mockup-section h2, .mockup-picture-section h2 { font-size: clamp(31px, 9vw, 44px); }.mockup-body-copy { font-size: 11px; }.mockup-live-link { font-size: 8px; }.mockup-snapshot-stats b { font-size: 20px; }.mockup-snapshot-chart > div { grid-template-columns: 1fr 1.7fr auto; }.mockup-how-section { padding-top: 31px; }.mockup-vertical-process { margin-left: 0; }.mockup-picture-section h2 { max-width: 530px; }.mockup-story-phone-wrap { height: 415px; }.mockup-story-phone { width: 211px; height: 390px; top: 19px; }.mockup-story-grid { gap: 25px 16px; }.mockup-story-grid h3 { font-size: 14px; }.mockup-story-grid p { font-size: 9px; }.mockup-privacy-note p { font-size: 9px; }.mockup-handoff-card h3 { font-size: 18px; }.mockup-handoff-card span, .mockup-audience-list li { font-size: 9px; }.mockup-partners-section { margin-top: 18px; }.mockup-phase-card { min-height: 191px; grid-template-columns: 1fr 96px; }.mockup-sprout-art { width: 94px; height: 94px; }.mockup-closing-copy h2 { font-size: 19px; }.mockup-footer { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }


/* Single-flow layout: the two-panel spread is illustrative, not a desktop split. */
.mockup-page {
  width: min(920px, calc(100% - 28px));
  margin: 18px auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e2e5;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(28, 36, 58, .1);
}
.mockup-spread {
  display: block;
}
.mockup-panel {
  width: 100%;
  overflow: visible;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.mockup-panel-right {
  padding: 35px 54px 30px;
  border-top: 1px solid #eef0f0;
}

@media (max-width: 680px) {
  .mockup-page {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .mockup-panel-right {
    padding: 35px 20px 22px;
    border-top: 12px solid #f2f1ee;
  }
}


/* Desktop/tablet redesign: the mobile page remains the original mockup flow. */
.mockup-desktop-version { display: none; }

.desktop-page h1,
.desktop-page h2,
.desktop-page h3,
.desktop-page p { margin: 0; }
.desktop-page a { color: inherit; text-decoration: none; }
.desktop-page img,
.desktop-page svg { display: block; max-width: 100%; }

@media (min-width: 681px) {
  body { background: #fff; }
  .mockup-mobile-version { display: none !important; }
  .mockup-desktop-version { display: block; }

  .desktop-page {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    color: var(--navy);
    background: #fff;
    font-family: var(--sans);
  }

  .desktop-header {
    width: min(1200px, calc(100% - 48px));
    min-height: 78px;
    margin: 0 auto;
    padding: 18px 0 12px;
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .desktop-brand { flex: none; display: inline-flex; align-items: center; }
  .desktop-brand img { width: 130px; height: auto; }
  .desktop-nav {
    min-width: 0;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 2.25vw, 31px);
    color: #263c61;
    font-size: 9px;
    font-weight: 800;
  }
  .desktop-nav a { white-space: nowrap; transition: color .2s; }
  .desktop-nav a:hover { color: var(--coral); }
  .desktop-header-cta {
    flex: none;
    min-height: 37px;
    padding: 10px 14px 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    background: var(--green);
    border-radius: 999px;
    box-shadow: 0 7px 14px rgba(46, 96, 56, .16);
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
  }
  .desktop-header-cta svg.lucide { width: 14px; height: 14px; stroke-width: 1.9; }

  .desktop-eyebrow {
    margin-bottom: 12px !important;
    color: var(--green-dark);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
  }
  .desktop-page h1,
  .desktop-page h2 {
    color: var(--navy);
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: -.045em;
  }
  .desktop-page h2 { font-size: clamp(32px, 3.3vw, 50px); line-height: 1.02; }
  .desktop-hero {
    width: min(1200px, calc(100% - 48px));
    min-height: 432px;
    margin: 0 auto;
    padding: 49px 0 48px;
    display: grid;
    grid-template-columns: .87fr 1.13fr;
    gap: 34px;
    align-items: center;
  }
  .desktop-hero-copy { position: relative; z-index: 2; }
  .desktop-hero h1 {
    max-width: 500px;
    font-size: clamp(38px, 4.45vw, 64px);
    line-height: .98;
  }
  .desktop-hero h1 span { color: var(--coral); }
  .desktop-lead {
    max-width: 430px;
    margin-top: 17px !important;
    color: #30446b;
    font-size: 14px;
    line-height: 1.55;
  }
  .desktop-button {
    min-height: 43px;
    padding: 11px 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.2;
    transition: transform .2s, box-shadow .2s, background .2s;
  }
  .desktop-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(31, 78, 41, .18); }
  .desktop-button-green { color: #fff; background: var(--green); box-shadow: 0 8px 14px rgba(44, 90, 50, .17); }
  .desktop-button svg.lucide { width: 15px; height: 15px; stroke-width: 1.9; }
  .desktop-hero .desktop-button { width: min(100%, 410px); margin-top: 21px; }
  .desktop-trust {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: #34553e;
    font-size: 9px;
    font-weight: 780;
  }
  .desktop-trust span,
  .desktop-cta-trust span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .desktop-trust svg.lucide,
  .desktop-cta-trust svg.lucide { width: 11px; height: 11px; color: var(--green); stroke-width: 2.3; }

  .desktop-hero-art {
    min-height: 342px;
    position: relative;
    isolation: isolate;
  }
  .desktop-hero-blob,
  .desktop-dashboard-blob { position: absolute; z-index: -1; border-radius: 50%; }
  .desktop-hero-blob-green { width: 22%; height: 29%; top: -3%; left: 4%; background: #d9efdc; transform: rotate(25deg); }
  .desktop-hero-blob-coral { width: 18%; height: 28%; top: 7%; right: -1%; background: #ffebde; transform: rotate(-19deg); }
  .desktop-hero-blob-purple { width: 23%; height: 29%; right: -1%; bottom: 15%; background: #eee8ff; transform: rotate(21deg); }
  .desktop-hero-blob-yellow { width: 18%; height: 17%; left: 49%; bottom: -3%; background: #fff3d3; transform: rotate(-9deg); }
  .desktop-hero-image {
    width: 94%;
    height: 310px;
    position: absolute;
    top: 17px;
    left: 3%;
    overflow: hidden;
    border: 8px solid #fff;
    border-radius: 50% / 48%;
    box-shadow: 0 15px 30px rgba(36, 48, 65, .13);
    transform: rotate(-2.5deg);
  }
  .desktop-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }

  .desktop-band { border-top: 1px solid #edf1ed; }
  .desktop-band-inner {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 52px 0;
  }
  .desktop-needs-band { background: #f9fff5; }
  .desktop-needs-inner {
    display: grid;
    grid-template-columns: .88fr 1.55fr;
    gap: 48px;
    align-items: center;
  }
  .desktop-band-copy h2 { max-width: 450px; }
  .desktop-band-copy h2 span { color: var(--green); }
  .desktop-band-copy > p:last-child {
    max-width: 440px;
    margin-top: 17px !important;
    color: #344a70;
    font-size: 12px;
    line-height: 1.55;
  }
  .desktop-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .desktop-process-card {
    min-width: 0;
    position: relative;
    text-align: center;
  }
  .desktop-process-card + .desktop-process-card::before {
    content: "→";
    position: absolute;
    top: 24px;
    left: -17px;
    color: #6f8f92;
    font-size: 20px;
    font-weight: 500;
  }
  .desktop-process-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 11px;
    display: grid;
    place-items: center;
    border-radius: 50%;
  }
  .desktop-process-icon svg.lucide { width: 27px; height: 27px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .desktop-process-green { color: #448052; background: #eef8ec; }
  .desktop-process-blue { color: #397ed4; background: #edf3ff; }
  .desktop-process-yellow { color: #c38d13; background: #fff6df; }
  .desktop-process-coral { color: #ef6845; background: #fff0ea; }
  .desktop-process-card h3 {
    min-height: 37px;
    color: var(--navy);
    font: 700 13px/1.12 var(--serif);
  }
  .desktop-process-card h3 b { font-family: var(--sans); font-size: 11px; }
  .desktop-process-card p {
    max-width: 135px;
    margin: 9px auto 0;
    color: #3e5274;
    font-size: 8px;
    line-height: 1.45;
  }

  .desktop-picture-band { background: #fff; }
  .desktop-picture-inner {
    display: grid;
    grid-template-columns: .74fr 1.26fr;
    gap: 36px;
    align-items: center;
  }
  .desktop-picture-copy h2 { max-width: 450px; }
  .desktop-picture-copy > p:not(.desktop-eyebrow) {
    max-width: 375px;
    margin-top: 19px !important;
    color: #344a70;
    font-size: 12px;
    line-height: 1.55;
  }
  .desktop-privacy-card {
    max-width: 340px;
    margin-top: 29px;
    padding: 12px 15px;
    display: grid;
    grid-template-columns: 39px 1fr;
    gap: 10px;
    align-items: center;
    background: #f4f3ff;
    border: 1px solid #e4e3f7;
    border-radius: 12px;
  }
  .desktop-privacy-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--navy);
    background: #e8e7ff;
    border-radius: 50%;
  }
  .desktop-privacy-icon svg.lucide { width: 18px; height: 18px; stroke-width: 1.8; }
  .desktop-privacy-card p { color: #30446b; font-size: 8px; line-height: 1.4; }
  .desktop-privacy-card b { color: var(--navy); font-size: 9px; }

  .desktop-dashboard-art {
    min-height: 376px;
    position: relative;
    isolation: isolate;
  }
  .desktop-dashboard-blob-blue { width: 29%; height: 36%; top: 27%; left: 0; background: #eef3ff; transform: rotate(21deg); }
  .desktop-dashboard-blob-yellow { width: 28%; height: 28%; top: -4%; right: 0; background: #fff2cf; transform: rotate(22deg); }
  .desktop-dashboard-blob-purple { width: 24%; height: 34%; right: -3%; bottom: 8%; background: #f2ecff; transform: rotate(19deg); }
  .desktop-laptop {
    width: 98%;
    max-width: 700px;
    position: absolute;
    right: -3%;
    bottom: 8px;
    z-index: 1;
  }
  .desktop-laptop-screen {
    padding: 10px 10px 7px;
    background: #1e2024;
    border: 2px solid #777c81;
    border-bottom: 0;
    border-radius: 15px 15px 4px 4px;
    box-shadow: 0 15px 25px rgba(23, 29, 39, .19);
  }
  .desktop-dashboard-window {
    min-height: 292px;
    overflow: hidden;
    background: #fbfcfd;
    border-radius: 8px 8px 2px 2px;
  }
  .desktop-dashboard-topbar {
    min-height: 35px;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 1fr 1.45fr auto;
    gap: 10px;
    align-items: center;
    color: var(--navy);
    background: #fff;
    border-bottom: 1px solid #edf0f3;
    font-size: 8px;
  }
  .desktop-dashboard-brand { display: flex; align-items: center; gap: 4px; font-size: 8px; }
  .desktop-dashboard-mark {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #e8a63c, #5c8fc6);
    border-radius: 50%;
    font-size: 8px;
  }
  .desktop-dashboard-name { color: var(--navy); font-weight: 800; }
  .desktop-dashboard-status {
    padding: 4px 8px;
    color: #fff;
    background: #5c8f6a;
    border-radius: 99px;
    font-size: 7px;
    font-weight: 800;
    white-space: nowrap;
  }
  .desktop-dashboard-body { min-height: 257px; display: grid; grid-template-columns: 91px 1fr; }
  .desktop-dashboard-sidebar {
    padding: 13px 7px;
    display: grid;
    align-content: start;
    gap: 6px;
    color: #68748a;
    background: #f4f7f7;
    border-right: 1px solid #e9edf0;
    font-size: 7px;
  }
  .desktop-dashboard-sidebar span {
    min-height: 21px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
  }
  .desktop-dashboard-sidebar span.active { color: #3d7549; background: #e1f0e1; font-weight: 800; }
  .desktop-dashboard-sidebar svg.lucide { width: 11px; height: 11px; stroke-width: 1.7; }
  .desktop-dashboard-content { padding: 15px 14px 12px; }
  .desktop-dashboard-heading { display: flex; justify-content: space-between; align-items: start; color: var(--navy); }
  .desktop-dashboard-heading small { color: #7c8798; font-size: 7px; }
  .desktop-dashboard-heading h3 { margin-top: 3px; font-size: 12px; }
  .desktop-dashboard-heading > svg.lucide { width: 13px; height: 13px; color: #8a94a4; }
  .desktop-dashboard-stats { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .desktop-dashboard-stats > div {
    min-height: 51px;
    padding: 9px 10px;
    display: grid;
    align-content: center;
    gap: 3px;
    background: #fff;
    border: 1px solid #e8edf0;
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(29, 48, 66, .04);
  }
  .desktop-dashboard-stats b { color: var(--navy); font: 500 24px/1 var(--serif); }
  .desktop-dashboard-stats span { color: #758197; font-size: 7px; }
  .desktop-dashboard-interest {
    margin-top: 9px;
    padding: 10px;
    display: grid;
    gap: 8px;
    background: #fff;
    border: 1px solid #e8edf0;
    border-radius: 7px;
  }
  .desktop-dashboard-interest strong { margin-bottom: 1px; font-size: 8px; }
  .desktop-dashboard-interest > div {
    display: grid;
    grid-template-columns: 1.16fr 1.6fr auto;
    gap: 7px;
    align-items: center;
    color: #59677d;
    font-size: 7px;
  }
  .desktop-dashboard-interest i { height: 4px; display: block; overflow: hidden; background: #f0f2f2; border-radius: 99px; }
  .desktop-dashboard-interest em { height: 100%; display: block; background: var(--coral); border-radius: inherit; }
  .desktop-dashboard-interest > div:nth-child(3) em { background: #aa72d6; }
  .desktop-dashboard-interest > div:nth-child(4) em { background: #db9730; }
  .desktop-dashboard-interest b { color: #768196; font-size: 7px; }
  .desktop-dashboard-insight {
    margin-top: 9px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 7px;
    align-items: center;
    background: #fff;
    border: 1px solid #edf0ec;
    border-radius: 7px;
  }
  .desktop-dashboard-insight > svg.lucide { width: 21px; height: 21px; padding: 4px; color: #d69e25; background: #fff3d4; border-radius: 50%; }
  .desktop-dashboard-insight p { color: #66758a; font-size: 6px; line-height: 1.35; }
  .desktop-dashboard-insight b { color: var(--navy); font-size: 7px; }
  .desktop-laptop-base {
    width: 112%;
    height: 17px;
    margin-left: -6%;
    background: linear-gradient(#b8bdc0, #e4e6e6 55%, #9fa6aa);
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 7px 9px rgba(37, 42, 48, .18);
  }

  .desktop-receive-band { background: #fafff5; }
  .desktop-receive-band h2 { max-width: 610px; }
  .desktop-receive-copy {
    max-width: 640px;
    margin-top: 18px !important;
    color: #344a70;
    font-size: 12px;
    line-height: 1.55;
  }
  .desktop-receive-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
  }
  .desktop-receive-grid article { text-align: center; }
  .desktop-receive-icon,
  .desktop-audience-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 11px;
    display: grid;
    place-items: center;
    border-radius: 50%;
  }
  .desktop-receive-icon svg.lucide,
  .desktop-audience-icon svg.lucide { width: 26px; height: 26px; stroke-width: 1.7; }
  .desktop-icon-green { color: #4d9664; background: #eaf6e9; }
  .desktop-icon-purple { color: #7654df; background: #f2eaff; }
  .desktop-icon-yellow { color: #d69a1d; background: #fff5dc; }
  .desktop-icon-blue { color: #4384dc; background: #eaf2ff; }
  .desktop-icon-coral { color: #f06b46; background: #fff0ea; }
  .desktop-receive-grid h3 { color: var(--navy); font: 700 13px/1.1 var(--serif); }
  .desktop-receive-grid p {
    max-width: 145px;
    margin: 8px auto 0;
    color: #475a78;
    font-size: 9px;
    line-height: 1.45;
  }

  .desktop-partners-band { background: #fff; }
  .desktop-partners-inner {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 48px;
    align-items: center;
  }
  .desktop-partners-inner .desktop-band-copy > p:last-child { max-width: 460px; }
  .desktop-audience-grid {
    padding: 25px 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 21px 13px;
    background: #f8fbfc;
    border: 1px solid #eef1f3;
    border-radius: 15px;
  }
  .desktop-audience-grid article { min-width: 0; text-align: center; }
  .desktop-audience-icon { width: 48px; height: 48px; margin-bottom: 8px; }
  .desktop-audience-icon svg.lucide { width: 23px; height: 23px; }
  .desktop-audience-grid span { display: block; color: var(--navy); font-size: 8px; font-weight: 780; line-height: 1.3; }

  .desktop-pilot-card {
    width: min(1200px, calc(100% - 48px));
    min-height: 192px;
    margin: 2px auto 24px;
    padding: 28px 34px;
    display: grid;
    grid-template-columns: 1.25fr 1fr 120px;
    gap: 27px;
    align-items: center;
    background: #f6f4ff;
    border: 1px solid #e7e3f8;
    border-radius: 16px;
  }
  .desktop-pilot-copy h2 { font-size: clamp(28px, 3vw, 43px); }
  .desktop-pilot-copy > p:not(.desktop-eyebrow) {
    max-width: 460px;
    margin-top: 9px !important;
    color: #35496d;
    font-size: 10px;
    line-height: 1.45;
  }
  .desktop-pilot-copy .desktop-button { margin-top: 15px; min-height: 36px; font-size: 9px; }
  .desktop-pilot-includes {
    padding-left: 26px;
    border-left: 1px solid #d7d3ee;
  }
  .desktop-includes-label { margin-bottom: 10px !important; color: var(--green-dark); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
  .desktop-pilot-includes ul { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
  .desktop-pilot-includes li { display: flex; align-items: center; gap: 7px; color: #3d5275; font-size: 9px; }
  .desktop-pilot-includes li svg.lucide { width: 12px; height: 12px; color: var(--green); stroke-width: 2; }
  .desktop-sprout-art { width: 116px; height: 116px; justify-self: end; }
  .desktop-sprout-art svg { width: 100%; height: 100%; }

  .desktop-cta-band {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 22px 30px;
    display: grid;
    grid-template-columns: 58px 1.2fr 1fr;
    gap: 20px;
    align-items: center;
    background: #fff7f0;
    border: 1px solid #f7ebe3;
    border-radius: 16px;
  }
  .desktop-cta-band > img { width: 58px; height: 58px; }
  .desktop-cta-copy h2 { color: var(--navy); font: 700 clamp(21px, 2.2vw, 31px)/1.05 var(--serif); }
  .desktop-cta-copy p { margin-top: 6px !important; color: #3a4c6c; font-size: 9px; line-height: 1.35; }
  .desktop-cta-copy p span { color: var(--coral); font: 700 21px/1 var(--serif); }
  .desktop-cta-actions .desktop-button { width: 100%; min-height: 38px; font-size: 9px; }
  .desktop-cta-trust { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; color: #425471; font-size: 7px; font-weight: 750; }
  .desktop-cta-trust svg.lucide { width: 10px; height: 10px; }

  .desktop-footer {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 26px 0 28px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 20px;
    border-top: 1px solid #eef0f1;
  }
  .desktop-footer > div:not(.desktop-footer-brand) { display: grid; align-content: start; gap: 6px; color: #56627a; font-size: 8px; }
  .desktop-footer strong { margin-bottom: 2px; color: var(--navy); font-size: 8px; }
  .desktop-footer a:hover { color: var(--coral); }
  .desktop-footer-brand img { width: 112px; height: auto; }
  .desktop-footer-brand p { max-width: 170px; margin-top: 8px !important; color: #69738a; font-size: 8px; line-height: 1.4; }
  .desktop-footer-brand small { display: block; margin-top: 15px; color: #8992a3; font-size: 7px; }

  @media (max-width: 900px) {
    .desktop-header,
    .desktop-hero,
    .desktop-band-inner,
    .desktop-pilot-card,
    .desktop-cta-band,
    .desktop-footer { width: min(100% - 36px, 860px); }
    .desktop-header { min-height: 68px; gap: 14px; }
    .desktop-brand img { width: 116px; }
    .desktop-nav { gap: 14px; font-size: 8px; }
    .desktop-header-cta { min-height: 33px; padding: 8px 10px 8px 12px; gap: 7px; font-size: 8px; }
    .desktop-header-cta svg.lucide { width: 12px; height: 12px; }
    .desktop-hero { min-height: 365px; padding: 39px 0 37px; grid-template-columns: .94fr 1.06fr; gap: 17px; }
    .desktop-hero h1 { font-size: clamp(34px, 5vw, 48px); }
    .desktop-lead { margin-top: 13px !important; font-size: 11px; }
    .desktop-hero .desktop-button { margin-top: 16px; }
    .desktop-trust { gap: 7px 10px; font-size: 7px; }
    .desktop-hero-art { min-height: 270px; }
    .desktop-hero-image { height: 245px; top: 11px; border-width: 6px; }
    .desktop-band-inner { padding: 42px 0; }
    .desktop-needs-inner { grid-template-columns: .85fr 1.35fr; gap: 22px; }
    .desktop-page h2 { font-size: clamp(29px, 4vw, 39px); }
    .desktop-band-copy > p:last-child,
    .desktop-picture-copy > p:not(.desktop-eyebrow),
    .desktop-receive-copy { font-size: 10px; }
    .desktop-process-grid { gap: 10px; }
    .desktop-process-card + .desktop-process-card::before { left: -11px; font-size: 16px; }
    .desktop-process-card:nth-child(3)::before { display: none; }
    .desktop-process-icon { width: 47px; height: 47px; margin-bottom: 8px; }
    .desktop-process-icon svg.lucide { width: 22px; height: 22px; }
    .desktop-process-card h3 { font-size: 10px; }
    .desktop-process-card h3 b { font-size: 9px; }
    .desktop-process-card p { margin-top: 6px; font-size: 7px; }
    .desktop-picture-inner { grid-template-columns: .78fr 1.22fr; gap: 18px; }
    .desktop-privacy-card { margin-top: 18px; padding: 9px 10px; grid-template-columns: 31px 1fr; gap: 7px; }
    .desktop-privacy-icon { width: 29px; height: 29px; }
    .desktop-privacy-icon svg.lucide { width: 15px; height: 15px; }
    .desktop-privacy-card p { font-size: 7px; }
    .desktop-privacy-card b { font-size: 8px; }
    .desktop-dashboard-art { min-height: 285px; }
    .desktop-laptop { bottom: 3px; }
    .desktop-laptop-screen { padding: 7px 7px 5px; border-radius: 10px 10px 3px 3px; }
    .desktop-dashboard-window { min-height: 222px; }
    .desktop-dashboard-body { min-height: 187px; grid-template-columns: 73px 1fr; }
    .desktop-dashboard-topbar { min-height: 27px; padding: 5px 8px; font-size: 6px; }
    .desktop-dashboard-brand { font-size: 6px; }
    .desktop-dashboard-mark { width: 11px; height: 11px; font-size: 6px; }
    .desktop-dashboard-status { padding: 3px 5px; font-size: 5px; }
    .desktop-dashboard-sidebar { padding: 8px 4px; gap: 3px; font-size: 5px; }
    .desktop-dashboard-sidebar span { min-height: 16px; padding: 3px; gap: 3px; }
    .desktop-dashboard-sidebar svg.lucide { width: 8px; height: 8px; }
    .desktop-dashboard-content { padding: 9px 9px 7px; }
    .desktop-dashboard-heading small { font-size: 5px; }
    .desktop-dashboard-heading h3 { margin-top: 2px; font-size: 8px; }
    .desktop-dashboard-heading > svg.lucide { width: 9px; height: 9px; }
    .desktop-dashboard-stats { margin-top: 6px; gap: 5px; }
    .desktop-dashboard-stats > div { min-height: 37px; padding: 5px 6px; }
    .desktop-dashboard-stats b { font-size: 17px; }
    .desktop-dashboard-stats span { font-size: 5px; }
    .desktop-dashboard-interest { margin-top: 5px; padding: 6px; gap: 5px; }
    .desktop-dashboard-interest strong { font-size: 6px; }
    .desktop-dashboard-interest > div { gap: 4px; font-size: 5px; }
    .desktop-dashboard-interest i { height: 3px; }
    .desktop-dashboard-interest b { font-size: 5px; }
    .desktop-dashboard-insight { margin-top: 5px; padding: 5px 6px; grid-template-columns: 17px 1fr; gap: 4px; }
    .desktop-dashboard-insight > svg.lucide { width: 15px; height: 15px; padding: 3px; }
    .desktop-dashboard-insight p { font-size: 4px; }
    .desktop-dashboard-insight b { font-size: 5px; }
    .desktop-laptop-base { height: 11px; }
    .desktop-receive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; margin-top: 28px; }
    .desktop-receive-icon { width: 47px; height: 47px; margin-bottom: 8px; }
    .desktop-receive-icon svg.lucide { width: 22px; height: 22px; }
    .desktop-receive-grid h3 { font-size: 11px; }
    .desktop-receive-grid p { margin-top: 6px; font-size: 7px; }
    .desktop-partners-inner { grid-template-columns: .9fr 1.1fr; gap: 22px; }
    .desktop-audience-grid { padding: 17px 12px; gap: 15px 8px; }
    .desktop-audience-icon { width: 40px; height: 40px; margin-bottom: 6px; }
    .desktop-audience-icon svg.lucide { width: 19px; height: 19px; }
    .desktop-audience-grid span { font-size: 7px; }
    .desktop-pilot-card { min-height: 165px; padding: 20px 22px; grid-template-columns: 1.2fr 1fr; gap: 17px; }
    .desktop-pilot-copy h2 { font-size: 29px; }
    .desktop-pilot-copy > p:not(.desktop-eyebrow) { font-size: 8px; }
    .desktop-pilot-copy .desktop-button { min-height: 32px; margin-top: 10px; padding-inline: 12px; font-size: 7px; }
    .desktop-pilot-includes { padding-left: 17px; }
    .desktop-includes-label { font-size: 7px; }
    .desktop-pilot-includes ul { gap: 5px; }
    .desktop-pilot-includes li { gap: 4px; font-size: 7px; }
    .desktop-pilot-includes li svg.lucide { width: 9px; height: 9px; }
    .desktop-sprout-art { width: 76px; height: 76px; grid-column: 2; grid-row: 1 / span 2; }
    .desktop-cta-band { padding: 16px 20px; grid-template-columns: 42px 1.2fr 1fr; gap: 12px; }
    .desktop-cta-band > img { width: 42px; height: 42px; }
    .desktop-cta-copy h2 { font-size: 21px; }
    .desktop-cta-copy p { font-size: 7px; }
    .desktop-cta-copy p span { font-size: 16px; }
    .desktop-cta-actions .desktop-button { min-height: 31px; padding-inline: 10px; font-size: 7px; }
    .desktop-cta-trust { margin-top: 7px; gap: 4px 6px; font-size: 5px; }
    .desktop-cta-trust svg.lucide { width: 8px; height: 8px; }
    .desktop-footer { padding: 20px 0 23px; gap: 13px; }
    .desktop-footer > div:not(.desktop-footer-brand) { gap: 4px; font-size: 6px; }
    .desktop-footer strong { font-size: 6px; }
    .desktop-footer-brand img { width: 91px; }
    .desktop-footer-brand p { margin-top: 5px !important; font-size: 6px; }
    .desktop-footer-brand small { margin-top: 9px; font-size: 5px; }
  }
}

@media (max-width: 680px) {
  .mockup-desktop-version { display: none !important; }
  .mockup-mobile-version { display: block; }
}


/* Desktop polish: restore button contrast and give the hero/laptop art natural proportions. */
@media (min-width: 681px) {
  .desktop-page a.desktop-header-cta,
  .desktop-page a.desktop-header-cta:visited,
  .desktop-page a.desktop-button-green,
  .desktop-page a.desktop-button-green:visited {
    color: #fff;
  }

  .desktop-hero-art { min-height: 390px; }
  .desktop-hero-image { height: 360px; top: 15px; }
  .desktop-hero-image img { object-fit: cover; object-position: 52% 58%; }

  .desktop-dashboard-art { min-height: 390px; }
  .desktop-laptop {
    width: 92%;
    max-width: 620px;
    right: 0;
    bottom: 12px;
  }
  .desktop-laptop-screen { aspect-ratio: 16 / 9; }
  .desktop-dashboard-window { height: 100%; min-height: 0; }
  .desktop-dashboard-body { height: calc(100% - 35px); min-height: 0; }
  .desktop-laptop-base { width: 106%; margin-left: -3%; }
}

@media (min-width: 681px) and (max-width: 900px) {
  .desktop-hero-art { min-height: 310px; }
  .desktop-hero-image { height: 280px; }

  .desktop-dashboard-art { min-height: 310px; }
  .desktop-laptop {
    width: 92%;
    max-width: 520px;
    bottom: 8px;
  }
  .desktop-laptop-screen { aspect-ratio: 16 / 9; }
  .desktop-dashboard-window { height: 100%; min-height: 0; }
  .desktop-dashboard-body { height: calc(100% - 27px); min-height: 0; }
  .desktop-laptop-base { width: 106%; margin-left: -3%; height: 11px; }
}


/* Mockup alignment pass for desktop and tablet only. */
@media (min-width: 681px) {
  .desktop-hero {
    grid-template-areas:
      "copy art"
      "trust trust";
    grid-template-rows: auto auto;
    row-gap: 14px;
  }
  .desktop-hero-copy { grid-area: copy; }
  .desktop-hero-art { grid-area: art; }
  .desktop-trust {
    grid-area: trust;
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: start;
    align-items: center;
    gap: 20px;
  }
}

@media (min-width: 901px) {
  .desktop-header,
  .desktop-hero,
  .desktop-band-inner,
  .desktop-pilot-card,
  .desktop-cta-band,
  .desktop-footer {
    width: min(1180px, calc(100% - 80px));
  }

  .desktop-hero {
    min-height: 0;
    padding: 32px 0 40px;
    grid-template-columns: .88fr 1.12fr;
    column-gap: 34px;
  }
  .desktop-hero-art { min-height: 410px; }
  .desktop-hero-image { height: 390px; top: 10px; }
  .desktop-hero-image img { object-position: 52% 60%; }
  .desktop-laptop {
    width: 100%;
    max-width: 690px;
    right: -2%;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  .desktop-header,
  .desktop-hero,
  .desktop-band-inner,
  .desktop-pilot-card,
  .desktop-cta-band,
  .desktop-footer {
    width: calc(100% - 64px);
  }

  .desktop-header {
    min-height: 68px;
    gap: 11px;
  }
  .desktop-brand img { width: 108px; }
  .desktop-nav { gap: 11px; font-size: 7.5px; }
  .desktop-header-cta {
    min-height: 32px;
    padding: 8px 10px 8px 12px;
    font-size: 7px;
  }

  .desktop-eyebrow { margin-bottom: 9px !important; font-size: 8.5px; }
  .desktop-hero {
    min-height: 0;
    padding: 22px 0 26px;
    grid-template-columns: .9fr 1.1fr;
    column-gap: 18px;
    row-gap: 12px;
  }
  .desktop-hero h1 { font-size: 32px; line-height: .98; }
  .desktop-lead { margin-top: 12px !important; font-size: 10px; line-height: 1.5; }
  .desktop-hero .desktop-button {
    width: min(100%, 285px);
    min-height: 40px;
    margin-top: 14px;
    font-size: 8px;
  }
  .desktop-hero-art { min-height: 285px; }
  .desktop-hero-image { height: 260px; top: 10px; }
  .desktop-hero-image img { object-position: 52% 58%; }
  .desktop-trust {
    gap: 18px;
    font-size: 7px;
  }

  .desktop-band-inner { padding: 30px 0; }
  .desktop-page h2 { font-size: 28px; line-height: 1.02; }
  .desktop-needs-inner {
    grid-template-columns: .9fr 1.1fr;
    gap: 22px;
  }
  .desktop-band-copy > p:last-child,
  .desktop-picture-copy > p:not(.desktop-eyebrow),
  .desktop-receive-copy {
    margin-top: 12px !important;
    font-size: 9px;
    line-height: 1.5;
  }
  .desktop-process-grid { gap: 8px; }
  .desktop-process-card + .desktop-process-card::before { top: 20px; left: -10px; }
  .desktop-process-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 7px;
  }
  .desktop-process-icon svg.lucide { width: 21px; height: 21px; }
  .desktop-process-card h3 { min-height: 30px; font-size: 9px; }
  .desktop-process-card h3 b { font-size: 8px; }
  .desktop-process-card p { max-width: 100px; margin-top: 5px; font-size: 6px; line-height: 1.35; }

  .desktop-picture-inner {
    grid-template-columns: .8fr 1.2fr;
    gap: 18px;
  }
  .desktop-privacy-card { max-width: 250px; margin-top: 17px; }
  .desktop-dashboard-art { min-height: 300px; }
  .desktop-laptop {
    width: 110%;
    max-width: 470px;
    right: -7%;
    bottom: 7px;
  }

  .desktop-receive-band .desktop-band-inner { padding-top: 34px; padding-bottom: 35px; }
  .desktop-receive-copy { max-width: 610px; }
  .desktop-receive-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 25px;
  }
  .desktop-receive-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 7px;
  }
  .desktop-receive-icon svg.lucide { width: 21px; height: 21px; }
  .desktop-receive-grid h3 { font-size: 9px; }
  .desktop-receive-grid p { max-width: 105px; margin-top: 5px; font-size: 6.5px; }

  .desktop-partners-inner {
    grid-template-columns: .9fr 1.1fr;
    gap: 24px;
  }
  .desktop-audience-grid { padding: 17px 14px; }

  .desktop-pilot-card {
    min-height: 180px;
    padding: 18px 20px;
    grid-template-columns: 1.1fr .9fr 74px;
    gap: 14px;
  }
  .desktop-pilot-copy h2 { font-size: 27px; }
  .desktop-pilot-copy > p:not(.desktop-eyebrow) { margin-top: 7px !important; font-size: 7px; }
  .desktop-pilot-copy .desktop-button { width: min(100%, 245px); }
  .desktop-pilot-includes { padding-left: 14px; }
  .desktop-sprout-art {
    width: 74px;
    height: 74px;
    grid-column: auto;
    grid-row: auto;
  }

  .desktop-cta-band { padding: 15px 18px; gap: 11px; }
  .desktop-cta-copy h2 { font-size: 19px; }
  .desktop-cta-copy p { font-size: 6.5px; }
  .desktop-cta-copy p span { font-size: 15px; }
  .desktop-footer { padding-top: 18px; padding-bottom: 22px; }
}


/* Final desktop/tablet art polish: remove the hero stroke and reduce the dashboard width. */
@media (min-width: 681px) {
  .desktop-hero-image { border: 0; }
}

@media (min-width: 901px) {
  .desktop-laptop {
    width: 80%;
    max-width: 552px;
    right: 0;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  .desktop-laptop {
    width: 88%;
    max-width: 376px;
    right: 0;
  }
}

/* Use the supplied dashboard artwork in the desktop/tablet presentation. */
.desktop-dashboard-art > .desktop-laptop {
  display: block;
  height: auto;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  object-position: center;
}

/* Use the supplied composed hero artwork for desktop/tablet only. */
@media (min-width: 681px) {
  .desktop-hero-blob { display: none; }
  .desktop-hero-image {
    width: 94%;
    height: auto;
    aspect-ratio: 3 / 2;
    top: 5px;
    left: 3%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .desktop-hero-image img {
    object-fit: contain;
    object-position: center;
  }
}

/* Use the supplied phone dashboard artwork in the mobile story section. */
.mockup-story-phone-wrap {
  height: auto;
}
.mockup-story-phone-image {
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
}

/* Use the supplied mobile assessment form in place of the snapshot card. */
.mockup-mobile-form {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

/* Keep the desktop/tablet bands airy and nearly white. */
@media (min-width: 681px) {
  .desktop-partners-band,
  .desktop-audience-grid { background: #fbfdf9; }
  .desktop-audience-grid {
    border-color: #f0f4ef;
  }
}

/* Mobile flow matching the single-column reference mockup. */
@media (max-width: 680px) {
  .mockup-mobile-version {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mockup-mobile-version .mockup-panel-left {
    padding-bottom: 0;
  }

  .mockup-mobile-version .mockup-panel-right {
    padding: 0 20px 24px;
    border-top: 0;
  }

  .mockup-mobile-version .mockup-hero,
  .mockup-mobile-version .mockup-lake-scene,
  .mockup-mobile-version .mockup-handoff-section,
  .mockup-mobile-version .mockup-partners-section,
  .mockup-mobile-version .mockup-phase-card {
    display: none;
  }

  .mockup-mobile-version .mockup-header {
    height: 72px;
    padding: 0 20px;
  }

  .mockup-mobile-version .mockup-brand img {
    width: 137px;
  }

  .mockup-mobile-version .mockup-section {
    border-top: 1px solid #eef0f0;
  }

  .mockup-mobile-version .mockup-needs-section {
    padding: 22px 20px 25px;
    border-top: 0;
  }

  .mockup-mobile-version .mockup-needs-section h1 {
    max-width: 273px;
    color: var(--navy);
    font: 700 29px/.99 var(--serif);
    letter-spacing: -.045em;
  }

  .mockup-mobile-version .mockup-needs-section h1 span {
    color: var(--green);
  }

  .mockup-mobile-version .mockup-needs-section .mockup-body-copy {
    max-width: 285px;
    margin-top: 15px !important;
    color: #4b5873;
    font-size: 12px;
    font-style: italic;
    line-height: 1.55;
  }

  .mockup-mobile-intro-button {
    width: 100%;
    margin-top: 17px;
  }

  .mockup-mobile-intro-trust {
    margin-top: 16px;
    display: grid;
    gap: 9px;
    color: #334d3b;
    font-size: 8px;
    font-weight: 760;
  }

  .mockup-mobile-intro-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .mockup-mobile-intro-trust svg.lucide {
    width: 12px;
    height: 12px;
    flex: none;
    color: var(--green);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .mockup-mobile-version .mockup-how-section {
    padding: 21px 20px 28px;
  }

  .mockup-mobile-version .mockup-how-section h2,
  .mockup-mobile-version .mockup-picture-section h2,
  .mockup-mobile-dashboard h2 {
    font: 700 28px/.99 var(--serif);
    line-height: .99;
    letter-spacing: -.045em;
  }

  .mockup-mobile-version .mockup-how-section h2 {
    max-width: 270px;
    font-size: 24px;
  }

  .mockup-mobile-version .mockup-picture-section h2 {
    max-width: 280px;
  }

  .mockup-mobile-version .mockup-vertical-process {
    margin: 22px 0 0;
    gap: 14px;
  }

  .mockup-mobile-version .mockup-vertical-process::before {
    top: 29px;
    bottom: 30px;
    left: 22px;
  }

  .mockup-mobile-version .mockup-vertical-process article {
    min-height: 57px;
    grid-template-columns: 43px 18px 1fr;
    gap: 7px;
  }

  .mockup-mobile-version .mockup-process-icon {
    width: 43px;
    height: 43px;
  }

  .mockup-mobile-version .mockup-process-number {
    width: 16px;
    height: 16px;
    margin-top: 13px;
    padding-top: 0;
    display: grid;
    place-items: center;
    color: var(--navy);
    background: #f3f5f2;
    border-radius: 50%;
    font-size: 8px;
  }

  .mockup-mobile-version .mockup-vertical-process article h3 {
    margin-top: 1px;
    font-size: 10px;
  }

  .mockup-mobile-version .mockup-vertical-process article p {
    max-width: 205px;
    font-size: 8px;
  }

  .mockup-mobile-version .mockup-picture-section {
    padding: 22px 0 0;
    border-top: 1px solid #eef0f0;
  }

  .mockup-mobile-version .mockup-story-phone-wrap {
    height: auto;
    margin-top: 14px;
  }

  .mockup-mobile-version .mockup-mobile-form-image {
    width: 100%;
    max-width: 236px;
    height: auto;
    margin: 0 auto;
  }

  .mockup-mobile-version .mockup-picture-lead {
    max-width: 260px;
    margin: 8px auto 18px !important;
    font-size: 11px;
    line-height: 1.35;
  }

  .mockup-mobile-version .mockup-story-grid {
    gap: 23px 16px;
  }

  .mockup-mobile-version .mockup-story-grid h3 {
    font-size: 13px;
  }

  .mockup-mobile-version .mockup-story-grid p {
    font-size: 8px;
  }

  .mockup-mobile-version .mockup-privacy-note {
    margin-top: 18px;
    padding: 11px 12px;
  }

  .mockup-mobile-version .mockup-privacy-note p {
    font-size: 8px;
  }

  .mockup-mobile-dashboard {
    margin-top: 24px;
    padding: 22px 0 25px;
    border-top: 1px solid #eef0f0;
  }

  .mockup-mobile-dashboard-image {
    width: 100%;
    height: auto;
    margin: 12px auto 0;
  }

  .mockup-mobile-dashboard-copy {
    max-width: 285px;
    margin: 10px auto 0 !important;
    color: #334362;
    font-size: 9px;
    line-height: 1.45;
    text-align: center;
  }

  .mockup-mobile-version .mockup-closing-cta {
    margin-top: 0;
    padding: 15px;
    border-radius: 12px;
  }

  .mockup-mobile-version .mockup-closing-copy .mockup-eyebrow {
    margin-bottom: 7px !important;
    font-size: 7px;
  }

  .mockup-mobile-version .mockup-closing-copy h2 {
    font-size: 20px;
  }

  .mockup-mobile-version .mockup-closing-copy p:not(.mockup-eyebrow) {
    font-size: 8px;
  }

  .mockup-mobile-version .mockup-closing-actions {
    margin-top: 3px;
  }

  .mockup-mobile-version .mockup-footer {
    margin-top: 18px;
    padding-bottom: 5px;
  }
}