/* PAiR design system, "Aspen" (John, September 2026). One sheet, three surfaces.

   The marketing site, PAiR for People and the PAiR workbench all load this file first and then a thin
   surface sheet (marketing-aspen.css, pd-aspen.css, app-aspen.css) that maps their own class names
   onto these tokens and primitives. Rules of the house:
     - tokens are --ap-*; surface sheets alias their legacy tokens to them, they never redefine colours
     - hairlines are drawn in currentColor, so a black or mint panel gets the right lines for free
     - one radius (none), one shadow (none), one accent (mint on ink), reading text in the serif,
       headlines in the grotesk with tight tracking, labels in mono uppercase with a square bullet
     - light and dark are both token sets; nothing below hard-codes a colour except the two brand greens
   Modelled on aspensearch.com; borrowed with intent, not copied. */

:root {
  --ap-paper: #ffffff; --ap-paper-1: #f8f8f7; --ap-paper-2: #f2f2f0; --ap-ink: #232323; --ap-ink-soft: #4a4642; --ap-ink-mute: #6f6f6f;
  --ap-grey: #d9d9d9; --ap-grey-2: #ecebe8; --ap-black: #232323; --ap-black-deep: #161616;
  --ap-mint: #60D2B9; --ap-mint-soft: rgba(96, 210, 185, .18); --ap-green: #0d7368; --ap-green-deep: #0a5a52;
  --ap-amber: #E5A33D; --ap-red: #b42318;
  --ap-line: var(--ap-ink); --ap-hair: 1px solid var(--ap-line);
  --ap-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --ap-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ap-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --ap-ease: cubic-bezier(.16, 1, .3, 1); --ap-ease-inout: cubic-bezier(.87, 0, .13, 1);
  --ap-nav-h: 60px; --ap-pad: 20px;
}
:root[data-theme="dark"] {
  --ap-paper: #161616; --ap-paper-1: #1b1b1b; --ap-paper-2: #1f1f1f; --ap-ink: #f6f6f4; --ap-ink-soft: #d9d9d9; --ap-ink-mute: #a8a29e;
  --ap-grey: #4a4642; --ap-grey-2: #2a2928; --ap-black: #232323; --ap-black-deep: #0d0d0d;
}

