/* Coming soon page. Theme is set on <html data-theme> by local time (see quantum-coming-soon.php). */

/* Literata 72pt: the display cut of Literata, a typeface designed for reading books.
   Files ship with the parent theme, Twenty Twenty-Five. */
@font-face {
    font-family: "Literata Display";
    src: url("../../../twentytwentyfive/assets/fonts/literata/Literata72pt-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Literata Display";
    src: url("../../../twentytwentyfive/assets/fonts/literata/Literata72pt-RegularItalic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Literata Display";
    src: url("../../../twentytwentyfive/assets/fonts/literata/Literata72pt-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Great Vibes (OFL, self-hosted in assets/fonts/great-vibes): the script eyebrows on the audience cards */
@font-face {
    font-family: "Great Vibes";
    src: url("../fonts/great-vibes/great-vibes-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root,
:root[data-theme="light"] {
    color-scheme: light;
    --cs-bg: #edf3fc;
    --cs-digit: #d2d7df;
    --bf-settled-max: #5b6676ad;
    --cs-halo: #edf3fc; /* the light background */
    --cs-underline: #b98217;
    --cs-surface: #f6f9fe;
    --cs-border: #d9e1ec;
    --cs-title: #5b6676;
    --cs-text: #737e8f;
    --cs-body: #56606e;
    --cs-muted: #666f7e;
    --cs-nav-bg: #262a30;
    --cs-nav-text: #aeb6c2;
    --cs-field-bg: rgba(255, 255, 255, 0.8);
    --cs-field-border: #cdd5e1;
    --cs-accent: #f0c24b;
    --cs-accent-hover: #d99b2b;
    --cs-accent-text: #262a30;
    --cs-icon: #946510;
    --cs-icon-bg: rgba(240, 194, 75, 0.18);
    --cs-error: #b8472f;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --cs-bg: #262a30;
    --cs-digit: #464d57;
    --bf-settled-max: #9aa3b0;
    --cs-halo: #262a30; /* the dark background */
    --cs-underline: #c9901f;
    --cs-surface: #2c3138;
    --cs-border: #373d46;
    --cs-title: #9aa3b0;
    --cs-text: #7f8896;
    --cs-body: #a3abb7;
    --cs-muted: #929ba8;
    --cs-nav-bg: #edf3fc;
    --cs-nav-text: #5b6676;
    --cs-field-bg: rgba(0, 0, 0, 0.22);
    --cs-field-border: #3c424b;
    --cs-accent: #f0c24b;
    --cs-accent-hover: #f5d27a;
    --cs-accent-text: #262a30;
    --cs-icon: #f0c24b;
    --cs-icon-bg: rgba(240, 194, 75, 0.12);
    --cs-error: #f08a70;
}

/* Settled digits: part way from the digit color to the darkest (see binary-settle.js) */
:root {
    --bf-settle-strength: 50%;
    --bf-settled: color-mix(in srgb, var(--cs-digit), var(--bf-settled-max) var(--bf-settle-strength));
}

body.quantum-cs {
    margin: 0;
    background: var(--cs-bg);
    color: var(--cs-body);
    font-family: Manrope, system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    transition: background-color 0.6s ease, color 0.6s ease;
}

.quantum-cs h1,
.quantum-cs h2,
.quantum-cs h3,
.quantum-cs h4 {
    font-family: "Literata Display", Literata, Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Only one of each logo pair shows, depending on the mode */
.cs-show-dark,
:root[data-theme="dark"] .cs-show-light {
    display: none;
}

:root[data-theme="dark"] .cs-show-dark {
    display: block;
}

/* ---------- Mock menu (inverted colors) ---------- */

.cs-nav {
    background: var(--cs-nav-bg);
    transition: background-color 0.6s ease;
}

.cs-nav__inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 16px;
}

.cs-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--cs-nav-text);
    text-decoration: none;
}

.cs-nav__logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.cs-nav__title {
    font-family: "Literata Display", Georgia, serif;
    font-size: 21px;
    line-height: 1;
}

/* Light/dark switch. Sun on the light side (left), moon on the dark side (right); the knob
   covers the other mode's icon, so the switch "opens" onto the current one. Inverted like the menu. */
.cs-theme-toggle {
    --cs-toggle-w: 64px;
    --cs-toggle-h: 32px;
    --cs-toggle-pad: 3px;
    --cs-toggle-knob: calc(var(--cs-toggle-h) - 2 * var(--cs-toggle-pad));
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: var(--cs-toggle-w);
    height: var(--cs-toggle-h);
    margin: 0;
    padding: 0 var(--cs-toggle-pad);
    background: color-mix(in srgb, var(--cs-nav-text) 18%, var(--cs-nav-bg));
    border: 1px solid color-mix(in srgb, var(--cs-nav-text) 35%, var(--cs-nav-bg));
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.6s ease, border-color 0.6s ease;
}

.cs-theme-toggle:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 3px;
}

.cs-theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cs-toggle-knob);
    height: var(--cs-toggle-knob);
    transition: opacity 0.35s ease, transform 0.5s ease;
}

.cs-theme-toggle__icon .q-icon {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}

.cs-theme-toggle__icon--sun {
    color: var(--cs-accent);
}

.cs-theme-toggle__icon--moon {
    color: #4d5a70;
}

/* The hidden icon shrinks and turns away under the knob */
:root:not([data-theme="dark"]) .cs-theme-toggle__icon--moon,
:root[data-theme="dark"] .cs-theme-toggle__icon--sun {
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
}

.cs-theme-toggle__knob {
    position: absolute;
    top: var(--cs-toggle-pad);
    left: var(--cs-toggle-pad);
    width: var(--cs-toggle-knob);
    height: var(--cs-toggle-knob);
    background: var(--cs-nav-text);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transform: translateX(calc(var(--cs-toggle-w) - var(--cs-toggle-knob) - 2 * var(--cs-toggle-pad) - 2px));
    transition: transform 0.4s cubic-bezier(0.5, 1.4, 0.5, 1), background-color 0.6s ease;
}

:root[data-theme="dark"] .cs-theme-toggle__knob {
    transform: translateX(0);
}

/* Maximum-contrast text: black on the light background, white on the dark one */
.text-highlight-focus,
:root[data-theme="light"] .text-highlight-focus {
    color: #000 !important;
}

:root[data-theme="dark"] .text-highlight-focus {
    color: #fff !important;
}

/* ---------- Hero ---------- */

/* Outside the 1280px hero the band is the digit color; the hero fades into it at both sides */
.cs-hero-band {
    background: var(--cs-digit);
    transition: background-color 0.6s ease;
}

.cs-hero {
    --cs-edge: clamp(40px, 14%, 190px);
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    min-height: 400px;
    margin: 0 auto;
    padding: 44px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(90deg,
        var(--cs-digit) 0,
        var(--cs-bg) var(--cs-edge),
        var(--cs-bg) calc(100% - var(--cs-edge)),
        var(--cs-digit) 100%);
}

.cs-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 680px;
    text-align: center;
}

