/*
 * Carrier — experimental research platform.
 * Copyright (c) 2026 Jiahao Yang. All rights reserved.
 * Non-commercial academic use only; see LICENSE. Commercial use requires a licence.
 */

/*
 * The front page below the town hero, in the town design language
 * (public/assets/css/town.css). It restyles the existing section markup in
 * views/index.ejs rather than replacing it, so the copy and the behaviour in
 * index.js, landing-clips.js and landing-captcha-demo.js stay as they are.
 * Loaded after index.css and theme-light.css; selectors are prefixed with
 * body.town-page so they win without !important.
 */

body.town-page .page { background: var(--town-sky); }
body.town-page .town-hero { margin: 0; }
/* On wide screens hero-town.js moves the tools into the site header, beside Log in */
body.town-page .town-header .tools { position: static; display: flex; align-items: center; gap: 8px; flex: none; margin-right: -24px; }
/* Same height as Log in, so the four read as one row */
body.town-page .town-header .tool,
body.town-page .town-header .town-login { box-sizing: border-box; height: 38px; }
body.town-page .town-header .tool { padding: 0 16px; }
/* In full screen only the tools stay up there */
body.town-page .town-hero.expanded .town-nav { visibility: hidden; }
body.town-page .town-hero.expanded .town-login { display: none; }

/* ── Shared section rhythm ── */
body.town-page .band,
body.town-page .function-showcase,
body.town-page .mission-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
    box-sizing: border-box;
}
body.town-page .band { position: relative; padding-top: 104px; padding-bottom: 104px; }
body.town-page .band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
body.town-page .band-head h2,
body.town-page .showcase-section-head h2,
body.town-page .mission-title {
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--town-ink);
    max-width: 680px;
    margin: 18px 0 0;
}
body.town-page .band-lead,
body.town-page .showcase-section-head p,
body.town-page .mission-body {
    max-width: 420px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--town-ink-2);
    margin: 0;
}
body.town-page .band-note { margin-top: 44px; font-size: 14px; color: var(--town-ink-3); }
body.town-page .band-cloud { position: absolute; right: 60px; top: 40px; opacity: 0.9; pointer-events: none; }

