/* Comparison pages: /compare/ (hub) and /compare/docsend/, /compare/storydoc/,
   /compare/gamma/. One stylesheet for the four pages, every class carries cp-.
   Hero visuals: cp-hx (hub), cp-hd (DocSend), cp-hs (Storydoc), cp-hg (Gamma).
   Shared parts (ui-win, ui-head, ui-chip, ui-tag, av, now, live, mini-deck,
   cap-grid, related, faq, steps) come from /assets/site/site.css. Panel UI
   uses px and reflows with container queries; paper slides and capability
   fragments scale as one picture with container units. Loops animate
   transform and opacity only, stop off screen (site.js) and are static under
   reduced motion. */

/* =========================================================================
   Shared text pieces
   ========================================================================= */

/* Source reference: a small numbered pill that jumps to the sources list */
.cp-sup{display:inline-flex;gap:3px;margin-left:4px;vertical-align:.18em;line-height:1}
.cp-sup a{position:relative;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:rgba(183,168,255,.12);box-shadow:inset 0 0 0 1px rgba(183,168,255,.3);font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--lav);text-decoration:none;transition:background-color .2s,color .2s}
.cp-sup a::after{content:"";position:absolute;inset:-12px -2px}
.cp-sup a:hover{background:rgba(183,168,255,.24);color:var(--paper)}

/* "Not stated": what an official page does not say, marked as such */
.cp-ns{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;border:1px dashed rgba(183,168,255,.4);font:500 13px/1 var(--sans);color:var(--muted);white-space:nowrap;vertical-align:.08em}

.cp-who{display:grid;gap:1px;min-width:0}
.cp-who > b{display:flex;align-items:center;gap:6px;min-width:0;font-weight:500;font-size:15px;line-height:1.3;color:var(--paper)}
.cp-who > span{min-width:0;font-size:13px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.cp-ver{position:relative;flex:none;display:inline-block;width:15px;height:15px;border-radius:50%;background:var(--lav)}
.cp-ver::before{content:"";position:absolute;left:4.2px;top:4.4px;width:6.4px;height:3.4px;border-left:1.7px solid var(--night);border-bottom:1.7px solid var(--night);transform:rotate(-45deg)}
.cp-ico{flex:none;width:16px;height:16px;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================
   Hub hero: a deck page measured like a website (cp-hx)
   ========================================================================= */
.cp-hx{container-name:cp-hx}
.cp-hx .ui-win{overflow:hidden}
.cp-hx .ui-head .ui-chip .av{width:20px;height:20px;font-size:11px;margin-left:-4px}
.cp-hx-body{display:grid;gap:14px;padding:16px}
.cp-hx-stage{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:12px}

/* Traction, page 2, as a paper slide */
.cp-hx-slide{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:10px;background:var(--paper);container-type:inline-size;box-shadow:0 22px 40px -22px rgba(0,0,0,.9)}
.cp-hx-eb{position:absolute;left:6cqw;top:6.5cqw;font:500 max(7px,2.6cqw)/1 var(--sans);letter-spacing:.14em;color:var(--violet)}
.cp-hx-big{position:absolute;left:5.4cqw;top:12cqw;font:600 17cqw/1 var(--display);letter-spacing:-.05em;color:var(--ink)}
.cp-hx-big em{font-style:normal;color:var(--violet)}
.cp-hx-lbl{position:absolute;left:6cqw;top:33cqw;font:500 max(7px,2.9cqw)/1.2 var(--sans);color:var(--ink-2)}
.cp-hx-stats{position:absolute;right:6cqw;top:13cqw;display:grid;gap:4.2cqw;width:31cqw}
.cp-hx-stat{display:grid;gap:1.2cqw;padding-top:2.2cqw;border-top:1px solid rgba(18,15,46,.14)}
.cp-hx-stat b{font:600 max(9px,5.4cqw)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.cp-hx-stat span{font:500 max(7px,2.5cqw)/1.2 var(--sans);color:var(--ink-2)}
.cp-hx-n{position:absolute;right:6cqw;bottom:5cqw;font:500 max(7px,2.4cqw)/1 var(--sans);letter-spacing:.12em;color:rgba(18,15,46,.45)}
.cp-hx-tag{position:absolute;left:6cqw;bottom:5cqw;display:inline-flex;align-items:center;gap:1.4cqw;height:max(16px,5.4cqw);padding:0 max(6px,2cqw);border-radius:999px;background:var(--ink);font:500 max(7px,2.4cqw)/1 var(--sans);color:var(--paper);white-space:nowrap}
.cp-hx-tag i{width:max(5px,1.4cqw);height:max(5px,1.4cqw);border-radius:50%;background:var(--lav)}

/* Scroll depth: a ruler beside the page */
.cp-hx-ruler{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;justify-items:center}
.cp-hx-track{position:relative;align-self:stretch;width:12px;overflow:hidden;border-radius:6px;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px var(--line)}
.cp-hx-track i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--lav),var(--violet));transform-origin:50% 0}
.cp-hx-ruler b{font:600 13px/1 var(--display);color:var(--paper);font-variant-numeric:tabular-nums}

