:root {
  --ink: #171715;
  --muted: #696a63;
  --paper: #f6f5f0;
  --green: #b99a57;
  --line: #deddd5;
  --display: 'Manrope', sans-serif;
  --body: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
.grain { display: none; }
.topbar { min-height: 76px; padding: 0 7%; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); position: relative; z-index: 10; background: var(--paper); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 11px var(--mono); letter-spacing: .08em; white-space: nowrap; }
.brand-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #d8bc7b; display: grid; place-items: center; font: 700 12px var(--display); letter-spacing: -.12em; padding-right: 2px; }
.brand-mark span { color: white; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topbar nav { display: flex; align-items: center; gap: 27px; }
.topbar nav a, .footer-links a { color: #5f625c; text-decoration: none; font-size: 11px; }
.topbar nav a:hover, .footer-links a:hover { color: #a38345; }
.top-cta { font: 500 9px var(--mono); text-decoration: none; color: var(--ink); border: 1px solid #c9c8bf; padding: 11px 13px; white-space: nowrap; }
.top-cta span { margin-left: 9px; color: #9d7f43; }
.menu-toggle { display: none; }
.hero { max-width: 1440px; min-height: 570px; padding: 76px 9% 70px; margin: 0 auto; display: grid; grid-template-columns: 1fr .86fr; align-items: center; gap: 7%; }
.hero-copy { max-width: 550px; }
.eyebrow, .section-label, .feature-number, .product-code, .account-kicker { font: 9px var(--mono); letter-spacing: .09em; color: #777a72; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.pulse { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #b99a57; }
h1, h2, h3, p { margin-top: 0; }
h1 { font: 600 clamp(52px, 6vw, 78px)/1.04 var(--display); letter-spacing: -.075em; margin: 27px 0 19px; }
h1 em, h2 em { font-family: Georgia, serif; font-weight: 400; color: #a08146; letter-spacing: -.06em; }
.hero-lede { max-width: 435px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 29px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; text-decoration: none; font: 500 9px var(--mono); padding: 15px 17px; transition: background .15s ease; }
.button:hover { background: #302d25; }
.button-primary { background: var(--ink); color: white; }
.button-primary span { color: #d8bc7b; }
.text-link, .under-link { font-size: 10px; color: #53564f; text-decoration: none; }
.text-link span { margin-left: 7px; color: #917747; }
.hero-note { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); margin-top: 44px; padding-top: 14px; color: #73766f; font-size: 10px; }
.note-icon { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #d4c7a6; border-radius: 50%; color: #8d7242; font-size: 11px; }
.hero-art { display: flex; align-items: center; justify-content: center; min-height: 356px; padding: 30px; background: #e9e7de; }
.member-preview { width: min(420px, 100%); padding: 25px 27px 19px; color: #f5f3eb; background: #1c1c19; }
.preview-heading { display: flex; gap: 12px; align-items: center; padding-bottom: 21px; border-bottom: 1px solid #3a3932; }
.preview-mark { width: 33px; height: 33px; border: 1px solid #857145; display: grid; place-items: center; border-radius: 50%; color: #d2b978; font: 600 11px var(--display); letter-spacing: -.1em; }
.preview-heading small, .preview-heading b, .preview-row b, .preview-row small { display: block; }
.preview-heading small { color: #b9a875; font: 8px var(--mono); letter-spacing: .08em; margin-bottom: 4px; }
.preview-heading b { font: 500 13px var(--display); }
.preview-row { min-height: 66px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid #33332e; }
.preview-icon { color: #b5a372; font: 9px var(--mono); }
.preview-row b { font: 500 11px var(--display); margin-bottom: 4px; }
.preview-row small { color: #a4a49b; font-size: 9px; }
.preview-arrow { margin-left: auto; color: #b99a57; font-size: 12px; }
.preview-link { display: flex; justify-content: space-between; margin-top: 17px; color: #e0cd9f; text-decoration: none; font: 9px var(--mono); }
.preview-link span { color: #d1b66e; }
.section { padding: 86px 10%; }
.section-label { color: #777b73; }
.section-label span { color: #927844; margin-right: 11px; }
.approach-grid { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 8%; margin: 33px 0 47px; }
h2 { font: 500 clamp(35px, 4vw, 50px)/1.1 var(--display); letter-spacing: -.065em; margin: 0; }
h2 span { color: #73756d; }
.approach-copy { max-width: 400px; justify-self: end; }
.approach-copy p, .products-heading>p { color: #6c7068; font-size: 12px; line-height: 1.8; margin-bottom: 17px; }
.under-link { font-weight: 600; border-bottom: 1px solid #c9c2ad; padding-bottom: 7px; }
.under-link span { padding-left: 12px; color: #927844; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature { padding: 23px 20px 25px 0; position: relative; border-right: 1px solid var(--line); }
.feature+.feature { padding-left: 21px; }
.feature:last-child { border: 0; }
.feature-number { font-size: 8px; color: #85867e; }
.feature-icon { margin: 25px 0 14px; font-size: 19px; color: #9a7e46; }
.feature h3 { font: 600 14px var(--display); letter-spacing: -.025em; margin-bottom: 8px; }
.feature p { max-width: 245px; color: #73766e; font-size: 11px; line-height: 1.75; margin: 0; }
.feature-arrow { position: absolute; right: 17px; top: 21px; color: #917747; font-size: 12px; }
.membership { background: #191a17; color: #f4f1e8; padding: 78px 10%; }
.membership .section-label { color: #b2b0a4; }
.products-heading { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 8%; margin: 31px 0 27px; }
.products-heading h2 em { color: #d2b572; }
.products-heading>p { color: #b4b3aa; max-width: 390px; justify-self: end; margin: 0; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.product-card { background: #f8f7f1; border: 1px solid #dedbd0; color: var(--ink); padding: 23px 25px 21px; position: relative; min-height: 273px; }
.product-featured { background: #e9e6dc; border-color: #e9e6dc; }
.product-top { display: flex; justify-content: space-between; align-items: center; }
.product-icon { width: 30px; height: 30px; border: 1px solid #d3cbb7; border-radius: 50%; display: grid; place-items: center; color: #927744; font-size: 14px; }
.product-code { color: #7b7b71; font-size: 8px; }
.product-card h3 { font: 600 19px var(--display); letter-spacing: -.04em; margin: 19px 0 8px; }
.product-card>p { color: #6f736b; font-size: 11px; line-height: 1.75; margin-bottom: 18px; max-width: 405px; }
.product-price { border-top: 1px solid #dedbd1; padding-top: 13px; display: flex; justify-content: space-between; align-items: center; }
.product-price strong { font: 600 11px var(--display); }
.product-price span { font: 8px var(--mono); color: #74776f; }
.product-link { display: inline-block; margin-top: 16px; color: #896e3d; font: 9px var(--mono); text-decoration: none; }
.product-link span { padding-left: 7px; }
.product-link:hover { text-decoration: underline; }
.product-corner { position: absolute; right: 23px; bottom: 15px; font: 500 16px var(--display); letter-spacing: -.14em; color: #655332; opacity: .4; }
.product-footnote { max-width: 700px; margin: 15px 0 0; color: #a8a99e; font-size: 9px; line-height: 1.7; }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; margin-top: 36px; }
.faq-list details { border-top: 1px solid var(--line); padding: 17px 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 15px; font: 600 12px var(--display); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: #987b46; font: 400 17px var(--body); }
.faq-list details p { color: #73766e; font-size: 11px; line-height: 1.8; max-width: 510px; margin: 12px 20px 0 0; }
.closing { padding: 43px 10%; background: #eae8df; display: flex; align-items: center; gap: 16px; }
.closing-mark { color: #9b804c; font-size: 20px; }
.closing p { font: 500 18px var(--display); letter-spacing: -.04em; margin: 0; flex: 1; }
.closing a { font: 9px var(--mono); color: #4c5149; text-decoration: none; }
.closing a span { color: #927747; padding-left: 8px; }
footer { padding: 30px 7% 23px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 17px; }
.footer-copy, .footer-links a { font-size: 9px; color: #777c73; }
.footer-links { display: flex; justify-content: flex-end; gap: 19px; }
.risk-note { grid-column: 1/-1; margin: 5px 0 0; padding-top: 13px; border-top: 1px solid var(--line); font-size: 8px; line-height: 1.6; color: #898d83; }
@media(max-width:850px) { .topbar { padding: 0 5%; gap: 14px; } .topbar nav { gap: 14px; } .topbar nav a { font-size: 10px; } .top-cta { font-size: 8px; padding: 10px; } .hero { padding: 58px 6%; min-height: 500px; gap: 5%; } .hero-art { padding: 22px; min-height: 320px; } .section { padding: 72px 7%; } .membership { padding: 70px 7%; } }
@media(max-width:640px) { .topbar { min-height: 67px; padding: 0 6%; } .topbar nav { display: none; } .topbar nav.open { display: flex; position: absolute; left: 0; right: 0; top: 66px; padding: 19px 6%; background: var(--paper); flex-direction: column; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--line); } .top-cta { display: none; } .menu-toggle { display: block; border: 0; background: none; font-size: 20px; color: var(--ink); } .hero { display: flex; flex-direction: column; align-items: stretch; padding: 47px 7% 52px; gap: 28px; } h1 { font-size: 57px; margin: 22px 0 16px; } .hero-lede { font-size: 13px; } .hero-note { margin-top: 29px; } .hero-art { min-height: 0; padding: 17px; } .member-preview { padding: 21px; } .section { padding: 60px 7%; } .approach-grid, .faq-grid, .products-heading { grid-template-columns: 1fr; gap: 18px; } .approach-grid { margin: 27px 0 34px; } .approach-copy, .products-heading>p { justify-self: start; } .feature-grid { grid-template-columns: 1fr; } .feature, .feature+.feature { padding: 19px 0; border-right: 0; border-bottom: 1px solid var(--line); } .feature:last-child { border-bottom: 0; } .feature-icon { margin: 14px 0 8px; } .membership { padding: 58px 7%; } .products-heading { margin: 25px 0 22px; } .product-grid { grid-template-columns: 1fr; gap: 11px; } .product-card { min-height: 0; padding: 21px; } .product-card h3 { margin-top: 16px; } .closing { padding: 35px 7%; flex-wrap: wrap; gap: 12px; } .closing p { font-size: 16px; flex-basis: calc(100% - 40px); } .closing a { margin-left: 36px; } footer { padding: 25px 7% 20px; grid-template-columns: 1fr auto; } .footer-copy { grid-column: 1/-1; grid-row: 2; } .footer-links { gap: 12px; } .footer-links a { font-size: 8px; } }