:root {
        --ink: #0b1f33;
        --brine: #12507e;
        --beacon: #ffc53d;
        --sail: #f7f5f0;
        --mist: #c7d6e2;
        --slate: #45586a;
        --line: rgba(11, 31, 51, 0.13);
        --serif: "Google Sans Flex", Arial, sans-serif;
        --sans: "Google Sans Flex", Arial, sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: 100px;
      }

      body {
        margin: 0;
        overflow-x: hidden;
        background: var(--sail);
        color: var(--ink);
        font-family: var(--sans);
        -webkit-font-smoothing: antialiased;
      }

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

      img {
        display: block;
        max-width: 100%;
      }

      button {
        font: inherit;
      }

      em,
      i {
        font-style: normal;
      }

      h1,
      h2,
      h3,
      p,
      figure {
        margin: 0;
      }

      .shell {
        width: min(calc(100% - 72px), 1320px);
        margin-inline: auto;
      }

      .section {
        padding-block: 116px;
      }

      .eyebrow {
        margin: 0;
        color: var(--brine);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .eyebrow--light {
        color: var(--mist);
      }

      h1,
      h2 {
        font-family: "Manrope", var(--sans);
        font-weight: 500;
        letter-spacing: -0.065em;
      }

      h2 {
        font-size: clamp(52px, 5.5vw, 82px);
        line-height: 0.98;
      }

      h1 em,
      h2 em {
        color: var(--brine);
        font-family: var(--serif);
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.055em;
      }

      .hero h1 em,
      .templates h2 em,
      .refresh h2 em,
      .final-cta h2 em {
        color: var(--mist);
      }

      .button {
        display: inline-flex;
        min-height: 58px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 25px;
        border: 1px solid transparent;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition:
          transform 0.2s ease,
          background 0.2s ease,
          color 0.2s ease;
      }

      .button:hover {
        transform: translateY(-2px);
      }

      .button--small {
        min-height: 47px;
        padding-inline: 20px;
        font-size: 12px;
      }

      .button--ink,
      .button--outline {
        background: transparent;
        border-color: var(--ink);
        color: var(--ink);
      }

      .button--ink:hover,
      .button--outline:hover {
        background: rgba(11, 31, 51, 0.08);
      }

      .nav .button--ink {
        border-color: var(--sail);
        color: var(--sail);
      }

      .nav .button--ink:hover {
        background: rgba(247, 245, 240, 0.08);
        color: var(--sail);
      }

      .button--coral,
      .button--white {
        background: var(--beacon);
        color: var(--ink);
        box-shadow: 0 13px 30px rgba(11, 31, 51, 0.18);
      }

      .button--coral:hover,
      .button--white:hover {
        background: #f0b421;
      }

      .button--ghost {
        border-color: var(--sail);
        color: var(--sail);
      }

      .button--ghost:hover {
        background: rgba(247, 245, 240, 0.08);
      }

      a:focus-visible,
      button:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 2px;
      }

      .hero :focus-visible,
      .templates :focus-visible,
      .refresh :focus-visible,
      .custom__card :focus-visible,
      .final-cta :focus-visible,
      .site-header :focus-visible,
      footer :focus-visible {
        outline-color: var(--beacon);
      }

      .text-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 6px;
        border-bottom: 1px solid currentColor;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .check {
        display: inline-grid;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        place-items: center;
        border-radius: 50%;
        background: rgba(247, 245, 240, 0.85);
        color: var(--brine);
        font-size: 12px;
        font-weight: 500;
      }

      .icon-chevron {
        width: 1em;
        height: 1em;
        flex: 0 0 auto;
        display: inline-block;
        vertical-align: -0.14em;
        transition: transform 0.2s ease;
      }

      a:hover .icon-chevron,
      button:hover .icon-chevron {
        transform: translateX(3px);
      }

      .icon {
        width: 1em;
        height: 1em;
        display: block;
      }

      .offer-bar {
        min-height: 39px;
        display: flex;
        align-items: center;
        background: var(--beacon);
        color: var(--ink);
      }

      .offer-bar__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 12px;
        letter-spacing: 0.035em;
      }

      .offer-bar__inner strong {
        text-transform: uppercase;
      }

      .offer-bar__inner a {
        display: inline-flex;
        gap: 5px;
        align-items: center;
        margin-left: 8px;
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .offer-bar__pulse {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--ink);
        box-shadow: 0 0 0 5px rgba(11, 31, 51, 0.16);
      }

      .site-header {
        height: 84px;
        position: sticky;
        top: 0;
        z-index: 40;
        border-bottom: 1px solid rgba(255, 255, 255, 0.11);
        background: var(--ink);
        color: white;
      }

      .nav {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
      }

      .nav__actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 13px;
      }

      .brand__mark {
        display: flex;
        align-items: center;
      }

      .brand__mark img {
        display: block;
        height: 26px;
        width: auto;
      }

      .brand__copy {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .brand__copy strong {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0.01em;
      }

      .brand__copy strong .brand__accent {
        color: #2fc4c8;
      }

      .brand__copy small {
        color: var(--mist);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .nav__links {
        display: flex;
        gap: 30px;
      }

      .nav__links a {
        color: var(--mist);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .nav__links a:hover {
        color: white;
      }

      .nav .button--ink {
        background: white;
        color: var(--ink);
      }

      .hero {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, var(--brine) 0%, var(--ink) 65%);
        color: white;
        isolation: isolate;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        opacity: 0.13;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
        background-size: 82px 82px;
        mask-image: linear-gradient(90deg, black, transparent 82%);
      }

      .hero__orb {
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        filter: blur(2px);
      }

      .hero__orb--one {
        width: 650px;
        height: 650px;
        right: -220px;
        top: -310px;
        background: radial-gradient(
          circle at 40% 60%,
          rgba(18, 80, 126, 0.27),
          transparent 67%
        );
      }

      .hero__orb--two {
        width: 450px;
        height: 450px;
        right: 31%;
        bottom: -340px;
        background: radial-gradient(
          circle at 50% 50%,
          rgba(18, 80, 126, 0.18),
          transparent 68%
        );
      }

      .hero__grid {
        min-height: 770px;
        display: grid;
        grid-template-columns: 0.92fr 1.08fr;
        gap: 62px;
        align-items: center;
        padding-block: 70px 82px;
      }

      .hero__copy {
        position: relative;
        z-index: 2;
      }

      .hero h1 {
        max-width: 700px;
        margin-top: 10px;
        font-size: clamp(50px, 5.2vw, 76px);
        line-height: 0.95;
      }

      .hero__lede {
        max-width: 650px;
        margin-top: 30px;
        color: var(--mist);
        font-size: 17px;
        line-height: 1.7;
      }

      .hero__offer-card {
        max-width: 620px;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: stretch;
        margin-top: 27px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 18px 55px rgba(2, 21, 27, 0.18);
        backdrop-filter: blur(14px);
      }

      .hero__offer-card > div {
        min-width: 245px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 16px 20px;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
      }

      .hero__offer-card span {
        color: var(--beacon);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

      .hero__offer-card strong {
        display: flex;
        align-items: baseline;
        gap: 5px;
        margin-top: 3px;
        font-family: "Manrope", var(--sans);
        font-size: 15px;
        font-weight: 500;
      }

      .hero__offer-card strong b {
        color: white;
        font-size: 40px;
        font-weight: 500;
        letter-spacing: -0.07em;
      }

      .hero__offer-card strong small {
        color: var(--mist);
        font-size: 12px;
        font-weight: 500;
      }

      .hero__offer-card > p {
        display: flex;
        align-items: center;
        padding: 17px 21px;
        color: var(--mist);
        font-size: 12px;
        line-height: 1.55;
      }

      .hero__actions {
        display: flex;
        gap: 12px;
        margin-top: 20px;
      }

      .hero__fine-print {
        margin-top: 14px;
        color: var(--mist);
        font-size: 12px;
      }

      .hero__inline-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 17px;
        color: var(--mist);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .hero__inline-link:hover {
        color: white;
      }

      .hero__micro {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 30px;
      }

      .hero__micro > span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--mist);
        font-size: 12px;
        letter-spacing: 0.035em;
      }

      .hero__micro .check {
        width: 17px;
        height: 17px;
        font-size: 12px;
      }

      .hero-stage {
        min-height: 605px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .browser-frame {
        width: 94%;
        position: relative;
        overflow: hidden;
        padding: 9px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.16);
        box-shadow: 0 50px 90px rgba(0, 0, 0, 0.29);
        transform: rotate(1.5deg);
        backdrop-filter: blur(10px);
      }

      .browser-frame__bar {
        height: 35px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding-inline: 12px;
        border-radius: 7px 7px 0 0;
        background: #e9ecea;
      }

      .browser-frame__bar span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #a4afad;
      }

      .browser-frame__bar small {
        margin-left: 18px;
        color: #65706f;
        font-size: 12px;
      }

      .demo-site {
        height: 465px;
        position: relative;
        overflow: hidden;
        color: white;
      }

      .demo-site > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .demo-site__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(3, 27, 35, 0.68),
          rgba(3, 27, 35, 0.06)
        );
      }

      .demo-site__nav {
        position: absolute;
        inset: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 23px 27px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.23);
      }

      .demo-site__nav strong {
        font-family: var(--serif);
        font-size: 19px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.045em;
      }

      .demo-site__nav span {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.15em;
      }

      .demo-site__content {
        position: absolute;
        left: 44px;
        bottom: 54px;
      }

      .demo-site__content > span {
        color: var(--mist);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .demo-site__content h2 {
        margin-top: 11px;
        font-family: var(--serif);
        font-size: clamp(42px, 4.3vw, 62px);
        font-style: normal;
        font-weight: 500;
        line-height: 0.92;
        letter-spacing: -0.04em;
      }

      .demo-site__content button {
        margin-top: 23px;
        padding: 13px 17px;
        border: 0;
        background: var(--beacon);
        color: var(--ink);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .hero-stage__note,
      .enquiry-card {
        position: absolute;
        z-index: 4;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(11, 31, 51, 0.94);
        box-shadow: 0 19px 44px rgba(0, 0, 0, 0.24);
        backdrop-filter: blur(12px);
      }

      .hero-stage__note {
        top: 33px;
        right: -20px;
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 15px 17px;
        border-radius: 7px;
        transform: rotate(2deg);
      }

      .hero-stage__note .note-icon {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 50%;
        background: var(--beacon);
        color: var(--ink);
      }

      .hero-stage__note div {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .hero-stage__note strong {
        font-size: 12px;
      }

      .hero-stage__note small {
        color: var(--mist);
        font-size: 12px;
      }

      .enquiry-card {
        right: -8px;
        bottom: 20px;
        width: 315px;
        padding: 20px;
        border-radius: 8px;
        transform: rotate(-2deg);
      }

      .enquiry-card__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        color: var(--mist);
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .enquiry-card__top i {
        padding: 4px 7px;
        border-radius: 10px;
        background: var(--beacon);
        color: var(--ink);
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
      }

      .enquiry-card > strong {
        font-family: var(--serif);
        font-size: 21px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.035em;
      }

      .enquiry-card__details {
        display: flex;
        gap: 7px;
        margin-top: 14px;
      }

      .enquiry-card__details span {
        padding: 6px 8px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.08);
        color: var(--mist);
        font-size: 12px;
      }

      .signal-strip {
        background: white;
      }

      .signal-strip__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }

      .signal-strip__grid > div {
        min-height: 112px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        padding: 0 32px;
        border-right: 1px solid var(--line);
      }

      .signal-strip__grid > div:first-child {
        padding-left: 0;
      }

      .signal-strip__grid > div:last-child {
        border: 0;
      }

      .signal-strip strong {
        font-family: var(--serif);
        font-size: 25px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.04em;
      }

      .signal-strip span {
        color: var(--slate);
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .problem {
        background: var(--sail);
      }

      .problem__grid {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 100px;
        align-items: end;
      }

      .problem__intro h2 {
        margin-top: 10px;
      }

      .problem__copy {
        padding-bottom: 6px;
      }

      .problem__lead {
        max-width: 530px;
        font-family: var(--serif);
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1.35;
      }

      .problem__copy > p:not(.problem__lead) {
        max-width: 580px;
        margin-top: 20px;
        color: var(--slate);
        font-size: 14px;
        line-height: 1.8;
      }

      .problem__copy .text-link {
        margin-top: 29px;
      }

      .tension-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-top: 66px;
        border: 1px solid var(--line);
      }

      .tension-grid article {
        /* min-height: 390px; */
        display: flex;
        flex-direction: column;
        padding: 31px;
        border-right: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.42);
      }

      .tension-grid article:last-child {
        border-right: 0;
      }

      .tension-grid small {
        color: var(--slate);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

      .tension-grid h3 {
        margin-top: 13px;
        font-size: 29px;
        letter-spacing: -0.035em;
        line-height: 1.05;
      }

      .tension-grid p {
        margin-top: 15px;
        color: var(--slate);
        font-size: 13px;
        line-height: 1.7;
      }

      .tension-grid article > strong {
        margin-top: auto;
        padding-top: 28px;
        border-top: 1px solid var(--line);
        font-family: var(--serif);
        font-size: 23px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.04em;
      }

      .conversion-band {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 36px;
        align-items: center;
        margin-top: 24px;
        padding: 25px 28px;
        border: 1px solid var(--line);
        background: white;
      }

      .conversion-band > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .conversion-band span {
        color: var(--brine);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

      .conversion-band strong {
        font-family: "Manrope", var(--sans);
        font-size: 21px;
        font-weight: 500;
        letter-spacing: -0.04em;
      }

      .conversion-band > div:last-child,
      .section-actions {
        display: flex;
        align-items: center;
        gap: 22px;
      }

      .section-actions {
        margin-top: 30px;
      }

      .section-actions--stacked {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
      }

      .section-actions--dark {
        justify-content: center;
      }

      .section-actions--dark .text-link,
      .text-link--light {
        color: var(--mist);
      }

      .tension-grid .tension-grid__answer {
        background: var(--ink);
        color: white;
      }

      .tension-grid__answer small,
      .tension-grid__answer p {
        color: var(--mist);
      }

      .tension-grid__answer > strong {
        border-color: rgba(199, 214, 226, 0.15);
        color: var(--beacon);
      }

      .templates {
        background: var(--ink);
        color: white;
      }

      .section-heading {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 100px;
        align-items: end;
      }

      .section-heading h2 {
        margin-top: 10px;
      }

      .section-heading > div:last-child > p {
        max-width: 500px;
        color: var(--mist);
        font-size: 14px;
        line-height: 1.8;
      }

      .scope-pill {
        display: inline-flex;
        margin-top: 22px;
        padding: 8px 11px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        color: var(--mist);
        font-size: 12px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
      }

      .family-columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 56px;
      }

      .family-col {
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.04);
      }

      .family-col input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .family-col__head {
        padding: 22px 22px 0;
      }

      .family-col__head h3 {
        font-family: var(--serif);
        font-size: 19px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: white;
      }

      .family-col__head p {
        margin-top: 4px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--mist);
      }

      .family-col__panels {
        margin-top: 16px;
      }

      .family-col__panel {
        display: none;
        flex-direction: column;
        flex: 1;
      }

      #cine-mara:checked ~ .family-col__panels #cine-panel-mara,
      #cine-eira:checked ~ .family-col__panels #cine-panel-eira,
      #cine-brava:checked ~ .family-col__panels #cine-panel-brava,
      #edit-solara:checked ~ .family-col__panels #edit-panel-solara,
      #edit-sundaytide:checked ~ .family-col__panels #edit-panel-sundaytide,
      #edit-casamarea:checked ~ .family-col__panels #edit-panel-casamarea,
      #mu-signature:checked ~ .family-col__panels #mu-panel-signature,
      #mu-location:checked ~ .family-col__panels #mu-panel-location,
      #mu-fleet:checked ~ .family-col__panels #mu-panel-fleet {
        display: flex;
      }

      .preview-frame {
        display: block;
        height: 260px;
        overflow: hidden;
        position: relative;
      }

      .preview-frame__bar {
        height: 24px;
        display: flex;
        align-items: center;
        gap: 5px;
        padding-left: 10px;
        background: #dfe3e0;
        position: relative;
        z-index: 2;
      }

      .preview-frame__bar i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #a3aeaa;
      }

      .preview-frame__scroll {
        display: block;
      }

      .preview-frame img {
        display: block;
        width: 100%;
        height: auto;
        transform: translateY(0);
        transition: transform 0.6s ease;
      }

      .preview-frame:hover img {
        transform: translateY(-46%);
        transition: transform 5s ease;
      }

      .preview-frame__hint {
        position: absolute;
        z-index: 3;
        right: 10px;
        bottom: 10px;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 10px;
        border-radius: 20px;
        background: rgba(11, 31, 51, 0.75);
        backdrop-filter: blur(4px);
        color: white;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        opacity: 1;
        transition: opacity 0.25s ease;
        pointer-events: none;
      }

      .preview-frame:hover .preview-frame__hint {
        opacity: 0;
      }

      .family-col__body {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 20px 22px 22px;
      }

      .family-col__body h4 {
        font-family: var(--serif);
        font-size: 22px;
        font-style: normal;
        font-weight: 500;
        margin: 0;
        letter-spacing: -0.03em;
        color: white;
      }

      .family-col__body p {
        margin-top: 8px;
        color: var(--mist);
        font-size: 12px;
        line-height: 1.6;
      }

      .family-col__body a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
        padding-top: 16px;
        color: white;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .family-col__toggle {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 22px 22px;
      }

      .family-col__toggle label {
        padding: 7px 12px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--mist);
        cursor: pointer;
        transition:
          background 0.2s ease,
          border-color 0.2s ease,
          color 0.2s ease;
      }

      .family-col__toggle label:hover {
        border-color: rgba(255, 255, 255, 0.5);
      }

      #cine-mara:checked ~ .family-col__toggle label[for="cine-mara"],
      #cine-eira:checked ~ .family-col__toggle label[for="cine-eira"],
      #cine-brava:checked ~ .family-col__toggle label[for="cine-brava"],
      #edit-solara:checked ~ .family-col__toggle label[for="edit-solara"],
      #edit-sundaytide:checked
        ~ .family-col__toggle
        label[for="edit-sundaytide"],
      #edit-casamarea:checked
        ~ .family-col__toggle
        label[for="edit-casamarea"],
      #mu-signature:checked ~ .family-col__toggle label[for="mu-signature"],
      #mu-location:checked ~ .family-col__toggle label[for="mu-location"],
      #mu-fleet:checked ~ .family-col__toggle label[for="mu-fleet"] {
        background: var(--sail);
        border-color: var(--sail);
        color: var(--ink);
      }

      #cine-mara:focus-visible ~ .family-col__toggle label[for="cine-mara"],
      #cine-eira:focus-visible ~ .family-col__toggle label[for="cine-eira"],
      #cine-brava:focus-visible ~ .family-col__toggle label[for="cine-brava"],
      #edit-solara:focus-visible
        ~ .family-col__toggle
        label[for="edit-solara"],
      #edit-sundaytide:focus-visible
        ~ .family-col__toggle
        label[for="edit-sundaytide"],
      #edit-casamarea:focus-visible
        ~ .family-col__toggle
        label[for="edit-casamarea"],
      #mu-signature:focus-visible
        ~ .family-col__toggle
        label[for="mu-signature"],
      #mu-location:focus-visible
        ~ .family-col__toggle
        label[for="mu-location"],
      #mu-fleet:focus-visible ~ .family-col__toggle label[for="mu-fleet"] {
        outline: 2px solid var(--beacon);
        outline-offset: 2px;
      }

      .template-note {
        max-width: 750px;
        margin: 46px auto 0;
        color: var(--mist);
        font-size: 12px;
        line-height: 1.7;
        text-align: center;
      }

      .how {
        background: var(--sail);
      }

      .how__heading {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 20px;
        align-items: end;
      }

      .how__heading .eyebrow {
        grid-column: 1 / 3;
      }

      .how__heading h2 {
        margin-top: -4px;
      }

      .how__heading > p:last-child {
        max-width: 500px;
        padding-bottom: 8px;
        color: var(--slate);
        font-size: 14px;
        line-height: 1.8;
      }

      .step-grid {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: 70px 0 0;
        padding: 0;
        border-block: 1px solid var(--line);
      }

      .step-grid li {
        display: flex;
        flex-direction: column;
        padding: 31px;
        border-right: 1px solid var(--line);
      }

      .step-grid li:first-child {
        border-left: 1px solid var(--line);
      }

      .step-grid li > span {
        color: var(--brine);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.16em;
      }

      .step-grid h3 {
        margin-top: 10px;
        font-size: 30px;
        letter-spacing: -0.04em;
      }

      .step-grid p {
        margin-top: 14px;
        color: var(--slate);
        font-size: 13px;
        line-height: 1.7;
      }

      .how__promise {
        margin-top: 24px;
        color: var(--slate);
        font-size: 13px;
      }

      .source-bar {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 30px;
        align-items: center;
        margin-top: 42px;
        padding: 22px 25px;
        background: white;
      }

      .source-bar > span {
        color: var(--slate);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .source-bar > div {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .source-bar > div strong {
        padding: 7px 9px;
        border-radius: 3px;
        background: var(--sail);
        font-size: 12px;
        font-weight: 500;
      }

      .source-bar > a {
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .scope {
        background: white;
      }

      .scope__grid {
        display: grid;
        grid-template-columns: 0.78fr 1.22fr;
        gap: 90px;
      }

      .scope__intro {
        padding-top: 18px;
      }

      .scope__intro h2 {
        margin: 10px 0;
        font-size: clamp(47px, 4.5vw, 70px);
      }

      .scope__intro > p:last-child {
        max-width: 530px;
        margin-top: 28px;
        color: var(--slate);
        font-size: 14px;
        line-height: 1.8;
      }

      .scope-board {
        border: 1px solid var(--line);
      }

      .scope-board__included {
        padding: 24px 30px;
        background: rgba(18, 80, 126, 0.06);
        border-bottom: 1px solid var(--line);
      }

      .scope-board__included-head {
        display: flex;
        align-items: baseline;
        gap: 14px;
        margin-bottom: 16px;
      }

      .scope-board__included-head span {
        color: var(--brine);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

      .scope-board__included-head strong {
        font-family: var(--serif);
        font-size: 19px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.03em;
      }

      .scope-board__included ul.scope-board__included-list {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 13px 22px;
        margin: 0;
        padding: 0;
      }

      .scope-board__tiers {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      .scope-board__column {
        display: flex;
        flex-direction: column;
        padding: 26px 22px;
        border-right: 1px solid var(--line);
      }

      .scope-board__column:last-child {
        border-right: 0;
      }

      .scope-board__head {
        min-height: 85px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--line);
      }

      .scope-board__head span {
        color: var(--brine);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

      .scope-board__head strong {
        font-family: var(--serif);
        font-size: 23px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.04em;
      }

      .scope-board ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 17px;
        margin: 15px 0;
        padding: 0;
      }

      .scope-board li {
        display: flex;
        align-items: center;
        gap: 11px;
        color: var(--slate);
        font-size: 12px;
      }

      .scope-board__column--no li > span {
        display: inline-grid;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        place-items: center;
        border-radius: 50%;
        background: var(--ink);
        color: var(--beacon);
        font-size: 12px;
      }

      .scope-board__column > a {
        display: flex;
        justify-content: space-between;
        margin-top: auto;
        padding-top: 26px;
        border-top: 1px solid var(--line);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.09em;
        text-transform: uppercase;
      }

      .refresh {
        padding-block: 105px;
        overflow: hidden;
        background: var(--ink);
        color: white;
      }

      .refresh__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 100px;
        align-items: center;
      }

      .refresh__visual {
        min-height: 440px;
        position: relative;
      }

      .refresh-card {
        width: 400px;
        height: 275px;
        position: absolute;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
      }

      .refresh-card span {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.13em;
      }

      .refresh-card__year {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
        padding: 4px 9px;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.45);
        color: white;
        letter-spacing: 0.1em;
      }

      .refresh-card--back {
        top: 0;
        left: 0;
        transform: rotate(-2deg);
      }

      .refresh-card--front {
        left: 95px;
        top: 150px;
        transform: rotate(2deg);
      }

      .refresh-mock__bar {
        display: flex;
        align-items: center;
        gap: 5px;
        height: 24px;
        padding: 0 10px;
        background: #e4e1d8;
      }

      .refresh-mock__bar span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #b7b2a4;
      }

      .refresh-mock__bar small {
        margin-left: 10px;
        color: #6b6656;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0;
        font-family: Georgia, serif;
      }

      .refresh-mock__bar--dark {
        background: rgba(255, 255, 255, 0.08);
      }

      .refresh-mock__bar--dark span {
        background: rgba(255, 255, 255, 0.35);
      }

      .refresh-mock__bar--dark small {
        color: rgba(255, 255, 255, 0.5);
      }

      .refresh-mock__old-nav {
        display: flex;
        align-items: center;
        height: 26px;
        padding: 0 16px;
        background: #0d1a6b;
        color: #ffe14d;
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
      }

      .refresh-mock__old-photo {
        position: relative;
        height: calc(100% - 24px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .refresh-mock__old-photo > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .refresh-mock__old-nav {
        position: relative;
        z-index: 2;
        padding: 10px 16px;
        color: #ffe14d;
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
      }

      .refresh-mock__old-text {
        position: relative;
        z-index: 2;
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        padding: 10px 16px 14px;
      }

      .refresh-mock__old-ribbon {
        padding: 3px 10px;
        border: 1px dashed #7a5b00;
        background: #ffe14d;
        color: #7a1d1d;
        font-family: "Comic Sans MS", cursive;
        font-size: 12px;
        font-weight: 500;
      }

      .refresh-mock__old-title {
        font-family: "Comic Sans MS", cursive;
        font-size: 25px;
        font-weight: 500;
        font-style: normal;
        line-height: 1.05;
        color: #fff44d;
        text-shadow: 2px 2px 0 #7a1d1d;
      }

      .refresh-mock__old-tagline {
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
        font-size: 12px;
        color: #fff8d6;
        text-decoration: underline;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
      }

      .refresh-mock__old-btn {
        display: inline-block;
        padding: 6px 14px;
        border: 2px outset #d6d6d6;
        background: linear-gradient(180deg, #f4f4f4, #b9b9b9);
        color: #1a1a1a;
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
      }

      .refresh-mock__new-photo {
        position: relative;
        height: calc(100% - 24px);
        overflow: hidden;
      }

      .refresh-mock__new-photo > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .refresh__copy h2 {
        margin-top: 20px;
      }

      .refresh__copy > p:not(.eyebrow) {
        max-width: 610px;
        margin-top: 29px;
        color: var(--mist);
        font-size: 14px;
        line-height: 1.8;
      }

      .refresh__copy ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin: 30px 0 0;
        padding: 0;
      }

      .refresh__copy li {
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--mist);
        font-size: 12px;
      }

      .pricing {
        background: var(--sail);
      }

      .pricing__heading {
        text-align: center;
      }

      .pricing__heading h2 {
        margin-top: 10px;
      }

      .pricing__heading > p:last-child {
        max-width: 600px;
        margin: 26px auto 0;
        color: var(--slate);
        font-size: 14px;
        line-height: 1.8;
      }

      .pricing-layout {
        display: grid;
        grid-template-columns: 360px 1fr;
        gap: 32px;
        align-items: stretch;
        margin-top: 50px;
      }

      .pricing-highlight {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 34px 30px;
        background: var(--ink);
        color: white;
        overflow: hidden;
      }

      .pricing-highlight::before {
        content: "";
        position: absolute;
        top: -90px;
        right: -90px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 197, 61, 0.25),
          transparent 70%
        );
      }

      .pricing-highlight__tag {
        position: relative;
        align-self: flex-start;
        padding: 7px 13px;
        background: var(--beacon);
        color: var(--ink);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .pricing-highlight__headline {
        position: relative;
        margin-top: 22px;
        font-family: var(--serif);
        font-size: 26px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1.15;
      }

      .pricing-highlight__copy {
        position: relative;
        margin-top: 14px;
        color: var(--mist);
        font-size: 13px;
        line-height: 1.65;
      }

      .pricing-highlight__list {
        position: relative;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 20px 0 0;
        padding: 18px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
      }

      .pricing-highlight__list li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--mist);
        font-size: 12px;
      }

      .pricing-highlight__list .check {
        width: 18px;
        height: 18px;
        background: rgba(255, 255, 255, 0.12);
        color: var(--beacon);
        font-size: 12px;
      }

      .pricing-highlight__price {
        position: relative;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
      }

      .pricing-highlight__price strong {
        display: block;
        font-size: 46px;
        letter-spacing: -0.045em;
        color: var(--beacon);
      }

      .pricing-highlight__price span {
        display: block;
        margin-top: 6px;
        color: var(--mist);
        font-size: 12px;
        line-height: 1.6;
      }

      .pricing-highlight__cta {
        position: relative;
        width: 100%;
        margin-top: 22px;
      }

      .button--beacon {
        background: var(--beacon);
        color: var(--ink);
        box-shadow: 0 13px 30px rgba(11, 31, 51, 0.28);
      }

      .button--beacon:hover {
        background: #f0b421;
      }

      .pricing-interface {
        position: relative;
        min-width: 0;
      }

      .pricing-interface input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .pricing-interface__controls {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 14px 20px;
        margin-bottom: 32px;
      }

      .pricing-interface__tabs {
        display: flex;
        gap: 10px;
      }

      .pricing-interface__tabs label {
        padding: 14px 30px;
        border: 1px solid var(--line);
        border-radius: 30px;
        color: var(--slate);
        font-family: var(--serif);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition:
          background 0.2s ease,
          border-color 0.2s ease,
          color 0.2s ease;
      }

      .pricing-interface:has(#mode-rent:checked)
        .pricing-interface__tabs
        label[for="mode-rent"],
      .pricing-interface:has(#mode-own:checked)
        .pricing-interface__tabs
        label[for="mode-own"] {
        background: var(--ink);
        border-color: var(--ink);
        color: white;
      }

      #mode-rent:focus-visible
        ~ .pricing-interface__controls
        label[for="mode-rent"],
      #mode-own:focus-visible
        ~ .pricing-interface__controls
        label[for="mode-own"] {
        outline: 2px solid var(--ink);
        outline-offset: 2px;
      }

      .pricing-mode {
        display: none;
      }

      .pricing-interface:has(#mode-rent:checked) #mode-panel-rent,
      .pricing-interface:has(#mode-own:checked) #mode-panel-own {
        display: block;
      }

      .billing-toggle {
        display: inline-flex;
        gap: 4px;
        padding: 4px;
        border: 1px solid var(--line);
        border-radius: 30px;
      }

      .billing-toggle--own {
        display: none;
      }

      .pricing-interface:has(#mode-own:checked) .billing-toggle--rent {
        display: none;
      }

      .pricing-interface:has(#mode-own:checked) .billing-toggle--own {
        display: inline-flex;
      }

      .billing-toggle label {
        padding: 9px 18px;
        border-radius: 30px;
        color: var(--slate);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition:
          background 0.2s ease,
          color 0.2s ease;
        white-space: nowrap;
      }

      .pricing-interface:has(#bill-monthly:checked) label[for="bill-monthly"],
      .pricing-interface:has(#bill-annual:checked) label[for="bill-annual"],
      .pricing-interface:has(#pay-24mo:checked) label[for="pay-24mo"],
      .pricing-interface:has(#pay-once:checked) label[for="pay-once"] {
        background: var(--brine);
        color: white;
      }

      .plan-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .plan-card {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 32px;
        border: 1px solid var(--line);
        background: white;
      }

      .plan-card--featured {
        border: 2px solid var(--beacon);
      }

      .plan-card__flag {
        position: absolute;
        top: 0;
        left: 32px;
        transform: translateY(-50%);
        padding: 7px 14px;
        border-radius: 3px;
        background: var(--beacon);
        color: var(--ink);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .plan-card__eyebrow {
        color: var(--brine);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

      .plan-card h3 {
        margin-top: 10px;
        font-size: 32px;
        letter-spacing: -0.045em;
      }

      .plan-card__price {
        min-height: 66px;
        margin-top: 20px;
      }

      .plan-card__price-monthly,
      .plan-card__price-24mo {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px;
      }

      .plan-card__price-annual,
      .plan-card__price-once {
        display: none;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px;
      }

      .pricing-interface:has(#bill-annual:checked) .plan-card__price-monthly,
      .pricing-interface:has(#pay-once:checked) .plan-card__price-24mo {
        display: none;
      }

      .pricing-interface:has(#bill-annual:checked) .plan-card__price-annual,
      .pricing-interface:has(#pay-once:checked) .plan-card__price-once {
        display: flex;
      }

      .plan-card__price strong {
        font-size: 44px;
        letter-spacing: -0.045em;
      }

      .plan-card__price small {
        color: var(--slate);
        font-size: 12px;
      }

      .plan-card__price em {
        flex-basis: 100%;
        font-style: normal;
        color: var(--slate);
        font-size: 12px;
      }

      .plan-card ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 13px;
        margin: 22px 0 24px;
        padding: 0;
      }

      .plan-card ul.plan-card__list-once {
        display: none;
      }

      .pricing-interface:has(#pay-once:checked)
        .plan-cards
        ul.plan-card__list-24mo {
        display: none;
      }

      .pricing-interface:has(#pay-once:checked)
        .plan-cards
        ul.plan-card__list-once {
        display: flex;
      }

      .plan-card li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--slate);
        font-size: 12px;
      }

      .plan-card .check {
        width: 18px;
        height: 18px;
        font-size: 12px;
        flex: 0 0 auto;
      }

      .plan-card__note {
        margin-top: 14px;
        margin-bottom: 24px;
        color: var(--slate);
        font-size: 12px;
        line-height: 1.6;
      }

      .plan-card__cta {
        width: 100%;
        margin-top: auto;
        padding-bottom: 4px;
      }

      .pricing__fineprint {
        max-width: 850px;
        margin: 27px auto 0;
        color: var(--slate);
        font-size: 12px;
        line-height: 1.7;
        text-align: center;
      }

      .custom {
        padding-top: 0;
        background: var(--sail);
      }

      .custom__card {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 90px;
        align-items: end;
        padding: 68px;
        background: var(--brine);
        color: var(--sail);
      }

      .custom__card h2 {
        margin-top: 10px;
        font-size: clamp(49px, 5vw, 72px);
      }

      .custom__card h2 em {
        color: var(--sail);
      }

      .custom__copy > p {
        color: var(--mist);
        font-size: 14px;
        line-height: 1.75;
      }

      .custom__copy .button {
        margin-top: 27px;
      }

      .custom__copy small {
        display: block;
        margin-top: 14px;
        color: var(--mist);
        font-size: 12px;
      }

      .faq {
        background: white;
      }

      .faq__grid {
        display: grid;
        grid-template-columns: 0.72fr 1.28fr;
        gap: 100px;
      }

      .faq__intro {
        align-self: start;
        position: sticky;
        top: 40px;
      }

      .faq__intro h2 {
        margin-top: 10px;
        font-size: clamp(48px, 4.5vw, 68px);
      }

      .faq__intro > p:not(.eyebrow) {
        max-width: 440px;
        margin-top: 26px;
        color: var(--slate);
        font-size: 13px;
        line-height: 1.75;
      }

      .faq__intro .text-link {
        margin-top: 28px;
      }

      .faq__list {
        border-top: 1px solid var(--line);
      }

      .faq details {
        border-bottom: 1px solid var(--line);
      }

      .faq summary {
        min-height: 85px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        cursor: pointer;
        list-style: none;
        font-size: 17px;
        font-weight: 500;
      }

      .faq summary::-webkit-details-marker {
        display: none;
      }

      .faq summary i {
        display: grid;
        width: 31px;
        height: 31px;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 50%;
        background: var(--sail);
        color: var(--brine);
        font-size: 17px;
        font-style: normal;
        transition: transform 0.2s ease;
      }

      .faq details[open] summary i {
        transform: rotate(45deg);
      }

      .faq details p {
        max-width: 760px;
        padding: 0 55px 27px 0;
        color: var(--slate);
        font-size: 13px;
        line-height: 1.8;
      }

      .final-cta {
        min-height: 655px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        background:
          linear-gradient(90deg, rgba(2, 20, 26, 0.96), rgba(2, 20, 26, 0.56)),
          url("assets/6b8afce00ec0bb68.webp")
            center / cover;
        color: white;
      }

      .final-cta__wash {
        position: absolute;
        inset: 0;
        opacity: 0.1;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
        background-size: 90px 90px;
      }

      .final-cta__inner {
        position: relative;
        z-index: 1;
      }

      .final-cta h2 {
        max-width: 980px;
        margin-top: 10px;
      }

      .final-cta__inner > p:not(.eyebrow) {
        margin-top: 26px;
        color: var(--mist);
        font-size: 16px;
      }

      .final-cta__inner > div {
        display: flex;
        gap: 12px;
        margin-top: 32px;
      }

      .final-cta__inner > small {
        display: block;
        margin-top: 22px;
        color: var(--mist);
        font-size: 12px;
        letter-spacing: 0.07em;
        text-transform: uppercase;
      }

      footer {
        padding: 64px 0 26px;
        background: var(--ink);
        color: white;
      }

      .footer__top {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
      }

      .footer__top > p {
        color: var(--mist);
        font-size: 12px;
        line-height: 1.7;
      }

      .footer__links {
        display: flex;
        justify-content: flex-end;
        gap: 24px;
      }

      .footer__links a {
        color: var(--mist);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .footer__bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 52px;
        padding-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--mist);
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      @media (max-width: 1120px) {
        .hero__grid {
          gap: 35px;
        }

        .hero-stage__note {
          right: 0;
        }

        .enquiry-card {
          right: 2px;
        }

        .nav__links {
          display: none;
        }

        .problem__grid,
        .section-heading,
        .scope__grid,
        .refresh__grid,
        .faq__grid {
          gap: 55px;
        }

        .pricing-layout {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 820px) {
        .shell {
          width: min(calc(100% - 36px), 1320px);
        }

        .section {
          padding-block: 82px;
        }

        h2 {
          font-size: 49px;
        }

        .offer-bar__inner {
          justify-content: flex-start;
          min-height: 42px;
          overflow: hidden;
          white-space: nowrap;
        }

        .offer-bar__inner span:not(.offer-bar__pulse) {
          display: none;
        }

        .offer-bar__inner a {
          margin-left: auto;
        }

        .site-header {
          height: 74px;
        }

        .brand__mark img {
          height: 22px;
        }

        .brand__copy strong {
          font-size: 15px;
        }

        .brand__copy small {
          font-size: 10px;
        }

        .nav .button {
          display: none;
        }

        .hero__grid {
          min-height: auto;
          grid-template-columns: 1fr;
          gap: 35px;
          padding-block: 72px 68px;
        }

        .hero h1 {
          font-size: 46px;
        }

        .hero__lede {
          font-size: 15px;
        }

        .hero__offer-card {
          grid-template-columns: 1fr;
        }

        .hero__offer-card > div {
          border-right: 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .hero__actions {
          align-items: stretch;
          flex-direction: column;
        }

        .hero__actions .button {
          width: 100%;
        }

        .hero__micro {
          flex-direction: column;
          gap: 10px;
        }

        .hero-stage {
          min-height: 430px;
          margin-top: -25px;
        }

        .browser-frame {
          width: 100%;
        }

        .demo-site {
          height: 350px;
        }

        .demo-site__nav span {
          display: none;
        }

        .demo-site__content {
          left: 27px;
          bottom: 40px;
        }

        .hero-stage__note {
          top: 12px;
          right: 9px;
        }

        .enquiry-card {
          width: 275px;
          right: -7px;
          bottom: -12px;
        }

        .signal-strip__grid {
          grid-template-columns: 1fr 1fr;
        }

        .signal-strip__grid > div,
        .signal-strip__grid > div:first-child {
          min-height: 96px;
          padding: 18px 10px;
          border-bottom: 1px solid var(--line);
        }

        .signal-strip__grid > div:nth-child(even) {
          padding-left: 22px;
          border-right: 0;
        }

        .problem__grid,
        .section-heading,
        .how__heading,
        .scope__grid,
        .refresh__grid,
        .custom__card,
        .faq__grid {
          grid-template-columns: 1fr;
        }

        .problem__grid,
        .section-heading,
        .how__heading,
        .scope__grid,
        .refresh__grid,
        .custom__card,
        .faq__grid {
          gap: 42px;
        }

        .problem__lead {
          font-size: 24px;
        }

        .tension-grid,
        .step-grid,
        .plan-cards,
        .family-columns {
          grid-template-columns: 1fr;
        }

        .family-columns {
          gap: 16px;
        }

        .preview-frame {
          height: 220px;
        }

        .preview-frame__hint {
          display: none;
        }

        .preview-frame:hover img {
          transform: translateY(-40%);
        }

        .tension-grid article {
          min-height: 0;
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .tension-grid article > div {
          margin-top: 48px;
        }

        .conversion-band {
          grid-template-columns: 1fr;
          gap: 22px;
          padding: 24px 20px;
        }

        .conversion-band > div:last-child,
        .section-actions {
          align-items: stretch;
          flex-direction: column;
          gap: 13px;
        }

        .conversion-band .button,
        .section-actions .button {
          width: 100%;
        }

        .conversion-band .text-link,
        .section-actions .text-link {
          align-self: center;
        }

        .template-grid {
          gap: 18px;
          margin-top: 44px;
        }

        .template-card__body {
          min-height: 195px;
        }

        .how__heading .eyebrow {
          grid-column: auto;
        }

        .step-grid li {
          padding: 28px 0;
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .step-grid li:first-child {
          border-left: 0;
        }

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

        .source-bar {
          grid-template-columns: 1fr;
        }

        .scope-board__included {
          padding: 22px 20px;
        }

        .scope-board__included ul.scope-board__included-list {
          grid-template-columns: repeat(2, 1fr);
        }

        .scope-board__tiers {
          grid-template-columns: 1fr;
        }

        .scope-board__column {
          padding: 25px;
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .scope-board__column:last-child {
          border-bottom: 0;
        }

        .refresh__visual {
          min-height: 340px;
        }

        .refresh-card {
          width: 315px;
          height: 215px;
        }

        .refresh-mock__bar {
          height: 20px;
        }

        .refresh-mock__old-nav {
          padding: 6px 10px;
          font-size: 12px;
        }

        .refresh-mock__old-photo {
          height: calc(100% - 20px);
        }

        .refresh-mock__old-text {
          gap: 4px;
          padding: 6px 10px 10px;
        }

        .refresh-mock__old-title {
          font-size: 15px;
        }

        .refresh-mock__old-ribbon {
          padding: 2px 6px;
        }

        .refresh-mock__new-photo {
          height: calc(100% - 20px);
        }

        .refresh-card--back {
          top: 0;
          left: 0;
        }

        .refresh-card--front {
          left: 75px;
          top: 115px;
        }

        .plan-card {
          padding: 26px 22px;
        }

        .custom__card {
          width: 100%;
          padding: 52px 25px;
        }

        .faq__intro {
          position: static;
        }

        .faq summary {
          min-height: 76px;
          font-size: 15px;
        }

        .final-cta {
          min-height: 700px;
        }

        .final-cta__inner > div {
          align-items: stretch;
          flex-direction: column;
        }

        .footer__top {
          grid-template-columns: 1fr;
          gap: 28px;
        }

        .footer__links {
          justify-content: flex-start;
        }

        .footer__bottom {
          flex-direction: column;
          gap: 10px;
        }
      }

      .tension-grid article,
      .plan-card,
      .step-grid li {
        transition: box-shadow 0.3s ease;
      }

      .tension-grid article:hover,
      .plan-card:hover {
        box-shadow: 0 20px 40px rgba(11, 31, 51, 0.12);
      }

      .step-grid li:hover {
        box-shadow: 0 20px 40px rgba(11, 31, 51, 0.08);
      }

      .scope-board__column > a,
      .source-bar > a {
        transition: opacity 0.2s ease;
      }

      .scope-board__column > a:hover,
      .source-bar > a:hover {
        opacity: 0.7;
      }

      @supports (animation-timeline: view()) {
        @keyframes reveal-up {
          from {
            opacity: 0;
            transform: translateY(26px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .problem__intro,
        .problem__copy,
        .section-heading > div,
        .how__heading > *,
        .scope__intro,
        .pricing__heading,
        .faq__intro,
        .pricing-highlight,
        .custom__card > div {
          animation: reveal-up linear both;
          animation-timeline: view();
          animation-range: entry 0% entry 55%;
        }

        .tension-grid article,
        .step-grid li,
        .plan-card,
        .signal-strip__grid > div {
          animation: reveal-up linear both;
          animation-timeline: view();
          animation-range: entry 0% entry 65%;
        }
      }

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

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

      .modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100;
      }

      .modal:target {
        display: block;
      }

      .modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(4, 12, 20, 0.68);
        backdrop-filter: blur(3px);
        cursor: default;
      }

      .modal__panel {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(calc(100% - 40px), 460px);
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        padding: 40px 36px;
        background: var(--sail);
        border-radius: 20px;
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
      }

      .modal__close {
        position: absolute;
        top: 18px;
        right: 18px;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: var(--ink);
        transition: background 0.2s ease;
      }

      .modal__close:hover {
        background: rgba(11, 31, 51, 0.08);
      }

      .modal__eyebrow {
        color: var(--brine);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

      .modal__panel h3 {
        margin-top: 10px;
        font-size: 30px;
        letter-spacing: -0.04em;
      }

      .modal__lede {
        margin-top: 12px;
        color: var(--slate);
        font-size: 14px;
        line-height: 1.65;
      }

      .modal__form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 26px;
      }

      .modal__field {
        display: flex;
        flex-direction: column;
        gap: 7px;
      }

      .modal__field span {
        color: var(--ink);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .modal__field input,
      .modal__field select,
      .modal__field textarea {
        border: 1px solid var(--line);
        background: white;
        padding: 12px 14px;
        color: var(--ink);
        font-family: var(--sans);
        font-size: 14px;
        resize: vertical;
      }

      .modal__field select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345586a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 16px;
        padding-right: 38px;
      }

      .modal__field select:invalid {
        color: var(--slate);
      }

      .modal__field input:focus,
      .modal__field select:focus,
      .modal__field textarea:focus {
        outline: 2px solid var(--brine);
        outline-offset: 1px;
      }

      .modal__field-row {
        display: flex;
        gap: 12px;
      }

      .modal__field-row .modal__field {
        flex: 1;
        min-width: 0;
      }

      .modal__submit {
        width: 100%;
        margin-top: 4px;
      }

      .modal__submit:disabled {
        opacity: 0.65;
        cursor: default;
      }

      .modal__hp {
        position: absolute;
        left: -9999px;
        top: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

      .modal__error {
        margin-top: -6px;
        padding: 10px 12px;
        border: 1px solid #d64545;
        background: rgba(214, 69, 69, 0.08);
        color: #a12f2f;
        font-size: 12px;
        line-height: 1.5;
      }

      .modal__success {
        text-align: center;
        padding: 12px 0 4px;
      }

      .modal__success-icon {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin: 0 auto;
        border-radius: 50%;
        background: rgba(11, 31, 51, 0.08);
        color: var(--brine);
      }

      .modal__success h3 {
        margin-top: 18px;
        font-size: 26px;
        letter-spacing: -0.04em;
      }

      .modal__success p {
        margin-top: 10px;
        color: var(--slate);
        font-size: 14px;
        line-height: 1.65;
      }

      .modal__trust {
        margin-top: -6px;
        color: var(--slate);
        font-size: 12px;
        text-align: center;
      }

      .modal__divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 26px 0;
        color: var(--slate);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }

      .modal__divider::before,
      .modal__divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line);
      }

      .modal__email {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px;
        border: 1px solid var(--line);
        color: var(--ink);
        font-size: 14px;
        font-weight: 500;
      }

      .modal__email:hover {
        background: rgba(11, 31, 51, 0.04);
      }

      @media (max-width: 560px) {
        .modal__panel {
          padding: 32px 22px;
          max-height: calc(100vh - 32px);
          overflow-y: auto;
          border-radius: 16px;
        }

        .modal__panel h3 {
          font-size: 25px;
        }
      }