/* ====================================================================
   N Catalyst.ai — shared design system
   Palette sampled from the brand mark: blue #0060FC to violet #7818FC
   on #000C30 navy. Surface language: Apple-style liquid glass.
   ==================================================================== */
:root {
  --sc-canvas:     #F4F6FB;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #050A28;
  --sc-ink-soft:   #545B7A;
  --sc-accent:     #0B4FE8;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  --br-blue:   #0060FC;
  --br-violet: #7818FC;
  --br-navy:   #000C30;
  --br-grad:   linear-gradient(118deg, #0060FC 0%, #4A32FC 48%, #7818FC 100%);

  /* a light canvas inverts edge light, shadow alpha and scrim direction */
  --sc-edge: rgba(255,255,255,0.92);
  --sc-shadow-color: 10 18 60;
  --sc-e1: 0 1px 2px rgba(10,18,60,0.05), 0 2px 6px rgba(10,18,60,0.05);
  --sc-e2: 0 2px 4px rgba(10,18,60,0.05), 0 10px 26px -8px rgba(10,18,60,0.12);
  --sc-e3: 0 4px 10px rgba(10,18,60,0.06), 0 28px 60px -20px rgba(10,18,60,0.20);

  --nc-rule:   #D8DEEC;
  --nc-rule-2: #E8ECF6;
  --nc-paper:  #FFFFFF;
  --nc-mist:   #EDF1FA;
  --nc-ink-3:  #646B88;
  --nc-bar:    60px;
  --nc-gut:    clamp(18px, 4vw, 54px);
  --nc-r:      22px;
  --nc-r-sm:   14px;
  --nc-ease:   cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* The UA rule for [hidden] is `display: none` at the lowest possible
   specificity, so ANY class that sets display beats it. `.nc-post` sets
   display:flex, which is why the blog filter set the attribute on 24 cards
   and all 30 stayed on screen. Defend it once, here, for every element. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sc-font-text);
  background: var(--sc-canvas);
  color: var(--sc-ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--br-violet); color: #fff; }
img { max-width: 100%; }

/* ====================================================================
   LIQUID GLASS
   Four things together read as glass rather than as a blur: a saturating
   backdrop, a specular top edge, a refracting bevel ring, and a highlight
   that tracks the pointer. Used only where something sits behind it.
   ==================================================================== */
.lg {
  position: relative;
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-radius: var(--nc-r);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.35),
    0 1px 1px rgba(10,18,60,0.04),
    0 18px 44px -18px rgba(10,18,60,0.22);
  isolation: isolate;
}
.lg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.15) 34%,
    rgba(11,79,232,0.16) 62%, rgba(120,24,252,0.22) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.lg::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(42% 60% at var(--lx, 50%) var(--ly, 0%),
    rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 70%);
  transition: opacity 320ms var(--nc-ease);
}
.lg:hover::after { opacity: 1; }
.lg > * { position: relative; z-index: 3; }
@supports not (backdrop-filter: blur(1px)) { .lg { background: rgba(255,255,255,0.93); } }
@media (prefers-reduced-motion: reduce) { .lg::after { display: none; } }

/* ---------- type ramp ---------------------------------------------- */
.nc-h1 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.3rem, 5.6vw, 4.45rem); line-height: 0.99;
  letter-spacing: -0.032em; margin: 0; text-wrap: balance; max-width: 16ch;
}
.nc-h2 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.85rem); line-height: 1.08;
  letter-spacing: -0.026em; margin: 0; text-wrap: balance; max-width: 20ch;
}
.nc-h3 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.08rem, 1.7vw, 1.4rem); line-height: 1.22;
  letter-spacing: -0.016em; margin: 0;
}
.nc-lede {
  font-size: clamp(1rem, 1.35vw, 1.175rem); line-height: 1.62;
  color: var(--sc-ink-soft); max-width: 52ch; margin: 0; text-wrap: pretty;
}
.nc-body { font-size: 0.975rem; line-height: 1.68; color: var(--sc-ink-soft); max-width: 58ch; margin: 0; text-wrap: pretty; }
.nc-tag {
  font-family: var(--sc-font-mono); font-size: 0.665rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--sc-accent); margin: 0;
}

