@font-face { font-family: "PolySans"; src: url("fonts/polysans-bulky.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
    --canvas: #fefdfc;
    --white: #ffffff;
    --charcoal: #212121;
    --charcoal-m: #3a3a3a;
    --hl: #d7fc3d;
    --line: rgba(12, 49, 102, 0.12);
    --font-display: "PolySans", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

html,
body {
    margin: 0;
    background: var(--canvas);
}

body {
    color: var(--charcoal);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

.page {
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
    overflow: hidden;
    background: var(--canvas);
    padding: 48px 16px 64px;
}

.mark {
    position: absolute;
    left: 24px;
    top: 28px;
    display: none;
    width: 32px;
    height: 32px;
}

.shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
}

.wordmark {
    display: block;
    width: auto;
    height: 28px;
}

.intro {
    margin-top: 48px;
    max-width: 840px;
    text-align: center;
}

.heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 7.4vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--charcoal);
}

.strike {
    position: relative;
    display: inline-block;
    isolation: isolate;
    line-height: 1.04;
    white-space: nowrap;
    vertical-align: baseline;
    color: inherit;
}

.strike::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -0.06em -0.2em;
    background-color: var(--hl);
    transform: scaleX(0);
    transform-origin: left center;
    animation: strike-in 480ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;
}

.details {
    margin: 16px auto 0;
    max-width: 680px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--charcoal-m);
}

.flow {
    width: 100%;
    margin-top: 32px;
}

.contour-scheduler {
    position: relative;
    min-height: 560px;
}

.contour-scheduler iframe {
    display: block;
    width: 100%;
    height: 720px;
    border: 0;
    opacity: 0;
    transition: opacity 220ms ease-out;
}

.contour-scheduler[data-state="ready"] { min-height: 0; }

.contour-scheduler[data-state="ready"] iframe { opacity: 1; }

.contour-scheduler-wait {
    position: absolute;
    inset: 16px 0 auto;
    height: 560px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
    overflow: hidden;
}

.contour-scheduler-wait::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, 0.04) 50%, rgba(11, 11, 11, 0) 100%);
    transform: translateX(-100%);
    animation: shimmer 1.4s infinite;
}

.contour-scheduler[data-state="ready"] .contour-scheduler-wait { display: none; }

html.is-framed,
html.is-framed body { background: transparent; }

.is-framed .page {
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--canvas);
    padding: 32px 24px 24px;
}

.is-framed .mark { display: none; }

.is-framed .wordmark { height: 24px; }

.is-framed .intro { margin-top: 24px; }

.is-framed .heading { font-size: clamp(26px, 5vw, 40px); }

.is-framed .flow { margin-top: 24px; }

html.context-signup,
html.context-signup body { background: transparent; }

.context-signup .page {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.context-signup .mark,
.context-signup .wordmark { display: none; }

.context-signup .shell { align-items: stretch; }

.context-signup .intro {
    margin-top: 0;
    max-width: none;
    text-align: left;
}

.context-signup .heading { font-size: clamp(22px, 5vw, 28px); }

.context-signup .details {
    margin: 8px 0 0;
    max-width: none;
}

.context-signup .flow { margin-top: 16px; }

@keyframes strike-in {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes shimmer {
    to { transform: translateX(100%); }
}

@media (min-width: 40rem) {
    .page { padding: 64px 24px; }

    .mark {
        display: block;
        left: 32px;
        top: 32px;
    }
}

@media (max-width: 30rem) {
    .is-framed:not(.context-signup) .page { padding: 24px 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .strike::before {
        animation: none;
        transform: scaleX(1);
    }

    .contour-scheduler-wait::before { animation: none; }

    .contour-scheduler iframe { transition: none; }
}