:root {
  --ink: #101923;
  --ink-soft: #182531;
  --cream: #f2eadc;
  --paper: #fffaf1;
  --gold: #d79c52;
  --gold-light: #f0c98f;
  --line: rgba(242, 234, 220, .16);
  --muted: #aab2b5;
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--cream);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  z-index: 20;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.page-shell { overflow: hidden; }
.topbar {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 700; }
.brand-mark {
  width: 35px; height: 35px; display: grid; place-items: center;
  border: 1px solid rgba(215,156,82,.65); border-radius: 50%; color: var(--gold-light);
  font-family: Georgia, serif; font-style: italic;
}
.age-pill {
  border: 1px solid rgba(240,201,143,.35); border-radius: 99px; padding: 10px 15px;
  color: var(--gold-light); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hero {
  min-height: 680px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 74px;
  align-items: center; padding: 62px 0 70px;
}
.hero-copy { min-width: 0; }
.eyebrow, .section-number { color: var(--gold-light); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; }
.eyebrow span { width: 34px; height: 1px; background: var(--gold); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 25px; font-size: clamp(52px, 6.1vw, 84px); line-height: .98; letter-spacing: -.045em; font-weight: 500; }
h1 em { font-family: "Playfair Display", Georgia, serif; font-weight: 600; color: var(--gold-light); }
.hero-lead { max-width: 540px; margin-bottom: 31px; color: #c4c7c4; font-size: 18px; line-height: 1.65; }
.hero-cta {
  display: inline-flex; min-height: 58px; align-items: center; gap: 15px; padding: 0 23px;
  color: var(--ink); background: var(--gold-light); border-radius: 99px; text-decoration: none; font-weight: 800;
  transition: transform .2s ease, background .2s ease;
}
.hero-cta svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hero-cta:hover { transform: translateY(-2px); background: #ffdda9; }
.hero-visual { position: relative; margin: 0; justify-self: end; width: min(100%, 480px); }
.hero-visual::before { content:""; position:absolute; inset: 8% -16% -8% 24%; border: 1px solid rgba(215,156,82,.28); border-radius: 46% 46% 10px 10px; transform: rotate(4deg); }
.hero-visual img { position: relative; display: block; width: 100%; aspect-ratio: .802; object-fit: cover; object-position: 52% center; border-radius: 48% 48% 18px 18px; filter: saturate(.82) contrast(1.03); }
.hero-visual figcaption {
  position: absolute; left: -32px; bottom: 30px; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; color: var(--ink); background: rgba(255,250,241,.95); border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0,0,0,.28); font-size: 13px; font-weight: 800;
}
.online-dot { width: 10px; height: 10px; border-radius: 50%; background: #4a9d72; box-shadow: 0 0 0 5px rgba(74,157,114,.14); }

.choice-section { padding: 88px 0 100px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: end; margin-bottom: 38px; }
.section-number { margin-bottom: 13px; }
.section-heading h2, .how-it-works h2 { margin-bottom: 0; font-size: clamp(34px, 4vw, 55px); line-height: 1.08; font-weight: 500; letter-spacing: -.035em; }
.section-heading > p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-bottom: 4px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.choice-card {
  position: relative; min-height: 245px; padding: 25px; display: grid;
  grid-template-columns: 74px 1fr 42px; align-items: end; gap: 20px;
  color: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-soft); text-decoration: none; overflow: hidden; isolation: isolate;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.choice-card::before { content:""; position:absolute; width: 210px; height:210px; border-radius:50%; right:-95px; top:-105px; background: rgba(215,156,82,.08); z-index:-1; transition: transform .35s ease; }
.choice-card:hover, .choice-card:focus-visible { transform: translateY(-4px); border-color: rgba(240,201,143,.55); background: #1c2b38; outline: none; }
.choice-card:hover::before { transform: scale(1.25); }
.choice-card.featured { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); }
.choice-card.featured::before { background: rgba(16,25,35,.07); }
.choice-card.featured:hover { background: #f7d39d; }
.card-index { position: absolute; top: 22px; left: 25px; font-size: 11px; font-weight: 700; letter-spacing: .16em; opacity: .6; }
.card-icon { width: 68px; height: 68px; display:grid; place-items:center; border: 1px solid currentColor; border-radius: 50%; opacity: .86; }
.card-icon svg { width: 29px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card-copy { display: flex; flex-direction: column; align-items: flex-start; }
.card-copy strong { font-size: clamp(23px, 2.2vw, 31px); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; }
.card-copy small { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.featured .card-copy small { color: rgba(16,25,35,.72); }
.recommend { margin-bottom: 11px; padding: 5px 9px; border-radius: 99px; background: var(--ink); color: var(--gold-light); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.card-arrow { width: 39px; height: 39px; display:grid; place-items:center; align-self:end; border-radius:50%; background: rgba(242,234,220,.09); font-size: 20px; }
.featured .card-arrow { background: rgba(16,25,35,.1); }
.choice-card.is-opening { opacity: .72; pointer-events: none; }

.how-it-works { padding: 85px 0 105px; border-top: 1px solid var(--line); }
.how-it-works h2 { margin-bottom: 38px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.steps > div { min-height: 130px; padding: 23px; border-left: 1px solid rgba(240,201,143,.45); background: linear-gradient(110deg, rgba(255,255,255,.035), transparent); }
.steps span { display: block; color: var(--gold-light); font-family: Georgia,serif; font-style: italic; font-size: 22px; margin-bottom: 18px; }
.steps p { margin: 0; color: var(--muted); line-height: 1.5; }
.steps strong { color: var(--cream); }

footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 27px 0 calc(27px + env(safe-area-inset-bottom)); display:flex; justify-content:space-between; gap:25px; color:#7f8a8d; border-top:1px solid var(--line); font-size:11px; line-height:1.5; }
footer p:first-child { max-width: 700px; }
footer p { margin: 0; }
.browser-note { position: fixed; inset:0; z-index:50; display:grid; place-items:end center; padding:18px; background:rgba(5,10,15,.72); backdrop-filter:blur(8px); }
.browser-note[hidden] { display:none; }
.browser-note-panel { position:relative; width:min(100%, 460px); padding:31px 25px calc(25px + env(safe-area-inset-bottom)); color:var(--ink); background:var(--paper); border-radius:25px; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.38); }
.browser-note-panel h2 { margin:12px 25px 11px; font-size:27px; }
.browser-note-panel p { color:#53606a; line-height:1.55; }
.close-note { position:absolute; right:14px; top:12px; width:42px; height:42px; border:0; border-radius:50%; background:#ece4d7; color:var(--ink); font-size:25px; cursor:pointer; }
.note-icon { width:54px; height:54px; margin:auto; display:grid; place-items:center; border-radius:50%; background:var(--gold-light); font-size:26px; }
.copy-link { width:100%; min-height:56px; border:0; border-radius:14px; color:var(--paper); background:var(--ink); font:700 16px/1 system-ui,sans-serif; cursor:pointer; }
.copy-status { min-height:18px; margin:9px 0 0!important; font-size:12px; }
.noscript { padding:14px 20px; background:#fff1c9; color:#372b18; text-align:center; font-size:13px; }

@media (max-width: 820px) {
  .topbar, main, footer { width: min(100% - 28px, 620px); }
  .topbar { min-height:72px; }
  .brand { font-size:14px; }
  .age-pill { padding:8px 11px; font-size:10px; }
  .hero { min-height:0; grid-template-columns:1fr; gap:38px; padding:44px 0 62px; }
  h1 { font-size:clamp(46px, 12.5vw, 66px); }
  .hero-lead { font-size:16px; }
  .hero-cta { width:100%; justify-content:center; min-height:60px; }
  .hero-visual { width:87%; justify-self:center; }
  .hero-visual figcaption { left:-9%; bottom:24px; }
  .choice-section { padding:64px 0 74px; }
  .section-heading { grid-template-columns:1fr; gap:14px; }
  .section-heading > p { font-size:14px; }
  .choice-grid { grid-template-columns:1fr; }
  .choice-card { min-height:210px; grid-template-columns:60px 1fr 38px; gap:15px; padding:22px; }
  .card-index { left:22px; }
  .card-icon { width:58px; height:58px; }
  .card-copy strong { font-size:26px; }
  .how-it-works { padding:63px 0 75px; }
  .steps { grid-template-columns:1fr; }
  .steps > div { min-height:105px; display:grid; grid-template-columns:45px 1fr; align-items:center; }
  .steps span { margin:0; }
  footer { flex-direction:column; }
}

@media (max-width: 520px) {
  .brand > span:last-child { display:none; }
  .age-pill { letter-spacing:.035em; }
}

@media (max-width: 380px) {
  .brand span:last-child { display:none; }
  .choice-card { grid-template-columns:52px 1fr 34px; padding:19px; gap:11px; }
  .card-index { left:19px; }
  .card-icon { width:50px; height:50px; }
  .card-copy strong { font-size:23px; }
  .card-copy small { font-size:12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}