/* web/site/site.css — layout for the public door (web/index.html) and the legal pages (web/legal/*.html).
   Every colour, size and duration is a web/design.css token; nothing here invents one. Cage: one gold per
   screen (.is-gold on the pricing figure; the mark's point on the hero), hairlines not shadows, 4 px grid,
   logical properties so RTL mirrors for free, motion only in the title sequence and on state changes,
   nothing under prefers-reduced-motion (design.css zeroes every duration; the title never plays). */

/* ---------- 0 · page frame ---------- */
.site { position: relative; }
.s-page { position: relative; z-index: 1; }
html[data-lang-pending] .s-page { visibility: hidden; }
.s-wrap { inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .s-wrap { padding-inline: 24px; } }
@media (min-width: 1100px) { .s-wrap { padding-inline: 32px; } }

.s-section { padding-block: 48px; border-block-start: 1px solid var(--hair); }
.s-section > .s-wrap { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 720px) { .s-section { padding-block: 64px; } .s-section > .s-wrap { gap: 20px; } }
/* No content-visibility on the sections: the page is ~700 nodes, and the placeholder heights made anchor
   links (#contact, #pricing) land short and the scrollbar lie. Measured, not assumed (docs/INTEGRATION_S.md). */

.s-h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; }
.s-h3 { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; }
.s-section-title { max-inline-size: 640px; }
.s-p { font-size: var(--fs-row); line-height: var(--lh-row); max-inline-size: 640px; }
.s-muted { color: var(--text-2); }
.s-hint { font-size: var(--fs-meta); line-height: var(--lh-meta); }
.s-note { max-inline-size: 640px; }
.s-after { padding-block-start: 4px; }
.s-link { text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.s-link:hover { text-decoration-color: var(--text); }
.s-cta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.s-fig { font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: 500; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.s-ph { color: var(--text-2); }

/* ---------- 1 · header ---------- */
.s-header { border-block-end: 1px solid var(--hair); }
.s-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; block-size: 56px; }
.s-wordmark { display: inline-flex; align-items: center; block-size: 44px; }
.s-nav { display: flex; align-items: center; gap: 8px; }
.s-lang { display: inline-flex; gap: 4px; }

/* ---------- 2 · hero ---------- */
.s-hero { position: relative; padding-block: 48px 40px; display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 720px) { .s-hero { padding-block: 80px 56px; gap: 56px; } }
.s-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.s-hero .s-mark { inline-size: 64px; block-size: 64px; }
@media (min-width: 720px) { .s-hero .s-mark { inline-size: 96px; block-size: 96px; } }
.s-hero-eyebrow { padding-block-start: 8px; }
.s-statement { display: flex; flex-direction: column; gap: 12px; max-inline-size: 760px; font-weight: 500; }
.s-statement-ar, .s-statement-en { display: block; }
.s-statement-ar { font-size: var(--fs-page); line-height: var(--lh-page); order: 1; }
.s-statement-en { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 400; color: var(--text-2); order: 2; }
html[lang="en"] .s-statement-en { font-size: var(--fs-page); line-height: var(--lh-page); font-weight: 500; color: var(--text); letter-spacing: var(--track-display); order: 1; }
html[lang="en"] .s-statement-ar { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 400; color: var(--text-2); order: 2; }
@media (min-width: 720px) {
  .s-statement-ar, html[lang="en"] .s-statement-en { font-size: var(--fs-hero); line-height: var(--lh-hero); }
  .s-statement-en, html[lang="en"] .s-statement-ar { font-size: var(--fs-card); line-height: var(--lh-card); }
}
.s-hero-sub { max-inline-size: 560px; color: var(--text); }

/* the four routes: hairline-separated columns */
.s-routes-eyebrow { padding-block-end: 12px; }
.s-routes { display: grid; grid-template-columns: 1fr; border-block-start: 1px solid var(--hair); }
.s-route { display: flex; flex-direction: column; gap: 8px; padding-block: 20px; border-block-start: 1px solid var(--hair); }
.s-route:first-child { border-block-start: 0; }
.s-route .s-p { flex: 1; }
.s-route .btn { align-self: flex-start; margin-block-start: 8px; }
.s-route-n { font-family: var(--font-mono); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); direction: ltr; align-self: flex-start; }
@media (min-width: 720px) {
  .s-routes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-route { border-block-start: 0; padding: 24px 20px 24px 0; border-inline-start: 1px solid var(--hair); padding-inline: 20px; }
  .s-route:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .s-route:last-child { padding-inline-end: 0; }
}

