/* 4uchet.by. One page, no script: everything that moves is CSS, and the page
   asks for nothing but its own files (the policy in infra/by/Caddyfile).
   The colours, the 4px corner and the corner brackets are the product's own
   (src/app/editions.css); the face is Manrope, the app's face in 4uchet. */

/* ---- Manrope (Google Fonts, SIL Open Font License, fonts/OFL.txt) ---- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ---- */
:root {
  --page: #fafafa;
  --panel: #ffffff;
  --chrome: #f5f6f6;
  --sunk: #f2f3f4;
  --ink: #101112;
  --ink-2: #55585c;
  --ink-3: #8e9196;
  --ink-4: #b9bcc0;
  --line: #dcdee1;
  --hair: #eceef0;
  --hair-2: #e3e5e8;
  --orange: #ff6400;
  --orange-hover: #e65a00;
  --orange-tint: #fff1e6;
  --orange-soft: #ffe2cc;
  --orange-ink: #c24b00;
  --green: #12a150;
  --green-tint: #e8f7ee;
  --night: #0f1011;
  --night-2: #1a1b1d;
  --night-line: #2a2c2f;
  --corner: 4px;
  --col: 1280px;
  --pad: 32px;
  --band-pad: 96px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --bracket-len: 10px;
  --bracket-w: 1.5px;
  --bracket-color: color-mix(in oklch, var(--ink) 34%, transparent);
  --wm-4: var(--orange);
  --wm-ink: var(--ink);
}

/* ---- Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
  interpolate-size: allow-keywords;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family:
    "Manrope",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
b,
strong {
  font-weight: 600;
}
i,
em {
  font-style: normal;
}
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--corner);
}
::selection {
  background: var(--orange-soft);
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Icons ---- */
.i {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-sm {
  width: 15px;
  height: 15px;
}
.i-xs {
  width: 13px;
  height: 13px;
}

/* ---- The frame: a column with dashed rails, bands split by dashed rules ---- */
.band {
  position: relative;
  border-top: 1px dashed var(--line);
}
.band-first {
  border-top: 0;
}
.frame {
  position: relative;
  width: min(var(--col), calc(100% - 32px));
  margin-inline: auto;
  border-inline: 1px dashed var(--line);
}
/* A small cross where a rail meets a rule, at the top of every band. */
.band > .frame:first-child::before,
.band > .frame:first-child::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  background:
    linear-gradient(var(--ink-4), var(--ink-4)) center / 1px 100% no-repeat,
    linear-gradient(var(--ink-4), var(--ink-4)) center / 100% 1px no-repeat;
  z-index: 2;
}
.band > .frame:first-child::before {
  left: -5px;
}
.band > .frame:first-child::after {
  right: -5px;
}
.band-first > .frame:first-child::before,
.band-first > .frame:first-child::after {
  display: none;
}

/* Corner brackets, the 4uchet signature: four short L marks inside the
   corners of a surface, like the app's trays and dialogs. */
.brackets {
  position: relative;
}
.brackets::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--bracket-w) solid var(--bracket-color);
  border-radius: var(--corner);
  mask: conic-gradient(
      at var(--bracket-len) var(--bracket-len),
      transparent 75%,
      #000 0
    )
    0 0 / calc(100% - var(--bracket-len)) calc(100% - var(--bracket-len));
  transition:
    border-color 200ms var(--ease),
    --bracket-len 300ms var(--ease);
}
@property --bracket-len {
  syntax: "<length>";
  inherits: true;
  initial-value: 10px;
}

/* ---- Type ---- */
.mute {
  color: var(--ink-3);
}
h1,
h2 {
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
h2 .mute {
  display: block;
}
.lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- Buttons and small parts ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--corner);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    transform 160ms var(--ease);
}
.btn .i {
  width: 16px;
  height: 16px;
  transition: transform 220ms var(--ease);
}
.btn:hover .i {
  transform: translateX(3px);
}
.btn:active {
  transform: translateY(1px);
}
.btn-lg {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
}
.btn-block {
  width: 100%;
}
.btn-primary {
  background: var(--orange);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--orange-hover);
}
.btn-ghost {
  background: var(--panel);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair-2);
}
.btn-ghost:hover {
  box-shadow: inset 0 0 0 1px var(--ink-4);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--corner);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.badge .i {
  width: 16px;
  height: 16px;
  color: var(--orange);
}
.badge-hot {
  background: var(--orange-tint);
  color: var(--orange-ink);
  box-shadow: none;
}
.cloud-mini {
  width: 18px;
  height: 18px;
  border-radius: var(--corner);
}
.ws-mark {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}

/* ---- Announcement and header ---- */
.announce {
  background: var(--night);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}
.announce a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 16px;
  text-align: center;
}
.announce-cta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #a7aaae;
  transition: color 160ms var(--ease);
}
.announce a:hover .announce-cta {
  color: #ffffff;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px dashed var(--line);
}
.topbar-in {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
  padding-inline: var(--pad);
  border-inline-color: transparent;
}
.logo {
  display: inline-flex;
  flex: none;
}
.wordmark {
  display: block;
  width: 100px;
  height: auto;
  overflow: visible;
}
/* The wordmark is reused with <use>, whose copy only custom properties
   reach, so each use sets these rather than styling the paths. */
.wm-4 {
  fill: var(--wm-4);
  filter: var(--wm-glow, none);
}
.wm-ink {
  fill: var(--wm-ink);
  stroke: var(--wm-stroke, none);
  stroke-width: var(--wm-stroke-width, 0);
}
.nav {
  display: flex;
  gap: 4px;
  margin-right: auto;
}
.nav a {
  padding: 6px 10px;
  border-radius: var(--corner);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  transition:
    color 160ms var(--ease),
    background-color 160ms var(--ease);
}
.nav a:hover {
  color: var(--ink);
  background: var(--sunk);
}
.topbar-actions {
  display: flex;
  gap: 8px;
}
.subnav {
  display: none;
  border-bottom: 1px dashed var(--line);
}
.subnav-in {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  mask: linear-gradient(90deg, #000 82%, transparent);
}
.subnav-in::-webkit-scrollbar {
  display: none;
}
.subnav a {
  flex: none;
  padding: 6px 10px;
  border-radius: var(--corner);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.subnav a:hover {
  color: var(--ink);
  background: var(--sunk);
}

/* ---- Hero ---- */
.hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: end;
  gap: 48px;
  padding: 104px var(--pad) 80px;
}
.hero-title {
  font-size: clamp(36px, 3.9vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.hero-title .line {
  display: block;
}
@media (min-width: 961px) {
  .hero-title .line {
    white-space: nowrap;
  }
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-facts .i {
  color: var(--orange);
}
.hero-side {
  display: grid;
  gap: 28px;
  padding-bottom: 6px;
  max-width: 480px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- Showcase: tabs over a stage with the product drawn in HTML ---- */
.showcase {
  border-top: 1px dashed var(--line);
}
.tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
  transition: color 200ms var(--ease);
}
.tab + .tab {
  border-left: 1px dashed var(--line);
}
.tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform 360ms var(--ease);
}
.tab:hover {
  color: var(--ink-2);
}
#tab-tasks:checked ~ .tabs [for="tab-tasks"],
#tab-clients:checked ~ .tabs [for="tab-clients"],
#tab-requests:checked ~ .tabs [for="tab-requests"] {
  color: var(--ink);
}
#tab-tasks:checked ~ .tabs [for="tab-tasks"]::after,
#tab-clients:checked ~ .tabs [for="tab-clients"]::after,
#tab-requests:checked ~ .tabs [for="tab-requests"]::after {
  transform: scaleX(1);
}
#tab-tasks:focus-visible ~ .tabs [for="tab-tasks"],
#tab-clients:focus-visible ~ .tabs [for="tab-clients"],
#tab-requests:focus-visible ~ .tabs [for="tab-requests"] {
  outline: 2px solid var(--orange);
  outline-offset: -4px;
}
.stage {
  position: relative;
  display: grid;
  padding: 56px 64px 0;
  border-top: 1px dashed var(--line);
  overflow: hidden;
  background: var(--sunk);
}
/* Ledger paper: a fine grid that fades out towards the edges. */
.stage-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--hair-2) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--hair-2) 1px, transparent 1px) 0 0 / 24px 24px;
  mask: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 80%);
}
/* The window runs on past the band; it fades out instead of ending on a row. */
.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(transparent, var(--sunk));
  pointer-events: none;
  z-index: 1;
}
.panel {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.99);
  transition:
    opacity 420ms var(--ease),
    transform 520ms var(--ease),
    visibility 0s linear 520ms;
}
#tab-tasks:checked ~ .stage .panel-tasks,
#tab-clients:checked ~ .stage .panel-clients,
#tab-requests:checked ~ .stage .panel-requests {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 420ms var(--ease) 80ms,
    transform 520ms var(--ease) 80ms,
    visibility 0s;
}