/* ---------- chrome -------------------------------------------------- */
.nc-bar {
  position: fixed; inset: 10px var(--nc-gut) auto; height: var(--nc-bar); z-index: 70;
  display: flex; align-items: center; gap: 14px; padding: 0 10px 0 16px;
  background: rgba(255,255,255,0.86);
}
.nc-bar__mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; }
.nc-bar__mark img { height: 26px; width: auto; display: block; }
.nc-bar__mark b { font-family: var(--sc-font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.016em; }
.nc-bar__mark b i { font-style: normal; color: var(--br-violet); }
.nc-bar nav { display: flex; gap: 22px; align-items: center; }
.nc-bar nav a {
  font-size: 0.83rem; color: var(--sc-ink-soft); text-decoration: none;
  transition: color 150ms var(--nc-ease);
}
.nc-bar nav a:hover, .nc-bar nav a[aria-current="page"] { color: var(--sc-accent); }
@media (max-width: 1040px) { .nc-bar nav { display: none; } }

/* products dropdown, keyboard and pointer accessible */
.nc-drop { position: relative; }
.nc-drop > button {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.83rem; color: var(--sc-ink-soft);
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 150ms var(--nc-ease);
}
.nc-drop > button:hover, .nc-drop[data-open="1"] > button { color: var(--sc-accent); }
.nc-drop > button svg { width: 9px; height: 9px; transition: transform 200ms var(--nc-ease); }
.nc-drop[data-open="1"] > button svg { transform: rotate(180deg); }
/* The 14px gap between the button and the panel is dead space: crossing it
   fires mouseleave and closes the menu before the pointer arrives. This
   pseudo-element bridges it invisibly so the hover area is continuous. */
.nc-drop__menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.nc-drop__menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 260px; padding: 8px; border-radius: var(--nc-r-sm);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), var(--sc-e3);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* visibility flips instantly on open and only after the fade on close.
     Transitioning it in both directions leaves the panel computed-hidden
     for 200ms after opening, and a hidden element cannot take focus, which
     is what stopped ArrowDown reaching the first item. */
  transition: opacity 200ms var(--nc-ease), transform 200ms var(--nc-ease), visibility 0s linear 200ms;
}
.nc-drop[data-open="1"] .nc-drop__menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition: opacity 200ms var(--nc-ease), transform 200ms var(--nc-ease), visibility 0s linear 0s;
}
.nc-drop__menu a {
  display: block; padding: 9px 11px; border-radius: 9px; text-decoration: none;
  color: var(--sc-ink); font-size: 0.86rem;
}
.nc-drop__menu a span { display: block; font-size: 0.74rem; color: var(--nc-ink-3); margin-top: 2px; }
.nc-drop__menu a:hover { background: var(--nc-mist); }

