:root{--navy:#192552;--red:#ef1b24;--cream:#f6f3ed;--ink:#10162e;--muted:#687086;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%}.header{height:84px;padding:0 clamp(22px,6vw,90px);display:flex;align-items:center;gap:42px;background:var(--navy);color:#fff;position:relative;z-index:20;border-bottom:1px solid #ffffff20}.brand{width:210px}.brand img{display:block}.header nav{display:flex;gap:32px;margin-left:auto;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.language{position:relative}.language summary{cursor:pointer;list-style:none;font-size:12px;font-weight:800;border-left:1px solid #ffffff44;padding-left:20px}.language div{position:absolute;right:0;top:30px;background:#fff;color:var(--ink);width:180px;padding:8px;box-shadow:0 12px 32px #0003}.language a{display:block;padding:9px 12px;font-size:12px}.language a:hover,.language a.active{background:#f0f1f5;color:var(--red)}.pattern{background-color:var(--navy);background-image:linear-gradient(90deg,#192552d9,#192552f2),url('assets/pattern.png');background-size:auto,520px;color:#fff}.hero{min-height:720px;padding:110px clamp(22px,7vw,110px);display:grid;grid-template-columns:minmax(420px,.9fr) 1.1fr;align-items:center;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:50px;background:var(--cream);clip-path:polygon(0 100%,100% 0,100% 100%)}.hero-copy{position:relative;z-index:3}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--red);font-weight:800;margin:0 0 18px}.eyebrow.light{color:#ff8b8f}h1,h2,h3,h4{font-family:'Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:-.03em}h1{font-size:clamp(58px,6.4vw,102px);line-height:.86;margin:0}.lead{font-size:16px;line-height:1.75;color:#d5d9e8;max-width:610px;margin:30px 0}.actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;border:0;padding:17px 24px;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:800;cursor:pointer}.button.red{background:var(--red);color:#fff}.button.dark{background:var(--ink);color:#fff;padding:12px 18px}.button.white{background:#fff;color:var(--ink)}.text-link{font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.08em;border-bottom:1px solid #ffffff66;padding-bottom:4px}.return{display:flex;gap:16px;align-items:center;border-left:3px solid var(--red);padding-left:18px;margin-top:40px;max-width:380px}.return b{font:800 38px 'Arial Narrow',Arial}.return span{font-size:11px;line-height:1.5;color:#d5d9e8;text-transform:uppercase}.hero-products{position:absolute;inset:0 0 0 43%}.hero-products img{position:absolute;filter:drop-shadow(0 28px 28px #060a2055);mix-blend-mode:multiply}.bike{width:min(59vw,850px);right:-5%;top:3%}.car{width:min(32vw,430px);right:38%;bottom:4%}.section{padding:105px clamp(22px,7vw,110px)}.heading{display:grid;grid-template-columns:1fr 1fr;gap:75px;max-width:1300px;margin:0 auto 65px;align-items:end}.heading h2,.example h2,.benefits h2{font-size:clamp(48px,5vw,72px);line-height:.92;margin:0}.heading>p,.example>div>p{color:var(--muted);font-size:15px;line-height:1.8}.rate{max-width:1300px;margin:auto;background:#fff;padding:30px 45px;box-shadow:0 15px 45px #15204a12;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center}.rate div{display:flex;justify-content:center;align-items:center;gap:18px}.rate strong{font:800 34px 'Arial Narrow',Arial}.rate span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.rate i{font-style:normal;color:#bbb}.accent{color:var(--red)!important}.steps{display:grid;grid-template-columns:repeat(4,1fr);max-width:1300px;margin:75px auto 0}.steps article{border-left:1px solid #d8d8dc;padding:28px 32px}.steps article>span{font-size:11px;color:#999ead}.steps article>b{font-size:30px;color:var(--red);display:block;margin:42px 0 22px}.steps h3,.benefits h3{font-size:25px;line-height:1;margin:0 0 13px}.steps p,.benefits article p{font-size:12px;line-height:1.7;color:var(--muted)}.calculator{padding:82px clamp(22px,7vw,110px);display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.calculator h2,.terms h2,.closing h2{font-size:clamp(48px,5vw,76px);line-height:.92;margin:0 0 20px}.calculator>div>p:last-child,.terms-heading>p:last-child{color:#c9cde0;line-height:1.7;font-size:13px}.calculator-card{background:#fff;color:var(--ink);padding:34px 38px;position:relative}.calculator-card label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--muted);padding-right:60px}.calculator-card label span{display:flex;border-bottom:2px solid var(--ink);align-items:center;margin-top:8px}.calculator-card input{width:100%;border:0;outline:0;padding:8px 0;font:800 40px 'Arial Narrow',Arial;color:var(--ink)}.calculator-card>button{position:absolute;right:38px;top:46px}.results{display:grid;grid-template-columns:1fr auto 1fr;gap:25px;align-items:center;border-top:1px solid #dddfe5;margin-top:28px;padding-top:25px}.results div{display:flex;flex-direction:column}.results small,.results em{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-style:normal}.results strong{font:800 37px 'Arial Narrow',Arial}.results i{font-style:normal;color:#aaa}.example{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:center;background:#fff}.model{min-height:580px;position:relative}.model span{position:absolute;width:500px;height:500px;border-radius:50%;background:var(--red);left:6%;top:4%}.model img{position:absolute;width:min(48vw,610px);left:0;top:3%;mix-blend-mode:multiply}.model img.small{width:min(25vw,320px);left:auto;right:-3%;top:auto;bottom:0}.example dl{margin-top:30px}.example dl div{display:flex;justify-content:space-between;border-top:1px solid #dddfe4;padding:13px 0;align-items:baseline}.example dt{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.example dd{margin:0;font:800 24px 'Arial Narrow',Arial}.benefits>p,.benefits>h2,.benefits>div{max-width:1300px;margin-left:auto;margin-right:auto}.benefits>div{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:55px}.benefits article{background:#fff;padding:30px;min-height:235px;border-top:3px solid transparent}.benefits article:hover{border-color:var(--red)}.benefits article>span{display:block;font:800 44px 'Arial Narrow',Arial;color:#e0e2e6;margin-bottom:45px}.terms{padding:95px clamp(18px,7vw,110px)}.terms-heading{text-align:center;max-width:800px;margin:auto}.terms-document{text-align:center}.terms-document>summary{margin:25px auto 0;width:max-content;list-style:none}.document{max-width:980px;background:#fff;color:var(--ink);margin:55px auto 0;padding:55px clamp(22px,6vw,75px);text-align:left}.document>header{display:flex;gap:20px;align-items:center;border-bottom:2px solid var(--ink);padding-bottom:22px}.document>header>b{width:52px;height:52px;background:var(--red);color:#fff;border-radius:8px;display:grid;place-items:center;font:800 34px 'Arial Narrow',Arial}.document header small{color:var(--red);font-weight:800;letter-spacing:.1em}.document header h3{margin:3px 0 0;font-size:27px}.document aside{background:#fff2f2;border-left:3px solid var(--red);padding:13px 17px;margin:28px 0;font-size:11px;line-height:1.6}.document section{margin-top:34px}.document h4{font-size:23px;margin:0 0 14px}.document ol{padding-left:24px}.document li{font-size:12px;line-height:1.7;color:#353b50;padding-left:7px;margin-bottom:11px}.closing{text-align:center;background:#fff;padding:105px 22px}.closing>img{width:min(400px,80vw);background:var(--navy);padding:17px 20px;margin-bottom:38px}.closing p{max-width:650px;margin:20px auto 30px;color:var(--muted);line-height:1.7}footer{display:flex;justify-content:space-between;gap:25px;background:#0b1230;color:#b9bed0;padding:28px clamp(22px,7vw,110px);font-size:10px;text-transform:uppercase;letter-spacing:.06em}footer span{display:flex;gap:25px}
@media(max-width:950px){.header nav{display:none}.hero{grid-template-columns:1fr}.hero-products{left:48%;opacity:.5}.heading,.calculator,.example{grid-template-columns:1fr}.steps,.benefits>div{grid-template-columns:repeat(2,1fr)}.model{min-height:510px}.calculator{gap:35px}}
@media(max-width:620px){.header{height:72px;padding:0 17px}.brand{width:145px}.language{margin-left:auto}.hero{padding:70px 20px 100px;min-height:750px}.hero h1{font-size:58px}.hero-products{left:15%;top:42%;opacity:.33}.bike{width:680px;right:-100%}.car{width:320px;right:7%}.section{padding:72px 20px}.heading{gap:24px;margin-bottom:40px}.heading h2,.example h2,.benefits h2{font-size:48px}.rate{grid-template-columns:1fr;gap:10px}.rate div{flex-direction:column;gap:2px}.rate i{transform:rotate(90deg)}.steps,.benefits>div{grid-template-columns:1fr}.steps{margin-top:42px}.steps article{padding:22px}.steps article>b{margin:22px 0 13px}.calculator{padding:70px 20px}.calculator-card{padding:28px 20px}.calculator-card>button{right:20px;top:40px}.results{grid-template-columns:1fr}.results>i{display:none}.model{min-height:360px}.model span{width:300px;height:300px}.model img{width:390px}.model img.small{width:185px}.terms{padding:70px 16px}.document{padding:32px 20px}.closing{padding:75px 20px}footer{flex-direction:column;text-align:center;align-items:center}footer span{flex-wrap:wrap;justify-content:center}}

/* Typography aligned with the wide, geometric Builders Club wordmark. */
body,
button,
input,
summary {
  font-family: "Century Gothic", CenturyGothic, Futura, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
.return b,
.rate strong,
.calculator-card input,
.results strong,
.example dd,
.benefits article > span,
.document > header > b {
  font-family: Bahnschrift, "Century Gothic", Futura, Arial, sans-serif;
  font-stretch: normal;
}

h1 {
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: .92;
}

h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1;
}

.eyebrow,
.button,
.header nav,
.language summary,
.rate span,
.text-link {
  font-family: Bahnschrift, "Century Gothic", Arial, sans-serif;
  letter-spacing: .11em;
}

/* Loyalty conversion presented as three connected building bricks. */
.rate {
  overflow: visible;
  gap: clamp(22px, 4vw, 64px);
  padding: 58px clamp(22px, 5vw, 70px) 38px;
  background: transparent;
  box-shadow: none;
}

.rate div {
  position: relative;
  min-height: 128px;
  padding: 28px 22px 22px;
  flex-direction: column;
  gap: 7px;
  border: 1px solid #d9dce4;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 9px 0 #dfe1e7, 0 20px 35px #15204a18;
}

.rate div::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 16%;
  width: 31px;
  height: 17px;
  border: 1px solid #d4d7df;
  border-bottom: 0;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(90deg, #f8f8fa, #e5e7ec);
  box-shadow:
    42px 0 0 -1px #eceef2,
    84px 0 0 -1px #eceef2;
}

.rate div:last-child {
  border-color: #d90f18;
  background: var(--red);
  box-shadow: 0 9px 0 #bd1017, 0 20px 35px #ef1b2438;
}

.rate div:last-child::before {
  border-color: #bd1017;
  background: linear-gradient(90deg, #fa3038, #d90d16);
  box-shadow:
    42px 0 0 -1px #e9131c,
    84px 0 0 -1px #e9131c;
}

.rate strong {
  font-size: clamp(35px, 3vw, 48px);
  line-height: 1;
}

.rate span {
  text-align: center;
  line-height: 1.45;
}

.rate div:last-child strong,
.rate div:last-child span {
  color: #fff !important;
}

.rate i {
  font-family: Bahnschrift, Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: var(--red);
}

@media(max-width:620px) {
  .rate {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 28px 0 18px;
  }

  .rate div {
    width: 100%;
    min-height: 92px;
    padding: 22px 24px;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 12px;
    box-shadow: 0 7px 18px #15204a14;
  }

  .rate div::before {
    display: none;
  }

  .rate div:nth-of-type(1) { order: 1; }
  .rate i:nth-of-type(1) { order: 2; }
  .rate div:nth-of-type(2) { order: 3; }
  .rate i:nth-of-type(2) { order: 4; }
  .rate div:nth-of-type(3) { order: 5; }

  .rate strong {
    font-size: 36px;
    white-space: nowrap;
  }

  .rate span {
    max-width: 145px;
    text-align: right;
  }

  .rate i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    align-self: center;
    margin: 10px 0;
    border: 1px solid #ef1b2440;
    border-radius: 50%;
    background: #fff;
    font-size: 18px;
    transform: rotate(90deg);
  }

  .rate div:last-child {
    box-shadow: 0 7px 18px #ef1b2430;
  }
}

/* Let the cathedral carry the example section without decorative competition. */
.example {
  grid-template-columns: minmax(480px, 1.15fr) minmax(360px, .85fr);
  gap: clamp(45px, 7vw, 110px);
}

.model {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.model img {
  position: static;
  width: 100%;
  max-width: 720px;
  height: auto;
  mix-blend-mode: multiply;
  filter: none;
}

.closing.pattern {
  background-color: var(--navy);
  background-image: linear-gradient(90deg, #192552e8, #192552f5), url('assets/pattern.png');
  background-size: auto, 520px;
  color: #fff;
}

.closing.pattern > img {
  width: min(440px, 82vw);
  padding: 0;
  background: transparent;
}

.closing.pattern p {
  color: #d4d8e7;
}

.hero {
  grid-template-columns: minmax(600px, 1.25fr) .75fr;
}

.hero-copy {
  max-width: 760px;
}

.hero h1 {
  font-size: clamp(52px, 5.2vw, 84px);
}

.hero h1 span {
  display: block;
  white-space: nowrap;
}

@media(max-width:1100px) {
  .hero {
    grid-template-columns: minmax(530px, 1.15fr) .85fr;
  }

  .hero h1 {
    font-size: clamp(48px, 5vw, 66px);
  }
}

@media(max-width:950px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 span { white-space: normal; }
}

@media(max-width:620px) {
  .hero h1 { font-size: 50px; }
}

.button.outline {
  border: 1px solid #ffffff80;
  background: #ffffff0a;
  color: #fff;
}

.button.outline:hover {
  border-color: #fff;
  background: #ffffff16;
}

/* Final conversion layout: clean cards on every screen size. */
.rate {
  gap: 18px;
  padding: 28px 0;
}

.rate div {
  min-height: 104px;
  padding: 24px;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 12px;
  box-shadow: 0 7px 18px #15204a14;
}

.rate div::before {
  display: none;
}

.rate strong {
  white-space: nowrap;
}

.rate span {
  max-width: 135px;
  text-align: right;
  line-height: 1.45;
}

.rate i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  align-self: center;
  flex: 0 0 36px;
  border: 1px solid #ef1b2440;
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
}

.rate div:last-child {
  box-shadow: 0 7px 18px #ef1b2430;
}

@media(max-width:620px) {
  .rate {
    gap: 0;
    padding: 28px 0 18px;
  }

  .rate div {
    min-height: 92px;
  }

  .rate i {
    margin: 10px 0;
    transform: rotate(90deg);
  }
}

@media(max-width:950px) {
  .example { grid-template-columns: 1fr; }
  .model img { max-width: 680px; }
}

@media(max-width:620px) {
  .model { min-height: 0; }
  .model img { width: 100%; max-width: 520px; }
}

/* Four club steps as substantial brick-like cards. */
.steps {
  gap: 20px;
  margin-top: 88px;
}

.steps article {
  position: relative;
  min-height: 310px;
  padding: 34px 30px 30px;
  border: 1px solid #d9dce4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 0 #e0e2e7, 0 18px 34px #15204a12;
}

.steps article::before,
.steps article::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 42px;
  height: 15px;
  border: 1px solid #d5d8df;
  border-bottom: 0;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(90deg, #fafafa, #e5e7ec);
}

.steps article::before { left: 18%; }
.steps article::after { right: 18%; }

.steps article > span {
  position: absolute;
  top: 25px;
  right: 25px;
  font: 700 16px Bahnschrift, Arial, sans-serif;
  color: #a6aab5;
}

.steps article > b {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 18px auto 38px;
  border-radius: 18px;
  background: var(--navy);
  color: #fff;
  font-family: Bahnschrift, Arial, sans-serif;
  font-size: 42px;
  line-height: 1;
  box-shadow: 0 6px 0 #0e173b;
}

.steps article:first-child > b,
.steps article:last-child > b {
  background: var(--red);
  box-shadow: 0 6px 0 #bd1017;
}

.steps h3 {
  font-size: 28px;
  margin-bottom: 15px;
}

.steps p {
  font-size: 13px;
  line-height: 1.75;
}

@media(max-width:950px) {
  .steps article { min-height: 280px; }
}

@media(max-width:620px) {
  .steps {
    gap: 34px;
    margin-top: 58px;
  }

  .steps article {
    min-height: 0;
    padding: 30px 27px;
  }

  .steps article > b {
    margin: 12px auto 30px;
  }
}