/* dijidis.com v2. Static, no build step at the host; pages are written by brands/dijidis/site/build.py.
   Tokens kept from v1 (brands/dijidis/runs/2026-10-01-landing-page/02-build/build.md). Glass panels,
   gradient highlights, icon tiles and one set of keyframes per section, after repvive.co's UI.
   prefers-reduced-motion stops every animation at the bottom of this file. */

/* Geist, self-hosted (SIL OFL 1.1, fonts/OFL.txt): no request leaves the site's origin */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ground: #0A1233;          /* navy, between the tile's #081944 and its center #11163E */
  --ground-deep: #070C24;
  --plum: #290A29;            /* the tile's right edge, measured */
  --surface: #121B42;
  --surface-2: #18224F;
  --line: rgba(201, 204, 224, 0.14);
  --text: #EEF0FA;            /* 18:1 on ground */
  --text-2: #A9AECB;          /* 7.6:1 on ground */
  --accent: #AC508F;          /* the tile's glow, measured; fill only (white on it 4.89:1) */
  --accent-text: #E58AC4;     /* the same hue as text (7.64:1 on ground) */
  --glow-blue: #4976B1;       /* the tile's glow, measured; the mark and the diagrams */
  --blue-text: #8FB2F0;       /* the blue as text, for the highlight gradient */
  --radius: 14px;             /* panels and cards */
  --radius-in: 10px;          /* nested: tiles, rows, inputs */
  --pill: 999px;              /* buttons, tags, badges */
  --max: 1160px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--font);         /* v2.7: the old label face is gone (Jin: Geist everywhere); the token stays so every rule naming it sets Geist */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)), rgba(14, 22, 58, 0.6);
  --glass-line: rgba(255, 255, 255, 0.09);
  --grad: linear-gradient(90deg, var(--blue-text), var(--accent-text) 50%, var(--blue-text));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 100% -10%, rgba(41, 10, 41, 0.9), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(8, 25, 68, 0.9), transparent 60%),
    var(--ground);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.5em; font-weight: 650; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.lede { font-size: 1.15rem; color: var(--text-2); max-width: 60ch; }
.lede p { margin: 0 0 0.8em; }
.muted { color: var(--text-2); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--accent); color: #fff; padding: 10px 16px;
  border-radius: var(--pill); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------ shared UI */

.glass { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -36px rgba(0, 0, 0, 0.7); }

/* The highlight phrase: blue to magenta, the mark's glow, drifting slowly */
.hl { background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; animation: hlDrift 9s linear infinite; }
@keyframes hlDrift { to { background-position: -200% 0; } }

.badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 11px;
  border-radius: var(--pill); border: 1px solid rgba(229, 138, 196, 0.32); background: rgba(172, 80, 143, 0.1);
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--accent-text); }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); animation: livePulse 2.4s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(229, 138, 196, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(229, 138, 196, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 138, 196, 0); } }

.ic { width: 1.25em; height: 1.25em; flex: none; }
.ic.sm { width: 1.05em; height: 1.05em; }

/* Buttons: one accent fill, a sheen that passes every few seconds */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; min-height: 46px; padding: 0 22px; border-radius: var(--pill); font-weight: 600; font-size: 0.98rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--accent); color: #fff;
  box-shadow: 0 10px 30px -10px rgba(172, 80, 143, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-primary:hover { background: #9A4580; box-shadow: 0 12px 36px -8px rgba(172, 80, 143, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%);
  background-size: 260% 100%; background-position: 130% 0; animation: btnSheen 5s ease-in-out infinite; }
@keyframes btnSheen { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
.btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); color: var(--text); }
.btn-ghost:hover { border-color: rgba(229, 138, 196, 0.55); background: rgba(229, 138, 196, 0.08); }
.btn-ghost .ic { transition: transform .2s; }
.btn-ghost:hover .ic { transform: translateX(3px); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.92rem; }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 1.02rem; }
.btn-circ { gap: 10px; padding-right: 5px; }
.circ { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: #0A1233; color: #fff; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.btn-circ:hover .circ, .btn-circ:focus-visible .circ { transform: translateX(4px); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link .ic { transition: transform .2s; }
.link:hover .ic { transform: translateX(3px); }

/* Icon tiles: rounded squares, a soft glow on hover */
.tile { position: relative; width: 48px; height: 48px; border-radius: var(--radius-in); display: inline-grid; place-items: center; flex: none;
  color: #F6D3EA; background: linear-gradient(145deg, rgba(73, 118, 177, 0.32), rgba(172, 80, 143, 0.3));
  border: 1px solid rgba(229, 138, 196, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: box-shadow .25s, transform .25s, border-color .25s; }
.tile .ic { width: 24px; height: 24px; }
.tile.sm { width: 36px; height: 36px; }
.tile.sm .ic { width: 19px; height: 19px; }
a:hover .tile, .tile:hover { border-color: rgba(229, 138, 196, 0.6); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 26px 2px rgba(229, 138, 196, 0.35); }


/* ------------------------------------------------------------ navigation */

.nav { position: sticky; top: 0; z-index: 30; background: rgba(10, 18, 51, 0.8);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line); }
.nav-row { display: flex; align-items: center; gap: 12px; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; letter-spacing: -0.01em; font-size: 1.15rem; }
.brand img { width: 32px; height: 32px; animation: flicker 1.8s ease-out both; }
@keyframes flicker { 0% { opacity: 0; } 10% { opacity: .8; } 14% { opacity: .2; } 22% { opacity: 1; } 26% { opacity: .5; } 34%, 100% { opacity: 1; } }
.nav-links { display: none; position: relative; align-items: center; gap: 2px; margin-left: 20px; font-size: 0.95rem; }
.nl, .dd-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--pill); color: var(--text-2);
  text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; transition: color .2s, background .2s; }
.nl:hover, .dd-btn:hover, .nl[aria-current="page"], .dd.is-current .dd-btn, .dd.open .dd-btn { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.chev { width: 16px; height: 16px; transition: transform .2s; }
.dd.open .chev { transform: rotate(180deg); }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-cta .btn { display: none; }
@media (min-width: 340px) { .nav-cta .nav-audit { display: inline-flex; } }
/* v2.3: Client Login and Book a call as outline pills, then the primary pill with its dark circle. Below
   the desktop nav only the compact "Free audit" pill shows; the long label stays for screen readers. */
.nav-pill { font-weight: 550; }
.nav-audit-short { display: inline; }
.nav-audit-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 479px) { .menu { padding: 10px 12px; } .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (min-width: 1060px) {
  .nav-links { display: flex; }
  .nav-cta .nav-pill { display: inline-flex; }
  .nav-audit-short { display: none; }
  .nav-audit-long { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .menu { display: none !important; }
}
@media (min-width: 1060px) and (max-width: 1239px) { .nav-links { margin-left: 8px; } .nl, .dd-btn { padding: 8px 9px; } .nav-cta .btn-sm { padding: 0 13px; } .nav-cta .btn-circ { padding-right: 4px; } }
.nav-row.wrap { max-width: 1360px; }
.menu { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); color: var(--text);
  border-radius: var(--pill); padding: 8px 14px; font: inherit; font-size: 0.9rem; cursor: pointer; }
.menu-bars { width: 14px; height: 10px; position: relative; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; transition: transform .2s; }

/* Dropdowns: open on hover, on keyboard focus, and on tap (site.js toggles .open) */
.dd-panel { position: absolute; top: calc(100% + 14px); left: 0; width: min(760px, calc(100vw - 64px)); padding: 14px;
  border-radius: var(--radius); background: rgba(12, 19, 52, 0.97); border: 1px solid var(--glass-line);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(229, 138, 196, 0.06);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.dd.open .dd-panel, .dd:has(.dd-panel :focus-visible) .dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
@media (hover: hover) { .dd:hover .dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; } }
.dd.open .dd-panel .dd-item, .dd:hover .dd-panel .dd-item { animation: ddIn .3s ease-out both; }
.dd-panel .dd-item:nth-child(2n) { animation-delay: .03s; }
.dd-panel .dd-item:nth-child(n+5) { animation-delay: .06s; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dd-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: var(--radius-in); text-decoration: none; transition: background .15s; }
.dd-item:hover, .dd-item:focus-visible { background: rgba(255, 255, 255, 0.05); }
.dd-item strong { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.dd-item small { display: block; color: var(--text-2); font-size: 0.8rem; line-height: 1.4; margin-top: 2px; }
.dd-all { display: flex; align-items: center; gap: 6px; margin: 8px 10px 2px; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--accent-text); text-decoration: none; font-weight: 600; font-size: 0.9rem; }

/* The mobile menu: the two dropdowns become groups that open in place */
.mobile-panel { display: none; max-height: calc(100vh - 70px); overflow: auto; border-top: 1px solid var(--line); background: var(--ground-deep); padding: 8px 16px 20px; }
.mobile-panel.open { display: block; animation: ddIn .25s ease-out; }
.m-group { border-bottom: 1px solid var(--line); }
.m-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; cursor: pointer; font-weight: 600; }
.m-group summary::-webkit-details-marker { display: none; }
.m-group[open] .chev { transform: rotate(180deg); }
.m-links { display: grid; padding: 0 0 12px; }
.m-links a { padding: 9px 12px; color: var(--text-2); text-decoration: none; border-radius: var(--radius-in); }
.m-links a:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.m-links .m-all { color: var(--accent-text); font-weight: 600; }
.m-link { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; }
.m-ctas { display: grid; gap: 10px; margin-top: 18px; }

/* ------------------------------------------------------------ sections */

