:root {
        --canvas-width: 1055px;
        --canvas-height: 1454px;
        --ink: #171717;
        --line: #737373;
        --line-soft: #b2b2b2;
        --paper: #f4f4f4;
        --panel: #e5e5e5;
        --panel-dark: #cccccc;
        --photo: #d7d7d7;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background: #dedede;
        color: var(--ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      body {
        overflow-x: hidden;
      }

      button,
      input,
      a {
        font: inherit;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .stage {
        position: relative;
        width: var(--canvas-width);
        height: var(--canvas-height);
        transform-origin: top left;
        background: var(--paper);
        border-right: 1px solid var(--line);
      }

      .band {
        position: absolute;
        left: 0;
        width: 1055px;
        overflow: hidden;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
      }

      .measure {
        position: absolute;
        z-index: 20;
        padding: 2px 4px;
        border: 1px solid var(--line-soft);
        background: var(--paper);
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1;
        text-transform: uppercase;
      }

      .photo-slot {
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
        background:
          linear-gradient(135deg, transparent 49.7%, var(--line-soft) 49.9%, var(--line-soft) 50.1%, transparent 50.3%),
          linear-gradient(45deg, transparent 49.7%, var(--line-soft) 49.9%, var(--line-soft) 50.1%, transparent 50.3%),
          var(--photo);
        border: 1px solid var(--line);
        text-align: center;
      }

      .photo-slot span {
        max-width: 80%;
        padding: 5px;
        background: rgba(244, 244, 244, 0.9);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.35;
        text-transform: uppercase;
      }

      .eyebrow {
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.28em;
        line-height: 1.55;
        text-transform: uppercase;
      }

      .serif {
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 400;
      }

      /* 01 Header: screenshot y=37..101, page y=0..64 */
      .header {
        top: 0;
        height: 65px;
        display: grid;
        grid-template-columns: 340px 508px 207px;
      }

      .header-brand {
        position: relative;
        border-right: 1px solid transparent;
      }

      .wordmark {
        position: absolute;
        left: 32px;
        top: 14px;
        font-size: 31px;
        line-height: 1;
      }

      .brand-descriptor {
        position: absolute;
        left: 176px;
        top: 23px;
        width: 150px;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.24em;
        line-height: 1.45;
        text-transform: uppercase;
      }

      .primary-nav {
        display: grid;
        grid-template-columns: repeat(6, auto);
        align-items: center;
        justify-content: space-between;
        padding: 0 96px 0 24px;
        font-size: 8px;
        white-space: nowrap;
      }

      .header-action {
        position: relative;
        border-left: 1px solid var(--line);
      }

      .outline-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--line);
        background: transparent;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
      }

      .header-action .outline-button {
        position: absolute;
        left: 23px;
        top: 16px;
        width: 154px;
        height: 33px;
        padding: 0 14px;
      }

      /* 02 Hero: screenshot y=102..583, page y=65..546 */
      .hero {
        top: 65px;
        height: 482px;
      }

      .hero-grid-line {
        position: absolute;
        z-index: 1;
        left: 119px;
        top: 0;
        bottom: 0;
        border-left: 1px solid var(--line-soft);
      }

      .hero-copy {
        position: absolute;
        z-index: 8;
        left: 39px;
        top: 80px;
        width: 245px;
      }

      .hero-copy h1 {
        width: 245px;
        margin: 0;
        font-size: 53px;
        letter-spacing: -0.035em;
        line-height: 0.98;
      }

      .hero-subtitle {
        margin-top: 18px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.32em;
        line-height: 1.55;
        text-transform: uppercase;
      }

      .hero-rule {
        width: 31px;
        margin-top: 32px;
        border-top: 2px solid var(--line);
      }

      .hero-support {
        margin-top: 23px;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.25em;
        line-height: 1.6;
        text-transform: uppercase;
      }

      .hero-scroll {
        position: absolute;
        left: 39px;
        bottom: 39px;
        display: flex;
        align-items: center;
        gap: 11px;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .scroll-circle {
        display: grid;
        width: 30px;
        height: 30px;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
      }

      .instrument-field {
        position: absolute;
        z-index: 2;
        left: 119px;
        top: 0;
        width: 729px;
        height: 482px;
        overflow: hidden;
        border-right: 1px solid var(--line);
      }

      .instrument-orbit,
      .instrument-bezel,
      .instrument-face {
        position: absolute;
        border-radius: 50%;
      }

      .instrument-orbit {
        left: 94px;
        top: -66px;
        width: 620px;
        height: 620px;
        border: 1px solid var(--line-soft);
        box-shadow:
          inset 0 0 0 30px transparent,
          inset 0 0 0 31px var(--line-soft),
          inset 0 0 0 61px transparent,
          inset 0 0 0 62px var(--line-soft);
      }

      .instrument-bezel {
        left: 157px;
        top: -5px;
        width: 496px;
        height: 496px;
        border: 17px double var(--line);
        background: var(--panel);
      }

      .instrument-face {
        left: 186px;
        top: 24px;
        width: 438px;
        height: 438px;
        border: 2px solid var(--line);
        background: var(--paper);
      }

      .needle {
        position: absolute;
        z-index: 5;
        left: 404px;
        top: 0;
        width: 2px;
        height: 73px;
        background: var(--ink);
        transform-origin: bottom center;
      }

      .needle::before {
        content: "";
        position: absolute;
        left: -6px;
        top: 0;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 14px solid var(--ink);
      }

      .instrument-readout {
        position: absolute;
        z-index: 6;
        left: 245px;
        top: 90px;
        width: 322px;
        text-align: center;
      }

      .instrument-readout .eyebrow {
        margin-bottom: 7px;
      }

      .instrument-value {
        margin-top: 3px;
        font-size: 48px;
        line-height: 1;
      }

      .instrument-controls {
        position: absolute;
        z-index: 7;
        left: 245px;
        top: 193px;
        display: grid;
        width: 328px;
        grid-template-columns: 160px 160px;
        grid-template-rows: 67px 67px;
        gap: 8px;
      }

      .instrument-control {
        padding: 9px 12px 7px;
        border: 1px solid var(--line);
        background: var(--paper);
      }

      .instrument-control label {
        display: block;
        margin-bottom: 4px;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .instrument-control output {
        display: block;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 16px;
        line-height: 1;
      }

      .instrument-control input {
        width: 100%;
        margin: 7px 0 0;
        accent-color: var(--ink);
      }

      .instrument-cta {
        position: absolute;
        z-index: 7;
        left: 292px;
        top: 350px;
        width: 233px;
        height: 37px;
        padding: 0 17px;
      }

      .instrument-secondary {
        position: absolute;
        z-index: 7;
        left: 325px;
        top: 402px;
        width: 170px;
        text-align: center;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .instrument-motto {
        position: absolute;
        z-index: 8;
        right: 11px;
        top: 35px;
        width: 78px;
        font-size: 6px;
        font-weight: 700;
        letter-spacing: 0.17em;
        line-height: 1.45;
        text-transform: uppercase;
      }

      .hero-photo {
        position: absolute;
        z-index: 4;
        left: 848px;
        top: 0;
        width: 207px;
        height: 482px;
        border: 0;
        border-left: 1px solid var(--line);
      }

      .hero-photo-copy {
        position: absolute;
        z-index: 5;
        left: 980px;
        top: 153px;
        width: 60px;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.18em;
        line-height: 1.6;
        text-transform: uppercase;
      }

      .hero-coordinates {
        position: absolute;
        z-index: 5;
        left: 981px;
        top: 341px;
        width: 60px;
        font-size: 6px;
        letter-spacing: 0.13em;
        line-height: 1.55;
        text-transform: uppercase;
      }

      /* 03 Lender band: screenshot y=584..651, page y=547..614 */
      .lender-band {
        top: 547px;
        height: 68px;
        display: grid;
        grid-template-columns: 154px 792px 109px;
      }

      .lender-intro,
      .lender-outro {
        display: flex;
        align-items: center;
        padding-left: 31px;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.18em;
        line-height: 1.5;
        text-transform: uppercase;
      }

      .lender-intro {
        border-right: 1px solid var(--line-soft);
      }

      .lender-outro {
        padding-left: 17px;
        border-left: 1px solid var(--line-soft);
      }

      .lender-logos {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        align-items: center;
      }

      .lender-slot {
        display: grid;
        min-height: 30px;
        place-items: center;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 11px;
        text-transform: uppercase;
      }

      /* 04 Card rail: screenshot y=652..998, page y=615..961 */
      .card-rail {
        top: 615px;
        height: 347px;
      }

      .route-card {
        position: absolute;
        top: 13px;
        height: 323px;
        border: 1px solid var(--line);
        background: var(--paper);
      }

      .route-card:nth-of-type(1) { left: 21px; width: 191px; }
      .route-card:nth-of-type(2) { left: 225px; width: 193px; }
      .route-card:nth-of-type(3) { left: 430px; width: 196px; }
      .route-card:nth-of-type(4) { left: 638px; width: 196px; }
      .route-card:nth-of-type(5) { left: 847px; width: 188px; }

      .route-card .photo-slot {
        width: 100%;
        height: 174px;
        border: 0;
        border-bottom: 1px solid var(--line);
      }

      .card-icon {
        position: absolute;
        left: 14px;
        top: 184px;
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        font-size: 11px;
      }

      .route-card .card-title {
        position: absolute;
        left: 15px;
        top: 234px;
        margin: 0;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.15em;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .route-card .card-description {
        position: absolute;
        left: 15px;
        right: 12px;
        top: 260px;
        margin: 0;
        font-size: 9px;
        line-height: 1.5;
      }

      .card-arrow {
        position: absolute;
        right: 14px;
        bottom: 10px;
        font-size: 17px;
      }

      /* 05 Approach: screenshot y=999..1299, page y=962..1262 */
      .approach {
        top: 962px;
        height: 301px;
        display: grid;
        grid-template-columns: 268px 511px 276px;
      }

      .approach-copy {
        position: relative;
        padding: 40px 30px 0 43px;
        border-right: 1px solid var(--line);
      }

      .approach-copy h2 {
        margin: 0;
        font-size: 25px;
        letter-spacing: -0.015em;
        line-height: 1.05;
        text-transform: uppercase;
      }

      .approach-copy p {
        margin: 27px 0 0;
        font-size: 10px;
        line-height: 1.55;
      }

      .approach-copy .outline-button {
        position: absolute;
        left: 43px;
        bottom: 38px;
        width: 165px;
        height: 38px;
        padding: 0 15px;
      }

      .approach-photo {
        width: 511px;
        height: 301px;
        border-top: 0;
        border-bottom: 0;
      }

      .approach-photo-note {
        position: absolute;
        left: 557px;
        top: 105px;
        z-index: 4;
        width: 82px;
        text-align: center;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.28em;
        line-height: 1.55;
        text-transform: uppercase;
      }

      .approach-steps {
        height: 301px;
        padding: 7px 28px 0 35px;
      }

      .approach-step {
        display: grid;
        min-height: 71px;
        grid-template-columns: 44px 1fr;
        padding-top: 10px;
        border-bottom: 1px solid var(--line-soft);
      }

      .approach-step:last-child {
        border-bottom: 0;
      }

      .step-number {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
      }

      .step-title {
        margin-bottom: 6px;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      .step-copy {
        font-size: 8px;
        line-height: 1.45;
      }

      /* 06 CTA band: screenshot y=1300..1392, page y=1263..1355 */
      .cta-band {
        top: 1263px;
        height: 93px;
        display: grid;
        grid-template-columns: 169px 524px 362px;
      }

      .cta-image {
        width: 169px;
        height: 93px;
        border: 0;
        border-right: 1px solid var(--line);
      }

      .cta-copy {
        display: flex;
        align-items: center;
        padding-left: 13px;
        border-right: 1px solid var(--line);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 15px;
        letter-spacing: 0.23em;
        text-transform: uppercase;
      }

      .cta-action {
        position: relative;
      }

      .cta-action .outline-button {
        position: absolute;
        left: 65px;
        top: 21px;
        width: 251px;
        height: 49px;
        padding: 0 33px;
      }

      /* 07 Footer: screenshot y=1393..1490, page y=1356..1453 */
      .footer {
        top: 1356px;
        height: 98px;
        display: grid;
        grid-template-columns: 350px 470px 235px;
        border-bottom: 0;
      }

      .footer-brand {
        position: relative;
      }

      .footer-brand .wordmark {
        left: 36px;
        top: 24px;
        font-size: 29px;
      }

      .footer-brand .brand-descriptor {
        left: 155px;
        top: 34px;
      }

      .footer-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 31px;
        font-size: 7px;
      }

      .footer-signoff {
        position: relative;
        display: flex;
        align-items: center;
        gap: 20px;
        padding-left: 51px;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.21em;
        line-height: 1.5;
        text-transform: uppercase;
      }

      .footer-signoff::before {
        content: "";
        width: 29px;
        border-top: 1px solid var(--line);
      }

      .blueprint-note {
        position: fixed;
        left: 1070px;
        top: 16px;
        width: 260px;
        padding: 12px;
        border: 1px solid var(--line);
        background: var(--paper);
        font-size: 12px;
        line-height: 1.45;
      }

      @media (max-width: 1340px) {
        .blueprint-note {
          display: none;
        }
      }

      @media print {
        body {
          background: white;
        }

        .stage {
          transform: none !important;
        }

        .blueprint-note {
          display: none;
        }
      }