/* crmmaps.com/hubspot: how CRMmaps connects to a HubSpot portal. Loads after styles.css and reuses its tokens,
   tiles, chips, FAQ, CTA and footer.
   One signature moment: the two-way diagram. A HubSpot record and the CRMmaps map are joined by two raised lanes
   that draw the way data flows: reads go to the map (white lane), writes come back to the record (green lane, the
   hero's route). Pins drop when the reads arrive; the label stamps and the note lands when the writes arrive. It
   plays once in view and rests on its final state, which reduced motion and no-JS visitors see straight away.
   Everything else stays quiet: raised tiles that differ by job, numbers only on the real install-to-assign
   sequence, and motion only when someone presses something. */

/* Secondary text meets AA on this page (the shared #77819A is about 3.4:1 on paper). */
:root { --ink-3: #5A6480; }

/* Intro */
.hs-intro {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end;
  gap: 18px clamp(24px, 4vw, 60px);
  max-width: 1400px; margin: 0 auto; padding: clamp(8px, 2.5vw, 28px) var(--gutter) 0;
}
.hs-intro h1 { margin: 0; }
.hs-intro .lede { max-width: 44ch; margin-bottom: 0; }
.hs-intro .hero-note { margin-top: .9rem; }

/* ---------- The two-way diagram ---------- */
.flow {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 20px;
  max-width: 1400px; margin: 0 auto; padding: clamp(44px, 5vw, 68px) var(--gutter) 0;
}
/* Chart paper under the diagram, fading out toward the edges. */
.flow::before {
  content: ""; position: absolute; inset: 8px 0 -36px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(2, 10, 46, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 10, 46, .07) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 48%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 60% at 50% 48%, #000 35%, transparent 100%);
}
.flow-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, .9fr) minmax(0, 1.42fr);
  grid-template-rows: auto auto auto 1fr;
}
.flow figcaption { grid-column: 1; grid-row: 2; color: var(--ink-2); font-size: .92rem; max-width: 72ch; }
.flow-replay { grid-column: 2; grid-row: 2; align-self: center; visibility: hidden; opacity: 0; transition: opacity .3s ease; }
.flow.done .flow-replay { visibility: visible; opacity: 1; }
html:not(.js) .flow-replay { display: none; }

.flow-tag {
  position: absolute; top: -14px; left: 18px; z-index: 3;
  font-size: .78rem; font-weight: 700; line-height: 1.3; padding: 3px 10px; border-radius: 8px;
  background: #fff; border: var(--edge); box-shadow: 0 2px 0 0 var(--base);
}
.tag-crm { background: var(--green); }

