:root{
  --ink:#15234A;
  --ink2:#3C4A6E;
  --mute:#6B7690;
  --hl:#B9531B;
  --gold:#B85A1F;
  --seal:#D0712E;
  --card:#FFFDF8;
  --line:rgba(21,35,74,.1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; min-height:100%; background:#F3C894 linear-gradient(180deg,#DCE5F4 0%,#E9EDF5 30%,#F3ECE6 60%,#F7DDBF 85%,#F3C894 100%) no-repeat; background-size:100% 100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font:400 17px/1.6 'Jost',system-ui,-apple-system,sans-serif;
  background:transparent;
}
a{color:var(--gold)}
a:hover{color:var(--hl)}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px}
.narrow{max-width:720px}

/* nav */
.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand img{width:38px; height:38px; border-radius:9px; box-shadow:0 3px 10px rgba(21,35,74,.12)}
.brand span{font:600 23px/1 'Cormorant Garamond',Georgia,serif; letter-spacing:.01em}
.nav-links{display:flex; gap:22px; font-size:15px}
.nav-links a{color:var(--ink2); text-decoration:none}
.nav-links a:hover{color:var(--hl)}

/* hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding:56px 0 72px}
.hero h1{font:600 clamp(40px,5.6vw,64px)/1.04 'Cormorant Garamond',Georgia,serif; margin:0 0 20px; letter-spacing:-.005em}
.hero h1 em{font-style:normal; color:var(--hl)}
.hero p.lead{font-size:19px; color:var(--ink2); margin:0 0 30px; max-width:30em}
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#FFF6E6; text-decoration:none; padding:15px 26px; border-radius:16px; font-weight:500; font-size:16px}
.btn small{opacity:.75; font-weight:400}
.btn:hover{color:#FFF6E6; background:#1E2F5E}
.hero-note{font-size:14px; color:var(--mute); margin-top:14px}

/* note card */
.card-stage{display:flex; justify-content:center}
.note{
  width:100%; max-width:360px; background:var(--card); border-radius:22px; padding:26px 26px 22px;
  box-shadow:0 22px 50px rgba(21,35,74,.12), 0 2px 6px rgba(21,35,74,.06);
  transform:rotate(-2.5deg);
}
.note .tag{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:14px}
.note .by{font-size:14px; color:var(--mute); margin-bottom:8px}
.note .lead2{font:600 22px/1.2 'Cormorant Garamond',Georgia,serif; color:var(--hl); margin-bottom:8px}
.note .text{font:400 18px/1.55 'Spectral',Georgia,serif; color:var(--ink)}
.note .foot{display:flex; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--mute)}

/* steps */
.section{padding:28px 0 84px}
.section h2{font:600 clamp(32px,4vw,44px)/1.1 'Cormorant Garamond',Georgia,serif; margin:0 0 34px; text-align:center}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.step{background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.9); border-radius:22px; padding:26px}
.step .n{width:34px; height:34px; border-radius:50%; background:#FFF3E4; color:var(--seal); display:grid; place-items:center; font-weight:600; margin-bottom:14px}
.step h3{font:600 24px/1.2 'Cormorant Garamond',Georgia,serif; margin:0 0 8px}
.step p{margin:0; color:var(--ink2); font-size:16px}

.promise{max-width:680px; margin:0 auto; text-align:center; color:var(--ink2)}
.promise h2{color:var(--ink)}
.promise p{margin:0 0 12px}

/* legal and support pages */
.doc{background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.95); border-radius:24px; padding:44px 48px; margin:24px auto 72px}
.doc h1{font:600 clamp(36px,5vw,48px)/1.08 'Cormorant Garamond',Georgia,serif; margin:0 0 6px}
.doc .updated{color:var(--mute); font-size:14px; margin:0 0 28px}
.doc h2{font:600 26px/1.2 'Cormorant Garamond',Georgia,serif; margin:34px 0 10px}
.doc h3{font-size:17px; font-weight:600; margin:22px 0 6px}
.doc p,.doc li{color:var(--ink2)}
.doc ul{padding-left:22px}
.doc li{margin:5px 0}
.doc table{width:100%; border-collapse:collapse; font-size:15px; margin:12px 0}
.doc th,.doc td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.doc th{color:var(--ink); font-weight:600}
.callout{background:#FFF3E4; border-radius:16px; padding:16px 20px; margin:18px 0}
.callout p{margin:0}

/* footer */
.footer{padding:28px 0 40px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--ink2)}
.footer nav{display:flex; gap:20px; flex-wrap:wrap}
.footer a{color:var(--ink2); text-decoration:none}
.footer a:hover{color:var(--hl)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:40px; padding:28px 0 56px}
  .steps{grid-template-columns:1fr}
  .nav-links{gap:16px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .doc{padding:28px 20px; border-radius:20px}
  .nav-links a.hide-sm{display:none}
  .hero p.lead{font-size:17px}
}