/* EachEntry offline runtime — replaces the stripped Next.js/Framer-Motion client.
   Loaded in <head> so content can never stay invisible. */

/* Reveal-on-scroll.
   The markup is visible by default — nothing here can leave content hidden.
   Elements above the fold play a CSS entrance animation that *ends* at the
   base (visible) style, so a skipped animation is still a visible element.
   Elements below the fold are opted into the hidden state by the runtime and
   released as the reader reaches them. */
[data-eachentry-reveal] {
  will-change: opacity, transform;
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--eachentry-reveal-delay, 0ms);
}
[data-eachentry-reveal="hidden"] {
  opacity: 0;
  transform: translateY(calc(var(--eachentry-reveal-y, 12) * 1px));
}
[data-eachentry-reveal="shown"] { opacity: 1; transform: none; }

.eachentry-reveal-in {
  animation: eachentry-reveal-in .65s cubic-bezier(.16,1,.3,1) var(--eachentry-reveal-delay, 0ms) both;
}
@keyframes eachentry-reveal-in {
  from { opacity: 0; transform: translateY(calc(var(--eachentry-reveal-y, 12) * 1px)); }
  to   { opacity: 1; transform: none; }
}

/* Accordion content height animation */
[data-slot="accordion-content"] { overflow: hidden; }
[data-slot="accordion-content"][data-eachentry-anim] {
  transition: height .24s cubic-bezier(.16,1,.3,1);
}

/* ---- Desktop mega menu ---- */
.eachentry-menu {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px);
  padding: 0 1rem; z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
@media (min-width: 640px) { .eachentry-menu { padding-left: 1.25rem; padding-right: 1.25rem; } }
.eachentry-menu[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.eachentry-menu-inner {
  margin: 0 auto; max-width: 72rem;
  background: #fff;
  border: 1px solid #e5e5e5; border-top: 0;
  border-radius: 0 0 .75rem .75rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  overflow: hidden;
}
/* The panel's columns, headings and links are built with the site's own
   utility classes, not a .eachentry-menu-col wrapper -- the earlier rules here
   matched nothing. Only the current-page marker has no utility equivalent,
   so it is the one rule kept, retargeted at the markup buildMenuPanel()
   actually emits. The label is a child span carrying its own text colour,
   which is why the rule has to reach it rather than the anchor. */
.eachentry-menu-inner a[aria-current="page"] > span:first-child {
  color: #0891b2; font-weight: 700;
}

/* The live site's Product panel puts all twelve categories in one two-column
   grid with a see-all row under it, rather than splitting them across two
   stacked lists. The grid column takes two thirds of the panel; the accent
   column beside it keeps the remaining third. */
.eachentry-menu-wide { flex: 2 1 0%; min-width: 0; }
.eachentry-menu-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem; row-gap: 1.25rem;
}
.eachentry-menu-seeall {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid #e5e5e5;
}
@media (max-width: 1023px) { .eachentry-menu-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Mobile navigation: full-screen two-level takeover, as the original ---- */
.eachentry-mobile-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  top: 84px;                     /* header: 20px offset + 64px bar */
  z-index: 55; background: #fff;
  display: none;
}
@media (min-width: 640px) { .eachentry-mobile-nav { top: 88px; } }  /* sm:h-17 bar */
.eachentry-mobile-nav[data-open="true"] {
  display: flex; flex-direction: column;
  animation: eachentry-mobilenav-in .24s cubic-bezier(.16,1,.3,1);
}
@media (min-width: 1024px) { .eachentry-mobile-nav { display: none !important; } }
@keyframes eachentry-mobilenav-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Marquee ---- */
.eachentry-marquee-row { display: flex; width: max-content; will-change: transform; transform: translateZ(0); }
.eachentry-marquee-row[data-anim="true"] { animation: eachentry-marquee var(--eachentry-marquee-duration, 40s) linear infinite; }
.eachentry-marquee-row[data-direction="reverse"] { animation-direction: reverse; }
@keyframes eachentry-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.eachentry-marquee-row[data-quarter="true"][data-anim="true"] { animation-name: eachentry-marquee-quarter; }
@keyframes eachentry-marquee-quarter { from { transform: translateX(0); } to { transform: translateX(-25%); } }

