/* Homepage layout, aligned to the app portal. See STYLES.md.
   Everything here is scoped to .home-page so the rest of the site is
   untouched until each page is migrated. */

.home-page {
    text-align: left;
    background: var(--color-white);
    color: var(--color-ink);
}

.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4 {
    color: var(--color-ink);
}

.home-shell {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.home-section {
    padding: 5rem 0;
}

.home-section--paper {
    background: var(--color-paper);
}

/* A thin band — two logos and a line of copy each — so it does not need the
   full section rhythm above and below. */
.home-section--compact {
    padding: 3.5rem 0;
}

.home-section--ink {
    background: var(--color-ink);
    color: var(--color-white);
}

/* The heading and lede below are coloured for light bands, so an ink section
   needs the same inversion the ink duo card already carries. Eyebrows use the
   `--accent` modifier in the markup, since the base eyebrow is the on-white
   variant. */
.home-section--ink .home-h2 {
    color: var(--color-white);
}

.home-section--ink .home-lede {
    color: var(--color-slate-300);
}

/* The shared embed sets `margin: 0 auto` and holds only an absolutely
   positioned iframe. That is fine in a normal block, but as a grid item the
   auto margins suppress the stretch and it shrink-wraps its (zero) in-flow
   content to nothing, so the width has to be explicit. The 80% cap is meant
   for a full-width container and only shrinks it further inside a column. */
.home-split .video-container {
    width: 100%;
    max-width: 100%;
}

/* The poster is the navy title card, the same navy as this band, so the clip
   needs an edge of its own — otherwise it reads as a flat panel rather than a
   video. The shared drop shadow is dark, which is invisible against ink. */
.home-section--ink .video-container {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.22),
        0 18px 40px rgba(0, 0, 0, 0.45);
}

/* The shared .video-container only positions iframes, so the video element
   needs the same treatment to fill the 16:9 box. */
.home-video {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: var(--color-ink);
    object-fit: cover;
}

/* Transparent overlay carrying our play button, sitting on top of the poster
   the video element is already painting. Removed on first press. */
.home-video-play {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.home-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Triangle drawn with borders rather than shipped as an icon asset. */
.home-video-play-icon::after {
    content: "";
    margin-left: 0.3rem;
    border-width: 0.7rem 0 0.7rem 1.15rem;
    border-style: solid;
    border-color: transparent transparent transparent var(--color-ink);
}

.home-video-play:hover .home-video-play-icon,
.home-video-play:focus-visible .home-video-play-icon {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
    .home-video-play-icon {
        transition: none;
    }

    .home-video-play:hover .home-video-play-icon,
    .home-video-play:focus-visible .home-video-play-icon {
        transform: translate(-50%, -50%);
    }
}

.home-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.home-eyebrow--accent {
    color: var(--color-accent);
}

.home-eyebrow--brand {
    color: var(--color-brand);
}

.home-page .home-h2 {
    margin: 1rem 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.home-page .home-h3 {
    margin: 1rem 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.home-lede {
    margin: 1.25rem 0 0;
    max-width: 44rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-ink-muted);
}

.home-lede a {
    color: var(--color-brand);
    text-decoration: none;
}

.home-lede a:hover {
    text-decoration: underline;
}

.home-arrow-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-weight: 500;
    color: var(--color-brand);
    text-decoration: none;
    transition: color 0.15s ease;
}

.home-arrow-link:hover {
    color: var(--color-brand-dark);
}

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

.home-hero {
    background: var(--hero-bg);
    color: var(--hero-fg);
}

.home-hero .home-shell {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Copy on the left, the persona question on the right. Single column until
   there is room for both, so the question never gets squeezed into a sliver. */
.home-hero-grid {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 960px) {
    /* Keeps the base `start` alignment on purpose. The panel is a form that
       grows and shrinks as the visitor answers, and centring the row would
       slide the headline down with it — up to 86px between the first step and
       the longest one. Pinned to the top, the copy holds still and only the
       form changes height. */
    .home-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
        gap: 4rem;
    }

    /* The panel is its own column now, so the stacked spacing would only
       knock it out of alignment with the copy beside it. */
    .home-hero-grid .journey-panel {
        margin-top: 0;
    }

}

.home-page .home-hero-title {
    margin: 1.5rem 0 0;
    max-width: 56rem;
    font-family: var(--font-display);
    font-weight: 600;
    /* "AI Medical Chronology" is meant to hold one line, so the size is driven
       by the width the title actually gets rather than by the viewport. Set on
       this face the string runs 9.6–10.3x the font size (Fraunces is optically
       sized, so it widens as it gets smaller); 10.6 clears the widest case.
       Stacked layout, so the available width is the shell less its padding. */
    font-size: clamp(1.6rem, calc((100vw - 3rem) / 10.6), 4.1rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--hero-fg);
}

/* Must follow the rule above, not sit in the grid block earlier in the file —
   same specificity, so the later declaration is the one that wins. */
@media (min-width: 960px) {
    /* Two columns now, so the title gets the shell less its padding, the grid
       gap, and the panel beside it: 3rem + 4rem + 27rem. */
    .home-page .home-hero-title {
        font-size: clamp(1.6rem, calc((100vw - 34rem) / 10.6), 4.1rem);
    }
}

/* Follows the persona theme so the hero stays legible when the expert
   theme swaps the ink background for a light one. */
.home-hero-eyebrow {
    color: var(--hero-kicker);
}

.home-hero-title em {
    font-style: italic;
    color: var(--hero-kicker);
}

.home-hero-lede {
    margin: 2rem 0 0;
    max-width: 44rem;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--hero-fg);
    opacity: 0.8;
}

