/* Inner pages: services, about and guides. Uses the tokens and components in style.css. */

.pg { padding-top: var(--nav-h); }
.pg-links a[aria-current="page"] { color: var(--ink); }
.pg-cta { flex: none; }

/* ---------- page hero ---------- */
.pg-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); background-image: var(--dots); background-size: 16px 16px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 30px; font: 400 12.5px/1.4 var(--mono); color: var(--mute); }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--jade-ink); }
.crumbs span[aria-hidden] { color: var(--line-2); }
.pg-h1 { font: 600 clamp(40px, 6vw, 84px)/1 var(--sans); letter-spacing: -.05em; color: var(--ink); max-width: 17ch; text-wrap: balance; }
.pg-lede { margin-top: 26px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
.pg-ctas { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }

.byline { display: flex; gap: 14px; align-items: center; margin-top: 30px; }
.byline img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.byline p { font-size: 14.5px; line-height: 1.45; color: var(--mute); }
.byline b { display: block; color: var(--ink); font-weight: 600; }
.disclose { margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font-size: 15px; line-height: 1.55; max-width: 62ch; }

/* ---------- sections ---------- */
.pg-sec { padding: clamp(64px, 8vw, 112px) 0; border-bottom: 1px solid var(--line); }
.pg-sec.alt { background: var(--bg-2); }
.pg-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pg-side { position: sticky; top: calc(var(--nav-h) + 32px); }
.pg-h2 { font: 600 clamp(30px, 3.4vw, 48px)/1.05 var(--sans); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; max-width: 16ch; }
.pg-side p { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 40ch; }

.pg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
a.bx { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.bx-go { margin-top: auto; padding-top: 18px; display: inline-flex; gap: 8px; align-items: center; font: 500 14.5px var(--sans); color: var(--jade-ink); }
a.bx:hover .arr { translate: 3px 0; }

.prose > * + * { margin-top: 16px; }
.prose p, .prose li { font-size: 17.5px; line-height: 1.65; color: var(--ink-2); max-width: 64ch; }
.prose h3 { margin-top: 40px; font: 600 23px/1.2 var(--sans); letter-spacing: -.03em; }
.prose > h3:first-child { margin-top: 0; }
.prose ul { border-top: 1px solid var(--line); }
.prose ul li { margin: 0; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--line); position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: calc(12px + .66em); width: 7px; height: 7px; background: var(--jade); }
.prose a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.prose a:hover { text-decoration-color: var(--jade); }
.prose b { color: var(--ink); font-weight: 600; }

/* numbered questions in guides */
.qs { counter-reset: q; border-top: 1px solid var(--line); }
.qs > li { counter-increment: q; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.qs > li::before { content: counter(q, decimal-leading-zero); grid-row: span 2; font: 400 22px/1.2 var(--pixel); color: var(--jade-ink); }
.qs h3 { font: 600 21px/1.25 var(--sans); letter-spacing: -.03em; }
.qs p { font-size: 17px; line-height: 1.6; max-width: 62ch; }

/* before and after rows */
.swap { border-top: 1px solid var(--line); }
.swap li { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.45; }
.swap .from { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px; }
.swap .to { color: var(--ink); font-weight: 500; }

/* example run log */
.runlog { border: 1px solid var(--line); border-radius: 16px; background: var(--white); padding: 6px 22px; }
.runlog li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; }
.runlog li:last-child { border-bottom: 0; }
.runlog time { font: 400 13px/1.7 var(--mono); color: var(--jade-ink); }
.runlog-note { margin-top: 12px; font-size: 13px; color: var(--mute); }

/* products list on about and websites pages */
.built { border-top: 1px solid var(--line); }
.built li { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); gap: 8px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.built h3 { font: 600 21px/1.2 var(--sans); letter-spacing: -.03em; }
.built h3 a { text-decoration: none; }
.built h3 a:hover { color: var(--jade-ink); }
.built p { font-size: 16.5px; line-height: 1.6; }
.built .k { display: block; margin-top: 6px; font: 400 12.5px/1.5 var(--mono); color: var(--mute); }

/* company facts */
.facts { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.facts dt, .facts dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 400 13px/1.7 var(--mono); color: var(--mute); }
.facts dd { font-size: 16.5px; color: var(--ink); }
.facts a { text-underline-offset: 3px; text-decoration-color: var(--line-2); }

.about-ph { margin: 0; }
.about-ph img { width: 100%; max-width: 420px; border-radius: 18px; }
.about-ph figcaption { margin-top: 10px; font-size: 13px; color: var(--mute); }

/* closing call to action */
.pg-band { padding: clamp(72px, 9vw, 128px) 0; background-image: radial-gradient(rgba(95, 224, 178, .07) 1px, transparent 1.3px); background-size: 16px 16px; }
.pg-band-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 48px; flex-wrap: wrap; }
.pg-band .h2 { max-width: 15ch; }
.pg-band .sec-lede { margin-top: 18px; }

@media (max-width: 960px) {
  .pg-cta { display: inline-flex; height: 40px; padding: 0 16px; font-size: 14px; }
  .pg-row { grid-template-columns: 1fr; }
  .pg-side { position: static; }
}

@media (max-width: 640px) {
  .pg-cards { grid-template-columns: 1fr; }
  .swap li { grid-template-columns: 1fr; gap: 4px; }
  .built li { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
  .facts dd { padding-top: 4px; }
  .qs > li { grid-template-columns: 38px minmax(0, 1fr); gap: 6px 12px; }
  .qs > li::before { font-size: 18px; }
  .pg-ctas .btn { width: 100%; }
  .pg-band .btn { width: 100%; }
}

/* full-width section head, used above the four build steps */
.pg-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.pg-head p { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
@media (max-width: 960px) { .pg-head { grid-template-columns: 1fr; } }
.pg-side .about-ph { margin-top: 28px; }