.nc-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7em 1.3em; border-radius: var(--nc-r-sm); border: 1px solid transparent;
  background: var(--br-grad); color: #fff; text-decoration: none;
  font-size: 0.83rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 18px -8px rgba(11,79,232,0.7);
  transition: transform 110ms var(--nc-ease), box-shadow 200ms var(--nc-ease), filter 160ms var(--nc-ease);
}
.nc-cta:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 26px -8px rgba(11,79,232,0.8); }
.nc-cta:active { transform: translateY(1px); }
.nc-cta--ghost {
  background: rgba(255,255,255,0.6); color: var(--sc-ink); border-color: var(--nc-rule);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.nc-cta--ghost:hover { filter: none; background: #fff; border-color: #B9C4DE; }
.nc-cta--lg { padding: 0.9em 1.7em; font-size: 0.92rem; }
:focus-visible { outline: 2px solid var(--br-violet); outline-offset: 3px; border-radius: 4px; }
.nc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; padding: 12px 18px; border-radius: 0 0 var(--nc-r-sm) 0;
}
.nc-skip:focus { left: 0; }

/* ---------- layout -------------------------------------------------- */
.nc-sec { padding: clamp(52px, 9vh, 150px) var(--nc-gut); }
.nc-sec--tight { padding-top: clamp(30px, 4vh, 54px); }
.nc-wrap { max-width: 1340px; margin: 0 auto; }
.nc-narrow { max-width: 960px; margin: 0 auto; }

/* ---------- inner-page hero band ------------------------------------ */
.nc-phero { position: relative; overflow: hidden; background: var(--nc-mist); }
.nc-phero__plate { position: absolute; inset: 0; z-index: 0; }
.nc-phero__plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-phero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(102deg, rgba(244,246,251,0.97) 0%, rgba(244,246,251,0.93) 38%, rgba(244,246,251,0.56) 68%, rgba(244,246,251,0.24) 100%),
    linear-gradient(to bottom, rgba(244,246,251,0.94) 0%, rgba(244,246,251,0.48) 26%, rgba(244,246,251,0.62) 100%);
}
.nc-phero__in {
  position: relative; z-index: 2; max-width: 1340px; margin: 0 auto;
  padding: calc(var(--nc-bar) + clamp(56px, 11vh, 120px)) var(--nc-gut) clamp(56px, 10vh, 110px);
}
.nc-phero .nc-tag { margin-bottom: 1.1rem; }
.nc-phero .nc-lede { margin-top: 1.2rem; }
.nc-phero__acts { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 2rem; }
.nc-crumb { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: #565D7C; margin: 0 0 1rem; }
.nc-crumb a { color: #565D7C; text-decoration: none; }
.nc-crumb a:hover { color: var(--sc-accent); }

/* ---------- feature list -------------------------------------------- */
/* Explicit columns, because every feature set here is three or six items
   and both divide by three. auto-fit lands 4 + 2 at desktop. */
.nc-feats { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: 1fr; margin-top: 2.2rem; }
@media (min-width: 640px)  { .nc-feats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nc-feats { grid-template-columns: repeat(3, 1fr); } }
.nc-feat { background: var(--nc-paper); border: 1px solid var(--nc-rule); border-radius: var(--nc-r); padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 0.6rem; }
.nc-feat h3 { font-family: var(--sc-font-display); font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: -0.012em; }
.nc-feat p { margin: 0; font-size: 0.92rem; line-height: 1.62; color: var(--sc-ink-soft); }
.nc-feat__n { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--sc-accent); }

/* ---------- numbered points (asymmetric, not a card grid) ----------- */
.nc-points { display: flex; flex-direction: column; gap: 1.1rem; }
.nc-point { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.5rem 0.95rem; align-items: baseline; padding-bottom: 1.1rem; border-bottom: 1px solid var(--nc-rule-2); }
.nc-point:last-child { border-bottom: 0; padding-bottom: 0; }
.nc-point__n { font-family: var(--sc-font-mono); font-size: 0.7rem; color: var(--sc-accent); letter-spacing: 0.08em; }
.nc-point h3 { font-family: var(--sc-font-display); font-size: 1.02rem; font-weight: 600; margin: 0 0 0.3rem; letter-spacing: -0.012em; }
.nc-point p { grid-column: 2; margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--sc-ink-soft); }

/* ---------- use-case rows (alternating, max two in a row) ----------- */
.nc-use { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(26px, 4vw, 62px); align-items: center; padding: clamp(28px, 4vh, 56px) 0; border-bottom: 1px solid var(--nc-rule-2); }
.nc-use:last-child { border-bottom: 0; }
.nc-use__fig { margin: 0; border-radius: var(--nc-r); overflow: hidden; aspect-ratio: 16/10; box-shadow: var(--sc-e2); background: var(--nc-mist); }
.nc-use__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-use:nth-child(even) .nc-use__fig { order: 2; }
.nc-use h3 { font-family: var(--sc-font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; margin: 0 0 0.7rem; letter-spacing: -0.018em; }
.nc-use p { margin: 0; font-size: 0.97rem; line-height: 1.66; color: var(--sc-ink-soft); max-width: 48ch; }
.nc-use ul { margin: 0.9rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.nc-use li { position: relative; padding-left: 1.1rem; font-size: 0.92rem; line-height: 1.55; color: var(--sc-ink-soft); }
.nc-use li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 5px; height: 5px; border-radius: 50%; background: var(--sc-accent); }
@media (max-width: 860px) {
  .nc-use { grid-template-columns: 1fr; gap: 20px; }
  .nc-use:nth-child(even) .nc-use__fig { order: 0; }
}

/* ---------- product cards on the home page -------------------------- */
.nc-prods { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-top: 2.4rem; }
.nc-prod {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--nc-paper); border: 1px solid var(--nc-rule); border-radius: var(--nc-r);
  overflow: hidden; transition: transform 220ms var(--nc-ease), box-shadow 220ms var(--nc-ease), border-color 220ms var(--nc-ease);
}
.nc-prod:hover { transform: translateY(-3px); box-shadow: var(--sc-e3); border-color: #B9C4DE; }
.nc-prod__fig { margin: 0; aspect-ratio: 16/10; overflow: hidden; background: var(--nc-mist); }
.nc-prod__fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--nc-ease); }
.nc-prod:hover .nc-prod__fig img { transform: scale(1.035); }
.nc-prod__b { padding: clamp(17px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
/* The kicker sits under the title rather than beside it. Inline, a long
   kicker wraps on narrow cards and only that card gets a two-line header,
   which is the other way a row of equal-width cards ends up unequal. */
.nc-prod__hd { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.nc-prod__hd h3 { font-family: var(--sc-font-display); font-size: 1.14rem; font-weight: 600; margin: 0; letter-spacing: -0.016em; }
.nc-prod__hd span { font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nc-ink-3); }
.nc-prod__b p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--sc-ink-soft); }
.nc-prod__go { margin-top: auto; padding-top: 0.9rem; font-size: 0.84rem; font-weight: 500; color: var(--sc-accent); display: inline-flex; align-items: center; gap: 6px; }
.nc-prod:hover .nc-prod__go svg { transform: translateX(3px); }
.nc-prod__go svg { width: 13px; height: 13px; transition: transform 220ms var(--nc-ease); }

