/* Unlock Integrations v9.1 kit: service detail pages (incl. /salesforce/). Builds on v7-base.css and its shared tokens
   (--v7-h1/h2/h3, --v7-space, --v7-space-tight, --v7-tile*). Markup: service-detail.php (crumbs, h1, a plain answer,
   two actions) and the page bodies in WordPress (.cx-body > sections). Icons are written in content as
   <span class="cx-ico" data-icon="name"></span> and filled by service-detail.php.
   Lines are straight only: 1px rules and straight arrows that start and stop at a tile. No curves, elbows or
   parallel branch lines. Each page mixes the shared blocks with one or two blocks that only its subject uses. */

/* ---------- Hero ---------- */
.unlock-site .cx-hero { position:relative; padding:36px 0 var(--v7-space); background:var(--v7-ink); color:var(--v7-text); }
.unlock-site .cx-hero .crumbs { margin:0 0 clamp(48px, 6vw, 96px); }
.cx-hero__copy { max-width:780px; }
.unlock-site .cx-hero h1 { max-width:15em; margin:0 0 28px; color:var(--v7-text); font:var(--v7-h1); letter-spacing:-.035em; word-spacing:.05em; }
.unlock-site .cx-hero__answer { max-width:36em; margin:0; color:var(--v7-text-2); font-size:clamp(18px, 1.4vw, 20px); line-height:1.6; letter-spacing:-.01em; }
.cx-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; margin-top:40px; }
.unlock-site .cx-hero__more { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--v7-mint); font:600 15px/1.3 var(--v7-sans); text-decoration:none; }
.cx-hero__more svg { width:16px; height:16px; flex:none; transition:transform .25s var(--v7-ease); }
.cx-hero__more:hover, .cx-hero__more:focus-visible { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.cx-hero__more:hover svg, .cx-hero__more:focus-visible svg { transform:translateX(3px); }

/* ---------- Shared type inside the body ---------- */
.unlock-site .cx-body h2 { margin:0 0 18px; color:var(--v7-fg); font:var(--v7-h2); letter-spacing:-.035em; }
.unlock-site .cx-body h3 { margin:0; color:var(--v7-fg); font:var(--v7-h3); letter-spacing:-.015em; }
.unlock-site .cx-body p { color:var(--v7-fg-2); }
.cx-intro { max-width:44rem; margin-bottom:clamp(40px, 5vw, 64px); }
.unlock-site :is(.cx-intro, .cx-split__copy) p { max-width:40em; margin:0 0 14px; font-size:17.5px; line-height:1.7; }
.unlock-site :is(.cx-intro, .cx-split__copy) p:last-child { margin-bottom:0; }
.unlock-site .cx-split__copy .cx-first { color:var(--v7-fg); font-size:clamp(19px, 1.55vw, 22px); line-height:1.55; letter-spacing:-.012em; }
.cx-content a:not(.v7-link):not(.cx-card) { color:var(--v7-accent); text-underline-offset:3px; }
.unlock-site .cx-content .v7-link { font-size:15.5px; }
.unlock-site .cx-body .cx-next { margin:clamp(36px, 4.5vw, 52px) 0 0; }
.unlock-site .cx-body .cx-proof .cx-next { margin:0; }
.cx-arrow { display:inline-block; color:var(--v7-accent); transition:transform .25s var(--v7-ease); }
.v7-link:hover .cx-arrow, .v7-link:focus-visible .cx-arrow { transform:translateX(3px); }
/* Small item text used by every block. */
.unlock-site .cx-body :is(.cx-flow, .cx-icons, .cx-chain, .cx-lane, .cx-hub, .cx-ladder, .cx-tools, .cx-board, .cx-choice, .cx-compare, .cx-products) p { margin:6px 0 0; font-size:15.5px; line-height:1.55; }

/* Icon tile: one shape (base sets radius and glyph size). Mint ~12% on dark, green ~10% on paper. */
.cx-ico { display:inline-grid; place-items:center; flex:none; width:var(--v7-tile); height:var(--v7-tile); color:var(--v7-accent); background:rgba(133,237,197,.12); }
:is(.v7-section--paper, .v7-section--paper-2, .v7-on-paper) .cx-ico { background:rgba(24,103,78,.1); }
.cx-ico--sm { width:var(--v7-tile-sm); height:var(--v7-tile-sm); }
.cx-ico--lg { width:var(--v7-tile-lg); height:var(--v7-tile-lg); }

/* A plain ruled list (no icons). */
.unlock-site .cx-list { margin:20px 0 0; padding:0; list-style:none; border-top:1px solid var(--v7-rule); }
.unlock-site .cx-list li { margin:0; padding:13px 0; border-bottom:1px solid var(--v7-rule); color:var(--v7-fg); font-size:16.5px; line-height:1.55; }

/* ---------- Answer first, beside the page's one photo ---------- */
.cx-split .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px clamp(48px, 6vw, 96px); align-items:center; }
.cx-split--flip .cx-photo { order:-1; }
.cx-photo { aspect-ratio:4 / 3; }
.cx-photo img { height:100%; }

