/* ============================================================
   home-v3.css — the homepage, v3 (owner, 27 Sep 2026).

   Sections 1 and 2 are the owner's two files, used exactly:
   digital-crochet-weave.html (the hero board) and
   build-your-system.html (the board and catalog). Their classes
   are prefixed dc- so they cannot meet the site's .btn, .wrap or
   .price. Every colour is a --dc- token (tokens.css).

   Two deliberate departures from the files, both the owner's:
   - Text: 18px minimum for running text, 16px for labels, 20px on
     the service cards, which are 56px tap targets. The files used
     11-15px in places.
   - The service cards (.dc-cards) are new. On phones they come
     first and the board follows, smaller.

   Spacing, radii and the few heading sizes are the files' own
   values, not --sp or --text tokens: rounding them to the site's 8px scale would redraw the
   owner's layout. That is the one exception to "tokens only" here.
   ============================================================ */

/* ---- the dark bands ------------------------------------- */
.dc-band { background: var(--dc-deep); color: var(--dc-text); padding: 28px 20px 56px; }
.dc-band--build { padding-top: 56px; padding-bottom: 0; border-top: 1px solid var(--dc-line); }
.dc-wrap { max-width: 1320px; margin: 0 auto; }
.dc-band :focus-visible, .dc-sheet :focus-visible, .dc-dialog :focus-visible { outline: 3px solid var(--dc-gold-2); outline-offset: 3px; }
.dc-band a:not(.dc-btn):not(.dc-card):not(.dc-perkcard) { color: var(--dc-gold-2); }

/* ---- buttons (both files) ------------------------------- */
.dc-btn { display: inline-block; font: 600 var(--text-0)/1 var(--font-body); border-radius: 999px; padding: 16px 24px; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.dc-btn--gold { background: var(--dc-gold); color: var(--dc-ink); }
.dc-btn--gold:hover { color: var(--dc-ink); background: var(--dc-gold-2); }
.dc-btn--ghost { background: transparent; color: var(--dc-text); border-color: var(--dc-ghost-line); }

/* ============ 1. HERO — digital-crochet-weave.html ========= */
.dc-hero { display: grid; gap: 32px; align-items: center; max-width: 1280px; margin: 0 auto; }
@media (min-width: 980px) { .dc-hero { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.dc-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--dc-text-h1); line-height: 1.02; letter-spacing: -.035em; margin: 0; text-wrap: balance; color: var(--dc-text); }
.dc-sub { color: var(--dc-lede); font-size: var(--text-0); max-width: 36ch; margin: 18px 0 0; }
.dc-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dc-phone { margin-top: 20px; font-family: var(--font-display); font-weight: 600; color: var(--dc-text); font-size: var(--text-0); }
.dc-phone a { color: var(--dc-gold); white-space: nowrap; }
.dc-stage { position: relative; border-radius: 24px; background: var(--dc-stage); border: 1px solid var(--dc-line); overflow: hidden; }
.dc-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 4/3; max-width: 100%; }
.dc-controls { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; }
.dc-ctl { font: 500 var(--dc-text-small)/1 var(--font-body); color: var(--dc-text); background: var(--dc-glass); border: 1px solid var(--dc-line); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.dc-caption { color: var(--dc-muted); font-size: var(--dc-text-small); margin: 12px 4px 0; max-width: 72ch; }
.dc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dc-tab { font: 500 var(--dc-text-small)/1 var(--font-body); color: var(--dc-muted); background: transparent; border: 1px solid var(--dc-line); border-radius: 999px; padding: 12px 14px; min-height: 44px; cursor: pointer; }
.dc-tab[aria-selected="true"] { color: var(--dc-ink); background: var(--dc-gold); border-color: var(--dc-gold); font-weight: 600; }

/* ============ 2. BUILD YOUR SYSTEM — build-your-system.html = */
.dc-intro { margin: 0 0 28px; display: grid; gap: 14px; max-width: 760px; }
.dc-intro h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--dc-text-h1); line-height: 1.02; letter-spacing: -.035em; margin: 0; text-wrap: balance; color: var(--dc-text); }
.dc-lede { color: var(--dc-lede); font-size: var(--text-0); margin: 0; max-width: 60ch; }

