/*
 * MEO NextGen — Homepage (DEV USER)
 * Gradient hero with product showcase (exam + performance report),
 * icon-led features, pathway tiles, trial steps, performance and CTA.
 * Requires meo-theme.css and meo-site.css. Presentation only.
 */

html {
    scroll-behavior: smooth;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
    --hero-tail: 230px;
    padding: 76px 0 0;
    text-align: center;
}

/* Gradient band that hands over to the light page behind the devices. */
.hero.meo-band {
    background:
        linear-gradient(180deg, transparent calc(100% - var(--hero-tail)), var(--meo-bg) calc(100% - var(--hero-tail))),
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .16), transparent 36%),
        radial-gradient(circle at 88% 6%, rgba(120, 214, 226, .26), transparent 40%),
        var(--meo-gradient);
}

.hero.meo-band::before {
    bottom: var(--hero-tail);
}

.hero-copy {
    max-width: 880px;
}

.hero-eyebrow {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .86);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-copy h1 {
    margin: 0 auto 20px;
    color: #fff;
    font-size: 60px;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.hero-copy h1 span {
    display: block;
    color: #CFEFF3;
}

.hero-lead {
    max-width: 640px;
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, .88);
    font-size: 17.5px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.hero-primary,
.hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 26px;
    border-radius: 12px;
    font-size: 15.5px;
    font-weight: 750;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.hero-primary {
    background: #fff;
    color: var(--meo-brand-dark) !important;
    box-shadow: 0 12px 28px rgba(10, 30, 70, .22);
}

.hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(10, 30, 70, .28);
}

.hero-secondary {
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .06);
    color: #fff !important;
}

.hero-secondary:hover {
    background: rgba(255, 255, 255, .14);
    transform: translateY(-2px);
}

.hero-note {
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}

/* ============================================================
   PRODUCT SHOWCASE (illustrative, sample data)
   ============================================================ */

.showcase {
    position: relative;
    margin-top: 60px;
    margin-bottom: 0;
    padding: 0 0 40px;
    container-type: inline-size;
    text-align: left;
}

.showcase-stage {
    position: relative;
}

.device-laptop,
.device-phone {
    font-size: clamp(5px, 1vw, 12px);
    font-size: calc(100cqw / 94);
    color: var(--meo-ink);
}

.device-laptop {
    position: relative;
    width: 80%;
    margin-left: 1%;
    filter: drop-shadow(0 34px 50px rgba(10, 30, 70, .30));
}

.laptop-screen {
    overflow: hidden;
    border: .85em solid #101A2C;
    border-radius: 1.3em 1.3em .5em .5em;
    background: #F3F5FA;
}

.laptop-base {
    position: relative;
    width: 106%;
    height: 1.2em;
    margin-left: -3%;
    border-radius: 0 0 1.6em 1.6em;
    background: linear-gradient(180deg, #DCE1EA, #AFB8C8);
}

.laptop-base::before {
    content: "";
    position: absolute;
    left: 43%;
    top: 0;
    width: 14%;
    height: .45em;
    border-radius: 0 0 .6em .6em;
    background: #98A2B4;
}

.mock-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8em;
    height: 3.6em;
    padding: 0 1.5em;
    border-bottom: 1px solid #E1E6EF;
    background: #fff;
    font-size: 1em;
}

.mock-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: .25em;
    background: var(--meo-gradient);
}

.mock-bar strong {
    font-size: 1.05em;
}

.mock-logo {
    font-size: inherit;
    width: 2.2em;
    height: 2.2em;
    border-radius: .6em;
    flex: none;
}

.mock-pill {
    margin-left: auto;
    padding: .35em .9em;
    border-radius: 999px;
    background: var(--meo-brand-tint);
    color: var(--meo-brand-dark);
    font-size: .85em;
    font-weight: 750;
}

.mock-body {
    padding: 1.4em;
    background: linear-gradient(180deg, #E4EEF8, #F3F5FA 18em);
}

.mock-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.8em;
    padding: 1.1em 1.4em;
    border-radius: 1em;
    background: #fff;
    box-shadow: 0 .1em .3em rgba(19, 32, 56, .05), 0 .5em 1.4em rgba(19, 32, 56, .07);
}

.mock-timer {
    display: flex;
    align-items: center;
    gap: .9em;
}

