/* 1. Tokens */
/* Synodos: generated from tokens.json. Edit tokens.json, then regenerate this file. */

:root, [data-theme="site"] {
  --navy: #0f2e4d;
  --teal: #0a7d6b;
  --light-teal: #45c2a8;
  --ink: #1d2530;
  --paper: #fbfbf9;
  --stone: #ecebe6;
  --mist: #c3cdd7;
  --slate: #5a6573;
  --teal-press: #08695a;
  --surface: #ffffff;
  --line: #dcdad3;
  --ground: var(--paper);
  --on-ground: var(--ink);
  --on-ground-muted: var(--slate);
  --heading-ink: var(--navy);
  --feature: var(--navy);
  --on-feature: var(--paper);
  --on-feature-muted: var(--mist);
  --accent: var(--teal);
  --on-accent: var(--paper);
  --accent-on-feature: var(--light-teal);
  --focus-on-light: var(--teal);
  --focus-on-feature: var(--light-teal);
}

/* Product screens only: use these inside [data-ui] and nowhere else. */
:root {
  --ui-side: #f2f1ed;
  --ui-line: #e4e3de;
  --ui-line-soft: #efeee9;
  --ui-head: #f8f8f5;
  --ui-selected: #f4faf8;
  --ui-dot-muted: #9aa3ae;
  --ui-ring: #b9c0c8;
  --ui-high: #b42318;
  --ui-high-dot: #d92d20;
  --ui-high-tint: #fdecea;
  --ui-high-wash: #fff5f4;
  --ui-med: #8a5300;
  --ui-med-dot: #c98612;
  --ui-med-tint: #fcf0d8;
  --ui-low-dot: #14967f;
  --ui-low-tint: #e2f2ed;
  --ui-info-tint: #e9eef4;
  --ui-warm: #f6f1e7;
  --ui-warm-line: #ece3d2;
  --ui-warm-avatar: #f3e5d3;
  --ui-warm-ink: #6b4a1f;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --page-margin: clamp(20px, 5vw, 72px);
  --radius-control: 8px;
  --radius-frame: 12px;
  --radius-stage: 20px;
  --radius-ui-sm: 6px;
  --radius-ui: 8px;
  --radius-ui-lg: 10px;
  --radius-round: 50%;
  --shadow-window: 0 1px 2px rgb(15 46 77 / 0.06), 0 18px 44px -14px rgb(15 46 77 / 0.24);
  --shadow-lift: 0 1px 2px rgb(15 46 77 / 0.06);
  --bp-phone: 390px;
  --bp-tablet: 768px;
  --bp-desktop: 1440px;
  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Newsreader", Georgia, serif;
}

.display { font-family: var(--font-display); font-size: 82px; line-height: 0.98; font-weight: 500; letter-spacing: -0.04em; }
.heading { font-family: var(--font-display); font-size: 48px; line-height: 1.04; font-weight: 500; letter-spacing: -0.03em; }
.subheading { font-family: var(--font-display); font-size: 26px; line-height: 1.2; font-weight: 500; letter-spacing: -0.012em; }
.label { font-family: var(--font-display); font-size: 16px; line-height: 1.25; font-weight: 500; letter-spacing: -0.005em; }
.small { font-family: var(--font-display); font-size: 15px; line-height: 1.45; font-weight: 400; }
.statement { font-family: var(--font-text); font-size: 26px; line-height: 1.25; font-weight: 400; }
.signoff { font-family: var(--font-text); font-size: 26px; line-height: 1.2; font-weight: 400; font-style: italic; }
.body { font-family: var(--font-text); font-size: 19px; line-height: 1.5; font-weight: 400; }

/* Synodos site stylesheet: the descent, a storyboard from 40,000 feet to the ground. Section 1 above is
   tokens/tokens.css, copied verbatim; everything below uses those tokens. The product screens' styles follow at the end,
   from source/screens.css. Edit source/page.css, not site/site.css, then run node source/build.mjs. */

/* 2. Fluid values */
:root {
  --display-size: clamp(40px, 5.6vw, 82px);
  --heading-size: clamp(30px, 3.3vw, 48px);
  --subheading-size: clamp(21px, 1.8vw, 26px);
  --statement-size: clamp(21px, 1.8vw, 26px);
  --body-size: 19px;
  --gutter: var(--space-5);
  --header-height: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 767px) {
  :root { --display-size: 10vw; --heading-size: 8.4vw; --body-size: 17px; --header-height: 64px; }
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--navy); scroll-padding-top: var(--header-height); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-size: var(--body-size); line-height: 1.5; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { text-wrap: pretty; }
.display { font-size: var(--display-size); text-wrap: balance; }
.heading { font-size: var(--heading-size); text-wrap: balance; }
.subheading { font-size: var(--subheading-size); }
.statement, .signoff { font-size: var(--statement-size); }
.body { font-size: var(--body-size); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--page-margin); }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 3px; }
.frame--night :focus-visible, .top:not(.is-light) :focus-visible, .footer :focus-visible { outline-color: var(--focus-on-feature); }

/* 4. The one button: teal on paper, light teal on the night */
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-control); background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.btn:hover { background: var(--teal-press); }
.btn:active { transform: scale(0.98); }
.btn--large { height: 56px; padding: 0 var(--space-6); }
.top:not(.is-light) .btn, .frame--night .btn { background: var(--light-teal); color: var(--navy); }
.top:not(.is-light) .btn:hover, .frame--night .btn:hover { background: var(--paper); }