/* ---------- System graphic: three tiles, straight arrows, one side branch ---------- */
.cx-flow { margin:0; }
.cx-flow__row, .cx-flow__aside { display:grid; grid-template-columns:minmax(0,1fr) clamp(96px, 10vw, 150px) minmax(0,1fr) clamp(96px, 10vw, 150px) minmax(0,1fr); align-items:stretch; }
.cx-flow__tile, .cx-chain__tile { display:grid; align-content:start; gap:0; padding:26px 26px 28px; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:rgba(242,243,238,.03); }
.unlock-site :is(.cx-flow__tile, .cx-chain__tile) h3 { margin-top:20px; }
:is(.cx-flow__tile, .cx-chain__tile).is-hub { border-color:rgba(133,237,197,.45); background:rgba(133,237,197,.06); }
.cx-flow__tile.is-exception { border-style:dashed; }
.cx-flow__tile.is-exception .cx-ico { color:var(--v7-text-2); background:rgba(242,243,238,.07); }
.cx-flow__link, .cx-flow__down, .cx-chain__link { position:relative; display:block; color:var(--v7-accent); }
/* Straight arrow: a 1.5px shaft and a two-stroke head. */
:is(.cx-flow__link, .cx-chain__link)::before { content:""; position:absolute; left:12px; right:13px; top:50%; height:1.5px; background:currentColor; }
:is(.cx-flow__link, .cx-chain__link)::after { content:""; position:absolute; right:13px; top:50%; width:9px; height:9px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:translate(0,-50%) rotate(45deg); }
:is(.cx-flow__link, .cx-chain__link) > span { position:absolute; left:0; right:0; bottom:calc(50% + 12px); color:var(--v7-fg-3); font:500 13px/1.3 var(--v7-sans); text-align:center; }
.cx-flow__aside .cx-flow__down, .cx-flow__aside .cx-flow__tile { grid-column:3; }
.cx-flow__down { height:72px; }
.cx-flow__down::before { content:""; position:absolute; left:50%; top:10px; bottom:13px; width:1.5px; background:currentColor; }
.cx-flow__down::after { content:""; position:absolute; left:50%; bottom:13px; width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translate(-50%,0) rotate(45deg); }
.cx-flow__down > span { position:absolute; left:calc(50% + 16px); top:50%; translate:0 -50%; color:var(--v7-fg-3); font:500 13px/1.3 var(--v7-sans); white-space:nowrap; }
.cx-flow__from { display:none; }
.unlock-site .cx-example__note { max-width:44em; margin:clamp(40px, 5vw, 56px) 0 0; padding-top:24px; border-top:1px solid var(--v7-rule); color:var(--v7-fg-3); font-size:15px; line-height:1.6; }

/* A chain of tiles (any number) joined by straight arrows; the arrows sit only between tiles. */
.cx-chain { display:flex; align-items:stretch; margin:0; }
.cx-chain__tile { flex:1 1 0; min-width:0; }
.cx-chain__tile.is-wide { flex-grow:1.55; }
.cx-chain__link { flex:0 0 clamp(72px, 7.5vw, 116px); }

