/* ===========================================================================
   CyOku — public marketing site design system
   ---------------------------------------------------------------------------
   Scope: the public, signed-out-friendly surfaces (home + audience/product
   pages). Loaded INSTEAD of cyoku-ui.css on those pages so the legacy
   `!important` overrides for the app shell cannot leak in.

   Structure
     1.  Tokens (colour, type, space, radius, shadow, motion)
     2.  Base + typography
     3.  Layout primitives (section, container, grid, eyebrow, headings)
     4.  Buttons
     5.  Cards + panels
     6.  Brand lockup (mirrors cyoku-ui.css so this file stands alone)
     7.  Navigation (desktop bar + mobile offcanvas)
     8.  Hero
     9.  Product previews (chat / lesson / report mockups)
     10. Section patterns (products, story, roles, trust, CTA)
     11. Course cards + rails
     12. Footer
     13. Motion + reduced motion
     14. Responsive
   =========================================================================== */

/* ===========================================================================
   1. TOKENS
   Palette rationale: navy carries authority, blue carries action, teal carries
   the AI/learning story, amber carries encouragement. Every text token below
   clears WCAG AA on its intended background (values noted inline).
   =========================================================================== */
:root {
    /* Brand — navy family */
    --cy-navy: #0B1B3A;
    --cy-navy-800: #12264E;
    --cy-navy-700: #1B3566;
    --cy-navy-600: #24457E;

    /* Action — blue family (Lecture) */
    --cy-blue: #1D4ED8;          /* 6.3:1 on white */
    --cy-blue-600: #2563EB;
    --cy-blue-100: #DBE6FF;
    --cy-blue-50: #EFF4FF;

    /* AI / learning — teal family (AI Teacher) */
    --cy-teal: #0F766E;          /* 4.9:1 on white */
    --cy-teal-500: #14B8A6;
    --cy-teal-100: #CCF0EA;
    --cy-teal-50: #E9F8F6;

    /* Practice — violet family (Test Bank) */
    --cy-violet: #5B21B6;        /* 8.4:1 on white */
    --cy-violet-500: #7C3AED;
    --cy-violet-100: #E6DBFF;
    --cy-violet-50: #F5F0FF;

    /* Assessment / encouragement — amber family (Mock Exam) */
    --cy-amber: #B45309;         /* 5.0:1 on white */
    --cy-amber-500: #F59E0B;
    --cy-amber-400: #FBBF24;
    --cy-amber-100: #FDE9C4;
    --cy-amber-50: #FFF8EC;

    /* Success / support */
    --cy-green: #15803D;
    --cy-green-50: #ECFAF0;
    --cy-rose: #BE123C;

    /* Neutrals */
    --cy-ink: #0B1220;           /* headings — 18:1 on white */
    --cy-body: #3A4A61;          /* body copy — 8.9:1 on white */
    --cy-muted: #5C6B82;         /* secondary — 5.6:1 on white */
    --cy-line: #E3E9F2;
    --cy-line-soft: #EDF1F7;
    --cy-surface: #FFFFFF;
    --cy-surface-2: #F6F9FC;
    --cy-surface-3: #EDF2F9;

    /* On-dark neutrals */
    --cy-on-dark: #F4F8FF;
    --cy-on-dark-muted: #B7C6DE; /* 7.4:1 on --cy-navy */
    --cy-on-dark-line: rgba(255, 255, 255, .16);
    --cy-on-dark-fill: rgba(255, 255, 255, .07);

    /* Radii */
    --cy-r-xs: 8px;
    --cy-r-sm: 12px;
    --cy-r: 18px;
    --cy-r-lg: 26px;
    --cy-r-pill: 999px;

    /* Elevation — tuned low and wide so cards feel lifted, not stickered */
    --cy-shadow-xs: 0 1px 2px rgba(11, 27, 58, .06);
    --cy-shadow-sm: 0 1px 2px rgba(11, 27, 58, .05), 0 4px 12px rgba(11, 27, 58, .05);
    --cy-shadow: 0 2px 4px rgba(11, 27, 58, .04), 0 14px 34px rgba(11, 27, 58, .08);
    --cy-shadow-lg: 0 8px 18px rgba(11, 27, 58, .07), 0 34px 76px rgba(11, 27, 58, .14);

    /* Type */
    --cy-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cy-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Layout */
    --cy-container: 1180px;
    --cy-container-wide: 1320px;
    --cy-gutter: clamp(1.15rem, 4vw, 2rem);
    --cy-section-y: clamp(3.5rem, 6vw, 6.25rem);
    --cy-nav-h: 4.5rem;

    /* Motion */
    --cy-ease: cubic-bezier(.22, .68, .36, 1);
    --cy-fast: .16s;
    --cy-med: .28s;
}

/* ===========================================================================
   2. BASE + TYPOGRAPHY
   =========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

/* A class that sets `display` outruns the UA's `[hidden] { display: none }`,
   which silently reveals anything hidden via the attribute. Settle it once. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--cy-nav-h) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body.cy-public {
    margin: 0;
    font-family: var(--cy-font);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cy-body);
    background: var(--cy-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: "cv05" 1, "ss01" 1;
}

/* Headings — one tight, confident scale. Fluid so nothing needs a breakpoint.

   Wrapped in :where() so these are genuine defaults with no specificity of their
   own. As a plain `.cy-public h1` they outranked every single-class component
   rule, which is how a heading on a dark panel silently kept the body ink colour
   even though its own class asked for white. Same reason the anchor defaults
   below are written this way. */
:where(.cy-public h1,
       .cy-public h2,
       .cy-public h3,
       .cy-public h4,
       .cy-public h5) {
    margin: 0 0 .6rem;
    color: var(--cy-ink);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.15;
    text-wrap: balance;
}

.cy-display {
    font-size: clamp(2.3rem, 1.35rem + 3.5vw, 3.85rem);
    line-height: 1.05;
    letter-spacing: -.033em;
}

.cy-h2 {
    font-size: clamp(1.8rem, 1.2rem + 2.1vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -.028em;
}

.cy-h3 {
    font-size: clamp(1.2rem, 1.06rem + .5vw, 1.42rem);
    line-height: 1.3;
    letter-spacing: -.016em;
    font-weight: 750;
}

.cy-h4 {
    font-size: 1.06rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -.012em;
}

.cy-public p { margin: 0 0 1rem; }
.cy-public p:last-child { margin-bottom: 0; }

.cy-lead {
    font-size: clamp(1.05rem, .99rem + .34vw, 1.22rem);
    line-height: 1.65;
    color: var(--cy-body);
    max-width: 62ch;
}

.cy-text-sm { font-size: .925rem; line-height: 1.62; }
.cy-text-xs { font-size: .82rem; line-height: 1.55; }
.cy-muted { color: var(--cy-muted); }

.cy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--cy-teal);
    margin-bottom: .85rem;
}

.cy-eyebrow::before {
    content: "";
    width: 1.35rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .6;
}

:where(.cy-public) a { color: var(--cy-blue); text-decoration: none; }
:where(.cy-public) a:hover { text-decoration: underline; }

.cy-public img { max-width: 100%; height: auto; display: block; }

.cy-public :focus-visible {
    outline: 3px solid var(--cy-blue-600);
    outline-offset: 3px;
    border-radius: 6px;
}

.cy-on-dark-block :focus-visible { outline-color: var(--cy-amber-400); }

/* Available to screen readers, removed from the visual layout. */
.cy-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
.cy-skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: .7rem 1.15rem;
    background: var(--cy-navy);
    color: #fff;
    border-radius: var(--cy-r-sm);
    font-weight: 700;
    transition: top var(--cy-fast) var(--cy-ease);
}
.cy-skip:focus { top: 1rem; text-decoration: none; color: #fff; }

/* ===========================================================================
   3. LAYOUT PRIMITIVES
   =========================================================================== */
.cy-wrap {
    width: 100%;
    max-width: var(--cy-container);
    margin-inline: auto;
    padding-inline: var(--cy-gutter);
}

.cy-wrap--wide { max-width: var(--cy-container-wide); }

.cy-section {
    padding-block: var(--cy-section-y);
    position: relative;
}

.cy-section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.cy-section--soft { background: var(--cy-surface-2); }

/* The catalogue is a tool, not a document: a white filter panel and white result
   cards on a white page have no edges at all. A soft tinted ground gives every
   panel one, the same way the sign-in card gets one. */
.cy-section--catalogue {
    background:
        radial-gradient(700px 400px at 8% -14%, rgba(20, 184, 166, .07), transparent 62%),
        linear-gradient(180deg, #EDF2F9 0%, #E4EBF6 100%);
}
.cy-section--tinted { background: linear-gradient(180deg, var(--cy-surface) 0%, var(--cy-surface-2) 100%); }

.cy-section--dark {
    background:
        radial-gradient(760px 420px at 8% -10%, rgba(20, 184, 166, .20), transparent 62%),
        radial-gradient(700px 460px at 96% 6%, rgba(37, 99, 235, .22), transparent 58%),
        linear-gradient(160deg, var(--cy-navy) 0%, var(--cy-navy-800) 62%, #16305F 100%);
    color: var(--cy-on-dark);
}

.cy-section--dark h1,
.cy-section--dark h2,
.cy-section--dark h3,
.cy-section--dark h4 { color: #fff; }

.cy-section--dark p,
.cy-section--dark .cy-lead { color: var(--cy-on-dark-muted); }
.cy-section--dark .cy-eyebrow { color: var(--cy-teal-500); }

.cy-section-head {
    max-width: 46rem;
    margin-bottom: clamp(2rem, 3.4vw, 3.1rem);
}

.cy-section-head--center {
    margin-inline: auto;
    text-align: center;
}

.cy-section-head--center .cy-lead { margin-inline: auto; }

.cy-grid { display: grid; gap: clamp(1rem, 1.7vw, 1.5rem); }
.cy-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cy-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cy-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cy-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4.5vw, 4.25rem);
    align-items: center;
}

.cy-split--wide-left { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
.cy-split--wide-right { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }

.cy-stack > * + * { margin-top: var(--cy-stack-gap, 1rem); }
.cy-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cy-center { text-align: center; }

.cy-divider {
    height: 1px;
    border: 0;
    background: var(--cy-line);
    margin: 0;
}

/* ===========================================================================
   4. BUTTONS
   =========================================================================== */
.cy-btn {
    --_bg: var(--cy-blue);
    --_fg: #fff;
    --_bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .82rem 1.5rem;
    min-height: 3rem;
    border-radius: var(--cy-r-pill);
    border: 1.5px solid var(--_bd);
    background: var(--_bg);
    color: var(--_fg);
    font-family: inherit;
    font-size: .975rem;
    font-weight: 700;
    letter-spacing: -.008em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--cy-fast) var(--cy-ease),
                box-shadow var(--cy-med) var(--cy-ease),
                background-color var(--cy-fast) var(--cy-ease),
                border-color var(--cy-fast) var(--cy-ease),
                color var(--cy-fast) var(--cy-ease);
}

.cy-btn:hover { text-decoration: none; color: var(--_fg); transform: translateY(-2px); }
.cy-btn:active { transform: translateY(0); }

.cy-btn--primary {
    --_bg: var(--cy-blue);
    box-shadow: 0 8px 22px rgba(29, 78, 216, .28);
}
.cy-btn--primary:hover {
    --_bg: #1A44BE;
    box-shadow: 0 14px 30px rgba(29, 78, 216, .34);
}

/* Warm CTA — used for the single dominant action in dark heroes/bands. */
.cy-btn--accent {
    --_bg: var(--cy-amber-400);
    --_fg: var(--cy-navy);
    box-shadow: 0 8px 24px rgba(180, 83, 9, .3);
}
.cy-btn--accent:hover { --_bg: #FFCE4F; box-shadow: 0 14px 32px rgba(180, 83, 9, .36); }

.cy-btn--teal { --_bg: var(--cy-teal); }
.cy-btn--teal:hover { --_bg: #0C635C; }

.cy-btn--outline {
    --_bg: transparent;
    --_fg: var(--cy-navy);
    --_bd: #C9D5E8;
}
.cy-btn--outline:hover { --_bg: var(--cy-blue-50); --_bd: var(--cy-blue); --_fg: var(--cy-blue); }

/* Quiet third option -- "back to home" next to a real call to action. */
.cy-btn--ghost {
    --_bg: transparent;
    --_bd: transparent;
    --_fg: var(--cy-muted);
}
.cy-btn--ghost:hover { --_bg: var(--cy-surface-3); --_fg: var(--cy-ink); }

.cy-btn--ghost-dark {
    --_bg: rgba(255, 255, 255, .08);
    --_fg: #fff;
    --_bd: rgba(255, 255, 255, .34);
}
.cy-btn--ghost-dark:hover { --_bg: rgba(255, 255, 255, .16); --_bd: rgba(255, 255, 255, .6); }

.cy-btn--sm { padding: .55rem 1.05rem; min-height: 2.4rem; font-size: .875rem; }
.cy-btn--lg { padding: 1rem 1.9rem; min-height: 3.4rem; font-size: 1.04rem; }
.cy-btn--block { width: 100%; }

/* Text link with a moving arrow — the "learn more" affordance across the site */
.cy-link {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    font-weight: 700;
    font-size: .94rem;
    color: var(--cy-blue);
    text-decoration: none;
}
.cy-link i, .cy-link svg { transition: transform var(--cy-fast) var(--cy-ease); }
.cy-link:hover { text-decoration: none; }
.cy-link:hover i, .cy-link:hover svg { transform: translateX(4px); }
.cy-link--teal { color: var(--cy-teal); }
.cy-link--on-dark { color: var(--cy-teal-500); }

/* ===========================================================================
   5. CARDS + PANELS
   =========================================================================== */
.cy-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--cy-surface);
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    padding: clamp(1.35rem, 2vw, 1.75rem);
    box-shadow: var(--cy-shadow-sm);
    transition: transform var(--cy-med) var(--cy-ease),
                box-shadow var(--cy-med) var(--cy-ease),
                border-color var(--cy-med) var(--cy-ease);
}

.cy-card--link:hover,
.cy-card--link:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--cy-shadow);
    border-color: #CFDCEF;
}

