:root {
  --ink: #151513;
  --paper: #f3f0e8;
  --cream: #faf8f1;
  --white: #fffef9;
  --blue: #244de8;
  --blue-dark: #1738b8;
  --coral: #ff8066;
  --mint: #9de0bd;
  --yellow: #f5d96f;
  --line: rgba(21, 21, 19, .16);
  --muted: #69675f;
  --shadow: 0 30px 70px rgba(25, 29, 27, .11);
  --radius-lg: 30px;
  --radius-md: 20px;
  --display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: min(1520px, calc(100% - 72px)); margin: 0 auto; }

.site-header {
  height: 88px; width: min(1520px, calc(100% - 72px)); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-weight: 900; font-size: 23px; letter-spacing: -.8px; }
.brand-mark { width: 29px; height: 29px; display: flex; align-items: flex-end; gap: 3px; padding: 5px; border-radius: 8px; background: var(--blue); transform: rotate(-3deg); }
.brand-mark i { width: 4px; border-radius: 3px; background: white; transform-origin: bottom; }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 13px; }.brand-mark i:nth-child(3) { height: 18px; }
.nav-links { display: flex; align-items: center; gap: 36px; font-size: 14px; font-weight: 650; }
.nav-links a, .text-link { transition: opacity .2s ease; }
.nav-links a:hover, .text-link:hover { opacity: .58; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 700; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 55px; padding: 0 22px; border-radius: 12px; background: var(--blue); color: white; font-weight: 800; font-size: 15px; box-shadow: 0 7px 0 var(--blue-dark); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button span { font-size: 20px; line-height: 1; }
.button:hover { transform: translateY(3px); box-shadow: 0 4px 0 var(--blue-dark); background: #3159ee; }
.button-small { min-height: 41px; padding: 0 15px; gap: 13px; border-radius: 9px; box-shadow: none; font-size: 13px; }

.hero { min-height: 760px; display: grid; grid-template-columns: minmax(390px, 40%) minmax(620px, 60%); align-items: center; gap: 38px; padding: 72px 0 62px; overflow: hidden; }
.hero-copy { align-self: center; max-width: 580px; padding-right: 12px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 27px; font-size: 11px; line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: 1.8px; }
.eyebrow span { width: 26px; height: 3px; background: var(--coral); border-radius: 3px; }
h1 { margin: 0; max-width: 650px; font-family: var(--display); font-size: clamp(52px, 4.5vw, 80px); line-height: .96; letter-spacing: -4.8px; font-weight: 900; }
h1 em { position: relative; display: inline-block; color: var(--blue); font-style: normal; }
h1 em::after { content: ""; position: absolute; left: -3px; right: -8px; bottom: -5px; height: 9px; background: url("data:image/svg+xml,%3Csvg width='250' height='10' viewBox='0 0 250 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7C65 1 174 2 247 5' stroke='%23ff8066' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.rotating-target-wrap { display: inline-block; min-width: 10.5ch; overflow: hidden; vertical-align: bottom; }
.rotating-target { transform-origin: left center; }
.rotating-target.is-leaving { animation: targetWordOut .24s ease-in both; }
.rotating-target.is-entering { animation: targetWordIn .34s cubic-bezier(.2,.8,.25,1) both; }
@keyframes targetWordOut { to { opacity: 0; transform: translateY(-45%) rotate(-2deg); } }
@keyframes targetWordIn { from { opacity: 0; transform: translateY(55%) rotate(2deg); } to { opacity: 1; transform: none; } }
.hero-lede { max-width: 550px; margin: 28px 0 30px; color: #525149; font-size: 18px; line-height: 1.55; font-weight: 500; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.watch-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; }
.play { width: 33px; height: 33px; display: grid; place-items: center; padding-left: 2px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 10px; }
.microcopy { display: flex; gap: 9px; align-items: flex-start; max-width: 460px; margin: 31px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 650; }
.micro-icon { color: var(--blue); font-size: 15px; }

.clarity-strip { min-height: 100px; padding: 22px 48px; display: flex; align-items: center; justify-content: center; gap: 31px; background: var(--ink); color: white; font-size: 12px; font-weight: 900; letter-spacing: 1.1px; }.clarity-strip i { color: var(--coral); font-style: normal; font-size: 25px; }.clarity-strip strong { padding: 10px 13px; background: var(--mint); color: var(--ink); border-radius: 7px; transform: rotate(-1deg); }
.mobile-sticky { display: none; }

/* Hero illustration — shared bits */
.result-check { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-size: 16px; font-weight: 900; }

.replay-value { position: absolute; z-index: 10; right: 17px; bottom: 17px; padding: 7px 9px; border: 0; border-radius: 7px; color: #52705e; background: transparent; font-size: 8px; font-weight: 850; cursor: pointer; opacity: .7; }.replay-value:hover { color: var(--ink); background: rgba(255,255,255,.65); opacity: 1; }

/* Hero network illustration — one-by-one becomes country-wide */
.network-illustration {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  isolation: isolate;
  background: #ffff;
  border: 1.5px solid var(--ink);
  border-radius: 30px;
  box-shadow: 12px 13px 0 var(--coral), var(--shadow);
}
.network-illustration::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(255,255,255,.55),transparent 42%); }
.network-label { position:absolute; z-index:8; left:24px; top:22px; display:flex; align-items:center; gap:8px; color:#5e625d; font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.9px; }
.network-label span { width:7px; height:7px; background:var(--blue); border-radius:50%; box-shadow:0 0 0 4px rgba(36,77,232,.12); }
.network-state { position:absolute; z-index:8; right:22px; top:18px; min-width:180px; padding:10px 12px; display:flex; align-items:center; gap:9px; background:var(--white); border:1px solid var(--ink); border-radius:9px; box-shadow:3px 4px 0 var(--yellow); transform:rotate(1deg); }
.network-state span { padding:5px 6px; color:var(--ink); background:var(--coral); border-radius:4px; font-size:7px; font-weight:900; letter-spacing:.5px; transition:background .25s,color .25s; }.network-state strong { font-size:9px; }
.network-illustration.batch-mode .network-state span { color:white; background:var(--blue); }.network-illustration.batch-mode .network-state { box-shadow:3px 4px 0 var(--mint); }
.person-italy-art { position:absolute; z-index:1; left:1.5%; right:1.5%; top:75px; width:97%; height:auto; pointer-events:none; }
.network-connectors { position:absolute; z-index:3; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.network-connectors path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.manual-connector { stroke:#77756e; stroke-width:2; stroke-dasharray:.045 .075; stroke-dashoffset:.5; opacity:.78; }
.rome-pin { fill:var(--white); stroke:var(--ink); stroke-width:2; vector-effect:non-scaling-stroke; opacity:.28; transform-box:fill-box; transform-origin:center; }
.manual-mail { opacity:0; }.manual-mail rect { fill:var(--white); stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke; }.manual-mail > path { fill:none; stroke:var(--blue); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.batch-mail { opacity:0; }.batch-mail rect { fill:var(--white); stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke; }.batch-mail > path { fill:none; stroke:var(--blue); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.source-connector { stroke:var(--ink); stroke-width:2.2; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; }
.batch-connectors path { stroke:var(--blue); stroke-width:2.2; stroke-dasharray:.035 .022; opacity:0; }
.batch-connectors path:nth-child(3n+2) { stroke:#e85e49; }.batch-connectors path:nth-child(3n) { stroke:#28764d; }
.location-pins circle { fill:var(--white); stroke:var(--ink); stroke-width:2; vector-effect:non-scaling-stroke; opacity:.28; transform-box:fill-box; transform-origin:center; }
.network-illustration.playing .manual-connector { animation:manualSend 4.8s .35s linear both; }
.network-illustration.playing .manual-mail { animation:manualMailVisible .16s var(--mail-delay,.15s) both; }.network-illustration.playing .manual-mail:nth-child(2){--mail-delay:.85s}.network-illustration.playing .manual-mail:nth-child(3){--mail-delay:1.55s}.network-illustration.playing .manual-mail:nth-child(4){--mail-delay:2.25s}
.network-illustration.playing .rome-pin { animation:singlePin .35s 4.85s cubic-bezier(.2,.8,.25,1.2) both; }
.network-illustration.batch-mode .manual-connector { opacity:.12; transition:opacity .25s; }
.network-illustration.batch-mode .manual-mails { opacity:0; transition:opacity .18s; }
.network-illustration.batch-mode .rome-pin { opacity:1; fill:var(--mint); transition:fill .25s,opacity .25s; }
.network-illustration.batch-mode .source-connector { animation:sourceDraw .42s ease-out both; }
.network-illustration.batch-mode .batch-connectors path { animation:networkDraw .58s var(--delay,0s) ease-out both, connectorDash .72s calc(.58s + var(--delay,0s)) linear infinite; }
.network-illustration.batch-mode .batch-mail { animation:batchMailVisible .12s var(--batch-delay,0s) both; }.batch-mail:nth-child(2){--batch-delay:.055s}.batch-mail:nth-child(3){--batch-delay:.11s}.batch-mail:nth-child(4){--batch-delay:.165s}.batch-mail:nth-child(5){--batch-delay:.22s}.batch-mail:nth-child(6){--batch-delay:.275s}.batch-mail:nth-child(7){--batch-delay:.33s}.batch-mail:nth-child(8){--batch-delay:.385s}.batch-mail:nth-child(9){--batch-delay:.44s}
.batch-connectors path:nth-child(2){--delay:.05s}.batch-connectors path:nth-child(3){--delay:.1s}.batch-connectors path:nth-child(4){--delay:.15s}.batch-connectors path:nth-child(5){--delay:.2s}.batch-connectors path:nth-child(6){--delay:.25s}.batch-connectors path:nth-child(7){--delay:.3s}.batch-connectors path:nth-child(8){--delay:.35s}.batch-connectors path:nth-child(9){--delay:.4s}
.network-illustration.batch-mode .location-pins circle { animation:batchPin .34s var(--pin-delay,0s) cubic-bezier(.2,.8,.25,1.25) both; }
.location-pins circle:nth-child(2){--pin-delay:.12s}.location-pins circle:nth-child(3){--pin-delay:.19s}.location-pins circle:nth-child(4){--pin-delay:.26s}.location-pins circle:nth-child(5){--pin-delay:.33s}.location-pins circle:nth-child(6){--pin-delay:.4s}.location-pins circle:nth-child(7){--pin-delay:.47s}.location-pins circle:nth-child(8){--pin-delay:.54s}.location-pins circle:nth-child(9){--pin-delay:.61s}
.reachwork-hub { position:absolute; z-index:6; left:38.1%; top:40%; width:98px; display:flex; flex-direction:column; align-items:center; opacity:0; transform:scale(.7); }
.reachwork-hub > span { position:relative; width:69px; height:69px; display:grid; place-items:center; color:white; background:var(--ink); border:1.5px solid var(--ink); border-radius:20px; box-shadow:5px 5px 0 var(--mint); font-family:var(--display); font-size:27px; }.reachwork-hub i { position:absolute; right:7px; bottom:5px; color:var(--mint); font-size:13px; font-style:normal; }.reachwork-hub b { margin-top:11px; padding:4px 6px; color:white; background:var(--ink); border-radius:4px; font-size:6px; letter-spacing:.7px; }
.reachwork-hub::before,.reachwork-hub::after { content:""; position:absolute; left:50%; top:34px; width:95px; height:95px; border:1px solid var(--blue); border-radius:50%; transform:translate(-50%,-50%); opacity:0; }
.network-illustration.batch-mode .reachwork-hub { animation:hubOn .45s cubic-bezier(.2,.8,.25,1.15) both; }.network-illustration.batch-mode .reachwork-hub::before { animation:hubRing 1.2s .15s ease-out infinite; }.network-illustration.batch-mode .reachwork-hub::after { animation:hubRing 1.2s .55s ease-out infinite; }

.single-send-label { position:absolute; z-index:7; left:72%; top:49%; padding:7px 9px; display:flex; align-items:center; gap:7px; color:white; background:var(--ink); border-radius:7px; font-size:7px; box-shadow:3px 3px 0 var(--coral); opacity:0; }.single-send-label span{color:var(--yellow)}
.network-illustration.playing .single-send-label { animation:singleLabel .35s 4.85s ease-out both; }.network-illustration.batch-mode .single-send-label { visibility:hidden; opacity:0 !important; animation:none !important; }
.network-result { position:absolute; z-index:9; left:50%; bottom:22px; width:min(570px,74%); min-height:78px; padding:12px 15px; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; background:var(--mint); border:1.5px solid var(--ink); border-radius:13px; box-shadow:6px 7px 0 var(--ink); opacity:0; transform:translate(-50%,16px) scale(.97); }
.network-result .result-check { width:40px; height:40px; }.network-result strong,.network-result small { display:block; }.network-result strong{font-family:var(--display);font-size:16px;letter-spacing:-.5px}.network-result strong b{color:var(--blue);font-size:24px}.network-result small{margin-top:4px;color:#41634f;font-size:7px;font-weight:850;text-transform:uppercase;letter-spacing:.45px}.network-result em{align-self:start;padding:4px 5px;color:#45634f;background:rgba(255,255,255,.55);border-radius:4px;font-size:5.5px;font-style:normal;font-weight:850;text-transform:uppercase;letter-spacing:.4px}
.done-word { display:inline-block !important; margin-right:3px; padding:4px 5px; color:white; background:#28764d; border-radius:4px; font:900 7px/1 var(--sans); letter-spacing:.5px; text-transform:uppercase; vertical-align:3px; }
.network-illustration.complete .network-result { animation:networkResult .48s cubic-bezier(.15,.85,.3,1.15) both; }.network-illustration.complete .network-state { transform:rotate(-1deg); }
.network-illustration .replay-value { color:#5a6e60; }
@keyframes manualSend{from{stroke-dashoffset:.5}to{stroke-dashoffset:-.5}}
@keyframes manualMailVisible{from{opacity:0}to{opacity:1}}
@keyframes batchMailVisible{from{opacity:0}to{opacity:1}}
@keyframes singlePin{from{opacity:.2;transform:scale(.4)}to{opacity:1;transform:scale(1);fill:var(--coral)}}
@keyframes sourceDraw{from{opacity:0;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes networkDraw{from{opacity:0;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes connectorDash{to{stroke-dashoffset:-.12}}
@keyframes batchPin{from{opacity:.2;transform:scale(.45)}to{opacity:1;transform:scale(1);fill:var(--mint)}}
@keyframes hubOn{from{opacity:0;transform:scale(.65) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes hubRing{from{opacity:.5;transform:translate(-50%,-50%) scale(.5)}to{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}

@keyframes singleLabel{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes networkResult{to{opacity:1;transform:translateX(-50%) scale(1)}}

.section-pad { padding: 130px 0; }
.section-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--blue); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.6px; }
.section-kicker::before { content: ""; width: 24px; height: 3px; background: currentColor; border-radius: 3px; }
h2 { margin: 0; font-family: var(--display); font-size: clamp(48px, 5.5vw, 82px); line-height: .98; letter-spacing: -4.5px; }
h2 span { color: var(--blue); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.75,.25,1); }
.reveal.in-view { opacity: 1; transform: none; }

/* Why Applymento: a clear, honest value summary */
.why-reachwork-section{background:var(--cream);border-bottom:1px solid var(--line)}
.why-reachwork-heading{display:grid;grid-template-columns:1.08fr .92fr;column-gap:90px;align-items:end;margin-bottom:58px}.why-reachwork-heading .section-kicker{grid-column:1;grid-row:1;align-self:center;margin-bottom:20px}.why-reachwork-heading h2{grid-column:1;grid-row:2;margin:0;font-size:clamp(48px,5.7vw,82px)}.why-reachwork-heading h2 span{color:var(--blue)}.why-reachwork-lede{grid-column:2;grid-row:2;align-self:end;max-width:490px;margin:0 0 8px;color:var(--muted);font-size:17px;line-height:1.6}

/* Plan selector: a segmented control, not a pair of pricing cards */
.plan-toggle{grid-column:2;grid-row:1;justify-self:end;align-self:end;width:min(100%,330px);margin-bottom:14px}
.plan-toggle-track{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;background:var(--white);border:1.5px solid var(--ink);border-radius:16px;box-shadow:5px 6px 0 rgba(0,0,0,.13)}
.plan-toggle-thumb{position:absolute;z-index:0;left:5px;top:5px;bottom:5px;width:calc(50% - 5px);background:var(--ink);border-radius:12px;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.plan-toggle.is-pro .plan-toggle-thumb{transform:translateX(100%)}
.plan-option{position:relative;z-index:1;display:grid;justify-items:center;gap:3px;padding:12px 8px;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;text-align:center}
.plan-option b{font-size:13px;font-weight:800;letter-spacing:-.2px;transition:color .28s ease}
.plan-option em{font-family:var(--display);font-style:normal;font-size:22px;line-height:1;letter-spacing:-1.2px;transition:color .28s ease}
.plan-option small{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.3px;transition:color .28s ease}
.plan-option.is-active b,.plan-option.is-active em{color:white}
.plan-option.is-active small{color:rgba(255,255,255,.72)}
.plan-option:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.plan-toggle-callout{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:10px 4px 0;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.2px}
.plan-toggle-callout>span{font-size:10px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.why-number-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1.08fr) minmax(0,.84fr);gap:18px}.why-number-card{min-height:290px;padding:30px 28px;display:flex;flex-direction:column;justify-content:space-between;background:var(--yellow);border:1.5px solid var(--ink);border-radius:22px;box-shadow:7px 8px 0 rgba(0,0,0,.13)}.why-number-primary{color:white;background:var(--blue);box-shadow:7px 8px 0 var(--coral)}.why-number-opportunities{background:#ffded6}.why-number-time{background:var(--mint)}.why-number-card>span{font-size:9px;font-weight:900;letter-spacing:1.1px}.why-number-card>span,.why-number-card strong{transition:opacity .18s ease}.why-number-grid.is-swapping>.why-number-card>span,.why-number-grid.is-swapping>.why-number-card strong{opacity:.35}.why-number-card strong{font-family:var(--display);font-size:clamp(68px,7vw,112px);line-height:.8;letter-spacing:-7px}.why-number-card p{margin:0;font-size:19px;font-weight:850;line-height:1.12;letter-spacing:-.25px}.why-number-opportunities strong{font-size:clamp(54px,5.2vw,80px);letter-spacing:-4px}.why-number-time strong{font-size:clamp(55px,5.2vw,82px);letter-spacing:-5px}

/* How it works — three steps, each showing real product UI */
.simple-process-section { background:#e9e4da; border-bottom:1px solid var(--line); }
.simple-process-heading { max-width:900px; margin-bottom:48px; text-align:center; }.simple-process-heading .section-kicker{justify-content:center}.simple-process-heading h2 span{display:block}.simple-process-heading>p:last-child{max-width:610px;margin:25px auto 0;color:var(--muted);font-size:17px;line-height:1.55}

/* Step rows: a step label beside a real slice of the product */
.flow-rows { display: grid; gap: 16px; }
.flow-row { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: center; padding: 30px 34px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius-md); box-shadow: 5px 6px 0 rgba(0, 0, 0, .13); }
.flow-step { display: grid; grid-template-columns: 38px 1fr; gap: 20px; align-items: start; }
.flow-num { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--ink); border-radius: 50%; font-family: var(--display); font-size: 11px; }
.flow-step h3 { margin: 0; font-family: var(--display); font-size: 25px; line-height: 1.05; letter-spacing: -1.1px; }
.flow-step p { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.flow-ui { padding: 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; }
.flow-ui-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; padding: 0 3px; }
.flow-ui-head b { font-size: 10px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; }
.flow-ui-head small { color: var(--muted); font-size: 11px; font-weight: 750; }

.flow-types { display: flex; flex-wrap: wrap; gap: 8px; }
.flow-type { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 13px 0 9px; background: var(--white); border: 1px solid var(--line); border-radius: 11px; font-size: 12px; font-weight: 800; }
.flow-type i { width: 26px; height: 26px; display: grid; place-items: center; background: var(--yellow); border: 1px solid var(--ink); border-radius: 8px; font-family: var(--display); font-size: 11px; font-style: normal; }
.flow-type:nth-child(2) i { background: var(--coral); }
.flow-type:nth-child(3) i { background: var(--mint); }
.flow-type:nth-child(4) i { background: #e9e4da; }
.flow-type:nth-child(5) i { color: white; background: var(--blue); }
.flow-type em { width: 18px; height: 18px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-size: 9px; font-style: normal; }
.flow-type.is-on { border: 1.5px solid var(--blue); background: #eef1ff; box-shadow: 3px 3px 0 var(--blue); }

.flow-area { display: grid; grid-template-columns: 1fr 118px; gap: 22px; align-items: center; }
.flow-area-controls { min-width: 0; }
.flow-field { max-width: 430px; min-height: 46px; margin-bottom: 10px; padding: 0 14px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; background: var(--white); border: 1px solid var(--ink); border-radius: 10px; }
.flow-field > span { color: var(--blue); font-size: 16px; }
.flow-field strong { font-size: 12px; }
.flow-field i { color: #8d8a81; font-style: normal; }
.flow-radius { display: flex; flex-wrap: wrap; gap: 7px; }
.flow-radius span { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 8px; font-size: 11px; font-weight: 800; }
.flow-radius .is-on { color: white; background: var(--ink); border-color: var(--ink); }
.flow-rings { position: relative; width: 112px; height: 112px; justify-self: end; border: 1px dashed #4a725d; border-radius: 50%; background: rgba(157, 224, 189, .22); }
.flow-rings i { position: absolute; border: 1px solid rgba(0, 0, 0, .15); border-radius: 50%; }
.flow-rings i:first-child { inset: 20px; }
.flow-rings i:nth-child(2) { inset: 39px; }
.flow-rings span { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; display: grid; place-items: center; transform: translate(-50%, -50%); color: white; background: var(--blue); border: 1px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--yellow); }

.flow-send-list { display: grid; gap: 7px; }
.flow-send-row { min-height: 42px; padding: 0 12px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 11px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; font-size: 12px; font-weight: 750; }
.flow-send-row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-mail { width: 22px; height: 22px; display: grid; place-items: center; color: var(--blue); background: #e8edff; border-radius: 6px; font-size: 11px; }
.flow-send-row b { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.flow-send-row b.is-sent { color: #1f6640; }
.flow-send-row b.is-sending { color: #8f4f00; }
.flow-send-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; margin-top: 13px; padding: 0 3px; }
.flow-track { height: 7px; background: #dedbd3; border-radius: 99px; overflow: hidden; }
.flow-track i { display: block; width: 35%; height: 100%; background: var(--blue); border-radius: inherit; }
.flow-send-foot > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.flow-send-foot b { color: var(--ink); }

/* Pricing */
.pricing-section { background: var(--paper); border-bottom: 1px solid var(--line); }
.pricing-heading { max-width: 1020px; margin-bottom: 52px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; padding-top: 14px; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 34px 30px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius-md); box-shadow: 5px 6px 0 rgba(0, 0, 0, .13); }
.price-card h3 { margin: 0; font-family: var(--display); font-size: 25px; line-height: 1.02; letter-spacing: -1.1px; }
.price-amount { margin: 22px 0 0; font-family: var(--display); font-size: 60px; line-height: 1; letter-spacing: -3px; }
.price-unit { margin: 15px 0 0; color: var(--blue); font-size: 15px; font-weight: 850; }
.price-lines { margin: 20px 0 30px; padding: 0; list-style: none; display: grid; gap: 9px; }
.price-lines li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; font-weight: 600; }
.price-lines li::before { content: "\2726"; color: var(--blue); font-size: 12px; }
.price-button { margin-top: auto; width: 100%; }
.price-card-pro { border-color: var(--blue); box-shadow: 8px 9px 0 var(--blue); }
.price-badge { position: absolute; right: 24px; top: -14px; margin: 0; padding: 7px 11px; color: white; background: var(--blue); border: 1.5px solid var(--ink); border-radius: 8px; font-size: 10px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; }
.price-note { display: flex; align-items: flex-start; gap: 12px; margin: 22px auto 0; padding: 18px 22px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); border-radius: 13px; color: var(--muted); font-size: 13px; line-height: 1.55; font-weight: 650; }
.price-note > span { flex: none; width: 23px; height: 23px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-weight: 900; font-size: 12px; }

/* Agents */
.agents-section { background:var(--paper); }.agents-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }.agents-copy h2 { font-size:clamp(52px,6vw,85px); }.agents-copy > p:not(.section-kicker) { max-width:470px; margin:28px 0 0; color:var(--muted); font-size:16px; line-height:1.55; }
.agents-visual { position:relative; padding:26px 26px 22px; background:var(--white); border:1.5px solid var(--ink); border-radius:var(--radius-lg); box-shadow:12px 13px 0 var(--blue); }.agents-caption{display:flex; gap:10px; align-items:flex-start; margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.5; font-weight:650;}.agents-caption>span{color:var(--blue); font-size:15px;}

/* FAQ */

.faq-section { background:var(--cream); }.faq-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:100px}.faq-intro h2{font-size:clamp(50px,5vw,72px)}.faq-intro>p:last-child{margin:24px 0;color:var(--muted);font-size:15px}.faq-list{border-top:1px solid var(--ink)}.faq-list details{border-bottom:1px solid var(--ink)}.faq-list summary{min-height:105px;display:grid;grid-template-columns:50px 1fr 30px;align-items:center;cursor:pointer;list-style:none;font-size:18px;font-weight:800}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{color:var(--coral);font-size:10px}.faq-list summary i{width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;font-size:17px;font-style:normal;transition:transform .25s,background .25s}.faq-list details[open] summary i{transform:rotate(45deg);background:var(--yellow)}.faq-list details p{margin:-8px 50px 30px;color:var(--muted);font-size:14px;line-height:1.6}

/* Final CTA */

.site-footer{padding:55px 0;background:var(--ink);color:white}.footer-brand{font-size:20px}

@media (max-width: 1180px) {
  .shell, .site-header { width: min(100% - 40px, 1050px); }
  .hero { grid-template-columns: .8fr 1.2fr; gap: 25px; }.hero h1 { font-size: 52px; letter-spacing: -3.5px; }

  .network-illustration{min-height:560px}.person-italy-art{top:84px}.network-result{width:79%}.reachwork-hub{left:37%;top:40%}
  .section-pad{padding:105px 0}.agents-grid{gap:55px}.agents-visual{padding:30px}.faq-grid{gap:60px}

}
@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }.nav-links, .text-link { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 52px; overflow: visible; }.hero-copy { max-width: 680px; }.hero h1 { font-size: clamp(48px, 9vw, 72px); }.hero-lede { max-width: 650px; }

  .network-illustration{width:100%;min-height:610px;margin-top:55px}.person-italy-art{top:48px}.network-result{width:min(570px,74%)}.reachwork-hub{left:38.2%;top:40%}
  .section-pad{padding:90px 0}.agents-grid{grid-template-columns:1fr}.agents-copy{max-width:720px}.agents-visual{max-width:680px;width:100%;margin:0 auto}.faq-grid{grid-template-columns:1fr}.faq-intro{max-width:650px}
  .simple-process-heading{margin-bottom:50px}
}
@media (max-width: 640px) {
  .shell, .site-header { width: calc(100% - 28px); }.site-header { height: 70px; }.nav-actions .button-small { display: none; }.brand { font-size: 20px; }
  .hero { display: block; min-height: auto; padding: 42px 0 52px; }.hero h1 { font-size: 47px; line-height: .98; letter-spacing: -3.4px; }.hero-lede { margin-top: 24px; font-size: 16px; }.hero-actions .button { display: none; }.hero-actions { margin-bottom: 28px; }.microcopy { margin-top: 23px; }
  .result-check{width:34px;height:34px}.replay-value{display:none}@keyframes resultIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}@keyframes mailOne{0%{opacity:0;left:38%;top:49%}12%{opacity:1}100%{opacity:1;left:62%;top:25%}}@keyframes mailTwo{0%{opacity:0;left:38%;top:49%}12%{opacity:1}100%{opacity:1;left:76%;top:31%}}@keyframes mailThree{0%{opacity:0;left:38%;top:49%}12%{opacity:1}100%{opacity:1;left:88%;top:44%}}@keyframes mailFour{0%{opacity:0;left:38%;top:49%}12%{opacity:1}100%{opacity:1;left:65%;top:61%}}@keyframes mailFive{0%{opacity:0;left:38%;top:49%}12%{opacity:1}100%{opacity:1;left:81%;top:67%}}
  .network-illustration{min-height:480px;margin-top:40px;border-radius:21px;box-shadow:7px 8px 0 var(--coral)}.network-label{left:12px;top:13px;font-size:6px}.network-state{right:11px;top:39px;min-width:145px;padding:7px 8px;gap:6px}.network-state span{padding:4px;font-size:5px}.network-state strong{font-size:7px}.person-italy-art{left:-2%;top:110px;width:104%}.reachwork-hub{left:35.7%;top:42%;width:63px}.reachwork-hub>span{width:48px;height:48px;border-radius:14px;box-shadow:3px 3px 0 var(--mint);font-size:19px}.reachwork-hub i{right:5px;bottom:3px;font-size:9px}.reachwork-hub b{margin-top:7px;font-size:4.5px}.reachwork-hub::before,.reachwork-hub::after{top:24px;width:66px;height:66px}.single-send-label{left:64%;top:15%;font-size:5px;padding:5px}.network-result{left:11px;right:11px;bottom:12px;width:auto;min-height:64px;padding:8px 9px;grid-template-columns:34px 1fr;transform:translateY(16px)}.network-result .result-check{width:32px;height:32px}.network-result strong{font-size:11px}.network-result strong b{font-size:16px}.network-result small{font-size:5px}.network-result em{display:none}.network-illustration.complete .network-result{animation-name:networkResultMobile}@keyframes networkResultMobile{to{opacity:1;transform:none}}

  .clarity-strip { min-height: 128px; padding: 25px 14px; flex-wrap: wrap; gap: 10px 15px; font-size: 9px; }.clarity-strip i { font-size: 16px; }
  .mobile-sticky { position: fixed; z-index: 20; left: 14px; right: 14px; bottom: 13px; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: white; background: var(--blue); border: 1px solid var(--ink); border-radius: 12px; box-shadow: 0 7px 0 var(--blue-dark); font-size: 14px; font-weight: 850; }
  .section-pad{padding:78px 0}h2{font-size:45px;letter-spacing:-3px}.section-kicker{font-size:9px}.agents-grid{gap:50px}.agents-copy h2{font-size:48px}.agents-visual{padding:16px 16px 14px;border-radius:20px;box-shadow:8px 9px 0 var(--blue)}.faq-grid{gap:35px}.faq-list summary{min-height:95px;grid-template-columns:37px 1fr 30px;font-size:14px}.faq-list details p{margin:-5px 37px 25px}
  .simple-process-heading h2 span{display:inline}.simple-process-heading>p:last-child{font-size:15px}
}
@media (max-width:900px) {
  .why-reachwork-heading{grid-template-columns:1fr;gap:24px}.why-reachwork-heading .section-kicker,.why-reachwork-heading h2,.why-reachwork-lede,.plan-toggle{grid-column:auto;grid-row:auto}.why-reachwork-lede{max-width:650px;margin:0}.plan-toggle{justify-self:stretch;width:100%;max-width:420px;margin-bottom:0}.why-number-grid{grid-template-columns:minmax(0,1fr);gap:14px}.why-number-card{min-height:230px;padding:25px 23px}.why-number-card p{font-size:17px}.why-number-card strong{font-size:88px}.why-number-opportunities strong{font-size:58px}.why-number-time strong{font-size:70px}
}
@media (max-width:640px) {
  .why-reachwork-heading{margin-bottom:40px}.why-reachwork-heading h2 br{display:none}.why-reachwork-lede{font-size:15px}.plan-toggle{max-width:none}.plan-option{padding:11px 6px}.plan-option b{font-size:12px}.plan-option em{font-size:19px;letter-spacing:-1px}.plan-toggle-callout{justify-content:center;margin-top:9px}.why-number-grid{grid-template-columns:minmax(0,1fr);gap:14px}.why-number-card{min-height:220px}.why-number-card strong,.why-number-time strong{font-size:82px}.why-number-primary strong{font-size:min(82px,23vw)}.why-number-opportunities strong{font-size:58px}

}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity:1; transform:none; }
  .manual-mails, .batch-mails { display:none; }
  .problem-visual .hm-dot, .problem-visual .hm-tile { animation: none !important; opacity: 1; transform: none; }
  .problem-visual .hm-dot.is-posted { background: var(--blue); box-shadow: 0 0 0 4px rgba(36, 77, 232, .18); }
  .agent-console, .agent-console *, .agent-console *::before, .agent-console *::after { animation: none !important; }
}

/* =====================================================================
   Landing-page build — new sections.
   Everything below uses only the :root tokens declared at the top of
   this file. No new colours, no new type families.
   ===================================================================== */

/* --- Accessibility foundations --- */
html { scroll-padding-top: 108px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.site-footer :focus-visible, .clarity-strip :focus-visible{ outline-color: var(--yellow); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 60; padding: 14px 20px; background: var(--ink); color: white; border-radius: 0 0 12px 0; font-size: 14px; font-weight: 800; }
.skip-link:focus { left: 0; }

/* <picture> must not become the layout box where the design positions the <img> */
.hero-art-picture { display: contents; }

/* --- Sticky header --- */
.site-header-bar { position: sticky; z-index: 40; top: 0; background: rgba(243, 240, 232, .88); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); }
.site-header-bar.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 30px rgba(25, 29, 27, .07); }
.nav-actions .text-link { white-space: nowrap; }

.nav-toggle { display: none; width: 46px; height: 46px; padding: 0; place-items: center; background: transparent; border: 1.5px solid var(--ink); border-radius: 11px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.nav-toggle:hover { background: var(--white); }
.nav-toggle-bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle-bars i { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] { color: white; background: var(--ink); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i { background: white; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cream); }
.mobile-nav[hidden] { display: none; }
.mobile-nav-inner { width: min(1520px, calc(100% - 72px)); margin: 0 auto; padding: 14px 0 22px; display: grid; gap: 2px; }
.mobile-nav-inner a { min-height: 52px; display: flex; align-items: center; font-size: 17px; font-weight: 800; letter-spacing: -.4px; border-bottom: 1px solid var(--line); }
.mobile-nav-inner a:last-of-type { border-bottom: 0; }
.mobile-nav-cta { justify-content: space-between; margin-top: 14px; padding: 0 20px; }
.mobile-nav-cta.button { color: white; }

/* --- Problem / why this exists --- */
.problem-section { background: var(--paper); border-bottom: 1px solid var(--line); }
.problem-heading { max-width: 1020px; margin-bottom: 62px; }
.problem-heading > p:last-child { max-width: 620px; margin: 26px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.problem-grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 64px; align-items: center; }

.problem-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.problem-points li { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
.problem-points li:last-child { border-bottom: 1px solid var(--line); }
.problem-points li > span { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--ink); border-radius: 50%; font-family: var(--display); font-size: 11px; }
.problem-points h3 { margin: 0; font-family: var(--display); font-size: 25px; line-height: 1.05; letter-spacing: -1.1px; }
.problem-points p { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.problem-visual { position: relative; padding: 26px 26px 22px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 10px 11px 0 var(--coral); }
.problem-caption { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; font-weight: 650; }
.problem-caption > span { color: var(--blue); font-size: 15px; }

/* --- Problem section: the hidden job market ---
   Three reads, in order: the headline states the finding, the tiles quantify it,
   the dot field is the evidence. Type sits between .problem-points h3 and h2. */
.hidden-market { display: grid; gap: 0; }

.hm-eyebrow { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.hm-eyebrow b { font-size: 11px; font-weight: 850; letter-spacing: 1.2px; text-transform: uppercase; }
.hm-eyebrow span { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; }

.hm-headline { margin: 0; font-family: var(--display); font-size: clamp(30px, 3.1vw, 47px); line-height: .95; letter-spacing: -2.2px; }
.hm-headline em { display: block; font-style: normal; }
.hm-headline b { color: var(--blue); font-weight: inherit; }
.hm-sub { margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.4; }

.hm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 26px; }
.hm-tile { padding: 16px 18px; border-radius: 14px; background: rgba(21, 21, 19, .05); opacity: 0; transform: translateY(8px); }
.hm-tile b { display: block; font-family: var(--display); font-size: clamp(26px, 2.3vw, 34px); line-height: 1; letter-spacing: -1.6px; }
.hm-tile small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.3; }
.hm-tile.is-on { background: rgba(36, 77, 232, .09); }
.hm-tile.is-on b { color: var(--blue); }

.hm-field { display: grid; grid-template-columns: repeat(22, 1fr); gap: 7px; }
.hm-dot { aspect-ratio: 1; border-radius: 50%; background: rgba(21, 21, 19, .18); opacity: 0; transform: scale(.4); }

.problem-visual.in-view .hm-tile { animation: hmTileIn .55s cubic-bezier(.2, .75, .25, 1) forwards; }
.problem-visual.in-view .hm-tile:first-child { animation-delay: .5s; }
.problem-visual.in-view .hm-tile:last-child { animation-delay: .62s; }
.problem-visual.in-view .hm-dot { animation: hmDotIn .42s cubic-bezier(.2, .75, .25, 1) calc(650ms + var(--i) * 4ms) forwards; }
.problem-visual.in-view .hm-dot.is-posted { animation: hmDotIn .42s cubic-bezier(.2, .75, .25, 1) calc(650ms + var(--i) * 4ms) forwards, hmPostedOn .55s cubic-bezier(.2, .75, .25, 1) 1.55s forwards; }

@keyframes hmTileIn { to { opacity: 1; transform: none; } }
@keyframes hmDotIn { to { opacity: 1; transform: none; } }
@keyframes hmPostedOn {
  from { background: rgba(21, 21, 19, .18); box-shadow: 0 0 0 0 rgba(36, 77, 232, 0); }
  60%  { transform: scale(1.3); box-shadow: 0 0 0 7px rgba(36, 77, 232, .16); }
  to   { background: var(--blue); transform: scale(1.1); box-shadow: 0 0 0 4px rgba(36, 77, 232, .18); }
}

/* --- Agent console (#agents) ---------------------------------------
   One looping run of the product: the agent finds a business, writes
   the email, sends it. Every animated part shares ONE cycle length
   (--agent-cycle) and carves its own slice out of it by percentage, so
   the three stages stay in step without a JS timeline and without
   animation-delay drift between them. The only per-element delays are
   the deliberate staggers: chips by column (--c), send rows by row
   (--r), both a constant offset of the same shared cycle.

   The base rules below are the FINISHED state — every chip scanned,
   the draft written, all three rows sent. The animation is layered on
   top only under .is-running, which script.js toggles from an
   IntersectionObserver and never adds when the visitor asked for
   reduced motion. So with JS off, mid-scroll, or with reduced motion,
   the panel still reads as a complete, truthful screenshot rather
   than a blank or half-typed one. */

.agent-console {
  --agent-cycle: 12s;
  padding: 16px; background: var(--cream); border: 1px solid var(--line); border-radius: 16px;
}

.agent-console-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 0 3px; }
.agent-console-head b { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; }
.agent-console-head small { color: var(--muted); font-size: 11px; font-weight: 750; }
.agent-live { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(36, 77, 232, .16); }

/* --- Stages on a filling spine --- */
.agent-stages { position: relative; list-style: none; margin: 0; padding: 2px 0 2px 44px; display: grid; gap: 15px; }
.agent-stages::before,
.agent-stages::after { content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; }
.agent-stages::before { background: rgba(21, 21, 19, .13); }
.agent-stages::after { background: var(--blue); transform-origin: top center; }

.agent-stage { position: relative; }
.agent-stage-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.agent-stage-head b { font-size: 11px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; }
.agent-stage-head em { margin-left: auto; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 750; letter-spacing: .5px; text-transform: uppercase; }
.agent-stage-num {
  position: absolute; left: -44px; top: -4px; width: 30px; height: 30px; display: grid; place-items: center;
  color: white; background: var(--ink); border-radius: 50%; font-family: var(--display); font-size: 11px; letter-spacing: -.3px;
}
.agent-stage-find .agent-stage-num { background: var(--blue); }

/* --- 01 Finds: 173 businesses, one sweep, one match --- */
.agent-scan { position: relative; overflow: hidden; padding: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 11px; }
.agent-chips { display: grid; grid-template-columns: repeat(26, 1fr); gap: 5px; min-height: 72px; }
.agent-chip { height: 6px; border-radius: 3px; background: rgba(21, 21, 19, .16); }
.agent-chip.is-hit { background: var(--blue); box-shadow: 0 0 0 3px rgba(36, 77, 232, .16); }
.agent-sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 30%; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(36, 77, 232, 0) 0%, rgba(36, 77, 232, .08) 60%, rgba(36, 77, 232, .3) 94%, var(--blue) 100%);
}

.agent-hit { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-top: 9px; padding: 10px 12px; background: var(--white); border: 1.5px solid var(--blue); border-radius: 11px; box-shadow: 3px 3px 0 var(--blue); }
.agent-hit > i { width: 26px; height: 26px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 8px; font-size: 12px; font-style: normal; }
.agent-hit b { display: block; font-size: 12.5px; font-weight: 850; }
.agent-hit small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.agent-hit em { padding: 5px 8px; color: var(--blue); background: rgba(36, 77, 232, .1); border-radius: 7px; font-size: 11px; font-style: normal; font-weight: 900; }

/* --- 02 Writes: the agent types the email --- */
.agent-draft { padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 11px; }
.agent-draft-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.agent-draft-row small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.agent-draft-row > span { min-width: 0; font-size: 12px; font-weight: 800; }
.agent-draft-body { margin: 0; display: grid; gap: 5px; justify-items: start; color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 650; }

/* Typed line: the text sits still and a cover slides off it to the
   right, so the reveal is exactly as wide as the text (a width
   animation would have measured the column, not the sentence) and the
   cover's left edge doubles as the caret. */
.agent-type { position: relative; display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-type::after { content: ""; position: absolute; top: -2px; bottom: -2px; right: -1px; width: 0; background: var(--white); border-left: 2px solid transparent; }

/* --- 03 Sends --- */
.agent-send-list { display: grid; gap: 6px; }
.agent-send-row { min-height: 38px; padding: 0 11px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; font-size: 12px; font-weight: 750; }
.agent-send-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-mail { width: 22px; height: 22px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 6px; font-size: 10px; font-style: normal; }
.agent-status { display: grid; justify-items: end; min-width: 58px; font-size: 9px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.agent-status i { grid-area: 1 / 1; font-style: normal; opacity: 0; }
.agent-status i:nth-child(1) { color: var(--muted); }
.agent-status i:nth-child(2) { color: #8f4f00; }
.agent-status i:nth-child(3) { color: #1f6640; opacity: 1; }

.agent-send-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; margin-top: 11px; padding: 0 3px; }
.agent-track { height: 7px; background: #dedbd3; border-radius: 99px; overflow: hidden; }
.agent-track i { display: block; width: 100%; height: 100%; background: var(--blue); border-radius: inherit; transform: scaleX(.354); transform-origin: left center; }
.agent-send-foot > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.agent-send-foot b { color: var(--ink); }

.agent-console-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.agent-foot-check { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-size: 10px; font-weight: 900; }
.agent-console-foot b { font-size: 11.5px; font-weight: 800; }
.agent-console-foot em { margin-left: auto; color: var(--muted); font-size: 9px; font-style: normal; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; }

/* --- The run ------------------------------------------------------
   Cycle map (12s): 0-30% finds · 34-64% writes · 68-92% sends ·
   92-100% resets back to the top of the loop. */
.agent-console.is-running .agent-live { animation: agentLive 1.9s ease-out infinite; }
.agent-console.is-running .agent-stages::after,
.agent-console.is-running .agent-stage,
.agent-console.is-running .agent-sweep,
.agent-console.is-running .agent-chip,
.agent-console.is-running .agent-hit,
.agent-console.is-running .agent-type::after,
.agent-console.is-running .agent-status i,
.agent-console.is-running .agent-mail,
.agent-console.is-running .agent-track i { animation-duration: var(--agent-cycle); animation-timing-function: linear; animation-iteration-count: infinite; }

.agent-console.is-running .agent-stages::after { animation-name: agentSpine; }
.agent-console.is-running .agent-stage-find { animation-name: agentStageFind; }
.agent-console.is-running .agent-stage-write { animation-name: agentStageWrite; }
.agent-console.is-running .agent-stage-send { animation-name: agentStageSend; }
.agent-console.is-running .agent-sweep { animation-name: agentSweep; }
.agent-console.is-running .agent-chip { animation-name: agentChip; animation-delay: calc(var(--c) * .06s); }
.agent-console.is-running .agent-chip.is-hit { animation-name: agentChip, agentChipHit; }
.agent-console.is-running .agent-hit { animation-name: agentHit; }
.agent-console.is-running .agent-type-a::after { animation-name: agentTypeA; }
.agent-console.is-running .agent-type-b::after { animation-name: agentTypeB; }
.agent-console.is-running .agent-type-c::after { animation-name: agentTypeC; }
.agent-console.is-running .agent-type-d::after { animation-name: agentTypeD; }
.agent-console.is-running .agent-send-row:nth-child(1) .agent-status i:nth-child(1) { animation-name: agentQueued0; }
.agent-console.is-running .agent-send-row:nth-child(1) .agent-status i:nth-child(2) { animation-name: agentSending0; }
.agent-console.is-running .agent-send-row:nth-child(1) .agent-status i:nth-child(3) { animation-name: agentSent0; }
.agent-console.is-running .agent-send-row:nth-child(1) .agent-mail { animation-name: agentMail0; }
.agent-console.is-running .agent-send-row:nth-child(2) .agent-status i:nth-child(1) { animation-name: agentQueued1; }
.agent-console.is-running .agent-send-row:nth-child(2) .agent-status i:nth-child(2) { animation-name: agentSending1; }
.agent-console.is-running .agent-send-row:nth-child(2) .agent-status i:nth-child(3) { animation-name: agentSent1; }
.agent-console.is-running .agent-send-row:nth-child(2) .agent-mail { animation-name: agentMail1; }
.agent-console.is-running .agent-send-row:nth-child(3) .agent-status i:nth-child(1) { animation-name: agentQueued2; }
.agent-console.is-running .agent-send-row:nth-child(3) .agent-status i:nth-child(2) { animation-name: agentSending2; }
.agent-console.is-running .agent-send-row:nth-child(3) .agent-status i:nth-child(3) { animation-name: agentSent2; }
.agent-console.is-running .agent-send-row:nth-child(3) .agent-mail { animation-name: agentMail2; }
.agent-console.is-running .agent-track i { animation-name: agentTrack; }

@keyframes agentLive {
  0%, 100% { box-shadow: 0 0 0 3px rgba(36, 77, 232, .16); }
  55% { box-shadow: 0 0 0 7px rgba(36, 77, 232, 0); }
}
@keyframes agentSpine {
  0% { transform: scaleY(.08); opacity: 1; }
  30% { transform: scaleY(.35); }
  64% { transform: scaleY(.68); }
  92% { transform: scaleY(1); opacity: 1; }
  95% { transform: scaleY(1); opacity: 0; }
  96% { transform: scaleY(.08); opacity: 0; }
  100% { transform: scaleY(.08); opacity: 1; }
}
@keyframes agentStageFind  { 0%, 30% { opacity: 1; }  35%, 92% { opacity: .38; } 100% { opacity: 1; } }
@keyframes agentStageWrite { 0%, 30% { opacity: .38; } 35%, 64% { opacity: 1; } 69%, 100% { opacity: .38; } }
@keyframes agentStageSend  { 0%, 63% { opacity: .38; } 68%, 92% { opacity: 1; } 97%, 100% { opacity: .38; } }
@keyframes agentSweep {
  0%, 2% { opacity: 0; transform: translateX(-110%); }
  4% { opacity: 1; }
  18% { opacity: 1; }
  20%, 100% { opacity: 0; transform: translateX(345%); }
}
@keyframes agentChip {
  0%, 2% { opacity: .3; transform: scale(.7); }
  5%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: .3; transform: scale(.7); }
}
@keyframes agentChipHit {
  0%, 3% { background: rgba(21, 21, 19, .16); box-shadow: 0 0 0 0 rgba(36, 77, 232, 0); }
  7% { background: var(--blue); box-shadow: 0 0 0 6px rgba(36, 77, 232, .18); }
  10%, 90% { background: var(--blue); box-shadow: 0 0 0 3px rgba(36, 77, 232, .16); }
  96%, 100% { background: rgba(21, 21, 19, .16); box-shadow: 0 0 0 0 rgba(36, 77, 232, 0); }
}
@keyframes agentHit {
  0%, 18% { opacity: 0; transform: translateY(9px); }
  22%, 92% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(9px); }
}
@keyframes agentTypeA {
  0%, 38% { width: calc(100% + 2px); border-left-color: var(--blue); }
  45% { width: 0; border-left-color: var(--blue); }
  47%, 93.5% { width: 0; border-left-color: transparent; }
  94%, 100% { width: calc(100% + 2px); border-left-color: transparent; }
}
@keyframes agentTypeB {
  0%, 46% { width: calc(100% + 2px); border-left-color: var(--blue); }
  52% { width: 0; border-left-color: var(--blue); }
  54%, 93.5% { width: 0; border-left-color: transparent; }
  94%, 100% { width: calc(100% + 2px); border-left-color: transparent; }
}
@keyframes agentTypeC {
  0%, 52% { width: calc(100% + 2px); border-left-color: var(--blue); }
  58% { width: 0; border-left-color: var(--blue); }
  60%, 93.5% { width: 0; border-left-color: transparent; }
  94%, 100% { width: calc(100% + 2px); border-left-color: transparent; }
}
@keyframes agentTypeD {
  0%, 58% { width: calc(100% + 2px); border-left-color: var(--blue); }
  64% { width: 0; border-left-color: var(--blue); }
  66%, 93.5% { width: 0; border-left-color: transparent; }
  94%, 100% { width: calc(100% + 2px); border-left-color: transparent; }
}
@keyframes agentQueued0  { 0%, 67% { opacity: 1; } 70%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes agentSending0 { 0%, 68% { opacity: 0; } 71%, 76% { opacity: 1; } 79%, 100% { opacity: 0; } }
@keyframes agentSent0    { 0%, 77% { opacity: 0; } 80%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes agentMail0 { 0%, 70% { color: var(--muted); background: #e9e4da; } 74%, 93% { color: white; background: var(--blue); } 96%, 100% { color: var(--muted); background: #e9e4da; } }
@keyframes agentQueued1  { 0%, 70% { opacity: 1; } 73%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes agentSending1 { 0%, 71% { opacity: 0; } 74%, 79% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes agentSent1    { 0%, 80% { opacity: 0; } 83%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes agentMail1 { 0%, 73% { color: var(--muted); background: #e9e4da; } 77%, 93% { color: white; background: var(--blue); } 96%, 100% { color: var(--muted); background: #e9e4da; } }
@keyframes agentQueued2  { 0%, 73% { opacity: 1; } 76%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes agentSending2 { 0%, 74% { opacity: 0; } 77%, 82% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes agentSent2    { 0%, 83% { opacity: 0; } 86%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes agentMail2 { 0%, 76% { color: var(--muted); background: #e9e4da; } 80%, 93% { color: white; background: var(--blue); } 96%, 100% { color: var(--muted); background: #e9e4da; } }
@keyframes agentTrack {
  0%, 68% { transform: scaleX(.04); }
  92% { transform: scaleX(.354); }
  95% { transform: scaleX(.354); opacity: 1; }
  96% { transform: scaleX(.04); opacity: 0; }
  100% { transform: scaleX(.04); opacity: 1; }
}

/* --- Stats band footnotes --- */
.proof-band { margin-top: 26px; display: grid; gap: 12px; }
.impact-note { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 18px 22px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); border-radius: 13px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.impact-note > span { flex: none; width: 23px; height: 23px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-weight: 900; font-size: 12px; }
.proof-placeholder { margin: 0; padding: 0 22px; color: var(--muted); font-size: 12px; line-height: 1.55; font-weight: 650; }

/* --- Email capture --- */
















/* --- Footer --- */
.site-footer .footer-columns { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px 36px; }
.footer-about { max-width: 360px; }
.footer-about p { margin: 20px 0 0; color: #9c9a93; font-size: 13px; line-height: 1.6; }
.footer-heading { margin: 0 0 18px; font-family: var(--sans); font-size: 10px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; color: #9c9a93; }
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 700; color: #e6e4dd; transition: color .2s ease; }
.footer-col a:hover { color: var(--mint); }
.footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .13); }
.footer-bottom small { color: #9c9a93; font-size: 11px; }

/* --- Larger touch targets ---
   Applies on any touch device, and on every viewport that uses the
   compact layout, so nothing interactive lands under 44px there. --- */
@media (pointer: coarse), (max-width: 900px) {
  .nav-links a, .text-link, .brand, .watch-link { min-height: 44px; display: inline-flex; align-items: center; }
  .text-link { padding-inline: 6px; }
  /* footer links sit in a column, so the row itself becomes the target */
  .footer-col a { min-height: 44px; display: flex; align-items: center; width: 100%; }
  .button-small { min-height: 44px; }
  .replay-value { min-height: 44px; min-width: 88px; }
  .faq-list summary { min-height: 88px; }
}

@media (max-width: 1180px) {
  .problem-grid { gap: 42px; }
  .hm-field { grid-template-columns: repeat(20, 1fr); gap: 6px; }
  .flow-row { grid-template-columns: .9fr 1.1fr; gap: 28px; padding: 26px 26px; }

}

@media (max-width: 900px) {
  html { scroll-padding-top: 92px; }
  .flow-row { grid-template-columns: 1fr; gap: 22px; }
  .flow-step { max-width: 620px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 620px; gap: 22px; }
  .pricing-heading { margin-bottom: 44px; }
  .nav-toggle { display: grid; }
  .mobile-nav-inner { width: min(100% - 40px, 1050px); }
  .problem-heading { margin-bottom: 44px; }
  .problem-grid { grid-template-columns: 1fr; gap: 38px; }
  .problem-points li { grid-template-columns: 44px 1fr; gap: 16px; padding: 24px 0; }
  .agent-console { padding: 14px; }
  .agent-chips { gap: 4px; min-height: 66px; }

  .site-footer .footer-columns { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .footer-about { grid-column: 1 / -1; max-width: 520px; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 80px; }
  .flow-row { padding: 20px 18px; border-radius: 16px; box-shadow: 4px 5px 0 rgba(0, 0, 0, .13); }
  .flow-step { grid-template-columns: 32px 1fr; gap: 14px; }
  .flow-num { width: 32px; height: 32px; font-size: 10px; }
  .flow-step h3 { font-size: 22px; letter-spacing: -.8px; }
  .flow-ui { padding: 11px; }
  .flow-area { grid-template-columns: 1fr; }
  .agent-console { padding: 11px; border-radius: 14px; }
  .agent-console-head { margin-bottom: 13px; }
  .agent-stages { padding-left: 34px; gap: 13px; }
  .agent-stages::before, .agent-stages::after { left: 11px; }
  .agent-stage-num { left: -34px; width: 25px; height: 25px; font-size: 10px; }
  .agent-scan { padding: 8px; }
  .agent-chips { gap: 3px; min-height: 53px; }
  .agent-chip { height: 5px; }
  .agent-hit { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px; padding: 9px 10px; }
  .agent-hit > i { width: 22px; height: 22px; font-size: 11px; }
  .agent-draft-to { display: none; }
  .agent-draft-row { grid-template-columns: 46px minmax(0, 1fr); }
  .agent-draft-body { font-size: 11px; }
  .agent-send-row { min-height: 34px; font-size: 11px; }
  .agent-status { min-width: 52px; }
  .agent-console-foot b { font-size: 10.5px; }
  .flow-rings { display: none; }
  .price-card { padding: 26px 22px; }
  .price-amount { font-size: 52px; letter-spacing: -2.4px; }
  .price-note { padding-left: 16px; padding-right: 16px; }
  body { padding-bottom: 78px; }
  .mobile-nav-inner { width: calc(100% - 28px); }
  .problem-heading > p:last-child { font-size: 15px; }
  .problem-points h3 { font-size: 22px; letter-spacing: -.8px; }
  .problem-visual { padding: 16px 16px 14px; border-radius: var(--radius-md); box-shadow: 7px 8px 0 var(--coral); }
  .hm-eyebrow { margin-bottom: 14px; }
  .hm-eyebrow b { font-size: 9.5px; letter-spacing: .9px; }
  .hm-eyebrow span { font-size: 9px; }
  .hm-headline { font-size: clamp(27px, 8.2vw, 36px); letter-spacing: -1.5px; }
  .hm-sub { margin-top: 11px; font-size: 13px; }
  .hm-tiles { gap: 9px; margin: 17px 0 19px; }
  .hm-tile { padding: 12px 13px; border-radius: 12px; }
  .hm-tile b { font-size: clamp(21px, 6.4vw, 27px); letter-spacing: -1.1px; }
  .hm-tile small { margin-top: 4px; font-size: 11.5px; }
  .hm-field { grid-template-columns: repeat(16, 1fr); gap: 5px; }

  .impact-note, .proof-placeholder { padding-left: 16px; padding-right: 16px; }
  
  
  .site-footer .footer-columns { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* --- Standalone pages (404, privacy, terms) --- */
.plain-page { min-height: 62vh; padding: 110px 0 120px; }
.plain-page .plain-inner { max-width: 760px; }
.plain-code { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 8px 12px; background: var(--yellow); border: 1px solid var(--ink); border-radius: 8px; font-size: 10px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; }
.plain-page h1 { font-size: clamp(44px, 6vw, 78px); letter-spacing: -3.6px; }
.plain-page > .shell > .plain-inner > p { margin: 26px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.plain-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.plain-body { margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--line); }
.plain-body h2 { margin: 36px 0 0; font-size: 26px; letter-spacing: -1.2px; }
.plain-body h2:first-child { margin-top: 0; }
.plain-body p, .plain-body li { color: var(--muted); font-size: 15px; line-height: 1.65; }
.plain-body p { margin: 14px 0 0; }
.plain-body ul { margin: 14px 0 0; padding-left: 20px; }
.plain-body li { margin-bottom: 8px; }
.plain-notice { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 20px 22px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 5px 6px 0 var(--coral); color: var(--ink); font-size: 14px; line-height: 1.6; font-weight: 700; }
.plain-notice > span { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-size: 12px; font-weight: 900; }

@media (max-width: 640px) {
  .plain-page { padding: 64px 0 80px; }
  .plain-page > .shell > .plain-inner > p { font-size: 15px; }
}
.plain-page h1 span { color: var(--blue); }