/* ==========================================================================
   How it Works (how-it-works/index.html). Page-only styles.
   One line runs through the process: the phone on the dash rings (hero), a
   drawn route links the three phases, each phase shows its product UI (the site
   that gets built, the calls that start coming in, the service area that grows),
   then the system adds up, the timeline draws, and the guarantees close it out.
   ========================================================================== */

/* ---------- 1. Hero ------------------------------------------------------- */
.how-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: max(100svh, 680px);
  background: var(--void);
}
.how-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; }
/* A box with the photo's own aspect ratio that covers the hero like object-fit: cover,
   so the rings can sit exactly on the phone in the photo at any viewport size. */
.how-hero__box {
  --z: 1.18;
  --px: .22;
  --py: .56;
  --bw: calc(max(100cqw, 100cqh * 1.4995) * var(--z));
  --bh: calc(var(--bw) / 1.4995);
  position: absolute;
  width: var(--bw);
  height: var(--bh);
  left: calc((100cqw - var(--bw)) * var(--px));
  top: calc((100cqh - var(--bh)) * var(--py));
}
.how-hero__box img { width: 100%; height: 100%; max-width: none; transform: scaleX(-1); }
.how-hero__rings {
  --signal-size: calc(var(--bw) * .4);
  --signal-dur: 2.1s;
  left: 58.2%;
  top: 61%;
  margin: calc(var(--signal-size) * -.18) 0 0 calc(var(--signal-size) / -2);
  transform: rotate(-9deg);
}
.how-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 12, .92) 0%, rgba(5, 8, 12, .78) 26%, rgba(5, 8, 12, .2) 50%, rgba(5, 8, 12, 0) 64%),
    linear-gradient(180deg, rgba(5, 8, 12, .62) 0%, rgba(5, 8, 12, 0) 22%, rgba(5, 8, 12, 0) 62%, rgba(5, 8, 12, .6) 86%, var(--void) 100%);
}
.how-hero__inner { width: 100%; padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(3.5rem, 9vh, 7rem); }
.how-hero__copy { display: grid; gap: clamp(1.1rem, 2.4vh, 1.75rem); justify-items: start; max-width: 660px; }
.how-hero__copy h1 { font-size: min(clamp(3.75rem, 1rem + 9.4vw, 9.5rem), 17vh); line-height: .86; letter-spacing: -.045em; }
@media (min-width: 600px) { .how-hero__copy h1 { max-width: 6.2ch; } }
.how-hero__lede { max-width: 30ch; font-size: var(--step-2); line-height: 1.25; color: var(--text); letter-spacing: -.01em; }

@media (max-width: 899.98px) {
  .how-hero { align-items: flex-start; min-height: max(100svh, 720px); }
  .how-hero__box { --z: 1.12; --px: .6; --py: .15; }
  .how-hero__media::after {
    background: linear-gradient(180deg, rgba(5, 8, 12, .92) 0%, rgba(5, 8, 12, .84) 36%, rgba(5, 8, 12, .15) 58%, rgba(5, 8, 12, .1) 84%, var(--void) 100%);
  }
  .how-hero__inner { padding-top: calc(var(--header-h) + 1.75rem); }
  .how-hero__copy .btn-row { width: 100%; }
  .how-hero__copy .btn { flex: 1 1 auto; }
}
@media (max-width: 899.98px) and (min-width: 600px) {
  .how-hero__box { --z: 1; --px: .72; --py: 1; }
}

/* ---------- 2. Intro ------------------------------------------------------ */
.how-intro { padding-top: var(--space-xl); }
.how-intro__grid { display: grid; gap: var(--space-l); }
.how-intro__title { font-size: clamp(2.25rem, 1rem + 3.2vw, 4rem); max-width: 15ch; }
.how-intro__body { display: grid; gap: var(--space-m); }
.outcomes { border-top: 1px solid var(--line-2); }
.outcomes li,
.expect__list li {
  display: flex;
  align-items: baseline;
  gap: .95rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.12;
  letter-spacing: -.028em;
  word-spacing: .03em;
}
/* A drawn tick (two strokes), not an icon */
.outcomes li::before,
.expect__list li::before,
.ticks li::before,
.seeing li::before {
  content: "";
  flex: none;
  width: .5em;
  height: .26em;
  border-left: .12em solid var(--cyan);
  border-bottom: .12em solid var(--cyan);
  transform: translateY(-.28em) rotate(-45deg);
}
@media (min-width: 960px) {
  .how-intro__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: var(--space-xl); align-items: end; }
}