.dc-auditbar { display: grid; gap: 18px; align-items: center; margin-bottom: 28px; padding: 22px; border-radius: 20px; background: linear-gradient(120deg, var(--dc-auditbar-a) 0%, var(--dc-panel-2) 60%, var(--dc-panel) 100%); border: 1px solid var(--dc-gold); }
@media (min-width: 860px) { .dc-auditbar { grid-template-columns: minmax(0, 1fr) auto; } }
.dc-auditbar h2, .dc-auditbar h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 600; letter-spacing: -.015em; margin: 0 0 6px; text-wrap: balance; color: var(--dc-text); }
.dc-auditbar p { margin: 0; color: var(--dc-lede); max-width: 70ch; font-size: var(--text-0); }
.dc-auditbar__cta { display: grid; gap: 8px; justify-items: start; }
.dc-scale { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dc-scale span { font-size: var(--dc-text-small); font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.dc-s-leak { background: var(--dc-s-leak-bg); color: var(--dc-s-leak); }
.dc-s-watch { background: var(--dc-s-watch-bg); color: var(--dc-s-watch); }
.dc-s-ok { background: var(--dc-s-ok-bg); color: var(--dc-s-ok); }

/* Cards first on phones, then the board, then the catalog. From
   1040px the board is the sticky left column the file designed and
   the cards sit beside it, above the catalog. */
.dc-layout { display: grid; gap: 28px; align-items: start; grid-template-areas: "cards" "board" "catalog"; }
.dc-cardsec { grid-area: cards; }
.dc-boardcol { grid-area: board; display: grid; gap: 12px; }
.dc-catalog { grid-area: catalog; }
@media (max-width: 1039px) { .dc-boardcol .dc-stage { max-width: 30rem; } }
@media (min-width: 1040px) {
  .dc-layout { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "board cards" "board catalog"; }
  .dc-boardcol { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); }
}

/* ---- the service cards: readable without glasses -------- */
.dc-cardsec h3 { font-family: var(--font-display); font-size: var(--text-1); font-weight: 600; margin: 0 0 12px; color: var(--dc-text); }
.dc-cards { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .dc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-card { display: grid; gap: 2px; align-content: center; min-height: var(--dc-tap); height: 100%; padding: 14px 16px; background: var(--dc-panel); border: 2px solid var(--dc-line-2); border-radius: 14px; color: var(--dc-text); text-decoration: none; font-size: var(--dc-text-card); line-height: 1.25; }
.dc-card:hover { border-color: var(--dc-gold); color: var(--dc-text); }
.dc-card__name { font-weight: 700; }
.dc-card__price { font-weight: 600; color: var(--dc-gold-2); }
.dc-card--soon .dc-card__price { color: var(--dc-muted); }

.dc-typebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dc-typebar label { font-weight: 600; font-size: var(--text-0); }
.dc-band select { font: 500 var(--text-0) var(--font-body); color: var(--dc-text); background: var(--dc-panel); border: 1px solid var(--dc-line-2); border-radius: 10px; padding: 10px 12px; min-width: 0; max-width: 100%; min-height: 48px; }
.dc-healthnote { background: var(--dc-health-bg); border: 1px solid var(--dc-health-line); color: var(--dc-gold-2); border-radius: 12px; padding: 12px 14px; font-size: var(--text-0); margin: 0; }
.dc-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-preset { font: 600 var(--dc-text-small)/1 var(--font-body); color: var(--dc-text); background: transparent; border: 1px solid var(--dc-line-2); border-radius: 999px; padding: 14px 16px; cursor: pointer; }
.dc-preset:hover { border-color: var(--dc-gold); }
.dc-preset small { font-size: inherit; font-weight: 500; color: var(--dc-muted); margin-left: 6px; }

.dc-catalog { display: grid; gap: 22px; padding-bottom: 24px; margin: 0; }
.dc-group h3 { font-family: var(--font-display); font-size: var(--text-1); font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; color: var(--dc-text); }
.dc-group > p { margin: 0 0 10px; color: var(--dc-muted); font-size: var(--text-0); max-width: 60ch; }
.dc-items { display: grid; gap: 8px; }
.dc-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: 14px; padding: 14px; cursor: pointer; font-size: var(--text-0); }
.dc-item:hover { border-color: var(--dc-line-2); }
.dc-item:has(input:checked) { border-color: var(--dc-gold); background: var(--dc-panel-2); }
.dc-item:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.dc-item input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--dc-gold); }
.dc-item:focus-within { outline: 3px solid var(--dc-gold-2); outline-offset: 2px; }
.dc-name { font-weight: 600; }
.dc-desc { grid-column: 2 / -1; color: var(--dc-muted); }
.dc-price { font-family: var(--font-display); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.dc-price small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--dc-text-small); color: var(--dc-muted); }
.dc-badge { display: inline-block; font-size: var(--dc-text-small); line-height: 1.3; font-weight: 700; color: var(--dc-gold-2); background: var(--dc-badge-bg); border-radius: 999px; padding: 1px 9px; margin-left: 6px; vertical-align: 1px; }

