/* ============================================================================
   CTS marketing page primitives — port of the Claude Design "cts-site.css"
   component layer, minus the chrome (header/footer live in cts-chrome.css)
   and minus the review-only scaffolding (.vf verify chips, .review dock,
   .ask button — all of which are prototype furniture, not production UI).

   Source project: claude.ai/design/p/019e1eba-09c8-759d-bba6-5364190349ea

   Everything is prefixed .cp-* and scoped under .cp-page. The design's own
   names (.card .btn .grid .row .note .job) all collide with Bootstrap, which
   is loaded site-wide, so they are renamed rather than scoped-and-hoped.

   Pages that need something unique add a small inline <style> of their own;
   anything used by two or more pages belongs here.
   ============================================================================ */

.cp-page {
    --cp-blue: #1FA9E0;
    --cp-blue-6: #0E8FC4;
    --cp-blue-7: #0B76A3;
    --cp-blue-50: #EAF7FD;
    --cp-blue-100: #D2EEFA;
    --cp-navy: #0B1220;
    --cp-navy-2: #0F1D31;
    --cp-ink: #0B1220;
    --cp-muted: #4A5563;
    --cp-muted-2: #6B7681;
    --cp-line: #E4E7EB;
    --cp-line-2: #EFF1F4;
    --cp-mist: #F7F9FB;
    --cp-ok-bg: #ECFDF3;
    --cp-ok-line: #A7E8C4;
    --cp-ok-ink: #04663C;
    --cp-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --cp-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --cp-pad: 64px;
    font-family: var(--cp-sans);
    color: var(--cp-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* Reset the legacy theme (style.css / tm-*) back out of these pages. */
.cp-page *, .cp-page *::before, .cp-page *::after { box-sizing: border-box; min-width: 0; }
.cp-page h1, .cp-page h2, .cp-page h3, .cp-page h4, .cp-page p {
    margin: 0; padding: 0; font-family: inherit; color: inherit;
    text-transform: none; letter-spacing: normal;
}
.cp-page ul, .cp-page ol { margin: 0; padding: 0; list-style: none; }
.cp-page li { margin: 0; padding: 0; }
.cp-page img { max-width: 100%; display: block; }
.cp-page a { color: var(--cp-blue-7); text-decoration: none; }
.cp-page a:hover { color: var(--cp-blue-6); text-decoration: underline; }
.cp-page svg { flex: none; }
.cp-page blockquote { margin: 0; padding: 0; border: none; }

/* --- layout -------------------------------------------------------------- */
.cp-sec { padding: 88px var(--cp-pad); }
.cp-sec--tight { padding: 64px var(--cp-pad); }
.cp-wrap { max-width: 1180px; margin: 0 auto; }
.cp-wrap--narrow { max-width: 820px; }
.cp-mist { background: var(--cp-mist); border-top: 1px solid var(--cp-line); border-bottom: 1px solid var(--cp-line); }
.cp-dark { background: var(--cp-navy); color: #fff; }

/* --- type ---------------------------------------------------------------- */
.cp-eyebrow {
    font-family: var(--cp-mono); font-size: 11px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--cp-blue-7);
}
.cp-dark .cp-eyebrow, .cp-hero .cp-eyebrow { color: #5DC1EA; }
.cp-h1 {
    font-size: 58px; font-weight: 800; letter-spacing: -.042em; line-height: 1.01;
    margin-top: 18px; max-width: 17ch;
}
.cp-h2-big { font-size: 42px; font-weight: 800; letter-spacing: -.038em; line-height: 1.06; margin-top: 18px; }
.cp-h2-mid { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin-top: 16px; }
.cp-h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.cp-dark .cp-h1, .cp-dark .cp-h2-big, .cp-dark .cp-h2-mid, .cp-dark .cp-h3 { color: #fff; }
.cp-lead { font-size: 17.5px; line-height: 1.65; color: var(--cp-muted); margin-top: 18px; max-width: 56ch; }
.cp-dark .cp-lead, .cp-hero .cp-lead { color: #B7C4D2; }
.cp-body { font-size: 16.5px; line-height: 1.7; color: var(--cp-muted); margin-top: 16px; max-width: 70ch; }
.cp-body + .cp-body { margin-top: 14px; }
.cp-dark .cp-body { color: #B7C4D2; }
.cp-ast { color: var(--cp-blue); font-weight: 700; }

/* --- buttons -------------------------------------------------------------
   Prefixed with .cp-page so they out-specify the `.cp-page a` colour reset. */
.cp-page .cp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 52px; padding: 0 26px; border-radius: 9px;
    font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1;
    cursor: pointer; border: 1px solid transparent; white-space: nowrap; text-decoration: none;
}
.cp-page .cp-btn:hover { text-decoration: none; }
.cp-page .cp-btn--p { background: var(--cp-blue); color: #fff; }
.cp-page .cp-btn--p:hover { background: var(--cp-blue-6); color: #fff; }
.cp-page .cp-btn--s { background: #fff; color: var(--cp-ink); border-color: var(--cp-line); }
.cp-page .cp-btn--s:hover { border-color: #9AA6B2; color: var(--cp-ink); }
.cp-page .cp-btn--o { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.34); }
.cp-page .cp-btn--o:hover { background: rgba(255,255,255,.18); color: #fff; }
.cp-page .cp-btn--sm { height: 44px; font-size: 13.5px; padding: 0 18px; }
.cp-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.cp-page .cp-more {
    display: inline-flex; gap: 7px; align-items: center;
    font-size: 15px; font-weight: 700; min-height: 44px;
}

/* --- hero ---------------------------------------------------------------- */
.cp-hero { position: relative; background: var(--cp-navy-2); color: #fff; padding: 0 var(--cp-pad); overflow: hidden; }

/* The photo is 62% (not the artboard's 54%) and its left edge is masked to
   transparent.
   Why: at 54% the photo began at 46% of the width, where the scrim is still
   ~95% opaque. Brightness barely changed across that boundary (18 -> 23) but
   FLAT COLOUR MET TEXTURE, which reads as a hard vertical seam — the hero
   looked like two panels rather than one image. Starting the photo at 38%,
   where the scrim is fully opaque, and dissolving its first quarter removes the
   join entirely. */
.cp-hero__shot {
    position: absolute; top: 0; bottom: 0; right: 0; width: 62%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}
.cp-hero__shot img { width: 100%; height: 100%; object-fit: cover; }

/* Denser on the right than the artboard (.72/.60 vs .60/.44): the photo was
   competing with the headline for attention rather than sitting behind it.
   Text-side stops are unchanged, so measured contrast (~18:1 headline,
   ~10:1 lede) is unaffected. */
.cp-hero__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(92deg,#09111E 0%,#09111E 38%,rgba(9,17,30,.94) 52%,rgba(9,17,30,.72) 76%,rgba(9,17,30,.6) 100%);
}
.cp-hero__inner { position: relative; padding: 84px 0 90px; }
.cp-hero--tight .cp-hero__inner { padding: 64px 0 68px; }

/* --- stat strip on dark -------------------------------------------------- */
.cp-stats {
    position: relative; display: grid; grid-template-columns: repeat(4,1fr);
    border-top: 1px solid rgba(255,255,255,.14); margin-top: 56px; padding-top: 28px;
}
.cp-stats > div { padding: 0 24px; border-left: 1px solid rgba(255,255,255,.12); }
.cp-stats > div:first-child { border-left: none; padding-left: 0; }
.cp-stats .cp-n { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cp-stats .cp-n small { font-size: 15px; font-weight: 700; }
.cp-stats .cp-t { font-size: 13px; color: #9FB3C8; margin-top: 9px; line-height: 1.4; }

/* --- figures on light ---------------------------------------------------- */
.cp-figs { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--cp-line); margin-top: 40px; }
.cp-figs > div { padding: 28px 26px 0; border-left: 1px solid var(--cp-line-2); }
.cp-figs > div:first-child { border-left: none; padding-left: 0; }
.cp-figs .cp-n { font-size: 40px; font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.cp-figs .cp-n small { font-size: 16px; font-weight: 700; }
.cp-figs .cp-t { font-size: 14px; color: var(--cp-muted); margin-top: 10px; line-height: 1.45; }

/* --- cards --------------------------------------------------------------- */
.cp-grid { display: grid; gap: 20px; }
.cp-g2 { grid-template-columns: repeat(2,1fr); }
.cp-g3 { grid-template-columns: repeat(3,1fr); }
.cp-g4 { grid-template-columns: repeat(4,1fr); }
.cp-card {
    background: #fff; border: 1px solid var(--cp-line); border-radius: 16px;
    padding: 28px; display: flex; flex-direction: column; gap: 13px;
}
.cp-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.cp-card p { font-size: 15px; line-height: 1.6; color: var(--cp-muted); }
.cp-dark .cp-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.cp-dark .cp-card h3 { color: #fff; }
.cp-dark .cp-card p { color: #B7C4D2; }
.cp-ico {
    width: 44px; height: 44px; border-radius: 11px;
    background: var(--cp-blue-50); color: var(--cp-blue-7);
    display: flex; align-items: center; justify-content: center; flex: none;
}
.cp-dark .cp-ico { background: rgba(31,169,224,.16); color: #5DC1EA; }

/* --- numbered steps ------------------------------------------------------ */
.cp-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 24px; margin-top: 44px; }
.cp-step { border-top: 2px solid var(--cp-blue); padding-top: 18px; display: flex; flex-direction: column; }
.cp-step__k { font-family: var(--cp-mono); font-size: 11px; letter-spacing: .14em; color: var(--cp-blue-7); }
.cp-step h3 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin-top: 12px; line-height: 1.3; }
.cp-step p { font-size: 14.5px; line-height: 1.55; color: var(--cp-muted); margin-top: 8px; }
.cp-step__when {
    font-family: var(--cp-mono); font-size: 11px; color: var(--cp-muted-2);
    margin-top: auto; padding-top: 10px; letter-spacing: .05em;
}

/* --- definition rows ----------------------------------------------------- */
.cp-rows { border-top: 1px solid var(--cp-ink); margin-top: 36px; }
.cp-row {
    display: grid; grid-template-columns: 230px 1fr; gap: 36px;
    padding: 24px 0; border-bottom: 1px solid var(--cp-line); align-items: start;
}
.cp-row h3 { font-size: 19px; font-weight: 700; letter-spacing: -.018em; }
.cp-row p { font-size: 16px; line-height: 1.65; color: var(--cp-muted); max-width: 66ch; }
.cp-dl { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.cp-dl li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.55; color: #33404E; }
.cp-tick { color: var(--cp-blue); flex: none; margin-top: 3px; display: inline-flex; }

/* --- comparison table ---------------------------------------------------- */
.cp-tbl { width: 100%; border-collapse: collapse; margin-top: 32px; }
.cp-tbl th {
    text-align: left; font-family: var(--cp-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--cp-muted-2); font-weight: 500;
    padding: 0 18px 10px 0; border-bottom: 1px solid var(--cp-ink);
}
.cp-tbl td {
    padding: 16px 18px 16px 0; border-bottom: 1px solid var(--cp-line);
    font-size: 15.5px; line-height: 1.55; color: var(--cp-muted); vertical-align: top;
}
.cp-tbl td b { color: var(--cp-ink); font-weight: 700; }
.cp-tbl tr td:first-child { width: 26%; }

/* --- quotes -------------------------------------------------------------- */
.cp-quote { border-top: 2px solid var(--cp-blue); padding-top: 24px; }
.cp-quote p { font-size: 20px; line-height: 1.5; letter-spacing: -.017em; }
.cp-quote__who { margin-top: 20px; font-size: 13.5px; color: var(--cp-muted); }
.cp-quote__who b { display: block; color: var(--cp-ink); font-size: 14.5px; margin-bottom: 3px; }
.cp-dark .cp-quote p { color: #fff; }
.cp-dark .cp-quote__who { color: #93A3B4; }
.cp-dark .cp-quote__who b { color: #fff; }

/* --- pills --------------------------------------------------------------- */
/* Direct child only: a descendant selector also hits nested <span class="cp-ast">. */
.cp-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.cp-pills > span {
    font-size: 14.5px; font-weight: 600; background: #fff;
    border: 1px solid var(--cp-line); border-radius: 999px; padding: 10px 17px;
}
.cp-dark .cp-pills > span { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff; }

/* --- note ---------------------------------------------------------------- */
.cp-note {
    display: flex; gap: 13px; align-items: flex-start; background: var(--cp-mist);
    border: 1px solid var(--cp-line); border-radius: 12px; padding: 18px 20px;
    font-size: 13.5px; line-height: 1.65; color: var(--cp-muted); margin-top: 26px;
}
.cp-note b { color: var(--cp-ink); }
.cp-note__links { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; }
.cp-page .cp-note__links a { font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.cp-dark .cp-note { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #B7C4D2; }
.cp-dark .cp-note b { color: #fff; }

/* --- job cards ----------------------------------------------------------- */
.cp-jobs { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 32px; }
.cp-job {
    display: flex; justify-content: space-between; gap: 20px; align-items: center;
    background: #fff; border: 1px solid var(--cp-line); border-radius: 14px; padding: 20px 22px;
}
.cp-page .cp-job:hover { border-color: #9AA6B2; text-decoration: none; }
.cp-job h3 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--cp-ink); }
.cp-job__m { font-size: 13.5px; color: var(--cp-muted-2); margin-top: 5px; }
.cp-job__r { font-size: 15px; font-weight: 800; color: var(--cp-blue-7); white-space: nowrap; }

/* --- search bar on dark -------------------------------------------------- */
.cp-search {
    display: flex; gap: 10px; background: #fff; border-radius: 12px; padding: 10px;
    margin-top: 32px; max-width: 640px; box-shadow: 0 14px 40px rgba(9,17,30,.28);
}
.cp-search input {
    flex: 1; border: none; font: inherit; font-size: 15.5px; padding: 0 14px;
    height: 52px; color: var(--cp-ink); min-width: 0; background: #fff;
}
.cp-search input::placeholder { color: #9AA4AF; }
.cp-search input:focus { outline: 2px solid var(--cp-blue-100); border-radius: 8px; }

/* --- accordion (FAQ) ----------------------------------------------------- */
.cp-acc { border-top: 1px solid var(--cp-line); margin-top: 32px; }
.cp-acc details { border-bottom: 1px solid var(--cp-line); }
.cp-acc summary {
    list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
    font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.4; color: var(--cp-ink);
}
.cp-acc summary::-webkit-details-marker { display: none; }
.cp-acc summary::after {
    content: ""; position: absolute; right: 8px; top: 26px;
    width: 9px; height: 9px; border-right: 2px solid var(--cp-blue);
    border-bottom: 2px solid var(--cp-blue); transform: rotate(45deg); transition: transform .15s;
}
.cp-acc details[open] summary::after { transform: rotate(-135deg); }
.cp-acc summary:hover { color: var(--cp-blue-7); }
.cp-acc__body { padding: 0 44px 22px 0; font-size: 16px; line-height: 1.7; color: var(--cp-muted); max-width: 76ch; }
.cp-acc__body p + p { margin-top: 12px; }

/* --- closing CTA band ---------------------------------------------------- */
.cp-ctaband .cp-wrap {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 44px; flex-wrap: wrap;
}
.cp-ctaband h2 {
    font-size: 42px; font-weight: 800; letter-spacing: -.038em; line-height: 1.04;
    max-width: 15ch; margin-top: 16px; color: #fff;
}

/* Anchor jumps must clear the always-fixed global header (cts-header.js
   publishes the measured height as --cts-header-h). */
.cp-page [id] { scroll-margin-top: calc(var(--cts-header-h, 90px) + 16px); }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1120px) {
    .cp-page { --cp-pad: 40px; }
    .cp-h1 { font-size: 48px; }
    .cp-h2-big { font-size: 34px; }
    .cp-steps { grid-template-columns: repeat(3,1fr); gap: 28px; }
    .cp-jobs, .cp-g4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
    .cp-hero__shot { width: 44%; opacity: .6; }
    .cp-stats, .cp-figs { grid-template-columns: repeat(2,1fr); gap: 22px 0; }
    .cp-stats > div:nth-child(odd), .cp-figs > div:nth-child(odd) { border-left: none; padding-left: 0; }
    .cp-figs > div { padding-top: 22px; }
    .cp-g3, .cp-g2 { grid-template-columns: 1fr; }
    .cp-row { grid-template-columns: 1fr; gap: 10px; }
    .cp-steps { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px) {
    .cp-page { --cp-pad: 20px; }
    .cp-sec { padding: 56px var(--cp-pad); }
    .cp-sec--tight { padding: 44px var(--cp-pad); }
    .cp-hero__inner, .cp-hero--tight .cp-hero__inner { padding: 52px 0 58px; }
    .cp-hero__shot { display: none; }
    .cp-h1 { font-size: 35px; max-width: none; }
    .cp-h2-big { font-size: 29px; }
    .cp-h2-mid { font-size: 25px; }
    .cp-lead { font-size: 16.5px; }
    .cp-steps, .cp-jobs, .cp-g4 { grid-template-columns: 1fr; }
    .cp-card { padding: 22px; }
    .cp-page .cp-btn { width: 100%; }
    .cp-search { flex-direction: column; box-shadow: none; padding: 0; background: transparent; gap: 10px; }
    .cp-search input { background: #fff; border-radius: 10px; height: 54px; }
    .cp-ctaband h2 { font-size: 29px; }
    /* Stacked table keeps its column meaning via data-label pseudo-headings. */
    .cp-tbl, .cp-tbl tbody, .cp-tbl tr, .cp-tbl td { display: block; width: 100%; }
    .cp-tbl thead { display: none; }
    .cp-tbl tr { padding: 14px 0; border-bottom: 1px solid var(--cp-line); }
    .cp-tbl td { border: none; padding: 2px 0; }
    .cp-tbl tr td:first-child { width: auto; }
    .cp-tbl td:first-child b { font-size: 17px; }
    .cp-tbl td[data-label]::before {
        content: attr(data-label); display: block; font-family: var(--cp-mono);
        font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
        color: var(--cp-muted-2); margin: 10px 0 2px;
    }
}