.cy-card__title { margin-bottom: .4rem; }
.cy-card__text { color: var(--cy-body); font-size: .945rem; line-height: 1.62; margin-bottom: 0; }
.cy-card__foot { margin-top: auto; padding-top: 1.05rem; }

/* Stretched click target keeps the whole card clickable without nesting links */
.cy-stretch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Icon tile — the colour is the product's identity, repeated site-wide */
.cy-tile {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    font-size: 1.28rem;
    margin-bottom: 1.05rem;
    flex: 0 0 auto;
}

.cy-tile--teal   { background: var(--cy-teal-50);   color: var(--cy-teal); }
.cy-tile--blue   { background: var(--cy-blue-50);   color: var(--cy-blue); }
.cy-tile--violet { background: var(--cy-violet-50); color: var(--cy-violet); }
.cy-tile--amber  { background: var(--cy-amber-50);  color: var(--cy-amber); }
.cy-tile--green  { background: var(--cy-green-50);  color: var(--cy-green); }
.cy-tile--navy   { background: #E9EEF8;             color: var(--cy-navy); }
.cy-tile--sm     { width: 2.4rem; height: 2.4rem; font-size: 1.02rem; border-radius: 11px; margin-bottom: .75rem; }

.cy-tile--on-dark {
    background: var(--cy-on-dark-fill);
    border: 1px solid var(--cy-on-dark-line);
    color: var(--cy-teal-500);
}

/* Product card — a top accent rail carries the product colour */
.cy-product {
    padding-top: clamp(1.5rem, 2.2vw, 1.9rem);
    overflow: hidden;
}

.cy-product::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--_accent, var(--cy-blue));
}

.cy-product--ai     { --_accent: linear-gradient(90deg, #0F766E, #14B8A6); }
.cy-product--lect   { --_accent: linear-gradient(90deg, #1D4ED8, #60A5FA); }
.cy-product--test   { --_accent: linear-gradient(90deg, #5B21B6, #A78BFA); }
.cy-product--exam   { --_accent: linear-gradient(90deg, #B45309, #FBBF24); }

/* Compact preview inside a product card. Each of the four products gets a
   small, honest sketch of what using it looks like, so the card is readable
   before a word of copy is. */
.cy-product__preview {
    margin: 1.1rem 0 0;
    padding: .8rem .85rem;
    border-radius: 14px;
    background: var(--cy-surface-2);
    border: 1px solid var(--cy-line-soft);
}

/* Adaptive path — Personalized Learning */
.cy-path { display: flex; align-items: center; gap: .3rem; }
.cy-path__node {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .62rem;
    font-weight: 800;
    background: #fff;
    border: 1.5px solid var(--cy-line);
    color: var(--cy-muted);
}
.cy-path__node--done { background: var(--cy-teal); border-color: var(--cy-teal); color: #fff; }
.cy-path__node--now {
    background: #fff;
    border-color: var(--cy-teal);
    color: var(--cy-teal);
    box-shadow: 0 0 0 3px var(--cy-teal-50);
}
.cy-path__link { flex: 1 1 auto; height: 2px; border-radius: 2px; background: var(--cy-line); }
.cy-path__link--done { background: var(--cy-teal); }

/* Stacked lesson rows — Courses */
.cy-mini-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
    font-size: .78rem;
    color: var(--cy-muted);
}
.cy-mini-row i { width: 1rem; text-align: center; font-size: .74rem; }
.cy-mini-row b { color: var(--cy-ink); font-weight: 650; }
.cy-mini-row span { margin-left: auto; font-size: .7rem; }

/* Answer option — Practice */
.cy-mini-opt {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .55rem;
    border-radius: 9px;
    border: 1px solid var(--cy-line);
    background: #fff;
    font-size: .78rem;
    color: var(--cy-body);
    margin-bottom: .3rem;
}
.cy-mini-opt:last-child { margin-bottom: 0; }
.cy-mini-opt--right { border-color: var(--cy-green); background: var(--cy-green-50); color: #14532D; font-weight: 650; }
.cy-mini-opt i { font-size: .68rem; }

.cy-product__list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .42rem;
}

.cy-product__list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--cy-muted);
}

.cy-product__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .48em;
    width: .72rem;
    height: .42rem;
    border-left: 2px solid var(--cy-teal);
    border-bottom: 2px solid var(--cy-teal);
    transform: rotate(-45deg);
}

/* Badges / chips */
.cy-chip {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .34rem .72rem;
    border-radius: var(--cy-r-pill);
    font-size: .775rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.3;
    white-space: nowrap;
}

.cy-chip--teal   { background: var(--cy-teal-50);   color: var(--cy-teal); }
.cy-chip--blue   { background: var(--cy-blue-50);   color: var(--cy-blue); }
.cy-chip--violet { background: var(--cy-violet-50); color: var(--cy-violet); }
.cy-chip--amber  { background: var(--cy-amber-50);  color: var(--cy-amber); }
.cy-chip--green  { background: var(--cy-green-50);  color: var(--cy-green); }
.cy-chip--neutral{ background: var(--cy-surface-3); color: var(--cy-navy-700); }
.cy-chip--on-dark{ background: var(--cy-on-dark-fill); color: #fff; border: 1px solid var(--cy-on-dark-line); }

/* ===========================================================================
   6. BRAND LOCKUP
   Mirrors the canonical rules in cyoku-ui.css so public pages can load this
   stylesheet on its own. Keep the two in sync if the brand changes.
   =========================================================================== */
.cyoku-lockup {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.cyoku-mark { display: block; width: auto; height: 32px; flex: 0 0 auto; }

.cyoku-wordmark {
    font-family: var(--cy-font);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -.02em;
}

.cyoku-wordmark__cy { color: var(--cy-navy); }
.cyoku-wordmark__oku { color: var(--cy-teal); }
.cyoku-lockup--dark .cyoku-wordmark__cy { color: #fff; }
.cyoku-lockup--dark .cyoku-wordmark__oku { color: #2DD4BF; }
.cyoku-lockup--nav .cyoku-mark { height: 30px; }
.cyoku-lockup--nav .cyoku-wordmark { font-size: 1.28rem; }
.cyoku-lockup--lg .cyoku-mark { height: 40px; }
.cyoku-lockup--lg .cyoku-wordmark { font-size: 1.7rem; }

/* ===========================================================================
   7. NAVIGATION
   =========================================================================== */
.cy-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--cy-nav-h);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--cy-med) var(--cy-ease),
                border-color var(--cy-med) var(--cy-ease),
                background-color var(--cy-med) var(--cy-ease);
}

.cy-nav.is-stuck {
    border-bottom-color: var(--cy-line);
    box-shadow: 0 6px 24px rgba(11, 27, 58, .07);
    background: rgba(255, 255, 255, .95);
}

.cy-nav__inner {
    width: 100%;
    max-width: var(--cy-container-wide);
    margin-inline: auto;
    padding-inline: var(--cy-gutter);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cy-nav__brand { flex: 0 0 auto; margin-right: .35rem; }
.cy-nav__brand:hover { text-decoration: none; }

.cy-nav__menu {
    display: flex;
    align-items: center;
    gap: .1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cy-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .78rem;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    border-radius: 10px;
    color: var(--cy-navy-700);
    font-size: .935rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--cy-fast) var(--cy-ease), color var(--cy-fast) var(--cy-ease);
}

.cy-nav__link:hover,
.cy-nav__link[aria-expanded="true"] {
    background: var(--cy-surface-3);
    color: var(--cy-navy);
    text-decoration: none;
}

.cy-nav__link[aria-current="page"] { color: var(--cy-blue); }

.cy-nav__caret { font-size: .62rem; opacity: .65; transition: transform var(--cy-fast) var(--cy-ease); }
.cy-nav__link[aria-expanded="true"] .cy-nav__caret { transform: rotate(180deg); }

.cy-nav__spacer { flex: 1 1 auto; }

.cy-nav__actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.cy-nav__icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--cy-navy-700);
    font-size: 1.05rem;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    transition: background-color var(--cy-fast) var(--cy-ease), color var(--cy-fast) var(--cy-ease);
}
.cy-nav__icon-btn:hover { background: var(--cy-surface-3); color: var(--cy-navy); text-decoration: none; }

.cy-nav__count {
    position: absolute;
    top: .18rem;
    right: .18rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .25rem;
    border-radius: var(--cy-r-pill);
    background: var(--cy-rose);
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    line-height: 1.05rem;
    text-align: center;
}

/* Dropdown panel — one shared shell for Explore / Solutions / account */
.cy-pop {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    z-index: 1040;
    min-width: 17rem;
    padding: .6rem;
    background: #fff;
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    box-shadow: var(--cy-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--cy-fast) var(--cy-ease),
                transform var(--cy-fast) var(--cy-ease),
                visibility var(--cy-fast);
}

.cy-pop--right { left: auto; right: 0; }
.cy-pop--wide { min-width: 32rem; padding: .8rem; }

.cy-nav__item { position: relative; }
.cy-nav__item.is-open > .cy-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cy-pop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; }

.cy-pop__item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: 12px;
    color: var(--cy-ink);
    text-decoration: none;
    transition: background-color var(--cy-fast) var(--cy-ease);
}
.cy-pop__item:hover { background: var(--cy-surface-2); text-decoration: none; }

.cy-pop__item i { flex: 0 0 auto; margin-top: .18rem; width: 1.1rem; text-align: center; font-size: .96rem; }
.cy-pop__name { display: block; font-weight: 700; font-size: .915rem; line-height: 1.35; }
.cy-pop__desc { display: block; font-size: .795rem; line-height: 1.4; color: var(--cy-muted); }

.cy-pop__sep { height: 1px; background: var(--cy-line-soft); margin: .4rem .3rem; }

/* Nav search */
.cy-nav__search { flex: 1 1 auto; max-width: 22rem; }

.cy-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.7rem;
    padding: 0 .35rem 0 .95rem;
    border-radius: var(--cy-r-pill);
    border: 1.5px solid var(--cy-line);
    background: var(--cy-surface-2);
    transition: border-color var(--cy-fast) var(--cy-ease), background-color var(--cy-fast) var(--cy-ease);
}
.cy-search:focus-within { border-color: var(--cy-blue); background: #fff; }

.cy-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .9rem;
    color: var(--cy-ink);
    outline: none;
}
.cy-search input::placeholder { color: var(--cy-muted); }

.cy-search button {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: var(--cy-navy);
    color: #fff;
    cursor: pointer;
    font-size: .82rem;
    transition: background-color var(--cy-fast) var(--cy-ease);
}
.cy-search button:hover { background: var(--cy-blue); }

.cy-nav__toggle { display: none; }

/* Mobile drawer */
.cy-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(23rem, 92vw);
    z-index: 1060;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--cy-med) var(--cy-ease);
    box-shadow: var(--cy-shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cy-drawer.is-open { transform: translateX(0); }

.cy-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--cy-gutter);
    border-bottom: 1px solid var(--cy-line);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.cy-drawer__body { padding: 1.15rem var(--cy-gutter) 2.5rem; }