/* Six facts, each one a small tile */
.cp-hx-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cp-hx-fact{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-areas:"ic k" "ic v";align-items:center;column-gap:10px;row-gap:3px;min-width:0;padding:10px 11px;border-radius:12px;background:rgba(183,168,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
.cp-hx-fact .cp-hx-ic{grid-area:ic;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px rgba(183,168,255,.22)}
.cp-hx-fact .cp-hx-ic svg{width:15px;height:15px;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cp-hx-fact > span:not(.cp-hx-ic){grid-area:k;min-width:0;overflow:hidden;font-size:13px;line-height:1.2;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.cp-hx-fact > b{grid-area:v;min-width:0;overflow:hidden;font:600 15px/1.2 var(--display);letter-spacing:-.01em;color:var(--paper);text-overflow:ellipsis;white-space:nowrap}

/* The notice readers see */
.cp-hx-notice{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(123,92,255,.12);box-shadow:inset 0 0 0 1px rgba(183,168,255,.26);font-size:13px;line-height:1.35;color:var(--paper)}
.cp-hx-notice .cp-ico{width:17px;height:17px}
.cp-hx-notice span{flex:1;min-width:0}
.cp-hx-notice b{flex:none;font-weight:500;color:var(--lav);white-space:nowrap}

@container cp-hx (max-width:519px){
  .cp-hx-body{padding:12px;gap:12px}
  .cp-hx-stage{grid-template-columns:minmax(0,1fr) 34px;gap:8px}
  .cp-hx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-hx-notice b{display:none}
}

/* =========================================================================
   Hub, essay: your website next to your pitch sent as a PDF (cp-gap)
   ========================================================================= */
.cp-gap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:stretch}
.cp-gap-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.cp-gap-k{display:flex;align-items:center;gap:10px;font:500 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
.cp-gap-k::after{content:"";flex:1;height:1px;background:var(--line)}
.cp-gap-side > .mock{flex:1;display:flex}
.cp-gap-side > .mock > .ui-win{flex:1;min-width:0}

/* Website analytics, the way every site already sees itself */
.cp-web{container-name:cp-web}
.cp-web .ui-win{display:flex;flex-direction:column;overflow:hidden}
.cp-web-body{flex:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:16px}
.cp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:14px;background:rgba(183,168,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
.cp-kpi{display:flex;flex-direction:column;gap:7px;min-width:0;padding:11px 14px 12px;font-size:13px;line-height:1.25;color:var(--muted)}
.cp-kpi + .cp-kpi{border-left:1px solid var(--line)}
.cp-kpi b{font:600 22px/1 var(--display);letter-spacing:-.02em;color:var(--paper);white-space:nowrap}
.cp-web-mid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px}
.cp-web-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 14px;border-radius:14px;background:rgba(18,15,46,.6);box-shadow:inset 0 0 0 1px var(--line)}
.cp-web-card .ui-k{display:flex;justify-content:space-between;gap:8px}
.cp-web-card .ui-k span{letter-spacing:0;text-transform:none;color:var(--muted)}
.cp-pages{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cp-pages li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"p t" "bar bar";column-gap:10px;row-gap:5px;font-size:13px;line-height:1.2;color:var(--paper)}
.cp-pages li > span{grid-area:p;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px}
.cp-pages li > b{grid-area:t;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.cp-pages li > i{grid-area:bar;position:relative;height:6px;overflow:hidden;border-radius:3px;background:rgba(183,168,255,.1)}
.cp-pages li > i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--lav));transform-origin:0 50%;transform:scaleX(var(--w))}
/* A heatmap thumbnail of the product page, with the 90% scroll line */
.cp-wheat{position:relative;flex:1;min-height:110px;overflow:hidden;border-radius:10px;background:var(--paper);container-type:inline-size}
.cp-wheat > i{position:absolute;left:8%;right:8%;height:5%;border-radius:99px;background:rgba(18,15,46,.14)}
.cp-wheat > i:nth-child(1){top:10%;right:44%;height:7%;background:rgba(18,15,46,.8)}
.cp-wheat > i:nth-child(2){top:22%;right:30%}
.cp-wheat > i:nth-child(3){top:31%;right:52%}
.cp-wheat > i:nth-child(4){top:46%;left:8%;right:56%;height:26%;border-radius:6%;background:rgba(123,92,255,.25)}
.cp-wheat > i:nth-child(5){top:46%;left:52%;right:8%;height:26%;border-radius:6%;background:rgba(123,92,255,.25)}
.cp-wheat .cp-hspot{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--d) * 1cqw);aspect-ratio:1;margin:calc(var(--d) * -.5cqw) 0 0 calc(var(--d) * -.5cqw);border-radius:50%;background:radial-gradient(closest-side,rgba(123,92,255,calc(var(--h) * .7)),rgba(123,92,255,0))}
.cp-wheat-fold{position:absolute;left:0;right:0;top:84%;border-top:1.5px dashed var(--violet)}
.cp-wheat-fold span{position:absolute;right:4%;top:-20px;padding:0 6px;border-radius:4px;background:var(--violet);font:500 11px/1.7 var(--sans);color:#fff;white-space:nowrap}
.cp-web-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.cp-cities{display:flex;flex-wrap:wrap;gap:6px}
.cp-devs{display:grid;gap:8px}
.cp-devs-bar{display:flex;height:8px;overflow:hidden;border-radius:4px;gap:2px}
.cp-devs-bar i{flex:var(--f);background:var(--lav)}
.cp-devs-bar i:nth-child(1){background:var(--violet)}
.cp-devs-bar i:nth-child(3){opacity:.45}
.cp-devs-key{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;line-height:1.3;color:var(--muted)}
.cp-devs-key b{font-weight:500;color:var(--paper)}

@container cp-web (max-width:539px){
  .cp-web-body{padding:12px;gap:12px}
  .cp-kpi{padding:10px 10px 11px}
  .cp-kpi b{font-size:18px}
  .cp-web-mid,.cp-web-foot{grid-template-columns:minmax(0,1fr)}
  .cp-wheat{min-height:0;aspect-ratio:16 / 9;flex:none}
}

/* The same company's pitch, sent as a file */
.cp-pdf{container-name:cp-pdf}
.cp-pdf .ui-win{display:flex;flex-direction:column}
.cp-mail{display:grid;gap:8px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cp-mail-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;font-size:13px;line-height:1.35}
.cp-mail-row span{color:var(--muted)}
.cp-mail-row b{min-width:0;overflow:hidden;font-weight:500;color:var(--paper);text-overflow:ellipsis;white-space:nowrap}
.cp-file{display:flex;align-items:center;gap:12px;margin-top:6px;padding:10px 12px;border-radius:12px;background:rgba(183,168,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
.cp-file-ic{position:relative;flex:none;width:30px;height:38px;border-radius:4px 10px 4px 4px;background:var(--paper)}
.cp-file-ic::after{content:"PDF";position:absolute;left:-5px;bottom:5px;padding:2px 4px;border-radius:3px;background:var(--violet);font:600 9px/1 var(--sans);letter-spacing:.04em;color:#fff}
.cp-file .cp-who b{font-size:14px}
.cp-after{flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 18px 18px}
.cp-after .ui-k{margin-bottom:4px}
.cp-after ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cp-after li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.3;color:var(--muted)}
.cp-after li i{flex:none;width:44px;height:8px;border-radius:4px;border:1px dashed rgba(183,168,255,.35)}
.cp-after-end{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:auto;padding-top:14px}
.cp-after-end span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:1px dashed rgba(183,168,255,.45);font:600 14px/1 var(--display);letter-spacing:-.01em;color:var(--paper)}
.cp-after-end svg{width:16px;height:16px;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Hub, essay: three short arguments, each with its sources */
.cp-more{margin-top:28px}
.cp-why{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cp-why li{display:flex;flex-direction:column;gap:12px;min-width:0;padding:26px 24px 28px;border-top:1px solid var(--line-2)}
.cp-why-n{font:600 15px/1 var(--display);color:var(--lav);font-variant-numeric:tabular-nums}
.cp-why h3{margin:0;font:600 var(--fs-h3)/1.3 var(--display);letter-spacing:-.02em;color:var(--paper)}
.cp-why p{font-size:16px;line-height:1.6}

/* =========================================================================
   Hub: what a website measures, and the same fact in a deck (cp-map)
   ========================================================================= */
.cp-map{container-name:cp-map}
.cp-map .ui-win{overflow:hidden}
.cp-map-cols{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:center;column-gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.cp-map-cols .ui-k:last-child{color:var(--paper)}
.cp-map-list{list-style:none;margin:0;padding:8px 18px 14px}
.cp-map-row{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:center;column-gap:12px;min-height:56px;padding:8px 0}
.cp-map-row + .cp-map-row{border-top:1px solid var(--line)}
.cp-map-web{min-width:0;font-size:14px;line-height:1.35;color:var(--muted)}
.cp-map-arrow{position:relative;height:1px;background:linear-gradient(90deg,rgba(183,168,255,.2),var(--lav));transform-origin:0 50%}
.cp-map-arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:1.5px solid var(--lav);border-right:1.5px solid var(--lav);transform:rotate(45deg)}
.cp-map-dt{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border-radius:12px;background:rgba(123,92,255,.12);box-shadow:inset 0 0 0 1px rgba(183,168,255,.26);font:500 14px/1.3 var(--sans);color:var(--paper)}
.cp-map-dt .cp-ico{width:16px;height:16px;flex:none}
.cp-map-dt > span{min-width:0}
.cp-map-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);background:rgba(183,168,255,.04);font-size:13px;line-height:1.4;color:var(--muted)}

@container cp-map (max-width:479px){
  .cp-map-cols{display:none}
  .cp-map-list{padding:6px 14px 10px}
  .cp-map-row{grid-template-columns:minmax(0,1fr);row-gap:6px;padding:12px 0}
  .cp-map-web::before{content:"Website: ";color:var(--lav)}
  .cp-map-arrow{display:none}
  .cp-map-foot{padding:12px 14px}
}

/* =========================================================================
   Hub: the three comparisons (cp-vs)
   ========================================================================= */
.cp-vs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cp-vs-card{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--radius);background:linear-gradient(180deg,var(--night-3),var(--night-2));border:1px solid var(--line);text-decoration:none;transition:transform .3s var(--ease),border-color .3s}
.cp-vs-card:hover{transform:translateY(-3px);border-color:rgba(183,168,255,.34)}
.cp-vs-visual{position:relative;aspect-ratio:3 / 2;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(70% 80% at 50% 46%,rgba(123,92,255,.2),transparent 72%),radial-gradient(rgba(183,168,255,.1) 1px,transparent 1.5px) 0 0 / 22px 22px}
.cp-vs-visual svg{position:absolute;inset:0;width:100%;height:100%}
.cp-vs-copy{flex:1;display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px}
.cp-vs-eb{font:500 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
.cp-vs-t{margin:0;font:600 21px/1.25 var(--display);letter-spacing:-.02em;color:var(--paper)}
.cp-vs-d{font-size:16px;line-height:1.55;color:var(--muted)}
.cp-vs-pts{display:grid;gap:12px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.cp-vs-pt{display:grid;gap:4px;font-size:16px;line-height:1.45;color:var(--paper)}
.cp-vs-pt > span{font:500 13px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lav)}
.cp-vs-go{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;font-size:16px;font-weight:500;color:var(--lav)}
.cp-vs-go::after{content:"→";transition:transform .3s var(--ease)}
.cp-vs-card:hover .cp-vs-go::after{transform:translateX(3px)}

/* =========================================================================
   Comparison pages: where they are strong (cp-strong)
   ========================================================================= */
.cp-strong{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--radius);background:linear-gradient(180deg,var(--night-3),var(--night-2));border:1px solid var(--line)}
.cp-strong li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;align-content:start;padding:30px 30px 32px}
.cp-strong li:nth-child(even){border-left:1px solid var(--line)}
.cp-strong li:nth-child(n+3){border-top:1px solid var(--line)}
.cp-strong .glyph{grid-row:span 2}
.cp-strong h3{margin:0;font:600 var(--fs-h3)/1.3 var(--display);letter-spacing:-.02em;color:var(--paper)}
.cp-strong p{margin-top:8px;font-size:16px;line-height:1.6}