.cs-logo {
    /* Sized to the logo's own proportions (79 × 96), so the box has no empty sides */
    height: 120px;
    max-height: 30vw;
    aspect-ratio: 79 / 96;
}

.cs-logo__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Thick outline behind the hero text so the digits never cut into it: a text stroke painted
   under the fill (paint-order), so only the outer half shows. White in light mode, charcoal in dark. */
.quantum-cs .cs-title,
.quantum-cs .cs-tagline {
    -webkit-text-stroke: var(--cs-halo-width) var(--cs-halo);
    paint-order: stroke fill;
}

.quantum-cs .cs-title {
    --cs-halo-width: 14px;
}

.quantum-cs .cs-tagline {
    --cs-halo-width: 10px;
}

/* One line, up to 520px wide. coming-soon.js sets the exact font size to fill it. */
.quantum-cs .cs-title {
    --fit-max: 56px;
    position: relative;
    isolation: isolate; /* keeps the underline behind the letters but above the hero */
    width: 100%;
    margin: 0px 0 4px;
    font-size: clamp(22px, 7vw, 48px);
    line-height: 1.15;
    white-space: nowrap;
    color: var(--cs-title);
}

/* Hand-drawn dark gold underline: an SVG brush stroke used as a mask, so the color is a token.
   It sits behind the text; the title's halo cuts it where descenders cross it. Kept inside the
   title's box so it doesn't change the width coming-soon.js measures. */
.quantum-cs .cs-title::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: -0.3em;
    height: 0.5em;
    background: var(--cs-underline);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 60' preserveAspectRatio='none'%3E%3Cpath d='M6 34 C40 30 90 26 150 27 C210 28 250 33 310 31 C370 29 420 24 470 18 C480 16 488 13 494 10 L496 14 C488 18 478 23 468 27 C420 35 370 40 310 42 C250 44 210 39 150 38 C92 37 44 41 9 42 Z'/%3E%3Cpath fill-opacity='.75' d='M70 46 C150 42 240 45 320 43 C370 42 405 39 432 35 L433 38.5 C405 43 370 46.5 320 48 C240 50 150 47 72 50 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 60' preserveAspectRatio='none'%3E%3Cpath d='M6 34 C40 30 90 26 150 27 C210 28 250 33 310 31 C370 29 420 24 470 18 C480 16 488 13 494 10 L496 14 C488 18 478 23 468 27 C420 35 370 40 310 42 C250 44 210 39 150 38 C92 37 44 41 9 42 Z'/%3E%3Cpath fill-opacity='.75' d='M70 46 C150 42 240 45 320 43 C370 42 405 39 432 35 L433 38.5 C405 43 370 46.5 320 48 C240 50 150 47 72 50 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    pointer-events: none;
}