/* The product window */
.win {
  display: grid;
  grid-template-columns: 236px 1fr;
  height: 640px;
  background: var(--panel);
  border-radius: 6px 6px 0 0;
  box-shadow:
    0 0 0 1px var(--hair-2),
    0 0 0 6px color-mix(in srgb, var(--panel) 60%, transparent),
    0 0 0 7px var(--hair-2);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.win-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 10px;
  background: #fcfcfc;
  border-right: 1px solid var(--hair);
}
.ws {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  font-weight: 600;
  font-size: 14px;
}
.ws .i {
  color: var(--ink-3);
}
.win-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--corner);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  color: var(--ink-3);
}
.kbd {
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--hair-2);
  font-size: 11px;
}
.win-nav {
  display: grid;
  gap: 1px;
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--corner);
  color: var(--ink);
  white-space: nowrap;
}
.nav-row > .i {
  color: var(--ink-2);
}
.nav-row.is-on {
  background: #f0f1f2;
}
.nav-label {
  padding: 12px 8px 4px;
  font-size: 12px;
  color: var(--ink-3);
}
.count {
  margin-left: auto;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--orange);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
}
.tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  color: #ffffff;
}
.tile .i {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}
.t-blue {
  background: linear-gradient(#5b8cff, #3366f0);
}
.t-cyan {
  background: linear-gradient(#5ccfff, #19a7e6);
}
.t-orange {
  background: linear-gradient(#ff8a3d, #ff6400);
}
.t-green {
  background: linear-gradient(#3fd27f, #14a855);
}
.win-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 8px 6px 2px;
  border-top: 1px solid var(--hair);
  color: var(--ink-2);
}
.av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.av-1 {
  background: linear-gradient(135deg, #ff9a5a, #ff6400);
}
.av-2 {
  background: linear-gradient(135deg, #6aa8ff, #3a6ff0);
}
.av-3 {
  background: linear-gradient(135deg, #5ad19a, #1aa765);
}
.win-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.win-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--hair);
  font-size: 14px;
}
.win-head b {
  font-weight: 600;
}
.win-head .dim {
  color: var(--ink-3);
}
.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border-radius: var(--corner);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  background: var(--panel);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
}
.mini-btn .i {
  color: var(--ink-2);
}
.mini-primary {
  margin-left: auto;
  background: var(--orange);
  color: #ffffff;
  box-shadow: none;
}
.mini-primary .i {
  color: #ffffff;
}
.win-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--hair);
}
.grow {
  flex: 1;
}
.win-body {
  padding: 16px 20px;
  overflow: hidden;
}
.tray {
  padding: 4px;
  border-radius: var(--corner);
  background: var(--chrome);
}
.tray-title {
  padding: 6px 10px 8px;
  font-weight: 600;
  font-size: 13px;
}
.tray-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 3px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair);
}
.stat span {
  color: var(--ink-2);
  font-size: 12px;
}
.stat b {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.stat small {
  color: var(--ink-3);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 4px 6px;
  font-weight: 600;
}
.group em {
  color: var(--ink-3);
  font-weight: 500;
}
.rows {
  border-radius: var(--corner);
  box-shadow: 0 0 0 1px var(--hair);
}
.row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1.3fr) minmax(0, 1fr) 92px 22px;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  background: var(--panel);
}
.row + .row {
  border-top: 1px solid var(--hair);
}
.row:first-child {
  border-radius: var(--corner) var(--corner) 0 0;
}
.row:last-child {
  border-radius: 0 0 var(--corner) var(--corner);
}
.r-title,
.r-client {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r-client {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
}
.dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.d-blue {
  background: #3d72f5;
}
.d-green {
  background: #19a764;
}
.d-violet {
  background: #8d5cf6;
}
.d-amber {
  background: #f0a20b;
}
.d-rose {
  background: #f0507a;
}
.d-cyan {
  background: #18a9d6;
}
.d-slate {
  background: #6b7280;
}
.cb {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--ink-4);
  background: var(--panel);
}
.cb .i {
  width: 11px;
  height: 11px;
  stroke-width: 3;
  color: #ffffff;
  opacity: 0;
}
.tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--corner);
  background: var(--sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.tag-hot {
  background: var(--orange-tint);
  color: var(--orange-ink);
}
.tag-wait {
  background: #eef3ff;
  color: #2f5bd3;
}
/* The third task gets done, over and over. */
.row-done .cb {
  animation: tick-box 7s var(--ease) infinite;
}
.row-done .cb .i {
  animation: tick-mark 7s var(--ease) infinite;
}
.row-done .r-title {
  animation: tick-title 7s var(--ease) infinite;
}
@keyframes tick-box {
  0%,
  22% {
    background: var(--panel);
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
    transform: scale(1);
  }
  26% {
    transform: scale(0.82);
  }
  30%,
  86% {
    background: var(--orange);
    box-shadow: inset 0 0 0 1.5px var(--orange);
    transform: scale(1);
  }
  92%,
  100% {
    background: var(--panel);
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
  }
}
@keyframes tick-mark {
  0%,
  26% {
    opacity: 0;
  }
  32%,
  86% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0;
  }
}
@keyframes tick-title {
  0%,
  28% {
    color: var(--ink);
    text-decoration-color: transparent;
  }
  36%,
  86% {
    color: var(--ink-3);
    text-decoration: line-through;
    text-decoration-color: var(--ink-4);
  }
  92%,
  100% {
    color: var(--ink);
    text-decoration-color: transparent;
  }
}

/* Clients */
.clients {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 16px;
  padding: 16px 16px 0 20px;
  min-height: 0;
}
.table {
  position: relative;
  align-self: start;
  border-radius: var(--corner);
  box-shadow: 0 0 0 1px var(--hair);
  background: var(--panel);
}
/* The app's tables carry one orange tick on their top left corner. */
.tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
  border-top-left-radius: var(--corner);
  z-index: 1;
}
.tr {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 0.6fr 0.85fr 0.95fr 0.85fr;
  align-items: center;
  height: 40px;
  border-top: 1px solid var(--hair);
}
.tr > span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th {
  height: 36px;
  border-top: 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
}
.tr.is-on {
  background: #fff8f2;
}
.logo-sq {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--corner);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
}
.tr .av {
  width: 18px;
  height: 18px;
  font-size: 8px;
}
.hot {
  color: var(--orange-ink);
  font-weight: 600;
}
.late {
  color: #d23a3a;
  font-weight: 600;
}
.rail {
  align-self: start;
  padding: 14px;
  border-radius: var(--corner);
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair);
}
.rail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.rail-head .logo-sq {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.rail-head b {
  display: block;
  font-weight: 600;
}
.rail-head small {
  color: var(--ink-3);
  font-size: 12px;
}
.props {
  display: grid;
  gap: 2px;
  padding: 10px 0;
}
.props > div {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  min-height: 28px;
}
.props dt {
  color: var(--ink-3);
  font-size: 12px;
}
.props dd {
  display: flex;
  align-items: center;
  gap: 6px;
}
.props .av {
  width: 18px;
  height: 18px;
  font-size: 8px;
}
.pill-ok {
  padding: 1px 7px;
  border-radius: var(--corner);
  background: var(--green-tint);
  color: #0d7a3d;
  font-size: 12px;
  font-weight: 500;
}
.rail-sub {
  padding: 10px 0 6px;
  border-top: 1px solid var(--hair);
  font-weight: 600;
}
.mini-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  color: var(--ink-2);
}
.mini-list em {
  color: var(--ink-3);
}
.mini-list em.hot {
  color: var(--orange-ink);
}

/* Requests (in the showcase). One 14 s story on both screens: on the phone
   a stack of three files is dragged into the portal, uploads, is read and
   lands on the requested items; on the firm's card the same items tick off
   at the same moments, and the accountant closes the request. 1 s is 7.14%. */
.req-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: start;
  gap: 48px;
  height: 640px;
  padding: 28px 48px 0;
}
.req {
  position: relative;
  margin-top: 40px;
  padding: 18px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  font-size: 14px;
}
.req-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.req-head .tile {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}
.req-head .tile .i {
  width: 16px;
  height: 16px;
}
.req-head b {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.req-head small {
  color: var(--ink-3);
  font-size: 13px;
}
.swap {
  display: inline-grid;
}
.swap > * {
  grid-area: 1 / 1;
}
.req-tag {
  margin-left: auto;
  justify-items: end;
}
.tag-ok {
  background: var(--green-tint);
  color: #0d7a3d;
}
.req-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 10px;
  color: var(--ink-3);
  font-size: 13px;
}
.req-count {
  justify-items: end;
  min-width: 112px;
}
.bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--sunk);
  overflow: hidden;
}
.bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: var(--orange);
  transform-origin: left;
  transform: scaleX(0.25);
  animation: rq-bar 14s var(--ease) infinite;
}
.req-items li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 12px;
  height: 48px;
  border-top: 1px solid var(--hair);
}
.req-items em {
  color: var(--ink-3);
  font-size: 13px;
  justify-self: end;
  white-space: nowrap;
}
.req-items .got .cb,
.pb-card .got .cb,
.cl-row.done .cb {
  background: var(--orange);
  box-shadow: inset 0 0 0 1.5px var(--orange);
}
.req-items .got .cb .i,
.pb-card .got .cb .i,
.cl-row.done .cb .i {
  opacity: 1;
}
.req-items .got em,
.req-items .s-b {
  color: var(--ink-2);
}
.req-items .wait {
  color: #2f5bd3;
}
.req-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.req-foot small {
  color: var(--ink-3);
  font-size: 12.5px;
}
.mini-ink {
  background: var(--ink);
  color: #ffffff;
  box-shadow: none;
}
.mini-ink .i,
.mini-done .i {
  color: inherit;
}
.mini-done {
  background: var(--green-tint);
  color: #0d7a3d;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #0d7a3d 20%, transparent);
}
.cur-b {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  animation: rq-cursor-b 14s infinite;
}
.cursor {
  display: block;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}
