/* YSPOT component system — rebuilt from brand/handoff/README.md.
   Rules that are easy to break by accident:
   - exactly ONE lime element per view; it is always the primary action
   - depth is a hard offset shadow at 0 blur, never a blurred one
   - selected states carry an inverted fill AND a glyph, never colour alone */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; }

::selection { background: var(--lime); color: var(--ink); }

/* ---------------------------------------------------------------- type */

/* "Archivo Expanded" is Archivo's wdth 125 axis, not a separate family. */
.display {
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
h1, .h1 { font-family: var(--f-head); font-weight: 900; font-size: 56px; line-height: .92; letter-spacing: -.035em; }
h2, .h2 { font-family: var(--f-head); font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -.02em; }
h3, .h3 { font-family: var(--f-head); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }

.label { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.sublabel { font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .20em; text-transform: uppercase; }
.body-l { font-size: 19px; line-height: 1.5; }
.small { font-size: 13px; line-height: 1.45; }
.legal { font-size: 12px; line-height: 1.5; }
.mut { color: var(--muted); }
.lime { color: var(--lime); }
.coral { color: var(--coral); }
.elec { color: var(--electric); }
.sun { color: var(--sun); }
.num { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; }

/* ---------------------------------------------------------------- logo */

.mark { display: block; flex: none; }
.lockup { display: flex; align-items: center; gap: 22px; }
.wordmark {
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .8;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- top bar */

.topbar {
  height: 72px;
  padding: 0 28px;
  border-bottom: var(--bw) solid var(--line);
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  background: var(--ink);
  z-index: 40;
}
.topbar .lockup { gap: 10px; }
.topbar-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.navlink {
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 10px 14px; border-radius: var(--r-pill);
}
.navlink:hover { color: var(--paper); }
.navlink[aria-current="page"] { background: var(--paper); color: var(--ink); font-weight: 700; }

.pill-18 {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--coral); border: var(--bw) solid var(--coral);
  border-radius: var(--r-pill); padding: 6px 9px; flex: none;
}

.avatar-btn {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: var(--bw) solid var(--line); overflow: hidden;
}

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-head); font-weight: 900; font-size: 17px; line-height: 1;
  letter-spacing: .01em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 15px 20px;
  border: var(--bw) solid transparent;
  transition: box-shadow .12s linear, background-color .12s linear;
  min-height: 40px;
}
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { box-shadow: 5px 5px 0 0 var(--ink-2); }
.btn-lime:active { background: var(--lime-active); box-shadow: none; }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { box-shadow: 5px 5px 0 0 var(--line); }
.btn-elec { background: var(--electric); color: var(--paper); }
.btn-elec:hover { box-shadow: 5px 5px 0 0 var(--ink-2); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun:hover { box-shadow: 5px 5px 0 0 var(--ink-2); }
.btn-ghost { border-color: var(--line); color: var(--paper); }
.btn-ghost:hover { border-color: var(--muted); background: var(--ink-2); }
.btn-danger { border-color: var(--coral); color: var(--coral); }
.btn-danger:hover { background: var(--coral); color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--ink-3); border-color: var(--line); color: var(--muted);
  box-shadow: none; cursor: not-allowed;
}
.btn-lg { font-size: 20px; padding: 19px 28px; }
.btn-xl { font-size: 24px; padding: 20px 28px; }
.btn-sm { font-size: 14px; padding: 11px 16px; }
.btn-block { width: 100%; }
.btn-drop { box-shadow: 6px 6px 0 0 var(--ink-2); }
.btn-drop-hero { box-shadow: 8px 8px 0 0 var(--ink-2); }

.cost {
  font-family: var(--f-body); font-size: 13px; font-weight: 700; letter-spacing: 0;
  text-transform: none; border-radius: var(--r-pill); padding: 5px 10px;
  background: var(--cost-on-lime); font-variant-numeric: tabular-nums;
}
.btn-elec .cost, .btn-sun .cost { background: var(--cost-on-electric); }

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: var(--bw) solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { border-color: var(--muted); background: var(--ink-2); }

