/* =============================================================================
   components.css - Reusable UI components (C1, C4 · Spec §5, §13, §14)
   Depends on tokens → base → layout. Uses TOKENS ONLY.
   Sections:  1 Buttons · 2 Badges/Pills · 3 Cards/Panels · 4 Forms ·
              5 Header/Nav · 6 Footer · 7 Hero · 8 Product 3-up · 9 Toasts ·
              10 Modals · 11 Misc (stats, testimonial, trust strip)
   ============================================================================= */

/* ===========================================================================
   1. BUTTONS
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--step-0); line-height: 1;
  padding: 0.85em 1.4em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }   /* press state (§ press) */
.btn svg { width: 1.15em; height: 1.15em; }

/* Primary - brand blue */
.btn--primary { background: var(--primary); color: var(--primary-ink); }
.btn--primary:hover { background: var(--primary-hover); color: var(--primary-ink); }

/* CTA - white/surface with a heavy gold accent (border + warm gradient + gold
   icon + gold glow). Reads richer than a flat gold fill (§2.4 gold-shadow). */
.btn--cta {
  background: linear-gradient(176deg, var(--surface) 0%, var(--accent-tint) 165%);
  color: var(--text);
  border: 1.5px solid var(--accent);
  box-shadow: var(--shadow-gold);
}
.btn--cta i, .btn--cta svg { color: var(--accent); }
.btn--cta:hover {
  background: linear-gradient(176deg, var(--accent-tint) 0%, var(--surface) 150%);
  border-color: var(--accent); color: var(--text);
  box-shadow: var(--shadow-gold), var(--shadow-sm);
}

/* Secondary - outline */
.btn--outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); }

/* Ghost - text-only */
.btn--ghost { background: transparent; color: var(--primary); padding-inline: 0.6em; }
.btn--ghost:hover { color: var(--primary-hover); }

/* On dark / ink surfaces */
.surface-ink .btn--outline { color: var(--primary-ink); border-color: rgba(255,255,255,0.35); }
.surface-ink .btn--outline:hover { border-color: var(--primary-ink); background: rgba(255,255,255,0.08); }

.btn--lg { font-size: var(--step-1); padding: 1em 1.7em; }
.btn--sm { font-size: var(--step--1); padding: 0.6em 1em; }
.btn--block { width: 100%; }

/* Arrow link (quiet disclosure - "See everything →") */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-weight: 600; color: var(--primary);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ===========================================================================
   2. BADGES / PILLS
   =========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3em 0.7em; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge svg { width: 0.95em; height: 0.95em; }
.badge--blue   { background: var(--primary-tint);   color: var(--primary);  border-color: transparent; }
.badge--green  { background: var(--secondary-tint); color: var(--secondary);border-color: transparent; }
.badge--gold   { background: var(--accent-tint);    color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* Tag (custom vs supplier - §10.5) */
.tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.tag--custom { color: var(--secondary); }

/* ===========================================================================
   3. CARDS / PANELS  (atmosphere: hairline border + soft shadow, NOT flat)
   =========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.card__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--primary-tint); color: var(--primary);
  margin-bottom: var(--space-sm);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--step-1); }
.card p { color: var(--text-muted); font-size: var(--step-0); }

/* Panel - larger framed surface */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
}

/* Media frame (image / placeholder) */
.media-frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Client / "trusted by" logo wall (text wordmarks until real logos are added) */
.logo-wall { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; align-items: center; margin-top: var(--space-lg); }
.logo-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: var(--space-sm) var(--space-xl); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em; box-shadow: var(--shadow-sm); }
.logo-chip img { max-height: 38px; width: auto; }

/* ===========================================================================
   4. FORMS
   =========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.field label { font-weight: 600; font-size: var(--step--1); }
.field .hint { font-size: var(--step--1); color: var(--text-muted); }
.field .req { color: var(--secondary); }

.input, .textarea, .select {
  width: 100%;
  font-size: var(--step-0);
  padding: 0.7em 0.85em;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--text-muted) 70%, transparent); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}
.textarea { resize: vertical; min-height: 7em; }
.field--error .input, .field--error .textarea, .field--error .select { border-color: #C0392B; }
.field__error { color: #C0392B; font-size: var(--step--1); display: none; }
.field--error .field__error { display: block; }

/* Choice chips (job-type selector - §11) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  padding: 0.5em 0.9em; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--step--1); font-weight: 500;
  transition: all var(--dur-fast) var(--ease);
}
.chip svg { width: 1em; height: 1em; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.chip:hover:not([aria-pressed="true"]) { border-color: var(--primary); color: var(--primary); }

/* ===========================================================================
   5. HEADER / NAV (§5)
   =========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-lg);
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 0.6em; flex-shrink: 0; }
.brand__mark { height: 30px; width: auto; }
.brand__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-1); letter-spacing: -0.01em; color: var(--text);
}
.brand__sub {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted); display: block; margin-top: -2px;
}
.nav { display: flex; align-items: center; gap: var(--space-md); margin-left: auto; }
.nav__link {
  font-weight: 500; font-size: var(--step-0); color: var(--text);
  padding: 0.3em 0; position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--primary); }

.header-actions { display: flex; align-items: center; gap: var(--space-xs); }

/* Icon button (theme toggle, hamburger) */
.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-sm); color: var(--text);
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--primary); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav, .header-actions .btn { display: none; }
  .nav-toggle { display: grid; }
}

