html{color-scheme:light}
/* RepLegend site: Apple-light with aurora accents (2026-10-17), matching the Aurora logo. System fonts only, no external requests. */
:root{
  --bg:#fbfbfd;--bg2:#ffffff;--fg:#1d1d1f;--muted:#6e6e73;--line:#d2d2d7;--card:#ffffff;
  --accent:#1d1d1f;--focus:#6d4aff;--err:#d70015;--btn:#1d1d1f;--btn-hover:#3a3a3d;--btn-fg:#ffffff;--ok:#1d1d1f;
  --cyan:#7dd3fc;--violet:#c084fc;--deep:#3b2a8f;--aurora:linear-gradient(90deg,#7dd3fc,#c084fc);--wash:1;
  --radius:12px;--radius-lg:24px;--nav-h:52px;
  /* hero wash: violet + cyan from the top, a faint deep glow that fades out before the bottom edge (no seam into the next band) */
  /* two layers: A = violet + deep glow, B = cyan */
  --wash-a:radial-gradient(ellipse 60% 45% at 35% 0%,color-mix(in oklab,var(--violet) calc(30% * var(--wash)),transparent),transparent 70%),radial-gradient(ellipse 70% 28% at 50% 72%,color-mix(in oklab,var(--deep) calc(7% * var(--wash)),transparent),transparent 75%);
  --wash-b:radial-gradient(ellipse 55% 40% at 68% 6%,color-mix(in oklab,var(--cyan) calc(32% * var(--wash)),transparent),transparent 70%);
  --hero-wash:var(--wash-a),var(--wash-b);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
/* Always light (2026-10-17): the OS dark theme used to flip the whole page to black, which read as broken next to the
   approved light aurora design. Only the demo band (.aurora) is dark, by design. */
/* hero: light, with a soft aurora wash behind the headline (pure CSS) */
.hero{position:relative;isolation:isolate;background:var(--bg);color:var(--fg)}
.hero::before,.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero::before{background-image:var(--wash-a)}
.hero::after{background-image:var(--wash-b)}
/* the one deliberate dark moment: the demo band, a deep-aurora glow from below */
.aurora{--bg:#08080b;--bg2:#121216;--fg:#f5f5f7;--muted:#a1a1a6;--line:#3a3a40;--card:#121216;--accent:#f5f5f7;--btn:#f5f5f7;--btn-hover:#ffffff;--btn-fg:#1d1d1f;--focus:#9d85ff;--err:#ff6b78;color-scheme:dark}
.aurora{position:relative;isolation:isolate;overflow:hidden;background:#08080b;color:var(--fg)}
.aurora::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform-origin:50% 100%;background:radial-gradient(ellipse 70% 55% at 50% 100%,rgba(124,92,255,.32),rgba(59,42,143,.18) 45%,transparent 75%)}
.u{background:var(--aurora) no-repeat 0 92%/100% clamp(6px,.1em,8px);padding-bottom:.04em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.47 var(--font);-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in srgb,var(--violet) 35%,transparent)}
img,svg{max-width:100%}
a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.2em}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:where(a:not(.btn),summary):focus-visible{border-radius:6px}
h1,h2,h3,h4{font-weight:600;margin:0;text-wrap:balance}
p,li{text-wrap:pretty}
.wrap{max-width:1024px;margin:0 auto;padding:0 16px}
.narrow{max-width:640px;margin:0 auto}