/* A ghost row: label left, cost right. Used all over the result rail. */
.rowbtn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  padding: 13px 18px; font-size: 15px; font-weight: 500;
}
.rowbtn:hover { border-color: var(--muted); background: var(--ink-2); }
.rowbtn span:last-child { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink-3); border: var(--bw) solid var(--line);
  border-radius: var(--r-pill); padding: 11px 15px;
  font-size: 14px; font-weight: 500; line-height: 1;
  transition: transform .12s cubic-bezier(.2, 1.4, .3, 1);
}
.chip:hover { background: var(--chip-hover); border-color: var(--muted); }
.chip .tick { display: none; }
.chip[aria-pressed="true"] {
  background: var(--lime); border-color: var(--lime); color: var(--ink); font-weight: 700;
}
.chip[aria-pressed="true"] .tick { display: block; }
.chip.hot[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); }
.chip.locked {
  border-style: dashed; color: var(--muted);
}
.chip.locked::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--sun); flex: none;
}
.chip.locked[aria-pressed="true"] { color: var(--ink); border-style: solid; }
.chip-pop { animation: chip-pop 120ms ease-out; }
@keyframes chip-pop { 50% { transform: scale(1.08); } }

.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------ credit counter */

.credits {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  background: var(--ink-2); border: var(--bw) solid var(--line);
  border-radius: var(--r-pill); padding: 7px 8px 7px 14px;
}
.credits .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--sun); flex: none; }
.credits .val { font-size: 17px; font-weight: 700; color: var(--sun); font-variant-numeric: tabular-nums; }
.credits .unit { font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.credits .plus {
  width: 26px; height: 26px; border-radius: 50%; background: var(--sun); color: var(--ink);
  display: grid; place-items: center; font-weight: 900; font-size: 16px; line-height: 1;
}
.credits.spending { border-color: var(--sun); }
.credits.empty { border-color: var(--coral); }
.credits.empty .val, .credits.empty .dot { color: var(--coral); background: var(--coral); }
.digit-flash { animation: digit-flash 240ms steps(2, end); }
@keyframes digit-flash { 0%, 99% { background: var(--sun); color: var(--ink); border-radius: 4px; } }

/* --------------------------------------------------------------- cards */

.card {
  background: var(--ink-2); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); padding: 32px;
}
.rule { height: var(--bw); background: var(--line); border: 0; }

/* ------------------------------------------------------------- sticker */

.sticker {
  position: absolute; display: grid; place-items: center; text-align: center;
  width: 78px; height: 78px; border-radius: 50%;
  font-family: var(--f-head); font-weight: 900; color: var(--ink);
  line-height: 1; z-index: 3;
}
.sticker-18 { background: var(--coral); border: var(--bw) solid var(--ink); font-size: 22px; transform: rotate(-7deg); }
.sticker-new { background: var(--lime); font-size: 17px; transform: rotate(5deg); }
.sticker-hot { background: var(--sun); font-size: 18px; transform: rotate(-4deg); }
.sticker-4k { background: var(--paper); font-size: 20px; transform: rotate(6deg); }
.sticker-video { background: var(--electric); color: var(--paper); width: 88px; height: 88px; font-size: 15px; letter-spacing: .04em; transform: rotate(-6deg); }
.sticker-best { background: var(--lime); width: 88px; height: 88px; font-size: 16px; transform: rotate(8deg); }
.sticker-cost { background: var(--sun); width: auto; height: auto; border-radius: var(--r-pill); padding: 8px 14px; font-size: 14px; transform: rotate(-7deg); }

/* ------------------------------------------------- placeholder imagery */