.home-hero-lede p {
    margin: 0;
}

.home-hero-lede p + p {
    margin-top: 1.25rem;
}

/* ---------- Testimonial marquee ---------- */

/* A teaser strip directly under the hero. These are excerpts; the same five
   people appear with their full quotes in the Quotes section further down. */
.home-marquee {
    padding: 2.75rem 0;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-slate-200);
    overflow: hidden;
    /* Fade both edges so cards enter and leave instead of being cut off. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}

.home-marquee-track {
    display: flex;
    width: max-content;
    /* Duration tracks card width — a longer strip needs proportionally longer
       to cross, or the cards read as scrolling faster. */
    animation: home-marquee-slide 100s linear infinite;
}

.home-marquee:hover .home-marquee-track,
.home-marquee:focus-within .home-marquee-track {
    animation-play-state: paused;
}

@keyframes home-marquee-slide {
    from {
        transform: translateX(0);
    }
    /* The track holds the group twice, so -50% lands exactly on the start of
       the copy and the loop repeats without a seam. */
    to {
        transform: translateX(-50%);
    }
}

.home-marquee-group {
    display: flex;
    flex-shrink: 0;
    gap: 1.25rem;
    margin: 0;
    padding: 0 0.625rem;
    list-style: none;
}

.home-marquee-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 1.125rem;
    /* The page has no global border-box reset, so set it here — the widths
       below are meant to include the padding. */
    box-sizing: border-box;
    width: 34rem;
    /* Never let a card outgrow the screen it is scrolling across. */
    max-width: calc(100vw - 3rem);
    padding: 1.5rem 1.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.home-marquee-quote {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink);
}

.home-marquee-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.home-marquee-author img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.home-marquee-name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink);
}

.home-marquee-role {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-ink-muted);
}

/* A 5rem fade per side would swallow most of a phone screen, so narrow both the
   fade and the cards rather than letting the text sit under the gradient. */
@media (max-width: 640px) {
    .home-marquee {
        padding: 2rem 0;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
        mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
    }

    .home-marquee-group {
        gap: 0.875rem;
        padding: 0 0.4375rem;
    }

    .home-marquee-card {
        width: 25rem;
        padding: 1.25rem 1.375rem;
        /* Quotes vary enough at this width that pinning the author to the
           bottom of the tallest card opens a gap mid-card. Keep the name with
           the words instead and let the slack fall at the end. */
        justify-content: flex-start;
    }
}

/* The motion is decorative, so anyone asking for less gets the same cards as a
   strip they scroll themselves. */
@media (prefers-reduced-motion: reduce) {
    .home-marquee {
        overflow-x: auto;
    }

    .home-marquee-track {
        animation: none;
    }
}

/* ---------- Two-panel audience cards ---------- */

.home-duo {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .home-duo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-duo-card {
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    border-radius: 1rem;
}

.home-duo-card--ink {
    background: var(--color-ink);
    color: var(--color-white);
}

.home-duo-card--ink .home-h3 {
    color: var(--color-white);
}

.home-duo-card--brand {
    background: rgba(215, 234, 236, 0.3);
    border: 1px solid rgba(12, 110, 117, 0.2);
}

.home-duo-card .home-lede {
    font-size: 0.9375rem;
    margin-top: 1rem;
}

.home-duo-card--ink .home-lede {
    color: var(--color-slate-300);
}

.home-duo-card .home-arrow-link {
    margin-top: auto;
    padding-top: 2rem;
}

.home-duo-card--ink .home-arrow-link {
    color: var(--color-white);
}

.home-duo-card--ink .home-arrow-link:hover {
    color: var(--color-accent);
}

.home-checks {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.home-checks li {
    display: flex;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

.home-checks li::before {
    content: "✓";
    flex: none;
    font-weight: 600;
    color: var(--color-brand);
}

.home-duo-card--ink .home-checks li {
    color: var(--color-slate-300);
}

.home-duo-card--ink .home-checks li::before {
    color: var(--color-accent);
}

/* ---------- Split section with a sample chronology ---------- */

.home-split {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 900px) {
    .home-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-sample {
    overflow: hidden;
    border: 1px solid var(--color-slate-200);
    border-radius: 0.75rem;
    background: var(--color-white);
    box-shadow: 0 20px 25px -5px rgba(22, 41, 77, 0.1);
}

.home-sample-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-slate-200);
    background: var(--color-slate-50);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.home-sample-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-slate-100);
}

.home-sample-row:last-child {
    border-bottom: 0;
}

.home-sample-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink-faint);
}

.home-sample-event {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0;
}

.home-sample-quote {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

.home-sample-cite {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-brand);
}

