/* ==========================================================================
   Shared components (both variations). Semantic tokens + logical properties only.
   ========================================================================== */

/* ---------- Lenis (smooth scroll) essentials ---------- */
html.lenis, html.lenis body { block-size: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.is-loading body { overflow: hidden; }
/* Lock the root, not the body: overflow on body turns it into a scroll container
   and the sticky header would stop pinning to the viewport while the menu is open. */
html.menu-open { overflow-y: hidden; }

/* ---------- Loader (the "O") ---------- */
.loader { display: none; }
.js .loader {
  --loader-bg-alpha: 1;
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(var(--loader-rgb) / var(--loader-bg-alpha));
}
.loader__stage {
  position: relative;
  inline-size: min(560px, 74vw);
  container-type: inline-size;
  transform: translateX(var(--o-shift, 0%));
}
[dir="rtl"] .loader__stage { transform: translateX(calc(var(--o-shift, 0%) * -1)); }
.loader[data-loader="portal"] .loader__stage { inline-size: min(860px, 170vw); }
.loader__logo { inline-size: 100%; block-size: auto; overflow: visible; }
.loader__track { color: var(--loader-track); }
.loader:not([data-reduced])[data-phase="load"] :is(.logo-b, .logo-r, .logo-a),
.loader:not([data-reduced])[data-loader="portal"] :is(.logo-b, .logo-r, .logo-a) { opacity: 0; }
/* custom: the O graphic element alone; a conic mask fills it with real progress, clockwise from 12 */
.loader[data-loader="custom"] .loader__stage { inline-size: min(160px, 40vw); transform: none; }
.loader__o { position: relative; display: grid; }
.loader__o > .o-solid { grid-area: 1 / 1; inline-size: 100%; }
.loader__o-track { background: var(--gray-200); }
.loader__o-fill {
  -webkit-mask: var(--o-mask) center / 100% 100% no-repeat, conic-gradient(#000 calc(var(--p, 0) * 360deg), transparent 0);
  -webkit-mask-composite: source-in;
  mask: var(--o-mask) center / 100% 100% no-repeat, conic-gradient(#000 calc(var(--p, 0) * 360deg), transparent 0);
  mask-composite: intersect;
}
.loader[data-reduced] .loader__o-fill { --p: 1; }
.loader[data-loader="custom"] .loader__pct { top: 50.06%; left: 50.06%; font-size: 13cqi; }
.loader[data-reduced] .loader__track { display: none; }
.loader__pct { /* sits in the O's counter: O centre = 36.37% / 50.07% of the wordmark box */
  position: absolute;
  top: 50.07%;
  left: 36.37%;
  translate: -50% -50%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 4.1cqi;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.loader__pct span { color: var(--accent); }
.loader[data-loader="portal"] .loader__pct { font-size: 3.2cqi; }
.loader[data-reduced] .loader__pct { display: none; }
.loader[data-phase="portal"] {
  -webkit-mask: radial-gradient(circle at var(--hole-x) var(--hole-y), transparent var(--hole-r), #000 calc(var(--hole-r) + 1px));
  mask: radial-gradient(circle at var(--hole-x) var(--hole-y), transparent var(--hole-r), #000 calc(var(--hole-r) + 1px));
}
.is-loading [data-header-logo] { opacity: 0; }
[data-intro="portal"] [data-header-logo] { transition: opacity 700ms var(--ease-out) 150ms; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled,
.site-header.is-menu-open {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-block-end-color: var(--line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-block-size: var(--header-h);
}
.brand { display: inline-flex; flex-shrink: 0; padding-block: 16px; /* exclusion zone: keeps the lockup off the bar edges */ }
/* Two files, one per ground: the lockup carries a "by CodeDev" credit that must stay
   legible, and the metallic gradients are drawn for a specific background. CSS picks the
   variant from html[data-theme], so the toggle swaps them with no re-render. */
.brand__logo { display: block; inline-size: clamp(150px, 11vw, 168px); block-size: auto; } /* ≥150px: Logo Minimum Size p.17 */
.brand__logo--on-dark { display: none; }
[data-theme="dark"] .brand__logo--on-light { display: none; }
[data-theme="dark"] .brand__logo--on-dark { display: block; }

.nav { display: none; }
.nav__list { display: flex; gap: clamp(1rem, 2vw, 2.25rem); }
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out);
}
/* a tiny "bar" grows under the active/hovered link — a data-bar, not a decoration */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  border-radius: 3px;
  background: var(--grad-touch);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform var(--dur-base) var(--ease-out);
}
[dir="rtl"] .nav__link::after { --origin-start: right; }
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-xs); margin-inline-start: auto; }

.lang-switch {
  display: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.8rem;
}
.lang-switch button {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  color: var(--ink-3);
}
.lang-switch button[aria-pressed="true"] { background: var(--surface-sunken); color: var(--ink); }
.lang-switch button[aria-disabled="true"] { cursor: not-allowed; }
.lang-switch [lang="ar"] { font-family: var(--font-body); font-size: 0.9rem; }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
}
.menu-toggle span,
.menu-toggle span::before { display: block; inline-size: 18px; block-size: 1.5px; background: var(--ink); transition: transform var(--dur-base) var(--ease-out); }
.menu-toggle span { position: relative; transform: translateY(-3px); }
.menu-toggle span::before { content: ""; position: absolute; transform: translateY(6px); }
.menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::before { transform: rotate(-90deg); }

/* light / dark switch (core/theme.js): a half-lit disc that turns over with the theme */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.theme-toggle:hover { border-color: var(--line-accent); }
.theme-toggle__o {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  transition: rotate var(--dur-slow) var(--ease-out);
}
.theme-toggle[aria-pressed="true"] .theme-toggle__o { rotate: 180deg; }
@media (prefers-reduced-motion: reduce) { .theme-toggle__o { transition: none; } }

.mobile-panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  padding: var(--space-l) var(--page-gutter);
  background: var(--surface);
  display: grid;
  align-content: start;
  gap: var(--space-l);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.is-menu-open .mobile-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mobile-panel .nav__list { flex-direction: column; gap: 0; }
.mobile-panel .nav__link { font-size: var(--step-3); padding-block: 0.6rem; color: var(--ink); }
.mobile-panel .lang-switch { display: inline-flex; justify-self: start; }

@media (min-width: 1024px) {
  .nav { display: block; margin-inline: auto; }
  .site-header__actions { margin-inline-start: 0; }
  .lang-switch { display: inline-flex; }
  .menu-toggle, .mobile-panel { display: none; }
}
@media (max-width: 599px) {
  .site-header__actions .btn--ghost { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--grad-touch);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-block-size: 48px;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 0.98rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--on-accent);
  background: var(--bora-electric-violet);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-indigo);
  transition: opacity var(--dur-base) var(--ease-out);
}
.btn::after { /* light point that follows the pointer (point-based gradient, p.52) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--bora-core-purple) 85%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--small { min-block-size: 42px; padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.btn--ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost::before { background: var(--surface); }
.btn--ghost::after { background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), var(--surface-tint), transparent 70%); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.btn--on-band { color: var(--bora-midnight); background: var(--bora-white); }
.btn--on-band::before { background: var(--bora-white); }
.btn .btn__arrow { inline-size: 1em; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* ---------- Chips / pills ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--accent-strong);
  white-space: nowrap;
}
.chip::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--grad-touch);
}

/* ---------- Glass ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  border-radius: var(--radius-l);
}

/* ---------- Icons ---------- */
.icon { display: inline-grid; place-items: center; inline-size: var(--icon-size, 40px); block-size: var(--icon-size, 40px); color: var(--accent); }
.icon svg { inline-size: 100%; block-size: 100%; }
.bora-o { inline-size: 100%; block-size: 100%; overflow: visible; }

:root { --o-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='443 523 154 154'%3E%3Cpath d='M545.23,528.44c-18.64-6.51-38.77-5.57-56.68,2.65-1.13.52-1.98,1.44-2.4,2.61-.42,1.17-.36,2.44.18,3.56l7.29,15.11c1.09,2.26,3.75,3.22,6.05,2.18,11.81-5.32,25.07-5.83,37.33-1.45,12.3,4.4,22.26,13.26,28.03,24.95,12.11,24.55,2.07,54.52-22.39,66.82-12.11,6.09-25.86,7.01-38.72,2.6-2.2-.76-4.62.25-5.63,2.34l-7.37,15.2c-.56,1.16-.61,2.52-.13,3.72.48,1.19,1.44,2.14,2.64,2.59,8.55,3.21,17.55,4.84,26.73,4.84,11.86,0,23.7-2.81,34.23-8.12,18.13-9.14,31.61-24.78,37.96-44.06,6.35-19.28,4.82-39.88-4.32-58-8.91-17.68-24.11-31-42.8-37.52Z'/%3E%3Cpath d='M488.27,638.45c-5.25-4.36-9.49-9.69-12.59-15.84-9.65-19.15-6-42.26,9.1-57.51,1.42-1.44,1.78-3.63.9-5.45l-4.35-8.98h.01s-3.3-6.83-3.3-6.83c-.65-1.35-1.87-2.3-3.34-2.61-1.46-.31-2.94.07-4.07,1.04-12.74,10.88-21.65,25.96-25.08,42.46-3.53,17.01-1.26,34.21,6.58,49.75,5.43,10.77,13.07,19.84,22.72,26.96.84.62,1.83.94,2.86.94.39,0,.78-.05,1.15-.14,1.39-.34,2.54-1.27,3.16-2.56l7.49-15.46c.97-1.99.45-4.36-1.25-5.78Z'/%3E%3C/svg%3E"); } /* the logo O (both arcs), viewBox = oMark box */

/* ---------- The O as a solid element (exact logo silhouette, oMark box 154 × 154) ----------
   The fill is a conic ramp laid along each arc exactly like the arc engine's --arc-ramp-o, so the
   canvas arcs and this resting O are interchangeable. Arcs: big −119°…115°, small 123°…231°. */
.o-solid {
  --o-ramp-1: var(--gray-200);
  --o-ramp-2: var(--bora-lavender);
  --o-ramp-3: var(--bora-soft-violet);
  --o-ramp-4: var(--bora-digital-indigo);
  aspect-ratio: 1;
  background: conic-gradient(from -29deg at 50.06% 50.06%,
    var(--o-ramp-1) 0deg, var(--o-ramp-2) 81.9deg, var(--o-ramp-3) 175.5deg, var(--o-ramp-4) 234deg,
    var(--o-ramp-1) 242deg, var(--o-ramp-2) 279.8deg, var(--o-ramp-3) 323deg, var(--o-ramp-4) 350deg);
  -webkit-mask: var(--o-mask) center / 100% 100% no-repeat;
  mask: var(--o-mask) center / 100% 100% no-repeat;
}

/* ---------- Badges (Vision 2030 / Saudi Made) ---------- */
.badges { display: flex; align-items: center; gap: var(--space-m); }
.badges img { block-size: 44px; inline-size: auto; }

/* ---------- Dark theme on the switchable pages (v3, v8) ----------
   The resting O takes the dark arc ramp (tokens.css --arc-ramp-o), so the canvas hand-off stays exact;
   the authorities' badges are issued on white and keep a white ground (as in v7). */
[data-theme="dark"] :is(.v3, .v8) .o-solid {
  --o-ramp-1: var(--bora-white);
  --o-ramp-2: var(--bora-lavender);
  --o-ramp-3: var(--bora-core-purple);
  --o-ramp-4: var(--bora-soft-violet);
}
[data-theme="dark"] :is(.v3, .v8) .badges img { padding: 5px 10px; border-radius: 10px; background: var(--bora-white); }
/* the small O marks (pause, assistant, trial) are drawn in lavender on Midnight, as in v7 */
[data-theme="dark"] :is(.v3, .v8) .bora-o path { fill: var(--bora-lavender); }
[data-theme="dark"] :is(.v3, .v8) .lang-switch { border-color: var(--glass-border); }
[data-theme="dark"] :is(.v3, .v8) .lang-switch button[aria-pressed="true"] { background: color-mix(in srgb, var(--bora-white) 12%, transparent); }

/* ---------- Marquee ---------- */
.marquee {
  --marquee-duration: 40s;
  position: relative;
  display: flex;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--marquee-gap, var(--space-2xl));
  padding-inline-end: var(--marquee-gap, var(--space-2xl));
  animation: marquee var(--marquee-duration) linear infinite;
  animation-direction: var(--marquee-direction, normal);
}
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track,
.marquee.is-offscreen .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes marquee-rtl { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask: none; mask: none; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .marquee__track[aria-hidden="true"] { display: none; }
}
.marquee-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--ink-3);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
}
.marquee-toggle .when-paused,
.marquee-toggle[data-paused] .when-playing { display: none; }
.marquee-toggle[data-paused] .when-paused { display: inline; }
@media (prefers-reduced-motion: reduce) { .marquee-toggle { display: none; } }