.ph {
  display: block; /* also used on <span> inside avatars — inline would collapse the height */
  position: relative; overflow: hidden;
  background: var(--ink-2); border: var(--bw) solid var(--line);
  border-radius: var(--r-card);
}
.ph::before {
  content: ""; position: absolute; inset: -25%;
  filter: blur(var(--sky-blur, 26px)); opacity: .85;
  background:
    radial-gradient(38% 38% at 32% 28%, var(--pa) 0%, transparent 70%),
    radial-gradient(42% 42% at 70% 68%, var(--pb) 0%, transparent 72%);
}
.ph::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(244, 244, 238, .06) 0 1px, transparent 1px 3px);
}
.ph > .blob {
  position: absolute; left: 50%; top: 54%; width: 52%; height: 76%;
  transform: translate(-50%, -50%);
  border-radius: 48% 52% 42% 58% / 55% 48% 52% 45%;
  background: rgba(11, 11, 15, var(--blob-alpha));
  filter: blur(var(--blob-blur));
  z-index: 1;
}
/* The 26px sky blur is tuned for a big tile; on an avatar it smears to black.
   Scale the blur down with the element. */
.ph-sm { --sky-blur: 9px; --blob-blur: 5px; --blob-alpha: .18; }

/* Never purple→pink. Cycle these six pairs. */
.duo-1 { --pa: var(--lime); --pb: var(--electric); }
.duo-2 { --pa: var(--coral); --pb: var(--sun); }
.duo-3 { --pa: var(--electric); --pb: var(--coral); }
.duo-4 { --pa: var(--sun); --pb: var(--lime); }
.duo-5 { --pa: var(--electric); --pb: var(--lime); }
.duo-6 { --pa: var(--coral); --pb: var(--electric); }

.tag {
  position: absolute; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 5px 10px;
  background: rgba(11, 11, 15, .62); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tag-video { background: var(--electric); color: var(--paper); }
.tag-tl { left: 10px; top: 10px; }
.tag-tr { right: 10px; top: 10px; }
.tag-bl { left: 10px; bottom: 10px; }
.tag-br { right: 10px; bottom: 10px; }

/* -------------------------------------------------------------- inputs */

.field {
  width: 100%; background: var(--ink-3); border: var(--bw) solid var(--line);
  border-radius: var(--r-input); padding: 14px 16px;
  font-size: 16px; line-height: 1.5; color: var(--paper);
}
.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-color: var(--lime); caret-color: var(--lime); }
.field.error { border-color: var(--coral); }
.field-msg { font-size: 12px; color: var(--coral); margin-top: 8px; }

.toggle {
  width: 38px; height: 22px; border-radius: var(--r-pill);
  background: var(--ink-3); border: var(--bw) solid var(--line); position: relative; flex: none;
}
.toggle::after {
  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: .12s linear;
}
.toggle[aria-pressed="true"] { border-color: var(--lime); }
.toggle[aria-pressed="true"]::after { left: 18px; background: var(--lime); }

.checkbox {
  width: 24px; height: 24px; border-radius: var(--r-check); flex: none;
  border: var(--bw) solid var(--line); background: var(--ink);
  display: grid; place-items: center;
}
.checkbox svg { display: none; }
.checkbox[aria-checked="true"] { background: var(--lime); border-color: var(--lime); }
.checkbox[aria-checked="true"] svg { display: block; }

/* ------------------------------------------------------------ progress */

.bar {
  height: 12px; border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  background: var(--ink); overflow: hidden;
}
.bar > i { display: block; height: 100%; background: var(--lime); border-radius: var(--r-pill); transition: width .4s linear; }
.bar.video > i { background: var(--electric); }

/* The generate button's travelling border, and the render frame's. */
.travel {
  padding: 3px; border-radius: var(--r-card);
  background-image: linear-gradient(90deg, var(--line) 0 40%, var(--lime) 45%, var(--lime) 55%, var(--line) 60% 100%);
  background-size: 200% 100%;
  animation: travel 1.4s linear infinite;
}
.travel.pill { border-radius: var(--r-pill); }
@keyframes travel { to { background-position: 200% 0; } }