/* 5. Header: clear over the night, paper over the day */
.top {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--page-margin);
  background: var(--navy); border-bottom: 1px solid transparent; transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
html:not(.js) .top { position: absolute; }
.top.is-light { background: var(--paper); border-bottom-color: var(--line); }
.top__logo { display: flex; align-items: center; min-height: 44px; }
.logo { width: 148px; height: auto; }
.logo--light, .top.is-light .logo--dark { display: none; }
.logo-mark { display: none; width: 36px; height: auto; }
.top.is-light .logo--light { display: block; }

/* 6. The altimeter, in the header's middle: a picture of the descent, read off the scroll by descent.js */
.alt { display: none; }
.js .alt {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--paper);
  transition: opacity 400ms var(--ease), color 200ms var(--ease);
}
.alt__label { color: var(--mist); font-weight: 400; }
.alt__tape { position: relative; width: 120px; height: 9px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }
.alt__tape::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1px solid currentColor; }
.alt__mark { position: absolute; top: 0; left: calc(var(--p, 0) * 100%); width: 9px; height: 9px; margin-left: -4.5px; border-radius: var(--radius-round); background: var(--light-teal); }
.alt__read { min-width: 5.6em; white-space: nowrap; }
.alt.is-light { color: var(--navy); }
.alt.is-light .alt__label { color: var(--slate); }
.alt.is-light .alt__mark { background: var(--teal); }
.alt.is-done { opacity: 0; }

/* 7. Frames: the night above the cloud, the day on the ground */
.frame { position: relative; overflow: hidden; }
.frame__inner { position: relative; z-index: 1; }
.frame--night {
  background: var(--navy); color: var(--paper);
  --pen: var(--paper); --pen-2: var(--mist); --pen-bg: var(--navy); --pen-cloud: var(--paper); --pen-accent: var(--light-teal);
}
.frame--day {
  background: var(--paper); color: var(--ink);
  --pen: var(--navy); --pen-2: var(--slate); --pen-bg: var(--paper); --pen-cloud: var(--surface); --pen-accent: var(--teal);
}
.frame--night .display, .frame--night .heading { color: var(--paper); }
.frame--day .heading { color: var(--navy); }
.frame .display { line-height: 0.98; letter-spacing: -0.04em; }
.frame .heading { line-height: 1.04; letter-spacing: -0.03em; }
.frame__words .body { margin-top: var(--space-5); max-width: 32em; }

/* 1. 40,000 ft */
.frame--sky { min-height: max(100svh, 62.5vw); display: flex; align-items: center; padding-block: calc(var(--header-height) + var(--space-8)) var(--space-10); }
.frame--sky .frame__inner { width: 100%; }
.frame--sky .frame__words { grid-column: 1 / 9; }
.def__word { margin-top: var(--space-7); line-height: 1.1; color: var(--light-teal); }
.def__text { margin-top: var(--space-2); max-width: 22em; }
.scene.scene--wide { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.scene--tall { display: none; }

/* 2 and 3. Words on one side, the drawing on the other */
.frame--split { padding-block: clamp(80px, 9vw, 140px); }
.frame--split .frame__inner { align-items: center; min-height: 70svh; }
.frame--split .frame__words { grid-column: 1 / 6; grid-row: 1; }
.frame--split .frame__art { grid-column: 6 / 13; grid-row: 1; }
.frame--flip .frame__words { grid-column: 7 / 13; }
.frame--flip .frame__art { grid-column: 1 / 7; }
.frame--flip { padding-bottom: clamp(140px, 16vw, 260px); }
.edge { position: absolute; left: 0; bottom: -1px; width: 100%; max-width: none; z-index: 2; }
.edge--clouds { height: clamp(70px, 10vw, 170px); }
.edge--hills { height: clamp(50px, 7vw, 120px); }

/* 4. 0 ft */
.frame--landing { padding-block: var(--space-6) clamp(80px, 9vw, 140px); }
.frame--landing .frame__words { grid-column: 1 / 6; grid-row: 1; align-self: end; padding-bottom: var(--space-6); }
.frame--landing .frame__art { grid-column: 6 / 13; grid-row: 1 / 3; align-self: center; }
.frame--landing .scene { overflow: hidden; }
.bring { grid-column: 1 / 6; grid-row: 2; align-self: start; }
.bring__lead { color: var(--slate); font-weight: 500; }
.bring__list { margin-top: var(--space-3); border-top: 1px solid var(--line); }
.bring__list li {
  position: relative; padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-text); font-size: var(--body-size); line-height: 1.45; color: var(--ink); text-wrap: pretty;
}
/* The mark's two lines, navy over teal, hang in the margin so every strength lines up with the words above it. */
.bring__list li::before {
  content: ""; position: absolute; left: -34px; top: calc(var(--space-3) + 0.725em - 4px); width: 22px; height: 8px;
  border-top: 2px solid var(--navy); border-bottom: 2px solid var(--teal); display: none;
}
@media (min-width: 1200px) { .bring__list li::before { display: block; } }

