:root {
    color-scheme:light dark;
    --paper:light-dark(#f8f5ef,#18171e);
    --ink:light-dark(#292b27,#f0ecf6);
    --muted:light-dark(#666860,#bcb5c8);
    --purple:light-dark(#6650a5,#c2a5f3);
    --line:light-dark(#e3e0d7,#41394d);
    --lavender:light-dark(#e8e0f5,#30263e);
    --surface:light-dark(#fffdf8,#211e29);
    --field:light-dark(#ffffff,#19161f);
    --field-border:light-dark(#b9b5ad,#756984);
    --selected:light-dark(#f0eaf8,#3a2b4c);
    --panel-border:light-dark(#d9cde7,#514161);
    --button-bg:light-dark(#6650a5,#9a75d0);
    --button-hover:light-dark(#503c88,#b18ae5);
    --button-ink:light-dark(#ffffff,#160e22);
    --error:light-dark(#862b2b,#ffb7ae);
    --error-border:light-dark(#a63838,#da8a81);
    --knight-glow:light-dark(#fffdf8cc,#c2a5f32b);
    --knight-glow-edge:light-dark(#fffdf844,#c2a5f308);
    --radius:24px;
}

:root[data-theme="light"] {
    color-scheme:light;
}

:root[data-theme="dark"] {
    color-scheme:dark;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:28px;
    overflow-x:clip;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}

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

button,input,select,textarea {
    font:inherit;
}

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

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid var(--purple);
    outline-offset:6px;
}

::selection {
    background:var(--lavender);
}

.page-shell {
    max-width:1280px;
    padding:0 64px;
    margin:auto;
}

.skip-link {
    position:absolute;
    top:-80px;
    left:20px;
    background:var(--ink);
    color:var(--paper);
    padding:14px;
    z-index:10;
}

.skip-link:focus {
    top:12px;
}

.site-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:30px 0;
    border-bottom:1px solid var(--line);
}

.brand {
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    font-size:23px;
    font-weight:800;
    letter-spacing:-1px;
}

.brand-icon {
    font-size:34px;
    margin-right:9px;
    color:var(--purple);
}

.brand-dot {
    color:var(--purple);
}

nav {
    display:flex;
    align-items:center;
    gap:32px;
    font-size:13px;
    font-weight:600;
}

nav>a:not(.button):hover {
    color:var(--purple);
}

.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    padding:18px 25px;
    border-radius:9px;
    background:var(--button-bg);
    color:var(--button-ink);
    font-size:14px;
    font-weight:650;
    box-shadow:0 5px 0 #4e3c8012;
    transition:background .2s,transform .2s;
}

.button:hover {
    background:var(--button-hover);
    transform:translateY(-2px);
}

.button span {
    font-size:22px;
    line-height:1;
}

.button-small {
    padding:13px 19px;
    gap:18px;
    font-size:12px;
}

.theme-toggle:not([hidden]) {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    min-height:44px;
    padding:8px;
    border:1px solid var(--field-border);
    border-radius:9px;
    background:var(--surface);
    color:var(--ink);
    font-size:12px;
    cursor:pointer;
}

.theme-toggle:hover {
    background:var(--lavender);
}

.theme-toggle [data-theme-icon] {
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    line-height:0;
}

.theme-toggle [data-theme-icon] svg {
    display:block;
    width:24px;
    height:24px;
}

.site-header nav > a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    text-align:center;
    line-height:1;
}

.site-header .button-small {
    height:44px;
    padding:0 16px;
}

.site-header .button span {
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
}

.site-header .theme-toggle:not([hidden]) {
    height:44px;
    flex-shrink:0;
}

.site-header .brand-icon {
    display:grid;
    place-items:center;
    line-height:1;
}

.questionnaire-form input::placeholder {
    color:var(--muted);
    opacity:1;
}

@media(max-width:540px) {
    .site-header nav {
        gap:10px;
        flex-wrap:wrap;
    }
}

.hero {
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:16px;
    align-items:center;
    min-height:630px;
    padding:65px 0 70px;
}

.hero-copy,.discovery-copy {
    min-width:0;
}

h1,h2,h3 {
    overflow-wrap:anywhere;
    hyphens:auto;
}

.eyebrow {
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
    color:var(--purple);
    margin:0 0 22px;
    line-height:1.8;
}

.tiny-star {
    font-size:18px;
    vertical-align:middle;
    margin-right:7px;
}

h1,h2,h3,p {
    margin-top:0;
}

h1 {
    font-size:clamp(38px,4.5vw,60px);
    line-height:1.08;
    letter-spacing:-3.8px;
    font-weight:750;
    margin-bottom:27px;
}

.handwritten {
    color:var(--purple);
    font-family:Georgia,serif;
    font-weight:400;
    font-style:italic;
    letter-spacing:-3px;
    position:relative;
}

.handwritten:after {
    content:"";
    position:absolute;
    bottom:-9px;
    left:0;
    width:97%;
    height:9px;
    border-top:2px solid #c7b6df;
    border-radius:50%;
    transform:rotate(-2deg);
}

.hero-description {
    max-width:380px;
    font-size:16px;
    line-height:1.85;
    color:var(--muted);
    margin-bottom:30px;
}

.hero-note {
    margin:18px 0 0;
    font-size:11px;
    color:var(--muted);
}

.hero-note span {
    color:var(--purple);
    margin-right:6px;
}

.hero-art {
    height:440px;
    position:relative;
    isolation:isolate;
}

.hero-art:before {
    content:"";
    position:absolute;
    inset:10px 0 0;
    background:#eee7f3;
    border-radius:48% 52% 43% 57% / 53% 42% 58% 47%;
    transform:rotate(-9deg);
    z-index:-2;
}

.orbit {
    position:absolute;
    inset:0 -10px 5px;
    border:1px dashed #c8bad9;
    border-radius:50%;
    transform:rotate(20deg);
    z-index:-1;
}

.chessboard {
    display:grid;
    grid-template-columns:repeat(8,1fr);
    position:absolute;
    width:310px;
    height:310px;
    top:94px;
    left:50%;
    transform:translateX(-50%) rotate(-14deg) skew(10deg,5deg) scaleY(.71);
    border:9px solid #7f68a0;
    border-radius:7px;
    box-shadow:-5px 9px 0 #67517f,-11px 22px 24px #57436b25;
    overflow:hidden;
}

.square.light {
    background:#ece5f4;
}

.square.dark {
    background:#aa93c4;
}

.art-piece {
    position:absolute;
    font-family:Georgia,"DejaVu Sans",serif;
    line-height:1;
    filter:drop-shadow(5px 12px 3px #392d4a25);
}

.piece-knight {
    font-size:220px;
    color:#fffdf5;
    top:74px;
    left:32%;
    text-shadow:2px 3px #c8c1d0,-1px -1px white;
    transform:rotate(-9deg);
}

.piece-pawn {
    font-size:109px;
    color:#e8aa73;
    top:214px;
    left:14%;
    transform:rotate(-12deg);
    text-shadow:2px 2px #a96b43;
}

.piece-rook {
    font-size:104px;
    color:#75619d;
    top:155px;
    right:9%;
    transform:rotate(8deg);
    text-shadow:2px 2px #4f3b74;
}

.floating-label {
    position:absolute;
    z-index:2;
    background:var(--surface);
    border:1px solid #eee8e0;
    border-radius:9px;
    padding:13px 16px;
    box-shadow:0 8px 20px #3e31540a;
    font-size:11px;
    font-weight:600;
    max-width:90%;
}

.label-top {
    top:29px;
    left:10%;
    transform:rotate(-7deg);
}

.label-top span {
    color:var(--purple);
    font-size:21px;
    vertical-align:middle;
    margin-left:9px;
}

.label-bottom {
    bottom:15px;
    right:1%;
    transform:rotate(6deg);
}

.label-heart {
    font-size:22px;
    color:var(--purple);
    vertical-align:middle;
    margin-right:8px;
}

.art-spark {
    position:absolute;
    color:var(--purple);
}

.spark-one {
    font-size:53px;
    right:2%;
    top:7px;
    transform:rotate(14deg);
}

.spark-two {
    font-size:30px;
    left:0;
    bottom:62px;
    color:#db9c5c;
}

.art-dots {
    position:absolute;
    right:-8px;
    bottom:64px;
    line-height:10px;
    font-size:27px;
    letter-spacing:5px;
    color:#a893c1;
}

.values-strip {
    border-block:1px solid var(--line);
    padding:24px 5px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    font-size:11px;
    font-weight:600;
    color:#62645d;
}

.values-strip [aria-hidden] {
    color:#ad9cbd;
    font-size:18px;
}

.section {
    padding:88px 0;
}

.section-heading {
    text-align:center;
    max-width:540px;
    margin:0 auto 38px;
}

h2 {
    font-size:42px;
    line-height:1.16;
    letter-spacing:-1.8px;
    font-weight:700;
    margin-bottom:18px;
}

.section-heading .eyebrow {
    margin-bottom:14px;
}

.section-heading>p:last-child,.discovery-copy>p:not(.eyebrow) {
    font-size:14px;
    line-height:1.85;
    color:var(--muted);
}

.benefit-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.benefit-card {
    padding:29px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
}

.card-icon {
    display:grid;
    place-items:center;
    width:47px;
    height:47px;
    border-radius:15px;
    font-size:31px;
    margin-bottom:24px;
}

.lavender {
    background:#ede5f7;
    color:var(--purple);
}

.peach {
    background:#fae6d4;
    color:#a6643c;
}

.green {
    background:#e3ebda;
    color:#64764d;
}

h3 {
    font-size:18px;
    letter-spacing:-.4px;
    margin-bottom:12px;
}

.benefit-card p {
    font-size:13px;
    line-height:1.9;
    color:var(--muted);
    margin-bottom:26px;
}

.card-number {
    font-size:9px;
    font-weight:700;
    letter-spacing:1.6px;
    color:#77786f;
}

.discovery {
    display:grid;
    grid-template-columns:1fr 1.2fr;
    align-items:center;
    gap:65px;
    padding:50px 65px;
    background:#eeece4;
    border-radius:var(--radius);
}

.piece-preview {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle,#e1d7ed 0 55%,transparent 55.5%);
    min-height:320px;
}

.piece-preview>span:first-child {
    font-size:220px;
    line-height:1.1;
    font-family:Georgia,"DejaVu Sans",serif;
    color:var(--purple);
    filter:drop-shadow(6px 10px 0 #d1c4df);
}

.piece-caption {
    font-size:9px;
    letter-spacing:2px;
    font-weight:700;
    margin-top:24px;
    color:var(--purple);
}

.discovery-copy .eyebrow {
    margin-bottom:12px;
}

.discovery h2 {
    font-size:35px;
}

.piece-picker {
    display:flex;
    gap:8px;
    margin:22px 0 18px;
}

.piece-picker button {
    width:43px;
    height:46px;
    background:#faf8f3;
    border:1px solid #d7d3ca;
    border-radius:8px;
    color:#60576d;
    font-size:29px;
    cursor:pointer;
    transition:transform .2s,background .2s;
}

.piece-picker button:hover {
    transform:translateY(-3px);
}

.piece-picker button[aria-pressed=true] {
    background:var(--purple);
    border-color:var(--purple);
    color:white;
}

.piece-story {
    min-height:95px;
}

.piece-story h3 {
    font-size:14px;
    margin-bottom:6px;
}

.piece-story p {
    font-size:12px;
    line-height:1.75;
    color:var(--muted);
    margin-bottom:0;
}

.interest {
    position:relative;
    text-align:center;
    margin:80px 0 0;
    background:#eae2f4;
    border-radius:var(--radius);
    padding:65px 25px;
    overflow:hidden;
}

.interest h2 {
    font-size:46px;
}

.interest>p:not(.eyebrow) {
    color:var(--muted);
    font-size:14px;
    line-height:1.85;
}

.interest .eyebrow {
    margin-bottom:16px;
}

.interest-doodle {
    position:absolute;
    left:35px;
    bottom:-40px;
    font-size:210px;
    transform:rotate(-18deg);
    color:#dacdea;
    pointer-events:none;
}

.coming-soon {
    position:relative;
    display:inline-flex;
    gap:10px;
    align-items:center;
    background:#fffcf7;
    border:1px solid var(--panel-border);
    padding:17px 23px;
    border-radius:9px;
    font-size:13px;
    font-weight:650;
    margin-top:10px;
}

.status-dot {
    width:7px;
    height:7px;
    background:var(--purple);
    border-radius:50%;
}

.interest .privacy-note {
    position:relative;
    font-size:10px!important;
    margin:16px 0 0;
}

.questionnaire-form {
    position:relative;
    max-width:820px;
    margin:32px auto 0;
    padding:32px;
    border:1px solid var(--panel-border);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:0 12px 32px #392d4a08;
    text-align:left;
    overflow-wrap:anywhere;
}

fieldset.form-step,.form-step fieldset {
    min-width:0;
    padding:0;
    border:0;
}

.form-step {
    margin:0 0 30px;
}

.form-step legend {
    width:100%;
    padding:0;
    margin-bottom:18px;
    font-size:18px;
    font-weight:700;
    line-height:1.5;
}

.step-number {
    display:inline-grid;
    place-items:center;
    width:32px;
    height:32px;
    margin-right:8px;
    border-radius:50%;
    background:var(--lavender);
    color:var(--purple);
    font-size:14px;
    vertical-align:middle;
}

.age-options {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.age-option,.school-option {
    position:relative;
    min-width:0;
}

/* Keep native radio keyboard navigation and screen-reader semantics. */
.age-option input[type=radio],.school-option input[type=radio] {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

.age-card,.school-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    height:100%;
    padding:22px 12px;
    border:2px solid var(--line);
    border-radius:16px;
    background:var(--paper);
    text-align:center;
    cursor:pointer;
    transition:border-color .2s,background .2s,box-shadow .2s;
}

.age-card:hover,.school-card:hover {
    border-color:#b29acb;
}

.age-option input[type=radio]:checked + .age-card,
.school-option input[type=radio]:checked + .school-card {
    border-color:var(--purple);
    background:var(--selected);
    box-shadow:inset 0 0 0 1px var(--purple);
}

.age-option input[type=radio]:focus-visible + .age-card,
.school-option input[type=radio]:focus-visible + .school-card {
    outline:3px solid var(--purple);
    outline-offset:4px;
}

.age-option input[type=radio]:disabled + .age-card,
.school-option input[type=radio]:disabled + .school-card {
    opacity:.6;
    cursor:not-allowed;
}

.age-icon {
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    border-radius:20px;
    background:var(--lavender);
    color:var(--purple);
}

.age-icon svg {
    display:block;
    width:44px;
    height:44px;
}

.age-title {
    font-size:15px;
    font-weight:750;
    line-height:1.4;
}

.age-subtitle {
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
}

.school-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.school-card {
    position:relative;
    flex-direction:row;
    gap:16px;
    padding:20px 32px 20px 18px;
    text-align:left;
}

.school-crest {
    display:grid;
    place-items:center;
    flex:0 0 68px;
    height:84px;
    border-radius:12px;
    background:#fffdf8;
}

.school-crest img {
    display:block;
    object-fit:contain;
}

.school-copy {
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.school-town {
    color:var(--purple);
    font-size:15px;
    font-weight:750;
}

.school-name {
    font-size:12px;
    line-height:1.65;
    color:var(--muted);
}

.school-check {
    position:absolute;
    top:10px;
    right:10px;
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border:1px solid var(--field-border);
    border-radius:50%;
    color:transparent;
    font-size:12px;
}

.school-option input:checked + .school-card .school-check {
    background:var(--button-bg);
    border-color:var(--button-bg);
    color:var(--button-ink);
}

.school-option input[aria-invalid=true] + .school-card {
    border-color:var(--error-border);
}

.credits-dialog {
    width:min(620px,calc(100% - 32px));
    max-height:calc(100dvh - 48px);
    padding:28px;
    border:1px solid var(--panel-border);
    border-radius:var(--radius);
    background:var(--surface);
    color:var(--ink);
    box-shadow:0 24px 80px #00000040;
    text-align:left;
}

.credits-dialog::backdrop {
    background:#14101ecc;
    backdrop-filter:blur(4px);
}

.credits-dialog-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.credits-dialog h2 {
    margin:0;
    font-size:24px;
    letter-spacing:-.7px;
    line-height:1.3;
}

.credits-dialog p,.credits-dialog li {
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
}

.credits-dialog ul {
    padding-left:20px;
    margin:0;
}

.credits-dialog li + li {
    margin-top:12px;
}

.credits-dialog a,.footer-link {
    color:var(--purple);
    text-decoration:underline;
    text-underline-offset:3px;
}

.dialog-close {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--paper);
    color:var(--ink);
    font-size:26px;
    line-height:1;
    cursor:pointer;
}

.dialog-close:hover {
    background:var(--lavender);
}

html:has(.credits-dialog[open]) {
    overflow:hidden;
}

@media(max-width:650px) {
    .school-options {
        grid-template-columns:1fr;
    }
}

.contact-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.contact-grid>*,.school-field {
    min-width:0;
}

.questionnaire-form label:not(.age-card):not(.school-card) {
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:650;
    line-height:1.6;
}

.school-field select,.questionnaire-form input:not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=submit]),.questionnaire-form textarea {
    display:block;
    width:100%;
    min-width:0;
    min-height:48px;
    padding:12px 14px;
    border:1px solid var(--field-border);
    border-radius:9px;
    background:var(--field);
    color:var(--ink);
    font-size:16px;
    line-height:1.5;
}

.questionnaire-form input:focus-visible,.questionnaire-form select:focus-visible,.questionnaire-form textarea:focus-visible {
    outline:3px solid var(--purple);
    outline-offset:3px;
}

.questionnaire-form [aria-invalid=true] {
    border-color:var(--error-border)!important;
}

.field-help,.form-privacy {
    margin:8px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.8;
}

.form-errors,.form-notice,.form-success {
    margin:0 0 24px;
    padding:16px 20px;
    border:1px solid;
    border-radius:12px;
    font-size:14px;
    line-height:1.8;
}

.form-errors {
    color:var(--error);
    background:light-dark(#fff0ec,#3c252a);
    border-color:light-dark(#d9a39a,#9e655f);
}

.form-notice {
    color:light-dark(#594574,#d4bfe9);
    background:var(--selected);
    border-color:var(--panel-border);
}

.form-success {
    color:light-dark(#35572e,#c1e3ad);
    background:light-dark(#edf4e8,#243323);
    border-color:light-dark(#a7bf99,#5f8152);
}

.thank-you {
    text-align:center;
    position:relative;
    isolation:isolate;
    overflow:clip;
    padding:48px 24px;
    border:1px solid var(--panel-border);
    border-radius:var(--radius);
    background:radial-gradient(ellipse at 50% 0, var(--lavender), transparent 65%), var(--surface);
    box-shadow:0 12px 40px #392d4a0c;
}

.thank-you:focus {
    outline:none;
}

.thank-you:focus-visible {
    outline:3px solid var(--purple);
    outline-offset:5px;
}

.thank-you-check {
    display:grid;
    place-items:center;
    width:136px;
    height:136px;
    margin:0 auto 24px;
    border-radius:50%;
    color:light-dark(#417446,#a9d79b);
    background:light-dark(#e5f0df,#283d28);
    box-shadow:0 0 0 10px light-dark(#e5f0df55,#a9d79b0d);
}

.thank-you-check svg {
    width:112px;
    height:112px;
}

.thank-you .eyebrow {
    margin-bottom:12px;
}

.thank-you-lead {
    max-width:490px;
    margin:16px auto 24px;
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
}

.thank-you .form-success {
    max-width:570px;
    margin:0 auto 24px;
}

.thank-you .button {
    border:0;
    cursor:pointer;
    max-width:100%;
    gap:12px;
    font-size:12px;
}

.confetti {
    position:fixed;
    inset:0;
    z-index:1000;
    overflow:hidden;
    pointer-events:none;
}

.confetti-piece {
    position:absolute;
    top:-20px;
    left:var(--x);
    width:9px;
    height:15px;
    background:var(--colour);
    opacity:0;
    animation:confetti-fall var(--duration) var(--delay) cubic-bezier(.2,.6,.4,1) both;
}

.confetti-piece:nth-child(3n) {
    border-radius:50%;
    width:10px;
    height:10px;
}

.is-celebrating .thank-you-check {
    animation:check-pop .65s cubic-bezier(.2,.8,.3,1.3) both;
}

.is-celebrating .thank-you-check path {
    stroke-dasharray:70;
    animation:check-draw .65s .2s ease-out both;
}

@keyframes confetti-fall {
    0% { transform:translate3d(0,0,0) rotate(0); opacity:0; }
    8% { opacity:1; }
    75% { opacity:1; }
    100% { transform:translate3d(var(--drift),calc(100vh + 40px),0) rotate(var(--spin)); opacity:0; }
}

@keyframes check-pop {
    from { transform:scale(.65); opacity:0; }
    to { transform:scale(1); opacity:1; }
}

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

@media(prefers-reduced-motion:reduce) {
    .confetti {
        display:none;
    }

    .is-celebrating .thank-you-check,.is-celebrating .thank-you-check path {
        animation:none;
    }
}

.form-errors ul {
    margin:0;
    padding-left:20px;
}

.form-errors p:last-child,.form-notice p:last-child,.form-success p:last-child {
    margin-bottom:0;
}

.form-errors a,.form-privacy a {
    text-decoration:underline;
    text-underline-offset:3px;
}

.form-submit {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    max-width:100%;
    min-height:48px;
    padding:16px 25px;
    border:0;
    border-radius:9px;
    background:var(--button-bg);
    color:var(--button-ink);
    font-weight:650;
    cursor:pointer;
    transition:background .2s;
}

.form-submit:hover {
    background:var(--button-hover);
}

.form-submit:disabled {
    opacity:.6;
    cursor:not-allowed;
}

.form-privacy {
    margin-top:16px;
}

.faq {
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:65px;
}

.faq h2 {
    font-size:35px;
}

.faq .eyebrow {
    margin-bottom:14px;
}

.faq-list details {
    border-bottom:1px solid var(--line);
}

.faq-list details:first-child {
    border-top:1px solid var(--line);
}

summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:21px 0;
    cursor:pointer;
    font-size:13px;
    font-weight:650;
    list-style:none;
}

summary::-webkit-details-marker {
    display:none;
}

summary span {
    font-size:22px;
    color:var(--purple);
    font-weight:400;
}

details[open] summary span {
    transform:rotate(45deg);
}

details p {
    font-size:13px;
    line-height:1.85;
    color:var(--muted);
    padding-right:25px;
    margin-bottom:22px;
}

.site-footer {
    border-top:1px solid var(--line);
    padding:30px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.site-footer .brand {
    font-size:17px;
}

.site-footer .brand-icon {
    font-size:28px;
}

.site-footer p,.site-footer>span {
    font-size:10px;
    color:var(--muted);
    margin:0;
}

.site-footer>span span {
    color:var(--purple);
    font-size:15px;
}

@media(min-width:1400px) {
    .hero {
        min-height:670px;
    }

}

@media(max-width:1000px) {
    .page-shell {
        padding:0 32px;
    }

    nav {
        gap:20px;
    }

    .hero {
        gap:0;
        min-height:560px;
    }

    h1 {
        font-size:clamp(36px,4.6vw,46px);
    }

    .hero-art {
        transform:scale(.88);
        transform-origin:center;
    }

    .discovery {
        padding:40px 30px;
        gap:25px;
    }

    .benefit-card {
        padding:24px;
    }

    .values-strip {
        font-size:10px;
    }

    .site-footer {
        flex-wrap:wrap;
    }

}

@media(max-width:760px) {
    .page-shell {
        padding:0 10px;
    }

    .site-header {
        padding:20px 0;
    }

    .brand {
        font-size:19px;
    }

    .brand-icon {
        font-size:29px;
    }

    nav>a:not(.button) {
        display:none;
    }

    .button-small {
        font-size:10px;
        padding:11px 12px;
        gap:10px;
    }

    .hero {
        grid-template-columns:1fr;
        padding:48px 0 25px;
        text-align:center;
    }

    .hero-copy {
        position:relative;
        z-index:3;
    }

    .hero .eyebrow {
        font-size:9px;
        letter-spacing:1.4px;
    }

    h1 {
        font-size:clamp(34px,7.8vw,56px);
        letter-spacing:-2.6px;
    }

    .hero-description {
        margin:0 auto 25px;
        font-size:15px;
        max-width:410px;
    }

    .hero-art {
        width:min(100%,440px);
        height:400px;
        margin:30px auto 0;
        transform:scale(.9);
    }

    .label-top {
        top:10px;
    }

    .label-bottom {
        bottom:-7px;
    }

    .values-strip {
        flex-wrap:wrap;
        justify-content:center;
        gap:14px 20px;
        font-size:10px;
        padding:22px 0;
    }

    .values-strip span:nth-child(4) {
        display:none;
    }

    .section {
        padding:60px 0;
    }

    h2 {
        font-size:35px;
    }

    .section-heading {
        margin-bottom:28px;
    }

    .benefit-grid {
        grid-template-columns:1fr;
        gap:14px;
    }

    .benefit-card {
        padding:25px;
    }

    .benefit-card p {
        margin-bottom:18px;
    }

    .card-icon {
        margin-bottom:18px;
    }

    .discovery {
        grid-template-columns:1fr;
        padding:25px;
        gap:25px;
    }

    .piece-preview {
        min-height:240px;
    }

    .piece-preview>span:first-child {
        font-size:170px;
    }

    .piece-caption {
        margin-top:14px;
    }

    .discovery h2 {
        font-size:32px;
    }

    .piece-picker {
        gap:7px;
    }

    .piece-picker button {
        width:40px;
    }

    .piece-story {
        min-height:85px;
    }

    .interest {
        margin-top:55px;
        padding:50px 20px;
    }

    .interest h2 {
        font-size:36px;
    }

    .interest-doodle {
        left:-45px;
        font-size:170px;
        opacity:.55;
    }

    .coming-soon {
        font-size:11px;
        padding:16px;
    }

    .faq {
        grid-template-columns:1fr;
        gap:16px;
    }

    .faq h2 br {
        display:none;
    }

    .site-footer {
        flex-direction:column;
        text-align:center;
        gap:12px;
        padding:25px 0;
    }

    .art-dots {
        right:0;
    }

}

@media(max-width:540px) {
    .site-header {
        flex-wrap:wrap;
        gap:14px;
    }

    .questionnaire-form {
        padding:22px 16px;
    }

    .age-options,.contact-grid {
        grid-template-columns:1fr;
    }

    .age-card {
        padding:18px;
    }

    .form-submit {
        width:100%;
    }

    .piece-picker {
        flex-wrap:wrap;
    }

    .chessboard {
        width:min(310px,100%);
        height:auto;
        aspect-ratio:1;
    }
}

.questionnaire-page {
    width:100%;
    max-width:1100px;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    background:var(--paper);
}

.questionnaire-page main {
    flex:1;
}

.questionnaire-page .site-header {
    padding:20px 0;
}

.intro-chevron {
    position:relative;
    display:flex;
    align-items:center;
    gap:24px;
    margin:28px auto 36px;
    padding:26px 32px;
    background:var(--lavender);
    border-radius:18px;
}

.intro-chevron::after {
    content:"";
    position:absolute;
    bottom:-15px;
    left:calc(50% - 20px);
    width:40px;
    height:16px;
    background:var(--lavender);
    clip-path:polygon(0 0,100% 0,50% 100%);
}

.intro-knight {
    position:relative;
    display:grid;
    place-items:center;
    flex:0 0 166px;
    width:166px;
    height:166px;
    isolation:isolate;
    color:var(--purple);
    background:radial-gradient(circle, var(--knight-glow) 0, var(--knight-glow-edge) 55%, transparent 72%);
    border:1px solid var(--panel-border);
    border-radius:50%;
    transition:scale .3s ease;
}

.intro-knight:hover {
    scale:1.04;
}

.intro-knight-piece {
    display:block;
    font-family:Georgia,"DejaVu Sans",serif;
    font-size:142px;
    line-height:1;
    text-shadow:1px 2px 0 var(--surface), 3px 5px 0 light-dark(#bca7d4,#68527e);
    filter:drop-shadow(0 10px 7px #6650a526);
    animation:knight-float 5s ease-in-out infinite;
}

.intro-knight::before {
    content:"";
    position:absolute;
    z-index:-1;
    bottom:10px;
    width:70px;
    height:12px;
    border-radius:50%;
    background:#6650a526;
    filter:blur(4px);
    animation:knight-shadow 5s ease-in-out infinite;
}

.intro-knight::after {
    content:"✦";
    position:absolute;
    top:8px;
    right:5px;
    color:#a77e39;
    font-size:28px;
    text-shadow:-139px 94px 0 #ad91cc;
    animation:knight-sparkle 5s ease-in-out infinite;
}

@keyframes knight-float {
    0%,100% { transform:translateY(0) rotate(-5deg); }
    50% { transform:translateY(-9px) rotate(3deg); }
}

@keyframes knight-shadow {
    0%,100% { transform:scaleX(1); opacity:.65; }
    50% { transform:scaleX(.75); opacity:.35; }
}

@keyframes knight-sparkle {
    0%,100% { opacity:.6; transform:scale(.9); }
    50% { opacity:1; transform:scale(1.1); }
}

.intro-chevron .eyebrow {
    margin-bottom:7px;
}

.intro-chevron h1 {
    margin-bottom:10px;
    font-size:clamp(26px,3.4vw,36px);
    line-height:1.2;
    letter-spacing:-1px;
}

.intro-chevron p:not(.eyebrow) {
    max-width:680px;
    margin-bottom:12px;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}

.intro-facts {
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    margin:0;
    padding:0;
    list-style:none;
    color:var(--purple);
    font-size:11px;
    font-weight:650;
}

.intro-facts li::before {
    content:"✓";
    margin-right:6px;
}

.questionnaire-page .interest {
    margin:0;
    padding:0;
    background:transparent;
    border-radius:0;
    overflow:visible;
}

.questionnaire-page .interest h2 {
    margin-bottom:8px;
    font-size:30px;
    letter-spacing:-1px;
}

.questionnaire-page .questionnaire-form {
    max-width:none;
    margin-top:20px;
    box-shadow:0 12px 40px #392d4a0c;
}

.questionnaire-page .faq {
    padding:48px 0;
    gap:32px;
    grid-template-columns:1fr 2fr;
}

.questionnaire-page .faq h2 {
    font-size:28px;
}

.questionnaire-page .site-footer {
    display:block;
    padding:20px 0;
}

.footer-main {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 20px;
}

.footer-details {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:16px;
    align-items:start;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--line);
}

.footer-link {
    justify-self:start;
    min-height:44px;
    padding:8px 0;
    border:0;
    background:none;
    font-size:11px;
    line-height:1.8;
    text-align:left;
    cursor:pointer;
}

.site-footer .footer-privacy {
    font-size:11px;
    line-height:1.8;
    text-align:left;
}

@media(max-width:760px) {
    .footer-main {
        flex-direction:column;
        text-align:center;
    }

    .footer-details {
        grid-template-columns:1fr;
        gap:8px;
    }

    .footer-link {
        justify-self:center;
        text-align:center;
    }

    .site-footer .footer-privacy {
        text-align:center;
    }
}

.copyright {
    color:var(--muted);
    font-size:10px;
    line-height:1.6;
}

@media(max-width:760px) {
    .intro-chevron {
        align-items:flex-start;
        gap:12px;
        margin:12px auto 20px;
        padding:14px;
    }

    .intro-knight {
        flex-basis:96px;
        width:96px;
        height:96px;
    }

    .intro-knight-piece {
        font-size:82px;
    }

    .intro-knight::after {
        top:0;
        right:0;
        font-size:20px;
        text-shadow:-79px 55px 0 #ad91cc;
    }

    .questionnaire-page .faq {
        grid-template-columns:1fr;
        gap:8px;
        padding:24px 0 16px;
    }

    .intro-chevron > div {
        min-width:0;
    }

    .questionnaire-page .site-header {
        padding:12px 0;
    }

    .questionnaire-page .section:not(.interest):not(.faq) {
        padding:20px 0;
    }

    .questionnaire-page .questionnaire-form {
        margin-top:14px;
        padding:18px 12px;
    }

    .form-step {
        margin-bottom:20px;
    }

    .thank-you {
        padding:24px 14px 20px;
    }

    .thank-you-check {
        width:104px;
        height:104px;
        margin-bottom:18px;
    }

    .thank-you-check svg {
        width:88px;
        height:88px;
    }

    .thank-you-lead {
        margin:12px auto 16px;
        font-size:14px;
        line-height:1.65;
    }

    .thank-you .form-success {
        padding:12px;
        margin-bottom:16px;
        font-size:13px;
        line-height:1.65;
    }

    .thank-you > :last-child {
        margin-bottom:0;
    }

    .questionnaire-page .site-footer {
        padding:12px 0 8px;
    }

    .footer-details {
        margin-top:10px;
        padding-top:8px;
        gap:4px;
    }
}

@media(max-width:540px) {
    .page-shell {
        padding:0 8px;
    }

    .intro-chevron {
        display:block;
        padding:12px;
    }

    .intro-knight {
        margin:0 auto 14px;
    }

    .questionnaire-page .interest h2 {
        font-size:27px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }

    *,*:before,*:after {
        transition:none!important;
    }

    .intro-knight-piece,.intro-knight::before,.intro-knight::after {
        animation:none;
    }

    .intro-knight:hover {
        scale:1;
    }

}