.mock-timer svg {
    width: 4.2em;
    height: 4.2em;
    transform: rotate(-90deg);
}

.mock-timer circle {
    fill: none;
    stroke-width: 6;
}

.mock-ring-track {
    stroke: #E1E6EF;
}

.mock-ring-value {
    stroke: var(--meo-brand);
    stroke-linecap: round;
    animation: mock-sweep 2.4s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes mock-sweep {
    from {
        stroke-dashoffset: 0;
    }
}

.mock-timer strong {
    display: block;
    font-size: 1.75em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mock-timer span {
    display: block;
    margin-top: .35em;
    color: #8891A3;
    font-size: .72em;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mock-progress {
    min-width: 0;
}

.mock-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: .6em;
}

.mock-progress-head strong {
    font-size: 1.1em;
}

.mock-progress-head em {
    color: #5B6578;
    font-style: normal;
    font-weight: 600;
}

.mock-progress-head span {
    color: #5B6578;
    font-size: .9em;
    font-weight: 700;
}

.mock-track {
    height: .55em;
    overflow: hidden;
    border-radius: 999px;
    background: #E1E6EF;
}

.mock-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--meo-teal), var(--meo-brand));
}

.mock-actions {
    display: flex;
    gap: .5em;
}

.mock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6em 1em;
    border: 1px solid #C7CFDD;
    border-radius: .6em;
    background: #fff;
    font-size: .88em;
    font-weight: 750;
    white-space: nowrap;
}

.mock-btn-aa {
    font-family: Georgia, serif;
}

.mock-btn-flag {
    border-color: #B4690E;
    color: #B4690E;
}

.mock-btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #1E63AE, #2A7DC9);
    color: #fff;
}

.mock-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15em;
    gap: 1.2em;
    margin-top: 1.2em;
}

.mock-question,
.mock-side {
    border-radius: 1em;
    background: #fff;
    box-shadow: 0 .15em .4em rgba(19, 32, 56, .05), 0 1.2em 2.6em rgba(19, 32, 56, .08);
}

.mock-question {
    padding: 1.7em 2em;
}

.mock-class {
    display: flex;
    align-items: center;
    gap: .8em;
    margin-bottom: 1.1em;
}

.mock-chip {
    padding: .35em .9em;
    border-radius: 999px;
    background: linear-gradient(135deg, #E8F1FB, rgba(11, 138, 153, .12));
    color: #154C87;
    font-size: .85em;
    font-weight: 800;
}

.mock-trail {
    color: #5B6578;
    font-size: .85em;
}

.mock-q {
    margin: 0 0 1.2em;
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.5;
}

.mock-answers {
    list-style: none;
    display: grid;
    gap: .55em;
    margin: 0;
    padding: 0;
}

.mock-answers li {
    display: flex;
    align-items: center;
    gap: .9em;
    padding: .7em .9em;
    border: 1px solid #C7CFDD;
    border-radius: .75em;
    font-size: 1em;
}

.mock-answers b {
    width: 2em;
    height: 2em;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid #C7CFDD;
    border-radius: .55em;
    background: #F3F5FA;
    color: #5B6578;
    font-size: .9em;
}

.mock-answers li.is-selected {
    border-color: #1E63AE;
    background: #E8F1FB;
    box-shadow: 0 0 0 1px #1E63AE;
}

.mock-answers li.is-selected b {
    border-color: transparent;
    background: linear-gradient(135deg, #1E63AE, #2A7DC9);
    color: #fff;
}

.mock-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 1.3em;
    padding-top: 1.1em;
    border-top: 1px solid #E1E6EF;
}

.mock-side {
    align-self: start;
    padding: 1.3em;
}

.mock-side-title {
    display: block;
    margin-bottom: 1em;
    color: #8891A3;
    font-size: .75em;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mock-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55em;
    margin: 0;
    padding: 0;
}

.mock-grid li {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid #C7CFDD;
    border-radius: .5em;
    font-size: .95em;
    font-weight: 800;
}

.mock-grid li.a {
    border-color: #1E63AE;
    background: #E8F1FB;
    color: #154C87;
}

.mock-grid li.c {
    border-color: transparent;
    background: linear-gradient(135deg, #1E63AE, #2A7DC9);
    color: #fff;
    box-shadow: 0 0 0 .2em #E8F1FB;
}

.mock-grid li.f {
    border-color: #B4690E;
}

.mock-grid li.f::after {
    content: "";
    position: absolute;
    top: -.35em;
    right: -.35em;
    width: .8em;
    height: .8em;
    border: .15em solid #fff;
    border-radius: 50%;
    background: #B4690E;
}

/* Phone: the Performance Report */

.device-phone {
    position: absolute;
    right: 0;
    bottom: -3%;
    width: 21.5em;
    overflow: hidden;
    border: .75em solid #101A2C;
    border-radius: 2.8em;
    background: #F3F5FA;
    box-shadow: 0 2.4em 4.4em rgba(10, 30, 70, .34), 0 .6em 1.6em rgba(10, 30, 70, .16);
}

.phone-screen {
    padding-bottom: 1.4em;
}

.phone-notch {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: .7em;
    width: 7em;
    height: 1.5em;
    border-radius: 999px;
    background: #101A2C;
    transform: translateX(-50%);
}

.phone-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: .5em;
    padding: 3.4em 1.4em 1.8em;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .18), transparent 45%),
        var(--meo-gradient);
}

