/* Selit Media service pages, the Lane case study and the 404: page-specific components, loaded after /assets/page.css
   (tokens, type, header, buttons, rows, deflist, compare, qa, related live there). Generated by build_pages.py; bump SVC_V there.
   Each service page has its own centrepiece instead of a shared skeleton:
     receptionist   .call (sample call in the hero) + .track (what happens on a call)
     implementation .ruled.plan (rollout plan)          automation  .ruled.ba (by hand vs automated)
     agents         .anatomy (how an agent is wired)    assistants  .call--chat (hero) + .ruled.ruled--vs (model table)
     websites       .showcase (real site screenshots)   Lane        .facts, .frame, .track.lane-system, .screens, .outcomes
   Same rules as page.css: paper + ink, cobalt only for small marks (diagram nodes, one dot), no hover lifts, no icon grids.
   One fix for page.css lives at the end (.rows--plain on phones). */

/* ---------- Hero variants ---------- */
.hero__grid--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; }
.hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.hero__grid--solo h1 { max-width: 22ch; }
.hero__grid--solo .lede { max-width: 40rem; }
/* text-only hero (web design, where the work follows right below): h1 and lede run wide, so the open space reads as intended */
.hero__grid--text h1 { max-width: 25ch; }
.hero__grid--text .lede { max-width: 46rem; }
/* the mascot: one sprite, in the hero corner, on a few pages only */
.hero__bot { justify-self: end; align-self: end; width: clamp(190px, 17vw, 250px); margin: 0 -.5rem -1.5rem 0; }
.hero__bot img { width: 100%; height: auto; }
@media (max-width: 999px) {
  .hero__grid--wide { grid-template-columns: minmax(0, 1fr); }
  /* phones and tablets: small, at the right end of the breadcrumb row, so the h1 stays where it is on every page */
  .hero--bot > .container { position: relative; }
  .hero__bot { position: absolute; top: -1.5rem; right: calc(var(--gutter) - .45rem); width: 76px; margin: 0; }
}

/* ---------- One real site in the hero (web design), framed like the showcase below ---------- */
.hero__site { margin: 0; }
.hero__site .site__frame { box-shadow: 0 1px 2px rgba(15, 15, 16, .04), 0 30px 60px -40px rgba(15, 15, 16, .45); }
.hero__site .site__img { aspect-ratio: 16 / 10; }
@media (max-width: 999px) { .hero__site { max-width: 34rem; } }

/* ---------- Sample call card (receptionist hero) ---------- */
.call { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: 0 1px 2px rgba(15, 15, 16, .04), 0 30px 60px -40px rgba(15, 15, 16, .45); }
.call__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: .85rem 1.15rem; border-bottom: 1px solid var(--line); }
.call__top b { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.call__top b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.call__lines { margin: 0; padding: .55rem 1.15rem .7rem; list-style: none; }
.call__lines li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .7rem; padding: .4rem 0; color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; }
.call__lines .label { padding-top: .12rem; }
.call__out { display: grid; gap: .3rem; margin: 0; padding: .8rem 1.15rem .95rem; border-top: 1px solid var(--line); background: var(--card-2); font-size: var(--fs-xs); line-height: 1.45; }
.call__out > div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .7rem; }
.call__out dt { color: var(--muted); }
.call__out dd { margin: 0; color: var(--ink); font-weight: 500; }
.call + figcaption, .hero figcaption { margin-top: var(--s-3); color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; text-wrap: pretty; }
/* the same card for other services' artifacts: a run log (automation), an exchange with a connected assistant (setup) */
.call--log .call__lines li { grid-template-columns: 4.6rem minmax(0, 1fr); }
.call--chat .call__lines li, .call--chat .call__out > div { grid-template-columns: 2.4rem minmax(0, 1fr); }