/* FormAssembly: the three outcomes of a record match, inside the middle tile. */
.cx-match { margin:18px 0 0; padding:0; list-style:none; border-top:1px solid var(--v7-rule); }
.cx-match li { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:4px 16px; padding:11px 0; border-bottom:1px solid var(--v7-rule); font-size:15px; line-height:1.45; }
.cx-match b { color:var(--v7-fg); font-weight:600; }
.cx-match span { color:var(--v7-fg-2); }

/* ---------- Icon grid: icon, short title, one line ---------- */
.cx-icons { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px clamp(32px, 4vw, 64px); margin:0; padding:0; list-style:none; }
.cx-icons--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.cx-icons li { display:grid; align-content:start; gap:0; margin:0; padding-top:28px; border-top:1px solid var(--v7-rule); }
.unlock-site .cx-icons h3 { margin-top:20px; }

/* One line that points to /process/ and the contact form, instead of a step strip on every page. */
.unlock-site .cx-onward { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 32px; max-width:none; margin:clamp(48px, 6vw, 72px) 0 0; padding-top:28px; border-top:1px solid var(--v7-rule); color:var(--v7-fg); font-size:17px; line-height:1.6; }
.cx-onward > span { flex:1 1 26em; }
.cx-onward__links { display:flex; flex-wrap:wrap; gap:12px 28px; }

/* ---------- Real numbers, big (api-integrations and salesforce only) ---------- */
.cx-factrow { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin:0; padding:0; list-style:none; }
.cx-factrow li { display:grid; align-content:start; gap:12px; margin:0; padding:4px clamp(20px, 2.4vw, 36px); border-left:1px solid var(--v7-rule); }
.cx-factrow li:first-child { padding-left:0; border-left:0; }
.cx-factrow strong { color:var(--v7-mint); font:600 clamp(56px, 6vw, 92px)/.95 var(--v7-display); letter-spacing:-.05em; }
.cx-factrow span { max-width:22em; color:var(--v7-fg-2); font-size:15.5px; line-height:1.55; }

/* ---------- A short proof band: one fact about Daniel's own work, with a link ---------- */
.cx-body > .cx-proof { padding-block:var(--v7-space-tight); }
.cx-proof .wrap { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:24px clamp(28px, 4vw, 56px); align-items:center; }
.unlock-site .cx-proof h2 { margin-bottom:10px; }
.unlock-site .cx-proof p { max-width:44em; margin:0; font-size:17px; line-height:1.65; }

/* ---------- Stripe: three lanes (a payment, a failed card, a refund) ---------- */
.cx-lanes { display:grid; gap:0; margin:0; border-top:1px solid var(--v7-rule); }
.cx-lane { display:grid; grid-template-columns:minmax(180px, .9fr) minmax(0,3.6fr); gap:20px clamp(28px, 3.5vw, 56px); align-items:center; padding:32px 0; border-bottom:1px solid var(--v7-rule); }
.cx-lane__head { display:flex; align-items:center; gap:16px; }
.cx-lane__steps { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:44px; margin:0; padding:0; list-style:none; }
.cx-lane__steps li { position:relative; display:flex; align-items:center; min-height:76px; margin:0; padding:14px 16px; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:rgba(242,243,238,.03); color:var(--v7-fg); font-size:15px; line-height:1.4; }
.cx-lane__steps li:last-child { border-color:rgba(133,237,197,.45); background:rgba(133,237,197,.06); }
/* Arrow in the gap after every step except the last, so no line runs past the final tile. */
.cx-lane__steps li:not(:last-child)::before { content:""; position:absolute; left:calc(100% + 8px); width:28px; top:50%; height:1.5px; background:var(--v7-accent); }
.cx-lane__steps li:not(:last-child)::after { content:""; position:absolute; left:calc(100% + 27px); top:50%; width:8px; height:8px; border-top:1.5px solid var(--v7-accent); border-right:1.5px solid var(--v7-accent); transform:translate(0,-50%) rotate(45deg); }

