/* Editorial reading previews: light surfaces, tactile imagery, calm type. */
.compatibility-offer { display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; margin: 56px 0; padding: 36px; border: 1px solid #d7c9df; background: #f1ecf3; color: #55465a; border-radius: 6px; }
.compatibility-offer > img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: 4px; }
.compatibility-offer h3 { font: 400 2.6rem/1.1 var(--serif); color: #53405e; margin-bottom: 18px; }
.compatibility-offer-tagline { font-size: 1.25rem; color: #47334f; }
.compatibility-offer p { line-height: 1.75; }
.compatibility-offer-detail { font-weight: 600; }
.compatibility-offer-note { font-size: .875rem; margin: 18px 0 0; }
.picker-compatibility { display: flex; justify-content: space-between; gap: 22px; align-items: center; width: 100%; margin-top: 26px; padding: 24px; border: 1px solid #d7c9df; border-radius: 5px; background: #f1ecf3; color: #53405e; cursor: pointer; text-align: left; }
.picker-compatibility span span { display: block; margin-top: 8px; font-size: .9375rem; }
.picker-compatibility b { flex-shrink: 0; font-size: .9375rem; }
.picker-compatibility:focus-visible { outline: 3px solid #887193; outline-offset: 3px; }
.topic-preview-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.topic-preview-tab[data-preview-topic="compatibility"] { --topic-tab-accent: #837198; --topic-tab-tint: #eee9f2; --topic-tab-text: #625071; color: #625071; border-color: #d3c8df; background: #f0ebf4; }
.topic-preview-tab[data-preview-topic="compatibility"][aria-pressed="true"] { color: #fff; background: #675375; border-color: #675375; box-shadow: inset 0 -3px #b7a1c7; }
.topic-preview-panel.topic-compatibility { --topic-accent: #675375; --topic-wash: #f0ebf2; }
.compatibility-opening { max-width: 760px; margin: 0 auto 40px; }
.compatibility-opening .topic-question { margin-bottom: 30px; }
.compatibility-opening h3 { color: #382c39; font: 400 clamp(2rem,3.5vw,3rem)/1.15 var(--serif); letter-spacing: -.025em; }
.compatibility-opening > p:last-child { color: #5d5357; font-size: 1rem; line-height: 1.8; }
.compatibility-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
.partner-portrait { background: #f4e9ec; padding: 30px; border-radius: 3px; color: #574b51; }
.partner-portrait + .partner-portrait { background: #eaf0ec; }
.partner-name { font: 400 2.2rem/1.1 var(--serif); color: #584152; margin-bottom: 20px; }
.partner-portrait h4 { font: 600 1.125rem/1.4 var(--sans); color: #3d3239; margin: 0 0 16px; }
.partner-portrait p,.partner-portrait dd { font-size: 1rem; line-height: 1.75; }
.partner-portrait dl { margin: 24px 0 0; border-top: 1px solid #69556526; padding-top: 20px; }
.partner-portrait dt { font-size: .875rem; font-weight: 600; margin-top: 16px; color: #53444e; }
.partner-portrait dd { margin: 5px 0 0; }
.compatibility-patterns h4,.compatibility-lenses h4 { font: 500 1.5rem/1.35 var(--sans); color: #382c39; margin: 0 0 24px; letter-spacing: -.02em; }
.compatibility-pattern { display: grid; grid-template-columns: 36px minmax(0,1fr) 145px; gap: 20px; align-items: start; border-top: 1px solid #e4dcd4; padding: 28px 0; }
.pattern-number { color: #8a7587; font: 400 1.5rem/1.2 var(--serif); }
.compatibility-pattern h5 { color: #483641; font: 600 1rem/1.4 var(--sans); margin: 0 0 10px; }
.compatibility-pattern p { font-size: 1rem; line-height: 1.75; color: #62565e; margin: 0; }
.pattern-tag { background: #f0ebf2; color: #675375; padding: 6px 10px; border-radius: 3px; font-size: .8125rem; text-align: center; }
.compatibility-lenses { margin-top: 48px; }
.compatibility-included { margin: 42px 0 24px; padding: 30px; border: 1px solid #e4dcd4; }
.compatibility-included ul { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; padding-left: 20px; color: #4f4149; }
.compatibility-included > p:last-child { margin: 24px 0 0; color: #665b60; font-size: 1rem; line-height: 1.75; }
.compatibility-example-note { color: #776b71; font-size: .8125rem; line-height: 1.65; max-width: 780px; }
.hero { min-height: 0; padding-top: 64px; padding-bottom: 80px; }
.hero h1 { font-size: clamp(3.2rem,5.5vw,4.8rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.hero-art img { height: 510px; object-fit: cover; border-radius: 220px 220px 8px 8px; }
.hero-copy { max-width: 480px; line-height: 1.8; }
.step h3,.plan-card h3,.topic-synthesis h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -.025em; }
.section-index,.topic-kind,.topic-answer-label { font-size: .875rem; }
.topic-preview-intro { margin-bottom: 42px; align-items: end; }
.topic-preview-intro h2 { max-width: 560px; text-wrap: balance; }
.topic-preview-intro > p { max-width: 420px; font-size: 1rem; line-height: 1.8; }
.sample-topic-picker { box-shadow: none; background: transparent; padding: 0; border: 0; margin-bottom: 32px; }
.sample-topic-label { font-size: .875rem; }
.topic-preview-tab { min-height: 56px; font-size: 1rem; border-radius: 6px; box-shadow: none; }
.topic-preview-panel { --topic-accent: #894f65; --topic-wash: #f4e9ec; --line: #dfd7d0; color: #30292d; background: #fffcf8; border: 1px solid #e4dcd4; border-radius: 8px; padding: clamp(24px,5vw,60px); box-shadow: 0 16px 50px #3a253008; }
.topic-preview-panel.topic-career { --topic-accent: #875d35; --topic-wash: #f3ece2; background: #fffcf8; border-color: #e4dcd4; }
.topic-preview-panel.topic-life { --topic-accent: #41685b; --topic-wash: #eaf0ec; background: #fffcf8; border-color: #e4dcd4; }
.sample-report-mast { color: #73676c; font-size: .75rem; letter-spacing: .055em; margin-bottom: 28px; }
.sample-report-mast strong { color: #542d43; }
.sample-photo { position: relative; margin: 0 0 44px; display: grid; grid-template-columns: 1.2fr 1fr; min-height: 260px; background: var(--topic-wash); overflow: hidden; border-radius: 3px; }
.sample-photo img { width: 100%; height: 280px; object-fit: cover; object-position: center 54%; }
.sample-photo figcaption { align-self: center; padding: 30px; color: var(--topic-accent); }
.sample-photo figcaption span { display: block; font-size: .875rem; margin-bottom: 22px; }
.sample-photo figcaption strong { display: block; font-family: var(--serif); font-size: clamp(1.8rem,3vw,2.8rem); font-weight: 400; line-height: 1.16; letter-spacing: -.02em; }
.sample-photo-life img { object-position: center 45%; }
.topic-panel-head { gap: 30px; padding-bottom: 40px; }
.topic-answer { max-width: 750px; }
.topic-answer h3 { color: #352a30; font-size: clamp(1.85rem,3vw,2.65rem); line-height: 1.18; text-wrap: balance; }
.topic-answer > p:not(.topic-answer-label),.topic-finding p,.topic-synthesis-copy { color: #5d5357; font-size: 1rem; line-height: 1.8; }
.topic-answer-label { color: var(--topic-accent); font-style: normal; }
.topic-direct-answer { background: var(--topic-wash); border-color: var(--topic-accent); padding: 24px 28px; margin-top: 28px; }
.topic-direct-answer strong,.topic-direct-answer p { color: #47363f; font-size: 1rem; line-height: 1.75; }
.topic-panel-head > div:not(.topic-answer) { padding-top: 22px; }
.topic-question { color: #4f4149; font-family: var(--sans); font-size: 1.2rem; line-height: 1.5; }
.topic-profile { color: #756970; font-size: .8125rem; }
.topic-reading-grid { gap: 24px; margin-top: 36px; }
.topic-finding,.topic-finding:last-child { background: transparent; padding: 24px 0; min-height: 0; }
.topic-finding strong,.topic-finding.is-orbit strong,.topic-finding.is-root strong { color: var(--topic-accent); font-size: .875rem; letter-spacing: .02em; }
.topic-synthesis { background: var(--topic-wash); margin: 28px 0; padding: 32px; }
.topic-synthesis h4 { color: #372c32; font-size: 1.5rem; line-height: 1.35; }
.topic-synthesis-label { color: #76666e; }
.topic-synthesis-kicker { font-size: .875rem; }
.topic-deeper-grid div { background: #f4eee9; padding: 24px; }
.topic-deeper-grid strong,.topic-preview-kicker { color: var(--topic-accent); }
.topic-deeper-grid span { color: #665b60; line-height: 1.75; }
.topic-preview-window { margin-top: 40px; }
.topic-preview-window .preview-lock { background: #fffcf8f5; border: 1px solid #dfd5cd; box-shadow: 0 8px 28px #47303b0a; padding: 22px; }
.topic-preview-window .preview-lock strong { color: #542d43; font-family: var(--sans); font-size: 1rem; font-weight: 600; }
.topic-preview-window .preview-lock span { color: #665960; font-size: .875rem; }
.topic-panel-action { padding-top: 24px; gap: 18px; }
.topic-panel-action small { color: #75666e; font-size: .875rem; }
.topic-preview-window .topic-deeper-grid span { font-size: 1rem; line-height: 1.75; }
.topic-preview-window .topic-deeper-grid strong { font-size: .875rem; line-height: 1.5; }
.topic-action-excerpt { background: var(--topic-wash); }
.topic-action-excerpt h5,.topic-action-excerpt p,.topic-action-excerpt small { color: #4f454b; }
@media (prefers-reduced-motion: no-preference) {
 .topic-preview-panel:not([hidden]) { animation: reading-arrive .32s ease-out both; }
 @keyframes reading-arrive { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 820px) {
 .compatibility-offer { grid-template-columns: 1fr; gap: 26px; padding: 24px; }
 .compatibility-offer > img { height: 210px; }
 .picker-compatibility { flex-direction: column; align-items: flex-start; }
 .topic-preview-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .compatibility-pair { grid-template-columns: 1fr; gap: 16px; }
 .partner-portrait { padding: 24px; }
 .compatibility-pattern { grid-template-columns: 24px minmax(0,1fr); gap: 14px; }
 .pattern-tag { grid-column: 2; justify-self: start; }
 .compatibility-included { padding: 24px; }
 .compatibility-included ul { grid-template-columns: 1fr; }
 .hero { padding-top: 42px; padding-bottom: 48px; }
 .hero h1 { font-size: clamp(2.8rem,10vw,4rem); }
 .hero-art img { height: 250px; border-radius: 5px; }
 .topic-preview-panel { padding: 24px 20px; }
 .sample-photo { grid-template-columns: 1fr; margin-bottom: 34px; }
 .sample-photo img { height: 210px; }
 .sample-photo figcaption { padding: 24px; }
 .sample-photo figcaption span { margin-bottom: 12px; }
 .sample-photo figcaption strong { font-size: 1.85rem; }
 .topic-answer h3 { font-size: 1.95rem; line-height: 1.2; }
 .topic-answer > p:not(.topic-answer-label),.topic-finding p,.topic-synthesis-copy { font-size: 1rem; line-height: 1.8; }
 .topic-direct-answer { display: block; padding: 22px; }
 .topic-direct-answer strong { display: block; margin-bottom: 10px; }
 .topic-reading-grid { gap: 12px; }
 .topic-synthesis { padding: 25px 22px; }
 .topic-deeper-grid { gap: 16px; }
 .topic-preview-window .preview-lock { left: 0; right: 0; }
 .topic-panel-action .button { width: 100%; white-space: normal; text-align: center; }
}