/* ---------- accent band (light) -------------------------------------
   Was a navy band. The brand is a light theme throughout now, so this
   reads as a tinted panel rather than an inversion, and nothing has to
   restate `color` on a subtree. */
.nc-dark { background: var(--nc-mist); position: relative; overflow: hidden; }
.nc-dark__glow {
  position: absolute; inset: -30% -10% auto; height: 130%; pointer-events: none; z-index: 1;
  background:
    radial-gradient(42% 44% at 18% 14%, rgba(0,96,252,0.10) 0%, transparent 70%),
    radial-gradient(38% 42% at 86% 66%, rgba(120,24,252,0.10) 0%, transparent 70%);
}
.nc-dark__in { position: relative; z-index: 2; max-width: 1340px; margin: 0 auto; }
.nc-glasscard {
  padding: 20px 20px 22px; border-radius: var(--nc-r);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 14px 34px -18px rgba(10,18,60,0.18);
  display: flex; flex-direction: column; gap: 0.72rem; position: relative; isolation: isolate;
}
.nc-glasscard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.3) 38%, rgba(11,79,232,0.22) 70%, rgba(120,24,252,0.28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.nc-glasscard > * { position: relative; z-index: 2; }
.nc-glasscard h3 { font-family: var(--sc-font-display); font-size: 1.05rem; font-weight: 600; margin: 0; letter-spacing: -0.014em; color: var(--sc-ink); }
.nc-glasscard p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--sc-ink-soft); }
.nc-glasscard__k { font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--sc-accent); margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--nc-rule); }
.nc-grid4 { display: grid; grid-template-columns: 1fr; gap: clamp(10px, 1.4vw, 18px); margin-top: 2.2rem; }
@media (min-width: 680px)  { .nc-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .nc-grid4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .nc-grid4--six { grid-template-columns: repeat(3, 1fr); } }

/* ---------- closing call to action ---------------------------------- */
.nc-close { background: var(--nc-paper); text-align: center; }
.nc-close .nc-h2 { max-width: none; margin: 0 auto; }
.nc-close .nc-lede { margin: 1.15rem auto 0; }
.nc-close__acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }

/* ---------- footer (light) ------------------------------------------ */
.nc-foot { background: var(--nc-mist); color: var(--sc-ink-soft); border-top: 1px solid var(--nc-rule); padding: clamp(42px, 7vh, 80px) var(--nc-gut) clamp(26px, 4vh, 44px); }
.nc-foot__in { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: clamp(24px, 4vw, 54px); }
@media (max-width: 860px) { .nc-foot__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .nc-foot__in { grid-template-columns: 1fr; } }
.nc-foot h4 { font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-accent); margin: 0 0 0.9rem; font-weight: 400; }
.nc-foot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.nc-foot a { color: var(--sc-ink-soft); text-decoration: none; font-size: 0.89rem; }
.nc-foot a:hover { color: var(--sc-accent); }
.nc-foot__mark { display: flex; align-items: center; gap: 10px; margin-bottom: 0.9rem; }
.nc-foot__mark img { height: 26px; width: auto; }
.nc-foot__mark b { font-family: var(--sc-font-display); font-size: 1rem; color: var(--sc-ink); font-weight: 600; }
.nc-foot__mark b i { font-style: normal; color: var(--br-violet); }
.nc-foot__blurb { font-size: 0.89rem; line-height: 1.62; color: var(--sc-ink-soft); max-width: 34ch; margin: 0; }
.nc-foot__base { max-width: 1340px; margin: clamp(28px, 5vh, 54px) auto 0; padding-top: 1.3rem; border-top: 1px solid var(--nc-rule);
  display: flex; gap: 10px 26px; flex-wrap: wrap; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--nc-ink-3); }

/* ---------- entrance reveal (engine-independent) -------------------- */
[data-in] > * { opacity: 0; transform: translateY(14px); }
[data-in].is-in > * { opacity: 1; transform: none; transition: opacity 620ms var(--nc-ease), transform 620ms var(--nc-ease); }
[data-in].is-in > *:nth-child(2) { transition-delay: 70ms; }
[data-in].is-in > *:nth-child(3) { transition-delay: 140ms; }
[data-in].is-in > *:nth-child(4) { transition-delay: 210ms; }
[data-in].is-in > *:nth-child(5) { transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-in] > * { opacity: 1; transform: none; }
}

/* ====================================================================
   BLOG
   ==================================================================== */
.nc-chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-family: var(--sc-font-mono); font-size: 0.63rem; letter-spacing: 0.09em;
  text-transform: uppercase; background: var(--nc-mist); color: #3E4668;
  border: 1px solid var(--nc-rule); text-decoration: none;
}
.nc-chip--prod { background: rgba(11,79,232,0.08); color: #0B4FE8; border-color: rgba(11,79,232,0.22); }
.nc-chip--prod:hover { background: rgba(11,79,232,0.14); }
.nc-chip--soft { background: transparent; color: #565D7C; }

.nc-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; }
.nc-filter {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.82rem;
  padding: 0.5em 1em; border-radius: 999px; border: 1px solid var(--nc-rule);
  background: var(--nc-paper); color: var(--sc-ink-soft);
  transition: background 160ms var(--nc-ease), color 160ms var(--nc-ease), border-color 160ms var(--nc-ease);
}
.nc-filter span { font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--nc-ink-3); margin-left: 5px; }
.nc-filter:hover { border-color: #B9C4DE; color: var(--sc-ink); }
.nc-filter.is-on { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; }
.nc-filter.is-on span { color: rgba(255,255,255,0.78); }
.nc-filters__none { color: var(--sc-ink-soft); font-size: 0.95rem; }

.nc-posts { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: 1fr; }
@media (min-width: 680px)  { .nc-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .nc-posts { grid-template-columns: repeat(3, 1fr); } }
.nc-post {
  display: flex; flex-direction: column; gap: 0.7rem; text-decoration: none; color: inherit;
  background: var(--nc-paper); border: 1px solid var(--nc-rule); border-radius: var(--nc-r);
  padding: clamp(18px, 2vw, 26px);
  transition: transform 220ms var(--nc-ease), box-shadow 220ms var(--nc-ease), border-color 220ms var(--nc-ease);
}
.nc-post:hover { transform: translateY(-3px); box-shadow: var(--sc-e3); border-color: #B9C4DE; }
.nc-post__hd { display: flex; gap: 7px; flex-wrap: wrap; }
.nc-post h2 { font-family: var(--sc-font-display); font-size: 1.1rem; font-weight: 600; margin: 0; letter-spacing: -0.016em; line-height: 1.25; text-wrap: balance; }
.nc-post p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--sc-ink-soft); }
.nc-post__go { margin-top: auto; padding-top: 0.5rem; font-size: 0.83rem; font-weight: 500; color: var(--sc-accent); display: inline-flex; align-items: center; gap: 6px; }
.nc-post__go svg { width: 13px; height: 13px; transition: transform 220ms var(--nc-ease); }
.nc-post:hover .nc-post__go svg { transform: translateX(3px); }

