.numerology-landing .home-hero__copy {
    width: min(44rem, 54%);
}

.numerology-landing .home-display {
    font-size: clamp(3.25rem, 5.7vw, 6.25rem);
}

.numerology-landing .home-display em {
    font-size: 0.7em;
    line-height: 1.2;
}

.numerology-landing .layer-character {
    inset: 2% 0 auto auto;
    width: 61%;
    height: 124%;
    object-fit: contain;
    object-position: 50% 0%;
    transform: none;
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 86%, transparent);
}

.numerology-landing .home-hero__vignette {
    background: linear-gradient(90deg, var(--home-canvas-deep) 0%, transparent 80%), linear-gradient(0deg, var(--home-canvas-deep), transparent 28%);
}

/* The first screen offers the three ready calculations as a row of tags. */
.numerology-landing__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--home-space-3);
    margin: var(--home-space-10) 0 0;
    padding: 0;
    list-style: none;
}

.numerology-landing__choices .home-secondary-action {
    margin-top: 0;
}

/* The opening block keeps the vertical rhythm of the home sections. */
.numerology-landing__intro {
    --home-atmosphere-x: 50%;
    --home-atmosphere-y: 46%;
    --home-atmosphere-color: rgba(58, 72, 108, 0.16);
    padding-block-start: var(--home-section-gap);
    scroll-margin-top: var(--home-space-16);
}

.numerology-landing__intro-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: start;
    gap: var(--home-space-16);
}

.numerology-landing__intro-copy {
    width: 100%;
    max-width: 34rem;
}

.numerology-landing__intro .home-section-title {
    max-width: 18ch;
}

.numerology-landing__offer {
    margin-top: 0;
    justify-self: end;
    width: 100%;
    max-width: 34rem;
}

.numerology-landing__offer h3 a {
    text-decoration: none;
}

.numerology-landing__offer h3 a:hover,
.numerology-landing__offer h3 a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.26em;
}

.numerology-landing .home-section-note {
    color: var(--home-text-muted);
    font-size: var(--home-type-label);
}

.numerology-landing__visual {
    position: relative;
    isolation: isolate;
    min-width: 0;
}

.numerology-landing__caption {
    margin: var(--home-space-6) 0 0;
    color: var(--home-text-muted);
    text-align: center;
    font-size: var(--home-type-caption);
    line-height: 1.5;
}

/* One light treatment for every interactive example on this page. */
.numerology-landing__light,
.numerology-landing__light-fallback {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.numerology-landing__light {
    inset: -22%;
    width: 144%;
    height: 144%;
    max-width: none;
    opacity: 0;
    mix-blend-mode: screen;
}

.numerology-landing__light-fallback {
    left: var(--numerology-light-x, 50%);
    top: var(--numerology-light-y, 50%);
    width: min(54%, 15rem);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.7;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.74) 0, rgba(199, 216, 244, 0.22) 18%, rgba(127, 147, 203, 0.09) 42%, transparent 72%);
    filter: blur(var(--home-space-3));
    transform: translate(-50%, -50%);
    animation: home-orb-pulse 5.2s ease-in-out infinite;
}

.numerology-landing__light-anchor {
    position: absolute;
    left: var(--numerology-light-x, 50%);
    top: var(--numerology-light-y, 50%);
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.home-page.is-numerology-webgl-ready .numerology-landing__light {
    opacity: 1;
}

.home-page.is-numerology-webgl-ready .numerology-landing__light-fallback {
    display: none;
}

.numerology-preview-calendar {
    position: relative;
    z-index: 2;
    width: min(100%, 34rem);
    margin-inline: auto;
    padding: clamp(1.25rem, 3vw, 3rem);
    border-radius: var(--home-radius-surface);
}

.numerology-preview-calendar__heading {
    display: flex;
    justify-content: space-between;
    gap: var(--home-space-4);
    padding-bottom: var(--home-space-8);
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
}

.numerology-preview-calendar__heading span:last-child {
    color: var(--home-text-muted);
}

.numerology-preview-calendar__week,
.numerology-preview-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    align-items: center;
    gap: var(--home-space-1);
}

.numerology-preview-calendar__week {
    margin-bottom: var(--home-space-3);
    color: var(--home-text-muted);
    font-size: var(--home-type-label);
}

.numerology-preview-calendar__days span {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    font-size: clamp(0.9rem, 1.6vw, 1.25rem);
}

.numerology-preview-calendar__days .is-selected {
    position: relative;
    border-radius: 50%;
    background: var(--home-silver);
    color: var(--home-ink);
}

.numerology-preview-calendar__result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--home-space-4);
    padding-top: var(--home-space-6);
    margin-top: var(--home-space-6);
    border-top: 1px solid var(--color-line);
    font-size: var(--home-type-lead);
}

.numerology-preview-calendar__result small {
    display: block;
    margin-top: var(--home-space-2);
    color: var(--home-text-muted);
    font-size: var(--home-type-label);
}

.numerology-preview-calendar__result strong {
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    font-weight: 400;
    line-height: 1;
}

.numerology-preview-calendar__periods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--home-space-4);
    margin: var(--home-space-6) 0 0;
    padding-top: var(--home-space-4);
    border-top: 1px solid var(--color-line);
    color: var(--home-text-muted);
    font-size: var(--home-type-micro);
    letter-spacing: var(--home-track-label);
    text-transform: uppercase;
}

.numerology-preview-calendar__periods span {
    display: grid;
    gap: var(--home-space-2);
}

.numerology-preview-calendar__periods b {
    color: var(--home-text);
    font-size: var(--home-type-lead);
    font-weight: 400;
    letter-spacing: normal;
}

.numerology-birth-preview {
    display: grid;
    justify-items: center;
    padding-block: var(--home-space-6);
    text-align: center;
}