/* ---------- AI chat (shared mechanics; variations style the frame) ---------- */
.ai-chat { display: grid; gap: var(--space-s); }
.ai-chat__head { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-weight: var(--fw-medium); }
.ai-chat__head .ai-avatar { inline-size: 34px; block-size: 34px; }
.ai-chat__log { display: grid; align-content: start; gap: var(--space-xs); min-block-size: 9.5rem; }
.msg {
  max-inline-size: 88%;
  padding: 0.8rem 1.05rem;
  border-radius: 18px;
  line-height: 1.5;
  font-size: 0.98rem;
}
.msg--user { justify-self: end; border-end-end-radius: 6px; color: var(--on-accent); background: var(--grad-violet); }
.msg--bot { justify-self: start; border-end-start-radius: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.msg--thinking { inline-size: 64px; block-size: 46px; display: grid; place-items: center; padding: 10px; }
.msg--thinking .bora-o { inline-size: 24px; block-size: 24px; }
/* the O's viewBox is centred on the ring, so rotating the whole glyph keeps it on axis */
.bora-o.is-spinning { animation: o-spin 1.1s var(--ease-in-out) infinite; }
.bora-o.is-spinning .bora-o__small { animation: o-breathe 1.1s var(--ease-in-out) infinite; }
@keyframes o-spin { to { transform: rotate(360deg); } }
@keyframes o-breathe { 50% { opacity: 0.35; } }
.ai-chat__composer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem;
  padding-inline-start: 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
}
.ai-chat__composer input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: none;
  font-size: 0.95rem;
  color: var(--ink);
  outline: none;
}
.ai-chat__composer input::placeholder { color: var(--ink-3); }
.ai-chat__composer .btn.is-nudged { animation: nudge 900ms var(--ease-out); }
@keyframes nudge {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bora-core-purple) 0%, transparent); }
  40% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--bora-core-purple) 25%, transparent); }
}
.ai-q {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  inline-size: 100%;
  padding: 0.85rem 1.05rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-align: start;
  color: var(--ink);
  /* hover uses `translate` so it never fights GSAP, which owns `transform` */
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), translate var(--dur-base) var(--ease-out);
}
.ai-q:hover { border-color: var(--line-accent); translate: calc(4px * var(--dir, 1)) 0; }
[dir="rtl"] .ai-q { --dir: -1; }
.ai-q[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-tint); }
.ai-q .icon { --icon-size: 22px; flex-shrink: 0; }

/* ---------- Check list ---------- */
.check-list { display: grid; gap: 0.7rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.check-list li::before {
  content: "";
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 0.15em;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14.2 7' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--grad-touch);
}

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-2xl) var(--space-l); background: var(--surface-sunken); }
.site-footer__grid { display: grid; gap: var(--space-xl); }
.site-footer__brand .brand__logo { inline-size: 160px; }
.site-footer__brand p { margin-block-start: var(--space-s); max-inline-size: 44ch; color: var(--ink-2); }
.site-footer__col h2 { font-size: 0.8rem; font-weight: var(--fw-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
.site-footer__col ul { margin-block-start: var(--space-s); display: grid; gap: 0.5rem; }
.site-footer__col a { color: var(--ink); transition: color var(--dur-fast); }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__base {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: 0.88rem;
  color: var(--ink-3);
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}