/* /ci: GitHub Actions runners. The page shares landing.css (base styles, header, footer, fonts),
   site-chrome.css and talk.css with the homepage. landing.css also styles main>section and its first
   child for the homepage hero, so every rule here starts at .ci-page or a section id. DESIGN.md tokens. */
.ci-page{--ci-card:#141414;--ci-inset:#0b0b0b;--ci-line:rgba(255,255,255,.08);--ci-text:#E9EDF4;--ci-muted:#858B94;--ci-faint:#5F646D;--ci-green:#10B981;--ci-green-soft:#34D399;--ci-gold:#D4A574;--page-width:1152px;background:#070707;color:var(--ci-text)}
/* landing.css pads main by the fixed header's height; this hero runs under the header instead. */
html body.ci-page main{padding-top:0!important}
.ci-page main>section{position:relative;padding:112px 24px;border:0!important;scroll-margin-top:88px}
.ci-page main>section+section{border-top:1px solid rgba(255,255,255,.06)!important}
.ci-page .ci-container{width:100%;max-width:1152px;margin:0 auto}
.ci-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ci-page code,.ci-page .ci-mono{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

/* Section headings: 40/44.8 semibold, as on the homepage. */
.ci-page .ci-heading{max-width:720px;margin:0 auto 48px;text-align:center}
.ci-page .ci-heading h2{font-size:40px;line-height:1.12;font-weight:600;letter-spacing:-.02em;color:var(--ci-text)}
.ci-page .ci-heading p{margin-top:12px;font-size:14px;line-height:22px;color:var(--ci-muted);text-wrap:balance}

/* Buttons: DESIGN.md Primary and Secondary, Large (40 px). */
.ci-page .ci-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 24px;border-radius:8px;font-size:14px;line-height:20px;font-weight:600;color:#fff;white-space:nowrap;text-decoration:none;transition:background-color .15s ease}
.ci-page .ci-btn-primary{background:rgba(16,185,129,.5);border:1px solid var(--ci-green)}
.ci-page .ci-btn-primary:is(:hover,:active){background:var(--ci-green)}
.ci-page .ci-btn-secondary{background:#2E2E2E;border:1px solid transparent;color:var(--ci-text)}
.ci-page .ci-btn-secondary:is(:hover,:active){background:#3B3B3B}
.ci-page .ci-btn:focus-visible{outline:2px solid var(--ci-green);outline-offset:2px}
/* landing.css paints every /login link in main solid #10B981 with dark text (!important); the trial
   buttons keep DESIGN.md Primary. */
html body.ci-page main a.ci-btn.ci-btn-primary{height:40px;padding:0 24px!important;border:1px solid var(--ci-green)!important;border-radius:8px!important;background:rgba(16,185,129,.5)!important;box-shadow:none!important;color:#fff!important}
html body.ci-page main a.ci-btn.ci-btn-primary:is(:hover,:active){background:var(--ci-green)!important}

/* Hero: React Bits GradientWaves behind the copy and a workflow diff, like the homepage. The shader
   draws to its box's aspect ratio, so the hero keeps a screen's height. */
#ci-hero{display:flex!important;align-items:center;min-height:100svh;padding:136px 24px 96px!important;overflow:hidden;background:#070707}
#ci-hero>.ci-waves{display:block!important;position:absolute;inset:0;max-width:none!important;margin:0!important;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(transparent 0,#000 22%,#000 70%,transparent);mask-image:linear-gradient(transparent 0,#000 22%,#000 70%,transparent)}
#ci-hero>.ci-waves .gradient-waves-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
/* The ↓ to the next section, as on the homepage (its markup and utilities); landing.css hides the
   hero's last div, so it is shown here. */
#ci-hero>.hero-scroll-cue{display:flex!important;position:absolute;left:0;right:0;bottom:24px;z-index:2;justify-content:center;max-width:none!important;margin:0!important}
#ci-hero>.ci-hero-inner{display:grid!important;position:relative;z-index:1;width:100%;max-width:1152px;margin:0 auto;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
/* "Trusted by N developers": the homepage's pill, copied from trust-demo.css, which scopes it to the
   homepage hero (.trust-hero .trust-copy). */
#ci-hero .trust-proof{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;padding:4px 16px 4px 4px;border-radius:999px;background:linear-gradient(135deg,#093527,#09271d)}
#ci-hero .trust-proof:not(.is-ready){visibility:hidden}
#ci-hero .trust-proof-faces{display:flex;flex:none}
#ci-hero .trust-proof-faces>*{box-sizing:content-box;flex:none;display:grid;place-items:center;width:24px;height:24px;max-width:none;margin:0;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #093325}
#ci-hero .trust-proof-faces>*+*{margin-left:-6px}
#ci-hero .trust-proof-faces>span{background:#1e8e3e;color:#fff;font:500 12px/1 Geist,sans-serif}
#ci-hero .trust-proof-text{font:500 14px/20px Geist,sans-serif;color:#e9edf4;white-space:nowrap}
#ci-hero .trust-proof-text b{font-weight:600;color:#34d399;font-variant-numeric:tabular-nums}
#ci-hero h1{font-size:clamp(36px,4.6vw,56px);line-height:1.06;font-weight:600;letter-spacing:-.04em;color:var(--ci-text);text-wrap:balance}
#ci-hero .ci-lead{margin-top:20px;max-width:440px;font-size:16px;line-height:26px;color:#a2a9a5}
#ci-hero .ci-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* The workflow file, shaped like the homepage's #sandbox-code card. */
.ci-page .ci-window{border-radius:16px;background:var(--ci-card);border:1px solid var(--ci-line);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.ci-page .ci-window-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;padding:0 10px 0 18px;border-bottom:1px solid var(--ci-line);background:#101010}
.ci-page .ci-window-file{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;line-height:20px;color:var(--ci-muted)}
.ci-page .ci-window-file svg{flex:none;width:16px;height:16px;color:var(--ci-muted)}
.ci-page .ci-window-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-page .ci-copy{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;background:#2E2E2E;font-size:12px;line-height:16px;font-weight:600;color:var(--ci-text);transition:background-color .15s ease}
.ci-page .ci-copy:hover{background:#3B3B3B}
.ci-page .ci-copy svg{width:14px;height:14px}
.ci-page .ci-copy .ci-copy-done{display:none}
.ci-page .ci-copy[data-copied] .ci-copy-idle{display:none}
.ci-page .ci-copy[data-copied] .ci-copy-done{display:inline}
.ci-page .ci-diff{margin:0;padding:18px 0 22px;font-size:13.5px;line-height:26px;color:#c9ced6;overflow-x:auto}
.ci-page .ci-diff>span{display:grid;grid-template-columns:44px 22px max-content;padding-right:24px;white-space:pre}
.ci-page .ci-diff i{font-style:normal;text-align:right;padding-right:14px;color:#3d4148;user-select:none}
.ci-page .ci-diff b{font-weight:400;color:var(--ci-faint);user-select:none}
.ci-page .ci-diff .ci-del{background:rgba(239,68,68,.08)}
.ci-page .ci-diff .ci-del b,.ci-page .ci-diff .ci-del em{color:#f19a9a}
.ci-page .ci-diff .ci-add{background:rgba(16,185,129,.1)}
.ci-page .ci-diff .ci-add b{color:var(--ci-green-soft)}
.ci-page .ci-diff em{font-style:normal}
.ci-page .ci-diff .ci-add em{color:#8ef0c6}
.ci-page .ci-diff .ci-key{color:#8b93a0}
/* ci.js adds .is-typing: each added value types out character by character (Geist Mono, so 1ch is one
   character), with a caret until its animation ends. The full text stays in the DOM. */
.ci-page .ci-type{display:inline-block;vertical-align:bottom;overflow:hidden;white-space:pre}
.ci-page .ci-diff.is-typing .ci-type{width:0;border-right:2px solid var(--ci-green-soft);animation:ci-type calc(var(--n)*45ms) steps(var(--n)) var(--d) forwards}
.ci-page .ci-diff.is-typing .ci-type.is-typed{border-right-color:transparent}
.ci-page .ci-diff.is-paused .ci-type{animation-play-state:paused}
@keyframes ci-type{to{width:calc(var(--n)*1ch + 2px)}}

/* Price comparison: the homepage calculator's layout, settings left and results right. */
#ci-pricing .ci-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:16px;background:var(--ci-card);border:1px solid var(--ci-line);overflow:hidden}
#ci-pricing .ci-calc>div{padding:32px 36px}
#ci-pricing .ci-calc>div+div{border-left:1px solid var(--ci-line)}
#ci-pricing .ci-calc-title{padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--ci-line);font-size:14px;line-height:20px;font-weight:600;color:var(--ci-text)}
#ci-pricing .ci-field+.ci-field{margin-top:28px}
#ci-pricing .ci-field-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:14px;line-height:20px;color:var(--ci-muted)}
#ci-pricing .ci-field-label span{font-size:12px;color:var(--ci-faint)}
#ci-pricing .ci-slider{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}
#ci-pricing input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:0;border-radius:999px;background:linear-gradient(90deg,var(--ci-green) var(--ci-progress,10%),#2E2E2E var(--ci-progress,10%));cursor:pointer}
#ci-pricing input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ci-green);border:3px solid #141414;box-shadow:0 0 0 1px var(--ci-green)}
#ci-pricing input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ci-green);border:3px solid #141414;box-shadow:0 0 0 1px var(--ci-green)}
#ci-pricing input[type=range]:focus-visible{outline:2px solid var(--ci-green);outline-offset:6px}
#ci-pricing output{min-width:112px;height:48px;padding:0 16px;display:grid;place-items:center;border-radius:12px;background:#070707;font-size:14px;line-height:20px;font-weight:600;color:var(--ci-text);font-variant-numeric:tabular-nums}
#ci-pricing .ci-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#ci-pricing .ci-presets button{height:28px;padding:0 10px;border-radius:8px;background:#070707;font-size:12px;line-height:16px;font-weight:500;color:var(--ci-muted);transition:color .15s ease,background-color .15s ease}
#ci-pricing .ci-presets button:hover{color:var(--ci-text)}
#ci-pricing .ci-presets button[aria-pressed=true]{background:#2E2E2E;color:#fff;font-weight:600}
#ci-pricing fieldset{margin:0;padding:0;border:0;min-width:0}
#ci-pricing legend{float:left;width:100%;padding:0}
#ci-pricing .ci-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;clear:both}
#ci-pricing .ci-tiers label{position:relative;display:block;min-width:0;cursor:pointer}
#ci-pricing .ci-tiers input{position:absolute;opacity:0;width:1px;height:1px}
/* Match the homepage's resource cards. */
#ci-pricing .ci-tier{display:flex;flex-direction:column;height:100%;padding:12px 16px;border:0;border-radius:12px;background:rgba(255,255,255,.04);transition:background-color .15s}
#ci-pricing .ci-tiers label:hover input:not(:checked)+.ci-tier{background:rgba(255,255,255,.07)}
#ci-pricing .ci-tiers input:checked+.ci-tier{background:rgba(16,185,129,.12)}
#ci-pricing .ci-tiers input:focus-visible+.ci-tier{outline:2px solid var(--ci-green);outline-offset:3px}
#ci-pricing .ci-tier-head{display:flex;align-items:center;justify-content:space-between;gap:4px}
#ci-pricing .ci-tier-head strong{font-size:14px;line-height:20px;font-weight:600;color:var(--ci-text)}
#ci-pricing .ci-tier-check{flex-shrink:0;color:var(--ci-green);visibility:hidden}
#ci-pricing .ci-tiers input:checked+.ci-tier .ci-tier-check{visibility:visible}
#ci-pricing .ci-tier-rows{display:flex;flex-direction:column;gap:4px;margin-top:6px}
#ci-pricing .ci-tier-rows span{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:500;color:var(--ci-muted);white-space:nowrap}
#ci-pricing .ci-tier-rows svg{flex-shrink:0}
#ci-pricing .ci-tier-price{margin-top:12px;font-size:12px;line-height:16px;font-weight:500;color:var(--ci-text);font-variant-numeric:tabular-nums}
#ci-pricing .ci-calc-action{margin-top:32px}
#ci-pricing .ci-calc-action .ci-btn{width:100%}
#ci-pricing .ci-total{display:flex;align-items:baseline;gap:10px;margin-top:4px}
#ci-pricing .ci-total strong{font-size:52px;line-height:1.25;font-weight:500;letter-spacing:-.03em;color:var(--ci-text);font-variant-numeric:tabular-nums}
#ci-pricing .ci-total span{font-size:16px;color:var(--ci-muted)}
#ci-pricing .ci-total-note{margin-top:8px;font-size:12px;line-height:18px;color:var(--ci-muted)}
#ci-pricing .ci-compare{margin-top:24px;padding-top:24px;border-top:1px solid var(--ci-line)}
#ci-pricing .ci-compare-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:12px;line-height:16px}
#ci-pricing .ci-compare-head strong{font-weight:600;color:var(--ci-text)}
#ci-pricing .ci-compare-head span{color:var(--ci-faint)}
#ci-pricing .ci-row{display:grid;grid-template-columns:140px minmax(0,1fr) 84px 40px;align-items:center;column-gap:14px;min-height:44px;padding:0 10px;border-radius:10px}
#ci-pricing .ci-row.is-lizard{background:#1f1f1f}
#ci-pricing .ci-row-name{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:14px;line-height:20px;font-weight:600;color:#b7bcc4;text-decoration:none}
#ci-pricing .ci-row-name:hover{color:var(--ci-text)}
#ci-pricing .ci-row.is-lizard .ci-row-name{color:var(--ci-green-soft)}
#ci-pricing .ci-row-name svg{flex:none;width:18px;height:18px}
#ci-pricing .ci-row.is-lizard .ci-row-name svg{color:var(--ci-green)}
#ci-pricing .ci-row-track{display:block;height:6px;border-radius:999px;background:#242424;overflow:hidden}
#ci-pricing .ci-row-track span{display:block;height:100%;min-width:4px;border-radius:inherit;background:#55595f;transition:width .35s cubic-bezier(.32,.72,0,1)}
#ci-pricing .ci-row.is-lizard .ci-row-track span{background:linear-gradient(90deg,var(--ci-green),var(--ci-green-soft))}
#ci-pricing .ci-row strong{font-size:14px;line-height:20px;font-weight:600;text-align:right;color:var(--ci-text);font-variant-numeric:tabular-nums}
#ci-pricing .ci-row.is-lizard strong{color:var(--ci-green-soft)}
#ci-pricing .ci-row-x{font-size:12px;line-height:16px;text-align:right;color:var(--ci-faint);font-variant-numeric:tabular-nums}
#ci-pricing .ci-covers{margin-top:16px;font-size:12px;line-height:18px;color:var(--ci-muted)}

/* "How the prices compare": the rates table and the method, closed by default. */
.ci-page .ci-details{max-width:900px;margin:32px auto 0;border-radius:12px;border:1px solid var(--ci-line);background:#0d0d0d}
.ci-page .ci-details summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;list-style:none;cursor:pointer;font-size:14px;line-height:20px;font-weight:600;color:var(--ci-muted)}
.ci-page .ci-details summary::-webkit-details-marker{display:none}
.ci-page .ci-details summary:hover{color:var(--ci-text)}
.ci-page .ci-details summary svg{width:16px;height:16px;transition:transform .2s ease}
.ci-page .ci-details[open] summary svg{transform:rotate(180deg)}
.ci-page .ci-details>div{padding:4px 24px 24px}
.ci-page .ci-details p{margin-top:12px;font-size:13px;line-height:20px;color:var(--ci-muted)}
.ci-page .ci-details p a,.ci-page .ci-faq a{color:var(--ci-text);text-decoration:underline;text-decoration-color:rgba(233,237,244,.3);text-underline-offset:3px}
.ci-page .ci-table-scroll{overflow-x:auto;margin-top:8px}
.ci-page .ci-table{width:100%;min-width:520px;border-collapse:collapse;font-size:13px;line-height:20px}
.ci-page .ci-table th,.ci-page .ci-table td{padding:10px 12px;border-bottom:1px solid var(--ci-line);text-align:left;vertical-align:top}
.ci-page .ci-table thead th{font-size:12px;line-height:18px;font-weight:600;color:var(--ci-faint)}
.ci-page .ci-table tbody th{font-weight:600;color:var(--ci-text)}
.ci-page .ci-table tbody th a{color:inherit;text-decoration:none}
.ci-page .ci-table tbody th a:hover{text-decoration:underline;text-underline-offset:3px}
.ci-page .ci-table td{color:#c9ced6;font-variant-numeric:tabular-nums}
.ci-page .ci-table td span{display:block;font-size:12px;line-height:16px;color:var(--ci-faint)}
.ci-page .ci-table tr.is-lizard :is(th,td){color:var(--ci-green-soft)}
.ci-page .ci-table tbody tr:last-child :is(th,td){border-bottom:0}
.ci-page .ci-table code{font-size:12.5px;color:var(--ci-text)}

/* What every job gets: the homepage bento (#sandbox-benefits, from landing.css, technical-illustrations.css
   and benefits-peeks.css) with this page's own art. Each picture plays once on hover, as on the homepage,
   with the homepage's keyframes. */
html body #sandbox-benefits .infra-card:hover :is(.ja-vm,.jb-new,.jc-new,.jd-entry){animation:lz-launch .8s cubic-bezier(.2,.8,.2,1) var(--d) both}
html body #sandbox-benefits .infra-card:hover .ja-old{animation:ci-fade .6s ease-out var(--d) both}
html body #sandbox-benefits .infra-card:hover .jb-kept{animation:lz-ic-run .9s ease var(--d) both}
html body #sandbox-benefits .jc-flow{opacity:0}
html body #sandbox-benefits .infra-card:hover .jc-flow{animation:lz-show .3s .2s both,lz-packets .7s linear infinite}
html body #sandbox-benefits .jd-link{stroke-dasharray:100}
html body #sandbox-benefits .infra-card:hover .jd-link{animation:lz-draw .5s linear both}
html body #sandbox-benefits .je-ping{transform-box:fill-box;transform-origin:center}
html body #sandbox-benefits .infra-card:hover .je-ping{animation:ci-ring 1.8s ease-out .3s infinite}
html body #sandbox-benefits .infra-card:hover .je-fork{animation:ci-bump 1.2s cubic-bezier(.2,.8,.2,1) var(--d) both}
html body #sandbox-benefits .infra-card:hover .je-stop{animation:lz-ic-run .6s ease .6s both}
html body #sandbox-benefits .infra-card:hover .jf-line{animation:lz-fade-up .5s ease-out var(--d) both}
@keyframes ci-fade{to{opacity:.12}}
@keyframes ci-ring{0%{opacity:.8;transform:scale(.92)}100%{opacity:0;transform:scale(1.12)}}
@keyframes ci-bump{0%,100%{translate:0 0}45%{translate:-14px -8px}60%{translate:-10px -6px}}
@media (prefers-reduced-motion:reduce){html body #sandbox-benefits .infra-card:hover [class^="j"]{animation:none}}

/* Switch in one pull request: three steps on a line, and the pull request the wizard opens (its
   title and branch name as the wizard writes them; the diff reuses the hero's .ci-diff). */
#ci-switch .ci-switch{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:center}
#ci-switch .ci-steps{position:relative;display:grid;gap:40px;margin:0;padding:0;list-style:none}
#ci-switch .ci-steps li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;align-items:start}
#ci-switch .ci-steps li:not(:last-child)::after{content:'';position:absolute;left:23.5px;top:58px;bottom:calc(-1 * var(--ci-step-gap,40px) + 10px);width:1px;background:rgba(52,211,153,.22)}
#ci-switch .ci-step-icon{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#123326,#0d1d17);color:var(--ci-green-soft)}
/* All three filled: the GitHub mark fills its 24-unit box, Phosphor's fill icons leave a margin. */
#ci-switch .ci-step-icon svg{width:24px;height:24px}
#ci-switch .ci-step-icon svg[viewBox="0 0 24 24"]{width:20px;height:20px}
#ci-switch .ci-step-n{font-size:12px;line-height:16px;font-weight:500;color:var(--ci-green-soft)}
#ci-switch .ci-steps h3{margin-top:4px;font-size:18px;line-height:26px;font-weight:600;letter-spacing:-.01em;color:var(--ci-text)}
#ci-switch .ci-steps h3+p{margin-top:6px;font-size:14px;line-height:22px;color:var(--ci-muted)}
#ci-switch .ci-pr{margin:0;border-radius:16px;background:var(--ci-card);border:1px solid var(--ci-line);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
#ci-switch .ci-pr-head{padding:20px 24px;border-bottom:1px solid var(--ci-line);background:#101010}
#ci-switch .ci-pr-title{display:flex;align-items:center;gap:10px;font-size:16px;line-height:24px;color:var(--ci-text)}
#ci-switch .ci-pr-title strong{font-weight:600}
#ci-switch .ci-pr-title svg{flex:none;width:20px;height:20px;color:var(--ci-green-soft)}
#ci-switch .ci-pr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;font-size:12px;line-height:16px;color:var(--ci-muted)}
#ci-switch .ci-pr-state{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:999px;background:rgba(16,185,129,.16);font-weight:600;color:var(--ci-green-soft)}
#ci-switch .ci-pr-state svg{width:14px;height:14px}
#ci-switch .ci-pr-meta code{padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.06);font-size:12px;color:#c9ced6}
#ci-switch .ci-pr-file{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;border-bottom:1px solid var(--ci-line);font-size:13px;line-height:20px;color:#c9ced6}
#ci-switch .ci-pr-file>span:first-child{display:inline-flex;align-items:center;gap:8px;min-width:0}
#ci-switch .ci-pr-file svg{flex:none;width:16px;height:16px;color:var(--ci-faint)}
#ci-switch .ci-pr-stat{display:inline-flex;gap:8px;font-size:12px;font-variant-numeric:tabular-nums}
#ci-switch .ci-pr-stat b{font-weight:600}
#ci-switch .ci-pr-add{color:var(--ci-green-soft)}
#ci-switch .ci-pr-del{color:#f19a9a}
#ci-switch .ci-pr-diff{padding:14px 0 16px}
#ci-switch figcaption{display:flex;gap:10px;padding:16px 24px;border-top:1px solid var(--ci-line);font-size:13px;line-height:20px;color:var(--ci-muted)}
#ci-switch figcaption svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ci-faint)}
#ci-switch figcaption code,#ci-switch .ci-heading code{font-size:.92em;color:#c9ced6}

/* FAQ: native details, styled like the homepage FAQ. */
#ci-faq .ci-faq{max-width:820px;margin:0 auto;border-top:1px solid var(--ci-line)}
#ci-faq .ci-faq details{border-bottom:1px solid var(--ci-line)}
#ci-faq .ci-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;list-style:none;cursor:pointer}
#ci-faq .ci-faq summary::-webkit-details-marker{display:none}
#ci-faq .ci-faq summary h3{font-size:16px;line-height:22px;font-weight:600;letter-spacing:-.015em;color:var(--ci-text)}
#ci-faq .ci-faq summary svg{flex:none;width:16px;height:16px;color:var(--ci-muted);transition:transform .2s ease}
#ci-faq .ci-faq details[open] summary svg{transform:rotate(180deg)}
#ci-faq .ci-faq p{padding:0 32px 22px 0;margin-top:-6px;font-size:14px;line-height:24px;color:#a0acae}
#ci-faq .ci-faq code{font-size:13px;color:var(--ci-text)}
#ci-faq .ci-heading{text-align:left;max-width:820px;margin-bottom:32px}

@media (max-width:1023px){
 #ci-hero{min-height:0;padding-top:120px!important}
 #ci-hero>.ci-hero-inner{grid-template-columns:minmax(0,1fr);gap:40px}
 #ci-hero .ci-lead, #ci-pricing .ci-calc{grid-template-columns:minmax(0,1fr)}
 #ci-pricing .ci-calc>div+div{border-left:0;border-top:1px solid var(--ci-line)}
 #ci-switch .ci-switch{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media (max-width:640px){
 .ci-page main>section{padding:72px 16px}
 #ci-hero{padding:112px 16px 88px!important}
 #ci-hero h1{font-size:36px}
 #ci-hero .trust-proof{padding-right:14px}
 #ci-hero .trust-proof-text{font-size:13px}
 .ci-page .ci-heading h2{font-size:28px;line-height:36px}
 .ci-page .ci-heading{margin-bottom:32px}
 .ci-page .ci-diff{font-size:12px;line-height:24px}
 .ci-page .ci-diff>span{grid-template-columns:32px 18px max-content}
 #ci-pricing .ci-calc>div{padding:24px 20px}
 #ci-pricing .ci-total strong{font-size:40px}
 #ci-pricing .ci-row{grid-template-columns:minmax(0,1fr) 72px 34px;row-gap:8px;padding:8px 10px}
 #ci-pricing .ci-row-name{grid-column:1;grid-row:1}
 #ci-pricing .ci-row-track{grid-column:1/-1;grid-row:2}
 #ci-pricing .ci-row strong{grid-column:2;grid-row:1}
 #ci-pricing .ci-row-x{grid-column:3;grid-row:1}
 #ci-switch .ci-steps{gap:32px;--ci-step-gap:32px}
 #ci-switch .ci-pr-head,#ci-switch .ci-pr-file,#ci-switch figcaption{padding-left:16px;padding-right:16px}
 #ci-faq .ci-faq p{padding-right:0}
}
@media (max-width:560px){
 #ci-pricing .ci-tiers{grid-template-columns:minmax(0,1fr)}
 #ci-pricing .ci-tier{padding:12px 14px}
 #ci-pricing .ci-tier-rows{flex-direction:row;flex-wrap:wrap;column-gap:12px;row-gap:4px}
 #ci-pricing .ci-tier-price{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
 #ci-pricing .ci-row-track span{transition:none}
}