/* ============================================================
   Code You Keep — the small component layer on top of the
   Weblytica design system.

   assets/css/ds/*.css and assets/css/site.css are vendored from the
   Weblytica site so they can be re-synced without a merge. Everything below is
   ONLY what this site needs and that system does not already provide. If a
   rule here starts duplicating something in site.css, delete it and use theirs.
   ============================================================ */

/* ---- Breadcrumbs on a light hero ----------------------------------
   .crumbs in the design system is tuned for the navy /learn hero. These pages
   put it on a white hero band, where navy-200 on white is unreadable. */
.hero .crumbs { color: var(--gray-500); }
.hero .crumbs a { color: var(--orange-700); font-weight: 600; }
.hero .crumbs span[aria-hidden] { color: var(--gray-300); }
[data-theme="dark"] .hero .crumbs { color: var(--text-muted); }
[data-theme="dark"] .hero .crumbs a { color: var(--orange-400); }
[data-theme="dark"] .hero .crumbs span[aria-hidden] { color: var(--text-subtle); }

/* ---- Plain bullet list inside a prose block ------------------------
   For list items that carry no lead-in title. Items WITH a title render as
   .card in a .grid-2 instead, which the system already covers. */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checklist li {
  position: relative; padding-left: 34px;
  font-family: var(--font-body); font-size: var(--fs-md);
  line-height: var(--lh-relaxed); color: var(--gray-800);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--orange-500);
}
[data-theme="dark"] .checklist li { color: var(--text-body); }

/* ---- Comparison table ----------------------------------------------
   Only /custom-software-vs-saas/ uses this. Scrolls inside its own container
   so a narrow screen never makes the page scroll sideways. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.table-wrap th, .table-wrap td {
  text-align: left; padding: 18px 24px; vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--gray-800);
}
.table-wrap thead th {
  background: var(--navy-900); color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.table-wrap tbody th {
  font-family: var(--font-display); font-weight: 700;
  color: var(--navy-900); background: var(--gray-50);
}
.table-wrap tbody tr:last-child th, .table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap td:last-child { color: var(--navy-900); font-weight: 500; }
[data-theme="dark"] .table-wrap thead th { background: var(--surface-dark); color: var(--text-strong); }
[data-theme="dark"] .table-wrap tbody th { background: var(--surface-subtle); color: var(--text-strong); }
[data-theme="dark"] .table-wrap th, [data-theme="dark"] .table-wrap td { color: var(--text-body); }
[data-theme="dark"] .table-wrap td:last-child { color: var(--text-strong); }

/* ---- Unfilled case-study metric -------------------------------------
   [METRIC: ...] in a config field renders as this chip. Deliberately loud:
   a number nobody has filled in must be impossible to miss on the page. */
.metric {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm);
  background: var(--orange-100); color: var(--orange-900);
  border: 1px dashed var(--orange-500);
  font-family: var(--font-mono); font-size: 0.88em; font-weight: 600;
}
[data-theme="dark"] .metric { background: var(--surface-accent); color: var(--orange-300); }

/* ---- Figures --------------------------------------------------------- */
.figure { margin: 0; }
.figure img {
  width: 100%; border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md);
}

/* An empty editable field must not leave a stray lead-in or a gap. Targeted:
   a blanket [data-wl-field]:empty rule would also hide every <img>. */
.eyebrow:empty, .card__title:empty, .site-footer__tagline:empty { display: none; }

/* ---- Footer tagline ---------------------------------------------------
   The system footer is logo / links / copyright on one row. This site adds a
   sentence, so the row wraps to a column on narrow screens. */
.site-footer { flex-wrap: wrap; }
.site-footer__tagline {
  flex: 1 1 320px; max-width: 46ch; margin: 0;
  font-family: var(--font-body); font-size: var(--fs-sm);
  line-height: var(--lh-normal); color: var(--navy-200);
}
[data-theme="dark"] .site-footer__tagline { color: var(--text-muted); }

/* ---- Header safety valve ---------------------------------------------
   The design system sets white-space: nowrap on nav links and only collapses
   .mainnav below 1100px. This site's header carries a page-nav zone as well as
   the site links, so a long label set could push past the viewport at desktop
   width. Letting both link rows wrap means a future extra link costs a second
   line instead of a horizontal scrollbar on the whole page. */
.navgroup__links { flex-wrap: wrap; row-gap: 4px; }
.mainnav { min-width: 0; flex-wrap: wrap; }


/* ============================================================
   Wordmark — {code}you keep_

   Live text, not an image: it stays crisp at any size, needs no light/dark
   file swap, and inherits the theme tokens. Spec is Poppins 600 / 44px /
   -.03em / inline-flex on the baseline with a .06em gap; header and footer
   scale the size only.

   Colour follows the design system's own accent rule rather than raw brand
   orange: #ff9900 measures 2.14:1 on white, so light mode uses --orange-800
   the way .eyebrow and .accent already do, and the bright brand orange is
   used where it reads (dark surfaces and the navy footer).
   ============================================================ */
.l11 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -.03em;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: .06em;
  line-height: 1;
  color: var(--text-strong);
}
.l11 .o { color: var(--orange-800); }   /* { } and the trailing _ */
.l11 .m { color: var(--gray-500); }     /* "you keep" */

[data-theme="dark"] .l11 .o { color: var(--orange-400); }
[data-theme="dark"] .l11 .m { color: var(--text-muted); }

/* On the navy footer the bright brand orange reads at 9.59:1, so it gets the
   real thing; both themes render the footer dark. */
.site-footer .l11 { color: #fff; }
.site-footer .l11 .o { color: var(--orange-500); }
.site-footer .l11 .m { color: var(--navy-200); }

/* In-context sizes. The header slot the design system reserves is ~30px tall,
   which this mark fills at 26px because it has no ascender padding. */
.site-header .l11 { font-size: 26px; }
.site-footer .l11 { font-size: 22px; }
@media (max-width: 680px) { .site-header .l11 { font-size: 22px; } }

.site-header__logo-link, .site-footer__logo-link { text-decoration: none; }
.site-header__logo-link:hover, .site-footer__logo-link:hover { text-decoration: none; }

/* The logo link is a flex item in a header that carries more than the
   Weblytica header does (site nav + page nav + CTA + toggle). Without this it
   gets compressed by the nav and the wordmark loses its aspect ratio. */
.site-header__logo-link { flex-shrink: 0; }