.cur-b .cursor {
  animation: rq-click 14s infinite;
  transform-origin: 2px 2px;
}

/* The phone: a titanium band, the black glass edge, side buttons, the
   Dynamic Island, the status bar and the home indicator. */
.iphone {
  position: relative;
  width: 290px;
  height: 596px;
  border-radius: 52px;
  background: linear-gradient(
    145deg,
    #e3e4e7 0%,
    #a9acb2 22%,
    #74777d 48%,
    #b9bcc1 74%,
    #eceef0 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    inset 0 0 0 2.5px rgba(0, 0, 0, 0.18);
}
.iphone::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 48px;
  background: #0a0a0b;
}
.ip-btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8d9096, #c9cbcf);
}
.ip-action {
  left: -2px;
  top: 104px;
  height: 26px;
}
.ip-vol-up {
  left: -2px;
  top: 150px;
  height: 46px;
}
.ip-vol-down {
  left: -2px;
  top: 206px;
  height: 46px;
}
.ip-power {
  right: -2px;
  top: 170px;
  height: 74px;
}
.ip-screen {
  position: absolute;
  inset: 11px;
  overflow: hidden;
  border-radius: 41px;
  background: #f6f7f8;
}
/* At this phone's scale (its screen is about 0.68 of an iPhone 15's 393
   points) the status bar is 37px tall, and the time and the icons each sit
   centred in their own side of the island. */
.ip-status {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  align-items: center;
  height: 37px;
  padding-top: 2px;
  font-size: 11.5px;
  color: var(--ink);
}
.ip-status b {
  justify-self: center;
  padding-left: 6px;
}
.ip-status b {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ip-island {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 80px;
  height: 23px;
  margin-left: -40px;
  border-radius: 12px;
  background: #000000;
}
.ip-icons {
  grid-column: 3;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 4px;
}
.ip-signal {
  width: 13px;
  height: 8.5px;
  fill: var(--ink);
}
.ip-wifi {
  width: 12px;
  height: 8.5px;
  fill: var(--ink);
}
.ip-battery {
  position: relative;
  display: block;
  width: 19px;
  height: 9px;
  padding: 1.2px;
  border-radius: 2.8px;
  box-shadow: inset 0 0 0 1px rgba(16, 17, 18, 0.4);
}
.ip-battery::after {
  content: "";
  position: absolute;
  right: -2.5px;
  top: 3px;
  width: 1.3px;
  height: 3px;
  border-radius: 0 1px 1px 0;
  background: rgba(16, 17, 18, 0.4);
}
.ip-battery i {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: 2px;
  background: var(--ink);
}
/* The app drawn at phone scale: everything inside is a little over
   three quarters of its natural size, as on a real screen. */
.ip-app {
  zoom: 0.8;
  padding: 10px 18px 0;
  font-size: 12.5px;
}
.ip-firm {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}
.ip-firm .ws-mark {
  width: 18px;
  height: 18px;
  font-size: 13px;
  border-radius: 5px;
}
.ip-title {
  display: block;
  margin-top: 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ip-sub {
  display: block;
  color: var(--ink-3);
  font-size: 12px;
}
.ip-drop {
  position: relative;
  display: grid;
  place-items: center;
  height: 76px;
  margin-top: 12px;
  overflow: hidden;
  border: 1.5px dashed #c9cdd2;
  border-radius: 14px;
  background: #ffffff;
}
.ip-z {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  white-space: nowrap;
}
.z-idle {
  flex-direction: column;
  gap: 4px;
  color: var(--ink-2);
  animation: ip-idle 14s infinite;
}
.z-idle .i {
  width: 20px;
  height: 20px;
  color: var(--orange);
}
.z-up {
  opacity: 0;
  animation: ip-up 14s infinite;
}
.z-scan {
  opacity: 0;
  animation: ip-scan 14s infinite;
}
.z-done {
  opacity: 0;
  color: #0d7a3d;
  animation: ip-done 14s infinite;
}
.z-done .i {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}
.ip-spin {
  width: 13px;
  height: 13px;
  border: 1.5px solid #d3d6da;
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* A light band that sweeps the drop area while the files are read. */
.ip-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--orange) 14%, transparent),
    transparent
  );
  opacity: 0;
  transform: translateX(-100%);
  animation: ip-scanline 14s infinite;
}
/* The file list opens as the files arrive and closes for the next round,
   so the requested items sit right under the drop area while it waits. */
.ip-files {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 0;
  overflow: hidden;
  animation: ip-files 14s var(--ease) infinite;
}
@keyframes ip-files {
  0%,
  21.5% {
    height: 0;
  }
  25%,
  92% {
    height: 148px;
  }
  97%,
  100% {
    height: 0;
  }
}
.ip-files > :first-child {
  margin-top: 10px;
}
.ip-file {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 12px 0 10px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--hair);
  opacity: 0;
}
.ip-fname {
  display: grid;
  min-width: 0;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.ip-fname small {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 11px;
}
.ip-prog {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--sunk);
  overflow: hidden;
}
.ip-prog i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--orange);
  transform-origin: left;
  transform: scaleX(0);
}
.f1 {
  animation: ip-file-1 14s var(--ease) infinite;
}
.f2 {
  animation: ip-file-2 14s var(--ease) infinite;
}
.f3 {
  animation: ip-file-3 14s var(--ease) infinite;
}
.f1 .ip-prog i {
  animation: ip-prog-1 14s infinite;
}
.f2 .ip-prog i {
  animation: ip-prog-2 14s infinite;
}
.f3 .ip-prog i {
  animation: ip-prog-3 14s infinite;
}
.ip-list {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}
.ip-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink-2);
  font-weight: 500;
}
.ip-cb {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #c9cdd2;
}
.ip-cb .i {
  width: 10px;
  height: 10px;
  stroke-width: 3;
  color: #ffffff;
  opacity: 0;
}
.ip-list .got .ip-cb {
  background: var(--green);
  box-shadow: none;
}
.ip-list .got .ip-cb .i {
  opacity: 1;
}
/* The portal's tab bar, above the home indicator. */
.ip-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 7px 8px 20px;
  border-top: 1px solid var(--hair);
  background: color-mix(in srgb, #ffffff 88%, transparent);
}
.ip-tabs span {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: var(--ink-3);
  font-size: 8.5px;
  font-weight: 600;
}
.ip-tabs .i {
  width: 16px;
  height: 16px;
}
.ip-tabs .on {
  color: var(--orange);
}
.ip-home {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 92px;
  height: 3.5px;
  margin-left: -46px;
  border-radius: 3px;
  background: var(--ink);
}
/* The stack of files and the pointer, over the phone. */
.ip-drag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 110px;
  height: 80px;
  opacity: 0;
  pointer-events: none;
  animation: ip-drag 14s infinite;
}
.ip-drag .sheet {
  position: absolute;
  top: 6px;
  width: 50px;
  height: 58px;
  border-radius: 7px;
  background: var(--panel);
  box-shadow:
    0 0 0 1px var(--hair-2),
    0 8px 18px rgba(0, 0, 0, 0.1);
}
.ip-drag .sheet-front {
  left: 0;
  display: grid;
  place-items: center;
}
.ip-drag .sheet-mid {
  left: 6px;
  top: 3px;
  opacity: 0.9;
}
.ip-drag .sheet-back {
  left: 12px;
  top: 0;
  opacity: 0.7;
}
.ip-drag .drag-label {
  position: absolute;
  left: 0;
  top: 68px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--orange);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ip-drag .cursor {
  position: absolute;
  left: 60px;
  top: 40px;
}

/* Matching: the same three items, on both screens, at the same moments. */
.m1 .cb,
.ip-list .m1 .ip-cb {
  animation: rq-box-1 14s var(--ease) infinite;
}
.m2 .cb,
.ip-list .m2 .ip-cb {
  animation: rq-box-2 14s var(--ease) infinite;
}
.m3 .cb,
.ip-list .m3 .ip-cb {
  animation: rq-box-3 14s var(--ease) infinite;
}
.m1 .cb .i,
.ip-list .m1 .ip-cb .i,
.m1 .s-b {
  animation: rq-on-1 14s var(--ease) infinite;
}
.m2 .cb .i,
.ip-list .m2 .ip-cb .i,
.m2 .s-b {
  animation: rq-on-2 14s var(--ease) infinite;
}
.m3 .cb .i,
.ip-list .m3 .ip-cb .i,
.m3 .s-b {
  animation: rq-on-3 14s var(--ease) infinite;
}
.m1 .s-a {
  animation: rq-off-1 14s var(--ease) infinite;
}
.m2 .s-a {
  animation: rq-off-2 14s var(--ease) infinite;
}
.m3 .s-a {
  animation: rq-off-3 14s var(--ease) infinite;
}
.ip-list .m1 .ip-cb,
.ip-list .m2 .ip-cb,
.ip-list .m3 .ip-cb {
  --on: var(--green);
}
.req-items .cb {
  --on: var(--orange);
}
.c1 {
  animation: rq-c1 14s infinite;
}
.c2 {
  animation: rq-c2 14s infinite;
}
.c3 {
  animation: rq-c3 14s infinite;
}
.c4 {
  animation: rq-c4 14s infinite;
}
.req-tag .s-a {
  animation: rq-off-tag 14s var(--ease) infinite;
}
.req-tag .s-b {
  animation: rq-on-tag 14s var(--ease) infinite;
}
.done-btn .s-a {
  animation: rq-off-done 14s var(--ease) infinite;
}
.done-btn .s-b {
  animation: rq-on-done 14s var(--ease) infinite;
}

