/* Clarity Box tool pages (tools/clarity-*.html), designed layout (9 Nov 2026, Jordan).
   Built by mockups/tool-pages-build.py from each page's own copy. Hero in the framed dot
   card, an ElevenLabs-style bento (one grainy colour tile, one grey tile with a white card,
   small grey tiles), then the detail sections as rows (heading left, text right). Each
   page sets --tc (tool colour) and its gradient on main.tp. */
.tp { --tc: #1979eb; --tc-soft: #eaf3fe; --card: #f4f3f1; --card-2: #efeeeb; --line: #e6e5e1; --muted: #77777a;
  --tp-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px;
  --tp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .38 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
  display: block; padding-bottom: 96px; color: #0a0e1c; }
.tp--bank { --tc: #e2702a; --tc-soft: #fdeee2; --g1: #ffb35c; --g2: #f0703a; --g3: #d8322c; --g4: #f7a8c4; --g5: #b9a6f5; }
.tp--create { --tc: #7b5cd6; --tc-soft: #f1ecfd; --g1: #b9a6f5; --g2: #7b5cd6; --g3: #2f6fe0; --g4: #f2a7d6; --g5: #ffc98a; }
.tp--review { --tc: #d9482b; --tc-soft: #fdebe6; --g1: #ffc98a; --g2: #e0552f; --g3: #c2244a; --g4: #f7a8c4; --g5: #ffe08a; }
.tp--chatbot { --tc: #0a8a7c; --tc-soft: #e3f5f1; --g1: #a6ecd0; --g2: #0a8a7c; --g3: #1979eb; --g4: #8fd3ff; --g5: #ffe08a; }
.tp p { margin: 0; }
.tp a { color: inherit; }
.tp .wrap { max-width: var(--site-content-width, 1152px); }

/* hero */
.tp-hero { padding: 16px 0 0; }
.tp-hero__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; min-height: 520px; padding: 64px clamp(28px, 5vw, 72px); border: 1px solid #e1e1de; border-radius: 32px; background: #fff radial-gradient(rgb(229, 232, 229) .65px, transparent .8px) 0 0 / 5px 5px; overflow: hidden; }
.tp-chip { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 600 14px/1 var(--font-heading, 'Inter', sans-serif); }
.tp-chip i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tc); color: #fff; }
.tp-chip svg { width: 18px; height: 18px; }
.tp-hero h1 { margin: 0; font: 600 clamp(32px, 3.4vw, 46px)/1.08 var(--font-heading, 'Inter', sans-serif); letter-spacing: -.03em; max-width: 14ch; }
.tp-hero .lede { margin-top: 20px !important; max-width: 470px; font-size: 17px; line-height: 1.6; color: rgba(10,14,28,.8); }
.tp-hero__context { margin-top: 14px !important; max-width: 470px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.tp-hero__context a { color: #0a0e1c; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(10,14,28,.3); }
.tp-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.tp-hero__art { position: relative; display: flex; justify-content: center; }
.tp-hero__art::before { content: ""; position: absolute; inset: 6% 2% -4% 8%; border-radius: 40px; background: radial-gradient(60% 60% at 30% 30%, color-mix(in srgb, var(--g1) 55%, transparent), transparent 70%), radial-gradient(55% 55% at 75% 70%, color-mix(in srgb, var(--g4) 50%, transparent), transparent 70%); filter: blur(6px); }

/* window component */
.tw { position: relative; width: min(100%, 460px); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(10,14,28,.05), 0 30px 60px -30px rgba(25,39,65,.45); overflow: hidden; font-family: var(--font-heading, 'Inter', sans-serif); color: #0a0e1c; }
.tw__bar { display: flex; align-items: center; gap: 5px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--tc-soft), #fff); font-size: 12px; font-weight: 600; color: #3b3f4a; }
.tw__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d9d7d2; }
.tw__bar span { flex: 1; margin-left: 6px; }
.tw__bar b { padding: 3px 9px; border-radius: 100px; background: var(--tc); color: #fff; font-size: 11px; font-weight: 600; }
.tw__body { display: grid; gap: 10px; padding: 16px; font-size: 13px; line-height: 1.45; }
.tw__muted { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.tw-search { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; font-weight: 500; }
.tw-search svg, .tw-ic { width: 16px; height: 16px; flex: none; color: var(--tc); }
.tw-card { padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.tw-card--soft { border-color: transparent; background: var(--tc-soft); }
.tw-ref { display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 1px; border-radius: 4px; background: var(--tc-soft); color: var(--tc); font-size: 10px; font-weight: 700; vertical-align: 1px; }
.tw-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; }
.tw-row b { font-weight: 600; }
.tw-row small { margin-left: auto; color: var(--muted); font-size: 11px; }
.tw-tag { padding: 2px 8px; border-radius: 100px; background: var(--tc-soft); color: var(--tc); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.tw-tag--warn { background: #fff1d1; color: #85570a; }
.tw-tag--ok { background: #e6f4ea; color: #2f6b45; }
.tw-tag--bad { background: #fde2dc; color: #a3311b; }
.tw-tag--grey { background: #f1f0ed; color: #55575e; }
.tw-file { display: grid; place-items: center; width: 26px; height: 30px; border-radius: 4px 8px 4px 4px; color: #fff; font-size: 8px; font-weight: 700; flex: none; }
.tw-toggle { width: 30px; height: 18px; margin-left: auto; border-radius: 100px; background: #d9d7d2; position: relative; flex: none; }
.tw-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.tw-toggle--on { background: var(--tc); }
.tw-toggle--on::after { left: 14px; }
.tw-bar { height: 6px; border-radius: 6px; background: #eceae6; overflow: hidden; }
.tw-bar u { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--tc); }
.tw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tw-stat { padding: 10px 12px; border-radius: 10px; background: #f7f6f4; }
.tw-stat b { display: block; font-size: 20px; letter-spacing: -.02em; }
.tw-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 100px; font-size: 12px; font-weight: 500; }
.tw-pill--on { border-color: var(--tc); background: var(--tc-soft); color: var(--tc); }
.tw-bubble { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; }
.tw-bubble--me { justify-self: end; border-bottom-right-radius: 4px; background: var(--tc); color: #fff; }
.tw-bubble--bot { justify-self: start; border-bottom-left-radius: 4px; background: #f1f0ed; }
.tw-bubble small { display: block; margin-top: 5px; font-size: 10.5px; opacity: .7; }
.tw-quote { padding: 8px 10px; border-left: 3px solid var(--tc); border-radius: 4px 8px 8px 4px; background: var(--tc-soft); font-size: 11.5px; color: #3b3f4a; font-style: italic; }
.tw-slide { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--c, var(--tc)); border-radius: 8px; }
.tw-slide b { font-size: 12.5px; }
.tw-slide span { font-size: 11px; color: var(--muted); }
.tw-lines { display: grid; gap: 5px; }
.tw-lines i { height: 6px; border-radius: 6px; background: #eceae6; }
.tw-lines i:nth-child(2) { width: 85%; } .tw-lines i:nth-child(3) { width: 60%; }

/* bento */
.tp-section { padding-top: 96px; }
.tp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-bottom: 36px; }
.tp-head h2 { margin: 0; font: 500 clamp(26px, 2.4vw, 34px)/1.08 var(--font-heading, 'Inter', sans-serif); letter-spacing: -.025em; }
.tp-head p { padding-top: 6px; max-width: 470px; font-size: 15px; line-height: 1.7; color: rgba(10,14,28,.8); }
.tp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tp-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 18px 18px 20px; border-radius: 16px; background: var(--card); overflow: hidden; }
.tp-tile--big { grid-column: span 2; min-height: 470px; }
.tp-cap { position: relative; z-index: 2; font: 400 13.5px/1.45 var(--font-heading, 'Inter', sans-serif); }
.tp-cap > span { display: block; margin-bottom: 6px; color: var(--muted); }
.tp-cap > p { max-width: 440px; font-weight: 500; color: #0a0e1c; }
.tp-tile:not(.tp-tile--big) .tp-cap > p { min-height: calc(3 * 1.45em); font-weight: 400; }
.tp-ic { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #dcdbd7; border-radius: 10px; background: #faf9f8; color: var(--tc); }
.tp-ic svg { width: 17px; height: 17px; }
.tp-tile--grain { background: var(--tp-noise), var(--tp-grain), radial-gradient(55% 60% at 12% 18%, var(--g1), transparent 70%), radial-gradient(60% 70% at 88% 30%, var(--g3), transparent 70%), radial-gradient(55% 60% at 60% 95%, var(--g2), transparent 72%), radial-gradient(45% 50% at 15% 90%, var(--g5), transparent 70%), linear-gradient(150deg, var(--g1), var(--g2) 50%, var(--g3)); }
.tp-tile--grain .tp-cap > span { color: rgba(255,255,255,.8); }
.tp-tile--grain .tp-cap > p { color: #fff; }
.tp-tile--grain .tw { position: absolute; top: 0; left: 18px; right: 0; width: auto; border-top: 0; border-right: 0; border-radius: 0 0 0 16px; box-shadow: 0 24px 44px -24px rgba(40,20,10,.5); }
.tp-tile--grey .tw { position: absolute; top: 50%; left: 50%; width: min(calc(100% - 40px), 420px); transform: translate(-50%, -64%); box-shadow: 0 1px 2px rgba(10,14,28,.04), 0 20px 40px -28px rgba(25,39,65,.35); }

/* detail rows */
.tp-rows { display: grid; }
.tp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; padding: 44px 0; border-top: 1px solid var(--line); }
.tp-row:last-child { border-bottom: 1px solid var(--line); }
.tp-row h2 { margin: 0; font: 500 clamp(22px, 2vw, 28px)/1.15 var(--font-heading, 'Inter', sans-serif); letter-spacing: -.02em; }
.tp-row__num { display: block; margin-bottom: 10px; color: var(--tc); font: 600 12px/1 var(--font-heading, 'Inter', sans-serif); }
.tp-row__body { display: grid; gap: 16px; font-size: 15px; line-height: 1.7; color: rgba(10,14,28,.8); }
.tp-row__body strong { color: #0a0e1c; font-weight: 600; }
.tp-row__body a { color: #0a0e1c; text-decoration: underline; text-underline-offset: 3px; }
.tp-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tp-list li { position: relative; padding: 14px 16px 14px 46px; border-radius: 12px; background: var(--card); font-size: 14.5px; line-height: 1.6; }
.tp-list li::before { content: ""; position: absolute; top: 17px; left: 16px; width: 18px; height: 18px; border-radius: 50%; background: var(--tc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* use cases and other tools */
.tp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.tp-cards a { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; height: 100%; min-height: 150px; padding: 20px; border-radius: 16px; background: var(--card); color: #0a0e1c; font: 500 16px/1.35 var(--font-heading, 'Inter', sans-serif); text-decoration: none; transition: background var(--dur-s, .18s) ease, transform var(--dur-m, .26s) cubic-bezier(.2,.7,.3,1); }
.tp-cards a:hover { background: var(--card-2); transform: translateY(-2px); }
.tp-cards a small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.tp-cards a::after { content: ""; position: absolute; right: 20px; bottom: 22px; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; }
.tp-tools a { gap: 28px; }
.tp-tools a i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; }
.tp-tools a i svg { width: 18px; height: 18px; }

/* closing */
.tp-cta { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 40px; align-items: end; min-height: 280px; padding: 44px; border-radius: 24px; color: #fff; background: var(--tp-noise), var(--tp-grain), radial-gradient(60% 90% at 100% 0%, var(--g1), transparent 70%), radial-gradient(50% 80% at 70% 100%, var(--g4), transparent 72%), linear-gradient(110deg, #0e2f8f 0%, var(--g3) 45%, var(--g2) 80%); }
.tp-cta h2 { margin: 0; max-width: 18ch; font: 500 clamp(26px, 2.6vw, 36px)/1.1 var(--font-heading, 'Inter', sans-serif); letter-spacing: -.025em; color: #fff; }
.tp-cta .btn { background: #fff; color: #0a0e1c; border-color: #fff; }

@media (max-width: 960px) {
  .tp-hero__card, .tp-head, .tp-row, .tp-cta { grid-template-columns: 1fr; }
  .tp-hero__card { padding: 40px 24px; gap: 36px; min-height: 0; }
  .tp-bento { grid-template-columns: 1fr 1fr; }
  .tp-tile--big { grid-column: 1 / -1; }
  .tp-row { gap: 16px; padding: 32px 0; }
  .tp-section { padding-top: 64px; }
}
@media (max-width: 560px) {
  .tp-bento { grid-template-columns: 1fr; }
  .tp-tile--big { min-height: 440px; }
  .tp-cta { padding: 28px; }
}
/* small tiles: icon in the flow, so long text pushes the tile taller instead of overlapping */
.tp-tile:not(.tp-tile--big) { justify-content: space-between; gap: 36px; }
.tp-tile:not(.tp-tile--big) .tp-ic { position: static; }
/* Full-width hero card, as on the main site's About page (9 Nov 2026, Jordan): the card
   runs edge to edge with a small margin, and its content lines up with the page content. */
.tp-hero .wrap { max-width: none; padding: 0 clamp(12px, 1.6vw, 20px); }
.tp-hero__card { padding-inline: max(28px, calc((100vw - 1152px) / 2 + 36px)); }
@media (max-width: 960px) { .tp-hero__card { padding-inline: 24px; } }
/* Hero text and size match the main site's /digital-learning hero (9 Nov 2026, Jordan):
   same h1 (site h1 size, no forced wrap), same lede, same card height. */
.tp-hero__card { min-height: 414px; padding-block: 64px; align-items: center; }
.tp-hero h1 { max-width: 560px; font-size: var(--h1-size, 40px) !important; font-weight: 600 !important; line-height: 1.12 !important; letter-spacing: -.025em !important; }
.tp-hero .lede { max-width: 440px; font-size: clamp(1rem, 1.2vw, 1.15rem) !important; font-weight: 400; line-height: 1.55; color: rgba(10, 14, 28, .72); margin-top: 24px !important; }
.tp-hero__art .tw { width: min(100%, 420px); }
.tp-hero__card { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
@media (max-width: 960px) { .tp-hero__card { grid-template-columns: 1fr; } }
/* Same inner padding as the main site subpage heroes (64px + clamp(1.5rem, 3vw, 3rem)). */
@media (min-width: 981px) { .tp-hero__card { padding: 64px calc(64px + clamp(1.5rem, 3vw, 3rem)) !important; } }
.tp-hero__art::before { content: none; display: none; }

/* Hero windows play as a 10s loop (9 Nov 2026, Jordan): each part arrives in turn,
   holds, then the loop restarts. Resting state (reduce motion) is the finished window. */
@media (prefers-reduced-motion: no-preference) {
html:not(.cw-motion-off) .tp--bank .tp-hero__art .tw__body > .tw-search { animation: tph0 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-hero__art .tw__body > .tw-card { animation: tph1 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-hero__art .tw__body > .tw-card .tw-row:nth-child(1) { animation: tph2 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-hero__art .tw__body > .tw-card .tw-row:nth-child(2) { animation: tph3 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-hero__art .tw__body > .tw__muted { animation: tph4 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-hero__art .tw__body > div:last-child .tw-pill:nth-child(1) { animation: tph5 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-hero__art .tw__body > div:last-child .tw-pill:nth-child(2) { animation: tph6 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-hero__art .tw__body > .tw-slide:nth-child(1) { animation: tph7 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-hero__art .tw__body > .tw-slide:nth-child(2) { animation: tph8 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-hero__art .tw__body .tw-quote { animation: tph9 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-hero__art .tw__body > .tw-slide:nth-child(3) { animation: tph10 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-hero__art .tw__body > .tw-row:nth-child(1) .tw-tag { animation: tph11 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-hero__art .tw__body > .tw-row:nth-child(2) .tw-tag { animation: tph12 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-hero__art .tw__body > .tw-row:nth-child(3) .tw-tag { animation: tph13 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-hero__art .tw__body > .tw-row:nth-child(4) .tw-tag { animation: tph14 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-hero__art .tw__body > .tw-card { animation: tph15 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-hero__art .tw__body > .tw-bubble--me { animation: tph16 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-hero__art .tw__body > .tw-bubble--bot { animation: tph17 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-hero__art .tw__body > .tw-search { animation: tph18 10s cubic-bezier(.2,.7,.3,1) infinite both; }
}
html.cw-motion-on .tp--bank .tp-hero__art .tw__body > .tw-search { animation: tph0 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-hero__art .tw__body > .tw-card { animation: tph1 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-hero__art .tw__body > .tw-card .tw-row:nth-child(1) { animation: tph2 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-hero__art .tw__body > .tw-card .tw-row:nth-child(2) { animation: tph3 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-hero__art .tw__body > .tw__muted { animation: tph4 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-hero__art .tw__body > div:last-child .tw-pill:nth-child(1) { animation: tph5 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-hero__art .tw__body > div:last-child .tw-pill:nth-child(2) { animation: tph6 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-hero__art .tw__body > .tw-slide:nth-child(1) { animation: tph7 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-hero__art .tw__body > .tw-slide:nth-child(2) { animation: tph8 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-hero__art .tw__body .tw-quote { animation: tph9 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-hero__art .tw__body > .tw-slide:nth-child(3) { animation: tph10 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-hero__art .tw__body > .tw-row:nth-child(1) .tw-tag { animation: tph11 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-hero__art .tw__body > .tw-row:nth-child(2) .tw-tag { animation: tph12 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-hero__art .tw__body > .tw-row:nth-child(3) .tw-tag { animation: tph13 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-hero__art .tw__body > .tw-row:nth-child(4) .tw-tag { animation: tph14 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-hero__art .tw__body > .tw-card { animation: tph15 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-hero__art .tw__body > .tw-bubble--me { animation: tph16 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-hero__art .tw__body > .tw-bubble--bot { animation: tph17 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-hero__art .tw__body > .tw-search { animation: tph18 10s cubic-bezier(.2,.7,.3,1) infinite both; }
@keyframes tph0 { 0%, 4% { border-color: var(--line); box-shadow: none; } 8%, 16% { border-color: var(--tc); box-shadow: 0 0 0 3px var(--tc-soft); } 22%, 100% { border-color: var(--line); box-shadow: none; } }
@keyframes tph1 { 0%, 16% { opacity: 0; transform: translateY(10px); } 21%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tph2 { 0%, 28% { opacity: 0; transform: scale(.85); } 33%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tph3 { 0%, 34% { opacity: 0; transform: scale(.85); } 39%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tph4 { 0%, 42% { opacity: 0; } 47%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes tph5 { 0%, 46% { opacity: 0; transform: scale(.85); } 51%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tph6 { 0%, 50% { opacity: 0; transform: scale(.85); } 55%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tph7 { 0%, 6% { opacity: 0; transform: translateY(10px); } 11%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tph8 { 0%, 20% { opacity: 0; transform: translateY(10px); } 25%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tph9 { 0%, 32% { opacity: 0; } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes tph10 { 0%, 44% { opacity: 0; transform: translateY(10px); } 49%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tph11 { 0%, 16% { opacity: 0; transform: scale(.85); } 21%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tph12 { 0%, 24% { opacity: 0; transform: scale(.85); } 29%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tph13 { 0%, 32% { opacity: 0; transform: scale(.85); } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tph14 { 0%, 40% { opacity: 0; transform: scale(.85); } 45%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tph15 { 0%, 50% { opacity: 0; transform: translateY(10px); } 55%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tph16 { 0%, 8% { opacity: 0; transform: translateY(10px); } 13%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tph17 { 0%, 30% { opacity: 0; transform: translateY(10px); } 35%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tph18 { 0%, 4% { border-color: var(--line); box-shadow: none; } 8%, 16% { border-color: var(--tc); box-shadow: 0 0 0 3px var(--tc-soft); } 22%, 100% { border-color: var(--line); box-shadow: none; } }

/* Bento tile windows loop too (9 Nov 2026, Jordan): rows arrive in turn, tags pop,
   Bank switches flip on and off. Resting state is the finished window. */
@media (prefers-reduced-motion: no-preference) {
html:not(.cw-motion-off) .tp--bank .tp-tile--grain .tw__body > :nth-child(1) { animation: tpb0 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grain .tw__body > :nth-child(2) { animation: tpb1 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grain .tw__body > :nth-child(3) { animation: tpb2 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grain .tw__body > :nth-child(4) { animation: tpb3 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grain .tw__body > :nth-child(5) { animation: tpb4 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grain .tw__body .tw-tag { animation: tpb5 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grey .tw__body > :nth-child(1) { animation: tpb6 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grey .tw__body > :nth-child(2) { animation: tpb7 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grey .tw__body > :nth-child(3) { animation: tpb8 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grey .tw__body > :nth-child(4) { animation: tpb9 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grey .tw__body > :nth-child(5) { animation: tpb10 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grey .tw__body .tw-tag { animation: tpb11 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grain .tw__body > :nth-child(1) { animation: tpb12 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grain .tw__body > :nth-child(2) { animation: tpb13 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grain .tw__body > :nth-child(3) { animation: tpb14 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grain .tw__body > :nth-child(4) { animation: tpb15 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grain .tw__body > :nth-child(5) { animation: tpb16 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grain .tw__body .tw-tag { animation: tpb17 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grey .tw__body > :nth-child(1) { animation: tpb18 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grey .tw__body > :nth-child(2) { animation: tpb19 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grey .tw__body > :nth-child(3) { animation: tpb20 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grey .tw__body > :nth-child(4) { animation: tpb21 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grey .tw__body > :nth-child(5) { animation: tpb22 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--create .tp-tile--grey .tw__body .tw-tag { animation: tpb23 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grain .tw__body > :nth-child(1) { animation: tpb24 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grain .tw__body > :nth-child(2) { animation: tpb25 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grain .tw__body > :nth-child(3) { animation: tpb26 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grain .tw__body > :nth-child(4) { animation: tpb27 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grain .tw__body > :nth-child(5) { animation: tpb28 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grain .tw__body .tw-tag { animation: tpb29 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grey .tw__body > :nth-child(1) { animation: tpb30 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grey .tw__body > :nth-child(2) { animation: tpb31 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grey .tw__body > :nth-child(3) { animation: tpb32 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grey .tw__body > :nth-child(4) { animation: tpb33 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grey .tw__body > :nth-child(5) { animation: tpb34 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--review .tp-tile--grey .tw__body .tw-tag { animation: tpb35 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grain .tw__body > :nth-child(1) { animation: tpb36 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grain .tw__body > :nth-child(2) { animation: tpb37 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grain .tw__body > :nth-child(3) { animation: tpb38 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grain .tw__body > :nth-child(4) { animation: tpb39 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grain .tw__body > :nth-child(5) { animation: tpb40 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grain .tw__body .tw-tag { animation: tpb41 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grey .tw__body > :nth-child(1) { animation: tpb42 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grey .tw__body > :nth-child(2) { animation: tpb43 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grey .tw__body > :nth-child(3) { animation: tpb44 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grey .tw__body > :nth-child(4) { animation: tpb45 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grey .tw__body > :nth-child(5) { animation: tpb46 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--chatbot .tp-tile--grey .tw__body .tw-tag { animation: tpb47 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grey .tw-toggle { animation: tpb48 10s ease infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grey .tw-toggle::after { animation: tpb48k 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .tp--bank .tp-tile--grey .tw-row:nth-child(2) .tw-toggle, html:not(.cw-motion-off) .tp--bank .tp-tile--grey .tw-row:nth-child(2) .tw-toggle::after { animation-delay: 1.2s; }
html:not(.cw-motion-off) .tp--create .tp-tile--grain .tw-bar u { transform-origin: left; animation: tpb49 10s cubic-bezier(.45,0,.25,1) infinite both; }
}
html.cw-motion-on .tp--bank .tp-tile--grain .tw__body > :nth-child(1) { animation: tpb0 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grain .tw__body > :nth-child(2) { animation: tpb1 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grain .tw__body > :nth-child(3) { animation: tpb2 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grain .tw__body > :nth-child(4) { animation: tpb3 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grain .tw__body > :nth-child(5) { animation: tpb4 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grain .tw__body .tw-tag { animation: tpb5 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grey .tw__body > :nth-child(1) { animation: tpb6 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grey .tw__body > :nth-child(2) { animation: tpb7 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grey .tw__body > :nth-child(3) { animation: tpb8 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grey .tw__body > :nth-child(4) { animation: tpb9 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grey .tw__body > :nth-child(5) { animation: tpb10 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grey .tw__body .tw-tag { animation: tpb11 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grain .tw__body > :nth-child(1) { animation: tpb12 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grain .tw__body > :nth-child(2) { animation: tpb13 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grain .tw__body > :nth-child(3) { animation: tpb14 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grain .tw__body > :nth-child(4) { animation: tpb15 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grain .tw__body > :nth-child(5) { animation: tpb16 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grain .tw__body .tw-tag { animation: tpb17 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grey .tw__body > :nth-child(1) { animation: tpb18 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grey .tw__body > :nth-child(2) { animation: tpb19 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grey .tw__body > :nth-child(3) { animation: tpb20 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grey .tw__body > :nth-child(4) { animation: tpb21 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grey .tw__body > :nth-child(5) { animation: tpb22 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--create .tp-tile--grey .tw__body .tw-tag { animation: tpb23 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grain .tw__body > :nth-child(1) { animation: tpb24 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grain .tw__body > :nth-child(2) { animation: tpb25 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grain .tw__body > :nth-child(3) { animation: tpb26 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grain .tw__body > :nth-child(4) { animation: tpb27 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grain .tw__body > :nth-child(5) { animation: tpb28 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grain .tw__body .tw-tag { animation: tpb29 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grey .tw__body > :nth-child(1) { animation: tpb30 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grey .tw__body > :nth-child(2) { animation: tpb31 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grey .tw__body > :nth-child(3) { animation: tpb32 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grey .tw__body > :nth-child(4) { animation: tpb33 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grey .tw__body > :nth-child(5) { animation: tpb34 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--review .tp-tile--grey .tw__body .tw-tag { animation: tpb35 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grain .tw__body > :nth-child(1) { animation: tpb36 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grain .tw__body > :nth-child(2) { animation: tpb37 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grain .tw__body > :nth-child(3) { animation: tpb38 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grain .tw__body > :nth-child(4) { animation: tpb39 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grain .tw__body > :nth-child(5) { animation: tpb40 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grain .tw__body .tw-tag { animation: tpb41 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grey .tw__body > :nth-child(1) { animation: tpb42 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grey .tw__body > :nth-child(2) { animation: tpb43 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grey .tw__body > :nth-child(3) { animation: tpb44 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grey .tw__body > :nth-child(4) { animation: tpb45 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grey .tw__body > :nth-child(5) { animation: tpb46 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--chatbot .tp-tile--grey .tw__body .tw-tag { animation: tpb47 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grey .tw-toggle { animation: tpb48 10s ease infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grey .tw-toggle::after { animation: tpb48k 10s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .tp--bank .tp-tile--grey .tw-row:nth-child(2) .tw-toggle, html.cw-motion-on .tp--bank .tp-tile--grey .tw-row:nth-child(2) .tw-toggle::after { animation-delay: 1.2s; }
html.cw-motion-on .tp--create .tp-tile--grain .tw-bar u { transform-origin: left; animation: tpb49 10s cubic-bezier(.45,0,.25,1) infinite both; }
@keyframes tpb0 { 0%, 11% { opacity: 0; transform: translateY(8px); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb1 { 0%, 18% { opacity: 0; transform: translateY(8px); } 23%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb2 { 0%, 25% { opacity: 0; transform: translateY(8px); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb3 { 0%, 32% { opacity: 0; transform: translateY(8px); } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb4 { 0%, 39% { opacity: 0; transform: translateY(8px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb5 { 0%, 48% { opacity: 0; transform: scale(.85); } 53%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tpb6 { 0%, 11% { opacity: 0; transform: translateY(8px); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb7 { 0%, 18% { opacity: 0; transform: translateY(8px); } 23%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb8 { 0%, 25% { opacity: 0; transform: translateY(8px); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb9 { 0%, 32% { opacity: 0; transform: translateY(8px); } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb10 { 0%, 39% { opacity: 0; transform: translateY(8px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb11 { 0%, 48% { opacity: 0; transform: scale(.85); } 53%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tpb12 { 0%, 11% { opacity: 0; transform: translateY(8px); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb13 { 0%, 18% { opacity: 0; transform: translateY(8px); } 23%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb14 { 0%, 25% { opacity: 0; transform: translateY(8px); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb15 { 0%, 32% { opacity: 0; transform: translateY(8px); } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb16 { 0%, 39% { opacity: 0; transform: translateY(8px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb17 { 0%, 48% { opacity: 0; transform: scale(.85); } 53%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tpb18 { 0%, 11% { opacity: 0; transform: translateY(8px); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb19 { 0%, 18% { opacity: 0; transform: translateY(8px); } 23%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb20 { 0%, 25% { opacity: 0; transform: translateY(8px); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb21 { 0%, 32% { opacity: 0; transform: translateY(8px); } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb22 { 0%, 39% { opacity: 0; transform: translateY(8px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb23 { 0%, 48% { opacity: 0; transform: scale(.85); } 53%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tpb24 { 0%, 11% { opacity: 0; transform: translateY(8px); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb25 { 0%, 18% { opacity: 0; transform: translateY(8px); } 23%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb26 { 0%, 25% { opacity: 0; transform: translateY(8px); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb27 { 0%, 32% { opacity: 0; transform: translateY(8px); } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb28 { 0%, 39% { opacity: 0; transform: translateY(8px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb29 { 0%, 48% { opacity: 0; transform: scale(.85); } 53%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tpb30 { 0%, 11% { opacity: 0; transform: translateY(8px); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb31 { 0%, 18% { opacity: 0; transform: translateY(8px); } 23%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb32 { 0%, 25% { opacity: 0; transform: translateY(8px); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb33 { 0%, 32% { opacity: 0; transform: translateY(8px); } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb34 { 0%, 39% { opacity: 0; transform: translateY(8px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb35 { 0%, 48% { opacity: 0; transform: scale(.85); } 53%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tpb36 { 0%, 11% { opacity: 0; transform: translateY(8px); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb37 { 0%, 18% { opacity: 0; transform: translateY(8px); } 23%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb38 { 0%, 25% { opacity: 0; transform: translateY(8px); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb39 { 0%, 32% { opacity: 0; transform: translateY(8px); } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb40 { 0%, 39% { opacity: 0; transform: translateY(8px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb41 { 0%, 48% { opacity: 0; transform: scale(.85); } 53%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tpb42 { 0%, 11% { opacity: 0; transform: translateY(8px); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb43 { 0%, 18% { opacity: 0; transform: translateY(8px); } 23%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb44 { 0%, 25% { opacity: 0; transform: translateY(8px); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb45 { 0%, 32% { opacity: 0; transform: translateY(8px); } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb46 { 0%, 39% { opacity: 0; transform: translateY(8px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes tpb47 { 0%, 48% { opacity: 0; transform: scale(.85); } 53%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes tpb48 { 0%, 30% { background: #d9d7d2; } 36%, 70% { background: var(--tc); } 76%, 100% { background: #d9d7d2; } }
@keyframes tpb48k { 0%, 30% { left: 2px; } 36%, 70% { left: 14px; } 76%, 100% { left: 2px; } }
@keyframes tpb49 { 0%, 20% { transform: scaleX(0); } 34%, 92% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }

/* Use case cards: a soft grainy colour sweep in the tool's colours, varied per card,
   washed pale at the top left so the text stays dark and clear (9 Nov 2026, Jordan). */
.tp-cards:not(.tp-tools) a { --s1: var(--g1); --s2: var(--g4); --s3: var(--g5);
  background: radial-gradient(rgba(229, 232, 229, .9) .65px, transparent .8px) 0 0 / 5px 5px, var(--tp-grain),
    linear-gradient(125deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.1) 80%),
    conic-gradient(from 210deg at 100% 100%, var(--s1), var(--s2) 25%, var(--s3) 50%, var(--s1) 75%, var(--s2)); }
.tp-cards:not(.tp-tools) li:nth-child(2) a { --s1: var(--g4); --s2: var(--g5); --s3: var(--g1); }
.tp-cards:not(.tp-tools) li:nth-child(3) a { --s1: var(--g5); --s2: var(--g1); --s3: var(--g4); }
.tp-cards:not(.tp-tools) li:nth-child(4) a { --s1: var(--g1); --s2: var(--g5); --s3: var(--g4); }
.tp-cards:not(.tp-tools) a:hover { background-color: transparent; filter: saturate(1.15); }
.tp-cards:not(.tp-tools) a small { color: rgba(10,14,28,.6); }
/* Use case cards are square, four to a row (two on tablets and phones). */
.tp-cards:not(.tp-tools) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-cards:not(.tp-tools) a { aspect-ratio: 1 / 1; min-height: 0; height: auto; }
@media (max-width: 960px) { .tp-cards:not(.tp-tools) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tp > .tp-hero { padding-top: 0 !important; }
html body main#main.tp > section.tp-hero { padding-top: 0 !important; }
/* beats consistency.css "main > section:not(#tools):not(#how)" (two ids) */
main#main#main > section.tp-hero { padding-top: 0 !important; }

/* Tool pages open on the H1 and lede (hero removed 9 Nov 2026, Jordan). */
.tp-head--page .tp-head__title h1 { margin: 0 !important; }
.tp-head--page .tp-lede { margin: 14px 0 0 !important; padding: 0 !important; max-width: 34em; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; color: rgba(10, 14, 28, 0.8) !important; }
.tp-head--page > p { padding-top: 10px; }
/* Phone fixes (9 Nov 2026, Jordan approved the phone audit in mockups/phone-audit-20261109.md).
   Backup _archive/file-backups/box-pre-phone-fixes-20261109/. Phone and tablet widths only. */
/* Item 8: use case titles keep clear of the arrow; one card per row on phones. */
@media (max-width: 960px) {
  .tp-cards:not(.tp-tools) a { padding-right: 48px; }
}
@media (max-width: 560px) {
  .tp-cards:not(.tp-tools) { grid-template-columns: 1fr; }
  .tp-cards:not(.tp-tools) a { aspect-ratio: auto; min-height: 136px; }
  /* Item 24: no tall gap between the icon and the text in small tiles. */
  .tp-tile:not(.tp-tile--big) { gap: 16px; min-height: 0; }
  .tp-tile:not(.tp-tile--big) .tp-cap > p { min-height: 0; }
  /* Item 35: the mockup window in the colour tile sits inside the tile, not flush to its corner. */
  .tp-tile--big.tp-tile--grain { min-height: 0; padding: 12px 12px 20px; gap: 24px; justify-content: flex-start; }
  .tp-tile--grain .tp-cap { padding: 0 6px; }
  .tp-tile--grain .tw { position: relative; top: auto; left: auto; right: auto; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 12px; }
  .tp-tile--grain .tw__body { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .tp-tile--grain .tw-row b { min-width: 0; overflow-wrap: anywhere; }
  /* Item 35: mockup tags at least 11px. */
  .tw-tag, .tw-ref, .tw-bubble small { font-size: 11px; }
  /* Item 24, round 2 (9 Nov 2026): small tiles pack from the top, and the grey big tile's
     mockup sits in the flow, so there is no 15 to 53px hole above its caption. */
  .tp-tile:not(.tp-tile--big) { justify-content: flex-start; align-self: start; height: auto; }
  .tp-tile--big.tp-tile--grey { min-height: 0; gap: 24px; justify-content: flex-start; }
  .tp-tile--grey .tw { position: relative; top: auto; left: auto; width: auto; transform: none; }
}
/* Phone fixes, round 2 (9 Nov 2026), item 25: the last section sits close to the footer, as on the landing page. */
@media (max-width: 760px) {
  main.tp { padding-bottom: 0; }
}