.numerology-birth-preview__date {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.75rem);
    letter-spacing: 0.08em;
}

.numerology-birth-preview__date span {
    color: var(--home-text-faint);
    padding-inline: var(--home-space-3);
}

.numerology-birth-preview__orbit {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: min(88%, 27rem);
    aspect-ratio: 1;
    margin-block: var(--home-space-8);
}

.numerology-birth-preview__dial {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.numerology-birth-preview__marks text,
.numerology-birth-preview__value {
    text-anchor: middle;
}

.numerology-birth-preview__marks text {
    fill: var(--home-text-muted);
    font-size: 25px;
    dominant-baseline: central;
}

/* The display face draws old style figures: the five descends below the baseline and its
   side bearings are uneven, so neither the line box nor the advance width matches the drawn
   shape. The shift was measured from the rendered figure and puts its ink, not its box, in
   the middle of the rings. It is stated in em, so it holds at every width. */
.numerology-birth-preview__value {
    fill: var(--home-text);
    font-size: 176px;
    transform: translate(0.028em, 0.108em);
}

/* Over the drawn schema, so its lines brighten near the source, but under the labels. */
.numerology-birth-preview__light,
.numerology-birth-preview .numerology-landing__light-fallback,
.numerology-stages-preview__light,
.numerology-stages-preview .numerology-landing__light-fallback {
    z-index: 2;
}

.numerology-birth-preview__light {
    inset: -30%;
    width: 160%;
    height: 160%;
}

.numerology-birth-preview__meaning span {
    color: var(--home-text-muted);
    font-size: var(--home-type-label);
}

.numerology-birth-preview__meaning p {
    margin: var(--home-space-3) 0 0;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}

.numerology-stages-preview__chart {
    position: relative;
    isolation: isolate;
    margin-top: var(--home-space-3);
    aspect-ratio: 18 / 11;
}

.numerology-stages-preview__path {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.numerology-stages-preview__points {
    position: absolute;
    inset: 0;
    z-index: 4;
    margin: 0;
    padding: 0;
    list-style: none;
}

.numerology-stages-preview__point {
    position: absolute;
    left: var(--stage-x);
    top: var(--stage-y);
    display: grid;
    place-items: center;
    width: clamp(2.25rem, 4.6vw, 3.25rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    color: var(--home-text);
    font-size: clamp(1.125rem, 2.1vw, 1.75rem);
    line-height: 1;
}

.numerology-stages-preview__point b {
    font-weight: 400;
}

.numerology-stages-preview__point span {
    position: absolute;
    top: calc(100% + var(--home-space-2));
    left: 50%;
    color: var(--home-text-muted);
    font-size: clamp(0.625rem, 1.15vw, 0.875rem);
    line-height: 1.4;
    letter-spacing: var(--home-track-label);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* Height of a point is the number of that peak, so the curve carries the calculation. */
.numerology-stages-preview__point--1 {
    --stage-x: 13.33%;
    --stage-y: 56.59%;
}

.numerology-stages-preview__point--2 {
    --stage-x: 36.67%;
    --stage-y: 56.59%;
}

.numerology-stages-preview__point--3 {
    --stage-x: 61.11%;
    --stage-y: 22.27%;
    color: var(--home-silver-strong);
}

.numerology-stages-preview__point--4 {
    --stage-x: 86.11%;
    --stage-y: 73.64%;
}

/* The source sits under the highest peak, so the curve reads as rising out of the light. */
.numerology-stages-preview__anchor,
.numerology-stages-preview .numerology-landing__light-fallback {
    --numerology-light-x: 61.11%;
    --numerology-light-y: 33%;
}

/* The dial is lit from its own mark: position five, the life path number of this example. */
.numerology-birth-preview__anchor,
.numerology-birth-preview .numerology-landing__light-fallback {
    --numerology-light-x: 63.7%;
    --numerology-light-y: 87.6%;
}

@media (max-width: 74.9375rem) {
    .numerology-landing__intro-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--home-space-12);
    }

    .numerology-landing__intro-copy,
    .numerology-landing__offer {
        max-width: 48rem;
        justify-self: start;
    }
}

@media (max-width: 63.9375rem) {
    .numerology-landing .layer-character {
        width: 74%;
        right: -13%;
        height: 112%;
        top: 10%;
    }

    .numerology-landing__intro {
        padding-block-start: calc(var(--home-section-gap) * 0.72);
    }
}

@media (max-width: 47.9375rem) {
    .numerology-landing .home-hero,
    .numerology-landing .home-hero__layout {
        min-height: max(54rem, 100svh);
    }

    .numerology-landing .home-hero__layout {
        padding-top: var(--home-space-32);
    }

    .numerology-landing .home-hero__copy {
        width: 100%;
    }

    .numerology-landing .home-display {
        font-size: clamp(2.7rem, 9.3vw, 4.5rem);
    }

    .numerology-landing .home-lead {
        max-width: 32ch;
    }

    .numerology-landing .layer-character {
        inset: auto -18% -31% auto;
        width: 112%;
        height: 100%;
        object-position: 50% 0%;
        opacity: 0.9;
    }

    .numerology-landing .home-hero__vignette {
        background: linear-gradient(180deg, var(--home-canvas-deep) 9%, transparent 83%), linear-gradient(0deg, var(--home-canvas-deep), transparent 22%);
    }

    .numerology-landing__intro {
        padding-block-start: calc(var(--home-section-gap) * 0.55);
    }

    .numerology-birth-preview__orbit {
        width: min(100%, 22rem);
    }

    .numerology-preview-calendar__periods {
        font-size: 0.625rem;
    }

    .numerology-stages-preview__point span {
        letter-spacing: normal;
    }
}