/* ---- Utilities the site's markup uses but its compiled CSS never emitted ---- */
/* All 76 recovered FAQ answers are wrapped in `pb-4 pr-6`; `pr-6` has no rule
   in the mirrored Tailwind output, so the answers had no right gutter. */
.pr-6 { padding-right: 1.5rem; }

/* ---- Inert external links ---- */
[data-eachentry-external] { cursor: default; }

/* ---- Toast shown when an inert external link is clicked ---- */
.eachentry-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  z-index: 9999; max-width: min(92vw, 30rem);
  background: #0f172a; color: #f8fafc;
  font: 500 .8125rem/1.45 ui-sans-serif, system-ui, sans-serif;
  padding: .625rem .875rem; border-radius: .625rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .25);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.eachentry-toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }
.eachentry-toast code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #67e8f9; word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  [data-eachentry-reveal] { transition: none !important; }
  .eachentry-reveal-in { animation: none !important; }
  .eachentry-marquee-row[data-anim="true"] { animation: none !important; }
  [data-slot="accordion-content"][data-eachentry-anim] { transition: none !important; }
}

/* ==========================================================================
   Animated product-demo widgets.

   These were Framer Motion components in the Next.js bundle; the markup is
   server-rendered at its first keyframe, so without the bundle they sat
   frozen (the progress line was rendered at scaleY(0) — invisible).
   Durations, easings, keyframe values and per-item delays below are the
   original values read out of the mirrored chunks.

   CSS animations outrank inline styles in the cascade, so these drive the
   elements without touching the server-rendered `style` attributes — and if
   animation is unavailable the original static state simply remains.
   ========================================================================== */

/* -- waveform bars: scaleY [.12,1,1,.12], opacity [.25,1,.7,.25], 4s, .16s stagger -- */
[data-eachentry-anim="wave"] > div > div { animation: eachentry-wave 4s ease-in-out infinite; }
[data-eachentry-anim="wave"] > div:nth-child(1) > div { animation-delay: 0s; }
[data-eachentry-anim="wave"] > div:nth-child(2) > div { animation-delay: .16s; }
[data-eachentry-anim="wave"] > div:nth-child(3) > div { animation-delay: .32s; }
[data-eachentry-anim="wave"] > div:nth-child(4) > div { animation-delay: .48s; }
[data-eachentry-anim="wave"] > div:nth-child(5) > div { animation-delay: .64s; }
[data-eachentry-anim="wave"] > div:nth-child(6) > div { animation-delay: .80s; }
[data-eachentry-anim="wave"] > div:nth-child(7) > div { animation-delay: .96s; }
[data-eachentry-anim="wave"] > div:nth-child(8) > div { animation-delay: 1.12s; }
@keyframes eachentry-wave {
  0%       { transform: scaleY(.12); opacity: .25; }
  33.333%  { transform: scaleY(1);   opacity: 1; }
  66.666%  { transform: scaleY(1);   opacity: .7; }
  100%     { transform: scaleY(.12); opacity: .25; }
}