.nc-postmeta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 1.2rem; }
.nc-postmeta__t { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: #565D7C; }
.nc-h1--post { font-size: clamp(1.9rem, 4.2vw, 3.3rem); max-width: 22ch; }

.nc-prose h2 { margin: 2.6rem 0 1rem; }
.nc-prose h2:first-child { margin-top: 0; }
.nc-prose p { font-size: 1.02rem; line-height: 1.72; color: var(--sc-ink-soft); margin: 0 0 1.1rem; max-width: 68ch; }
.nc-prose .nc-points { margin-top: 1.4rem; }
.nc-ticks { margin: 1.2rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.nc-ticks li { position: relative; padding-left: 1.6rem; font-size: 0.98rem; line-height: 1.6; color: var(--sc-ink-soft); }
.nc-ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 13px; height: 8px;
  border-left: 1.8px solid var(--sc-accent); border-bottom: 1.8px solid var(--sc-accent);
  transform: rotate(-45deg);
}
.nc-posture { margin-top: 2.8rem; padding: clamp(18px, 2vw, 26px); border-radius: var(--nc-r); background: var(--nc-mist); border: 1px solid var(--nc-rule); }
.nc-posture .nc-tag { margin-bottom: 1rem; }
.nc-posture dl { margin: 0; display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .nc-posture dl { grid-template-columns: repeat(3, 1fr); } }
.nc-posture dt { font-family: var(--sc-font-mono); font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase; color: #565D7C; margin-bottom: 0.3rem; }
.nc-posture dd { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--sc-ink); }

/* ---------- founder portrait (light) -------------------------------- */
.nc-expertise { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: 1fr; margin-top: 2.2rem; }
@media (min-width: 640px)  { .nc-expertise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .nc-expertise { grid-template-columns: repeat(3, 1fr); } }
.nc-cred { display: flex; gap: 1.1rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--nc-rule-2); }
.nc-cred:last-child { border-bottom: 0; }
.nc-cred__k { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: #565D7C; flex: 0 0 9.5rem; }
.nc-cred__v { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--sc-ink); }
@media (max-width: 620px) { .nc-cred { flex-direction: column; gap: 0.3rem; } .nc-cred__k { flex: none; } }

/* ---------- contact: direct ways to reach us ------------------------ */
.nc-reach {
  margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--nc-rule);
  display: grid; gap: clamp(20px, 3vw, 54px); grid-template-columns: 1fr;
}
@media (min-width: 640px) { .nc-reach { grid-template-columns: repeat(2, 1fr); } }
.nc-reach .nc-tag { margin-bottom: 0.8rem; }
.nc-reach__v { margin: 0 0 0.35rem; font-family: var(--sc-font-display); font-size: clamp(1.1rem, 1.9vw, 1.45rem); font-weight: 600; letter-spacing: -0.016em; }
.nc-reach__v a { color: var(--sc-ink); text-decoration: none; }
.nc-reach__v a:hover { color: var(--sc-accent); }
.nc-reach__n { margin: 0.7rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--sc-ink-soft); }

/* ---------- founder block on the about page ------------------------- */
.nc-founder { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
@media (max-width: 900px) { .nc-founder { grid-template-columns: 1fr; } }
.nc-founder .nc-portrait { max-width: 460px; }
.nc-vision__rule { width: 48px; height: 2px; background: var(--br-grad); margin: 1.1rem 0 1.4rem; }

/* ---------- portrait and vision statement (light) ------------------- */
.nc-portrait { position: relative; border-radius: var(--nc-r); overflow: hidden; box-shadow: var(--sc-e3); margin: 0; }
.nc-portrait img { width: 100%; height: auto; display: block; }
.nc-portrait figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.3rem 1.15rem;
  background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.90) 50%, rgba(255,255,255,0) 100%);
}
.nc-portrait figcaption b {
  display: block; font-family: var(--sc-font-display); font-size: 1.05rem;
  color: var(--sc-ink); font-weight: 600; letter-spacing: -0.012em; line-height: 1.2;
}
.nc-portrait figcaption span {
  display: block; font-family: var(--sc-font-mono); font-size: 0.64rem;
  letter-spacing: 0.08em; color: var(--sc-accent); margin-top: 0.4rem; line-height: 1.45;
}
.nc-statement {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2.1vw, 1.72rem); line-height: 1.4; letter-spacing: -0.018em;
  color: var(--sc-ink); margin: 0; max-width: 28ch;
}