.phone-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 1.8em 1.8em,
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 1.8em 1.8em;
}

.phone-kicker {
    color: rgba(255, 255, 255, .85);
    font-size: .78em;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.phone-donut {
    position: relative;
    width: 9.4em;
    height: 9.4em;
    margin: .5em 0 .4em;
    padding: .7em;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1em 2em rgba(10, 30, 70, .28), 0 0 0 .45em rgba(255, 255, 255, .16);
}

.phone-donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.phone-donut circle {
    fill: none;
    stroke-width: 11;
}

.phone-donut .donut-track {
    stroke: #E1E6EF;
}

.phone-donut .donut-value {
    stroke: var(--meo-brand);
    stroke-linecap: round;
}

.phone-donut .donut-mark {
    stroke: #132038;
    stroke-width: 2.5;
}

.phone-donut strong {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #132038;
    font-size: 1.7em;
    font-variant-numeric: tabular-nums;
}

.phone-verdict {
    padding: .3em 1em;
    border-radius: 999px;
    background: #fff;
    color: #1F8A52;
    font-size: .8em;
    font-weight: 800;
    letter-spacing: .14em;
}

.phone-count {
    font-size: 1.3em;
}

.phone-pass {
    color: rgba(255, 255, 255, .85);
    font-size: .85em;
}

.phone-outcomes {
    padding: 1.2em 1.3em .4em;
}

.phone-bar {
    display: flex;
    gap: .2em;
    height: .65em;
    overflow: hidden;
    border-radius: 999px;
}

.phone-bar .ok {
    background: #1F8A52;
}

.phone-bar .bad {
    background: #C23B3B;
}

.phone-bar .na {
    background: #6B7486;
}

.phone-titles {
    list-style: none;
    display: grid;
    gap: .55em;
    margin: .8em 0 0;
    padding: 0 1.3em;
}

.phone-titles li {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .65em .8em;
    border-radius: .8em;
    background: #fff;
    box-shadow: 0 .1em .3em rgba(19, 32, 56, .05), 0 .4em 1em rgba(19, 32, 56, .06);
    font-size: .95em;
    font-weight: 700;
}

.phone-titles b {
    width: 1.7em;
    height: 1.7em;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .85em;
}

.phone-titles span {
    margin-left: auto;
    padding: .25em .7em;
    border-radius: 999px;
    font-size: .78em;
    font-weight: 800;
    white-space: nowrap;
}

.phone-titles .ok b,
.phone-titles .ok span {
    background: #E4F5EC;
    color: #1F8A52;
}

.phone-titles .bad b,
.phone-titles .bad span {
    background: #FBEAEA;
    color: #C23B3B;
}

.phone-titles .na b,
.phone-titles .na span {
    background: #EEF1F6;
    color: #6B7486;
}

.showcase-caption {
    margin-top: 26px;
    color: var(--meo-ink-faint);
    font-size: 12.5px;
    font-style: italic;
    text-align: center;
}

/* ============================================================
   SECTIONS
   ============================================================ */

.home-section {
    padding: 76px 0;
}

.home-section.features {
    padding-top: 24px;
}

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

.section-heading h2 {
    margin: 0 0 12px;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.section-heading p {
    margin: 0;
    color: var(--meo-ink-muted);
    font-size: 16px;
    line-height: 1.65;
}

.section-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--meo-teal);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Features: compact, icon-led, elevated */

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

.feature-card {
    padding: 26px 24px;
    border-radius: var(--meo-radius);
    background: var(--meo-surface);
    box-shadow: var(--meo-elev-1);
    transition: transform .2s ease, box-shadow .2s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--meo-elev-2);
}