/* ---------- Track: stages joined by a rule with a node on each (receptionist call flow, Lane system) ---------- */
.track { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0 var(--s-5); margin: 0; padding: 0; list-style: none; counter-reset: stage; }
.track > li { position: relative; padding: var(--s-5) 0 0; border-top: 1px solid var(--ink); counter-increment: stage; }
.track > li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.track > li:not(:last-child)::after { content: ""; position: absolute; right: -1px; top: -5px; border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.track .label { display: block; margin-bottom: var(--s-2); }
.track h3 { margin: 0 0 var(--s-2); font-size: 1.12rem; }
.track p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
/* a stage that branches: its outcomes hang off one bracket */
.track__fork { display: grid; gap: var(--s-4); margin: 0; padding: 0 0 0 var(--s-4); border-left: 1px solid var(--line-2); list-style: none; }
.track__fork li { position: relative; }
.track__fork li::before { content: ""; position: absolute; left: calc(var(--s-4) * -1); top: .75em; width: calc(var(--s-4) - 4px); height: 1px; background: var(--line-2); }
.track__fork h3 { margin-bottom: var(--s-1); font-size: 1.02rem; }
@media (max-width: 999px) and (min-width: 700px) {
  .track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .track > li:nth-child(2n)::after { display: none; }
}
@media (max-width: 699px) {
  .track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .track > li { padding: 0 0 var(--s-6) var(--s-5); border-top: 0; border-left: 1px solid var(--ink); }
  .track > li:last-child { padding-bottom: 0; border-left-color: transparent; }
  .track > li::before { left: -5px; top: 0; }
  .track > li:not(:last-child)::after { right: auto; left: -5px; top: auto; bottom: 12px; border: 5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
  .track .label { margin-top: -.2rem; }
}
.track-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.track-wrap > p { max-width: 40rem; margin: 0; color: var(--ink-2); }

/* ---------- Plain ruled table (rollout plan, before/after). No card box: rules only. ---------- */
.ruled { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.55; }
.ruled th, .ruled td { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.ruled tr > :last-child { padding-right: 0; }
.ruled thead th, .ruled thead td { padding-top: 0; padding-bottom: var(--s-3); border-top: 0; color: var(--muted); font: 500 var(--fs-xs)/1.4 var(--f-body); vertical-align: bottom; }
.ruled tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.ruled tbody th { color: var(--ink); font: var(--fw-display) 1.12rem/1.3 var(--f-display); letter-spacing: var(--tr-h3); }
.ruled td { color: var(--ink-2); }
.ruled a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .ruled thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ruled, .ruled tbody, .ruled tr, .ruled th, .ruled td { display: block; width: auto; }
  .ruled tr { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
  .ruled tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .ruled th, .ruled td, .ruled tbody tr:last-child > * { padding: 0; border: 0; }
  .ruled td { margin-top: var(--s-3); }
  .ruled td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .15rem; color: var(--muted); font: 500 var(--fs-xs)/1.4 var(--f-body); }
}

/* comparison (receptionist vs answering service vs voicemail; ChatGPT vs Claude vs Grok): a criterion, then three options.
   Our option is marked only by its cobalt header label: no tinted column. */
@media (min-width: 761px) {
  .ruled--vs tbody th { width: 19%; }
  .ruled--vs tbody td { width: 27%; }
  .ruled--vs tbody th, .ruled--vs tbody td { padding-top: var(--s-4); padding-bottom: var(--s-4); }
}
.ruled--vs thead th.is-us, .ruled--vs td.is-us[data-label]::before { color: var(--accent-text); }

/* rollout plan: phase number + name + when, then what happens, then what you get */
.plan__n { display: block; margin-bottom: var(--s-2); color: var(--muted); font: 500 1rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.plan__when { display: block; margin-top: var(--s-2); color: var(--muted); font: 400 var(--fs-xs)/1.4 var(--f-body); letter-spacing: 0; }
.plan td:last-child { color: var(--ink); font-weight: 500; }
@media (min-width: 761px) { .plan tbody th { width: 24%; } .plan td:last-child { width: 26%; } }
@media (max-width: 760px) { .plan__n { display: inline; margin: 0 .5rem 0 0; } }

/* before / after: the manual version muted, the automated one in ink */
.ba td:nth-of-type(1) { color: var(--muted); }
.ba td:nth-of-type(2) { color: var(--ink); }
.ba thead th:last-child, .ba td:nth-of-type(2)[data-label]::before { color: var(--ink); }
@media (min-width: 761px) {
  .ba tbody th { width: 19%; }
  .ba td { width: 40.5%; }
  .ba td:nth-of-type(2) { position: relative; padding-left: var(--s-6); }
  .ba td:nth-of-type(2)::before { content: "\2192"; content: "\2192" / ""; position: absolute; left: 0; top: var(--s-5); color: var(--accent-text); }
  .ba thead th:last-child { padding-left: var(--s-6); }
}

/* ---------- Anatomy of an agent: in -> agent -> out, guardrails underneath ---------- */
.anatomy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-5) var(--s-7); align-items: stretch; }
.anatomy__part { position: relative; }
.anatomy__part > .label, .anatomy__guard > .label { display: block; margin: 0 0 var(--s-3); }
.anatomy ul { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.anatomy__part li { padding: .7rem 0; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; }
/* the agent itself: the one dark block */
.anatomy__core { padding: var(--s-5) var(--s-5) var(--s-4); border-radius: var(--r-md); background: var(--ink); color: var(--on-ink); }
.anatomy__core > .label { color: var(--on-ink-3); }
.anatomy__core ul { border-color: var(--ink-line); }
.anatomy__core li { border-color: var(--ink-line); color: var(--on-ink); }
.anatomy__core li span { display: block; color: var(--on-ink-3); font-size: var(--fs-xs); }
.anatomy__core h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--s-3); font-size: 1.25rem; }
.anatomy__core h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-on-ink); }
/* arrows in the gaps */
.anatomy__in::after, .anatomy__core::after { content: "\2192"; content: "\2192" / ""; position: absolute; top: 50%; right: calc(var(--s-7) / -2); translate: 50% -50%; color: var(--ink); font-size: 1.2rem; }
.anatomy__guard { grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.anatomy__guard ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); border: 0; }
.anatomy__guard li { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.anatomy__guard li b { display: block; margin-bottom: var(--s-1); color: var(--ink); font: var(--fw-display) 1.05rem/1.3 var(--f-display); letter-spacing: var(--tr-h3); }
@media (max-width: 899px) {
  .anatomy { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .anatomy__in::after, .anatomy__core::after { content: "\2193"; content: "\2193" / ""; top: auto; bottom: calc(var(--s-7) / -2); right: auto; left: 50%; translate: -50% 50%; }
  .anatomy__guard ul { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* ---------- Where AI pays off first: short items, ruled, three across ---------- */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-6); margin: 0; padding: 0; list-style: none; }
.uses li { padding: var(--s-4) 0; border-top: 1px solid var(--line); color: var(--ink); line-height: 1.45; }
@media (max-width: 860px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uses { grid-template-columns: minmax(0, 1fr); } }
.section__foot { max-width: 46rem; margin-top: var(--s-6); color: var(--ink-2); }
.section__foot p { margin: 0 0 var(--s-3); }
.section__foot .note { margin-top: var(--s-4); }

/* ---------- Showcase: real screenshots of live client sites ---------- */
.showcase { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); margin: 0; padding: 0; list-style: none; }
.showcase > li { grid-column: span 2; }
.showcase > li:nth-child(-n+2) { grid-column: span 3; }
.site { display: block; color: inherit; text-decoration: none; }
.site__frame { display: block; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); }
.site__bar { display: flex; align-items: center; height: 30px; padding: 0 .85rem; border-bottom: 1px solid var(--line); background: var(--card-2); color: var(--muted); font: 500 var(--fs-label)/1 var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.site__img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.showcase > li:nth-child(n+3) .site__img { aspect-ratio: 16 / 10; }
.site__body { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding-top: var(--s-4); }
.site__body b { font: var(--fw-display) 1.15rem/1.3 var(--f-display); letter-spacing: var(--tr-h3); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.site:hover b { text-decoration-color: var(--accent); }
.site__body span { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 999px) { .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); } .showcase > li, .showcase > li:nth-child(-n+2) { grid-column: auto; } .showcase > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 620px) { .showcase { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* ---------- Lane case study ---------- */
.lane-hero { margin: 0; }
.lane-hero img { width: 100%; height: auto; }
/* key facts under the hero */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--s-6); margin: var(--s-8) 0 0; }
.facts > div { padding-top: var(--s-3); border-top: 1px solid var(--ink); }
.facts dt { margin-bottom: var(--s-1); color: var(--muted); font-size: var(--fs-xs); }
.facts dd { margin: 0; color: var(--ink); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 999px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); margin-top: var(--s-7); } }
@media (max-width: 520px) { .facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }
/* a screenshot in a browser window, full width */
.frame { margin: 0; }
.frame img { width: 100%; height: auto; border-radius: 15px; box-shadow: 0 1px 2px rgba(15, 15, 16, .06), 0 40px 80px -50px rgba(15, 15, 16, .55); }
figure figcaption.cap, .cap { margin-top: var(--s-3); color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.frame .cap { text-align: center; }
.problem-fig { margin: var(--s-6) 0 0; }
.problem-fig img { width: 100%; max-width: 560px; height: auto; }
.lane-system { --n: 6; gap: 0 var(--s-4); }
.lane-system h3 { font-size: 1.05rem; }
@media (max-width: 1099px) and (min-width: 700px) { .lane-system { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); } .lane-system > li:nth-child(3n)::after { display: none; } .lane-system > li:nth-child(2n)::after { display: block; } }
.below-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-7); margin-top: var(--s-8); }
.below-track > div { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.below-track h3 { margin: 0 0 var(--s-2); font-size: 1.08rem; }
.below-track p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 700px) { .below-track { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-7); } }
/* one job, step by step: copy left, the real screen right */
.screens { margin: 0; padding: 0; list-style: none; counter-reset: scr; }
.screens > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5) clamp(2rem, 6vw, 6rem); align-items: center; padding: var(--s-7) 0; border-top: 1px solid var(--line); counter-increment: scr; }
.screens > li:last-child { border-bottom: 1px solid var(--line); }
.screens__copy::before { content: counter(scr); display: block; margin-bottom: var(--s-3); color: var(--muted); font: 500 1rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.screens h3 { margin: 0 0 var(--s-3); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }
.screens p { max-width: 30rem; margin: 0; color: var(--ink-2); }
.screens figure { display: grid; place-items: center; margin: 0; padding: clamp(1rem, 3vw, 2.5rem); border-radius: var(--r-md); background: var(--paper-2); }
.screens figure img { width: 100%; max-width: 560px; height: auto; }
@media (max-width: 860px) { .screens > li { grid-template-columns: minmax(0, 1fr); padding: var(--s-6) 0; } }
/* phones: the screen runs the full content width, so its UI text stays legible */
@media (max-width: 600px) { .screens figure { padding: 0; border-radius: 0; background: none; } }
/* outcomes: stated plainly, no numbers we can't show */
.outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); margin: 0; padding: 0; list-style: none; }
.outcomes li { padding-top: var(--s-4); border-top: 1px solid var(--ink); }
.outcomes h3 { margin: 0 0 var(--s-2); font-size: 1.15rem; }
.outcomes p { margin: 0; color: var(--ink-2); }
@media (max-width: 700px) { .outcomes { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }

/* ---------- 404 ---------- */
.nf__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: end; }
.nf__bot { width: clamp(150px, 18vw, 230px); margin-bottom: -1rem; }
.nf__bot img { width: 100%; height: auto; }
@media (max-width: 700px) { .nf__grid { grid-template-columns: minmax(0, 1fr); } .nf__bot { order: -1; width: 112px; margin: -1rem 0 -1rem -.6rem; } }

