@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap");

/* ---- Brand tokens (shared with the wewantyourtimeshare lander) ---- */
:root {
  --navy:#163f67; --navy-dark:#103453; --ink:#18344c; --warm:#fffdfa;
  --orange:#f39b52; --gold:#f5cf61; --coral:#f45843; --line:#d8e0e6; --soft-blue:#edf5f8;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--warm); color:var(--ink); font-family:Manrope, Arial, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
h1,h2,h3,p { margin-top:0; }
img { max-width:100%; }

.eyebrow { color:var(--navy); font-weight:800; font-size:15px; letter-spacing:.1em; line-height:1.4; margin:0 0 24px; text-transform:uppercase; }
.eyebrow span { color:var(--orange); }

.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:13px; font-size:18px; font-weight:800; padding:20px 27px; text-decoration:none; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(21,62,99,.18); }
.primary { background:var(--gold); color:var(--navy); box-shadow:0 8px 15px rgba(6,31,51,.25); }
.primary:hover { background:#ffe07a; }

/* ---- Header ---- */
.site-header { min-height:98px; display:flex; align-items:center; gap:30px; padding:15px clamp(28px,4vw,70px); border-bottom:1px solid rgba(21,62,99,.1); background:rgba(255,253,248,.95); position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.1) blur(4px); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; min-width:max-content; }
.brand img { width:58px; height:58px; object-fit:contain; }
.brand span { display:flex; flex-direction:column; line-height:1; }
.brand strong { color:var(--navy); font-size:18px; font-weight:800; letter-spacing:-.045em; text-transform:uppercase; }
.brand em { color:var(--navy); font-size:11px; font-weight:600; font-style:normal; margin-top:6px; }
nav { display:flex; gap:38px; margin-left:auto; }
nav a { font-size:15px; font-weight:800; text-decoration:none; }
nav a:hover { color:var(--orange); }
.header-button { margin-left:24px; border:2px solid var(--navy); border-radius:9px; padding:12px 22px; color:var(--navy); background:transparent; font-size:14px; font-weight:800; text-decoration:none; transition:background .18s ease, color .18s ease; }
.header-button:hover { background:var(--navy); color:white; }
nav + .header-button { margin-left:0; }