/* nav: translucent, solid fallback */
.top{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
  /* over the hero (script sets .over-hero) the bar stays airy; past it, the solid-er bar above returns */
  .top.over-hero{background:color-mix(in srgb,var(--bg) 40%,transparent);border-bottom-color:transparent}
}
.top:has(nav.open){background:var(--bg)}
@media (prefers-reduced-transparency:reduce){.top,.top.over-hero{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--nav-h);position:relative}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--fg)}
.brand,.brand:hover{text-decoration:none}
.brand-rep{font-weight:400;margin-right:-8px}/* cancels the flex gap between the two text runs */
.brand img,.brand .mark{width:28px;height:28px;flex:none}
.mark polygon{transform-box:fill-box}
nav{display:flex;align-items:center;gap:24px}
nav a:not(.btn){text-decoration:none;min-height:44px;display:inline-flex;align-items:center;color:var(--fg);opacity:.8;font-size:14px}
nav a:not(.btn):hover{opacity:1;text-decoration:none}
nav .btn{position:relative;min-height:32px;padding:4px 14px;font-size:14px}
nav .btn::before{content:"";position:absolute;inset:-6px 0}/* 44px target, compact pill */
.navbtn{display:none;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--fg);font:500 15px var(--font);cursor:pointer}
.navbtn:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
@media (max-width:719px){
  .navbtn{display:block}
  nav{display:none;position:absolute;top:100%;left:-16px;right:-16px;flex-direction:column;align-items:stretch;gap:0;padding:8px 32px 24px;background:var(--bg);border-bottom:1px solid var(--line)}
  nav.open{display:flex}
  nav a:not(.btn){font-size:21px;font-weight:600;opacity:1;border-bottom:1px solid var(--line)}
  nav .btn{margin-top:16px;min-height:44px;font-size:17px}
}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 24px;border:0;border-radius:999px;background:var(--btn);color:var(--btn-fg);font:500 17px/1.2 var(--font);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--btn-hover);text-decoration:none}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--btn);color:var(--btn-fg)}
.more{text-decoration:none;color:var(--fg);display:inline-flex;align-items:center;min-height:44px;font-size:19px}
.more:hover{text-decoration:underline}
.more::after{content:"";width:.42em;height:.42em;margin-left:.4em;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 32px}

/* section rhythm: one idea per band, centred headline, generous air */
section{padding:112px 0;scroll-margin-top:var(--nav-h)}
main{scroll-margin-top:var(--nav-h)}
.alt{background:var(--bg2)}
h2{font-size:clamp(40px,6vw,64px);line-height:1.06;letter-spacing:-.03em;text-align:center;max-width:16em;margin:0 auto 20px}
.lead{font-size:clamp(19px,2.2vw,24px);line-height:1.35;color:var(--muted);text-align:center;max-width:32em;margin:0 auto 56px;font-weight:500}

/* hero */
.hero{padding:96px 0 0;text-align:center;overflow:hidden}
.hero h1{font-size:clamp(44px,8vw,80px);line-height:1.04;letter-spacing:-.04em;max-width:13em;margin:0 auto 20px}
.hero .lead{color:var(--muted);margin-bottom:32px}
.hero .ctas{margin-bottom:72px}
.device{margin:0 auto;max-width:920px;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:28px}
.device img,.device video{display:block;width:100%;height:auto;border-radius:17px}/* 28 - 1 - 10 */
.hero .device{border-bottom:0;border-radius:28px 28px 0 0;padding-bottom:0}
.hero .device video{aspect-ratio:16/10;object-fit:cover;border-radius:17px 17px 0 0}

/* problem strip */
.strip{padding:72px 0;border-bottom:1px solid var(--line)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center}
.grid3 p{margin:0;color:var(--muted);font-size:17px}
.strip p strong{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--fg);margin:0 0 6px}

/* features: 3 + 2 large cards */
.cards{display:grid;grid-template-columns:1fr;gap:20px}
.cards article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px 28px}
.cards h3{font-size:26px;letter-spacing:-.025em;line-height:1.14;margin:0 0 12px}
.cards p{margin:0;color:var(--muted);font-size:17px}
@media (hover:hover){.cards article:hover{border-color:color-mix(in srgb,var(--violet) 45%,var(--line))}}
#features .cards article{background:var(--bg2)}
@media (min-width:900px){.cards{grid-template-columns:repeat(6,1fr)}.cards article{grid-column:span 2}.cards article:nth-child(n+4){grid-column:span 3}}

/* how it works */
.steps{position:relative;list-style:none;margin:0 auto;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:960px;text-align:center}
/* hairline joining the three numbers, centre of column 1 to centre of column 3 (gap 40px) */
.steps::before{content:"";position:absolute;top:28px;left:calc((100% - 80px) / 6);right:calc((100% - 80px) / 6);height:1px;background:var(--line);transform-origin:0 50%}
.steps li{position:relative;counter-increment:s;color:var(--muted)}
.steps li::before{content:counter(s);display:block;width:fit-content;margin:0 auto 16px;padding:0 20px;background:var(--bg2);font-size:56px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--fg)}
.steps li strong{display:block;color:var(--fg);font-size:21px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}

