/*
 * The landing page (resources/views/landing). Ported from the client's design: Tailwind's
 * preflight in its base layer, as in the original, then the page's own rules. Radix's
 * data-slot hooks became classes for the native <dialog>, radio and checkbox.
 */

@layer base {
    *, :after, :before {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }
    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }
    html, :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings,normal);
        font-variation-settings: var(--default-font-variation-settings,normal);
        -webkit-tap-highlight-color: transparent;
    }
    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }
    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit;
    }
    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit;
    }
    b, strong {
        font-weight: bolder;
    }
    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings,normal);
        font-variation-settings: var(--default-mono-font-variation-settings,normal);
        font-size: 1em;
    }
    small {
        font-size: 80%;
    }
    sub, sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative;
    }
    sub {
        bottom: -.25em;
    }
    sup {
        top: -.5em;
    }
    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }
    :-moz-focusring {
        outline: auto;
    }
    progress {
        vertical-align: baseline;
    }
    summary {
        display: list-item;
    }
    ol, ul, menu {
        list-style: none;
    }
    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display: block;
    }
    img, video {
        max-width: 100%;
        height: auto;
    }
    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0;
    }
    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0;
    }
    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder;
    }
    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px;
    }
    ::file-selector-button {
        margin-inline-end: 4px;
    }
    ::placeholder {
        opacity: 1;
    }
    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor;
        }
        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent);
            }
        }
    }
    textarea {
        resize: vertical;
    }
    ::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit;
    }
    ::-webkit-datetime-edit {
        display: inline-flex;
    }
    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }
    ::-webkit-datetime-edit {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-year-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-month-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-day-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-hour-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-minute-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-second-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }
    ::-webkit-calendar-picker-indicator {
        line-height: 1;
    }
    :-moz-ui-invalid {
        box-shadow: none;
    }
    button, input:where([type=button], [type=reset], [type=submit]) {
        -webkit-appearance: button;
        appearance: button;
    }
    ::file-selector-button {
        -webkit-appearance: button;
        appearance: button;
    }
    ::-webkit-inner-spin-button {
        height: auto;
    }
    ::-webkit-outer-spin-button {
        height: auto;
    }
    [hidden]:where(:not([hidden=until-found])) {
        display: none!important;
    }
}

/* What Radix and shadcn gave the dialog and its controls before the overrides below. */
@layer components {
    .site-dialog { position: fixed; inset: 0; z-index: 50; display: none; gap: 16px; width: 100%; margin: auto; }
    .site-dialog[open] { display: grid; animation: dialog-in .2s ease-out; }
    .site-dialog::backdrop { background: rgb(0 0 0 / .5); animation: backdrop-in .2s ease-out; }
    .dialog-title { font-size: 18px; font-weight: 600; line-height: 1; }
    .dialog-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; transition: opacity .2s; }
    .dialog-close svg { width: 16px; height: 16px; }
    .radio, .checkbox { appearance: none; flex-shrink: 0; margin: 0; cursor: pointer; }
    .radio { width: 16px; height: 16px; border-radius: 50%; }
    .radio:focus-visible, .checkbox:focus-visible { outline: 3px solid #65438f; outline-offset: 2px; }
    .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; }
}

@keyframes dialog-in { from { opacity: 0; transform: scale(.95); } }
@keyframes backdrop-in { from { opacity: 0; } }

html:has(.site-dialog[open]) { overflow: hidden; }
.spin { animation: 1s linear infinite spin; }