/* ---------- Education: one student record, four offices, straight lines into it ---------- */
.cx-hub { --hub-gap:clamp(56px, 7vw, 112px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto auto; gap:24px var(--hub-gap); margin:0; }
.cx-hub__core { grid-column:2; grid-row:1 / 3; display:grid; align-content:center; justify-items:start; padding:32px; border:1px solid rgba(133,237,197,.45); border-radius:var(--v7-r-panel); background:rgba(133,237,197,.06); }
.unlock-site .cx-hub__core h3 { margin-top:20px; }
.cx-hub__office { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px; align-items:center; padding:22px; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:rgba(242,243,238,.03); }
.cx-hub__office .cx-ico { grid-row:1 / 3; }
.unlock-site .cx-hub__office p { margin:0; }
.cx-hub__office.is-l { grid-column:1; }
.cx-hub__office.is-r { grid-column:3; }
.cx-hub__office.is-top { grid-row:1; }
.cx-hub__office.is-bottom { grid-row:2; }
.cx-hub__office::after { content:""; position:absolute; top:50%; width:var(--hub-gap); height:1.5px; background:var(--v7-accent); }
.cx-hub__office.is-l::after { left:100%; }
.cx-hub__office.is-r::after { right:100%; }

/* ---------- Reporting: two reports, one difference ---------- */
.cx-compare { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:0; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:var(--v7-surface); }
.cx-compare > div { display:grid; align-content:start; justify-items:start; padding:clamp(28px, 3.5vw, 44px); }
.cx-compare > div + div { border-left:1px solid var(--v7-rule); }
.unlock-site .cx-compare h3 { margin-top:20px; }
.unlock-site .cx-compare .cx-compare__rule { margin-top:18px; padding-top:14px; border-top:1px solid var(--v7-rule); color:var(--v7-fg); font-weight:600; }
.unlock-site .cx-compare__note { max-width:44em; margin:28px 0 0; color:var(--v7-fg); font-size:17.5px; line-height:1.65; }

/* ---------- Rescue: the order things get fixed in (one straight vertical line that stops at the last stop) ---------- */
.cx-steps-split .wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px clamp(48px, 6vw, 96px); align-items:start; }
.cx-steps-split .cx-intro { margin-bottom:0; }
.cx-ladder { margin:0; padding:0; list-style:none; }
.cx-ladder li { position:relative; display:grid; grid-template-columns:var(--v7-tile) minmax(0,1fr); gap:4px 22px; padding:0 0 34px; }
.cx-ladder li:last-child { padding-bottom:0; }
.cx-ladder li::before { content:""; position:absolute; left:calc(var(--v7-tile) / 2 - .75px); top:var(--v7-tile); bottom:0; width:1.5px; background:var(--v7-accent); opacity:.6; }
.cx-ladder li:last-child::before { display:none; }
.cx-ladder .cx-ico { grid-row:1 / 3; }
.unlock-site .cx-ladder h3 { padding-top:2px; }
.unlock-site .cx-ladder p { margin-top:4px; }

/* ---------- MCP: the tools an assistant gets ---------- */
.cx-tools { margin:0; padding:0; list-style:none; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:var(--v7-surface); }
.cx-tools li { display:grid; grid-template-columns:var(--v7-tile-sm) minmax(0,.9fr) minmax(0,1.4fr) 150px; gap:6px 22px; align-items:center; margin:0; padding:18px clamp(18px, 2.4vw, 28px); border-top:1px solid var(--v7-rule); }
.cx-tools li:first-child { border-top:0; }
.unlock-site .cx-tools h3 { font-size:18px; }
.unlock-site .cx-tools p { margin:0; }
.cx-tools__tag { justify-self:end; padding:4px 10px; border:1px solid var(--v7-rule); border-radius:999px; color:var(--v7-fg-2); font:500 13px/1.3 var(--v7-sans); white-space:nowrap; }
.cx-tools__tag.is-acts { border-color:rgba(133,237,197,.45); color:var(--v7-accent); }
.unlock-site .cx-tools-note { margin:24px 0 0; color:var(--v7-fg-3); font-size:15px; line-height:1.6; }

/* ---------- AI agents: what the agent may do ---------- */
.cx-board { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin:0; }
.cx-board > div { display:grid; align-content:start; padding:clamp(24px, 3vw, 34px); border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:var(--v7-surface); }
.cx-board > div.is-never { border-style:dashed; background:transparent; }
.cx-board__head { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.cx-board ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--v7-rule); }
.cx-board li { margin:0; padding:12px 0; border-bottom:1px solid var(--v7-rule); color:var(--v7-fg); font-size:16px; line-height:1.5; }

