
:root{
  --navy:#17394a;
  --ink:#0b0d0e;
  --gold:#bb7a19;
  --gold-soft:#fff9ee;
  --line:#d7dde0;
  --muted:#62727c;
  --paper:#fff;
  --wm:#e4f0f4;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, Arial, Helvetica, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff;color:var(--navy)}
body{font-family:var(--sans)}
button,a{font:inherit}
.page{
  min-height:100vh;
  display:grid;
  grid-template-columns:33.333% 66.667%;
  background:#fff;
}
.left-panel{
  position:relative;
  min-height:100vh;
  padding:38px 34px 54px 46px;
  overflow:hidden;
}
.topline{
  font-size:12px;
  letter-spacing:.24em;
  color:#183d53;
  white-space:nowrap;
}
.brand-logo{
  width:285px;
  max-width:48%;
  margin-top:43px;
  display:block;
  position:relative;
  z-index:3;
}
.watermark{
  position:absolute;
  z-index:0;
  width:480px;
  left:305px;
  top:108px;
  opacity:.10;
  pointer-events:none;
}
.intro,.benefits,.tagline{position:relative;z-index:2}
.intro{margin-top:38px}
.gold-rule{
  width:62px;
  height:3px;
  background:var(--gold);
  margin-bottom:30px;
}
.gold-rule.short{width:54px;height:2px;margin-bottom:18px}
h1{
  margin:0;
  color:#090909;
  font-family:var(--serif);
  font-size:66px;
  line-height:1.17;
  font-weight:400;
  letter-spacing:-.035em;
}
.lead{
  margin:22px 0 0;
  font-size:24px;
  line-height:1.55;
  color:#17394a;
}
.benefits{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-top:72px;
}
.benefit{text-align:center;color:#1b2930}
.benefit svg{
  width:42px;height:42px;
  fill:none;stroke:var(--gold);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;
}
.benefit h3{
  margin:10px 0 6px;
  font-size:12px;
  line-height:1.12;
  letter-spacing:.17em;
  color:#111;
}
.benefit p{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:#42545f;
}
.tagline{margin-top:36px}
.tagline p{
  margin:0;
  font-family:var(--serif);
  color:#c47d1a;
  letter-spacing:.2em;
  font-size:15px;
  line-height:1.75;
}
.right-panel{
  position:relative;
  min-height:100vh;
  padding:94px 5.5% 52px;

  background:linear-gradient(135deg,#0b6f78 0%,#0f808b 52%,#0a6570 100%);
}
.secure-header{
  position:absolute;
  right:7%;
  top:34px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#ffffff;
}
.lock-icon{font-size:23px}
.secure-header strong{
  display:block;
  font-family:var(--serif);
  letter-spacing:.16em;
  font-size:13px;
  font-weight:400;
}
.secure-header span{
  display:block;
  margin-top:5px;
  font-size:13px;
}
.checkout-card{
  width:100%;
  max-width:900px;
  margin:0 auto;
  min-height:840px;
  border-radius:16px;
  box-shadow:0 11px 32px rgba(21,46,57,.09);
  padding:31px 34px 35px;
  background:#fff;
}
.section-heading,.deposit-heading{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
}
.section-heading h2,.deposit-heading h2{
  margin:0;
  color:#111;
  font-family:var(--serif);
  letter-spacing:.09em;
  font-size:18px;
  font-weight:400;
  white-space:nowrap;
}
.heading-line{height:1px;background:#0f808b;max-width:135px}
.section-heading small,.deposit-heading small{
  font-size:10px;
  letter-spacing:.15em;
  color:#27495d;
  white-space:nowrap;
}
.package-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:27px;
}
.package{
  position:relative;
  appearance:none;
  text-align:left;
  border:1px solid #cfd8dd;
  border-radius:11px;
  background:#fff;
  padding:28px 29px 24px;
  color:#1a242b;
  min-height:348px;
  cursor:pointer;
  transition:.18s ease;
}
.package:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(31,55,67,.07)}
.package.selected{
  border-color:#0f808b;
  background:linear-gradient(120deg,#edf9fb 0%,#ffffff 78%);
}
.select-dot{
  position:absolute;
  right:20px;
  top:20px;
  width:29px;height:29px;
  border:2px solid #9eaab0;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#111;
  font-weight:700;
  background:#fff;
}
.selected .select-dot{
  border-color:#0f808b;
  background:#0f808b;
}
.package-name{
  display:block;
  color:#151515;
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:.14em;
}
.price{
  display:block;
  color:#0c0d0e;
  font-family:var(--serif);
  font-size:51px;
  font-weight:400;
  line-height:1;
  margin-top:13px;
}
.setup{display:block;margin-top:9px;font-size:16px;color:#222}
.package ul{list-style:none;margin:24px 0 0;padding:0}
.package li{
  position:relative;
  padding-left:30px;
  margin:13px 0;
  font-size:14px;
  color:#24343c;
}
.package li:before{
  content:"✓";
  position:absolute;left:0;top:-2px;
  color:#0f808b;
  font-size:21px;
  line-height:1;
}
.custom-quote-note{
  margin:16px 2px 0;
  font-size:13px;
  color:#355165;
  text-align:right;
}
.custom-quote-note a,
.custom-quote-note a:visited{
  color:#0f808b;
  font-weight:600;
  text-decoration:none;
}
.custom-quote-note a:hover{text-decoration:underline}
.deposit-heading{margin-top:29px}
.deposit-copy{
  margin:9px 0 19px;
  font-size:13px;
  color:#355165;
}
.deposit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.deposit-option{
  position:relative;
  border:1px solid #ccd6db;
  border-radius:9px;
  background:#fff;
  padding:13px 20px;
  min-height:90px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
}
.deposit-option.selected{
  border-color:#0f808b;
  background:linear-gradient(110deg,#edf9fb 0%,#ffffff 86%);
}
.deposit-option .select-dot{position:static;flex:0 0 29px}
.deposit-option strong{
  display:block;
  font-family:var(--serif);
  font-size:28px;
  color:#0f1112;
  font-weight:400;
}
.deposit-option small{
  display:block;
  margin-top:3px;
  font-size:14px;
  color:#314653;
}
.checkout-button{
  margin-top:23px;
  min-height:57px;
  border-radius:8px;
  background:#101619;
  color:#fff;
  text-decoration:none;
  display:grid;
  grid-template-columns:42px 1fr 32px;
  align-items:center;
  padding:0 24px;
  font-family:var(--serif);
  font-size:19px;
  transition:.18s ease;
}
.checkout-button:hover{background:#1b262b}
.btn-lock{text-align:center}.arrow{font-size:26px}
.encrypted{
  margin:17px 0 22px;
  text-align:center;
  font-size:11px;
  color:#3d5461;
}
.encrypted span{color:#111;margin-right:7px}
.trust-row{
  border-top:1px solid #dce2e5;
  padding-top:23px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.trust-item{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:0 18px;
}
.trust-item:first-child{padding-left:0}
.trust-item+ .trust-item{border-left:1px solid #d3dadd}
.trust-item svg{
  flex:0 0 38px;
  width:38px;height:38px;
  fill:none;stroke:#111;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
.trust-item strong{
  display:block;
  color:#111;
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.15em;
}
.trust-item span{
  display:block;
  margin-top:6px;
  color:#48606d;
  font-size:11px;
  line-height:1.45;
}

@media (max-width: 1120px){
  .page{grid-template-columns:46% 54%}
  .left-panel{padding-left:38px}
  h1{font-size:54px}
  .lead{font-size:21px}
  .benefits{gap:14px}
  .watermark{left:220px;width:430px}
  .checkout-card{padding:28px 25px}
}

@media (max-width: 900px){
  .page{display:block}
  .left-panel,.right-panel{min-height:auto}
  .left-panel{padding:30px 7% 50px}
  .right-panel{padding:76px 5% 40px}
  .secure-header{top:22px;right:7%}
  .brand-logo{width:285px;max-width:70%}
  .watermark{left:auto;right:-65px;top:140px;width:440px}
  .intro{margin-top:35px}
  .benefits{margin-top:56px}
  .checkout-card{min-height:0}
}

@media (max-width: 650px){
  .topline{font-size:9px;letter-spacing:.16em;white-space:normal;line-height:1.6}
  .brand-logo{margin-top:28px;width:245px}
  .watermark{width:350px;right:-115px;top:155px}
  h1{font-size:46px}
  .lead{font-size:18px}
  .benefits{grid-template-columns:1fr 1fr;gap:32px 18px}
  .tagline{margin-top:48px}
  .package-grid,.deposit-grid{grid-template-columns:1fr}
  .package{min-height:auto}
  .section-heading,.deposit-heading{grid-template-columns:auto 1fr}
  .section-heading small,.deposit-heading small{grid-column:1 / -1}
  .trust-row{grid-template-columns:1fr;gap:20px}
  .trust-item,.trust-item:first-child{padding:0}
  .trust-item+ .trust-item{border-left:0;border-top:1px solid #d3dadd;padding-top:18px}
  .checkout-card{padding:24px 18px}
  .custom-quote-note{text-align:center}
}