@keyframes ip-drag {
  0% {
    opacity: 0;
    transform: translate(210px, 500px);
    animation-timing-function: ease-out;
  }
  3% {
    opacity: 1;
    transform: translate(210px, 500px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.2, 1);
  }
  16% {
    opacity: 1;
    transform: translate(96px, 130px);
    animation-timing-function: ease-out;
  }
  19% {
    opacity: 1;
    transform: translate(96px, 130px) scale(0.9);
  }
  22% {
    opacity: 0;
    transform: translate(96px, 130px) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translate(210px, 500px);
  }
}
@keyframes ip-idle {
  0%,
  20% {
    opacity: 1;
  }
  22%,
  94% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}
@keyframes ip-up {
  0%,
  21% {
    opacity: 0;
  }
  23%,
  37% {
    opacity: 1;
  }
  39%,
  100% {
    opacity: 0;
  }
}
@keyframes ip-scan {
  0%,
  38% {
    opacity: 0;
  }
  40%,
  49% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}
@keyframes ip-done {
  0%,
  50% {
    opacity: 0;
  }
  52%,
  90% {
    opacity: 1;
  }
  94%,
  100% {
    opacity: 0;
  }
}
@keyframes ip-scanline {
  0%,
  39% {
    opacity: 0;
    transform: translateX(-100%);
  }
  40% {
    opacity: 1;
    transform: translateX(-100%);
  }
  50% {
    opacity: 1;
    transform: translateX(100%);
  }
  51%,
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes ip-file-1 {
  0%,
  22% {
    opacity: 0;
    transform: translateY(-6px);
  }
  24%,
  90% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
  }
}
@keyframes ip-file-2 {
  0%,
  23.5% {
    opacity: 0;
    transform: translateY(-6px);
  }
  25.5%,
  90% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
  }
}
@keyframes ip-file-3 {
  0%,
  25% {
    opacity: 0;
    transform: translateY(-6px);
  }
  27%,
  90% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
  }
}
@keyframes ip-prog-1 {
  0%,
  23% {
    transform: scaleX(0);
    background: var(--orange);
  }
  33%,
  50% {
    transform: scaleX(1);
    background: var(--orange);
  }
  52%,
  100% {
    transform: scaleX(1);
    background: var(--green);
  }
}
@keyframes ip-prog-2 {
  0%,
  25% {
    transform: scaleX(0);
    background: var(--orange);
  }
  36%,
  50% {
    transform: scaleX(1);
    background: var(--orange);
  }
  52%,
  100% {
    transform: scaleX(1);
    background: var(--green);
  }
}
@keyframes ip-prog-3 {
  0%,
  27% {
    transform: scaleX(0);
    background: var(--orange);
  }
  38%,
  50% {
    transform: scaleX(1);
    background: var(--orange);
  }
  52%,
  100% {
    transform: scaleX(1);
    background: var(--green);
  }
}
@keyframes rq-box-1 {
  0%,
  52% {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
    transform: scale(1);
  }
  54% {
    transform: scale(0.82);
  }
  56%,
  93% {
    background: var(--on);
    box-shadow: inset 0 0 0 1.5px var(--on);
    transform: scale(1);
  }
  97%,
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
  }
}
@keyframes rq-box-2 {
  0%,
  56% {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
    transform: scale(1);
  }
  58% {
    transform: scale(0.82);
  }
  60%,
  93% {
    background: var(--on);
    box-shadow: inset 0 0 0 1.5px var(--on);
    transform: scale(1);
  }
  97%,
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
  }
}
@keyframes rq-box-3 {
  0%,
  60% {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
    transform: scale(1);
  }
  62% {
    transform: scale(0.82);
  }
  64%,
  93% {
    background: var(--on);
    box-shadow: inset 0 0 0 1.5px var(--on);
    transform: scale(1);
  }
  97%,
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
  }
}
@keyframes rq-on-1 {
  0%,
  53% {
    opacity: 0;
  }
  56%,
  93% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes rq-on-2 {
  0%,
  57% {
    opacity: 0;
  }
  60%,
  93% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes rq-on-3 {
  0%,
  61% {
    opacity: 0;
  }
  64%,
  93% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes rq-off-1 {
  0%,
  53% {
    opacity: 1;
  }
  55%,
  95% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}
@keyframes rq-off-2 {
  0%,
  57% {
    opacity: 1;
  }
  59%,
  95% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}
@keyframes rq-off-3 {
  0%,
  61% {
    opacity: 1;
  }
  63%,
  95% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}
@keyframes rq-bar {
  0%,
  53% {
    transform: scaleX(0.25);
  }
  56%,
  57% {
    transform: scaleX(0.5);
  }
  60%,
  61% {
    transform: scaleX(0.75);
  }
  64%,
  94% {
    transform: scaleX(1);
  }
  98%,
  100% {
    transform: scaleX(0.25);
  }
}
@keyframes rq-c1 {
  0%,
  54% {
    opacity: 1;
  }
  55%,
  97% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}
@keyframes rq-c2 {
  0%,
  54% {
    opacity: 0;
  }
  55%,
  58% {
    opacity: 1;
  }
  59%,
  100% {
    opacity: 0;
  }
}
@keyframes rq-c3 {
  0%,
  58% {
    opacity: 0;
  }
  59%,
  62% {
    opacity: 1;
  }
  63%,
  100% {
    opacity: 0;
  }
}
@keyframes rq-c4 {
  0%,
  62% {
    opacity: 0;
  }
  63%,
  97% {
    opacity: 1;
  }
  98%,
  100% {
    opacity: 0;
  }
}
@keyframes rq-off-tag {
  0%,
  64% {
    opacity: 1;
  }
  66%,
  95% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}
@keyframes rq-on-tag {
  0%,
  64% {
    opacity: 0;
    transform: translateY(3px);
  }
  66%,
  94% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
/* The accountant's pointer comes in from the lower right and closes the request. */
@keyframes rq-cursor-b {
  0%,
  67% {
    opacity: 0;
    transform: translate(620px, 420px);
  }
  69% {
    opacity: 1;
    transform: translate(620px, 420px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.2, 1);
  }
  77% {
    opacity: 1;
    transform: translate(83px, 289px);
  }
  86% {
    opacity: 1;
    transform: translate(83px, 289px);
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(83px, 289px);
  }
}
@keyframes rq-click {
  0%,
  78% {
    transform: scale(1);
  }
  79.5% {
    transform: scale(0.82);
  }
  81%,
  100% {
    transform: scale(1);
  }
}
@keyframes rq-off-done {
  0%,
  79.5% {
    opacity: 1;
  }
  81%,
  95% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}
@keyframes rq-on-done {
  0%,
  79.5% {
    opacity: 0;
    transform: scale(0.96);
  }
  81%,
  94% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes arrive-box {
  0%,
  42% {
    background: var(--panel);
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
  }
  50%,
  90% {
    background: var(--orange);
    box-shadow: inset 0 0 0 1.5px var(--orange);
  }
  100% {
    background: var(--panel);
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
  }
}
@keyframes arrive-mark {
  0%,
  46% {
    opacity: 0;
  }
  52%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Still: the request as it ends, every item in place and closed. */
@media (prefers-reduced-motion: reduce) {
  .ip-drag,
  .cur-b,
  .z-idle,
  .z-up,
  .z-scan,
  .s-a,
  .c1,
  .c2,
  .c3 {
    opacity: 0;
  }
  .z-done,
  .ip-file,
  .s-b,
  .c4,
  .m1 .cb .i,
  .m2 .cb .i,
  .m3 .cb .i,
  .ip-list .ip-cb .i {
    opacity: 1;
  }
  .ip-prog i {
    transform: none;
    background: var(--green);
  }
  .ip-files {
    height: auto;
  }
  .bar i {
    transform: none;
  }
  .req-items .m .cb {
    background: var(--orange);
    box-shadow: none;
  }
  .ip-list .ip-cb {
    background: var(--green);
    box-shadow: none;
  }
}

/* ---- Work types ---- */
.strip-caption {
  padding: 18px var(--pad);
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-3);
}
.types {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px dashed var(--line);
}
.types li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 76px;
  padding: 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
  transition:
    color 200ms var(--ease),
    background-color 200ms var(--ease);
}
.types li:not(:nth-child(5n + 1)) {
  border-left: 1px dashed var(--line);
}
.types li:nth-child(n + 6) {
  border-top: 1px dashed var(--line);
}
.types .i {
  width: 20px;
  height: 20px;
  color: var(--ink-3);
  transition: color 200ms var(--ease);
}
.types li::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px solid var(--orange);
  border-radius: var(--corner);
  mask: conic-gradient(at 9px 9px, transparent 75%, #000 0) 0 0 /
    calc(100% - 9px) calc(100% - 9px);
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 220ms var(--ease),
    transform 320ms var(--ease);
}
.types li:hover {
  background: var(--panel);
}
.types li:hover .i {
  color: var(--orange);
}
.types li:hover::after {
  opacity: 1;
  transform: none;
}

/* ---- Statement and cells ---- */
.statement {
  padding: 96px var(--pad) 88px;
}
.big {
  max-width: 980px;
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}
.cells {
  display: grid;
  border-top: 1px dashed var(--line);
}
.cells-3 {
  grid-template-columns: repeat(3, 1fr);
}
.cells-2 {
  grid-template-columns: repeat(2, 1fr);
}
.cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
}
.cells-3 > .cell + .cell,
.cells-2 > .cell:nth-child(2n) {
  border-left: 1px dashed var(--line);
}
.cells-2 > .cell:nth-child(n + 3) {
  border-top: 1px dashed var(--line);
}
.cell h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cell h3 .i {
  color: var(--ink-2);
}
.cell > p {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 400px;
}
.cell-note {
  display: block;
  margin-top: 24px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.cell-note .i {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  color: var(--ink-2);
}
.cell-note b {
  color: var(--ink);
}
.art {
  position: relative;
  display: grid;
  place-items: center;
  height: 400px;
  border-radius: var(--corner);
  overflow: hidden;
}

/* Calendar */
.cal {
  width: min(340px, 100%);
  padding: 16px 16px 14px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  font-size: 12.5px;
}
.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
}
.cal-head b {
  font-size: 13.5px;
  font-weight: 600;
}
.cal-head span {
  color: var(--ink-3);
  font-size: 12px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-grid span {
  position: relative;
  display: grid;
  place-items: center;
  height: 30px;
  padding-bottom: 4px;
  border-radius: var(--corner);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cal-grid .wd {
  height: 22px;
  padding-bottom: 0;
  color: var(--ink-3);
  font-size: 11px;
}
.cal-grid .off {
  color: var(--ink-4);
}
.cal-grid .due::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--orange);
}
.cal-grid .due-big {
  background: var(--orange-tint);
  color: var(--orange-ink);
  font-weight: 700;
}
.cal-grid .today {
  background: var(--ink);
  color: #ffffff;
  font-weight: 700;
  animation: today 2.8s var(--ease-in-out) infinite;
}
/* Today breathes inside its own cell, so it never covers a neighbour. */
@keyframes today {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 color-mix(in srgb, var(--orange) 0%, transparent);
  }
  50% {
    box-shadow: inset 0 -3px 0 0 var(--orange);
  }
}
.cal-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: var(--corner);
  background: var(--night);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
}
.cal-tip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* Documents a client owes, after claister.com's portal scene: a stack of
   three files is carried by the pointer into the drop area, read, and three
   of the four requested rows receive their file. One 12 s cycle; 1 s is
   8.33% of it. */
.docs {
  position: relative;
  width: min(360px, 100%);
  padding: 14px 14px 4px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  font-size: 13px;
}
.docs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.docs-head b {
  font-weight: 600;
}
.docs-head span {
  color: var(--ink-3);
  font-size: 12px;
}
.dz {
  position: relative;
  display: grid;
  place-items: center;
  height: 76px;
  overflow: hidden;
  border: 1px dashed var(--ink-4);
  border-radius: 8px;
  background: #fcfcfc;
}
.dz > span {
  grid-area: 1 / 1;
}
.dz-idle,
.dz-scan,
.dz-done {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dz-idle {
  flex-direction: column;
  gap: 4px;
}
.dz-scan,
.dz-done {
  opacity: 0;
}
.dz-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  color: var(--ink-3);
}
.dz-title {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.dz-done,
.dz-done .i {
  color: #0d7a3d;
}
.dz-spin {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--ink-4);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.dz-bar {
  align-self: end;
  justify-self: stretch;
  height: 2px;
  background: var(--orange);
  opacity: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.doc-rows {
  margin-top: 6px;
}
.doc {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 50px;
}
.doc + .doc {
  border-top: 1px solid var(--hair);
}
.fi {
  display: block;
  width: 22px;
  height: 22px;
}
.doc-icon,
.doc-meta,
.doc-state {
  display: grid;
}
.doc-icon > *,
.doc-meta > *,
.doc-state > * {
  grid-area: 1 / 1;
}
.doc-missing .doc-icon {
  opacity: 0.45;
}
.doc-name {
  display: grid;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
}
.doc-meta small {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 400;
}
.doc-state em {
  justify-self: end;
  padding: 3px 8px;
  border-radius: var(--corner);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.state-wait {
  background: #eef3ff;
  color: #2f5bd3;
}
.state-got {
  background: var(--green-tint);
  color: #0d7a3d;
}
.d-got {
  opacity: 0;
}
/* The stack of three files and the pointer that carries it. */
.drag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 120px;
  height: 80px;
  opacity: 0;
  pointer-events: none;
  animation: drag 12s infinite;
}
.sheet {
  position: absolute;
  top: 6px;
  width: 50px;
  height: 58px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow:
    0 0 0 1px var(--hair-2),
    0 6px 14px rgba(0, 0, 0, 0.08);
}
.sheet-front {
  left: 0;
  display: grid;
  place-items: center;
}
.sheet-mid {
  left: 6px;
  top: 3px;
  opacity: 0.85;
}
.sheet-back {
  left: 12px;
  top: 0;
  opacity: 0.6;
}
.drag-label {
  position: absolute;
  left: 0;
  top: 68px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--orange);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cursor {
  position: absolute;
  left: 60px;
  top: 40px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}
.dz-idle {
  animation: dz-idle 12s infinite;
}
.dz-scan {
  animation: dz-scan 12s infinite;
}
.dz-done {
  animation: dz-done 12s infinite;
}
.dz-bar {
  animation: dz-bar 12s infinite;
}
[data-reveal="1"] .d-got {
  animation: got-1 12s infinite;
}
[data-reveal="1"] .d-miss {
  animation: miss-1 12s infinite;
}
[data-reveal="2"] .d-got {
  animation: got-2 12s infinite;
}
[data-reveal="2"] .d-miss {
  animation: miss-2 12s infinite;
}
[data-reveal="3"] .d-got {
  animation: got-3 12s infinite;
}
[data-reveal="3"] .d-miss {
  animation: miss-3 12s infinite;
}
/* From the lower right, drop with the top left at (150, 42), shrink away. */
@keyframes drag {
  0% {
    opacity: 0;
    transform: translate(250px, 290px);
    animation-timing-function: ease-out;
  }
  4% {
    opacity: 1;
    transform: translate(250px, 290px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.2, 1);
  }
  18% {
    opacity: 1;
    transform: translate(150px, 42px);
    animation-timing-function: ease-out;
  }
  22% {
    opacity: 1;
    transform: translate(150px, 42px) scale(0.92);
  }
  26% {
    opacity: 0;
    transform: translate(150px, 42px) scale(0.92);
  }
  100% {
    opacity: 0;
    transform: translate(250px, 290px);
  }
}
@keyframes dz-idle {
  0%,
  20% {
    opacity: 1;
  }
  24%,
  90% {
    opacity: 0;
  }
  96%,
  100% {
    opacity: 1;
  }
}
@keyframes dz-scan {
  0%,
  24% {
    opacity: 0;
  }
  26%,
  39% {
    opacity: 1;
  }
  42%,
  100% {
    opacity: 0;
  }
}
@keyframes dz-done {
  0%,
  42% {
    opacity: 0;
  }
  44%,
  84% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}
@keyframes dz-bar {
  0%,
  25% {
    opacity: 0;
    transform: scaleX(0);
  }
  26% {
    opacity: 1;
    transform: scaleX(0);
  }
  39% {
    opacity: 1;
    transform: scaleX(1);
  }
  42%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}
@keyframes got-1 {
  0%,
  43% {
    opacity: 0;
  }
  48%,
  84% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0;
  }
}
@keyframes miss-1 {
  0%,
  43% {
    opacity: 1;
  }
  48%,
  84% {
    opacity: 0;
  }
  92%,
  100% {
    opacity: 1;
  }
}
@keyframes got-2 {
  0%,
  48% {
    opacity: 0;
  }
  53%,
  84% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0;
  }
}
@keyframes miss-2 {
  0%,
  48% {
    opacity: 1;
  }
  53%,
  84% {
    opacity: 0;
  }
  92%,
  100% {
    opacity: 1;
  }
}
@keyframes got-3 {
  0%,
  54% {
    opacity: 0;
  }
  59%,
  84% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0;
  }
}
@keyframes miss-3 {
  0%,
  54% {
    opacity: 1;
  }
  59%,
  84% {
    opacity: 0;
  }
  92%,
  100% {
    opacity: 1;
  }
}
/* Still, the request shows its result: files in place, the zone done. */
@media (prefers-reduced-motion: reduce) {
  .drag,
  .dz-idle,
  .dz-scan,
  .dz-bar,
  [data-reveal] .d-miss {
    opacity: 0;
  }
  .dz-done,
  [data-reveal] .d-got {
    opacity: 1;
  }
}