/* ---------- API: who owns each field ---------- */
.cx-own { width:100%; margin:0; border-collapse:collapse; border-top:1px solid var(--v7-rule); font-size:16px; line-height:1.5; }
.cx-own th, .cx-own td { padding:16px 20px 16px 0; border-bottom:1px solid var(--v7-rule); text-align:left; vertical-align:middle; }
.cx-own thead th { padding-block:12px; color:var(--v7-fg-3); font:500 14px/1.4 var(--v7-sans); }
.cx-own tbody th { color:var(--v7-fg); font-weight:600; }
.cx-own td { color:var(--v7-fg-2); }
.cx-own td.is-home { color:var(--v7-fg); }
.cx-own__sys { display:inline-flex; align-items:center; gap:12px; }
.cx-own__sys .cx-ico { width:var(--v7-tile-sm); height:var(--v7-tile-sm); }

/* ---------- Salesforce: Flow, Apex or a component (the page's one large-tile row) ---------- */
.cx-choice { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px clamp(32px, 4vw, 64px); margin:0; padding:0; list-style:none; }
.cx-choice li { display:grid; align-content:start; justify-items:start; margin:0; padding-top:28px; border-top:1px solid var(--v7-rule); }
.unlock-site .cx-choice h3 { margin-top:22px; }

/* ---------- Custom software: the two products Daniel runs ---------- */
.cx-products { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px clamp(32px, 4vw, 64px); margin:0; }
.cx-products > article { display:grid; align-content:start; }
.cx-products figure { margin:0 0 24px; }
.cx-products figure img { display:block; width:100%; height:auto; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); }
.unlock-site .cx-products .cx-list { margin-top:16px; }
.unlock-site .cx-products .cx-list li { font-size:15.5px; }

/* ---------- FAQ (questions match the page's FAQ schema) ---------- */
.cx-faq .wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px clamp(48px, 6vw, 96px); align-items:start; }
.unlock-site .cx-faq .faq-list details p { max-width:62ch; }

/* ---------- Related services ---------- */
.cx-body > .cx-related { padding-block:var(--v7-space-tight); }
.unlock-site .cx-related h2 { margin-bottom:32px; }
.cx-cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.cx-cards li { display:flex; margin:0; }
.unlock-site .cx-card { display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; padding:28px; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel);
  background:var(--v7-surface); color:inherit; text-decoration:none; transition:border-color .25s var(--v7-ease); }
.cx-card .cx-ico { margin-bottom:12px; }
.cx-card__name { color:var(--v7-fg); font:var(--v7-h3); letter-spacing:-.015em; }
.cx-card__desc { color:var(--v7-fg-2); font-size:15.5px; line-height:1.55; }
.cx-card .cx-arrow { margin-top:auto; padding-top:14px; font-size:20px; }
.cx-card:hover, .cx-card:focus-visible { border-color:var(--v7-accent); }
.cx-card:hover .cx-arrow, .cx-card:focus-visible .cx-arrow { transform:translateX(3px); }

/* ---------- Monthly support: three plans, same rows in each, no prices ---------- */
.cx-plans { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin:0; }
.cx-plan { display:flex; flex-direction:column; padding:clamp(24px, 3vw, 36px); border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:var(--v7-surface); }
.unlock-site .cx-plan__hours { display:flex; align-items:baseline; gap:12px; margin:18px 0 22px; }
.cx-plan__hours strong { color:var(--v7-accent); font:600 clamp(56px, 6vw, 84px)/.9 var(--v7-display); letter-spacing:-.05em; }
.cx-plan__hours span { color:var(--v7-fg-2); font-size:16px; }
.cx-plan__rows { margin:0 0 28px; border-top:1px solid var(--v7-rule); }
.cx-plan__rows > div { display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:4px 16px; padding:13px 0; border-bottom:1px solid var(--v7-rule); }
.cx-plan__rows dt { color:var(--v7-fg-3); font:500 14px/1.5 var(--v7-sans); }
.cx-plan__rows dd { margin:0; color:var(--v7-fg); font-size:15.5px; line-height:1.5; }
.unlock-site .cx-plan__ask { margin:auto 0 0; }