.feature-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--meo-gradient);
    box-shadow: 0 8px 18px rgba(24, 104, 180, .24);
}

.feature-icon.is-amber {
    background: linear-gradient(135deg, #D08A1E, #B4690E);
    box-shadow: 0 8px 18px rgba(180, 105, 14, .24);
}

.feature-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    letter-spacing: -.01em;
}

.feature-card p {
    margin: 0;
    color: var(--meo-ink-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* Exams: pathway tiles */

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

.exam-tile {
    position: relative;
    isolation: isolate;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 28px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(120, 214, 226, .35), transparent 50%),
        linear-gradient(145deg, #0B8A99, #1868B4);
    box-shadow: var(--meo-elev-2);
    transition: transform .2s ease, box-shadow .2s ease;
}

.exam-tile.is-deep {
    background:
        radial-gradient(circle at 90% 0%, rgba(120, 214, 226, .28), transparent 50%),
        linear-gradient(145deg, #1868B4, #2C4FA3);
}

.exam-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--meo-elev-3);
}

.exam-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 26px 26px;
}

.exam-tile-pulse {
    position: absolute;
    z-index: -1;
    right: -12px;
    bottom: 26px;
    width: 180px;
    height: 70px;
    background: var(--meo-heartbeat) center / contain no-repeat;
    opacity: .18;
}

.exam-tile.is-muted {
    color: var(--meo-ink);
    background: var(--meo-surface);
    box-shadow: var(--meo-elev-1);
}

.exam-tile.is-muted::before {
    display: none;
}

.exam-tile small {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
}

.exam-tile.is-muted small {
    color: var(--meo-teal);
    opacity: 1;
}

.exam-tile h3 {
    margin: 8px 0 12px;
    font-size: 26px;
    letter-spacing: -.02em;
}

.exam-tile p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
    opacity: .92;
}

.exam-tile.is-muted p {
    color: var(--meo-ink-muted);
    opacity: 1;
}

.exam-tile a {
    margin-top: auto;
    color: #fff !important;
    font-size: 14px;
    font-weight: 750;
}

.exam-tile.is-muted a {
    color: var(--meo-brand) !important;
}

/* How the Free Trial works */

.how {
    background:
        linear-gradient(180deg, transparent, rgba(232, 241, 251, .7) 30%, rgba(232, 241, 251, .7) 70%, transparent);
}

.how-steps {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
}

.how-steps::before {
    content: "";
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 22px;
    height: 2px;
    background: linear-gradient(90deg, var(--meo-teal), var(--meo-brand), var(--meo-deep));
    opacity: .35;
}

.how-steps li {
    position: relative;
    text-align: center;
}

.how-num {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border: 4px solid var(--meo-bg);
    border-radius: 50%;
    background: var(--meo-gradient);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(24, 104, 180, .25);
}

.how-steps h3 {
    margin: 0 0 8px;
    font-size: 16.5px;
}

.how-steps p {
    max-width: 240px;
    margin: 0 auto;
    color: var(--meo-ink-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* Performance */

.analytics {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 48px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(11, 138, 153, .10), transparent 40%),
        var(--meo-surface);
    box-shadow: var(--meo-elev-2);
}

.analytics h2 {
    margin: 0 0 12px;
    font-size: 32px;
    letter-spacing: -.025em;
}

.analytics-copy > p {
    margin: 0;
    color: var(--meo-ink-muted);
    font-size: 15px;
    line-height: 1.65;
}

.check-list {
    list-style: none;
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 650;
}

.check-list li::before {
    content: "✓";
    width: 22px;
    height: 22px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--meo-success-tint);
    color: var(--meo-success);
    font-size: 12px;
    font-weight: 900;
}

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

.stat {
    padding: 22px 16px;
    border-radius: 14px;
    background: var(--meo-gradient-soft);
    text-align: center;
}

