@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

:root { --ink:#1d2b2a; --muted:#64706c; --cream:#f5f1e9; --paper:#fbfaf7; --line:#d9ddd5; --sage:#dfe8df; --dark:#223735; --gold:#d1a85c; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:'DM Sans',system-ui,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.section-shell { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; width:min(calc(100% - 48px),var(--max)); margin:0 auto; padding:25px 0; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:700; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#fff; background:var(--dark); font-size:13px; }
.nav-links { display:flex; align-items:center; gap:28px; color:var(--muted); font-size:13px; }
.nav-links a:hover,.text-link:hover { color:var(--ink); }
.nav-pill { padding:9px 15px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:rgba(255,255,255,.3); }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:90px; min-height:690px; padding:70px 0 115px; }
.eyebrow,.section-kicker,.mini-label { margin:0 0 18px; color:#8b7957; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:'Playfair Display',Georgia,serif; font-weight:500; letter-spacing:-.045em; line-height:1.08; }
h1 { max-width:590px; margin-bottom:25px; font-size:clamp(50px,6.1vw,82px); }
h2 { margin-bottom:20px; font-size:clamp(40px,4.6vw,62px); }
h3 { margin-bottom:11px; font-size:22px; letter-spacing:-.03em; line-height:1.2; }
.hero-text { max-width:500px; color:var(--muted); font-size:18px; }
.hero-actions { display:flex; align-items:center; gap:24px; margin-top:34px; }
.button { display:inline-flex; align-items:center; gap:18px; padding:14px 19px; border-radius:999px; font-size:13px; font-weight:700; transition:transform .2s ease,box-shadow .2s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(29,43,42,.12); }
.button-primary { color:#fff; background:var(--dark); }
.button-light { color:var(--dark); background:#f5f1e9; }
.text-link { font-size:13px; font-weight:700; }
.platform-note { margin-top:43px; color:#8c938e; font-size:11px; letter-spacing:.04em; }
.hero-visual { position:relative; min-height:470px; display:grid; place-items:center; }
.hero-card { z-index:1; width:min(100%,480px); overflow:hidden; border:1px solid rgba(29,43,42,.1); border-radius:24px; background:rgba(255,255,255,.84); transform:rotate(2deg); }
.card-shadow { box-shadow:28px 30px 0 rgba(197,181,142,.18),0 20px 70px rgba(29,43,42,.16); }
.window-bar { display:flex; align-items:center; gap:6px; padding:16px 19px; border-bottom:1px solid #e3e5df; color:#9ca5a0; background:#fdfcf9; }
.window-bar span { width:7px; height:7px; border-radius:50%; background:#d7ddd5; }
.window-bar small { margin-left:auto; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.window-body { padding:42px 42px 39px; }
.mini-label { margin-bottom:18px; font-size:10px; }
.hero-quote { margin-bottom:19px; font-family:'Playfair Display',Georgia,serif; font-size:29px; line-height:1.25; letter-spacing:-.035em; }
.quote-reference { color:#8a918b; font-size:12px; }
.phase-row { display:flex; gap:20px; margin-top:36px; padding-bottom:14px; border-bottom:1px solid #dce1db; color:#9ca5a0; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.phase-row .active { color:var(--ink); }
.quiet-line { width:75px; height:3px; margin-top:28px; border-radius:4px; background:var(--gold); }
.hero-card-caption { margin:22px 0 0; color:#7d8881; font-size:12px; }
.sun-disc { position:absolute; width:255px; height:255px; right:4%; top:10%; border-radius:50%; background:#d9c69c; opacity:.56; }
.intro { padding:90px 0 94px; border-top:1px solid var(--line); text-align:center; }
.intro h2 { max-width:720px; margin-inline:auto; }
.section-lede { max-width:530px; margin-inline:auto; color:var(--muted); font-size:17px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-bottom:132px; }
.feature-card { min-height:440px; padding:30px; border-radius:20px; overflow:hidden; }
.feature-card p { max-width:285px; color:rgba(29,43,42,.68); font-size:14px; }
.feature-dark { color:#fff; background:var(--dark); }
.feature-dark p { color:rgba(255,255,255,.68); }
.feature-sage { background:var(--sage); }
.feature-cream { border:1px solid var(--line); background:var(--paper); }
.feature-number { margin-bottom:78px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.14em; }
.feature-art { display:flex; align-items:center; justify-content:center; height:135px; margin-top:38px; border-radius:14px; }
.passage-art { flex-direction:column; gap:9px; padding:24px; background:#354c49; font-family:'Playfair Display',Georgia,serif; font-size:20px; line-height:1.2; text-align:center; }
.passage-art small,.widget-art small { color:#aebdb2; font:10px 'DM Sans',sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.rhythm-art { align-items:flex-end; gap:8px; padding:24px; background:#c9dacb; }
.rhythm-art span { display:grid; place-items:center; width:31%; height:44px; border-radius:8px 8px 3px 3px; color:#506458; background:#f9fbf6; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.rhythm-art span:nth-child(2) { height:68px; color:#fff; background:var(--dark); }
.rhythm-art span:nth-child(3) { height:54px; }
.widget-art { flex-direction:column; gap:5px; background:#eee9dd; color:#7c704f; }
.widget-art span { font-size:25px; }
.widget-art strong { font:19px 'Playfair Display',Georgia,serif; }
.widget-art small { color:#89836f; }
.split-section { display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:100px; padding:28px 0 137px; }
.image-frame { overflow:hidden; border-radius:20px; box-shadow:14px 18px 0 rgba(197,181,142,.18); }
.image-frame img { display:block; width:100%; height:auto; }
.split-copy p:not(.eyebrow) { max-width:450px; color:var(--muted); font-size:17px; }
.check-list { display:grid; gap:14px; margin:31px 0 0; padding:0; list-style:none; font-size:14px; }
.check-list span { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:9px; border-radius:50%; color:#fff; background:var(--dark); font-size:11px; }
.quote-section { padding:95px 0 125px; border-top:1px solid var(--line); text-align:center; }
.quote-mark { color:var(--gold); font-family:Georgia,serif; font-size:86px; line-height:.7; }
blockquote { max-width:680px; margin:20px auto 12px; font-family:'Playfair Display',Georgia,serif; font-size:clamp(34px,4vw,54px); line-height:1.1; letter-spacing:-.04em; }
cite { color:var(--muted); font-size:13px; font-style:normal; }
.cta-section { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:66px 70px; border-radius:22px; color:#fff; background:var(--dark); }
.cta-section h2 { max-width:620px; margin:0; }
.cta-section .eyebrow { color:#d0b36f; }
.site-footer { display:flex; justify-content:space-between; padding:33px 0; color:#8a938c; font-size:11px; }
.site-footer div { display:flex; gap:22px; }
.support-hero { display:flex; align-items:center; justify-content:space-between; min-height:460px; padding:70px 0 85px; border-bottom:1px solid var(--line); }
.support-hero h1 { max-width:650px; font-size:clamp(48px,6vw,76px); }
.support-hero .hero-text { max-width:610px; margin-bottom:30px; }
.support-badge { display:grid; place-items:center; width:210px; height:210px; margin-right:75px; border:1px solid #c8cfbd; border-radius:50%; color:var(--dark); background:#e1e9dc; transform:rotate(-8deg); }
.support-badge span { margin-top:26px; color:#ad8c4c; font-size:42px; line-height:.3; }
.support-badge small { margin-bottom:25px; font-size:10px; font-weight:700; letter-spacing:.15em; line-height:1.5; text-align:center; }
.support-content { display:grid; grid-template-columns:1.3fr .7fr; gap:90px; padding:88px 0 120px; }
.support-main h2 { font-size:53px; }
.faq-list { margin-top:37px; border-top:1px solid var(--line); }
details { padding:22px 0; border-bottom:1px solid var(--line); }
summary { cursor:pointer; list-style:none; font-size:16px; font-weight:700; }
summary::-webkit-details-marker { display:none; }
summary::after { float:right; content:'+'; color:#8b7957; font-size:20px; font-weight:400; }
details[open] summary::after { content:'–'; }
details p { max-width:650px; margin:13px 30px 0 0; color:var(--muted); font-size:14px; }
.support-aside { display:grid; align-content:start; gap:15px; }
.aside-card { padding:26px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.35); }
.aside-card h3 { font-family:'Playfair Display',Georgia,serif; font-size:25px; font-weight:500; }
.aside-card p:not(.mini-label) { color:var(--muted); font-size:13px; }
.aside-card .text-link { display:inline-block; margin-top:7px; color:#896e3a; font-size:13px; word-break:break-word; }

@media (max-width: 800px) {
  .section-shell,.site-header { width:min(calc(100% - 32px),var(--max)); }
  .site-header { align-items:flex-start; gap:18px; }
  .nav-links { gap:13px; font-size:11px; }
  .nav-links a:nth-child(1),.nav-links a:nth-child(2) { display:none; }
  .hero { grid-template-columns:1fr; gap:35px; min-height:auto; padding:68px 0 94px; }
  h1 { font-size:clamp(48px,15vw,70px); }
  .hero-text { font-size:16px; }
  .hero-visual { min-height:390px; }
  .hero-card { width:calc(100% - 30px); }
  .window-body { padding:31px 27px; }
  .hero-quote { font-size:24px; }
  .feature-grid,.split-section,.support-content { grid-template-columns:1fr; }
  .feature-grid { padding-bottom:84px; }
  .feature-card { min-height:380px; }
  .feature-number { margin-bottom:58px; }
  .split-section { gap:47px; padding-bottom:88px; }
  .quote-section { padding:70px 0 90px; }
  .cta-section { align-items:flex-start; flex-direction:column; padding:42px 28px; }
  .cta-section h2 { font-size:42px; }
  .support-hero { align-items:flex-start; flex-direction:column; gap:45px; padding:62px 0 70px; }
  .support-badge { align-self:center; margin:0; width:165px; height:165px; }
  .support-content { gap:52px; padding:64px 0 82px; }
  .support-main h2 { font-size:45px; }
  .site-footer { align-items:flex-start; flex-direction:column; gap:12px; }
}