/* ---- Type roles ---- */
.ap-h1 { font-family: var(--ap-sans); font-weight: 400; letter-spacing: -0.04em; font-size: clamp(56px, 10.5vw, 176px); line-height: .84; text-wrap: balance; margin: 0; }
.ap-h1-page { font-size: clamp(44px, 6.4vw, 104px); line-height: .92; }
.ap-h2 { font-family: var(--ap-sans); font-weight: 400; letter-spacing: -0.04em; font-size: clamp(34px, 4.6vw, 76px); line-height: .98; text-wrap: balance; margin: 0; }
.ap-h3 { font-family: var(--ap-sans); font-weight: 400; letter-spacing: -0.03em; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.06; margin: 0; }
.ap-h1 em, .ap-h2 em, .ap-h3 em { font-family: var(--ap-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--ap-green); }
.ap-body-lg { font-family: var(--ap-serif); font-size: clamp(21px, 2vw, 32px); line-height: 1.18; letter-spacing: -0.015em; margin: 0; }
.ap-body { font-family: var(--ap-serif); font-size: 17px; line-height: 1.4; letter-spacing: -0.005em; margin: 0; max-width: 46ch; }
.ap-body-lg .ap-mono, .ap-body .ap-mono { font-family: var(--ap-mono); }
.ap-mono, .ap-label { font-family: var(--ap-mono); font-size: 12px; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 400; margin: 0; }
.ap-label { display: flex; align-items: center; gap: .7em; }
.ap-label::before { content: ''; width: 8px; height: 8px; background: currentColor; flex: none; }
.ap-digit { font-family: var(--ap-sans); font-size: clamp(64px, 8.6vw, 140px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; display: block; }
.ap-digit-sm { font-size: clamp(56px, 6vw, 96px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Panels and grids: hairlines in the current text colour ---- */
.ap-grid { display: grid; }
.ap-cols-1 { grid-template-columns: minmax(0, 1fr); }
.ap-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-cols-2-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ap-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-grid > * + * { border-left: 1px solid currentColor; }
.ap-cells { display: grid; gap: 1px; background: currentColor; }
.ap-cells > * { background: var(--ap-paper); color: var(--ap-ink); }
.ap-cells > .ap-mint { background: var(--ap-mint); }
.ap-cells > .ap-grey { background: var(--ap-grey); }
.ap-cells > .ap-black { background: var(--ap-black); color: #fff; }
.ap-panel { padding: var(--ap-pad); min-width: 0; }
.ap-panel-flush { padding: 0; }
.ap-black { background: var(--ap-black); color: #fff; }
.ap-mint { background: var(--ap-mint); color: #232323; }
.ap-grey { background: var(--ap-grey); color: #232323; }
.ap-stack { display: flex; flex-direction: column; gap: var(--ap-pad); }
.ap-sec { border-top: 1px solid currentColor; }
.ap-sechead { display: flex; flex-direction: column; gap: 28px; padding: var(--ap-pad) var(--ap-pad) 40px; }
.ap-sechead-split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; }
.ap-sechead-split > div { display: flex; flex-direction: column; gap: 28px; }
.ap-sec > .ap-sechead + .ap-grid, .ap-sec > .ap-sechead + .ap-cells, .ap-sec > .ap-sechead + .ap-track, .ap-sec > .ap-sechead + .ap-tablewrap { border-top: 1px solid currentColor; }
.ap-sticky { position: sticky; top: var(--ap-nav-h); align-self: start; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: min(60vh, 520px); }

/* ---- Buttons: full-width hairline rows whose fill sweeps in from the left ---- */
.ap-btnstack { display: flex; flex-direction: column; }
.ap-btnstack-end { justify-content: flex-end; }
.ap-btn { --btn-fg: var(--ap-ink); --btn-bg: var(--ap-paper);
  position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  height: 60px; padding: 0 var(--ap-pad); width: 100%; box-sizing: border-box; color: var(--btn-fg); background: var(--btn-bg); text-decoration: none;
  font-family: var(--ap-sans); font-size: 16px; font-weight: 400; letter-spacing: -0.02em; transition: color .25s var(--ap-ease) .15s; border: 0; border-top: 1px solid var(--btn-fg); cursor: pointer; }
.ap-btnstack .ap-btn:first-child { border-top: 0; }
.ap-btnstack-end .ap-btn { border-top: 1px solid var(--btn-fg); }
.ap-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--btn-sweep, var(--btn-fg)); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ap-ease); }
.ap-btn:hover, .ap-btn:focus-visible { color: var(--btn-bg); }
.ap-btn:hover::before, .ap-btn:focus-visible::before { transform: scaleX(1); }
.ap-btn-solid { --btn-fg: var(--ap-paper); --btn-bg: var(--ap-ink); --btn-sweep: var(--ap-mint); }
.ap-btn-solid:hover, .ap-btn-solid:focus-visible { color: #232323; }   /* ink on mint in both themes (John 2026-09-20: the black must not wash out) */
.ap-black .ap-btn { --btn-fg: #fff; --btn-bg: var(--ap-black); }
.ap-mint .ap-btn { --btn-fg: #232323; --btn-bg: var(--ap-mint); }
.ap-mint .ap-btn-solid { --btn-fg: var(--ap-mint); --btn-bg: #232323; --btn-sweep: #fff; }
.ap-textlink { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; align-self: flex-start; color: inherit; }
.ap-textlink:hover { color: var(--ap-green); }
.ap-black .ap-textlink:hover, .ap-mint .ap-textlink:hover { color: inherit; opacity: .7; }

/* ---- Lists ---- */
.ap-monolist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--ap-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.1; }
.ap-monolist li::before { content: '\2013\00a0'; opacity: .6; }
ol.ap-monolist { counter-reset: n; }
ol.ap-monolist li::before { counter-increment: n; content: counter(n, decimal-leading-zero) '\00a0\00a0'; opacity: 1; }
.ap-numlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ap-numlist li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid currentColor; font-family: var(--ap-serif); font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }
.ap-numlist li:last-child { border-bottom: 1px solid currentColor; }
.ap-numlist .ap-mono { padding-top: 4px; }

/* ---- Cells: numbered, iconed columns; icons draw themselves on when the cell scrolls in ---- */
.ap-cell { display: flex; flex-direction: column; gap: 18px; min-height: 260px; }
.ap-cell > .ap-mono:first-child { opacity: .7; }
.ap-cell .ap-h3 { max-width: 16ch; }
.ap-cell .ap-monolist { margin-top: auto; }
.ap-icon { width: 44px; height: 44px; display: block; }
.ap-icon * { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ap-ease); }
.ap-icon *:nth-child(2) { transition-delay: .25s; } .ap-icon *:nth-child(3) { transition-delay: .5s; } .ap-icon *:nth-child(4) { transition-delay: .75s; }
.is-in .ap-icon * { stroke-dashoffset: 0; }

/* ---- Big numbers: rolling digit columns ---- */
.ap-stat { display: flex; flex-direction: column; gap: 28px; min-height: 300px; justify-content: space-between; }
.ap-roll { display: inline-flex; height: 1em; overflow: hidden; vertical-align: top; }
.ap-roll-digits { display: inline-flex; }
.ap-roll-d { display: inline-block; height: 1em; overflow: hidden; }
.ap-roll-col { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.8s var(--ap-ease); }
.ap-roll-col > span { display: block; height: 1em; line-height: 1; }
.ap-roll.is-in .ap-roll-col { transform: translateY(calc(var(--n, 0) * -1em)); }
.ap-roll-ch { display: inline-block; height: 1em; line-height: 1; }

/* ---- Split-text reveal: words rise from below a clipped line ---- */
.ap-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.ap-w > span { display: inline-block; transition: transform 1.1s var(--ap-ease); transition-delay: calc(var(--i, 0) * 45ms); }
.ap-split .ap-w > span { transform: translateY(112%); }
.ap-split.is-in .ap-w > span { transform: none; }

/* ---- Dither canvas (painted by aspen-dither.js) and the pulse ---- */
.ap-dither { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.ap-corner { position: absolute; left: var(--ap-pad); bottom: var(--ap-pad); color: #fff; mix-blend-mode: difference; }
.ap-pulse { width: 8px; height: 8px; background: var(--ap-mint); border: 1px solid var(--ap-ink); display: inline-block; animation: ap-pulse 2.2s ease-in-out infinite; flex: none; }
@keyframes ap-pulse { 50% { opacity: .35; } }

/* ---- The product's own pieces, hairlined: the Decision HQ card, the bar chart, the fit ring, the ticker ---- */
.ap-qcard { border: 1px solid currentColor; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--ap-paper); color: var(--ap-ink); }
.ap-qcard-top, .ap-qcard-foot { display: flex; align-items: center; gap: 10px; }
.ap-when, .ap-go { margin-left: auto; }
.ap-dot { width: 8px; height: 8px; background: var(--ap-amber); flex: none; animation: ap-pulse 2.2s ease-in-out infinite; }
.ap-dot.is-win { background: var(--ap-mint); animation: none; }
.ap-pill { font-family: var(--ap-mono); font-size: 11px; text-transform: uppercase; letter-spacing: -0.02em; border: 1px solid currentColor; padding: 3px 6px; }
.ap-qcard-head { font-family: var(--ap-serif); font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.ap-bars { display: flex; align-items: flex-end; gap: 20px; height: 260px; margin: 0; padding-top: 24px; }
.ap-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.ap-bar i { display: block; height: 0; background: var(--ap-black); transition: height 1.6s var(--ap-ease); }
.ap-bar.is-hi i { background: var(--ap-mint); border: 1px solid var(--ap-black); box-sizing: border-box; }
.is-in .ap-bar i, .ap-bars.is-in .ap-bar i { height: calc(var(--h) - 44px); }
.ap-bar em { font-style: normal; }
.ap-ring { --score: 0; width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--ap-black) calc(var(--score) * 1%), transparent 0); }
.ap-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; }
.ap-ring::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--ap-paper); border: 1px solid currentColor; }
.ap-grey .ap-ring::after { background: var(--ap-grey); }
.ap-ring span { position: relative; z-index: 1; font-size: 40px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ap-receipt { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid currentColor; padding-top: 14px; }
.ap-receipt .ap-icon { width: 28px; height: 28px; flex: none; }
.ap-ticker { height: 168px; overflow: hidden; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.ap-ticker ul { list-style: none; margin: 0; padding: 0; animation: ap-tick 14s linear infinite; }
.ap-ticker li { display: flex; gap: 14px; padding: 6px 0; font-family: var(--ap-mono); font-size: 12px; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.ap-ticker li span { opacity: .78; }   /* WCAG 1.4.3: .6 measured 3.72:1 on the grey panel (axe, 4 Oct 2026); .78 clears 4.5:1 */
@keyframes ap-tick { to { transform: translateY(-50%); } }
.ap-loopfig { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ap-loopfig svg { width: 100%; max-width: 260px; }
.ap-loopfig-arc { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s var(--ap-ease); }
.is-in .ap-loopfig-arc { stroke-dashoffset: 0; animation: ap-loop-run 7s linear 1.8s infinite; stroke-dasharray: 34 66; }   /* Kate, Sifter #9483: it stopped at Earn; now it circulates */
@keyframes ap-loop-run { to { stroke-dashoffset: -100; } }
.ap-paused .ap-loopfig-arc { animation-play-state: paused; }
.ap-loopfig-lbl { font-family: var(--ap-mono); font-size: 11px; letter-spacing: -0.02em; }

/* ---- Tables: hairline rows, mono headers; on a phone they become labelled rows ---- */
.ap-tablewrap { overflow-x: auto; }
.ap-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ap-table th, .ap-table td { text-align: left; padding: 16px var(--ap-pad); border-bottom: 1px solid currentColor; font-family: var(--ap-serif); font-size: 17px; letter-spacing: -0.005em; vertical-align: top; }
.ap-table th { font-family: var(--ap-mono); font-size: 12px; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 400; }
.ap-table th + th, .ap-table td + td { border-left: 1px solid currentColor; }
.ap-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Search: an icon that slides open to type (John 2026-09-21) ---- */
.ap-search { display: inline-flex; align-items: center; height: 36px; border: 1px solid transparent; transition: border-color .3s var(--ap-ease); }
.ap-search-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.ap-search-input { width: 0 !important; min-width: 0 !important; opacity: 0; border: 0 !important; outline: 0; background: transparent !important; color: inherit; font-family: var(--ap-serif); font-size: 16px; padding: 0 !important; transition: width .45s var(--ap-ease), opacity .3s var(--ap-ease), padding .45s var(--ap-ease); }   /* !important: a product class on the same input (client-dropdown) sets its own min-width */
.ap-search.is-open, .ap-search:focus-within { border-color: currentColor; }
.ap-search.is-open .ap-search-input, .ap-search:focus-within .ap-search-input { width: 240px !important; opacity: 1; padding: 0 12px 0 0 !important; }
.ap-search-input::placeholder { color: currentColor; opacity: .45; }

/* ---- Forms: hairline rows, mono labels, serif input text ---- */
.ap-fields { display: flex; flex-direction: column; border-top: 1px solid currentColor; }
.ap-field { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; border-bottom: 1px solid currentColor; padding: 0 var(--ap-pad); min-height: 60px; transition: border-color .3s var(--ap-ease), box-shadow .3s var(--ap-ease); }
.ap-field > .ap-label::before, .ap-field > .ap-mono::before { display: none; }
.ap-field input, .ap-field textarea, .ap-field select { font-family: var(--ap-serif); font-size: 18px; letter-spacing: -0.005em; border: 0; outline: 0; background: transparent; color: inherit; padding: 18px 0; width: 100%; caret-color: var(--ap-mint); }
.ap-field input::placeholder, .ap-field textarea::placeholder { color: currentColor; opacity: .45; }
.ap-field:focus-within { border-bottom-color: var(--ap-mint); box-shadow: inset 0 -1px 0 var(--ap-mint); }   /* a 2px mint underline, no fill, no layout shift */
.ap-foot { font-family: var(--ap-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ap-foot a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ap-foot a:hover { color: var(--ap-green); }

/* ---- Photos: grayscale with the green tint, colour under the pointer ---- */
.ap-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03);
  filter: grayscale(1) contrast(1.06) brightness(1.03); transition: transform 1.6s var(--ap-ease), filter .8s var(--ap-ease); }
.is-in .ap-photo, .ap-hero-art .ap-photo { transform: none; }
.ap-tile { position: relative; aspect-ratio: 1 / 1; border-bottom: 1px solid currentColor; overflow: hidden; }
.ap-tile::after, .ap-hero-art:has(.ap-photo)::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(13, 115, 104, .62), rgba(13, 115, 104, .12) 55%, rgba(35, 35, 35, .3)); mix-blend-mode: multiply; transition: opacity .8s var(--ap-ease); }
.ap-tile:hover .ap-photo, .ap-hero-art:hover .ap-photo { filter: none; }
.ap-tile:hover::after, .ap-hero-art:has(.ap-photo):hover::after { opacity: 0; }
.ap-tile-idx, .ap-photo-cap { position: absolute; z-index: 1; color: #fff; mix-blend-mode: difference; }
.ap-tile-idx { left: var(--ap-pad); top: var(--ap-pad); }
.ap-photo-cap { left: var(--ap-pad); bottom: var(--ap-pad); }

/* ---- Phones: grids stack, dividers turn horizontal ---- */
@media (max-width: 900px) {
  .ap-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-grid.ap-cols-3 { grid-template-columns: minmax(0, 1fr); }
  .ap-grid.ap-cols-3 > * + * { border-left: 0; border-top: 1px solid currentColor; }
  .ap-sticky { position: static; min-height: 0; }
  .ap-stat { min-height: 220px; }
}
@media (max-width: 700px) {
  .ap-grid.ap-cols-2, .ap-grid.ap-cols-2-wide, .ap-cells.ap-cols-4, .ap-cells.ap-cols-3 { grid-template-columns: minmax(0, 1fr); }
  .ap-grid > * + * { border-left: 0; border-top: 1px solid currentColor; }
  .ap-cell, .ap-stat { min-height: 0; }
  .ap-stat { min-height: 200px; gap: 20px; }
  .ap-sechead-split { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ap-field { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 10px var(--ap-pad) 0; }
  .ap-field input, .ap-field textarea, .ap-field select { padding: 6px 0 14px; }
  .ap-tablewrap { overflow: visible; }
  .ap-table { min-width: 0; }
  .ap-table thead { display: none; }
  .ap-table, .ap-table tbody, .ap-table tr, .ap-table td { display: block; }
  .ap-table tr { border-bottom: 1px solid currentColor; padding: 12px 0 14px; }
  .ap-table tbody tr:last-child { border-bottom: 0; }
  .ap-table td, .ap-table td + td { border: 0; padding: 4px var(--ap-pad); }
  .ap-table td:first-child { font-family: var(--ap-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; padding-bottom: 8px; }
  .ap-table td[data-col]::before { content: attr(data-col) ': '; font-family: var(--ap-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; opacity: .6; }
}

/* WCAG 2.2.2: the pause control in the corner (base.html) flips this class on <html>; the marquee rule lives in marketing-aspen.css */
.ap-paused .ap-ticker ul, .ap-paused .ap-dot, .ap-paused .ap-pulse { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ap-ticker ul, .ap-dot, .ap-pulse, .ap-loopfig-arc { animation: none; }
  .ap-roll-col, .ap-w > span, .ap-icon *, .ap-bar i, .ap-loopfig-arc, .ap-btn, .ap-btn::before, .ap-photo { transition: none; }
  .ap-split .ap-w > span { transform: none; }
  .ap-roll .ap-roll-col { transform: translateY(calc(var(--n, 0) * -1em)); }
  .ap-icon * { stroke-dashoffset: 0; }
  .ap-bar i { height: calc(var(--h) - 44px); }
}