/* 5. On the ground: the kitchen table holds still while the four beats pass */
.method { overflow: visible; padding-block: clamp(40px, 5vw, 80px) clamp(80px, 9vw, 140px); }
.method__title { grid-column: 1 / -1; }
.method__stage { grid-column: 6 / 13; grid-row: 1; }
.method__scene { position: sticky; top: calc(var(--header-height) + 10svh); }
.method__beats { grid-column: 1 / 6; grid-row: 1; }
.beat { min-height: 76svh; display: flex; flex-direction: column; justify-content: center; }
.beat__verb {
  font-family: var(--font-display); font-size: var(--display-size); font-weight: 500; line-height: 1; letter-spacing: -0.04em;
  color: var(--navy); transition: color 300ms var(--ease);
}
.beat .body { margin-top: var(--space-4); max-width: 26em; }
.beat.is-on .beat__verb { color: var(--teal); }
.scene--table [data-part] { transition: opacity 500ms var(--ease); }
.method__scene:not([data-beat="all"]) [data-part] { opacity: 0.18; }
.method__scene[data-beat="listen"] [data-part="listen"], .method__scene[data-beat="hear"] [data-part="hear"],
.method__scene[data-beat="think"] [data-part="think"], .method__scene[data-beat="build"] [data-part="build"] { opacity: 1; }
.steam { opacity: 0; }
.method__scene[data-beat="all"] .steam, .method__scene[data-beat="listen"] [data-part="listen"] .steam,
.method__scene[data-beat="build"] [data-part="build"] .steam { opacity: 1; }

/* 6. Along the road: the four problems, each with a glimpse of what was built */
.problems { padding-block: clamp(60px, 7vw, 110px) clamp(110px, 12vw, 200px); }
.problems .frame__words { grid-column: 1 / 8; grid-row: 1; align-self: end; }
.problems__sign { grid-column: 9 / 13; grid-row: 1; }
.cards { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--space-7); }
/* Each card spans three shared rows, so titles, sentences and glimpses line up across the row. */
.card { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin-bottom: var(--space-8); }
.card__title { font-family: var(--font-display); font-weight: 500; line-height: 1.2; letter-spacing: -0.012em; color: var(--navy); }
.card__text { margin-top: var(--space-3); font-size: 17px; }
.glimpse {
  margin-top: var(--space-5); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-frame);
  box-shadow: var(--shadow-window); overflow: hidden; container: screen / inline-size;
}
.glimpse > [data-ui] { flex: 1 0 auto; }
/* One whole moment from each product, never cut mid-row: the summary, the first exception, two posts in review, and
   what helps on a hard day. */
.cards .glimpse [data-ui] .dk-table, .cards .glimpse [data-ui] .bk-row ~ .bk-row, .cards .glimpse [data-ui] .iv-row:nth-child(n+3),
.cards .glimpse [data-ui] .ch-person, .cards .glimpse [data-ui] .ch-cols > .ch-card:first-child, .cards .glimpse [data-ui] .ch-helps li:nth-child(n+3) { display: none; }
/* Glimpses are narrow on smaller laptops, so each keeps only what fits: no tab bar on the exceptions, no avatars on the
   approvals, one tab on the care record. */
.cards .glimpse [data-ui].bk .dk-tools, .cards .glimpse [data-ui].iv .iv-meta .avs, .cards .glimpse [data-ui].ch .ch-tabs span:nth-child(n+2) { display: none; }
.glimpse > [data-ui] { width: 100%; }

/* 7. Dusk */
.frame--dusk { min-height: max(100svh, calc(var(--space-10) * 6)); display: flex; align-items: flex-start; padding-block: calc(var(--header-height) + var(--space-9)) var(--space-10); }
.frame--dusk .frame__inner { width: 100%; }
.frame--dusk .frame__words { grid-column: 1 / 7; }
.frame--dusk .btn { margin-top: var(--space-6); }
.sign { margin-top: var(--space-7); }
.sign .signoff { display: block; color: var(--paper); }
.sign .small { display: block; margin-top: var(--space-1); color: var(--mist); }

