/*
 * classic-plus — landing ornament.
 *
 * Served on / only, never on /content/*. Because the blast radius is one page,
 * raw colour is permitted here: these are decorations that exist in this theme
 * and nowhere else, so they have no token to resolve through.
 *
 * See docs/dev/marketing-design-system.md.
 */

/* Legacy aliases. The landing markup and the ornament rules below were written
   against colour-literal names before the token contract existed. Mapping them
   here keeps that CSS working unchanged; new rules should use --m-* directly. */
:root {
    --ink: var(--m-ink);
    --ink-muted: var(--m-ink-muted);
    --blue: var(--m-accent);
    --blue-deep: var(--m-accent-deep);
    --coral: var(--m-highlight);
    --coral-soft: var(--m-highlight-soft);
    --cream: var(--m-surface-alt);
    --paper: var(--m-surface);
    --sand: var(--m-surface-sunken);
    --line: var(--m-line);
    --white: var(--m-surface-raised);
    --shadow: var(--m-shadow);
    --content: var(--m-content-width);
}

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

.hero { position: relative; isolation: isolate; overflow: clip; min-height: min(43rem, calc(100svh - 5.5rem)); background: var(--cream); padding: 2.25rem 0 4.5rem; }
.hero::after { content: ""; position: absolute; z-index: -1; left: -8vw; right: -8vw; bottom: -1px; height: 3.8rem; background: var(--paper); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hero__grid { min-height: inherit; display: grid; align-items: center; gap: 1.5rem; }
.hero__copy { position: relative; z-index: 2; max-width: 41rem; padding: 1.4rem 0 2rem; }
.hero h1 { max-width: 44rem; margin: 1.35rem 0 0; font-family: var(--m-font-display); font-size: clamp(3.2rem, 7vw, 6.6rem); font-weight: 400; line-height: 0.91; letter-spacing: 0; text-wrap: balance; }
.hero h1 em { color: var(--blue); font-style: italic; }
.hero__lead { max-width: 34rem; margin: 1.35rem 0 0; color: var(--ink-muted); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.55; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.8rem; }
.hero__reassurance { display: flex; align-items: center; gap: 0.55rem; margin: 1.35rem 0 0; color: var(--ink-muted); font-size: 0.875rem; }
.hero__reassurance .material-symbols-outlined { color: var(--blue); font-size: 1.1rem; }

.hero-art { position: relative; min-height: 23rem; margin: 0 auto; width: min(100%, 35rem); }
.hero-art__frame { position: absolute; inset: 8% 12% 8% 11%; border: 1px solid var(--blue); border-radius: 48% 52% 42% 58% / 42% 47% 53% 58%; transform: rotate(-5deg); }
.hero-art__paper { position: absolute; inset: 10% 7% 5% 18%; border: 1px solid var(--line); border-radius: 1.8rem 0.3rem 2.7rem 0.4rem; background: var(--paper); transform: rotate(7deg); }
.hero-art__coral { position: absolute; width: 8.4rem; height: 4.2rem; right: 3%; top: 13%; background: var(--coral-soft); border: 1px solid var(--coral); border-radius: 2rem 0.4rem 2rem 0.5rem; transform: rotate(11deg); animation: drift-coral 7s ease-in-out infinite; }
.hero-art__coral::after { content: ""; position: absolute; width: 2.4rem; height: 2.4rem; left: -1.1rem; bottom: -1.1rem; border: 1px solid var(--coral); border-radius: 50%; background: var(--cream); }
.hero-book { position: absolute; z-index: 2; inset: 4% 7% 0 9%; display: grid; place-items: center; transform: rotate(-6deg); transition: transform 260ms ease; }
.hero-book img { display: block; width: min(100%, 25rem); max-height: 31rem; object-fit: contain; filter: drop-shadow(1rem 1.4rem 1.6rem rgba(20, 36, 63, 0.3)); animation: book-float 6s ease-in-out infinite; }
.hero-art:hover .hero-book { transform: rotate(-2deg) translateY(-0.35rem); }
.artifact { position: absolute; z-index: 3; display: flex; align-items: center; gap: 0.55rem; border: 1px solid var(--line); background: var(--white); box-shadow: 0 0.75rem 1.5rem rgba(20, 36, 63, 0.13); color: var(--ink); font-size: 0.76rem; font-weight: 700; }
.artifact .material-symbols-outlined { color: var(--blue); font-size: 1.25rem; }
.artifact--quote { right: 0; bottom: 8%; width: 10.8rem; padding: 0.8rem; border-radius: 1rem 1rem 0.2rem 1rem; transform: rotate(5deg); animation: drift-card 5.5s ease-in-out infinite 0.6s; }
.artifact--ready { left: 0; top: 12%; padding: 0.7rem 0.8rem; border-radius: 0.35rem 1rem 1rem 1rem; transform: rotate(-7deg); animation: drift-card 5.8s ease-in-out infinite; }
.artifact__dot { width: 0.56rem; height: 0.56rem; border-radius: 50%; background: var(--coral); }
.hero-scroll { position: absolute; right: max(1rem, calc((100vw - var(--content)) / 2)); bottom: 1.35rem; display: none; align-items: center; gap: 0.55rem; color: var(--ink-muted); font-size: 0.75rem; font-weight: 650; writing-mode: vertical-rl; }
.hero-scroll::after { content: ""; width: 1px; height: 2.4rem; background: var(--ink-muted); animation: line-pulse 2.2s ease-in-out infinite; }

/* --- Ticker ------------------------------------------------------------- */

.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.ticker__track { display: flex; width: max-content; animation: ticker-slide 26s linear infinite; }
.ticker__item { display: inline-flex; align-items: center; gap: 0.85rem; padding: 1rem 1.15rem; color: var(--ink); font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.ticker__item .material-symbols-outlined { color: var(--coral); font-size: 1.1rem; }

/* --- Feature list ------------------------------------------------------- */

.feature-list { margin-top: clamp(2.5rem, 5vw, 5rem); border-top: 1px solid var(--line); }
/* Hover paints a rounded panel behind the row via ::before rather than filling
   the cell edge to edge, and nothing in the layout moves. Animating
   padding-inline reflowed the row on every hover, which on desktop also shrank
   the cell from 1.6rem of padding down to 0.8rem. */
.feature-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.85rem; align-items: start; min-height: 8.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.feature-row::before { content: ""; position: absolute; z-index: -1; inset: 0.3rem -0.9rem; border-radius: 1rem; background: var(--cream); opacity: 0; transform: scale(0.97); transition: opacity 280ms var(--m-ease), transform 280ms var(--m-ease); }
.feature-row:hover::before { opacity: 1; transform: scale(1); }
.feature-row__number { color: var(--coral); font-family: var(--m-font-display); font-size: 2rem; font-style: italic; line-height: 1; transition: transform 280ms var(--m-ease); }
.feature-row:hover .feature-row__number { transform: translateY(-0.15rem); }
.feature-row__content { display: grid; gap: 0.45rem; }
.feature-row h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.15; }
.feature-row p { max-width: 39rem; margin: 0; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.55; }

/* --- Process ------------------------------------------------------------ */

.process { overflow: hidden; background: var(--ink); color: var(--white); }
.process .section-kicker { color: var(--coral-soft); }
.process .section-heading { max-width: 38rem; }
.process .section-intro { color: #c8d1e0; }
.process__rail { display: grid; gap: 0.8rem; margin-top: clamp(2.5rem, 5vw, 5rem); }
.process-step { position: relative; min-height: 18rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 1.45rem; border-radius: 0.5rem; background: var(--white); color: var(--ink); }
.process-step:nth-child(2) { background: var(--blue); color: var(--white); }
.process-step:nth-child(3) { border: 1px solid #3564cb; background: #0c1d38; color: var(--white); }
.process-step::before { content: attr(data-step); font-family: var(--m-font-display); font-size: 7rem; line-height: 0.7; color: var(--blue); opacity: 0.16; }
.process-step:nth-child(2)::before { color: var(--white); opacity: 0.22; }
.process-step:nth-child(3)::before { color: #84a8ff; opacity: 0.26; }
.process-step__icon { position: absolute; right: 1.5rem; top: 1.5rem; color: var(--blue); font-size: 2rem; }
.process-step:nth-child(2) .process-step__icon, .process-step:nth-child(3) .process-step__icon { color: var(--white); }
.process-step h3 { margin: 1.75rem 0 0; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.08; }
.process-step p { margin: 0.65rem 0 0; color: var(--ink-muted); font-size: 0.92rem; }
.process-step:nth-child(2) p, .process-step:nth-child(3) p { color: #dce7ff; }

/* --- Roles -------------------------------------------------------------- */

.roles { position: relative; background: var(--paper); }
.roles__header { display: grid; gap: 1rem; }
.roles__list { display: grid; margin-top: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.role { position: relative; isolation: isolate; display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 0.9rem; min-height: 5.5rem; border-bottom: 1px solid var(--line); }
.role::before { content: ""; position: absolute; z-index: -1; inset: 0.3rem -0.9rem; border-radius: 1rem; background: var(--cream); opacity: 0; transform: scale(0.97); transition: opacity 280ms var(--m-ease), transform 280ms var(--m-ease); }
.role:hover::before { opacity: 1; transform: scale(1); }
.role__number { color: var(--coral); font-family: var(--m-font-display); font-size: 1.8rem; font-style: italic; transition: transform 280ms var(--m-ease); }
.role:hover .role__number { transform: translateX(0.15rem); }
.role h3 { margin: 0; font-size: 1.1rem; }
.role p { margin: 0.2rem 0 0; color: var(--ink-muted); font-size: 0.9rem; }
.role .material-symbols-outlined { color: var(--blue); transition: transform 280ms var(--m-ease); }
.role:hover .material-symbols-outlined { transform: translateX(0.3rem); }

/* --- Closing ------------------------------------------------------------ */

.closing { position: relative; overflow: hidden; background: var(--coral); color: var(--ink); }
.closing__shape { position: absolute; width: 32rem; height: 20rem; border: 1px solid var(--ink); border-radius: 50% 50% 0 0; right: -10rem; bottom: -10rem; transform: rotate(-17deg); }
.closing__inner { position: relative; display: grid; gap: 2rem; align-items: end; }
.closing h2 { max-width: 43rem; margin: 0; font-family: var(--m-font-display); font-size: clamp(3rem, 6vw, 5.8rem); font-weight: 400; line-height: 0.94; text-wrap: balance; }
.closing p { max-width: 32rem; margin: 1.15rem 0 0; color: #4a251e; font-size: 1.05rem; }
.closing .button--primary { background: var(--ink); box-shadow: 0 0.55rem 0 #5a2b22; }
.closing .button--primary:hover { background: #263a5b; box-shadow: 0 0.3rem 0 #5a2b22; }
.closing .button--secondary { border-color: var(--ink); }

/* --- Landing footer ----------------------------------------------------- */

/* The landing's footer sits flush against the coral closing band, so it drops
   the shell's top rule. */
.landing .site-footer { border-top: 0; }

/* --- Keyframes ---------------------------------------------------------- */

@keyframes book-float {
    0%, 100% { transform: translateY(0) rotate(0.001deg); }
    50% { transform: translateY(-0.85rem) rotate(0.001deg); }
}
@keyframes drift-card {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50% { transform: rotate(-7deg) translateY(-0.55rem); }
}
@keyframes drift-coral {
    0%, 100% { transform: rotate(11deg) translate(0, 0); }
    50% { transform: rotate(8deg) translate(-0.55rem, 0.35rem); }
}
@keyframes line-pulse {
    0%, 100% { transform: scaleY(0.65); transform-origin: top; opacity: 0.45; }
    50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}
@keyframes ticker-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* --- Breakpoints -------------------------------------------------------- */

@media (min-width: 640px) {
    .hero { padding-top: 3rem; }
    .hero-art { min-height: 28rem; }
    .hero-art__coral { width: 10rem; height: 4.75rem; }
    .process__rail { grid-template-columns: repeat(3, 1fr); }
    .process-step { min-height: 21rem; }
    .closing__inner { grid-template-columns: 1fr auto; }
}

@media (min-width: 900px) {
    .hero { padding: 2.75rem 0 4.75rem; }
    .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(25rem, 0.95fr); gap: 1rem; }
    .hero__copy { padding-bottom: 3rem; }
    .hero-art { width: 108%; margin-left: -4%; min-height: 38rem; }
    .hero-scroll { display: flex; }
    .feature-list { display: grid; grid-template-columns: repeat(4, 1fr); }
    .feature-row { min-height: 15rem; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.6rem; border-bottom: 0; border-right: 1px solid var(--line); }
    .feature-row::before { inset: 0.5rem; }
    .feature-row:last-child { border-right: 0; }
    .feature-row__content { gap: 0.6rem; }
    .roles__header { grid-template-columns: 1.1fr 0.9fr; align-items: end; }
    .roles__header .section-intro { justify-self: end; margin-bottom: 0.3rem; }
    .role { grid-template-columns: 5rem 1fr auto; min-height: 7rem; }
}

@media (max-width: 639px) {
    .hero { min-height: 41rem; padding-top: 1.5rem; }
    .hero__copy { padding-bottom: 0; }
    .hero h1 { font-size: clamp(3.5rem, 16vw, 4.6rem); }
    .hero__actions { display: grid; grid-template-columns: 1fr; }
    .hero__actions .button { width: 100%; }
    .hero-art { margin-top: -1rem; min-height: 19rem; width: 92%; }
    .hero-book img { width: 15.8rem; max-height: 20rem; }
    .artifact--ready { left: -0.3rem; top: 8%; }
    .artifact--quote { right: -0.6rem; bottom: 4%; }
    .role { grid-template-columns: 2.2rem 1fr auto; }
    .role p { display: none; }
}