body.landing-page { /* Final landing frame tokens: Tree, Timeline, and every landing section use these. */ --landing-section-frame-radius: clamp(18px, 1.8vw, 24px); --landing-section-frame-border-color: rgba(204, 163, 96, 0.82); --landing-section-frame-border: 1px solid var(--landing-section-frame-border-color); --landing-section-frame-background: radial-gradient(circle at 50% 0%, rgba(255, 251, 243, 0.52), transparent 54%), linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(245, 236, 221, 0.96)); --landing-section-frame-outline: 1px solid rgba(248, 237, 216, 0.92); --landing-section-frame-outline-offset: -7px; --landing-section-frame-shadow: 0 12px 26px rgba(120, 84, 52, 0.08), 0 28px 52px rgba(92, 60, 32, 0.1), 0 2px 8px rgba(84, 55, 29, 0.06); --kv-section-rail: min(calc(100vw - clamp(1.1rem, 4vw, 3.6rem)), 43.75rem); --kv-section-radius: var(--landing-section-frame-radius); --kv-section-inner-radius: clamp(7px, 0.78vw, 10px); --kv-section-border: var(--landing-section-frame-border-color); --kv-section-border-soft: rgba(176, 137, 80, 0.24); --kv-section-bg: rgba(255, 250, 240, 0.94); --kv-section-card-bg: rgba(255, 253, 248, 0.94); --kv-section-card-bg-soft: rgba(250, 239, 220, 0.64); --kv-section-ink: #2f1d14; --kv-section-muted: rgba(47, 29, 20, 0.70); --kv-section-gold: #b8802b; --kv-icon-color: var(--kv-section-ink); --kv-section-shadow: var(--landing-section-frame-shadow, 0 12px 24px rgba(64, 38, 18, 0.075)); --kv-section-shadow-soft: 0 8px 18px rgba(64, 38, 18, 0.055); --kv-section-gap: clamp(0.82rem, 1.8vw, 1.12rem); --kv-landing-sigil-topper-clearance: clamp(0.42rem, 0.95vw, 0.60rem); --kv-landing-sigil-visual-gap: var(--kv-landing-sigil-topper-clearance); --kv-section-title-size: clamp(1.16rem, 3.2vw, 1.38rem); --kv-section-rule: linear-gradient(90deg, transparent, rgba(184, 122, 44, 0.46), transparent); --kv-icon-feature: clamp(1.61rem, 3.06vw, 1.79rem); --kv-icon-secondary: clamp(1.25rem, 2.67vw, 1.43rem); --kv-icon-stat: clamp(1.61rem, 3.58vw, 1.79rem); --kv-icon-stat-container: clamp(2.72rem, 7.8vw, 3.2rem); --kv-icon-button: clamp(1.25rem, 3.06vw, 1.43rem); --kv-icon-stroke: 1.75; --kv-icon-stroke-strong: var(--kv-icon-stroke); --kv-legacy-portrait-width: clamp(5.9rem, 15.5vw, 7.35rem); --kv-legacy-portrait-height: clamp(6.12rem, 16.1vw, 7.62rem); --kv-legacy-card-min-height: clamp(3.7rem, 9.2vw, 4.38rem); --kv-legacy-card-padding-y: clamp(0.42rem, 0.78vw, 0.54rem); --kv-legacy-card-padding-x: clamp(0.06rem, 0.22vw, 0.12rem); --kv-legacy-grid-gap: clamp(0.26rem, 0.72vw, 0.44rem); --kv-legacy-portrait-panel-padding-y: clamp(0.72rem, 1.42vw, 0.94rem); } /* Canonical landing feature-frame owner. ----------------------------------------------- Every feature section opts into this class in the template. This removes the old selector-by-selector frame ownership that allowed KinSight and KinJourney to drift. */ body.landing-page .landing-feature-frame.raised-card.parchment-card { position: relative !important; overflow: hidden !important; isolation: isolate !important; border: var(--landing-section-frame-border) !important; border-radius: var(--landing-section-frame-radius) !important; outline: 0 !important; outline-offset: 0 !important; background: var(--landing-section-frame-background) !important; box-shadow: var(--landing-section-frame-shadow) !important; } body.landing-page .landing-feature-frame.raised-card.parchment-card::before { content: "" !important; position: absolute !important; inset: 0.55rem !important; border: var(--landing-section-frame-outline) !important; border-radius: calc(var(--landing-section-frame-radius) - 0.4rem) !important; pointer-events: none !important; background: transparent !important; box-shadow: inset 0 0 0 1px rgba(255, 252, 244, 0.28) !important; } body.landing-page .landing-feature-frame.raised-card.parchment-card::after { content: none !important; display: none !important; border: 0 !important; outline: 0 !important; background: none !important; box-shadow: none !important; } /* KinSight has an extra structural wrapper; it is layout-only, never a second frame. */ body.landing-page .landing-feature-frame.raised-card.parchment-card > .landing-kinsight-preview__inner, body.landing-page .landing-feature-frame.raised-card.parchment-card > .landing-kinsight-preview__inner--quick-glance { width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Feature strip: KinJourney / KinRoots / Kinline / KinSight / KinCrest ---------------------- This loaded-last stylesheet owns the final feature-strip sizing, colors, and mobile rail. */ body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards { --shared-value-card-icon-stroke: var(--kv-icon-stroke); --shared-value-card-bg: rgba(255, 248, 232, 0.52); --shared-value-card-border: rgba(188, 139, 70, 0.34); --shared-value-card-divider: rgba(188, 139, 70, 0.22); --shared-value-card-copy: rgba(47, 29, 20, 0.70); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; width: min(100%, var(--living-hero-value-max-width, 64rem)); padding: clamp(0.68rem, 1.1vw, 0.86rem) clamp(0.34rem, 0.8vw, 0.54rem); border-radius: var(--kv-section-radius); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card { align-content: center; gap: clamp(0.2rem, 0.42vw, 0.3rem); min-width: 0; min-height: clamp(5.65rem, 7vw, 6.5rem); padding-inline: clamp(0.28rem, 0.68vw, 0.56rem); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__icon, body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__icon--large { width: clamp(2.064rem, 2.22vw, 2.4rem); height: clamp(2.064rem, 2.22vw, 2.4rem); color: var(--hero-feature-icon-color, var(--kv-icon-color)); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__icon img { filter: var(--hero-feature-icon-filter, none); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__icon svg, body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__icon--large svg, body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__icon svg :is(path, circle, rect, line, polyline, polygon), body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__icon--large svg :is(path, circle, rect, line, polyline, polygon) { stroke-width: var(--kv-icon-stroke); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card:nth-child(1) { --hero-feature-icon-color: #67472c; --hero-feature-icon-filter: brightness(0) saturate(100%) invert(28%) sepia(27%) saturate(1035%) hue-rotate(348deg) brightness(91%) contrast(91%); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card:nth-child(2) { --hero-feature-icon-color: #795735; --hero-feature-icon-filter: brightness(0) saturate(100%) invert(34%) sepia(25%) saturate(911%) hue-rotate(350deg) brightness(92%) contrast(90%); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card:nth-child(3) { --hero-feature-icon-color: #8a673d; --hero-feature-icon-filter: brightness(0) saturate(100%) invert(40%) sepia(28%) saturate(862%) hue-rotate(352deg) brightness(91%) contrast(89%); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card:nth-child(4) { --hero-feature-icon-color: #73503c; --hero-feature-icon-filter: brightness(0) saturate(100%) invert(31%) sepia(20%) saturate(1038%) hue-rotate(335deg) brightness(91%) contrast(88%); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card:nth-child(5) { --hero-feature-icon-color: #94713b; --hero-feature-icon-filter: brightness(0) saturate(100%) invert(44%) sepia(31%) saturate(881%) hue-rotate(358deg) brightness(91%) contrast(88%); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__title { max-width: 100%; overflow: hidden; font-size: clamp(0.648rem, 0.72vw, 0.744rem); line-height: 1.08; letter-spacing: 0.045em; text-overflow: ellipsis; white-space: nowrap; } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__divider { display: none; } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__copy { min-height: 0; font-size: clamp(0.759rem, 0.828vw, 0.874rem); line-height: 1.18; white-space: nowrap; } @media (max-width: 767px) { body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 25%; justify-content: start; width: min(calc(100vw - 1rem), var(--living-hero-value-max-width, 64rem)); max-width: none; margin: 1.1rem auto 0; padding: 0.42rem 0.38rem 0.54rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-padding-inline: 0.45rem; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: rgba(142, 98, 42, 0.42) transparent; -webkit-overflow-scrolling: touch; } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards::-webkit-scrollbar { height: 0.3rem; } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards::-webkit-scrollbar-track { background: transparent; } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(142, 98, 42, 0.38); } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; align-content: center; justify-items: center; gap: 0.22rem; width: 100%; min-width: 0; min-height: 5.25rem; padding: 0.5rem 0.22rem 0.46rem; text-align: center; scroll-snap-align: center; scroll-snap-stop: normal; } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__icon, body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__icon--large { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 1.72rem; height: 1.72rem; margin: 0 auto 0.32rem; } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__body { grid-column: 1; grid-row: 2; display: grid; justify-items: center; gap: 0.1rem; min-width: 0; text-align: center; } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__title { font-size: clamp(0.48rem, 2.15vw, 0.56rem); line-height: 1.08; letter-spacing: 0.045em; } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards .hero-value-card__copy { min-height: 0; font-size: clamp(0.63rem, 2.7vw, 0.72rem); line-height: 1.12; white-space: nowrap; } } @media (min-width: 400px) and (max-width: 767px) { body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards { grid-auto-columns: 20%; scrollbar-width: none; } body.landing-page:not(.authenticated-home) .living-hero__inner > .living-hero__value-cards::-webkit-scrollbar { display: none; } } /* Value strip: Private / Simple / Share / Preserve ---------------------------------------- */ body.landing-page:not(.authenticated-home) .landing-story-intro { position: relative !important; overflow: visible !important; margin-top: clamp(1rem, 2.1vw, 1.5rem) !important; margin-bottom: clamp(1.25rem, 2.6vw, 2rem) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } body.landing-page:not(.authenticated-home) .landing-story-intro::before, body.landing-page:not(.authenticated-home) .landing-story-intro::after { content: none !important; display: none !important; } body.landing-page:not(.authenticated-home) .landing-story-intro > .living-hero__value-cards--secondary { --shared-value-card-icon-stroke: var(--kv-icon-stroke); --shared-value-card-bg: rgba(255, 248, 232, 0.42); --shared-value-card-border: rgba(188, 139, 70, 0.30); --shared-value-card-divider: rgba(188, 139, 70, 0.18); width: 100%; padding: clamp(0.68rem, 1.18vw, 0.86rem) clamp(0.36rem, 0.9vw, 0.58rem); border-radius: var(--kv-section-radius); } body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card__icon, body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card__icon--large { width: var(--kv-icon-feature) !important; height: var(--kv-icon-feature) !important; color: var(--kv-icon-color) !important; } body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card__icon svg, body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card__icon--large svg, body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card__icon svg :is(path, circle, rect, line, polyline, polygon), body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card__icon--large svg :is(path, circle, rect, line, polyline, polygon) { stroke-width: var(--kv-icon-stroke) !important; } body.landing-page:not(.authenticated-home) .living-hero__trust-icon { width: clamp(1.8rem, 3.78vw, 2.24rem) !important; height: clamp(1.8rem, 3.78vw, 2.24rem) !important; color: var(--kv-icon-color) !important; } body.landing-page:not(.authenticated-home) .living-hero__trust-icon svg { width: 68% !important; height: 68% !important; stroke-width: var(--kv-icon-stroke) !important; } body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card__title { font-size: clamp(0.68rem, 1.22vw, 0.75rem); line-height: 1.08; } body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card__copy { font-size: clamp(0.75rem, 1.42vw, 0.82rem); line-height: 1.22; } /* Legacy card ----------------------------------------------------------------------------- */ body.landing-page { /* The featured Legacy portrait is intentionally 15% larger than the prior scale. */ --kv-legacy-main-portrait-width: clamp(5.73rem, 17.95vw, 6.99rem); } @media (max-width: 959px) { } @media (max-width: 575px) { body.landing-page .landing-feature-frame.raised-card.parchment-card::before { inset: 0.42rem !important; } } @keyframes kvLandingPortraitShimmer { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } } @media (prefers-reduced-motion: reduce) { } @media (max-width: 430px) { body.landing-page { --kv-legacy-main-portrait-width: clamp(5.35rem, 26.17vw, 6.01rem); } } body.landing-page .landing-feature-button-icon { width: var(--kv-icon-button) !important; height: var(--kv-icon-button) !important; } body.landing-page .landing-feature-button-icon--kincrest { color: currentColor; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; filter: none !important; } body.landing-page .landing-feature-button-icon--kincrest :is(path, circle, rect, line, polyline, polygon) { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; } @media (min-width: 860px) { } /* Mobile tightening without stacking the 4-up strips/cards. ------------------------------- */ @media (max-width: 520px) { body.landing-page { --kv-section-rail: min(calc(100vw - 0.74rem), 43.75rem); } body.landing-page:not(.authenticated-home) .landing-story-intro > .living-hero__value-cards--secondary { padding-inline: 0.24rem; } body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card { padding-inline: clamp(0.1rem, 0.78vw, 0.2rem); } body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card__title { font-size: clamp(0.48rem, 2.35vw, 0.6rem); } body.landing-page:not(.authenticated-home) .landing-story-intro .hero-value-card__copy { font-size: clamp(0.62rem, 2.55vw, 0.72rem); white-space: nowrap; } } /* Landing feature header system -------------------------------------------------------------- This is the only landing-page source for feature header typography, spacing, and color. Each feature template renders the same macro, and the content immediately after the header receives the same vertical rhythm without feature-specific header adjustments. */ body.landing-page { --kv-landing-header-width: min(100%, 36rem); --kv-landing-header-padding: 0.12rem 0 0; --kv-landing-header-margin: 0 auto; --kv-landing-header-title-font: var(--font-display, "Cormorant Garamond", Georgia, serif); --kv-landing-header-title-size: clamp(1.25rem, 3.2vw, 2.05rem); --kv-landing-header-title-color: rgba(58, 37, 23, 0.88); --kv-section-subheader-font: var(--font-display, "Cormorant Garamond", Georgia, serif); --kv-section-subheader-style: italic; --kv-section-subheader-weight: 500; --kv-section-subheader-line-height: 1.18; --kv-section-subheader-letter-spacing: 0.01em; --kv-landing-header-subtitle-font: var(--kv-section-subheader-font); --kv-landing-header-subtitle-size: clamp(0.96rem, 1.42vw, 1.08rem); --kv-landing-header-subtitle-color: rgba(59, 45, 36, 0.75); --kv-landing-header-subtitle-gap: clamp(0.18rem, 0.38vw, 0.28rem); --kv-landing-header-content-gap-base: clamp(0.86rem, 1.3vw, 1.08rem); --kv-landing-header-content-gap: var(--kv-landing-header-content-gap-base); } body.landing-page .landing-feature-section__header { display: grid; place-items: start center; align-content: start; width: var(--kv-landing-header-width); max-width: 100%; margin: var(--kv-landing-header-margin); padding: var(--kv-landing-header-padding); gap: 0; text-align: center; } body.landing-page .landing-feature-section__header > * { margin: 0; } body.landing-page .landing-feature-section__header .page-section-header__title { width: 100%; max-width: 100%; padding: 0; color: var(--kv-landing-header-title-color); font-family: var(--kv-landing-header-title-font); font-size: var(--kv-landing-header-title-size); font-weight: 600; line-height: 1; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; text-wrap: balance; white-space: normal; text-shadow: none; } body.landing-page .landing-feature-section__header .page-section-header__subtitle { width: min(100%, 34rem); max-width: 34rem; margin-top: var(--kv-landing-header-subtitle-gap); color: var(--kv-landing-header-subtitle-color); font-family: var(--kv-landing-header-subtitle-font); font-size: var(--kv-landing-header-subtitle-size); font-style: var(--kv-section-subheader-style); font-weight: var(--kv-section-subheader-weight); line-height: var(--kv-section-subheader-line-height); letter-spacing: var(--kv-section-subheader-letter-spacing); text-align: center; text-wrap: balance; white-space: normal; } body.landing-page .landing-subtitle-copy { display: inline; } body.landing-page .landing-subtitle-copy--mobile { display: none; } /* Standard cards retain their original contained, single-column structure. */ body.landing-page .landing-feature-pair--primary > .tree-card, body.landing-page .landing-feature-pair--primary > .timeline-card, body.landing-page:not(.authenticated-home) .landing-faq__inner{ display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, auto) auto !important; align-content: start !important; justify-items: stretch !important; row-gap: 0 !important; gap: 0 !important; } /* KinRoots and KinLine keep one markup source. Below desktop, display: contents preserves the existing header → visual → CTA order and all mobile behavior. */ body.landing-page .landing-paired-feature { grid-template-areas: "intro" "visual" "cta" !important; } body.landing-page .landing-paired-feature__copy { display: contents; } body.landing-page .landing-paired-feature__copy > .landing-feature-section__header { grid-area: intro; } body.landing-page .landing-paired-feature__copy > .landing-paired-feature__cta { grid-area: cta; justify-self: center; } body.landing-page .landing-paired-feature__visual { grid-area: visual; width: 100%; min-width: 0; max-width: 100%; margin-top: var(--kv-landing-header-content-gap); } body.landing-page .landing-tree-relationship-link, body.landing-page .timeline-preview-horizontal { display: none !important; } /* Standalone previews use one DOM order at every breakpoint: header, visual, CTA. */ body.landing-page .landing-feature-showcase, body.landing-page .landing-feature-showcase__layout, body.landing-page .landing-kinsight-preview__inner--quick-glance, body.landing-page .landing-kinsight-preview__inner, body.landing-page .landing-sigil-creator > .sigil-creator-card, body.landing-page .map-row > .map-card { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "intro" "visual" "cta" !important; grid-template-rows: auto minmax(0, auto) auto !important; align-content: start !important; align-items: start !important; justify-items: stretch !important; row-gap: 0 !important; gap: 0 !important; min-width: 0; } /* The copy wrapper becomes transparent below desktop so the existing header → visual → CTA order is preserved without duplicating markup or changing any feature preview internals. */ body.landing-page .landing-feature-showcase__copy { display: contents; } body.landing-page .landing-feature-showcase__copy > .landing-feature-section__header { grid-area: intro; } body.landing-page .landing-feature-showcase__copy > .landing-feature-section__cta, body.landing-page .landing-feature-showcase__copy > .landing-feature-showcase__cta { grid-area: cta; justify-self: center; } body.landing-page .landing-feature-showcase__copy + .landing-feature-showcase__visual { margin-top: var(--kv-landing-header-content-gap) !important; } body.landing-page .landing-feature-showcase__intro, body.landing-page .landing-feature-showcase > .landing-feature-section__header, body.landing-page .landing-feature-showcase__layout > .landing-feature-section__header { grid-area: intro; min-width: 0; } body.landing-page .landing-feature-showcase__visual { grid-area: visual; width: 100%; min-width: 0; max-width: 100%; } body.landing-page .landing-feature-showcase > .landing-feature-section__cta, body.landing-page .landing-feature-showcase__layout > .landing-feature-section__cta, body.landing-page .landing-feature-showcase__cta { grid-area: cta; } /* The longer supporting copy belongs only to the wide-desktop showcase. */ body.landing-page .landing-feature-section__header .page-section-header__description { display: none; } /* Every feature begins its visual content at the same distance below the shared header. */ body.landing-page .landing-feature-section__header + * { margin-top: var(--kv-landing-header-content-gap) !important; padding-top: 0 !important; } body.landing-page:not(.authenticated-home) .landing-story-intro { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 0; } body.landing-page:not(.authenticated-home) .landing-story-intro__header { width: var(--kv-landing-header-width); } /* KinRoots and KinLine use the same external header-to-content gap as Legacy. */ body.landing-page .landing-feature-pair--primary > .tree-card .treeCanvas--landing { display: grid !important; place-items: start center !important; align-self: start !important; } body.landing-page .landing-feature-pair--primary > .tree-card .treeCanvas--landing > svg { display: block !important; width: 100% !important; height: auto !important; margin: 0 auto !important; } body.landing-page .landing-feature-pair--primary > .timeline-card .timeline-preview-shell, body.landing-page .landing-feature-pair--primary > .timeline-card .timeline-preview-list { align-self: start !important; align-content: start !important; } body.landing-page .landing-feature-pair--primary > .timeline-card .timeline-preview-list { margin-top: 0 !important; padding-top: 0 !important; } body.landing-page .landing-sigil-creator { --kv-landing-header-content-gap: clamp(0.66rem, 1.08vw, 0.88rem); } body.landing-page .landing-sigil-creator .sigil-composed--landing { /* Preserve topper clearance while keeping the preview close to the shared subheading. */ margin-top: var(--kv-landing-sigil-visual-gap) !important; margin-bottom: -0.12rem !important; } /* KinJourney scales the existing migration cards without changing their carousel behavior. */ body.landing-page .map-row .map-sequence-track { --map-sequence-node-size: clamp(64.8px, 16.31vw, 83.2px); } @media (max-width: 560px) { body.landing-page .map-row .map-sequence-track { --map-sequence-node-size: clamp(60.5px, 15.44vw, 74.5px); } } @media (min-width: 700px) { body.landing-page { /* Preserve mobile clearance while removing roughly two-thirds of the desktop gap. */ --kv-landing-sigil-visual-gap: clamp(0.12rem, 0.20vw, 0.18rem); } } /* Timeline internals may not reintroduce spacing beneath the shared section header. */ body.landing-page .landing-feature-pair--primary > .timeline-card .timeline-preview-list > .timeline-preview-item:first-child, body.landing-page .landing-feature-pair--primary > .timeline-card .timeline-preview-list > .timeline-preview-item:first-child .timeline-preview-body, body.landing-page .landing-feature-pair--primary > .timeline-card .timeline-preview-list > .timeline-preview-item:first-child .timeline-preview-avatar-col, body.landing-page .landing-feature-pair--primary > .timeline-card .timeline-preview-list > .timeline-preview-item:first-child .timeline-preview-copy, body.landing-page .landing-feature-pair--primary > .timeline-card .timeline-preview-list > .timeline-preview-item:first-child .timeline-preview-avatar-frame { margin-top: 0 !important; padding-top: 0 !important; } body.landing-page .landing-sigil-creator .sigil-creator-card__steps, body.landing-page .landing-sigil-creator .landing-feature-section__cta, body.landing-page .landing-kinsight-preview .landing-feature-section__cta, body.landing-page .map-row .landing-feature-section__cta, body.landing-page .landing-feature-pair--primary .landing-paired-feature__copy > .landing-paired-feature__cta, body.landing-page .map-row > .map-card .landing-feature-showcase__visual .map-frame, body.landing-page .map-row > .map-card > .map-full-link { margin-top: var(--kv-section-gap) !important; } @media (max-width: 560px) { body.landing-page { --kv-landing-header-title-size: clamp(1.15rem, 5.2vw, 1.6rem); --kv-landing-header-subtitle-size: clamp(0.86rem, 3.25vw, 0.98rem); --kv-landing-header-content-gap-base: clamp(0.76rem, 2.5vw, 0.94rem); } } /* Tablet keeps the existing centered stack. Desktop alone widens the rail and moves only the copy and CTA left; KinSight, KinCrest, and KinJourney visuals remain intact. */ @media (min-width: 700px) { body.landing-page .landing-kinsight-preview, body.landing-page .landing-sigil-creator, body.landing-page .map-row { width: var(--kv-section-rail) !important; max-width: var(--kv-section-rail) !important; margin-inline: auto !important; } body.landing-page .landing-sigil-creator > .sigil-creator-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.landing-page .landing-feature-showcase, body.landing-page .landing-feature-showcase__layout, body.landing-page .landing-kinsight-preview__inner--quick-glance, body.landing-page .landing-kinsight-preview__inner, body.landing-page .landing-sigil-creator > .sigil-creator-card, body.landing-page .map-row > .map-card { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "intro" "visual" "cta" !important; grid-template-rows: auto minmax(0, auto) auto !important; align-items: start !important; justify-items: stretch !important; column-gap: 0 !important; row-gap: 0 !important; } body.landing-page .landing-feature-showcase__visual { width: 100%; min-width: 0; max-width: 100%; overflow: visible; } body.landing-page .landing-feature-showcase__copy > .landing-feature-section__cta, body.landing-page .landing-feature-showcase__copy > .landing-feature-showcase__cta { align-self: start; justify-self: center; } body.landing-page .landing-feature-showcase .landing-feature-section__button, body.landing-page .landing-feature-showcase .map-full-link { width: auto !important; min-width: 0 !important; margin-inline: auto !important; } body.landing-page .landing-kinsight-preview [data-ks-compare-lab] { width: min(100%, 33.5rem); margin-inline: auto !important; } body.landing-page .map-row .landing-feature-showcase__visual { display: grid; min-width: 0; } body.landing-page .map-row .landing-feature-showcase__visual .map-frame { width: 100% !important; } } @media (min-width: 1100px) { body.landing-page { --kv-desktop-showcase-rail: min(calc(100vw - clamp(3rem, 5vw, 5.5rem)), 76rem); --kv-desktop-feature-pair-rail: var(--kv-desktop-showcase-rail); --kv-desktop-showcase-copy: clamp(18.5rem, 20vw, 19.5rem); --kv-desktop-showcase-gap: clamp(2.25rem, 2.8vw, 2.75rem); --kv-desktop-copy-padding-block: clamp(1.2rem, 1.55vw, 1.5rem); --kv-desktop-copy-padding-inline: clamp(1.85rem, 2.45vw, 2.35rem); --kv-desktop-visual-padding-block: clamp(0.82rem, 1.12vw, 1.05rem); --kv-desktop-visual-padding-inline: clamp(1.2rem, 1.9vw, 1.8rem); --kv-desktop-title-size: clamp(2.3rem, 2.9vw, 2.85rem); --kv-desktop-description-size: clamp(0.92rem, 0.95vw, 0.99rem); --kv-desktop-rule-gap: clamp(0.68rem, 0.82vw, 0.8rem); --kv-desktop-copy-gap: clamp(0.72rem, 0.9vw, 0.88rem); --kv-desktop-cta-gap: clamp(1.12rem, 1.35vw, 1.3rem); } /* Desktop gives KinRoots and KinLine their own full-width horizontal showcase cards. Mobile and tablet continue using the existing paired previews and vertical timeline. */ body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase { width: var(--kv-desktop-feature-pair-rail) !important; max-width: var(--kv-desktop-feature-pair-rail) !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: clamp(0.95rem, 1.35vw, 1.2rem) !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase > .tree-card, body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase > .timeline-card { display: grid !important; grid-template-columns: clamp(20rem, 25.5vw, 22rem) minmax(0, 1fr) !important; grid-template-areas: "copy visual" !important; grid-template-rows: minmax(0, 1fr) !important; align-content: stretch !important; align-items: stretch !important; justify-items: stretch !important; gap: 0 !important; min-width: 0 !important; padding: 0 !important; overflow: hidden !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase > .tree-card, body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase > .timeline-card { height: auto !important; min-height: 0 !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__copy { grid-area: copy !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-content: center !important; align-items: start !important; justify-items: start !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: var(--kv-desktop-copy-padding-block) var(--kv-desktop-copy-padding-inline) !important; border-right: 1px solid rgba(178, 129, 61, 0.16); background: radial-gradient(circle at 12% 44%, rgba(255, 255, 255, 0.42), transparent 36%), linear-gradient(90deg, rgba(255, 252, 245, 0.42), rgba(247, 229, 198, 0.1)); box-sizing: border-box !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__copy > .landing-feature-section__header { grid-area: auto !important; place-items: start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__copy .page-section-header__title { width: 100% !important; max-width: 100% !important; margin: 0 !important; color: rgba(43, 27, 18, 0.97) !important; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; font-size: var(--kv-desktop-title-size) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: 0.045em !important; text-align: left !important; text-shadow: 0 1px 0 rgba(255, 252, 244, 0.72); } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__copy .page-section-header__title::after { content: "◆"; display: flex; align-items: center; justify-content: center; width: 4.75rem; height: 0.6rem; margin-top: var(--kv-desktop-rule-gap); color: rgba(191, 139, 51, 0.96); font-family: Georgia, "Times New Roman", serif; font-size: 0.54rem; line-height: 1; text-shadow: 0 0 0.32rem rgba(251, 245, 234, 0.98); background: linear-gradient(90deg, rgba(191, 139, 51, 0.72), rgba(191, 139, 51, 0.96), rgba(191, 139, 51, 0.72)) center / 100% 1px no-repeat; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__copy .page-section-header__subtitle { width: min(100%, 16.5rem) !important; max-width: 16.5rem !important; margin: var(--kv-landing-header-subtitle-gap) 0 0 !important; color: var(--kv-landing-header-subtitle-color) !important; font-family: var(--kv-landing-header-subtitle-font) !important; font-size: var(--kv-landing-header-subtitle-size) !important; font-style: var(--kv-section-subheader-style) !important; font-weight: var(--kv-section-subheader-weight) !important; line-height: var(--kv-section-subheader-line-height) !important; letter-spacing: var(--kv-section-subheader-letter-spacing) !important; text-align: left !important; text-wrap: balance; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__copy .page-section-header__description { display: block !important; width: min(100%, 17.5rem) !important; max-width: 17.5rem !important; margin: var(--kv-desktop-copy-gap) 0 0 !important; color: rgba(47, 38, 31, 0.76) !important; font-family: "Manrope", "Inter", system-ui, sans-serif !important; font-size: var(--kv-desktop-description-size) !important; font-weight: 400 !important; line-height: 1.58 !important; letter-spacing: -0.005em !important; text-align: left !important; text-wrap: pretty; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__copy > .landing-paired-feature__cta { grid-area: auto !important; align-self: start !important; justify-self: start !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: var(--kv-desktop-cta-gap) 0 0 !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__visual { grid-area: visual !important; align-self: stretch !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: var(--kv-desktop-visual-padding-block) var(--kv-desktop-visual-padding-inline) !important; box-sizing: border-box !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__visual--tree { display: grid !important; grid-template-areas: "tree-preview" !important; place-items: center !important; align-content: center !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__visual--tree > .treeCanvas--landing { grid-area: tree-preview !important; display: grid !important; place-items: center !important; align-self: center !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__visual--tree > .treeCanvas--landing > svg { display: block !important; width: 100% !important; height: auto !important; max-width: min(100%, 51rem) !important; margin: 0 auto !important; overflow: visible !important; } body.landing-page .landing-tree-relationship-link { grid-area: tree-preview !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: start !important; justify-self: end !important; width: auto !important; min-width: 13.5rem !important; margin: clamp(2.2rem, 3vw, 3rem) clamp(0.3rem, 0.8vw, 0.75rem) 0 0 !important; padding: 0.82rem 1.25rem !important; gap: 0.65rem !important; z-index: 2; white-space: nowrap; appearance: none; color: rgba(76, 48, 22, 0.96) !important; background: linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(244, 226, 190, 0.96)) !important; border: 1px solid rgba(186, 133, 44, 0.68) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(81, 50, 21, 0.11) !important; cursor: pointer; transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } body.landing-page .landing-tree-relationship-link:hover, body.landing-page .landing-tree-relationship-link:focus-visible { transform: translateY(-1px); color: rgba(63, 38, 17, 0.98) !important; background: linear-gradient(180deg, rgba(255, 255, 252, 1), rgba(249, 230, 188, 0.98)) !important; border-color: rgba(204, 149, 50, 0.88) !important; box-shadow: 0 0 0 3px rgba(211, 159, 54, 0.08), 0 10px 20px rgba(63, 39, 18, 0.13) !important; } body.landing-page .landing-tree-relationship-link:focus-visible { outline: 2px solid rgba(207, 154, 50, 0.92); outline-offset: 3px; } body.landing-page .landing-tree-relationship-link.is-active, body.landing-page .landing-tree-relationship-link[aria-pressed="true"] { color: rgba(45, 28, 14, 0.98) !important; background: linear-gradient(180deg, rgba(247, 216, 137, 0.98), rgba(213, 157, 45, 0.98)) !important; border-color: rgba(166, 108, 18, 0.92) !important; box-shadow: inset 0 1px 0 rgba(255, 250, 225, 0.72), 0 10px 22px rgba(111, 72, 19, 0.20) !important; } body.landing-page .landing-tree-relationship-link__icon { display: inline-grid; place-items: center; width: 1.65rem; height: 1.2rem; flex: 0 0 auto; } body.landing-page .landing-tree-relationship-link__icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.25; } /* The landing preview reuses KinRoots relationship semantics, but keeps the labels and node accents intentionally lighter than the full editor. */ body.landing-page #treeSvg .tree-relation-badge-pill { fill: rgba(255, 249, 237, 0.98) !important; stroke: rgba(180, 126, 49, 0.45) !important; stroke-width: 0.9px !important; filter: drop-shadow(0 3px 6px rgba(67, 42, 18, 0.10)); } body.landing-page #treeSvg .tree-relation-badge-text { fill: rgba(73, 47, 21, 0.96) !important; font-family: "Manrope", "Inter", system-ui, sans-serif !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.01em !important; } body.landing-page #treeSvg .tree-node-wrap--relationship .tree-node-card { stroke-width: 1.7px !important; } body.landing-page #treeSvg .tree-node-wrap--descendant .tree-node-card { fill: rgba(240, 248, 226, 0.96) !important; stroke: rgba(125, 153, 88, 0.74) !important; } body.landing-page #treeSvg .tree-node-wrap--in-law .tree-node-card { fill: rgba(236, 243, 253, 0.96) !important; stroke: rgba(103, 132, 175, 0.70) !important; } body.landing-page #treeSvg .tree-node-wrap.is-relationship-selected .tree-node-card { stroke: rgba(204, 139, 25, 1) !important; stroke-width: 3.1px !important; filter: drop-shadow(0 0 7px rgba(218, 169, 63, 0.34)) drop-shadow(0 10px 18px rgba(67, 43, 20, 0.14)) !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .landing-paired-feature__visual--timeline { display: grid !important; align-content: center !important; align-items: center !important; justify-items: stretch !important; } body.landing-page .landing-feature-pair--primary.landing-feature-pair--desktop-showcase .timeline-preview-shell--stacked { display: none !important; } body.landing-page .timeline-preview-horizontal { display: block !important; width: 100%; min-width: 0; } body.landing-page .timeline-preview-horizontal__track { --timeline-marker-line-y: clamp(8.25rem, 10.6vw, 9.45rem); position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); align-items: start; width: 100%; min-width: 0; padding: 0 clamp(0.85rem, 1.4vw, 1.4rem); box-sizing: border-box; } body.landing-page .timeline-preview-horizontal__track::before { content: ""; position: absolute; top: var(--timeline-marker-line-y); left: clamp(1.2rem, 2.2vw, 2rem); right: clamp(1.2rem, 2.2vw, 2rem); height: 2px; background: rgba(183, 128, 38, 0.72); } body.landing-page .timeline-preview-horizontal__item { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; min-width: 0; padding-inline: clamp(0.3rem, 0.8vw, 0.75rem); text-align: center; cursor: pointer; } body.landing-page .timeline-preview-horizontal__portrait { width: clamp(6.4rem, 8.2vw, 7.65rem) !important; height: clamp(6.4rem, 8.2vw, 7.65rem) !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 50% !important; border: 2px solid rgba(191, 139, 51, 0.66) !important; background: rgba(255, 251, 241, 0.9) !important; box-shadow: 0 0 0 0.34rem rgba(255, 252, 244, 0.82), 0 0.45rem 1rem rgba(74, 44, 20, 0.12) !important; } body.landing-page .timeline-preview-horizontal__portrait::before, body.landing-page .timeline-preview-horizontal__portrait::after { display: none !important; } body.landing-page .timeline-preview-horizontal__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: inherit; } body.landing-page .timeline-preview-horizontal__marker { display: block; width: 0.9rem; height: 0.9rem; margin-top: clamp(0.8rem, 1.15vw, 1rem); border: 3px solid rgba(181, 125, 36, 0.9); border-radius: 50%; background: #fffaf0; box-shadow: 0 0 0 0.18rem rgba(255, 250, 240, 0.74); } body.landing-page .timeline-preview-horizontal__date { margin-top: clamp(0.75rem, 1vw, 0.95rem); color: rgba(47, 29, 18, 0.96); font-family: "Manrope", "Inter", system-ui, sans-serif; font-size: clamp(1.15rem, 1.45vw, 1.45rem); font-weight: 500; line-height: 1; } body.landing-page .timeline-preview-horizontal__title, body.landing-page .timeline-preview-horizontal__summary { width: 100%; max-width: 10rem; margin-inline: auto; color: rgba(40, 29, 22, 0.92); font-family: "Manrope", "Inter", system-ui, sans-serif; font-weight: 400; text-align: center; overflow-wrap: anywhere; } body.landing-page .timeline-preview-horizontal__title { margin-top: 0.65rem; font-size: clamp(0.78rem, 0.9vw, 0.9rem); line-height: 1.25; } body.landing-page .timeline-preview-horizontal__summary { margin-top: 0.18rem; color: rgba(40, 29, 22, 0.7); font-size: clamp(0.72rem, 0.82vw, 0.82rem); line-height: 1.3; } body.landing-page .timeline-preview-horizontal__arrow { position: absolute; top: calc(var(--timeline-marker-line-y) - 0.45rem); right: clamp(0.5rem, 1vw, 0.9rem); width: 0.85rem; height: 0.85rem; border-top: 2px solid rgba(183, 128, 38, 0.85); border-right: 2px solid rgba(183, 128, 38, 0.85); transform: rotate(45deg); } body.landing-page .landing-kinsight-preview.landing-kinsight-preview--quick-glance.raised-card.parchment-card, body.landing-page .landing-sigil-creator, body.landing-page .map-row:not(.map-row--showcase) { width: var(--kv-desktop-showcase-rail) !important; max-width: var(--kv-desktop-showcase-rail) !important; margin-inline: auto !important; } /* KinSight, KinCrest, and KinJourney use the same desktop copy rail as KinRoots and KinLine. Their existing preview internals remain unchanged in the visual column. */ body.landing-page .landing-kinsight-preview.landing-kinsight-preview--quick-glance.landing-feature-frame { padding: 0 !important; padding-block: 0 !important; padding-inline: 0 !important; overflow: hidden !important; } /* KinSight's wrapper is structural only. Flattening it makes the canonical frame own the same copy/visual grid used by KinLine and KinJourney. */ body.landing-page .landing-kinsight-preview.landing-kinsight-preview--quick-glance.landing-feature-frame > .landing-kinsight-preview__inner.landing-feature-showcase__layout { display: contents !important; } body.landing-page .landing-kinsight-preview.landing-kinsight-preview--quick-glance.landing-feature-frame, body.landing-page .landing-sigil-creator > .sigil-creator-card.landing-feature-showcase, body.landing-page .map-row > .map-card.landing-feature-showcase { display: grid !important; grid-template-columns: clamp(20rem, 25.5vw, 22rem) minmax(0, 1fr) !important; grid-template-areas: "copy visual" !important; grid-template-rows: minmax(0, 1fr) !important; align-content: stretch !important; align-items: stretch !important; justify-items: stretch !important; column-gap: 0 !important; row-gap: 0 !important; gap: 0 !important; min-width: 0 !important; padding: 0 !important; overflow: hidden !important; } body.landing-page .landing-feature-showcase__copy { grid-area: copy !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "intro" "cta" !important; grid-template-rows: auto auto !important; align-content: center !important; align-items: start !important; justify-items: start !important; align-self: stretch !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: var(--kv-desktop-copy-padding-block) var(--kv-desktop-copy-padding-inline) !important; border-right: 1px solid rgba(178, 129, 61, 0.16); background: radial-gradient(circle at 12% 44%, rgba(255, 255, 255, 0.42), transparent 36%), linear-gradient(90deg, rgba(255, 252, 245, 0.42), rgba(247, 229, 198, 0.1)); box-sizing: border-box !important; } body.landing-page .landing-feature-showcase__copy + .landing-feature-showcase__visual { margin-top: 0 !important; } body.landing-page .landing-feature-showcase__visual { grid-area: visual !important; align-self: stretch !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: var(--kv-desktop-visual-padding-block) var(--kv-desktop-visual-padding-inline) !important; box-sizing: border-box !important; } body.landing-page .landing-feature-showcase .landing-feature-section__header, body.landing-page .landing-feature-showcase__layout .landing-feature-section__header { grid-area: intro !important; place-items: start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } body.landing-page .landing-feature-showcase .landing-feature-section__header .page-section-header__title, body.landing-page .landing-feature-showcase__layout .landing-feature-section__header .page-section-header__title { width: 100% !important; max-width: 100% !important; margin: 0 !important; color: rgba(43, 27, 18, 0.97) !important; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; font-size: var(--kv-desktop-title-size) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: 0.045em !important; text-align: left !important; text-shadow: 0 1px 0 rgba(255, 252, 244, 0.72); } body.landing-page .landing-feature-showcase .landing-feature-section__header .page-section-header__title::after, body.landing-page .landing-feature-showcase__layout .landing-feature-section__header .page-section-header__title::after { content: "◆"; display: flex; align-items: center; justify-content: center; width: 4.75rem; height: 0.6rem; margin-top: var(--kv-desktop-rule-gap); color: rgba(191, 139, 51, 0.96); font-family: Georgia, "Times New Roman", serif; font-size: 0.54rem; line-height: 1; text-shadow: 0 0 0.32rem rgba(251, 245, 234, 0.98); background: linear-gradient(90deg, rgba(191, 139, 51, 0.72), rgba(191, 139, 51, 0.96), rgba(191, 139, 51, 0.72)) center / 100% 1px no-repeat; } body.landing-page .landing-feature-showcase .landing-feature-section__header .page-section-header__subtitle, body.landing-page .landing-feature-showcase__layout .landing-feature-section__header .page-section-header__subtitle { width: min(100%, 16.5rem) !important; max-width: 16.5rem !important; margin: var(--kv-landing-header-subtitle-gap) 0 0 !important; color: var(--kv-landing-header-subtitle-color) !important; font-family: var(--kv-landing-header-subtitle-font) !important; font-size: var(--kv-landing-header-subtitle-size) !important; font-style: var(--kv-section-subheader-style) !important; font-weight: var(--kv-section-subheader-weight) !important; line-height: var(--kv-section-subheader-line-height) !important; letter-spacing: var(--kv-section-subheader-letter-spacing) !important; text-align: left !important; text-wrap: balance; } body.landing-page .landing-feature-showcase .landing-feature-section__header .page-section-header__description, body.landing-page .landing-feature-showcase__layout .landing-feature-section__header .page-section-header__description { display: block !important; width: min(100%, 17.5rem) !important; max-width: 17.5rem !important; margin: var(--kv-desktop-copy-gap) 0 0 !important; color: rgba(47, 38, 31, 0.76) !important; font-family: "Manrope", "Inter", system-ui, sans-serif !important; font-size: var(--kv-desktop-description-size) !important; font-weight: 400 !important; line-height: 1.58 !important; letter-spacing: -0.005em !important; text-align: left !important; text-wrap: pretty; } body.landing-page .landing-feature-showcase__copy > .landing-feature-section__cta, body.landing-page .landing-feature-showcase__copy > .landing-feature-showcase__cta { grid-area: cta !important; display: flex !important; align-self: start !important; justify-self: start !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: var(--kv-desktop-cta-gap) 0 0 !important; } body.landing-page .landing-feature-showcase__copy .landing-feature-section__button, body.landing-page .landing-feature-showcase__copy .map-full-link, body.landing-page .landing-kinsight-preview.landing-kinsight-preview--quick-glance .landing-kinsight-preview__button { align-self: start !important; justify-self: start !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* KinSight keeps its interface intact but uses more of the available right column. */ body.landing-page .landing-kinsight-preview.landing-kinsight-preview--quick-glance .landing-feature-showcase__visual { display: grid !important; place-items: start center !important; align-content: start !important; } body.landing-page .landing-kinsight-preview.landing-kinsight-preview--quick-glance [data-ks-compare-lab] { /* Keep the comparison prominent without overpowering the shared copy rail. */ width: min(90%, 34.25rem) !important; max-width: 34.25rem !important; margin: 0 auto !important; justify-self: center !important; } /* KinCrest keeps the sigil above the same four-card step row at a stronger desktop scale. */ body.landing-page .landing-sigil-creator .sigil-creator-card__visual { display: grid !important; align-content: start !important; justify-items: center !important; width: 100% !important; min-width: 0 !important; } body.landing-page .landing-sigil-creator .sigil-creator-card { --sigil-preview-step-icon-size: clamp(3.2rem, 3.45vw, 3.9rem); --sigil-preview-step-title-size: clamp(1.15rem, 1.35vw, 1.42rem); } body.landing-page .landing-sigil-creator .sigil-composed--landing { width: min(100%, 8.5rem) !important; margin-inline: auto !important; } body.landing-page .landing-sigil-creator .sigil-creator-card__steps { width: min(100%, 34.5rem) !important; margin-inline: auto !important; } /* KinJourney retains its portrait strip, selected-person card, and map ordering. */ body.landing-page .map-row .landing-feature-showcase__visual, body.landing-page .map-row .migration-map-experience { display: grid; align-content: start; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } body.landing-page .map-row .landing-feature-showcase__visual { /* Compact only the desktop section shell; portrait-card presentation is untouched. */ padding-block: clamp(0.62rem, 0.85vw, 0.78rem) !important; } body.landing-page .map-row .landing-feature-showcase__visual .map-frame, body.landing-page .map-row .live-map-frame, body.landing-page .map-row #lmMap.lm-map { width: 100% !important; } body.landing-page .map-row:not(.map-row--showcase) .live-map-frame, body.landing-page .map-row:not(.map-row--showcase) #lmMap.lm-map { /* Desktop-only: 15% taller than the previous canonical KinJourney map frame. */ height: clamp(14.8rem, 21.5vw, 17.1rem) !important; min-height: clamp(14.8rem, 21.5vw, 17.1rem) !important; } /* Give every Why Kinvella card equal top and bottom breathing room on desktop. */ body.landing-page:not(.authenticated-home) .landing-story-intro__card { align-content: center !important; box-sizing: border-box !important; padding-block: clamp(0.58rem, 0.72vw, 0.74rem) !important; } } /* Mobile frame consistency --------------------------------------------------------------- Preserve the established mobile feature content, map sizing, and card rhythm. This block only keeps one padding owner for the shared outer feature frame. */ @media (max-width: 1099px) { body.landing-page { --kv-mobile-feature-frame-padding: clamp(0.62rem, 2.8vw, 0.78rem); } body.landing-page .landing-feature-frame.raised-card.parchment-card { box-sizing: border-box !important; padding: var(--kv-mobile-feature-frame-padding) !important; padding-block: var(--kv-mobile-feature-frame-padding) !important; padding-inline: var(--kv-mobile-feature-frame-padding) !important; } body.landing-page .landing-feature-frame.raised-card.parchment-card > .landing-kinsight-preview__inner, body.landing-page .landing-feature-frame.raised-card.parchment-card > .landing-kinsight-preview__inner--quick-glance { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } } /* Canonical responsive Legacy summary layout --------------------------------------------- A single dimensional system owns the summary on every breakpoint. The portrait always stays left, the four ancestor text lines share one text axis, and all three pills remain on one row without wrapping. */ body.landing-page:not(.authenticated-home) .landing-portrait-row, body.landing-page.authenticated-home .landing-portrait-row { display: block !important; width: min(calc(100vw - clamp(0.5rem, 3vw, 3.2rem)), 76rem) !important; max-width: 76rem !important; margin-inline: auto !important; } /* Name, role, facts, and pills share the same copy axis. */ /* Container-based compression keeps the same layout even when the page rail is narrow. */ @container (max-width: 620px) { } @container (max-width: 430px) { } /* Family Summary ------------------------------------------------------------------------- One responsive layout source for the founding portraits and square family metrics. */ body.landing-page .landing-portrait-row { width: min(calc(100vw - clamp(0.8rem, 4vw, 3.6rem)), 76rem); max-width: 76rem; margin-inline: auto; } body.landing-page .landing-portrait-row > .summary-card--capsule.raised-card.parchment-card { --summary-carousel-edge-gap: clamp(0.55rem, 1.6vw, 0.82rem); position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: clamp(1rem, 2.4vw, 2rem) clamp(0.7rem, 2.4vw, 1.8rem) clamp(0.85rem, 2vw, 1.55rem) !important; overflow: hidden; border: 1px solid rgba(199, 148, 58, 0.82) !important; border-radius: clamp(18px, 2.2vw, 26px) !important; background: radial-gradient(circle at 50% 0%, rgba(255, 253, 248, 0.82), transparent 58%), linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(247, 238, 222, 0.97)) !important; box-shadow: 0 0 0 1px rgba(255, 250, 239, 0.74) inset, 0 0.7rem 1.8rem rgba(78, 48, 21, 0.1) !important; } body.landing-page .landing-portrait-row > .summary-card--capsule.raised-card.parchment-card::before { content: ""; position: absolute; inset: 0.38rem; border: 1px solid rgba(235, 207, 157, 0.52); border-radius: calc(clamp(18px, 2.2vw, 26px) - 0.3rem); pointer-events: none; } body.landing-page .landing-portrait-row > .summary-card--capsule.raised-card.parchment-card::after { content: none; } body.landing-page .summary-founders-header { display: grid !important; justify-items: center !important; gap: 0 !important; width: 100% !important; margin: 0 0 var(--summary-carousel-edge-gap) !important; padding: 0 !important; text-align: center !important; } body.landing-page .summary-founders-header .page-section-header__title { width: 100% !important; margin: 0 !important; color: rgba(43, 27, 18, 0.96) !important; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; font-size: clamp(1.35rem, 4.6vw, 3rem) !important; font-weight: 500 !important; line-height: 0.98 !important; letter-spacing: clamp(0.035em, 0.7vw, 0.075em) !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; } body.landing-page .summary-founders-header .page-section-header__title::after { content: none !important; display: none !important; } body.landing-page .summary-card--capsule .summary-founders-shell { display: grid !important; gap: clamp(0.38rem, 0.9vw, 0.62rem) !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.landing-page .summary-family-carousel { --summary-carousel-gap: clamp(10px, 2.7vw, 12px); --summary-carousel-padding: clamp(12px, 3.6vw, 16px); --summary-carousel-card-width: calc((100% - (var(--summary-carousel-gap) * 2)) / 2.12); width: 100%; min-width: 0; margin: 0; } body.landing-page .summary-family-carousel__stage { position: relative; width: 100%; min-width: 0; } body.landing-page .summary-family-carousel__viewport { display: flex; align-items: stretch; gap: var(--summary-carousel-gap); width: 100%; min-width: 0; margin: 0; padding: 0.18rem var(--summary-carousel-padding); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-padding-inline: var(--summary-carousel-padding); scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-inline: contain; overscroll-behavior-block: auto; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; box-sizing: border-box; } body.landing-page .summary-family-carousel__viewport::-webkit-scrollbar { display: none; width: 0; height: 0; } body.landing-page .summary-family-carousel__viewport.is-jumping { scroll-behavior: auto !important; scroll-snap-type: none; } /* Desktop pointer dragging follows the KinSight rail while touch remains native. */ body.landing-page .summary-family-carousel__viewport.is-dragging { scroll-behavior: auto !important; scroll-snap-type: none; cursor: grabbing; user-select: none; } body.landing-page .summary-family-carousel__viewport.is-dragging * { cursor: grabbing !important; user-select: none !important; } body.landing-page .summary-family-carousel__viewport:focus-visible { outline: 2px solid rgba(126, 82, 26, 0.72); outline-offset: 3px; border-radius: 18px; } body.landing-page .summary-family-carousel__slide { display: flex; align-items: flex-start; flex: 0 0 var(--summary-carousel-card-width); min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; container-type: inline-size; container-name: summary-family-member; } body.landing-page .summary-family-carousel__card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; justify-items: center; align-self: flex-start; width: 100%; min-width: 0; min-height: 0; padding: clamp(14px, 4.1cqi, 18px) clamp(7px, 4.7cqi, 11px) clamp(14px, 4.4cqi, 18px); overflow: hidden; border: 1px solid rgba(190, 143, 65, 0.5); border-radius: clamp(18px, 11cqi, 22px); background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.72), transparent 48%), linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(249, 242, 229, 0.94)); box-shadow: 0 0 0 1px rgba(255, 250, 239, 0.58) inset, 0 0.34rem 0.85rem rgba(76, 49, 25, 0.055); color: rgba(45, 29, 20, 0.95); text-align: center; text-decoration: none; box-sizing: border-box; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } body.landing-page .summary-family-carousel__card:focus-visible { outline: 2px solid rgba(132, 86, 25, 0.88); outline-offset: 3px; border-color: rgba(168, 111, 31, 0.76); } @media (hover: hover) and (pointer: fine) { body.landing-page .summary-family-carousel__viewport { cursor: grab; } body.landing-page .summary-family-carousel__card:hover { border-color: rgba(165, 108, 29, 0.68); box-shadow: 0 0 0 1px rgba(255, 250, 239, 0.64) inset, 0 0.48rem 1rem rgba(76, 49, 25, 0.085); transform: translateY(-1px); } } body.landing-page .summary-family-carousel__relationship { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: calc(100% - 0.8rem); min-height: 1.38rem; padding: clamp(3px, 2.4cqi, 4px) clamp(7px, 5.2cqi, 10px); overflow: hidden; border: 1px solid rgba(187, 132, 43, 0.46); border-radius: 999px; background: rgba(255, 252, 245, 0.52); color: rgba(64, 43, 29, 0.86); font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: clamp(7.5px, 6.2cqi, 9.5px); font-weight: 600; line-height: 1; letter-spacing: 0.055em; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; box-sizing: border-box; } body.landing-page .summary-family-carousel__relationship--long { max-width: calc(100% - 0.5rem); padding-inline: clamp(5px, 3.8cqi, 8px); font-size: clamp(7px, 5.5cqi, 8.7px); line-height: 1; letter-spacing: 0.025em; white-space: nowrap; } /* The focal card stays the same height; its existing label carries the emphasis. */ body.landing-page .summary-family-carousel__card.is-focal-person { border-color: rgba(173, 111, 24, 0.74); box-shadow: 0 0 0 1px rgba(255, 250, 237, 0.7) inset, 0 0.42rem 0.95rem rgba(104, 63, 14, 0.1); } body.landing-page .summary-family-carousel__card.is-focal-person .summary-family-carousel__relationship { border-color: transparent; background: linear-gradient(rgba(255, 250, 239, 0.98), rgba(250, 240, 214, 0.96)) padding-box, linear-gradient(135deg, #8f5a12 0%, #e8c466 34%, #fff0ae 50%, #ba7a18 72%, #7e4b0d 100%) border-box; box-shadow: 0 0 0 1px rgba(255, 252, 242, 0.78) inset, 0 2px 5px rgba(112, 69, 15, 0.08); color: #72490f; font-weight: 700; } body.landing-page .summary-family-carousel__portrait-stage { position: relative; display: grid; place-items: center; width: 100%; min-width: 0; margin-top: clamp(6px, 4.8cqi, 9px); isolation: isolate; } body.landing-page .summary-family-carousel__portrait-ring { position: relative; z-index: 2; display: block; width: clamp(82px, 70cqi, 108px); aspect-ratio: 1 / 1; padding: clamp(2px, 2.2cqi, 3px); border-radius: 50%; background: linear-gradient(145deg, #9a681b 0%, #f0ce73 28%, #b47918 54%, #f9e29a 76%, #8f5d16 100%); box-shadow: 0 0 0 1px rgba(116, 73, 17, 0.24), 0 0 0 3px rgba(255, 249, 233, 0.82), 0 0.3rem 0.72rem rgba(67, 43, 20, 0.1); box-sizing: border-box; } body.landing-page .summary-family-carousel__card img { -webkit-user-drag: none; user-select: none; } body.landing-page .summary-family-carousel__portrait { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; border: 1px solid rgba(255, 246, 219, 0.88); border-radius: 50%; background: rgba(242, 229, 204, 0.9); object-fit: cover; object-position: center top; filter: sepia(0.17) saturate(0.92) contrast(1.03); box-sizing: border-box; } body.landing-page .summary-family-carousel__olive { position: absolute; z-index: 1; top: 53%; width: clamp(31px, 31cqi, 48px); height: auto; opacity: 0.23; object-fit: contain; pointer-events: none; user-select: none; } body.landing-page .summary-family-carousel__olive--left { left: 0; transform: translateY(-50%) rotate(-10deg); } body.landing-page .summary-family-carousel__olive--right { right: 0; transform: translateY(-50%) scaleX(-1) rotate(-10deg); } body.landing-page .summary-family-carousel__identity { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 0; width: 100%; max-width: 100%; min-width: 0; margin-top: clamp(7px, 5cqi, 10px); overflow: hidden; } body.landing-page .summary-family-carousel__name { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 0; margin: 0; overflow: hidden; color: rgba(42, 27, 18, 0.98); font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: clamp(14px, 11.6cqi, 18px); font-weight: 600; line-height: 1.04; letter-spacing: -0.008em; text-align: center; text-overflow: ellipsis; white-space: nowrap; } body.landing-page .summary-family-carousel__fact { display: inline-flex; align-items: center; justify-content: center; gap: clamp(3px, 3.1cqi, 5px); width: 100%; max-width: 100%; min-width: 0; margin: clamp(5px, 4.2cqi, 7px) 0 0; color: rgba(57, 42, 32, 0.8); font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: clamp(11.5px, 9.5cqi, 15px); font-weight: 500; line-height: 1.12; text-align: center; } body.landing-page .summary-family-carousel__fact--profession { align-items: center; min-height: 0; margin-top: clamp(4px, 3.4cqi, 6px); } body.landing-page .summary-family-carousel__fact > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.landing-page .summary-family-carousel__fact--lifespan > span { white-space: nowrap; } body.landing-page .summary-family-carousel__fact svg { flex: 0 0 auto; width: clamp(11px, 9.2cqi, 15px); height: clamp(11px, 9.2cqi, 15px); fill: none; stroke: rgba(179, 119, 30, 0.92); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body.landing-page .summary-family-carousel__arrow { position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: rgba(55, 36, 24, 0.96); cursor: pointer; transform: translateY(-50%); -webkit-tap-highlight-color: transparent; } body.landing-page .summary-family-carousel__arrow--previous { left: -2px; } body.landing-page .summary-family-carousel__arrow--next { right: -2px; } body.landing-page .summary-family-carousel__arrow-visual { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(183, 128, 43, 0.58); border-radius: 50%; background: rgba(255, 252, 245, 0.96); box-shadow: 0 0.28rem 0.68rem rgba(71, 45, 21, 0.1); } body.landing-page .summary-family-carousel__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } body.landing-page .summary-family-carousel__arrow:focus-visible { outline: 2px solid rgba(132, 86, 25, 0.88); outline-offset: 1px; border-radius: 50%; } body.landing-page .summary-family-carousel__arrow:active .summary-family-carousel__arrow-visual { transform: scale(0.97); } body.landing-page .summary-family-carousel.is-static .summary-family-carousel__arrow { display: none; } body.landing-page .summary-family-carousel__status { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 14px; margin-top: clamp(3px, 0.8vw, 5px); padding-inline: var(--summary-carousel-padding); color: rgba(52, 35, 24, 0.82); box-sizing: border-box; } body.landing-page .summary-family-carousel__dots { display: inline-flex; align-items: center; gap: 4px; } body.landing-page .summary-family-carousel__dots > span { display: block; width: 4px; height: 4px; border: 1px solid rgba(178, 127, 49, 0.62); border-radius: 50%; background: rgba(242, 222, 184, 0.46); box-sizing: border-box; } body.landing-page .summary-family-carousel__dots > .is-active { width: 6px; height: 6px; border-color: rgba(168, 110, 27, 0.88); background: rgba(190, 132, 38, 0.76); } body.landing-page .summary-family-carousel__counter { position: absolute; right: var(--summary-carousel-padding); top: 50%; transform: translateY(-50%); font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: clamp(11px, 2.9vw, 13px); font-weight: 600; line-height: 1; letter-spacing: 0.025em; white-space: nowrap; } /* Preserve polite carousel announcements without rendering duplicate visible copy. */ body.landing-page .summary-family-carousel__live { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } @media (min-width: 600px) and (max-width: 899px) { body.landing-page .summary-family-carousel { --summary-carousel-card-width: calc((100% - (var(--summary-carousel-gap) * 3)) / 3.12); } } @media (min-width: 900px) { body.landing-page .summary-family-carousel { --summary-carousel-card-width: clamp(11.5rem, 18vw, 13.75rem); } } @media (max-width: 360px) { body.landing-page .summary-family-carousel { --summary-carousel-gap: 9px; --summary-carousel-padding: 10px; } body.landing-page .summary-family-carousel__arrow--previous { left: -4px; } body.landing-page .summary-family-carousel__arrow--next { right: -4px; } } @media (prefers-reduced-motion: reduce) { body.landing-page .summary-family-carousel__viewport { scroll-behavior: auto; } body.landing-page .summary-family-carousel__card { transition: none; } } body.landing-page .summary-card--capsule .capsule-overview-card--hero { display: grid; gap: clamp(0.45rem, 1vw, 0.7rem); margin: 0; } body.landing-page .summary-card--capsule .capsule-overview-card--hero::before { content: none; display: none; } body.landing-page .summary-card--capsule .capsule-overview-grid--hero { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: start !important; justify-content: center !important; gap: clamp(0.3rem, 1.35vw, 0.95rem) !important; width: min(100%, 58rem) !important; margin: 0 auto !important; } body.landing-page .summary-card--capsule .capsule-metric-card--hero { display: grid !important; place-items: center !important; align-content: center !important; justify-self: center !important; gap: clamp(0.12rem, 0.6vw, 0.34rem) !important; width: min(100%, 12.6rem) !important; container-type: inline-size; container-name: summary-metric-card; min-width: 0 !important; min-height: 0 !important; height: auto !important; aspect-ratio: 1 / 1 !important; padding: clamp(0.5rem, 1.15vw, 0.9rem) clamp(0.18rem, 0.55vw, 0.55rem) !important; border: 1px solid rgba(207, 169, 105, 0.58) !important; border-radius: clamp(10px, 1.5vw, 18px) !important; background: rgba(255, 252, 246, 0.72) !important; box-shadow: 0 0.32rem 0.9rem rgba(77, 49, 24, 0.05) !important; box-sizing: border-box !important; } /* Metric content scales with the card so larger summary layouts retain visual weight. */ body.landing-page .summary-card--capsule .capsule-metric-art--hero, body.landing-page .summary-card--capsule .capsule-metric-art--hero img { width: clamp(1.65rem, 27.5cqi, 3.55rem) !important; height: clamp(1.65rem, 27.5cqi, 3.55rem) !important; opacity: 0.9; } body.landing-page .summary-card--capsule .capsule-metric-value { color: rgba(40, 25, 16, 0.96) !important; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; font-size: clamp(2.05rem, 40cqi, 5rem) !important; font-weight: 500 !important; line-height: 0.82 !important; letter-spacing: -0.035em !important; } body.landing-page .summary-card--capsule .capsule-metric-value::after { width: clamp(1.6rem, 24cqi, 3.05rem) !important; margin-top: clamp(0.16rem, 2.4cqi, 0.32rem) !important; opacity: 0.62 !important; } body.landing-page .summary-card--capsule .capsule-metric-label { margin-top: clamp(0.04rem, 1.5cqi, 0.16rem) !important; color: rgba(48, 34, 25, 0.84) !important; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; font-size: clamp(0.7rem, 9.1cqi, 1.15rem) !important; font-weight: 600 !important; line-height: 1.05 !important; letter-spacing: clamp(0.055em, 0.18vw, 0.11em) !important; text-transform: uppercase !important; white-space: nowrap !important; } body.landing-page .summary-card--capsule .capsule-metric-note { display: none !important; } /* Wide layouts keep the metric cards compact without squeezing mobile content. */ @media (min-width: 1100px) { body.landing-page .summary-card--capsule .capsule-metric-card--hero { height: clamp(9.8rem, 13.5vw, 10.5rem) !important; aspect-ratio: auto !important; padding-block: clamp(0.4rem, 0.75vw, 0.65rem) !important; } /* Increase metric typography progressively as the desktop canvas gains room. */ body.landing-page .summary-card--capsule .capsule-metric-value { font-size: clamp(2.2rem, 42cqi, 5.3rem) !important; } body.landing-page .summary-card--capsule .capsule-metric-label { font-size: clamp(0.76rem, 9.75cqi, 1.23rem) !important; } } @media (min-width: 1500px) { body.landing-page .summary-card--capsule .capsule-metric-value { font-size: clamp(2.35rem, 46cqi, 5.75rem) !important; } body.landing-page .summary-card--capsule .capsule-metric-label { font-size: clamp(0.8rem, 10.45cqi, 1.32rem) !important; } } @media (max-width: 1099px) { body.landing-page .landing-subtitle-copy--desktop { display: none; } body.landing-page .landing-subtitle-copy--mobile { display: inline; } body.landing-page .landing-feature-section__header .page-section-header__subtitle { width: auto !important; max-width: calc(100% - 0.8rem) !important; padding-inline: 0.4rem !important; overflow: hidden !important; white-space: nowrap !important; text-wrap: nowrap !important; box-sizing: border-box !important; } } @media (max-width: 430px) { body.landing-page .landing-portrait-row > .summary-card--capsule.raised-card.parchment-card { padding-inline: 0.48rem !important; } }