:root {
--navy: #004a98;
--navy-deep: #003a78;
--gold: #f8c000;
--gold-soft: #fad062;
--terracotta: #dc3c4d;
--terracotta-deep: #c5293a;
--terracotta-deeper: #a82130;
--green: #88bd48;
--green-deep: #6f9f37;
--cream: #f5f5ef;
--ink: #304254;
--white: #ffffff;
--ink-soft: #5a6b7c;
--hairline: #e7e6dd;
--terracotta-tint: #fff7f8;
--placeholder-stripe: #efeee4;
--shadow: 0 14px 38px rgba(0, 32, 70, 0.12);
--shadow-soft: 0 8px 22px rgba(0, 32, 70, 0.08);
--font-head: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
--maxw: 1100px;
--maxw-narrow: 820px;
--radius: 16px;
--radius-lg: 26px;
--pad-band: clamp(48px, 7vw, 96px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
.band--terracotta::before, .band--gold::before, .band--navy::before, .hero-band::before,
.band--terracotta::after, .band--gold::after, .band--navy::after, .hero-band::after,
.hero--svg::after { animation: none !important; }
}
body {
margin: 0;
background: var(--white);
color: var(--ink);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
h1, h2, h3, h4, .fred { font-family: var(--font-head); font-weight: 600; line-height: 1.08; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: clamp(18px, 5vw, 34px); padding-right: clamp(18px, 5vw, 34px); }
.container--narrow { max-width: var(--maxw-narrow); }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 1000;
background: var(--navy); color: var(--white); padding: 12px 18px; border-radius: 0 0 12px 0;
font-family: var(--font-head); font-weight: 600;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 6px;
}
.band--terracotta a:focus-visible, .band--terracotta button:focus-visible { outline-color: var(--white); }
.band--navy a:focus-visible, .band--navy button:focus-visible,
.hero--svg a:focus-visible, .hero--svg button:focus-visible,
.hero-band a:focus-visible, .hero-band button:focus-visible,
.site-footer a:focus-visible { outline-color: var(--gold); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.btn {
position: relative;
display: inline-flex; align-items: center; gap: 0.6em;
font-family: var(--font-head); font-weight: 600; font-size: 0.82rem;
letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
padding: 0.85em 1.5em; border-radius: 999px; border: 2px solid transparent;
cursor: pointer; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.15s ease, color 0.15s ease;
}
.btn .arrow { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn:hover { transform: translateY(-3px) scale(1.045); }
.btn:hover .arrow { transform: translateX(6px); }
.btn:active { transform: translateY(0) scale(0.94); transition-duration: 0.08s; }
.btn--primary { background: var(--terracotta-deep); color: var(--white); box-shadow: 0 8px 18px rgba(197, 41, 58, 0.30); }
.btn--primary:hover { background: var(--terracotta-deeper); color: var(--white); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); box-shadow: none; padding: 0.55em 1.1em; font-size: 0.72rem; min-height: 44px; }
.btn--outline:hover { background: var(--navy); color: var(--white); }
.btn--on-color { background: var(--white); color: var(--terracotta-deep); }
.btn--on-color:hover { background: var(--cream); color: var(--terracotta-deeper); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.8); }
.btn--ghost-light:hover { background: var(--white); color: var(--navy); }
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--hairline);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand__mark { height: 40px; width: auto; }
.brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--navy); letter-spacing: -0.01em; white-space: nowrap; }
.nav-toggle {
display: inline-flex; align-items: center; gap: 8px;
background: var(--cream); border: 1px solid var(--hairline); color: var(--navy);
font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
padding: 8px 14px; border-radius: 999px; cursor: pointer;
}
.nav-toggle__bars { display: inline-block; width: 18px; height: 2px; background: var(--navy); position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--navy); }
.nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 1px; }
.main-nav a {
display: block; text-decoration: none; color: var(--ink);
font-family: var(--font-head); font-weight: 500; font-size: 0.8rem;
padding: 5px 7px; border-radius: 999px; white-space: nowrap;
}
.main-nav a:hover { background: var(--cream); }
.main-nav a[aria-current="page"] { background: rgba(0,74,152,0.10); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.main-nav a[data-nav="rise-to-lead"], .main-nav a[data-nav="young-speakers"] { color: var(--terracotta-deep); }
.main-nav a[data-nav="young-founders-house"], .main-nav a[data-nav="young-founders-market"] { color: #9a6c00; }
.main-nav a[data-nav="configur-ai-junior"] { color: var(--navy); }
.main-nav a[data-nav="the-detective-club"] { color: #37731f; }
@media (max-width: 1159px) {
.main-nav {
position: absolute; left: 0; right: 0; top: 100%;
background: var(--white); border-bottom: 1px solid var(--hairline);
box-shadow: var(--shadow-soft);
max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
}
.main-nav[data-open="true"] { max-height: 70vh; }
.main-nav ul { flex-direction: column; gap: 0; padding: 8px clamp(18px,5vw,34px) 16px; }
.main-nav a { padding: 12px 10px; border-radius: 10px; font-size: 1.05rem; }
}
@media (min-width: 1160px) { .nav-toggle { display: none; } }
.hero { position: relative; }
.hero__media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; overflow: hidden; background: linear-gradient(135deg, var(--navy) 0%, var(--terracotta) 100%); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,32,70,0.05), rgba(0,32,70,0.28)); }
.hero--terracotta .hero__media { background: var(--terracotta); }
.hero__bubble {
position: relative; z-index: 2;
margin: -86px auto 0; max-width: 660px;
background: var(--white);
border: 2px solid var(--ink);
border-radius: 30px 28px 30px 8px;
box-shadow: var(--shadow);
padding: clamp(26px, 4vw, 40px);
text-align: center;
}
.hero__bubble::after {
content: ""; position: absolute; left: 48px; bottom: -16px; width: 30px; height: 30px;
background: var(--white); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
transform: rotate(45deg); border-radius: 0 0 6px 0;
}
.hero__title { font-size: clamp(1.9rem, 5.4vw, 2.9rem); color: var(--navy); margin: 0 0 12px; letter-spacing: -0.01em; }
.hero__caption { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.1rem, 2.6vw, 1.35rem); color: var(--ink); margin: 0 auto 22px; max-width: 46ch; }
.hero__skills { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(0.85rem, 2vw, 1.02rem); color: var(--terracotta-deep); margin: 2px 0 14px; }
.hero__tag {
display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: 0.78rem;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy);
background: var(--gold-soft); padding: 6px 14px; border-radius: 999px; margin: 0 0 18px;
}
.hero--svg { position: relative; background: var(--navy-deep); overflow: hidden; display: flex; align-items: center; min-height: clamp(380px, 54vh, 540px); }
.hero--svg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(102deg, rgba(0, 20, 44, 0.66) 0%, rgba(0, 20, 44, 0.14) 50%, rgba(0, 20, 44, 0) 70%); pointer-events: none; }
.hero--svg > .container { position: relative; z-index: 1; width: 100%; }
.hero--svg__inner { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(40px, 6vw, 76px) 0; }
@media (min-width: 760px) { .hero--svg__inner { grid-template-columns: 1.08fr 0.92fr; } }
.hero--svg__text { max-width: 34ch; }
.hero--svg__text .hero__title { color: var(--white); }
.hero--svg__text .hero__caption { color: rgba(255, 255, 255, 0.92); margin: 0 0 24px; max-width: 32ch; }
.hero--svg__art { display: flex; justify-content: center; }
.hero-motif { width: 100%; height: auto; max-width: 440px; display: block; }
.hero-motif .ms-gold { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.hero-motif .ms-navy { fill: none; stroke: var(--navy); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.hero-motif .ms-gold.thin { stroke-width: 4; }
.hero-motif .ms-gold.handle { stroke-width: 16; }
.hero-motif .motif-qm { font-family: var(--font-head), sans-serif; font-weight: 700; font-size: 62px; fill: var(--gold); }
.hero-band { background: var(--terracotta-deep); color: var(--white); padding: var(--pad-band) 0; }
.hero-band__grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 820px) { .hero-band__grid { grid-template-columns: 1.05fr 1fr; } }
.hero-band__title { font-size: clamp(2rem, 5.4vw, 3rem); color: var(--gold); margin: 0 0 16px; }
.hero-band__meta { font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; margin: 0 0 16px; }
.hero-band__body { color: var(--white); font-size: 1.06rem; margin-bottom: 24px; }
.hero-band__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-band__media .placeholder { aspect-ratio: 4 / 3; }
.band { padding: var(--pad-band) 0; }
.band--white { background: var(--white); }
.band--cream { background: var(--cream); }
.band--gold { background: var(--gold); }
.band--terracotta { background: var(--terracotta-deep); color: var(--white); }
.band--navy { background: var(--navy); color: var(--white); }
.band--terracotta .section-heading, .band--navy .section-heading { color: var(--white); }
.band--terracotta a:not(.btn), .band--navy a:not(.btn) { color: var(--white); text-decoration: underline; }
.section-heading { font-size: clamp(1.7rem, 4.2vw, 2.5rem); color: var(--navy); margin: 0 0 18px; letter-spacing: -0.01em; }
.section-lead { font-size: 1.08rem; max-width: 60ch; }
.band--gold .section-heading { color: var(--navy); }
.eyebrow { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--terracotta-deep); margin: 0 0 12px; }
.band--terracotta .eyebrow, .band--navy .eyebrow { color: var(--gold); }
.band--gold .eyebrow { color: var(--navy); }
.band__cta { margin-top: 28px; }
.split { display: grid; gap: clamp(28px, 5vw, 64px); }
@media (min-width: 880px) { .split { grid-template-columns: 0.82fr 1.18fr; align-items: start; } }
.split__title { font-size: clamp(1.8rem, 4.6vw, 2.7rem); color: var(--navy); margin: 0; letter-spacing: -0.015em; }
.band--gold .split__title { color: var(--navy); }
.split__lead { margin-top: 16px; color: var(--ink); }
.prog-list { display: flex; flex-direction: column; gap: 4px; }
.prog-item {
display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: start;
padding: 20px 0; border-top: 1px solid var(--hairline);
}
.prog-item:first-child { border-top: 0; }
.prog-item__photo { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; background: var(--cream); flex: none; }
.prog-item__photo img { width: 100%; height: 100%; object-fit: cover; }
.prog-item__photo[data-slug="rise-to-lead"] img { transform: scale(1.75); transform-origin: 50% 32%; }
.prog-item:hover .prog-item__photo[data-slug="rise-to-lead"] img { transform: scale(2) rotate(2deg); }
.prog-item__photo[data-slug="configur-ai-junior"] img { transform: scale(1.5); transform-origin: 32% 38%; }
.prog-item:hover .prog-item__photo[data-slug="configur-ai-junior"] img { transform: scale(1.71) rotate(2deg); }
.prog-item__photo[data-slug="the-detective-club"] img { transform: scale(1.55); transform-origin: 50% 30%; }
.prog-item:hover .prog-item__photo[data-slug="the-detective-club"] img { transform: scale(1.77) rotate(2deg); }
.prog-item__title { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.08rem; color: var(--navy); margin: 0; }
.prog-item__tagline { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--terracotta-deep); margin: 4px 0 6px; }
.prog-item__desc { font-size: 0.98rem; margin: 0 0 12px; color: var(--ink); }
.prog-item__note { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy); background: var(--gold-soft); padding: 3px 10px; border-radius: 999px; margin: 0 0 12px; }
.inside { text-align: center; }
.inside__heading { font-size: clamp(1.7rem, 4.2vw, 2.4rem); color: var(--terracotta); margin: 0 0 10px; }
.inside__meta { font-family: var(--font-head); font-weight: 500; color: var(--navy); font-size: 0.98rem; margin: 0 auto 34px; max-width: 60ch; }
.inside__intro { max-width: 62ch; margin: 0 auto 16px; font-size: 1.05rem; line-height: 1.6; color: var(--ink); text-align: left; }
.inside__intro:last-of-type { margin-bottom: 30px; }
.inside-research { max-width: 920px; margin: 44px auto 0; padding-top: 34px; border-top: 1px solid var(--hairline); }
.inside-research__heading { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 12px; }
.inside-research__intro { max-width: 66ch; margin: 0 auto 24px; font-size: 1.05rem; line-height: 1.6; color: var(--ink); text-align: left; }
.tiles { display: grid; gap: 18px; text-align: left; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-soft); min-height: 168px; }
.tile__label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; margin: 0 0 10px; }
.tile__text { font-size: 0.98rem; margin: 0; }
.tile--navy { background: var(--navy); color: var(--white); }
.tile--terracotta { background: var(--terracotta-deep); color: var(--white); }
.tile--green { background: var(--green); color: var(--ink); }
.tile--gold { background: var(--gold); color: var(--ink); }
.tile--photo { position: relative; overflow: hidden; background-size: cover; background-position: center; color: var(--white); }
.tile--photo .tile__scrim { position: absolute; inset: 0; }
.tile--navy.tile--photo .tile__scrim { background: linear-gradient(155deg, rgba(0,74,152,0.80), rgba(0,38,86,0.88)); }
.tile--terracotta.tile--photo .tile__scrim { background: linear-gradient(155deg, rgba(197,41,58,0.80), rgba(140,24,38,0.88)); }
.tile--green.tile--photo .tile__scrim { background: linear-gradient(155deg, rgba(60,110,22,0.80), rgba(36,74,12,0.90)); }
.tile--gold.tile--photo .tile__scrim { background: linear-gradient(155deg, rgba(120,82,0,0.80), rgba(82,56,0,0.90)); }
.tile--photo .tile__body { position: relative; z-index: 1; }
.tile--photo .tile__label, .tile--photo .tile__text { color: var(--white); text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.band-split { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 820px) { .band-split { grid-template-columns: 0.95fr 1.05fr; } }
.band-split__media img, .band-split__media .placeholder { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.why-grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 880px) { .why-grid { grid-template-columns: 0.95fr 1.05fr; } }
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.collage__main { grid-column: 1 / -1; }
.collage img, .collage .placeholder { border-radius: var(--radius); box-shadow: var(--shadow-soft); width: 100%; object-fit: cover; }
.collage__main img, .collage__main .placeholder { aspect-ratio: 16 / 9; }
.collage__a img, .collage__b img, .collage__a .placeholder, .collage__b .placeholder { aspect-ratio: 1 / 1; }
.feature-list { display: flex; flex-direction: column; gap: 4px; }
.feature-item { display: grid; grid-template-columns: 84px 1fr; gap: 20px; align-items: start; padding: 22px 0; border-top: 1px solid var(--hairline); }
.feature-item:first-child { border-top: 0; }
.feature-item__photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.5); flex: none; }
.band--gold .feature-item { border-top-color: rgba(0,74,152,0.18); }
.feature-item__photo img { width: 100%; height: 100%; object-fit: cover; }
.feature-item__label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.02rem; color: var(--navy); margin: 0 0 8px; }
.feature-item__text { margin: 0; font-size: 1rem; color: var(--ink); }
.join__terms { font-size: 1.05rem; color: var(--ink); margin: 0 0 10px; }
.join__how { margin: 2px 0 4px; }
.prog-item > *, .feature-item > * { min-width: 0; }
.prog-item__desc, .prog-item__title, .feature-item__text, .feature-item__label { overflow-wrap: anywhere; }
.jars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jar { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 600; font-size: 0.82rem; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--hairline); color: var(--ink); }
.jar__dot { width: 12px; height: 12px; border-radius: 50%; }
.jar--gold .jar__dot { background: var(--gold); }
.jar--navy .jar__dot { background: var(--navy); }
.jar--terracotta .jar__dot { background: var(--terracotta); }
.jar--green .jar__dot { background: var(--green); }
.closing { text-align: center; }
.closing__line { font-family: var(--font-head); font-weight: 500; font-size: 1.15rem; color: var(--navy); max-width: 52ch; margin: 0 auto 26px; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.text-link { font-family: var(--font-head); font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.text-link:hover { border-bottom-color: var(--terracotta); }
.join { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 820px) { .join { grid-template-columns: 0.85fr 1.15fr; } }
.join__photo img, .join__photo .placeholder { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover; }
.join__body { max-width: 60ch; }
.join__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 18px 0 8px; }
.join__amount { font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; color: var(--terracotta-deep); line-height: 1; }
.join__period { color: var(--ink-soft); font-weight: 600; }
.join__locked { width: 100%; font-family: var(--font-head); font-weight: 600; color: var(--navy); margin-top: 2px; }
.join__fine { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 14px; }
.join__note { font-family: var(--font-head); font-weight: 500; color: var(--navy); }
.join__meta { font-size: 0.95rem; color: var(--ink); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.membership__head { text-align: center; max-width: 60ch; margin: 0 auto 40px; }
.membership__grid { display: grid; gap: 26px; }
@media (min-width: 900px) { .membership__grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.panel { background: var(--white); border: 1.5px solid var(--hairline); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; }
.panel h3 { font-size: 1.15rem; color: var(--navy); margin: 0 0 14px; }
.schedule-day { padding: 10px 0; border-top: 1px dashed var(--hairline); }
.schedule-day:first-of-type { border-top: 0; }
.schedule-day__name { font-family: var(--font-head); font-weight: 600; color: var(--navy); margin: 0 0 4px; }
.schedule-session { font-size: 0.96rem; margin: 2px 0; }
.schedule-session__time { color: var(--ink-soft); }
.schedule-session__note { color: var(--terracotta-deep); font-weight: 600; font-size: 0.85rem; }
.schedule__note { font-size: 0.92rem; color: var(--ink-soft); margin-top: 12px; }
.benefits { list-style: none; margin: 0; padding: 0; }
.benefits li { position: relative; padding: 8px 0 8px 30px; border-top: 1px solid var(--hairline); font-size: 0.98rem; }
.benefits li:first-child { border-top: 0; }
.benefits li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.booking-note { background: rgba(0,74,152,0.05); border-left: 4px solid var(--navy); border-radius: 0 12px 12px 0; padding: 16px 18px; margin-top: 18px; }
.booking-note--gold { background: var(--gold-soft); border-left-color: var(--terracotta); }
.membership__billing { max-width: 62ch; margin: 0 auto 12px; color: var(--ink); font-size: 1.08rem; }
.membership__how { margin: 0 auto 26px; }
.membership__how-link { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--terracotta-deep); text-decoration: none; border-bottom: 3px solid var(--gold); padding-bottom: 3px; transition: color 0.15s ease, border-color 0.15s ease; }
.membership__how-link .arrow { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.membership__how-link:hover { color: var(--terracotta-deeper); border-bottom-color: var(--terracotta); }
.membership__how-link:hover .arrow { transform: translateX(5px); }
.membership__how-link--navy { color: var(--navy); }
.membership__how-link--navy:hover { color: var(--navy-deep); }
.membership__schedule { max-width: 560px; margin: 0 auto 22px; }
.tiers { max-width: 900px; margin: 0 auto; }
.tiers__simple { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .tiers__simple { grid-template-columns: repeat(3, 1fr); } }
.tier-card { background: var(--white); border: 1.5px solid var(--hairline); border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow-soft); text-align: center; }
.tier-card__name { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.02rem; margin: 0 0 6px; }
.tier-card__price { margin: 0; line-height: 1.1; }
.tier-card__amount { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; color: var(--navy); }
.tier-card__per { color: var(--ink-soft); font-size: 0.92rem; }
.tier-card--lead { margin-top: 16px; text-align: left; background: var(--navy); color: var(--white); border: 0; padding: 30px 30px 28px; box-shadow: var(--shadow); }
.tier-card--lead .tier-card__name { color: var(--white); font-size: 1.32rem; margin: 0 0 4px; }
.tier-card--lead .tier-card__amount { color: var(--gold); font-size: 2.4rem; }
.tier-card--lead .tier-card__per { color: rgba(255, 255, 255, 0.82); }
.tier-card__badge { display: inline-block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--navy); background: var(--gold); padding: 4px 12px; border-radius: 999px; margin: 0 0 14px; }
.tier-card__sub { color: rgba(255, 255, 255, 0.85); margin: 10px 0 18px; font-size: 1rem; }
.tier-card__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 620px) { .tier-card__benefits { grid-template-columns: 1fr 1fr; gap: 12px 28px; } }
.tier-card__benefits li { position: relative; padding-left: 30px; font-size: 0.98rem; line-height: 1.4; }
.tier-card__benefits li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); }
.tier-card__benefits li::after { content: ""; position: absolute; left: 6px; top: 5px; width: 4px; height: 8px; border: solid var(--navy); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tier-card__benefits li.tier-card__tbc { opacity: 0.6; font-style: italic; padding-left: 0; }
.tier-card__benefits li.tier-card__tbc::before, .tier-card__benefits li.tier-card__tbc::after { display: none; }
.tiers__cancel { text-align: center; color: var(--ink-soft); font-size: 1.05rem; max-width: 60ch; margin: 18px auto 0; }
.membership__cta-wrap { margin-top: 34px; }
.btn--lg { font-size: 1rem; padding: 1.05em 2.4em; }
.prose { margin-top: 22px; }
.prose p { margin: 0 0 1.3rem; }
.prose p strong { color: var(--navy); }
.carousel { position: relative; }
.carousel__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 4px 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carousel__track { scroll-behavior: auto; } }
.carousel__dots { display: none; }
.js .carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 2px; }
.carousel__dot { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease; }
.carousel__dot:hover { transform: scale(1.3); }
.carousel__dot[aria-current="true"] { background: var(--gold); transform: scale(1.3); }
.carousel__dot:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.carousel__prev, .carousel__next { position: absolute; top: 46%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--gold); color: var(--navy); display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease; }
.carousel__prev { left: 2px; }
.carousel__next { right: 2px; }
.js .carousel__prev, .js .carousel__next { display: inline-flex; }
.carousel__prev span, .carousel__next span { font-size: 1.4rem; line-height: 1; font-weight: 700; }
.carousel__prev:hover, .carousel__next:hover { transform: translateY(-50%) scale(1.1); }
.carousel__prev:active, .carousel__next:active { transform: translateY(-50%) scale(0.92); }
.carousel__prev:focus-visible, .carousel__next:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.review { margin: 0; background: var(--white); border-radius: var(--radius); padding: 28px 28px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.review.carousel__slide { flex: 0 0 min(100%, 440px); scroll-snap-align: center; }
.review__quote { margin: 0; font-size: 1.04rem; line-height: 1.62; color: var(--ink); }
.review__quote::before { content: "\201C" / ""; display: block; font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; line-height: 0.5; color: var(--gold); margin-bottom: 8px; }
.review__by { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 0.95rem; margin-top: auto; }
.market-dates { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .market-dates { grid-template-columns: 1fr 1fr; } }
.market-dates li { position: relative; background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 16px; font-family: var(--font-head); font-weight: 600; color: var(--navy); text-align: center; transition: border-color 0.2s ease, background 0.2s ease; }
.market-dates li.is-next { border: 2px solid var(--gold); background: var(--gold-soft); padding: 11px 16px; }
.market-dates li.is-finished { color: var(--ink-soft); border-style: dashed; background: transparent; }
.market-dates li.is-finished .market-date__text { text-decoration: line-through; text-decoration-color: rgba(0, 32, 70, 0.35); }
.market-date__tag { display: inline-block; margin-left: 8px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; vertical-align: middle; text-decoration: none; padding: 2px 8px; border-radius: 999px; }
.market-date__tag--next { color: var(--navy); background: var(--gold); }
.market-date__tag--done { color: var(--ink-soft); background: rgba(0, 32, 70, 0.08); }
.market-band { overflow-x: clip; }
.market-dates.market-dates--editions { display: block; max-width: 600px; margin: 8px auto 26px; padding: 0; }
.market-dates--editions li.market-edition {
text-align: left; position: relative;
font-family: var(--font-body); font-weight: 400;
border: none; border-radius: 18px; padding: 24px 26px; margin: 0 0 -10px;
color: #ffffff; background: var(--navy);
box-shadow: 0 18px 38px -22px rgba(0, 32, 70, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1), box-shadow 0.28s ease;
}
.market-dates--editions li.market-edition:last-child { margin-bottom: 0; }
.market-edition__head { display: block; }
.market-edition__date { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.35rem, 4.2vw, 1.65rem); line-height: 1.1; margin: 0 0 3px; letter-spacing: -0.01em; color: #ffffff; }
.market-edition__name { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.2rem, 3.6vw, 1.5rem); line-height: 1.15; margin: 0; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.95); }
.market-edition__body { margin-top: 14px; }
.market-edition__time { font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 10px; color: rgba(255, 255, 255, 0.72); }
.market-edition__copy { font-family: var(--font-body); font-weight: 400; font-size: 1.02rem; line-height: 1.6; margin: 0; max-width: 52ch; color: rgba(255, 255, 255, 0.92); }
.market-dates--editions li.market-edition--c1 { background: var(--gold); color: var(--ink); }
.market-dates--editions li.market-edition--c1 .market-edition__date { color: var(--navy); }
.market-dates--editions li.market-edition--c1 .market-edition__name { color: var(--navy); }
.market-dates--editions li.market-edition--c1 .market-edition__time { color: var(--navy); }
.market-dates--editions li.market-edition--c1 .market-edition__copy { color: var(--ink); }
.market-dates--editions li.market-edition--c1.is-finished .market-edition__name { text-decoration-color: rgba(0, 32, 70, 0.5); }
.market-dates--editions li.market-edition--c2 { background: var(--terracotta-deep); }
.market-dates--editions li.market-edition--c3 { background: #37731f; }
.market-dates--editions li.market-edition--c4 { background: var(--navy); }
.market-dates--editions li.market-edition .market-date__tag { position: absolute; top: 16px; right: 18px; margin-left: 0; z-index: 2; }
.market-dates--editions li.market-edition .market-date__tag--next { background: #ffffff; color: var(--navy); box-shadow: 0 2px 8px rgba(0, 32, 70, 0.28); }
.market-dates--editions li.market-edition .market-date__tag--done { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
.market-dates--editions li.market-edition.is-next .market-edition__date { padding-right: 58px; }
.market-dates--editions li.market-edition.is-next { z-index: 5; transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(0, 32, 70, 0.5); animation: marketNextPulse 2.6s ease-in-out infinite; }
@keyframes marketNextPulse {
0%, 100% { box-shadow: 0 26px 50px -26px rgba(0, 32, 70, 0.5), 0 0 0 0 rgba(248, 192, 0, 0); }
50% { box-shadow: 0 26px 50px -26px rgba(0, 32, 70, 0.5), 0 0 0 6px rgba(248, 192, 0, 0.32); }
}
.market-dates--editions li.market-edition.is-next .market-date__tag--next { animation: marketBadgePulse 2.6s ease-in-out infinite; }
@keyframes marketBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.market-dates--editions li.market-edition:hover { z-index: 6; transform: translateY(-4px); box-shadow: 0 30px 54px -24px rgba(0, 32, 70, 0.52); }
.market-dates--editions li.market-edition.is-finished { opacity: 0.55; }
.market-dates--editions li.market-edition.is-finished .market-edition__name { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.55); }
@media (prefers-reduced-motion: reduce) {
.market-dates--editions li.market-edition { transition: none; margin-bottom: 14px; transform: none; }
.market-dates--editions li.market-edition.is-next { transform: none; animation: none; }
.market-dates--editions li.market-edition.is-next .market-date__tag--next { animation: none; }
.market-dates--editions li.market-edition:hover { transform: none; }
}
.placeholder {
display: flex; align-items: center; justify-content: center; text-align: center;
background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 12px, var(--placeholder-stripe) 12px, var(--placeholder-stripe) 24px);
color: var(--ink-soft); font-family: var(--font-head); font-weight: 500; font-size: 0.72rem;
letter-spacing: 0.03em; padding: 8px; width: 100%; height: 100%;
}
.prog-item__photo .placeholder, .feature-item__photo .placeholder { font-size: 0.5rem; line-height: 1.2; }
.hero__media .placeholder { position: absolute; inset: 0; font-size: 1rem; }
.newsletter { border-top: 1px solid rgba(0, 74, 152, 0.14); }
.newsletter .eyebrow { font-size: clamp(1rem, 2.6vw, 1.2rem); margin-bottom: 14px; }
.newsletter__lead { margin-left: auto; margin-right: auto; }
.newsletter__form { max-width: 400px; margin: 28px auto 0; }
.newsletter__form iframe,
.newsletter__form form,
.newsletter__form > div { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }
.site-footer { background: var(--navy); color: rgba(255,255,255,0.86); padding: clamp(40px, 6vw, 64px) 0 30px; }
.site-footer a { color: var(--white); }
.footer__grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer__brand-name { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; color: var(--white); margin: 0 0 10px; }
.footer__contact p { margin: 0 0 6px; font-size: 0.96rem; }
.footer__title { font-family: var(--font-head); font-weight: 600; color: var(--gold); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 12px; }
.footer__nav { list-style: none; margin: 0; padding: 0; }
.footer__nav li { margin: 0 0 8px; }
.footer__nav a { text-decoration: none; font-size: 0.96rem; }
.footer__nav a:hover { text-decoration: underline; }
.footer__bottom { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.16); font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.coming-soon__tag { display: inline-block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; color: var(--navy); background: var(--gold-soft); padding: 5px 14px; border-radius: 999px; margin: 0 0 14px; }
.coming-soon__included { margin: 16px 0 0; font-family: var(--font-head); font-weight: 600; color: var(--terracotta-deep); }
.check-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.check-list li strong { color: var(--navy); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); }
.check-list li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 4px; height: 8px; border: solid var(--navy); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.join__status { font-family: var(--font-head); font-weight: 600; color: var(--terracotta-deep); margin: 0 0 6px; }
.prose-para { max-width: 62ch; }
.ticklist { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .ticklist { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.ticklist li { position: relative; padding: 2px 0 2px 34px; font-size: 1.02rem; }
.ticklist li::before {
content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%;
background: var(--green);
}
.ticklist li::after {
content: ""; position: absolute; left: 7px; top: 9px; width: 5px; height: 9px;
border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.pledge__lead { color: var(--white); font-weight: 700; font-size: 1.08rem; max-width: 62ch; }
.pledge__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.pledge__list li {
background: rgba(255, 255, 255, 0.08); border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0;
padding: 14px 18px; font-size: 1.04rem; color: var(--white); max-width: 68ch;
}
.pledge__note {
margin-top: 22px; background: var(--gold-soft); color: var(--ink); border-radius: var(--radius);
padding: 16px 20px; font-weight: 600; max-width: 68ch;
}
.strand-chips { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.strand-chip {
font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
padding: 8px 16px; border-radius: 999px;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.strand-chip:hover { transform: translateY(-3px) rotate(-1deg); }
.strand-chip:nth-child(4n + 1) { background: var(--navy); color: var(--white); }
.strand-chip:nth-child(4n + 2) { background: var(--gold); color: var(--ink); }
.strand-chip:nth-child(4n + 3) { background: var(--terracotta-deep); color: var(--white); }
.strand-chip:nth-child(4n + 4) { background: var(--green); color: var(--ink); }
.smallprint { font-size: 0.85rem; color: var(--ink-soft); max-width: 62ch; margin-top: 18px; }
.evidence-stats { display: grid; gap: 14px; margin: 26px 0; }
@media (min-width: 760px) { .evidence-stats { grid-template-columns: repeat(3, 1fr); } }
.stat-card { background: var(--white); border: 1.5px solid var(--hairline); border-radius: var(--radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-soft); }
.stat-card__figure { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--navy); }
.stat-card__text { font-size: 0.95rem; color: var(--ink); }
.stat-card__source { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--terracotta-deep); }
.framework-note { margin-top: 22px; background: rgba(0, 74, 152, 0.06); border-left: 4px solid var(--navy); border-radius: 0 12px 12px 0; padding: 18px 22px; font-family: var(--font-head); font-weight: 500; font-size: 1.1rem; line-height: 1.55; color: var(--navy); max-width: 68ch; }
.statement__line { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.35rem, 3.4vw, 2.05rem); line-height: 1.36; color: var(--white); margin: 0 auto; max-width: 34ch; }
.statement__accent { color: var(--gold); }
.inside__dates { margin: -6px auto 34px; text-align: center; }
.inside__dates-link { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy); background: var(--gold); padding: 14px 28px; border-radius: 16px; text-decoration: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; }
.inside__dates-link:hover { transform: translateY(-2px); box-shadow: 0 11px 22px rgba(0, 0, 0, 0.2); }
.inside__dates-link:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.inside__dates-link .arrow { display: inline-block; transition: transform 0.2s ease; }
.inside__dates-link:hover .arrow { transform: translateX(4px); }
.schedule__dates { margin-top: 12px; font-weight: 600; color: var(--ink); }
.dates-cols { display: grid; grid-template-columns: 1fr; gap: 34px; margin-top: 8px; }
@media (min-width: 760px) { .dates-cols { grid-template-columns: 1fr 1fr; gap: 48px; } }
.dates-col__head { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.15rem; margin: 0 0 4px; }
.dates-col__count { font-family: var(--font-head); font-weight: 600; color: var(--terracotta); font-size: 0.95rem; margin: 0 0 12px; }
.dates-col__policy { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; max-width: 52ch; margin: 0 0 12px; }
.dates-month { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 16px 0 4px; }
.dates-list { list-style: none; margin: 0; padding: 0; }
.dates-list li { padding: 6px 0; border-bottom: 1px solid rgba(48, 66, 84, 0.09); font-size: 1rem; }
.dates-list li:last-child { border-bottom: 0; }
.dates-terminfo { margin-top: 26px; border-left: 4px solid var(--gold); background: rgba(248, 192, 0, 0.12); border-radius: 0 12px 12px 0; padding: 14px 18px; }
.dates-info { margin: 6px 0; color: var(--ink); font-size: 0.95rem; }
.dates-info strong { color: var(--navy); }
.dates-info--muted { margin-top: 10px; color: var(--ink-soft); font-size: 0.88rem; }
.signup .section-lead { max-width: 60ch; margin-bottom: 20px; }
.join-explain { background: var(--white); border-radius: 16px; padding: 18px 22px; margin-bottom: 28px; border: 1px solid rgba(48, 66, 84, 0.12); }
.join-explain__title { font-family: var(--font-head); font-weight: 600; color: var(--navy); margin: 0 0 10px; font-size: 1.05rem; }
.join-explain__list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.join-explain__list li { font-size: 0.98rem; line-height: 1.5; }
.join-next { margin-top: 18px; background: var(--gold-soft); border-radius: 14px; padding: 16px 20px; }
.join-next__title { font-family: var(--font-head); font-weight: 600; color: var(--ink); margin: 0 0 8px; font-size: 1rem; }
.join-next__list { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.join-next__list li { font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.join-form { margin-top: 8px; }
.join-clubs { border: 0; margin: 0; padding: 0; }
.join-clubs__label { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.05rem; padding: 0; margin: 0 0 12px; }
.join-club { display: flex; align-items: center; gap: 14px; background: var(--white); border: 2px solid rgba(48, 66, 84, 0.14); border-radius: 16px; padding: 15px 18px; margin-bottom: 12px; cursor: pointer; min-height: 64px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.join-club:hover { border-color: var(--navy); }
.join-club:has(.join-club__input:checked) { border-color: var(--navy); box-shadow: 0 6px 16px rgba(0, 74, 152, 0.12); }
.join-club__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.join-club__box { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 2px solid rgba(48, 66, 84, 0.3); background: var(--white); position: relative; transition: background 0.15s ease, border-color 0.15s ease; }
.join-club__box::after { content: ""; position: absolute; left: 9px; top: 4px; width: 6px; height: 12px; border: solid var(--white); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
.join-club__input:checked + .join-club__box { background: var(--green); border-color: var(--green); }
.join-club__input:checked + .join-club__box::after { transform: rotate(45deg) scale(1); }
.join-club__input:focus-visible + .join-club__box { outline: 3px solid var(--navy); outline-offset: 3px; }
.join-club__text { display: flex; flex-direction: column; gap: 3px; }
.join-club__name { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.join-club__tagline { font-family: var(--font-head); font-weight: 600; color: var(--terracotta-deep); font-size: 0.78rem; letter-spacing: 0.01em; }
.join-club__when { color: var(--ink-soft); font-size: 0.9rem; }
.join-panel { margin-top: 18px; }
.join-empty { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }
.join-clash { background: rgba(220, 60, 77, 0.1); border-left: 4px solid var(--terracotta); border-radius: 0 12px 12px 0; padding: 14px 18px; color: var(--terracotta-deep); font-weight: 600; margin: 0; }
.join-go { background: var(--white); border: 2px solid var(--gold); border-radius: 18px; padding: 22px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); }
.join-summary { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.2rem; margin: 0 0 18px; line-height: 1.45; }
.join-summary__price { color: var(--terracotta-deep); }
.join-fields { margin-bottom: 18px; }
.join-fields__section { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 22px 0 12px; }
.join-fields__section:first-child { margin-top: 2px; }
.join-fields__grid { display: grid; gap: 14px; }
.join-field { display: flex; flex-direction: column; gap: 6px; }
.join-field__label { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.join-field__opt { font-weight: 400; color: var(--ink-soft); }
.join-field input { font: inherit; font-size: 1rem; padding: 13px 15px; border: 2px solid rgba(48, 66, 84, 0.2); border-radius: 12px; background: var(--cream); min-height: 50px; }
.join-field input:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 74, 152, 0.15); }
#september-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--ink); padding: 13px 15px; border: 2px solid rgba(48, 66, 84, 0.2); border-radius: 12px; background: var(--cream); min-height: 200px; resize: vertical; }
#september-form textarea:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 74, 152, 0.15); }
@media (min-width: 620px) {
.join-fields__grid { grid-template-columns: 1fr 1fr; }
.join-field--wide { grid-column: 1 / -1; }
}
.join-btn { width: 100%; justify-content: center; }
.join-fields-error { color: var(--terracotta-deep); font-weight: 600; margin: 0 0 14px; }
.join-flag { margin-top: 16px; background: var(--gold-soft); color: var(--ink); border-radius: 12px; padding: 12px 16px; font-size: 0.92rem; line-height: 1.5; }
.join-noscript p { color: var(--ink-soft); margin: 0; }
.join-existing { margin-top: 22px; color: var(--ink-soft); font-size: 0.95rem; text-align: center; }
.consent-form input.is-invalid, .consent-form textarea.is-invalid { border-color: var(--terracotta); }
.choice:has(input.is-invalid) { border-color: var(--terracotta); }
.consent .section-lead { max-width: 58ch; }
.consent-group { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.consent-form { counter-reset: consent-section; }
.consent-section { counter-increment: consent-section; }
.consent-section::before { content: counter(consent-section) ". "; color: var(--terracotta-deep); }
.consent-section--plain { counter-increment: none; }
.consent-section--plain::before { content: none; }
.consent-collect { margin-top: 6px; }
.consent-subgroup { margin-top: 16px; }
.consent-subhead { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1rem; margin: 0 0 10px; padding: 0; }
.consent-form { margin-top: 6px; }
.consent-section { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.25rem; margin: 38px 0 12px; padding-top: 26px; border-top: 2px solid rgba(48, 66, 84, 0.1); }
.consent-note { color: var(--ink); font-size: 0.98rem; line-height: 1.6; max-width: 62ch; margin: 0 0 14px; }
.consent-note--small { color: var(--ink-soft); font-size: 0.9rem; }
.consent-optout { margin: -4px 0 18px; }
.consent-optout .choice { font-size: 0.85rem; color: var(--ink-soft); }
.consent-club-when { color: var(--ink-soft); font-weight: 400; font-size: 0.9rem; }
.consent-times { list-style: none; margin: 0 0 18px; padding: 14px 18px; background: var(--white); border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; display: grid; gap: 6px; }
.consent-times li { font-size: 0.98rem; }
.consent-times strong { color: var(--navy); }
.consent-id { background: var(--white); border: 2px solid var(--gold); border-radius: 18px; padding: 20px 22px; margin-bottom: 10px; }
.consent-id__title { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.05rem; margin: 0 0 12px; }
.consent-id__hint { color: var(--ink-soft); font-size: 0.92rem; margin: -6px 0 14px; }
.consent-id .ffield { margin: 16px 0 0; }
.consent-id__edit-wrap { margin: 14px 0 0; }
.consent-edit { font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; color: var(--navy); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 2px solid var(--gold); }
.consent-edit:hover { color: var(--terracotta); border-color: var(--terracotta); }
.consent-form .join-field input.is-locked, .consent-form.feedback-form .join-field input.is-locked[type="text"] { background: rgba(48, 66, 84, 0.05); border-color: transparent; color: var(--ink); }
.is-prefilled .consent-clubs-field .choice { cursor: default; }
.is-prefilled .consent-clubs-field .choice:hover { border-color: rgba(48, 66, 84, 0.14); }
.is-prefilled .consent-clubs-field .choice:not(:has(input:checked)) { display: none; }
.consent-sign { margin-top: 16px; }
.consent-send { margin-top: 24px; width: 100%; justify-content: center; }
@media (min-width: 620px) { .consent-send { width: auto; } }
.consent-done p { font-size: 1.12rem; max-width: 56ch; }
.consent-done__name { font-weight: 700; color: var(--navy); }
.about-intro { display: grid; gap: clamp(24px, 4vw, 44px); align-items: center; }
@media (min-width: 760px) { .about-intro { grid-template-columns: 0.8fr 1.2fr; } }
.about-intro__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow); background: var(--cream); }
.about-intro__photo img, .about-intro__photo .placeholder { width: 100%; height: 100%; object-fit: cover; }
.about-body { max-width: 70ch; }
.founder-voice { display: grid; gap: clamp(20px, 4vw, 44px); align-items: center; padding: 28px 0; border-top: 1px solid rgba(0, 74, 152, 0.18); }
.founder-voice:first-of-type { border-top: 0; padding-top: 6px; }
@media (min-width: 760px) { .founder-voice { grid-template-columns: 1.45fr 0.55fr; } }
.founder-voice__title { font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--navy); margin: 0 0 14px; }
.founder-voice__photo img, .founder-voice__photo .placeholder { width: 100%; max-width: 280px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); margin: 0 auto; }
.hero__media .placeholder { background: transparent; color: rgba(255, 255, 255, 0.92); }
.js .reveal { opacity: 0; transform: translateY(46px) scale(0.95); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.site-header { transition: box-shadow 0.25s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(0, 32, 70, 0.10); }
.prog-item__photo img, .feature-item__photo img { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.prog-item:hover .prog-item__photo img, .feature-item:hover .feature-item__photo img { transform: scale(1.14) rotate(2deg); }
.prog-item__title { transition: color 0.2s ease; }
.prog-item:hover .prog-item__title { color: var(--terracotta-deep); }
.tile { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
.tile:hover { transform: translateY(-9px) scale(1.025) rotate(-0.5deg); box-shadow: var(--shadow); }
.tile:active { transform: scale(0.97); transition-duration: 0.08s; }
.review { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
.review:hover { transform: translateY(-9px) scale(1.02); box-shadow: 0 24px 52px rgba(0, 32, 70, 0.22); }
.panel { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
.panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
@keyframes ca-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
.hero__media img { animation: ca-kenburns 16s ease-in-out infinite alternate; }
@keyframes ca-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(1.2deg); } }
.hero-motif { animation: ca-float 4.5s ease-in-out infinite; }
.picker__label { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.05rem; margin: 0 0 16px; }
.picker__clubs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .picker__clubs { grid-template-columns: 1fr; } }
.picker__club {
display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; color: var(--ink);
background: var(--white); border: 1.5px solid var(--hairline); border-radius: 14px; padding: 14px 16px;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, background 0.18s ease;
}
.picker__club:hover { border-color: var(--navy); transform: translateY(-2px); }
.picker__check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--hairline); position: relative; transition: background 0.18s ease, border-color 0.18s ease; }
.picker__check::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 10px; border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform 0.18s ease; }
.picker__name { line-height: 1.2; }
.picker__soon { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--terracotta-deep); margin-top: 2px; }
.picker__club[aria-pressed="true"] { border-color: var(--navy); background: rgba(0, 74, 152, 0.05); box-shadow: 0 8px 18px rgba(0, 74, 152, 0.12); }
.picker__club[aria-pressed="true"] .picker__check { background: var(--navy); border-color: var(--navy); }
.picker__club[aria-pressed="true"] .picker__check::after { transform: rotate(45deg) scale(1); }
.picker__panel { margin-top: 18px; background: var(--white); border: 1.5px solid var(--hairline); border-radius: var(--radius); padding: 20px 22px; text-align: center; min-height: 98px; display: flex; flex-direction: column; justify-content: center; }
.picker__hint { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }
.picker__price { margin: 0; }
.picker__amount { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; color: var(--terracotta-deep); line-height: 1; display: inline-block; }
.picker__per { color: var(--ink-soft); font-weight: 600; }
.picker__tier { margin: 6px 0 0; font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1rem; }
.picker__all { margin: 14px 0 0; font-size: 0.88rem; color: var(--ink-soft); text-align: center; }
@keyframes ca-bump { 0% { transform: scale(0.7); opacity: 0.3; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.picker__price.is-bumped .picker__amount { animation: ca-bump 0.34s cubic-bezier(0.2, 0.7, 0.2, 1); }
.countdown-shell { margin: 4px 0 26px; background: var(--navy-deep); border-radius: var(--radius); padding: 20px 24px; max-width: 460px; box-shadow: var(--shadow); }
.countdown__label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; color: var(--gold); margin: 0 0 12px; }
.countdown__digits { display: flex; gap: 22px; margin: 0 0 12px; }
.countdown__digits[hidden] { display: none; }
.countdown__cell { display: flex; flex-direction: column; align-items: center; min-width: 66px; }
.countdown__num { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.countdown__unit { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.9); margin-top: 5px; font-weight: 700; }
.countdown__today { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; color: var(--gold); margin: 0; }
.countdown__date { margin: 0; color: var(--white); font-weight: 700; font-size: 1.02rem; }
@keyframes ca-roll { 0% { transform: translateY(0.55em) scale(0.6); opacity: 0; } 60% { transform: translateY(-0.08em) scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
.countdown__num.cd-roll { animation: ca-roll 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.countdown-band__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.countdown-band .eyebrow { margin-bottom: 2px; }
.countdown--hero { margin: 0 0 10px; }
.countdown--hero .countdown__digits { justify-content: center; gap: clamp(20px, 6vw, 52px); margin-bottom: 14px; }
.countdown--hero .countdown__cell { min-width: clamp(70px, 18vw, 120px); }
.countdown--hero .countdown__num { font-size: clamp(3.4rem, 11vw, 5.6rem); color: var(--gold); }
.countdown--hero .countdown__unit { font-size: 0.82rem; }
.countdown--hero .countdown__today { font-size: clamp(1.4rem, 4vw, 1.9rem); }
.countdown--hero .countdown__date { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.05rem, 2.6vw, 1.3rem); }
@keyframes ca-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-0.28em) scale(1.1); } 70% { transform: translateY(0.06em) scale(0.97); } }
.countdown__digits.cd-wave .countdown__cell:nth-child(1) .countdown__num { animation: ca-jump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.countdown__digits.cd-wave .countdown__cell:nth-child(2) .countdown__num { animation: ca-jump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.09s; }
.countdown__digits.cd-wave .countdown__cell:nth-child(3) .countdown__num { animation: ca-jump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s; }
.opens-note { font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; color: var(--gold); margin: 0 0 12px; }
.opens-note:empty { display: none; margin: 0; }
.band--terracotta, .band--gold, .band--navy, .hero-band { position: relative; overflow: hidden; }
.band--terracotta > .container, .band--gold > .container, .band--navy > .container, .hero-band > .container { position: relative; z-index: 1; }
@keyframes ca-drift { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(6%, 5%, 0) scale(1.14); } }
@keyframes ca-drift-b { from { transform: translate3d(5%, 4%, 0) scale(1.1); } to { transform: translate3d(-5%, -4%, 0) scale(1); } }
.band--terracotta::after, .band--gold::after, .band--navy::after, .hero-band::after, .hero--svg::after {
content: ""; position: absolute; inset: -80px; z-index: 0; pointer-events: none;
animation: ca-drift 13s ease-in-out infinite alternate;
}
.band--terracotta::before, .band--gold::before, .band--navy::before, .hero-band::before {
content: ""; position: absolute; inset: -80px; z-index: 0; pointer-events: none;
animation: ca-drift-b 17s ease-in-out infinite alternate;
}
.band--gold::after { background: radial-gradient(34% 48% at 18% 28%, rgba(255, 255, 255, 0.55), transparent 70%), radial-gradient(26% 38% at 84% 76%, rgba(220, 60, 77, 0.16), transparent 70%); }
.band--gold::before { background: radial-gradient(30% 42% at 70% 18%, rgba(0, 74, 152, 0.10), transparent 70%); }
.band--terracotta::after, .hero-band::after { background: radial-gradient(34% 46% at 16% 24%, rgba(248, 192, 0, 0.26), transparent 70%), radial-gradient(28% 40% at 86% 78%, rgba(0, 74, 152, 0.30), transparent 70%); }
.band--terracotta::before, .hero-band::before { background: radial-gradient(26% 40% at 72% 16%, rgba(255, 255, 255, 0.14), transparent 70%); }
.band--navy::after, .hero--svg::after { background: radial-gradient(36% 50% at 82% 20%, rgba(248, 192, 0, 0.16), transparent 70%), radial-gradient(30% 44% at 12% 82%, rgba(255, 255, 255, 0.12), transparent 70%); }
.band--navy::before { background: radial-gradient(28% 40% at 30% 90%, rgba(220, 60, 77, 0.14), transparent 70%); }
.ambient-idle::before, .ambient-idle::after { animation-play-state: paused; }
@media (pointer: fine) {
.js .hero__bubble.is-visible { transform: translate3d(var(--prx, 0px), var(--pry, 0px), 0) rotate(var(--prr, 0deg)); }
}
.hero--svg__art { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes ca-pop { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.06) rotate(-0.6deg); } 60% { transform: scale(0.96); } 80% { transform: scale(1.02); } }
.hero__bubble.is-popped { animation: ca-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.spark { position: absolute; left: 50%; top: 38%; width: var(--s, 12px); height: var(--s, 12px); border-radius: 50%; pointer-events: none; z-index: 3; animation: ca-spark 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes ca-spark {
from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
to { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.15); }
}
.ripple { position: absolute; left: 50%; top: 38%; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--gold); pointer-events: none; z-index: 2; transform: translate(-50%, -50%); animation: ca-ripple 0.7s ease-out forwards; }
@keyframes ca-ripple { to { width: 320px; height: 320px; opacity: 0; } }
.ripple--small { animation-name: ca-ripple-small; }
@keyframes ca-ripple-small { to { width: 150px; height: 150px; opacity: 0; } }
.headline-word { display: inline-block; animation: ca-word-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ca-word-in { from { opacity: 0; transform: translateY(0.7em) rotate(2deg) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes ca-wobble { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-8deg) scale(1.12); } 55% { transform: rotate(7deg) scale(1.06); } 80% { transform: rotate(-2deg) scale(1.01); } }
.is-poked { animation: ca-wobble 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.prog-item__photo.has-moment, .feature-item__photo.has-moment { cursor: pointer; }
.hero-motif path, .hero-motif circle, .hero-motif line { transform-box: fill-box; transform-origin: center; }
.hero-motif.is-inspected .ms-gold.thin { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ca-scan 1.1s ease forwards; }
.hero-motif.is-inspected path.ms-gold.thin:nth-of-type(2) { animation-delay: 0.12s; }
.hero-motif.is-inspected path.ms-gold.thin:nth-of-type(3) { animation-delay: 0.24s; }
@keyframes ca-scan { to { stroke-dashoffset: 0; } }
.hero-motif.is-inspected circle.ms-gold { animation: ca-pulse 1.1s ease; }
@keyframes ca-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.04); } }
.hero-motif.is-inspected .tick { animation: ca-weigh-a 1.4s ease; }
.hero-motif.is-inspected .cross { animation: ca-weigh-b 1.4s ease; }
@keyframes ca-weigh-a { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.18); } 55% { transform: scale(0.95); } }
@keyframes ca-weigh-b { 0%, 100% { transform: scale(1); } 25% { transform: scale(0.9); } 60% { transform: scale(1.16); } }
.hero--svg__art.has-moment { cursor: pointer; }
.js [data-stream].is-split .stream-word { display: inline-block; opacity: 0; transform: translateY(0.45em); }
.js [data-stream].is-streaming .stream-word { animation: ca-stream-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes ca-stream-in { to { opacity: 1; transform: none; } }
.js [data-ink].is-split .ink-word { opacity: 0.8; transition: opacity 0.25s ease; }
.js [data-ink].is-split .ink-word.lit { opacity: 1; }
.marquee { overflow: hidden; margin: 26px 0 4px; border-radius: 12px; }
.marquee:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.marquee__track { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: 12px; width: max-content; animation: ca-marquee 32s linear infinite; }
.marquee__track .strand-chip { white-space: nowrap; }
@keyframes ca-marquee { to { transform: translateX(calc(-50% - 6px)); } }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.js [data-stream].is-split .stream-word { opacity: 1 !important; transform: none !important; animation: none !important; }
.js [data-ink].is-split .ink-word { opacity: 1 !important; }
.marquee__track { animation: none !important; width: auto; flex-wrap: wrap; }
.marquee__track [aria-hidden="true"] { display: none; }
}
.stack > * + * { margin-top: 1.1rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.lead-strong { font-weight: 700; color: var(--navy); }
.feedback__intro { font-size: 1.08rem; max-width: 56ch; margin: 0 0 36px; }
.feedback-form { max-width: 640px; }
.ffield { margin: 0 0 30px; border: 0; padding: 0; min-inline-size: 0; }
.ffield__label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; line-height: 1.35; color: var(--navy); margin: 0 0 12px; padding: 0; }
.ffield__hint { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.92rem; color: var(--ink-soft); margin-top: 4px; }
.feedback-form textarea,
.feedback-form input[type="text"] {
width: 100%; font: inherit; color: var(--ink);
background: var(--white); border: 2px solid var(--hairline); border-radius: 12px;
padding: 12px 14px; min-height: 48px;
transition: border-color 0.15s ease;
}
.feedback-form textarea { min-height: 120px; resize: vertical; }
.feedback-form textarea:focus, .feedback-form input[type="text"]:focus { border-color: var(--navy); }
.feedback-form textarea:focus-visible,
.feedback-form input[type="text"]:focus-visible,
.feedback-form input[type="checkbox"]:focus-visible,
.feedback-form input[type="radio"]:focus-visible {
outline: 3px solid var(--navy); outline-offset: 2px;
}
.choice-list { display: flex; flex-direction: column; gap: 10px; }
.choice {
display: flex; align-items: flex-start; gap: 12px;
background: var(--white); border: 2px solid var(--hairline); border-radius: 12px;
padding: 12px 14px; min-height: 48px; cursor: pointer;
font-size: 1rem; line-height: 1.5;
transition: border-color 0.15s ease, background 0.15s ease;
}
.choice:hover { border-color: var(--navy); }
.choice input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--navy); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--navy); background: rgba(0, 74, 152, 0.05); }
.feedback__send { min-height: 48px; font-size: 0.88rem; margin-top: 6px; }
@media (max-width: 560px) { .feedback__send { width: 100%; justify-content: center; } }
.feedback__error {
margin: 18px 0 0; padding: 14px 16px;
background: var(--terracotta-tint); border: 2px solid var(--terracotta); border-radius: 12px;
color: var(--terracotta-deep); font-weight: 700;
}
.feedback__privacy { font-size: 0.92rem; color: var(--ink-soft); max-width: 56ch; margin: 18px 0 0; }
.feedback__done { padding: 6px 0 10px; }
.feedback__done:focus { outline: none; }
.feedback__done p { font-size: 1.12rem; max-width: 56ch; }
.hp-wrap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 64ch; margin: 8px auto 0; }
.faq__item { background: var(--white); border: 2px solid var(--hairline); border-radius: 14px; }
.faq__item[open] { border-color: var(--navy); }
.faq__q {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 16px 18px; min-height: 56px; cursor: pointer; list-style: none;
font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--navy); line-height: 1.4;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: rgba(0, 74, 152, 0.04); border-radius: 12px; }
.faq__q:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 12px; }
.faq__icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.faq__icon::before, .faq__icon::after {
content: ""; position: absolute; background: var(--navy); border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq__icon::before { top: 8.5px; left: 2px; width: 16px; height: 3px; }
.faq__icon::after { left: 8.5px; top: 2px; width: 3px; height: 16px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding: 0 18px 18px; color: var(--ink); font-size: 1rem; line-height: 1.6; }
.faq__a p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq__icon::before, .faq__icon::after { transition: none; } }
.legal__meta { color: var(--ink-soft); font-size: 0.95rem; margin: 4px 0 26px; }
.legal h2 { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.28rem; margin: 32px 0 10px; }
.legal p { color: var(--ink); font-size: 1.02rem; line-height: 1.7; margin: 0 0 14px; }
.legal p strong { color: var(--navy); }
.legal a { color: var(--navy); text-decoration: underline; }
.legal__list { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.legal__list li { color: var(--ink); font-size: 1.02rem; line-height: 1.6; }
.footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; padding: 0; }
.footer__legal a { font-size: 0.9rem; }