/* Crosstown AI system landing pages (generated by scripts/build_system_pages.py) */
:root { --grad: linear-gradient(110deg, #FF5E62 0%, #FFB561 38%, #46DDB8 62%, #0A7A66 100%); }
.logo img { border-radius: 8px; }
.crumbs { font-size: 13px; color: var(--muted); padding-top: 28px; } .crumbs a { color: var(--muted); }
.lp-hero { padding-block: 26px 56px; }
.lp-hero h1 { font-size: clamp(36px, 5.2vw, 62px); line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; max-width: 960px; margin-top: 14px; }
.lp-hero .lede { font-size: 19px; color: var(--ink-2); margin-top: 18px; max-width: 760px; }
.lp-hero .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.lp-hero .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.lp-hero .tags span { font-size: 13.5px; font-weight: 600; background: var(--ink); color: #fff; border-radius: 999px; padding: 6px 12px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.lp h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.lp .sub { color: var(--muted); font-size: 17px; margin-top: 12px; }
.pains { display: grid; gap: 10px; margin-top: 4px; }
.pains div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.pains div::before { content: "✕"; color: #D9363E; font-weight: 800; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.box.ai { background: #F3FAF7; border-color: #D5EEE5; }
.box h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.box.ai h3 { color: #0B6B59; }
.box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.box li { display: flex; gap: 10px; align-items: baseline; } .box li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; transform: translateY(-2px); }
.box.ai li::before { background: #1FAF8F; }
.results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.results div { background: var(--ink); color: #fff; border-radius: 16px; padding: 18px; font-weight: 700; font-size: 16px; }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.steps4 .card h3 { font-size: 17px; margin: 10px 0 6px; } .steps4 .card p { color: var(--muted); font-size: 14.5px; }
.steps4 .n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips span { font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-top: 10px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 16px; } .faq details p { color: var(--ink-2); margin-top: 10px; }
.cta { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cta h2 { color: #fff; } .cta p { color: #D8CFD5; font-size: 17px; margin-top: 10px; }
.cta .btn { background: #fff; color: var(--ink); border-color: #fff; }
.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.others a { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.others a b { display: block; } .others a small { color: var(--muted); font-size: 13px; }
.others a:hover { border-color: var(--ink); }
.note { font-size: 14.5px; color: var(--muted); margin-top: 14px; }
@media (max-width: 900px) { .two, .cta { grid-template-columns: 1fr; } .results, .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .others { grid-template-columns: 1fr 1fr; } .cta { padding: 28px; } }
@media (max-width: 560px) { .results, .steps4, .others { grid-template-columns: 1fr; } }