/* ---------- Small pieces ---------- */
.hero--long { padding-bottom: var(--s-8); }
.section--flush { padding-top: 0; border-top: 0; }
.hero__call { margin: 0; }
/* a linked example with a real screenshot (receptionist -> Lane) */
.prose a.case-link:not(.btn) { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--s-5); align-items: center; margin-top: var(--s-6); padding: var(--s-4); border-radius: var(--r-md); background: var(--paper-2); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 400; line-height: 1.5; text-decoration: none; }
.case-link img { width: 100%; height: auto; }
.case-link b { display: block; margin-top: var(--s-2); color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (max-width: 520px) { .prose a.case-link:not(.btn) { grid-template-columns: minmax(0, 1fr); } }
/* a short aside under a split heading (setup safety notes, the build stack) */
.split > :first-child .aside { max-width: 24rem; margin-top: var(--s-6); font-size: var(--fs-sm); }
.aside .aside__h { margin: 0 0 var(--s-2); font-size: 1.02rem; }
.aside p { margin: 0 0 var(--s-2); }
.aside ul { margin: 0; }
.aside .deflist { margin: 0; }
.plan__tools { margin-top: var(--s-8); }
/* tools, full width: one row of ruled columns (agency, assistant setup), so a page doesn't stack split after split */
.toolgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-5) var(--s-6); margin: 0; }
.toolgrid > div { padding-top: var(--s-3); border-top: 1px solid var(--ink); }
.toolgrid dt { margin-bottom: var(--s-2); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
.toolgrid dd { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.plan__tools h3 { margin: 0; }
.related .label { display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--fs-label); }

/* page.css .rows--plain on phones: its text cell inherits grid-column 2 from .rows and overlaps the title; keep both in one column */
@media (max-width: 760px) { .rows.rows--plain > li > h3, .rows.rows--plain > li > p { grid-column: 1; } }