/* 8. Footer, on into the night */
.footer { background: var(--navy); color: var(--mist); padding-block: var(--space-8) var(--space-6); border-top: 1px solid var(--slate); }
.footer__inner { row-gap: var(--space-6); align-items: start; }
.footer__brand { grid-column: 1 / 4; }
.footer__lockup { width: 180px; height: auto; }
.footer__col { font-family: var(--font-display); font-size: 15px; line-height: 1.6; }
.footer__col li:first-child { color: var(--paper); font-weight: 500; }
.footer__col--company { grid-column: 4 / 7; }
.footer__col--contact { grid-column: 7 / 10; }
.footer a { color: var(--light-teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline-block; padding-block: 10px; margin-block: -10px; }
.footer__legal { grid-column: 1 / -1; padding-top: var(--space-5); border-top: 1px solid var(--slate); font-family: var(--font-display); font-size: 15px; }

/* 9. The drawings: ink lines, ground fills, clouds, stars. Each scene sets --w for its line weight. */
.scene { width: 100%; height: auto; overflow: visible; --w: 2.4; }
.scene--sky, .scene--dusk { --w: 2.6; }
.scene--table { --w: 2.6; }
.problems__sign .scene { --w: 3.4; }
.scene .i, .scene .a, .scene .s, .scene .t, .scene .p, .scene .sh, .scene .sl {
  fill: none; stroke: var(--pen); stroke-width: var(--w); stroke-linecap: round; stroke-linejoin: round;
}
.scene .s { fill: var(--pen-bg); }
.scene .sh { fill: var(--pen-cloud); }
.scene .sl { stroke: var(--navy); stroke-width: calc(var(--w) * 0.8); }
.scene .thin { stroke-width: calc(var(--w) * 0.7); }
.scene .a { stroke: var(--pen-accent); }
.scene .faint, .scene .h { stroke: var(--pen-2); }
.scene .t { stroke: var(--pen-2); stroke-dasharray: 6 9; }
.scene .t2 { stroke: var(--pen-2); stroke-dasharray: 0.012 0.02; }
.scene .p { stroke-width: 2; }
.scene .f { fill: var(--pen-cloud); }
.scene .d { fill: var(--pen); opacity: 0.9; }
.scene .af { fill: var(--pen-accent); }
.scene .df { fill: var(--pen); }
.scene .bg, .scene .rd { fill: var(--pen-bg); }
.scene .wl { fill: var(--stone); }
.edge--clouds .f { fill: var(--paper); }
.edge--hills .n { fill: var(--navy); }

/* 10. Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
  .frame--sky .frame__words, .frame--dusk .frame__words { grid-column: 1 / 10; }
  .frame--split .frame__words, .frame--flip .frame__words { grid-column: 1 / 8; grid-row: 1; }
  .frame--split .frame__art, .frame--flip .frame__art { grid-column: 2 / 12; grid-row: 2; margin-top: var(--space-7); }
  .frame--landing .frame__words, .bring { grid-column: 1 / 9; }
  .frame--landing .frame__art { grid-column: 1 / 13; grid-row: 2; margin-block: var(--space-5) var(--space-6); }
  .bring { grid-row: 3; }
  .method__stage { grid-column: 7 / 13; }
  .method__beats { grid-column: 1 / 7; }
  .beat { min-height: 56svh; }
  .problems .frame__words { grid-column: 1 / 9; }
  .problems__sign { grid-column: 9 / 13; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col--company { grid-column: 1 / 5; }
  .footer__col--contact { grid-column: 5 / 9; }
}

/* Narrow screens: the opening and closing scenes switch to their portrait drawings, under the words. */
@media (max-width: 899px), (max-aspect-ratio: 4/5) {
  .frame--sky, .frame--dusk { display: block; min-height: 0; padding-block: calc(var(--header-height) + var(--space-8)) 0; }
  .frame--sky .frame__words, .frame--dusk .frame__words { grid-column: 1 / -1; }
  .scene--wide { display: none; }
  .scene--tall { display: block; margin-top: var(--space-6); }
}

/* The narrowest phones: no room for the reading beside the button, and it only decorates. */
@media (max-width: 339px) { .js .alt { display: none; } }

/* Phones 360px and wider: once landed, the full lockup returns to the header. Narrower phones keep the mark, as the
   lockup and the button do not fit side by side there. */
@media (min-width: 360px) and (max-width: 767px) {
  .top:has(.alt.is-done) .logo-mark { display: none; }
  .top:has(.alt.is-done):not(.is-light) .logo--dark, .top.is-light:has(.alt.is-done) .logo--light { display: block; }
}

/* 11. Phone */
@media (max-width: 767px) {
  .logo { width: 140px; }
  .btn { padding: 0 var(--space-3); font-size: 15px; }
  .top .logo, .top.is-light .logo { display: none; }
  .logo-mark { display: block; }
  .top.is-light .logo-mark--dark, .top:not(.is-light) .logo-mark--light { display: none; }
  .js .alt { position: static; translate: none; margin: 0 auto 0 var(--space-3); font-size: 15px; }
  .alt__tape, .alt__label { display: none; }
  .alt__read { min-width: 0; }
  /* The logo keeps its size; once landed, the faded reading gives its space back. */
  .top__logo, .logo, .logo-mark { flex: none; }
  .js .alt.is-done { position: absolute; }
  .frame--split, .frame--flip { padding-block: var(--space-9); }
  .frame--flip { padding-bottom: var(--space-10); }
  .frame--split .frame__inner { min-height: 0; }
  .frame--split .frame__words, .frame--flip .frame__words, .frame--split .frame__art, .frame--flip .frame__art { grid-column: 1 / -1; }
  .frame--split .frame__art, .frame--flip .frame__art { grid-row: 2; margin-top: var(--space-6); }
  .frame--landing .frame__words, .bring, .frame--landing .frame__art { grid-column: 1 / -1; }
  .frame--landing .frame__art { grid-row: 2; margin-block: var(--space-5) var(--space-6); }
  .bring { grid-row: 3; }
  .bring__list li::before { display: none; }
  .method .frame__inner { display: block; }
  .method__stage { position: sticky; top: var(--header-height); z-index: 2; background: var(--paper); padding-block: var(--space-2); }
  .method__scene { position: static; }
  .beat { min-height: 50svh; }
  .problems .frame__words, .problems__sign { grid-column: 1 / -1; }
  .problems__sign { grid-row: 2; width: 60%; justify-self: end; margin-top: var(--space-4); }
  .cards { grid-row: 3; grid-template-columns: minmax(0, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col--company { grid-column: 1 / 8; }
  .footer__col--contact { grid-column: 8 / 13; }
}

/* 12. Motion: drawings ink themselves in as they arrive; clouds and paper drift with the scroll where browsers can.
   Starting states exist only under .motion, which the head script sets when motion is allowed. Text never waits. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .motion .ink-in .i:not(.t2), .motion .ink-in .s, .motion .ink-in .a, .motion .ink-in .sh, .motion .ink-in .sl { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .motion .ink-in .s, .motion .ink-in .sh { fill-opacity: 0; }
  .motion .ink-in .cl, .motion .ink-in .d, .motion .ink-in .af, .motion .ink-in .p, .motion .ink-in .t, .motion .ink-in .t2,
  .motion .ink-in .df, .motion .ink-in .wl, .motion .ink-in .rd, .motion .ink-in .bg { opacity: 0; }
  .motion .ink-in.is-in .i:not(.t2), .motion .ink-in.is-in .s, .motion .ink-in.is-in .a, .motion .ink-in.is-in .sh, .motion .ink-in.is-in .sl {
    stroke-dashoffset: 0; fill-opacity: 1;
    transition: stroke-dashoffset 1.5s var(--ease) calc(var(--d, 0) * 120ms), fill-opacity 600ms var(--ease) calc(var(--d, 0) * 120ms + 500ms);
  }
  .motion .ink-in.is-in .cl, .motion .ink-in.is-in .af, .motion .ink-in.is-in .p, .motion .ink-in.is-in .t, .motion .ink-in.is-in .t2,
  .motion .ink-in.is-in .df, .motion .ink-in.is-in .wl, .motion .ink-in.is-in .rd, .motion .ink-in.is-in .bg {
    opacity: 1; transition: opacity 900ms var(--ease) calc(var(--d, 0) * 120ms);
  }
  .motion .ink-in.is-in .d { opacity: 0.9; transition: opacity 900ms var(--ease) calc(var(--d, 0) * 120ms); }
  .scene .tw { animation: twinkle 3.6s ease-in-out infinite alternate; }
  .method__scene .steam path { animation: steam 2.6s ease-in-out infinite; }
  .method__scene .steam path + path { animation-delay: 0.9s; }
  @supports (animation-timeline: view()) {
    .motion .drift { animation: drift linear both; animation-timeline: view(); }
    .motion .cloud-far { animation: float linear both; animation-timeline: view(); }
  }
}
@keyframes twinkle { from { opacity: 0.9; } to { opacity: 0.25; } }
@keyframes steam { 0%, 100% { translate: 0 0; opacity: 0.35; } 50% { translate: 0 -6px; opacity: 1; } }
@keyframes drift { from { translate: -60px 24px; } to { translate: 80px -36px; } }
@keyframes float { from { translate: 40px 0; } to { translate: -40px 0; } }
@media (prefers-reduced-motion: reduce) {
  .btn, .top, .alt { transition: none; }
}

/* 13. Print */
@media print {
  .top, .alt { position: static; }
  .motion .ink-in * { stroke-dashoffset: 0 !important; opacity: 1 !important; fill-opacity: 1 !important; }
}

/* 8. Product screens: each product's own look. Everything here is scoped to [data-ui] and uses the ui tokens. */
[data-ui] {
  --ui-canvas: var(--paper); --ui-card: var(--surface); --ui-ink: var(--ink); --ui-ink-2: var(--slate);
  --ui-navy: var(--navy); --ui-accent: var(--teal); --ui-accent-text: var(--teal-press); --ui-low: var(--teal-press);
  --ui-info: var(--navy); --ui-lift: var(--shadow-lift);
  font-family: var(--font-display); font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0;
  color: var(--ui-ink); font-variant-numeric: tabular-nums; text-align: left;
}
[data-ui] *, [data-ui] *::before, [data-ui] *::after { box-sizing: border-box; }
[data-ui] p, [data-ui] h1, [data-ui] ul, [data-ui] ol { margin: 0; padding: 0; list-style: none; }
[data-ui] svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Shared parts: app frame, sidebar, cards, tags, pills, monograms, avatars */
[data-ui].dk { display: grid; grid-template-columns: 152px minmax(0, 1fr); background: var(--ui-canvas); overflow: hidden; }
[data-ui] .dk-side { background: var(--ui-side); border-right: 1px solid var(--ui-line); padding: 14px 10px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
[data-ui] .dk-org { display: flex; align-items: center; gap: 8px; padding: 2px 6px; font-weight: 600; white-space: nowrap; }
[data-ui] .dk-org svg { margin-left: auto; color: var(--ui-ink-2); width: 13px; height: 13px; }
[data-ui] .dk-org__mark { width: 22px; height: 22px; border-radius: var(--radius-ui-sm); background: var(--ui-navy); color: var(--surface); font-size: 10px; font-weight: 600; display: grid; place-items: center; flex: none; }
[data-ui] .dk-nav { display: flex; flex-direction: column; gap: 2px; }
[data-ui] .dk-nav span { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 7px; color: var(--ui-ink-2); font-weight: 500; white-space: nowrap; }
[data-ui] .dk-nav span.is-on { background: var(--ui-card); color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-line), var(--ui-lift); }
[data-ui] .dk-nav span.is-on svg { color: var(--ui-accent); }
[data-ui] .dk-nav b { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ui-ink-2); }
[data-ui] .dk-side__label { padding: 0 8px 4px; font-size: 12px; color: var(--ui-ink-2); }
[data-ui] .dk-watch span { font-weight: 400; font-size: 12.5px; color: var(--ui-ink); gap: 8px; padding-left: 9px; }
[data-ui] .dk-watch i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
[data-ui] .dk-main { min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
[data-ui] .dk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-ui] .dk-head .dk-title { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ui-navy); }
[data-ui] .dk-head .dk-title + p { margin-top: 2px; font-size: 12px; color: var(--ui-ink-2); }
[data-ui] .dk-search { display: flex; align-items: center; gap: 7px; width: 170px; height: 30px; padding: 0 10px; background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--radius-ui); color: var(--ui-ink-2); font-size: 12px; }
[data-ui] .dk-search svg { width: 13px; height: 13px; }
[data-ui] .dk-card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--radius-ui-lg); box-shadow: var(--ui-lift); }
[data-ui] .dk-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--ui-line-soft); }
[data-ui] .dk-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--ui-side); border-radius: var(--radius-ui); }
[data-ui] .dk-seg span { padding: 3px 9px; border-radius: var(--radius-ui-sm); font-size: 12px; font-weight: 500; color: var(--ui-ink-2); white-space: nowrap; }
[data-ui] .dk-seg span.is-on { background: var(--ui-card); color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-line), var(--ui-lift); }
[data-ui] .dk-seg b { margin-left: 5px; font-weight: 500; color: var(--ui-ink-2); }
[data-ui] .dk-sort { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ui-ink-2); white-space: nowrap; }
[data-ui] .dk-sort svg { width: 13px; height: 13px; }
[data-ui] .dk-tag { justify-self: start; display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: var(--radius-ui-sm); font-size: 12px; font-weight: 500; white-space: nowrap; }
[data-ui] .dk-tag--done { background: var(--ui-low-tint); color: var(--ui-accent-text); }
[data-ui] .dk-tag--info { background: var(--ui-info-tint); color: var(--ui-info); }
[data-ui] .dk-tag--warn { background: var(--ui-med-tint); color: var(--ui-med); }
[data-ui] .dk-tag--plain { background: var(--ui-side); color: var(--ui-ink-2); }
[data-ui] .dk-pill { display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 9px 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
[data-ui] .dk-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
[data-ui] .dk-pill--high { background: var(--ui-high-tint); color: var(--ui-high); }
[data-ui] .dk-pill--med { background: var(--ui-med-tint); color: var(--ui-med); }
[data-ui] .dk-pill--low { background: var(--ui-low-tint); color: var(--ui-low); }
[data-ui] .dk-mono { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-ui-sm); background: var(--ui-side); color: var(--ui-ink-2); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
[data-ui].dk .dk-mono { width: 22px; height: 22px; font-size: 9.5px; }
[data-ui] .is-high { background: var(--ui-high-dot); }
[data-ui] .is-med { background: var(--ui-med-dot); }
[data-ui] .is-low { background: var(--ui-low-dot); }
[data-ui] .av { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ui-info-tint); color: var(--ui-navy); font-size: 9.5px; font-weight: 600; box-shadow: 0 0 0 2px var(--ui-card); }
[data-ui] .av + .av { margin-left: -3px; }
[data-ui] .av--teal { background: var(--ui-low-tint); color: var(--ui-accent-text); }
[data-ui] .av--warm { background: var(--ui-warm-avatar); color: var(--ui-warm-ink); }