.cy-drawer__label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cy-muted);
    margin: 1.4rem 0 .5rem;
}
.cy-drawer__label:first-child { margin-top: 0; }

.cy-drawer__link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .1rem;
    color: var(--cy-ink);
    font-weight: 650;
    font-size: 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--cy-line-soft);
}
.cy-drawer__link:hover { color: var(--cy-blue); text-decoration: none; }
.cy-drawer__link i { width: 1.25rem; text-align: center; color: var(--cy-muted); }

.cy-scrim {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(11, 18, 32, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--cy-med) var(--cy-ease), visibility var(--cy-med);
}
.cy-scrim.is-open { opacity: 1; visibility: visible; }

body.cy-no-scroll { overflow: hidden; }

/* ===========================================================================
   8. HERO
   =========================================================================== */
.cy-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 4% -18%, rgba(20, 184, 166, .22), transparent 60%),
        radial-gradient(820px 560px at 98% -6%, rgba(37, 99, 235, .26), transparent 58%),
        radial-gradient(700px 420px at 60% 116%, rgba(124, 58, 237, .16), transparent 60%),
        linear-gradient(158deg, #08152F 0%, var(--cy-navy) 40%, #12305E 100%);
    color: var(--cy-on-dark);
    padding-block: clamp(3rem, 5.5vw, 5.5rem) clamp(3.5rem, 6vw, 6rem);
}

.cy-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 3.5rem;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .06));
    pointer-events: none;
}

.cy-hero h1 { color: #fff; }
.cy-hero p { color: #C6D5EC; }

.cy-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(2.25rem, 4.5vw, 4rem);
    align-items: center;
}

.cy-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .95rem .42rem .5rem;
    border-radius: var(--cy-r-pill);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #E4EEFF;
    font-size: .82rem;
    font-weight: 650;
    margin-bottom: 1.35rem;
}

.cy-hero__badge b {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: var(--cy-r-pill);
    background: var(--cy-teal-500);
    color: #06231F;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.cy-hero__lead {
    font-size: clamp(1.06rem, 1rem + .4vw, 1.24rem);
    line-height: 1.62;
    color: #C6D5EC;
    max-width: 34rem;
    margin-bottom: 1.85rem;
}

.cy-hero__note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.15rem;
    font-size: .87rem;
    color: #A9BDD9;
}
.cy-hero__note i { color: var(--cy-teal-500); }

.cy-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: 2.1rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, .13);
    list-style: none;
    padding-left: 0;
}

.cy-hero__proof li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #CFDDF2;
}
.cy-hero__proof i { color: var(--cy-teal-500); font-size: .95rem; }

/* Hero visual stack */
.cy-hero__visual { position: relative; }

.cy-hero__photo {
    position: relative;
    margin: 1.5rem 1.5rem 3rem 1.5rem;
    border-radius: var(--cy-r-lg);
    overflow: hidden;
    box-shadow: var(--cy-shadow-lg);
    border: 1px solid rgba(255, 255, 255, .14);
    aspect-ratio: 4 / 3;
}
.cy-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.cy-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(11, 27, 58, 0) 40%, rgba(11, 27, 58, .5));
}

/* Floating product cards over the photo */
.cy-float {
    position: absolute;
    z-index: 2;
    background: #fff;
    border-radius: var(--cy-r);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 18px 44px rgba(3, 12, 32, .34);
    padding: .85rem 1rem;
}

.cy-float--chat { left: -2.25rem; bottom: 3.25rem; width: min(17.5rem, 72%); }
.cy-float--score { right: -1.75rem; bottom: -1.5rem; width: min(11.75rem, 52%); }

/* ===========================================================================
   9. PRODUCT PREVIEWS (mockups — visual representation, not live product)
   =========================================================================== */
.cy-mock {
    background: #fff;
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r-lg);
    box-shadow: var(--cy-shadow-lg);
    overflow: hidden;
}

.cy-mock--on-dark {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 30px 80px rgba(3, 12, 32, .5);
}

.cy-mock__bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    background: var(--cy-surface-2);
    border-bottom: 1px solid var(--cy-line);
}

.cy-mock__dots { display: flex; gap: .3rem; }
.cy-mock__dots span { width: .55rem; height: .55rem; border-radius: 50%; background: #D6DEEA; }

.cy-mock__title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--cy-navy-700);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.cy-mock__body { padding: 1.1rem; }

/* Chat bubbles */
.cy-msg { display: flex; gap: .65rem; margin-bottom: .8rem; align-items: flex-start; }
.cy-msg:last-child { margin-bottom: 0; }

.cy-msg__av {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 800;
}
.cy-msg__av--ai { background: var(--cy-teal); color: #fff; }
.cy-msg__av--me { background: var(--cy-surface-3); color: var(--cy-navy); }

.cy-msg__bubble {
    max-width: 84%;
    padding: .62rem .85rem;
    border-radius: 14px;
    font-size: .875rem;
    line-height: 1.55;
    background: var(--cy-teal-50);
    color: #12403C;
    border: 1px solid var(--cy-teal-100);
}

.cy-msg--me { flex-direction: row-reverse; }
.cy-msg--me .cy-msg__bubble {
    background: var(--cy-surface-2);
    color: var(--cy-ink);
    border-color: var(--cy-line);
}

.cy-msg__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }

.cy-mini-chip {
    padding: .28rem .6rem;
    border-radius: var(--cy-r-pill);
    border: 1px solid var(--cy-teal-100);
    background: #fff;
    color: var(--cy-teal);
    font-size: .74rem;
    font-weight: 700;
}

/* Typing indicator */
.cy-typing { display: inline-flex; gap: .22rem; align-items: center; padding: .2rem 0; }
.cy-typing span {
    width: .38rem; height: .38rem; border-radius: 50%;
    background: var(--cy-teal);
    animation: cy-bounce 1.25s infinite ease-in-out;
}
.cy-typing span:nth-child(2) { animation-delay: .16s; }
.cy-typing span:nth-child(3) { animation-delay: .32s; }

@keyframes cy-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-.3rem); opacity: 1; }
}

/* Meters / progress */
.cy-meter { margin-bottom: .85rem; }
.cy-meter:last-child { margin-bottom: 0; }

.cy-meter__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: .35rem;
    font-size: .83rem;
}
.cy-meter__name { font-weight: 650; color: var(--cy-ink); }
.cy-meter__val { font-weight: 800; color: var(--cy-navy); font-variant-numeric: tabular-nums; }

.cy-meter__track {
    height: .5rem;
    border-radius: var(--cy-r-pill);
    background: var(--cy-surface-3);
    overflow: hidden;
}

.cy-meter__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    width: 0;
    background: linear-gradient(90deg, var(--cy-teal), var(--cy-teal-500));
    transition: width 1.1s var(--cy-ease);
}
.cy-meter--warn .cy-meter__fill { background: linear-gradient(90deg, var(--cy-amber), var(--cy-amber-400)); }
.cy-meter--blue .cy-meter__fill { background: linear-gradient(90deg, var(--cy-blue), #60A5FA); }
.cy-meter--violet .cy-meter__fill { background: linear-gradient(90deg, var(--cy-violet), var(--cy-violet-500)); }

/* Score dial */
.cy-dial { display: flex; align-items: center; gap: .9rem; }
.cy-dial__ring { position: relative; width: 4.5rem; height: 4.5rem; flex: 0 0 auto; }
.cy-dial__ring svg { transform: rotate(-90deg); display: block; }
.cy-dial__num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--cy-navy);
    font-variant-numeric: tabular-nums;
}