.sec { padding: 80px 0; }
@media (min-width: 768px) { .sec { padding: 120px 0; } }
.sec-tight { padding: 32px 0; }
@media (min-width: 768px) { .sec-tight { padding: 48px 0; } }
.sec-title { max-width: 26ch; margin-bottom: 40px; }
.sec-title.center, .center { text-align: center; margin-left: auto; margin-right: auto; }
.center-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.center-head .lede { margin: 0 auto; }
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1.1fr; gap: 64px; } }
.split-even { display: grid; gap: 28px; }
@media (min-width: 900px) { .split-even { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }
.more { margin-top: 28px; text-align: center; }

/* ------------------------------------------------------------ hero */

.hero { position: relative; overflow: hidden; padding: 48px 0 72px; }
@media (min-width: 768px) { .hero { padding: 72px 0 104px; } }
.mesh { position: absolute; inset: 0; pointer-events: none; z-index: -1;
  -webkit-mask: linear-gradient(#000 45%, transparent 98%); mask: linear-gradient(#000 45%, transparent 98%); }
.mesh span { position: absolute; width: 680px; height: 680px; border-radius: 50%; }
.mesh span:first-child { left: -260px; top: -280px; background: radial-gradient(circle, rgba(73, 118, 177, 0.38), transparent 62%);
  animation: meshDrift 18s ease-in-out infinite; }
.mesh span:last-child { right: -280px; top: -160px; background: radial-gradient(circle, rgba(172, 80, 143, 0.34), transparent 62%);
  animation: meshDrift 22s ease-in-out infinite reverse; }
@keyframes meshDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } }
.hero { isolation: isolate; }
.hero-split { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .hero-split { grid-template-columns: 1fr 1.02fr; gap: 56px; } }
.hero .lede { margin-bottom: 28px; }
.hero-copy > * { animation: heroUp .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
.hero-visual { animation: heroUp .9s .25s cubic-bezier(.2, .7, .2, 1) both; min-width: 0; }
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } }
.hero-visual .dash { animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.opener { padding-bottom: 32px; }
@media (min-width: 768px) { .opener { padding-bottom: 48px; } }
.opener h1 { max-width: 20ch; }
.opener .wrap > * { animation: heroUp .8s cubic-bezier(.2, .7, .2, 1) both; }
.opener .wrap > :nth-child(2) { animation-delay: .08s; }
.opener .wrap > :nth-child(3) { animation-delay: .16s; }


/* ------------------------------------------------------------ home hero (v2.3, repvive's hero, ours mapped)
   A lighter panel with rounded bottom corners; copy left, the sample account card right, the press
   strip under the copy, the review fan across the panel's bottom edge. The card's HTML is its final
   state, which no-JS and reduced motion show as is; the v2.4 story plays once on load further down. */

.wrap-wide { max-width: 1360px; }
.hero-23 { padding: 0 0 36px; }
.hero-panel { position: relative; isolation: isolate; overflow: hidden; padding: 36px 0 92px;
  background: linear-gradient(180deg, #121D4D 0%, #0F1945 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0 0 28px 28px; }
@media (min-width: 900px) { .hero-panel { padding: 64px 0 196px; border-radius: 0 0 48px 48px; } }
.hero-grid { display: grid; gap: 36px; grid-template-areas: "copy" "card" "press"; }
.hero-grid > .hero-copy { grid-area: copy; min-width: 0; }
.hero-grid > .hero-card { grid-area: card; min-width: 0; }
.hero-grid > .press { grid-area: press; }
.hero-grid > .press-wrap { grid-area: press; min-width: 0; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr); grid-template-areas: "copy card" "press ."; gap: 40px 48px; align-items: center; }
}
@media (min-width: 1200px) { .hero-grid { column-gap: 56px; } }
.eyebrow { margin: 0 0 18px; color: var(--text-2); font-size: 1.02rem; font-weight: 500; }
.hero-h1 { font-size: clamp(2.5rem, 8.4vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 650; margin: 0 0 26px; }
@media (min-width: 960px) { .hero-h1 { font-size: clamp(2.6rem, 6.6vw - 1rem, 5rem); } }
.nw { white-space: nowrap; }
.h-spark { display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.08em; vertical-align: 0.02em; fill: var(--accent-text);
  filter: drop-shadow(0 0 10px rgba(229, 138, 196, 0.7)); transform-origin: 50% 50%;
  animation: sparkWiggle 3.6s 1s ease-in-out infinite, sparkGlow 3.6s 1s ease-in-out infinite; }
/* repvive's star: a small wiggle and a glow pulse, looping slowly */
@keyframes sparkWiggle { 0%, 52%, 100% { transform: none; } 10% { transform: rotate(-16deg) scale(1.2); } 22% { transform: rotate(13deg) scale(1.06); }
  33% { transform: rotate(-7deg) scale(1.14); } 43% { transform: rotate(3deg) scale(1); } }
@keyframes sparkGlow { 0%, 60%, 100% { filter: drop-shadow(0 0 6px rgba(229, 138, 196, 0.45)); } 16% { filter: drop-shadow(0 0 16px rgba(229, 138, 196, 1)); } }
.hero-sub { margin: 0 0 32px; }
.hero-sub p { margin: 0; font-size: 1.12rem; line-height: 1.55; color: var(--text-2); max-width: 54ch; }
@media (min-width: 768px) and (max-width: 959px), (min-width: 1200px) { .hero-sub p { font-size: 1.22rem; } }
.hero-ctas { gap: 14px; }
.hero-ctas .btn-lg { min-height: 58px; font-size: 1.06rem; padding: 0 30px; }
.hero-ctas .btn-circ { padding-right: 6px; gap: 18px; background: linear-gradient(100deg, #8E3F78 0%, #AC508F 55%, #8A4B9C 100%); }
.hero-ctas .btn-circ:hover { background: linear-gradient(100deg, #7F386B 0%, #9A4580 55%, #7B438C 100%); }
.hero-ctas .circ { width: 46px; height: 46px; }
.hero-ctas .circ .ic { width: 20px; height: 20px; }
@media (max-width: 599px) {
  .hero-ctas { display: grid; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas .btn-circ { position: relative; padding: 0 58px; }
  .hero-ctas .btn-circ .circ { position: absolute; right: 6px; top: 50%; margin-top: -23px; }
  .hero-ctas .btn-circ:hover .circ { transform: translateX(-2px); }
}

/* ------------------------------------------------------------ v2.5: the shared row (SPEC.md, "One software UI everywhere")
   One row for every screen of our software: the hero card, the log, both dashboards, the industry phones
   and mini dashboards, /login. Icon, name, time, an optional tag, one line of text, the pill on the right.
   The <li> is a one-row grid, so a new row grows from 0fr and pushes the rows after it down (site.js
   pushIn); nothing blinks in. The pill colors are the same everywhere. */

.ur-list { list-style: none; margin: 0; padding: 0; container: urs / inline-size; }
.ur { position: relative; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s cubic-bezier(.2, .7, .2, 1), opacity .45s ease; }
.ur[hidden] { display: none; }
.ur-in { min-height: 0; padding-bottom: 8px; }
.ur.ur-enter, .ur.is-collapse { grid-template-rows: 0fr; }
.ur.ur-enter { opacity: 0; }
.ur.ur-enter .ur-card { transform: translateY(-12px) scale(.97); }
.ur.ur-moving > .ur-in { overflow: hidden; }
.ur-card { position: relative; isolation: isolate; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "ic top out" "ic text text"; column-gap: 12px; row-gap: 4px; align-items: center; width: 100%;
  padding: 11px 13px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit; font: inherit; text-align: left;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .45s ease, border-color .3s, background-color .3s, box-shadow .3s; }
.has-chip > .ur-in > .ur-card { grid-template-areas: "ic top out" "ic text chip"; }
.ur.ur-new > .ur-in > .ur-card { animation: urNew 1.8s ease-out; }
@keyframes urNew { 0%, 25% { border-color: rgba(229, 138, 196, 0.75); background-color: rgba(229, 138, 196, 0.13);
  box-shadow: 0 0 0 1px rgba(229, 138, 196, 0.3), 0 0 26px -6px rgba(229, 138, 196, 0.7); } }
.ur-ic { grid-area: ic; align-self: start; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: #CFE0FF; background: linear-gradient(145deg, rgba(73, 118, 177, 0.3), rgba(73, 118, 177, 0.14)); border: 1px solid rgba(143, 178, 240, 0.22); }
.ur-ic .ic { width: 17px; height: 17px; }
.ur-top { grid-area: top; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; line-height: 1.3; }
.ur-top strong { font-weight: 600; font-size: 0.96rem; white-space: nowrap; }
.ur-time { color: var(--text-2); font-family: var(--mono); font-size: 0.74rem; white-space: nowrap; }
.ur-tag { display: inline-block; padding: 1px 8px; border-radius: var(--pill); border: 1px solid; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1.5; white-space: nowrap; transition: opacity .35s, transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.ur-tag.urgent { color: #FF9C88; background: rgba(255, 86, 60, 0.14); border-color: rgba(255, 112, 86, 0.48); }
.ur-tag.lead { color: #9EC2FF; background: rgba(73, 118, 177, 0.2); border-color: rgba(143, 178, 240, 0.45); }
.ur-tag.follow { color: #FFC877; background: rgba(240, 160, 40, 0.13); border-color: rgba(250, 182, 72, 0.45); }
.ur-tag.spam { color: var(--text-2); background: rgba(255, 255, 255, 0.06); border-color: rgba(201, 204, 224, 0.3); }
.ur-tag.kind { color: var(--accent-text); background: rgba(172, 80, 143, 0.12); border-color: rgba(229, 138, 196, 0.3); }
.ur-out { grid-area: out; justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ur-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--pill); border: 1px solid;
  font-size: 0.74rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.ur-pill .ic { width: 12px; height: 12px; }
.ur-pill.ok { color: #7BE3AE; background: rgba(91, 214, 155, 0.14); border-color: rgba(91, 214, 155, 0.45); }
.ur-pill.hand { color: var(--accent-text); background: rgba(172, 80, 143, 0.16); border-color: rgba(229, 138, 196, 0.5); }
.ur-pill.stop { color: var(--text-2); background: rgba(255, 255, 255, 0.05); border-color: var(--line); }
.ur-pill.spam { color: #FFA27E; background: rgba(255, 98, 52, 0.16); border-color: rgba(255, 112, 64, 0.5); }
.ur-you { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); }
.ur-you .ic { width: 13px; height: 13px; }
.ur-av { display: grid; place-items: center; height: 22px; padding: 0 8px; border-radius: var(--pill); color: #fff; font-size: 0.66rem; font-weight: 700;
  background: linear-gradient(145deg, #4976B1, #AC508F); box-shadow: 0 0 14px -3px rgba(229, 138, 196, 0.8); }
.ur-text { grid-area: text; margin: 0; min-width: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.4; }
.ur-chip { grid-area: chip; justify-self: end; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 8px;
  color: #CFF5E1; background: rgba(91, 214, 155, 0.12); border: 1px solid rgba(91, 214, 155, 0.4); font-family: var(--mono); font-size: 0.72rem; white-space: nowrap; }
.ur-chip .ic { width: 13px; height: 13px; color: #7BE3AE; }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-text); animation: livePulse 2.4s infinite; }
/* A narrow list (phones, the hero card under about 440px): the icon joins the name's line, so the text
   gets the full width, and what was done takes its own line */
@container urs (max-width: 440px) {
  .ur:not(.notif) > .ur-in > .ur-card { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "ic top top" "text text text" "out out out";
    column-gap: 9px; row-gap: 4px; padding: 9px 12px; }
  .ur.has-chip > .ur-in > .ur-card { grid-template-areas: "ic top chip" "text text text" "out out out"; }
  .ur:not(.notif) .ur-ic { align-self: center; width: 24px; height: 24px; border-radius: 7px; }
  .ur:not(.notif) .ur-ic .ic { width: 14px; height: 14px; }
  .ur:not(.notif) .ur-out { justify-self: start; }
  .ur-text { font-size: 0.88rem; }
}
/* A software panel: the hero card's glass, for the log and /login */
.ucard { position: relative; border-radius: 22px; background: linear-gradient(180deg, rgba(9, 14, 42, 0.94), rgba(8, 12, 36, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px -40px rgba(0, 0, 0, 0.85), 0 0 80px -30px rgba(172, 80, 143, 0.4); }

/* ------------------------------------------------------------ v2.5: the hero card, the triage story (SPEC.md)
   Its HTML is the last frame: rows sorted, the spam row hidden, every pill done, the counter at 0. site.js
   arms it (.is-armed: arrival order, dimmed, no tags or pills, counter red) and plays the story once, about
   14 s, at one fixed height it measured; .hc-end sits at the stage's foot so the rows never move it. */

.hcard { position: relative; padding: 22px; border-radius: 24px; background: linear-gradient(180deg, rgba(9, 14, 42, 0.94), rgba(8, 12, 36, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px -40px rgba(0, 0, 0, 0.85), 0 0 80px -30px rgba(172, 80, 143, 0.45); }
@media (max-width: 479px) { .hcard { padding: 16px; } .hc-head { padding-bottom: 14px; margin-bottom: 16px; } .hc-result { font-size: 1.4rem; }
  .hc-stats { font-size: 0.86rem; } .is-armed .hc-end { padding: 0 44px; } }
@media (min-width: 768px) { .hcard { padding: 26px; } }
.hc-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.hc-id { min-width: 0; }
.hc-biz { margin: 0; font-weight: 650; font-size: 1.14rem; letter-spacing: -0.01em; }
.hc-meta { margin: 0; color: var(--text-2); font-size: 0.88rem; }
.hc-count { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: 8px; flex: none; }
.hc-num { display: inline-block; min-width: 1ch; font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: #7BE3AE; text-shadow: 0 0 18px rgba(91, 214, 155, 0.4); transition: color .4s, text-shadow .4s; }
.hc-num.hot { color: #FF7A59; text-shadow: 0 0 18px rgba(255, 92, 40, 0.55); }
.hc-num.tick { animation: hcTick .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hcTick { from { transform: translateY(6px) scale(1.45); } }
.hc-clabel { color: var(--text-2); font-size: 0.86rem; font-weight: 500; }
.hc-sort { position: absolute; left: 50%; bottom: 0; z-index: 4; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px 4px 9px;
  border-radius: var(--pill); border: 1px solid rgba(229, 138, 196, 0.5); background: #1A1440; color: var(--accent-text); font-size: 0.76rem; font-weight: 600;
  white-space: nowrap; box-shadow: 0 0 22px -6px rgba(229, 138, 196, 0.8); opacity: 0; visibility: hidden; transform: translate(-50%, 50%) scale(.85);
  transition: opacity .35s, transform .35s cubic-bezier(.3, 1.5, .5, 1), visibility 0s .35s; }
.hcard.is-sorting .hc-sort { opacity: 1; visibility: visible; transform: translate(-50%, 50%); transition: opacity .35s, transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.hc-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(229, 138, 196, 0.25); border-top-color: var(--accent-text); animation: spin .8s linear infinite; }
.hc-stage { position: relative; }
.hc-rows { position: relative; }
.hc-end { padding-top: 10px; text-align: center; }
.hc-result { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 6px; font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.hc-check { width: 0.95em; height: 0.95em; flex: none; overflow: visible; }
.hc-check circle { fill: var(--accent); transform-origin: 16px 16px; }
.hc-check path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; }
.hc-stats { margin: 0; color: var(--text-2); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; }
.hc-replay { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); color: var(--text-2); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .3s; animation: hcUp .5s ease-out both; }
.hc-replay:hover { color: var(--text); border-color: rgba(229, 138, 196, 0.55); background: rgba(229, 138, 196, 0.1); transform: rotate(-30deg); }
.hc-replay .ic { width: 18px; height: 18px; }
.hc-replay[hidden] { display: none; }
/* The burn (red, the spam row's) and the handled glow sit under the row's text and only ever fade */
.hc-row .ur-card::before, .hc-row .ur-card::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
  transition: opacity .4s ease; }
.hc-row .ur-card::before { border: 2px solid rgba(255, 96, 60, 1); background: linear-gradient(0deg, rgba(255, 62, 30, 0.62), rgba(255, 92, 48, 0.3));
  box-shadow: 0 0 36px 2px rgba(255, 72, 36, 0.75), inset 0 0 24px rgba(255, 140, 80, 0.35); }
.hc-row .ur-card::after { border: 2px solid rgba(91, 214, 155, 0.95); background: linear-gradient(0deg, rgba(91, 214, 155, 0.2), rgba(91, 214, 155, 0.05));
  box-shadow: 0 0 34px -2px rgba(91, 214, 155, 0.65); }
.hc-row.k-owner .ur-card::after { border-color: rgba(229, 138, 196, 1); background: linear-gradient(0deg, rgba(172, 80, 143, 0.32), rgba(172, 80, 143, 0.08));
  box-shadow: 0 0 36px -2px rgba(229, 138, 196, 0.75); }
.hc-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hc-fx i, .hc-fx b { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; opacity: 0; }
.hc-fx i { background: radial-gradient(circle, #FFF0C8 0, #FFA050 30%, #FF6A2E 52%, rgba(255, 80, 30, 0) 74%); }
.hc-fx b { background: radial-gradient(circle, #ECFFF4 0, #5BD69B 42%, rgba(91, 214, 155, 0) 72%); }
.k-owner .hc-fx b { background: radial-gradient(circle, #FFF0FA 0, #E58AC4 42%, rgba(229, 138, 196, 0) 72%); }
/* The armed states, only ever set by site.js with motion allowed */
.js .hero-23 .hcard:not(.is-in) { opacity: 0; transform: translateY(18px); }
.hcard.is-armed { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.is-armed .hc-end { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 48px; }
.is-armed:not(.is-end) .hc-end { opacity: 0; visibility: hidden; }
.is-armed.is-end .hc-result { animation: hcUp .5s ease-out both; }
.is-armed.is-end .hc-check circle { animation: hcPop .4s .15s cubic-bezier(.3, 1.6, .5, 1) both; }
.is-armed.is-end .hc-check path { animation: hcDraw .5s .45s ease-out both; }
.is-armed.is-end .hc-stats { animation: hcUp .5s .55s ease-out both; }
.hc-row .ur-card { background-color: #111739; }
.hc-row.is-dim .ur-card > :not(.hc-fx) { opacity: .7; }
.hc-row .ur-card > * { transition: opacity .45s ease; }
.hc-row.no-tag .ur-tag { opacity: 0; transform: scale(.5); }
.hc-row.pre .ur-out, .hc-row.pre .ur-chip { opacity: 0; visibility: hidden; }
.hc-row.done .ur-out { animation: hcPillIn .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.hc-row.chip-on .ur-chip { animation: hcPop .45s cubic-bezier(.3, 1.7, .5, 1) both; }
.hc-row.is-moving { z-index: 2; }
.hc-row.is-moving.up { z-index: 3; }
.hc-row.is-act { z-index: 3; }
.hc-row.is-act .ur-card { transform: scale(1.035); border-color: transparent; }
.hc-row.is-act .ur-card::after, .hc-row.is-keep .ur-card::after { opacity: 1; }
.hc-row.is-keep .ur-card::after { box-shadow: 0 0 22px -6px rgba(91, 214, 155, 0.5); }
.hc-row.is-act .hc-fx b { animation: hcSpark .7s ease-out both; animation-delay: calc(.35s + var(--d)); }
.hc-row.is-burn { z-index: 3; }
.hc-row.is-burn .ur-card { transform: scale(1.03); border-color: transparent; }
.hc-row.is-burn .ur-card::before { opacity: 1; transition-duration: .3s; }
.hc-row.is-burn .ur-text, .hc-row.is-burn .ur-top strong { color: #FFE3D6; }
.hc-row.is-burn .hc-fx i { animation: hcEmber 1.1s ease-out both; animation-delay: calc(.25s + var(--d)); }
.hc-row.is-gone .ur-card { opacity: 0; transform: scale(.94) translateY(-6px); filter: blur(1.5px); transition: opacity .55s ease, transform .55s ease, filter .55s; }
@keyframes hcEmber { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), -64px) scale(.3); } }
@keyframes hcSpark { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: translate(var(--dx), -18px) scale(.5); } }
@keyframes hcPillIn { from { opacity: 0; transform: rotateX(-90deg) scale(.8); } }
@keyframes hcUp { from { opacity: 0; transform: translateY(12px); } }
@keyframes hcPop { from { transform: scale(0); } }
@keyframes hcDraw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
/* The review fan slides up after the card has risen (repvive's order) */
.hero-23 { --card-at: .5s; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-23 .rcard { animation: fanIn .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--card-at) + .3s + var(--i, 0) * .09s); }
}

/* The press strip (repvive's faded logo marquee): grey serif wordmarks, both edges masked */
.press { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.press-track { display: flex; width: max-content; animation: pressRun 36s linear infinite; }
.press:hover .press-track { animation-play-state: paused; }
@keyframes pressRun { to { transform: translateX(-50%); } }
.press-set { display: flex; align-items: center; gap: 56px; padding: 6px 56px 6px 0; margin: 0; list-style: none; flex: none; }
.pw { color: rgba(238, 240, 250, 0.4); font-family: Georgia, "Times New Roman", serif; line-height: 1; white-space: nowrap; }
.pw a { color: inherit; text-decoration: none; display: inherit; }
.pw a:hover { color: rgba(238, 240, 250, 0.75); }
.pw-inc { font-family: Rockwell, "Rockwell Extra Bold", "Roboto Slab", Georgia, "Times New Roman", serif; font-weight: 800; font-size: 2.1rem; letter-spacing: -0.04em; }
.pw-forbes { font-weight: 700; font-size: 2.1rem; letter-spacing: -0.02em; }
.pw-business-insider { display: grid; font-variant: small-caps; font-size: 1.08rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.02; }
.pw-business-insider span, .pw-business-insider a span { display: block; }
.pw-ceo-magazine { display: grid; justify-items: center; }
.pw-ceo-magazine span { font-size: 2.1rem; letter-spacing: 0.02em; }
.pw-ceo-magazine small { display: block; margin-top: 2px; font-size: 0.5rem; letter-spacing: 0.32em; text-transform: uppercase; }
@media (max-width: 599px) { .press-set { gap: 40px; padding-right: 40px; } .pw-inc, .pw-forbes, .pw-ceo-magazine span { font-size: 1.75rem; } .pw-business-insider { font-size: 0.95rem; } }

/* The review fan (repvive's tilted cards) across the panel's bottom edge; a scroll-snap row on phones */
.fan-wrap { position: relative; z-index: 2; margin-top: -56px; padding: 0; }
.fan { list-style: none; margin: 0; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 24px 16px 30px; scrollbar-width: none; }
.fan::-webkit-scrollbar { display: none; }
.fan:focus-visible { outline-offset: -2px; }
.rcard { position: relative; flex: 0 0 80%; scroll-snap-align: center; padding: 20px 22px 20px; border-radius: 18px; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.75);
  transform: rotate(calc(var(--r, 0deg) * 0.45)); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.rc-navy { background: #16205A; }
.rc-magenta { background: #AC508F; }
.rc-violet { background: #6B44B8; }
.rc-green { background: #1B7A52; }
.rc-amber { background: #A8600F; }
.rc-stars { display: flex; gap: 3px; margin: 0 0 12px; color: #fff; }
.rc-navy .rc-stars { color: #FFD27A; }
.rc-stars .ic { width: 16px; height: 16px; }
.rc-q { margin: 0 0 14px; }
.rc-q p { margin: 0; font-weight: 700; font-size: 1.04rem; line-height: 1.32; letter-spacing: -0.01em; quotes: "\201C" "\201D"; }
.rc-q p::before { content: open-quote; }
.rc-q p::after { content: close-quote; }
.rc-who { margin: 0; font-size: 0.88rem; font-weight: 500; color: rgba(255, 255, 255, 0.84); }
@keyframes fanIn { from { opacity: 0; translate: 0 70px; rotate: -8deg; } }
@media (min-width: 900px) {
  .fan-wrap { margin-top: -132px; padding: 0 32px; }
  .fan { overflow: visible; justify-content: center; gap: 0; padding: 0; }
  .rcard { flex: 0 0 clamp(196px, 18.4vw, 262px); margin: 0 -9px; transform: rotate(var(--r, 0deg)); }
  .rcard:hover { transform: rotate(0deg) translateY(-14px) scale(1.03); z-index: 3; box-shadow: 0 36px 60px -24px rgba(0, 0, 0, 0.85); }
}

/* ------------------------------------------------------------ home: what we take off your plate */

.plate-grid { display: grid; gap: 36px; }
@media (min-width: 1000px) { .plate-grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } .plate-copy { position: sticky; top: 110px; } }
.plate-copy p { max-width: 44ch; }
.wtiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .wtiles { grid-template-columns: repeat(3, 1fr); } }
.wtile { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 128px; padding: 18px;
  border-radius: var(--radius); text-decoration: none; background: var(--glass); border: 1px solid var(--glass-line);
  transition: border-color .2s, background .2s, opacity .7s, transform .7s; }
.wtile:hover { border-color: rgba(229, 138, 196, 0.4); }
.wtile-name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.wtile .tile { animation: tileGlow 11s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1s); }
@keyframes tileGlow { 0%, 12%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
  6% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 28px 4px rgba(229, 138, 196, 0.45); border-color: rgba(229, 138, 196, 0.7); } }
.wtile-all { border-style: dashed; border-color: rgba(229, 138, 196, 0.4); background: rgba(172, 80, 143, 0.08); }
.wtile-all .wtile-name { color: var(--accent-text); }
.wtile-all .tile { animation: none; }
.wtile-all:hover .ic { transform: translateX(3px); }
.wtile-all .ic { transition: transform .2s; }

/* ------------------------------------------------------------ home: the time-and-money band, and guardrail bands */

.band, .guard-band { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid rgba(229, 138, 196, 0.24);
  background: linear-gradient(120deg, rgba(8, 25, 68, 0.96), rgba(41, 10, 41, 0.92) 50%, rgba(8, 25, 68, 0.96));
  background-size: 220% 220%; animation: gradDrift 16s ease-in-out infinite; padding: 36px 20px; }
@media (min-width: 768px) { .band, .guard-band { padding: 52px 56px; } }
@keyframes gradDrift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.gl-sheen { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%);
  transform: translateX(-100%); animation: bandSheen 8s ease-in-out infinite; }
@keyframes bandSheen { 0%, 50% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.tmband { display: grid; gap: 24px; }
@media (min-width: 860px) { .tmband { grid-template-columns: 220px 1fr; gap: 48px; align-items: center; } }
.gl-fig { display: grid; place-items: center; }
.gl-art { width: 150px; height: 150px; overflow: visible; }
.gl-ring { fill: none; stroke: rgba(229, 138, 196, 0.38); stroke-width: 1.5; stroke-dasharray: 4 7; transform-box: fill-box; transform-origin: center;
  animation: spin 40s linear infinite; }
.gl-ring.r2 { stroke: rgba(73, 118, 177, 0.55); animation-duration: 28s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.gl-shield { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 18px rgba(172, 80, 143, 0.55)); }
.gl-tick { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; }
.op-shield .gl-art { width: min(100%, 300px); height: auto; }
.op-shield .gl-shield { animation: rollIn 1.2s .35s cubic-bezier(.2, .8, .2, 1) both; }
.op-shield .gl-tick { animation: drawIn .6s 1.35s both; }
@keyframes rollIn { 0% { opacity: 0; transform: translateX(140px) rotate(320deg); } 30% { opacity: 1; } 75% { transform: translateX(-6px) rotate(-10deg); } 100% { opacity: 1; transform: none; } }
@keyframes drawIn { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.gl-copy, .guard-band > * { position: relative; }
.gl-points { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 768px) { .gl-points { grid-template-columns: 1fr 1fr; gap: 28px; } }
.gl-points li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.gl-points h3 { margin: 4px 0 4px; font-size: 1.05rem; }
.gl-points p { margin: 0; color: var(--text-2); }
.gl-close { margin: 0; font-weight: 600; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.guards { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 768px) { .guards { grid-template-columns: 1fr 1fr; gap: 16px 40px; } }
.guards li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; }
.guard-band h2 { max-width: 24ch; }

/* ------------------------------------------------------------ home: three steps, with an illustration each */

.steps { display: grid; gap: 16px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.step { padding: 22px; }
.step-fig { height: 156px; display: grid; place-items: center; margin-bottom: 18px; border-radius: var(--radius-in);
  background: radial-gradient(circle at 50% 60%, rgba(73, 118, 177, 0.2), transparent 70%), rgba(7, 12, 36, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05); }
.step-art { width: 200px; height: 140px; }
.step-art * { transform-box: fill-box; transform-origin: center; }
.step-n { display: block; font-family: var(--mono); font-size: 0.82rem; color: var(--accent-text); margin-bottom: 8px; }
.step p { margin: 0; color: var(--text-2); }
.sa-card { fill: rgba(18, 27, 66, 0.95); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.sa-line { stroke: rgba(255, 255, 255, 0.14); }
.sa-ring { fill: var(--ground); stroke: var(--text-2); stroke-width: 2; }
.sa-page rect { fill: #EEF0FA; }
.sa-page path { stroke: #8E95B8; stroke-width: 3; stroke-linecap: round; }
.sa-page { animation: pageDrop 5s ease-in-out infinite; }
@keyframes pageDrop { 0%, 8% { opacity: 0; transform: translateY(-40px) rotate(-6deg); } 20% { opacity: 1; } 42%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.sa-stamp circle { fill: var(--accent); }
.sa-stamp path { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.sa-stamp { animation: stampPop 5s cubic-bezier(.3, 1.5, .5, 1) infinite; }
@keyframes stampPop { 0%, 48% { opacity: 0; transform: scale(1.7); } 56% { opacity: 1; transform: scale(.92); } 62%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.sa-cell { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.08); }
.sa-cell.c0, .sa-cell.c3 { fill: rgba(172, 80, 143, 0.55); }
.sa-cell.c1 { animation: cellLit 4.5s ease-in-out infinite; }
.sa-cell.c2 { animation: cellLit 4.5s 1.1s ease-in-out infinite; }
.sa-cell.c4 { animation: cellLit 4.5s 2.2s ease-in-out infinite; }
@keyframes cellLit { 0%, 100% { fill: rgba(255, 255, 255, 0.06); } 40%, 60% { fill: rgba(73, 118, 177, 0.55); } }
.sa-trail { fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 220; animation: trailDraw 4.5s ease-in-out infinite; }
@keyframes trailDraw { 0% { stroke-dashoffset: 220; opacity: .3; } 55%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sa-pin { fill: #fff; filter: drop-shadow(0 0 6px var(--accent-text)); animation: pinPop 4.5s ease-in-out infinite; }
@keyframes pinPop { 0%, 50% { transform: scale(0); } 60% { transform: scale(1.3); } 66%, 100% { transform: scale(1); } }
.sa-wire { stroke: rgba(255, 255, 255, 0.16); stroke-width: 2; }
.sa-node { fill: rgba(18, 27, 66, 0.95); stroke: rgba(229, 138, 196, 0.45); stroke-width: 1.5; }
.sa-packet { fill: #fff; filter: drop-shadow(0 0 6px var(--accent-text)); animation: packetRun 3s ease-in-out infinite; }
@keyframes packetRun { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(152px); opacity: 0; } }
.sa-switch rect { fill: var(--accent); stroke: rgba(229, 138, 196, 0.6); animation: switchTrack 5s ease-in-out infinite; }
.sa-knob { fill: #fff; transform: translateX(34px); animation: switchKnob 5s ease-in-out infinite; }
@keyframes switchTrack { 0%, 22% { fill: rgba(255, 255, 255, 0.08); } 34%, 100% { fill: var(--accent); } }
@keyframes switchKnob { 0%, 22% { transform: none; } 34%, 100% { transform: translateX(34px); } }
.sa-live { fill: #5BD69B; animation: liveDot 1.6s ease-in-out infinite; }
@keyframes liveDot { 50% { transform: scale(1.5); opacity: .6; } }

/* ------------------------------------------------------------ home: before and after */

.ba { display: grid; gap: 16px; }
@media (min-width: 860px) { .ba { grid-template-columns: 1fr 1fr; gap: 20px; } }
.ba-card { padding: 28px; }
@media (min-width: 768px) { .ba-card { padding: 36px; } }
.ba-card h3 { font-size: 1.25rem; margin-bottom: 22px; }
.ba-card.with { border-color: rgba(229, 138, 196, 0.38); background: linear-gradient(160deg, rgba(172, 80, 143, 0.2), rgba(18, 27, 66, 0.6)); }
.ba-card ul, .xlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ba-card li, .xlist li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; color: var(--text-2); }
.ba-card.with li { color: var(--text); }
.mark-x, .mark-ok { width: 26px; height: 26px; padding: 5px; border-radius: 50%; }
.mark-x { color: var(--text-2); background: rgba(255, 255, 255, 0.07); }
.mark-ok { color: #fff; background: var(--accent); }
.ba-card.in li, .xlist.in li, .panel.in .plist li { animation: liIn .5s both; animation-delay: calc(var(--i, 0) * 110ms + .2s); }
.ba-card.now.in .mark-x, .xlist.in .mark-x { animation: crossShake .5s both; animation-delay: calc(var(--i, 0) * 110ms + .55s); }
.ba-card.with.in .mark-ok { animation: okPop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 110ms + .5s); }
@keyframes liIn { from { opacity: 0; transform: translateX(-8px); } }
@keyframes crossShake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px) rotate(-8deg); } 50% { transform: translateX(3px) rotate(8deg); } 75% { transform: translateX(-2px); } }
@keyframes okPop { from { transform: scale(0); } to { transform: scale(1); } }

/* ------------------------------------------------------------ principles */

.pcards { display: grid; gap: 16px; }
@media (min-width: 860px) { .pcards { grid-template-columns: repeat(3, 1fr); gap: 20px; } .pcards.four { grid-template-columns: repeat(2, 1fr); } }
.pcard { padding: 28px; }
.pcard h3 { margin: 20px 0 8px; font-size: 1.2rem; }
.pcard p { margin: 0; color: var(--text-2); }
.pcard.in .tile.pulse::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(229, 138, 196, 0.6);
  animation: ringOut 2.6s ease-out infinite; animation-delay: calc(var(--i, 0) * .45s); }
@keyframes ringOut { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.65); } }

/* ------------------------------------------------------------ the dashboard, big and centered */

.dash-stage { position: relative; max-width: 1040px; margin: 0 auto; }
.dash-stage::before { content: ""; position: absolute; inset: -8% -4%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(73, 118, 177, 0.3), rgba(172, 80, 143, 0.16) 60%, transparent);
  animation: auraSoft 8s ease-in-out infinite; }
@keyframes auraSoft { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
.dash-sec { position: relative; isolation: isolate; overflow: hidden; }

/* ------------------------------------------------------------ logged live */

/* v2.5: the shared row in a software panel; site.js plays the events in, newest on top, then holds */
.log { overflow: hidden; padding: 0; }
.log-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.log-top .live { margin-left: 0; }
.log-label { font-family: var(--mono); font-size: 0.74rem; color: var(--accent-text); }
.log-list { position: relative; padding: 14px 14px 0; height: 420px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }

/* ------------------------------------------------------------ industry tiles */

.itiles { display: grid; gap: 12px; }
@media (min-width: 640px) { .itiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .itiles { grid-template-columns: repeat(5, 1fr); } }
.itile { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px; text-decoration: none;
  transition: border-color .2s, opacity .7s, transform .7s; }
.itile:hover { border-color: rgba(229, 138, 196, 0.4); }
.itile-text { min-width: 0; padding-right: 18px; }
.itile strong { display: block; font-size: 0.98rem; line-height: 1.3; font-weight: 600; }
.itile small { display: block; color: var(--text-2); font-size: 0.86rem; line-height: 1.45; margin-top: 6px; }
@media (min-width: 1100px) { .itiles .itile { flex-direction: column; } }
.go { color: var(--accent-text); opacity: .6; transition: transform .2s, opacity .2s; }
.itile .go, .rtile .go { position: absolute; top: 20px; right: 16px; }
a:hover .go { opacity: 1; transform: translateX(3px); }

/* ------------------------------------------------------------ the whole system */

.sysband { position: relative; overflow: hidden; padding: 36px 20px; border-radius: var(--radius); border: 1px solid var(--glass-line);
  background: radial-gradient(700px 300px at 85% 0%, rgba(172, 80, 143, 0.22), transparent 70%),
              radial-gradient(600px 300px at 0% 100%, rgba(73, 118, 177, 0.22), transparent 70%), rgba(14, 22, 58, 0.7); }
@media (min-width: 768px) { .sysband { padding: 52px 56px; } }
.sys-head { max-width: 640px; }
.sys-fig { margin: 20px 0 6px; display: none; }
@media (min-width: 768px) { .sys-fig { display: block; } }
.sys-art { width: 100%; height: auto; }
.sys-art * { transform-box: fill-box; transform-origin: center; }
.sys-wire { stroke: rgba(255, 255, 255, 0.12); stroke-width: 2; fill: none; }
.sys-draw { stroke: var(--accent-text); stroke-width: 2; fill: none; stroke-dasharray: 760; stroke-dashoffset: 0; }
.sysband.in .sys-draw { animation: sysDraw 2.4s ease-in-out both; }
@keyframes sysDraw { from { stroke-dashoffset: 760; } }
.sys-node circle { fill: #0E1740; stroke: rgba(229, 138, 196, 0.6); stroke-width: 1.5; }
.sys-node { color: #F6D3EA; }
.sysband.in .sys-node { animation: okPop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.sysband.in .sys-node.n2 { animation-delay: .6s; }
.sysband.in .sys-node.n3 { animation-delay: 1.2s; }
.sysband.in .sys-node.n4 { animation-delay: 1.8s; }
.sys-packet { fill: #fff; filter: drop-shadow(0 0 6px var(--accent-text)); animation: sysPacket 4s 2.4s ease-in-out infinite; opacity: 0; }
@keyframes sysPacket { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(750px); } }
.sys-items { display: grid; gap: 18px; margin: 18px 0 28px; }
@media (min-width: 768px) { .sys-items { grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } }
.sys-items h3 { font-size: 1.02rem; margin-bottom: 6px; }
.sys-items p { margin: 0; color: var(--text-2); font-size: 0.94rem; }

/* ------------------------------------------------------------ calculator */

.calc { padding: 22px; display: grid; gap: 24px; }
@media (min-width: 768px) { .calc { padding: 32px; } }
.calc-in { display: grid; gap: 16px; }
.calc label > span:first-child { display: block; font-size: 0.92rem; color: var(--text-2); margin-bottom: 6px; }
.calc input { width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--radius-in); border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 12, 36, 0.75); color: var(--text); font: inherit; font-family: var(--mono); font-size: 1.08rem;
  transition: border-color .2s, box-shadow .2s; -moz-appearance: textfield; }
.calc input::-webkit-outer-spin-button, .calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc input:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(229, 138, 196, 0.22); }
.money { position: relative; display: block; }
.money > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-family: var(--mono); }
.money input { padding-left: 30px; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 1px solid var(--line); padding-top: 22px; }
.calc-stat .v { display: block; font-family: var(--mono); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.2; }
.calc-stat.big .v { background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.calc-stat .l { color: var(--text-2); font-size: 0.86rem; }
.calc-stat.bump .v { animation: bump .4s ease-out; }
@keyframes bump { 40% { transform: scale(1.07); } }
.calc-msg, .calc-note { grid-column: 1 / -1; margin: 0; font-size: 0.88rem; color: var(--text-2); }
.calc-msg { color: var(--accent-text); min-height: 1.4em; }
.calc-split h2 { max-width: 16ch; }

/* ------------------------------------------------------------ FAQ */

.faq-wrap { max-width: 860px; }
.faq details { margin-bottom: 10px; border-radius: var(--radius); border: 1px solid var(--glass-line); background: rgba(14, 22, 58, 0.5);
  transition: border-color .2s, background .2s, opacity .7s, transform .7s; }
.faq details[open] { border-color: rgba(229, 138, 196, 0.38); background: rgba(18, 27, 66, 0.75); }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: 18px 60px 18px 22px; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq-x { position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  border: 1px solid rgba(229, 138, 196, 0.45); transition: transform .25s, background .25s; }
.faq-x::before, .faq-x::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12px; height: 1.5px; background: var(--accent-text); }
.faq-x::after { transform: rotate(90deg); }
.faq details[open] .faq-x { transform: rotate(45deg); background: rgba(229, 138, 196, 0.14); }
.faq-a { padding: 0 22px 20px; }
.faq-a p { color: var(--text-2); margin: 0; max-width: 68ch; }
.faq details[open] .faq-a { animation: faqIn .35s ease-out; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* ------------------------------------------------------------ final CTA: the mark lit, aura and rays */

.final { padding: 72px 0 104px; }
.final-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .final-grid { grid-template-columns: 1fr 330px; } }
.final-main { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 56px 22px; }
@media (min-width: 768px) { .final-main { padding: 72px 48px; } }
.final-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.rays { position: absolute; left: 50%; top: 34%; width: 1200px; height: 1200px; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(229, 138, 196, 0.1) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 12%, transparent 48%); mask: radial-gradient(circle, #000 0 12%, transparent 48%);
  animation: rays 70s linear infinite; }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.aura { position: absolute; left: 50%; top: 34%; width: 540px; height: 540px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(172, 80, 143, 0.45), rgba(73, 118, 177, 0.22) 45%, transparent 70%);
  animation: aura 6s ease-in-out infinite; }
@keyframes aura { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
.final-mark { width: 132px; height: 132px; margin: 0 auto 22px; }
.final-main.in .final-mark { animation: flicker 1.8s ease-out both; }
.final-main h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.final-main p { color: var(--text-2); max-width: 46ch; margin: 0 auto 28px; }
.final-main h2:last-of-type { margin-bottom: 28px; }
.final-side { padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
.final-side h3 { margin: 14px 0 4px; font-size: 1.3rem; }
.final-side p { color: var(--text-2); margin: 0 0 16px; }

/* ------------------------------------------------------------ footer */

.foot { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: 64px 0 32px; color: var(--text-2);
  background: linear-gradient(180deg, rgba(7, 12, 36, 0.2), rgba(7, 12, 36, 0.85)); }
.foot-glow { position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glow-blue), var(--accent), transparent); background-size: 200% 100%;
  animation: lineDrift 9s linear infinite; }
@keyframes lineDrift { to { background-position: -200% 0; } }
/* v2.2: the company's details left, then Workflows, Industries over Resources, and Company. On a
   phone the columns stack and every link is a 44px row. */
.foot-top { display: grid; gap: 36px; }
@media (min-width: 700px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 44px 32px; } }
@media (min-width: 1100px) { .foot-top { grid-template-columns: 1.3fr 1.2fr 1.1fr 0.75fr; gap: 32px; } }
.foot-line { max-width: 36ch; margin: 16px 0 18px; }
.foot-addr { font-style: normal; display: grid; justify-items: start; margin: 0 0 6px; font-size: 0.93rem; }
.foot-addr strong { color: var(--text); font-weight: 600; letter-spacing: 0.03em; margin-bottom: 2px; }
.foot-addr a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.foot-addr a .ic { color: var(--accent-text); }
.foot-addr strong + span { margin-top: 0; }
.foot-addr span + a { margin-top: 6px; }
.foot .foot-book { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent-text); font-weight: 600; }
.foot .foot-book:hover { color: var(--text); }
.foot-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.fbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: var(--text);
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.foot a.fbtn { font-size: 0.92rem; color: var(--text); }
.fbtn:hover { border-color: rgba(229, 138, 196, 0.55); background: rgba(229, 138, 196, 0.08); }
.is-soon, .is-soon:hover { cursor: not-allowed; opacity: 0.72; border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); transform: none; }
.foot-stack { display: grid; gap: 36px; align-content: start; }
.foot-col h2 { font-family: var(--mono); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 8px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.foot-col a { display: flex; align-items: center; min-height: 44px; line-height: 1.35; }
.foot-col .foot-all a { color: var(--accent-text); font-weight: 600; }
.foot a { text-decoration: none; font-size: 0.93rem; transition: color .15s; }
.foot a:hover { color: var(--text); }
.foot .brand { color: var(--text); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.88rem; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.88rem; }
@media (min-width: 700px) {
  .foot-col a, .foot-addr a, .foot .foot-book { min-height: 32px; }
  .foot-col h2 { margin-bottom: 12px; }
  .foot .foot-legal a { min-height: 32px; }
}

/* ------------------------------------------------------------ cards for workflows and industries */

.wcards { display: grid; gap: 14px; }
@media (min-width: 640px) { .wcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wcards { grid-template-columns: repeat(3, 1fr); } }
.wcard { display: flex; flex-direction: column; gap: 12px; padding: 22px; text-decoration: none;
  transition: border-color .2s, background .2s, opacity .7s, transform .7s; }
.wcard:hover { border-color: rgba(229, 138, 196, 0.4); }
.wcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wcard h3 { margin: 4px 0 0; font-size: 1.1rem; }
.wcard p { margin: 0; color: var(--text-2); font-size: 0.95rem; }
.go-row { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 4px; }

/* ------------------------------------------------------------ workflow page */

.scene-card { padding: 14px; }
.scene-card > svg { width: 100%; height: auto; border-radius: var(--radius-in); }
.scene-cap { display: flex; align-items: center; gap: 10px; margin: 14px 4px 2px; font-weight: 600; font-size: 0.95rem; }
.xlist { padding: 24px; }
.hsteps { position: relative; list-style: none; margin: 0; padding: 0; max-width: 860px; }
.hsteps::before { content: ""; position: absolute; left: 19px; top: 22px; bottom: 30px; width: 2px;
  background: linear-gradient(var(--glow-blue), var(--accent)); transform-origin: top; }
.js .hsteps::before { transform: scaleY(0); transition: transform 1.8s cubic-bezier(.4, 0, .2, 1); }
.js .hsteps.drawn::before { transform: scaleY(1); }
.hstep { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding-bottom: 36px; }
.hstep:last-child { padding-bottom: 0; }
.hstep-n { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; background: var(--ground); border: 1.5px solid rgba(229, 138, 196, 0.6); color: var(--accent-text); }
.hstep.in .hstep-n { animation: numPop .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: .15s; }
@keyframes numPop { from { transform: scale(.4); background: var(--accent); color: #fff; } }
.hstep h3, .hstep h2 { margin: 7px 0 8px; }
.hsteps.big .hstep h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.hstep p { color: var(--text-2); }
.hstep > div > :last-child { margin-bottom: 0; }
.panels { display: grid; gap: 16px; }
@media (min-width: 860px) { .panels { grid-template-columns: 1fr 1fr; gap: 20px; } }
.panel { padding: 28px; }
@media (min-width: 768px) { .panel { padding: 34px; } }
.panel h2 { font-size: 1.3rem; margin: 18px 0 14px; }
.panel > p { color: var(--text-2); margin: 0; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plist li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--text-2); }
.plist .ic { color: var(--accent-text); margin-top: 4px; }
.proof { display: grid; gap: 12px; padding: 22px 26px; border-color: rgba(91, 214, 155, 0.3); }
@media (min-width: 768px) { .proof { grid-template-columns: auto 1fr; align-items: center; gap: 28px; } }
.proof-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.8rem; color: var(--accent-text); white-space: nowrap; }
.proof p { margin: 0; font-size: 1.05rem; }
.rtiles { display: grid; gap: 12px; }
@media (min-width: 640px) { .rtiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rtiles { grid-template-columns: repeat(3, 1fr); } }
.rtile { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 44px 16px 16px; text-decoration: none; font-weight: 600;
  transition: border-color .2s, opacity .7s, transform .7s; }
.rtile:hover { border-color: rgba(229, 138, 196, 0.4); }
.rtile .go { top: 50%; margin-top: -9px; }

/* ------------------------------------------------------------ industry page */

.orbit { position: relative; width: min(100%, 400px); aspect-ratio: 1; margin: 0 auto; }
.orbit-ring { position: absolute; border-radius: 50%; }
.orbit-ring.r1 { inset: 8%; border: 1px dashed rgba(229, 138, 196, 0.35); }
.orbit-ring.r2 { inset: 26%; border: 1px solid rgba(73, 118, 177, 0.45); animation: auraSoft 6s ease-in-out infinite; }
.orbit-core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: var(--radius);
  display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, rgba(73, 118, 177, 0.55), rgba(172, 80, 143, 0.55));
  border: 1px solid rgba(229, 138, 196, 0.5); box-shadow: 0 0 70px rgba(172, 80, 143, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: corePulse 4s ease-in-out infinite; }
.orbit-core .ic { width: 46%; height: 46%; }
@keyframes corePulse { 0%, 100% { box-shadow: 0 0 50px rgba(172, 80, 143, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22); } 50% { box-shadow: 0 0 90px rgba(172, 80, 143, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22); } }
.orbit-spin { position: absolute; inset: 0; animation: spin 50s linear infinite; }
.sat { position: absolute; inset: 0; transform: rotate(var(--a)); }
.sat .tile { position: absolute; left: 50%; top: 8%; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  background: rgba(14, 22, 58, 0.95); animation: spinBack 50s linear infinite; }
@keyframes spinBack { from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); } to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); } }
.day { max-width: 40ch; }
.day p { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.35; margin: 0 0 1.1em; color: var(--text-2); }
.day p:last-child { color: var(--text); }
.js .day p { opacity: .22; transition: opacity .6s ease, color .6s ease, transform .6s ease; transform: translateX(-6px); }
.js .day p.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ how it works, offers, about, apply */

.checks { display: grid; gap: 12px; margin: 4px 0 18px; padding: 0; list-style: none; counter-reset: c; }
.checks li { counter-increment: c; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; color: var(--text-2); }
.checks li::before { content: counter(c); font-family: var(--mono); font-size: 0.85rem; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(229, 138, 196, 0.5); color: var(--accent-text); }
.checks li.done::before { content: "\2713"; background: var(--accent); border-color: var(--accent); color: #fff; animation: okPop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.own { display: grid; gap: 18px; padding: 28px; }
@media (min-width: 768px) { .own { grid-template-columns: auto 1fr; gap: 24px; padding: 36px 40px; } }
.own h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.own p { margin: 0; color: var(--text-2); max-width: 70ch; }
.tiers { display: grid; gap: 16px; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.tier { padding: 28px; }
.tier.free { border-color: rgba(229, 138, 196, 0.45); background: linear-gradient(160deg, rgba(172, 80, 143, 0.24), rgba(18, 27, 66, 0.6)); }
.tier-n { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--accent-text); margin: 20px 0 8px; }
.tier h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); }
.tier p { color: var(--text-2); }
.tier p:last-child { margin-bottom: 0; }
.tier.in .tile { animation: okPop .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 120ms + .2s); }
.apply-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .apply-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; } }
.booking { margin-top: 8px; padding: 32px 28px; display: grid; justify-items: start; gap: 16px; border-style: dashed; border-color: rgba(229, 138, 196, 0.45); }
.booking-msg { margin: 0; font-size: 1.2rem; font-weight: 600; }
.next { padding: 28px; }
.next h2 { font-size: 1.4rem; }
.next-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; }
.next-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; color: var(--text-2); }
.next-steps li.in .hstep-n { animation: numPop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.next .muted { margin: 0; }

/* ------------------------------------------------------------ v2.1: home's time-and-money art */

.tm-art { width: min(100%, 220px); height: auto; overflow: visible; margin: 0 auto; }
.tm-halo { fill: none; stroke: rgba(73, 118, 177, 0.55); stroke-width: 1.5; stroke-dasharray: 3 7; transform-box: fill-box; transform-origin: center;
  animation: spin 40s linear infinite; }
.tm-face { fill: rgba(7, 12, 36, 0.75); stroke: url(#tm-g); stroke-width: 3; filter: drop-shadow(0 0 14px rgba(172, 80, 143, 0.45)); }
.tm-tick { stroke: rgba(238, 240, 250, 0.35); stroke-width: 2; stroke-linecap: round; }
.tm-tick.big { stroke: rgba(238, 240, 250, 0.8); }
.tm-sweep { fill: rgba(229, 138, 196, 0.16); }
.tm-sweep, .tm-hand { transform-box: view-box; transform-origin: 72px 80px; }
.tm-hand { fill: none; stroke-linecap: round; }
.tm-min { stroke: #fff; stroke-width: 3; }
.tm-hour { stroke: var(--accent-text); stroke-width: 4.5; }
.tm-sweep, .tm-min { animation: spin 8s linear infinite; }
.tm-hour { animation: spin 96s linear infinite; }
.tm-pin { fill: var(--accent-text); }
.tm-base { stroke: rgba(238, 240, 250, 0.25); stroke-width: 2; stroke-linecap: round; }
.tm-coin rect { fill: url(#tm-g); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.tm-coin path { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.5; stroke-linecap: round; }
.tm-coin { opacity: 0; animation: 8s cubic-bezier(.3, 1.3, .5, 1) infinite both; }
.tm-coin.c0 { animation-name: tmCoin0; } .tm-coin.c1 { animation-name: tmCoin1; } .tm-coin.c2 { animation-name: tmCoin2; }
.tm-coin.c3 { animation-name: tmCoin3; } .tm-coin.c4 { animation-name: tmCoin4; }
@keyframes tmCoin0 { 0% { opacity: 0; transform: translateY(-70px); } 3% { opacity: 1; } 9%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes tmCoin1 { 0%, 12% { opacity: 0; transform: translateY(-70px); } 15% { opacity: 1; } 21%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes tmCoin2 { 0%, 24% { opacity: 0; transform: translateY(-70px); } 27% { opacity: 1; } 33%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes tmCoin3 { 0%, 36% { opacity: 0; transform: translateY(-70px); } 39% { opacity: 1; } 45%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes tmCoin4 { 0%, 48% { opacity: 0; transform: translateY(-70px); } 51% { opacity: 1; } 57%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
.tm-spark { fill: #fff; filter: drop-shadow(0 0 6px var(--accent-text)); opacity: 0; animation: tmSpark 8s ease-out infinite; }
@keyframes tmSpark { 0%, 56% { opacity: 0; transform: scale(.4); } 62% { opacity: 1; transform: scale(1.6); } 72%, 100% { opacity: 0; transform: scale(1); } }
.tm-spark { transform-box: fill-box; transform-origin: center; }

/* ------------------------------------------------------------ v2.1: the owner's day, with a phone of unanswered notifications (the before) */

.day-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .day-split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.phone { position: relative; width: min(100%, 390px); justify-self: center; padding: 14px 12px 12px; border-radius: 34px;
  background: linear-gradient(180deg, rgba(18, 27, 66, 0.92), rgba(7, 12, 36, 0.94)); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 90px -40px rgba(73, 118, 177, 0.65), 0 0 0 6px rgba(255, 255, 255, 0.025); }
.phone::before { content: ""; display: block; width: 88px; height: 6px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.12); margin: 0 auto 12px; }
.phone-top { display: flex; align-items: center; gap: 10px; padding: 0 8px 12px; font-size: 0.86rem; }
.phone-biz { font-weight: 600; }
/* v2.5: each notification is the shared row, unanswered: the kind as its line, an unread dot for a pill */
.notif-list { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.notif .ur-card { border-radius: 18px; background: rgba(255, 255, 255, 0.06); }
.notif .ur-text { color: var(--accent-text); font-weight: 600; font-size: 0.86rem; }
.unread { margin-left: auto; padding: 3px 10px; border-radius: var(--pill); border: 1px solid rgba(229, 138, 196, 0.45); background: rgba(172, 80, 143, 0.14);
  font-family: var(--mono); font-size: 0.76rem; color: var(--accent-text); white-space: nowrap; transition: opacity .3s; }
.unread.is-zero { opacity: .45; }
.unread.bump { animation: bump .4s ease-out; }
.phone-cap { margin: 4px 0 0; text-align: center; font-size: 0.78rem; color: var(--text-2); }

/* ------------------------------------------------------------ v2.1: opener visuals */

.op-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .op-split { grid-template-columns: 1.1fr 0.9fr; gap: 56px; } }
.op-art { display: none; }
@media (min-width: 1000px) { .op-art { display: grid; place-items: center; min-height: 300px; } }
.op-tiles { display: grid; grid-template-columns: repeat(4, 64px); gap: 16px; }
.op-tile { animation: floatY 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.55s); }
.op-tile .tile { width: 64px; height: 64px; animation: tileGlow 12s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1s); }
.op-tile .tile .ic { width: 28px; height: 28px; }
.op-orbit { width: min(100%, 360px); }
.orbit-core img { width: 74%; height: auto; }
.op-chain { display: grid; justify-items: center; }
.op-node { position: relative; }
.op-node .tile { width: 64px; height: 64px; animation: okPop .55s cubic-bezier(.3, 1.6, .5, 1) both, tileGlow 9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 180ms + .3s), calc(var(--i, 0) * 3s + 1s); }
.op-node .tile .ic { width: 28px; height: 28px; }
.op-n { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 0.85rem; color: var(--accent-text); }
.op-link { position: relative; width: 2px; height: 52px; margin: 8px 0; background: linear-gradient(var(--glow-blue), var(--accent)); opacity: .7; }
.op-dot { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 2px var(--accent-text); animation: opDot 2.4s ease-in-out infinite; }
.op-link + .op-node + .op-link .op-dot { animation-delay: 1.2s; }
@keyframes opDot { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* v2.8: the about opener, the "d" out for a stroll on its own two feet (build.py art_dino). It stays put while
   the world passes. One stride is 1.2 s: the back foot rises onto its toe in the first half and the front foot
   lifts its toe in the second, each turning 6 degrees about its pivot and back, and the mark rises a little as
   each foot lifts. A foot's sole sits 177 to 187 mark units under its pivot, so a 6 degree turn carries it about
   3.1 px (times DINO_S): 6.3 px a stride, 5.2 px a second, which is why the near ground scrolls its 300 px tile in
   57.4 s and the far plane at half that speed. Reduced motion leaves the base state: the whole mark, standing. */
.op-art-all { display: grid; place-items: center; }
@media (min-width: 1000px) { .op-art-all { min-height: 300px; } }
.dino-walk { width: min(100%, 520px); }
.dw { display: block; width: 100%; height: auto; overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.dw-fill { fill: rgba(9, 15, 44, 0.94); }
.dw-core { fill: #fff; }
.dw-line { fill: none; stroke: #fff; stroke-width: 1.6; opacity: .9; }
.dw-glow { fill: none; stroke: url(#dw-gl); stroke-width: 5; filter: url(#dw-s); }
.dw-near path { fill: none; stroke: #DDE3FA; stroke-width: 1.6; stroke-linecap: round; }
.dw-near .dw-speck { stroke: #8FB2F0; stroke-width: 1.4; opacity: .7; }
.dw-horizon { fill: none; stroke: #4976B1; stroke-width: 1; stroke-dasharray: 2 7; opacity: .55; }
.dw-cactus path { fill: none; stroke: #8FB2F0; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.dw-far-run { opacity: .7; }
.dw-cloud path { fill: none; stroke: #8FB2F0; stroke-width: 1.5; stroke-linejoin: round; opacity: .55; }
.dw-cloud.c2 path { stroke: #E58AC4; opacity: .4; }
.dw-star { fill: #EEF0FA; opacity: .5; }

/* The feet turn about their pivots (the svg's --bp / --fp, from build.py DINO_FEET) in two nested halves of 3.5
   degrees, 7 in all (Jin 2026-10-02; ground 10% faster to match); a foot's clip and the body's hole for it turn one half, so the seam sits on the bisector,
   where the line and its turned copy meet. The base state is no turn at all. */
.dw-ft { transform-box: view-box; transform-origin: 0 0; animation: dwStepB 1.2s ease-in-out infinite; }
.dw-ft.dw-ff { animation-name: dwStepF; }
@keyframes dwStepB {
  0%, 50%, 100% { transform: var(--bp) rotate(0) var(--bn); }
  25% { transform: var(--bp) rotate(3.5deg) var(--bn); } }
@keyframes dwStepF {
  0%, 50%, 100% { transform: var(--fp) rotate(0) var(--fn); }
  75% { transform: var(--fp) rotate(-3.5deg) var(--fn); } }
.dw-dino { animation: dwBob .6s ease-in-out infinite; }
@keyframes dwBob { 50% { transform: translateY(-.8px); } }
.dw-eye { transform-box: fill-box; transform-origin: center; animation: dwBlink 4.8s infinite; }
@keyframes dwBlink { 0%, 90%, 95%, 100% { transform: scaleY(1); } 92.5% { transform: scaleY(.1); } }
.dw-near { animation: dwRun 52.2s linear infinite; }
@keyframes dwRun { to { transform: translateX(-300px); } }
.dw-far-run { animation: dwFar 313.1s linear infinite; }
@keyframes dwFar { to { transform: translateX(-900px); } }
.dw-cloud { animation: dwCloud 120s linear infinite; }
.dw-cloud.c1 { animation-delay: -50s; }
.dw-cloud.c2 { animation-duration: 190s; animation-delay: -60s; }
@keyframes dwCloud { from { transform: translateX(260px); } to { transform: translateX(-660px); } }
.dw-star { animation: dwTwinkle 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
@keyframes dwTwinkle { 50% { opacity: .12; } }

/* ------------------------------------------------------------ v2.1: /audit, the ad landing page */

.lp-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 22px 0 0; }
.lp-hero { padding-top: 92px; }
.lp-wrap { max-width: 760px; text-align: center; }
.lp-copy h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 18ch; margin: 0 auto 14px; }
.lp-sub { font-size: clamp(1.2rem, 2.3vw, 1.45rem); font-weight: 600; margin: 0 0 10px; }
.lp-copy .lede { margin: 0 auto 32px; }
.quiz { position: relative; overflow: hidden; isolation: isolate; max-width: 620px; margin: 0 auto; padding: 24px 18px; text-align: left;
  border-color: rgba(229, 138, 196, 0.22); animation: heroUp .9s .2s cubic-bezier(.2, .7, .2, 1) both; }
@media (min-width: 768px) { .quiz { padding: 34px 40px; } }
.quiz-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 240px at 50% -12%, rgba(172, 80, 143, 0.3), transparent 70%); animation: auraSoft 6s ease-in-out infinite; }
.q-head { margin-bottom: 24px; }
.q-count { margin: 0 0 10px; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--accent-text); }
.q-bar { height: 6px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.q-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--glow-blue), var(--accent-text));
  box-shadow: 0 0 12px rgba(229, 138, 196, 0.6); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.q-step + .q-step { margin-top: 32px; }
.js .q-step + .q-step { margin-top: 0; }
.js .q-step:not(.on), .q-result:not(.on) { display: none; }
.q-step.enter { animation: qIn .45s cubic-bezier(.2, .7, .2, 1) both; }
.q-step.enter-back { animation: qInBack .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes qIn { from { opacity: 0; transform: translateX(28px); } }
@keyframes qInBack { from { opacity: 0; transform: translateX(-28px); } }
.q-q { font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin: 0 0 8px; }
.q-q:focus { outline: none; }
.q-help { color: var(--text-2); margin: 0 0 20px; font-size: 0.95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 44px; padding: 8px 16px; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04);
  color: var(--text); font: inherit; font-size: 0.94rem; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s, transform .15s; }
.chip:hover { border-color: rgba(229, 138, 196, 0.55); background: rgba(229, 138, 196, 0.08); }
.chip:active { transform: scale(.98); }
@media (max-width: 599px) {
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chip { border-radius: var(--radius-in); padding: 8px 12px; font-size: 0.88rem; }
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 24px -10px rgba(172, 80, 143, 0.9); }
.q-step.on .chip { animation: chipIn .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes chipIn { from { opacity: 0; transform: translateY(8px); } }
.stepper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 10px; }
.q-pm { min-height: 64px; border-radius: var(--radius-in); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04);
  color: var(--text); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: border-color .2s, background .2s, transform .1s; }
.q-pm:hover { border-color: rgba(229, 138, 196, 0.55); background: rgba(229, 138, 196, 0.08); }
.q-pm:active { transform: scale(.95); }
.q-field { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 0 16px; border-radius: var(--radius-in);
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(7, 12, 36, 0.75); transition: border-color .2s, box-shadow .2s; }
.q-field:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(229, 138, 196, 0.22); }
.q-field input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--text);
  font-family: var(--mono); font-size: 1.6rem; font-weight: 600; -moz-appearance: textfield; }
.q-field input::-webkit-outer-spin-button, .q-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.q-pre { font-family: var(--mono); font-size: 1.4rem; color: var(--text-2); }
.q-unit { color: var(--text-2); font-size: 0.9rem; white-space: nowrap; }
.q-msg { min-height: 1.45em; margin: 12px 0 0; color: var(--accent-text); font-size: 0.9rem; }
.q-msg:not(:empty) { animation: chipIn .3s ease-out both; }
.q-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.q-nav .q-next, .q-nav .q-again { margin-left: auto; }
.q-nav [hidden] { display: none; }
.q-nav button[disabled] { opacity: .45; cursor: not-allowed; }
html:not(.js) .q-nav { display: none; }
.q-out { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 12px; }
.q-out li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius-in);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-line); }
.q-result.on .q-out li { animation: chipIn .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 150ms + .1s); }
.q-out p { margin: 0; color: var(--text-2); }
.q-num { margin-right: 4px; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.q-note { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; color: var(--text-2); font-size: 0.9rem; }
.q-note .ic { color: #5BD69B; }
.q-cta { padding-top: 22px; border-top: 1px solid var(--line); }
.q-cta h3 { font-size: 1.3rem; margin: 0 0 6px; }
.q-cta p { color: var(--text-2); margin: 0 0 18px; }
.lp-points { list-style: none; max-width: 620px; margin: 28px auto 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.lp-points li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); }
.lp-points .ic { color: #5BD69B; margin-top: 5px; }
.lp-badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; padding: 0; }
.lp-badges li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--pill); border: 1px solid rgba(229, 138, 196, 0.32);
  background: rgba(172, 80, 143, 0.1); font-family: var(--mono); font-size: 0.8rem; color: var(--accent-text); }
.lp-foot { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: 40px 0 32px; text-align: center; color: var(--text-2);
  background: linear-gradient(180deg, rgba(7, 12, 36, 0.2), rgba(7, 12, 36, 0.85)); }
.lp-foot .ctas { justify-content: center; margin-bottom: 22px; }
.lp-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; font-size: 0.86rem; }

/* ------------------------------------------------------------ v2.2: /login */

.login { padding-bottom: 88px; }
.login-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .login-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.login-copy h1 { max-width: 14ch; }
.login-go { display: grid; justify-items: start; gap: 12px; margin-bottom: 28px; }
.login-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-2); font-size: 0.9rem; }
.login-note .ic { color: #5BD69B; }
.login-new { padding: 24px; margin-bottom: 18px; }
.login-new h2 { font-size: 1.2rem; margin: 0 0 6px; }
.login-new p { color: var(--text-2); margin: 0 0 16px; }
.login-missing { margin: 0; color: var(--text-2); font-size: 0.93rem; }
.login-missing a { color: var(--accent-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.login-fig { margin: 0; min-width: 0; animation: heroUp .9s .2s cubic-bezier(.2, .7, .2, 1) both; }
/* v2.5: the hero card's panel, header and rows (SPEC.md, "One software UI everywhere") */
.acct { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 22px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(9, 14, 42, 0.94), rgba(8, 12, 36, 0.97)); border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px -40px rgba(0, 0, 0, 0.85), 0 0 80px -30px rgba(172, 80, 143, 0.45); }
.acct::before { content: ""; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(73, 118, 177, 0.28), transparent 65%); }
.acct > * { position: relative; }
.acct-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.acct-top p { margin: 0; line-height: 1.3; }
.acct-top strong { display: block; }
.acct-top small { font-family: var(--mono); font-size: 0.74rem; color: var(--text-2); }
.acct-on { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.76rem; color: var(--text-2); }
.acct-on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5BD69B; animation: greenPulse 2.4s infinite; }
@keyframes greenPulse { 0% { box-shadow: 0 0 0 0 rgba(91, 214, 155, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(91, 214, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 214, 155, 0); } }
.acct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.astat { padding: 14px 12px; border-radius: var(--radius-in); background: rgba(255, 255, 255, 0.035); border: 1px solid var(--glass-line);
  animation: acctIn .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 120ms + .4s); }
.astat .v { display: block; font-family: var(--mono); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.astat .l { display: block; font-size: 0.78rem; line-height: 1.3; color: var(--text-2); }
@keyframes acctIn { from { opacity: 0; transform: translateY(10px); } }
.acct-trend { padding: 14px 14px 12px; border-radius: var(--radius-in); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--glass-line); }
.acct-label { margin: 0 0 8px; font-family: var(--mono); font-size: 0.74rem; color: var(--accent-text); }
.tr-box { position: relative; }
.tr-box svg { width: 100%; height: auto; overflow: visible; }
.tr-line { fill: none; stroke: #E58AC4; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; animation: trDraw 1.8s .7s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes trDraw { from { stroke-dashoffset: 1; } }
.tr-area { animation: fadeOnly .9s 1.6s both; }
@keyframes fadeOnly { from { opacity: 0; } }
.tr-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #E58AC4;
  animation: fadeOnly .4s 2.4s both, livePulse 2.4s 2.8s infinite; }
.acct-live { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-in);
  background: rgba(91, 214, 155, 0.07); border: 1px solid rgba(91, 214, 155, 0.25); animation: acctIn .6s 1.2s both; }
.acct-check { width: 36px; height: 36px; flex: none; }
.acct-check circle, .acct-check path { fill: none; stroke: #5BD69B; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.acct-check circle { transform: rotate(-90deg); transform-origin: center; transform-box: fill-box; animation: trDraw .7s 1.4s ease-out both; }
.acct-check path { animation: trDraw .45s 1.95s ease-out both; }
.acct-live p { margin: 0; line-height: 1.35; }
.acct-live strong { display: block; color: #5BD69B; }
.acct-live span { color: var(--text-2); font-size: 0.88rem; }
.acct-rows .ur:last-child > .ur-in { padding-bottom: 0; }
.login-fig figcaption { margin-top: 12px; text-align: center; color: var(--text-2); font-size: 0.86rem; }

/* ------------------------------------------------------------ v2.2: /contact */

.contact-grid { display: grid; gap: 36px; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; } }
.contact-copy h1 { max-width: 12ch; }
.ccards { display: grid; gap: 14px; }
@media (min-width: 640px) { .ccards { grid-template-columns: 1fr 1fr; } .ccard-book { grid-column: 1 / -1; } }
.ccard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px;
  color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
a.ccard:hover { border-color: rgba(229, 138, 196, 0.45); transform: translateY(-2px); }
.ccard h2 { font-size: 1.1rem; margin: 4px 0 6px; }
.ccard p { margin: 0 0 14px; color: var(--text-2); }
.ccard .cval { margin: 0; color: var(--text); font-family: var(--mono); font-size: 0.95rem; overflow-wrap: anywhere; }
.ccard address.cval { display: grid; font-family: inherit; font-style: normal; color: var(--text-2); }
.ccard address.cval strong { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------ v2.2: /faq */

.tile.xs { width: 30px; height: 30px; border-radius: 8px; }
.tile.xs .ic { width: 16px; height: 16px; }
.jump { padding: 18px; }
.jump-h { margin: 0 0 10px; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border-radius: var(--pill);
  border: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.03); color: var(--text-2); text-decoration: none;
  font-size: 0.88rem; font-weight: 600; line-height: 1.3; transition: color .15s, border-color .15s, background .15s; }
.jump a:hover { color: var(--text); border-color: rgba(229, 138, 196, 0.45); }
@media (max-width: 999px) { .jump .tile { display: none; } .jump a { padding: 4px 14px; } }
@media (min-width: 1000px) {
  .jump ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .jump a { border-radius: var(--radius-in); border-color: transparent; background: none; }
  .jump a:hover { background: rgba(255, 255, 255, 0.05); border-color: transparent; }
}
.faq-groups { padding-bottom: 32px; }
.faq-group { padding: 28px 0; scroll-margin-top: 72px; }
@media (min-width: 768px) { .faq-group { padding: 40px 0; } }
.fg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; }
.fg-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.fg-head .link { min-height: 44px; font-size: 0.92rem; }

/* ------------------------------------------------------------ v2.2: /terms, /privacy, /security */

.legal-head .wrap > * { animation-name: fadeOnly; }
.legal-head .mesh span, .legal-head .badge-dot { animation: none; }
.legal-head h1 { max-width: none; }
.legal-date { margin: 0; font-family: var(--mono); font-size: 0.85rem; color: var(--text-2); }
.legal-docs { display: none; }
@media (min-width: 1000px) { .legal-docs { display: grid; gap: 4px; justify-self: end; width: 300px; padding: 12px; } }
.legal-docs a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-in);
  color: var(--text-2); text-decoration: none; font-weight: 600; transition: background .15s, color .15s; }
.legal-docs a:hover, .legal-docs a[aria-current] { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.legal-sec { padding: 0 0 96px; }
.legal-grid { display: grid; gap: 24px; }
@media (min-width: 1000px) {
  .legal-grid { grid-template-columns: 260px minmax(0, 72ch); gap: 64px; align-items: start; }
  .toc { position: sticky; top: 92px; }
  .toc-box { max-height: calc(100vh - 116px); overflow: auto; }
}
.toc-box { padding: 4px 8px; }
.toc-box summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 10px;
  cursor: pointer; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.toc-box summary::-webkit-details-marker { display: none; }
.toc-box[open] .chev { transform: rotate(180deg); }
.toc-box ol { list-style: none; margin: 0; padding: 0 0 8px; display: grid; }
.toc-box a { display: block; padding: 11px 10px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 0.9rem; line-height: 1.35;
  transition: background .15s, color .15s; }
@media (min-width: 1000px) { .toc-box a { padding: 6px 10px; } }
.toc-box a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.legal { min-width: 0; max-width: 72ch; animation: fadeOnly .7s ease-out both; }
.legal-intro { font-size: 1.08rem; }
.legal section { scroll-margin-top: 92px; }
.legal h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 40px 0 14px; }
.legal h3 { font-size: 1.08rem; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--text-2); }
.legal .legal-intro { color: var(--text); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 1.25em; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--accent-text); }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--accent-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-contact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; margin-top: 48px; padding: 26px; }
.legal-contact h2 { margin: 4px 0 6px; font-size: 1.25rem; }
.legal-contact p { margin: 0 0 10px; }
.legal-contact address { display: grid; justify-items: start; font-style: normal; color: var(--text-2); }
.legal-contact address strong { color: var(--text); }
.legal-contact address a { display: inline-flex; align-items: center; min-height: 36px; }

/* ------------------------------------------------------------ v2.2: /audit's legal links */

.lp-links { margin-top: 8px; }
.lp-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
.lp-links a:hover { color: var(--text); }

/* ------------------------------------------------------------ v2.6: an industry's system (SPEC.md, "Industry systems")
   The hero card is the home hero card playing the industry's own inbox (site.js, data-pace). Then the
   bundle as a stack of workflow cards on one line that draws down, card by card, into the system's name,
   and the four-step flow as numbered nodes on a line that draws across. The HTML is the drawn state. */

.ur-tag.cust { color: #CDBDFF; background: rgba(140, 112, 240, 0.16); border-color: rgba(176, 156, 255, 0.45); }
.js .hero-sys .hcard:not(.is-in) { opacity: 0; transform: translateY(18px); }
.sys-card { width: 100%; max-width: 560px; justify-self: center; }

.sys-split { display: grid; gap: 36px; }
@media (min-width: 960px) { .sys-split { grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; } .sys-copy { position: sticky; top: 110px; } }
.sys-copy .lede { margin: 0; }
.stk { --x: 40px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
/* The line runs from the first card's tile to the hub; a packet rides it once it has drawn */
.stk::before { content: ""; position: absolute; left: calc(var(--x) - 1px); top: 40px; bottom: 32px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--glow-blue), var(--accent) 70%, var(--accent-text)); transform-origin: top; }
.stk::after { content: ""; position: absolute; left: calc(var(--x) - 4px); top: 40px; width: 8px; height: 8px; border-radius: 50%; opacity: 0;
  background: #fff; box-shadow: 0 0 10px 3px rgba(229, 138, 196, 0.9); }
.js .stk::before { transform: scaleY(0); transition: transform 2.2s cubic-bezier(.45, 0, .25, 1); }
.js .stk.drawn::before { transform: scaleY(1); }
.stk.drawn::after { animation: stkPacket 3.6s 2.6s ease-in-out infinite; }
@keyframes stkPacket { 0% { top: 40px; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 36px); opacity: 0; } }
.stk-row { position: relative; z-index: 1; }
.stk-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 16px; align-items: start; padding: 16px;
  border-radius: var(--radius); text-decoration: none; background: linear-gradient(180deg, rgba(24, 34, 79, 0.96), rgba(16, 24, 62, 0.97));
  border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -36px rgba(0, 0, 0, 0.7);
  transition: border-color .2s, transform .2s; }
.stk-card:hover { border-color: rgba(229, 138, 196, 0.45); transform: translateX(3px); }
.stk-body { display: grid; gap: 4px; min-width: 0; }
.stk-body strong { font-weight: 650; font-size: 1.05rem; line-height: 1.3; }
.stk-body span { color: var(--text-2); font-size: 0.94rem; line-height: 1.45; }
.stk-card .go { margin-top: 15px; }
/* As the line reaches each card its tile lights, then the hub at the end */
.js .stk.drawn .stk-row .tile { animation: stkLit 1.4s ease-out backwards; animation-delay: calc(.25s + var(--i, 0) * 2.2s / (var(--n, 4) + 1)); }
@keyframes stkLit { 0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } 25% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 30px 6px rgba(229, 138, 196, 0.6); border-color: rgba(229, 138, 196, 0.85); } }
.stk-end { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 6px 0 0 calc(var(--x) - 32px); }
.stk-hub { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #1C2A66, #0C1438 70%); border: 1.5px solid rgba(229, 138, 196, 0.7);
  box-shadow: 0 0 0 6px rgba(172, 80, 143, 0.12), 0 0 46px rgba(172, 80, 143, 0.55); }
.stk-hub img { width: 40px; height: 40px; }
.stk-hub::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid rgba(229, 138, 196, 0.7); animation: ringOut 2.8s ease-out infinite; }
.stk-name { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.js .stk.drawn .stk-hub { animation: hubOn .7s 2.2s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.js .stk.drawn .stk-name { animation: heroUp .6s 2.35s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes hubOn { from { transform: scale(.3); opacity: 0; box-shadow: none; } }

.flow-sec { padding-bottom: 72px; }
@media (min-width: 768px) { .flow-sec { padding-bottom: 104px; } }
.flow { --g: 24px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
/* On a phone the steps stack and each draws its own segment down to the next node; from 900px one line
   runs across all four */
.fl-step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: -52px; width: 2px;
  background: linear-gradient(var(--glow-blue), var(--accent)); transform-origin: top; }
.js .fl-step:not(:last-child)::before { transform: scaleY(0); transition: transform .6s cubic-bezier(.4, 0, .2, 1); transition-delay: calc(.2s + var(--i, 0) * .45s); }
.js .flow.drawn .fl-step::before { transform: none; }
.fl-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; }
.fl-n { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: 1.05rem; color: #fff;
  background: linear-gradient(145deg, rgba(73, 118, 177, 0.9), rgba(172, 80, 143, 0.9)); border: 1px solid rgba(229, 138, 196, 0.6);
  box-shadow: 0 0 0 6px var(--ground), 0 0 28px -4px rgba(172, 80, 143, 0.7); }
.fl-step h3 { margin: 10px 0 6px; }
.fl-step p { margin: 0; color: var(--text-2); }
.js .flow.drawn .fl-n { animation: numPop .55s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(.2s + var(--i, 0) * .45s); }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
  .fl-step:not(:last-child)::before { display: none; }
  .flow::before { content: ""; position: absolute; left: calc((100% - 3 * var(--g)) / 8); right: calc((100% - 3 * var(--g)) / 8); top: 23px; height: 2px;
    background: linear-gradient(90deg, var(--glow-blue), var(--accent)); transform-origin: left; }
  .js .flow::before { transform: scaleX(0); transition: transform 1.8s cubic-bezier(.4, 0, .2, 1); }
  .js .flow.drawn::before { transform: none; }
  .fl-step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 4px; }
  .fl-step p { max-width: 28ch; }
}

/* ------------------------------------------------------------ v2.6: twelve workflows on home: the "all" tile spans the row */

.wtile-all { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; }

/* ------------------------------------------------------------ reveal on scroll and scene play state */

.js .reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(min(var(--i, 0), 6) * 70ms); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(18px); }
.js [data-scene]:not(.playing) svg *, .js .step:not(.in) .step-art * { animation-play-state: paused !important; }

/* Reduced motion: every animation and transition stops; everything is shown in its final state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .js .reveal:not(.in), .js .day p { opacity: 1; transform: none; }
  .js .hsteps::before { transform: none; }
  .gl-sheen, .sys-packet, .sa-packet, .op-dot, .tm-spark { display: none; }
  .press-track { transform: none; }
  .tm-coin { opacity: 1; }
  .ur.ur-enter, .ur.is-collapse { grid-template-rows: 1fr; opacity: 1; }
  .ur.ur-enter .ur-card { transform: none; }
  .js .hero-23 .hcard, .js .hero-sys .hcard { opacity: 1; transform: none; }
  .js .stk::before, .js .flow::before, .js .fl-step::before { transform: none; }
  .stk::after { display: none; }
}

/* Jin 2026-10-03: press logos and reviews are illustrative; the note sits beside them and in every footer. */
.illus-note { margin: 10px 0 0; font-size: .78rem; color: var(--text-2); text-align: center; opacity: .85; }
.fan-wrap .illus-note { margin-top: 18px; }
.foot-note { margin: 0 0 14px; font-size: .8rem; color: var(--text-2); }