/* the two door forms */
.s-formwrap { border-block-start: 1px solid var(--hair); padding-block: 24px; }
.s-form { display: flex; flex-direction: column; gap: 16px; max-inline-size: 720px; }
.s-form-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .s-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .s-span2 { grid-column: 1 / -1; } }
.s-textarea { block-size: auto; min-block-size: 88px; padding-block: 8px; resize: vertical; }
.s-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body); line-height: var(--lh-body); cursor: pointer; }
.s-check input { inline-size: 16px; block-size: 16px; margin: 2px 0 0; accent-color: var(--text); flex: none; }
.s-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.s-status { min-block-size: var(--lh-body); }
.s-turnstile { min-block-size: 0; }

/* ---------- 3 · proof strip ---------- */
.s-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-end: 1px solid var(--hair); }
.s-figure { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-block-start: 1px solid var(--hair); border-inline-start: 1px solid var(--hair); }
.s-figure:nth-child(2n+1) { border-inline-start: 0; padding-inline-start: 0; }
.s-figure-l { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
@media (min-width: 720px) {
  .s-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-figure { padding: 20px; border-inline-start: 1px solid var(--hair); }
  .s-figure:nth-child(2n+1) { border-inline-start: 1px solid var(--hair); padding-inline-start: 20px; }
  .s-figure:first-child { border-inline-start: 0; padding-inline-start: 0; }
}

/* ---------- 4 · what we do: rows ---------- */
.s-list { display: flex; flex-direction: column; border-block-end: 1px solid var(--hair); }
.s-list-row { display: flex; flex-direction: column; gap: 6px; padding-block: 16px; border-block-start: 1px solid var(--hair); }
.s-list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s-list-name { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 500; }
.s-state { block-size: 24px; padding-inline: 8px; font-size: var(--fs-meta); }
.s-state-coming { color: var(--text-2); }
@media (min-width: 720px) {
  .s-list-row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 8px 24px; align-items: start; }
  .s-list-row .s-p { max-inline-size: none; }
}

/* ---------- 5 · pipeline ---------- */
.s-pipe { display: flex; flex-direction: column; counter-reset: node; }
.s-node { position: relative; display: flex; align-items: center; gap: 12px; min-block-size: 44px; padding-inline-start: 16px; border-inline-start: 1px solid var(--hair-strong); }
.s-node-n { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-2); direction: ltr; inline-size: 20px; flex: none; }
.s-node-name { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 500; }
.s-node-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); }
.s-node-human .s-node-name { color: var(--text); }
.s-dot { inline-size: 7px; block-size: 7px; border-radius: var(--r-circle); background: var(--grey); flex: none; display: inline-block; }
.s-dot-amber { background: var(--amber); }
@media (min-width: 900px) {
  .s-pipe { flex-direction: row; align-items: stretch; border-block: 1px solid var(--hair); }
  .s-node { flex: 1 1 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-block-size: 96px; padding: 16px 12px 16px 12px; padding-inline: 12px; border-inline-start: 1px solid var(--hair); }
  .s-node:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .s-node-n { inline-size: auto; }
  /* the flow's direction: a hairline chevron on the inline-end edge of each node but the last */
  .s-node:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: -5px; inline-size: 8px; block-size: 8px; border-block-start: 1px solid var(--hair-strong); border-inline-end: 1px solid var(--hair-strong); transform: translateY(-50%) rotate(45deg); }
  html[dir="rtl"] .s-node:not(:last-child)::after { transform: translateY(-50%) rotate(-45deg); }
}