/* The debtor book */
[data-ui] .dk-summary { padding: 12px 16px 11px; }
[data-ui] .dk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-ui] .dk-stats > div + div { padding-left: 16px; border-left: 1px solid var(--ui-line-soft); }
[data-ui] .dk-label { font-size: 12px; font-weight: 500; color: var(--ui-ink-2); }
[data-ui] .dk-value { margin-top: 1px; font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
[data-ui] .dk-bar { display: flex; gap: 2px; height: 8px; margin-top: 12px; border-radius: 4px; overflow: hidden; }
[data-ui] .dk-bar i { display: block; }
[data-ui] .dk-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12px; color: var(--ui-ink-2); }
[data-ui] .dk-legend li { display: flex; align-items: center; gap: 6px; }
[data-ui] .dk-legend i { width: 8px; height: 8px; border-radius: 2px; }
[data-ui] .dk-legend b { font-weight: 500; color: var(--ui-ink); }
[data-ui] .dk-table { overflow: hidden; }
[data-ui] .dk-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 66px 88px 72px; column-gap: 12px; align-items: center; min-height: 36px; padding: 0 12px; border-bottom: 1px solid var(--ui-line-soft); }
[data-ui] .dk-row--head { min-height: 30px; background: var(--ui-head); font-size: 12px; font-weight: 500; color: var(--ui-ink-2); }
[data-ui] .num { text-align: right; }
[data-ui] .dk-cust { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 500; }
[data-ui] .dk-cust > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui] .dk-muted { color: var(--ui-ink-2); }
[data-ui] .dk-late { color: var(--ui-high); font-weight: 600; }
[data-ui] .dk-due { color: var(--ui-med); font-weight: 500; }
[data-ui] .dk-flagged { position: relative; background: var(--ui-high-wash); }
[data-ui] .dk-flagged::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ui-high-dot); z-index: 1; }
[data-ui] .dk-row--total { border-bottom: 0; font-weight: 600; background: var(--ui-head); }