/* ===========================================================================
   6. FOOTER (§5)
   =========================================================================== */
.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding-block: var(--space-2xl) var(--space-lg);
  margin-top: var(--space-3xl);
}
.site-footer__grid {
  display: grid; gap: var(--space-xl);
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .site-footer__grid { grid-template-columns: 1fr; } }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; margin-bottom: var(--space-sm); }
.footer-col a { display: block; color: var(--text-muted); padding-block: 0.25em; font-size: var(--step-0); }
.footer-col a:hover { color: var(--primary); }
.footer-trust { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between;
  align-items: center; margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--step--1);
}

/* ===========================================================================
   7. HERO (§6 - skeleton container, real overlay)
   =========================================================================== */
.hero { position: relative; padding-block: var(--space-2xl) var(--space-3xl); }
.hero__media {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
  min-height: clamp(520px, 72vh, 760px);
  display: grid;
}
/* The placeholder hint card (intentional, not broken - §6) */
.hero__placeholder {
  grid-area: 1 / 1;
  display: grid; align-content: start; justify-items: end; text-align: right;
  padding: var(--space-md);
  padding-top: calc(var(--space-md) + 52px);
}
.hero__placeholder .ph-card {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(4px);
  border: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted);
}
.hero__placeholder .ph-card svg { width: 1.05em; height: 1.05em; color: var(--primary); }
.hero__placeholder .ph-card code {
  font-family: var(--font-mono); font-size: var(--step--1);
  background: var(--primary-tint); color: var(--primary);
  padding: 0.15em 0.4em; border-radius: 4px;
}
/* Real overlay text - crisp HTML over the media (§6) */
.hero__overlay {
  grid-area: 1 / 1; position: relative; z-index: 2;
  align-self: end; justify-self: start;
  margin: clamp(1rem, 4vw, 2.5rem);
  max-width: 38rem;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 0%, transparent));
}
.hero__overlay .panel {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero h1 { font-size: var(--step-6); }
.hero__lede { font-size: var(--step-1); color: var(--text-muted); }
.hero__replay {
  position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 3;
}
/* Trust strip (license · insured · same-day · local) */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted);
}
.trust-strip li { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.trust-strip svg { width: 1.1em; height: 1.1em; color: var(--secondary); }

/* ===========================================================================
   8. PRODUCT 3-UP (§10.5 - exactly three; restraint is the point)
   =========================================================================== */
.threeup { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .threeup { grid-template-columns: 1fr; } }
.product-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.product-card .media-frame { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); aspect-ratio: 16/10; }
.product-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.product-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.product-card h3 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.product-card .price { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text); margin-top: auto; }

/* ===========================================================================
   9. TOASTS (§14) - pre-existing live region; reveal via opacity
   =========================================================================== */
.toast-region {
  position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2xs);
  width: min(360px, calc(100vw - 2rem)); pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-2xs);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-xs) var(--space-sm); pointer-events: auto;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-visible { opacity: 1; transform: none; }