/* Data rows in report mockups */
.cy-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 0;
    border-top: 1px solid var(--cy-line-soft);
    font-size: .855rem;
}
.cy-row:first-of-type { border-top: 0; }
.cy-row__dot { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; }
.cy-row__name { flex: 1 1 auto; color: var(--cy-ink); font-weight: 600; }
.cy-row__val { font-weight: 750; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   10. SECTION PATTERNS
   =========================================================================== */

/* Trust strip directly under the hero */
.cy-trust-strip {
    background: var(--cy-surface);
    border-bottom: 1px solid var(--cy-line);
    padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
}

.cy-trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.cy-trust-item { display: flex; align-items: flex-start; gap: .8rem; }
.cy-trust-item i { font-size: 1.2rem; margin-top: .1rem; flex: 0 0 auto; }
.cy-trust-item strong { display: block; font-size: .935rem; color: var(--cy-ink); line-height: 1.35; }
.cy-trust-item span { display: block; font-size: .82rem; color: var(--cy-muted); line-height: 1.45; }

/* Numbered story steps */
.cy-steps { counter-reset: cystep; display: grid; gap: 1rem; }

.cy-step {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1.05rem 1.15rem;
    border-radius: var(--cy-r);
    background: var(--cy-on-dark-fill);
    border: 1px solid var(--cy-on-dark-line);
    transition: border-color var(--cy-med) var(--cy-ease), background-color var(--cy-med) var(--cy-ease);
}
.cy-step:hover { border-color: rgba(45, 212, 191, .5); background: rgba(255, 255, 255, .1); }

.cy-step__n {
    counter-increment: cystep;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cy-teal-500);
    color: #06231F;
    font-size: .85rem;
    font-weight: 800;
}
.cy-step__n::before { content: counter(cystep); }