/* The exception queue */
[data-ui].bk .bk-list { overflow: hidden; }
[data-ui].bk .bk-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 76px auto; align-items: center; column-gap: 12px; min-height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--ui-line-soft); }
[data-ui].bk .bk-row.is-on { position: relative; background: var(--ui-selected); }
[data-ui].bk .bk-row.is-on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ui-accent); }
[data-ui].bk .bk-what p:first-child { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui].bk .bk-what p + p { font-size: 12px; color: var(--ui-ink-2); }
[data-ui].bk .bk-amt { text-align: right; font-weight: 500; }
[data-ui].bk .bk-acts { display: flex; gap: 4px; }
[data-ui].bk .bk-acts span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-ui-sm); border: 1px solid var(--ui-line); background: var(--ui-card); color: var(--ui-ink-2); }
[data-ui].bk .bk-acts span:first-child { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--surface); }
[data-ui].bk .bk-acts svg { width: 13px; height: 13px; }

/* The approval queue */
[data-ui].iv .iv-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; align-items: start; }
[data-ui].iv .iv-row { padding: 10px 12px; border-bottom: 1px solid var(--ui-line-soft); }
[data-ui].iv .iv-row.is-on { position: relative; background: var(--ui-selected); }
[data-ui].iv .iv-row.is-on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ui-accent); }
[data-ui].iv .iv-title { font-weight: 500; }
[data-ui].iv .iv-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
[data-ui].iv .iv-meta .avs { margin-left: auto; display: flex; }
[data-ui].iv .iv-detail { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
[data-ui].iv .iv-stage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ui-ink-2); white-space: nowrap; }
[data-ui].iv .iv-dtitle { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--ui-navy); }
[data-ui].iv .iv-dmeta { font-size: 12px; color: var(--ui-ink-2); margin-top: -6px; }
[data-ui].iv .iv-post { padding: 12px; border: 1px solid var(--ui-line-soft); border-radius: var(--radius-ui); background: var(--ui-head); line-height: 1.5; }
[data-ui].iv .iv-approvers li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ui-line-soft); }
[data-ui].iv .iv-approvers li > div { flex: 1; }
[data-ui].iv .iv-approvers li p:first-child { font-weight: 500; }
[data-ui].iv .iv-approvers li p + p { font-size: 12px; color: var(--ui-ink-2); }
[data-ui].iv .iv-ok { color: var(--ui-accent); }
[data-ui].iv .iv-wait { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ui-med-dot); }

