:root {
      --bg: #f9f5ee;
      --bg2: #f1e9dd;
      --card: #fff;
      --ink: #1b2a44;
      --text: #3a4150;
      --muted: #6b6f78;
      --accent: #e8a63a;
      --brown: #9a6414;
      --line: #e2d9c9;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px)
    }

    @media (prefers-color-scheme:dark) {
      :root:not([data-theme="light"]) {
        --bg: #141a26;
        --bg2: #1b2333;
        --card: #222c40;
        --ink: #f3ecdf;
        --text: #c9ced8;
        --muted: #98a0ae;
        --brown: #e8a63a;
        --line: #323d54
      }
    }

    :root[data-theme="dark"] {
      --bg: #141a26;
      --bg2: #1b2333;
      --card: #222c40;
      --ink: #f3ecdf;
      --text: #c9ced8;
      --muted: #98a0ae;
      --brown: #e8a63a;
      --line: #323d54
    }

    html {
      scroll-padding-top: env(safe-area-inset-top, 0px)
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: 17px/1.6 "Source Sans 3", system-ui, sans-serif
    }

    h1,
    h2 {
      font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
      color: var(--ink);
      line-height: 1.05;
      margin: 0
    }

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px
    }

    .hero {
    background: linear-gradient(90deg, rgba(18, 26, 43, .92), rgba(18, 26, 43, .75)), url(../images/de89036b30061267f25f8e5693393bd33195e3a2.webp) center/cover, linear-gradient(120deg, #7a6548, #34425c 60%, #1b2336);
      color: #fff;
      padding: 72px 0 56px
    }

    .hero .kicker {
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase
    }

    .hero h1 {
      color: #f9f5ee;
      font-size: clamp(40px, 8vw, 60px);
      margin: 22px 0 20px
    }

    .hero p {
      color: #dfe3ea;
      max-width: 520px;
      margin: 0 0 28px
    }

    .btn {
      display: inline-block;
      padding: 12px 18px;
      border-radius: 6px;
      font-weight: 600;
      font-size: 15px;
      text-decoration: none;
      border: 1px solid transparent;
      margin: 0 8px 8px 0
    }

    .btn.primary {
      background: var(--accent);
      color: #1b2a44
    }

    .btn.ghost {
      border-color: #fff8;
      color: #fff
    }

    .btn.dark {
      background: #1b2a44;
      color: #fff
    }

    .facts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 12px;
      padding: 40px 0 8px
    }

    .fact {
      background: var(--bg2);
      border-radius: 8px;
      padding: 14px 16px
    }

    .fact small {
      display: block;
      color: var(--brown);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 6px
    }

    .fact b {
      color: var(--ink);
      font-size: 15px;
      line-height: 1.3;
      display: block
    }

    section.t {
      padding: 28px 0 20px
    }

    section.t h2 {
      font-size: 34px;
      margin-bottom: 12px
    }

    section.t p {
      margin: 0;
      max-width: 62ch
    }

    a {
      color: var(--ink)
    }

    .car {
      background: var(--bg2);
      padding: 56px 0;
      margin-top: 36px
    }

    .car small.k {
      color: var(--brown);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase
    }

    .car h2 {
      font-size: 36px;
      margin: 10px 0 12px
    }

    .price {
      font: 700 34px "Barlow Condensed", sans-serif;
      color: var(--ink)
    }

    .box {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 18px 20px;
      margin: 22px 0 14px;
      font-size: 15px
    }

    .box dl {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 10px 14px;
      margin: 14px 0 0;
      padding-top: 14px;
      border-top: 1px solid var(--line)
    }

    .box dt {
      color: var(--brown);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding-top: 3px
    }

    .box dd {
      margin: 0
    }

    details {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px;
      margin-bottom: 0
    }

    details summary {
      cursor: pointer;
      list-style: none;
      padding: 16px 20px;
      font-weight: 700;
      color: var(--ink);
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 16px
    }

    details summary::-webkit-details-marker {
      display: none
    }

    details summary::after {
      content: "+";
      font-size: 20px;
      line-height: 1
    }

    details[open] summary::after {
      content: "\2212"
    }

    details p {
      margin: 0;
      padding: 0 20px 18px;
      font-size: 15px
    }

    .faq {
      padding: 56px 0 24px
    }

    .faq h2 {
      font-size: 36px;
      margin-bottom: 8px
    }

    .faq .list {
      margin-top: 22px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--card);
      overflow: hidden;
      max-width: 460px
    }

    .faq .list details {
      border: 0;
      border-radius: 0;
      border-top: 1px solid var(--line)
    }

    .faq .list details:first-child {
      border-top: 0
    }

    .more h2 {
      font-size: 36px;
      margin-bottom: 8px
    }

    .notes {
      font-size: 13px;
      color: var(--muted);
      margin-top: 14px
    }

    .wide {
      max-width: 1200px
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 32px
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden
    }

    .card img {
      display: block;
      width: 100%;
      aspect-ratio: 3/2;
      object-fit: cover
    }

    .cb {
      padding: 22px 24px 24px
    }

    .card h3 {
      font: 700 24px/1.1 "Barlow Condensed", sans-serif;
      color: var(--ink);
      margin: 0 0 8px
    }

    .meta {
      color: var(--brown);
      font-size: 13px;
      margin-bottom: 10px
    }

    .card p {
      margin: 0 0 14px;
      font-size: 15px;
      color: var(--muted)
    }

    .card a {
      font-weight: 600;
      font-size: 14px
    }

    .cta {
      background: #e8a63a;
      padding: 64px 0;
      margin-top: 24px
    }

    .cta-in {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap
    }

    .cta h2 {
      font-size: 40px;
      color: #1b2a44;
      margin-bottom: 12px
    }

    .cta p {
      margin: 0;
      max-width: 420px;
      color: #1b2a44
    }

    .cta .btn {
      margin: 0
    }

    .more {
      padding: 48px 20px 64px
    }