/* ---------- 3. The process ------------------------------------------------ */
.process { position: relative; padding-block: var(--space-xl) var(--space-2xl); }
.process__inner { position: relative; display: grid; gap: var(--space-2xl); }
.process__svg { left: var(--gutter); width: 20px; top: var(--route-top, 0); height: var(--route-h, 100%); }

.step { position: relative; display: grid; gap: var(--space-xl); padding-left: clamp(2.75rem, 6vw, 6.5rem); }
.step__copy { position: relative; min-width: 0; }
.step__node { position: absolute; left: calc(-1 * clamp(2.75rem, 6vw, 6.5rem) + 1px); top: calc(.46em - 9px); font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.75rem); }
.step__title { font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.75rem); line-height: .95; letter-spacing: -.042em; max-width: 12ch; }
.step__when { margin-top: .9rem; color: var(--cyan); font-weight: 600; font-size: 1.0625rem; }
.step__lede { margin-top: var(--space-m); font-size: var(--step-1); line-height: 1.5; color: var(--text-2); max-width: 42ch; }
.step__lists { display: grid; gap: var(--space-l); margin-top: var(--space-l); }
.step__list-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  word-spacing: 0;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: .5rem;
}
.ticks li {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding-block: .62rem;
  border-top: 1px solid var(--line);
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--text);
}
.ticks li::before { font-size: 1.15rem; }
.step__goal {
  margin-top: var(--space-l);
  padding-left: 1.25rem;
  border-left: 2px solid var(--cyan);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text);
  max-width: 44ch;
}
.step__goal strong { font-weight: 600; }
.step__result { margin-top: var(--space-l); font-size: var(--step-1); line-height: 1.45; color: var(--text-2); max-width: 40ch; }
.step__result + .step__goal { margin-top: var(--space-m); }
.step__seeing { margin-top: var(--space-l); }
.seeing { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.seeing li {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -.028em;
}
.step__visual { margin: 0; min-width: 0; }
.step__cap { margin-top: .9rem; font-size: .875rem; color: var(--muted); }

@media (min-width: 720px) {
  .step__lists:not(.step__lists--one) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--space-l); }
}
@media (min-width: 1080px) {
  .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(3rem, 5vw, 6rem); align-items: start; }
  .step__visual { position: sticky; top: calc(var(--header-h) + 6vh); }
  .step__lists:not(.step__lists--one) { grid-template-columns: 1fr; }
}
@media (min-width: 1280px) {
  .step__lists:not(.step__lists--one) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* 3a. The site that gets built: a real client page with call-outs */
.build__frame { position: relative; }
.build__frame img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(234, 241, 247, .1), 0 50px 90px -40px rgba(0, 0, 0, .95);
}
.build__frame { margin-block: 3.25rem 4.5rem; }
.callout { position: absolute; inset: 0; pointer-events: none; }
.callout__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(5, 8, 12, .9);
  z-index: 1;
}
.callout__line { position: absolute; left: var(--x); width: 1.5px; margin-left: -.75px; background: rgba(0, 198, 242, .85); }
.callout--up .callout__line { top: -22px; height: calc(var(--y) + 22px); }
.callout--down .callout__line { top: var(--y); bottom: -22px; }
.callout__text {
  position: absolute;
  white-space: nowrap;
  padding: .42rem .7rem .45rem;
  border-radius: 8px;
  background: var(--night-2);
  border: 1px solid rgba(0, 198, 242, .55);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
}
.callout--up .callout__text { bottom: calc(100% + 22px); }
.callout--down .callout__text { top: calc(100% + 22px); }
.callout--start .callout__text { left: calc(var(--x) - 12px); }
.callout--end .callout__text { right: calc(100% - var(--x) - 12px); }
@media (max-width: 599.98px) {
  .build__frame { margin-block: 3rem 4.75rem; }
  .callout__text { font-size: .75rem; padding: .3rem .5rem; white-space: normal; width: max-content; max-width: 42vw; }
}

