/* ============================================================================
   Arrow x GitHub Copilot — AI Development Cost Signals landing pages
   Every colour, size, radius, weight, gradient and offset below is taken
   verbatim from the Figma file rhQIUAD0FzfNuRg17KbD8j, node 338:1090 ("FINAL").
   Node ids are quoted in comments so any value can be traced back.
   Desktop reference frame: 1504 px. Content grid: 1232 px centred.
   ========================================================================= */

/* ---------- fonts ---------------------------------------------------------- */
@font-face{font-family:'Arrow Display';src:url('/lp/assets/fonts/ArrowDisplayVF_W_Wght.woff2') format('woff2-variations'),url('/lp/assets/fonts/ArrowDisplayVF_W_Wght.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Arrow Display';src:url('/lp/assets/fonts/ArrowDisplayItVF_W_Wght.woff2') format('woff2-variations'),url('/lp/assets/fonts/ArrowDisplayItVF_W_Wght.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}

:root{
  /* grounds — 338:1091 / 338:1412 / 338:1318 / 338:1113 / 338:1296 */
  --bg:#0d1117;
  --panel:#110f10;
  --panel-70:rgba(17,15,16,.7);
  --panel-60:rgba(17,15,16,.6);
  --panel-40:rgba(17,15,16,.4);
  --card:#1a1719;
  --card-40:rgba(26,23,25,.4);
  --gh:#24292f;

  /* borders — 338:1095 / 338:1105 / 338:1096 */
  --line:rgba(50,47,49,.7);
  --line-60:rgba(50,47,49,.6);
  --line-42:rgba(50,47,49,.42);
  --input-line:#d0d7de;

  /* type colours — 338:1163 / 338:1104 / 338:1150 / 338:1103 / 338:1363 */
  --head:#e6edf3;
  --fg:#f3f1f2;
  --fg-bright:#fdfeff;
  --muted:#a3a0a2;
  --muted-2:#8b949e;

  /* accents */
  --green:#3fb950;      --green-2:#2ea043;  --green-3:#349d62;  --green-4:#3eb74f;
  --blue:#398ad6;       --blue-2:#499fe3;   --blue-3:#59c5f5;   --blue-4:#0969da;
  --purple:#dd7df7;     --purple-2:#bc8cff; --purple-3:#6e40c9;
  --amber:#f7c243;      --amber-2:#febc2e;
  --red:#e24942;        --red-2:#ff5f57;
  --teal:#1bd79e;       --dot-green:#28c840;

  /* effects — 338:1095 */
  --shadow:0 30px 60px -30px rgba(0,0,0,.6);
  --inset-hi:inset 0 1px 0 1px rgba(255,255,255,.06);

  /* families */
  --display:'Arrow Display','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;   /* Figma: Inter (dashboard mock + lead form) */
  /* Figma calls for 'Arrow Text'. Arrow only ever shipped Arrow Display as a webfont
     (arrow.com's font clientlib defines ArrowDisplay and nothing else, and sets its own
     body copy in it). Arrow Display is the sibling face: at Bold it matches Figma's
     Arrow Text to the pixel; at Regular it runs ~1.9% narrower with identical line breaks. */
  --atext:'Arrow Display','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --poppins:'Poppins',var(--text);
  --noto:'Noto Sans Display',var(--text);

  /* grid */
  --grid:1232px;        /* 338:1412 → 338:1433 : 400+16+400+16+400 */
  --gutter:24px;
  --indent:0px;         /* single left edge: every text block sits on the .wrap content box (frame x136) */
  --prose:1024px;       /* 338:1150 / 338:1224 / 338:1289                     */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--text);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--purple-2);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- layout scaffolding -------------------------------------------- */
.wrap{max-width:calc(var(--grid) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);position:relative}
.prose{margin-left:var(--indent);max-width:var(--prose)}
.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}

/* skip link — 338:1386 */
.skip-to{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blue-4);color:#fff;font-family:var(--noto);font-size:14px;line-height:21px;padding:13px 16px}
.skip-to:focus{left:0}

/* ---------- section rail + markers ---------------------------------------- */
/* purple/green rail 338:1168, green rails 338:1211 / 338:1226, purple 338:1286 */
.rail{position:absolute;left:-40px;top:0;width:3px;border-radius:6px;pointer-events:none}  /* 338:1168 x145 */
.rail--hero{background:linear-gradient(180deg,#d2a8ff 0%,#a371f7 10%,#196c2e 70%,#2ea043 80%,#56d364 100%)}
.rail--green{left:-40px;background:linear-gradient(180deg,#3fb950 0%,#2ea043 50%,rgba(0,0,0,0) 100%)}  /* 338:1211 x138 */
.rail--purple{left:-40px;width:4px;background:linear-gradient(180deg,#d2a8ff 0%,#a371f7 10%,#a371f7 70%,rgba(146,92,255,.46) 80%,rgba(146,92,255,.17) 100%)}  /* 338:1286 x137.5 */

/* purple square + arrow — 338:1164/1165/1166 (24×28, ground #dd7df7)          */
.marker{position:absolute;left:-50.5px;width:24px;height:28px;background:var(--purple);display:flex;align-items:flex-start;justify-content:center;padding-bottom:4px}
.marker img{width:24px;height:24px}
/* green node + glow — 338:1212/1213/1214 */
.node{position:absolute;left:15px;width:24px;height:28px}
.node::before{content:"";position:absolute;inset:0;background:var(--green);filter:blur(9px);border-radius:9999px}
.node img{position:relative;width:24px;height:24px}

/* dotted rule — 338:1093 / 338:1149 / 338:1221 / 338:1287 : 3px dots, 24px pitch, 520px run */
.dots{height:3px;width:485px;max-width:100%;margin-left:0;
  background-image:radial-gradient(circle at 1.5px 1.5px,rgba(163,160,162,.85) 1.5px,transparent 1.6px);
  background-size:24px 3px;background-repeat:repeat-x}

/* ---------- type ----------------------------------------------------------- */
/* 338:1103 / 338:1416 / 338:1186 */
.eyebrow{font-family:var(--mono);font-weight:400;font-size:11px;line-height:16.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:0}
/* 338:1222 "Before you start" */
.kicker{font-family:var(--display);font-weight:700;font-size:25px;line-height:28px;letter-spacing:-.24px;color:var(--head);margin:0}
/* 338:1288 "How it works" / 338:1384 "Three signals, one minute" */
.kicker--text{font-family:var(--atext);font-weight:700;font-size:24px;line-height:28px;letter-spacing:-.24px;color:#fff}
/* 338:1148 / 338:1223 / 338:1237 */
.h1,.h2{font-family:var(--display);font-weight:700;color:var(--head);letter-spacing:-2.4px;margin:0;
  font-size:clamp(34px,5.1vw,70px);line-height:clamp(40px,6.2vw,85px)}
.h2{line-height:clamp(40px,6vw,83px)}
/* 338:1163 — the 40px opening line */
.h1-lede{font-family:var(--display);font-weight:700;color:var(--head);letter-spacing:-2.4px;margin:0 0 13px;
  font-size:clamp(22px,2.9vw,40px);line-height:clamp(30px,5.8vw,80px)}
/* 338:1150 / 338:1224 / 338:1289 */
.lede{font-family:var(--atext);font-weight:400;color:var(--fg-bright);margin:0;
  font-size:clamp(17px,1.75vw,25px);line-height:clamp(26px,2.3vw,32px)}
.lede--strong{font-family:var(--display);font-weight:700}

/* ---------- header — 338:1385 --------------------------------------------- */
.hdr{background:var(--gh);height:72px;position:relative;z-index:30}
.hdr__in{height:72px;display:flex;align-items:center;gap:0;max-width:1504px;margin:0 auto;padding:0 84px 0 136px}
.hdr__brand{display:flex;align-items:center;gap:53.64px;flex:0 0 auto}
.hdr__brand .wordmark{width:102.36px;height:21px}
.hdr__brand .ghmark{width:32px;height:32px}
.hdr__nav{display:flex;align-items:center;gap:19px;margin-left:23px;flex:1 1 auto;min-width:0}
.hdr__nav a{font-family:var(--noto);font-size:16px;line-height:24px;color:#fff;padding:8px;white-space:nowrap}
.hdr__nav a:first-child{font-size:15px;padding-left:9px}
.hdr__nav a:hover{color:var(--purple-2)}
/* 338:1409 */
.hdr__cta{flex:0 0 auto;border:1px solid var(--input-line);border-radius:6px;padding:4px 8px;
  font-family:var(--noto);font-size:16px;line-height:24px;color:#fff;white-space:nowrap}
.hdr__cta:hover{background:rgba(255,255,255,.08)}
.hdr__burger{display:none;flex:0 0 auto;background:none;border:1px solid var(--input-line);border-radius:6px;width:38px;height:32px;align-items:center;justify-content:center;padding:0}
.hdr__burger span,.hdr__burger span::before,.hdr__burger span::after{content:"";display:block;width:16px;height:1.5px;background:#fff;position:relative}
.hdr__burger span::before{position:absolute;top:-5px}
.hdr__burger span::after{position:absolute;top:5px}
.hdr__nav[data-open]{position:absolute;left:0;right:0;top:72px;z-index:29;flex-direction:column;align-items:flex-start;
  gap:0;margin:0;padding:8px 20px 16px;background:var(--gh);border-top:1px solid rgba(255,255,255,.12)}
.hdr__nav[data-open] a{width:100%;padding:10px 0}

/* ---------- hero — 338:1091 ------------------------------------------------ */
.hero{position:relative;overflow:hidden;background:var(--bg);padding-bottom:96px;
  /* one knob for the whole hero: the text's top inset. The sky and the elbow
     are absolutely placed, so they ride the same offset and the composition
     holds together when a short viewport compresses the block. */
  --hero-pt:248px;--hero-up:calc(248px - var(--hero-pt))}
/* 338:1092 : image box x -1970..2236, y 11..1140 of the 1504 frame            */
.hero__sky{position:absolute;left:-130.98%;top:-3px;width:279.7%;aspect-ratio:4206/1129;
  background:url('/lp/assets/img/hero-space.webp') center top/100% 104% no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  pointer-events:none}
.hero__sky{top:calc(-3px - var(--hero-up))}
/* 338:1154 : the elbow, minus its vertical leg — shifted right so the leg it
   feeds lands on the rail's x (96), the way 338:1155 and 338:1168 share one
   line in the design. */
.hero__curve{position:absolute;left:-29.35px;top:calc(17px - var(--hero-up));width:448px;height:647px;pointer-events:none}
.hero__body{position:relative;z-index:2;padding-top:var(--hero-pt)}
.hero .h1{max-width:1006px}   /* 338:1148 : breaks after "who is" */

/* Every hero decoration used to be pinned to a Figma y, so it only lined up on
   the one page whose headline wraps to two lines. They now hang off the two
   blocks they belong to instead. */
.hero__head{position:relative}
/* 338:1155 : leg top stays with the artwork, bottom follows the headline so it
   always stops 28px short of the lede (338:1150 y648 vs leg end y619.6). */
.hero__leg{position:absolute;left:-40px;top:-9.16px;bottom:-62.64px;width:2.96px;border-radius:1.48px;
  background:linear-gradient(90deg,#d2a8ff 0%,#a371f7 9.09%,#6639ba 59.91%,#6639ba 90.2%,rgba(210,168,255,0) 100%);
  pointer-events:none}
.hero__flow{position:relative}
.hero__rail{left:-40px;top:44px;bottom:-10px;height:auto}   /* 338:1168 : lede top +44 → 10 past the dots */
.hero__marker{left:-50px;top:0}                             /* 338:1164 y648 = 338:1150 y648 */
.hero .eyebrow{margin-bottom:15.5px}
.hero__dots{margin-top:48px}
.hero__dots2{margin-top:35px}   /* 338:1093 : page y1187.5 */
.hero__lede{margin-top:91px}
.hero__ask{margin-top:70px}
.hero__ask .lede+.lede{margin-top:13px}

/* handle / email form — 338:1169 → 338:1180 */
.lead{margin-top:40px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
.lead__group{display:flex;align-items:stretch;min-width:0}
.lead__group input{
  width:295.61px;max-width:100%;height:48px;background:#fff;border:1px solid var(--input-line);border-right:0;
  border-radius:6px 0 0 6px;padding:0 11px;color:#1f2328;
  font-family:var(--text);font-size:13.8px;line-height:24px;
  box-shadow:inset 0 1px 0 0 rgba(31,35,40,.04)}
.lead__group input::placeholder{color:rgba(31,35,40,.5)}
.lead__group input:focus{outline:none;border-color:var(--purple-3);box-shadow:inset 0 1px 0 0 rgba(31,35,40,.04),0 0 0 3px rgba(110,64,201,.35)}
/* 338:1176 */
.btn-next{height:48px;min-width:92px;padding:0 24px;border:0;border-radius:0 6px 6px 0;color:#fff;
  font-family:var(--text);font-weight:700;font-size:16.1px;line-height:16px;letter-spacing:0;
  background-image:linear-gradient(180deg,rgba(183,52,179,.15) 0%,rgba(164,46,156,0) 100%),linear-gradient(90deg,rgb(110,64,201) 0%,rgb(110,64,201) 100%)}
.btn-next:hover{filter:brightness(1.12)}
.btn-next[disabled]{opacity:.55;cursor:progress}
.btn-next--solo{border-radius:6px;min-width:auto;padding:0 28px}
/* 338:1178 */
.btn-skip{display:inline-flex;align-items:center;gap:8px;height:48px;padding:16px 24px;border:0;border-radius:6px;
  background:rgba(255,255,255,0);box-shadow:inset 0 0 0 1px var(--purple-2);color:var(--head);
  font-family:var(--text);font-weight:700;font-size:16.1px;line-height:16px}
.btn-skip img{width:16px;height:16px}
.btn-skip:hover{background:rgba(188,140,255,.12)}
/* the required tick under the form - AUTHORED, no Figma slot; set in the
   form's own Inter at the error size so it reads as part of the form */
.lead__consent{display:flex;align-items:flex-start;gap:10px;width:100%;margin:0;cursor:pointer;
  font-family:var(--text);font-size:13px;line-height:20px;color:var(--muted)}
.lead__consent input{flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;accent-color:var(--purple-3);cursor:pointer}
.lead__consent input:focus-visible{outline:2px solid var(--purple-2);outline-offset:2px}
.lead__consent a{color:var(--purple-2);text-decoration:underline;text-underline-offset:2px}
.lead__consent a:hover{color:var(--purple)}
.lead__consent[data-missing]{color:var(--red)}
.lead__note{width:100%;margin:0;font-family:var(--mono);font-size:11px;line-height:16.5px;color:var(--muted)}
.lead__err{width:100%;margin:0;font-family:var(--text);font-size:13px;line-height:20px;color:var(--red)}
.lead__err:empty{display:none}
.lead__fields{display:flex;flex-wrap:wrap;gap:12px}
.lead__fields .lead__group{flex:0 0 295.61px}
.lead__fields .lead__group input{border-right:1px solid var(--input-line);border-radius:6px;width:100%}
/* the one field nobody has to fill in: own row, visible label, OPTIONAL badge */
.lead__fields .lead__group--opt{flex:1 1 100%;flex-direction:column;align-items:flex-start;gap:6px;margin-top:4px}
.lead__lab{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;line-height:16.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.lead__lab em{font-style:normal;letter-spacing:.8px;padding:2px 8px;border:1px solid var(--purple-2);border-radius:999px;color:var(--purple-2)}
.lead__group--opt input{width:100%;max-width:603.22px}

/* ---------- dashboard mock — 338:1095 ------------------------------------- */
.dashwrap{position:relative;margin:165.5px 0 0 89px;max-width:1024px}
/* 338:1094 */
.dashwrap::before{content:"";position:absolute;left:-80px;right:-80px;top:-40px;height:607px;filter:blur(32px);opacity:.2;z-index:0;
  background-image:linear-gradient(135deg,rgb(57,138,214) 0%,rgb(55,168,236) 35%,rgb(97,221,255) 70%,rgb(78,190,125) 100%)}
.dash{position:relative;z-index:1;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);
  background-image:linear-gradient(180deg,#1f1c1e 0%,#151314 100%)}
.dash__bar{display:flex;align-items:center;gap:8px;height:41.5px;padding:0 20px;background:var(--panel-40);border-bottom:1px solid var(--line-42)}
.dash__dot{width:10px;height:10px;border-radius:9999px;flex:0 0 auto}
.dash__url{margin-left:12px;font-family:var(--mono);font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash__live{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;line-height:16.5px;color:var(--muted)}
.dash__live i{width:6px;height:6px;border-radius:9999px;background:var(--green-3)}
.dash__body{padding:24px}
.dash__head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.dash__title{font-family:var(--text);font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.6px;color:var(--fg);margin:4px 0 0}
.dash__eyebrow{letter-spacing:1.98px}
.dash__ranges{margin-left:auto;display:flex;gap:8px}
.dash__ranges span{height:26px;padding:0 10px;display:inline-flex;align-items:center;border:1px solid var(--line-60);border-radius:6px;font-family:var(--mono);font-size:12px;line-height:16px;color:var(--muted)}
.dash__ranges span[aria-current]{background:var(--fg);border-color:var(--fg);color:var(--panel)}
/* 4 KPI tiles — 338:1113 / 1119 / 1125 / 1130 */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.kpi{position:relative;overflow:hidden;min-height:117px;padding:16px;border:1px solid var(--line-60);border-radius:16px;background:var(--panel-60)}
.kpi::before{content:"";position:absolute;inset:-1px;opacity:.4;background-image:linear-gradient(153.48deg,var(--tint,rgba(226,73,66,.4)) 0%,rgba(0,0,0,0) 100%)}
.kpi>*{position:relative}
.kpi__k{font-family:var(--mono);font-size:10px;line-height:15px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0}
.kpi__v{display:flex;align-items:baseline;gap:8px;margin:8px 0 0}
.kpi__v b{font-family:var(--text);font-weight:600;font-size:30px;line-height:36px;letter-spacing:-.75px;color:var(--fg)}
.kpi__v span{font-family:var(--mono);font-size:12px;line-height:16px;color:var(--muted)}
.kpi__d{font-family:var(--text);font-size:12px;line-height:16px;color:var(--muted);margin:8px 0 0}
/* chart — 338:1136 → 338:1146 */
.chart{position:relative;margin-top:24px;height:218px;border:1px solid var(--line-60);border-radius:16px;background:var(--panel-40)}
.chart__head{display:flex;align-items:center;gap:14px;padding:20px 20px 0}
.chart__head h4{margin:0;font-family:var(--text);font-weight:500;font-size:14px;line-height:20px;color:var(--fg)}
.chart__key{margin-left:auto;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;line-height:16.5px;color:var(--muted)}
.chart__key i{display:inline-block;width:8px;height:8px;border-radius:4px;margin-right:6px;vertical-align:middle}
.chart__plot{position:absolute;left:20px;right:20px;top:52px;height:144px;overflow:hidden}
.chart__plot img{position:absolute;width:100%;height:100%}

/* ---------- copilot code mock — 338:1187 ---------------------------------- */
.codewrap{margin:122px auto 0 241px;max-width:720px}
.code__tag{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:17px}
.code__tag img{width:14px;height:14px}
.code{border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow),var(--inset-hi);
  background-image:linear-gradient(180deg,#1f1c1e 0%,#151314 100%)}
.code__bar{display:flex;align-items:center;height:37.5px;padding:0 16px;background:var(--panel-40);border-bottom:1px solid var(--line-42);
  font-family:var(--mono);font-size:11px;line-height:16.5px;color:var(--muted)}
.code__bar span:last-child{margin-left:auto}
.code pre{margin:0;padding:20px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:21.13px;color:var(--blue-2);tab-size:2}
.code pre code{display:block;white-space:pre}
.code .ln{display:inline-block;width:24px;margin-right:12px;text-align:right;color:rgba(163,160,162,.5)}
.code .pl{color:var(--fg)}
.code .fn{color:var(--amber)}
.code .id{color:var(--blue-3)}
.code .ty{color:var(--teal)}
.code .cm{color:rgba(163,160,162,.6);font-style:italic}
.code .gh{color:rgba(163,160,162,.6);font-style:italic}
.code__foot{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:var(--panel-40);border-top:1px solid var(--line-42);
  font-family:var(--mono);font-size:11px;line-height:16.5px;color:var(--muted)}
.code__foot kbd{background:var(--fg);color:var(--panel);border-radius:4px;font-family:var(--mono);font-size:10px;line-height:15px;padding:2px 6px}
.code__foot b{margin-left:auto;font-weight:400;color:var(--green-3)}

/* ---------- generic section ------------------------------------------------ */
.sec{position:relative;padding:0 0 0}
.sec__head{position:relative;padding-top:59px}
.sec__head .dots{margin-bottom:var(--gap-dots,32px)}
.sec__head .h2{margin-top:var(--gap-h2,37.5px)}
.sec__head .lede{margin-top:var(--gap-lede,51.5px)}
/* rail + node/marker resolve against the .wrap content box (x136), not the hero (x112) */
/* The rail hangs off the head block, not off a fixed height: the head's bottom edge is
   its last line of text, so a headline that wraps to a different number of lines on a
   persona page keeps the rail in the same relationship to the copy Figma draws. */
.sec__head .rail{top:var(--rail-top,94px);bottom:var(--rail-bot,-231px);height:auto}
.sec__head .rail--green{left:-40px}                        /* 338:1211 x138 */
.sec__head .rail--purple{left:-40px}                         /* 338:1286 x136 */
.sec__head .node{left:-50.5px;top:var(--node-top,42px)}  /* 338:1212 x127.33 */
.sec__head .marker{left:-50px;top:var(--node-top,42px)}  /* 338:1281 x124 */

/* 338:1210 / 338:1221 / 338:1222 / 338:1223 / 338:1224 / 338:1259 */
.sec--stages{margin-top:34.33px;--gap-dots:31.92px;--gap-h2:37.5px;--gap-lede:51.5px;
  --rail-top:93.92px;--rail-bot:-231px;--node-top:41.92px}
.sec--stages .h2{max-width:966px}              /* 338:1223 w966 */
.sec--stages .quad{margin-top:172px}           /* 338:1259 page y3028 */

/* 338:1225 / 338:1236 / 338:1384 / 338:1237 / 338:1412 */
.sec--signals{margin-top:71.5px;--gap-dots:36.5px;--gap-h2:38px;
  --rail-top:98.5px;--rail-bot:-21px;--node-top:46.5px}
.sec--signals .h2{max-width:994px}             /* 338:1237 w994 */
.sec--signals .cards3{margin-top:75px}         /* 338:1412 page y3980 */

/* no Figma slot — sized to the 338:1259 quad section so the rhythm holds */
.sec--why{margin-top:47.65px;--gap-dots:31.92px;--gap-h2:37.5px;
  --rail-top:99.5px;--rail-bot:-231px;--node-top:49.85px}
.sec--why .quad{margin-top:172px}

/* 338:1281 / 338:1286 / 338:1287 / 338:1288 / 338:1289 / 338:1290 */
.sec--how{margin-top:47.65px;--gap-dots:42.85px;--gap-lede:51.5px;
  --rail-top:97.85px;--rail-bot:-47px;--node-top:49.85px}
.sec--how .h2{max-width:966px}                 /* 338:1449 w966 */
.sec--how .steps{margin-top:116px}             /* 338:1290 page y4940 */

.sec--faq{margin-top:105.37px}                 /* 338:1315 : steps bottom +105.37 */

/* ---------- 2×2 quad block — 338:1259 ------------------------------------- */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:76px;
  background:var(--line-60);border:1px solid var(--line-60);border-radius:16px;overflow:hidden}
.quad__cell{position:relative;background:var(--panel);min-height:194.5px;padding:32px}
.quad__cell h3{margin:0;font-family:var(--display);font-weight:700;font-size:24px;line-height:32px;letter-spacing:-.6px;color:var(--fg)}
.quad__cell p{margin:17px 0 0;font-family:var(--atext);font-size:14px;line-height:22.75px;color:var(--muted);max-width:420px}
.quad__cell span{position:absolute;right:31.5px;top:32px;font-family:var(--display);font-size:12px;line-height:16px;color:var(--muted)}
.quad__cell::after{content:"";position:absolute;left:32px;bottom:32px;width:48px;height:1px;
  background-image:linear-gradient(135deg,rgb(59,179,77) 0%,rgb(58,178,77) 35%,rgb(51,145,67) 70%,rgb(55,172,74) 100%)}

/* ---------- signal cards — 338:1412 / 1422 / 1433 ------------------------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:88px}
.signal{position:relative;overflow:hidden;min-height:329.5px;padding:28px;border:1px solid var(--line-60);border-radius:16px;background:var(--card);
  display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.signal::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;opacity:0;transition:opacity .18s;
  background:linear-gradient(90deg,rgba(57,138,214,0) 0%,rgba(57,138,214,.6) 50%,rgba(57,138,214,0) 100%)}
.signal:hover{border-color:var(--line);transform:translateY(-2px)}
.signal:hover::before{opacity:1}
.signal__ico{width:44px;height:44px;border:1px solid var(--line-60);border-radius:12px;background:var(--panel-60);display:flex;align-items:center;justify-content:center}
.signal__ico img{width:20px;height:20px}
.signal .eyebrow{margin-top:24px}
.signal h3{margin:8px 0 0;font-family:var(--atext);font-weight:700;font-size:20px;line-height:28px;letter-spacing:-.5px;color:var(--fg)}
.signal p:not(.eyebrow):not(.signal__more){margin:14px 0 0;font-family:var(--atext);font-size:14px;line-height:22.75px;color:var(--muted)}
.signal__more{margin:auto 0 0;display:flex;gap:8px;font-family:var(--mono);font-size:12px;line-height:16px;color:var(--muted)}
.signal:hover .signal__more{color:var(--fg)}

/* ---------- how it works — 338:1290 --------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:148px}
.step{position:relative;min-height:301.63px;padding:28px;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow),var(--inset-hi);
  background-image:linear-gradient(180deg,#1f1c1e 0%,#151314 100%);display:flex;flex-direction:column}
.step__top{margin:0;display:flex;align-items:center;gap:16px;font-family:var(--display);font-size:12px;line-height:16px;color:var(--muted)}
.step__top b{margin-left:auto;font-weight:400;font-size:10px;line-height:15px;letter-spacing:1px;text-transform:uppercase}
.step h3{margin:20px 0 0;font-family:var(--display);font-weight:700;font-size:24px;line-height:28px;letter-spacing:-.5px;color:var(--fg)}
.step p:not(.step__top){margin:9px 0 0;font-family:var(--display);font-weight:400;font-size:14px;line-height:18.5px;color:var(--muted)}
.step pre{margin:26px 0 0;padding:16px;border:1px solid var(--line-60);border-radius:8px;background:var(--panel-70);
  font-family:var(--mono);font-size:11px;line-height:17.88px;color:var(--muted);white-space:pre;overflow-x:auto}
.step pre i{display:inline-block;width:6px;height:12px;background:var(--blue);vertical-align:-2px;margin-left:6px;animation:caret 1.1s steps(1,end) infinite}
@keyframes caret{50%{opacity:0}}

/* ---------- FAQ — 338:1315 ------------------------------------------------- */
.faq{display:grid;grid-template-columns:546px 1fr;gap:0;margin-top:60px;align-items:start}
.faq__h{font-family:var(--display);font-weight:700;font-size:clamp(64px,10vw,150px);line-height:.98;letter-spacing:-1.2px;color:var(--fg);margin:0}
.faq__list{border:1px solid var(--line-60);border-radius:16px;background:var(--card-40);overflow:hidden}
.faq__item{border-bottom:1px solid var(--line-42)}
.faq__item:last-child{border-bottom:0}
.faq__q{display:flex;align-items:center;gap:0;width:100%;background:none;border:0;padding:20px 24px;text-align:left}
.faq__q .n{font-family:var(--mono);font-size:11px;line-height:16.5px;color:var(--muted);width:29.21px;flex:0 0 auto}
.faq__q .t{font-family:var(--display);font-weight:500;font-size:18px;line-height:28px;letter-spacing:-.45px;color:var(--fg);flex:1 1 auto}
.faq__q .s{flex:0 0 auto;width:24px;height:24px;border:1px solid var(--line-60);border-radius:33554400px;display:flex;align-items:center;justify-content:center}
.faq__q .s img{width:12px;height:12px}
/* 338:1323 — open item: same 24px circle, rotated 45deg over the purple gradient */
.faq__q[aria-expanded="true"] .s{transform:rotate(45deg);
  background-image:linear-gradient(135deg,#a371f7 0%,#a270f6 35%,#dd7df7 70%,#dd7df7 100%)}
.faq__a{display:none;padding:0 24px 28px 60px}
.faq__a[data-open]{display:block}
.faq__a p{margin:0;font-family:var(--display);font-weight:400;font-size:14px;line-height:22.75px;color:var(--muted);max-width:585px}

/* ---------- final CTA — 338:1355 ------------------------------------------ */
/* frame 338:1355 is 1502x860 and the 180px footer 338:1370 sits inside it at y680 */
.cta{position:relative;overflow:hidden;background:var(--bg);margin-top:105.75px;padding:10px 0 0;min-height:680px}
/* 338:1357 — 1496x584 box at CTA-rel (-21,-257); image crop-filled inside it */
.cta__sky{position:absolute;left:calc(50% - 748px);top:-257px;width:1496px;height:584px;overflow:hidden;pointer-events:none}
.cta__sky img{position:absolute;left:-40.73%;top:-33.01%;width:185.27%;height:100%;max-width:none}
/* 338:1356 — 900x474 box at CTA-rel (270,328); 900x900 image at -10.26% */
.cta__planet{position:absolute;left:calc(50% - 450px);top:328px;width:900px;height:474px;overflow:hidden;pointer-events:none}
.cta__planet img{position:absolute;left:.02%;top:-10.26%;width:100%;height:189.87%;max-width:none}
/* 338:1361 content frame — h2 block centred on CTA-rel 112, sub on 253.5, button top 329 */
.cta__in{position:relative;z-index:2;width:min(1083px,100% - var(--gutter)*2);margin:0 auto;text-align:center}
.cta__in h2{margin:0;font-family:var(--poppins);font-weight:700;color:#fff;letter-spacing:-1.92px;
  font-size:clamp(34px,6.1vw,72px);line-height:clamp(40px,5.8vw,68px)}
.cta__in p{margin:39px auto 0;max-width:759px;font-family:var(--poppins);font-size:clamp(16px,1.5vw,20px);line-height:28px;color:var(--muted-2)}
/* 338:1365 */
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:2.92px;margin-top:38px;height:57px;min-width:265.844px;padding:0 24px;border:0;border-radius:6px;
  font-family:var(--poppins);font-weight:700;font-size:20px;line-height:20px;color:var(--bg);
  background-image:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 100%),linear-gradient(90deg,rgb(246,248,250) 0%,rgb(246,248,250) 100%)}
.btn-cta img{width:20px;height:20px}
.btn-cta:hover{filter:brightness(.94)}

/* ---------- footer — GitHub Campaign_footer.pptx, "Updated footer" (11 Sep 2026) */
/* The slide replaces 338:1370: logo + mark on the left, one text column that
   starts 302px in from the logo, a 329px band. Type is the LP's Noto; the
   slide's ~14px body copy is set 14/20, the About row on the 24px nav line. */
.ftr{position:relative;z-index:3;background:var(--gh)}
.ftr__in{max-width:1504px;margin:0 auto;padding:54px 136px;display:flex;align-items:flex-start}   /* 136 = 338:1383 x on the 1504 frame */
.ftr__brand{flex:0 0 302px;display:flex;align-items:center;gap:37.03px;height:24px}             /* 338:1383 + 338:1372, centred on the About row */
.ftr__logo{width:102.97px;height:21.85px}
.ftr__mark{width:32px;height:32px}
.ftr__col{flex:1 1 auto;min-width:0;font-family:var(--noto);font-size:14px;line-height:20px;color:#fff}
.ftr__about{display:flex;flex-wrap:wrap;gap:8px 56px;line-height:24px}
.ftr__col a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ftr__col a:hover{color:var(--purple-2)}
.ftr__about a{font-weight:700}
.ftr__p{margin:16px 0 0}
.ftr__about + .ftr__p{margin-top:35px}
.ftr__legal{display:flex;flex-wrap:wrap;align-items:center;gap:12px 170px;margin-top:33px}
.ftr__copy{margin:0;white-space:nowrap}
.ftr__policy{display:flex;flex-wrap:wrap;gap:8px 56px}
.ftr__policy a{white-space:nowrap}

/* below the 1504 artboard the footer falls back to flow */
/* ---------- hero on a short viewport ---------------------------------------
   Figma draws the hero on a 6751px canvas, so at full size the "Do you have a
   GitHub Handle?" ask sits below the fold on a laptop and the page reads as a
   poster with nothing to do. Below 1150px of viewport height the hero type and
   its vertical gaps step down, and the top inset then rides the viewport so
   the ask lands on the first screen at any height: everything under the inset
   measures ~566px, so 100vh - 700px leaves the ask clear of the fold with room
   to spare. The sky and the elbow follow --hero-pt, so the artwork compresses
   with the copy instead of drifting away from it. Above 1150px tall the design
   is Figma's, untouched. Width-gated so the phone layout is not affected. */
@media (min-width:900px) and (max-height:1150px){
  /* 734 = the 700px the block below the inset used to need, plus the 34px of
     head padding added below - so the ask keeps the same clearance it had. */
  .hero{--hero-pt:clamp(46px,calc(100vh - 734px),248px)}
  .hero .h1-lede{font-size:clamp(22px,2.1vw,29px);line-height:clamp(30px,2.9vw,40px)}
  /* the -2.4px tracking does not scale with the type, so the line narrows
     faster than the font does: 620px is what still breaks after "who is". */
  .hero .h1{font-size:clamp(34px,3.8vw,51px);line-height:clamp(40px,4.6vw,62px);max-width:620px}
  .hero .lede{font-size:clamp(17px,1.5vw,20px);line-height:clamp(26px,2vw,28px)}
  /* The elbow's dot caps the leg, so it is pinned to the head block's top edge.
     Tightening the lede's line-height pulled its ink up inside that box and the
     dot ended up almost touching the cap of "Your people". Padding the head
     pushes the type down without moving the dot, since the leg is positioned
     against the padding box, which padding does not shift. */
  .hero__head{padding-top:34px}
  .hero__lede{margin-top:40px}
  .hero__dots{margin-top:24px}
  .hero__ask{margin-top:32px}
  .hero .lead{margin-top:28px}
}

@media (max-width:1503px){
  .ftr__in{padding:54px var(--gutter)}
}

@media (max-width:1280px){
  :root{--indent:64px}
  .dashwrap{margin-left:60px}
  .faq{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:1080px){
  :root{--indent:40px}
  .rail,.marker,.node,.hero__curve,.hero__leg{display:none}
  .hdr__in{padding:0 var(--gutter)}
  .hdr__nav,.hdr__cta{display:none}
  .hdr__burger{display:flex;margin-left:auto}
  .hdr__brand{gap:28px}
  .dashwrap{margin-left:40px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cards3,.steps{grid-template-columns:1fr 1fr}
  .cards3>:last-child,.steps>:last-child{grid-column:1 / -1}
  .faq{grid-template-columns:1fr;gap:24px}
  .faq__h{font-size:clamp(64px,13vw,120px)}
  /* the Figma hand-placed left indents stop making sense once the grid narrows */
  .codewrap{margin:120px auto 0}
}
@media (max-width:760px){
  :root{--gutter:20px;--indent:0px}
  .h1,.h2{letter-spacing:-1.2px}
  .cta__in h2{letter-spacing:-.9px}
  .hero{padding-bottom:64px}
  .hero__body{padding-top:150px}
  .hero__sky{height:640px;width:200%}
  .hero__curve{display:none}
  .dots{margin-left:0;width:100%}
  .sec__head{padding-top:36px}
  .sec__head .h2{margin-top:32px}
  .sec__head .lede{margin-top:24px}
  .sec--stages,.sec--why{margin-top:88px}
  .sec--signals,.sec--how,.sec--faq{margin-top:96px}
  .quad{grid-template-columns:1fr;margin-top:40px}
  .quad__cell{min-height:0;padding:24px 24px 56px}
  .quad__cell span{right:24px;top:24px}
  .quad__cell::after{left:24px;bottom:24px}
  .cards3,.steps{grid-template-columns:1fr;margin-top:40px}
  .cards3>:last-child,.steps>:last-child{grid-column:auto}
  .signal,.step{min-height:0}
  .dashwrap{margin:56px 0 0}
  .dashwrap::before{left:-24px;right:-24px;height:420px}
  .dash{border-radius:16px}
  .dash__body{padding:16px}
  .dash__head{gap:8px}
  .dash__ranges{margin-left:0;width:100%;overflow-x:auto}
  .kpis{grid-template-columns:1fr;gap:12px}
  .chart{height:190px}
  .chart__plot{top:56px;height:118px}
  .chart__head{flex-wrap:wrap;gap:8px}
  .chart__key{margin-left:0}
  .codewrap{margin:80px auto 0}
  .code pre{font-size:11px;line-height:19px}
  .lead{gap:12px}
  .lead__group{width:100%}
  .lead__fields{width:100%}
  .lead__fields .lead__group{flex:1 1 100%}
  .lead__group input{width:100%;flex:1 1 auto}
  .btn-skip{width:100%;justify-content:center}
  .faq__q{padding:18px 16px}
  .faq__a{padding:0 16px 24px 45px}
  .cta{margin-top:96px;padding-top:72px;min-height:0;padding-bottom:120px}
  .cta__sky{left:50%;transform:translateX(-50%);top:-180px;width:1200px;height:420px}
  .cta__planet{left:50%;transform:translateX(-50%);top:auto;bottom:-140px;width:600px;height:316px}
  .cta__in p{margin-top:28px}
  .btn-cta{margin-top:28px}
  .ftr__in{flex-direction:column;gap:32px;padding:40px var(--gutter)}
  .ftr__brand{flex:0 0 auto}
  .ftr__about{gap:8px 32px}
  .ftr__legal{flex-direction:column;align-items:flex-start;gap:12px}
  .ftr__policy{gap:8px 24px}
  .ftr__copy{white-space:normal}
}

/* ---- Julie 24 Oct: two-bar header, GitHub mark on the hero, footer ---- */
.hdr{height:auto;background:#000}
.hdr__top{background:#000}
.hdr__top .hdr__in{height:84px}
.hdr__top .wordmark{width:122px;height:auto;display:block}
.hdr__bar{position:relative;background:var(--gh);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.08)}
.hdr__bar .hdr__in{height:56px}
.hdr__nav{margin-left:-8px}
.hdr__nav a,.hdr__nav a:first-child{font-family:var(--display);font-size:16px;font-weight:500}
.hdr__nav[data-open]{top:56px}
.hero{position:relative}
.hero__gh{position:absolute;z-index:6;top:40px;right:max(136px,calc((100% - 1504px)/2 + 136px));width:64px;height:64px;pointer-events:none}
.ftr{background:#000}
.ftr__in{flex-direction:column;align-items:stretch;padding-top:40px;padding-bottom:40px}
.ftr__brand{flex:none;height:auto;justify-content:space-between;padding:0 0 28px;border-bottom:1px solid rgba(255,255,255,.14)}
.ftr__logo{width:122px;height:auto}
.ftr__mark{width:64px;height:64px}
.ftr__col{padding-top:28px}
.ftr__legal{flex-direction:column-reverse;align-items:flex-start;gap:20px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.ftr__policy{flex-direction:column;gap:2px;font-size:16px;line-height:22px}
.ftr__policy a{text-decoration:none}
.ftr__copy{font-size:13px;color:#ccc}
@media (max-width:1100px){
  .hdr__top .hdr__in{height:64px}
  .hdr__top .wordmark{width:102px}
  .hero__gh{top:20px;right:var(--gutter,20px);width:44px;height:44px}
  .ftr__mark{width:44px;height:44px}
}