/* ---------- QuickBooks: what moves each way (straight arrows from tile edge to tile edge) ---------- */
.cx-exchange { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); align-items:stretch; margin:0; }
.cx-exchange__sys { display:grid; align-content:center; justify-items:start; padding:28px; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:rgba(242,243,238,.03); }
.unlock-site .cx-exchange__sys h3 { margin-top:20px; }
.cx-exchange__flows { display:grid; align-content:center; gap:30px; margin:0; padding:0; list-style:none; }
.cx-exchange__flows li { position:relative; margin:0; padding:0 18px 14px; color:var(--v7-fg); font-size:15px; line-height:1.4; text-align:center; }
.cx-exchange__flows li::before { content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--v7-accent); }
.cx-exchange__flows li::after { content:""; position:absolute; bottom:.75px; width:9px; height:9px; border-top:1.5px solid var(--v7-accent); border-right:1.5px solid var(--v7-accent); }
.cx-exchange__flows li.is-right::after { right:1px; transform:translate(0,50%) rotate(45deg); }
.cx-exchange__flows li.is-left::after { left:1px; transform:translate(0,50%) rotate(-135deg); }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .cx-factrow { grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:36px; }
  .cx-factrow li:nth-child(3) { padding-left:0; border-left:0; }
  .cx-icons, .cx-icons--4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cx-lane { grid-template-columns:minmax(0,1fr); }
  .cx-board, .cx-plans { grid-template-columns:minmax(0,1fr); }
  .cx-plans { max-width:36rem; }
  .cx-tools li { grid-template-columns:var(--v7-tile-sm) minmax(0,1fr) 150px; }
  .cx-tools li > p { grid-column:2 / -1; }
  .cx-tools li > .cx-ico { grid-row:1 / 3; align-self:start; }
}
@media (max-width:860px) {
  .cx-split .wrap, .cx-faq .wrap, .cx-steps-split .wrap { grid-template-columns:minmax(0,1fr); }
  .cx-split--flip .cx-photo { order:0; }
  .cx-photo { aspect-ratio:16 / 9; }
  .cx-proof .wrap { grid-template-columns:auto minmax(0,1fr); }
  .cx-proof .cx-next { grid-column:2; }
  .cx-cards, .cx-products, .cx-choice { grid-template-columns:minmax(0,1fr); gap:14px; }
  .cx-choice, .cx-products { gap:40px; }

  /* The system graphic turns vertical: one straight line down through the main tiles. The side branch no longer
     sits beside that line; it follows the main flow as its own dashed tile, labelled with where it branches from. */
  .cx-flow { display:flex; flex-direction:column; }
  .cx-flow__row { display:flex; flex-direction:column; }
  .cx-flow__link { height:64px; }
  .cx-flow__link::before, .cx-chain__link::before { left:50px; right:auto; top:10px; bottom:13px; width:1.5px; height:auto; }
  .cx-flow__link::after, .cx-chain__link::after { left:50px; right:auto; top:auto; bottom:13px; border-top:0; border-bottom:1.5px solid currentColor; transform:translate(-50%,0) rotate(45deg); margin-left:.75px; }
  :is(.cx-flow__link, .cx-chain__link) > span { left:70px; right:auto; top:50%; bottom:auto; translate:0 -50%; text-align:left; }
  .cx-flow__aside { display:block; margin-top:36px; padding-top:28px; border-top:1px solid var(--v7-rule); }
  .cx-flow__down { height:auto; margin:0 0 14px; }
  .cx-flow__down::before, .cx-flow__down::after { display:none; }
  .cx-flow__down > span { position:static; translate:none; color:var(--v7-fg-2); font:500 14px/1.4 var(--v7-sans); white-space:normal; }
  .cx-flow__from { display:inline; }

  .cx-chain { flex-direction:column; }
  .cx-chain__link { flex:0 0 64px; }

  .cx-lane__steps { grid-template-columns:minmax(0,1fr); gap:36px; }
  .cx-lane__steps li { min-height:0; }
  .cx-lane__steps li:not(:last-child)::before { left:32px; top:calc(100% + 6px); width:1.5px; height:24px; }
  .cx-lane__steps li:not(:last-child)::after { left:32px; top:calc(100% + 30px); border-top:0; border-bottom:1.5px solid var(--v7-accent); transform:translate(-50%,-100%) rotate(45deg); margin-left:.75px; }

  .cx-hub { grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:auto; gap:14px; }
  .cx-hub__core { grid-column:1 / -1; grid-row:auto; margin-bottom:10px; }
  .cx-hub__office.is-l, .cx-hub__office.is-r { grid-column:auto; grid-row:auto; }
  .cx-hub__office::after { display:none; }

  .cx-compare { grid-template-columns:minmax(0,1fr); }

  /* Exchange turns vertical: Salesforce above, QuickBooks below, arrows point down (to QuickBooks) or up (back). */
  .cx-exchange { grid-template-columns:minmax(0,1fr); }
  .cx-exchange__flows { gap:0; padding:6px 0; }
  .cx-exchange__flows li { display:flex; align-items:center; min-height:64px; padding:0 0 0 70px; text-align:left; }
  .cx-exchange__flows li::before { left:50px; right:auto; top:8px; bottom:8px; width:1.5px; height:auto; }
  .cx-exchange__flows li.is-right::after { left:50px; right:auto; top:auto; bottom:8px; transform:translate(-50%,0) rotate(135deg); margin-left:.75px; }
  .cx-exchange__flows li.is-left::after { left:50px; top:8px; bottom:auto; transform:translate(-50%,0) rotate(-45deg); margin-left:.75px; }
  .cx-compare > div + div { border-left:0; border-top:1px solid var(--v7-rule); }
}
@media (max-width:600px) {
  .unlock-site .cx-hero { padding-top:24px; }
  .unlock-site .cx-hero .crumbs { margin-bottom:40px; }
  .unlock-site .cx-hero h1 { margin-bottom:20px; }
  .cx-hero__actions { margin-top:32px; }
  .cx-icons, .cx-icons--4, .cx-factrow { grid-template-columns:minmax(0,1fr); row-gap:0; }
  .cx-icons, .cx-icons--4 { gap:0; }
  .cx-icons li { grid-template-columns:var(--v7-tile) minmax(0,1fr); column-gap:18px; row-gap:0; padding:22px 0; }
  .cx-icons li > .cx-ico { grid-row:1 / 3; }
  .unlock-site .cx-icons li > h3 { margin:2px 0 0; }
  .cx-factrow li { grid-template-columns:76px minmax(0,1fr); align-items:center; gap:16px; padding:18px 0 !important; border-left:0; border-top:1px solid var(--v7-rule); }
  .cx-factrow li:first-child { border-top:0; }
  .cx-factrow strong { font-size:52px; }
  .cx-flow__tile, .cx-chain__tile { padding:22px; }
  .cx-flow__link::before, .cx-flow__link::after, .cx-chain__link::before, .cx-chain__link::after { left:46px; }
  :is(.cx-flow__link, .cx-chain__link) > span { left:66px; }
  .cx-match li { grid-template-columns:minmax(0,1fr); }
  .cx-plan__rows > div { grid-template-columns:minmax(0,1fr); gap:2px; }
  .cx-hub { grid-template-columns:minmax(0,1fr); }
  .cx-proof .wrap { grid-template-columns:minmax(0,1fr); }
  .cx-proof .cx-next { grid-column:auto; }
  .cx-tools li { grid-template-columns:var(--v7-tile-sm) minmax(0,1fr); align-items:start; gap:4px 16px; padding:18px; }
  .cx-tools li > .cx-ico { grid-row:1 / 4; }
  .unlock-site .cx-tools h3 { padding-top:8px; }
  .cx-tools li > p, .cx-tools__tag { grid-column:2; }
  .cx-tools__tag { justify-self:start; }
  .cx-own { font-size:15px; }
  .cx-own th, .cx-own td { padding-right:10px; }
  .cx-own__sys .cx-ico { display:none; }
  .unlock-site .cx-card { display:grid; grid-template-columns:var(--v7-tile) minmax(0,1fr); gap:4px 18px; align-items:start; padding:22px; }
  .cx-card .cx-ico { grid-row:1 / 3; margin:0; }
  .cx-card .cx-arrow { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .cx-arrow, .cx-hero__more svg, .cx-card { transition:none; }
}