/* =========================================================================
   Comparison pages: the table (cp-table)
   ========================================================================= */
.cp-tablewrap{border-radius:var(--radius);background:linear-gradient(180deg,var(--night-3),var(--night-2) 40%);border:1px solid var(--line-2);box-shadow:0 60px 100px -60px rgba(0,0,0,.9);overflow:hidden}
.cp-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:16px;line-height:1.55}
.cp-table col.cp-c-k{width:21%}
.cp-table thead th{padding:20px 24px;border-bottom:1px solid var(--line-2);font:600 17px/1.2 var(--display);letter-spacing:-.02em;color:var(--paper);text-align:left;vertical-align:bottom}
.cp-th-dt{display:inline-flex;align-items:center;gap:12px}
.cp-th-dt .dt{flex:none}
.cp-th-them{display:inline-flex;align-items:center;gap:12px}
.cp-th-them i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(183,168,255,.08);box-shadow:inset 0 0 0 1px var(--line-2);font:600 13px/1 var(--display);font-style:normal;color:var(--muted)}
.cp-table tbody th,.cp-table tbody td{padding:20px 24px;vertical-align:top;text-align:left}
.cp-table tbody tr + tr > *{border-top:1px solid var(--line)}
.cp-table tbody th{font-weight:400}
.cp-rowk{display:flex;align-items:center;gap:12px;font:600 16px/1.3 var(--display);letter-spacing:-.01em;color:var(--paper)}
.cp-table td{color:var(--muted)}
.cp-table td.cp-dt{color:var(--paper);background:linear-gradient(90deg,rgba(123,92,255,.1),rgba(123,92,255,.05));box-shadow:inset 1px 0 0 rgba(183,168,255,.18),inset -1px 0 0 rgba(183,168,255,.18)}
.cp-table thead th.cp-dt{background:rgba(123,92,255,.14);box-shadow:inset 1px 0 0 rgba(183,168,255,.18),inset -1px 0 0 rgba(183,168,255,.18),inset 0 2px 0 var(--violet)}
.cp-table td p + p{margin-top:8px}
.cp-checked{display:flex;align-items:flex-start;gap:12px;margin-top:18px;font-size:16px;line-height:1.55;color:var(--muted)}
.cp-checked .cp-ico{width:18px;height:18px;margin-top:3px}

