/* /services/custom-software/: repeated work becomes a system that runs without Ed in it.
   The hero is a small real pipeline: input, rules, three outcomes, a record that only grows. */

body[data-page="custom-software"]{--cs-line:var(--color-border);--cs-hair:var(--color-hair);--cs-ink:var(--color-meta);--cs-out:var(--color-success);--cs-human:var(--color-warning);--cs-held:var(--color-accent);--cs-panel:#070a0f;--cs-row-h:50px}
.cs{overflow-x:clip}
.cs-accent{color:var(--color-accent)}

/* ---------- hero ---------- */
.cs-hero{padding-block:clamp(20px,4vw,64px) clamp(48px,7vw,96px)}
.cs-hero__grid{display:grid;gap:clamp(32px,4vw,56px)}
body[data-page="custom-software"] .cs-hero .section-title{margin:18px 0 0;line-height:.98;font-size:clamp(2.35rem,1.5rem + 3.2vw,3.7rem)}
.cs-hero__lead{margin:20px 0 0;max-width:46ch;color:var(--color-body);font-size:clamp(1.02rem,.95rem + .35vw,1.18rem);line-height:1.62}
.cs-hero__lead--quiet{margin-top:12px;color:var(--color-text-muted);font-size:clamp(.98rem,.94rem + .2vw,1.06rem)}
.cs-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
@media (min-width:1080px){
  .cs-hero__grid{grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);align-items:start}
  .cs-hero__text{position:sticky;top:96px}
}