/* see it working */
.tabs{position:relative;display:none;flex-wrap:wrap;justify-content:center;gap:4px;margin:0 auto 32px;padding:4px;width:fit-content;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:27px}
.js .tabs{display:flex}
/* the selected pill is one shared shape that site.js moves under the active tab (--x/--y/--w/--h) */
.tabs.pill::before{content:"";position:absolute;top:0;left:0;width:var(--w);height:var(--h);transform:translate(var(--x),var(--y));border-radius:999px;background:var(--fg)}
.tabs button{position:relative;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:500 15px var(--font);white-space:nowrap;cursor:pointer}
.tabs button:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.tabs button:active{transform:scale(.97)}
.tabs button[aria-selected=true]{background:var(--fg);color:var(--bg)}
.tabs.pill button[aria-selected=true]{background:transparent}
.js [role=tabpanel][hidden]{display:none}
.panel{display:grid;gap:32px;margin:0 0 24px;padding:40px 32px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.panel h3{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 14px}
.panel p{margin:0}
.stops{list-style:none;margin:0;padding:0}
.stops li{padding:10px 0;border-bottom:1px solid var(--line)}
.stops time{font:500 15px var(--mono);color:var(--muted);margin-right:10px;font-variant-numeric:tabular-nums}
.report{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:20px;min-width:0}
.report ul{list-style:none;margin:0 0 12px;padding:0}
.report li{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:41px;padding:8px 0;border-bottom:1px solid var(--line)}
.rsite{display:flex;flex-direction:column;margin-bottom:8px!important}.rsite span,.rmeta{color:var(--muted);font-size:15px}
.sent{display:flex;align-items:center;gap:8px;margin-top:10px!important;font-weight:600}
.chip{display:inline-block;padding:2px 10px;border-radius:999px;font:600 12px/1.5 var(--font);letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip.ok{background:var(--bg2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.chip.flag{background:var(--fg);color:var(--bg)}
.fine{color:var(--muted);font-size:14px;text-align:center;margin:0 0 112px}
#shots>.wrap>h3{font-size:clamp(32px,4.5vw,48px);letter-spacing:-.03em;text-align:center;margin:0 0 40px}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.shots figure{margin:0}
.shots figure .device{padding:8px;border-radius:24px}
.shots figure img{border-radius:15px}/* 24 - 1 - 8 */
.shots figcaption{padding:16px 4px 0;text-align:center;color:var(--fg);font-size:19px;font-weight:600;letter-spacing:-.01em}
@media (min-width:1000px){.panel{grid-template-columns:repeat(3,1fr)}}

/* trade photos: lead visual in each industry panel, image cards in the trades list */
.trade-photo{margin:0;grid-column:1/-1}
.trade-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);border-radius:18px}
#panel-hvac .trade-photo img{object-position:50% 15%}
#panel-clean .trade-photo img,#panel-chem .trade-photo img{object-position:50% 25%}
@media (min-width:720px){.trade-photo img{aspect-ratio:2/1}}
.trades{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
.trades li{display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.trades img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.trades span{align-self:flex-start;padding:18px 20px 20px;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;background-origin:content-box}
@media (hover:hover){.trades li:hover span{background-size:100% 1.5px}}
.trades a{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
@media (min-width:560px){.trades{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.trades{grid-template-columns:repeat(3,1fr)}}

/* faq */
#faq .wrap>details{max-width:760px;margin:0 auto;border-bottom:1px solid var(--line)}
#faq .wrap>details:first-of-type{border-top:1px solid var(--line)}
summary{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.3;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:14px;height:14px;color:var(--muted);background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat}
summary:hover::after{color:var(--fg)}
details[open] summary::after{background-size:100% 1.5px,1.5px 0}
details p{margin:0;padding:0 0 24px;color:var(--muted);max-width:40em}/* padding, not margin: the open/close height tween measures it */

/* form */
/* demo: form with a narrow column of product facts beside it (under it on a phone) */
.demo-grid{display:grid;gap:28px;max-width:640px;margin:0 auto}
@media (min-width:900px){.demo-grid{max-width:880px;grid-template-columns:minmax(0,1fr) 240px;gap:40px;align-items:center}}
#demo form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
#demo form>*{grid-column:1/-1}
#demo form>label{grid-column:auto;display:block;margin:0 0 18px;font-size:14px;font-weight:600}
#demo form .note{margin:0 0 12px}
#demo form .note summary{width:fit-content;min-height:44px;padding:0 8px;margin:0 -8px;font-size:15px;font-weight:600;color:var(--muted);justify-content:flex-start}
#demo form .note summary:hover{color:var(--fg)}
#demo form .note summary::after{width:11px;height:11px}
#demo form .note label{display:block;margin:4px 0 6px;font-size:14px;font-weight:600}
#demo form .btn{width:100%;margin-top:8px}
#demo .price{margin:14px 0 0;color:var(--muted);font-size:14px;text-align:center;text-wrap:balance}
.trust{list-style:none;margin:0;padding:0;display:grid;gap:14px;color:var(--muted);font-size:15px;line-height:1.4}
.trust li{position:relative;padding-left:28px}
/* check mark: a rotated L in the band's ink inside a 1px ring (no new accent: aurora stays on the logo and .u) */
.trust li::before{content:"";position:absolute;left:0;top:.1em;width:18px;height:18px;border:1px solid var(--line);border-radius:50%}
.trust li::after{content:"";position:absolute;left:7px;top:calc(.1em + 4px);width:4px;height:8px;border:solid var(--fg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
form input,form select,form textarea{display:block;width:100%;min-height:50px;margin-top:6px;padding:12px 14px;font:17px var(--font);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);caret-color:var(--focus)}
form textarea{resize:vertical;min-height:120px}
form input:hover,form select:hover,form textarea:hover{border-color:var(--muted)}
form input:focus-visible,form select:focus-visible,form textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
form input:user-invalid,form select:user-invalid{border-color:var(--err)}
.err{display:none;margin-top:6px;color:var(--err);font-size:14px;font-weight:500}
label:has(:user-invalid) .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
footer{padding:24px 0;border-top:1px solid var(--line);background:var(--bg2);color:var(--muted);font-size:13px}
footer .wrap p{margin:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
footer a{color:var(--fg);min-height:44px;display:inline-flex;align-items:center}

/* thanks page */
.thanks{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 16px;text-align:center;background-color:var(--bg);background-image:var(--hero-wash)}
.thanks main{max-width:560px;width:100%;margin:0}
.thanks h1{font-size:clamp(40px,8vw,64px);letter-spacing:-.04em;line-height:1.05;margin:48px 0 16px}
.thanks p{color:var(--muted);font-size:clamp(19px,2.2vw,21px);line-height:1.4;max-width:24em;margin:0 auto 40px}
.legal{min-height:100vh;min-height:100dvh;padding:32px 16px 64px;background-color:var(--bg)}
.legal main{max-width:640px;margin:0 auto}
.legal h1{font-size:clamp(34px,6vw,52px);letter-spacing:-.035em;line-height:1.06;margin:48px 0 16px}
.legal h2{font-size:22px;letter-spacing:-.02em;line-height:1.2;text-align:left;max-width:none;margin:36px 0 8px}
.legal p{font-size:17px;line-height:1.5;margin:0 0 12px}
.legal .lede{color:var(--muted);font-size:clamp(19px,2.2vw,21px);line-height:1.4}
.legal a:not(.brand){color:var(--fg);text-decoration:underline}

/* small screens */
@media (max-width:719px){
  section{padding:80px 0}
  .hero{padding-top:64px}
  .hero .ctas{margin-bottom:48px}
  .grid3,.steps{grid-template-columns:1fr}
  .steps::before{display:none}
  .strip{padding:48px 0}
  .cards article,.panel{padding:28px 20px}
  .fine{margin-bottom:80px}
}
@media (max-width:559px){#demo form{grid-template-columns:1fr;padding:20px}#demo form>label{grid-column:1/-1}}

/* trade pages */
.trade-hero h1{font-size:clamp(40px,6vw,64px);line-height:1.06;letter-spacing:-.03em;max-width:16em}
.crumbs{margin:0 0 16px;font-size:14px;color:var(--muted)}
.crumbs a{color:inherit}
#visit .fine{margin-bottom:0}
.trade-cta .ctas{margin:0}

/* motion: everything below runs only when motion is welcome. Content is visible by default:
   without script or with reduced motion the page is static and complete. Script adds .reveal/.draw
   to below-the-fold content and removes them (with will-change) once the transition has settled. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes rise-device{from{opacity:.2;transform:translateY(48px)}}/* never from 0: the screenshot is the LCP */
@keyframes draw{from{background-size:0 clamp(6px,.1em,8px)}}
@keyframes breathe{to{transform:scale(1.08);opacity:.72}}
@keyframes fade{from{opacity:0}}
@keyframes row{from{opacity:0;transform:translateY(6px)}}
@keyframes pop{from{opacity:0;transform:scale(.8)}}
@keyframes mark-in{from{opacity:0;transform:scale(.7)}}
@media (prefers-reduced-motion:no-preference){
  .btn,.tabs button{transition:background-color .2s,color .2s,box-shadow .25s,transform .2s var(--ease)}
  .top{transition:background-color .3s,border-color .3s}

  /* hero: one entrance. The wash is static: the drifting full-bleed gradient layers stalled Chrome's renderer (2026-10-17). */
  .hero h1{animation:rise .5s var(--ease) both}
  .hero .lead{animation:rise .5s var(--ease) .08s both}
  .hero .ctas{animation:rise .5s var(--ease) .16s both}
  .hero .u{animation:draw .7s var(--ease) .45s both}
  .hero .device{animation:rise-device .9s var(--ease) .3s both}
  .aurora::before{animation:breathe 9s ease-in-out infinite alternate paused}
  .aurora.live::before{animation-play-state:running}

  /* logo: the two chevron bands lift in turn on hover */
  .mark polygon{transition:transform .2s var(--ease)}
  .brand:hover .mark polygon{transform:translateY(-4px)}/* 4 of 64 units = under 2px at 28px */
  .brand:hover .mark polygon:last-child{transition-delay:.07s}

  /* scroll reveals: short rise, items that arrive together stagger 70ms apart (--i from script) */
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease) calc(var(--i,0) * 70ms),transform .55s var(--ease) calc(var(--i,0) * 70ms)}
  .reveal.in{opacity:1;transform:none;will-change:opacity,transform}

  /* how it works: the hairline draws left to right while the numbers pop in on it */
  .steps.draw::before{transform:scaleX(0)}
  .steps.draw.in::before{transform:none;transition:transform .9s cubic-bezier(.4,0,.2,1) .1s}
  .steps li.reveal{transition-delay:calc(var(--i,0) * 250ms)}
  .steps li.reveal::before{opacity:0;transform:scale(.6)}
  .steps li.reveal.in::before{opacity:1;transform:none;transition:opacity .3s calc(var(--i,0) * 250ms + .15s),transform .4s var(--ease) calc(var(--i,0) * 250ms + .15s)}

  /* feature cards and trades: quiet hover feedback */
  .cards article{transition:transform .25s var(--ease),border-color .25s}
  .trades img{transition:transform .5s var(--ease)}
  .trades span{transition:background-size .3s var(--ease)}
  @media (hover:hover){
    .cards article:hover{transform:translateY(-3px)}
    .trades li:hover img{transform:scale(1.03)}
  }
  .cards article:active{transform:translateY(-1px) scale(.995)}

  /* industry tabs: the pill slides, the panel fades in, the example report cascades */
  .tabs.pill.ready::before{transition:transform .35s var(--ease),width .35s var(--ease)}/* width of one absolutely placed pseudo: no sibling reflow */
  .js .panel:not([hidden]){animation:fade .2s ease-out}
  .js .panel:not([hidden]) .report li,.js .panel:not([hidden]) .report .rmeta,.js .panel:not([hidden]) .report .sent{animation:row .32s var(--ease) calc(80ms + var(--d,0) * 45ms) both}
  .js .panel:not([hidden]) .report .chip{animation:pop .3s var(--ease) calc(160ms + var(--d,0) * 45ms) both}
  .report li:nth-child(2){--d:1}.report li:nth-child(3){--d:2}.report li:nth-child(4){--d:3}.report li:nth-child(5){--d:4}.report .rmeta{--d:5}.report .sent{--d:6}

  /* faq: the native <details> toggle, with its height tweened where the browser can (Chromium); elsewhere it opens instantly */
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--ease),content-visibility .3s allow-discrete}
  details[open]::details-content{block-size:auto}
  summary::after{transition:background-size .25s var(--ease)}

  /* demo band: submit button glows inside the dark band */
  .aurora .btn:hover,.aurora .btn:focus-visible{box-shadow:0 8px 28px -6px rgba(124,92,255,.7)}/* asked for in the brief: the band's own light, offset below the pill */

  /* thanks page: the mark settles in once */
  .thanks .brand img{animation:mark-in .6s var(--ease) .1s both}
}
@media print{.reveal{opacity:1;transform:none}}