@font-face {
      font-display: swap;
      font-family: 'cormorantgaramond-light';
      font-style: normal;
      font-weight: 400;
      src: url('/_functions/fontEternya?name=cormorant-regular&v=20260526m') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'cormorantgaramond';
      font-style: normal;
      font-weight: 400;
      src: url('/_functions/fontEternya?name=cormorant-regular&v=20260526m') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'cormorantgaramond';
      font-style: normal;
      font-weight: 700;
      src: url('/_functions/fontEternya?name=cormorant-bold&v=20260526m') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'futura-lt-w01-book';
      font-style: normal;
      font-weight: 400;
      src: url('/_functions/fontEternya?name=futura-book&v=20260526m') format('woff2');
    }

    :root {
      color-scheme: light;
      --ink: #453932;
      --ink-soft: rgba(69, 57, 50, 0.72);
      --ink-faint: rgba(69, 57, 50, 0.54);
      --paper: #e8dfd9;
      --paper-soft: #f3eeeb;
      --paper-light: #fbf8f5;
      --line: rgba(69, 57, 50, 0.24);
      --line-strong: rgba(69, 57, 50, 0.48);
      --shadow: 0 22px 60px rgba(69, 57, 50, 0.12);
      --font-heading-family: cormorantgaramond-light, cormorantgaramond, "cormorant garamond", serif;
      --font-body-family: futura-lt-w01-book, sans-serif;
      --font-heading: var(--font-heading-family);
      --font-body: var(--font-body-family);
      --font-h1: normal normal normal 96px/0.9em var(--font-heading-family);
      --font-h2: normal normal normal 44px/1.2em var(--font-heading-family);
      --font-h3: normal normal normal 32px/1.2em var(--font-heading-family);
      --font-h4: normal normal normal 24px/1.1em var(--font-heading-family);
      --font-body-copy: normal normal normal 16px/1.4em var(--font-body-family);
      --font-body-strong: normal normal bold 20px/1.3em var(--font-body-family);
      --font-small: normal normal normal 14px/1.3em var(--font-body-family);
      font-family: var(--font-body-family);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font: var(--font-body-copy);
      min-width: 320px;
    }

    button,
    input,
    select {
      font: inherit;
    }

    a {
      color: inherit;
    }

    .topbar {
      background: #453932;
      color: #ffffff;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .topbar-inner {
      align-items: center;
      display: flex;
      justify-content: flex-start;
      margin: 0 auto;
      max-width: 980px;
      min-height: 76px;
      padding: 0 24px;
    }

    .brand {
      align-items: center;
      display: inline-flex;
      font-family: var(--font-heading);
      font-size: 32px;
      font-weight: 700;
      gap: 12px;
      line-height: 1.2em;
      text-decoration: none;
    }

    .brand-logo {
      background: transparent;
      border-radius: 0;
      display: block;
      flex: 0 0 auto;
      height: 76px;
      object-fit: cover;
      width: 76px;
    }

    main {
      overflow: hidden;
    }

    .hero {
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      padding: 54px 28px 40px;
      text-align: center;
    }

    .hero-inner {
      display: grid;
      gap: 18px;
      margin: 0 auto;
      max-width: 920px;
    }

    h1 {
      letter-spacing: 0;
      font: var(--font-h1);
      margin: 0;
    }

    .lead {
      color: var(--ink-soft);
      font: var(--font-body-copy);
      margin: 0 auto;
      max-width: 820px;
    }

    .trust-row {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin: 24px auto 0;
      max-width: 930px;
    }

    .trust-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--ink-soft);
      font: var(--font-body-copy);
      min-height: 74px;
      padding: 13px 14px;
      text-align: left;
    }

    .trust-item strong {
      color: var(--ink);
      display: block;
      font: var(--font-body-strong);
      margin-bottom: 2px;
    }

    .content-band {
      background: var(--paper-soft);
      padding: 38px 28px 58px;
    }

    .layout {
      align-items: start;
      display: grid;
      gap: 26px;
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
      margin: 0 auto;
      max-width: 1160px;
    }

    .panel {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .form-panel {
      display: grid;
      gap: 24px;
      padding: clamp(22px, 3vw, 34px);
    }

    .section-kicker {
      color: var(--ink-faint);
      font: var(--font-small);
      margin: 0 0 6px;
    }

    .section-title {
      letter-spacing: 0;
      font: var(--font-h2);
      margin: 0 0 18px;
    }

    .grid {
      display: grid;
      gap: 18px 16px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    label,
    .field-label {
      color: var(--ink);
      font: var(--font-body-copy);
    }

    select,
    input[type="number"] {
      appearance: none;
      background-color: var(--paper);
      border: 1px solid var(--line-strong);
      border-radius: 40px;
      color: var(--ink);
      font: var(--font-body-copy);
      min-height: 50px;
      padding: 0 18px;
      width: 100%;
    }

    select {
      background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
      background-position: calc(100% - 24px) 21px, calc(100% - 18px) 21px;
      background-repeat: no-repeat;
      background-size: 6px 6px, 6px 6px;
      padding-right: 42px;
    }

    select:focus,
    input:focus {
      border-color: var(--ink);
      box-shadow: 0 0 0 3px rgba(69, 57, 50, 0.12);
      outline: none;
    }

    .checks {
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr;
      margin-bottom: 4px;
      max-width: 520px;
    }

    .form-actions {
      display: flex;
      justify-content: center;
      margin-top: 0;
      width: 100%;
    }

    .extra-section {
      display: grid;
      gap: 12px;
      margin-top: 2px;
    }

    .extra-title {
      color: var(--ink);
      font: var(--font-body-copy);
      margin: 0;
    }

    .check {
      align-items: center;
      background: transparent;
      border: 0;
      border-radius: 0;
      cursor: pointer;
      display: flex;
      font: var(--font-body-copy);
      gap: 12px;
      min-height: 28px;
      padding: 0;
    }

    .check input {
      appearance: none;
      background: transparent;
      border: 2px solid var(--ink);
      border-radius: 0;
      flex: 0 0 auto;
      height: 24px;
      margin: 0;
      position: relative;
      width: 24px;
    }

    .check input:checked::after {
      background: var(--ink);
      content: "";
      display: block;
      height: 12px;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
    }

    .result {
      overflow: hidden;
      position: sticky;
      top: 96px;
    }

    .result-head {
      background: var(--ink);
      color: var(--paper-soft);
      display: grid;
      gap: 10px;
      padding: clamp(24px, 3vw, 34px);
    }

    .result-head p,
    .result-head h2 {
      margin: 0;
    }

    .result-head h2 {
      letter-spacing: 0;
      font: var(--font-h2);
    }

    .badge {
      color: var(--paper-soft);
      display: block;
      font: var(--font-body-copy);
      justify-self: start;
      padding: 0;
    }

    .result-body {
      display: grid;
      gap: 16px;
      padding: clamp(22px, 3vw, 32px);
    }

    .metric {
      align-items: baseline;
      border-bottom: 1px solid var(--line);
      display: flex;
      gap: 16px;
      justify-content: space-between;
      padding-bottom: 14px;
    }

    .metric:last-of-type {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .metric span:first-child {
      color: var(--ink-soft);
      font: var(--font-body-copy);
    }

    .metric strong {
      color: var(--ink);
      font: var(--font-body-strong);
      text-align: right;
      white-space: nowrap;
    }

    .important-note {
      background: var(--paper-soft);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--ink-soft);
      font: var(--font-small);
      margin: 0;
      padding: 14px 15px;
    }

    .actions {
      display: grid;
      gap: 10px;
      margin-top: 2px;
    }

    .button {
      align-items: center;
      border-radius: 60px;
      display: inline-flex;
      font: var(--font-body-strong);
      justify-content: center;
      min-height: 50px;
      padding: 0 28px;
      text-align: center;
      text-decoration: none;
    }

    .button.primary {
      background: var(--ink);
      color: var(--paper-soft);
    }

    .button.secondary {
      border: 1px solid var(--ink);
      color: var(--ink);
    }

    .plans-band {
      background: var(--paper);
      border-top: 1px solid var(--line);
      padding: 40px 28px 54px;
    }

    .plans-wrap {
      margin: 0 auto;
      max-width: 1160px;
    }

    .plans-title {
      letter-spacing: 0;
      font: var(--font-h2);
      margin: 0 0 22px;
      text-align: center;
    }

    .plans {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .plan-card {
      background: var(--paper-soft);
      border: 1px solid var(--line);
      border-radius: 8px;
      display: grid;
      gap: 12px;
      min-height: 172px;
      padding: 20px 18px;
    }

    .plan-card.active {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--paper-soft);
    }

    .plan-card.active p,
    .plan-card.active strong {
      color: var(--paper-soft);
    }

    .plan-name {
      font: var(--font-h3);
      margin: 0;
    }

    .plan-card p {
      color: var(--ink-soft);
      font: var(--font-small);
      margin: 0;
    }

    .plan-card strong {
      color: var(--ink);
      display: block;
      font: var(--font-body-strong);
      margin-top: 1px;
    }

    .disclaimer {
      color: var(--ink-faint);
      font: var(--font-small);
      margin: 24px auto 0;
      max-width: 900px;
      text-align: center;
    }

    @media (max-width: 960px) {
      .layout,
      .plans {
        grid-template-columns: 1fr;
      }

      .result {
        position: static;
      }

      .plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .topbar-inner {
        min-height: 64px;
        padding: 0 18px;
      }

      .brand {
        font-size: 30px;
      }

      .brand-logo {
        height: 64px;
        width: 64px;
      }

      h1 {
        font-size: 50px;
        line-height: 0.95em;
      }

      .section-title,
      .result-head h2,
      .plans-title {
        font-size: 36px;
      }

      .check {
        font-size: 15px;
        gap: 12px;
      }

      .check input {
        height: 24px;
        width: 24px;
      }

      .check input:checked::after {
        height: 12px;
        width: 12px;
      }

      .hero,
      .content-band,
      .plans-band {
        padding-left: 18px;
        padding-right: 18px;
      }

      .trust-row,
      .grid,
      .checks,
      .plans {
        grid-template-columns: 1fr;
      }

      .metric {
        align-items: start;
        display: grid;
        gap: 4px;
      }

      .metric strong {
        text-align: left;
      }
    }