/* Two lines in the italic display face; the second in dark gold */
.quantum-cs .cs-tagline {
    max-width: 640px;
    margin: 22px 0 0;
    font-family: "Literata Display", Literata, Georgia, serif;
    font-style: italic;
    font-size: clamp(22px, 3.6vw, 32px);
    line-height: 1.25;
    letter-spacing: 0.005em;
    color: var(--cs-title);
}

.cs-tagline__line {
    display: block;
}

.cs-tagline__line--accent {
    color: var(--cs-icon);
}

/* Hero signup: email and "Get Updates" on one row (stacks on small phones) */
.cs-hero__signup {
    width: 100%;
    max-width: 440px;
    margin: 30px 0 0;
}

.quantum-cs .cs-hero__signup .tnp-subscription-minimal form {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}

.quantum-cs .cs-hero__signup .tnp-subscription-minimal input.tnp-email {
    flex: 1 1 auto;
    width: auto;
    height: 46px;
    background: var(--cs-surface);
    box-shadow: 0 2px 10px rgba(38, 42, 48, 0.08);
    border: 2px solid;
}

.quantum-cs .cs-hero__signup .tnp-subscription-minimal input.tnp-submit {
    height: 46px;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(38, 42, 48, 0.12);
}

@media (max-width: 420px) {
    .quantum-cs .cs-hero__signup .tnp-subscription-minimal form {
        flex-direction: column;
    }
}

.cs-message {
    font-size: 20px;
    color: var(--cs-text);
}

.cs-message a {
    color: var(--cs-title);
}

/* ---------- Binary field ---------- */

.binary-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
    user-select: none;
    /* Dims the digits behind the content. The sides need no mask: the hero background
       fades to the digit color there, so the digits dissolve into it. */
    --binary-field-mask: radial-gradient(ellipse 42% 48% at 50% 50%, rgba(0, 0, 0, 0.4), #000);
    -webkit-mask-image: var(--binary-field-mask);
    mask-image: var(--binary-field-mask);
}

.binary-field__layer {
    --bf-font-size: 12px;
    --bf-line: 14px;
    position: absolute;
    inset: 0;
    overflow: hidden;
    contain: strict;
    /* Tabular (fixed-width) digits: '0' and '1' have the same advance, so cells line up across
       layers. Manrope has a plain 0 (Fira Code's is slashed). Literata Display also works. */
    font-family: Manrope, ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--bf-font-size);
    line-height: var(--bf-line);
    font-variant-ligatures: none;
    font-variant-numeric: tabular-nums;
    white-space: pre;
    color: var(--cs-digit);
    transition: color 0.6s ease;
}

.binary-field__row {
    height: var(--bf-line);
}

/* Manrope's "1" sits a little right of the "0" in the same tabular cell: nudge every layer of 1s
   (the base layer and its flicker overlays) half a pixel left so the digits line up. Exact on
   high-density screens (one device pixel at 2x); 1x screens anti-alias or round it. */
.binary-field__layer[data-layer="1"],
.binary-field__flicker[data-digit="1"] {
    left: -0.5px;
    right: 0.5px;
}

/* Settle effect (binary-settle.js): the losing digit is hidden, the winner bold and darkest.
   Manrope's tabular digits are the same width at every weight, so bold keeps cells aligned. */
.binary-field__layer {
    --bf-settled-weight: 700;
}

.binary-field__layer span.is-on {
    color: var(--bf-settled);
    font-weight: var(--bf-settled-weight);
}

.binary-field__layer span.is-off {
    color: transparent;
}

/* Aging (binary-settle.js): 10s after settling, step back to the normal digit color, one class
   swap every 300ms (no per-cell transitions: those cost too much with ~1000 cells fading). */
.binary-field__layer span.is-on.fs1 { color: color-mix(in srgb, var(--bf-settled), var(--cs-digit) 25%); }
.binary-field__layer span.is-on.fs2 { color: color-mix(in srgb, var(--bf-settled), var(--cs-digit) 50%); }
.binary-field__layer span.is-on.fs3 { color: color-mix(in srgb, var(--bf-settled), var(--cs-digit) 75%); }
.binary-field__layer span.is-on.fs4 { color: var(--cs-digit); font-weight: 400; }

