/* AI and your data explainer: this page's figures only. The hero scene (one question, six
   copies of the answer, four of them reachable), the lookup, the arrivals
   timeline, the life of one fact, the receipts, the wired systems, the badge-in record and the
   closing drawing. Shared chrome is in explainer.css, which loads first. Every finished state
   exists in HTML; motion is additive and rests visible. */

.ad-page .ex-head .h-display{text-wrap:balance}
/* The line after each figure is the story's next beat, not a slogan: a dashed stem drops from
   the figure into it, and its second sentence hands over to the section that follows. */
.ad-page .ex-punch{position:relative;margin-top:0;padding-top:64px}
.ad-page .ex-punch::before{content:"";position:absolute;left:50%;top:0;width:1.5px;height:44px;margin-left:-.75px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
.ad-page .ex-punch::after{content:"";position:absolute;left:50%;top:44px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#000}

/* The dashed new starter: a person glyph with no fill yet, the same "not placed" vocabulary
   the home audit band uses for the next tier. */
.ex-avatar--ghost{background-color:#fff;border-style:dashed;border-color:#8a8a8a;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ccircle cx=%2716%27 cy=%2712%27 r=%274.5%27 fill=%27%238a8a8a%27/%3E%3Cpath d=%27M7 26q1-8.5 9-8.5t9 8.5%27 fill=%27%23fff%27 stroke=%27%238a8a8a%27 stroke-width=%271.5%27/%3E%3C/svg%3E")}

/* Small shared bits: a chip naming a system, the AI wearing a badge, a lock glyph. */
.ad-chip{display:inline-block;padding:4px 10px;border:1.5px solid #000;border-radius:999px;font:500 12px/1.2 "Neue Montreal",system-ui,sans-serif;background:#fff;white-space:nowrap;font-style:normal}
.ad-chip--yellow{background:var(--yellow)}.ad-chip--pink{background:var(--pink)}.ad-chip--green{background:var(--green-bg)}.ad-chip--cream{background:var(--cream)}
.ad-chip--rule{background:#f7f4e8;padding-left:24px;position:relative}
.ad-chip--rule::before,.ad-lockchip::before,.ad-rec__rule::before{content:"";position:absolute;left:9px;top:50%;width:10px;height:10px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Crect x=%271%27 y=%274.5%27 width=%278%27 height=%275%27 rx=%271%27 fill=%27%23333%27/%3E%3Cpath d=%27M3 4.5V3a2 2 0 0 1 4 0v1.5%27 fill=%27none%27 stroke=%27%23333%27 stroke-width=%271.2%27/%3E%3C/svg%3E") center/contain no-repeat}
.ad-ai{position:relative;display:inline-grid;place-items:center}
.ad-ai .ex-avatar--ai{width:52px;height:52px;flex-basis:52px}
.ad-ai .ex-avatar--ai::after{font-size:15px}
.ad-ai--lg .ex-avatar--ai{width:72px;height:72px;flex-basis:72px}
.ad-ai--lg .ex-avatar--ai::after{font-size:20px}
.ad-badge{position:absolute;right:-14px;bottom:-8px;padding:3px 8px;border:1.5px solid #000;border-radius:5px;background:#fff;font:500 10px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;box-shadow:3px 3px 0 -1px rgba(0,0,0,.08)}
.ad-badge::before{content:"";position:absolute;left:50%;top:-9px;width:1.5px;height:9px;background:#000;transform:translateX(-50%)}
.ad-badge--coo{background:var(--pink)}
.ad-lockchip{display:inline-flex;align-items:center;gap:6px;margin:0 6px 4px 0;padding:3px 10px 3px 26px;position:relative;border:1.5px solid rgba(0,0,0,.4);border-radius:999px;background:#f7f4e8;font:500 12px/1.3 "Neue Montreal",system-ui,sans-serif;font-style:normal;color:#333;vertical-align:1px}

/* LOGOS: the systems in the story wear the marks of tools the ICP already runs on, so the
   figures read as their business and not as boxes. HubSpot and QuickBooks paths are from Simple
   Icons (CC0); the monday.com mark is drawn by hand as a close approximation; the spreadsheet is
   a close approximation of the Excel icon (green tile, white X, sheet of cells); the HR system is a generic people glyph.
   This is a deliberate exception to the site's no-third-party-marks rule, made for this page only
   at Justin's request on 2026-09-16. */
.ad-logo{display:inline-block;flex:none;width:18px;height:18px;vertical-align:-4px;background:center/contain no-repeat}
.ad-logo--sm{width:13px;height:13px;vertical-align:-2px}
.ad-logo--hubspot{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF7A59' d='M18.164 7.93V5.084a2.198 2.198 0 001.267-1.978v-.067A2.2 2.2 0 0017.238.845h-.067a2.2 2.2 0 00-2.193 2.193v.067a2.196 2.196 0 001.252 1.973l.013.006v2.852a6.22 6.22 0 00-2.969 1.31l.012-.01-7.828-6.095A2.497 2.497 0 104.3 4.656l-.012.006 7.697 5.991a6.176 6.176 0 00-1.038 3.446c0 1.343.425 2.588 1.147 3.607l-.013-.02-2.342 2.343a1.968 1.968 0 00-.58-.095h-.002a2.033 2.033 0 102.033 2.033 1.978 1.978 0 00-.1-.595l.005.014 2.317-2.317a6.247 6.247 0 104.782-11.134l-.036-.005zm-.964 9.378a3.206 3.206 0 113.215-3.207v.002a3.206 3.206 0 01-3.207 3.207z'/%3E%3C/svg%3E")}
.ad-logo--quickbooks{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232CA01C' d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm.642 4.1335c.9554 0 1.7296.776 1.7296 1.7332v9.0667h1.6c1.614 0 2.9275-1.3156 2.9275-2.933 0-1.6173-1.3136-2.9333-2.9276-2.9333h-.6654V7.3334h.6654c2.5722 0 4.6577 2.0897 4.6577 4.667 0 2.5774-2.0855 4.6666-4.6577 4.6666H12.642zM7.9837 7.333h3.3291v12.533c-.9555 0-1.73-.7759-1.73-1.7332V9.0662H7.9837c-1.6146 0-2.9277 1.316-2.9277 2.9334 0 1.6175 1.3131 2.9333 2.9277 2.9333h.6654v1.7332h-.6654c-2.5725 0-4.6577-2.0892-4.6577-4.6665 0-2.5771 2.0852-4.6666 4.6577-4.6666Z'/%3E%3C/svg%3E")}
.ad-logo--monday{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate%28-14 12 12%29' fill='none' stroke-linecap='round' stroke-width='4.4'%3E%3Cpath d='M4.5 7.2h11.5' stroke='%23FF3D57'/%3E%3Cpath d='M4.5 13.2h9.5' stroke='%23FFCB00'/%3E%3Cpath d='M16.8 19h.2' stroke='%2300CA72'/%3E%3C/g%3E%3C/svg%3E")}
.ad-logo--excel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5h11a1.6 1.6 0 0 1 1.6 1.6v15.8a1.6 1.6 0 0 1-1.6 1.6H9z' fill='%2321A366'/%3E%3Cpath d='M9 2.5h11a1.6 1.6 0 0 1 1.6 1.6v3.4H9z' fill='%2333C481'/%3E%3Cpath d='M9 16.5h12.6v3.4a1.6 1.6 0 0 1-1.6 1.6H9z' fill='%23185C37'/%3E%3Cpath d='M13.2 7.5v9M17.4 7.5v9M9 12h12.6' stroke='%23fff' stroke-width='.9' opacity='.85'/%3E%3Crect x='1.4' y='6' width='11.2' height='12' rx='1.6' fill='%23107C41'/%3E%3Cpath d='M4.4 9.1l4.6 5.8M9 9.1l-4.6 5.8' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")}
.ad-logo--hr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3.4' fill='%235C6BC0'/%3E%3Cpath d='M2.8 19.2q.8-6.4 6.2-6.4t6.2 6.4z' fill='%235C6BC0'/%3E%3Ccircle cx='16.6' cy='8.6' r='2.7' fill='%239FA8DA'/%3E%3Cpath d='M15.2 12.5q5.6.2 6 6.7h-4.6q-.2-4.2-1.4-6.7z' fill='%239FA8DA'/%3E%3C/svg%3E")}
.ad-logo--laptop{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.6' fill='none' stroke='%238a8a8a' stroke-width='1.5'/%3E%3Cpath d='M2 19h20' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")}
.ad-logo--mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2' fill='none' stroke='%238a8a8a' stroke-width='1.5'/%3E%3Cpath d='M3.5 7l8.5 6.5L20.5 7' fill='none' stroke='%238a8a8a' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ad-copy .ex-kicker,.ad-look__sys .ex-kicker{display:flex;align-items:center;gap:8px}
.ad-arrive .ad-arrive__sys b,.ad-wire .ad-wire__sys b{display:flex;align-items:center;gap:8px}
.ad-chip .ad-logo{margin:0 5px 0 -3px}
.ad-sheet__bar .ad-logo{margin-left:6px}
.ad-sheet__bar .ad-logo+.ad-sheet__name{margin-left:0}

/* THE SPREADSHEET WINDOW: the Data Lake drawn as itself, a title bar with the filename over a
   grid. Used small, fading out under the wired systems. */
.ad-sheet{position:relative;background:#fdfcf8;border:1.5px solid #000;border-radius:10px;overflow:visible;box-shadow:var(--ex-shadow)}
.ad-sheet__bar{display:flex;align-items:center;gap:5px;padding:9px 12px;border-bottom:1.5px solid #000;border-radius:10px 10px 0 0;background:#fff;font:500 12.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.ad-sheet__bar i:not(.ad-logo){width:7px;height:7px;border-radius:50%;background:#000;flex:none}
.ad-sheet__name{margin-left:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-sheet__saved{margin-left:auto;padding-left:12px;flex:none;font:500 10.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ad-sheet__grid{position:relative;height:104px;--cell:14.28%;background-image:repeating-linear-gradient(to right,rgba(0,0,0,.14) 0 1px,transparent 1px var(--cell)),repeating-linear-gradient(to bottom,rgba(0,0,0,.14) 0 1px,transparent 1px 20.8px)}
.ad-sheet__grid i{position:absolute;left:calc(var(--c) * var(--cell));top:calc(var(--r) * 20.8px);width:var(--cell);height:20.8px;background:var(--salmon-bg)}
.ad-sheet--sm .ad-sheet__bar{padding:7px 10px;font-size:11px}
.ad-sheet--sm .ad-sheet__grid{height:72px;--cell:20%;background-image:repeating-linear-gradient(to right,rgba(0,0,0,.14) 0 1px,transparent 1px var(--cell)),repeating-linear-gradient(to bottom,rgba(0,0,0,.14) 0 1px,transparent 1px 18px)}
.ad-sheet--sm .ad-sheet__grid i{top:calc(var(--r) * 18px);height:18px}

/* HERO: one question, six copies of the answer. The AI chip in the middle reaches out along
   measured wires to the four copies it can see (two numbers, two each); two more sit below with
   no wire, out of reach. Then a question mark, then it picks one. Runs once, rests finished. */
.ad-scene{position:relative;width:100%;margin:40px 0 0;padding:64px 30px 30px;background:var(--ex-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);text-align:left}
.ad-scene__tag{background:var(--salmon-bg)}
.ad-scene__grid{position:relative;z-index:1;display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap:48px;align-items:center}
.ad-scene__col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.ad-copy{position:relative;padding:12px 14px 12px;background:#fff;border:1.5px solid #000;border-radius:10px;box-shadow:var(--ex-shadow)}
.ad-copy .ex-kicker{margin-bottom:4px}
.ad-copy b{display:block;font:500 22px/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ad-copy small{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.ad-copy--hidden{border-style:dashed;border-color:#8a8a8a;box-shadow:none;background:#fdfcf8}
.ad-copy--hidden b{font-size:14px;font-weight:500;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-copy--hidden small{color:#8a8a8a;padding-left:16px;position:relative}
.ad-copy--hidden small::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M1.5 1.5l7 7%27 stroke=%27%238a8a8a%27 stroke-width=%271.3%27/%3E%3Cpath d=%27M1 5q4-4.5 8 0q-4 4.5-8 0z%27 fill=%27none%27 stroke=%27%238a8a8a%27 stroke-width=%271.1%27/%3E%3C/svg%3E") center/contain no-repeat}
.ad-scene__mid{display:flex;flex-direction:column;align-items:center;gap:26px;max-width:380px;margin:0 auto}
.ad-scene__ask{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border:1.5px solid #000;border-radius:14px 14px 14px 4px;box-shadow:var(--ex-shadow)}
.ad-scene__ask p{margin:0;font:500 17px/1.35 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ad-scene__ai{position:relative}
.ad-scene__q{position:absolute;right:-12px;top:-8px;width:28px;height:28px;display:grid;place-items:center;border:1.5px solid #b4531d;border-radius:50%;background:var(--salmon-bg);color:#7a3a14;font:500 16px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal}
.ad-scene__answer{width:100%;padding:14px 16px 12px;border-radius:4px 12px 12px 12px;background:var(--ex-tint);border:1px solid #c8d6f5}
.ad-scene__answer .ex-kicker{color:#2a4a80;margin-bottom:4px}
.ad-scene__answer p{margin:0;font:500 22px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.ad-scene__answer small{display:block;margin-top:8px;padding-top:8px;border-top:1.5px dashed rgba(0,0,0,.3);font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#333}
.ad-scene__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ad-scene__wires path{fill:none;stroke:rgba(0,0,0,.5);stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round}
@media(prefers-reduced-motion:no-preference){
  .ad-scene .ad-scene__ask,.ad-scene .ad-copy,.ad-scene .ad-scene__answer,.ad-scene .ad-scene__q{opacity:0;transform:translateY(6px)}
  .ad-scene .ad-scene__wires path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
  .ad-scene.is-seen .ad-scene__ask{animation:ex-arrive .5s var(--ease) .2s both}
  .ad-scene.is-seen .ad-copy{animation:ex-arrive .5s var(--ease) calc(1s + var(--i) * .5s) both}
  .ad-scene.is-seen .ad-scene__wires path{animation:ad-reach .6s var(--ease) both}
  .ad-scene.is-seen .ad-scene__wires path:nth-child(1){animation-delay:.7s}
  .ad-scene.is-seen .ad-scene__wires path:nth-child(2){animation-delay:1.2s}
  .ad-scene.is-seen .ad-scene__wires path:nth-child(3){animation-delay:1.7s}
  .ad-scene.is-seen .ad-scene__wires path:nth-child(4){animation-delay:2.2s}
  .ad-scene.is-seen .ad-scene__q{animation:ad-pop .5s cubic-bezier(.2,.9,.3,1.3) 3.9s both}
  .ad-scene.is-seen .ad-scene__answer{animation:ex-arrive .5s var(--ease) 4.6s both}
  .ad-scene.is-seen .ad-scene__ai .ex-avatar--ai{animation:ex-breathe 4.6s ease-in-out infinite}
}
@keyframes ad-reach{from{stroke-dashoffset:1;opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes ad-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* HOW AI USES YOUR DATA: the lookup. A question on the left, the AI chip in the middle with a
   dashed stem up into the system that holds the fact, the answer on the right. Once seen, a
   mark rides up the stem, the fact lights, the mark comes back and the answer lands. */
.ad-look{position:relative;max-width:1000px;margin:72px auto 0;padding:32px 32px 0;display:grid;grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);grid-template-areas:"sys sys sys" "ask mid out";column-gap:36px;row-gap:44px;align-items:center;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.ad-look__sys{grid-area:sys;position:relative;justify-self:center;width:300px;max-width:100%;padding:32px 16px 14px;background:#fff;border:1.5px solid #000;border-radius:10px;box-shadow:var(--ex-shadow)}
.ad-look__sys>i{position:absolute;left:0;right:0;top:0;height:20px;border-bottom:1.5px solid #000;border-radius:10px 10px 0 0;background:var(--cream)}
.ad-look__sys>i::before{content:"";position:absolute;left:10px;top:7px;width:5px;height:5px;border-radius:50%;background:#000;box-shadow:9px 0 0 #000,18px 0 0 #000}
.ad-look__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:8px 0 6px;padding:8px 10px;border:1.5px solid #000;border-radius:8px;background:#fdfcf8;font:400 13.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.ad-look__row b{font:500 16px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em;color:#000;padding:2px 6px;margin:-2px -6px;border-radius:5px;background:var(--yellow)}
.ad-look__sys small{display:block;font-size:12.5px;color:var(--muted)}
.ad-look__ask{grid-area:ask;position:relative;display:flex;align-items:flex-start;gap:12px;justify-self:end;max-width:320px;padding:16px 18px;background:#fff;border:1.5px solid #000;border-radius:14px 14px 14px 4px;box-shadow:var(--ex-shadow)}
.ad-look__ask p{margin:2px 0 0;font:500 17px/1.35 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ad-look__mid{grid-area:mid;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
.ad-look__stem{position:absolute;left:50%;bottom:calc(100% - 4px);width:1.5px;height:52px;margin-left:-.75px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
.ad-look__mark{position:absolute;left:50%;top:0;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--blue);border:1.5px solid #000;opacity:0}
.ad-look__verb{font:500 11px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ad-look__mid::before,.ad-look__mid::after{content:"";position:absolute;top:26px;height:1.5px;width:36px;background:rgba(0,0,0,.45)}
.ad-look__mid::before{right:100%}
.ad-look__mid::after{left:100%;width:28px}
.ad-look__out{grid-area:out;position:relative;display:flex;flex-direction:column;gap:12px;justify-self:start;max-width:340px}
.ad-look__out::before{content:"";position:absolute;left:-13px;top:calc(50% - 4px);width:7px;height:7px;border-top:1.5px solid rgba(0,0,0,.6);border-right:1.5px solid rgba(0,0,0,.6);transform:rotate(45deg)}
.ad-look__answer{padding:14px 16px 12px;border-radius:4px 12px 12px 12px;background:var(--ex-tint);border:1px solid #c8d6f5}
.ad-look__answer .ex-kicker{color:#2a4a80;margin-bottom:4px}
.ad-look__answer p{margin:0;font:500 22px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.ad-look__answer small{display:block;margin-top:8px;padding-top:8px;border-top:1.5px dashed rgba(0,0,0,.3);font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#333}
.ad-look__act{padding:10px 14px;border:1.5px dashed rgba(0,0,0,.5);border-radius:12px;background:#fff}
.ad-look__act p{margin:2px 0 0;font:400 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:#222}
.ad-look>figcaption:not(.ex-sr-only){grid-column:1/-1;margin:0 -32px;padding:14px 32px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 16px 16px}
@media(prefers-reduced-motion:no-preference){
  .ad-look .ad-look__ask,.ad-look .ad-look__answer,.ad-look .ad-look__act,.ad-look .ad-look__answer small{opacity:0;transform:translateY(6px)}
  .ad-look .ad-look__row b{background:transparent;transition:background .4s var(--ease)}
  .ad-look.is-seen .ad-look__ask{animation:ex-arrive .5s var(--ease) .2s both}
  .ad-look.is-seen .ad-look__mark{animation:ad-look-ride 2s ease-in-out .9s both}
  .ad-look.is-seen .ad-look__row b{background:var(--yellow);transition-delay:1.7s}
  .ad-look.is-seen .ad-look__answer{animation:ex-arrive .5s var(--ease) 3s both}
  .ad-look.is-seen .ad-look__answer small{animation:ex-arrive .4s var(--ease) 3.5s both}
  .ad-look.is-seen .ad-look__act{animation:ex-arrive .5s var(--ease) 4.1s both}
  .ad-look.is-seen .ad-ai .ex-avatar--ai{animation:ex-breathe 4.6s ease-in-out infinite}
}
@keyframes ad-look-ride{0%{top:calc(100% - 11px);opacity:0}8%{opacity:1}42%,56%{top:0;opacity:1}92%{top:calc(100% - 11px);opacity:1}100%{top:calc(100% - 11px);opacity:0}}

/* WHY IT HAPPENS: four systems arrive along a timeline, eight years apart. Each carries the
   customer typed in its own way; a small spreadsheet sits in every gap. Runs once, rests full. */
.ad-arrive{position:relative;max-width:1080px;margin:72px auto 0;padding:28px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.ad-arrive__row{position:relative;list-style:none;margin:0;padding:0 0 54px;display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr 60px 1fr;align-items:stretch}
.ad-arrive__row::before{content:"";position:absolute;left:8%;right:8%;bottom:22px;height:1.5px;background:#000}
.ad-arrive__sys{position:relative;z-index:1;padding:32px 14px 14px;background:#fff;border:1.5px solid #000;border-radius:10px;box-shadow:var(--ex-shadow)}
.ad-arrive__sys>i{position:absolute;left:0;right:0;top:0;height:20px;border-bottom:1.5px solid #000;border-radius:10px 10px 0 0;background:var(--cream)}
.ad-arrive__sys>i::before{content:"";position:absolute;left:10px;top:7px;width:5px;height:5px;border-radius:50%;background:#000;box-shadow:9px 0 0 #000,18px 0 0 #000}
.ad-arrive__sys b{display:block;font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ad-arrive__sys small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--muted)}
.ad-arrive__typed{display:block;margin-top:12px;padding:8px 10px;border:1.5px solid #000;border-radius:8px;background:#fdfcf8;font:500 13.5px/1.3 "Neue Montreal",system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-arrive__typed em{display:block;margin-bottom:2px;font:500 10px/1.3 "Neue Montreal",system-ui,sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ad-arrive__sys+.ad-arrive__gap+.ad-arrive__sys .ad-arrive__typed{background:var(--salmon-bg);border-color:#b4531d;color:#7a3a14}
.ad-arrive__year{position:absolute;left:50%;bottom:-43px;transform:translateX(-50%);padding:3px 9px;border:1.5px solid #000;border-radius:999px;background:var(--cream);font:500 10px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ad-arrive__gap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:500 9px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.ad-arrive__gap::after{content:"";position:absolute;left:-10px;right:-10px;top:50%;height:1.5px;background:repeating-linear-gradient(to right,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
.ad-arrive__gap::before{content:"";position:relative;z-index:1;width:22px;height:26px;border:1.5px solid #000;border-radius:3px;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 17%27%3E%3Cpath d=%27M2 5h10M2 8.5h10M2 12h10M5.5 2v13M9 2v13%27 stroke=%27rgba(0,0,0,.45)%27 stroke-width=%27.8%27/%3E%3C/svg%3E") center/contain no-repeat}
.ad-arrive__gap span{position:relative;z-index:1;padding:0 3px;background:var(--ex-card)}
.ad-arrive__tally{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:6px 0 26px;font:500 14.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.ad-arrive__tally .ad-arrive__zero{color:#000}
.ad-arrive__tally b{display:inline-block;min-width:22px;padding:1px 7px;border:1.5px solid #b4531d;border-radius:999px;background:var(--salmon-bg);color:#7a3a14;text-align:center}
.ad-arrive>figcaption:not(.ex-sr-only){margin:0 -28px;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 16px 16px}
@media(prefers-reduced-motion:no-preference){
  .ad-arrive .ad-arrive__sys,.ad-arrive .ad-arrive__gap,.ad-arrive .ad-arrive__typed{opacity:0;transform:translateY(10px)}
  .ad-arrive .ad-arrive__tally{opacity:0;transition:opacity .6s var(--ease)}
  .ad-arrive.is-seen .ad-arrive__sys{animation:ex-arrive .55s var(--ease) calc(var(--i) * .9s) both}
  .ad-arrive.is-seen .ad-arrive__typed{animation:ex-arrive .45s var(--ease) calc(.45s + var(--i) * .9s) both}
  .ad-arrive.is-seen .ad-arrive__gap{animation:ex-arrive .5s var(--ease) calc(1.1s + var(--i) * .9s) both}
  .ad-arrive.is-seen .ad-arrive__tally{opacity:1;transition-delay:3.7s}
}

/* WHAT IT COSTS: the life of one fact. Five stops in a row; one marker carries the value
   from stop to stop along a rail above them, and at the last stop the digits have swapped. */
.ad-life{position:relative;max-width:1080px;margin:72px auto 0;padding:62px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.ad-life__rail{position:absolute;left:28px;right:28px;top:40px;height:1.5px;background:repeating-linear-gradient(to right,rgba(0,0,0,.28) 0 6px,transparent 6px 12px)}
.ad-life__rail::before,.ad-life__rail::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:#000}
.ad-life__rail::before{left:-3px}.ad-life__rail::after{right:-3px}
.ad-life__mark{position:absolute;top:-13px;left:var(--x4,90%);transform:translateX(-50%);padding:5px 10px;border:1.5px solid #000;border-radius:999px;background:var(--blue);color:#fff;font:500 12px/1.2 "Neue Montreal",system-ui,sans-serif;font-style:normal;white-space:nowrap;box-shadow:3px 3px 0 -1px rgba(0,0,0,.08)}
.ad-life__stops{list-style:none;margin:0;padding:0 0 28px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ad-stop{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 14px 18px;background:#fff;border:1.5px solid #000;border-radius:14px}
.ad-stop__when{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:3px 9px;border:1.5px solid #000;border-radius:999px;background:var(--cream);font:500 10px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ad-stop svg{width:72px;height:56px;display:block;margin:2px 0 4px}
.ad-stop b{font:500 16px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ad-stop small{font-size:12.5px;line-height:1.4;color:var(--muted);min-height:2.8em}
.ad-stop__val{margin-top:auto;padding:5px 12px;border:1.5px solid #000;border-radius:999px;background:#fff;font:500 14px/1.2 "Neue Montreal",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.ad-stop--copy .ad-stop__val{border-style:dashed;border-color:rgba(0,0,0,.5);color:var(--muted);background:#fdfcf8}
.ad-stop--wrong .ad-stop__val{background:var(--salmon-bg);border-color:#b4531d;color:#7a3a14}
.ad-life>figcaption:not(.ex-sr-only){margin:0 -28px;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 16px 16px}
@media(prefers-reduced-motion:no-preference){
  .ad-life .ad-life__mark{opacity:0}
  .ad-life .ad-stop--wrong .ad-stop__val{background:#fdfcf8;border-color:rgba(0,0,0,.5);color:var(--muted);border-style:dashed}
  .ad-life.is-seen .ad-life__mark{opacity:1;animation:ad-life-ride 7s ease-in-out .4s 1 both}
  .ad-life.is-seen .ad-stop{animation:ad-stop-lit .5s var(--ease) calc(.4s + var(--i) * 1.4s) both}
  .ad-life.is-seen .ad-stop--wrong .ad-stop__val{animation:ad-wrong .6s var(--ease) 6.3s both}
}
@keyframes ad-life-ride{0%{left:var(--x0)}14%{left:var(--x0)}20%,34%{left:var(--x1)}40%,54%{left:var(--x2)}60%,74%{left:var(--x3)}80%,100%{left:var(--x4)}}
@keyframes ad-stop-lit{from{box-shadow:none}to{box-shadow:var(--ex-shadow)}}
@keyframes ad-wrong{from{background:#fdfcf8;border-color:rgba(0,0,0,.5);color:var(--muted);border-style:dashed}to{background:var(--salmon-bg);border-color:#b4531d;color:#7a3a14;border-style:solid}}

/* RECEIPTS: an answer with the lines under it that say where it was read from and who it was
   read as. Two bad ones under the master key, the same two good ones under the fixed record. */
.ad-receipts{position:relative;max-width:1080px;margin:72px auto 0;padding:64px 28px 0;display:grid;grid-template-columns:1fr 1fr;gap:24px;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.ad-receipts--bad{background:#fbf3ee}
.ad-receipts--bad .ad-receipts__tag{background:var(--salmon-bg)}
.ad-receipts--good{background:#eff8eb}
.ad-receipts--good .ad-receipts__tag{background:var(--green-bg)}
.ad-receipt{position:relative;display:flex;flex-direction:column;gap:16px;padding:22px 24px 24px;background:#fff;border:1.5px solid #000;border-radius:14px;box-shadow:var(--ex-shadow)}
.ad-receipt__q{display:flex;align-items:flex-start;gap:12px;padding-right:118px}
.ad-receipt__q .ex-kicker{margin-bottom:2px}
.ad-receipt__q p{margin:0;font:500 17px/1.35 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ad-receipt__a{padding:14px 16px;border-radius:4px 12px 12px 12px;background:var(--ex-tint);border:1px solid #c8d6f5}
.ad-receipt__a .ex-kicker{color:#2a4a80;margin-bottom:6px}
.ad-receipt__a p{margin:0;font:500 20px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.ad-receipt__a p:has(.ad-lockchip){font-size:15.5px;font-weight:400;line-height:1.5;color:#222}
.ad-redacted{display:flex;gap:8px;align-items:center;padding:4px 0}
.ad-redacted b{display:block;height:12px;width:72px;border-radius:3px;background:#b9b9b9}
.ad-redacted b:nth-child(2){width:44px}.ad-redacted b:nth-child(3){width:58px}
.ad-receipt__lines{margin:0;padding:14px 0 0;border-top:1.5px dashed rgba(0,0,0,.35);display:flex;flex-direction:column;gap:7px;font:400 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#333}
.ad-receipt__lines div{display:flex;gap:8px;align-items:baseline}
.ad-receipt__lines dt{flex:none;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.ad-receipt__lines dt::after{content:"";display:inline-block;width:6px}
.ad-receipt__lines dd{margin:0;flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-receipt__lines dd::before{content:"";display:inline-block}
.ad-stamp{position:absolute;right:18px;top:16px;padding:5px 11px;border:2px solid;border-radius:6px;font:500 11px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-8deg);background:#fff}
.ad-stamp--bad{color:#b4531d;border-color:#b4531d}
.ad-stamp--good{color:#2f5a1f;border-color:#2f5a1f}
.ad-receipts>figcaption:not(.ex-sr-only){grid-column:1/-1;margin:0 -28px;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 16px 16px}
@media(prefers-reduced-motion:no-preference){
  .ad-receipts .ad-receipt__a,.ad-receipts .ad-receipt__lines div,.ad-receipts .ad-stamp{opacity:0}
  .ad-receipts .ad-receipt__a{transform:translateY(6px)}
  .ad-receipts .ad-stamp{transform:rotate(-8deg) scale(1.3)}
  .ad-receipts.is-seen .ad-receipt__a{animation:ex-arrive .5s var(--ease) calc(.4s + var(--i) * .5s) both}
  .ad-receipts.is-seen .ad-receipt__lines div{animation:ex-arrive .35s var(--ease) both}
  .ad-receipts.is-seen .ad-receipt__lines div:nth-child(1){animation-delay:calc(1.1s + var(--i) * .5s)}
  .ad-receipts.is-seen .ad-receipt__lines div:nth-child(2){animation-delay:calc(1.3s + var(--i) * .5s)}
  .ad-receipts.is-seen .ad-receipt__lines div:nth-child(3){animation-delay:calc(1.5s + var(--i) * .5s)}
  .ad-receipts.is-seen .ad-stamp{animation:ad-stamp .45s cubic-bezier(.2,.9,.3,1.2) calc(2s + var(--i) * .5s) both}
}
@keyframes ad-stamp{from{opacity:0;transform:rotate(-8deg) scale(1.3)}to{opacity:1;transform:rotate(-8deg) scale(1)}}

/* THE FIX, PART ONE: three systems wired to each other. A deal closes in the first, a mark
   carries the value along the wire, and a row lands in each of the others as it arrives. The
   Data Lake beneath fades out. Wire ends are measured by placeWire() so the mark never drifts. */
.ad-wire{position:relative;max-width:1080px;margin:72px auto 0;padding:64px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.ad-wire__tag{background:var(--green-bg)}
.ad-wire__row{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
.ad-wire__row::before{content:"";position:absolute;left:16%;right:16%;top:50%;height:1.5px;background:#000}
.ad-wire__sys{position:relative;z-index:1;padding:34px 16px 16px;background:#fff;border:1.5px solid #000;border-radius:10px;box-shadow:var(--ex-shadow)}
.ad-wire__sys>i{position:absolute;left:0;right:0;top:0;height:20px;border-bottom:1.5px solid #000;border-radius:10px 10px 0 0;background:var(--cream)}
.ad-wire__sys>i::before{content:"";position:absolute;left:10px;top:7px;width:5px;height:5px;border-radius:50%;background:#000;box-shadow:9px 0 0 #000,18px 0 0 #000}
.ad-wire__sys+.ad-wire__sys::after{content:"";position:absolute;left:-10px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:1.5px solid #000;border-right:1.5px solid #000;transform:rotate(45deg)}
.ad-wire__sys b{display:block;font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ad-wire__sys small{display:block;margin-top:2px;font:500 10.5px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ad-wire__fact{display:block;margin-top:14px;padding:9px 11px;border:1.5px solid #000;border-radius:8px;background:var(--green-bg);font:500 13px/1.35 "Neue Montreal",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.ad-wire__fact em{display:block;margin-bottom:2px;font:500 10px/1.3 "Neue Montreal",system-ui,sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#2f5a1f}
.ad-wire__fact--born{background:var(--yellow)}
.ad-wire__fact--born em{color:#6b5a00}
.ad-wire__mark{position:absolute;z-index:2;left:var(--a0,0);top:0;transform:translate(-50%,-50%);padding:5px 10px;border:1.5px solid #000;border-radius:999px;background:var(--blue);color:#fff;font:500 12px/1.2 "Neue Montreal",system-ui,sans-serif;font-style:normal;white-space:nowrap;box-shadow:3px 3px 0 -1px rgba(0,0,0,.08);opacity:0}
.ad-wire__lake{max-width:560px;margin:40px auto 0;border-radius:10px 10px 0 0;border-bottom:0;box-shadow:none;opacity:.35}
.ad-wire__lake .ad-sheet__grid{height:44px}
.ad-wire>figcaption:not(.ex-sr-only){margin:0 -28px;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 16px 16px}
@media(prefers-reduced-motion:no-preference){
  .ad-wire .ad-wire__fact{opacity:0;transform:translateY(6px)}
  .ad-wire .ad-wire__lake{opacity:1;transition:opacity 1.2s var(--ease)}
  .ad-wire.is-seen .ad-wire__fact--born{animation:ex-arrive .5s var(--ease) .3s both}
  .ad-wire.is-seen .ad-wire__sys:nth-child(2) .ad-wire__fact{animation:ex-arrive .5s var(--ease) 2.3s both}
  .ad-wire.is-seen .ad-wire__sys:nth-child(3) .ad-wire__fact{animation:ex-arrive .5s var(--ease) 4.3s both}
  .ad-wire.is-seen .ad-wire__mark{animation:ad-wire-ride 4.4s ease-in-out .8s both}
  .ad-wire.is-seen .ad-wire__lake{opacity:.35;transition-delay:4.8s}
}
@keyframes ad-wire-ride{0%{left:var(--a0);opacity:0}6%{opacity:1}34%{left:var(--b0);opacity:1}38%{left:var(--b0);opacity:0}48%{left:var(--a1);opacity:0}52%{opacity:1}80%{left:var(--b1);opacity:1}84%,100%{left:var(--b1);opacity:0}}

/* THE FIX, PART TWO: the badge-in record. Six facts with a home and a rule each; the assistant wears
   the badge of whoever is asking, and the rows lock and open to match. */
.ad-rec{position:relative;max-width:1080px;margin:72px auto 0;padding:28px 28px 0;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;align-items:start;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.ad-rec__card{background:#fff;border:1.5px solid #000;border-radius:14px;overflow:hidden;box-shadow:var(--ex-shadow)}
.ad-rec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:16px 20px 14px;background:var(--green-bg);border-bottom:1.5px solid #000}
.ad-rec__head b{display:block;margin-top:3px;font:500 22px/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.ad-rec__aliases{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:#2f5a1f}
.ad-rec__aliases i{display:inline-block;padding:3px 9px;border:1.5px solid #000;border-radius:999px;background:#fff;font:500 12px/1.2 "Neue Montreal",system-ui,sans-serif;font-style:normal;color:#000}
.ad-rec__cols,.ad-rec__rows li{display:grid;grid-template-columns:24% minmax(0,1fr) 140px 176px;gap:14px;align-items:center;padding:12px 20px}
.ad-rec__cols{font:500 10.5px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--cream);border-bottom:1.5px solid #000}
.ad-rec__rows{list-style:none;margin:0;padding:0}
.ad-rec__rows li{border-top:1px solid var(--line,rgba(0,0,0,.12));transition:background .4s var(--ease)}
.ad-rec__rows li:first-child{border-top:0}
.ad-rec__label{font-size:14.5px;line-height:1.35;color:var(--muted)}
.ad-rec__value{position:relative;display:grid;font:500 15.5px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ad-rec__value>span{grid-area:1/1;display:flex;align-items:center;gap:8px;transition:opacity .35s var(--ease)}
.ad-rec__hidden{opacity:0;color:var(--muted);letter-spacing:.2em}
.ad-rec__rule{position:relative;justify-self:start;padding:4px 10px;border:1.5px solid #000;border-radius:999px;background:#fff;font:500 12px/1.2 "Neue Montreal",system-ui,sans-serif;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),padding-left .35s var(--ease)}
.ad-rec__rule::before{opacity:0;transition:opacity .35s var(--ease)}
.ad-rec__gap{background:#fbf3ee}
.ad-rec__gap .ad-rec__shown{color:#b4531d}
/* A locked row: the value gives way to dots and the rule chip closes. Driven by the figure's
   data-badge attribute alone, so the resting state (the new starter's view) needs no JS. */
.ad-rec[data-badge="ops"] li:not([data-open~="ops"]) .ad-rec__shown,.ad-rec[data-badge="coo"] li:not([data-open~="coo"]) .ad-rec__shown,.ad-rec[data-badge="finance"] li:not([data-open~="finance"]) .ad-rec__shown,.ad-rec[data-badge="starter"] li:not([data-open~="starter"]) .ad-rec__shown{opacity:0}
.ad-rec[data-badge="ops"] li:not([data-open~="ops"]) .ad-rec__hidden,.ad-rec[data-badge="coo"] li:not([data-open~="coo"]) .ad-rec__hidden,.ad-rec[data-badge="finance"] li:not([data-open~="finance"]) .ad-rec__hidden,.ad-rec[data-badge="starter"] li:not([data-open~="starter"]) .ad-rec__hidden{opacity:1}
.ad-rec[data-badge="ops"] li:not([data-open~="ops"]) .ad-rec__rule,.ad-rec[data-badge="coo"] li:not([data-open~="coo"]) .ad-rec__rule,.ad-rec[data-badge="finance"] li:not([data-open~="finance"]) .ad-rec__rule,.ad-rec[data-badge="starter"] li:not([data-open~="starter"]) .ad-rec__rule{background:#f7f4e8;color:var(--muted);border-color:rgba(0,0,0,.4);padding-left:26px}
.ad-rec[data-badge="ops"] li:not([data-open~="ops"]) .ad-rec__rule::before,.ad-rec[data-badge="coo"] li:not([data-open~="coo"]) .ad-rec__rule::before,.ad-rec[data-badge="finance"] li:not([data-open~="finance"]) .ad-rec__rule::before,.ad-rec[data-badge="starter"] li:not([data-open~="starter"]) .ad-rec__rule::before{opacity:1}
.ad-rec[data-badge="ops"] li:not([data-open~="ops"]) .ad-rec__label,.ad-rec[data-badge="coo"] li:not([data-open~="coo"]) .ad-rec__label,.ad-rec[data-badge="finance"] li:not([data-open~="finance"]) .ad-rec__label,.ad-rec[data-badge="starter"] li:not([data-open~="starter"]) .ad-rec__label{color:#b9b9b9}
.ad-rec__reader{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 18px 20px;background:#fff;border:1.5px solid #000;border-radius:14px;text-align:center}
.ad-rec__reader p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.ad-rec__badge{right:-18px;bottom:-4px;font-size:11px;padding:4px 10px}
.ad-rec__badges{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:6px}
.ad-rec__badges li{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1.5px solid transparent;border-radius:999px;font:500 14px/1.2 "Neue Montreal",system-ui,sans-serif;color:var(--muted);transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.ad-rec[data-badge="ops"] li[data-b="ops"],.ad-rec[data-badge="coo"] li[data-b="coo"],.ad-rec[data-badge="finance"] li[data-b="finance"],.ad-rec[data-badge="starter"] li[data-b="starter"]{border-color:#000;background:var(--cream);color:#000}
.ad-rec[data-badge="ops"] .ad-rec__badge::after{content:"OPS"}
.ad-rec[data-badge="coo"] .ad-rec__badge::after{content:"COO"}
.ad-rec[data-badge="finance"] .ad-rec__badge::after{content:"FINANCE"}
.ad-rec[data-badge="starter"] .ad-rec__badge::after{content:"STARTER"}
.ad-rec[data-badge="ops"] .ad-rec__badge{background:var(--yellow)}
.ad-rec[data-badge="coo"] .ad-rec__badge{background:var(--pink)}
.ad-rec[data-badge="finance"] .ad-rec__badge{background:var(--green-bg)}
.ad-rec[data-badge="starter"] .ad-rec__badge{background:#fff;border-style:dashed;border-color:#8a8a8a}
.ad-rec>figcaption:not(.ex-sr-only){grid-column:1/-1;margin:0 -28px;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 16px 16px}

/* NEXT STEP: the dashed new starter becomes solid as a role chip lands on them, then a quiet
   loop: the AI's mark rides across to the record and the chip breathes. */
.ad-cta__ghost{opacity:0}.ad-cta__solid{opacity:1}
.ad-cta__role{transform-box:fill-box;transform-origin:center}
.ad-cta__rider{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .ad-cta__art:not(.is-seen) .ad-cta__ghost{opacity:1}
  .ad-cta__art:not(.is-seen) .ad-cta__solid{opacity:0}
  .ad-cta__art:not(.is-seen) .ad-cta__role{opacity:0;transform:translate(60px,-30px) scale(.7)}
  .ad-cta__ghost,.ad-cta__solid{transition:opacity .5s var(--ease) 1s}
  .ad-cta__role{transition:transform .7s cubic-bezier(.34,1.4,.64,1) .4s,opacity .4s var(--ease) .4s}
  .ad-cta__art.is-seen .ad-cta__rider{animation:ad-cta-ride 7s cubic-bezier(.45,0,.55,1) 1.6s infinite}
  .ad-cta__art.is-seen .ad-cta__chip{animation:ex-breathe 4.5s ease-in-out 1.6s infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes ad-cta-ride{0%{transform:translateX(0);opacity:0}6%{opacity:1}72%{transform:translateX(-96px);opacity:1}80%,100%{transform:translateX(-96px);opacity:0}}

/* RESPONSIVE */
@media(max-width:1100px){
  .ad-scene__grid{grid-template-columns:200px minmax(0,1fr) 200px;gap:28px}
  .ad-look{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);column-gap:24px}
  .ad-look__mid::before{width:24px}.ad-look__mid::after{width:16px}
  .ad-arrive__row{grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr}
  .ad-arrive__gap span{display:none}
  .ad-wire__row{gap:40px}
  .ad-life__stops{grid-template-columns:repeat(3,1fr);row-gap:34px}
  .ad-life__rail{display:none}
  .ad-life{padding-top:34px}
  .ad-rec{grid-template-columns:1fr}
  .ad-rec__reader{flex-direction:row;flex-wrap:wrap;justify-content:center;text-align:left}
  .ad-rec__badges{width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .ad-rec__reader p{flex-basis:100%;text-align:center}
  .ad-rec__cols,.ad-rec__rows li{grid-template-columns:22% minmax(0,1fr) 128px 160px}
}
@media(max-width:900px){
  .ad-scene{margin-top:32px;padding:56px 18px 20px}
  .ad-scene__grid{grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .ad-scene__mid{display:contents}
  .ad-scene__ask{grid-column:1/-1;order:-2;justify-self:center}
  .ad-scene__ai{grid-column:1/-1;order:-1;justify-self:center;margin:6px 0 10px}
  .ad-scene__answer{grid-column:1/-1;order:1;max-width:420px;justify-self:center;margin-top:6px}
  .ad-scene__col{gap:14px}
  .ad-scene__wires{display:none}
  .ad-look{grid-template-columns:1fr;grid-template-areas:"ask" "sys" "mid" "out";row-gap:18px;margin-top:48px;padding:18px 18px 0}
  .ad-look__ask,.ad-look__out{justify-self:stretch;max-width:none}
  .ad-look__sys{width:100%}
  .ad-look__mid{padding-top:56px}
  .ad-look__mid::before,.ad-look__mid::after,.ad-look__out::before{display:none}
  .ad-look__stem{bottom:auto;top:-14px}
  .ad-look>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .ad-arrive{margin-top:48px;padding:18px 18px 0}
  .ad-arrive__row{grid-template-columns:1fr;max-width:380px;margin:0 auto;padding-bottom:0;row-gap:0}
  .ad-arrive__row::before{display:none}
  .ad-arrive__sys{padding-top:38px}
  .ad-arrive__year{bottom:auto;top:-11px;background:var(--cream)}
  .ad-arrive__gap{flex-direction:row;height:52px;gap:8px;margin:6px 0}
  .ad-arrive__gap::after{left:50%;right:auto;top:-10px;bottom:-10px;width:1.5px;height:auto;margin-left:-.75px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
  .ad-arrive__gap span{display:inline}
  .ad-arrive__tally{margin-top:20px}
  .ad-arrive>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .ad-life{margin-top:48px;padding:34px 18px 0}
  .ad-life__stops{grid-template-columns:1fr;max-width:380px;margin:0 auto;row-gap:30px}
  .ad-life>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .ad-receipts{grid-template-columns:1fr;margin-top:48px;padding:56px 18px 0;gap:18px}
  .ad-receipts>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .ad-receipts__tag{left:18px}
  .ad-wire{margin-top:48px;padding:56px 18px 0}
  .ad-wire__tag{left:18px}
  .ad-wire__row{grid-template-columns:1fr;gap:18px;max-width:380px;margin:0 auto}
  .ad-wire__row::before,.ad-wire__sys+.ad-wire__sys::after,.ad-wire__mark{display:none}
  .ad-wire>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .ad-rec{margin-top:48px;padding:18px 18px 0}
  .ad-rec__head{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px 12px}
  .ad-rec__cols{display:none}
  .ad-rec__rows li{grid-template-columns:1fr;gap:6px;padding:12px 16px}
  .ad-rec__rows li:first-child{border-top:1.5px solid #000}
  .ad-rec__rule,.ad-chip{justify-self:start}
  .ad-rec>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .ex-series{margin-top:48px}
}
@media(max-width:560px){
  .ad-scene__grid{grid-template-columns:1fr}
  .ad-copy b{font-size:19px}
  .ad-receipt__q{padding-right:0;order:0}
  .ad-stamp{position:static;order:1;align-self:flex-end;margin:-8px 0 -6px;transform:rotate(-6deg)}
  .ad-receipt__a{order:2}
  .ad-receipt__lines{order:3}
  .ad-receipt__lines dd{white-space:normal}
  .ad-sheet__saved{display:none}
}