/* ============================================================
   Arkiplan Estimator — styles for both modal and inline
   ============================================================ */

.est-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(14,14,16,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 24px;
  opacity: 0;
}
.est-overlay.open { display: flex !important; opacity: 1 !important; }
@keyframes est-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes est-popin { from { opacity: 0; transform: scale(0.97) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.est-overlay.open .est-modal { opacity: 1 !important; transform: none !important; }
.est-modal {
  width: 100%; max-width: 760px; background: var(--ark-paper);
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(14,14,16,0.4);
  animation: est-popin 320ms var(--ark-ease-out) forwards;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
}
.est-inline { display: block; background: var(--ark-paper); border: 1px solid var(--ark-line); border-radius: 24px; overflow: hidden; box-shadow: var(--ark-shadow-md); }

.est { display: flex; flex-direction: column; min-height: 0; flex: 1;
  /* When step() programmatically scrolls the widget into view after a
     Back/Next click, leave room for the sticky page nav so the widget's
     top edge doesn't end up tucked under it. Modal mode is unaffected —
     scroll-margin only applies to the document scroll, not to the
     overlay's own internal scroll. */
  scroll-margin-top: 88px;
}

/* Progress bar */
.est-bar { height: 3px; background: var(--ark-paper-3); position: relative; flex-shrink: 0; }
.est-bar-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--ark-pink); border-radius: 0 3px 3px 0; transition: width 320ms var(--ark-ease-out); }

/* Head */
.est-head { padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ark-line); flex-shrink: 0; }
.est-meta { font-size: 13px; color: var(--ark-ink-3); }
.est-meta span { font-weight: 600; color: var(--ark-ink); }
.est-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--ark-paper-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ark-ink); transition: background var(--ark-dur-fast); }
.est-close:hover { background: var(--ark-line); }

/* Body */
.est-body { padding: 32px; overflow-y: auto; flex: 1; }
.est-q { font-family: var(--ark-font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; text-wrap: pretty; }
.est-sub { font-size: 15px; color: var(--ark-ink-3); margin: 0 0 24px; max-width: 56ch; line-height: 1.5; }

/* Grid (type) */
.est-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 600px) { .est-grid { grid-template-columns: repeat(2, 1fr); } }

.est-card {
  background: var(--ark-paper); border: 1.5px solid var(--ark-line); border-radius: 14px;
  padding: 20px 16px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  transition: all var(--ark-dur-fast) var(--ark-ease-out);
  font-family: inherit;
}
.est-card:hover { border-color: var(--ark-ink-3); transform: translateY(-1px); }
.est-card.selected { border-color: var(--ark-pink); background: var(--ark-pink-soft); }
.est-card.selected .est-card-ico { background: white; }
.est-card-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--ark-paper-3); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; color: var(--ark-ink); }
.est-card-ico svg { width: 22px; height: 22px; }
.est-card-label { font-family: var(--ark-font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ark-ink); }
.est-card-sub { font-size: 12.5px; color: var(--ark-ink-3); line-height: 1.35; }

/* Area */
.est-area-wrap { padding: 8px 0; }
.est-area-num { font-family: var(--ark-font-display); font-weight: 800; font-size: 72px; letter-spacing: -0.04em; color: var(--ark-ink); text-align: center; line-height: 1; margin-bottom: 20px; }
.est-area-num span { background: linear-gradient(transparent 64%, var(--ark-pink-soft) 64%); padding: 0 6px; }
.est-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--ark-paper-3); border-radius: 999px; outline: none; }
.est-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; background: var(--ark-pink); border-radius: 50%; border: 4px solid white; box-shadow: 0 2px 8px rgba(249,52,108,0.4); cursor: pointer; }
.est-slider::-moz-range-thumb { width: 28px; height: 28px; background: var(--ark-pink); border-radius: 50%; border: 4px solid white; box-shadow: 0 2px 8px rgba(249,52,108,0.4); cursor: pointer; }
.est-area-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ark-ink-3); margin: 10px 2px 24px; }
.est-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.est-preset { background: var(--ark-paper); border: 1px solid var(--ark-line); border-radius: 10px; padding: 12px 8px; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; align-items: center; transition: all var(--ark-dur-fast); }
.est-preset b { font-size: 14px; font-weight: 600; color: var(--ark-ink); }
.est-preset span { font-size: 12px; color: var(--ark-ink-3); }
.est-preset.selected { border-color: var(--ark-pink); background: var(--ark-pink-soft); }
.est-preset:hover { border-color: var(--ark-ink-3); }