/* Flicker overlays (binary-settle.js): 3 phases x 2 digits. Each holds a settled-color copy of
   its digit, visible only on flickering cells (span.on). The whole layer fades with a CSS opacity
   animation (compositor-only); phases use different durations so they drift apart. The script
   reads this opacity as the cell's "darkness" when it settles it. */
.binary-field__layer.binary-field__flicker {
    color: transparent;
    opacity: 0;
    transition: none;
    animation: bf-fade var(--bf-fade) ease-in-out infinite alternate;
    animation-play-state: paused;
}

.binary-field__flicker[data-phase="0"] { --bf-fade: 1.3s; }
.binary-field__flicker[data-phase="1"] { --bf-fade: 1.75s; }
.binary-field__flicker[data-phase="2"] { --bf-fade: 2.2s; }

.binary-field.is-flickering .binary-field__flicker {
    animation-play-state: running;
}

.binary-field__flicker span.on {
    color: var(--bf-settled);
    font-weight: var(--bf-settled-weight);
}

@keyframes bf-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .binary-field__layer.binary-field__flicker {
        animation: none;
        opacity: 0.5;
    }

}

/* ---------- Sections ---------- */

.cs-section {
    box-sizing: border-box;
    max-width: 1280px;
    margin: 0 auto;
    padding: 88px 16px;
}

.cs-heading {
    margin: 0 0 18px;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.15;
    color: var(--cs-title);
    text-align: center;
}

.cs-lead {
    max-width: 720px;
    margin: 0 auto;
    font-size: clamp(17px, 2.1vw, 20px);
    line-height: 1.65;
    text-align: center;
}

.cs-eyebrow {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cs-icon);
}

/* Signup */

.cs-signup {
    text-align: center;
    padding-bottom: 40px;
    padding-top: 20px;
}

/* "Coming soon" list: one card per audience, a gold gem marker, the first word a link */
.quantum-cs .cs-intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 680px;
    margin: 34px auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.cs-intro__item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-left: 3px solid var(--cs-accent);
    border-radius: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.6s ease, border-color 0.6s ease;
}

.cs-intro__item:hover,
.cs-intro__item:focus-within {
    transform: translateX(4px);
    box-shadow: 0 6px 22px rgba(38, 42, 48, 0.1);
}

/* A small four-facet gold crystal, colored like the one in the divider (lightest top right) */
.cs-intro__gem {
    flex: none;
    width: 16px;
    height: 22px;
    background: conic-gradient(#fbe9b0 0 90deg, #c58b1d 90deg 180deg, #e2a93a 180deg 270deg, #f5d57a 270deg);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.cs-intro__text {
    margin: 0;
    font-size: clamp(17px, 2vw, 19px);
    line-height: 1.5;
    color: var(--cs-body);
}

.cs-intro__link {
    margin-right: 0.15em;
    font-family: "Literata Display", Literata, Georgia, serif;
    font-style: italic;
    font-size: 1.45em;
    line-height: 1;
    color: var(--cs-title);
    /* Gold underline drawn as a background: WordPress's global styles force a 1px
       text-decoration-thickness on every link with !important */
    text-decoration: none;
    background: linear-gradient(var(--cs-accent), var(--cs-accent)) no-repeat 0 100% / 100% 2px;
    padding-bottom: 2px;
    transition: color 0.2s ease, background-size 0.2s ease;
}

.cs-intro__link:hover,
.cs-intro__link:focus-visible {
    color: var(--cs-icon);
    background-size: 100% 3px;
}

.cs-intro__link:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Audience sections get a little room above them when jumped to */
.cs-audience {
    scroll-margin-top: 24px;
}

html:has(.quantum-cs) {
    scroll-behavior: smooth;
}

/* "Don't. Miss. This.", the email box and the perks: left-aligned in a centered box */
.cs-signup__box {
    max-width: 370px;
    margin: 0 auto;
    text-align: left;
}

.quantum-cs .cs-signup__box .cs-heading {
    text-align: left;
}

.cs-signup__form {
    margin: 24px 0 0;
}

.quantum-cs .tnp-subscription-minimal {
    margin: 0;
}

/* Email box, then the button on its own line */
.quantum-cs .tnp-subscription-minimal form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    white-space: normal;
    text-align: left !important;
}

.quantum-cs .tnp-subscription-minimal input.tnp-email {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 50px;
    padding: 0 16px;
    font: inherit;
    font-size: 16px;
    color: var(--cs-title);
    background: var(--cs-field-bg);
    border: 1px solid var(--cs-field-border);
    border-radius: 10px;
}

.quantum-cs .tnp-subscription-minimal input.tnp-email::placeholder {
    color: var(--cs-text);
}