.stat strong {
    display: block;
    color: var(--meo-brand-dark);
    font-size: 26px;
    letter-spacing: -.02em;
}

.stat span {
    display: block;
    margin-top: 6px;
    color: var(--meo-ink-muted);
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .08em;
}

.title-chips-wrap {
    grid-column: 1 / -1;
    padding-top: 28px;
    border-top: 1px solid var(--meo-line);
}

.title-chips-wrap h3 {
    margin: 0 0 14px;
    color: var(--meo-ink-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.title-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.title-chips li {
    padding: 7px 14px;
    border: 1px solid var(--meo-line);
    border-radius: 999px;
    background: var(--meo-bg);
    font-size: 13px;
    font-weight: 650;
    transition: border-color .15s ease, color .15s ease;
}

.title-chips li:hover {
    border-color: var(--meo-brand);
    color: var(--meo-brand);
}

/* CTA */

.cta-section {
    padding-top: 0;
}

.cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    overflow: hidden;
    padding: 56px 60px;
    border-radius: 24px;
    box-shadow: var(--meo-elev-3);
}

.cta h2 {
    margin: 0 0 8px;
    font-size: 32px;
    letter-spacing: -.025em;
}

.cta p {
    margin: 0;
    font-size: 15.5px;
    opacity: .9;
}

.cta a {
    flex: none;
    padding: 15px 28px;
    border-radius: 12px;
    background: #fff;
    color: var(--meo-brand-dark) !important;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(10, 30, 70, .22);
    transition: transform .15s ease;
}

.cta a:hover {
    transform: translateY(-2px);
}

.site-footer {
    margin-top: 0;
}

/* ============================================================
   REVEAL (enabled by script only; content visible without JS)
   ============================================================ */

.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

.reveal-ready .feature-card[data-reveal].is-revealed:hover,
.reveal-ready .exam-tile[data-reveal].is-revealed:hover {
    transform: translateY(-3px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
    .hero-copy h1 {
        font-size: 48px;
    }

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics {
        gap: 32px;
        padding: 36px;
    }

    .how-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 36px;
    }

    .how-steps::before {
        display: none;
    }
}

@media (max-width: 820px) {
    .hero {
        --hero-tail: 150px;
    }

    .analytics {
        grid-template-columns: minmax(0, 1fr);
    }

    .exam-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .exam-tile {
        min-height: 0;
    }

    .section-heading h2 {
        font-size: 30px;
    }
}

@media (max-width: 640px) {
    .hero {
        --hero-tail: 200px;
        padding-top: 48px;
    }

    .hero-eyebrow {
        font-size: 11px;
        letter-spacing: .1em;
    }

    .hero-copy h1 {
        font-size: 36px;
    }

    .hero-lead {
        font-size: 15.5px;
    }

    .hero-primary,
    .hero-secondary {
        width: 100%;
    }

    .showcase {
        margin-top: 40px;
        padding-bottom: 24px;
    }

    .device-laptop {
        width: 100%;
        margin-left: 0;
    }

    /* Hide the navigator column on the miniature laptop. */
    .mock-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .mock-side {
        display: none;
    }

    /* Phone sits below the laptop, overlapping its base. */
    .device-phone {
        position: relative;
        right: auto;
        bottom: auto;
        width: 62%;
        margin: -14% auto 0;
        font-size: calc(100cqw / 36);
    }

    .home-section {
        padding: 52px 0;
    }

    .section-heading h2 {
        font-size: 26px;
    }

    .feature-grid,
    .how-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .analytics {
        padding: 26px 20px;
    }

    .analytics h2 {
        font-size: 26px;
    }

    .cta {
        display: block;
        padding: 38px 24px;
        text-align: center;
    }

    .cta h2 {
        font-size: 26px;
    }

    .cta a {
        display: inline-block;
        margin-top: 22px;
    }
}

@media (max-width: 380px) {
    .hero-copy h1 {
        font-size: 31px;
    }

    .stats {
        gap: 10px;
    }

    .stat {
        padding: 16px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mock-ring-value {
        animation: none;
    }

    .feature-card,
    .exam-tile,
    .hero-primary,
    .hero-secondary,
    .cta a {
        transition: none;
    }

    .feature-card:hover,
    .exam-tile:hover,
    .hero-primary:hover,
    .hero-secondary:hover,
    .cta a:hover {
        transform: none;
    }
}

/* ============================================================
   EXAMINATION PATHWAYS (MRCOG Part 1 / Part 2) — 2026-10-03
   Replaces the three-tile exams grid. Same gradient tile language.
   ============================================================ */

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

.pathway-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    overflow: hidden;
    padding: 34px 34px 30px;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(120, 214, 226, .35), transparent 50%),
        linear-gradient(145deg, #0B8A99, #1868B4);
    box-shadow: var(--meo-elev-2);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pathway-card.is-deep {
    background:
        radial-gradient(circle at 90% 0%, rgba(120, 214, 226, .28), transparent 50%),
        linear-gradient(145deg, #1868B4, #2C4FA3);
}

.pathway-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 26px 26px;
}

.pathway-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--meo-elev-3);
}