/* ---------- 6 · three-column blocks (case study, pricing) ---------- */
.s-cols3 { display: grid; grid-template-columns: 1fr; border-block-start: 1px solid var(--hair); }
.s-col { display: flex; flex-direction: column; gap: 8px; padding-block: 16px; border-block-start: 1px solid var(--hair); }
.s-col:first-child { border-block-start: 0; }
@media (min-width: 720px) {
  .s-cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-col { border-block-start: 0; border-inline-start: 1px solid var(--hair); padding: 20px 20px; padding-inline: 20px; }
  .s-col:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .s-col:last-child { padding-inline-end: 0; }
  .s-col .s-p { max-inline-size: none; }
}

/* ---------- 7 · crew grid: a hairline lattice, the human reviewer on his own row ---------- */
.s-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-end: 1px solid var(--hair); }
.s-seat { display: flex; flex-direction: column; gap: 4px; padding: 12px; min-block-size: 96px; border-block-start: 1px solid var(--hair); border-inline-start: 1px solid var(--hair); }
.s-seat:nth-child(2n+1) { border-inline-start: 0; }
.s-seat:nth-child(2n+1) { padding-inline-start: 0; }
.s-seat-name { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 500; }
.s-seat-role { font-size: var(--fs-body); line-height: var(--lh-body); flex: 1; }
.s-seat-model { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.s-seat-human { grid-column: 1 / -1; min-block-size: 0; border-inline-start: 0; padding-inline-start: 0; }
@media (min-width: 720px) {
  .s-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-seat { padding: 16px; border-inline-start: 1px solid var(--hair); }
  .s-seat:nth-child(2n+1) { border-inline-start: 1px solid var(--hair); padding-inline-start: 16px; }
  .s-seat:nth-child(4n+1), .s-seat-human { border-inline-start: 0; padding-inline-start: 0; }
}
@media (min-width: 1100px) {
  .s-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .s-seat:nth-child(4n+1) { border-inline-start: 1px solid var(--hair); padding-inline-start: 16px; }
  .s-seat:nth-child(5n+1), .s-seat-human { border-inline-start: 0; padding-inline-start: 0; }
}

/* ---------- 8 · pricing ---------- */
.s-price { display: flex; flex-direction: column; gap: 8px; padding-block: 8px 8px; }
.s-price-figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.s-price-from, .s-price-unit { font-size: var(--fs-row); line-height: var(--lh-row); color: var(--text-2); }
.s-price-sar { padding-block-end: 8px; }

/* ---------- 9 · people ---------- */
.s-people { display: grid; grid-template-columns: 1fr; border-block: 1px solid var(--hair); }
.s-person { display: flex; align-items: baseline; gap: 12px; min-block-size: 44px; padding-block: 12px; border-block-start: 1px solid var(--hair); }
.s-person:first-child { border-block-start: 0; }
.s-person-name { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; }
.s-person-seat { font-size: var(--fs-body); line-height: var(--lh-body); }
@media (min-width: 720px) {
  .s-people { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .s-person { flex-direction: column; gap: 4px; border-block-start: 0; border-inline-start: 1px solid var(--hair); padding: 16px; padding-inline: 16px; }
  .s-person:first-child { border-inline-start: 0; padding-inline-start: 0; }
}

/* ---------- 10 · FAQ ---------- */
.s-faq { display: flex; flex-direction: column; border-block-end: 1px solid var(--hair); }
.s-q { border-block-start: 1px solid var(--hair); }
.s-q-s { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 56px; padding-block: 12px; font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 500; cursor: pointer; list-style: none; }
.s-q-s::-webkit-details-marker { display: none; }
.s-q-s::after { content: ""; inline-size: 8px; block-size: 8px; flex: none; border-block-end: 1px solid var(--text-2); border-inline-end: 1px solid var(--text-2); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-open) var(--ease-open); }
.s-q[open] .s-q-s::after { transform: rotate(225deg) translateY(-2px); }
.s-q-a { padding-block: 0 16px; max-inline-size: 720px; }

/* ---------- 11 · close and footer ---------- */
.s-close > .s-wrap { align-items: flex-start; }
.s-close-line { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; max-inline-size: 640px; }
.s-footer { border-block-start: 1px solid var(--hair); padding-block: 32px 40px; }
.s-footer > .s-wrap { display: flex; flex-direction: column; gap: 16px; }
.s-legal { display: grid; grid-template-columns: 1fr; gap: 0; border-block: 1px solid var(--hair); }
.s-legal-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px; align-items: baseline; min-block-size: 36px; padding-block: 8px; border-block-start: 1px solid var(--hair); }
.s-legal-row:first-child { border-block-start: 0; }
.s-legal-row .s-p { max-inline-size: none; font-size: var(--fs-body); line-height: var(--lh-body); }
html[dir="rtl"] .s-legal-row .num { text-align: right; }
.s-docs { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-body); line-height: var(--lh-body); }
.s-docs .s-link { display: inline-flex; align-items: center; min-block-size: 44px; }
@media (min-width: 720px) { .s-legal { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .s-legal-row:nth-child(2) { border-block-start: 0; } }

/* ---------- 12 · title sequence (design §6 boot, re-set in Plex) ----------
   Beats: shutters retract 0–400 ms · mark assembles 300–1100 · letters rise 1100–2200 (80 ms each) ·
   hairline draws 2300–2700 · three lines online 2700/2930/3160 · paper bloom 3700–4300 · fade by 4700.
   The overlay exists only while <html data-title> is set (boot.js); nothing here runs otherwise. */
.t-seq { display: none; }
html[data-title] .t-seq { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--canvas); overflow: hidden; }
html[data-title="done"] .t-seq { animation: t-out var(--dur-env) var(--ease-env) forwards; pointer-events: none; }
@keyframes t-out { to { opacity: 0; visibility: hidden; } }
/* safety: whatever happens to the script, the overlay lets go at 5 s */
html[data-title="playing"] .t-seq { animation: t-out-safety var(--dur-env) var(--ease-env) 4.6s forwards; }
@keyframes t-out-safety { to { opacity: 0; visibility: hidden; } }
.t-plate { position: absolute; inset: 0; background: radial-gradient(60% 55% at 28% 18%, rgba(184, 148, 56, .11), transparent 70%), radial-gradient(55% 60% at 78% 72%, rgba(107, 107, 117, .18), transparent 70%); }
.t-shutter { position: absolute; inset-block: 0; inline-size: 50%; background: var(--card); border-inline: 1px solid var(--hair); animation: t-shutter-start var(--dur-env) var(--ease-env) 60ms forwards; }
.t-shutter-start { inset-inline-start: 0; }
.t-shutter-end { inset-inline-end: 0; animation-name: t-shutter-end; }
@keyframes t-shutter-start { to { transform: translateX(-100%); } }
@keyframes t-shutter-end { to { transform: translateX(100%); } }
html[dir="rtl"] .t-shutter-start { animation-name: t-shutter-end; }
html[dir="rtl"] .t-shutter-end { animation-name: t-shutter-start; }
.t-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 16px; }
.t-markwrap { position: relative; }
.t-mark .ring { stroke-dasharray: 1; stroke-dashoffset: 1; transform-origin: 50% 50%; animation: t-draw 500ms var(--ease-open) 300ms forwards, breathe var(--dur-breathe) ease-in-out 1100ms infinite; }
.t-mark .crown { stroke-dasharray: 1; stroke-dashoffset: 1; animation: t-draw 300ms var(--ease-open) forwards; }
.t-mark .crown:nth-of-type(1) { animation-delay: 500ms; }
.t-mark .crown:nth-of-type(2) { animation-delay: 580ms; }
.t-mark .crown:nth-of-type(3) { animation-delay: 660ms; }
.t-mark .crown:nth-of-type(4) { animation-delay: 740ms; }
.t-mark .crown:nth-of-type(5) { animation-delay: 820ms; }
.t-mark .point { opacity: 0; animation: t-in var(--dur-open) var(--ease-open) 1000ms forwards; }
.t-mark .sweep { opacity: 0; animation: sweep var(--dur-sweep) linear 1100ms infinite, t-in var(--dur-open) var(--ease-open) 1100ms forwards; }
@keyframes t-draw { to { stroke-dashoffset: 0; } }
@keyframes t-in { to { opacity: 1; } }
.t-word { display: flex; gap: 0; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; letter-spacing: var(--track-wordmark); text-transform: uppercase; direction: ltr; }
.t-l, .t-sp { display: inline-block; opacity: 0; transform: translateY(8px); animation: t-rise 300ms var(--ease-open) forwards; }
.t-sp { inline-size: .5em; }
.t-word > :nth-child(1) { animation-delay: 1100ms; } .t-word > :nth-child(2) { animation-delay: 1180ms; } .t-word > :nth-child(3) { animation-delay: 1260ms; }
.t-word > :nth-child(4) { animation-delay: 1340ms; } .t-word > :nth-child(5) { animation-delay: 1420ms; } .t-word > :nth-child(6) { animation-delay: 1500ms; }
.t-word > :nth-child(7) { animation-delay: 1580ms; } .t-word > :nth-child(8) { animation-delay: 1660ms; } .t-word > :nth-child(9) { animation-delay: 1740ms; }
.t-word > :nth-child(10) { animation-delay: 1820ms; } .t-word > :nth-child(11) { animation-delay: 1900ms; } .t-word > :nth-child(12) { animation-delay: 1980ms; }
.t-word > :nth-child(13) { animation-delay: 2060ms; }
@keyframes t-rise { to { opacity: 1; transform: none; } }
.t-rule { inline-size: min(320px, 70vw); block-size: 1px; background: var(--hair-strong); transform: scaleX(0); transform-origin: 0 50%; animation: t-rule var(--dur-env) var(--ease-env) 2300ms forwards; }
html[dir="rtl"] .t-rule { transform-origin: 100% 50%; }
@keyframes t-rule { to { transform: scaleX(1); } }
.t-lines { display: flex; flex-direction: column; align-items: center; gap: 4px; min-block-size: 72px; }
.t-line { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); opacity: 0; transform: translateY(4px); animation: t-rise var(--dur-open) var(--ease-open) forwards; }
.t-line:nth-child(1) { animation-delay: 2700ms; } .t-line:nth-child(2) { animation-delay: 2930ms; } .t-line:nth-child(3) { animation-delay: 3160ms; }
.t-bloom { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--paper) 0%, transparent 62%); opacity: 0; transform: scale(.2); animation: t-bloom 600ms var(--ease-env) 3700ms forwards; pointer-events: none; }
@keyframes t-bloom { 40% { opacity: .55; } to { opacity: 0; transform: scale(1.6); } }
.t-skip { position: absolute; inset-block-end: 24px; inset-inline-end: 24px; min-block-size: 44px; padding-inline: 16px; }