.cy-step h3 { font-size: 1rem; margin-bottom: .18rem; color: #fff; }
.cy-step p { font-size: .885rem; line-height: 1.55; color: var(--cy-on-dark-muted); margin: 0; }

/* Light variant of the step list (used on audience pages) */
.cy-steps--light .cy-step { background: #fff; border-color: var(--cy-line); box-shadow: var(--cy-shadow-xs); }
.cy-steps--light .cy-step:hover { border-color: #CBDCF3; }
.cy-steps--light .cy-step h3 { color: var(--cy-ink); }
.cy-steps--light .cy-step p { color: var(--cy-body); }
.cy-steps--light .cy-step__n { background: var(--cy-navy); color: #fff; }

/* Role cards */
.cy-role {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: var(--cy-r);
    background: #fff;
    border: 1px solid var(--cy-line);
    box-shadow: var(--cy-shadow-xs);
    transition: transform var(--cy-med) var(--cy-ease), box-shadow var(--cy-med) var(--cy-ease), border-color var(--cy-med) var(--cy-ease);
}
.cy-role:hover { transform: translateY(-4px); box-shadow: var(--cy-shadow); border-color: #CBDCF3; }
.cy-role h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.cy-role p { font-size: .9rem; line-height: 1.58; color: var(--cy-body); margin-bottom: 1rem; }
.cy-role .cy-link { margin-top: auto; }

/* Value/feature list with checkmarks */
.cy-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.cy-checks li {
    position: relative;
    padding-left: 2rem;
    font-size: .955rem;
    line-height: 1.6;
    color: var(--cy-body);
}

.cy-checks li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .1em;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--cy-teal-50);
    color: var(--cy-teal);
    font-size: .66rem;
    display: grid;
    place-items: center;
}

/* Neutral variant — used for the "what a general chatbot gives you" column,
   where a tick would read as an endorsement. */
.cy-checks--muted li::before {
    content: "\f068";
    background: var(--cy-surface-3);
    color: var(--cy-muted);
}

.cy-checks--on-dark li { color: var(--cy-on-dark-muted); }
.cy-checks--on-dark li::before { background: rgba(45, 212, 191, .18); color: #5EEAD4; }
.cy-checks strong { color: var(--cy-ink); font-weight: 700; }
.cy-checks--on-dark strong { color: #fff; }

/* Tabbed product switcher */
.cy-tabs {
    display: inline-flex;
    gap: .25rem;
    padding: .3rem;
    border-radius: var(--cy-r-pill);
    background: var(--cy-surface-3);
    margin-bottom: 1.9rem;
    flex-wrap: wrap;
}

.cy-tab {
    border: 0;
    background: transparent;
    padding: .55rem 1.05rem;
    border-radius: var(--cy-r-pill);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    color: var(--cy-navy-700);
    cursor: pointer;
    transition: background-color var(--cy-fast) var(--cy-ease), color var(--cy-fast) var(--cy-ease), box-shadow var(--cy-fast) var(--cy-ease);
}
.cy-tab:hover { color: var(--cy-navy); }
.cy-tab[aria-selected="true"] {
    background: #fff;
    color: var(--cy-navy);
    box-shadow: var(--cy-shadow-xs);
}

.cy-tabpanel[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Interactive demo ("try one question").
   The hook on the home page: a visitor answers a real question with no account
   and no form. Getting it wrong shows a hint instead of the answer, which is
   the product argument in a single interaction.
   --------------------------------------------------------------------------- */
.cy-try {
    background: #fff;
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r-lg);
    box-shadow: var(--cy-shadow);
    overflow: hidden;
}

.cy-try__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.35rem;
    background: var(--cy-surface-2);
    border-bottom: 1px solid var(--cy-line);
}

.cy-try__progress {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .84rem;
    color: var(--cy-muted);
    font-weight: 600;
}
.cy-try__progress b { color: var(--cy-navy); font-weight: 800; font-variant-numeric: tabular-nums; }

.cy-try__stage { padding: clamp(1.4rem, 3vw, 2.25rem); }

.cy-try__prompt {
    font-family: var(--cy-font-mono);
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
    font-weight: 700;
    color: var(--cy-ink);
    text-align: center;
    letter-spacing: -.01em;
    margin: 0 0 1.5rem;
}

.cy-try__opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.cy-try__opt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3.4rem;
    padding: .8rem 1rem;
    border-radius: 14px;
    border: 1.5px solid var(--cy-line);
    background: #fff;
    font-family: var(--cy-font-mono);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--cy-ink);
    cursor: pointer;
    transition: border-color var(--cy-fast) var(--cy-ease),
                background-color var(--cy-fast) var(--cy-ease),
                transform var(--cy-fast) var(--cy-ease);
}
.cy-try__opt:hover:not([disabled]) { border-color: var(--cy-blue); background: var(--cy-blue-50); transform: translateY(-2px); }
.cy-try__opt[disabled] { cursor: default; }

.cy-try__opt.is-right {
    border-color: var(--cy-green);
    background: var(--cy-green-50);
    color: #14532D;
}
.cy-try__opt.is-wrong {
    border-color: var(--cy-amber);
    background: var(--cy-amber-50);
    color: #6B3505;
}
.cy-try__opt.is-dim { opacity: .45; }

/* The coach's replies sit under the options, in the same message components the
   rest of the site uses, so the demo looks like the product rather than like a
   form validation message. */
.cy-try__thread { margin-top: 1.15rem; }
.cy-try__thread .cy-msg { margin-bottom: 0; }
.cy-try__thread .cy-msg__bubble { max-width: none; }

/* A correct answer gets warmth, not just a tick. */
.cy-msg__bubble--warm {
    background: linear-gradient(135deg, var(--cy-teal-50), #F1FAF3);
    border-color: #BFE9D8;
}

/* Voice-note presentation. The coach speaks in a real session, so the message
   wears that shape here — a speaker mark and a waveform, no player. It is
   decorative (aria-hidden): the message text sits right beside it and is what
   screen readers announce. */
.cy-voice {
    /* flex (not inline-flex) so the note sits on its own line under the
       message rather than flowing into the end of the sentence */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: .55rem;
    margin-top: .6rem;
    padding: .3rem .6rem .3rem .5rem;
    border-radius: var(--cy-r-pill);
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--cy-teal-100);
    color: var(--cy-teal);
}
.cy-voice > i { font-size: .8rem; }

.cy-voice__wave {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 1.15rem;
}
.cy-voice__wave i {
    display: block;
    width: 2.5px;
    border-radius: 2px;
    background: currentColor;
    opacity: .72;
    transform-origin: center;
    animation: cy-wave-in .5s var(--cy-ease) both;
}
/* An irregular profile reads as speech; an even one reads as a loading bar. */
.cy-voice__wave i:nth-child(1)  { height: 22%; animation-delay: .02s; }
.cy-voice__wave i:nth-child(2)  { height: 55%; animation-delay: .04s; }
.cy-voice__wave i:nth-child(3)  { height: 34%; animation-delay: .06s; }
.cy-voice__wave i:nth-child(4)  { height: 78%; animation-delay: .08s; }
.cy-voice__wave i:nth-child(5)  { height: 100%; animation-delay: .10s; }
.cy-voice__wave i:nth-child(6)  { height: 62%; animation-delay: .12s; }
.cy-voice__wave i:nth-child(7)  { height: 30%; animation-delay: .14s; }
.cy-voice__wave i:nth-child(8)  { height: 48%; animation-delay: .16s; }
.cy-voice__wave i:nth-child(9)  { height: 86%; animation-delay: .18s; }
.cy-voice__wave i:nth-child(10) { height: 40%; animation-delay: .20s; }
.cy-voice__wave i:nth-child(11) { height: 68%; animation-delay: .22s; }
.cy-voice__wave i:nth-child(12) { height: 26%; animation-delay: .24s; }
.cy-voice__wave i:nth-child(13) { height: 52%; animation-delay: .26s; }
.cy-voice__wave i:nth-child(14) { height: 72%; animation-delay: .28s; }
.cy-voice__wave i:nth-child(15) { height: 36%; animation-delay: .30s; }
.cy-voice__wave i:nth-child(16) { height: 20%; animation-delay: .32s; }

/* The bars rise once as the message lands, the way a voice note arrives. */
@keyframes cy-wave-in {
    from { transform: scaleY(.15); opacity: 0; }
    to   { transform: scaleY(1); opacity: .72; }
}

.cy-try__done { text-align: center; }
.cy-try__done .cy-tile { margin-inline: auto; }
.cy-try__done p { max-width: 40rem; margin-inline: auto; color: var(--cy-body); }

.cy-try__note {
    margin: 0;
    padding: 1rem clamp(1.4rem, 3vw, 2.25rem) 1.35rem;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--cy-muted);
    text-align: center;
    border-top: 1px solid var(--cy-line-soft);
}

/* Stat block */
.cy-stat { text-align: left; }
.cy-stat__n {
    display: block;
    font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--cy-navy);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cy-stat__l { display: block; font-size: .875rem; color: var(--cy-muted); margin-top: .2rem; }
.cy-section--dark .cy-stat__n { color: #fff; }
.cy-section--dark .cy-stat__l { color: var(--cy-on-dark-muted); }

/* Photo frame with soft caption */
.cy-photo {
    position: relative;
    border-radius: var(--cy-r-lg);
    overflow: hidden;
    box-shadow: var(--cy-shadow);
    border: 1px solid var(--cy-line);
}
.cy-photo img { width: 100%; height: 100%; object-fit: cover; }
.cy-photo--tall { aspect-ratio: 4 / 5; }
.cy-photo--wide { aspect-ratio: 16 / 10; }
.cy-photo--square { aspect-ratio: 1; }

.cy-photo__caption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: .7rem .9rem;
    border-radius: 14px;
    background: rgba(8, 21, 47, .82);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .84rem;
    line-height: 1.45;
    font-weight: 600;
}

/* Closing CTA band */
.cy-cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--cy-r-lg);
    padding: clamp(2.25rem, 4.5vw, 3.75rem);
    background:
        radial-gradient(600px 320px at 6% 0%, rgba(20, 184, 166, .28), transparent 62%),
        radial-gradient(520px 340px at 96% 10%, rgba(37, 99, 235, .3), transparent 58%),
        linear-gradient(150deg, var(--cy-navy) 0%, #14295A 100%);
    color: #fff;
    text-align: center;
}
.cy-cta-band h2 { color: #fff; }
.cy-cta-band p { color: #C6D5EC; max-width: 46rem; margin-inline: auto; }
.cy-cta-band .cy-actions { justify-content: center; margin-top: 1.6rem; }

/* Quote / reassurance callout */
.cy-callout {
    border-left: 4px solid var(--cy-teal);
    background: var(--cy-teal-50);
    border-radius: 0 var(--cy-r) var(--cy-r) 0;
    padding: 1.1rem 1.35rem;
    color: #12403C;
    font-size: .95rem;
    line-height: 1.62;
}
.cy-callout strong { color: #0B2F2C; }
.cy-callout--amber { border-left-color: var(--cy-amber); background: var(--cy-amber-50); color: #6B3505; }
.cy-callout--amber strong { color: #4E2703; }
.cy-callout--green { border-left-color: var(--cy-green); background: var(--cy-green-50); color: #14532D; }
.cy-callout--rose  { border-left-color: var(--cy-rose);  background: #FFF1F4;             color: #7A0F2B; }

/* ---------------------------------------------------------------------------
   10e. Instructor profile
   --------------------------------------------------------------------------- */

.cy-profilehead {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.cy-profilehead__avatar {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 3px solid rgba(255, 255, 255, .28);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* The social row sits on the navy hero, so it inverts the light-surface version. */
.cy-profilehead__social { display: flex; gap: .5rem; margin-top: 1rem; }
.cy-profilehead__social a {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    background: var(--cy-on-dark-fill);
    border: 1px solid var(--cy-on-dark-line);
    color: #fff;
    font-size: .95rem;
}
.cy-profilehead__social a:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }

/* Skills are labels, not prose: a wrapping row of chips reads faster than a list. */
.cy-tags { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; list-style: none; }

@media (max-width: 600px) {
    .cy-profilehead { gap: 1.1rem; }
    .cy-profilehead__avatar { width: 5rem; height: 5rem; }
}

/* ---------------------------------------------------------------------------
   10d. Contact
   --------------------------------------------------------------------------- */

.cy-contact {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.cy-form { display: grid; gap: 1.15rem; }

/* Two fields share a row only when there is room for both to stay readable. */
.cy-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.15rem;
}

.cy-field__hint {
    font-size: .8rem;
    color: var(--cy-muted);
    line-height: 1.5;
}

textarea.cy-input {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.6;
}

/* Standing invalid styling would shout at someone who has not typed yet, so it
   only applies once the browser has seen the field and the form was submitted. */
.cy-form--checked .cy-input:invalid,
.cy-form--checked .cy-select:invalid {
    border-color: var(--cy-rose);
    box-shadow: 0 0 0 3px #FFE4EA;
}

.cy-sidelinks { display: grid; gap: .75rem; }

.cy-sidelink {
    display: block;
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    background: var(--cy-surface);
    box-shadow: var(--cy-shadow-xs);
    text-decoration: none;
    transition: border-color var(--cy-fast) var(--cy-ease),
                transform var(--cy-fast) var(--cy-ease),
                box-shadow var(--cy-fast) var(--cy-ease);
}
.cy-sidelink:hover {
    border-color: var(--cy-blue);
    transform: translateY(-2px);
    box-shadow: var(--cy-shadow-sm);
}
.cy-sidelink__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--cy-ink);
    margin-bottom: .3rem;
}
.cy-sidelink__title i { color: var(--cy-blue); }
.cy-sidelink__text { font-size: .88rem; color: var(--cy-body); line-height: 1.55; margin: 0; }

@media (max-width: 900px) {
    .cy-contact { grid-template-columns: 1fr; gap: 2rem; }
}

/* FAQ / disclosure */
.cy-faq { border-top: 1px solid var(--cy-line); }
.cy-faq details { border-bottom: 1px solid var(--cy-line); }
.cy-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 2.5rem 1.1rem 0;
    position: relative;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--cy-ink);
}
.cy-faq summary::-webkit-details-marker { display: none; }
.cy-faq summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: .35rem;
    top: 1.25rem;
    font-size: .78rem;
    color: var(--cy-muted);
    transition: transform var(--cy-fast) var(--cy-ease);
}
.cy-faq details[open] summary::after { transform: rotate(180deg); }
.cy-faq__a { padding: 0 2.5rem 1.25rem 0; color: var(--cy-body); font-size: .95rem; line-height: 1.68; }

/* Page hero for audience/product pages */
.cy-pagehero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.75rem, 5vw, 4.5rem);
    background:
        radial-gradient(680px 380px at 10% -20%, rgba(20, 184, 166, .18), transparent 62%),
        radial-gradient(620px 400px at 95% 0%, rgba(37, 99, 235, .2), transparent 60%),
        linear-gradient(155deg, #08152F 0%, var(--cy-navy) 55%, #14295A 100%);
    color: var(--cy-on-dark);
}
.cy-pagehero h1 { color: #fff; }
.cy-pagehero p { color: #C6D5EC; }

/* Text-only pages (legal, utility) get a shorter hero: the document is the
   point, and a full-height banner just pushes it below the fold. */
.cy-pagehero--slim { padding-block: clamp(2rem, 3.4vw, 3rem); }

.cy-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    font-size: .84rem;
    color: #9FB4D2;
}
.cy-crumbs a { color: #C6D5EC; }
.cy-crumbs a:hover { color: #fff; }
.cy-crumbs li + li::before { content: "/"; margin-right: .45rem; opacity: .5; }

/* ===========================================================================
   10b. CATALOGUE — filters, applied-filter chips, results header
   The one public page that is a tool rather than a document, so the emphasis
   is on scanning and operating: state is visible, every control looks
   operable, and the applied filters can be removed one at a time.
   =========================================================================== */
.cy-cat {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.cy-filters {
    position: sticky;
    top: calc(var(--cy-nav-h) + 1rem);
    background: var(--cy-surface);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--cy-r);
    box-shadow:
        0 1px 2px rgba(11, 27, 58, .05),
        0 12px 30px rgba(11, 27, 58, .10);
    overflow: hidden;
}

.cy-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .95rem 1.1rem;
    /* Darker than both the white panel below it and the tinted page behind, so
       the bar reads as this panel's header rather than as its first row. */
    border-bottom: 1px solid #C3D1E6;
    background: #D3DEEE;
}
.cy-filters__head h2 {
    font-size: .95rem;
    font-weight: 750;
    margin: 0;
    color: var(--cy-navy);
}
.cy-filters__body { padding: 1.1rem; display: grid; gap: 1.05rem; }

/* Form controls */
.cy-field { display: grid; gap: .35rem; }
.cy-field > label {
    font-size: .84rem;
    font-weight: 700;
    color: var(--cy-ink);
}

.cy-input,
.cy-select {
    width: 100%;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    border-radius: 10px;
    /* Tinted rather than white: on a white card, a white input with a pale
       border does not read as somewhere you can type. */
    border: 1.5px solid #CFDAEA;
    background: var(--cy-surface-2);
    font: inherit;
    font-size: .95rem;
    color: var(--cy-ink);
    transition: border-color var(--cy-fast) var(--cy-ease),
                background-color var(--cy-fast) var(--cy-ease),
                box-shadow var(--cy-fast) var(--cy-ease);
}
.cy-input:hover:not(:focus),
.cy-select:hover:not(:focus) { border-color: #B3C4DC; }

.cy-input:focus,
.cy-select:focus {
    outline: none;
    border-color: var(--cy-blue);
    background: #fff;
    box-shadow: 0 0 0 3px var(--cy-blue-50);
}
.cy-input::placeholder { color: #9AA8BC; }

.cy-select {
    appearance: none;
    padding-right: 2rem;
    /* caret drawn inline so the control needs no image request */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235C6B82'%3E%3Cpath d='M8 11 3.5 6.5 4.56 5.44 8 8.88l3.44-3.44L12.5 6.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 1rem;
    cursor: pointer;
}

.cy-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* Checkbox that reads as a control, not a default browser tick */
.cy-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border-radius: 10px;
    border: 1.5px solid var(--cy-line);
    background: #fff;
    font-size: .92rem;
    font-weight: 600;
    color: var(--cy-ink);
    cursor: pointer;
    transition: border-color var(--cy-fast) var(--cy-ease), background-color var(--cy-fast) var(--cy-ease);
}
.cy-check:hover { border-color: #CBDCF3; }
.cy-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--cy-green); cursor: pointer; }
.cy-check:has(input:checked) { border-color: var(--cy-green); background: var(--cy-green-50); color: #14532D; }

/* Applied filters */
.cy-applied { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }

.cy-applied__chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .5rem .3rem .7rem;
    border-radius: var(--cy-r-pill);
    background: var(--cy-blue-50);
    border: 1px solid var(--cy-blue-100);
    color: var(--cy-blue);
    font-size: .8rem;
    font-weight: 650;
    text-decoration: none;
}
.cy-applied__chip:hover { background: var(--cy-blue-100); text-decoration: none; }
.cy-applied__chip i { font-size: .68rem; opacity: .75; }
.cy-applied__chip b { font-weight: 800; }

.cy-applied__clear {
    font-size: .8rem;
    font-weight: 700;
    color: var(--cy-muted);
    text-decoration: none;
}
.cy-applied__clear:hover { color: var(--cy-rose); text-decoration: none; }

/* Results header */
.cy-results__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.cy-results__count { font-size: .9rem; color: var(--cy-muted); margin: 0; }
.cy-results__count b { color: var(--cy-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

.cy-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1.15rem;
}

/* Nothing found — an empty result is a dead end unless it offers a way out. */
.cy-noresult {
    border: 1px dashed var(--cy-line);
    border-radius: var(--cy-r);
    background: var(--cy-surface-2);
    padding: clamp(2rem, 4vw, 3.25rem);
    text-align: center;
}
.cy-noresult .cy-tile { margin-inline: auto; }
.cy-noresult p { max-width: 40rem; margin-inline: auto; }

/* Mobile: the filter panel folds away behind a toggle. */
.cy-filters__toggle { display: none; }

@media (max-width: 991.98px) {
    .cy-cat { grid-template-columns: minmax(0, 1fr); }
    .cy-filters { position: static; }
    .cy-filters__toggle { display: inline-flex; }
    .cy-filters__body { display: none; }
    .cy-filters.is-open .cy-filters__body { display: grid; }
}

/* ===========================================================================
   10c. COURSE DETAIL
   Two columns with a sticky buy panel. The curriculum uses <details> rather
   than a JS accordion, so it opens without Bootstrap and still works if the
   script never loads.
   =========================================================================== */
.cy-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
}

.cy-detail__aside { position: sticky; top: calc(var(--cy-nav-h) + 1rem); display: grid; gap: 1.15rem; }

/* Hero meta row */
.cy-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.35rem;
    margin-top: 1.15rem;
    font-size: .9rem;
    color: #C6D5EC;
}
.cy-detail__meta strong { color: #fff; }
.cy-detail__meta i { color: var(--cy-teal-500); margin-right: .3rem; }

/* Buy panel */
.cy-buy {
    background: var(--cy-surface);
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    box-shadow: var(--cy-shadow);
    overflow: hidden;
}
.cy-buy__price {
    padding: 1.35rem 1.25rem 1.15rem;
    text-align: center;
    border-bottom: 1px solid var(--cy-line-soft);
}
.cy-buy__amount {
    font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--cy-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cy-buy__amount--free { color: var(--cy-green); }
.cy-buy__was {
    display: inline-block;
    margin-left: .5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cy-muted);
    text-decoration: line-through;
}
.cy-buy__body { padding: 1.15rem 1.25rem 1.35rem; display: grid; gap: 1rem; }

.cy-includes { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cy-includes li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .89rem;
    color: var(--cy-body);
}
.cy-includes i { color: var(--cy-teal); margin-top: .18rem; width: 1rem; text-align: center; }

/* Curriculum */
.cy-curric { border: 1px solid var(--cy-line); border-radius: var(--cy-r); overflow: hidden; background: #fff; }
.cy-curric details + details { border-top: 1px solid var(--cy-line-soft); }

.cy-curric summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1.1rem;
    font-weight: 650;
    font-size: .95rem;
    color: var(--cy-ink);
    background: #fff;
    transition: background-color var(--cy-fast) var(--cy-ease);
}
.cy-curric summary::-webkit-details-marker { display: none; }
.cy-curric summary:hover { background: var(--cy-surface-2); }
.cy-curric summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    font-size: .72rem;
    color: var(--cy-muted);
    transition: transform var(--cy-fast) var(--cy-ease);
}
.cy-curric details[open] > summary { background: var(--cy-surface-2); }
.cy-curric details[open] > summary::after { transform: rotate(180deg); }
.cy-curric summary > i:first-child { color: var(--cy-blue); }

.cy-curric__body { padding: .35rem 1.1rem 1rem 2.4rem; }
.cy-curric__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cy-curric__list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .89rem;
    color: var(--cy-body);
}
.cy-curric__list i { color: var(--cy-muted); margin-top: .2rem; font-size: .8rem; }
.cy-curric__list span.cy-curric__len { margin-left: auto; color: var(--cy-muted); font-size: .82rem; }

/* Exam rows carry their own stats, so the summary needs room for them. */
.cy-curric__stats {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    margin-left: auto;
    font-size: .82rem;
    font-weight: 600;
    color: var(--cy-muted);
}
.cy-curric__stats i { color: var(--cy-muted); }
.cy-curric summary:has(.cy-curric__stats)::after { margin-left: .85rem; }

/* Instructor / provider */
.cy-provider { text-align: center; }
.cy-provider__avatar {
    width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover;
    margin: 0 auto .85rem; border: 3px solid #fff; box-shadow: var(--cy-shadow-sm);
}
.cy-provider__social { display: flex; justify-content: center; gap: .5rem; margin-top: .9rem; }
.cy-provider__social a {
    display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
    border-radius: 10px; background: var(--cy-surface-2); border: 1px solid var(--cy-line);
    color: var(--cy-navy-700); font-size: .9rem;
}
.cy-provider__social a:hover { background: var(--cy-blue-50); color: var(--cy-blue); text-decoration: none; }

/* Reviews */
.cy-review {
    background: #fff;
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--cy-shadow-xs);
}
.cy-review__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cy-review__who { font-weight: 700; color: var(--cy-ink); margin: 0; }
.cy-review__when { font-size: .82rem; color: var(--cy-muted); font-variant-numeric: tabular-nums; }
.cy-review__text { margin: .6rem 0 0; color: var(--cy-body); font-size: .94rem; line-height: 1.65; }

/* The video.js player keeps its own skin; just seat it in our frame. */
.cy-player {
    border-radius: var(--cy-r);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: var(--cy-shadow-lg);
    background: #000;
}
.cy-player .video-js { width: 100%; }

@media (max-width: 991.98px) {
    .cy-detail { grid-template-columns: minmax(0, 1fr); }
    .cy-detail__aside { position: static; }
}

/* ===========================================================================
   11. COURSE CARDS + RAILS
   =========================================================================== */
.cy-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1.15rem;
}