/* Chat bubbles */
.art-chat {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: stretch;
  gap: 8px;
  padding: 20px 24px;
  font-size: 13px;
  line-height: 1.4;
}
.art-chat > * {
  grid-column: 1;
}
.bub {
  max-width: 84%;
  padding: 8px 11px;
  border-radius: 10px;
  animation: chat-1 12s var(--ease) infinite both;
}
.bub b {
  display: block;
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1f8ac0;
}
.bub-in {
  justify-self: start;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  border-bottom-left-radius: 3px;
}
.bub-out {
  justify-self: end;
  background: var(--orange-tint);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--orange) 22%, transparent);
  border-bottom-right-radius: 3px;
}
.att {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 6px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--page);
  box-shadow: inset 0 0 0 1px var(--hair-2);
}
.att .fi {
  width: 26px;
  height: 26px;
}
.att > span {
  display: grid;
}
.att-name {
  font-weight: 600;
}
.att small {
  color: var(--ink-3);
  font-size: 11.5px;
}
.b1 {
  grid-row: 1;
}
.b2 {
  grid-row: 2;
  animation-name: chat-2;
}
.b3 {
  grid-row: 3;
  animation-name: chat-3;
}
.b4 {
  grid-row: 4;
}
.b4 {
  animation-name: chat-4;
}
.typing {
  /* In the file message's own slot, at its foot, until the message lands. */
  grid-row: 3;
  align-self: end;
  justify-self: start;
  display: flex;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  animation: chat-typing 12s var(--ease) infinite both;
}
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
  animation: dot 1.2s var(--ease-in-out) infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
