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

:root {
  --midnight: #0d1738;
  --midnight-soft: #18254d;
  --lavender: #dccbff;
  --lavender-deep: #b79bf5;
  --cream: #fff8ed;
  --cream-deep: #f6f0e5;
  --mint: #a8e4d0;
  --ink-soft: #64708c;
  --line: rgba(13, 23, 56, .13);
  --display: 'DM Sans', sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--midnight); font-family: var(--display); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page-shell { overflow: hidden; }
.section-pad { padding: 128px max(24px, calc((100vw - 1180px) / 2)); }

.site-header { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--midnight); }
.brand-mark { width: 30px; height: 30px; position: relative; display: inline-block; background: var(--midnight); border-radius: 10px; overflow: hidden; }
.mark-ring { width: 19px; height: 19px; position: absolute; top: 5px; left: 5px; border: 2px solid var(--lavender); border-radius: 50%; }
.mark-signal { position: absolute; width: 16px; height: 7px; top: 12px; left: 7px; border-bottom: 2px solid var(--cream); border-radius: 0 0 10px 10px; transform: rotate(-20deg); }
.mark-dot { position: absolute; width: 4px; height: 4px; top: 10px; right: 5px; background: var(--mint); border-radius: 50%; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -.04em; }
.brand-name em, .mini-brand em { font-family: var(--serif); font-weight: 600; font-style: italic; }
.main-nav { display: flex; align-items: center; gap: 38px; margin-left: auto; margin-right: 25px; }
.main-nav a, .footer-links a { color: var(--ink-soft); font-size: 12px; font-weight: 600; transition: color .2s ease; }
.main-nav a:hover, .footer-links a:hover { color: var(--midnight); }
.header-cta { padding: 12px 17px; border: 1px solid var(--midnight); border-radius: 99px; font-size: 12px; font-weight: 700; transition: background .2s ease, color .2s ease; }
.header-cta span { margin-left: 8px; }
.header-cta:hover { color: var(--cream); background: var(--midnight); }