/* Catalogue card.

   Each card carries its course type as a colour: the corner brackets, the lift
   shadow and the sheen all take --cy-course-accent, so a rail of mixed types
   reads as four distinct products at a glance rather than four grey boxes.

   The tilt is pointer-driven (--cy-rx / --cy-ry are written by cyoku-public.js
   on hover-capable devices only) and falls back to a plain lift everywhere
   else, including under prefers-reduced-motion. */
.cy-course {
    --cy-course-accent: var(--cy-navy-600);
    --cy-rx: 0deg;
    --cy-ry: 0deg;
    --cy-lift: 0px;

    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    overflow: hidden;
    box-shadow: var(--cy-shadow-xs);
    height: 100%;
    transform: perspective(1000px) rotateX(var(--cy-rx)) rotateY(var(--cy-ry)) translateY(var(--cy-lift));
    transition: transform var(--cy-med) var(--cy-ease),
                box-shadow var(--cy-med) var(--cy-ease),
                border-color var(--cy-med) var(--cy-ease);
}

.cy-course:hover,
.cy-course:focus-within {
    --cy-lift: -6px;
    z-index: 2;                       /* lift clear of neighbouring cards in the grid */
    border-color: color-mix(in srgb, var(--cy-course-accent) 26%, var(--cy-line));
    box-shadow:
        0 2px 6px rgba(11, 27, 58, .06),
        0 22px 44px -14px color-mix(in srgb, var(--cy-course-accent) 42%, transparent);
}

/* Partial border: two corner brackets in the type colour that reach further
   round the card on hover. Deliberately not a full outline — the card stays
   quiet in a rail and only resolves into a frame when you engage with it. */
.cy-course::before,
.cy-course::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 38%;
    height: 40%;
    pointer-events: none;
    border-color: var(--cy-course-accent);
    border-style: solid;
    border-width: 0;
    transition: width var(--cy-med) var(--cy-ease),
                height var(--cy-med) var(--cy-ease),
                opacity var(--cy-fast) var(--cy-ease);
}

.cy-course::before {
    top: 0;
    left: 0;
    border-top-width: 3px;
    border-left-width: 3px;
    border-radius: var(--cy-r) 0 0 0;
}

.cy-course::after {
    right: 0;
    bottom: 0;
    border-bottom-width: 3px;
    border-right-width: 3px;
    border-radius: 0 0 var(--cy-r) 0;
}

.cy-course:hover::before,
.cy-course:hover::after,
.cy-course:focus-within::before,
.cy-course:focus-within::after {
    width: 56%;
    height: 54%;
}

/* Type accents. The hue is the same one the product carries everywhere else on
   the site, so the rail and the product cards agree. */
.cy-course--lecture { --cy-course-accent: var(--cy-blue); }
.cy-course--test    { --cy-course-accent: var(--cy-violet); }
.cy-course--exam    { --cy-course-accent: var(--cy-amber); }
.cy-course--group   { --cy-course-accent: var(--cy-navy-600); }

.cy-course__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--cy-surface-3);
    overflow: hidden;
}
.cy-course__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 3s var(--cy-ease);
}
.cy-course:hover .cy-course__media img { transform: scale(1.045); }

/* Sheen that follows the pointer across the artwork. Sits under the badges. */
.cy-course__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(340px circle at var(--cy-mx, 50%) var(--cy-my, 50%),
                rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 62%);
    transition: opacity var(--cy-med) var(--cy-ease);
}
.cy-course:hover .cy-course__media::after { opacity: 1; }

/* A hairline of the type colour under the artwork ties the two halves together. */
.cy-course__media { border-bottom: 2px solid transparent; }
.cy-course:hover .cy-course__media { border-bottom-color: color-mix(in srgb, var(--cy-course-accent) 30%, transparent); }

.cy-course__flag {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
}

.cy-course__type {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 2;
    padding: .25rem .6rem;
    border-radius: var(--cy-r-pill);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--cy-course-accent) 88%, #0B1B3A);
    color: #fff;
    backdrop-filter: blur(6px);
}

.cy-course__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: .95rem 1rem 1.05rem;
    gap: .5rem;
}

.cy-course__name {
    font-size: .965rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cy-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.cy-course__by {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--cy-muted);
    min-width: 0;
}
.cy-course__by img { width: 1.35rem; height: 1.35rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.cy-course__by span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cy-course__meta {
    display: flex;
    align-items: center;
    gap: .85rem;
    font-size: .78rem;
    color: var(--cy-muted);
    margin-top: auto;
    padding-top: .6rem;
    border-top: 1px solid var(--cy-line-soft);
}
.cy-course__meta i { color: var(--cy-navy-600); opacity: .8; margin-right: .2rem; }

.cy-course__price {
    margin-left: auto;
    font-weight: 800;
    font-size: .87rem;
    color: var(--cy-navy);
    white-space: nowrap;
}
.cy-course__price s { color: var(--cy-muted); font-weight: 500; margin-right: .3rem; font-size: .8rem; }
.cy-course__price--free { color: var(--cy-green); }

/* Star rating.

   Two identical rows of five stars sit on top of each other; the amber one is
   clipped to the score's share of the width. That renders 4.3 as four stars and
   a third, rather than rounding it to something the number then contradicts. */
.cy-rating {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    line-height: 1;
    white-space: nowrap;
}

.cy-rating__stars {
    position: relative;
    display: inline-block;
    flex: none;
}

.cy-rating__track,
.cy-rating__fill {
    display: flex;
    gap: .12rem;
}

.cy-rating__track { color: #D8E0EC; }

.cy-rating__fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--cy-amber-500);
}

.cy-rating__score {
    font-weight: 800;
    color: var(--cy-ink);
    font-variant-numeric: tabular-nums;
}