@media (max-width:759px){
  .cp-table,.cp-table tbody,.cp-table tr,.cp-table th,.cp-table td{display:block;width:100%}
  .cp-table colgroup,.cp-table thead{display:none}
  .cp-table tbody tr{padding:18px 16px 16px}
  .cp-table tbody tr + tr{border-top:1px solid var(--line)}
  .cp-table tbody tr + tr > *{border-top:0}
  .cp-table tbody th{padding:0 0 12px}
  .cp-table tbody td{padding:12px 14px 14px;border-radius:14px}
  .cp-table tbody td + td{margin-top:8px}
  .cp-table td::before{content:attr(data-label);display:block;margin-bottom:6px;font:500 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lav)}
  .cp-table td:not(.cp-dt){background:rgba(183,168,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
  .cp-table td.cp-dt{box-shadow:inset 0 0 0 1px rgba(183,168,255,.26)}
}

/* =========================================================================
   Comparison pages: who should pick which (cp-pick)
   ========================================================================= */
.cp-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cp-pick-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:30px 30px 32px;border-radius:var(--radius);background:var(--night-2);border:1px solid var(--line)}
.cp-pick-card.is-dt{background:linear-gradient(180deg,rgba(123,92,255,.16),rgba(123,92,255,.04) 60%),var(--night-2);border-color:rgba(183,168,255,.3)}
.cp-pick-k{display:flex;align-items:center;gap:12px;font:500 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
.cp-pick-card h3{margin:6px 0 0;font:600 22px/1.25 var(--display);letter-spacing:-.02em;color:var(--paper)}
.cp-pick-card .ticks{margin-top:22px}

/* =========================================================================
   Sources (cp-src)
   ========================================================================= */
.cp-src{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cp-src li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:18px;align-items:start;padding:20px 4px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hd) + 24px);transition:background-color .4s}
.cp-src li:target{background:rgba(123,92,255,.12)}
.cp-src-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px rgba(183,168,255,.3);font:600 14px/1 var(--display);color:var(--lav);font-variant-numeric:tabular-nums}
.cp-src-t{font:600 17px/1.4 var(--display);letter-spacing:-.01em;color:var(--paper)}
.cp-src-t a{color:inherit;text-decoration:underline;text-decoration-color:rgba(183,168,255,.45);text-underline-offset:3px;transition:text-decoration-color .2s}
.cp-src-t a:hover{text-decoration-color:var(--lav)}
.cp-src-url{margin-top:4px;font-size:14px;line-height:1.45;color:var(--lav);overflow-wrap:anywhere}
.cp-src-use{margin-top:6px;font-size:16px;line-height:1.55}
.cp-src-use a{color:var(--lav);text-underline-offset:3px;overflow-wrap:anywhere}
.cp-src-date{justify-self:end;display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;background:rgba(183,168,255,.08);box-shadow:inset 0 0 0 1px var(--line-2);font:500 13px/1 var(--sans);color:var(--paper);white-space:nowrap}
.cp-src-wrap > .steps{margin-bottom:clamp(40px,5vw,64px)}

@media (max-width:699px){
  .cp-src li{grid-template-columns:32px minmax(0,1fr);column-gap:14px}
  .cp-src-date{grid-column:2;justify-self:start;margin-top:12px}
}

/* =========================================================================
   Capability fragments: where Decktrace is different (cp-cv)
   ========================================================================= */