/* ---- Hero ---- */
.hero { min-height:calc(100vh - 98px); display:grid; grid-template-columns:minmax(0,49%) minmax(0,51%); overflow:hidden; background:var(--navy); }
.hero-copy { padding:clamp(60px,8vw,120px) clamp(30px,4vw,82px) 70px; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }
.hero .eyebrow { color:var(--gold); }
.hero .eyebrow span { color:var(--orange); }
.hero h1 { color:white; font-size:clamp(46px,5.2vw,80px); font-weight:800; letter-spacing:-.068em; line-height:.99; margin-bottom:28px; }
.hero-lead { color:#f6f9fb; font-size:clamp(21px,2vw,29px); font-weight:500; line-height:1.3; max-width:560px; margin-bottom:22px; }
.hero-value { color:#e6f0f4; font-size:17px; font-weight:600; line-height:1.5; max-width:540px; margin:0 0 30px; }
.hero-actions { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.hero-note { color:#dbe9f1; font-size:14px; margin:20px 0 0; }
.hero-visual { background:var(--navy-dark); min-height:600px; position:relative; overflow:hidden; border-left:8px solid var(--gold); border-top-left-radius:220px; }
.hero-image-wrap { position:absolute; inset:28px 0 20px 18px; overflow:hidden; border-top-left-radius:250px; border-bottom-left-radius:92px; }
.hero-image-wrap img { width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.roof-lines { position:absolute; left:-30px; bottom:-90px; width:150px; display:flex; gap:7px; transform:skew(-16deg); }
.roof-lines span { width:13px; height:390px; display:block; background:linear-gradient(var(--orange), var(--gold)); }
.roof-lines span:nth-child(3) { background:linear-gradient(var(--gold),#ffe78b); }

/* ---- Education band ---- */
.edu-band { display:flex; align-items:center; justify-content:center; gap:18px; padding:26px clamp(30px,6vw,120px); background:var(--gold); color:var(--navy); text-align:center; }
.edu-band p { margin:0; font-size:clamp(17px,2.1vw,22px); font-weight:800; letter-spacing:-.02em; }
.edu-band b { color:var(--navy-dark); }

/* ---- Section headings ---- */
.understood h2,.section-heading h2,.expect-section h2,.faq-section h2,.final-cta h2,.ways-head h2,.questions-transition h2 {
  color:var(--navy); font-family:Manrope, Helvetica, Arial, sans-serif; font-size:clamp(36px,4vw,58px); font-weight:800; letter-spacing:-.055em; line-height:1.08; margin-bottom:0;
}
h2 span.br { display:block; }

/* ---- If this feels familiar ---- */
.understood { display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; padding:110px clamp(30px,9vw,160px); background:white; }
.section-intro { max-width:520px; }
.symptom-copy { max-width:630px; }
.symptom-copy > p { font-size:19px; line-height:1.65; margin:0; }
.symptom-copy strong { color:var(--navy); }
.symptom-list { display:grid; gap:12px; margin:28px 0; }
.symptom-list article { border-left:4px solid var(--gold); background:var(--soft-blue); display:grid; gap:4px; padding:16px 18px; }
.symptom-list strong { font-size:15px; }
.symptom-list span { color:#526472; font-size:15px; line-height:1.5; }
.symptom-close { color:#3e5363; font-weight:600; }

/* ---- 4-step ---- */
.learn-section { position:relative; overflow:hidden; padding:110px clamp(30px,8vw,140px); background:var(--navy); }
.learn-section::before { content:""; position:absolute; width:430px; height:430px; right:-220px; top:-270px; border:34px solid rgba(245,207,97,.16); border-radius:50%; }
.learn-section .section-heading,.learn-section .learning-grid { position:relative; z-index:1; }
.learn-section .eyebrow { color:var(--gold); }
.learn-section h2 { color:white; }
.section-heading { max-width:770px; }
.section-heading > p:last-child { color:#dceaf2; font-size:18px; line-height:1.6; margin:24px 0 0; }
.learning-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; }
.learning-grid article { min-height:262px; position:relative; overflow:hidden; padding:31px; background:white; border-radius:16px; box-shadow:0 16px 34px rgba(7,35,59,.18); }
.learning-grid article::before { content:""; position:absolute; inset:0 0 auto; height:9px; background:var(--navy); }
.learning-grid article:nth-child(2)::before { background:var(--gold); }
.learning-grid article:nth-child(3)::before { background:var(--orange); }
.learning-grid article:nth-child(4)::before { background:#527da2; }
.learning-grid article span { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--navy); color:white; font-size:15px; font-weight:800; }
.learning-grid article:nth-child(2) span { background:var(--gold); color:var(--navy); }
.learning-grid article:nth-child(3) span { background:var(--orange); color:white; }
.learning-grid article:nth-child(4) span { background:#527da2; color:white; }
.learning-grid h3 { color:var(--navy); font-size:21px; font-weight:800; margin:34px 0 12px; }
.learning-grid p { color:#4c6175; font-size:15px; line-height:1.6; margin:0; }

/* ---- Ways to meet (3 options) ---- */
.ways-section { padding:115px clamp(30px,8vw,140px); background:var(--warm); }
.ways-head { max-width:820px; margin:0 auto; text-align:center; }
.ways-head .eyebrow { color:var(--navy); }
.ways-head > p:last-child { color:#4c6175; font-size:18px; line-height:1.6; margin:22px 0 0; }
.ways-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:60px; }
.way-card { display:flex; flex-direction:column; overflow:hidden; background:white; border:1px solid var(--line); border-radius:20px; box-shadow:0 20px 44px rgba(7,35,59,.10); transition:transform .2s ease, box-shadow .2s ease; }
.way-card:hover { transform:translateY(-6px); box-shadow:0 28px 56px rgba(7,35,59,.18); }
.way-photo { position:relative; aspect-ratio:4/3; overflow:hidden; }
.way-photo img { width:100%; height:100%; object-fit:cover; }
.way-photo b { position:absolute; top:16px; left:16px; padding:7px 13px; border-radius:999px; background:rgba(22,63,103,.92); color:white; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.way-body { display:flex; flex-direction:column; flex:1; padding:30px 28px 32px; }
.way-body h3 { color:var(--navy); font-size:26px; font-weight:800; letter-spacing:-.03em; margin:0 0 12px; }
.way-body > p { color:#4c6175; font-size:16px; line-height:1.6; margin:0 0 14px; }
.way-support { color:#768696; font-size:14px; font-weight:600; margin:0 0 26px; }
.way-cta { margin-top:auto; display:inline-flex; align-items:center; gap:9px; align-self:flex-start; padding:14px 22px; border-radius:11px; background:var(--navy); color:white; font-size:15px; font-weight:800; text-decoration:none; transition:background .18s ease, gap .18s ease; }
.way-cta:hover { background:var(--navy-dark); gap:14px; }
.way-card:nth-child(2) .way-cta { background:var(--orange); color:var(--navy-dark); }
.way-card:nth-child(2) .way-cta:hover { background:#f0873a; }
.ways-note { margin:44px auto 0; max-width:820px; text-align:center; color:#768696; font-size:15px; }

/* ---- What to expect ---- */
.expect-section { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; padding:115px clamp(30px,9vw,160px); background:white; }
.expect-section ul { list-style:none; padding:0; margin:24px 0 0; }
.expect-section li { padding:24px 0 24px 35px; border-bottom:1px solid var(--line); font-size:18px; line-height:1.5; position:relative; }
.expect-section li:first-child { border-top:1px solid var(--line); }
.expect-section li::before { content:"✓"; color:var(--orange); font-weight:800; left:0; position:absolute; }

/* ---- Proof strip ---- */
.proof-section { padding:96px clamp(30px,8vw,140px); background:var(--soft-blue); }
.proof-head { max-width:760px; margin:0 auto 46px; text-align:center; }
.proof-head .eyebrow { color:var(--navy); }
.proof-head h2 { color:var(--navy); font-size:clamp(30px,3.2vw,44px); font-weight:800; letter-spacing:-.05em; line-height:1.12; margin:0; }
.proof-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:1200px; margin:0 auto; }
.proof-grid figure { margin:0; position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:14px; box-shadow:0 12px 26px rgba(7,35,59,.14); }
.proof-grid img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.proof-grid figure:hover img { transform:scale(1.05); }
.proof-grid figcaption { position:absolute; left:0; right:0; bottom:0; padding:22px 14px 12px; background:linear-gradient(transparent, rgba(16,52,83,.85)); color:white; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }

/* ---- Before you choose + gift card ---- */
.questions-transition { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr); align-items:center; gap:64px; padding:96px clamp(30px,12vw,210px); background:var(--navy); color:white; }
.questions-transition .eyebrow { color:var(--gold); }
.questions-transition h2 { max-width:660px; color:white; margin:0 0 20px; }
.questions-transition > div > p:last-child { max-width:640px; color:#dceaf2; font-size:18px; line-height:1.65; margin:0; }
.gift-card-callout { display:block; overflow:hidden; border:1px solid rgba(245,207,97,.7); border-radius:18px; background:rgba(255,255,255,.08); color:white; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.gift-card-callout:hover { transform:translateY(-4px); background:rgba(255,255,255,.13); box-shadow:0 16px 35px rgba(4,23,39,.28); }
.gift-card-callout img { display:block; width:100%; aspect-ratio:1.72/1; object-fit:cover; object-position:center; }
.gift-card-qualification { display:block; padding:20px 24px 10px; color:#f1f6f8; font-size:15px; line-height:1.55; }
.gift-card-action { display:block; padding:0 24px 22px; color:var(--gold); font-size:15px; font-weight:800; }
.gift-card-action b { margin-left:6px; }

/* ---- FAQ ---- */
.faq-section { padding:110px clamp(30px,12vw,210px); background:white; }
.faq-section .eyebrow { color:var(--navy); }
.faq-section h2 { max-width:830px; }
.faq-list { margin-top:42px; }
.faq-list details { border-top:1px solid var(--line); padding:0; }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { list-style:none; cursor:pointer; padding:26px 44px 26px 0; position:relative; color:var(--navy); font-size:19px; font-weight:800; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:8px; top:22px; color:var(--orange); font-size:28px; font-weight:700; line-height:1; transition:transform .2s ease; }
.faq-list details[open] summary::after { content:"–"; }
.faq-list p { max-width:820px; color:#536a80; font-size:16px; line-height:1.65; margin:0 0 26px; }

/* ---- Final CTA ---- */
.final-cta { padding:110px 30px; background:linear-gradient(135deg,#123c61,#1c547d); color:white; text-align:center; }
.final-cta .eyebrow { color:#ffd367; }
.final-cta h2 { color:white; max-width:1040px; margin:0 auto 34px; }
.final-cta .primary { min-width:285px; }

/* ---- Footer ---- */
footer { background:#102f4b; color:#dbe7ef; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:36px clamp(30px,7vw,120px); }
footer p { font-size:12px; margin:0; }
.footer-brand { display:flex; align-items:center; gap:12px; }
.footer-brand img { width:46px; height:46px; object-fit:contain; background:#fff; border-radius:9px; padding:4px; }
.footer-brand span { display:flex; flex-direction:column; line-height:1; }
.footer-brand strong { color:white; font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:-.04em; }
.footer-brand em { color:white; font-size:11px; font-weight:600; font-style:normal; margin-top:5px; }

/* ---- Responsive ---- */
@media (max-width: 1040px) {
  .ways-grid { grid-template-columns:1fr; max-width:560px; margin-left:auto; margin-right:auto; }
  .proof-grid { grid-template-columns:repeat(3,1fr); }
  .proof-grid figure:nth-child(4),.proof-grid figure:nth-child(5) { display:none; }
}
@media (max-width: 960px) {
  nav { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-visual { min-height:440px; border-radius:130px 0 0; }
  .hero-image-wrap { inset:18px 0 0 12px; border-top-left-radius:150px; border-bottom-left-radius:65px; }
  .understood,.expect-section { grid-template-columns:1fr; gap:42px; }
  .learning-grid { grid-template-columns:repeat(2,1fr); }
  .questions-transition { grid-template-columns:1fr; gap:42px; }
  .gift-card-callout { width:min(100%,520px); }
}
@media (max-width: 620px) {
  .site-header { min-height:82px; padding:10px 18px; gap:14px; }
  .brand img { width:42px; height:39px; }
  .brand strong { font-size:13px; }
  .brand em { display:none; }
  .header-button { padding:10px 13px; font-size:12px; }
  .hero { min-height:auto; }
  .hero-copy { padding:56px 24px 44px; }
  .eyebrow { font-size:11px; }
  .hero-lead { font-size:21px; }
  .button { width:100%; padding:17px 20px; font-size:16px; }
  .hero-visual { min-height:320px; border-top-left-radius:100px; }
  .hero-image-wrap { border-top-left-radius:120px; border-bottom-left-radius:55px; }
  .roof-lines { bottom:-200px; }
  .learning-grid { grid-template-columns:1fr; }
  .learn-section,.expect-section,.understood,.ways-section,.proof-section { padding:72px 24px; }
  .learning-grid article { min-height:auto; }
  .ways-grid { margin-top:40px; }
  .proof-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .proof-grid figure:nth-child(3) { display:none; }
  .faq-section,.final-cta,.questions-transition { padding:72px 24px; }
  .final-cta h2 { font-size:34px; }
  footer { flex-direction:column; align-items:flex-start; padding:30px 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation:rise .5s both; }
  .hero-copy > *:nth-child(2){ animation-delay:.06s; }
  .hero-copy > *:nth-child(3){ animation-delay:.12s; }
  .hero-visual { animation:appear .7s both; }
  @keyframes rise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
  @keyframes appear { from{opacity:0} to{opacity:1} }
}

/* way-cta renders as a link now (full-page nav to /register). */