.dc-summary { position: sticky; bottom: 0; z-index: 2; background: var(--dc-summary-bg); border: 1px solid var(--dc-line-2); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; box-shadow: 0 -18px 40px -20px var(--dc-shadow); }
.dc-totals { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.dc-total { display: grid; }
.dc-total span { font-size: var(--dc-text-small); color: var(--dc-muted); }
.dc-total strong { font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dc-saving { color: var(--dc-green); font-size: var(--dc-text-small); font-weight: 600; }
.dc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dc-copyout { width: 100%; min-height: 120px; font: var(--dc-text-small)/1.45 var(--font-mono); color: var(--dc-text); background: var(--dc-panel); border: 1px solid var(--dc-line-2); border-radius: 10px; padding: 10px; }
.dc-status { font-size: var(--dc-text-small); color: var(--dc-green); min-height: 1em; margin: 0; }
.dc-fine { color: var(--dc-muted); font-size: var(--dc-text-small); margin: 0; }
.dc-fine b { color: var(--dc-text); user-select: all; }

/* ---- the sales sheet (and /services/<slug>/) ------------- */
.dc-sheet { position: fixed; inset: 0; z-index: 60; /* above the sticky .site-header (50) */ background: var(--dc-scrim); display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); }
.dc-sheet[hidden] { display: none !important; }
.dc-sheet__card { width: min(820px, 100%); background: var(--dc-sheet); color: var(--dc-text); border: 1px solid var(--dc-line-2); border-radius: 22px; padding: 22px; display: grid; gap: 22px; box-shadow: 0 40px 80px -30px var(--dc-shadow); font-size: var(--text-0); }
.dc-sheet__card--page { margin: 0 auto; }
.dc-sheet__head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.dc-sheet__head h1, .dc-sheet__head h2 { font-family: var(--font-display); font-size: clamp(1.625rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; margin: 0; text-wrap: balance; color: var(--dc-text); }
.dc-sheet__kicker { color: var(--dc-gold-2); font-weight: 600; font-size: var(--dc-text-small); margin: 0 0 6px; }
.dc-xbtn { font: 600 var(--dc-text-small)/1 var(--font-body); color: var(--dc-text); background: transparent; border: 1px solid var(--dc-line-2); border-radius: 999px; padding: 12px 16px; cursor: pointer; flex: none; text-decoration: none; }
.dc-sheet .dc-auditbar, .dc-sheet__card .dc-auditbar { margin: 0; padding: 16px; }
.dc-block :is(h2, h3) { font-family: var(--font-display); font-size: var(--text-1); font-weight: 600; margin: 0 0 10px; letter-spacing: -.01em; color: var(--dc-text); }
.dc-block ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; color: var(--dc-li); }
.dc-block > p { margin: 0; color: var(--dc-muted); }
.dc-leak { background: var(--dc-leak-bg); border: 1px solid var(--dc-leak-line); border-radius: 16px; padding: 16px; display: grid; gap: 12px; }
.dc-leak h2, .dc-leak h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-1); color: var(--dc-text); }
.dc-leak ul { color: var(--dc-leak-ink); }
.dc-calc { display: grid; gap: 10px; background: var(--dc-glass); border-radius: 12px; padding: 12px; }
.dc-calc .dc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--dc-leak-ink); }
.dc-calc label { color: var(--dc-leak-ink); min-width: 0; }
.dc-calc input { width: 120px; font: 600 var(--text-0) var(--font-body); color: var(--dc-text); background: var(--dc-panel); border: 1px solid var(--dc-line-2); border-radius: 8px; padding: 8px 10px; }
.dc-calc output { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--dc-leak-out); }
.dc-calc small { color: var(--dc-leak-small); font-size: var(--dc-text-small); }
.dc-benefits ul { list-style: none; padding: 0; }
.dc-benefits li { position: relative; padding-left: 26px; }
.dc-benefits li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--dc-green); box-shadow: 0 0 10px var(--dc-green); }
.dc-plist { display: grid; gap: 8px; }
.dc-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: 14px; padding: 12px 14px; }
.dc-pname { font-weight: 600; }
.dc-pdesc { grid-column: 1 / -1; color: var(--dc-muted); }
.dc-pprice { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-pprice small { display: block; font: 500 var(--dc-text-small) var(--font-body); color: var(--dc-muted); }
.dc-addbtn { font: 600 var(--dc-text-small)/1 var(--font-body); border-radius: 999px; padding: 12px 16px; cursor: pointer; border: 1px solid var(--dc-gold); background: transparent; color: var(--dc-gold-2); white-space: nowrap; text-decoration: none; }
a.dc-addbtn { color: var(--dc-gold-2); }
.dc-addbtn[aria-pressed="true"] { background: var(--dc-gold); color: var(--dc-ink); }
.dc-addbtn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 520px) { .dc-prow { grid-template-columns: minmax(0, 1fr) auto; } .dc-prow .dc-addbtn { grid-column: 1 / -1; justify-self: start; } }
.dc-sheet__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid var(--dc-line); padding-top: 16px; }