/* -------------------------------------------------------------- toasts */

.toasts {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none; padding: 0 16px;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 14px;
  border-radius: var(--r-input); padding: 14px 16px;
  background: var(--ink-2); border: var(--bw) solid var(--line);
  font-size: 14px; max-width: 520px; width: 100%;
  animation: toast-up .12s linear;
}
.toast-sun { background: var(--sun); border-color: var(--sun); color: var(--ink); font-weight: 700; }
.toast-ok { border-color: var(--lime); }
.toast-bad { border-color: var(--coral); }
.toast .x { margin-left: auto; opacity: .5; font-size: 16px; line-height: 1; padding: 4px; }
.toast .x:hover { opacity: 1; }
@keyframes toast-up { from { transform: translateY(16px); } }

/* --------------------------------------------------------------- modal */

.modal-back {
  position: fixed; inset: 0; z-index: 70; background: rgba(11, 11, 15, .72);
  display: grid; place-items: center; padding: 24px;
}
.modal {
  position: relative; width: 100%; max-width: 480px;
  background: var(--ink-2); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); padding: 32px;
  box-shadow: 8px 8px 0 0 var(--ink);
}
[hidden] { display: none !important; }

/* ---------------------------------------------------------- auth modal */

.auth-modal { max-width: 420px; display: grid; gap: 18px; padding: 28px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--ink-3); border-radius: var(--r-pill); padding: 4px; }
.auth-tab {
  border-radius: var(--r-pill); padding: 11px 12px; font-size: 14px; font-weight: 700;
  color: var(--muted); font-family: var(--f-body);
}
.auth-tab[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .16em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: var(--bw); background: var(--line); }
.auth-alt { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.auth-alt button { font-size: 13px; color: var(--electric); text-decoration: underline; }
.auth-alt button:hover { color: var(--paper); }
.auth-close { position: absolute; top: 14px; right: 16px; color: var(--muted); font-size: 16px; line-height: 1; padding: 6px; }
.auth-close:hover { color: var(--paper); }
.auth-modal .legal a { color: var(--electric); }

/* -------------------------------------------------------- empty states */

.empty {
  border: var(--bw) dashed var(--line); border-radius: var(--r-card);
  display: grid; place-items: center; text-align: center; gap: 10px; padding: 48px 24px;
  background-image: radial-gradient(var(--ink-2) 1px, transparent 1px); background-size: 18px 18px;
}

/* -------------------------------------------------------------- footer */

.footer {
  margin-top: auto; border-top: var(--bw) solid var(--line);
  padding: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
.footer .lockup { gap: 10px; opacity: .7; }
.legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-left: auto; }
.legal-links a { font-size: 12px; color: var(--muted); }
.legal-links a:hover { color: var(--paper); }
.footer-note { width: 100%; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------ consent banner */

#yspot-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
  background: var(--ink-2); border: var(--bw) solid var(--line); border-radius: var(--r-card);
  padding: 16px; display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between; font-size: 13px;
}
#yspot-consent p { color: var(--muted); max-width: 66ch; }
#yspot-consent a { color: var(--lime); }
#yspot-consent div { display: flex; gap: 8px; }
#yspot-consent button {
  border-radius: var(--r-pill); padding: 9px 18px; font-weight: 700; font-size: 13px;
  cursor: pointer; font-family: var(--f-body); border: var(--bw) solid var(--line);
  background: transparent; color: var(--paper);
}
#yspot-consent button[data-consent="granted"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
@media (max-width: 1000px) { #yspot-consent { bottom: 96px; } }

/* ----------------------------------------------------------- mobile menu */

.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: var(--bw) solid var(--line); place-items: center; flex: none; }
.menu-btn:hover { border-color: var(--muted); }