/* One clock for the whole thread: the lines arrive in turn, the client is
   seen typing before the file comes, and the thread then fades out as one. */
@keyframes chat-1 {
  0%,
  3% {
    opacity: 0;
    transform: translateY(8px);
  }
  8%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes chat-2 {
  0%,
  16% {
    opacity: 0;
    transform: translateY(8px);
  }
  21%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes chat-3 {
  0%,
  42% {
    opacity: 0;
    transform: translateY(8px);
  }
  47%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes chat-4 {
  0%,
  58% {
    opacity: 0;
    transform: translateY(8px);
  }
  63%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
/* The dots stand where the file message will land, then give way to it. */
@keyframes chat-typing {
  0%,
  27% {
    opacity: 0;
  }
  30%,
  41% {
    opacity: 1;
  }
  44%,
  100% {
    opacity: 0;
  }
}
@keyframes dot {
  0%,
  60%,
  100% {
    transform: none;
    opacity: 0.5;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

/* ---- Principle ---- */
.principle {
  display: grid;
  place-items: center;
  min-height: 460px;
  padding: 96px var(--pad);
  overflow: hidden;
}
.quote {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 24px;
  /* Clear of both tile groups (two tiles, three gaps) with room to spare. */
  max-width: min(
    680px,
    calc(100% - 2 * (2 * var(--tile) + 3 * var(--tile-gap)) - 48px)
  );
  text-align: center;
}
.quote p {
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.quote figcaption {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
}
/* Decorative tiles in two corners of the frame. They hold still, keep one
   gap between each other and the same inset from the frame on both sides. */
.principle {
  --tile: 120px;
  --tile-gap: 4px;
}
.tiles {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(2, var(--tile));
  grid-auto-rows: var(--tile);
  gap: var(--tile-gap);
}
.tiles i {
  display: block;
  border-radius: var(--corner);
  background: linear-gradient(180deg, var(--panel), var(--page));
  box-shadow: inset 0 0 0 1px var(--hair-2);
}
.tiles-left {
  left: var(--tile-gap);
  bottom: var(--tile-gap);
}
.tiles-left i:nth-child(1) {
  grid-area: 1 / 2;
}
.tiles-left i:nth-child(2) {
  grid-area: 2 / 1;
}
.tiles-left i:nth-child(3) {
  grid-area: 2 / 2;
}
.tiles-left i:nth-child(4) {
  grid-area: 3 / 1;
}
.tiles-right {
  right: var(--tile-gap);
  top: var(--tile-gap);
}
.tiles-right i:nth-child(1) {
  grid-area: 1 / 1;
}
.tiles-right i:nth-child(2) {
  grid-area: 1 / 2;
}
.tiles-right i:nth-child(3) {
  grid-area: 2 / 2;
}
.tiles .t-date {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
}
.t-date b {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.t-date small {
  font-size: 13px;
  font-weight: 600;
  color: var(--orange-ink);
}
.t-date::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--orange);
  border-radius: var(--corner);
  mask: conic-gradient(at 12px 12px, transparent 75%, #000 0) 0 0 /
    calc(100% - 12px) calc(100% - 12px);
}

/* ---- Section heads ---- */
.section-head {
  display: grid;
  gap: 20px;
  padding: 88px var(--pad) 64px;
}
.section-head.center {
  justify-items: center;
  text-align: center;
}
.section-head .lead {
  max-width: 600px;
}

/* ---- Recurring ---- */
.art-schedule,
.art-generated,
.art-time,
.art-checklist {
  height: 300px;
  background: var(--sunk);
}
.art-schedule::before,
.art-generated::before,
.art-time::before,
.art-checklist::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--hair-2) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, var(--hair-2) 1px, transparent 1px) 0 0 / 20px 20px;
  mask: radial-gradient(90% 80% at 50% 50%, #000 20%, transparent 85%);
}
.sched {
  position: relative;
  width: min(512px, 94%);
  padding: 6px 16px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  font-size: 13px;
}
.sched-row {
  display: grid;
  grid-template-columns: 116px 1fr;
  align-items: center;
  min-height: 44px;
}
.sched-row + .sched-row {
  border-top: 1px solid var(--hair);
}
.sched-row > span {
  color: var(--ink-3);
}
.sched-row > b {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  font-weight: 500;
}
.sched-row .i {
  color: var(--orange);
}
.chips i,
.checks i {
  padding: 2px 6px;
  border-radius: var(--corner);
  background: var(--sunk);
  font-size: 12px;
  white-space: nowrap;
}
.chips .more {
  background: var(--orange-tint);
  color: var(--orange-ink);
  font-weight: 600;
}
.checks i::before {
  content: "✓ ";
  color: var(--green);
  font-weight: 700;
}
.gen {
  position: relative;
  width: min(440px, 92%);
  font-size: 13px;
}
.gen-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px 8px;
}
.gen-head b {
  font-weight: 600;
  font-size: 14px;
}
.gen-head span {
  color: var(--green);
  font-weight: 600;
  font-size: 12.5px;
}
.gen-row {
  display: grid;
  grid-template-columns: 16px 1fr 1fr auto 22px;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  margin-bottom: 4px;
  border-radius: var(--corner);
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  animation: gen 8s var(--ease) infinite both;
}
.gen-row i {
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-row em {
  color: var(--ink-3);
  font-size: 12px;
}
.g2 {
  animation-delay: 0.25s;
}
.g3 {
  animation-delay: 0.5s;
}
.g4 {
  animation-delay: 0.75s;
}
@keyframes gen {
  0% {
    opacity: 0;
    transform: translateX(-14px);
  }
  6%,
  90% {
    opacity: 1;
    transform: none;
  }
  98%,
  100% {
    opacity: 0;
  }
}
.gen-more {
  padding: 4px;
  color: var(--ink-3);
  font-size: 12.5px;
}
.time {
  position: relative;
  width: min(440px, 92%);
  padding: 14px 16px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  font-size: 13px;
}
.time-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 6px;
}
.time-head b {
  font-weight: 600;
}
.time-head span {
  color: var(--ink-3);
  font-size: 12px;
}
.time-row {
  display: grid;
  grid-template-columns: 116px 1fr 40px;
  align-items: center;
  gap: 12px;
  height: 38px;
}
.time-row i {
  height: 10px;
  border-radius: 2px;
  background: var(--orange);
  transform-origin: left;
  animation: grow-bar 8s var(--ease) infinite both;
}
.time-row em {
  color: var(--ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bar-1 {
  width: 100%;
}
.bar-2 {
  width: 67%;
  opacity: 0.8;
  animation-delay: 0.15s !important;
}
.bar-3 {
  width: 50%;
  opacity: 0.6;
  animation-delay: 0.3s !important;
}
.bar-4 {
  width: 33%;
  opacity: 0.45;
  animation-delay: 0.45s !important;
}
@keyframes grow-bar {
  0% {
    transform: scaleX(0);
  }
  12%,
  92% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.checklist {
  position: relative;
  width: min(400px, 92%);
  padding: 6px 14px 8px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  font-size: 13px;
}
.cl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
}
.cl-head b {
  font-weight: 600;
}
.cl-head span {
  color: var(--ink-3);
  font-size: 12px;
}
.cl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  border-top: 1px solid var(--hair);
}
.cl-row.done {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
}
.cl-row.next .cb {
  animation: arrive-box 6s var(--ease) infinite;
}
.cl-row.next .cb .i {
  animation: arrive-mark 6s var(--ease) infinite;
}

/* ---- Requests section ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}
.split-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 22px;
  padding: 88px var(--pad);
}
.ticks {
  display: grid;
  gap: 14px;
  margin-top: 6px;
}
.ticks li {
  display: flex;
  gap: 12px;
  color: var(--ink-2);
  font-size: 16px;
}
.ticks .i {
  margin-top: 3px;
  color: var(--orange);
}
.split-art {
  display: grid;
  place-items: center;
  padding: 56px 48px;
  border-left: 1px dashed var(--line);
  background: var(--sunk);
  position: relative;
  overflow: hidden;
}
.split-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--hair-2) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--hair-2) 1px, transparent 1px) 0 0 / 24px 24px;
  mask: radial-gradient(90% 80% at 50% 50%, #000 25%, transparent 85%);
}
.portal-big {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 8px;
  background: var(--panel);
  box-shadow:
    0 0 0 1px var(--hair-2),
    0 0 0 6px color-mix(in srgb, var(--panel) 60%, transparent),
    0 0 0 7px var(--hair-2);
  overflow: hidden;
  font-size: 14px;
}
.pb-top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid var(--hair);
}
.pb-firm {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 13px;
}
.pb-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--page);
}
.pb-card {
  padding: 16px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
}
.pb-card small {
  color: var(--ink-3);
  font-size: 12.5px;
}
.pb-card > b {
  display: block;
  margin: 2px 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pb-card li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  height: 44px;
  border-top: 1px solid var(--hair);
}
.pb-card em {
  color: var(--green);
  font-size: 13px;
  font-weight: 500;
}
.btn-up {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--corner);
  background: var(--orange);
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 600;
}
.btn-up .i {
  stroke-width: 2.2;
}
.pb-card li:nth-child(3) .btn-up {
  animation: nudge 3s var(--ease) infinite;
}
@keyframes nudge {
  0%,
  70%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange) 40%, transparent);
  }
  85% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--orange) 0%, transparent);
  }
}
.pb-msg {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ---- Uchik ---- */
.uchik .cell {
  padding: 0;
}
.marquee-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 12px;
  padding: 48px 0 !important;
  overflow: hidden;
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.uchik-big {
  justify-self: center;
  width: 112px;
  height: 112px;
  margin-bottom: 28px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--hair-2),
    0 0 0 6px color-mix(in srgb, var(--panel) 60%, transparent),
    0 0 0 7px var(--hair-2);
}
.uchik-big svg {
  display: block;
  width: 100%;
  height: 100%;
}
.marquee {
  display: flex;
  width: max-content;
}
.marquee > div {
  display: flex;
  gap: 12px;
  padding-right: 12px;
  animation: marquee 48s linear infinite;
}
.marquee span {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.m2 > div {
  animation-direction: reverse;
  animation-duration: 56s;
}
.m3 > div {
  animation-duration: 44s;
}
.m4 > div {
  animation-direction: reverse;
  animation-duration: 52s;
}
@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}
.chat-cell {
  border-left: 1px dashed var(--line);
  padding: 40px !important;
}
.chat {
  display: grid;
  gap: 18px;
  font-size: 14px;
}
.msg-q {
  display: flex;
  align-items: center;
  gap: 10px;
}
.msg-q .av {
  width: 30px;
  height: 30px;
  font-size: 11px;
}
.msg-q p {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  font-weight: 500;
}
.msg-a {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
}
.uchik-face {
  width: 30px;
  height: 30px;
  border-radius: var(--corner);
  overflow: hidden;
}
.uchik-face svg {
  display: block;
  width: 100%;
  height: 100%;
}
.answer {
  padding: 14px 16px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  line-height: 1.5;
}
.answer ol {
  display: grid;
  gap: 4px;
  margin: 8px 0 14px;
  padding-left: 20px;
  list-style: decimal;
}
.answer li::marker {
  color: var(--ink-3);
}
.proposal {
  padding: 12px 14px;
  border-radius: var(--corner);
  background: var(--page);
  box-shadow: 0 0 0 1px var(--hair-2);
  --bracket-color: var(--orange);
}
.proposal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.proposal-title .i {
  color: var(--orange);
}
.proposal p {
  margin: 6px 0 10px;
  color: var(--ink-2);
  font-size: 13.5px;
}
.proposal-actions {
  display: flex;
  gap: 6px;
}
.proposal-actions .mini-primary {
  margin-left: 0;
}
.chat-input {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 6px 0 14px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  color: var(--ink-3);
}
.caret::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 16px;
  margin-left: 2px;
  vertical-align: -3px;
  background: var(--orange);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.send {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: var(--corner);
  background: var(--orange);
  color: #ffffff;
}
.note-row {
  border-top: 1px dashed var(--line);
}
.note-row p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px var(--pad);
  color: var(--ink-2);
  font-size: 14px;
  text-align: center;
}
.note-row .i {
  color: var(--orange);
}
/* Uchik's float and blink, inside the symbol */
.uk-float {
  animation: uk-float 6s var(--ease-in-out) infinite;
}
.uk-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: uk-blink 5s var(--ease) infinite;
}
@keyframes uk-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes uk-blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.12);
  }
}

