/* Genera SemiBold, embedded. Declared for every weight so the browser never fakes a bolder version. */
  @font-face { font-family: "Genera"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("/assets/Genera-SemiBold.ttf") format("truetype"); }
  /* Layout: toolbar header, left-aligned hero with a small browser-window mock, Apps grid, Services as three price columns, Contact. */
  :root {
    --bg: #d5e7f4;
    --surface: #ecf4fa;
    --fg: #132434;
    --muted: #536473;
    --line: #b2c4d1;
    --accent: #226383;
    --accent-fg: #f4f9fc;
    --accent-text: #215f7e;
    --tint: #b5d4ec;
    --bg-img: linear-gradient(180deg, #cae0f1, #fff0d3);
    --accent-grad: linear-gradient(135deg, #226383, #132434);
    --text-grad: linear-gradient(90deg, #226383, #132434);
    --dark-grad: linear-gradient(160deg, #226383, #132434);
    --head-bg: rgba(202,224,241,0.94);
    --card-btn: linear-gradient(135deg, #f7fafd, #95c2e3);
    --card-btn-fg: #132434;
    --card-btn-edge: #f7fafd;
    --font-display: "Genera", "Segoe UI", system-ui, sans-serif;
    --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #132434;
      --surface: #243342;
      --fg: #e8f2f9;
      --muted: #95a2ac;
      --line: #394957;
      --accent: #95c2e3;
      --accent-fg: #132434;
      --accent-text: #95c2e3;
      --tint: #2d4457;
      --bg-img: linear-gradient(180deg, #132434, #1a445c);
      --accent-grad: linear-gradient(135deg, #95c2e3, #5c92b3);
      --text-grad: linear-gradient(90deg, #95c2e3, #dfedf7);
      --dark-grad: linear-gradient(160deg, #eff6fb, #95c2e3);
      --head-bg: rgba(19,36,52,0.94);
      --card-btn: linear-gradient(135deg, #132434, #226383);
      --card-btn-fg: #f4f9fc;
      --card-btn-edge: #132434;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #132434;
    --surface: #243342;
    --fg: #e8f2f9;
    --muted: #95a2ac;
    --line: #394957;
    --accent: #95c2e3;
    --accent-fg: #132434;
    --accent-text: #95c2e3;
    --tint: #2d4457;
    --bg-img: linear-gradient(180deg, #132434, #1a445c);
    --accent-grad: linear-gradient(135deg, #95c2e3, #5c92b3);
    --text-grad: linear-gradient(90deg, #95c2e3, #dfedf7);
    --dark-grad: linear-gradient(160deg, #eff6fb, #95c2e3);
    --head-bg: rgba(19,36,52,0.94);
    --card-btn: linear-gradient(135deg, #132434, #226383);
    --card-btn-fg: #f4f9fc;
    --card-btn-edge: #132434;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body { margin: 0; }
  html { scroll-behavior: auto; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    background: var(--bg);
    background-image: var(--bg-img);
    background-attachment: fixed;
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    padding-block: 0;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

  .wrap { max-width: 1180px; margin: 0 auto; }
  h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
  p { margin: 0; }
  .label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

  /* header */
  .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--head-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1.5px solid transparent; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-block: 20px; }
  /* paints the area above the sticky header (phone status bar) so nothing scrolls into view there */
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
  .top.scrolled { border-bottom-color: var(--line); padding-block: 10px; gap: 8px 24px; }
  .top.scrolled .brand { font-size: 28px; }
  @media (prefers-reduced-motion: no-preference) {
    .top, .brand { transition: padding 0.2s, font-size 0.2s, border-color 0.2s; }
  }
  .brand { order: 1; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 5vw, 44px); line-height: 1; text-decoration: none; letter-spacing: -0.01em; }
  .brand { display: inline-flex; align-items: center; gap: 0.3em; }
  .brand b { font-weight: inherit; }
  .brand .logo { width: 1.15em; height: 1.15em; flex: none; }
  .brand span { color: var(--accent-text); }
  .nav { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 20px; }
  .nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--muted); padding: 6px 0; }
  .nav a:hover { color: var(--fg); }
  .tools { order: 2; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
  .seg button { font: inherit; font-size: 13px; font-weight: 600; padding: 5px 11px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
  .seg button:hover { color: var(--fg); }
  .seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .seg button:focus-visible { outline-offset: -3px; }
  .seg button[data-theme-btn] { display: inline-grid; place-items: center; padding: 5px 10px; }
  .seg button[data-theme-btn] svg { width: 16px; height: 16px; display: block; }

  /* motion: everything is fully visible at rest; these only play on load, on scroll-in and on hover */
  @media (prefers-reduced-motion: no-preference) {
    .hero > div:first-child > * { animation: up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
    .hero > div:first-child > :nth-child(2) { animation-delay: 0.08s; }
    .hero > div:first-child > :nth-child(3) { animation-delay: 0.16s; }
    .hero > div:first-child > :nth-child(4) { animation-delay: 0.24s; }
    .hero .mock { animation: up 0.8s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
    /* the little page in the hero draws itself, bar by bar */
    .mock-body > * { transform-origin: left center; animation: grow 0.6s ease-out backwards; }
    .mock-body > :nth-child(1) { animation-delay: 0.5s; }
    .mock-body > :nth-child(2) { animation-delay: 0.62s; }
    .mock-body > :nth-child(3) { animation-delay: 0.74s; }
    .mock-body > :nth-child(4) { animation-delay: 0.86s; }
    .mock-body > :nth-child(5) { animation-delay: 1s; }
    @keyframes up { from { opacity: 0; transform: translateY(18px); } }
    @keyframes grow { from { transform: scaleX(0); } }

    /* cards and steps rise into place as they scroll into view (browsers without scroll timelines just show them) */
    @supports (animation-timeline: view()) {
      .sec-head, .road-head, .app, .plan, .stop, .rows {
        animation: rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
      }
      @keyframes rise { from { opacity: 0.35; transform: translateY(28px); } to { opacity: 1; transform: none; } }
    }

    .app, .plan { transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
    .btn, .mini, .get { transition: translate 0.15s ease, filter 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
  }
  @media (hover: hover) {
    .app:hover, .plan:hover { translate: 0 -4px; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.45); border-color: var(--accent); }
    .btn:hover, .mini:hover { translate: 0 -1px; }
  }

  /* menu jump: the target heading blinks twice after the scroll ends; the current section is underlined in the menu */
  .nav a.active { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
  .flash { border-radius: 8px; animation: blink 1.4s ease-out; }
  @keyframes blink {
    0%   { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
    15%  { background-color: var(--tint); box-shadow: 0 0 0 10px var(--tint); }
    35%  { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
    55%  { background-color: var(--tint); box-shadow: 0 0 0 10px var(--tint); }
    100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
  }
  @media (prefers-reduced-motion: reduce) {
    .flash { animation: none; background-color: var(--tint); box-shadow: 0 0 0 10px var(--tint); }
  }

  /* hero */
  .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px 56px; align-items: center; padding-block: 40px 72px; }
  .hero > * { min-width: 0; }
  .hero h1 { font-size: clamp(34px, 5.6vw, 60px); font-weight: 700; margin-top: 16px; }
  .hero h1 em { font-style: normal; color: var(--accent-text); background: var(--text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .hero p.lead { font-size: 18px; color: var(--muted); max-width: 46ch; margin-top: 20px; }
  .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 8px; border: 1.5px solid var(--fg); }
  .btn.primary { background: var(--accent-grad); border-color: var(--accent); color: var(--accent-fg); }
  .btn.primary:hover { filter: brightness(1.08); }
  .btn.ghost:hover { background: var(--surface); }

  /* browser mock */
  .mock { background: var(--surface); border: 1.5px solid var(--fg); border-radius: 10px; overflow: hidden; }
  .mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1.5px solid var(--fg); }
  .mock-bar i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--fg); display: block; }
  .mock-url { margin-left: 8px; flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 3px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mock-body { padding: 22px 20px 24px; display: grid; gap: 12px; }
  .m-line { height: 10px; border-radius: 5px; background: var(--line); }
  .m-title { height: 18px; width: 70%; border-radius: 6px; background: var(--fg); }
  .m-btn { height: 28px; width: 38%; border-radius: 6px; background: var(--accent-grad); margin-top: 6px; }
  .m-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
  .m-box { height: 54px; border-radius: 8px; background: var(--tint); }

  /* sections */
  section { padding-block: 64px; border-top: 1.5px solid var(--line); scroll-margin-top: 130px; }
  .sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 32px; }
  .sec-head h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
  .sec-head p { color: var(--muted); max-width: 44ch; }

  /* apps */
  .apps { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; overscroll-behavior-x: contain; }
  .apps::-webkit-scrollbar { display: none; }
  .apps:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
  .apps > .app { flex: 0 0 86%; scroll-snap-align: start; }
  .car-ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
  .car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--fg); display: grid; place-items: center; cursor: pointer; }
  .car-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
  .car-btn:disabled { opacity: 0.35; cursor: default; }
  .car-dots { display: flex; gap: 8px; }
  .car-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background 0.2s, width 0.2s; }
  .car-dots i.on { background: var(--accent); width: 22px; border-radius: 4px; }
  @media (min-width: 600px) { .apps > .app { flex-basis: calc((100% - 20px) / 2); } }
  @media (min-width: 960px) { .apps > .app { flex-basis: calc((100% - 40px) / 3); } }
  .app { background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .app-icon { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: var(--tint); color: var(--accent-text); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
  .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; text-align: right; }
  .app-icon img { display: block; width: 100%; height: 100%; }
  .app-cta .app-icon { background: var(--surface); }
  .app .label { font-size: 12px; flex: none; }
  .app .app-price { font-size: 22px; color: var(--fg); flex: none; }
  .app .app-note { font-size: 13px; flex: none; }
  .app h3 { font-size: 22px; font-weight: 600; }
  .app p { color: var(--muted); font-size: 15px; flex: 1; }
  .app .get { font-weight: 600; font-size: 15px; color: var(--accent-text); text-decoration: none; }
  .app .get:hover { text-decoration: underline; }
  .stores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .store { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; border: 1.5px dashed var(--line); font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; cursor: not-allowed; }
  .store[href] { border-style: solid; border-color: currentColor; color: var(--accent-text); cursor: pointer; }
  .store[href]:hover { background: var(--card-btn); color: var(--card-btn-fg); border-color: transparent; }
  .app .soon { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
  .app-cta { border-style: dashed; border-color: var(--accent); background: var(--tint); }
  .app-cta .btn { align-self: flex-start; }
  .app-price { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; overflow-wrap: anywhere; }
  .app-note { font-size: 13px; color: var(--muted); margin-top: 6px; }

  /* services */
  .plans { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
  .plan { background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .plan.main { background: var(--dark-grad); color: var(--bg); border-color: var(--fg); }
  .plan.main .label, .plan.main .plan-time { color: var(--bg); opacity: 0.75; }
  .plan.main li::before { background: var(--card-btn-edge); }
  .plan h3 { font-size: 24px; font-weight: 600; }
  .price { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; line-height: 1.15; overflow-wrap: anywhere; }
  .price small { font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: 0; opacity: 0.7; }
  .plan-time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 8px; }
  .plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
  .plan li { position: relative; padding-left: 22px; font-size: 15px; }
  .plan li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 10px; height: 2px; background: var(--accent); }
  .tiers { display: grid; gap: 14px; }
  .tier + .tier { border-top: 1.5px solid var(--line); padding-top: 14px; }
  .tier h4 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
  .tier .price { font-size: 24px; }
  .plans-note { margin: 20px 0 0; font-size: 14px; color: var(--muted); }
  .plan .btn { text-align: center; border-color: currentColor; }
  .plan.main .btn { background: var(--card-btn); border-color: var(--card-btn-edge); color: var(--card-btn-fg); }

  /* roadmap: nodes light up in order as the section scrolls into view */
  .road-head { margin-top: 56px; padding-top: 32px; border-top: 1.5px dashed var(--line); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
  .road-head h3 { font-size: 26px; font-weight: 700; }
  .road-head p { color: var(--muted); max-width: 44ch; }
  .road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
  .stop { position: relative; padding: 0 0 28px 56px; min-width: 0; }
  .stop:last-child { padding-bottom: 0; }
  .node { position: absolute; left: 0; top: 0; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 500; transition: background 0.35s, border-color 0.35s, color 0.35s; }
  .stop::after { content: ""; position: absolute; left: 17px; top: 44px; bottom: -4px; width: 2px; background: var(--line); transition: background 0.35s; }
  .stop:last-child::after { display: none; }
  .stop.linked::after { background: var(--accent); }
  .stop.on .node { background: var(--accent-grad); border-color: var(--accent); color: var(--accent-fg); }
  .stop.now .node { box-shadow: 0 0 0 5px var(--tint); }
  @media (prefers-reduced-motion: no-preference) {
    .stop.now .node { animation: ring 2.2s ease-out infinite; }
  }
  @keyframes ring { 0% { box-shadow: 0 0 0 0 var(--accent); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
  .stop h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 6px 0 6px; }
  .stop-p { color: var(--muted); font-size: 15px; text-align: justify; hyphens: auto; max-width: 62ch; }
  @media (min-width: 960px) {
    .road { grid-template-columns: repeat(5, 1fr); }
    .stop { padding: 52px 20px 0 0; }
    .stop::after { left: 44px; top: 17px; bottom: auto; width: calc(100% - 52px); height: 2px; }
  }

  /* contact */
  .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 56px; align-items: start; }
  .contact > * { min-width: 0; }
  .contact h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; margin-top: 12px; }
  .contact p.lead { color: var(--muted); margin-top: 14px; max-width: 42ch; }
  .rows { background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; }
  .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 18px 22px; }
  .row + .row { border-top: 1.5px solid var(--line); }
  .row > div:first-child { min-width: 0; }
  .row b { font-weight: 600; overflow-wrap: anywhere; }
  .row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .mini { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--accent-text); background: none; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 14px; display: inline-block; }
  .mini:hover { border-color: var(--accent); }
  .mini.icon { width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; }
  .mini.icon svg { width: 20px; height: 20px; display: block; }
  .mini.icon .ic-check { display: none; }
  .mini.icon.copied .ic-copy { display: none; }
  .mini.icon.copied .ic-check { display: block; }

  footer { border-top: 1.5px solid var(--line); padding-block: 28px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--muted); font-size: 14px; }

  /* tablet and below: stack the hero, keep the mock a sensible size */
  @media (max-width: 859px) {
    .hero { grid-template-columns: 1fr; padding-block: 24px 48px; }
    .mock { max-width: 520px; }
  }
  @media (max-width: 719px) {
    .contact { grid-template-columns: 1fr; }
    section { padding-block: 48px; }
  }
  /* tablet: two columns, the last card spans the full width so nothing sits alone */
  @media (min-width: 600px) and (max-width: 959px) {
    .plans { grid-template-columns: repeat(2, 1fr); }
    .plan:last-child { grid-column: 1 / -1; }
    .plan:last-child ul { grid-template-columns: 1fr 1fr; gap: 10px 24px; }
  }
  /* web: three columns */
  @media (min-width: 960px) {
    .plans { grid-template-columns: repeat(3, 1fr); }
  }
  /* touch screens: larger tap targets */
  @media (pointer: coarse) {
    .seg button { padding: 9px 14px; }
    .nav a { padding: 10px 0; }
  }

  /* multi-page additions */
  .sec-head h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
  .contact h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; margin-top: 12px; }
  .apps.grid { display: grid; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; }
  .apps.grid > .app { flex: none; }
  @media (min-width: 600px) { .apps.grid { grid-template-columns: repeat(2, 1fr); } }
  .page-first { border-top: 0; padding-top: 24px; }
  .crumbs { margin: 0 0 20px; }
  .crumbs a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .app-hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
  .app-hero .app-icon { width: 88px; height: 88px; border-radius: 20px; }
  .app-hero h1 { font-size: clamp(30px, 5vw, 48px); font-weight: 700; }
  .app-hero .tag { margin-left: 4px; }
  .app-lead { font-size: 18px; color: var(--muted); max-width: 60ch; margin: 18px 0 0; }
  .dl { margin-top: 32px; display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 800px) { .dl { grid-template-columns: 1.3fr 1fr; } }
  .dl .card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .dl h2 { font-size: 24px; font-weight: 600; }
  .dl ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
  .dl .meta { font-size: 14px; color: var(--muted); margin: 0; }
  .dl .btn { align-self: flex-start; }
  .dl p { margin: 0; color: var(--muted); }
  .foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .foot-links a { color: var(--muted); text-decoration: none; }
  .foot-links a:hover { text-decoration: underline; }