.pathway-head small {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .88;
}

.pathway-head h3 {
    margin: 6px 0 14px;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.pathway-card > p {
    max-width: 420px;
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.6;
    opacity: .92;
}

.pathway-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin: 0 0 26px;
}

.pathway-facts dt {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .75;
}

.pathway-facts dd {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.pathway-chip,
.pathway-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: 13px;
    font-weight: 750;
}

.pathway-status.is-live {
    border-color: transparent;
    background: #fff;
    color: #1F8A52;
}

.pathway-status.is-live::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #1F8A52;
}

.pathway-cta {
    align-self: flex-start;
    margin-top: auto;
    padding: 12px 20px;
    border-radius: 12px;
    background: #fff;
    color: var(--meo-brand-dark) !important;
    font-size: 14.5px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(10, 30, 70, .22);
    transition: transform .15s ease;
}

.pathway-cta:hover {
    transform: translateY(-2px);
}

.pathway-note {
    margin: 22px 0 0;
    color: var(--meo-ink-muted);
    font-size: 14px;
    text-align: center;
}

.pathway-note a {
    margin-left: 6px;
    color: var(--meo-brand) !important;
    font-weight: 750;
}

.reveal-ready .pathway-card[data-reveal].is-revealed:hover {
    transform: translateY(-3px);
}

@media (max-width: 820px) {
    .pathway-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pathway-card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .pathway-card {
        padding: 26px 22px 24px;
    }

    .pathway-head h3 {
        font-size: 28px;
    }

    .pathway-cta {
        align-self: stretch;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pathway-card,
    .pathway-cta {
        transition: none;
    }

    .pathway-card:hover,
    .pathway-cta:hover {
        transform: none;
    }
}
/* Longer Part 1 CTA copy: allow the closing CTA button to wrap on small phones. */
@media (max-width: 640px) {
    .cta a {
        max-width: 100%;
        white-space: normal;
    }
}
/* ============================================================
   HERO PRODUCT ANIMATION — 2026-10-03
   Active only when <html> has .hero-anim (set in <head> when motion
   is allowed). Starting states apply until .hero-play-laptop /
   .hero-play-phone are added; every property then returns to the
   existing static design, so the final frame is unchanged.
   Animates only transform, opacity, colour and SVG strokes.
   ============================================================ */

:root {
    --hero-phone-delay: 1.4s;
}

/* The ring is driven by the sequence script instead of the load sweep. */
.hero-anim .mock-ring-value {
    animation: none;
}

.hero-anim:not(.hero-play-laptop) .mock-ring-value {
    stroke-dashoffset: 0;
}

/* Answered progress: 4/12 -> 5/12 (33.3% -> 41.7% = scale .8 -> 1). */
.hero-anim .mock-track i {
    transform-origin: left center;
    transition: transform .4s cubic-bezier(.33, 1, .68, 1) .9s;
}

.hero-anim:not(.hero-play-laptop) .mock-track i {
    transform: scaleX(.8);
}

/* Answer B eases into its existing selected state. */
.hero-anim .mock-answers li.is-selected {
    transition:
        border-color .3s ease .6s,
        background-color .3s ease .6s,
        box-shadow .3s ease .6s;
}

.hero-anim:not(.hero-play-laptop) .mock-answers li.is-selected {
    border-color: #C7CFDD;
    background-color: transparent;
    box-shadow: none;
}

.hero-anim .mock-answers li.is-selected b {
    position: relative;
    isolation: isolate;
    transition: color .3s ease .6s;
}

.hero-anim .mock-answers li.is-selected b::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 1px solid #C7CFDD;
    border-radius: inherit;
    background: #F3F5FA;
    opacity: 0;
    transition: opacity .3s ease .6s;
}

