/* ─── Crew learn-more pages ──────────────────────────────────────────
 * Shared shell for the per-crew "how this agent works, in detail" pages
 * (research-agent.html, coding-agent.html, … and their zh/ mirrors).
 *
 * Hallmark · macrostructure: Narrative Workflow · genre: modern-minimal
 * anchor hue: ClawBot green. Every colour and font resolves to a token
 * from style.css — this file introduces no new palette.
 *
 * These pages are GENERATED. Edit scripts/crew-pages/agents/<slug>.mjs for
 * copy, this file for looks, then run `node scripts/build-crew-pages.mjs`.
 *
 * ads-agent.html deliberately does NOT use this file: it is a bespoke
 * paid-traffic landing page with its own tuned copy and layout. The class
 * vocabulary here mirrors its .ads-* one so the two read as one site.
 * ------------------------------------------------------------------ */

:root {
    --crew-rule: 1px solid var(--border);
    --crew-stage-num: 2.75rem;
    --crew-shell: 1120px;
    --crew-measure: 68ch;
}

.crew-wrap { max-width: var(--crew-shell); margin: 0 auto; padding: 0 20px; }

/* ── hero ─────────────────────────────────────────────────────────── */
.crew-hero {
    padding: 150px 0 84px;
    background: var(--bg);
    border-bottom: var(--crew-rule);
}
.crew-eyebrow {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--text-secondary); margin-bottom: 20px;
}
.crew-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 5.4vw, 3.9rem);
    font-weight: 800; line-height: 1.06; letter-spacing: -0.02em;
    color: var(--text); margin-bottom: 24px;
    overflow-wrap: anywhere; min-width: 0;
}
.crew-hero h1 .accent { color: var(--accent); display: block; }
.crew-lede {
    font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--text-secondary);
    line-height: 1.65; max-width: var(--crew-measure); margin-bottom: 32px;
}
.crew-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.crew-btn-secondary {
    display: inline-block; padding: 14px 26px; border-radius: var(--radius);
    border: 1.5px solid var(--border); color: var(--text); font-weight: 600;
    background: #fff;
    transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
                transform 0.2s var(--ease-out);
}
.crew-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.crew-btn-secondary:active { transform: translateY(1px); }
.crew-btn-secondary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* .hero-cta is white-on-green for the index hero; these pages sit on light
   paper, so invert it to a filled button. Class name retained because the
   Google Ads click conversion is bound to a.hero-cta site-wide. */