/* ---- "Book a call" panel -------------------------------- */
.dc-dialog { padding: 0; border: 0; background: transparent; width: min(820px, 100% - 32px); max-width: none; }
.dc-dialog::backdrop { background: var(--dc-scrim); }
.dc-placeholder { border: 2px dashed var(--dc-gold); border-radius: 14px; padding: 24px; min-height: 16rem; display: grid; place-content: center; text-align: center; gap: 8px; color: var(--dc-gold-2); font-weight: 600; }
.dc-placeholder span { color: var(--dc-muted); font-weight: 400; }

/* ============ 3. ABOUT — light, company only ================ */
.dc-about h2 { margin-bottom: var(--sp-2); }
.dc-about p + p { margin-top: var(--sp-2); }
/* The LLC flag (owner): off until he confirms the entity. Turn it on
   with <html data-llc="on">. The word lives here, not in the page
   text, so nothing crawls it while it is off. */
html[data-llc="on"] .dc-llc::after { content: " LLC"; }

@media (prefers-reduced-motion: reduce) { .dc-band *, .dc-sheet * { scroll-behavior: auto; } }

/* Phones: at the 16px label minimum the Replay/Pause pair covered the
   top-right module, so below 600px they sit under the board instead. */
@media (max-width: 599px) {
  .dc-controls { position: static; justify-content: flex-end; padding: 8px; border-top: 1px solid var(--dc-line); }
}
/* Phones: at 18px the sticky estimate bar filled a third of an 844px
   screen and hid the catalog behind it. It sits at the end of the
   catalog instead; the board above carries the running estimate. */
@media (max-width: 599px) { .dc-summary { position: static; border-bottom: 1px solid var(--dc-line-2); border-radius: 18px; } }

/* ---- header logo (owner, 27 Sep 2026): assets/img/brand/logo.png, served
   as a 2x WebP of it. The image carries the slogan, so the text lockup went.
   Dark mode swaps in logo-white.png's copy. */
.brand__logo { height: 3rem; width: auto; display: block; }
.dc-cal { width: 100%; height: min(70vh, 640px); border: 0; border-radius: 14px; background: var(--dc-text); }