.hero-anim:not(.hero-play-laptop) .mock-answers li.is-selected b {
    color: #5B6578;
}

.hero-anim:not(.hero-play-laptop) .mock-answers li.is-selected b::before {
    opacity: 1;
}

/* Navigator: current square 3 settles from outlined to its filled state. */
.hero-anim .mock-grid li.c {
    isolation: isolate;
    transition: color .25s ease 1s;
}

.hero-anim .mock-grid li.c::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 1px solid #1E63AE;
    border-radius: inherit;
    background: #fff;
    opacity: 0;
    transition: opacity .25s ease 1s;
}

.hero-anim:not(.hero-play-laptop) .mock-grid li.c {
    color: #154C87;
}

.hero-anim:not(.hero-play-laptop) .mock-grid li.c::before {
    opacity: 1;
}

/* Phone: donut 0 -> 83.3%, then result, outcome bar and sample rows. */
.hero-anim .phone-donut .donut-value {
    transition:
        stroke-dasharray 1.2s cubic-bezier(.33, 1, .68, 1) var(--hero-phone-delay),
        opacity .15s linear var(--hero-phone-delay);
}

.hero-anim:not(.hero-play-phone) .phone-donut .donut-value {
    stroke-dasharray: 0 314.159;
    opacity: 0;
}

.hero-anim .phone-verdict {
    transition:
        opacity .3s ease calc(var(--hero-phone-delay) + 1.2s),
        transform .3s ease calc(var(--hero-phone-delay) + 1.2s);
}

.hero-anim:not(.hero-play-phone) .phone-verdict {
    opacity: 0;
    transform: scale(.96);
}

.hero-anim .phone-count,
.hero-anim .phone-pass {
    transition: opacity .3s ease calc(var(--hero-phone-delay) + 1.3s);
}

.hero-anim:not(.hero-play-phone) .phone-count,
.hero-anim:not(.hero-play-phone) .phone-pass {
    opacity: 0;
}

.hero-anim .phone-bar i {
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.33, 1, .68, 1) calc(var(--hero-phone-delay) + 1.4s);
}

.hero-anim .phone-bar i.bad {
    transition-delay: calc(var(--hero-phone-delay) + 1.52s);
}

.hero-anim .phone-bar i.na {
    transition-delay: calc(var(--hero-phone-delay) + 1.64s);
}

.hero-anim:not(.hero-play-phone) .phone-bar i {
    transform: scaleX(0);
}

.hero-anim .phone-titles li {
    transition:
        opacity .3s ease calc(var(--hero-phone-delay) + 1.7s),
        transform .3s ease calc(var(--hero-phone-delay) + 1.7s);
}

.hero-anim .phone-titles li:nth-child(2) {
    transition-delay: calc(var(--hero-phone-delay) + 1.78s);
}

.hero-anim .phone-titles li:nth-child(3) {
    transition-delay: calc(var(--hero-phone-delay) + 1.86s);
}

.hero-anim .phone-titles li:nth-child(4) {
    transition-delay: calc(var(--hero-phone-delay) + 1.94s);
}

.hero-anim:not(.hero-play-phone) .phone-titles li {
    opacity: 0;
    transform: translateY(.4em);
}

/* Belt and braces: reduced motion always shows the static final frame. */
@media (prefers-reduced-motion: reduce) {
    .hero-anim .mock-ring-value,
    .hero-anim .mock-track i,
    .hero-anim .mock-answers li.is-selected,
    .hero-anim .mock-answers li.is-selected b,
    .hero-anim .mock-answers li.is-selected b::before,
    .hero-anim .mock-grid li.c,
    .hero-anim .mock-grid li.c::before,
    .hero-anim .phone-donut .donut-value,
    .hero-anim .phone-verdict,
    .hero-anim .phone-count,
    .hero-anim .phone-pass,
    .hero-anim .phone-bar i,
    .hero-anim .phone-titles li {
        transition: none !important;
    }
}