.quantum-cs .tnp-subscription-minimal input.tnp-submit {
    flex: 0 0 auto;
    width: auto;
    height: 50px;
    padding: 0 24px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--cs-accent-text);
    background: var(--cs-accent);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quantum-cs .tnp-subscription-minimal input.tnp-submit:hover,
.quantum-cs .tnp-subscription-minimal input.tnp-submit:focus-visible {
    background: var(--cs-accent-hover);
}

.quantum-cs .tnp-subscription-minimal input:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

.quantum-cs .tnp-privacy-field {
    flex-basis: 100%;
    font-size: 14px;
    color: var(--cs-text);
}

/* Signup with list choices (Quantum Lists): email, the lists as inline pills, then the button */
.quantum-cs .qlists-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
}

.quantum-cs .qlists-form .tnp-field {
    width: 100%;
    margin: 0;
}

.quantum-cs .qlists-form .tnp-field-button {
    width: auto;
}

.quantum-cs .qlists-form input.tnp-email {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font: inherit;
    font-size: 16px;
    color: var(--cs-title);
    background: var(--cs-field-bg);
    border: 1px solid var(--cs-field-border);
    border-radius: 10px;
}

.quantum-cs .qlists-form input.tnp-email::placeholder {
    color: var(--cs-text);
}

.quantum-cs .qlists-form input.tnp-submit {
    height: 50px;
    padding: 0 24px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--cs-accent-text);
    background: var(--cs-accent);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quantum-cs .qlists-form input.tnp-submit:hover,
.quantum-cs .qlists-form input.tnp-submit:focus-visible {
    background: var(--cs-accent-hover);
}

.quantum-cs .qlists-form input:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

.quantum-cs .qlists-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.quantum-cs .qlists-legend {
    float: left; /* lets the legend sit in the flex row like the pills */
    width: 100%;
    margin: 0 0 2px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-muted);
}

.quantum-cs .qlists-choices .tnp-field-list {
    width: auto;
}

/* Each list is a pill; the real checkbox stays in it (visible, keyboard and screen reader friendly) */
.quantum-cs .qlists-choices .tnp-field-list label, /* beats Newsletter's .tnp-subscription .tnp-field-checkbox label */
.quantum-cs .qcontact .qcontact-genres .wpcf7-list-item label,
.quantum-cs .qcontact .qcontact-lists .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px 6px 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cs-title);
    background: var(--cs-surface);
    border: 1px solid var(--cs-field-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.quantum-cs .qlists-choices .tnp-field-list label:has(input:checked),
.quantum-cs .qcontact .qcontact-genres .wpcf7-list-item label:has(input:checked),
.quantum-cs .qcontact .qcontact-lists .wpcf7-list-item label:has(input:checked) {
    background: var(--cs-icon-bg);
    border-color: var(--cs-accent);
}

.quantum-cs .qlists-choices .tnp-field-list input[type="checkbox"],
.quantum-cs .qcontact .qcontact-genres input[type="checkbox"],
.quantum-cs .qcontact .qcontact-lists input[type="checkbox"] {
    flex: none;
    width: 16px;
    max-width: none; /* Newsletter caps it at 1em */
    height: 16px;
    margin: 0;
    accent-color: var(--cs-accent);
}

.quantum-cs .qlists-choices .tnp-field-list label:has(input:focus-visible),
.quantum-cs .qcontact .qcontact-genres .wpcf7-list-item label:has(input:focus-visible),
.quantum-cs .qcontact .qcontact-lists .wpcf7-list-item label:has(input:focus-visible) {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

/* Checklist under the subscribe box */

/* A vertical, left-aligned list inside the signup box */
.cs-perks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.cs-perk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-title);
}

.cs-perk .q-icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--cs-icon);
    stroke-width: 2;
}

/* Audiences: photo on one side, text and a vertical list of large icons on the other */

.cs-audiences {
    display: grid;
    gap: 80px;
    padding-top: 40px;
}

.cs-audience {
    position: relative; /* anchors the eyebrow on the top border */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr); /* the photo column fits the photo */
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(20px, 3vw, 40px);
    padding-top: calc(clamp(20px, 3vw, 40px) + 18px); /* room for the eyebrow's lower half */
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 20px;
    transition: background-color 0.6s ease, border-color 0.6s ease;
}

/* Alternate the photo side (the columns flip too, so the photo column still fits the photo) */
.cs-audience:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cs-audience:nth-child(even) .cs-audience__media {
    order: 2;
}

/* The photo box maxes out at 350 x 200; photos keep their own aspect ratio inside it
   (a 3:2 photo shows at 300 x 200) and are never stretched or cropped. */
