/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  /* Surfaces */
  --bg: #0D1117;
  --bg-soft: #10151D;
  --surface: #161B22;
  --surface-2: #1C2330;
  --border: #262E3B;
  --border-soft: #1D2430;

  /* Text */
  --text: #E6E9EF;
  --text-muted: #8B93A7;
  --text-faint: #5B6478;

  /* Accents */
  --accent: #FF8A3D;        /* amber — primary CTA / signature */
  --accent-soft: #FF8A3D26;
  --accent-2: #5EEAD4;      /* mint teal — links / secondary */
  --accent-2-soft: #5EEAD426;

  /* Platform identity colors (functional — used consistently as chips/tags) */
  --p-android: #3DDC84;
  --p-web: #818CF8;
  --p-windows: #00A4EF;
  --p-game: #F472B6;
  --p-meta: #A78BFA;

  /* Type */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --container: 1140px;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 10px 30px -18px rgba(0,0,0,0.6);
}

/* =========================================================
   RESET
   ========================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1em; color: var(--text-muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   NAV
   ========================================================= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13,17,23,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.nav-links a { transition: color 0.15s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  color: var(--text);
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .nav-links {
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 8px 24px 20px;
    gap: 16px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -180px; right: -160px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-2);
  background: var(--accent-2-soft);
  border: 1px solid #5EEAD440;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.hero-eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 var(--accent-2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 #5EEAD466; }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 600;
  max-width: 15ch;
}
.hero .tagline {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-muted);
  max-width: 56ch;
  margin-bottom: 32px;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: 0.9rem;
  color: var(--text-faint);
  margin-bottom: 32px;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-s);
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #1A0E04; }
.btn-primary:hover { background: #FF9C5C; }
.btn-outline { border-color: var(--border); color: var(--text); background: var(--surface); }
.btn-outline:hover { border-color: var(--accent-2); color: var(--accent-2); }
.btn-sm { padding: 9px 16px; font-size: 0.84rem; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.section {
  padding: 72px 0;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.section-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 10px;
  display: block;
}

/* =========================================================
   PLATFORM FILTER CHIPS
   ========================================================= */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.filter-chip {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: all 0.15s ease;
}
.filter-chip:hover { color: var(--text); border-color: var(--text-faint); }
.filter-chip.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* =========================================================
   PROJECT GRID / CARDS
   ========================================================= */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 28px;
}
.project-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}
.project-card:hover { transform: translateY(-4px); border-color: var(--border); }
.project-card-media {
  aspect-ratio: 16/10;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.project-card-media img { width: 100%; height: 100%; object-fit: cover; }
.project-card-media .status-tag {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(13,17,23,0.85);
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-tag.live { color: var(--p-android); }
.status-tag.in-development { color: var(--accent); }
.project-card-body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.project-card-body h3 { font-size: 1.15rem; }
.project-card-body p { font-size: 0.92rem; margin-bottom: 0; flex: 1; }
.platform-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.p-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid currentColor;
  opacity: 0.9;
}
.p-chip.android { color: var(--p-android); }
.p-chip.web { color: var(--p-web); }
.p-chip.windows { color: var(--p-windows); }
.p-chip.game { color: var(--p-game); }
.p-chip.meta { color: var(--p-meta); }

.project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.card-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-link svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.project-card:hover .card-link svg { transform: translateX(3px); }

.quick-links { display: flex; gap: 8px; }
.icon-link {
  width: 30px; height: 30px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s ease;
}
.icon-link:hover { color: var(--text); border-color: var(--text-faint); }
.icon-link svg { width: 15px; height: 15px; }

.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-m);
}

/* =========================================================
   PROJECT DETAIL PAGE
   ========================================================= */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 28px 0 0;
}
.back-link:hover { color: var(--text); }
.back-link svg { width: 14px; height: 14px; }

.detail-header {
  padding: 28px 0 40px;
  border-bottom: 1px solid var(--border-soft);
}
.detail-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.detail-header h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; }
.detail-tagline { font-size: 1.1rem; max-width: 60ch; margin-bottom: 22px; }
.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.detail-hero-media {
  margin: 40px 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--surface);
}
/* The hero shows the whole cover, at whatever shape the cover actually is.
   It used to force 16/9 and `object-fit: cover`, and not one of the covers
   is 16/9 — the two feature graphics are about 2:1 and lost their left and
   right edges, and QR File Share's is 3:2 and lost its top and bottom. A
   cover is a composed image; cropping it is throwing away the composition.

   No max-height either. A cap sounds harmless and is not: capping the box
   while the image keeps its own shape just trades the crop for letterbox
   bars, which is what happened to the 3:2 cover at 78vh. The hero is as
   tall as its cover is, and a wide cover — which a Play feature graphic
   always is — is short anyway. */
.detail-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* One column, always.
   This used to be a 1.7fr/1fr split with the facts in a right-hand rail.
   Two problems with that: the rail is the narrowest column on the page and
   it holds the longest strings on it ("Get it on Google Play"), and the
   reading order put reference data beside the pitch instead of after it.
   Stacked, the facts land where somebody actually wants them — once they
   have read what the thing is, and before the screenshots. */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 8px 0 40px;
}