.crew-cta-row .hero-cta { background: var(--primary); color: #fff; }
.crew-cta-row .hero-cta:hover { background: var(--primary-dark); color: #fff; box-shadow: 0 10px 24px rgba(46, 125, 50, 0.22); }
.crew-cta-row .hero-cta:active { transform: translateY(1px); }
.crew-cta-row .hero-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.crew-fineprint { margin-top: 20px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }

/* ── section shell ────────────────────────────────────────────────── */
.crew-section { padding: 84px 0; }
.crew-section + .crew-section { border-top: var(--crew-rule); }
.crew-section h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700;
    line-height: 1.14; letter-spacing: -0.018em; color: var(--text);
    margin-bottom: 18px; overflow-wrap: anywhere; min-width: 0;
}
.crew-section .crew-sub {
    color: var(--text-secondary); font-size: 1.05rem;
    max-width: var(--crew-measure); margin-bottom: 44px; line-height: 1.7;
}
.crew-ink { background: var(--ink); color: var(--ds-text); }
.crew-ink h2 { color: #fff; }
.crew-ink .crew-sub { color: var(--ds-text-secondary); }

/* ── what it does: bordered cards ─────────────────────────────────── */
.crew-what-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.crew-card-item {
    border: var(--crew-rule); border-radius: var(--radius);
    padding: 26px 24px; background: #fff;
}
.crew-card-item h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.crew-card-item p { color: var(--text-secondary); font-size: 0.96rem; line-height: 1.62; }
.crew-card-tag {
    display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}

/* ── numbered stages (the workflow spine) ─────────────────────────── */
.crew-stage {
    display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
    gap: 28px; padding: 38px 0; border-top: 2px solid var(--border);
}
.crew-stage:first-of-type { border-top-width: 3px; border-top-color: var(--primary); }
.crew-stage-n {
    font-family: var(--font-display); font-size: var(--crew-stage-num);
    font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -0.03em;
}
.crew-stage h3 { font-size: 1.28rem; font-weight: 700; color: var(--text); margin-bottom: 10px; line-height: 1.3; }
.crew-stage p { color: var(--text-secondary); line-height: 1.72; max-width: 62ch; }
.crew-stage p + p { margin-top: 12px; }
.crew-who {
    display: inline-block; margin-top: 14px; font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
}
.crew-who.you { background: rgba(255, 107, 53, 0.12); color: #B34418; }
.crew-who.agent { background: rgba(76, 175, 80, 0.14); color: var(--accent); }

/* ── guardrails / limits (ink band) ───────────────────────────────── */
.crew-rails { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 20px; }
.crew-rail {
    padding: 26px 24px; border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.035);
}
.crew-rail h3 { font-size: 1.02rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.crew-rail p { color: var(--ds-text-secondary); font-size: 0.95rem; line-height: 1.62; }

/* ── "try saying" prompt list ─────────────────────────────────────── */
.crew-prompts { list-style: none; padding: 0; margin: 0; max-width: var(--crew-measure); display: grid; gap: 12px; }
.crew-prompts li {
    border: var(--crew-rule); border-radius: var(--radius); background: #fff;
    padding: 16px 20px; color: var(--text); line-height: 1.6;
    font-family: var(--font-body); font-size: 0.98rem;
}
.crew-prompts li::before { content: "\201C"; color: var(--accent); font-weight: 700; margin-right: 2px; }
.crew-prompts li::after { content: "\201D"; color: var(--accent); font-weight: 700; margin-left: 2px; }

/* ── requirements list ────────────────────────────────────────────── */
.crew-req { list-style: none; padding: 0; margin: 0; max-width: var(--crew-measure); }
.crew-req li {
    padding: 16px 0 16px 32px; border-bottom: var(--crew-rule);
    color: var(--text-secondary); line-height: 1.62; position: relative;
}
.crew-req li::before {
    content: ""; position: absolute; left: 6px; top: 25px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
.crew-req li strong { color: var(--text); font-weight: 600; }

/* ── pricing ──────────────────────────────────────────────────────── */
.crew-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.crew-price { border: var(--crew-rule); border-radius: var(--radius); padding: 28px 24px; background: #fff; }
.crew-price.lead { border-color: var(--primary); border-width: 2px; }
.crew-price-name {
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-secondary); margin-bottom: 12px;
}
.crew-price-fig {
    font-family: var(--font-display); font-size: 2.1rem; font-weight: 800;
    color: var(--text); line-height: 1; margin-bottom: 6px;
}
.crew-price-unit { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; }
.crew-price p { color: var(--text-secondary); font-size: 0.94rem; line-height: 1.6; margin-top: 14px; }

/* ── disclaimer ───────────────────────────────────────────────────── */
.crew-disclaimer {
    margin-top: 32px; padding: 22px 24px; border-radius: var(--radius);
    border: var(--crew-rule); border-left: 4px solid var(--cta); background: #fff;
    max-width: var(--crew-measure);
}
.crew-disclaimer h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.crew-disclaimer p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; }

/* ── faq ──────────────────────────────────────────────────────────── */
.crew-faq { max-width: var(--crew-measure); }
.crew-faq details { border-bottom: var(--crew-rule); padding: 20px 0; }
.crew-faq summary {
    cursor: pointer; font-weight: 600; color: var(--text); font-size: 1.02rem;
    list-style: none; display: flex; justify-content: space-between; gap: 16px;
    transition: color 0.2s var(--ease-out);
}
.crew-faq summary:hover { color: var(--accent); }
.crew-faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.crew-faq summary::-webkit-details-marker { display: none; }
.crew-faq summary::after { content: "+"; color: var(--accent); font-weight: 700; flex: none; }
.crew-faq details[open] summary::after { content: "\2212"; }
.crew-faq details p { margin-top: 14px; color: var(--text-secondary); line-height: 1.72; }
.crew-faq details p + p { margin-top: 12px; }

/* ── sibling crews ────────────────────────────────────────────────── */
.crew-siblings { display: flex; flex-wrap: wrap; gap: 10px; }
.crew-sibling {
    display: inline-flex; align-items: center; gap: 8px;
    border: var(--crew-rule); border-radius: 999px; padding: 9px 16px;
    background: #fff; color: var(--text); font-size: 0.93rem; font-weight: 500;
    transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.crew-sibling:hover { border-color: var(--accent); color: var(--accent); }

/* ── closing CTA ──────────────────────────────────────────────────── */
.crew-close { text-align: center; }
.crew-close .crew-sub { margin-left: auto; margin-right: auto; }
.crew-close .crew-cta-row { justify-content: center; }
.crew-close .crew-siblings { justify-content: center; }

/* ── motion: one primitive, reveal on enter ───────────────────────────
   Gated on .js-reveal, set by an inline head script. Without JS (or before
   it runs) every section is fully visible: these pages get crawled, so
   content must never depend on a scroll event to exist. */
.js-reveal .crew-reveal { opacity: 0; transform: translateY(14px); }
.js-reveal .crew-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
    .js-reveal .crew-reveal { opacity: 1; transform: none; }
    .js-reveal .crew-reveal.is-in { transition: opacity 0.15s linear; }
}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .crew-hero { padding: 120px 0 64px; }
    .crew-section { padding: 60px 0; }
    .crew-stage { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 30px 0; }
    .crew-stage-n { font-size: 2.1rem; }
    .crew-cta-row .hero-cta,
    .crew-cta-row .crew-btn-secondary { width: 100%; text-align: center; }
}

/* ── zh: Chinese has no inter-word spaces, so English line-height reads
       cramped. Loosen body copy on the zh mirrors only. ────────────── */
html[lang="zh-CN"] .crew-lede,
html[lang="zh-CN"] .crew-section .crew-sub,
html[lang="zh-CN"] .crew-stage p,
html[lang="zh-CN"] .crew-card-item p,
html[lang="zh-CN"] .crew-rail p,
html[lang="zh-CN"] .crew-req li,
html[lang="zh-CN"] .crew-faq details p,
html[lang="zh-CN"] .crew-disclaimer p { line-height: 1.9; }
html[lang="zh-CN"] .crew-hero h1 { line-height: 1.22; }

/* ── beta waitlist form ───────────────────────────────────────────────
   Only the Computer Use Agent page renders this today. It lives on a
   .crew-ink section, so every colour below is the on-ink variant. */
.beta-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    max-width: var(--crew-measure);
    margin: 28px 0 0;
}

/* Visually hidden but read aloud — the field's only visible cue is a
   placeholder, and a placeholder is not a label. */
.beta-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.beta-input {
    flex: 1 1 280px;
    min-width: 0;
    padding: 15px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ds-text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}

.beta-input::placeholder { color: var(--ds-text-secondary); opacity: 0.75; }

.beta-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);   /* --primary #4CAF50 at 30% */
}

.beta-submit { flex: 0 0 auto; }
.beta-submit[disabled] { opacity: 0.6; cursor: progress; }

.beta-msg {
    max-width: var(--crew-measure);
    margin: 14px 0 0;
    font-size: 0.98rem;
    line-height: 1.6;
    min-height: 1.6em;   /* reserve the line so the section does not jump */
}

.beta-msg.is-busy { color: var(--ds-text-secondary); }
.beta-msg.is-ok { color: #6ee7b7; font-weight: 600; }
.beta-msg.is-err { color: #fca5a5; }

@media (max-width: 720px) {
    .beta-form { gap: 10px; }
    .beta-input { flex: 1 1 100%; }
    .beta-submit { width: 100%; text-align: center; }
}