/* Photo with the benefits under it; the text column next to it has room for a call to action */
.cs-audience__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: start;
    max-width: 450px;
}

.cs-audience__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
    border-radius: 14px;
}

:root[data-theme="dark"] .cs-audience__image {
    filter: brightness(0.88);
}

.cs-audience__text {
    align-self: start;
    min-width: 0;
}

/* The audience's eyebrow sits on the card's top border, on the left, vertically centered on the line.
   Its background is the page's above the line and the card's below, so it cuts the border like a
   fieldset legend. */
.quantum-cs .cs-audience .cs-eyebrow {
    position: absolute;
    top: 0;
    left: clamp(20px, 3vw, 40px);
    width: max-content;
    margin: 0;
    padding: 0 14px;
    font-family: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
    font-size: 80px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cs-title);
    background: linear-gradient(var(--cs-bg) 50%, var(--cs-surface) 50%);
    transform: translateY(-50%);
    transition: background-color 0.6s ease, color 0.6s ease;
}

@media(max-width: 768px) {
    .quantum-cs .cs-audience .cs-eyebrow {
        top: -11px;
    }
}

.cs-audience__title {
    margin: 0 0 12px;
    font-size: clamp(28px, 3.6vw, 38px);
    line-height: 1.15;
    color: var(--cs-title);
}

.cs-audience__desc {
    margin: 0;
    font-size: 18px;
}

.cs-benefits {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.cs-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cs-benefit__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--cs-icon);
    background: var(--cs-icon-bg);
    border-radius: 12px;
}

.cs-benefit__icon .q-icon {
    width: 21px;
    height: 21px;
    stroke-width: 1.6;
}

/* Supporting detail under the photo: regular weight, so the call to action leads */
.cs-benefit__label {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--cs-body);
}

/* Calls to action under each audience's description */

/* The call to action is a panel one step further than the page in its own mode: lighter than the
   light page, darker than the dark one. Redefining the tokens here restyles everything inside it
   (forms included). */
.cs-cta {
    margin-top: 28px;
    padding: clamp(20px, 3vw, 32px);
    color: var(--cs-body);
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(38, 42, 48, 0.08);
    transition: background-color 0.6s ease, border-color 0.6s ease;
}

:root:not([data-theme="dark"]) .cs-cta {
    --cs-bg: #ffffff;
    --cs-surface: #f6f9fe;
    --cs-border: #d3dbe7;
    --cs-field-bg: #f6f9fe;
}

:root[data-theme="dark"] .cs-cta {
    --cs-bg: #1c1f24;
    --cs-surface: #262a30;
    --cs-border: #353b44;
    --cs-field-bg: rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.quantum-cs .cs-cta__title {
    margin: 0 0 6px;
    font-size: clamp(22px, 2.6vw, 26px);
    line-height: 1.2;
    color: var(--cs-title);
}

.cs-cta__text {
    margin: 0 0 20px;
    font-size: 16px;
}

.quantum-cs .cs-cta__title:last-child,
.quantum-cs .cs-cta__title + .cs-cta__form {
    margin-top: 0;
}

.quantum-cs .cs-cta__title + .cs-cta__form,
.quantum-cs .cs-cta__title + .cs-cta__button {
    margin-top: 16px;
}

.cs-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cs-accent-text);
    text-decoration: none;
    background: var(--cs-accent);
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

/* The button's short label replaces the long one on phones */
.cs-cta__label--short {
    display: none;
}

.cs-cta__button:hover,
.cs-cta__button:focus-visible {
    background: var(--cs-accent-hover);
}

.cs-cta__button:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

/* Forms in a call to action sit in the card, so no second card around them */
.cs-cta__form .qcontact-grid {
    gap: 22px 16px;
}

.quantum-cs .qcontact-hint {
    margin: 6px 0 0; /* the row gap above it is where a field's validation tip appears */
    font-size: 14px;
    color: var(--cs-muted);
}

.qcontact-optional {
    font-weight: 400;
    color: var(--cs-muted);
}

/* Writer signup: the details of "I have published a book" and "I'm working on a new book"
   show only while that box is ticked */
.quantum-cs .qlib-details {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: -8px;
    padding: 4px 0 4px 18px;
    border-left: 2px solid var(--cs-accent);
}

.quantum-cs .qlib-signup .qcontact-grid:has(input[name="published[]"]:not(:checked)) .qlib-details--published,
.quantum-cs .qlib-signup .qcontact-grid:has(input[name="in-progress[]"]:not(:checked)) .qlib-details--progress {
    display: none;
}