.cy-rating__count {
    color: var(--cy-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* On the navy course-detail hero the light-surface greys disappear. */
.cy-rating--on-dark { font-size: .88rem; }
.cy-rating--on-dark .cy-rating__track { color: rgba(255, 255, 255, .32); }
.cy-rating--on-dark .cy-rating__fill  { color: var(--cy-amber-400); }
.cy-rating--on-dark .cy-rating__score { color: #fff; }
.cy-rating--on-dark .cy-rating__count { color: #C6D5EC; }

/* Shown instead of the stars while a course has no ratings at all. Saying so is
   better than five grey stars, which read as a score of zero. */
.cy-rating-none {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--cy-muted);
}

.cy-rating--on-dark + .cy-rating-none,
.cy-detail__meta .cy-rating-none { color: #C6D5EC; }

/* Auth and utility pages.

   Sign in, register, password reset, e-mail verification and the payment result
   all share one shape: a single card, one job, nothing else competing for the
   click. They sit on the tinted surface rather than white so the card has an
   edge without needing a heavy border. */
.cy-authpage {
    display: flex;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) 1.25rem clamp(3rem, 6vw, 5rem);
    min-height: 68vh;

    /* A soft tinted ground, not white and not navy. White gave the card no edge
       to be found by; the footer's navy is the other end, and matching it made
       the page and the footer read as one block. This sits between the two, so
       the white card lifts off it and the dark footer still closes the page. */
    background:
        radial-gradient(720px 420px at 12% -12%, rgba(20, 184, 166, .10), transparent 62%),
        radial-gradient(660px 440px at 92% 2%, rgba(37, 99, 235, .12), transparent 60%),
        linear-gradient(170deg, #EAF0F9 0%, #DFE8F5 55%, #D6E1F2 100%);
    color: var(--cy-body);
}

.cy-auth { width: 100%; max-width: 28.5rem; }
.cy-auth--wide { max-width: 44rem; }

.cy-auth__head { text-align: center; margin-bottom: 1.5rem; }

/* The brand mark ships at its own intrinsic size and the navbar's lockup rules
   do not reach outside it, so anything dropped in here needs its own bound. */
.cy-auth__head .cyoku-mark,
.cy-auth__head > img {
    display: block;
    width: auto;
    height: 44px;
    margin: 0 auto .9rem;
}

.cy-auth__title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--cy-ink);
    margin: .85rem 0 .3rem;
}

.cy-auth__sub { color: var(--cy-muted); font-size: .93rem; margin: 0; }

.cy-auth__card {
    background: var(--cy-surface);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    /* Pure white on a tinted ground, lifted rather than outlined: a soft wide
       cast does the separating, so the card needs no heavy border. */
    box-shadow:
        0 1px 2px rgba(11, 27, 58, .06),
        0 18px 44px rgba(11, 27, 58, .14);
    padding: clamp(1.5rem, 3vw, 2.15rem);
}

/* A large status glyph above the headline on the outcome pages: verified,
   verification failed, access denied, payment succeeded or cancelled. */
.cy-status {
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    font-size: 1.7rem;
}

.cy-status--good  { background: var(--cy-green-50);  color: var(--cy-green); }
.cy-status--bad   { background: #FFF1F4;             color: var(--cy-rose); }
.cy-status--warn  { background: var(--cy-amber-50);  color: var(--cy-amber); }

.cy-actions--center { justify-content: center; }

.cy-auth__legal {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--cy-muted);
}

.cy-auth__legal a { color: var(--cy-blue); text-decoration: underline; text-underline-offset: .15em; }

.cy-auth__alt {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .9rem;
    color: var(--cy-muted);
}

.cy-auth__alt a { color: var(--cy-blue); font-weight: 650; }

/* A password field with its reveal button welded to the right edge. */
.cy-inputgroup { display: flex; }

.cy-inputgroup .cy-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.cy-inputgroup__btn {
    flex: none;
    border: 1.5px solid #CFDAEA;
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: var(--cy-surface-3);
    color: var(--cy-muted);
    padding-inline: .9rem;
    cursor: pointer;
}

.cy-inputgroup__btn:hover { color: var(--cy-ink); background: #E2E9F4; }
.cy-inputgroup:focus-within .cy-inputgroup__btn { border-color: var(--cy-blue); }

/* A single checkbox with its label, as in "remember me". Distinct from
   .cy-checks, which is a decorative tick list in marketing copy. */
.cy-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--cy-body);
    cursor: pointer;
}

.cy-check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--cy-blue);
    cursor: pointer;
    flex: none;
}

.cy-formrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cy-link-sm { font-size: .87rem; color: var(--cy-blue); font-weight: 600; }

/* "or" between the primary action and the alternatives. */
.cy-or {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.15rem 0;
    color: var(--cy-muted);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cy-or::before,
.cy-or::after { content: ""; flex: 1; height: 1px; background: var(--cy-line); }

/* Account chooser on /selectRegister.

   The five cards mirror the home page's audience section — same order, same
   names, same one-line description — so a visitor arriving from there is
   choosing between things they have already read about. Each card then adds the
   two things the home page does not: what the account can actually do, and a way
   in. The "read more" link goes to that audience's own page. */
/* Flex rather than grid because there are five cards: a grid leaves the last one
   stranded in the first column of a half-empty row, while a centred flex row puts
   the remainder in the middle, which reads as a deliberate 3 + 2. */
.cy-signups {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.15rem;
}

.cy-signups > * { flex: 1 1 20rem; max-width: 23rem; }

.cy-signup {
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    background: var(--cy-surface);
    border: 1px solid rgba(255, 255, 255, .9);
    border-top: 3px solid var(--cy-signup-accent, var(--cy-blue));
    border-radius: var(--cy-r);
    box-shadow:
        0 1px 2px rgba(11, 27, 58, .05),
        0 12px 30px rgba(11, 27, 58, .10);
}

.cy-signup--blue   { --cy-signup-accent: var(--cy-blue); }
.cy-signup--teal   { --cy-signup-accent: var(--cy-teal); }
.cy-signup--amber  { --cy-signup-accent: var(--cy-amber); }
.cy-signup--violet { --cy-signup-accent: var(--cy-violet); }
.cy-signup--navy   { --cy-signup-accent: var(--cy-navy-600); }

.cy-signup h2 { margin-bottom: .4rem; }

.cy-signup__lead {
    margin: 0 0 1.25rem;
    font-size: .93rem;
    line-height: 1.6;
    color: var(--cy-body);
}

.cy-signup__label {
    margin: 0 0 .7rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cy-muted);
}

/* Lets the price line and the buttons sit at the bottom, so the five cards line
   their calls to action up with each other however long the lists run. */
.cy-signup .cy-checks {
    flex: 1;
    font-size: .89rem;
    margin-bottom: 1.15rem;
}

.cy-signup__offer {
    margin: 0 0 1.15rem;
    padding-top: .95rem;
    border-top: 1px dashed var(--cy-line);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--cy-muted);
}

.cy-signup__foot { display: grid; gap: .8rem; justify-items: center; }

.cy-signup__more {
    font-size: .88rem;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.cy-signup__more i { transition: transform var(--cy-fast) var(--cy-ease); }
.cy-signup__more:hover i { transform: translateX(3px); }

/* The closing "not sure?" card runs the full width rather than pretending to be
   a sixth option, because it is not one. */
.cy-signup--ask {
    margin-top: 1.15rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    border: 1px solid transparent;
    border-top: 3px solid var(--cy-teal);
    background: linear-gradient(150deg, #0B1B3A, #14295A);
    box-shadow: var(--cy-shadow);
}

.cy-signup--ask h2 { color: #fff; }

/* Cart.

   Two columns: the lines being bought, and the summary that stays in view while
   they are reviewed. Each line puts the thing bought on the left and everything
   that changes the price on the right, so scanning down the right edge answers
   "what am I paying?" without reading the titles. */
.cy-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    align-items: start;
}

.cy-cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cy-cart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.cy-cartline {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) 12rem;
    gap: 1.15rem;
    padding: 1.1rem;
    background: var(--cy-surface);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--cy-r);
    box-shadow:
        0 1px 2px rgba(11, 27, 58, .05),
        0 12px 30px rgba(11, 27, 58, .09);
}

.cy-cartline__media {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--cy-surface-3);
}

.cy-cartline__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cy-cartline__type {
    margin: 0 0 .3rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cy-teal);
}

.cy-cartline__name { font-size: 1.03rem; font-weight: 750; margin: 0 0 .3rem; line-height: 1.35; }
.cy-cartline__name a { color: var(--cy-ink); }
.cy-cartline__name a:hover { color: var(--cy-blue); }

.cy-cartline__by { margin: 0 0 .6rem; font-size: .86rem; color: var(--cy-muted); }

.cy-cartline__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    font-size: .82rem;
    color: var(--cy-muted);
}

.cy-cartline__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .7rem;
    text-align: right;
}

.cy-cartline__price {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--cy-ink);
    font-variant-numeric: tabular-nums;
}

.cy-cartline__line {
    margin: 0;
    font-size: .8rem;
    color: var(--cy-muted);
    font-variant-numeric: tabular-nums;
}

.cy-cartline__line strong { color: var(--cy-ink); }
.cy-cartline__remove { margin-top: auto; }

/* Seat count */
.cy-qty { display: inline-flex; align-items: center; }

.cy-qty__step {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1.5px solid #CFDAEA;
    background: var(--cy-surface-2);
    color: var(--cy-muted);
    cursor: pointer;
    font-size: .72rem;
}

.cy-qty__step:first-of-type { border-radius: 9px 0 0 9px; }
.cy-qty__step:last-of-type  { border-radius: 0 9px 9px 0; }
.cy-qty__step:hover { background: var(--cy-surface-3); color: var(--cy-ink); }

.cy-qty__value {
    width: 3rem;
    height: 2rem;
    border: 1.5px solid #CFDAEA;
    border-inline: 0;
    background: #fff;
    text-align: center;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    color: var(--cy-ink);
    -moz-appearance: textfield;
}

.cy-qty__value::-webkit-outer-spin-button,
.cy-qty__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Summary */
.cy-cart__aside { position: sticky; top: calc(var(--cy-nav-h) + 1rem); }

.cy-summary {
    padding: 1.4rem;
    background: var(--cy-surface);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--cy-r);
    box-shadow:
        0 1px 2px rgba(11, 27, 58, .05),
        0 12px 30px rgba(11, 27, 58, .10);
}

.cy-summary__rows { margin: 0 0 1rem; display: grid; gap: .5rem; }

.cy-summary__rows > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .89rem;
}

.cy-summary__rows dt { color: var(--cy-muted); margin: 0; }
.cy-summary__rows dd { margin: 0; font-weight: 700; color: var(--cy-ink); font-variant-numeric: tabular-nums; }

.cy-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding-top: .9rem;
    border-top: 1px solid var(--cy-line);
    font-size: .95rem;
    font-weight: 700;
    color: var(--cy-ink);
}

.cy-summary__total strong { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.cy-summary__note {
    display: flex;
    gap: .5rem;
    margin: 1rem 0 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--cy-muted);
}

.cy-summary__note i { color: var(--cy-teal); margin-top: .15rem; }

.cy-summary__more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    font-size: .88rem;
    font-weight: 650;
}

