/* About page: the founders' letter, set on one content width.
   Loaded after the site CSS and the landing CSS (for the embedded film, which is
   scoped to #cp-one). Every rule here is scoped to .ab; the header, footer and
   site tokens are untouched. Text and figures share the same left and right
   edges: a row is twelve columns, with copy beside the figure it refers to. */

.ab {
  --ab-ink:#e8ebef;
  --ab-line:#919db523;
  --ab-card:#181b21;
  --ab-card-line:#919db52c;
  --ab-accent:var(--cp-mint);
  --ab-leet:#e6be7c;
  --ab-design:#94bbeb;
  --ab-files:#e9a3b0;
  --ab-parts:#a8d4df;
  --ab-debug:#bfa6ee;
  --ab-review:#8fcebc;
  max-width:980px;
  margin-inline:auto;
  color:#c1c7cd;
  font-size:16px;
  line-height:1.7;
}
:where(.ab) :is(p,h1,h2,h3,ol,ul,figure) { margin:0; }
.ab-rose { --ab-accent:#e9a3b0; }
.ab-amber { --ab-accent:#e6be7c; }
.ab-mint { --ab-accent:var(--cp-mint); }

/* ---- Rows: one column on a phone, twelve from 900px ------------------------- */
.ab-row { display:grid; grid-template-columns:minmax(0,1fr); gap:26px 40px; }
.ab-col { min-width:0; }
.ab-col>*+* { margin-top:16px; }
.ab-point>*+*,.ab-close>*+* { margin-top:30px; }
@media (min-width:900px) {
  .ab-row { grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; }
  .ab-row-mid { align-items:center; }
  .ab-row-end { align-items:end; }
  .ab-c5 { grid-column:span 5; }
  .ab-c6 { grid-column:span 6; }
  .ab-c7 { grid-column:span 7; }
}

/* ---- Headings: white line, accent line ------------------------------------ */
.ab h1,.ab h2,.ab h3 { color:var(--cp-text); font-weight:550; text-wrap:balance; }
.ab h1 { font-size:clamp(30px,4.4vw,44px); line-height:1.08; letter-spacing:-.052em; }
.ab h2 { font-size:clamp(26px,3.5vw,36px); line-height:1.1; letter-spacing:-.048em; }
.ab h3 { font-size:clamp(22px,2.6vw,28px); line-height:1.15; letter-spacing:-.04em; }
.ab :is(h1,h2,h3) em { display:block; margin-top:4px; color:var(--ab-accent); font-style:normal; }
.ab .ab-eyebrow { margin-bottom:16px; color:var(--cp-mint); font:500 13px/1.5 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }

/* ---- Opening -------------------------------------------------------------- */
.ab .ab-turn { margin-top:22px; color:var(--ab-ink); font-size:21px; font-weight:500; letter-spacing:-.025em; line-height:1.3; }

/* ---- Numbered points ------------------------------------------------------ */
.ab-point { margin-top:52px; padding-top:48px; border-top:1px solid var(--ab-line); }
.ab-head { display:flex; align-items:flex-start; gap:16px; }
.ab-num { display:grid; place-items:center; flex:none; width:38px; height:38px; margin-top:2px; border:1px solid var(--ab-accent); border-radius:50%; color:var(--ab-accent); font:500 17px/1 'JetBrains Mono',monospace; }
.ab-point>.ab-head+.ab-lead { margin-top:18px; }
.ab .ab-lead { color:var(--ab-ink); font-size:19px; line-height:1.5; letter-spacing:-.012em; }
.ab-bright { color:var(--ab-ink); }
.ab .ab-payoff { padding-left:18px; border-left:2px solid var(--ab-accent); color:var(--ab-accent); font-size:20px; line-height:1.5; letter-spacing:-.012em; text-wrap:pretty; }
.ab-flow { columns:2 320px; column-gap:40px; }

/* ---- The one device: the checklist the "copilot" hands you ----------------- */
.ab-check { overflow:hidden; border:1px solid var(--ab-card-line); border-radius:15px; background:var(--ab-card); box-shadow:0 20px 55px #0003; }
.ab .ab-check-label { padding:12px 20px 11px; border-bottom:1px solid var(--ab-line); background:#20242c; color:var(--ab-accent); font:500 12px/1.5 'JetBrains Mono',monospace; letter-spacing:.09em; text-transform:uppercase; }
.ab-check ol { padding:0; list-style:none; }
.ab-check li { position:relative; padding:13px 20px 13px 52px; color:#ccd1d8; font-size:15px; line-height:1.55; }
.ab-check li+li { border-top:1px solid var(--ab-line); }
.ab-check li:before { content:""; position:absolute; left:20px; top:17px; width:16px; height:16px; border:1px solid var(--ab-accent); border-radius:4px; opacity:.85; }

/* ---- Figures: evidence and product screenshots ------------------------------ */
.ab-evidence a,.ab-shot a { display:block; overflow:hidden; border:1px solid var(--ab-card-line); border-radius:15px; background:var(--ab-card); box-shadow:0 20px 55px #0003; }
.ab-evidence img,.ab-shot img { display:block; width:100%; height:auto; }
.ab-evidence figcaption { margin-top:10px; color:#8c96a5; font-size:12.5px; line-height:1.6; }
.ab-evidence figcaption span { color:var(--cp-mint); white-space:nowrap; }
.ab-shot figcaption { margin-top:10px; color:var(--ab-ink); font-size:14.5px; font-weight:500; line-height:1.45; }
.ab-shot figcaption span { display:block; color:#8c96a5; font-size:13px; font-weight:400; }
.ab-shots { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
.ab-shots .ab-shot a { aspect-ratio:4 / 5; }
.ab-shots .ab-shot img { height:100%; object-fit:cover; object-position:left top; }
@media (min-width:700px) {
  .ab-shots { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
}
.ab-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---- Then / now diagram ---------------------------------------------------- */
.ab-pies { display:grid; grid-template-columns:1fr; border:1px solid var(--ab-card-line); border-radius:15px; background:var(--ab-card); box-shadow:0 20px 55px #0003; }
.ab-panel { min-width:0; padding:24px 28px 30px; }
.ab-panel+.ab-panel { border-top:1px solid var(--ab-line); }
.ab .ab-panel-title { color:#a4aebb; font:500 12px/1.5 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.ab .ab-panel-sub { margin:3px 0 24px; color:var(--ab-ink); font-size:17px; font-weight:500; letter-spacing:-.015em; line-height:1.4; }
.ab-pie { display:grid; place-items:center; }
.ab-pie>* { grid-area:1 / 1; }
.ab-pie svg { display:block; width:170px; height:170px; }
.ab-pie path { stroke:var(--ab-card); stroke-width:2; stroke-linejoin:round; }
.ab-pie text { fill:#14171b; font:600 19px 'DM Sans',sans-serif; text-anchor:middle; letter-spacing:-.02em; }
.ab-s-leet { fill:var(--ab-leet); }
.ab-s-design { fill:var(--ab-design); }
.ab-s-files { fill:var(--ab-files); }
.ab-s-parts { fill:var(--ab-parts); }
.ab-s-debug { fill:var(--ab-debug); }
.ab-s-review { fill:var(--ab-review); }
/* Direct labels: three to the right of the pie, three to the left, each beside its slice. */
.ab .ab-keys { justify-self:stretch; display:grid; grid-template-columns:1fr 170px 1fr; grid-template-rows:repeat(3,minmax(60px,auto)); gap:8px 14px; align-items:center; padding:0; list-style:none; color:#c5ccd6; font-size:13.5px; line-height:1.35; pointer-events:none; }
.ab-keys li { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.ab-keys li:before { content:""; flex:none; width:9px; height:9px; margin-top:4px; border-radius:50%; background:var(--key); }
.ab-k-leet { --key:var(--ab-leet); }
.ab-k-design { --key:var(--ab-design); }
.ab-k-files { --key:var(--ab-files); }
.ab-k-parts { --key:var(--ab-parts); }
.ab-k-debug { --key:var(--ab-debug); }
.ab-k-review { --key:var(--ab-review); }
.ab-pie-now .ab-k-leet { grid-area:1 / 3; }
.ab-pie-now .ab-k-design { grid-area:2 / 3; }
.ab-pie-now .ab-k-files { grid-area:3 / 3; }
.ab-pie-now .ab-k-parts { grid-area:3 / 1; }
.ab-pie-now .ab-k-debug { grid-area:2 / 1; }
.ab-pie-now .ab-k-review { grid-area:1 / 1; }
.ab-pie-then .ab-k-leet { grid-area:2 / 3 / 4 / 4; }
.ab-pie-then .ab-k-design { grid-area:1 / 1 / 3 / 2; }
.ab-pie-now :is(.ab-k-parts,.ab-k-debug,.ab-k-review),.ab-pie-then .ab-k-design { flex-direction:row-reverse; text-align:right; }
.ab-figure figcaption { margin-top:13px; color:#8c96a5; font-size:12.5px; line-height:1.6; }

/* ---- What the interview demands: one column of ticks, three of crosses ----- */
.ab .ab-only-eyebrow { margin-bottom:10px; color:var(--cp-mint); font:500 12px/1.5 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.ab .ab-only-eyebrow+h3 { margin-top:0; }
.ab-only-table { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; border:1px solid var(--ab-card-line); border-radius:15px; background:var(--ab-card); box-shadow:0 20px 55px #0003; font-size:15px; line-height:1.6; }
.ab-only-col-us { width:15.5%; }
.ab-only-col-them { width:13.5%; }
.ab-only-table :is(th,td) { padding:0; }
.ab-only-table thead th { padding:17px 8px 15px; color:#8c96a5; font-size:11px; font-weight:400; line-height:1.4; text-align:center; vertical-align:middle; }
.ab-only-table thead th b { display:block; color:#c5ccd6; font-size:13px; font-weight:500; }
.ab-only-table thead th small { display:block; margin-top:2px; color:#8c96a5; font-size:10.5px; }
.ab-only-table thead th:first-child { padding-left:24px; color:#a4aebb; font:500 12px/1.5 'JetBrains Mono',monospace; letter-spacing:.07em; text-transform:uppercase; text-align:left; }
.ab-only-brand { color:#dff3ea; font-size:16px; font-weight:650; letter-spacing:-.4px; }
.ab-only-narrow { display:none; }
.ab-only-table tbody :is(th,td) { border-top:1px solid var(--ab-line); }
.ab-only-table tbody th { font-weight:400; text-align:left; }
.ab-only-row { position:relative; display:flex; align-items:center; gap:15px; min-height:64px; padding:10px 18px 11px 24px; color:#dfe4ea; }
.ab-only-row>span:first-child { position:relative; z-index:1; display:grid; place-items:center; flex:none; width:27px; height:27px; border:1px solid var(--row-accent); border-radius:50%; background:var(--ab-card); color:var(--row-accent); font:500 10px/1 'JetBrains Mono',monospace; }
.ab-only-row>span.ab-only-cont { border:0; background:transparent; }
.ab-only-cont:after { content:""; width:7px; height:7px; border:1px solid var(--row-accent); border-radius:50%; background:var(--ab-card); }
.ab-only-lead .ab-only-row:after,:is(.ab-only-follow,.ab-only-sub) .ab-only-row:before { content:""; position:absolute; left:37px; border-left:1px solid color-mix(in srgb,var(--row-accent) 50%,transparent); }
.ab-only-lead .ab-only-row:after { top:50%; bottom:-1px; }
:is(.ab-only-follow,.ab-only-sub) .ab-only-row:before { top:-1px; bottom:50%; }
.ab-only-text { display:grid; gap:1px; min-width:0; }
.ab-only-text strong { color:inherit; font-size:16px; font-weight:400; line-height:1.35; letter-spacing:-.01em; }
.ab-only-text small { color:#8f99a8; font-size:12.5px; line-height:1.45; text-wrap:balance; }
.ab-only-sky { --row-accent:#94bbeb; }
.ab-only-amber { --row-accent:#e6be7c; }
.ab-only-violet { --row-accent:#bfa6ee; }
.ab-only-mint { --row-accent:#8fcebc; }
.ab-only-rose { --row-accent:#e9a3b0; }
.ab-only-table td { text-align:center; vertical-align:middle; }
.ab-only-table .ab-only-us { background:#93cbb412; border-inline:1px solid #93cbb440; }
.ab-only-table thead .ab-only-us { box-shadow:inset 0 2px 0 #93cbb4; }
.ab-only-yes { display:inline-grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--cp-mint); color:#0f1a16; box-shadow:0 0 0 5px #93cbb41a; vertical-align:middle; }
.ab-only-yes svg { width:14px; height:14px; }
.ab-only-no { display:inline-grid; place-items:center; color:#b98580; vertical-align:middle; }
.ab-only-no svg { width:17px; height:17px; }
.ab-only-claimed { display:block; margin-top:1px; color:#9499a5; font-size:10px; line-height:1.3; }
.ab-only-table tbody tr.ab-only-sub :is(th,td) { border-top-color:#919db514; background:#15181d; }
.ab-only-table tbody tr.ab-only-sub .ab-only-us { background:#93cbb40d; }
.ab-only-sub .ab-only-row { min-height:35px; padding-block:5px; color:#bcc4cf; }
.ab-only-sub .ab-only-cont:after { width:5px; height:5px; background:var(--row-accent); }
.ab-only-sub .ab-only-text { font-size:13.5px; line-height:1.4; }
.ab-only-sub .ab-only-yes { width:17px; height:17px; background:transparent; border:1px solid #93cbb499; color:var(--cp-mint); box-shadow:none; }
.ab-only-sub .ab-only-yes svg { width:9px; height:9px; }
.ab-only-sub .ab-only-no svg { width:12px; height:12px; opacity:.75; }
.ab .ab-only-note { margin-top:13px; color:#838e9d; font-size:12px; line-height:1.6; }

/* ---- The landing film, alone ------------------------------------------------ */
.ab .ab-film { border-radius:15px; background:none; }

/* ---- Question put to the founder, and the founder's answer ----------------- */
.ab-q { padding:18px 22px 20px; border:1px solid var(--ab-card-line); border-radius:15px; background:#20242c; }
.ab .ab-qa-tag { display:flex; align-items:center; gap:10px; margin-bottom:9px; color:#9da7b7; font:500 12px/1.5 'JetBrains Mono',monospace; letter-spacing:.09em; text-transform:uppercase; }
.ab-qa-mark { display:grid; place-items:center; flex:none; width:24px; height:24px; border:1px solid #5b6472; border-radius:50%; color:#a4aebb; font-size:11px; letter-spacing:0; }
.ab .ab-q-text { color:var(--ab-ink); font-size:clamp(18px,2vw,20px); font-weight:500; line-height:1.35; letter-spacing:-.025em; }
.ab-a .ab-qa-tag { color:var(--cp-mint); }
.ab-a .ab-qa-mark { border-color:var(--cp-mint); background:var(--cp-mint); color:#0f1a16; font-weight:600; }
.ab .ab-a-text { color:var(--ab-ink); font-size:clamp(32px,4.6vw,46px); font-weight:550; line-height:1.04; letter-spacing:-.054em; }
.ab .ab-a-long .ab-a-text { font-size:clamp(22px,2.6vw,27px); line-height:1.22; letter-spacing:-.035em; text-wrap:balance; }

/* ---- Inline marks ---------------------------------------------------------- */
.ab-domain { color:var(--cp-mint); font:500 .92em/1 'JetBrains Mono',monospace; }

/* ---- Close ---------------------------------------------------------------- */
.ab-close { margin-top:52px; padding-top:48px; border-top:1px solid var(--ab-line); }
.ab .ab-close-lead { max-width:640px; color:var(--ab-ink); font-size:19px; line-height:1.5; letter-spacing:-.012em; }
.ab .ab-close-lead+.ab-close-line { margin-top:14px; }
.ab .ab-close-line { color:var(--cp-mint); font-size:clamp(30px,4.4vw,44px); font-weight:550; line-height:1.04; letter-spacing:-.055em; text-wrap:balance; }
.ab-actions { display:flex; flex-wrap:wrap; gap:12px; }
.ab-actions .cp-button { text-decoration:none; }

/* ---- From 900px the two pies sit side by side -------------------------------- */
@media (min-width:900px) {
  .ab-pies { grid-template-columns:1fr 1fr; }
  .ab-panel+.ab-panel { border-top:0; border-left:1px solid var(--ab-line); }
  .ab-figure figcaption { text-align:center; }
}

/* ---- Narrow: the table keeps one "everyone else" column ---------------------- */
@media (max-width:760px) {
  .ab-only-extra,.ab-only-wide { display:none; }
  .ab-only-narrow { display:inline; }
  .ab-only-col-us { width:92px; }
  .ab-only-col-them { width:62px; }
  .ab-only-brand { font-size:13px; letter-spacing:-.3px; }
  .ab-only-table thead th { padding:15px 4px 14px; }
  .ab-only-table thead th b { font-size:10.5px; }
  .ab-only-table thead th:first-child { padding-left:14px; font-size:10px; }
  .ab-only-row { gap:10px; min-height:58px; padding:9px 8px 10px 14px; }
  .ab-only-row>span:first-child { width:23px; height:23px; font-size:9px; }
  .ab-only-lead .ab-only-row:after,:is(.ab-only-follow,.ab-only-sub) .ab-only-row:before { left:25px; }
  .ab-only-text strong { font-size:13.5px; }
  .ab-only-text small { font-size:11.5px; text-wrap:pretty; }
  .ab-only-sub .ab-only-text { font-size:12.5px; }
  .ab-only-yes { width:24px; height:24px; }
  .ab-only-claimed { font-size:9px; }
}

/* ---- Phone: pie beside a plain key, labels at reading size ------------------ */
@media (max-width:559px) {
  .ab-point,.ab-close { margin-top:40px; padding-top:38px; }
  .ab .ab-lead,.ab .ab-close-lead { font-size:18px; }
  .ab .ab-payoff { font-size:18px; }
  .ab-check li { padding:13px 16px 13px 46px; }
  .ab-check li:before { left:16px; }
  .ab .ab-check-label { padding-inline:16px; }
  .ab-panel { padding:20px 18px 24px; }
  .ab .ab-panel-sub { margin-bottom:18px; }
  .ab-pie { grid-template-columns:118px minmax(0,1fr); gap:18px; place-items:center stretch; }
  .ab-pie>* { grid-area:auto; }
  .ab-pie svg { width:118px; height:118px; }
  .ab-pie text { font-size:24px; }
  .ab .ab-keys { display:block; font-size:15px; line-height:1.4; }
  .ab-keys li,.ab-pie-now :is(.ab-k-parts,.ab-k-debug,.ab-k-review),.ab-pie-then .ab-k-design { flex-direction:row; padding-block:4px; text-align:left; }
  .ab-keys li:before { margin-top:6px; }
  .ab-q { padding:16px 18px 18px; }
  .ab-actions .cp-button { flex:1 1 100%; }
}