.cp-cv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--q) * 12);padding:calc(var(--q) * 18)}
.cp-cv svg.cp-cv-svg{width:calc(var(--q) * 290);height:auto}
/* reading data: a slide with a heat spot and the facts under it */
.cp-cv-read{gap:calc(var(--q) * 10)}
.cp-cv-slide{position:relative;width:calc(var(--q) * 210);aspect-ratio:16 / 9;overflow:hidden;border-radius:calc(var(--q) * 8);background:var(--paper);box-shadow:0 calc(var(--q) * 16) calc(var(--q) * 30) calc(var(--q) * -18) rgba(0,0,0,.9)}
.cp-cv-slide > :where(span){position:absolute;font-family:var(--display);font-weight:600;color:var(--ink)}
.cp-cv-se{left:9%;top:12%;font:500 calc(var(--q) * 8)/1 var(--sans);letter-spacing:.14em;color:var(--violet)}
.cp-cv-sn{left:8%;top:26%;font-size:calc(var(--q) * 44);line-height:1;letter-spacing:-.05em}
.cp-cv-sn em{font-style:normal;color:var(--violet)}
.cp-cv-sl{right:8%;top:30%;width:34%;height:calc(var(--q) * 6);border-radius:9px;background:rgba(18,15,46,.2)}
.cp-cv-sl.is-2{top:44%;width:26%}
.cp-cv-sl.is-3{top:58%;width:30%}
.cp-cv-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--q) * 6);width:calc(var(--q) * 290)}
.cp-cv-facts span{display:inline-flex;align-items:center;gap:calc(var(--q) * 5);height:calc(var(--q) * 24);padding:0 calc(var(--q) * 9);border-radius:999px;background:rgba(18,15,46,.88);box-shadow:inset 0 0 0 1px var(--line-2);font:500 calc(var(--q) * 12)/1 var(--sans);color:var(--paper);white-space:nowrap}
.cp-cv-facts span b{font-weight:500;color:var(--lav)}
/* questions: a private thread on a page */
.cp-cv-q{gap:calc(var(--q) * 8)}
.cp-cv-qtag{display:inline-flex;align-items:center;gap:calc(var(--q) * 6);height:calc(var(--q) * 24);padding:0 calc(var(--q) * 10);border-radius:999px;background:rgba(183,168,255,.12);box-shadow:inset 0 0 0 1px rgba(183,168,255,.3);font:500 calc(var(--q) * 12)/1 var(--sans);color:var(--paper);white-space:nowrap}
.cp-cv-bub{width:calc(var(--q) * 270);padding:calc(var(--q) * 11) calc(var(--q) * 13);border-radius:calc(var(--q) * 14) calc(var(--q) * 14) calc(var(--q) * 14) calc(var(--q) * 4);background:rgba(18,15,46,.92);box-shadow:inset 0 0 0 1px var(--line-2);font:400 calc(var(--q) * 12.5)/1.45 var(--sans);color:var(--paper)}
.cp-cv-bub b{display:block;margin-bottom:calc(var(--q) * 4);font:500 calc(var(--q) * 11.5)/1.2 var(--sans);color:var(--lav)}
.cp-cv-bub.is-me{align-self:center;margin-left:calc(var(--q) * 40);width:calc(var(--q) * 230);border-radius:calc(var(--q) * 14) calc(var(--q) * 14) calc(var(--q) * 4) calc(var(--q) * 14);background:var(--violet);box-shadow:none;color:#fff}
.cp-cv-bub.is-me b{color:rgba(255,255,255,.8)}
/* languages: one link, versions you approve */
.cp-cv-lang{gap:calc(var(--q) * 7)}
.cp-cv-link{display:inline-flex;align-items:center;gap:calc(var(--q) * 7);height:calc(var(--q) * 26);padding:0 calc(var(--q) * 12);border-radius:999px;background:var(--violet);font:500 calc(var(--q) * 12)/1 var(--sans);color:#fff;white-space:nowrap}
.cp-cv-link svg{width:calc(var(--q) * 13);height:calc(var(--q) * 13);fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.cp-cv-lrow{display:grid;grid-template-columns:calc(var(--q) * 34) minmax(0,1fr) auto;align-items:center;gap:calc(var(--q) * 10);width:calc(var(--q) * 250);padding:calc(var(--q) * 7) calc(var(--q) * 10);border-radius:calc(var(--q) * 12);background:rgba(18,15,46,.88);box-shadow:inset 0 0 0 1px var(--line)}
.cp-cv-code{display:grid;place-items:center;height:calc(var(--q) * 22);border-radius:calc(var(--q) * 6);background:rgba(183,168,255,.14);font:600 calc(var(--q) * 11)/1 var(--display);letter-spacing:.06em;color:var(--paper)}
.cp-cv-lname{font:500 calc(var(--q) * 12.5)/1.2 var(--sans);color:var(--paper)}
.cp-cv-st{display:inline-flex;align-items:center;gap:calc(var(--q) * 5);font:500 calc(var(--q) * 11.5)/1 var(--sans);color:var(--lav);white-space:nowrap}
.cp-cv-st.is-ok::before{content:"";width:calc(var(--q) * 8);height:calc(var(--q) * 8);border-radius:50%;background:var(--lav)}
.cp-cv-lrow.is-more .cp-cv-lname{color:var(--muted)}
.cp-cv-lrow.is-more .soon{margin-left:0}
.cp-cv-st.is-draft{color:var(--muted)}
.cp-cv-st.is-draft::before{content:"";width:calc(var(--q) * 8);height:calc(var(--q) * 8);border-radius:50%;border:1px dashed var(--muted)}
/* suggestions: Next version, and Next reply marked coming soon */
.cp-cv-sg{gap:calc(var(--q) * 8)}
.cp-cv-card{display:grid;gap:calc(var(--q) * 5);width:calc(var(--q) * 270);padding:calc(var(--q) * 11) calc(var(--q) * 13);border-radius:calc(var(--q) * 14);background:rgba(18,15,46,.92);box-shadow:inset 0 0 0 1px var(--line-2)}
.cp-cv-ct{display:inline-flex;align-items:center;gap:calc(var(--q) * 6);font:500 calc(var(--q) * 11)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lav)}
.cp-cv-ct svg{width:calc(var(--q) * 13);height:calc(var(--q) * 13)}
.cp-cv-card b{font:600 calc(var(--q) * 13.5)/1.3 var(--display);letter-spacing:-.01em;color:var(--paper)}
.cp-cv-card span{font-size:calc(var(--q) * 11.5);line-height:1.4;color:var(--muted)}
.cp-cv .soon{margin-left:calc(var(--q) * 7);padding:calc(var(--q) * 2) calc(var(--q) * 7);font-size:max(7.5px,calc(var(--q) * 10));line-height:1.2;letter-spacing:0}
.cp-cv-card.is-v{box-shadow:inset 0 0 0 1px rgba(183,168,255,.45),0 0 0 calc(var(--q) * 4) rgba(123,92,255,.12)}
/* access: three options for each link */
.cp-cv-acc{gap:calc(var(--q) * 7)}
.cp-cv-opt{display:grid;grid-template-columns:calc(var(--q) * 18) minmax(0,1fr);align-items:center;gap:calc(var(--q) * 10);width:calc(var(--q) * 260);padding:calc(var(--q) * 10) calc(var(--q) * 12);border-radius:calc(var(--q) * 12);background:rgba(18,15,46,.88);box-shadow:inset 0 0 0 1px var(--line);font:500 calc(var(--q) * 12.5)/1.25 var(--sans);color:var(--paper)}
.cp-cv-opt i{width:calc(var(--q) * 18);height:calc(var(--q) * 18);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--q) * 1.5) rgba(183,168,255,.55)}
.cp-cv-opt.is-on{box-shadow:inset 0 0 0 1px rgba(183,168,255,.55),0 0 0 calc(var(--q) * 4) rgba(123,92,255,.14)}
.cp-cv-opt.is-on i{background:radial-gradient(circle,var(--paper) 0 calc(var(--q) * 3.5),var(--violet) calc(var(--q) * 4))}
.cp-cv-opt small{display:block;margin-top:calc(var(--q) * 2);font-size:calc(var(--q) * 11);color:var(--muted)}

/* =========================================================================
   DocSend page hero: your file, brought in as a web deck (cp-hd)
   One picture that scales with its container (--u = 1/600 of the width).
   ========================================================================= */