/* ====================================================================
   PRODUCT TIERS (Kanoon IQ)
   ==================================================================== */
.nc-tiers { margin-top: 2.4rem; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px); }
.nc-tier {
  display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px); align-items: start;
  background: var(--nc-paper); border: 1px solid var(--nc-rule);
  border-radius: var(--nc-r); padding: clamp(20px, 2.6vw, 36px);
  scroll-margin-top: calc(var(--nc-bar) + 30px);
}
@media (max-width: 860px) { .nc-tier { grid-template-columns: 1fr; } }
.nc-tier__art { background: var(--nc-mist); border-radius: var(--nc-r-sm); padding: clamp(14px, 1.8vw, 24px); }
.nc-tier__art svg { width: 100%; height: auto; display: block; }
/* Photographic tier panel. The frame keeps the mist padding so the photo
   sits inside the same panel the line drawings did, and the caption keeps
   the mono kicker that labelled them. */
.nc-plate { margin: 0; }
.nc-plate picture { display: block; border-radius: calc(var(--nc-r-sm) - 4px); overflow: hidden; }
.nc-plate img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block; }
.nc-plate figcaption {
  margin-top: 0.85rem; text-align: center;
  font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sc-ink-soft);
}
.nc-tier__body h3 { font-family: var(--sc-font-display); font-size: clamp(1.25rem, 2.1vw, 1.6rem); font-weight: 600; margin: 0.6rem 0 0; letter-spacing: -0.02em; }
.nc-tier__tag { font-family: var(--sc-font-display); font-size: 1.02rem; font-weight: 500; color: var(--sc-accent); margin: 0.5rem 0 0.9rem; letter-spacing: -0.012em; }
.nc-tier__body > p { margin: 0; font-size: 0.97rem; line-height: 1.66; color: var(--sc-ink-soft); max-width: 56ch; }
.nc-tier__list { margin: 1.2rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.nc-tier__list li { position: relative; padding-left: 1.3rem; font-size: 0.93rem; line-height: 1.6; color: var(--sc-ink-soft); }
.nc-tier__list li::before { content: ""; position: absolute; left: 0; top: 0.56em; width: 6px; height: 6px; border-radius: 50%; background: var(--br-grad); }
.nc-tier__list b { color: var(--sc-ink); font-weight: 500; }
.nc-tier__best { margin: 1.3rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--nc-rule-2); font-size: 0.9rem; color: var(--sc-ink-soft); }
.nc-tier__best span { font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); margin-right: 0.6rem; }
.nc-disclaim {
  margin-top: 1.8rem; padding: 1rem 1.2rem; border-radius: var(--nc-r-sm);
  background: var(--nc-mist); border: 1px solid var(--nc-rule);
  font-size: 0.9rem; line-height: 1.6; color: var(--sc-ink-soft); max-width: 72ch;
}
.nc-disclaim b { color: var(--sc-ink); font-weight: 500; }

/* Five product cards, all the same size. Five into a three-column grid
   leaves an empty trailing cell, so the row wraps and centres instead:
   every card is the same width, and there is no hole where a sixth would
   have been. --nc-prod-gap is named so the width arithmetic below cannot
   drift from the gap it is subtracting. */
.nc-prods {
  --nc-prod-gap: clamp(14px, 1.6vw, 20px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--nc-prod-gap);
}
.nc-prods > .nc-prod { flex: 0 1 100%; }
@media (min-width: 680px) {
  .nc-prods > .nc-prod { flex: 0 1 calc((100% - var(--nc-prod-gap)) / 2); }
}
@media (min-width: 1060px) {
  .nc-prods > .nc-prod { flex: 0 1 calc((100% - 2 * var(--nc-prod-gap)) / 3); }
}

/* Equal width is not equal size: one description running to a fifth line
   makes its whole row taller than the next. The description block is held
   at exactly four lines — min-height pads the short ones, the clamp caps
   the long ones — so every card is the same height. The copy is written to
   fit four lines at the narrowest card, so the clamp is a guard that never
   actually cuts text. */
.nc-prods .nc-prod__b p {
  min-height: calc(4 * 1.6 * 0.92rem);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
}