/* ---- Security ---- */
.secure {
  display: grid;
  place-items: center;
  padding: 24px var(--pad) 96px;
  overflow: hidden;
}
.secure-line {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 420px;
}
.sl-area {
  fill: color-mix(in srgb, var(--orange) 5%, transparent);
}
.sl-path {
  fill: none;
  stroke: color-mix(in srgb, var(--orange) 55%, transparent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1600;
  stroke-dashoffset: 0;
}
.secure-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: min(800px, 100%);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
}
.sc {
  padding: 26px 28px;
}
.sc:nth-child(2n) {
  border-left: 1px dashed var(--line);
}
.sc:nth-child(n + 3) {
  border-top: 1px dashed var(--line);
}
.sc h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sc h3 .i {
  color: var(--orange);
}
.sc p {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

/* ---- Pricing ---- */
.pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 88px var(--pad);
}
.pricing-copy {
  display: grid;
  gap: 20px;
  max-width: 480px;
}
.plan {
  display: grid;
  gap: 22px;
  padding: 28px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hair-2);
  --bracket-color: var(--orange);
}
.plan-head {
  display: grid;
  justify-items: start;
  gap: 10px;
}
.plan-head h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.plan-head p {
  color: var(--ink-2);
}
.plan-list {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.plan-list li {
  display: flex;
  gap: 10px;
  font-size: 15px;
}
.plan-list .i {
  margin-top: 2px;
  color: var(--orange);
  stroke-width: 2.2;
}

/* ---- FAQ ---- */
.faq {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  padding: 88px var(--pad);
}
.faq-list {
  border-top: 1px solid var(--hair-2);
}
.faq details {
  border-bottom: 1px solid var(--hair-2);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color 160ms var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--orange-ink);
}
.pm {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--corner);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  background: var(--panel);
}
.pm::before,
.pm::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.75px;
  margin: -0.875px 0 0 -6px;
  border-radius: 1px;
  background: var(--ink);
  transition: transform 300ms var(--ease);
}
.pm::after {
  transform: rotate(90deg);
}
details[open] .pm::after {
  transform: rotate(0deg);
}
.faq details p {
  max-width: 640px;
  padding: 0 52px 22px 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 360ms var(--ease),
    content-visibility 360ms allow-discrete;
}
.faq details[open]::details-content {
  block-size: auto;
}

/* ---- CTA ---- */
.cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 88px var(--pad);
}
.cta-side {
  display: grid;
  gap: 24px;
  max-width: 520px;
}

/* ---- Footer ---- */
.foot {
  background: var(--night);
  color: #c9cbcf;
  --wm-ink: #ffffff;
  --line: var(--night-line);
}
.foot .frame {
  border-inline-color: var(--night-line);
}
.foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  padding: 64px var(--pad) 56px;
}
.foot-brand p {
  margin-top: 18px;
  max-width: 300px;
  color: #8f9297;
  font-size: 15px;
}
.wordmark-light {
  width: 132px;
}
.foot-col {
  display: grid;
  align-content: start;
  gap: 10px;
  font-size: 15px;
}
.foot-col b {
  margin-bottom: 4px;
  color: #ffffff;
  font-weight: 600;
}
.foot-col a {
  color: #a3a6ab;
  transition: color 160ms var(--ease);
}
.foot-col a:hover {
  color: #ffffff;
}
.foot-mark {
  position: relative;
  display: grid;
  place-items: center;
  height: 380px;
  border-top: 1px dashed var(--night-line);
  overflow: hidden;
}
.foot-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#202225 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, #202225 1px, transparent 1px) 0 0 / 32px 32px;
  mask: radial-gradient(70% 90% at 50% 50%, #000 20%, transparent 80%);
}
.giant {
  position: relative;
  width: min(880px, 82%);
  height: auto;
  overflow: visible;
  --wm-ink: transparent;
  --wm-stroke: #4a4d53;
  --wm-stroke-width: 3;
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px var(--pad);
  border-top: 1px dashed var(--night-line);
  color: #7d8085;
  font-size: 14px;
}
.foot-bottom span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---- Motion on arrival ---- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
.hero-title .line {
  animation: rise 900ms var(--ease) both;
}
.hero-title .line:nth-child(2) {
  animation-delay: 90ms;
}
.hero-title .line:nth-child(3) {
  animation-delay: 180ms;
}
.hero-facts {
  animation: rise 900ms var(--ease) 320ms both;
}
.hero-side .lead {
  animation: rise 900ms var(--ease) 240ms both;
}
.hero-side .actions {
  animation: rise 900ms var(--ease) 360ms both;
}
.showcase {
  animation: rise 1100ms var(--ease) 420ms both;
}