/* The HubSpot record. Its sections share the diagram's rows, so the lanes meet the right fields. */
.flow-record {
  grid-column: 1; grid-row: 1 / -1;
  display: grid; grid-template-rows: subgrid;
  position: relative; z-index: 2;
  background: #fff; border: var(--edge); border-radius: var(--r-md); box-shadow: var(--raise);
  padding: 24px 20px 18px; font-size: .9rem; line-height: 1.4;
}
.fr-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; }
.fr-av {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-ink); font-size: .68rem; font-weight: 750; letter-spacing: .02em;
}
.fr-av-rec { width: 38px; height: 38px; border-radius: 10px; background: var(--paper-3); color: var(--ink); font-size: .8rem; }
.fr-av-alt { background: #DCEBF5; color: var(--water-ink); }
.fr-title { font-stretch: 108%; font-weight: 720; font-size: 1.02rem; line-height: 1.2; }
.fr-type { color: var(--ink-3); font-size: .8rem; }
.fr-sec { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.fr-props { display: grid; gap: 5px; align-content: center; }
.fr-props div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
.fr-props dt { color: var(--ink-3); }
.fr-props dd { margin: 0; font-weight: 600; }
.fr-sub { font-weight: 700; font-size: .8rem; color: var(--ink-2); margin-bottom: 8px; }
.fr-slot { display: grid; }
.fr-slot > * { grid-area: 1 / 1; }
.fr-none { color: var(--ink-3); align-self: center; opacity: 0; }
.fr-person { display: flex; align-items: center; gap: 9px; font-weight: 650; }
.fr-label {
  margin-left: auto; font-size: .74rem; font-weight: 750; line-height: 1.3; padding: 2px 9px; border-radius: 7px;
  background: var(--green); color: var(--base); border: var(--edge); box-shadow: 0 2px 0 0 var(--base);
}
.fr-activity { display: flex; flex-direction: column; gap: 12px; padding-bottom: 0; }
.fr-activity .fr-sub { margin-bottom: -4px; }
.fr-note { background: var(--green-soft); border-left: 3px solid var(--green-2); border-radius: 0 10px 10px 0; padding: 8px 11px 9px; }
.fr-note-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; font-size: .76rem; font-weight: 700; color: var(--green-ink); }
.fr-note-head span:last-child { color: var(--ink-2); font-weight: 600; }
.fr-old { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; color: var(--ink-3); font-size: .8rem; }

/* Lanes: two raised routes between the record and the map. */
.lane { position: relative; z-index: 1; grid-column: 2; min-height: 44px; }
.lane-read { grid-row: 2; }
.lane-write { grid-row: 3; }
.lane-line {
  position: absolute; top: 50%; left: -14px; right: 16px; height: 12px; margin-top: -6px;
  border: var(--edge); border-radius: 0 6px 6px 0; box-shadow: var(--raise-sm); background: #fff;
}
.lane-write .lane-line { left: 16px; right: -14px; border-radius: 6px 0 0 6px; background: var(--green); }
/* Arrowheads point into the panel the data reaches. */
.lane-line::after { content: ""; position: absolute; top: 50%; width: 15px; height: 22px; margin-top: -11px; background: var(--base); }
.lane-read .lane-line::after { right: -17px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lane-write .lane-line::after { left: -17px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.lane-body { position: absolute; left: 12px; right: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lane-read .lane-body { bottom: calc(50% + 15px); }
.lane-write .lane-body { top: calc(50% + 17px); flex-direction: column-reverse; }
.lane-cap { font-stretch: 92%; font-weight: 700; font-size: .84rem; color: var(--ink-2); }
.lane-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.lane-chips li {
  font-size: .82rem; font-weight: 650; line-height: 1.3; padding: 4px 10px; border-radius: 9px;
  background: #fff; border: var(--edge); box-shadow: 0 2px 0 0 var(--base);
}
.lane-write .lane-chips li { background: var(--green); }

/* The CRMmaps map. */
.flow-map { grid-column: 3; grid-row: 1 / -1; position: relative; z-index: 2; display: flex; }
.fm-frame { flex: 1; aspect-ratio: auto; min-height: 430px; box-shadow: var(--raise); }
.fm-frame svg { position: absolute; inset: 0; }
.fl-pulse { fill: var(--green); opacity: 0; transform-box: fill-box; transform-origin: center; }
.fm-panel {
  position: absolute; right: 14px; bottom: 16px; width: min(258px, calc(100% - 28px));
  background: #fff; border: var(--edge); border-radius: 14px; box-shadow: 0 4px 0 0 var(--base);
  padding: 4px 12px; font-size: .84rem; line-height: 1.35;
}
.fm-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 0; }
.fm-row + .fm-row { border-top: 1px solid var(--line); grid-template-columns: 18px minmax(0, 1fr) auto; }
.fm-btn {
  display: grid; font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: 8px; border: var(--edge);
  background: var(--green); transform: translateY(2px); box-shadow: 0 0 0 0 var(--base);
}
.fm-btn > span { grid-area: 1 / 1; text-align: center; }
.fm-btn .b1 { opacity: 0; }

/* Choreography. Hidden starting points apply only with JS, until .final (reduced motion) or the end of .play. */
html.js .flow:not(.final) .fm-frame .casing path,
html.js .flow:not(.final) .fm-frame .road path,
html.js .flow:not(.final) .route,
html.js .flow:not(.final) .route-base { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .flow:not(.final) .fl-fade,
html.js .flow:not(.final) .fl-drop,
html.js .flow:not(.final) .fl-rank,
html.js .flow:not(.final) .ring,
html.js .flow:not(.final) .lane-cap,
html.js .flow:not(.final) .lane-chips li,
html.js .flow:not(.final) .fm-panel,
html.js .flow:not(.final) .fr-person,
html.js .flow:not(.final) .fr-note { opacity: 0; }
html.js .flow:not(.final) .fr-none { opacity: 1; }
html.js .flow:not(.final) .fl-drop { transform: translateY(-16px); }
html.js .flow:not(.final) .ring { transform: scale(.25); }
html.js .flow:not(.final) .fl-rank { transform: scale(.4); }
html.js .flow:not(.final) .lane-chips li { transform: translateY(6px); }
html.js .flow:not(.final) .fm-panel { transform: translateY(10px); }
html.js .flow:not(.final) .fr-note { transform: translateX(14px); }
html.js .flow:not(.final) .fr-label { opacity: 0; transform: scale(1.8) rotate(-6deg); }
html.js .flow:not(.final) .fm-btn { background: #fff; transform: none; box-shadow: 0 2px 0 0 var(--base); }
html.js .flow:not(.final) .fm-btn .b1 { opacity: 1; }
html.js .flow:not(.final) .fm-btn .b2 { opacity: 0; }
html.js .flow:not(.final) .lane-read .lane-line { clip-path: inset(-8px 100% -10px -16px); }
html.js .flow:not(.final) .lane-write .lane-line { clip-path: inset(-8px -16px -10px 100%); }

/* 0.3s reads leave the record; 1.1s records land as pins; 1.8s people; 2.35s best route;
   3.0s Assign; 3.15s writes head back; 3.95s the label stamps; 4.3s the note lands. */
.flow.play .fm-frame .casing path,
.flow.play .fm-frame .road path { animation: draw 1s var(--ease) forwards; }
.flow.play .route, .flow.play .route-base { animation: draw .7s var(--ease) var(--d) forwards; }
.flow.play .fl-fade { animation: fade .6s ease var(--d) forwards; }
.flow.play .fl-drop { animation: drop .55s cubic-bezier(.2, .9, .25, 1.3) var(--d) forwards; }
.flow.play .ring { animation: grow .9s var(--ease) var(--d) forwards; }
.flow.play .fl-rank { animation: grow .4s cubic-bezier(.2, .9, .25, 1.4) var(--d) forwards; }
.flow.play .fl-pulse { animation: pulse 1.6s ease-out var(--d) 2; }
.flow.play .lane-read .lane-line { animation: lane-right .8s var(--ease) .3s forwards; }
.flow.play .lane-read .lane-cap { animation: fade .4s ease .25s forwards; }
.flow.play .lane-read li { animation: settle .4s var(--ease) .45s forwards; }
.flow.play .lane-read li:nth-child(2) { animation-delay: .6s; }
.flow.play .lane-read li:nth-child(3) { animation-delay: .75s; }
.flow.play .fm-panel { animation: rise .5s var(--ease) 2.25s forwards; }
.flow.play .fm-btn { animation: fm-press .18s ease 3s forwards; }
.flow.play .fm-btn .b1 { animation: fade-out .15s ease 3s forwards; }
.flow.play .fm-btn .b2 { animation: fade .15s ease 3s forwards; }
.flow.play .lane-write .lane-line { animation: lane-left .8s var(--ease) 3.15s forwards; }
.flow.play .lane-write .lane-cap { animation: fade .4s ease 3.1s forwards; }
.flow.play .lane-write li { animation: settle .4s var(--ease) 3.4s forwards; }
.flow.play .lane-write li:nth-child(2) { animation-delay: 3.6s; }
.flow.play .fr-none { animation: fade-out .2s ease 3.9s forwards; }
.flow.play .fr-person { animation: fade .2s ease 3.95s forwards; }
.flow.play .fr-label { animation: stamp .5s cubic-bezier(.2, .9, .25, 1.25) 3.95s forwards; }
.flow.play .flow-record { animation: thud .3s ease 4.12s; }
.flow.play .fr-note { animation: settle .5s var(--ease) 4.3s forwards; }

@keyframes lane-right { from { clip-path: inset(-8px 100% -10px -16px); } to { clip-path: inset(-8px -24px -10px -16px); } }
@keyframes lane-left { from { clip-path: inset(-8px -16px -10px 100%); } to { clip-path: inset(-8px -16px -10px -24px); } }
@keyframes lane-down { from { clip-path: inset(-16px -10px 100% -10px); } to { clip-path: inset(-16px -10px -24px -10px); } }
@keyframes lane-up { from { clip-path: inset(100% -10px -16px -10px); } to { clip-path: inset(-24px -10px -16px -10px); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes appear { from { opacity: 0; } }
@keyframes fm-press { to { background: var(--green); transform: translateY(2px); box-shadow: 0 0 0 0 var(--base); } }
@keyframes stamp {
  0% { opacity: 0; transform: scale(1.8) rotate(-6deg); }
  55% { opacity: 1; transform: scale(.92) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes thud { 40% { transform: translateY(2px); box-shadow: 0 4px 0 0 var(--base); } }

/* ---------- Steps ---------- */
.steps {
  display: grid; gap: clamp(60px, 7vw, 96px);
  max-width: 1400px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) var(--gutter) 24px;
}
.step h2 {
  display: flex; align-items: center; gap: 14px; max-width: none;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0 0 26px;
}
.step-num {
  flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--green); color: var(--base); border: var(--edge); box-shadow: var(--raise-sm);
  font-stretch: 100%; font-weight: 800; font-size: 1.1rem; letter-spacing: 0;
}
.steps .tile { container-type: inline-size; }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.rows-2 { grid-row: span 2; }
.tile-quiet { background: var(--paper); }
.steps .tile-text p { max-width: 52ch; }
.steps .tile-text p + p { margin-top: .7rem; }
.steps .tile > p { color: var(--ink-2); font-size: .98rem; max-width: 56ch; }
.tile-secure .tile-text h3 { margin: 0; }

/* Wide tiles put the words beside the picture. */
.split { display: grid; gap: 18px; }
@container (min-width: 600px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 28px; align-items: start; }
  .tile-perms .split { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .split-modes { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
}

/* Small check marks, drawn as raised green keys. */
.tick, .yes {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: var(--green); border: var(--edge); box-shadow: 0 2px 0 0 var(--base);
}
.tick svg, .yes svg, .mr-saved svg { width: 13px; height: 13px; fill: none; stroke: var(--base); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Step 1 */
.tile-install { background: var(--paper); }
.tile-install h3 { font-stretch: 112%; font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.12; text-wrap: balance; }
.ticks { list-style: none; margin: auto 0 0; padding: 14px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-weight: 650; }
.ticks li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: var(--edge);
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23020A2E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.perms { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.perms li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; padding: 12px 14px; }
.perms li + li { border-top: 1px solid var(--line); }
.perms .tick { grid-row: span 2; margin-top: 1px; }
.tick-opt { background: #fff; }
.perm-what { font-weight: 700; line-height: 1.3; }
.perm-how { color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.opt-tag {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: .72rem; font-weight: 700; line-height: 1.4; padding: 0 8px; border-radius: 999px;
  background: var(--amber-soft); color: #6E4B00;
}

/* Step 2: where an assignment lands */
.modes-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.modes-label { font-size: .84rem; font-weight: 700; color: var(--ink-2); }
.modes-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.modes-switch button {
  cursor: pointer; padding: 5px 12px; border-radius: 999px; border: var(--edge); background: #fff;
  box-shadow: 0 2px 0 0 var(--base); font-size: .86rem; font-weight: 650;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.modes-switch button:hover { background: var(--green-soft); }
.modes-switch button[aria-pressed="true"],
.modes-switch button:active { background: var(--green); transform: translateY(2px); box-shadow: 0 0 0 0 var(--base); }
.modes-desc { display: grid; color: var(--ink-2); font-size: .94rem; }
.modes-desc > p { grid-area: 1 / 1; margin: 0; }
.modes-sizer { visibility: hidden; }
.mini-rec { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 12px; font-size: .9rem; line-height: 1.4; }
.mr-head { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mr-fields { display: grid; padding: 12px 0; }
.mr-field { grid-area: 1 / 1; display: grid; gap: 9px; align-content: start; visibility: hidden; }
.mini-rec[data-mode-view="owner"] [data-for="owner"],
.mini-rec[data-mode-view="label"] [data-for="label"],
.mini-rec[data-mode-view="property"] [data-for="property"] { visibility: visible; }
.mr-k { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.mr-v { display: flex; align-items: center; gap: 9px; font-weight: 650; }
.mr-written { align-self: start; justify-self: start; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--green-soft); box-shadow: inset 0 0 0 1.5px var(--green-2); }
.mr-kind { color: var(--ink-3); font-weight: 500; font-size: .8rem; }
.mr-kept { margin-left: auto; font-size: .74rem; font-weight: 700; line-height: 1.3; padding: 2px 9px; border-radius: 7px; background: var(--paper-3); color: var(--ink-2); }
.mr-v .fr-label { margin-left: auto; }
.fr-label, .mr-kept { white-space: nowrap; }
@container (max-width: 420px) { .mr-kind { display: none; } }
.mr-saved { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--green-ink); font-weight: 700; font-size: .84rem; }
.mr-saved svg { stroke: var(--green-ink); }
.mini-rec.stamp .fr-label,
.mini-rec.stamp .mr-written { animation: stamp .45s cubic-bezier(.2, .9, .25, 1.25) both; }
.mini-rec.stamp .mr-saved { animation: appear .3s ease .5s both; }

/* Step 2: who can assign */
.roles-wrap { margin-top: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.roles { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.3; }
.roles th, .roles td { padding: 11px 12px; text-align: left; vertical-align: middle; }
.roles thead th { font-size: .78rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border-bottom: 1px solid var(--line); }
.roles thead th:not(:first-child), .roles td { text-align: center; width: 27%; }
.roles tbody tr + tr > * { border-top: 1px solid var(--line); }
.roles tbody th { font-weight: 650; }
.no { color: var(--ink-2); font-weight: 700; }
.roles-note { font-size: .8rem; font-weight: 650; color: var(--ink-2); }

/* Step 3: the card, with its map pop-up opened over the record */
.cm-scene { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); align-items: start; margin-top: auto; padding: 4px 0 6px; }
.cm { position: relative; z-index: 1; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; font-size: .86rem; line-height: 1.35; }
.cm-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-stretch: 112%; font-weight: 760; font-size: .95rem; }
.cm-title img { width: 24px; height: auto; }
.cm-who { margin: 0 0 12px; display: grid; gap: 7px; }
.cm-who div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
.cm-who dt { color: var(--ink-3); font-size: .8rem; font-weight: 600; }
.cm-who dd { margin: 0; font-weight: 650; }
.cm-who .cm-none { color: var(--ink-3); font-weight: 500; }
.cm-k { padding-top: 10px; margin-bottom: 4px; border-top: 1px solid var(--line); font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.cm-near { list-style: none; margin: 0 0 12px; padding: 0; }
.cm-near li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; }
.cm-open { display: inline-block; padding: 6px 12px; border-radius: 10px; font-weight: 700; font-size: .84rem; background: var(--green); border: var(--edge); box-shadow: var(--raise-sm); }
.cm-pop {
  position: relative; z-index: 2; margin: 34px 0 0 -12px;
  background: #fff; border: var(--edge); border-radius: 16px; box-shadow: var(--raise); overflow: hidden;
}
.cm-pop-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .8rem; font-weight: 700; }
.cm-x { width: 11px; height: 11px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; }
.cm-pop-map { display: block; width: 100%; height: auto; }
.cm-pop-map .road.minor path { stroke-width: 4; }
.cm-pop-map .casing.minor path { stroke-width: 6; }
.cm-foot { color: var(--ink-2); font-size: .94rem; }
@container (max-width: 560px) {
  .cm-scene { grid-template-columns: minmax(0, 1fr); }
  .cm { margin-right: 26px; }
  .cm-pop { margin: -12px 0 0 26px; }
}

/* Step 3: stays in step, a small echo of the diagram */
.insync { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.insync-ways { display: grid; gap: 10px; }
.way { position: relative; display: block; padding-bottom: 7px; text-align: center; font-size: .76rem; font-weight: 650; line-height: 1.2; color: var(--ink-2); }
.way::before { content: ""; position: absolute; left: 0; right: 6px; bottom: 0; height: 2.5px; border-radius: 2px; background: var(--base); }
.way::after { content: ""; position: absolute; bottom: -4px; width: 9px; height: 10.5px; background: var(--base); }
.way-in::after { right: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.way-out::before { left: 6px; right: 0; background: var(--green-2); }
.way-out::after { left: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); background: var(--green-2); }

/* Step 4: the note on the timeline */
.tl { margin-top: auto; display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.tl-item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; }
.tl-item + .tl-item::before { content: ""; position: absolute; left: 13px; top: -14px; height: 14px; border-left: 2px solid var(--line); }
.tl-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--paper-3); }
.tl-icon svg { width: 14px; height: 14px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; }
.tl-crm .tl-icon { background: var(--green); border: var(--edge); box-shadow: 0 2px 0 0 var(--base); }
.tl-crm .tl-icon svg { stroke: var(--base); }
.tl-head { display: flex; justify-content: space-between; gap: 8px; min-height: 28px; align-items: center; font-size: .82rem; font-weight: 700; }
.tl-head span:last-child { color: var(--ink-3); font-weight: 500; }
.tl-body { font-size: .95rem; font-weight: 600; line-height: 1.4; }

/* Step 4: a workflow reacting to an assignment */
.wf { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; align-self: center; }
.wf li {
  position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px;
  background: #fff; border: var(--edge); box-shadow: var(--raise-sm); font-weight: 650; line-height: 1.35;
}
.wf li + li::before { content: ""; position: absolute; left: 24px; top: -24px; height: 20px; border-left: 2px dashed var(--base); }
.wf-k { font-size: .78rem; font-weight: 750; color: var(--green-ink); }
.wf-then { background: var(--green-soft); }

/* Under the hood */
.tile-secure { background: var(--ink); color: #fff; }
.secure { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
@container (min-width: 600px) {
  .secure { grid-template-columns: 1fr 1fr; gap: 16px 30px; }
  .secure-wide { grid-column: 1 / -1; }
}
.secure li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; color: rgba(255, 255, 255, .86); font-size: .97rem; line-height: 1.45; }
.secure li::before {
  content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23020A2E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.secure-wide { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16); }
.roads-svg { display: block; width: 100%; height: auto; margin-top: auto; border-radius: 12px; border: 1px solid var(--line); }
.roads-svg .road.minor path { stroke-width: 5; }
.roads-svg .casing.minor path { stroke-width: 7.5; }
.roads-svg .road.major path { stroke-width: 8; }
.roads-svg .casing.major path { stroke-width: 11; }
.roads-svg .river { stroke-width: 20; }
.later { padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; }

/* FAQ and early access */
.faq { padding-top: clamp(56px, 7vw, 96px); }
.hs-cta { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter) 96px; }
.hs-cta .tile-cta { margin-top: 0; }
.signup input::placeholder { color: var(--ink-3); }

/* Responsive */
@media (max-width: 1100px) {
  .span-7, .span-5 { grid-column: span 6; }
  .span-half { grid-column: span 3; }
  .rows-2 { grid-row: auto; }

  /* The diagram stacks: record on top, the two lanes run down and up, the map below. */
  .flow-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; width: 100%; max-width: 640px; margin: 0 auto; }
  .flow-record { grid-column: 1 / -1; grid-row: 1; display: block; }
  .fr-old { margin-top: 0; }
  .lane { grid-row: 2; min-height: 0; padding: 34px 0 36px; }
  .lane-read { grid-column: 1; }
  .lane-write { grid-column: 2; }
  .lane-line { top: -14px; bottom: 17px; left: 22px; right: auto; width: 12px; height: auto; margin-top: 0; border-radius: 0 0 6px 6px; }
  .lane-write .lane-line { top: 17px; bottom: -14px; left: 22px; right: auto; border-radius: 6px 6px 0 0; }
  .lane-read .lane-line::after { top: auto; bottom: -16px; right: auto; left: 50%; width: 22px; height: 15px; margin: 0 0 0 -11px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .lane-write .lane-line::after { top: -16px; left: 50%; width: 22px; height: 15px; margin: 0 0 0 -11px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .lane-body, .lane-write .lane-body { position: static; flex-direction: column; align-items: flex-start; padding-left: 52px; }
  .lane-chips { justify-content: flex-start; }
  .flow-map { grid-column: 1 / -1; grid-row: 3; }
  .flow-map .flow-tag { left: 58px; }
  .fm-frame { min-height: 0; aspect-ratio: 520 / 400; }
  html.js .flow:not(.final) .lane-read .lane-line { clip-path: inset(-16px -10px 100% -10px); }
  html.js .flow:not(.final) .lane-write .lane-line { clip-path: inset(100% -10px -16px -10px); }
  .flow.play .lane-read .lane-line { animation-name: lane-down; }
  .flow.play .lane-write .lane-line { animation-name: lane-up; }
}
@media (max-width: 900px) {
  .hs-intro { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-replay { grid-column: 1; grid-row: 3; justify-self: start; }
  .lane-line, .lane-write .lane-line { left: 14px; }
  .lane-body, .lane-write .lane-body { padding-left: 40px; }
  .lane-chips li { font-size: .78rem; padding: 4px 8px; }
  .flow-map .flow-tag { left: 46px; }
  .fm-panel { right: 10px; bottom: 10px; width: auto; min-width: 200px; font-size: .8rem; }
  .fm-row + .fm-row { display: none; }
  .step h2 { gap: 12px; }
  .step-num { width: 36px; height: 36px; font-size: 1rem; }
}