.hero { min-height: 690px; padding-top: 72px; padding-bottom: 96px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 74px; position: relative; }
.hero::before { content: ''; position: absolute; width: 580px; height: 580px; right: -260px; top: 18px; background: radial-gradient(circle, rgba(220, 203, 255, .52) 0, rgba(220, 203, 255, 0) 69%); pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--lavender-deep); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; font-weight: 500; }
.eyebrow-line { display: inline-block; width: 28px; height: 1px; background: currentColor; }
.hero h1 { margin: 22px 0 24px; max-width: 620px; color: var(--midnight); font-size: clamp(46px, 5.8vw, 80px); letter-spacing: -.075em; line-height: .99; font-weight: 600; }
.hero h1 span { display: block; color: var(--lavender-deep); font-family: var(--serif); font-style: italic; letter-spacing: -.065em; }
.hero-lede { max-width: 450px; margin: 0 0 32px; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.signup-form { width: 100%; display: flex; padding: 5px; border: 1px solid rgba(13, 23, 56, .2); border-radius: 99px; background: rgba(255, 255, 255, .58); transition: border-color .2s ease, box-shadow .2s ease; }
.signup-form:focus-within { border-color: var(--midnight); box-shadow: 0 0 0 4px rgba(220, 203, 255, .45); }
.signup-form input { min-width: 0; flex: 1; padding: 14px 16px; border: 0; outline: none; background: transparent; color: var(--midnight); font-size: 12px; }
.signup-form input::placeholder { color: #8f98aa; }
.signup-form button { flex-shrink: 0; padding: 13px 19px; border: 0; border-radius: 99px; background: var(--midnight); color: var(--cream); font-size: 12px; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.signup-form button:hover { background: var(--midnight-soft); transform: translateY(-1px); }
.signup-form button span { margin-left: 12px; color: var(--mint); font-size: 16px; line-height: 0; }
.form-note { margin: 13px 0 0 15px; color: #8b93a6; font-family: var(--mono); font-size: 9px; letter-spacing: .02em; }
.note-lock { margin-right: 5px; color: var(--lavender-deep); }
.form-success { min-height: 15px; margin: 10px 0 0 15px; color: #398b73; font-family: var(--mono); font-size: 10px; opacity: 0; transform: translateY(-3px); transition: opacity .25s ease, transform .25s ease; }
.form-success.is-visible { opacity: 1; transform: translateY(0); }
.signup-form.has-error { border-color: #d77979; animation: nudge .35s ease; }
.signup-form.is-submitted { border-color: #7fc8b1; }
@keyframes nudge { 25% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }

.hero-art { min-height: 550px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(183, 155, 245, .45); border-radius: 50%; transform: rotate(-28deg); }
.orbit-one { width: 490px; height: 320px; }
.orbit-two { width: 540px; height: 390px; transform: rotate(34deg); border-color: rgba(168, 228, 208, .58); }
.hero-card { width: min(390px, 72%); aspect-ratio: .78; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 27px 30px; color: var(--cream); background: linear-gradient(145deg, #172653, #0b1432 70%); border-radius: 28px; box-shadow: 20px 28px 60px rgba(13, 23, 56, .22); transform: rotate(7deg); }
.hero-card::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(220, 203, 255, .23); border-radius: 19px; pointer-events: none; }
.hero-card-top, .hero-card-bottom { display: flex; align-items: center; justify-content: space-between; color: rgba(255, 248, 237, .62); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.hero-card-signal { display: flex; align-items: center; gap: 7px; color: var(--mint); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; }
.pulse-dot { width: 6px; height: 6px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 5px rgba(168, 228, 208, .12); }
.hero-card-title { margin: -10px 0 0; font-size: clamp(40px, 5vw, 62px); font-weight: 600; line-height: .94; letter-spacing: -.08em; }
.hero-card-title i { color: var(--lavender); font-family: var(--serif); font-weight: 600; }
.hero-card-wave { display: flex; height: 56px; align-items: center; gap: 6px; }
.hero-card-wave span { width: 2px; background: var(--lavender); border-radius: 2px; opacity: .85; }
.hero-card-wave span:nth-child(1) { height: 16px; } .hero-card-wave span:nth-child(2) { height: 27px; } .hero-card-wave span:nth-child(3) { height: 47px; } .hero-card-wave span:nth-child(4) { height: 31px; } .hero-card-wave span:nth-child(5) { height: 16px; } .hero-card-wave span:nth-child(6) { height: 38px; } .hero-card-wave span:nth-child(7) { height: 51px; } .hero-card-wave span:nth-child(8) { height: 24px; } .hero-card-wave span:nth-child(9) { height: 43px; } .hero-card-wave span:nth-child(10) { height: 29px; } .hero-card-wave span:nth-child(11) { height: 18px; } .hero-card-wave span:nth-child(12) { height: 37px; }
.floating-tag { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 13px 10px 10px; background: rgba(255, 248, 237, .88); border: 1px solid rgba(13, 23, 56, .1); border-radius: 13px; box-shadow: 0 14px 30px rgba(13, 23, 56, .1); color: var(--midnight); font-family: var(--mono); font-size: 8px; line-height: 1.15; letter-spacing: .04em; }
.floating-tag strong { font-family: var(--display); font-size: 10px; letter-spacing: 0; }
.tag-top { top: 84px; right: 13%; transform: rotate(8deg); } .tag-bottom { bottom: 82px; left: 6%; transform: rotate(-8deg); }
.tag-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: var(--cream); background: var(--midnight); font-family: var(--mono); font-size: 9px; }
.tag-icon.mint { color: var(--midnight); background: var(--mint); font-size: 18px; }

.proof-strip { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-strip div { padding-left: 26px; border-left: 1px solid var(--line); } .proof-strip div:first-child { border-left: 0; padding-left: 0; }
.proof-strip strong { display: block; color: var(--midnight); font-size: 19px; letter-spacing: -.05em; } .proof-strip span { display: block; margin-top: 5px; color: var(--ink-soft); font-family: var(--mono); font-size: 9px; letter-spacing: .03em; }

.inside { padding-top: 145px; padding-bottom: 144px; }
.section-heading { max-width: 600px; margin-bottom: 53px; }
.section-heading h2, .preview-intro h2 { margin: 18px 0 14px; color: var(--midnight); font-size: clamp(35px, 4vw, 55px); font-weight: 600; line-height: 1.06; letter-spacing: -.07em; }
.section-heading > p:last-child, .preview-intro > p { max-width: 430px; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.value-card { min-height: 405px; padding: 26px 26px 25px; display: flex; flex-direction: column; border-radius: 23px; transition: transform .3s ease, box-shadow .3s ease; }
.value-card:hover { transform: translateY(-7px); box-shadow: 0 20px 38px rgba(13, 23, 56, .1); }
.value-card-lavender { background: var(--lavender); } .value-card-cream { background: var(--cream-deep); } .value-card-mint { background: var(--mint); }
.card-index { color: rgba(13, 23, 56, .58); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; } .card-index span { margin: 0 4px; }
.value-icon { height: 145px; margin: 19px 0 22px; position: relative; }
.icon-radar { display: grid; place-items: center; } .icon-radar::before, .icon-radar::after, .icon-radar span { content: ''; position: absolute; border: 1px solid rgba(13, 23, 56, .5); border-radius: 50%; transform: rotate(-30deg); } .icon-radar::before { width: 110px; height: 67px; } .icon-radar::after { width: 76px; height: 46px; } .icon-radar span { width: 39px; height: 24px; background: var(--midnight); border: 0; } .icon-radar i { width: 132px; height: 1px; background: rgba(13, 23, 56, .65); display: block; transform: rotate(-30deg); }
.icon-context { display: flex; align-items: center; justify-content: center; gap: 8px; } .icon-context span { display: block; width: 33px; height: 95px; background: rgba(13, 23, 56, .85); border-radius: 7px; transform: rotate(24deg); } .icon-context span:nth-child(2) { height: 125px; background: transparent; border: 1px solid rgba(13, 23, 56, .55); } .icon-context span:nth-child(3) { height: 73px; }
.icon-ahead { display: flex; align-items: center; justify-content: center; } .icon-ahead::before { content: ''; display: block; width: 114px; height: 114px; border: 1px solid rgba(13, 23, 56, .52); border-radius: 50%; } .icon-ahead::after { content: ''; position: absolute; width: 114px; height: 1px; background: rgba(13, 23, 56, .52); transform: rotate(-45deg); } .icon-ahead span { position: absolute; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: var(--midnight); color: var(--mint); font-size: 23px; }
.value-card h3 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.05em; } .value-card p { margin: 0; color: rgba(13, 23, 56, .68); font-size: 12px; line-height: 1.7; }
.card-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(13, 23, 56, .18); font-size: 11px; font-weight: 700; } .card-link span { font-size: 17px; font-weight: 400; }

.preview { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: center; padding-top: 124px; padding-bottom: 145px; background: var(--cream-deep); }
.preview-intro h2 span { color: var(--lavender-deep); font-family: var(--serif); font-style: italic; }
.text-link { display: inline-flex; gap: 16px; margin-top: 30px; padding-bottom: 8px; border-bottom: 1px solid var(--midnight); font-size: 12px; font-weight: 700; } .text-link span { font-size: 16px; line-height: 10px; }
.newsletter-preview { padding: 28px; color: var(--cream); background: var(--midnight); border-radius: 24px; box-shadow: 0 20px 50px rgba(13, 23, 56, .16); }
.newsletter-header, .newsletter-footer { display: flex; align-items: center; justify-content: space-between; color: rgba(255, 248, 237, .62); font-family: var(--mono); font-size: 8px; letter-spacing: .11em; }
.mini-brand { display: flex; align-items: center; gap: 7px; color: var(--cream); font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .05em; } .mini-mark { width: 19px; height: 19px; position: relative; display: block; border: 1px solid var(--lavender); border-radius: 6px; } .mini-mark::after { content: ''; position: absolute; width: 9px; height: 4px; left: 4px; top: 8px; border-bottom: 1px solid var(--cream); border-radius: 0 0 8px 8px; transform: rotate(-20deg); } .mini-mark i { position: absolute; width: 3px; height: 3px; top: 4px; right: 2px; background: var(--mint); border-radius: 50%; }
.featured-story { margin-top: 25px; padding: 28px 25px 24px; position: relative; overflow: hidden; background: linear-gradient(125deg, #203263, #15234b 70%); border-radius: 15px; } .featured-story::after { content: '042'; position: absolute; right: -8px; bottom: -32px; color: rgba(220, 203, 255, .08); font-size: 150px; font-weight: 700; letter-spacing: -.14em; }
.story-kicker { display: flex; justify-content: space-between; color: var(--mint); font-family: var(--mono); font-size: 8px; letter-spacing: .12em; } .featured-story h3 { position: relative; z-index: 1; max-width: 500px; margin: 42px 0 18px; color: var(--cream); font-size: clamp(25px, 3.2vw, 40px); line-height: 1.02; letter-spacing: -.07em; } .featured-story h3 i { color: var(--lavender); font-family: var(--serif); font-weight: 600; } .featured-story p { position: relative; z-index: 1; max-width: 480px; margin: 0 0 22px; color: rgba(255, 248, 237, .62); font-size: 11px; line-height: 1.75; } .story-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: rgba(255, 248, 237, .65); font-family: var(--mono); font-size: 8px; } .author-avatar, .person-avatar { display: inline-grid; place-items: center; border-radius: 50%; color: var(--midnight); background: var(--lavender); font-family: var(--mono); font-size: 8px; } .author-avatar { width: 24px; height: 24px; } .meta-dot { color: var(--lavender); }
.story-list { margin-top: 11px; } .story-row { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid rgba(255, 248, 237, .12); } .story-number { align-self: flex-start; margin-top: 2px; color: var(--lavender); font-family: var(--mono); font-size: 9px; } .story-row div { flex: 1; } .story-row strong { display: block; font-size: 12px; font-weight: 500; } .story-row small { display: block; margin-top: 8px; color: rgba(255, 248, 237, .45); font-family: var(--mono); font-size: 7px; letter-spacing: .1em; } .story-row small span { color: var(--mint); } .story-arrow { color: var(--lavender); font-size: 17px; }
.newsletter-footer { padding-top: 18px; color: rgba(255, 248, 237, .4); }

.voices { color: var(--cream); background: var(--midnight); }
.eyebrow.light { color: var(--mint); } .voices .section-heading { margin: 0; } .voices .section-heading h2 { color: var(--cream); } .voices .section-heading h2 em { color: var(--lavender); font-family: var(--serif); font-style: italic; font-weight: 600; }
.voices-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; } .carousel-controls { display: flex; gap: 10px; } .carousel-button { width: 44px; height: 44px; border: 1px solid rgba(255, 248, 237, .35); border-radius: 50%; color: var(--cream); background: transparent; font-size: 18px; transition: background .2s ease, color .2s ease; } .carousel-button:hover { color: var(--midnight); background: var(--cream); }
.quote-stage { min-height: 290px; margin: 65px 0 36px; padding: 42px 7vw 38px; position: relative; display: flex; flex-direction: column; justify-content: space-between; border-top: 1px solid rgba(255, 248, 237, .22); border-bottom: 1px solid rgba(255, 248, 237, .22); } .quote-mark { position: absolute; top: 19px; left: 0; color: var(--lavender); font-family: var(--serif); font-size: 73px; line-height: 1; } blockquote { max-width: 850px; margin: 0; color: var(--cream); font-size: clamp(24px, 3vw, 42px); font-weight: 500; line-height: 1.2; letter-spacing: -.065em; } .quote-person { display: flex; align-items: center; gap: 11px; margin-top: 34px; } .person-avatar { width: 32px; height: 32px; background: var(--mint); } .quote-person strong, .quote-person span { display: block; } .quote-person strong { font-size: 11px; } .quote-person span { margin-top: 3px; color: rgba(255, 248, 237, .5); font-family: var(--mono); font-size: 8px; } .quote-changing blockquote { animation: quoteIn .35s ease both; } @keyframes quoteIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.carousel-status { display: flex; align-items: center; gap: 13px; color: rgba(255, 248, 237, .48); font-family: var(--mono); font-size: 9px; } .status-line { width: 90px; height: 1px; overflow: hidden; background: rgba(255, 248, 237, .2); } .status-line i { display: block; width: 100%; height: 100%; background: var(--mint); transition: transform .35s ease; }

.final-cta { padding-top: 100px; padding-bottom: 100px; background: linear-gradient(118deg, var(--lavender), #d8e9e5 70%, var(--mint)); }
.cta-inner { display: grid; grid-template-columns: 1fr .85fr; gap: 70px; align-items: end; } .cta-inner h2 { margin: 18px 0 13px; color: var(--midnight); font-size: clamp(48px, 6vw, 78px); line-height: .9; letter-spacing: -.09em; } .cta-inner > div:first-child > p:last-child { margin: 0; color: rgba(13, 23, 56, .64); font-size: 14px; } .cta-form-wrap { padding-bottom: 5px; } .cta-form-wrap .signup-form { background: rgba(255, 248, 237, .5); } .cta-form-wrap .form-note { color: rgba(13, 23, 56, .56); }
.site-footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 34px; display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; align-items: center; gap: 20px; border-top: 1px solid var(--line); } .footer-brand { font-size: 12px; } .site-footer > p { margin: 0; color: var(--ink-soft); font-size: 11px; } .footer-links { display: flex; justify-content: flex-end; gap: 19px; } .footer-links span { color: var(--lavender-deep); margin-left: 4px; } .copyright { color: #9aa2b2; font-family: var(--mono); font-size: 8px; text-align: right; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 60px; } .hero-copy { max-width: 630px; } .hero-art { min-height: 470px; } .hero-card { width: min(360px, 65%); } .tag-top { right: 15%; top: 43px; } .tag-bottom { left: 10%; bottom: 42px; }
  .preview { grid-template-columns: 1fr; gap: 45px; } .preview-intro { max-width: 600px; } .cta-inner { grid-template-columns: 1fr; gap: 28px; }
  .site-footer { grid-template-columns: 1fr 1fr; } .footer-links { justify-content: flex-start; } .copyright { text-align: left; }
}
@media (max-width: 650px) {
  .section-pad { padding: 84px 22px; } .site-header { width: calc(100% - 44px); padding: 21px 0; } .main-nav { display: none; } .header-cta { margin-left: auto; padding: 10px 13px; }
  .hero { min-height: auto; padding-top: 48px; padding-bottom: 70px; } .hero h1 { font-size: clamp(42px, 12vw, 65px); } .hero-lede { font-size: 14px; } .signup-form { border-radius: 17px; flex-wrap: wrap; padding: 5px; } .signup-form input { flex-basis: 100%; padding: 13px 12px; } .signup-form button { width: 100%; }
  .hero-art { min-height: 390px; margin-top: 7px; } .hero-card { width: min(300px, 76%); padding: 20px; border-radius: 20px; } .hero-card-title { font-size: 43px; } .orbit-one { width: 350px; height: 240px; } .orbit-two { width: 380px; height: 270px; } .floating-tag { transform: scale(.86) rotate(8deg); } .tag-top { right: 0; top: 20px; } .tag-bottom { left: 0; bottom: 18px; transform: scale(.86) rotate(-8deg); }
  .proof-strip { width: calc(100% - 44px); grid-template-columns: 1fr 1fr; gap: 20px 0; } .proof-strip div:nth-child(3) { border-left: 0; padding-left: 0; } .proof-strip div:nth-child(odd) { padding-left: 0; } .proof-strip strong { font-size: 17px; }
  .inside { padding-top: 90px; padding-bottom: 90px; } .value-grid { grid-template-columns: 1fr; } .value-card { min-height: 340px; }
  .preview { padding-top: 88px; padding-bottom: 90px; gap: 34px; } .newsletter-preview { padding: 18px; border-radius: 18px; } .featured-story { padding: 21px 17px; } .featured-story h3 { margin-top: 32px; font-size: 28px; }
  .voices { padding-bottom: 80px; } .voices-top { align-items: flex-start; flex-direction: column; } .quote-stage { min-height: 370px; margin-top: 40px; padding: 42px 0 30px; } blockquote { font-size: 29px; } .quote-mark { left: -2px; } .carousel-controls { align-self: flex-end; margin-top: -65px; }
  .final-cta { padding-top: 75px; padding-bottom: 75px; } .site-footer { width: calc(100% - 44px); grid-template-columns: 1fr; gap: 15px; } .footer-links { flex-wrap: wrap; gap: 10px 18px; } .copyright { text-align: left; }
}