/* Finish */
.est-list { display: flex; flex-direction: column; gap: 10px; }
.est-opt { background: var(--ark-paper); border: 1.5px solid var(--ark-line); border-radius: 14px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; cursor: pointer; font-family: inherit; text-align: left; width: 100%; transition: all var(--ark-dur-fast); }
.est-opt:hover { border-color: var(--ark-ink-3); }
.est-opt.selected { border-color: var(--ark-pink); background: var(--ark-pink-soft); }
.est-opt-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ark-line-strong); background: white; flex-shrink: 0; position: relative; transition: all var(--ark-dur-fast); }
.est-opt.selected .est-opt-check { border-color: var(--ark-pink); background: var(--ark-pink); }
.est-opt.selected .est-opt-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.est-opt-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.est-opt-label { font-family: var(--ark-font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ark-ink); }
.est-opt-sub { font-size: 13.5px; color: var(--ark-ink-3); line-height: 1.4; }

/* Location form */
.est-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.est-form .grow { grid-column: 1 / -1; }
.est-field { display: flex; flex-direction: column; gap: 6px; }
.est-field-label { font-size: 13px; font-weight: 500; color: var(--ark-ink-2); }
.est-field-label .opt { color: var(--ark-ink-4); font-weight: 400; }
.est-input { font-family: inherit; font-size: 15px; padding: 13px 14px; border: 1.5px solid var(--ark-line); border-radius: 10px; background: var(--ark-paper); transition: border-color var(--ark-dur-fast), box-shadow var(--ark-dur-fast); }
.est-input:focus { outline: none; border-color: var(--ark-pink); box-shadow: 0 0 0 3px rgba(249,52,108,0.15); }
.est-consent { margin-top: 16px; padding: 12px 14px; background: var(--ark-mint-soft); border-radius: 10px; font-size: 13px; color: var(--ark-ink-2); display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.est-consent svg { color: var(--ark-mint-deep); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 600px) { .est-form { grid-template-columns: 1fr; } }

/* Result */
.est-result { padding: 4px 0 8px; }
.est-result-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ark-pink-deep); margin-bottom: 10px; }
.est-result-q { font-family: var(--ark-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; color: var(--ark-ink); line-height: 1.25; margin: 0 0 18px; }
.est-result-range { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--ark-font-display); font-weight: 800; letter-spacing: -0.04em; color: var(--ark-ink); line-height: 1; }
.est-result-range .lo, .est-result-range .hi { font-size: clamp(28px, 9vw, 60px); }
.est-result-range .dash { font-size: clamp(20px, 6.5vw, 42px); color: var(--ark-ink-3); font-weight: 500; }
.est-result-meta { font-size: 13px; color: var(--ark-ink-3); margin: 12px 0 24px; max-width: 54ch; line-height: 1.5; }
.est-result-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.est-result-tile { background: var(--ark-paper-2); border-radius: 14px; padding: 16px; border: 1px solid var(--ark-line); }
.est-tile-label { font-size: 12px; font-weight: 600; color: var(--ark-ink-3); letter-spacing: 0.05em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.est-tile-val { font-family: var(--ark-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ark-ink); display: block; }
.est-tile-val .unit { font-size: 13px; font-weight: 500; color: var(--ark-ink-3); margin-left: 2px; }
.est-tile-sub { font-size: 12px; color: var(--ark-ink-3); margin-top: 4px; line-height: 1.4; display: block; }
.est-result-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.est-result-fine { font-size: 12px; color: var(--ark-ink-4); margin-top: 18px; line-height: 1.5; max-width: 60ch; }
@media (max-width: 600px) { .est-result-row { grid-template-columns: 1fr; } }

/* Foot */
.est-foot { padding: 16px 24px; border-top: 1px solid var(--ark-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; background: var(--ark-paper-2); }
.est-foot-meta { font-size: 12.5px; color: var(--ark-ink-3); flex: 1; text-align: center; }
@media (max-width: 600px) { .est-foot-meta { display: none; } }
.est-back { background: transparent; color: var(--ark-ink-3); }
.est-back:hover { background: var(--ark-paper-3); color: var(--ark-ink); }

/* ============================================================
   INLINE VARIANT — Build-cost calculator
   Visually distinct from the Instant Quote form: it reads as a
   technical instrument (drafting-board / measurement tool) so
   users immediately know it's not the same thing as the quote.
   ============================================================ */
.est-inline {
  display: block;
  background: var(--ark-ink);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(14,14,16,0.35), 0 8px 24px -8px rgba(14,14,16,0.18);
  position: relative;
  color: white;
}

/* Header — drafting-board / instrument panel */
.est-inline-header {
  position: relative;
  padding: 26px 28px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 32px),
    var(--ark-ink);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.eih-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.eih-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--ark-pink);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px -4px rgba(249,52,108,0.55);
}
.eih-icon svg { width: 30px; height: 30px; }
.eih-titles { min-width: 0; }
.eih-eyebrow {
  font-family: var(--ark-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.eih-eyebrow b { color: #6ee7a4; font-weight: 700; }
.eih-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #6ee7a4;
  box-shadow: 0 0 0 0 rgba(110,231,164,0.6);
  animation: eih-pulse 1.8s ease-out infinite;
}
@keyframes eih-pulse {
  0% { box-shadow: 0 0 0 0 rgba(110,231,164,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(110,231,164,0); }
  100% { box-shadow: 0 0 0 0 rgba(110,231,164,0); }
}
.eih-title {
  font-family: var(--ark-font-display);
  font-weight: 700; font-size: 26px; letter-spacing: -0.02em;
  color: white; line-height: 1.15;
}
.eih-title em { color: #ffd166; font-style: normal; }

.eih-right {
  display: flex; gap: 8px; align-items: stretch;
}
.eih-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 78px;
  text-align: center;
}
.eih-stat b {
  font-family: var(--ark-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 16px; font-weight: 700; color: white; letter-spacing: -0.01em;
  display: block;
}
.eih-stat span {
  font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 720px) {
  .est-inline-header { padding: 20px 20px 18px; }
  .eih-title { font-size: 21px; }
  .eih-right { display: none; }
}
/* Sub-mobile (≤520px): stack the icon above the title block. At full
   phone width the 56px icon + 16px gap eats most of the available
   row, squeezing the eyebrow into the title's space and producing the
   visual overlap in the screenshot. Vertical stack gives both rows
   the full container width. */
@media (max-width: 520px) {
  .est-inline-header { padding: 18px 16px 16px; gap: 12px; }
  .eih-left { flex-direction: column; align-items: flex-start; gap: 12px; }
  .eih-icon { width: 44px; height: 44px; border-radius: 11px; }
  .eih-icon svg { width: 24px; height: 24px; }
  .eih-eyebrow { font-size: 10px; letter-spacing: 0.12em; }
  .eih-title { font-size: 19px; line-height: 1.2; }
}
/* Force the project-type tiles in the est-grid to all the same height
   regardless of which one is currently selected or how long its
   subtext is. Default grid stretching usually does this, but a child
   with its own height calc can break it — explicit 1fr is bulletproof. */
.est-grid { grid-auto-rows: 1fr; align-items: stretch; }
.est-card { height: 100%; }

/* Inline-only: dark project-type cards so they read as instrument buttons */
.est-inline .est-card {
  background: var(--ark-ink);
  border-color: var(--ark-ink);
  color: white;
}
.est-inline .est-card-label { color: white; }
.est-inline .est-card-sub { color: rgba(255,255,255,0.55); }
.est-inline .est-card-ico {
  background: rgba(255,255,255,0.08);
  color: white;
}
.est-inline .est-card:hover {
  border-color: var(--ark-pink);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(14,14,16,0.4);
}
.est-inline .est-card.selected {
  background: var(--ark-pink);
  border-color: var(--ark-pink);
}
.est-inline .est-card.selected .est-card-label { color: white; }
.est-inline .est-card.selected .est-card-sub { color: rgba(255,255,255,0.85); }
.est-inline .est-card.selected .est-card-ico {
  background: rgba(255,255,255,0.18);
  color: white;
}
/* Multi-select check (used on prefs step) */
.est-inline .est-card-check {
  border-color: rgba(255,255,255,0.3);
  background: transparent;
}
.est-inline .est-card.selected .est-card-check {
  border-color: white;
  background: white;
}
.est-inline .est-card.selected .est-card-check::after { border-color: var(--ark-pink); }

/* Match treatment for area presets (Small/Medium/Large/Extra large) */
.est-inline .est-preset {
  background: var(--ark-ink);
  border-color: var(--ark-ink);
}
.est-inline .est-preset b { color: white; }
.est-inline .est-preset span { color: rgba(255,255,255,0.55); }
.est-inline .est-preset:hover { border-color: var(--ark-pink); }
.est-inline .est-preset.selected {
  background: var(--ark-pink);
  border-color: var(--ark-pink);
}
.est-inline .est-preset.selected b { color: white; }
.est-inline .est-preset.selected span { color: rgba(255,255,255,0.85); }

/* Match treatment for finish radio rows (Standard/Premium/Luxury) */
.est-inline .est-opt {
  background: var(--ark-ink);
  border-color: var(--ark-ink);
}
.est-inline .est-opt-label { color: white; }
.est-inline .est-opt-sub { color: rgba(255,255,255,0.55); }
.est-inline .est-opt-check {
  border-color: rgba(255,255,255,0.3);
  background: transparent;
}
.est-inline .est-opt:hover { border-color: var(--ark-pink); }
.est-inline .est-opt.selected {
  background: var(--ark-pink);
  border-color: var(--ark-pink);
}
.est-inline .est-opt.selected .est-opt-label,
.est-inline .est-opt.selected .est-opt-sub { color: white; }
.est-inline .est-opt.selected .est-opt-sub { color: rgba(255,255,255,0.85); }
.est-inline .est-opt.selected .est-opt-check { border-color: white; background: white; }
.est-inline .est-opt.selected .est-opt-check::after { border-color: var(--ark-pink); }
/* Modal variant uses the same instrument chrome */
.est-modal.est-inline {
  display: flex; flex-direction: column;
  background: var(--ark-ink);
  /* keep modal sizing rules (max-width etc.) from .est-modal base */
}
.est-modal.est-inline .est-inline-mount {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.est-modal.est-inline .est { flex: 1; min-height: 0; }
.est-modal.est-inline .est-body { overflow-y: visible; }
.est-modal.est-inline .est-foot { flex-shrink: 0; }

/* Close button on the dark instrument header (modal only) */
.eih-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: white;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  transition: background 180ms ease, border-color 180ms ease;
}
.eih-close:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); }
@media (max-width: 720px) {
  .eih-close { display: inline-flex; }
  .est-modal.est-inline .eih-right { display: flex; gap: 0; }
  .est-modal.est-inline .eih-right .eih-stat { display: none; }
}

.est-inline-mount {
  background: var(--ark-paper);
  position: relative;
  /* Faint graph-paper overlay reinforces "calculator" */
  background-image:
    repeating-linear-gradient(0deg, rgba(14,14,16,0.025) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(14,14,16,0.025) 0 1px, transparent 1px 28px);
}
.est-inline .est { background: transparent; }
.est-inline .est-bar { height: 4px; background: var(--ark-paper-3); }

/* Hide the modal-style head/close — header above replaces it.
   Keep just the step counter, repositioned. */
.est-inline .est-head {
  padding: 14px 28px 0;
  background: transparent;
  border-bottom: none;
}
.est-inline .est-close { display: none; }
.est-inline .est-meta {
  font-family: var(--ark-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ark-ink-3);
}
.est-inline .est-meta span { color: var(--ark-pink-deep); font-weight: 700; }

.est-inline .est-body { padding: 18px 28px 28px; }
.est-inline .est-q { font-size: 30px; }
/* Step heading is redundant on inline (the instrument header above shows the title).
   Hide it on step 1 only — keep on later steps for context. */
.est-inline .est-body .est-q { display: none; }
.est-inline .est-body .est-sub { margin-top: 0; }

.est-inline .est-foot {
  padding: 16px 24px;
  background: var(--ark-paper-2);
  border-top: 1px solid var(--ark-line);
}
.est-inline .est-next { box-shadow: 0 4px 14px -2px rgba(249,52,108,0.45); }
@media (max-width: 720px) {
  .est-inline .est-body { padding: 14px 18px 22px; }
  .est-inline .est-head { padding: 12px 18px 0; }
  .est-inline .est-q { font-size: 24px; }
}

/* Prefs step (added in quote-v2 refactor) */
.est-prefs-sub { font-family: var(--ark-font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; margin: 18px 0 8px; color: var(--ark-ink); }
.est-prefs-sub:first-of-type { margin-top: 4px; }
.est-list-tight { gap: 8px; }
.est-list-tight .est-opt { padding: 12px 14px; }
.est-list-tight .est-opt-label { font-size: 13.5px; }
.est-list-tight .est-opt-sub { font-size: 12px; }

/* Result callouts */
.est-result-callout { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 14px 16px; margin: 10px 0 2px; font-size: 13.5px; line-height: 1.55; color: var(--ark-ink-2); }
.est-result-callout .ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-top: -2px; }
.est-result-callout b { color: var(--ark-ink); }
.est-result-callout a { color: var(--ark-pink-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.est-result-callout a:hover { text-decoration: underline; }
.est-result-callout-pink { background: var(--ark-pink-soft); }
.est-result-callout-pink .ic { background: var(--ark-pink); }
.est-result-callout-mint { background: var(--ark-mint-soft); }
.est-result-callout-mint .ic { background: var(--ark-mint-deep); }

/* Mobile: stop the absolute-positioned checkbox from overlapping the
   project-type label. Also reduce the label font-size a touch so two
   per row look comfortable on narrow viewports rather than cramped. */
@media (max-width: 600px) {
  .est-card { padding: 16px 14px; gap: 5px; }
  .est-card-label {
    font-size: 15px;
    padding-right: 28px;   /* leaves space for the .est-card-check at top-right */
    line-height: 1.2;
  }
  .est-card-sub { font-size: 12px; padding-right: 4px; }
  .est-card-check { top: 10px; right: 10px; width: 18px; height: 18px; }
}
/* Sub-mobile: at 2 columns the tile labels ("New build / replacement",
   "Internal remodel", "Loft conversion") wrap onto 3-4 lines each and
   the grid looks cramped and uneven. Drop to a single column so each
   tile gets the full modal width — labels stay on one line and the
   step reads cleanly. Card internal layout (flex column, icon/label
   /sub stacked, absolute checkbox top-right) is unchanged. */
@media (max-width: 420px) {
  .est-grid { grid-template-columns: 1fr; }
  .est-card { padding: 14px 16px; }
}