.cp-hd{--u:calc(100cqw / 600)}
.cp-hd-stage{position:relative;aspect-ratio:600 / 460}
.cp-hd-file{position:absolute;left:0;top:0;width:calc(var(--u) * 232);padding:calc(var(--u) * 16);border-radius:calc(var(--u) * 18);background:linear-gradient(180deg,var(--night-3),var(--night-2));border:1px solid var(--line-2);box-shadow:0 calc(var(--u) * 40) calc(var(--u) * 70) calc(var(--u) * -40) rgba(0,0,0,.9)}
.cp-hd-pages{position:relative;height:calc(var(--u) * 150)}
.cp-hd-pg{position:absolute;left:calc(var(--o) * var(--u) * 12);top:calc(var(--o) * var(--u) * 10);width:calc(var(--u) * 172);aspect-ratio:16 / 9;overflow:hidden;border-radius:calc(var(--u) * 5);background:var(--paper);box-shadow:0 calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * -10) rgba(0,0,0,.8)}
.cp-hd-pg svg{width:100%;height:100%}
.cp-hd-fname{display:flex;align-items:center;gap:calc(var(--u) * 10);margin-top:calc(var(--u) * 12)}
.cp-hd-fname .cp-file-ic{width:calc(var(--u) * 26);height:calc(var(--u) * 32)}
.cp-hd-fname .cp-file-ic::after{font-size:max(6px,calc(var(--u) * 8))}
.cp-hd-fname span{display:grid;gap:calc(var(--u) * 3);min-width:0}
.cp-hd-fname b{overflow:hidden;font:500 max(8px,calc(var(--u) * 13))/1.2 var(--sans);color:var(--paper);text-overflow:ellipsis;white-space:nowrap}
.cp-hd-fname small{font-size:max(7.5px,calc(var(--u) * 12));line-height:1.2;color:var(--muted)}
.cp-hd-paths{display:grid;gap:calc(var(--u) * 7);margin-top:calc(var(--u) * 14)}
.cp-hd-path{display:grid;grid-template-columns:calc(var(--u) * 14) minmax(0,1fr);align-items:center;gap:calc(var(--u) * 9);padding:calc(var(--u) * 8) calc(var(--u) * 10);border-radius:calc(var(--u) * 10);background:rgba(183,168,255,.05);box-shadow:inset 0 0 0 1px var(--line);font:500 max(7.5px,calc(var(--u) * 12))/1.2 var(--sans);color:var(--muted)}
.cp-hd-path i{width:calc(var(--u) * 14);height:calc(var(--u) * 14);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--u) * 1.5) rgba(183,168,255,.5)}
.cp-hd-path > span{min-width:0}
.cp-hd-path .soon{display:block;width:max-content;margin:calc(var(--u) * 4) 0 0;padding:calc(var(--u) * 2) calc(var(--u) * 7);font-size:max(7px,calc(var(--u) * 10));line-height:1.2}
.cp-hd-path.is-on{background:rgba(123,92,255,.16);box-shadow:inset 0 0 0 1px rgba(183,168,255,.5);color:var(--paper)}
.cp-hd-path.is-on i{background:radial-gradient(circle,var(--paper) 0 calc(var(--u) * 2.6),var(--violet) calc(var(--u) * 3))}
.cp-hd-flow{position:absolute;left:calc(var(--u) * 246);top:calc(var(--u) * 150);width:calc(var(--u) * 100);height:calc(var(--u) * 2);background:linear-gradient(90deg,rgba(183,168,255,.15),var(--lav));transform-origin:0 50%}
.cp-hd-flow::after{content:"";position:absolute;right:0;top:calc(var(--u) * -4);width:calc(var(--u) * 10);height:calc(var(--u) * 10);border-top:calc(var(--u) * 2) solid var(--lav);border-right:calc(var(--u) * 2) solid var(--lav);transform:rotate(45deg)}
.cp-hd-flow span{position:absolute;left:50%;bottom:calc(var(--u) * 10);transform:translateX(-50%);display:inline-flex;align-items:center;height:calc(var(--u) * 24);padding:0 calc(var(--u) * 10);border-radius:999px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-2);font:500 max(7.5px,calc(var(--u) * 12))/1 var(--sans);color:var(--paper);white-space:nowrap}
.cp-hd-flow i{position:absolute;left:0;top:calc(var(--u) * -3);width:calc(var(--u) * 8);height:calc(var(--u) * 8);border-radius:50%;background:var(--paper);opacity:0}
/* the phone: the uploaded PDF, kept page by page */
.cp-hd-phone{position:absolute;left:calc(var(--u) * 362);top:0;width:calc(var(--u) * 210);height:calc(var(--u) * 420);padding:calc(var(--u) * 8);border-radius:calc(var(--u) * 34);background:#06051a;box-shadow:inset 0 0 0 calc(var(--u) * 2) rgba(183,168,255,.32),0 calc(var(--u) * 50) calc(var(--u) * 80) calc(var(--u) * -40) rgba(0,0,0,.95)}
.cp-hd-screen{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--u) * 27);background:var(--paper)}
.cp-hd-status{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:calc(var(--u) * 30);background:var(--paper);padding:0 calc(var(--u) * 18);font:600 max(6px,calc(var(--u) * 10))/1 var(--sans);color:var(--ink)}
.cp-hd-status i{width:calc(var(--u) * 56);height:calc(var(--u) * 14);border-radius:99px;background:#06051a}
.cp-hd-col{position:absolute;left:0;right:0;top:calc(var(--u) * 30);display:flex;flex-direction:column;gap:calc(var(--u) * 6);padding:calc(var(--u) * 10) calc(var(--u) * 16)}
.cp-hd-pn{font:500 max(6px,calc(var(--u) * 9))/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.cp-hd-card{display:block;aspect-ratio:16 / 9;overflow:hidden;border-radius:calc(var(--u) * 6);background:var(--paper);box-shadow:0 0 0 1px rgba(18,15,46,.16),0 calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * -8) rgba(18,15,46,.4)}
.cp-hd-card svg{display:block;width:100%;height:100%}
.cp-hd-depth{position:absolute;right:calc(var(--u) * 5);top:calc(var(--u) * 40);bottom:calc(var(--u) * 40);width:calc(var(--u) * 4);border-radius:9px;background:rgba(18,15,46,.08)}
.cp-hd-depth i{position:absolute;left:0;right:0;top:0;height:62%;border-radius:inherit;background:var(--violet);transform-origin:50% 0}
/* the owner's view of that read */
.cp-hd-trace{position:absolute;left:0;top:calc(var(--u) * 336);width:calc(var(--u) * 334);padding:calc(var(--u) * 14) calc(var(--u) * 16);border-radius:calc(var(--u) * 18);background:rgba(18,15,46,.96);border:1px solid var(--line-2);box-shadow:0 calc(var(--u) * 30) calc(var(--u) * 60) calc(var(--u) * -30) rgba(0,0,0,.95)}
.cp-hd-trace-top{display:flex;align-items:center;gap:calc(var(--u) * 10)}
.cp-hd-trace-top .av{width:calc(var(--u) * 30);height:calc(var(--u) * 30);font-size:max(8px,calc(var(--u) * 13))}
.cp-hd-trace-top .cp-who b{font-size:max(8px,calc(var(--u) * 14))}
.cp-hd-trace-top .cp-who span{font-size:max(7.5px,calc(var(--u) * 12))}
.cp-hd-trace-top .cp-ver{width:max(9px,calc(var(--u) * 14));height:max(9px,calc(var(--u) * 14))}
.cp-hd-trace-top .cp-ver::before{left:28%;top:29%;width:42%;height:22%;border-left-width:max(1px,calc(var(--u) * 1.6));border-bottom-width:max(1px,calc(var(--u) * 1.6))}
.cp-hd-when{margin-left:auto;display:inline-flex;align-items:center;gap:calc(var(--u) * 6);font:500 max(7.5px,calc(var(--u) * 12))/1 var(--sans);color:var(--lav);white-space:nowrap}
.cp-hd-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * 6);margin-top:calc(var(--u) * 12)}
.cp-hd-facts span{display:grid;gap:calc(var(--u) * 4);padding:calc(var(--u) * 7) calc(var(--u) * 8);border-radius:calc(var(--u) * 10);background:rgba(183,168,255,.06);box-shadow:inset 0 0 0 1px var(--line);font-size:max(7px,calc(var(--u) * 11));line-height:1.2;color:var(--muted)}
.cp-hd-facts b{font:600 max(8px,calc(var(--u) * 14))/1.1 var(--display);color:var(--paper)}

/* =========================================================================
   Storydoc page hero: one link, English and Turkish, a question on the page (cp-hs)
   ========================================================================= */
