/* ═══════════════════════════════════════════════════════════════════
   LAYOUT.CSS — Containers · Sections · Tile Grids
   Global scope
═══════════════════════════════════════════════════════════════════ */

/* ── CONTAINER ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

/* ── MAIN CONTENT ───────────────────────────────────────────────── */
.main-content {
  min-height: 60vh;
}

/* ── SECTIONS ───────────────────────────────────────────────────── */
.section {
  padding-block: var(--section-py);
  padding-inline: var(--section-px);
  max-width: var(--container);
  margin-inline: auto;
}

.section__header {
  text-align: center;
  margin-bottom: var(--sp-12);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--sp-12);
}

.section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-teal);
  margin-bottom: var(--sp-3);
}

.section__title {
  margin-bottom: var(--sp-4);
  color: var(--c-text);
}

.section__sub {
  font-size: 1.0625rem;
  color: var(--c-text-2);
  line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════
   CRYPTO GRADIENTS A
════════════════════════════════════════════════════════════ */
.grad-btc  { --tile-grad: linear-gradient(135deg, #b86f12 0%, #cc8a3d 50%, #8a5600 100%); }
.grad-eth  { --tile-grad: linear-gradient(135deg, #8f9398 0%, #4f5fd6 50%, #2a2a66 100%); }
.grad-sol  { --tile-grad: linear-gradient(135deg, #6f2fd6 0%, #0fbf78 50%, #0093b3 100%); }
.grad-xrp  { --tile-grad: linear-gradient(135deg, #0078bf 0%, #005a93 50%, #002e5c 100%); }
.grad-bnb  { --tile-grad: linear-gradient(45deg,  #e6b800 0%, #ffd84d 45%, #8a5e00 100%); }
.grad-doge { --tile-grad: linear-gradient(135deg, #8f7a22 0%, #c9a93f 50%, #5f4a12 100%); }
.grad-link { --tile-grad: linear-gradient(135deg, #1b3a8a 0%, #2a5ada 45%, #0f1a33 100%); }
.grad-ada  { --tile-grad: linear-gradient(45deg,  #002a8a 0%, #1578c0 50%, #007f76 100%); }
.grad-sui  { --tile-grad: linear-gradient(135deg, #4fb8e6 0%, #2455d6 50%, #07142c 100%); }
.grad-trx  { --tile-grad: linear-gradient(45deg,  #b10508 0%, #7d0014 50%, #2e0006 100%); }
.grad-avax { --tile-grad: linear-gradient(135deg, #d92d2d 0%, #ff3b3b 45%, #5c0b12 100%); }
.grad-paxg { --tile-grad: linear-gradient(45deg,  #a8842c 0%, #cbb36f 50%, #6f5200 100%); }
.grad-arb  { --tile-grad: linear-gradient(135deg, #1f7fc0 0%, #00a8d1 50%, #07131f 100%); }
.grad-bch  { --tile-grad: linear-gradient(135deg, #2f8f2f 0%, #00a86b 45%, #0b2e22 100%); }
.grad-dot  { --tile-grad: linear-gradient(135deg, #b3005f 0%, #7d3fbf 50%, #1f082c 100%); }
.grad-ltc  { --tile-grad: linear-gradient(135deg, #8f8f8f 0%, #566477 50%, #1f2a36 100%); }

/* ════════════════════════════════════════════════════════════
   TOP-50 CRYPTO GRADIENTS B
════════════════════════════════════════════════════════════ */
.Xgrad-btc  { --tile-grad: linear-gradient(135deg, #f7931a 0%, #d4680f 100%); }
.Xgrad-eth  { --tile-grad: linear-gradient(135deg, #627eea 0%, #3a55c4 100%); }
.Xgrad-sol  { --tile-grad: linear-gradient(135deg, #9945ff 0%, #14f195 100%); }
.Xgrad-xrp  { --tile-grad: linear-gradient(135deg, #346aa9 0%, #1a3a6e 100%); }
.Xgrad-bnb  { --tile-grad: linear-gradient(135deg, #f3ba2f 0%, #c9920a 100%); }
.Xgrad-doge { --tile-grad: linear-gradient(135deg, #c2a633 0%, #8a7120 100%); }
.Xgrad-link { --tile-grad: linear-gradient(135deg, #2a5ada 0%, #1535a0 100%); }
.Xgrad-ada  { --tile-grad: linear-gradient(135deg, #0033ad 0%, #001f6b 100%); }
.Xgrad-sui  { --tile-grad: linear-gradient(135deg, #172e5b 0%, #0f41a5 100%); }
.Xgrad-trx  { --tile-grad: linear-gradient(135deg, #ff5000 0%, #b03800 100%); }
.Xgrad-avax { --tile-grad: linear-gradient(135deg, #e84142 0%, #a81e1f 100%); }
.Xgrad-paxg { --tile-grad: linear-gradient(135deg, #ffcc00 0%, #fde829 100%); }
.Xgrad-arb  { --tile-grad: linear-gradient(135deg, #00d1ff 0%, #0090b3 100%); }
.Xgrad-bch  { --tile-grad: linear-gradient(135deg, #00d395 0%, #009068 100%); }
.Xgrad-dot  { --tile-grad: linear-gradient(135deg, #e6007a 0%, #9b0053 100%); }
.Xgrad-ltc  { --tile-grad: linear-gradient(135deg, #bfbbbb 0%, #7a7878 100%); }
.Xgrad-usdc { --tile-grad: linear-gradient(135deg, #2775ca 0%, #1a4d8f 100%); }
.Xgrad-bat  { --tile-grad: linear-gradient(135deg, #ff5000 0%, #b03800 100%); }
.Xgrad-matic{ --tile-grad: linear-gradient(135deg, #8247e5 0%, #5519b8 100%); }
.Xgrad-uni  { --tile-grad: linear-gradient(135deg, #ff007a 0%, #b8004f 100%); }
.Xgrad-atom { --tile-grad: linear-gradient(135deg, #2e3148 0%, #6f7390 100%); }
.Xgrad-xlm  { --tile-grad: linear-gradient(135deg, #14b6e7 0%, #0781a8 100%); }
.Xgrad-etc  { --tile-grad: linear-gradient(135deg, #328332 0%, #1d521d 100%); }
.Xgrad-icp  { --tile-grad: linear-gradient(135deg, #f15a24 0%, #a83b10 100%); }
.Xgrad-fil  { --tile-grad: linear-gradient(135deg, #0090ff 0%, #0055cc 100%); }
.Xgrad-hbar { --tile-grad: linear-gradient(135deg, #222222 0%, #555555 100%); }
.Xgrad-vet  { --tile-grad: linear-gradient(135deg, #15bdff 0%, #0079cc 100%); }
.Xgrad-mana { --tile-grad: linear-gradient(135deg, #ff2d55 0%, #b0001e 100%); }
.Xgrad-sand { --tile-grad: linear-gradient(135deg, #04adef 0%, #f5841f 100%); }
.Xgrad-axs  { --tile-grad: linear-gradient(135deg, #0055d4 0%, #003399 100%); }
.Xgrad-aave { --tile-grad: linear-gradient(135deg, #b6509e 0%, #2ebac6 100%); }
.Xgrad-ftm  { --tile-grad: linear-gradient(135deg, #1969ff 0%, #003db3 100%); }
.Xgrad-algo { --tile-grad: linear-gradient(135deg, #222222 0%, #444444 100%); }
.Xgrad-xtz  { --tile-grad: linear-gradient(135deg, #a6e000 0%, #5a7a00 100%); }
.Xgrad-eos  { --tile-grad: linear-gradient(135deg, #443f54 0%, #231f35 100%); }
.Xgrad-mkr  { --tile-grad: linear-gradient(135deg, #1aab9b 0%, #0d6b61 100%); }
.Xgrad-comp { --tile-grad: linear-gradient(135deg, #00d395 0%, #009068 100%); }
.Xgrad-snx  { --tile-grad: linear-gradient(135deg, #00d1ff 0%, #0090b3 100%); }
.Xgrad-crv  { --tile-grad: linear-gradient(135deg, #cc0000 0%, #7a0000 100%); }
.Xgrad-sushi{ --tile-grad: linear-gradient(135deg, #fa52a0 0%, #0e0f23 100%); }
.Xgrad-1inch{ --tile-grad: linear-gradient(135deg, #1b314f 0%, #d82122 100%); }
.Xgrad-zil  { --tile-grad: linear-gradient(135deg, #49c1bf 0%, #256f6e 100%); }
.Xgrad-ren  { --tile-grad: linear-gradient(135deg, #001c3d 0%, #003c7a 100%); }
.Xgrad-lrc  { --tile-grad: linear-gradient(135deg, #1c42ff 0%, #0a1f99 100%); }
.Xgrad-enj  { --tile-grad: linear-gradient(135deg, #7866d5 0%, #4433a8 100%); }
.Xgrad-zrx  { --tile-grad: linear-gradient(135deg, #302c2c 0%, #6b6464 100%); }
.Xgrad-omg  { --tile-grad: linear-gradient(135deg, #1a53f0 0%, #0c2ea8 100%); }
.Xgrad-chz  { --tile-grad: linear-gradient(135deg, #cd0124 0%, #8a0019 100%); }
.Xgrad-grt  { --tile-grad: linear-gradient(135deg, #6747ed 0%, #3d1fb8 100%); }
.Xgrad-qnt  { --tile-grad: linear-gradient(135deg, #2f3130 0%, #585d5b 100%); }
.Xgrad-icx  { --tile-grad: linear-gradient(135deg, #31b8bb 0%, #186f71 100%); }
.Xgrad-ont  { --tile-grad: linear-gradient(135deg, #32a4be 0%, #18647a 100%); }
.Xgrad-sc   { --tile-grad: linear-gradient(135deg, #1ed660 0%, #0f8038 100%); }
.Xgrad-hot  { --tile-grad: linear-gradient(135deg, #7d4698 0%, #3f1f52 100%); }
.Xgrad-dgb  { --tile-grad: linear-gradient(135deg, #0066cc 0%, #003d80 100%); }

/* ── TILE GRADIENTS — applied as class on tile element ───────────── */
.grad-1  { --tile-grad: var(--grad-1); }
.grad-2  { --tile-grad: var(--grad-2); }
.grad-3  { --tile-grad: var(--grad-3); }
.grad-4  { --tile-grad: var(--grad-4); }
.grad-5  { --tile-grad: var(--grad-5); }
.grad-6  { --tile-grad: var(--grad-6); }
.grad-7  { --tile-grad: var(--grad-7); }
.grad-8  { --tile-grad: var(--grad-8); }
.grad-9  { --tile-grad: var(--grad-9); }
.grad-s1  { --tile-grad: var(--grad-s1); }
.grad-s2  { --tile-grad: var(--grad-s2); }
.grad-s3  { --tile-grad: var(--grad-s3); }
.grad-s4  { --tile-grad: var(--grad-s4); }
.grad-s5  { --tile-grad: var(--grad-s5); }
.grad-s6  { --tile-grad: var(--grad-s6); }
.grad-s7  { --tile-grad: var(--grad-s7); }
.grad-s8  { --tile-grad: var(--grad-s8); }
.grad-s9  { --tile-grad: var(--grad-s9); }
.grad-s10 { --tile-grad: var(--grad-s10); }
.grad-s11 { --tile-grad: var(--grad-s11); }
.grad-s12 { --tile-grad: var(--grad-s12); }

.grad-bin  { --tile-grad: var(--grad-bin); }
.grad-bmx  { --tile-grad: var(--grad-bmx); }
.grad-bma  { --tile-grad: var(--grad-bma); }
.grad-bgt  { --tile-grad: var(--grad-bgt); }
.grad-blo  { --tile-grad: var(--grad-blo); }
.grad-byb  { --tile-grad: var(--grad-byb); }
.grad-kuc  { --tile-grad: var(--grad-kuc); }
.grad-okx  { --tile-grad: var(--grad-okx); }
.grad-pmx  { --tile-grad: var(--grad-pmx); }

/* ── LARGE TILES ─────────────────────────────────────────────────── */
.tiles--large {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.tile--large {
  position: relative;
  background: var(--tile-grad, var(--grad-1));
  border-radius: var(--r-lg);
  padding: var(--sp-12) var(--sp-10);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.tile--large::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 60%);
}

.tile--large:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.tile--large .tile__body {
  position: relative;
  z-index: 1;
}

.tile--large .tile__title {
  color: #fff;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  margin-bottom: var(--sp-3);
  letter-spacing: var(--ls-tight);
}

.tile--large .tile__desc {
  color: rgba(255,255,255,.85);
  font-size: 0.9375rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.tile--large .tile__cta {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  color: rgba(255,255,255,.9);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  transition: color var(--t-fast);
  z-index: 1;
}

.tile--large:hover .tile__cta { color: #fff; }

/* ── MEDIUM TILES ────────────────────────────────────────────────── */
.tiles--medium {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.tile--medium {
  background: var(--tile-grad, var(--grad-4));
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-6);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.tile--medium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.4) 0%, transparent 55%);
}

.tile--medium:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.tile--medium .tile__body { position: relative; z-index: 1; }

.tile--medium .tile__title {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: var(--sp-2);
  letter-spacing: var(--ls-tight);
}

.tile--medium .tile__desc {
  color: rgba(255,255,255,.8);
  font-size: 0.875rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.tile--medium .tile__cta {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  color: rgba(255,255,255,.9);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  transition: color var(--t-fast);
  z-index: 1;
}

.tile--medium:hover .tile__cta { color: #fff; }

/* ── SMALL TILES ─────────────────────────────────────────────────── */
.tiles--small {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
}

.tile--small {
  background: var(--tile-grad, var(--grad-s1));
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-4);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.tile--small:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.tile--small .tile__label {
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ── CONTENT CONTAINER ───────────────────────────────────────────── */
.editorial-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-16) var(--sp-6) var(--sp-24);
}

/* ── BANNER ──────────────────────────────────────────────────── */
.page-banner {
  text-align: center;
}

.page-banner__inner {
  background: linear-gradient(135deg, rgba(46,204,204,.08) 0%, rgba(235,84,6,.06) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-16) var(--sp-8);
}

.page-banner__title {
  margin-bottom: var(--sp-4);
}

.page-banner__sub {
  margin-bottom: var(--sp-8);
  font-size: 1rem;
}

.page-banner__star {
  font-size: .8rem;
}

.page-banner__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}


/* ── FAQ SECTION ──────────────────────────────────────────────────── */
.info-faq {
  max-width: 680px;
  margin-inline: auto;
  margin-top: var(--sp-20);
  margin-bottom: var(--sp-32);
}

.info-faq__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: var(--ls-tight);
  text-align: center;
  margin-bottom: var(--sp-8);
}

.faq-item {
  border-bottom: 1px solid var(--c-border);
}

.faq-item input { display: none; }

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) 0;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: 0.01em;
  user-select: none;
  gap: var(--sp-4);
}

.faq-item__arrow {
  font-size: 0.75rem;
  color: var(--c-muted);
  transition: transform var(--t-base) var(--ease-out);
  flex-shrink: 0;
}

.faq-item input:checked ~ .faq-item__q .faq-item__arrow {
  transform: rotate(180deg);
}

.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out);
}

.faq-item input:checked ~ .faq-item__a {
  max-height: 300px;
}

.faq-item__a p {
  padding-bottom: var(--sp-5);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--c-text-2);
  letter-spacing: 0.01em;
}

/* ── PRODUCT BADGES ──────────────────────────────────────────────────── */
.prod-badge--coin {
  display: inline-block;
  padding: 2px var(--sp-2);
  margin: 2px; 
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(221, 206, 8, 0.15);
  color: #c8a300;
  border: 1px solid rgba(235, 231, 6, 0.4);
}

.prod-badge--usdt {
  display: inline-block;
  padding: 2px var(--sp-2);
  margin: 2px; 
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(18, 235, 6, 0.15);
  color: #14ad00;
  border: 1px solid rgba(25, 235, 6, 0.4);
}

.prod-badge--usdc {
  display: inline-block;
  padding: 2px var(--sp-2);
  margin: 2px; 
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(108, 99, 255, 0.15);
  color: #6c63ff;
  border: 1px solid rgba(108, 99, 255, 0.4);
}

/* ── Rename Modal ───────────────────────────────────────────────── */
#rename-modal-toggle { display: none; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}

#rename-modal-toggle:checked ~ .modal-backdrop {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-xl);
  transform: translateY(12px);
  transition: transform var(--t-base) var(--ease-out);
}

#rename-modal-toggle:checked ~ .modal-backdrop .modal {
  transform: translateY(0);
}

/* Header */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--c-border-light);
}

.modal__header h4 {
  font-size: 1.0625rem;
  color: var(--c-text);
}

.modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}

.modal__close:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}

/* Body */
.modal__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.modal__sub {
  font-size: 0.9rem;
  color: var(--c-muted);
  margin: 0;
}

/* Input field */
.modal-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.modal-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}

.modal-input-wrap {
  position: relative;
}

#set-new-name {
  width: 100%;
  background: var(--c-surface-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 0.75rem 3.5rem 0.75rem var(--sp-4);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--c-text);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}

#set-new-name::placeholder { color: var(--c-muted); }

#set-new-name:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px var(--c-teal-light);
}

#set-name-counter {
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--c-muted);
  pointer-events: none;
}

/* Footer */
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--c-border-light);
}

/* Reuse your existing .btn--ghost and .btn--teal here.
   If they aren't in bots.css already, add these minimal versions: */
.modal__footer .btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5625rem 1.25rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-border);
  background: transparent;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}

.modal__footer .btn--ghost:hover {
  border-color: var(--c-teal);
  color: var(--c-teal);
}

.modal__footer .btn--teal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5625rem 1.25rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-teal);
  background: var(--c-teal);
  color: #0a2222;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}

.modal__footer .btn--teal:hover:not(:disabled) {
  background: var(--c-teal-dark);
  border-color: var(--c-teal-dark);
  box-shadow: 0 4px 16px rgba(46, 204, 204, 0.3);
}

.modal__footer .btn--teal:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Night mode: backdrop darkens further */
#theme-toggle:checked ~ * .modal-backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .editorial-wrap { padding-inline: var(--sp-4); }
  .page-banner__star { font-size: .5rem; }
}

/* Mobile: single column tiles */
@media (max-width: 480px) {
  .tiles--large  { grid-template-columns: 1fr; }
  .tiles--medium { grid-template-columns: 1fr; }
  .tiles--small  { grid-template-columns: repeat(2, 1fr); }
  .page-banner__actions { flex-direction: column; }
  .page-banner__actions .btn { width: 100%; justify-content: center; }
}