/* "How close is it?": one choice (exclusive checkboxes), shown as radio buttons */
.quantum-cs .qlib-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quantum-cs .qlib-progress .wpcf7-checkbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.quantum-cs .qcontact .qlib-progress input[type="checkbox"] {
    appearance: none;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    background: var(--cs-field-bg);
    border: 2px solid var(--cs-field-border);
    border-radius: 50%;
    cursor: pointer;
}

.quantum-cs .qcontact .qlib-progress input[type="checkbox"]:checked {
    background: radial-gradient(circle, var(--cs-accent) 0 42%, var(--cs-field-bg) 46%);
    border-color: var(--cs-accent);
}

.quantum-cs .qcontact .qlib-progress input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

.quantum-cs .qlib-progress .wpcf7-list-item label {
    font-weight: 500;
}

/* Honeypot: off screen for people, still filled in by bots */
.qlib-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.qlib-note {
    font-size: 16px;
    color: var(--cs-muted);
}

/* Reader survey: genres as pills, like the newsletter lists */
.quantum-cs .qcontact .qcontact-genres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.quantum-cs .qcontact .qcontact-genres .qcontact-label {
    width: 100%;
}

.quantum-cs .qcontact .qcontact-genres .wpcf7-form-control-wrap,
.quantum-cs .qcontact .qcontact-genres .wpcf7-checkbox {
    display: contents;
}

/* Reader survey: "+ Add your own" is a pill-shaped box among the genre pills */
.quantum-cs .qcontact .qcontact-genre-other .wpcf7-form-control-wrap {
    display: inline-block;
}

.quantum-cs .qcontact .qcontact-genre-other input.wpcf7-text {
    width: 170px;
    height: 38px;
    padding: 0 14px;
    font-size: 15px;
    border-style: dashed;
    border-radius: 999px;
}

/* Visually hidden, still read by screen readers */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* About */

.cs-about {
    padding-bottom: 104px;
}

.cs-about .cs-lead + .cs-lead {
    margin-top: 18px;
}

.cs-about__creed {
    font-family: "Literata Display", Georgia, serif;
    font-style: italic;
    font-size: clamp(20px, 2.6vw, 25px);
    color: var(--cs-title);
}

/* Confirmed subscription page (?nm=confirmed): only the menu and the contact form */

.cs-thanks {
    padding-top: 56px;
}

.cs-thanks .cs-contact__form {
    margin-top: 0;
}

.cs-thanks__head {
    margin: 0 0 32px;
    text-align: center;
    scroll-margin-top: 24px;
}

.cs-thanks__head .cs-heading {
    margin-bottom: 10px;
}

.cs-thanks__sub {
    margin: 0;
    font-size: clamp(17px, 2.1vw, 20px);
    line-height: 1.5;
    color: var(--cs-body);
}

/* Contact form (Quantum Contact, built on Contact Form 7) */

.cs-contact {
    padding-top: 0;
    padding-bottom: 104px;
}

.cs-contact__form {
    max-width: 720px;
    margin: 40px auto 0;
    padding: clamp(20px, 4vw, 40px);
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 20px;
    transition: background-color 0.6s ease, border-color 0.6s ease;
}

/* Checkboxes and radios never shrink next to a long label (flex rows squeeze them otherwise) */
.quantum-cs input[type="checkbox"],
.quantum-cs input[type="radio"] {
    flex-shrink: 0;
}

.qcontact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px; /* rows leave room for a validation tip under each field */
}

.qcontact-full {
    grid-column: 1 / -1;
}

.qcontact-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qcontact-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--cs-title);
}

/* Required-field asterisks */
.qcontact-required {
    margin-left: 3px;
    font-weight: 700;
    color: var(--cs-icon);
}

.quantum-cs .qcontact .wpcf7-form-control-wrap {
    display: block;
    position: relative;
}

.quantum-cs .qcontact input.wpcf7-text,
.quantum-cs .qcontact input.wpcf7-email,
.quantum-cs .qcontact select.wpcf7-select,
.quantum-cs .qcontact textarea.wpcf7-textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;
    color: var(--cs-title);
    background: var(--cs-field-bg);
    border: 1px solid var(--cs-field-border);
    border-radius: 10px;
}

.quantum-cs .qcontact input.wpcf7-text,
.quantum-cs .qcontact input.wpcf7-email,
.quantum-cs .qcontact select.wpcf7-select {
    height: 50px;
}

.quantum-cs .qcontact textarea.wpcf7-textarea {
    min-height: 150px;
    resize: vertical;
}

.quantum-cs .qcontact :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

.quantum-cs .qcontact .wpcf7-list-item {
    margin: 0;
}

.quantum-cs .qcontact .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--cs-title);
    cursor: pointer;
}

.quantum-cs .qcontact input[type="checkbox"] {
    flex: none; /* a long label must not squeeze the box */
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--cs-accent);
}