.detail-main h2 { font-size: 1.3rem; margin-top: 40px; }
.detail-main h2:first-child { margin-top: 0; }
.detail-main p { font-size: 1rem; }

.feature-list { display: grid; gap: 12px; margin-top: 18px; }
.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.96rem;
  color: var(--text);
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
}
.feature-list li svg {
  width: 16px; height: 16px;
  color: var(--accent-2);
  flex-shrink: 0;
  margin-top: 3px;
}

.screenshot-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-top: 18px;
  scrollbar-width: thin;
}
.screenshot-strip img {
  border-radius: var(--radius-m);
  border: 1px solid var(--border-soft);
  aspect-ratio: 9/16;
  object-fit: cover;
  width: 100%;
  cursor: zoom-in;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.screenshot-strip img:hover { border-color: var(--accent-2); transform: translateY(-2px); }

/* ---- Lightbox --------------------------------------------------------
   The strip crops every shot to 9/16 with object-fit: cover, so a tall
   phone screenshot loses its top and bottom. Clicking one has to show the
   whole thing, uncropped — object-fit: contain, and sized against the
   viewport rather than the image, so a 1080x2400 PNG does not open taller
   than the window. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 64px;
  background: rgba(8, 9, 12, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-m);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lightbox-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
.lightbox-btn svg { width: 20px; height: 20px; }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-faint);
}
/* One image means nothing to step through. */
.lightbox.single .lightbox-prev,
.lightbox.single .lightbox-next,
.lightbox.single .lightbox-count { display: none; }

@media (max-width: 620px) {
  .lightbox { padding: 56px 12px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}

body.lightbox-open { overflow: hidden; }

.video-embed {
  margin-top: 18px;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  aspect-ratio: 16/9;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; }

/* Sidebar */
/* Full width now, so the cards sit side by side rather than one stretched
   card per row. auto-fit collapses them to a single column on a narrow
   screen without a breakpoint to keep in step with anything else. */
.detail-sidebar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}
.side-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 22px;
}
.side-card h3 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.76rem;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.tech-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-tag {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 5px 10px;
  border-radius: var(--radius-s);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.meta-list { display: grid; gap: 10px; }
.meta-list .row { display: flex; justify-content: space-between; font-size: 0.88rem; }
.meta-list .row span:first-child { color: var(--text-faint); }
.meta-list .row span:last-child { color: var(--text); font-weight: 500; text-align: right; }

.link-list { display: grid; gap: 10px; }
.link-list a,
.link-list .link-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.link-list a:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* A row for a link that does not exist yet. Dashed and muted so it reads as
   a placeholder rather than something that failed to load. */
.link-list .link-list-row {
  border-style: dashed;
  color: var(--text-faint);
  font-weight: 500;
}
.link-list .link-list-row .soon {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Every icon in the list, not just the ones inside an <a>.
   The icon set is viewBox-only with no width or height attribute, so an SVG
   that matches no rule falls back to the replaced-element default of
   300x150 — which is exactly what happened to the "Coming soon" rows, since
   those are a <span> and the old selector was `.link-list a svg`. A single
   giant robot pushed "Get it on Google Play" onto three lines. */
.link-list svg { width: 15px; height: 15px; flex-shrink: 0; }
.link-list .link-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;            /* or a long label cannot shrink and overflows */
}

/* =========================================================
   PROFILE PAGE
   ========================================================= */
.profile-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 60px 0 40px;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
}
@media (max-width: 640px) {
  .profile-header { grid-template-columns: 1fr; text-align: center; padding-top: 40px; }
  .profile-photo { margin: 0 auto; }
}
.profile-photo {
  width: 180px; height: 180px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-header h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.profile-role { font-family: var(--font-mono); color: var(--accent-2); font-size: 0.95rem; margin-bottom: 14px; }

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.skill-group {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 20px;
}
.skill-group h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.skill-group .tech-tags { gap: 8px; }

.timeline { display: grid; gap: 4px; }
.timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-soft);
}
.timeline-item:last-child { border-bottom: none; }
@media (max-width: 600px) {
  .timeline-item { grid-template-columns: 1fr; gap: 6px; }
}
.timeline-period {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-faint);
}
.timeline-role h4 { font-size: 1.05rem; margin-bottom: 2px; }
.timeline-org { font-size: 0.9rem; color: var(--accent-2); margin-bottom: 8px; display: block; }
.timeline-summary { font-size: 0.92rem; margin-bottom: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-soft);
  padding: 56px 0 28px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { font-size: 0.92rem; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: 0.92rem; color: var(--text-muted); }
.footer-col a:hover { color: var(--text); }
.footer-socials { display: flex; gap: 10px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.82rem;
  color: var(--text-faint);
}

/* =========================================================
   MISC PAGES (privacy policy template)
   ========================================================= */
.doc-page { max-width: 760px; margin: 0 auto; padding: 60px 24px 100px; }
.doc-page h1 { font-size: 2rem; margin-bottom: 8px; }
.doc-page .doc-updated { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-faint); margin-bottom: 40px; }
.doc-page h2 { font-size: 1.2rem; margin-top: 36px; }
.doc-page p, .doc-page li { color: var(--text-muted); font-size: 0.98rem; }
.doc-page ul { list-style: disc; padding-left: 22px; display: block; }
.doc-page li { margin-bottom: 6px; }