/* The care record */
[data-ui].ch { display: flex; flex-direction: column; background: var(--ui-canvas); }
[data-ui].ch .ch-top { display: flex; align-items: center; gap: 22px; padding: 12px 18px; background: var(--ui-card); border-bottom: 1px solid var(--ui-line); }
[data-ui].ch .ch-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ui-navy); white-space: nowrap; }
[data-ui].ch .ch-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--ui-accent); color: var(--surface); font-size: 10px; font-weight: 600; }
[data-ui].ch .ch-tabs { display: flex; gap: 4px; }
[data-ui].ch .ch-tabs span { padding: 5px 10px; border-radius: 999px; color: var(--ui-ink-2); font-weight: 500; }
[data-ui].ch .ch-tabs span.is-on { background: var(--ui-low-tint); color: var(--ui-accent-text); }
[data-ui].ch .ch-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
[data-ui].ch .ch-person { display: flex; align-items: center; gap: 12px; }
[data-ui].ch .ch-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ui-warm-avatar); color: var(--ui-warm-ink); font-size: 15px; font-weight: 600; }
[data-ui].ch .ch-name { font-size: 18px; font-weight: 600; color: var(--ui-navy); line-height: 1.2; }
[data-ui].ch .ch-sub { font-size: 12.5px; color: var(--ui-ink-2); }
[data-ui].ch .ch-owner { margin-left: auto; }
[data-ui].ch .ch-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
[data-ui].ch .ch-card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 12px; padding: 14px; box-shadow: var(--ui-lift); }
[data-ui].ch .ch-card--warm { background: var(--ui-warm); border-color: var(--ui-warm-line); }
[data-ui].ch .ch-h { font-size: 14px; font-weight: 600; color: var(--ui-navy); margin-bottom: 6px; }
[data-ui].ch .ch-times li { display: grid; grid-template-columns: 16px 62px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--ui-line-soft); }
[data-ui].ch .ch-times li > span:nth-child(2) { color: var(--ui-ink-2); }
[data-ui].ch .ch-times .done { color: var(--ui-accent); }
[data-ui].ch .ch-times .done svg { width: 14px; height: 14px; stroke-width: 2; }
[data-ui].ch .ch-times .todo { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ui-ring); }
[data-ui].ch .ch-times li.is-now { background: var(--ui-low-tint); margin: 0 -8px; padding: 7px 8px; border-radius: 8px; border-top-color: transparent; }
[data-ui].ch .ch-now { font-size: 11px; font-weight: 600; color: var(--ui-accent-text); }
[data-ui].ch .ch-helps li { padding: 7px 0; border-top: 1px solid var(--ui-warm-line); line-height: 1.45; }

/* Small views: one moment from each product, as a card */
[data-ui].kc { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--ui-card); }
[data-ui].kc .kc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ui-ink-2); }
[data-ui].kc .kc-who { display: flex; align-items: center; gap: 10px; }
[data-ui].kc .kc-title { font-size: 14px; font-weight: 600; color: var(--ui-navy); line-height: 1.3; }
[data-ui].kc .kc-sub { font-size: 12px; color: var(--ui-ink-2); }
[data-ui].kc .kc-body { font-size: 12.5px; line-height: 1.5; color: var(--ui-ink); }
[data-ui].kc .kc-trail li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 6px 0 6px 18px; font-size: 12.5px; }
[data-ui].kc .kc-trail li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ui-accent); }
[data-ui].kc .kc-trail li:first-child::before { background: var(--ui-dot-muted); }
[data-ui].kc .kc-trail li > span:last-child { color: var(--ui-ink-2); white-space: nowrap; }
[data-ui].kc .kc-log li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--ui-line-soft); }
[data-ui].kc .kc-log li p:first-child { font-size: 11.5px; color: var(--ui-ink-2); }
[data-ui].kc .kc-log li p + p { font-size: 12.5px; line-height: 1.45; }