@media (prefers-reduced-motion: reduce) { .t-seq { display: none !important; } }

/* ---------- 13 · legal pages ---------- */
.legal .s-wrap { max-inline-size: 760px; }
.legal-head { border-block-end: 1px solid var(--hair); padding-block: 12px; }
.legal-head .s-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 44px; }
.legal-banner { border-block-end: 1px solid var(--hair); }
.legal-banner .s-wrap { display: flex; flex-direction: column; gap: 4px; padding-block: 12px; }
.legal-banner .line { color: var(--text); }
.legal-banner .num, .legal-meta .num { white-space: nowrap; }
.legal-doc { padding-block: 40px 48px; display: flex; flex-direction: column; gap: 24px; }
.legal-doc + .legal-doc { border-block-start: 1px solid var(--hair-strong); }
.legal-doc h1 { font-size: var(--fs-page); line-height: var(--lh-page); font-weight: 500; }
.legal-doc h2 { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
.legal-clause { display: flex; flex-direction: column; gap: 8px; padding-block-start: 16px; border-block-start: 1px solid var(--hair); }
.legal-clause p, .legal-clause li { font-size: var(--fs-row); line-height: var(--lh-row); }
.legal-clause ul { display: flex; flex-direction: column; gap: 6px; padding-inline-start: 18px; list-style: disc; }
.legal-clause .s-ph { font-family: var(--font-mono); }
.legal-jump { display: inline-flex; align-items: center; min-block-size: 44px; }
.legal-foot { border-block-start: 1px solid var(--hair); padding-block: 24px 40px; }
.legal-foot .s-wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-body); }
.legal-foot .s-link { display: inline-flex; align-items: center; min-block-size: 44px; }