/* The submit button swaps its label while sending; the label's parts still lay out in the button. */
.submit-idle, .submit-sending { display: contents; }
.submit-idle > svg { color: #101010; background: #fff; border: 2px solid #101010; border-radius: 50%; flex-shrink: 0; width: 32px; height: 32px; padding: 5px; }

/* The page. */

:root {
    --background: #10151c;
    --foreground: #f5f5f3;
    --primary: #ffb52c;
    --primary-foreground: #101010;
    --muted-foreground: #344e52;
    --border: #101010;
    --input: #101010;
    --ring: #65438f;
    --radius: 1.5rem;
    --popover: #afcfd1;
    --popover-foreground: #101010;
    --accent: #d62e67;
    --accent-foreground: #fff;
    --wainhom-teal: #80a9ac;
    --wainhom-pink: #d62e67;
    --wainhom-orange: #ef8620;
    --wainhom-purple: #65438f;
    --wainhom-ink: #101010;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    color: #f5f5f3;
    background: #10151c;
    margin: 0;
    font-family: Arial,Helvetica,sans-serif;
}

button, a, input, textarea {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

button:disabled {
    opacity: .6;
    cursor: wait;
}

.skip {
    z-index: 100;
    color: #000;
    background: #fff;
    padding: 15px;
    position: absolute;
    top: -100px;
    left: 20px;
}

.skip:focus {
    top: 20px;
}

.hero {
    isolation: isolate;
    background: #0d1218;
    height: 100svh;
    min-height: 850px;
    max-height: 1500px;
    position: relative;
    overflow: hidden;
}

.hero-art {
    object-fit: cover;
    object-position: center;
    z-index: -3;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.veil {
    z-index: -2;
    background: linear-gradient(90deg,#090e16e0 0%,#090e169e 27%,#090e161a 62%,#0000),linear-gradient(#080c1280,#0000 20% 80%,#10151c 100%);
    position: absolute;
    inset: 0;
}

.navigation {
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 38px 5.5%;
    display: flex;
}

.navigation nav {
    align-items: center;
    gap: 34px;
    display: flex;
}

.navigation button {
    color: #f5f5f3;
    background: 0 0;
    border: 0;
    font-size: 14px;
}

.navigation button:hover {
    color: #a6d2e5;
}

.navigation .nav-join {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #ffffff09;
    border: 1px solid #ffffff60;
    border-radius: 40px;
    align-items: center;
    gap: 23px;
    padding: 14px 23px;
    display: flex;
}

.intro {
    max-width: 650px;
    margin: clamp(50px,9vh,160px) 5.5% 130px;
}

.eyebrow {
    letter-spacing: 2.1px;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    display: flex;
}

.eyebrow span {
    background: #85b6b8;
    width: 22px;
    height: 2px;
}

h1 {
    letter-spacing: -.065em;
    margin: 28px 0 30px;
    font-size: clamp(70px,6.4vw,132px);
    font-weight: 500;
    line-height: 1.02;
}

h1 em {
    color: #a4cbd4;
    font-style: normal;
}

.intro-copy {
    color: #d0d3d8;
    margin-bottom: 28px;
    font-size: 18px;
    line-height: 1.65;
}

.primary {
    color: #fff;
    background: #447596;
    border: 1px solid #6897b4;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    gap: 35px;
    min-height: 56px;
    padding: 18px 28px;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
}

.primary:hover {
    background: #5388ab;
    transform: translateY(-2px);
}

.cta-note {
    color: #b3b7bf;
    margin-top: 17px;
    font-size: 12px;
    line-height: 1.6;
}

.hero-bottom {
    color: #c0c2c6;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    font-size: 13px;
    display: flex;
    position: absolute;
    bottom: 37px;
    left: 5.5%;
    right: 5.5%;
}

.hero-bottom p {
    align-items: center;
    gap: 17px;
    display: flex;
}

.hero-bottom i {
    background: #a7c2cb;
    border-radius: 50%;
    width: 3px;
    height: 3px;
}

.hero-bottom a {
    align-items: center;
    gap: 20px;
    display: flex;
}

.possibilities {
    grid-template-columns: 1fr 1fr;
    gap: 12%;
    max-width: 1800px;
    margin: auto;
    padding: 110px 8%;
    display: grid;
}

.section-intro .eyebrow {
    color: #85b6b8;
}

.text-link {
    color: #e8eff2;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #66818d;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
    font-size: 15px;
    display: inline-flex;
}

.invitations {
    flex-direction: column;
    display: flex;
}

.invitation {
    text-align: left;
    width: 100%;
    color: inherit;
    background: 0 0;
    border: 0;
    border-top: 1px solid #ffffff24;
    padding: 30px 0;
    display: block;
}

.invitation:last-child {
    border-bottom: 1px solid #ffffff24;
}

.invitation-number {
    letter-spacing: 1.9px;
    color: #87a9bb;
    font-size: 12px;
}

.invitation-heading {
    letter-spacing: -.5px;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 18px 0 12px;
    font-size: 25px;
    font-weight: 400;
    display: flex;
}

.invitation-copy {
    color: #b5bec8;
    max-width: 450px;
    font-size: 16px;
    line-height: 1.65;
    display: block;
}

.invitation-link {
    color: #dce8ed;
    margin-top: 20px;
    font-size: 14px;
    display: block;
}

footer {
    color: #a7b1bb;
    border-top: 1px solid #ffffff24;
    align-items: center;
    gap: 30px;
    margin: 0 5.5%;
    padding: 32px 0 35px;
    font-size: 13px;
    display: flex;
}

.footer-brand {
    color: #e6eef1;
    letter-spacing: -.7px;
    font-size: 19px;
    font-weight: 900;
}

footer>div {
    align-items: center;
    gap: 24px;
    margin-left: auto;
    display: flex;
}

footer button {
    color: #bac2ca;
    background: 0 0;
    border: 0;
    font-size: 13px;
}

.site-dialog {
    max-height: 90svh;
    overflow-y: auto;
    color: #f5f5f3!important;
    background: #151e28!important;
    border: 1px solid #ffffff25!important;
    border-radius: 24px!important;
    max-width: 620px!important;
    padding: 38px!important;
}

.site-dialog .dialog-title {
    letter-spacing: -1px;
    margin-right: 15px;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.15;
}

.site-dialog .dialog-description {
    color: #b9c4cf;
    font-size: 16px;
    line-height: 1.6;
}

.site-dialog form {
    flex-direction: column;
    gap: 20px;
    display: flex;
}

.site-dialog fieldset {
    border: 0;
    margin: 4px 0 0;
    padding: 0;
}

.site-dialog legend {
    margin-bottom: 10px;
    font-size: 14px;
}

.role-options {
    gap: 10px!important;
    display: flex!important;
}

.role-options label {
    cursor: pointer;
    border: 1px solid #ffffff30;
    border-radius: 12px;
    flex: 1;
    align-items: center;
    gap: 10px;
    padding: 12px;
    display: flex;
}

.role-options label:has(.radio:checked) {
    background: #44759630;
    border-color: #85b6b8;
}

.form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    display: grid;
}

.site-dialog label {
    font-size: 14px;
    line-height: 1.5;
}

.site-dialog input:not([type=checkbox], [type=radio]), .site-dialog textarea {
    color: #fff;
    width: 100%;
    font: inherit;
    background: #ffffff06;
    border: 1px solid #ffffff35;
    border-radius: 10px;
    margin-top: 7px;
    padding: 12px 14px;
    font-size: 16px;
    display: block;
}

.site-dialog textarea {
    resize: vertical;
    min-height: 95px;
}

.consent {
    align-items: flex-start;
    gap: 12px;
    display: flex;
}

.consent .checkbox {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 3px;
}

.consent label {
    color: #b5c1cd;
    font-size: 13px;
}

.consent button {
    color: #9cc9df;
    background: 0 0;
    border: 0;
    padding: 0;
    text-decoration: underline;
}

.honeypot {
    position: absolute;
    left: -9999px;
}

.submit {
    width: 100%;
    margin-top: 2px;
}

.form-error {
    color: #ffb4b4;
    font-size: 14px;
}

.prose p {
    color: #c0cbd5;
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.75;
}

.prose h3 {
    margin: 15px 0 8px;
    font-size: 17px;
    font-weight: 600;
}

.success {
    text-align: center;
    padding: 20px 0;
}

.success>span {
    color: #b7e8cc;
    background: #44759655;
    border-radius: 50%;
    padding: 20px;
    display: inline-flex;
}

.success p {
    color: #c0cbd5;
    margin: 25px 0;
    font-size: 16px;
    line-height: 1.7;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width:1900px) {
    .intro {
        max-width: 850px;
    }
    .intro-copy {
        font-size: 22px;
    }
    .navigation {
        padding-top: 50px;
    }
    .navigation button {
        font-size: 16px;
    }
}

@media (max-width:900px) {
    .hero {
        min-height: 820px;
    }
    .hero-art {
        object-position: 60% center;
    }
    .intro {
        margin-top: 95px;
    }
    .veil {
        background: linear-gradient(90deg,#091018df,#09101888 48%,#09101818),linear-gradient(#0c111533,#0000 75%,#10151c);
    }
    .possibilities {
        gap: 7%;
        padding: 70px 6%;
    }
    footer {
        flex-wrap: wrap;
    }
    footer>div {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width:600px) {
    .hero {
        height: 95svh;
        min-height: 780px;
        max-height: 1100px;
    }
    .navigation {
        align-items: flex-start;
        gap: 15px;
        padding: 24px 6%;
    }
    .navigation nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 18px;
        max-width: 205px;
    }
    .navigation button {
        font-size: 13px;
    }
    .navigation .nav-join {
        display: none;
    }
    .hero-art {
        object-position: 65% center;
    }
    .veil {
        background: linear-gradient(90deg,#091018df,#09101870 80%),linear-gradient(#0c111544,#0000 70%,#10151c);
    }
    .intro {
        margin: 115px 6% 120px;
    }
    .eyebrow {
        letter-spacing: 1.7px;
        font-size: 11px;
    }
    h1 {
        letter-spacing: -3.3px;
        margin-top: 24px;
        font-size: clamp(58px,12.8vw,77px);
    }
    .intro-copy {
        font-size: 16px;
    }
    .cta-note {
        max-width: 250px;
        font-size: 12px;
    }
    .hero-bottom {
        bottom: 25px;
        left: 6%;
        right: 6%;
    }
    .hero-bottom p {
        gap: 10px;
        font-size: 11px;
    }
    .hero-bottom a {
        gap: 8px;
        font-size: 12px;
    }
    .possibilities {
        padding: 65px 6%;
        display: block;
    }
    .section-intro h2 {
        font-size: 40px;
    }
    .invitations {
        margin-top: 45px;
    }
    .invitation-heading {
        font-size: 24px;
    }
    footer {
        gap: 15px;
        margin: 0 6%;
    }
    footer>span {
        font-size: 12px;
    }
    footer>div {
        flex-wrap: wrap;
        gap: 18px;
    }
    footer small {
        margin-left: auto;
    }
    .site-dialog {
        max-width: calc(100% - 24px)!important;
        padding: 28px 22px!important;
    }
    .site-dialog .dialog-title {
        font-size: 29px;
    }
    .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .role-options {
        gap: 7px!important;
    }
    .role-options label {
        padding: 10px 8px;
        font-size: 13px;
    }
    .primary {
        padding: 16px 25px;
    }
    .site-dialog form {
        gap: 17px;
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }
    *, :before, :after {
        transition: none!important;
        animation: none!important;
    }
}

.privacy-actions {
    justify-content: space-between;
    gap: 20px;
    display: flex;
}

.logo-window {
    aspect-ratio: 696/258;
    border-radius: 999px;
    flex-shrink: 0;
    width: 150px;
    display: block;
    position: relative;
    overflow: hidden;
}

.logo-window img {
    width: 138.937%;
    max-width: none;
    height: auto;
    display: block;
    position: absolute;
    top: -81.7829%;
    left: -22.4138%;
}

.brand, .footer-brand {
    flex-shrink: 0;
}

.footer-brand .logo-window {
    width: 105px;
}

.intro {
    max-width: 950px;
}

h1 {
    letter-spacing: -.055em;
    font-size: clamp(54px,5.2vw,104px);
}

@media (max-width:600px) {
    .brand .logo-window {
        width: 115px;
    }
    h1 {
        letter-spacing: -.045em;
        font-size: clamp(28px,8.5vw,51px);
    }
    .intro-copy {
        max-width: 310px;
    }
}

.prose ul {
    color: #c0cbd5;
    margin: 0 0 24px;
    padding-left: 1.4rem;
    font-size: 16px;
    line-height: 1.75;
    list-style: outside;
}

.prose li+li {
    margin-top: 8px;
}

button, a {
    transition: background .18s,transform .18s,box-shadow .18s;
}

:is(button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible) {
    outline-offset: 5px;
    outline: 3px solid #ffb52c;
}

.navigation {
    background: var(--wainhom-teal);
    border: 3px solid var(--wainhom-ink);
    border-radius: 25px;
    gap: 24px;
    margin: 24px 4%;
    padding: 18px 24px;
    box-shadow: 0 5px #101010;
}

.navigation nav {
    gap: 10px;
}

.navigation button {
    color: #101010;
    white-space: nowrap;
    background: #afcfd1;
    border: 2.5px solid #101010;
    border-radius: 999px;
    min-height: 48px;
    padding: 13px 21px;
    font-size: 15px;
    font-weight: 800;
}

.navigation button:hover {
    color: #101010;
    background: #fff;
    transform: translateY(-2px);
}

.navigation .nav-join {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #101010;
    background: #ffb52c;
    border: 2.5px solid #101010;
    gap: 15px;
    padding: 10px 15px 10px 21px;
}

.navigation .nav-join svg, .primary>svg:not(.spin), .text-link>svg, .invitation-heading>svg, .hero-bottom a>svg {
    color: #101010;
    background: #fff;
    border: 2px solid #101010;
    border-radius: 50%;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 5px;
}

.intro {
    margin-top: clamp(45px,7vh,120px);
}

.intro .eyebrow {
    color: #fff;
    letter-spacing: 1.3px;
    background: #65438f;
    border: 2.5px solid #101010;
    border-radius: 999px;
    margin: 0;
    padding: 9px 16px 9px 12px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    box-shadow: 0 3px #101010;
}

.eyebrow>svg {
    fill: #ffb52c;
    stroke: #101010;
    stroke-width: 2px;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
}

h1 {
    letter-spacing: -.055em;
    text-shadow: 0 3px #101010;
    margin: 25px 0 24px;
    font-weight: 900;
    line-height: 1.04;
}

h1 em {
    color: #ffb52c;
}

.intro-copy {
    color: #fff;
    max-width: 550px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.55;
}

.primary {
    color: #101010;
    background: #ffb52c;
    border: 3px solid #101010;
    border-radius: 999px;
    gap: 28px;
    min-height: 58px;
    padding: 12px 18px 12px 26px;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 4px #101010;
}

.primary:hover {
    background: #ffc85b;
    transform: translateY(-2px);
    box-shadow: 0 6px #101010;
}

.primary:active {
    transform: translateY(2px);
    box-shadow: 0 1px #101010;
}

.cta-note {
    color: #d2d8db;
    max-width: 400px;
    font-size: 14px;
}

.hero-bottom {
    color: #fff;
    font-size: 14px;
}

.hero-bottom p {
    gap: 12px;
    font-weight: 700;
}

.hero-bottom i {
    background: #ffb52c;
    width: 5px;
    height: 5px;
}

.hero-bottom a {
    color: #101010;
    background: #afcfd1;
    border: 2.5px solid #101010;
    border-radius: 999px;
    gap: 18px;
    padding: 8px 10px 8px 18px;
    font-weight: 800;
}

.possibilities {
    color: #101010;
    background: #80a9ac;
    border: 3px solid #101010;
    border-radius: 28px;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: none;
    margin: 30px 4% 0;
    padding: 0;
    overflow: hidden;
}

.section-intro {
    padding: 50px 42px;
}

.section-intro .eyebrow {
    color: #101010;
    letter-spacing: 1px;
    gap: 9px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.section-intro h2 {
    letter-spacing: -.05em;
    margin: 25px 0;
    font-size: clamp(36px,3.8vw,62px);
    font-weight: 900;
    line-height: 1.05;
}

.section-intro>p:not(.eyebrow) {
    color: #182d30;
    max-width: 510px;
    font-size: 17px;
    line-height: 1.65;
}

.text-link {
    color: #101010;
    background: #fff;
    border: 2.5px solid #101010;
    border-radius: 999px;
    gap: 16px;
    padding: 8px 10px 8px 18px;
    font-size: 16px;
    font-weight: 800;
}

.text-link:hover {
    background: #ffb52c;
}

.section-intro .text-link {
    margin-top: 15px;
}

.invitations {
    border-left: 3px solid #101010;
    gap: 0;
}

.invitation {
    color: #fff;
    background: #d62e67;
    border: 0;
    padding: 32px 35px;
    transition: filter .2s;
}

.invitation:last-child {
    color: #101010;
    background: #ef8620;
    border: 0;
    border-top: 3px solid #101010;
}

.invitation:hover {
    filter: brightness(1.06);
}

.invitation:hover .invitation-heading {
    color: inherit;
}

.invitation-number {
    letter-spacing: 1px;
    color: #101010;
    background: #fff;
    border: 2px solid #101010;
    border-radius: 30px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    display: inline-block;
}

.invitation-heading {
    letter-spacing: -.035em;
    margin: 18px 0 14px;
    font-size: clamp(23px,2.2vw,34px);
    font-weight: 900;
    line-height: 1.15;
}

.invitation-heading>svg {
    width: 38px;
    height: 38px;
    padding: 6px;
}

.invitation-copy {
    color: inherit;
    font-size: 16px;
    line-height: 1.6;
}

.invitation-link {
    color: inherit;
    text-underline-offset: 5px;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: underline;
}

footer {
    color: #101010;
    background: #afcfd1;
    border: 3px solid #101010;
    border-radius: 25px;
    gap: 25px;
    margin: 20px 4% 25px;
    padding: 25px 28px;
    font-size: 14px;
}

footer>span {
    max-width: 310px;
    font-weight: 700;
    line-height: 1.5;
}

footer>div {
    gap: 18px;
}

footer button {
    color: #101010;
    text-underline-offset: 4px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}

footer small {
    color: #344e52;
    font-size: 12px;
}

.site-dialog {
    box-shadow: 0 9px #101010;
    color: #101010!important;
    background: #afcfd1!important;
    border: 3px solid #101010!important;
    border-radius: 28px!important;
    padding: 35px!important;
}

.site-dialog .dialog-title {
    letter-spacing: -1.2px;
    font-size: 35px;
    font-weight: 900;
    line-height: 1.1;
}

.site-dialog .dialog-description {
    color: #243e42;
    font-size: 16px;
}

.site-dialog .dialog-close {
    opacity: 1;
    color: #101010;
    background: #ffb52c;
    border: 2px solid #101010;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 6px;
}

.site-dialog legend, .site-dialog label {
    font-size: 14px;
    font-weight: 700;
}

.site-dialog label>span {
    color: #466165;
}

.role-options label {
    color: #101010;
    background: #fff;
    border: 2px solid #101010;
    border-radius: 999px;
    gap: 8px;
    padding: 12px;
}

.role-options label:has(.radio:checked) {
    color: #fff;
    background: #65438f;
    border-color: #101010;
}

.site-dialog .radio {
    color: #101010;
    background: #fff;
    border: 2px solid #101010;
}

.site-dialog input:not([type=checkbox], [type=radio]), .site-dialog textarea {
    color: #101010;
    background: #fff;
    border: 2px solid #101010;
    border-radius: 15px;
    font-weight: 400;
}

.site-dialog textarea::placeholder {
    color: #637579;
}

.site-dialog label>input:focus-visible {
    outline-offset: 2px;
    outline: 3px solid #65438f;
}

.site-dialog textarea:focus-visible {
    outline-offset: 2px;
    outline: 3px solid #65438f;
}

.consent label {
    color: #243e42;
    font-size: 14px;
    font-weight: 400;
}

.consent button {
    color: #3c245e;
    font-weight: 700;
}

.consent .checkbox {
    background: #fff;
    border: 2px solid #101010;
    border-radius: 5px;
}

.consent .checkbox:checked {
    color: #fff;
    background: #65438f;
}

.prose p, .prose ul {
    color: #243e42;
}

.prose h3 {
    color: #101010;
    font-weight: 800;
}

.form-error {
    color: #8e153c;
    font-weight: 700;
}

.success>span {
    color: #101010;
    background: #ffb52c;
    border: 3px solid #101010;
}

.success p {
    color: #243e42;
}

.privacy-actions {
    flex-wrap: wrap;
    gap: 12px;
}

.privacy-actions .text-link {
    font-size: 14px;
}

/* .text-link's padding is weighted for a trailing icon; one without (Back to enquiry) centres its label. */
.privacy-actions .text-link:not(:has(svg)) {
    justify-content: center;
    padding-inline: 22px;
}

@media (max-width:1100px) {
    .section-intro {
        padding: 35px 28px;
    }
    .invitation {
        padding: 28px;
    }
    .section-intro .eyebrow {
        align-items: flex-start;
    }
    footer {
        flex-wrap: wrap;
    }
    footer>div {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width:900px) {
    .navigation {
        gap: 16px;
        padding: 16px 18px;
    }
    .navigation button {
        padding: 11px 15px;
        font-size: 14px;
    }
    .navigation .nav-join {
        gap: 10px;
        padding: 9px 11px 9px 15px;
    }
    .brand .logo-window {
        width: 125px;
    }
    .possibilities {
        grid-template-columns: 1fr;
    }
    .invitations {
        border-top: 3px solid #101010;
        border-left: 0;
        grid-template-columns: 1fr 1fr;
        display: grid;
    }
    .invitation:last-child {
        border-top: 0;
        border-left: 3px solid #101010;
    }
    .section-intro {
        padding: 35px;
    }
    .section-intro>p:not(.eyebrow) {
        max-width: 640px;
    }
    .intro {
        margin-top: 75px;
    }
}

@media (max-width:600px) {
    .navigation {
        border-radius: 21px;
        align-items: center;
        gap: 12px;
        margin: 16px 4%;
        padding: 14px 13px;
    }
    .brand .logo-window {
        width: 100px;
    }
    .navigation nav {
        flex-wrap: nowrap;
        gap: 6px;
        max-width: none;
    }
    .navigation button {
        border-width: 2px;
        min-height: 40px;
        padding: 9px 10px;
        font-size: 12px;
    }
    .navigation .nav-join {
        display: none;
    }
    .intro {
        margin: 95px 6% 125px;
    }
    .intro .eyebrow {
        letter-spacing: .8px;
        gap: 7px;
        padding: 7px 12px 7px 9px;
        font-size: 11px;
    }
    .eyebrow>svg {
        width: 22px;
        height: 22px;
    }
    h1 {
        letter-spacing: -.045em;
        font-size: clamp(28px,7.6vw,46px);
        line-height: 1.08;
    }
    .intro-copy {
        max-width: 320px;
        font-size: 17px;
    }
    .primary {
        gap: 23px;
        padding: 11px 15px 11px 23px;
        font-size: 17px;
    }
    .cta-note {
        max-width: 300px;
        font-size: 13px;
    }
    .hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        bottom: 20px;
    }
    .hero-bottom p {
        gap: 10px;
        margin: 0;
        font-size: 12px;
    }
    .hero-bottom a {
        gap: 12px;
        padding: 5px 7px 5px 13px;
        font-size: 13px;
    }
    .hero-bottom a>svg {
        width: 27px;
        height: 27px;
        padding: 4px;
    }
    .possibilities {
        border-radius: 22px;
        margin: 18px 4% 0;
        display: block;
    }
    .section-intro {
        padding: 28px 23px;
    }
    .section-intro .eyebrow {
        letter-spacing: .5px;
        align-items: center;
        font-size: 11px;
    }
    .section-intro h2 {
        font-size: 39px;
    }
    .section-intro>p:not(.eyebrow) {
        font-size: 16px;
    }
    .invitations {
        margin-top: 0;
        display: flex;
    }
    .invitation {
        padding: 25px 23px;
    }
    .invitation:last-child {
        border-top: 3px solid #101010;
        border-left: 0;
    }
    .invitation-heading {
        font-size: 28px;
    }
    .invitation-heading>svg {
        width: 34px;
        height: 34px;
    }
    footer {
        border-radius: 22px;
        gap: 17px;
        margin: 16px 4% 20px;
        padding: 22px;
    }
    footer>span {
        max-width: 220px;
        font-size: 14px;
    }
    footer>div {
        gap: 15px;
    }
    footer button {
        font-size: 13px;
    }
    footer small {
        margin-left: 0;
    }
    .site-dialog {
        padding: 28px 22px!important;
    }
    .site-dialog .dialog-title {
        font-size: 31px;
    }
    .role-options label {
        gap: 6px;
        padding: 10px 8px;
        font-size: 13px;
    }
    .site-dialog form {
        gap: 17px;
    }
}

@media (prefers-reduced-motion:reduce) {
    button, a {
        transition: none!important;
    }
}

@media (max-width:360px) {
    .brand .logo-window {
        width: 82px;
    }
    .navigation {
        gap: 8px;
        padding: 13px 10px;
    }
    .navigation button {
        padding: 8px;
        font-size: 11px;
    }
    .navigation nav {
        gap: 5px;
    }
    .role-options {
        gap: 5px!important;
    }
    .role-options label {
        padding: 9px 6px;
        font-size: 12px;
    }
}

.character-cta {
    isolation: isolate;
    margin-top: 20px;
    display: inline-block;
    position: relative;
}

.character-cta>.primary {
    background: #447596;
    position: relative;
}

@media (max-width:700px) {
    .hero .intro {
        z-index: 1;
        position: relative;
    }
}

.hero-art {
    object-position: right center;
}

@media (max-width:700px) {
    .hero-art {
        object-position: right bottom;
        height: 66%;
        inset: auto 0 0;
        -webkit-mask-image: linear-gradient(#0000,#000 18%);
        mask-image: linear-gradient(#0000,#000 18%);
    }
}

/* The four hiding scenes (#discoveries). */

.hiding-scenes {
    background: #5b3975;
    position: relative;
}

.hiding-sequence {
    --hide: 1;
    --studio: #5b3975;
    --studio-light: #9272ac;
    --studio-dark: #30203f;
    height: 130svh;
    position: relative;
}

.hiding-toast {
    --studio: #9e005d;
    --studio-light: #d63564;
    --studio-dark: #4e0835;
}

.hiding-spanner {
    --studio: #447596;
    --studio-light: #6ca7ad;
    --studio-dark: #295878;
}

.hiding-key {
    --studio: #fa0;
    --studio-light: #ffd982;
    --studio-dark: #b7730a;
}

.hiding-sticky {
    isolation: isolate;
    background: radial-gradient(ellipse at 88% 26%,var(--studio-light) 0%,transparent 53%),linear-gradient(118deg,var(--studio-dark),var(--studio) 66%);
    height: 100svh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.hiding-sticky:before {
    content: "";
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(at 90% 95%,#0005,#0000 48%),linear-gradient(#0000 70%,#0002);
    position: absolute;
    inset: 0;
}

.hiding-sticky:after {
    content: "";
    filter: blur(45px);
    pointer-events: none;
    z-index: -1;
    background: #0005;
    border-radius: 50%;
    width: 64%;
    height: 34%;
    position: absolute;
    bottom: -13%;
    right: -16%;
    transform: rotate(-14deg);
}

.hiding-heading {
    z-index: 2;
    pointer-events: none;
    width: 43%;
    max-width: 700px;
    position: absolute;
    top: 48%;
    left: 8%;
    transform: translateY(-50%);
}

.hiding-heading>p:first-child {
    letter-spacing: 2px;
    color: #fff9;
    margin: 0 0 24px;
    font-size: 12px;
    font-weight: 700;
}

.hiding-heading h2 {
    letter-spacing: -.05em;
    color: #fff;
    text-wrap: balance;
    max-width: 650px;
    margin: 0;
    font-size: clamp(40px,5.4vw,88px);
    font-weight: 800;
    line-height: 1.05;
}

.hiding-heading .hiding-copy {
    letter-spacing: 0;
    color: #fffffff0;
    text-wrap: pretty;
    max-width: 510px;
    margin: 28px 0 0;
    font-size: clamp(17px,1.45vw,23px);
    font-weight: 400;
    line-height: 1.65;
}

.hiding-key .hiding-heading h2 {
    color: #251900;
}

.hiding-key .hiding-heading>p:first-child, .hiding-key .hiding-copy, .hiding-key .hiding-bottom {
    color: #3e2803;
}

.hiding-art {
    width: 78%;
    height: 90%;
    transform: scale(calc(1 + var(--hide)*.018));
    transform-origin: 100% 70%;
    pointer-events: none;
    display: block;
    position: absolute;
    bottom: 2%;
    right: -10%;
    overflow: visible;
}

.hiding-key .hiding-art {
    width: 58%;
    height: 78%;
    bottom: 5%;
    right: -10%;
}

.foreground-object {
    filter: drop-shadow(-30px 35px 26px #0005);
}

.moving-cat {
    transform: translateX(calc(var(--hide)*115px)) rotate(calc(-35deg + var(--hide)*35deg));
    transform-origin: 800px 840px;
}

.moving-toast {
    transform: translate(calc(13px + var(--hide)*137px),calc(var(--hide)*130px)) rotate(calc(-12deg + var(--hide)*36deg));
    transform-origin: 680px 785px;
}

.moving-spanner {
    transform: rotate(calc(-28.5deg + var(--hide)*39.5deg));
    transform-origin: 680px 830px;
}

.moving-key {
    transform: translateY(calc(-39px + var(--hide)*212px)) rotate(calc(-5deg + var(--hide)*5deg));
    transform-origin: 530px 640px;
}

.cat-settle {
    transform-origin: 750px 680px;
}

.toast-settle {
    transform-origin: 660px 670px;
}

.has-peeked .cat-settle {
    animation: .85s ease-out both peek-settle;
}

.has-peeked .toast-settle {
    animation: .7s ease-out both peek-settle;
}

@keyframes peek-settle {
    0% {
        transform: rotate(0);
    }
    35% {
        transform: rotate(-1.4deg);
    }
    70% {
        transform: rotate(.45deg);
    }
    to {
        transform: rotate(0);
    }
}

.hiding-bottom {
    color: #fffc;
    z-index: 3;
    align-items: center;
    gap: 28px;
    font-size: 13px;
    display: flex;
    position: absolute;
    bottom: 5%;
    left: 8%;
    right: 8%;
}

.hiding-bottom>span:first-child {
    align-items: center;
    gap: 12px;
    display: flex;
}

.hiding-bottom>span:last-child {
    white-space: nowrap;
}

.hiding-progress {
    background: #ffffff40;
    flex: 1;
    max-width: 180px;
    height: 2px;
    margin-left: auto;
    overflow: hidden;
}

.hiding-progress i {
    width: 100%;
    height: 100%;
    transform: scaleX(calc(1 - var(--hide)));
    transform-origin: 0;
    background: #fff;
    display: block;
}

.hiding-key .hiding-progress {
    background: #3e280330;
}

.hiding-key .hiding-progress i {
    background: #3e2803;
}

@media (max-width:700px) {
    .hiding-sequence {
        height: 130svh;
    }
    .hiding-heading {
        width: 86%;
        max-width: 480px;
        top: 9%;
        left: 7%;
        transform: none;
    }
    .hiding-heading>p:first-child {
        letter-spacing: 1.5px;
        margin-bottom: 16px;
        font-size: 12px;
    }
    .hiding-heading h2 {
        max-width: 400px;
        font-size: clamp(34px,8.8vw,55px);
    }
    .hiding-heading .hiding-copy {
        max-width: 380px;
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.55;
    }
    .hiding-art {
        width: 125%;
        height: 54%;
        bottom: 0;
        right: -28%;
    }
    .hiding-key .hiding-art {
        width: 110%;
        height: 52%;
        bottom: 4%;
        right: -25%;
    }
    .hiding-sticky:after {
        width: 100%;
        height: 26%;
        right: -40%;
    }
    .hiding-bottom {
        gap: 14px;
        font-size: 12px;
        bottom: 3%;
        left: 7%;
        right: 7%;
    }
    .hiding-progress {
        max-width: 100px;
    }
}

@media (max-height:740px) and (max-width:700px) {
    .hiding-heading {
        top: 7%;
    }
    .hiding-heading h2 {
        font-size: 34px;
    }
    .hiding-heading .hiding-copy {
        margin-top: 15px;
        line-height: 1.5;
    }
    .hiding-art {
        height: 46%;
    }
    .hiding-key .hiding-art {
        height: 45%;
    }
}

@media (max-height:600px) and (min-width:701px) {
    .hiding-heading h2 {
        font-size: clamp(32px,4.5vw,52px);
    }
    .hiding-heading .hiding-copy {
        margin-top: 16px;
        font-size: 16px;
    }
    .hiding-heading>p:first-child {
        margin-bottom: 14px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .hiding-sequence {
        height: auto;
        --hide: 0!important;
    }
    .hiding-sticky {
        height: 100svh;
        min-height: 740px;
        position: relative;
    }
    .hiding-art {
        transform: none;
    }
    .hiding-bottom {
        display: none;
    }
}

/* The radio dot and the tick: after the rules above, whose background shorthand would clear them. */
.site-dialog .radio:checked { background-image: radial-gradient(circle, #101010 0 4px, transparent 4.5px); }
.consent .checkbox:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }

/* App touches: the app's sticker press on buttons (ink border, hard ink shadow), and the hero's
   lamp-lit dust (hero-fx.js), drawn under the navigation and the intro and faded out towards the top. */

.navigation button, .hero-bottom a, .text-link {
    box-shadow: 0 3px #101010;
}

:is(.navigation button, .hero-bottom a, .text-link):hover {
    transform: translateY(-2px);
    box-shadow: 0 5px #101010;
}

:is(.navigation button, .hero-bottom a, .text-link, .invitation-number):active {
    transform: translateY(2px);
    box-shadow: 0 1px #101010;
}

.invitation-number {
    box-shadow: 0 3px #101010;
}

.invitation-heading > svg, .text-link > svg, .primary > svg:not(.spin) {
    transition: transform .25s cubic-bezier(.3, 1.6, .6, 1), background .2s;
}

:is(.invitation, .text-link, .primary):hover :is(.invitation-heading > svg, svg) {
    background: #ffb52c;
    transform: rotate(45deg) scale(1.08);
}

.eyebrow > svg {
    animation: twinkle 4s ease-in-out infinite;
}

.hero-fx {
    z-index: -1;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
    -webkit-mask-image: linear-gradient(#0000 0 170px, #000 340px);
    mask-image: linear-gradient(#0000 0 170px, #000 340px);
}

.hero-fx.is-ready {
    opacity: 1;
}

@keyframes twinkle {
    0%, 70%, 100% { transform: scale(1) rotate(0); }
    82% { transform: scale(1.3) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
    .eyebrow > svg {
        animation: none;
    }
}

/* Scene moments (the hiding scenes): the heading rises in as a scene arrives (.is-in); once its
   character has peeked out (.has-peeked) it settles and idles, and a glint sweeps over the object
   it hides behind. The toast scene's
   machine steams and the wheel rolls in as you scroll. */

.shared-defs {
    position: absolute;
    overflow: hidden;
}

.hiding-scenes.is-animated .hiding-heading > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}

.hiding-scenes.is-animated .is-in .hiding-heading > * {
    opacity: 1;
    transform: none;
}

.hiding-scenes.is-animated .is-in .hiding-heading > :nth-child(2) {
    transition-delay: .1s;
}

.hiding-scenes.is-animated .is-in .hiding-heading > :nth-child(3) {
    transition-delay: .22s;
}

.sheen {
    pointer-events: none;
}

.sheen-band {
    transform-box: fill-box;
    transform: translateX(-100%);
}

.has-peeked .sheen-band {
    animation: sheen 6s ease-in-out .9s infinite;
}

.has-peeked .cat-settle {
    animation: .85s ease-out both peek-settle, 5s ease-in-out 1.6s infinite idle-tilt;
}

.has-peeked .toast-settle {
    animation: .7s ease-out both peek-settle, 3.4s ease-in-out 1.4s infinite toast-hop;
}

.spanner-settle {
    transform-origin: 640px 820px;
}

.has-peeked .spanner-settle {
    animation: 1s ease-out both spanner-wave, 4.6s ease-in-out 1.8s infinite idle-tilt;
}

.key-settle {
    transform-origin: 530px 860px;
}

.has-peeked .key-settle {
    animation: 1.1s ease-in-out .1s both key-jiggle, 3.8s ease-in-out 1.6s infinite idle-bob;
}

.wheel-roll {
    transform: rotate(calc(var(--hide) * -70deg));
    transform-origin: 1015px 550px;
}

.steam circle {
    fill: #fff;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: steam 3.6s ease-out calc(var(--i) * 1.2s) infinite paused;
}

.is-in .steam circle {
    animation-play-state: running;
}

@keyframes sheen {
    0% { transform: translateX(-100%); }
    30%, 100% { transform: translateX(100%); }
}

@keyframes idle-tilt {
    50% { transform: rotate(-1.6deg); }
}

@keyframes toast-hop {
    0%, 58%, 100% { transform: translateY(0) scale(1); }
    68% { transform: translateY(0) scale(1.04, .96); }
    80% { transform: translateY(-16px) scale(.98, 1.03); }
    91% { transform: translateY(0) scale(1.03, .97); }
}

@keyframes spanner-wave {
    25% { transform: rotate(-7deg); }
    50% { transform: rotate(5deg); }
    75% { transform: rotate(-2.5deg); }
}

@keyframes key-jiggle {
    15% { transform: rotate(-9deg); }
    35% { transform: rotate(7deg); }
    55% { transform: rotate(-4.5deg); }
    75% { transform: rotate(2deg); }
}

@keyframes idle-bob {
    50% { transform: translateY(-9px); }
}

@keyframes steam {
    0% { opacity: 0; transform: translate(0, 0) scale(.4); }
    25% { opacity: .6; }
    100% { opacity: 0; transform: translate(-36px, -200px) scale(2); }
}

@media (prefers-reduced-motion: reduce) {
    .hiding-scenes.is-animated .hiding-heading > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .steam {
        display: none;
    }
}

/* The Join Wainhom form: the app's sticker shadow on its fields, and one focus style for every
   control (the border turns purple and glows) in place of the ink border plus a purple or gold
   outline drawn beside it. */

.site-dialog input:not([type=checkbox], [type=radio]), .site-dialog textarea {
    box-shadow: 0 3px #101010;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.site-dialog input:not([type=checkbox], [type=radio]):hover, .site-dialog textarea:hover {
    background: #fffdf5;
}

.site-dialog :is(input, textarea):focus-visible, .site-dialog label > input:focus-visible, .site-dialog textarea:focus-visible {
    outline: none;
}

.site-dialog input:not([type=checkbox], [type=radio]):focus, .site-dialog textarea:focus {
    background: #fff;
    border-color: #65438f;
    box-shadow: 0 3px #65438f, 0 0 0 5px #65438f2e;
}

.role-options label {
    box-shadow: 0 3px #101010;
    transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}

.role-options label:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px #101010;
}

.role-options label:has(.radio:checked) {
    transform: translateY(2px);
    box-shadow: 0 1px #101010;
}

.role-options label:has(.radio:focus-visible) {
    box-shadow: 0 3px #101010, 0 0 0 5px #65438f40;
}

.role-options label:has(.radio:checked:focus-visible) {
    box-shadow: 0 1px #101010, 0 0 0 5px #65438f40;
}

.consent .checkbox {
    transition: background-color .15s, box-shadow .15s;
}

.consent .checkbox:focus-visible {
    border-color: #65438f;
    box-shadow: 0 0 0 4px #65438f40;
}

.consent button:focus-visible {
    border-radius: 4px;
    outline: 3px solid #65438f;
    outline-offset: 2px;
}

.site-dialog .dialog-close {
    transition: transform .2s cubic-bezier(.3, 1.6, .6, 1);
}

.site-dialog .dialog-close:hover {
    transform: rotate(90deg);
}

/* The Join Wainhom success state: the gold badge pops in, the tick draws itself,
   and the rest rises in after it. Every animation replays each time the state is shown (it is
   hidden between). The About dialog opens the same way: its content rises in one piece after
   another and its list bullets pop in as small gold stickers. */

.success {
    flex-direction: column;
    align-items: center;
    padding: 8px 0 4px;
    display: flex;
}

.success[hidden] {
    display: none;
}

.success-badge {
    width: 92px;
    height: 92px;
    margin: 10px auto 22px;
    position: relative;
}

.success-check {
    z-index: 1;
    background: #ffb52c;
    border: 3px solid #101010;
    border-radius: 50%;
    place-items: center;
    width: 100%;
    height: 100%;
    display: grid;
    position: relative;
    box-shadow: 0 5px #101010;
    animation: badge-pop .55s cubic-bezier(.3, 1.6, .5, 1) both;
}

.success-check svg {
    fill: none;
    stroke: #101010;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.success-check path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw-check .45s ease-out .4s forwards;
}

.success > p {
    margin: 0 0 26px;
}

.success > :is(p, .primary) {
    animation: rise .5s cubic-bezier(.2, .8, .2, 1) both;
}

.success > p { animation-delay: .5s; }
.success > .primary { animation-delay: .62s; }

.is-sent :is(.dialog-title, .dialog-description) {
    animation: rise .5s cubic-bezier(.2, .8, .2, 1) both;
}

.is-sent .dialog-description {
    animation-delay: .08s;
}

#dialog-about[open] > :not(.dialog-close, .prose), #dialog-about[open] .prose > :not(ul), #dialog-about[open] li {
    animation: rise .5s cubic-bezier(.2, .8, .2, 1) both;
}

#dialog-about[open] > .dialog-description { animation-delay: .06s; }
#dialog-about[open] .prose > p:first-child { animation-delay: .14s; }
#dialog-about[open] li:nth-child(1) { animation-delay: .22s; }
#dialog-about[open] li:nth-child(2) { animation-delay: .3s; }
#dialog-about[open] li:nth-child(3) { animation-delay: .38s; }
#dialog-about[open] .prose > p:last-child { animation-delay: .48s; }
#dialog-about[open] > .primary { animation-delay: .58s; }

#dialog-about .prose ul {
    padding-left: 0;
    list-style: none;
}

#dialog-about li {
    align-items: center;
    gap: 12px;
    display: flex;
}

#dialog-about li::before {
    content: "";
    background: #ffb52c;
    border: 2px solid #101010;
    border-radius: 50%;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    box-shadow: 0 2px #101010;
    animation: badge-pop .45s cubic-bezier(.3, 1.6, .5, 1) both;
    animation-delay: inherit;
}

#dialog-about .prose > p:last-child {
    color: #101010;
    font-weight: 800;
}

@keyframes badge-pop {
    0% { transform: scale(0) rotate(-25deg); }
    60% { transform: scale(1.12) rotate(6deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes draw-check {
    to { stroke-dashoffset: 0; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
}

@media (prefers-reduced-motion: reduce) {
    .success-check, .success > :is(p, .primary), .is-sent :is(.dialog-title, .dialog-description) {
        animation: none;
    }
    .success-check path {
        animation: none;
        stroke-dashoffset: 0;
    }
    #dialog-about[open] > :not(.dialog-close), #dialog-about[open] .prose > *, #dialog-about[open] li, #dialog-about li::before {
        animation: none;
    }
}