@media (max-width: 991.98px) {
    .cy-cart { grid-template-columns: minmax(0, 1fr); }
    .cy-cart__aside { position: static; }
}

@media (max-width: 639.98px) {
    .cy-cartline { grid-template-columns: minmax(0, 1fr); }
    .cy-cartline__media { max-width: 12rem; }
    .cy-cartline__side { align-items: flex-start; text-align: left; }
}

/* The two learning modes.

   Deliberately not a symmetric pair. The teacher-coach is the differentiator, so
   it gets the wider column, the accent rail and the numbered loop; structured
   learning sits beside it as the quieter, familiar alternative. Equal-weight
   cards would restate the problem this section exists to solve. */
.cy-modes {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.cy-mode {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 2.4vw, 1.9rem);
    background: var(--cy-surface);
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    box-shadow: var(--cy-shadow-sm);
    height: 100%;
}

.cy-mode--coach {
    border-color: transparent;
    border-top: 3px solid var(--cy-teal);
    box-shadow: var(--cy-shadow);
}

.cy-mode--standard { border-top: 3px solid var(--cy-line); }

.cy-mode__tag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    align-self: flex-start;
    margin: 0 0 .8rem;
    padding: .3rem .7rem;
    border-radius: var(--cy-r-pill);
    background: var(--cy-surface-3);
    color: var(--cy-navy-700);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cy-mode--coach .cy-mode__tag { background: var(--cy-teal-50); color: var(--cy-teal); }

.cy-mode__name { margin-bottom: .5rem; }
.cy-mode__lead { margin: 0 0 1.4rem; color: var(--cy-body); line-height: 1.65; }

.cy-mode__label {
    margin: 0 0 .75rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cy-muted);
}

/* The session loop. Numbered because the order is the point — hint before
   answer, question before explanation. */
.cy-loop {
    margin: 0 0 1.3rem;
    padding: 0;
    list-style: none;
    counter-reset: cy-loop;
    display: grid;
    gap: .6rem;
}

.cy-loop li {
    counter-increment: cy-loop;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: .65rem;
    align-items: baseline;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--cy-body);
}

.cy-loop li::before {
    content: counter(cy-loop);
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--cy-teal-50);
    color: var(--cy-teal);
    font-size: .72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cy-mode__note {
    display: flex;
    gap: .5rem;
    margin: 0 0 1.1rem;
    padding: .8rem .9rem;
    border-radius: var(--cy-r-sm, .6rem);
    background: var(--cy-surface-2);
    font-size: .84rem;
    line-height: 1.55;
    color: var(--cy-muted);
}

.cy-mode__note i { color: var(--cy-navy-600); margin-top: .15rem; flex: none; }

/* The three standard products, nested inside their mode so they read as one
   alternative rather than three more top-level choices. */
.cy-subproducts { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: 1rem; }

.cy-subproducts li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; }
.cy-subproducts .cy-tile { margin-bottom: 0; }
.cy-subproducts h4 { font-size: .97rem; font-weight: 750; color: var(--cy-ink); margin: 0 0 .2rem; }
.cy-subproducts p { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--cy-muted); }

.cy-modes__foot {
    display: flex;
    gap: .55rem;
    justify-content: center;
    margin: 1.5rem auto 0;
    max-width: 52rem;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--cy-muted);
    text-align: center;
}

.cy-modes__foot i { color: var(--cy-navy-600); margin-top: .2rem; flex: none; }

@media (max-width: 899.98px) {
    .cy-modes { grid-template-columns: minmax(0, 1fr); }
    .cy-modes__foot { text-align: left; }
}

/* Names the speaker on the hero conversation card. */
.cy-float__who {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .6rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--cy-line-soft);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cy-teal);
}

/* Legal prose.

   Terms, privacy and the platform rules are long documents people scan for one
   clause, so the type is set for reading: a narrow measure, headings that break
   the wall of text, and enough space between clauses to find your place again. */
.cy-legal {
    max-width: 46rem;
    color: var(--cy-body);
    font-size: 1rem;
    line-height: 1.75;
}

.cy-legal h2 {
    font-family: var(--cy-font-display, inherit);
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--cy-ink);
    letter-spacing: -.01em;
    margin: 2.4rem 0 .75rem;
    scroll-margin-top: 6rem;
}

.cy-legal h3 {
    font-size: 1.02rem;
    font-weight: 750;
    color: var(--cy-ink);
    margin: 1.6rem 0 .5rem;
}

.cy-legal p { margin: 0 0 1rem; }

.cy-legal ul,
.cy-legal ol {
    margin: 0 0 1.15rem;
    padding-left: 1.2rem;
    display: grid;
    gap: .45rem;
}

.cy-legal li { padding-left: .15rem; }

.cy-legal a {
    color: var(--cy-blue);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.cy-legal strong { color: var(--cy-ink); font-weight: 700; }

.cy-legal h2 + p,
.cy-legal h3 + p { margin-top: 0; }

/* The first paragraph of each document, set apart as the plain-English summary
   of what follows. */
.cy-legal__notice {
    margin: 0 0 2rem;
    padding: 1.05rem 1.2rem;
    border-left: 3px solid var(--cy-teal);
    border-radius: 0 var(--cy-r-sm, .6rem) var(--cy-r-sm, .6rem) 0;
    background: var(--cy-teal-50);
    color: #0B3B37;
    font-size: .95rem;
    line-height: 1.65;
}

.cy-empty {
    grid-column: 1 / -1;
    padding: 2rem 1.5rem;
    border: 1px dashed var(--cy-line);
    border-radius: var(--cy-r);
    background: var(--cy-surface-2);
    color: var(--cy-muted);
    text-align: center;
    font-size: .93rem;
}

/* Rail header with a "see all" link */
.cy-rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.cy-rail-head h3 { margin-bottom: .15rem; }
.cy-rail-head p { font-size: .89rem; color: var(--cy-muted); margin: 0; }

/* ===========================================================================
   12. FOOTER
   =========================================================================== */
.cy-footer {
    background: var(--cy-navy);
    color: #C6D5EC;
    padding-block: clamp(2.75rem, 5vw, 4.25rem) 1.75rem;
}

.cy-footer h2, .cy-footer h3 { color: #fff; }

.cy-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: 2.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.cy-footer__about p { font-size: .89rem; line-height: 1.65; color: #A9BDD9; max-width: 30rem; }

.cy-footer__col h3 {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8FA6C6;
    margin-bottom: .9rem;
}

.cy-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cy-footer__col a { color: #D3E0F2; font-size: .89rem; text-decoration: none; }
.cy-footer__col a:hover { color: #fff; text-decoration: underline; }

.cy-footer__social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.cy-footer__social a {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 11px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #D3E0F2;
    font-size: .95rem;
    transition: background-color var(--cy-fast) var(--cy-ease), color var(--cy-fast) var(--cy-ease);
}
.cy-footer__social a:hover { background: rgba(255, 255, 255, .18); color: #fff; text-decoration: none; }

.cy-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.6rem;
    font-size: .82rem;
    color: #91A7C6;
}
.cy-footer__bottom a { color: #B7C9E2; }

.cy-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.15rem; list-style: none; margin: 0; padding: 0; }

/* ===========================================================================
   13. MOTION
   =========================================================================== */
.cy-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--cy-ease), transform .6s var(--cy-ease);
    will-change: opacity, transform;
}
.cy-reveal.is-in { opacity: 1; transform: none; }
.cy-reveal[data-delay="1"] { transition-delay: .08s; }
.cy-reveal[data-delay="2"] { transition-delay: .16s; }
.cy-reveal[data-delay="3"] { transition-delay: .24s; }
.cy-reveal[data-delay="4"] { transition-delay: .32s; }

.cy-float__label {
    margin: 0 0 .5rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cy-navy-700);
}

.cy-float--chat { animation: cy-drift 7s ease-in-out infinite; }
.cy-float--score { animation: cy-drift 8.5s ease-in-out infinite reverse; }

@keyframes cy-drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cy-course { transform: none; }
    .cy-course:hover, .cy-course:focus-within { --cy-lift: 0px; }
    .cy-course:hover .cy-course__media img { transform: none; }
    .cy-course__media::after { display: none; }
    .cy-reveal { opacity: 1; transform: none; transition: none; }
    .cy-float--chat,
    .cy-float--score { animation: none; }
    .cy-typing span { animation: none; opacity: .7; }
    .cy-voice__wave i { animation: none; opacity: .72; transform: none; }
    .cy-meter__fill { transition: none; }
    .cy-public *,
    .cy-public *::before,
    .cy-public *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ===========================================================================
   14. RESPONSIVE
   =========================================================================== */
@media (max-width: 1199.98px) {
    .cy-nav__search { max-width: 16rem; }
    .cy-float--chat { left: -.5rem; }
    .cy-float--score { right: -.25rem; }
}

@media (max-width: 991.98px) {
    :root { --cy-nav-h: 4rem; }

    .cy-nav__menu,
    .cy-nav__search { display: none; }
    .cy-nav__desktop-actions { display: none; }
    .cy-nav__toggle { display: inline-grid; }

    .cy-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .cy-hero__lead { max-width: none; }
    .cy-hero__visual { max-width: 34rem; margin-inline: auto; width: 100%; }

    .cy-split,
    .cy-split--wide-left,
    .cy-split--wide-right { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }

    .cy-split--flip-mobile > :first-child { order: 2; }

    .cy-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cy-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cy-trust-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }

    .cy-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cy-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .cy-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .cy-section-head { margin-bottom: 1.9rem; }
    .cy-btn { width: auto; }
    .cy-hero__proof { gap: .55rem 1.1rem; }
    .cy-float--score { display: none; }
    .cy-float--chat { position: static; width: 100%; margin-top: 1rem; animation: none; box-shadow: var(--cy-shadow); }
    .cy-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .cy-try__opts { grid-template-columns: minmax(0, 1fr); }
    .cy-grid-3,
    .cy-grid-4 { grid-template-columns: minmax(0, 1fr); }
    .cy-trust-strip__grid { grid-template-columns: minmax(0, 1fr); }
    .cy-actions { gap: .6rem; }
    .cy-actions .cy-btn { flex: 1 1 100%; }
    .cy-tabs { width: 100%; justify-content: stretch; }
    .cy-tab { flex: 1 1 auto; text-align: center; }
    .cy-footer__top { grid-template-columns: minmax(0, 1fr); }
    .cyoku-lockup--nav .cyoku-wordmark { font-size: 1.15rem; }
    .cy-rail { grid-template-columns: minmax(0, 1fr); }
}

/* Print — keep the public pages readable if someone prints a plan page */
@media print {
    .cy-nav, .cy-drawer, .cy-scrim, .cy-footer__social { display: none !important; }
    .cy-hero, .cy-section--dark, .cy-pagehero, .cy-cta-band { background: #fff !important; color: #000 !important; }
    .cy-hero h1, .cy-section--dark h2, .cy-pagehero h1 { color: #000 !important; }
    .cy-reveal { opacity: 1 !important; transform: none !important; }
}