/* ---------- the run ---------- */
/* Cards move between trays while it runs; anchoring on them crept the page up mid-read. */
.cs-run{overflow-anchor:none;position:relative;margin:0;padding:0;border:1px solid var(--cs-line);border-radius:14px;background:var(--cs-panel);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.cs-run__bar{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--cs-line);font:500 12px/1.4 "JetBrains Mono",var(--font-mono);letter-spacing:.06em;color:var(--cs-ink)}
.cs-run__name{color:var(--color-text)}
.cs-run__state{text-transform:uppercase}
.cs-run[data-state="running"] .cs-run__state{color:var(--cs-human)}
.cs-run[data-state="done"] .cs-run__state{color:var(--cs-out)}
.cs-rules{list-style:none;margin:0;padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--cs-line)}
.cs-rules li{position:relative;padding:7px 10px;border:1px solid var(--cs-line);border-radius:6px;font:500 12px/1.2 "JetBrains Mono",var(--font-mono);color:var(--color-text-muted);isolation:isolate}
.cs-rules li::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:rgba(119,245,255,.12);box-shadow:inset 0 0 0 1px rgba(119,245,255,.55);opacity:0;transition:opacity .2s var(--ease-out)}
.cs-rules li.is-on::before{opacity:1}
.cs-rules li.is-on{color:var(--color-text)}
.cs-run__grid{display:grid}
.cs-lane{position:relative;padding:12px 16px 14px}
.cs-lane+.cs-lane,.cs-run__trays .cs-lane{border-top:1px solid var(--cs-hair)}
.cs-lane__head{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font:600 13px/1.3 "JetBrains Mono",var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text)}
.cs-lane__head span{flex:1;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--cs-ink)}
.cs-lane--out .cs-lane__head{color:var(--cs-out)}
.cs-lane--human .cs-lane__head{color:var(--cs-human)}
.cs-lane--held .cs-lane__head{color:var(--cs-held)}
.cs-count{font:600 16px/1 "Space Grotesk",var(--font-display);color:inherit}
.cs-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
/* The input is the raw file, line by line; the trays hold what the code made of each line. */
.cs-file__head{margin:0 0 4px;font:500 12px/1.5 "JetBrains Mono",var(--font-mono);color:var(--cs-ink)}
.cs-file{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:line}
.cs-line{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:7px 8px 7px 4px;border-radius:6px;font:500 12.5px/1.45 "JetBrains Mono",var(--font-mono);color:var(--color-text);counter-increment:line;isolation:isolate}
.cs-line::before{content:counter(line);text-align:right;color:var(--cs-ink)}
.cs-line::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(119,245,255,.1);box-shadow:inset 2px 0 0 var(--signal-cyan);opacity:0;transition:opacity .18s var(--ease-out)}
.cs-line.is-checking::after{opacity:1}
.cs-line code{font:inherit;color:inherit;overflow-wrap:anywhere}
.cs-line.is-done code{color:var(--color-text-muted)}
.cs-line.is-fixed code{color:var(--color-text);box-shadow:inset 0 -2px 0 rgba(91,227,160,.6)}
.cs-line__to{font-size:12px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .35s var(--ease-out)}
.cs-line.is-done .cs-line__to{opacity:1}
.cs-line__to[data-to="out"]{color:var(--cs-out)}
.cs-line__to[data-to="human"]{color:var(--cs-human)}
.cs-line__to[data-to="held"]{color:var(--cs-held)}
.cs-line__to::before{content:"→ "}
.cs-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;padding:8px 10px;border:1px solid var(--cs-hair);border-radius:7px;background:#0c1118;font:500 13px/1.35 "JetBrains Mono",var(--font-mono);color:var(--color-text)}
.cs-row__ref{color:var(--cs-ink)}
.cs-row__who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"IBM Plex Sans",var(--font-sans);font-size:14px}
.cs-row__who:empty::before{content:"(blank)";color:var(--cs-ink);font-style:italic}
.cs-row__amt{text-align:right;font-variant-numeric:tabular-nums}
.cs-row__meta{grid-column:1 / -1;font-size:12px;color:var(--cs-ink)}
.cs-row__why{grid-column:1 / -1;margin-top:2px;font:600 12px/1.4 "JetBrains Mono",var(--font-mono);font-style:normal;color:var(--cs-human)}
.cs-lane--held .cs-row__why{color:var(--cs-held)}
.cs-row__why::before{content:"→ "}
.cs-lane--out .cs-row{border-color:rgba(91,227,160,.22)}
.cs-lane--human .cs-row{border-color:rgba(224,163,78,.32)}
.cs-lane--held .cs-row{border-color:rgba(124,160,255,.3)}
.cs-record{padding:12px 16px 14px;border-top:1px solid var(--cs-line)}
.cs-record__head{margin:0 0 6px;font:600 13px/1.3 "JetBrains Mono",var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text)}
.cs-record__head span{margin-left:8px;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--cs-ink)}
.cs-record__lines{list-style:none;margin:0;padding:0;max-height:7.6em;overflow-y:auto;font:500 13px/1.55 "JetBrains Mono",var(--font-mono);color:var(--color-text)}
.cs-record__lines li{padding:3px 0;border-top:1px dashed var(--cs-hair)}
.cs-record__lines li:first-child{border-top:0}
.cs-run__actions{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0 16px 14px}
.cs-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(91,227,160,.5);border-radius:8px;background:rgba(91,227,160,.08);font:600 16px/1.2 "IBM Plex Sans",var(--font-sans);color:var(--color-text);cursor:pointer;transition:transform .2s var(--ease-out)}
.cs-btn:hover{transform:translateY(-1px)}
.cs-btn--quiet{border-color:var(--cs-line);background:transparent}
.cs-btn[disabled]{opacity:.45;cursor:default;transform:none}
.cs-run figcaption{padding:12px 16px 14px;border-top:1px solid var(--cs-hair);font:400 13px/1.55 "JetBrains Mono",var(--font-mono);color:var(--color-text-muted)}
@media (max-width:639px){.cs-row__meta{display:none}}
/* While the page boots with motion on, the panel shows the raw file, not the finished run. */
html.motion-boot .cs-run__trays .cs-rows,html.motion-boot .cs-record__lines,html.motion-boot .cs-count,html.motion-boot .cs-run__state{visibility:hidden}
html.motion-boot .cs-line.is-done code{color:var(--color-text)}
html.motion-boot .cs-line.is-done .cs-line__to{opacity:0;transition:none}
@media (min-width:640px){
  .cs-run__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
  .cs-lane--in{border-right:1px solid var(--cs-hair)}
  .cs-run__trays .cs-lane:first-child{border-top:0}
}