/* ---- Motion on scroll, where the browser ties animations to scrolling ---- */
@supports (animation-timeline: view()) {
  @keyframes reveal {
    from {
      opacity: 0;
      transform: translateY(28px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
  .cells-3 > .cell.reveal:nth-child(2) {
    animation-range: entry 6% cover 32%;
  }
  .cells-3 > .cell.reveal:nth-child(3) {
    animation-range: entry 12% cover 36%;
  }
  .types li {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  .types li:nth-child(5n + 2) {
    animation-range: entry 4% cover 44%;
  }
  .types li:nth-child(5n + 3) {
    animation-range: entry 8% cover 48%;
  }
  .types li:nth-child(5n + 4) {
    animation-range: entry 12% cover 52%;
  }
  .types li:nth-child(5n) {
    animation-range: entry 16% cover 56%;
  }
  @keyframes draw {
    from {
      stroke-dashoffset: 1600;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes fill-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .sl-path {
    animation: draw linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 60%;
  }
  .sl-area {
    animation: fill-in linear both;
    animation-timeline: view();
    animation-range: entry 30% cover 60%;
  }
  .giant {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
}

/* ---- Smaller screens ---- */
@media (max-width: 1180px) {
  .nav {
    display: none;
  }
  /* Narrower than this, the tiles would reach the quote. */
  .tiles {
    display: none;
  }
  .quote {
    max-width: 760px;
  }
  .subnav {
    display: block;
  }
  .topbar-actions {
    margin-left: auto;
  }
  .win {
    grid-template-columns: 200px 1fr;
  }
}
@media (max-width: 960px) {
  :root {
    --pad: 24px;
  }
  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 28px;
    padding-top: 72px;
    padding-bottom: 56px;
  }
  .stage {
    padding: 32px 24px 0;
  }
  .win {
    grid-template-columns: 1fr;
  }
  .win-side {
    display: none;
  }
  .clients {
    grid-template-columns: 1fr;
  }
  .rail {
    display: none;
  }
  .req-wrap {
    grid-template-columns: 1fr;
    padding: 0;
    height: auto;
    min-height: 560px;
  }
  .iphone {
    display: none;
  }
  .types {
    grid-template-columns: repeat(2, 1fr);
  }
  .types li:not(:nth-child(5n + 1)) {
    border-left: 0;
  }
  .types li:nth-child(2n) {
    border-left: 1px dashed var(--line);
  }
  .types li:nth-child(n + 3) {
    border-top: 1px dashed var(--line);
  }
  .cells-3,
  .cells-2,
  .split,
  .pricing,
  .faq,
  .cta {
    grid-template-columns: 1fr;
  }
  .cells-3 > .cell + .cell,
  .cells-2 > .cell:nth-child(2n) {
    border-left: 0;
  }
  .cells-3 > .cell + .cell,
  .cells-2 > .cell + .cell {
    border-top: 1px dashed var(--line);
  }
  .split-art {
    border-left: 0;
    border-top: 1px dashed var(--line);
    padding: 40px 20px;
  }
  .chat-cell {
    border-left: 0;
    border-top: 1px dashed var(--line);
    padding: 28px 20px !important;
  }
  .foot-top {
    grid-template-columns: 1fr 1fr;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .announce {
    font-size: 13px;
  }
  .announce-cta {
    display: none;
  }
  .topbar-actions {
    gap: 6px;
  }
  .topbar-actions .btn {
    height: 34px;
    padding: 0 11px;
    font-size: 13px;
  }
  .topbar-in {
    gap: 16px;
    height: 60px;
    padding-inline: 16px;
  }
  .hero {
    padding: 56px 20px 44px;
  }
  .hero-side .actions .btn {
    flex: 1;
  }
  .tabs {
    grid-template-columns: repeat(3, auto);
    justify-content: stretch;
    overflow-x: auto;
  }
  .tab {
    height: 48px;
    padding: 0 14px;
    font-size: 14px;
    gap: 8px;
  }
  .tab .i {
    display: none;
  }
  .stage {
    padding: 20px 12px 0;
  }
  .win {
    height: 520px;
  }
  .win-head .dim,
  .win-tools .mini-btn:nth-child(2) {
    display: none;
  }
  .win-body {
    padding: 12px;
  }
  .tray-cards {
    grid-template-columns: 1fr 1fr;
  }
  .tray-cards .stat:nth-child(3) {
    display: none;
  }
  .row {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    height: auto;
    min-height: 48px;
    padding: 8px 12px;
    row-gap: 2px;
  }
  .row .r-title {
    grid-column: 2;
  }
  .row .r-client {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
  }
  .row .tag {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .row .av {
    display: none;
  }
  .row .cb {
    grid-row: 1 / span 2;
  }
  .tr {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
  .tr > span:nth-child(2),
  .tr > span:nth-child(3),
  .tr > span:nth-child(4) {
    display: none;
  }
  .clients {
    padding: 12px;
  }
  .req {
    padding: 14px;
  }
  .req-head .tag {
    display: none;
  }
  .req-items li {
    grid-template-columns: 18px 1fr;
    height: auto;
    padding: 10px 0;
    row-gap: 0;
  }
  .req-items em,
  .req-items .swap {
    grid-column: 2;
    justify-self: start;
    font-size: 12px;
  }
  .req-foot {
    flex-wrap: wrap;
  }
  .types li {
    height: 64px;
    font-size: 15px;
    gap: 8px;
  }
  .types .i {
    width: 17px;
    height: 17px;
  }
  .statement {
    padding: 64px 20px 56px;
  }
  .art {
    height: 290px;
  }
  .art-chat {
    height: 360px;
  }
  .cell {
    padding: 16px;
  }
  .section-head {
    padding: 64px 20px 44px;
  }
  .split-copy,
  .pricing,
  .faq,
  .cta {
    padding: 64px 20px;
  }
  .principle {
    min-height: 380px;
    padding: 72px 20px;
  }
  .tiles {
    display: none;
  }
  .secure {
    padding: 8px 12px 56px;
  }
  .secure-card {
    grid-template-columns: 1fr;
  }
  .sc {
    padding: 20px;
  }
  .sc:nth-child(2n) {
    border-left: 0;
  }
  .sc + .sc {
    border-top: 1px dashed var(--line);
  }
  .pb-firm {
    display: none;
  }
  .pb-card li {
    grid-template-columns: 18px 1fr;
    height: auto;
    padding: 10px 0;
  }
  .pb-card li em {
    grid-column: 2;
    justify-self: start;
    margin-top: 6px;
  }
  .gen-row {
    grid-template-columns: 16px 1fr auto;
  }
  .gen-row i,
  .gen-row .av {
    display: none;
  }
  .art-schedule,
  .art-generated,
  .art-time,
  .art-checklist {
    height: auto;
    padding: 20px 0;
  }
  .sched-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
  .sched-row > span {
    font-size: 12px;
  }
  .sched-row > b {
    flex-wrap: wrap;
  }
  .time-row {
    grid-template-columns: 112px 1fr 36px;
  }
  .time-row span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .faq summary {
    font-size: 16px;
  }
  .faq details p {
    padding-right: 0;
  }
  .foot-top {
    padding: 48px 20px 40px;
  }
  .foot-mark {
    height: 220px;
  }
  .foot-bottom {
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .note-row p {
    padding: 14px 20px;
    font-size: 13px;
  }
}

/* ---- Less motion when asked ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* One orange call to action in the first screen: the header's button is
   black there and fades to orange once the hero has scrolled away. A scroll
   timeline flips --past-hero from 0 to 1 at that point; the button reads it
   through a style query, so the change is an ordinary style change and the
   colour eases over time instead of following the scroll. Where the browser
   cannot do this, the button stays black. */
@property --past-hero {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
.nav-cta {
  background: var(--ink);
  color: #ffffff;
  transition:
    background-color 600ms var(--ease),
    transform 160ms var(--ease);
}
.nav-cta:hover {
  background: #2a2c2f;
}
@supports (animation-timeline: scroll()) {
  @keyframes past-hero {
    from {
      --past-hero: 0;
    }
    to {
      --past-hero: 1;
    }
  }
  html {
    animation: past-hero steps(1, jump-end) both;
    animation-timeline: scroll(root);
    animation-range: 520px 521px;
  }
  @container style(--past-hero: 1) {
    .nav-cta {
      background: var(--orange);
    }
    .nav-cta:hover {
      background: var(--orange-hover);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: scroll()) {
    html {
      animation: past-hero steps(1, jump-end) both !important;
      animation-timeline: scroll(root) !important;
      animation-range: 520px 521px !important;
    }
  }
}
/* The product's own buttons in the mockups are drawn dark, so they do not
   compete with the page's one orange button. */
.showcase .mini-primary {
  background: var(--ink);
}