/* -- vertical progress line: scaleY [0,1,1,0] at times [0,.55,.85,1], 4.2s -- */
[data-eachentry-anim="vline"] { animation: eachentry-vline 4.2s ease-in-out infinite; }
@keyframes eachentry-vline {
  0%   { transform: scaleY(0); }
  55%  { transform: scaleY(1); }
  85%  { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

/* -- orbit: container sweeps 360deg in 12s, icons counter-rotate to stay upright -- */
[data-eachentry-anim="orbit"] { animation: eachentry-orbit 12s linear infinite; }
@keyframes eachentry-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

[data-eachentry-anim="orbit-icon"] { animation: eachentry-orbit-icon 12s linear infinite; }
@keyframes eachentry-orbit-icon {
  from { transform: rotate(calc(var(--eachentry-a, 0) * -1deg)); }
  to   { transform: rotate(calc((var(--eachentry-a, 0) + 360) * -1deg)); }
}

/* -- dashed rings: 168px/14s/cw, 258px/22s/ccw, 348px/32s/cw -- */
[data-eachentry-anim="ring"] { animation: eachentry-ring var(--eachentry-d, 20s) linear infinite; }
[data-eachentry-anim="ring"][data-eachentry-dir="-1"] { animation-name: eachentry-ring-reverse; }
@keyframes eachentry-ring         { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes eachentry-ring-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* -- avatar bubble: scale [1,1.07,1], 3.5s -- */
[data-eachentry-anim="pulse"] { animation: eachentry-pulse 3.5s ease-in-out infinite; }
@keyframes eachentry-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* -- typing dots: y [0,-5,0], .65s, .14s stagger -- */
[data-eachentry-anim="dots"] > div { animation: eachentry-dot .65s ease-in-out infinite; }
[data-eachentry-anim="dots"] > div:nth-child(2) { animation-delay: .14s; }
[data-eachentry-anim="dots"] > div:nth-child(3) { animation-delay: .28s; }
@keyframes eachentry-dot { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  [data-eachentry-anim="wave"] > div > div,
  [data-eachentry-anim="vline"],
  [data-eachentry-anim="orbit"],
  [data-eachentry-anim="orbit-icon"],
  [data-eachentry-anim="ring"],
  [data-eachentry-anim="pulse"],
  [data-eachentry-anim="dots"] > div { animation: none !important; }
  /* The line is server-rendered collapsed, so hold it open when not animating. */
  [data-eachentry-anim="vline"] { transform: scaleY(1) !important; }
}

/* ---- Ask EachEntry: typing indicator for the reconstructed chat widget ---- */
.eachentry-dots { display: inline-flex; align-items: center; gap: 4px; height: 1rem; }
.eachentry-dots i {
  width: 6px; height: 6px; border-radius: 9999px; background: #c084fc;
  display: inline-block; animation: eachentry-dot .65s ease-in-out infinite;
}
.eachentry-dots i:nth-child(2) { animation-delay: .14s; }
.eachentry-dots i:nth-child(3) { animation-delay: .28s; }
.eachentry-chat-bubble { transition: opacity .3s ease, transform .3s ease; }

/* ---- Rounds: notification feed (original used a spring-in AnimatedList) ---- */
.eachentry-notif {
  /* No fill mode: before the animation starts and after it ends the card
     uses its own (visible) base style, so a paused or unsupported
     animation can never leave it invisible. */
  animation: eachentry-notif-in .38s cubic-bezier(.16,1,.3,1);
  transform-origin: top center;
}
@keyframes eachentry-notif-in {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .eachentry-notif { animation: none !important; } }

/* ---- micro-interactions recovered from the original bundle ---- */
/* Marquee portal pills lift on hover (whileHover scale 1.02, y -3, z 20). */
.eachentry-marquee-row [style*="min-width"] > button {
  transition: transform .18s cubic-bezier(.16,1,.3,1);
}
.eachentry-marquee-row [style*="min-width"] > button:hover {
  transform: scale(1.02) translateY(-3px);
  position: relative; z-index: 20;
}
/* Nav trigger chevrons rotate 180deg while their menu is open. */
button[aria-controls="desktop-mega-menu"] svg.lucide-chevron-down {
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
button[aria-controls="desktop-mega-menu"][aria-expanded="true"] svg.lucide-chevron-down {
  transform: rotate(180deg);
}

/* ---- morphing CTA labels (blur crossfade + width morph, from the bundle) ---- */
.eachentry-morph {
  display: inline-grid !important;
  /* Both labels share one grid area, and the wrapper is locked to whichever
     one is showing, so the other always overflows. Without an explicit
     template the implicit column track is `auto`, which resolves to
     max-content -- the width of the LONGER label (205px) -- even though the
     wrapper is only 101px. Items were therefore centred inside a 205px
     track and the visible label was pushed ~52px right, past the
     overflow:hidden edge: "Book Demo" painted as "Boo". Pinning the track
     to the wrapper's own width keeps the visible label flush, and
     `safe center` stops the overflowing label spilling off the start edge
     (plain `start` is the fallback for engines without `safe`). */
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  justify-items: safe center;
  align-items: center;
  overflow: hidden;
  transition: width .55s cubic-bezier(.22,1,.36,1);
}
.eachentry-morph > .eachentry-morph-rest, .eachentry-morph > .eachentry-morph-alt {
  grid-area: 1 / 1;
  transition: opacity .35s cubic-bezier(.22,1,.36,1), filter .35s cubic-bezier(.22,1,.36,1);
}
.eachentry-morph > .eachentry-morph-alt { opacity: 0; filter: blur(8px); pointer-events: none; }
.eachentry-morph.is-hover > .eachentry-morph-rest { opacity: 0 !important; filter: blur(8px) !important; }
.eachentry-morph.is-hover > .eachentry-morph-alt { opacity: 1; filter: blur(0px); }
.eachentry-pop { animation: eachentry-pop .2s cubic-bezier(.22,1,.36,1); }
@keyframes eachentry-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- outlined wordmark draws itself once in view ---- */
text.eachentry-draw { animation: eachentry-text-draw 4s ease-in-out forwards; }
@keyframes eachentry-text-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .eachentry-morph, .eachentry-morph > * { transition: none !important; }
  text.eachentry-draw { animation: none !important; stroke-dashoffset: 0; }
}

/* ---- Ask EachEntry bubbles spring in at the bottom of the stack ---- */
.eachentry-chat-in { animation: eachentry-chat-in .3s cubic-bezier(.22,1,.36,1); }
@keyframes eachentry-chat-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .eachentry-chat-in { animation: none !important; } }

/* ---- shuffling notification stack (use-case pages) ---- */
[data-eachentry-anim="stack"] > div { will-change: transform; }
[data-eachentry-anim="stack"] > div:nth-child(1) { animation: eachentry-stack-0 3.6s ease-in-out 0s infinite; }
[data-eachentry-anim="stack"] > div:nth-child(2) { animation: eachentry-stack-1 3.6s ease-in-out .18s infinite; }
[data-eachentry-anim="stack"] > div:nth-child(3) { animation: eachentry-stack-2 3.6s ease-in-out .36s infinite; }
@keyframes eachentry-stack-0 {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translate(-5px,-12px) scale(1); }
}
@keyframes eachentry-stack-1 {
  0%,100% { transform: translateY(12px) scale(.96); }
  50%     { transform: translate(8px,0) scale(1); }
}
@keyframes eachentry-stack-2 {
  0%,100% { transform: translateY(24px) scale(.92); }
  50%     { transform: translate(-5px,12px) scale(1); }
}
@media (prefers-reduced-motion: reduce) { [data-eachentry-anim="stack"] > div { animation: none !important; } }

/* ==========================================================================
   Use-case page sections added to match the live site
   --------------------------------------------------------------------------
   The live eachentry.com use-case pages carry three sections the capture predates:
   "How EachEntry sets it up" (four numbered steps), "Who sees what in a <X> portal"
   (a card per role) and "What's in the <X> template" (the tables EachEntry creates).
   They are styled here with semantic classes rather than utilities, because
   the mirrored Tailwind build only contains the utilities the original markup
   used -- anything else silently does nothing. Colours come from the site's
   own custom properties, so these sections re-theme with the rest of the page.
   ========================================================================== */

/* ---- How EachEntry sets it up ---- */
.uc-steps { display: grid; gap: 1rem; }
@media (min-width: 900px) { .uc-steps { gap: 1.25rem; } }
.uc-step {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem;
  padding: 1.5rem; background: var(--card, #fff);
  border: 1px solid var(--border, #e5e5e5); border-radius: 1rem;
}
@media (min-width: 900px) { .uc-step { padding: 2rem 2.25rem; gap: 1.25rem 1.75rem; } }
.uc-step__n {
  grid-row: span 2; align-self: start;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  color: var(--muted-foreground, #737373); font-variant-numeric: tabular-nums;
  padding-top: .25rem;
}
.uc-step__title {
  margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em;
  line-height: 1.35; color: var(--foreground, #0a0a0a);
}
@media (min-width: 900px) { .uc-step__title { font-size: 1.375rem; } }
.uc-step__body { grid-column: 2; }
.uc-step__body p {
  margin: .625rem 0 0; font-size: .9375rem; line-height: 1.65;
  color: var(--muted-foreground, #737373);
}
.uc-step__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1rem;
}
.uc-chip {
  display: inline-flex; align-items: center; padding: .25rem .625rem;
  border-radius: 999px; background: #ecfeff; color: #155e75;
  border: 1px solid #a5f3fc;
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
}
.uc-by {
  font-size: .75rem; font-weight: 500; color: var(--muted-foreground, #737373);
}
.uc-by strong { color: var(--foreground, #0a0a0a); font-weight: 600; }

/* ---- Who sees what ---- */
.uc-roles { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .uc-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .uc-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.uc-role {
  display: flex; flex-direction: column; padding: 1.5rem;
  background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5);
  border-radius: 1rem;
}
.uc-role__name {
  margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--foreground, #0a0a0a);
}
.uc-role__scope {
  margin: .375rem 0 1.125rem; font-size: .875rem; line-height: 1.55;
  color: var(--muted-foreground, #737373);
}
.uc-role dl { margin: 0; display: grid; gap: .75rem; }
.uc-role dt {
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-foreground, #737373);
  margin-bottom: .1875rem;
}
.uc-role dd {
  margin: 0; font-size: .875rem; line-height: 1.5;
  color: var(--foreground, #0a0a0a);
}
.uc-role dd.uc-role__deny { color: var(--muted-foreground, #737373); }

/* ---- What's in the template ---- */
.uc-tables { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .uc-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .uc-tables { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.uc-tbl {
  padding: 1.25rem 1.375rem; background: var(--card, #fff);
  border: 1px solid var(--border, #e5e5e5); border-radius: 1rem;
}
.uc-tbl__name {
  margin: 0 0 .875rem; font-size: .9375rem; font-weight: 600;
  letter-spacing: -.005em; color: var(--foreground, #0a0a0a);
  padding-bottom: .75rem; border-bottom: 1px solid var(--border, #e5e5e5);
}
.uc-tbl ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.uc-tbl li { font-size: .8125rem; line-height: 1.45; color: var(--foreground, #0a0a0a); }
.uc-field__type {
  display: inline-block; margin-left: .375rem; padding: 0 .375rem;
  border-radius: .3125rem; background: #f5f5f5;
  color: var(--muted-foreground, #737373);
  font-size: .6875rem; font-weight: 600; letter-spacing: .02em;
}
.uc-field__choices {
  display: block; margin-top: .1875rem; font-size: .75rem; line-height: 1.45;
  color: var(--muted-foreground, #737373);
}

/* Shared lede under a section heading. */
.uc-lede {
  margin: 0 auto; max-width: 56ch; font-size: 1rem; line-height: 1.65;
  color: var(--muted-foreground, #737373);
}

/* ==========================================================================
   Two-level use-case taxonomy: category pages and the leaf pages under them
   --------------------------------------------------------------------------
   Added when the section was restructured to the live site's 12 categories.
   Same rule as the block above: semantic classes, site custom properties, no
   utilities the mirrored Tailwind build might not contain.
   ========================================================================== */

/* ---- breadcrumbs ---- */
.uc-crumbs { width: 100%; }
.uc-crumbs ol {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem .6rem; font-size: .8125rem;
  color: var(--muted-foreground, #737373);
}
.uc-crumbs li { display: flex; align-items: center; gap: .6rem; }
.uc-crumbs li + li::before { content: "/"; color: var(--muted-foreground, #737373); opacity: .55; }
.uc-crumbs a { color: inherit; text-decoration: none; }
.uc-crumbs a:hover { color: var(--foreground, #0a0a0a); text-decoration: underline; }
.uc-crumbs [aria-current="page"] { color: var(--foreground, #0a0a0a); font-weight: 600; }

/* ---- leaf cards on a category page ---- */
.uc-cards { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .uc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .uc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.uc-card {
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.5rem; border-radius: 1rem; text-decoration: none;
  background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.uc-card:hover {
  border-color: #0891b2; transform: translateY(-2px);
  box-shadow: 0 10px 30px -18px rgba(8, 47, 73, .45);
}
.uc-card__title {
  margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
  color: var(--foreground, #0a0a0a);
}
.uc-card__line {
  margin: 0; font-size: .875rem; line-height: 1.55;
  color: var(--muted-foreground, #737373);
}
.uc-card__go {
  margin-top: auto; padding-top: .4rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #0e7490;
}
.uc-card__go::after { content: " \2192"; }

/* A plain note under a grid: what this offline copy does not mirror, or a
   link back up to the category. Never styled as a card, so it cannot read as
   a portal that exists. */
.uc-note {
  margin: 1.75rem auto 0; max-width: 70ch; text-align: center;
  font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground, #737373);
}
.uc-note a { color: #0e7490; font-weight: 600; }

/* ---- "What is X software?" ---- */
.uc-prose {
  margin: 0 auto; max-width: 68ch; text-align: center;
  display: flex; flex-direction: column; gap: 1rem;
}
.uc-prose__kicker {
  margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #0e7490;
}
.uc-prose__h {
  margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  color: var(--foreground, #0a0a0a);
}
@media (min-width: 900px) { .uc-prose__h { font-size: 2.25rem; } }
.uc-prose p {
  margin: 0; font-size: 1.0625rem; line-height: 1.7;
  color: var(--muted-foreground, #737373);
}

/* ---- the four capability groups ---- */
.uc-parts { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .uc-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .uc-parts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.uc-part {
  padding: 1.5rem; border-radius: 1rem;
  background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5);
}
.uc-part__name {
  margin: 0 0 1rem; display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; font-size: 1.0625rem; font-weight: 700; color: var(--foreground, #0a0a0a);
}
.uc-part__n {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-foreground, #737373);
}
.uc-part dl { margin: 0; display: grid; gap: .85rem; }
.uc-part dt {
  font-size: .8125rem; font-weight: 600; color: var(--foreground, #0a0a0a);
}
.uc-part dd {
  margin: .15rem 0 0; font-size: .8125rem; line-height: 1.5;
  color: var(--muted-foreground, #737373);
}

/* ---- FAQ ---- */
.uc-faq { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .uc-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.uc-faq__item {
  padding: 1.5rem; border-radius: 1rem;
  background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5);
}
.uc-faq__item h3 {
  margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; line-height: 1.35;
  color: var(--foreground, #0a0a0a);
}
.uc-faq__item p {
  margin: 0; font-size: .875rem; line-height: 1.6;
  color: var(--muted-foreground, #737373);
}

/* ---- related categories ---- */
.uc-related {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem 1rem; padding: 1.5rem; border-radius: 1rem;
  background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5);
}
.uc-related__h {
  margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-foreground, #737373);
}
.uc-related ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.uc-related a {
  display: inline-block; padding: .4rem .8rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; text-decoration: none;
  color: #0e7490; background: rgba(8, 145, 178, .08);
}
.uc-related a:hover { background: rgba(8, 145, 178, .16); }

/* ---- closing call to action ---- */
.uc-cta {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center; padding: 3rem 1.5rem; border-radius: 1.4rem;
  background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5);
}
.uc-cta h2 {
  margin: 0; max-width: 24ch; font-size: 1.875rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15; color: var(--foreground, #0a0a0a);
}
@media (min-width: 900px) { .uc-cta h2 { font-size: 2.5rem; } }
.uc-cta p {
  margin: 0; max-width: 52ch; font-size: 1rem; line-height: 1.65;
  color: var(--muted-foreground, #737373);
}
.uc-cta__row {
  margin-top: .5rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 1rem;
}
.uc-cta__alt {
  font-size: .875rem; font-weight: 600; text-decoration: none; color: #0e7490;
}
.uc-cta__alt:hover { text-decoration: underline; }