/* ---------- three shapes, with prices ---------- */
.cs-intro{padding-block:0 clamp(40px,6vw,72px)}
.cs-shapes{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--cs-line);border:1px solid var(--cs-line);border-radius:14px;overflow:hidden}
.cs-shape{padding:clamp(22px,3vw,34px);background:var(--color-bg);scroll-margin-top:96px}
.cs-shape__price{margin:0;font:500 12px/1.3 "JetBrains Mono",var(--font-mono);letter-spacing:.06em;color:var(--cs-ink)}
.cs-shape__price b{display:block;margin-top:4px;font:600 clamp(2rem,1.6rem + 1.6vw,2.9rem)/1 "Space Grotesk",var(--font-display);letter-spacing:-.03em;color:var(--color-text)}
.cs-shape h3{margin:18px 0 10px;font:600 1.35rem/1.2 "Space Grotesk",var(--font-display);letter-spacing:-.02em;color:var(--color-text)}
.cs-shape p{margin:0;color:var(--color-body);line-height:1.65}
.cs-shape .cs-shape__note{margin-top:14px;padding-top:12px;border-top:1px solid var(--cs-hair);font-size:15px;color:var(--color-text-muted)}
.cs-shape a{color:var(--color-accent)}
.cs-shapes__foot{margin:18px 0 0;color:var(--color-text-muted)}
@media (min-width:900px){.cs-shapes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- the relay, drawn ---------- */
.cs-relay{margin:0 0 clamp(28px,4vw,44px);padding:clamp(18px,3vw,28px);border:1px solid var(--cs-line);border-radius:14px;background:var(--color-surface-2);display:grid;gap:22px}
.cs-relay__lane{position:relative}
.cs-relay__label{margin:0 0 10px;font:600 13px/1.3 "JetBrains Mono",var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cs-ink)}
.cs-relay__lane[data-lane="here"] .cs-relay__label{color:var(--cs-out)}
.cs-relay__nodes{position:relative;list-style:none;margin:0;padding:0 0 22px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
/* The track the question travels along runs under the people it passes through. */
.cs-relay__nodes::before{content:"";position:absolute;left:10%;right:10%;bottom:8px;height:1px;background:var(--cs-line)}
.cs-relay__nodes li{position:relative;z-index:1;display:grid;place-items:center;min-height:56px;padding:8px;border:1px solid var(--cs-line);border-radius:10px;background:var(--color-bg);text-align:center;font:500 13px/1.3 "JetBrains Mono",var(--font-mono);color:var(--color-text)}
.cs-relay__lane[data-lane="here"] .cs-relay__nodes{grid-auto-columns:minmax(0,1fr);max-width:520px}
.cs-relay__lane[data-lane="here"] .cs-relay__nodes li:last-child{border-color:rgba(91,227,160,.5)}
.cs-relay__count{margin:10px 0 0;font:400 13px/1.5 "JetBrains Mono",var(--font-mono);color:var(--color-text-muted)}
.cs-relay__token{position:absolute;z-index:2;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--signal-cyan);box-shadow:0 0 12px rgba(119,245,255,.7);opacity:0;pointer-events:none}
.cs-relay figcaption{font:400 13px/1.55 "JetBrains Mono",var(--font-mono);color:var(--color-text-muted)}
@media (max-width:560px){
  .cs-relay__lane[data-lane="agency"] .cs-relay__nodes{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:8px;padding:0 0 0 24px}
  .cs-relay__lane[data-lane="agency"] .cs-relay__nodes::before{left:8px;right:auto;top:12%;bottom:12%;width:1px;height:auto}
  .cs-relay__lane[data-lane="agency"] .cs-relay__nodes li{min-height:48px}
}
@media (min-width:900px){
  .cs-relay{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:40px}
  .cs-relay figcaption{grid-column:1 / -1}
}
.cs-turn-down{margin-top:clamp(28px,4vw,44px)}

/* ---------- proof, method, end ---------- */
.cs .stat-band{margin-top:clamp(24px,4vw,40px)}
.cs-proof{margin-top:clamp(28px,4vw,48px)}
.cs-proof .work-card__media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.cs-proof__note{margin:18px 0 0;color:var(--color-text-muted)}
.cs-proof__note a{color:var(--color-accent)}
.cs-trust-lead{margin-top:14px;max-width:52ch}
.cs-end .container{display:grid;justify-items:center;gap:14px;text-align:center}
.cs-end .lead{max-width:48ch;margin-inline:auto}
.cs-end .price-anchor{max-width:62ch;margin:0 auto}
.cs-end__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:10px 0 0}

@media (prefers-reduced-motion:reduce){
  .cs-rules li::before,.cs-line::after,.cs-line__to,.cs-btn{transition:none}
}