.cp-hs{container-name:cp-hs}
.cp-hs .ui-win{overflow:hidden}
.cp-hs-body{display:grid;grid-template-columns:minmax(0,1fr) 214px;gap:16px;padding:16px}
.cp-hs-read{display:flex;flex-direction:column;gap:12px;min-width:0}
.cp-hs-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cp-hs-bar .ui-k{color:var(--muted)}
.cp-hs-pick{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 6px;border-radius:999px;background:var(--violet);font:500 13px/1 var(--sans);color:#fff;white-space:nowrap}
.cp-hs-pick i{display:grid;place-items:center;height:20px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.2);font:600 11px/1 var(--display);letter-spacing:.06em}
.cp-hs-pick svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cp-hs-slide{position:relative;aspect-ratio:16 / 10;overflow:hidden;border-radius:10px;background:var(--paper);container-type:inline-size;box-shadow:0 22px 40px -22px rgba(0,0,0,.9)}
.cp-hs-slide::before{content:"";position:absolute;right:-12cqw;top:-18cqw;width:62cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(183,168,255,.7),rgba(183,168,255,.2) 70%,transparent)}
.cp-hs-slide::after{content:"";position:absolute;right:8cqw;top:12cqw;width:20cqw;aspect-ratio:1;border-radius:50%;background:var(--violet)}
.cp-hs-eb{position:absolute;left:7cqw;top:9cqw;font:500 max(7px,2.6cqw)/1 var(--sans);letter-spacing:.14em;color:var(--violet)}
.cp-hs-t{position:absolute;left:7cqw;top:29cqw;width:58cqw;font:600 max(10px,6.6cqw)/1.06 var(--display);letter-spacing:-.04em;color:var(--ink)}
.cp-hs-s{position:absolute;left:7cqw;top:50cqw;font:500 max(7px,2.9cqw)/1.2 var(--sans);color:var(--ink-2)}
.cp-hs-n{position:absolute;right:6cqw;bottom:5cqw;font:500 max(7px,2.4cqw)/1 var(--sans);letter-spacing:.12em;color:rgba(18,15,46,.45)}
.cp-hs-q{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:12px;border-radius:14px;background:rgba(18,15,46,.6);box-shadow:inset 0 0 0 1px var(--line)}
.cp-hs-q .av{width:28px;height:28px;font-size:12px}
.cp-hs-q-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;line-height:1.3;color:var(--muted)}
.cp-hs-q-top b{font-weight:500;color:var(--paper)}
.cp-hs-q p + p{margin-top:4px;font-size:14px;line-height:1.45;color:var(--paper)}
.cp-hs-langs{display:flex;flex-direction:column;gap:6px;min-width:0}
.cp-hs-langs .ui-k{margin-bottom:4px}
.cp-hs-lrow{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-areas:"c n" "c s";align-items:center;column-gap:10px;row-gap:2px;padding:7px 10px;border-radius:12px;background:rgba(183,168,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.cp-hs-lrow.is-on{background:rgba(123,92,255,.16);box-shadow:inset 0 0 0 1px rgba(183,168,255,.5)}
.cp-hs-code{grid-area:c;display:grid;place-items:center;height:28px;border-radius:8px;background:rgba(183,168,255,.12);font:600 12px/1 var(--display);letter-spacing:.06em;color:var(--paper)}
.cp-hs-lrow.is-on .cp-hs-code{background:var(--violet);color:#fff}
.cp-hs-ln{grid-area:n;min-width:0;overflow:hidden;font:500 14px/1.2 var(--sans);color:var(--paper);text-overflow:ellipsis;white-space:nowrap}
.cp-hs-st{grid-area:s;display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1.2;color:var(--lav)}
.cp-hs-st::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--lav)}
.cp-hs-lrow.is-more{background:transparent}
.cp-hs-lrow.is-more .cp-hs-ln{color:var(--muted)}
.cp-hs-st.is-soon::before{display:none}
.cp-hs-st .soon{margin-left:0}
.cp-hs-st.is-src{color:var(--muted)}
.cp-hs-st.is-src::before{background:var(--muted)}
.cp-hs-st.is-draft{color:var(--muted)}
.cp-hs-st.is-draft::before{background:none;box-shadow:inset 0 0 0 1px var(--muted)}

@container cp-hs (max-width:579px){
  .cp-hs-body{grid-template-columns:minmax(0,1fr) 176px;padding:12px;gap:12px}
}
@container cp-hs (max-width:459px){
  .cp-hs-body{grid-template-columns:minmax(0,1fr);padding:12px;gap:14px}
  .cp-hs-langs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .cp-hs-langs .ui-k,.cp-hs-lrow.is-more{grid-column:1 / -1}
  .cp-hs-langs .ui-k{margin-bottom:0}
}

/* =========================================================================
   Gamma page hero: what happens after you send (cp-hg)
   ========================================================================= */
.cp-hg{container-name:cp-hg}
.cp-hg-loop{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px;padding:6px}
.cp-hg-loop::before{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:radial-gradient(closest-side,rgba(123,92,255,.5),rgba(123,92,255,0))}
.cp-hg-hub{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.cp-hg-hub svg{width:18px;height:18px;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cp-hg-step{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border-radius:18px;background:linear-gradient(180deg,var(--night-3),var(--night-2));border:1px solid var(--line-2);box-shadow:0 40px 70px -40px rgba(0,0,0,.9)}
.cp-hg-k{display:flex;align-items:center;gap:8px;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lav)}
.cp-hg-k i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(183,168,255,.14);font:600 12px/1 var(--display);letter-spacing:0;color:var(--paper);font-style:normal}
.cp-hg-step.is-1 .cp-hg-k i{background:var(--violet)}
/* connectors between the steps: right, down, left */
.cp-hg-step::after{content:"";position:absolute;background:linear-gradient(90deg,rgba(183,168,255,.2),var(--lav));transform-origin:0 50%}
.cp-hg-step.is-1::after{left:100%;top:50%;width:40px;height:1.5px}
.cp-hg-step.is-2::after{left:50%;top:100%;width:1.5px;height:44px;background:linear-gradient(180deg,rgba(183,168,255,.2),var(--lav));transform-origin:50% 0}
.cp-hg-step.is-3::after{right:100%;top:50%;width:40px;height:1.5px;background:linear-gradient(270deg,rgba(183,168,255,.2),var(--lav));transform-origin:100% 50%}
.cp-hg-step.is-4::after{display:none}
/* order in the grid: 1 top left, 2 top right, 3 bottom right, 4 bottom left */
.cp-hg-step.is-3{grid-column:2;grid-row:2}
.cp-hg-step.is-4{grid-column:1;grid-row:2}
.cp-hg-deck{display:flex;align-items:center;gap:10px;min-width:0}
.cp-hg-deck .cp-who b{display:block;font-size:14px;line-height:1.3}
.cp-hg-row{display:flex;flex-wrap:wrap;gap:6px}
.cp-hg-row .ui-chip .cp-ver{width:13px;height:13px}
.cp-hg-row .ui-chip .cp-ver::before{left:3.6px;top:3.8px;width:5.6px;height:3px;border-left-width:1.5px;border-bottom-width:1.5px}
.cp-hg-bars{display:flex;align-items:flex-end;gap:5px;height:58px;padding-top:4px}
.cp-hg-bars i{position:relative;flex:1;height:calc(var(--h) * 100%);border-radius:5px 5px 2px 2px;background:rgba(183,168,255,.4);transform-origin:50% 100%}
.cp-hg-bars i.is-top{background:linear-gradient(180deg,var(--lav),var(--violet))}
.cp-hg-cap{display:flex;justify-content:space-between;gap:8px;font-size:13px;line-height:1.3;color:var(--muted)}
.cp-hg-cap b{font-weight:500;color:var(--paper);white-space:nowrap}
.cp-hg-bub{padding:10px 12px;border-radius:14px 14px 14px 4px;background:rgba(18,15,46,.8);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;line-height:1.45;color:var(--paper)}
.cp-hg-sg{display:grid;gap:6px;padding:10px 12px;border-radius:14px;background:rgba(123,92,255,.14);box-shadow:inset 0 0 0 1px rgba(183,168,255,.4)}
.cp-hg-sg b{font:600 14px/1.35 var(--display);letter-spacing:-.01em;color:var(--paper)}
.cp-hg-sg span{font-size:13px;line-height:1.4;color:var(--muted)}
.cp-hg-tag{display:inline-flex;align-items:center;gap:7px;font:500 13px/1 var(--sans);color:var(--lav)}
.cp-hg-tag svg{width:15px;height:15px}

@container cp-hg (max-width:439px){
  .cp-hg-loop{grid-template-columns:minmax(0,1fr);gap:28px;padding:0}
  .cp-hg-loop::before,.cp-hg-hub{display:none}
  .cp-hg-step.is-3,.cp-hg-step.is-4{grid-column:auto;grid-row:auto}
  .cp-hg-step.is-3{order:3}
  .cp-hg-step.is-4{order:4}
  .cp-hg-step::after,.cp-hg-step.is-1::after,.cp-hg-step.is-2::after,.cp-hg-step.is-3::after{left:50%;right:auto;top:100%;width:1.5px;height:28px;background:linear-gradient(180deg,rgba(183,168,255,.2),var(--lav));transform-origin:50% 0}
}

/* =========================================================================
   Widths
   ========================================================================= */
@media (min-width:1024px){
  .cp-vs-d{min-height:calc(1.55em * 3)}
}
@media (max-width:1099px){
  .cp-vs-t{font-size:19px}
}
@media (max-width:1023px){
  .cp-why{grid-template-columns:minmax(0,1fr);gap:0}
  .cp-why li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:10px;padding:24px 4px 26px}
  .cp-why-n{grid-row:span 2;padding-top:4px}
  .cp-why p{max-width:44em}
  .cp-vs{grid-template-columns:minmax(0,1fr)}
  .cp-vs-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .cp-vs-visual{aspect-ratio:auto;min-height:100%;border-bottom:0;border-right:1px solid var(--line)}
}
@media (max-width:899px){
  .cp-gap{grid-template-columns:minmax(0,1fr);gap:36px}
  .cp-pick{grid-template-columns:minmax(0,1fr)}
  .cp-strong{grid-template-columns:minmax(0,1fr)}
  .cp-strong li:nth-child(even){border-left:0}
  .cp-strong li:nth-child(n+2){border-top:1px solid var(--line)}
}
@media (max-width:599px){
  .cp-why li{grid-template-columns:minmax(0,1fr)}
  .cp-why-n{grid-row:auto;padding-top:0}
  .cp-vs-card{display:flex}
  .cp-vs-visual{aspect-ratio:3 / 2;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .cp-vs-copy{padding:20px 20px 22px}
  .cp-strong li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:24px 20px 26px}
  .cp-strong .glyph{width:40px;height:40px}
  .cp-pick-card{padding:24px 20px 26px}
  .cp-checked{font-size:16px}
}