/* Eyebrows become the town's dark signs */
body.town-page .band-eyebrow,
body.town-page .func-label,
body.town-page .role-demo-label,
body.town-page .video-label-text,
body.town-page .mission-eyebrow > span:not(.mission-eyebrow-line) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    border-radius: 50px;
    background: var(--town-ink);
    color: #fff;
    font: 700 12.5px 'Space Grotesk', sans-serif;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: 0 8px 18px -8px rgba(22, 22, 26, 0.5);
}
body.town-page .band-eyebrow::before,
body.town-page .func-label::before,
body.town-page .role-demo-label::before,
body.town-page .video-label-text::before,
body.town-page .mission-eyebrow > span:not(.mission-eyebrow-line)::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sw, #9b7bff);
}
body.town-page .band-eyebrow::after,
body.town-page .func-label::after,
body.town-page .role-demo-label::after,
body.town-page .video-label-text::after,
body.town-page .mission-eyebrow > span:not(.mission-eyebrow-line)::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--town-ink);
}
body.town-page .color-green { --sw: #2bb57e; }
body.town-page .color-purple { --sw: #9b7bff; }
body.town-page .color-orange { --sw: #f2a93b; }
body.town-page .color-blue { --sw: #5ab0e6; }
body.town-page .mission-eyebrow { display: flex; justify-content: center; }
body.town-page .mission-eyebrow-line,
body.town-page .video-label-line { display: none; }

/* ── AI assistant: the copy on the left, the "Connect in one line" block on the right ── */
body.town-page .assistant-band {
    display: flex;
    align-items: center;
    gap: 40px 56px;
    flex-wrap: wrap;
    padding-top: 88px;
    padding-bottom: 72px;
}
body.town-page .assistant-copy { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
body.town-page .assistant-signs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.town-page .assistant-signs .band-eyebrow { margin-bottom: 0; }
/* The hero's "Internal testing" badge */
body.town-page .assistant-preview {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.2);
    color: var(--town-amber-ink);
    font-size: 11px;
    font-weight: 600;
}
body.town-page .assistant-preview span { width: 6px; height: 6px; border-radius: 50%; background: var(--town-amber); }
body.town-page .assistant-copy h2 {
    margin: 18px 0 0;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--town-ink);
}
body.town-page .assistant-copy .band-lead { margin-top: 16px; max-width: 440px; }
body.town-page .assistant-copy .setting-go { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; font-size: 13px; text-decoration: none; }

/* The block is a raised card with a mock-window bar, a terminal body and the three steps */
body.town-page .connect-block {
    flex: 1.8 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--town-card);
    border: 1px solid rgba(22, 22, 26, 0.06);
    border-radius: 20px;
    box-shadow: 0 10px 0 var(--town-block-edge), 0 34px 50px -24px rgba(52, 36, 110, 0.34);
}
body.town-page .connect-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 20px;
    flex-wrap: wrap;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(22, 22, 26, 0.07);
}
body.town-page .connect-bar-title { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; color: var(--town-ink-2); }
body.town-page .connect-dots { display: flex; gap: 6px; }
body.town-page .connect-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e6e2ef; }
body.town-page .connect-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
/* Same pill as the hero tools; the pressed one takes the "Walk in" outline */
body.town-page .connect-tab {
    min-height: 40px;
    padding: 0 15px;
    border-radius: 50px;
    border: 1px solid var(--town-line-2);
    background: var(--town-card);
    color: var(--town-ink);
    font: 600 12.5px 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
}
body.town-page .connect-tab:hover { border-color: var(--town-purple); }
body.town-page .connect-tab[aria-pressed="true"] { border-color: var(--town-purple); background: #f4f0ff; color: var(--town-purple-ink); }
body.town-page .connect-tab:focus-visible,
body.town-page .connect-copy:focus-visible { outline: 2px solid var(--town-purple); outline-offset: 2px; }
/* The terminal body uses the colours of the hero's coding-environment panel */
body.town-page .connect-term {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px clamp(18px, 3vw, 28px) 22px;
    background: #15161e;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
body.town-page .connect-line { display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; line-height: 1.5; }
body.town-page .connect-prompt { color: #b8a6f8; }
body.town-page .connect-line code { min-width: 0; overflow-wrap: anywhere; font-family: inherit; color: #e6e6ea; }
body.town-page .connect-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
body.town-page .connect-hint { font-size: 12.5px; line-height: 1.6; color: #8b8fa6; }
body.town-page .connect-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1e2130;
    color: #e6e6ea;
    font: 600 13px 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
}
body.town-page .connect-copy:hover { border-color: #b8a6f8; }
body.town-page .connect-steps {
    margin: 0;
    padding: 16px clamp(18px, 3vw, 28px);
    list-style: none;
    display: flex;
    gap: 10px 22px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--town-ink);
}
body.town-page .connect-steps li { display: inline-flex; align-items: center; gap: 9px; }
body.town-page .connect-steps li span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font: 700 11px 'Space Grotesk', sans-serif;
}
body.town-page .connect-steps .purple { background: var(--town-purple); }
body.town-page .connect-steps .orange { background: var(--town-amber-ink); }
body.town-page .connect-steps .green { background: #14784f; }

/* ── Settings and LLMs: four small tiles, then one row of facts ── */
body.town-page .settings-band { background: var(--town-sky-2); }
body.town-page .settings-band .band { padding-top: 72px; padding-bottom: 96px; }
/* The heading and the lead share one row */
body.town-page .settings-band .band-head > div { flex: 1 1 520px; min-width: 0; }
body.town-page .settings-band .band-lead { flex: 0 1 420px; }
body.town-page .setting-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 44px;
}
body.town-page .setting-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--town-card);
    border: 1px solid rgba(22, 22, 26, 0.06);
    border-radius: 20px;
    box-shadow: 0 8px 0 #dcd3f0, 0 30px 44px -24px rgba(52, 36, 110, 0.34);
}
body.town-page .tile-scene { display: grid; place-items: center; height: 124px; background: #f3eefc; }
body.town-page .tile-scene svg { height: 108px; width: auto; }
body.town-page .setting-tile:nth-child(2) .tile-scene { background: #fcf0f3; }
body.town-page .setting-tile:nth-child(3) .tile-scene { background: #fdf5e4; }
body.town-page .setting-tile:nth-child(4) .tile-scene { background: #f1ecff; }
body.town-page .setting-tile h3 { margin: 16px 20px 0; font-size: 18px; color: var(--town-ink); }
body.town-page .setting-tile p { flex-grow: 1; margin: 6px 20px 0; font-size: 13.5px; line-height: 1.55; color: var(--town-ink-2); }
body.town-page .setting-tile .setting-go { display: inline-flex; align-items: center; align-self: flex-start; min-height: 32px; margin: 6px 20px 18px; font-size: 13px; text-decoration: none; }
body.town-page .setting-go { color: var(--town-purple-ink); font-weight: 600; }
body.town-page .setting-todo { color: var(--town-amber-ink); font-weight: 600; }
body.town-page .llm-row {
    display: flex;
    gap: 28px 32px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 52px;
    padding-top: 36px;
    border-top: 1px dashed rgba(22, 22, 26, 0.16);
}
body.town-page .llm-row > h3 { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--town-ink); }
body.town-page .llm-fact { flex: 1 1 190px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
body.town-page .llm-fact .band-eyebrow { margin-bottom: 16px; font-size: 12px; }
body.town-page .llm-fact p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--town-ink-2); }

/* ── Video: a screen on posts, like the feed wall ── */
body.town-page .video-section { padding: 96px clamp(20px, 4vw, 40px) 72px; display: flex; flex-direction: column; align-items: center; background: none; }
body.town-page .video-label { margin-bottom: 30px; }
body.town-page .video-container {
    width: min(1040px, 100%);
    box-sizing: border-box;
    padding: 16px;
    border-radius: 26px;
    background: #2d3140;
    box-shadow: 0 12px 0 #1d2030, 0 40px 60px -24px rgba(22, 22, 40, 0.5);
    border: 0;
}
body.town-page .video-container video { display: block; width: 100%; border-radius: 14px; }

/* ── Components of a Carrier experiment ── */
body.town-page .function-showcase { padding-top: 96px; padding-bottom: 104px; background: none; }
body.town-page .showcase-section-head { max-width: 760px; margin-bottom: 72px; text-align: left; }
body.town-page .showcase-section-head h2 { margin-top: 0; }
body.town-page .showcase-section-head p { max-width: 640px; margin-top: 16px; }
body.town-page .hero-func-row { gap: 72px; align-items: center; padding: 0 0 104px; border: 0; }
body.town-page .func-num { font: 700 56px/1 'Space Grotesk', sans-serif; color: #d9d2ee; margin-bottom: 14px; }
body.town-page .func-label { margin-bottom: 4px; }
body.town-page .hero-func-text h3 { margin-top: 22px; font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; color: var(--town-ink); }
body.town-page .hero-func-text p { margin-top: 14px; font-size: 15.5px; line-height: 1.75; color: var(--town-ink-2); }
body.town-page .func-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
body.town-page .func-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 5px;
    border: 0;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 2px 0 rgba(22, 22, 26, 0.07), 0 8px 16px -8px rgba(52, 36, 110, 0.28);
    font-size: 12.5px;
    font-weight: 600;
    color: #2d3140;
}
body.town-page .func-tag::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--sw, var(--town-purple)); }
body.town-page .func-tag.green { --sw: #2bb57e; }
body.town-page .func-tag.purple { --sw: #7f5af0; }
body.town-page .func-tag.orange { --sw: #f2a93b; }
body.town-page .func-tag.blue { --sw: #5ab0e6; }
body.town-page .func-tag.pink { --sw: #ef5b7b; }
body.town-page .func-tag.cyan { --sw: #3fb8c9; }

/* Mock windows become raised blocks */
body.town-page .mock-win,
body.town-page .clip {
    background: var(--town-card);
    border: 1px solid rgba(22, 22, 26, 0.06);
    border-radius: 20px;
    box-shadow: 0 10px 0 var(--town-block-edge), 0 34px 50px -24px rgba(52, 36, 110, 0.34);
    overflow: hidden;
    color: var(--town-ink);
}
/* The block has no inner padding, so the caption brings its own */
body.town-page .clip figcaption { margin-top: 0; padding: 14px 20px 18px; }
body.town-page .mock-bar { background: var(--town-card); border-bottom: 1px solid rgba(22, 22, 26, 0.07); color: var(--town-ink-2); }
body.town-page .mock-bar-title { color: var(--town-ink-2); font-weight: 600; }
body.town-page .mock-dot { background: #e6e2ef; }
body.town-page .mock-body { background: var(--town-card); color: var(--town-ink); }

/* ── Live demos and the extra components ── */
body.town-page .role-demo-card,
body.town-page .demo-mini,
body.town-page .more-card {
    background: var(--town-card);
    border: 1px solid rgba(22, 22, 26, 0.06);
    border-radius: 20px;
    box-shadow: 0 10px 0 var(--town-block-edge), 0 34px 50px -24px rgba(52, 36, 110, 0.34);
    color: var(--town-ink);
    transition: transform 0.2s var(--town-ease);
}
body.town-page .demo-mini { padding: 14px 16px 16px; gap: 6px; }
/* Raised blocks need room for their underside, so the grids open up */
body.town-page .demo-mini-grid { gap: 18px 16px; padding-bottom: 10px; }
body.town-page .role-demo-card:hover,
body.town-page .demo-mini:hover,
body.town-page .more-card:hover { transform: translateY(-3px); }
body.town-page .role-demo-card h4,
body.town-page .more-card h3,
body.town-page .more-card h4 { color: var(--town-ink); }
body.town-page .role-demo-topic,
body.town-page .role-demo-req,
body.town-page .demo-mini-d,
body.town-page .more-card p,
body.town-page .expand-desc { color: var(--town-ink-2); }
body.town-page .role-demo-seat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 4px;
    border: 0;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 2px 0 rgba(22, 22, 26, 0.07), 0 8px 16px -8px rgba(52, 36, 110, 0.28);
    color: #2d3140;
}
body.town-page .role-demo-go,
body.town-page .demo-mini-go { color: var(--town-purple-ink); font-weight: 700; }
body.town-page .more-card-icon { background: #fdf1e1; border-radius: 10px; box-shadow: 0 4px 0 #f5e3bd; color: var(--town-amber-ink); }
body.town-page .more-hint { color: var(--town-ink-3); }

/* ── Accountability: three stepping-stone islands ── */
body.town-page .mission-section { padding: 104px 0 96px; background: var(--town-sky-2); border: 0; }
body.town-page .mission-inner { text-align: center; }
body.town-page .mission-title { margin-left: auto; margin-right: auto; }
body.town-page .mission-body { max-width: 760px; margin: 18px auto 0; }
body.town-page .lifecycle-scene { margin: 36px auto 8px; display: flex; justify-content: center; }
body.town-page .lifecycle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 auto; max-width: 1200px; padding: 0; }
body.town-page .lifecycle::before { display: none; }
body.town-page .lifecycle-stage { padding: 0 32px; text-align: center; }
body.town-page .lifecycle-node { display: none; }
body.town-page .lifecycle-head { justify-content: center; }
body.town-page .lifecycle-head h4 { color: var(--town-ink); font-size: 22px; }
body.town-page .lifecycle-product { color: var(--town-ink-3); }
body.town-page .lifecycle-content { background: none; border: 0; box-shadow: none; padding: 0; }
body.town-page .lifecycle-content p { color: var(--town-ink-2); font-size: 14px; line-height: 1.65; }
body.town-page .lifecycle-guarantee {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 5px 12px 5px 8px;
    border: 0;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 2px 0 rgba(22, 22, 26, 0.07), 0 8px 16px -8px rgba(52, 36, 110, 0.28);
    color: #2d3140;
    font-weight: 600;
}
body.town-page .lifecycle-guarantee i { color: var(--stage, var(--town-purple)); }

/* ── Responsive ── */
@media (max-width: 1100px) {
    body.town-page .setting-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.town-page .hero-func-row { gap: 40px; }
    body.town-page .lifecycle-scene svg { width: 100%; }
}
/* The hero fills the first screen */
body.town-page .town-hero { height: 100svh; min-height: 640px; }
body.town-page .town-hero .eyebrow { color: var(--town-ink-3); font-weight: 500; letter-spacing: 4px; }
body.town-page .town-hero h1 { font-size: clamp(34px, 3.3vw, 50px); }

/* "Scroll for more", centred at the foot of the hero */
body.town-page .hero-scroll {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--town-ink-3);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.3s ease;
}
body.town-page .hero-scroll:hover,
body.town-page .hero-scroll:focus-visible { color: var(--town-purple-ink); }
body.town-page .hero-scroll i { animation: town-scroll-nudge 2.4s ease-in-out infinite; }
@keyframes town-scroll-nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}
/* The caption strip sits above the scroll cue (back to its own spot in full screen) */
/* The controls hint takes the caption's place when it shows, so it too clears the cue */
body.town-page .town-hero .caption,
body.town-page .town-hero .hint { bottom: 68px; }
body.town-page .town-hero.expanded .caption { bottom: 20px; }
body.town-page .town-hero.expanded .hint { bottom: 22px; }

/* Short screens: a smaller wordmark and headline so the copy clears the header */
@media (min-width: 1000px) and (max-height: 820px) {
    body.town-page .town-hero h1 { font-size: clamp(30px, 2.8vw, 40px); }
    body.town-page .town-hero .copy { top: calc(50% + 6px); }
    body.town-page .town-hero .copy > div:first-of-type { margin-bottom: 14px !important; }
    body.town-page .town-hero .sub { margin-top: 14px; font-size: 15px; line-height: 1.6; }
    body.town-page .town-hero .cast { margin-top: 14px; }
    body.town-page .town-hero .actions { margin-top: 18px; }
    body.town-page .town-hero .caption,
    body.town-page .town-hero .hint { bottom: 52px; }
    body.town-page .hero-scroll { bottom: 10px; gap: 2px; }
}

/* Out of the way while the visitor is using the town */
body.town-page .town-hero.panel-open .hero-scroll,
body.town-page .town-hero.driving .hero-scroll,
body.town-page .town-hero.expanded .hero-scroll { opacity: 0; pointer-events: none; }

/* Narrow hero (town-hero.css stacks copy above the town): the header joins the flow */
@media (max-width: 999px) {
    body.town-page .town-hero { padding-top: 0; height: auto; min-height: 0; }
    body.town-page .town-header.over-hero { position: relative; width: calc(100% + 40px); margin: 0 -20px 20px; }
    body.town-page .town-hero .tools { top: 12px; flex-wrap: nowrap; }
    body.town-page .hero-scroll { display: none; }
    /* No scroll cue here, so the caption and hint go back to the stage's foot */
    body.town-page .town-hero .caption { bottom: 20px; }
    body.town-page .town-hero .hint { bottom: 12px; }
}
@media (max-width: 720px) {
    body.town-page .town-hero .tool { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
    body.town-page .town-hero .tool kbd { display: none; }
}
@media (max-width: 720px) {
    body.town-page .band { padding-top: 72px; padding-bottom: 72px; }
    body.town-page .band-cloud { display: none; }
    body.town-page .setting-tiles { grid-template-columns: minmax(0, 1fr); }
    body.town-page .lifecycle { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    body.town-page .func-num { font-size: 40px; }
    body.town-page .hero-func-text h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    body.town-page .hero-scroll i { animation: none; }
    body.town-page .role-demo-card,
    body.town-page .demo-mini,
    body.town-page .more-card { transition: none; }
}