.toast__icon { flex-shrink: 0; margin-top: 1px; }
.toast__icon svg { width: 20px; height: 20px; }
.toast__body { flex: 1; font-size: var(--step--1); }
.toast__body strong { display: block; font-size: var(--step-0); }
.toast__close { color: var(--text-muted); padding: 2px; }
.toast--success { border-left-color: var(--secondary); }
.toast--success .toast__icon { color: var(--secondary); }
.toast--error   { border-left-color: #C0392B; }
.toast--error .toast__icon { color: #C0392B; }
.toast--info    { border-left-color: var(--primary); }
.toast--info .toast__icon { color: var(--primary); }
.toast--warning { border-left-color: var(--accent); }
.toast--warning .toast__icon { color: var(--accent-ink); }

/* ===========================================================================
   10. MODALS (§13) - pre-exist hidden; reveal via class
   =========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: color-mix(in srgb, #0A0F14 60%, transparent);
  backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: var(--space-lg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
.modal {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%); max-height: min(86vh, 800px); overflow: auto;
  transform: translateY(16px) scale(0.98);
  transition: transform var(--dur) var(--ease-out);
}
.modal-backdrop.is-open .modal { transform: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); }
.modal__body { padding: var(--space-lg); }
.modal__title { font-size: var(--step-2); }

/* Mobile nav drawer (slide-in) */
.drawer { align-items: stretch; justify-items: end; padding: 0; }
.drawer .modal {
  width: min(340px, 84vw); height: 100%; max-height: none; border-radius: 0;
  transform: translateX(100%); border-left: 1px solid var(--border);
}
.drawer.is-open .modal { transform: none; }
.drawer .nav { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
.drawer .nav__link { padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); font-size: var(--step-1); }
.drawer .nav__link::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .modal, .toast { transition: opacity var(--dur) linear; transform: none !important; }
}

/* ===========================================================================
   11. MISC - stats, testimonial, CTA band, eyebrow rule
   =========================================================================== */
.stat { }
.stat__num { font-family: var(--font-display); font-size: var(--step-4); color: var(--primary); line-height: 1; }
.stat__label { color: var(--text-muted); font-size: var(--step--1); margin-top: var(--space-3xs); }

.testimonial { display: flex; flex-direction: column; gap: var(--space-sm); }
.testimonial__quote { font-family: var(--font-display); font-size: var(--step-1); line-height: var(--leading-snug); font-style: italic; }
.testimonial__stars { display: inline-flex; gap: 2px; color: var(--accent); }
.testimonial__stars svg { width: 16px; height: 16px; fill: currentColor; }
.testimonial__author { font-size: var(--step--1); color: var(--text-muted); }

.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.cta-band .container { position: relative; z-index: 1; }
/* .panel sets a surface background; when a panel is also an ink band, ink wins. */
.surface-ink.panel, .panel.surface-ink, .cta-band.surface-ink { background: var(--primary); }

/* Featured product, spans two columns on wide screens (breaks the flat grid) */
@media (min-width: 901px) {
  #product-grid > .feature-product { grid-column: span 2; }
  #product-grid > .feature-product .media-frame { aspect-ratio: 21 / 9; }
}

/* Eyebrow rule - short gold tick before a section label */
.tick::before {
  content: ""; display: inline-block; width: 1.6em; height: 2px;
  background: var(--accent); vertical-align: middle; margin-right: 0.6em;
  box-shadow: var(--shadow-gold);
}

/* ===========================================================================
   12. EDITORIAL HELPERS - lighter, asymmetric layouts (less "card grid")
   =========================================================================== */
/* Divided feature item (a row in a list, not a boxed card) */
.feature { display: flex; gap: var(--space-sm); align-items: flex-start; padding-block: var(--space-md); }
.feature__ic { color: var(--primary); flex-shrink: 0; margin-top: 3px; }
.feature__ic svg { width: 22px; height: 22px; }
.feature h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); letter-spacing: 0; }
.feature p { color: var(--text-muted); font-size: var(--step--1); margin-top: 3px; }
/* When used in a grid, draw hairline dividers above each item for a list feel */
.feature-list { display: grid; gap: 0 var(--space-xl); grid-template-columns: 1fr 1fr; }
.feature-list .feature { border-top: 1px solid var(--border); }
@media (max-width: 640px) { .feature-list { grid-template-columns: 1fr; } }

/* Compact value-prop point (no box, no divider) */
.point { display: flex; flex-direction: column; gap: var(--space-3xs); }
.point__ic { color: var(--primary); }
.point__ic svg { width: 24px; height: 24px; }
.point h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); letter-spacing: 0; }
.point p { color: var(--text-muted); font-size: var(--step--1); }

/* Aside heading column (sits to the side of content, sticky on desktop) */
.aside-head { align-self: start; }
@media (min-width: 881px) { .aside-head { position: sticky; top: calc(var(--header-h) + var(--space-lg)); } }
.aside-head h2 { font-size: var(--step-3); }
.aside-head p { color: var(--text-muted); margin-top: var(--space-2xs); }

/* Inline row: title on the left, link on the right (no eyebrow/description) */
.row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm); margin-bottom: var(--space-lg); }
.row-head h2 { font-size: var(--step-3); }

/* Featured quote (big), used beside smaller ones for asymmetry */
.quote-lead { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.muted { color: var(--text-muted); }

/* Jump panels - a clickable directory that scrolls to in-page sections */
.jumpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); }
.jumptile { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--text);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.jumptile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); color: var(--text); }
.jumptile__ic { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; }
.jumptile__ic svg { width: 22px; height: 22px; }
.jumptile__name { font-weight: 700; font-size: var(--step-0); line-height: 1.2; }
.jumptile__go { position: absolute; top: var(--space-md); right: var(--space-md); color: var(--text-muted); transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.jumptile__go svg { width: 16px; height: 16px; }
.jumptile:hover .jumptile__go { color: var(--primary); transform: translateY(2px); }