/* =========================================================================
   Motion: entrances when a visual reveals, loops while it is on screen
   ========================================================================= */
.js .cp-gap .cp-after li{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(300ms + var(--k) * 120ms)}
.js .cp-gap.is-in .cp-after li{opacity:1;transform:none}
.js .cp-gap .cp-pages li > i::before{transform:scaleX(0);transition:transform .9s var(--ease);transition-delay:calc(250ms + var(--k) * 90ms)}
.js .cp-gap.is-in .cp-pages li > i::before{transform:scaleX(var(--w))}
.js .cp-map .cp-map-row{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(200ms + var(--k) * 110ms)}
.js .cp-map .cp-map-arrow{transform:scaleX(0);transition:transform .6s var(--ease);transition-delay:calc(420ms + var(--k) * 110ms)}
.js .is-in .cp-map .cp-map-row,.js .is-in.cp-map .cp-map-row{opacity:1;transform:none}
.js .is-in .cp-map .cp-map-arrow,.js .is-in.cp-map .cp-map-arrow{transform:none}

@keyframes cp-breathe{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
@keyframes cp-fill{from{transform:scaleY(0)}}
@keyframes cp-flow{0%{opacity:0;transform:translateX(0)}12%{opacity:1}78%{opacity:1;transform:translateX(calc(var(--u) * 90))}90%,100%{opacity:0;transform:translateX(calc(var(--u) * 90))}}
@keyframes cp-depth{0%,12%{transform:scaleY(.12)}60%,88%{transform:scaleY(1)}100%{transform:scaleY(.12)}}
@keyframes cp-colscroll{0%,12%{transform:translateY(0)}60%,88%{transform:translateY(calc(var(--u) * -70))}100%{transform:translateY(0)}}
@keyframes cp-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:no-preference){
  .cp-hx-fact{animation:intro .7s var(--ease) both;animation-delay:calc(560ms + var(--k) * 90ms)}
  .cp-hx-track i{animation:cp-fill 1.4s var(--ease) both;animation-delay:.6s}
  .cp-wheat .cp-hspot{animation:cp-breathe 6s ease-in-out infinite;animation-delay:calc(var(--k) * -1.7s)}
  .cp-hd-flow i{animation:cp-flow 3.2s var(--flip) infinite}
  .cp-hd-depth i{animation:cp-depth 9s var(--ease) infinite}
  .cp-hd-col{animation:cp-colscroll 9s var(--ease) infinite}
  .cp-hg-hub svg{animation:cp-spin 14s linear infinite}
  .cp-hg-step{animation:intro .7s var(--ease) both;animation-delay:calc(480ms + var(--k) * 160ms)}
}

@media (prefers-reduced-motion:reduce){
  .js .cp-gap .cp-after li,.js .cp-map .cp-map-row{opacity:1;transform:none}
  .js .cp-map .cp-map-arrow{transform:none}
  .js .cp-gap .cp-pages li > i::before{transform:scaleX(var(--w))}
}