.menu-panel { position: fixed; inset: 0; z-index: 85; background: rgba(11, 11, 15, .72); display: flex; justify-content: flex-end; }
.menu-sheet {
  position: relative; width: min(360px, 88vw); height: 100%; overflow-y: auto;
  background: var(--ink); border-left: var(--bw) solid var(--line);
  padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  animation: sheet-in .14s ease-out;
}
@keyframes sheet-in { from { transform: translateX(24px); } }
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.menu-close { width: 40px; height: 40px; border-radius: 50%; border: var(--bw) solid var(--line); color: var(--paper); font-size: 16px; flex: none; }
.menu-close:hover { color: var(--paper); }
.menu-auth { display: grid; gap: 10px; margin: 8px 0 24px; }
.menu-auth .credits { justify-self: start; }
.menu-nav { display: grid; gap: 2px; }
.menu-nav a {
  font-family: var(--f-head); font-weight: 800; font-size: 20px; text-transform: uppercase;
  letter-spacing: -.01em; padding: 13px 0; border-bottom: var(--bw) solid var(--line);
}
.menu-nav a[aria-current="page"] { color: var(--lime); }
.menu-legal { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 22px; }
.menu-legal a { font-size: 12px; color: var(--muted); }
.menu-legal a:hover { color: var(--paper); }

/* ---------------------------------------------------------- mobile dock */

.dock { display: none; }

/* ── Tablet: 700-1100px ───────────────────────────────────────────────────
   Not a big phone. There is room for the nav links and multi-column grids, so
   the dock stays away and only the overflow menu appears. */
@media (min-width: 701px) and (max-width: 1100px) {
  .topbar { padding: 0 20px; }
  .topbar-nav { gap: 4px; }
  .navlink { padding: 9px 10px; font-size: 12px; letter-spacing: .06em; }
  .pad { padding: 36px 24px; }
  .g6 { grid-template-columns: repeat(4, 1fr); }
  .g4 { grid-template-columns: repeat(3, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
}

/* The bar cannot fit five links plus Log in, Create and the 18+ pill under 900px. */
@media (max-width: 900px) {
  .topbar-nav .navlink { display: none; }
  .menu-btn { display: grid; }
}

@media (max-width: 700px) {
  .topbar { height: 64px; padding: 0 14px; gap: 10px; }
  .topbar .wordmark { font-size: 19px !important; }
  .topbar .mark { width: 24px; height: 24px; }
  .topbar-nav { gap: 8px; }
  .credits { padding: 6px 6px 6px 11px; gap: 6px; }
  .credits .dot { width: 12px; height: 12px; }
  .credits .val { font-size: 14px; }
  .credits .unit { display: none; }
  .credits .plus { width: 24px; height: 24px; font-size: 15px; }
  .pill-18 { padding: 5px 8px; font-size: 10px; }
  .avatar-btn { display: none; }

  /* 44px minimum touch target on every control. */
  .chip { padding: 13px 16px; }
  .btn { min-height: 44px; }
  .btn-sm { padding: 12px 16px; }
  .rowbtn { padding: 15px 18px; }
  .icon-btn { width: 44px; height: 44px; }

  .footer { padding: 20px 16px; }
  .legal-links { margin-left: 0; gap: 8px 14px; }

  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--ink); border-top: var(--bw) solid var(--line);
    padding: 10px 8px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .dock a {
    min-height: 52px; display: grid; place-items: center; gap: 6px;
    font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: var(--muted);
  }
  .dock a[aria-current="page"] { color: var(--paper); font-weight: 700; }
  body.has-dock { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .toasts { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------- helpers */

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; }
.pad { padding: 56px; }
.pad-app { padding: 28px 32px; }
.row { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stack { display: grid; gap: 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g6 { grid-template-columns: repeat(6, 1fr); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 1000px) {
  .pad { padding: 24px 16px; }
  .pad-app { padding: 20px 16px; }
  .g4, .g6 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: 1fr; }
  h1, .h1 { font-size: 38px; }
  h2, .h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .travel { background-image: none; background-color: var(--lime); }
}