/* 3b. The calls that start coming in */
.calls__panel {
  --call-h: 4.5rem;
  max-width: 540px;
  border-radius: var(--radius-l);
  background: var(--night-2);
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95);
  overflow: hidden;
}
.calls__head, .area__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 1.35rem .95rem;
  border-bottom: 1px solid var(--line);
}
.calls__title, .area__title { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -.02em; }
.calls__sub, .area__sub { font-size: .8125rem; color: var(--muted); text-align: right; }
.calls__viewport { height: calc(var(--call-h) * 5); overflow: hidden; }
.calls__list { margin: 0; padding: 0; list-style: none; }
.call {
  height: var(--call-h);
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  padding: 0 1.35rem;
  border-bottom: 1px solid var(--line);
}
.call__icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 198, 242, .12); color: var(--cyan); }
.call__icon svg { width: 1.05rem; height: 1.05rem; }
.call__body, .call__meta { display: grid; min-width: 0; }
.call__num { font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; }
.call__where { font-size: .875rem; color: var(--muted); }
.call__meta { justify-items: end; text-align: right; }
.call__when { font-size: .8125rem; color: var(--text-2); }
.call__src { font-size: .8125rem; color: var(--cyan); white-space: nowrap; }
@media (max-width: 599.98px) {
  .calls__head, .area__head { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .calls__sub, .area__sub { text-align: left; }
  .area__map { width: 150%; max-width: none; margin-left: -22%; }
}
@media (max-width: 479.98px) {
  .call__from { display: none; }
  .calls__panel { --call-h: 4.3rem; }
  .call { gap: .7rem; padding: 0 1rem; grid-template-columns: 2.1rem minmax(0, 1fr) auto; }
  .call__icon { width: 2.1rem; height: 2.1rem; }
  .call__num { font-size: .9375rem; }
  .call__src { font-size: .75rem; }
}

/* 3c. The service area that grows */
.area__panel {
  border-radius: var(--radius-l);
  background: var(--night);
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95);
  overflow: hidden;
}
.area__map { display: block; width: 100%; height: auto; }
.area__roads path { fill: none; stroke: rgba(234, 241, 247, .17); stroke-width: 3; stroke-linecap: round; }
.area__roads path.minor { stroke: rgba(234, 241, 247, .1); stroke-width: 1.5; }
.area__ring {
  fill: rgba(0, 198, 242, .055);
  stroke: rgba(0, 198, 242, .6);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  transform-box: fill-box;
  transform-origin: center;
}
.area__ring--1 { fill: rgba(0, 198, 242, .12); stroke-dasharray: none; }
.town circle { fill: #43546A; transition: fill .5s var(--ease-out); }
.town text { fill: var(--muted); font-family: var(--font-body); font-weight: 600; font-size: 15px; transition: fill .5s var(--ease-out); }
.town .town__page, .area__you .town__page { fill: var(--cyan); font-size: 12px; font-weight: 500; }
.town--off text { font-weight: 500; font-size: 13px; }
.town .town__page { transition: opacity .5s var(--ease-out); }
.town.is-off circle { fill: #43546A; }
.town.is-off text { fill: var(--muted); }
.town.is-off .town__page { opacity: 0; }
.town--2 circle, .town--3 circle { fill: var(--cyan); }
.town--2 text, .town--3 text { fill: #fff; }
.area__you path { fill: var(--cyan); }
.area__you circle { fill: var(--void); }
.area__you text { fill: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.area__you .town__page { font-family: var(--font-body); letter-spacing: 0; }

/* ---------- 4. Why it works: the ledger ----------------------------------- */
.why__grid { display: grid; gap: var(--space-xl); }
.why__head { display: grid; gap: var(--space-m); align-content: start; }
.why__head h2 { max-width: 10ch; }
.ledger__lines li {
  position: relative;
  padding: .95rem 0 .95rem 2.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -.036em;
  word-spacing: .04em;
  text-wrap: balance;
}
.ledger__lines li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: .95rem;
  font-family: var(--font-num);
  font-weight: 900;
  line-height: 1.02;
  color: var(--cyan);
}
.ledger__rule { height: 8px; margin-top: 1.1rem; }
.ledger__rule .route__line { stroke-width: 3; }
.ledger__total {
  margin-top: 1.35rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-4);
  line-height: .96;
  letter-spacing: -.045em;
  word-spacing: .06em;
  max-width: 11ch;
  text-wrap: balance;
}
@media (min-width: 960px) {
  .why__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: var(--space-xl); }
  .why__head { position: sticky; top: calc(var(--header-h) + 4vh); }
}

/* ---------- 5. What you can expect ---------------------------------------- */
.expect__media img { object-position: 42% 50%; }
.expect__body { display: grid; gap: var(--space-m); align-content: center; padding-block: var(--space-m); }
.expect__body h2 { max-width: 10ch; }
.expect__list { border-top: 1px solid var(--line-2); }
.expect__pull {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.12;
  letter-spacing: -.028em;
  max-width: 24ch;
}

/* ---------- 6. How long: the timeline ------------------------------------- */
.timeline { padding-bottom: var(--space-xl); }
.timeline__head { display: grid; gap: var(--space-l); }
.timeline__head h2 { max-width: 13ch; }
.timeline__intro { display: grid; gap: .75rem; }
.timeline__within { font-size: var(--step-1); color: var(--text); }
.chart { position: relative; margin-top: var(--space-xl); }
.chart__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.chart__stat .stat__num { --stat-size: clamp(3.25rem, 1.4rem + 5vw, 7rem); }
.chart__stat .stat__label { font-size: 1rem; color: var(--text-2); }
.chart__plot {
  position: relative;
  height: clamp(200px, 24vw, 360px);
  margin-top: var(--space-l);
}
.chart__band { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(0, 198, 242, .45); }
.chart__band--a { left: 25%; width: 25%; background: rgba(0, 198, 242, .05); }
.chart__band--b { left: 50%; width: 25%; background: rgba(0, 198, 242, .1); border-right: 1px dashed rgba(0, 198, 242, .45); }
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__grid { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.chart__curve, .chart__curve-bg { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.chart__curve { stroke: var(--cyan); stroke-width: 3; }
.chart__curve-bg { stroke: rgba(234, 241, 247, .16); stroke-width: 1.5; stroke-dasharray: 2 7; }
.chart__dot {
  position: absolute;
  left: 100%;
  top: 3%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px var(--void);
}
.chart__ticks { position: absolute; left: 0; right: 0; bottom: -2.1rem; height: 1.5rem; }
.chart__ticks li { position: absolute; left: var(--at); font-size: .875rem; color: var(--muted); transform: translateX(-50%); white-space: nowrap; }
.chart__ticks li:first-child { transform: none; }
.chart__note {
  margin-top: 3.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.12;
  letter-spacing: -.028em;
  max-width: 20ch;
}
.timeline__commit { margin-top: var(--space-xl); font-size: var(--step-1); color: var(--text-2); max-width: 46ch; }
@media (min-width: 960px) {
  .timeline__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; column-gap: var(--space-xl); }
  .chart__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .chart__stat { padding-left: 1rem; }
  .chart__stat--a { grid-column: 2; }
  .chart__stat--b { grid-column: 3; }
  .chart__note { position: absolute; right: 0; top: 0; margin: 0; text-align: right; max-width: 14ch; }
  .chart { padding-bottom: 2.5rem; }
}

/* ---------- 7. Guarantees (daylight) -------------------------------------- */
.promise__grid { display: grid; gap: var(--space-xl); }
.promise__main { display: grid; gap: var(--space-l); align-items: center; }
.territory { position: relative; width: min(100%, 420px); aspect-ratio: 1; }
.territory__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.territory__fill { fill: rgba(0, 130, 168, .07); }
.territory__road { fill: none; stroke: rgba(10, 17, 27, .16); stroke-width: 5; stroke-linecap: round; }
.territory__road--minor { stroke-width: 2.5; stroke: rgba(10, 17, 27, .1); }
.territory .territory__ring { stroke: var(--cyan-deep); stroke-width: 2.5; }
.territory__you path { fill: var(--cyan-deep); }
.territory__you circle { fill: #fff; }
.territory__label { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; fill: var(--ink); }
.territory__area { font-family: var(--font-body); font-weight: 500; font-size: 15px; fill: var(--ink-muted); }
/* Halo: a stroke-only copy drawn underneath the label. paint-order on the label itself
   broke: with letter-spacing, browsers paint glyph by glyph, so each halo covered the
   previous letter. */
.territory__halo { fill: #EDF3F7; stroke: #EDF3F7; stroke-width: 7px; stroke-linejoin: round; }
.territory__area.territory__halo { stroke-width: 6px; }
.promise__copy { display: grid; gap: var(--space-m); }
.promise__copy h2 { font-size: var(--step-4); max-width: 10ch; }
.promise__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.04;
  letter-spacing: -.035em;
  word-spacing: .04em;
  max-width: 19ch;
  text-wrap: balance;
}
.promise__copy p:last-child { font-size: var(--step-1); line-height: 1.5; color: var(--ink-muted); max-width: 44ch; }
.promise__second { display: grid; gap: var(--space-s); padding-top: var(--space-l); border-top: 1px solid var(--ink-line); }
.promise__title { font-size: var(--step-3); max-width: 16ch; }
.promise__second p { font-size: var(--step-1); line-height: 1.5; color: var(--ink-muted); max-width: 48ch; }
@media (min-width: 960px) {
  .promise__main { grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); column-gap: var(--space-xl); }
  .promise__second { grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); column-gap: var(--space-xl); align-items: start; }
}

/* ---------- 8. Finale ----------------------------------------------------- */
.page-how .finale__bg img { object-position: 55% 55%; }

/* Load check: the inline stylesheet guard re-fetches this file if this rule is missing. Keep it last. */
:root { --css-how-it-works: 1; }