.quantum-cs .qcontact .qcontact-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quantum-cs .qcontact input.wpcf7-submit {
    height: 50px;
    padding: 0 28px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--cs-accent-text);
    background: var(--cs-accent);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quantum-cs .qcontact input.wpcf7-submit:hover,
.quantum-cs .qcontact input.wpcf7-submit:focus-visible {
    background: var(--cs-accent-hover);
}

.quantum-cs .qcontact .wpcf7-form-control.wpcf7-not-valid {
    border-color: #c4553d;
}

/* Validation tips float in the row gap under their field. CF7 adds and removes them as fields
   blur, and in the flow that moved everything below mid-click (a click on a list pill or the
   Send button right after fixing a field could miss). */
.quantum-cs .qcontact .wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    left: 2px;
    margin-top: 3px;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    color: var(--cs-error);
}

.quantum-cs .qcontact .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--cs-body);
    border: 1px solid var(--cs-border);
    border-radius: 10px;
}

/* Contact form list choices: pills like the signup form's, shown only while "Sign me up" is ticked */
.quantum-cs .qcontact .qcontact-lists {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: -8px;
    padding-left: 30px; /* under the "Sign me up" text, past its checkbox */
}

.quantum-cs .qcontact .qcontact-lists .wpcf7-form-control-wrap,
.quantum-cs .qcontact .qcontact-lists .wpcf7-checkbox {
    display: contents;
}

.qcontact-lists-label {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-muted);
}

.quantum-cs .qcontact-grid:has(.qcontact-updates input:not(:checked)) .qcontact-lists {
    display: none;
}

/* CF7's spinner animates forever even while hidden; only let it spin during a submission */
.quantum-cs .wpcf7-spinner {
    animation-play-state: paused;
}

.quantum-cs .wpcf7-form.submitting .wpcf7-spinner,
.quantum-cs .wpcf7-form.submitting .wpcf7-spinner::before {
    animation-play-state: running;
}

.quantum-cs .wpcf7-spinner::before {
    animation-play-state: paused;
}

.quantum-cs .qcontact.sent .wpcf7-response-output {
    border-color: var(--cs-accent);
}

.quantum-cs .qcontact:is(.invalid, .unaccepted, .failed, .spam) .wpcf7-response-output {
    border-color: #c4553d;
}

/* Ornamental divider (inc/divider.php): calligraphic flourishes around a faceted gold crystal */

.cs-divider {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    color: var(--cs-text);
}

.cs-divider__ornament {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.cs-divider__flourish {
    opacity: 0.5;
}

.cs-divider__swash {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cs-divider__dot {
    fill: currentColor;
}

/* Crystal: gold facets, lightest top right */
.cs-divider__facet--a { fill: #f5d57a; }
.cs-divider__facet--b { fill: #fbe9b0; }
.cs-divider__facet--c { fill: #e2a93a; }
.cs-divider__facet--d { fill: #c58b1d; }

.cs-divider__sparkle {
    fill: #fbe9b0;
}

:root[data-theme="light"] .cs-divider__sparkle {
    fill: var(--cs-accent-hover);
}

.cs-divider--before {
    margin-bottom: 40px;
}

/* Between the signup intro and "Don't. Miss. This." (whose own top margin spaces it below) */
.cs-divider--mid {
    margin-top: 64px;
}

.cs-divider--after {
    margin-top: 56px;
}

.cs-footer {
    padding: 28px 16px;
    font-size: 14px;
    text-align: center;
    color: var(--cs-text);
    border-top: 1px solid var(--cs-border);
}

@media (max-width: 760px) {
    .cs-section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .quantum-cs .cs-title::after {
        bottom: -0.5em;
    }

    .cs-audience,
    .cs-audience:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .cs-audience:nth-child(even) .cs-audience__media {
        order: 0;
    }

    .cs-audience__media {
        justify-self: center;
        max-width: 100%;
    }

    /* minmax(0, ...): a plain 1fr column can't shrink below its inputs' default width (size="40",
       about 255px), which pushed the writer form out of its card on narrow phones */
    .qcontact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-cta__label--long {
        display: none;
    }

    .cs-cta__label--short {
        display: inline;
    }
}

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

    .cs-intro__item:hover,
    .cs-intro__item:focus-within {
        transform: none;
    }

    body.quantum-cs,
    .cs-nav,
    .cs-theme-toggle,
    .cs-theme-toggle__icon,
    .cs-theme-toggle__knob,
    .cs-intro__item,
    .cs-hero-band,
    .cs-audience,
    .cs-audience .cs-eyebrow,
    .cs-contact__form,
    .binary-field__layer {
        transition: none;
    }
}