.home-sample-row--gap {
    background: rgba(212, 175, 55, 0.08);
}

.home-sample-row--gap .home-sample-event {
    color: var(--color-accent-dark);
}

.home-sample-note {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    color: var(--color-ink-faint);
}

/* ---------- Stats ---------- */

.home-stats {
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
}

@media (min-width: 640px) {
    .home-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .home-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.home-stat-figure {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-brand);
}

.home-page .home-stat h3 {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    font-weight: 600;
}

.home-stat p {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

/* ---------- Card grid (practice areas) ---------- */

.home-cards {
    display: grid;
    gap: 1rem;
    margin-top: 3rem;
}

@media (min-width: 640px) {
    .home-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .home-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

@media (max-width: 639px) {
    .home-cards--two {
        grid-template-columns: minmax(0, 1fr);
    }
}

.home-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid var(--color-slate-200);
    border-radius: 0.75rem;
    background: var(--color-white);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-card:hover {
    border-color: rgba(12, 110, 117, 0.35);
    box-shadow: 0 10px 15px -3px rgba(22, 41, 77, 0.06);
}

.home-page .home-card h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.home-card .home-eyebrow + h3 {
    margin-top: 0.5rem;
}

.home-card p {
    margin: 0.625rem 0 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-ink-muted);
}

.home-card p a {
    color: var(--color-brand);
    text-decoration: none;
}

.home-card p a:hover {
    text-decoration: underline;
}

.home-card p:last-of-type {
    margin-bottom: 0;
}

.home-card-more {
    display: inline-block;
    margin-top: auto;
    padding-top: 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand);
}

/* ---------- Recognition marks ---------- */

.home-marks {
    display: grid;
    gap: 2rem;
    margin-top: 1.75rem;
    align-items: start;
}

@media (min-width: 640px) {
    .home-marks {
        /* Sized to the copy rather than stretched across the shell. As 1fr
           columns the two marks sat 560px wide at opposite ends, with each
           caption trailing off into half a column of empty paper. */
        grid-template-columns: repeat(2, minmax(0, 25rem));
    }
}

/* A fixed logo row keeps the captions on one baseline even though the
   marks are all different shapes. */
.home-mark-logo {
    display: flex;
    align-items: center;
    height: 72px;
}

.home-mark img {
    max-height: 72px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
}

.home-page .home-mark h3 {
    margin: 0.875rem 0 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

.home-mark p {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

.home-mark a {
    color: var(--color-brand);
}

/* ---------- Two-column link lists ---------- */

.home-columns {
    display: grid;
    gap: 3rem;
}

@media (min-width: 900px) {
    .home-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-list {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2rem 3rem;
    align-items: start;
}

@media (min-width: 640px) {
    .home-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .home-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.home-list a {
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
}

.home-list a:hover {
    color: var(--color-brand);
}

.home-list p {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

/* ---------- FAQ ---------- */

.home-faq {
    display: grid;
    gap: 2.5rem 3rem;
    margin-top: 2.5rem;
}

@media (min-width: 900px) {
    .home-faq {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-page .home-faq h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.home-faq p {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-ink-muted);
}

.home-faq a {
    color: var(--color-brand);
}

/* ---------- Closing calls to action ---------- */

.home-cta {
    display: grid;
    overflow: hidden;
    border-radius: 1rem;
}

@media (min-width: 640px) {
    .home-cta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-cta-panel {
    padding: 3.5rem 2.5rem;
    text-align: center;
    color: var(--color-white);
}

.home-cta-panel--ink {
    background: var(--color-ink);
}

.home-cta-panel--brand {
    background: var(--color-brand);
}

.home-page .home-cta-panel .home-h3 {
    color: var(--color-white);
}

.home-cta-panel .home-eyebrow {
    color: var(--color-accent);
}

.home-cta-panel--brand .home-eyebrow {
    color: var(--color-brand-light);
}

.home-cta-panel p {
    margin: 1rem auto 0;
    max-width: 24rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-slate-300);
}

.home-cta-panel--brand p {
    color: var(--color-brand-light);
}

.home-cta-button {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-button);
    background: var(--color-white);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

/* The button takes its text colour from whichever surface it sits on, and
   without one it would render white on white. */
.home-section--ink .home-cta-button,
.home-cta-panel--ink .home-cta-button {
    color: var(--color-ink);
}

.home-section--ink .home-cta-button:hover {
    background: var(--color-slate-100);
}

.home-cta-panel--ink .home-cta-button:hover {
    background: var(--color-slate-100);
}

.home-cta-panel--brand .home-cta-button {
    color: var(--color-brand);
}

.home-cta-panel--brand .home-cta-button:hover {
    background: var(--color-brand-light);
}

/* ---------- Footer ---------- */

.home-page footer {
    padding: 2.5rem 0 0;
}

.home-page footer .container {
    max-width: 72rem;
    padding: 0 1.5rem 2rem;
}

@media (max-width: 640px) {
    .home-section {
        padding: 3.5rem 0;
    }

    .home-hero .home-shell {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .home-duo-card,
    .home-cta-panel {
        padding: 2rem 1.5rem;
    }
}