/* Narrow windows show each product's narrow layout */
@container screen (max-width: 560px) {
  [data-ui].dk { grid-template-columns: minmax(0, 1fr); font-size: 14px; }
  [data-ui] .dk-side, [data-ui] .dk-search, [data-ui] .dk-sort, [data-ui] .dk-row--head { display: none; }
  [data-ui] .dk-main { padding: 14px; }
  [data-ui] .dk-head .dk-title { font-size: 17px; }
  [data-ui] .dk-summary { padding: 12px 12px 11px; }
  [data-ui] .dk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-ui] .dk-stats > div:first-child { display: none; }
  [data-ui] .dk-stats > div:nth-child(2) { padding-left: 0; border-left: 0; }
  [data-ui] .dk-value { font-size: 19px; }
  [data-ui] .dk-legend { gap: 4px 9px; font-size: 11.5px; }
  [data-ui] .dk-tools { padding: 8px 10px; }
  [data-ui] .dk-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cust risk" "bal days"; row-gap: 2px; padding: 9px 10px; }
  [data-ui] .dk-row > :nth-child(1) { grid-area: cust; }
  [data-ui] .dk-row > :nth-child(2) { grid-area: bal; text-align: left; font-weight: 500; }
  [data-ui].dk .dk-mono { display: none; }
  [data-ui] .dk-row > :nth-child(3) { grid-area: days; font-size: 12px; }
  [data-ui] .dk-row > :nth-child(3)::after { content: " days past terms"; }
  [data-ui] .dk-row > :nth-child(4) { grid-area: risk; justify-self: end; }
  [data-ui] .dk-row--total { grid-template-areas: "cust bal"; }
  [data-ui] .dk-row--total > :nth-child(2) { text-align: right; }
  [data-ui] .dk-row--total > :nth-child(n+3) { display: none; }
  /* Each exception keeps its four actions, on the line with its status. */
  [data-ui].bk .bk-row { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 8px; }
  [data-ui].bk .bk-row > .dk-mono { display: grid; grid-column: 1; grid-row: 1 / 3; align-self: start; }
  [data-ui].bk .bk-what { grid-column: 2; grid-row: 1; }
  [data-ui].bk .bk-amt { grid-column: 3; grid-row: 1; }
  [data-ui].bk .bk-row > .dk-tag { grid-column: 2; grid-row: 2; }
  [data-ui].bk .bk-acts { grid-column: 2 / 4; grid-row: 2; justify-self: end; }
  [data-ui].bk .bk-acts span { width: 24px; height: 24px; }
  [data-ui].iv .iv-split { grid-template-columns: minmax(0, 1fr); }
  [data-ui].iv .iv-detail { display: none; }
  [data-ui].ch .ch-top { gap: 14px; padding: 12px 14px; }
  [data-ui].ch .ch-tabs span:nth-child(n+3), [data-ui].ch .ch-owner { display: none; }
  [data-ui].ch .ch-cols { grid-template-columns: minmax(0, 1fr); }
  /* The routine shows the hours either side of now, so what helps on a hard day stays in view. */
  [data-ui].ch .ch-times li:nth-child(-n+3), [data-ui].ch .ch-times li:nth-child(n+6) { display: none; }
}

/* The smallest phones */
@container screen (max-width: 300px) {
  [data-ui].bk .bk-acts { gap: 3px; }
  [data-ui].bk .bk-acts span { width: 22px; height: 22px; }
  [data-ui].ch .ch-tabs span:nth-child(n+2) { display: none; }
}

/* Middle widths: the sidebar folds to a rail of icons, and each exception's status moves under its description */
@container screen (width > 560px) and (width < 760px) {
  [data-ui].dk { grid-template-columns: 52px minmax(0, 1fr); }
  [data-ui] .dk-side { align-items: center; padding: 14px 8px; }
  [data-ui] .dk-org { gap: 0; padding: 2px 0; font-size: 0; }
  [data-ui] .dk-org svg, [data-ui] .dk-nav b, [data-ui] .dk-watch { display: none; }
  [data-ui] .dk-nav span { justify-content: center; gap: 0; width: 34px; padding: 0; font-size: 0; }
  [data-ui].bk .bk-row { grid-template-columns: 22px minmax(0, 1fr) 76px auto; row-gap: 6px; }
  [data-ui].bk .bk-row > .dk-mono { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  [data-ui].bk .bk-what { grid-column: 2; grid-row: 1; }
  [data-ui].bk .bk-row > .dk-tag { grid-column: 2; grid-row: 2; }
  [data-ui].bk .bk-amt { grid-column: 3; grid-row: 1 / 3; }
  [data-ui].bk .bk-acts { grid-column: 4; grid-row: 1 / 3; }
  [data-ui].iv .iv-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  [data-ui].iv .iv-meta .avs { display: none; }
}