/* ---- perks strip, timeline, About photos (owner, 27 Sep 2026) -------- */
.dc-band--perks { padding-top: 0; padding-bottom: 40px; }
.dc-perks { display: grid; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--dc-gold); border-radius: 20px; background: var(--dc-panel); }
@media (min-width: 980px) { .dc-perks { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; } }
.dc-perks h2 { font-family: var(--font-display); font-size: var(--text-2); font-weight: 600; margin: 0 0 6px; color: var(--dc-text); }
.dc-perks p { color: var(--dc-lede); margin: 0; font-size: var(--text-0); }
.dc-perks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dc-perks__list li { font-size: var(--dc-text-small); font-weight: 600; color: var(--dc-gold-2); background: var(--dc-badge-bg); border-radius: 999px; padding: 6px 12px; }

.dc-band--times { padding-top: 48px; padding-bottom: 56px; }
.dc-times__list { display: grid; gap: 8px; margin: 0 0 12px; }
@media (min-width: 720px) { .dc-times--home .dc-times__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-times__row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: 12px; padding: 12px 14px; font-size: var(--text-0); }
.dc-times__row.is-this { border-color: var(--dc-gold); background: var(--dc-panel-2); }
.dc-times__row dt { font-weight: 600; color: var(--dc-text); }
.dc-times__row dd { margin: 0; color: var(--dc-gold-2); font-weight: 600; }
.dc-times--home h2 { font-family: var(--font-display); font-size: var(--text-3); font-weight: 600; margin: 0 0 16px; color: var(--dc-text); }

.dc-photos { margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-1); }
.dc-photos img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.dc-photos__wide { aspect-ratio: 1600 / 686; object-fit: cover; }
.dc-photos__row { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .dc-photos__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dc-photos__row li { display: grid; gap: 4px; font-size: var(--dc-text-small); font-weight: 600; color: var(--c-ink); }
.dc-photos figcaption { font-size: var(--dc-text-small); color: var(--c-muted); }

/* ---- offers (owner, 27 Sep 2026) ------------------------------------- */
.dc-offer { display: grid; gap: 22px; max-width: 1100px; margin: 0 auto; align-items: start; }
@media (min-width: 900px) { .dc-offer { grid-template-columns: minmax(0, 1fr) 220px; } }
.dc-terms { display: grid; gap: 8px; margin: 0; }
.dc-terms div { background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: 12px; padding: 12px 14px; }
.dc-terms dt { font-size: var(--dc-text-small); color: var(--dc-muted); font-weight: 600; }
.dc-terms dd { margin: 2px 0 0; color: var(--dc-text); }
.dc-claim { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* The QR code only where someone could scan it with a different device:
   a wide screen with a mouse. Phones get the tap button alone. */
.dc-qr { display: none; margin: 0; text-align: center; background: var(--dc-text); color: var(--dc-ink); border-radius: 16px; padding: 14px; position: sticky; top: 88px; }
.dc-qr img { width: 100%; height: auto; }
.dc-qr figcaption { font-weight: 600; font-size: var(--dc-text-small); margin-top: 6px; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .dc-qr { display: block; } }
.dc-perkcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .dc-perkcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-perkcard { display: grid; gap: 6px; height: 100%; padding: 18px; background: var(--dc-panel); border: 2px solid var(--dc-line-2); border-radius: 16px; color: var(--dc-text); text-decoration: none; }
.dc-perkcard:hover { border-color: var(--dc-gold); color: var(--dc-text); }
.dc-perkcard b { font-size: var(--dc-text-card); }
.dc-perkcard span { color: var(--dc-muted); }
.dc-perkcard em { font-style: normal; color: var(--dc-gold-2); font-weight: 700; }
.dc-sheet__card--wide { width: min(1100px, 100%); }
.dc-stack { display: grid; gap: 22px; }
/* Footer links: 24px targets (Lighthouse target-size, WCAG 2.5.8). */
.site-footer li a { display: inline-block; min-height: 24px; padding-block: 2px; }
.dc-about p > a { display: inline-block; min-height: 24px; padding-block: 2px; }