@charset "UTF-8";
/* ==========================================================================
   LINKILO THEME — DESIGN SYSTEM
   --------------------------------------------------------------------------
   One file. No build step. No CDN. No framework.

   Everything on linkilo.co is drawn from the tokens in :root below. Change a
   token here and it changes everywhere — header, feature pages, pricing,
   blog, knowledge base and the free tools all read the same variables.

   ORDER OF SECTIONS
     01  Tokens
     02  Reset + base
     03  Layout primitives (container, section, grid, split, stack)
     04  Typography
     05  Buttons + links
     06  Header / navigation / mega menu
     07  Hero patterns
     08  Cards + tiles
     09  Feature page furniture (checklists, mockups, stats, steps)
     10  Tables + comparison
     11  Pricing
     12  FAQ / accordion
     13  Blog + article
     14  Knowledge base
     15  Free tools
     16  CTA bands + footer
     17  Utilities (a deliberately small set)
     18  Motion + print + forced colors
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --lk-blue:          #177EE5;
  --lk-blue-600:      #1470CE;
  --lk-blue-700:      #135BB5;
  --lk-blue-300:      #72AEE6;
  /* Text-safe brand blue. #177EE5 is a fill color: on white it measures only
     3.9:1, which fails WCAG AA for text under 24px. Anything that renders the
     brand as SMALL TEXT (links, eyebrows, inline anchors, markers) must use
     --lk-blue-ink instead, which measures ~6:1 on both white and --lk-surface.
     Buttons and chips keep --lk-blue, because there the blue is the background
     and the text on top of it is white. */
  --lk-blue-ink:      #135BB5;
  --lk-blue-100:      #DBEAFE;
  --lk-blue-50:       #F3F9FE;

  --lk-navy:          #1E294D;
  --lk-navy-deep:     #141C36;
  --lk-navy-soft:     #2A3760;

  /* --- Ink --------------------------------------------------------------- */
  --lk-ink:           #0F172A;
  --lk-ink-800:       #1E293B;
  --lk-ink-700:       #334155;
  --lk-ink-600:       #475569;
  --lk-ink-500:       #64748B;
  --lk-ink-400:       #94A3B8;

  /* --- Surfaces ---------------------------------------------------------- */
  --lk-white:         #FFFFFF;
  --lk-surface:       #F8FAFC;
  --lk-surface-2:     #F6F7FA;
  --lk-surface-tint:  #DDF1F6;

  /* --- Lines ------------------------------------------------------------- */
  --lk-line:          #E2E8F0;
  --lk-line-strong:   #CBD5E1;
  --lk-line-navy:     rgba(255, 255, 255, .14);

  /* --- Semantic ---------------------------------------------------------- */
  --lk-green:         #16A34A;
  --lk-green-500:     #22C55E;
  --lk-green-bg:      #ECFDF5;
  --lk-green-ink:     #047857;

  --lk-amber:         #F59E0B;
  --lk-amber-bg:      #FFFBEB;
  --lk-amber-ink:     #B45309;

  --lk-red:           #EF4444;
  --lk-red-bg:        #FEF2F2;
  --lk-red-ink:       #B91C1C;

  --lk-violet:        #8B5CF6;
  --lk-indigo:        #6366F1;
  --lk-teal:          #0D9488;
  --lk-cyan:          #0891B2;
  --lk-pink:          #DB2777;
  --lk-orange:        #EA580C;

  /* One step down from violet-500/indigo-500: white on those was 4.23:1 and
     4.47:1, just under AA, and the AI badge is two characters wide. */
  /* The 'who does the work' chip on feature pages needs an AI tone that is
     not the gradient (which is decorative and cannot carry text). */
  --lk-violet-bg:      #F3F0FF;
  --lk-violet-ink:     #5B21B6;

  --lk-ai-gradient:    linear-gradient(135deg, #7C3AED, #4F46E5);
  --lk-brand-gradient: linear-gradient(135deg, #177EE5, #72AEE6);

  /* --- Typography -------------------------------------------------------- */
  --lk-font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lk-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Fluid scale. clamp() keeps headings honest on phones without media queries. */
  --lk-t-xs:   0.75rem;   /* 12 */
  --lk-t-sm:   0.875rem;  /* 14 */
  --lk-t-base: 1rem;      /* 16 */
  --lk-t-md:   1.0625rem; /* 17 — body copy on marketing pages */
  --lk-t-lg:   1.125rem;  /* 18 */
  --lk-t-xl:   1.25rem;   /* 20 */
  --lk-t-2xl:  clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --lk-t-3xl:  clamp(1.625rem, 1.4rem + 1.1vw, 2.125rem);
  --lk-t-4xl:  clamp(2rem, 1.65rem + 1.7vw, 2.75rem);
  --lk-t-5xl:  clamp(2.375rem, 1.8rem + 2.7vw, 3.5rem);
  --lk-t-6xl:  clamp(2.75rem, 2rem + 3.6vw, 4.25rem);

  --lk-lh-tight: 1.12;
  --lk-lh-snug:  1.3;
  --lk-lh-body:  1.7;

  /* --- Space ------------------------------------------------------------- */
  --lk-1:  0.25rem;
  --lk-2:  0.5rem;
  --lk-3:  0.75rem;
  --lk-4:  1rem;
  --lk-5:  1.25rem;
  --lk-6:  1.5rem;
  --lk-8:  2rem;
  --lk-10: 2.5rem;
  --lk-12: 3rem;
  --lk-16: 4rem;
  --lk-20: 5rem;
  --lk-24: 6rem;

  /* Vertical rhythm for full-bleed sections — one knob for whole-page density */
  --lk-section-y:       clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --lk-section-y-tight: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* --- Radius ------------------------------------------------------------ */
  --lk-r-sm:   6px;
  --lk-r:      10px;
  --lk-r-lg:   14px;
  --lk-r-xl:   20px;
  --lk-r-full: 999px;

  /* --- Elevation --------------------------------------------------------- */
  --lk-sh-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --lk-sh:    0 2px 6px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --lk-sh-md: 0 8px 24px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
  --lk-sh-lg: 0 18px 44px rgba(15, 23, 42, .10), 0 4px 10px rgba(15, 23, 42, .05);
  --lk-sh-brand: 0 14px 34px rgba(23, 126, 229, .22);

  /* --- Widths ------------------------------------------------------------ */
  --lk-w-prose: 46rem;   /* article body */
  --lk-w-md:    64rem;
  --lk-w-lg:    76rem;   /* default marketing container */
  --lk-w-xl:    88rem;   /* header */

  --lk-gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);

  /* --- Motion ------------------------------------------------------------ */
  --lk-ease: cubic-bezier(.2, .7, .3, 1);
  --lk-fast: 140ms;
  --lk-slow: 260ms;

  /* --- Chrome ------------------------------------------------------------ */
  --lk-header-h: 80px;
  --lk-z-header: 100;
  --lk-z-menu:   110;
  --lk-z-modal:  200;
}

/* Fallback metrics matched to Inter so the font swap does not shift layout.
   Without this, swapping to Inter is a measurable CLS hit on every page. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

/* ==========================================================================
   02  RESET + BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links must clear the sticky header */
  scroll-padding-top: calc(var(--lk-header-h) + 1rem);
}body {
  margin: 0;
  font-family: var(--lk-font);
  font-size: var(--lk-t-md);
  line-height: var(--lk-lh-body);
  color: var(--lk-ink-700);
  background: var(--lk-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip`, never `hidden`. `overflow-x: hidden` forces the used value of
     overflow-y to `auto`, which turns <body> into a scroll container, stops
     the viewport inheriting its overflow, and silently breaks every
     scroll-driven animation bound to the root scroller (the reading progress
     bar). `clip` prevents sideways overflow with none of that. */
  overflow-x: clip;
}h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; color: var(--lk-ink); line-height: var(--lk-lh-snug); }p, ul, ol, dl, figure, pre, table, blockquote { margin: 0 0 var(--lk-4); }ul, ol { padding-left: 1.25em; }li + li { margin-top: .35em; }:last-child { margin-bottom: 0; }img, svg, video, canvas, iframe { display: block; max-width: 100%; }img, video { height: auto; }a { color: var(--lk-blue-ink); text-decoration: none; }a:hover { color: var(--lk-blue-700); text-decoration: underline; }strong, b { font-weight: 650; color: var(--lk-ink-800); }small { font-size: var(--lk-t-sm); }hr { height: 1px; border: 0; background: var(--lk-line); margin: var(--lk-10) 0; }code, kbd, samp, pre { font-family: var(--lk-font-mono); font-size: .9em; }code {
  background: var(--lk-surface);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-sm);
  padding: .12em .4em;
  color: var(--lk-ink-800);
}pre {
  background: var(--lk-navy-deep);
  color: #E2E8F0;
  padding: var(--lk-5);
  border-radius: var(--lk-r-lg);
  overflow-x: auto;
  line-height: 1.6;
}pre code { background: none; border: 0; padding: 0; color: inherit; }button, input, select, textarea { font: inherit; color: inherit; }button { cursor: pointer; }table { border-collapse: collapse; width: 100%; }

/* Visible, consistent focus everywhere — this is the only focus style in the
   theme, so it can never be accidentally overridden away by a component. */
:focus-visible {
  outline: 3px solid var(--lk-blue);
  outline-offset: 2px;
  border-radius: var(--lk-r-sm);
}.lk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--lk-z-modal);
  background: var(--lk-white);
  color: var(--lk-ink);
  padding: var(--lk-3) var(--lk-5);
  border-radius: 0 0 var(--lk-r) 0;
  font-weight: 600;
  box-shadow: var(--lk-sh-md);
}.lk-skip:focus { left: 0; }

/* WordPress's own class names for the same jobs. Core and plugin markup
   (comment forms, the search form fallback, captions) use these. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }.screen-reader-text:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }.wp-caption { max-width: 100%; margin-bottom: var(--lk-6); }.wp-caption img { display: block; }.wp-caption-text, .gallery-caption { margin-top: var(--lk-2); font-size: var(--lk-t-sm); color: var(--lk-ink-500); text-align: center; }.sticky { position: static; } /* Sticky posts: nothing special on this site; the class must exist. */
.bypostauthor { position: static; }.lk-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03  LAYOUT PRIMITIVES
   ========================================================================== */

.lk-container {
  width: 100%;
  max-width: var(--lk-w-lg);
  margin-inline: auto;
  padding-inline: var(--lk-gutter);
}.lk-container--md { max-width: var(--lk-w-md); }.lk-container--xl { max-width: var(--lk-w-xl); }.lk-section { padding-block: var(--lk-section-y); }.lk-section--tight { padding-block: var(--lk-section-y-tight); }.lk-section--flush-top { padding-top: 0; }.lk-section--flush-bottom { padding-bottom: 0; }

/* Section skins — the only backgrounds a section may have, so pages never
   drift into one-off colors. */
.lk-section--white { background: var(--lk-white); }.lk-section--soft { background: var(--lk-surface); }.lk-section--tint { background: var(--lk-blue-50); }.lk-section--navy { background: var(--lk-navy); color: rgba(255,255,255,.82); }.lk-section--navy h1, .lk-section--navy h2, .lk-section--navy h3, .lk-section--navy h4 { color: var(--lk-white); }.lk-section--navy a:not(.lk-btn) { color: var(--lk-blue-300); }

/* Grid: one class, column count set by a modifier. Collapses in a single
   place instead of per component. */
.lk-grid { display: grid; gap: var(--lk-6); }.lk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.lk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }.lk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }.lk-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }.lk-grid--gap-lg { gap: var(--lk-10); }.lk-grid--gap-sm { gap: var(--lk-4); }

/* Balanced grids (lk_grid_open): the column count is chosen from the card
   count, and rows are flex so a short last row sits centred. --lk-cols is
   set inline per grid; the breakpoints narrow it the same way for all. */
.lk-grid--balanced { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lk-6); }
.lk-grid--balanced > * { flex: 0 0 calc((100% - var(--lk-6) * (var(--lk-cols) - 1)) / var(--lk-cols)); min-width: 0; box-sizing: border-box; }
.lk-grid--balanced[style*="--lk-cols:1"] > * { flex-basis: min(100%, 44rem); }
@media (max-width: 1023px) { .lk-grid--balanced { --lk-cols: 2 !important; } .lk-grid--balanced[style*="--lk-cols:1"] { --lk-cols: 1 !important; } }
@media (max-width: 719px) { .lk-grid--balanced { --lk-cols: 1 !important; } }

/* Auto-fit grids for card walls of unknown length */
.lk-grid--auto { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }.lk-grid--auto-wide { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }@media (max-width: 1023px) {.lk-grid--4, .lk-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.lk-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}@media (max-width: 719px) {.lk-grid--2, .lk-grid--3, .lk-grid--4, .lk-grid--5 { grid-template-columns: minmax(0, 1fr); }
}

/* Split: the workhorse of every feature page — copy on one side, proof on the
   other, alternating down the page. */
.lk-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}.lk-split--copy-narrow { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }.lk-split + .lk-split { margin-top: clamp(3rem, 2rem + 5vw, 6rem); }.lk-split--flip > :first-child { order: 2; }@media (max-width: 899px) {.lk-split, .lk-split--copy-narrow { grid-template-columns: minmax(0, 1fr); }.lk-split--flip > :first-child { order: 0; }
}.lk-cluster { display: flex; flex-wrap: wrap; gap: var(--lk-3); align-items: center; }.lk-cluster--center { justify-content: center; }

/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */

.lk-eyebrow {
  display: inline-block;
  font-size: var(--lk-t-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lk-blue-ink);
  margin-bottom: var(--lk-3);
}.lk-section--navy .lk-eyebrow, .lk-hero .lk-eyebrow { color: var(--lk-blue-300); }.lk-h1 { font-size: var(--lk-t-5xl); line-height: var(--lk-lh-tight); letter-spacing: -.022em; font-weight: 800; }.lk-h2 { font-size: var(--lk-t-4xl); line-height: 1.18; letter-spacing: -.018em; font-weight: 800; }.lk-h3 { font-size: var(--lk-t-2xl); letter-spacing: -.012em; font-weight: 700; }.lk-lead {
  font-size: var(--lk-t-lg);
  line-height: 1.65;
  color: var(--lk-ink-600);
  max-width: 40em;
}.lk-section--navy .lk-lead { color: rgba(255,255,255,.78); }.lk-muted { color: var(--lk-ink-500); }.lk-fine { font-size: var(--lk-t-sm); color: var(--lk-ink-500); }.lk-gradient-text {
  background: var(--lk-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section header block — eyebrow + h2 + lead, centered by default */
.lk-head {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}.lk-head .lk-lead { margin-inline: auto; }.lk-head--left { margin-inline: 0; text-align: left; }.lk-head--left .lk-lead { margin-inline: 0; }

/* Badges */
.lk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--lk-2);
  font-size: var(--lk-t-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .3em .75em;
  border-radius: var(--lk-r-full);
  background: var(--lk-blue-100);
  color: var(--lk-blue-700);
  line-height: 1.4;
}.lk-badge--new { background: var(--lk-green-bg); color: var(--lk-green-ink); }.lk-badge--ai { background: var(--lk-ai-gradient); color: #fff; }.lk-badge--free { background: var(--lk-surface); color: var(--lk-ink-600); border: 1px solid var(--lk-line); }.lk-badge--soon { background: var(--lk-amber-bg); color: var(--lk-amber-ink); }.lk-badge--solid { background: var(--lk-blue); color: #fff; }.lk-badge--onnavy { background: rgba(255,255,255,.12); color: #fff; }

/* ==========================================================================
   05  BUTTONS + LINKS
   ========================================================================== */

.lk-btn {
  --_bg: var(--lk-blue);
  --_fg: #fff;
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lk-2);
  font-size: var(--lk-t-base);
  font-weight: 650;
  line-height: 1.2;
  padding: .85em 1.6em;
  border: 1px solid var(--_bd);
  border-radius: var(--lk-r);
  background: var(--_bg);
  color: var(--_fg);
  text-decoration: none;
  text-align: center;
  transition: background var(--lk-fast) var(--lk-ease),
              color var(--lk-fast) var(--lk-ease),
              border-color var(--lk-fast) var(--lk-ease),
              transform var(--lk-fast) var(--lk-ease),
              box-shadow var(--lk-fast) var(--lk-ease);
}.lk-btn:hover { color: var(--_fg); text-decoration: none; transform: translateY(-1px); }.lk-btn:active { transform: translateY(0); }.lk-btn svg { width: 1.15em; height: 1.15em; flex: none; }.lk-btn[disabled], .lk-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }.lk-btn--primary {
  /* Fill is --lk-blue-600, not --lk-blue. White text on #177EE5 measures
     4.08:1, which fails WCAG AA for text below 18.66px, and the primary CTA is
     the last place to accept that. #1470CE clears 4.5:1 and still reads as the
     brand. To trade accessibility back for exact brand fidelity, set this to
     var(--lk-blue). */
  --_bg: var(--lk-blue-600);
  box-shadow: var(--lk-sh-brand);
}.lk-btn--primary:hover { --_bg: var(--lk-blue-700); }.lk-btn--dark { --_bg: var(--lk-navy); }.lk-btn--dark:hover { --_bg: var(--lk-navy-deep); }.lk-btn--ghost { --_bg: transparent; --_fg: var(--lk-ink-800); --_bd: var(--lk-line-strong); }.lk-btn--ghost:hover { --_bg: var(--lk-surface); --_bd: var(--lk-ink-400); }.lk-btn--on-navy { --_bg: rgba(255,255,255,.10); --_fg: #fff; --_bd: rgba(255,255,255,.28); }.lk-btn--on-navy:hover { --_bg: rgba(255,255,255,.18); }.lk-btn--white { --_bg: #fff; --_fg: var(--lk-navy); }.lk-btn--white:hover { --_bg: #EFF6FF; --_fg: var(--lk-navy); }.lk-btn--lg { font-size: var(--lk-t-lg); padding: .95em 1.9em; }.lk-btn--sm { font-size: var(--lk-t-sm); padding: .65em 1.15em; }.lk-btn--block { display: flex; width: 100%; }

/* Inline "read more" link with a nudging arrow */
.lk-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 650;
  color: var(--lk-blue-ink);
  text-decoration: none;
}.lk-link-arrow svg { width: 1em; height: 1em; transition: transform var(--lk-fast) var(--lk-ease); }.lk-link-arrow:hover { text-decoration: none; color: var(--lk-blue-700); }.lk-link-arrow:hover svg { transform: translateX(3px); }

/* ==========================================================================
   06  HEADER / NAVIGATION / MEGA MENU
   ========================================================================== */

.lk-header {
  position: sticky;
  top: 0;
  z-index: var(--lk-z-header);
  background: var(--lk-navy);
  color: #fff;
}.lk-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lk-6);
  height: var(--lk-header-h);
  /* Mega panels position against the bar, not against their own <li>. An <li>
     sitting mid-header would push a 800px panel off the right of the screen;
     anchoring to the bar keeps every panel inside the container by definition. */
  position: relative;
}.lk-header__logo { display: flex; align-items: center; flex: none; }.lk-header__logo img { height: 32px; width: auto; }.lk-nav { display: flex; align-items: center; gap: var(--lk-2); }.lk-nav__list { display: flex; align-items: center; gap: var(--lk-1); list-style: none; margin: 0; padding: 0; }
/* static, so .lk-header__bar is the positioning context for .lk-mega */
.lk-nav__list > li { margin: 0; position: static; }.lk-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  height: var(--lk-header-h);
  padding-inline: var(--lk-4);
  font-size: var(--lk-t-base);
  font-weight: 500;
  color: rgba(255,255,255,.88);
  background: none;
  border: 0;
  text-decoration: none;
  transition: color var(--lk-fast) var(--lk-ease);
}.lk-nav__link:hover, .lk-nav__link[aria-expanded="true"] { color: #fff; text-decoration: none; }.lk-nav__link[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--lk-blue-300); }.lk-nav__link svg { width: .8em; height: .8em; transition: transform var(--lk-fast) var(--lk-ease); }.lk-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }.lk-header__actions { display: flex; align-items: center; gap: var(--lk-3); flex: none; }

/* --- Mega menu ---------------------------------------------------------- */
.lk-mega {
  position: absolute;
  top: calc(var(--lk-header-h) - 6px);
  right: 0;
  z-index: var(--lk-z-menu);
  background: #fff;
  color: var(--lk-ink-700);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  box-shadow: var(--lk-sh-lg);
  padding: var(--lk-6);
  /* Layout is intrinsic to the component — it cannot collapse because some
     other stylesheet did or did not load. That was the old header's bug. */
  width: max-content;
  max-width: min(90vw, 62rem);
  display: none;
}.lk-mega[data-open="true"] { display: block; }.lk-mega__cols {
  display: grid;
  grid-template-columns: repeat(var(--lk-mega-cols, 3), minmax(11rem, 1fr));
  gap: var(--lk-6);
  align-items: start;
}.lk-mega__col { min-width: 0; }.lk-mega__title {
  font-size: var(--lk-t-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lk-ink-500);
  margin: 0 0 var(--lk-3);
  padding-bottom: var(--lk-2);
  border-bottom: 1px solid var(--lk-line);
}.lk-mega__list { list-style: none; margin: 0; padding: 0; }.lk-mega__list > li { margin: 0; }.lk-mega__item {
  display: flex;
  align-items: center;
  gap: var(--lk-3);
  padding: var(--lk-2);
  margin-inline: calc(var(--lk-2) * -1);
  border-radius: var(--lk-r);
  color: var(--lk-ink-700);
  font-size: var(--lk-t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--lk-fast) var(--lk-ease), color var(--lk-fast) var(--lk-ease);
}.lk-mega__item:hover { background: var(--lk-blue-50); color: var(--lk-blue-700); text-decoration: none; }.lk-mega__item--strong { font-weight: 650; color: var(--lk-ink); }.lk-mega__foot {
  margin-top: var(--lk-5);
  padding-top: var(--lk-4);
  border-top: 1px solid var(--lk-line);
  text-align: center;
}

/* Icon chip, used in the menu and in card headers */
.lk-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--lk-r);
  background: var(--lk-blue-100);
  color: var(--lk-blue-700);
}.lk-chip svg { width: 1.15rem; height: 1.15rem; }.lk-chip--lg { width: 3rem; height: 3rem; border-radius: var(--lk-r-lg); }.lk-chip--lg svg { width: 1.5rem; height: 1.5rem; }

/* Chip color families — one class per accent, no inline styles anywhere */
.lk-chip--blue { background: #DBEAFE; color: #1D4ED8; }.lk-chip--slate { background: #F1F5F9; color: #334155; }.lk-chip--red { background: #FEE2E2; color: #B91C1C; }.lk-chip--pink { background: #FCE7F3; color: #BE185D; }.lk-chip--violet { background: #EDE9FE; color: #6D28D9; }.lk-chip--orange { background: #FFEDD5; color: #C2410C; }.lk-chip--amber { background: #FEF3C7; color: #B45309; }.lk-chip--green { background: #D1FAE5; color: #047857; }.lk-chip--teal { background: #CCFBF1; color: #0F766E; }.lk-chip--cyan { background: #CFFAFE; color: #0E7490; }.lk-chip--indigo { background: #E0E7FF; color: #4338CA; }.lk-chip--emerald { background: #D1FAE5; color: #047857; }.lk-chip--fuchsia { background: #FAE8FF; color: #A21CAF; }.lk-chip--yellow { background: #FEF9C3; color: #A16207; }

/* --- Mobile nav --------------------------------------------------------- */
.lk-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--lk-r);
  background: rgba(255,255,255,.06);
  color: #fff;
}.lk-burger svg { width: 1.4rem; height: 1.4rem; }.lk-burger__close { display: none; }.lk-burger[aria-expanded="true"] .lk-burger__open { display: none; }.lk-burger[aria-expanded="true"] .lk-burger__close { display: block; }@media (max-width: 1079px) {.lk-burger { display: inline-flex; }.lk-nav {
    position: fixed;
    inset: var(--lk-header-h) 0 0 0;
    display: block;
    background: var(--lk-navy);
    padding: var(--lk-5) var(--lk-gutter) var(--lk-16);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--lk-slow) var(--lk-ease), visibility var(--lk-slow);
  }.lk-nav[data-open="true"] { transform: translateX(0); visibility: visible; }.lk-nav__list { display: block; }.lk-nav__list > li + li { border-top: 1px solid var(--lk-line-navy); }.lk-nav__link {
    height: auto;
    width: 100%;
    justify-content: space-between;
    padding: var(--lk-4) 0;
    font-size: var(--lk-t-lg);
    font-weight: 600;
  }.lk-nav__link[aria-current="page"] { box-shadow: none; color: var(--lk-blue-300); }.lk-mega {
    position: static;
    width: auto;
    max-width: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--lk-5);
    color: rgba(255,255,255,.8);
  }.lk-mega__cols { grid-template-columns: minmax(0, 1fr); gap: var(--lk-5); }.lk-mega__title { color: rgba(255,255,255,.5); border-bottom-color: var(--lk-line-navy); }.lk-mega__item { color: rgba(255,255,255,.85); white-space: normal; }.lk-mega__item:hover { background: rgba(255,255,255,.08); color: #fff; }.lk-mega__foot { border-top-color: var(--lk-line-navy); text-align: left; }.lk-header__actions .lk-btn--on-navy { display: none; }body[data-nav-open="true"] { overflow: hidden; }
}

/* Announcement / promo strip above the header */
.lk-promo {
  background: var(--lk-navy-deep);
  color: rgba(255,255,255,.9);
  font-size: var(--lk-t-sm);
  text-align: center;
  padding: var(--lk-2) var(--lk-gutter);
}.lk-promo a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

/* ==========================================================================
   07  HERO PATTERNS
   ========================================================================== */

.lk-hero {
  position: relative;
  background: var(--lk-navy);
  color: rgba(255,255,255,.82);
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
/* Ambience is painted with gradients, not images — no extra request, no LCP cost */
.lk-hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(48rem 26rem at 22% 6%, rgba(23,126,229,.30), transparent 62%),
    radial-gradient(40rem 24rem at 84% 22%, rgba(99,102,241,.22), transparent 60%);
}.lk-hero h1, .lk-hero h2 { color: #fff; }.lk-hero__inner { max-width: 52rem; }.lk-hero--center .lk-hero__inner { margin-inline: auto; text-align: center; }.lk-hero--center .lk-lead, .lk-hero--center .lk-hero__lead { margin-inline: auto; }.lk-hero--center .lk-cluster { justify-content: center; }.lk-hero__lead {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.62;
  color: rgba(255,255,255,.78);
  max-width: 42em;
}.lk-hero__note { font-size: var(--lk-t-sm); color: rgba(255,255,255,.6); }

/* Split hero: promise on the left, proof on the right */
.lk-hero--split .lk-hero__inner { max-width: none; }.lk-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}@media (max-width: 899px) {.lk-hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* Trust strip under a hero */
.lk-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-3) var(--lk-6);
  align-items: center;
  font-size: var(--lk-t-sm);
  color: rgba(255,255,255,.7);
}.lk-trust__item { display: inline-flex; align-items: center; gap: var(--lk-2); }.lk-trust__item svg { width: 1.05em; height: 1.05em; color: var(--lk-green-500); flex: none; }.lk-hero--center .lk-trust { justify-content: center; }

/* Page head for interior pages (blog, KB, legal) — lighter than a marketing hero */
.lk-pagehead {
  background: var(--lk-surface);
  border-bottom: 1px solid var(--lk-line);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

/* ==========================================================================
   08  CARDS + TILES
   ========================================================================== */

.lk-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  /* Own background => own text color. See the note on .lk-mock. */
  color: var(--lk-ink-700);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  padding: var(--lk-6);
  transition: border-color var(--lk-fast) var(--lk-ease),
              box-shadow var(--lk-fast) var(--lk-ease),
              transform var(--lk-fast) var(--lk-ease);
}.lk-card__title { font-size: var(--lk-t-lg); font-weight: 700; color: var(--lk-ink); margin: 0; }.lk-card__text { font-size: var(--lk-t-sm); color: var(--lk-ink-600); margin: 0; }.lk-card__foot { margin-top: auto; padding-top: var(--lk-4); }

/* Interactive card — the whole tile is the link */
.lk-card--link { text-decoration: none; color: inherit; }.lk-card--link:hover {
  border-color: var(--lk-blue);
  box-shadow: var(--lk-sh-md);
  transform: translateY(-3px);
  text-decoration: none;
}.lk-card--link:hover .lk-card__title { color: var(--lk-blue-700); }.lk-card--soft { background: var(--lk-surface); border-color: transparent; }.lk-card--pad-lg { padding: var(--lk-8); }.lk-card--navy { background: var(--lk-navy-soft); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }.lk-card--navy .lk-card__title { color: #fff; }.lk-card--navy .lk-card__text { color: rgba(255,255,255,.72); }

/* Accent rail — a 3px colored edge tying a card to a feature family */
/* ---- Node card ----------------------------------------------------------
   The house card treatment, replacing the colored left border that every
   template on the internet now uses.

   The motif is a link graph, which is what the product is. Each card carries a
   small node on its top edge with a hairline running out of it; on hover the
   hairline draws across the full width, as though the connection completed.
   Both parts are pseudo-elements, so it costs no markup.
   --------------------------------------------------------------------- */
.lk-card--node {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--lk-6) + 2px);
}.lk-card--node::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 2.5rem;
  background: linear-gradient(90deg, var(--lk-node, var(--lk-blue)), transparent);
  transition: width var(--lk-slow) var(--lk-ease);
}.lk-card--node::after {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lk-node, var(--lk-blue));
  transition: transform var(--lk-fast) var(--lk-ease);
}.lk-card--node:hover::before, .lk-card--node:focus-within::before { width: 100%; }.lk-card--node:hover::after, .lk-card--node:focus-within::after { transform: scale(1.3); }

/* Node color families. Set the variable; both pseudo-elements follow. */
.lk-node-blue { --lk-node: #1D4ED8; }.lk-node-red { --lk-node: #B91C1C; }.lk-node-green { --lk-node: #047857; }.lk-node-amber { --lk-node: #B45309; }.lk-node-violet { --lk-node: #6D28D9; }.lk-node-teal { --lk-node: #0F766E; }.lk-node-orange { --lk-node: #C2410C; }.lk-node-slate { --lk-node: #334155; }.lk-node-cyan { --lk-node: #0E7490; }.lk-node-indigo { --lk-node: #4338CA; }.lk-node-yellow { --lk-node: #A16207; }.lk-node-fuchsia { --lk-node: #A21CAF; }.lk-node-emerald { --lk-node: #047857; }.lk-node-pink { --lk-node: #BE185D; }@media (prefers-reduced-motion: reduce) {.lk-card--node::before, .lk-card--node::after { transition: none; }
}

/* ==========================================================================
   09  FEATURE PAGE FURNITURE
   ========================================================================== */

/* Checklist — used on every feature page under the copy column */
.lk-checks { list-style: none; margin: 0; padding: 0; }.lk-checks > li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: var(--lk-3);
  align-items: start;
  margin: 0 0 var(--lk-3);
  font-size: var(--lk-t-base);
  color: var(--lk-ink-700);
}.lk-checks svg { width: 1.25rem; height: 1.25rem; color: var(--lk-green); margin-top: .18em; flex: none; }.lk-checks--blue svg { color: var(--lk-blue); }.lk-section--navy .lk-checks > li, .lk-hero .lk-checks > li { color: rgba(255,255,255,.8); }

/* Cross list — for "what you do today" pain columns */
.lk-crosses { list-style: none; margin: 0; padding: 0; }.lk-crosses > li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: var(--lk-3);
  align-items: start;
  margin: 0 0 var(--lk-3);
  font-size: var(--lk-t-base);
  color: var(--lk-ink-600);
}.lk-crosses svg { width: 1.25rem; height: 1.25rem; color: var(--lk-red); margin-top: .18em; flex: none; }

/* Before/after pain -> relief pair */
.lk-baa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lk-6); }@media (max-width: 719px) {.lk-baa { grid-template-columns: minmax(0, 1fr); } }.lk-baa__pane { border-radius: var(--lk-r-lg); padding: var(--lk-6); border: 1px solid var(--lk-line); }.lk-baa__pane--before { background: var(--lk-red-bg); border-color: #FECACA; }.lk-baa__pane--after { background: var(--lk-green-bg); border-color: #A7F3D0; }.lk-baa__label { font-size: var(--lk-t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: var(--lk-3); }.lk-baa__pane--before .lk-baa__label { color: var(--lk-red-ink); }.lk-baa__pane--after  .lk-baa__label { color: var(--lk-green-ink); }

/* Stat row */
.lk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--lk-6); }.lk-stat__value { font-size: var(--lk-t-4xl); font-weight: 800; color: var(--lk-blue); line-height: 1.05; letter-spacing: -.02em; }.lk-stat__label { font-size: var(--lk-t-sm); color: var(--lk-ink-500); margin-top: var(--lk-1); }.lk-section--navy .lk-stat__value, .lk-hero .lk-stat__value { color: #fff; }.lk-section--navy .lk-stat__label, .lk-hero .lk-stat__label { color: rgba(255,255,255,.65); }

/* Numbered steps */
/* The heading above this block is centered, so the list is centered as a group
   rather than stretched edge to edge. Without the max-width the numbers sit
   hard against the left gutter while the heading floats in the middle, which
   reads as broken alignment even though both are technically correct. */
.lk-steps {
  list-style: none;
  counter-reset: lk-step;
  margin-inline: auto;
  padding: 0;
  display: grid;
  gap: var(--lk-6);
  max-width: 42rem;
}.lk-steps > li {
  counter-increment: lk-step;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--lk-4);
  margin: 0;
}.lk-steps > li::before {
  content: counter(lk-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--lk-r-full);
  background: var(--lk-blue);
  color: #fff;
  font-weight: 700;
  font-size: var(--lk-t-base);
}.lk-steps__title { font-weight: 700; color: var(--lk-ink); margin-bottom: var(--lk-1); }

/* --- UI mockup: the fake-screenshot device used across feature pages -----
   RULE: any component that paints its own light background MUST also set its
   own text color. These sit inside .lk-hero and .lk-section--navy, which set
   `color: rgba(255,255,255,.82)` on their subtree — so without an explicit
   color here the text inherits white and vanishes on the white card. */
.lk-mock {
  background: #fff;
  color: var(--lk-ink-700);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  box-shadow: var(--lk-sh-lg);
  overflow: hidden;
}.lk-mock h1, .lk-mock h2, .lk-mock h3, .lk-mock h4, .lk-mock strong { color: var(--lk-ink); }.lk-mock .lk-fine, .lk-mock .lk-muted { color: var(--lk-ink-500); }.lk-mock a:not(.lk-btn) { color: var(--lk-blue-ink); }.lk-mock { margin: 0; }.lk-mock__bar {
  display: flex;
  align-items: center;
  gap: var(--lk-3);
  padding: var(--lk-3) var(--lk-4);
  background: var(--lk-surface);
  border-bottom: 1px solid var(--lk-line);
}.lk-mock__label { font-size: var(--lk-t-xs); font-weight: 600; color: var(--lk-ink-500); letter-spacing: .03em; text-transform: uppercase; }.lk-mock__label::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 7px; height: 7px; margin-right: 7px;
  border: 1.5px solid var(--lk-blue); border-radius: 50%;
}.lk-mock__body { padding: var(--lk-5); }

/* Suggestion row — the signature Linkilo UI object */
.lk-sugg { border: 1px solid var(--lk-line); border-radius: var(--lk-r); padding: var(--lk-4); background: #fff; color: var(--lk-ink-700); }.lk-sugg + .lk-sugg { margin-top: var(--lk-3); }.lk-sugg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lk-3); }.lk-sugg__title { font-size: var(--lk-t-sm); font-weight: 700; color: var(--lk-ink); }.lk-sugg__score {
  font-size: var(--lk-t-xs);
  font-weight: 700;
  padding: .2em .55em;
  border-radius: var(--lk-r-sm);
  background: var(--lk-green-bg);
  color: var(--lk-green-ink);
  flex: none;
}.lk-sugg__anchor {
  margin-top: var(--lk-3);
  padding: var(--lk-2) var(--lk-3);
  background: var(--lk-surface);
  border-radius: var(--lk-r-sm);
  font-size: var(--lk-t-xs);
  color: var(--lk-ink-700);
}.lk-sugg__anchor u { color: var(--lk-blue-ink); text-decoration-color: var(--lk-blue-300); }.lk-sugg__why { margin-top: var(--lk-2); font-size: var(--lk-t-xs); color: var(--lk-ink-500); font-style: italic; }

/* Code sample inside a mockup — used to show a link before and after a repair */
.lk-code {
  font-family: var(--lk-font-mono);
  font-size: .8rem;
  line-height: 1.9;
  word-break: break-word;
}
/* AA-safe: #EF4444 is 3.76:1 on white and #16A34A is 3.3:1, both below 4.5.
   The -ink variants clear it while reading as the same red and green. */
.lk-del { color: var(--lk-red-ink); }.lk-ins { color: var(--lk-green-ink); }

/* A line of body copy shown inside a mockup, with a demo link in it */
.lk-demo-line { line-height: 1.9; }.lk-demo-line u { color: var(--lk-blue-ink); text-decoration-color: var(--lk-blue-300); }

/* Status pills for health / broken / redirect tables */
.lk-pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: var(--lk-t-xs);
  font-weight: 650;
  padding: .22em .6em;
  border-radius: var(--lk-r-sm);
  background: var(--lk-surface);
  color: var(--lk-ink-600);
  white-space: nowrap;
}.lk-pill--ok { background: var(--lk-green-bg); color: var(--lk-green-ink); }.lk-pill--warn { background: var(--lk-amber-bg); color: var(--lk-amber-ink); }.lk-pill--bad { background: var(--lk-red-bg); color: var(--lk-red-ink); }.lk-pill--info { background: var(--lk-blue-100); color: var(--lk-blue-700); }

/* Callout / note box inside body copy */
.lk-note {
  border-left: 3px solid var(--lk-blue);
  background: var(--lk-blue-50);
  padding: var(--lk-5);
  border-radius: 0 var(--lk-r) var(--lk-r) 0;
  font-size: var(--lk-t-base);
}.lk-note__title { font-weight: 700; color: var(--lk-ink); margin-bottom: var(--lk-1); }

/* Question card — the "what you actually ask" grid */
.lk-question {
  font-size: var(--lk-t-base);
  font-weight: 700;
  color: var(--lk-blue-700);
  line-height: 1.45;
}

/* Under-the-hood definition list. Two columns on desktop so a long list of
   technical terms stays scannable instead of becoming a wall. */
.lk-deep { margin: 0; display: grid; gap: var(--lk-6); }@media (min-width: 900px) {.lk-deep { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lk-6) var(--lk-10); } }.lk-deep__row {
  margin: 0;
  padding-left: var(--lk-5);
  border-left: 2px solid var(--lk-line);
}.lk-deep__term {
  font-weight: 700;
  color: var(--lk-ink);
  font-family: var(--lk-font-mono);
  font-size: var(--lk-t-sm);
  letter-spacing: -.01em;
  margin-bottom: var(--lk-2);
}.lk-deep__desc { margin: 0; font-size: var(--lk-t-sm); color: var(--lk-ink-600); line-height: 1.7; }.lk-section--navy .lk-deep__row { border-left-color: rgba(255,255,255,.2); }.lk-section--navy .lk-deep__term { color: var(--lk-blue-300); }.lk-section--navy .lk-deep__desc { color: rgba(255,255,255,.75); }

/* Persona / "who this is for" tiles */
.lk-persona { display: grid; gap: var(--lk-2); }.lk-persona__who { font-weight: 700; color: var(--lk-ink); }.lk-persona__pain { font-size: var(--lk-t-sm); color: var(--lk-ink-500); }.lk-persona__fix { font-size: var(--lk-t-sm); color: var(--lk-ink-700); }

/* ==========================================================================
   10  TABLES + COMPARISON
   ========================================================================== */

.lk-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  background: #fff;
  color: var(--lk-ink-700);
  -webkit-overflow-scrolling: touch;
}.lk-table { width: 100%; min-width: 40rem; font-size: var(--lk-t-sm); }.lk-table th, .lk-table td { padding: var(--lk-4) var(--lk-5); text-align: left; vertical-align: top; }.lk-table thead th {
  background: var(--lk-surface);
  font-size: var(--lk-t-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--lk-ink-500);
  border-bottom: 1px solid var(--lk-line);
}.lk-table tbody tr + tr td { border-top: 1px solid var(--lk-line); }.lk-table tbody tr:hover td { background: var(--lk-blue-50); }.lk-table td:first-child { font-weight: 600; color: var(--lk-ink-800); }

/* The "us" column keeps a permanent highlight so comparisons read at a glance */
.lk-table .lk-col-us { background: var(--lk-blue-50); }.lk-table thead .lk-col-us { background: var(--lk-blue-100); color: var(--lk-blue-700); }.lk-table tbody tr:hover td.lk-col-us { background: #DCEBFB; }.lk-yes { color: var(--lk-green); font-weight: 700; }.lk-no { color: var(--lk-ink-500); }.lk-yes svg, .lk-no svg { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.2em; }

/* Product tour video: poster until pressed, nothing preloaded */
.lk-video { margin: 0; }
.lk-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--lk-r-lg); background: #0b1220; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .65); }
.lk-video figcaption { text-align: center; color: rgba(255, 255, 255, .6); }

/* Homepage: the tabbed trio keeps the full-demo layout at a shorter height */
.lkd--tabbed .lkd__body { min-height: 0; }
.lkd--tabbed .lkd__screen { max-height: min(76vh, 780px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lkd--tabbed .lkd__menu { position: sticky; top: 0; align-self: flex-start; }

/* Comparison pages: the like-for-like pricing table */
.lk-table--pricing td { vertical-align: top; }
.lk-table--pricing td strong { display: block; color: var(--lk-ink); }
.lk-table--pricing td small { display: block; color: var(--lk-ink-500); font-size: var(--lk-t-sm); margin-top: 2px; }
.lk-pricing-notes { list-style: disc; padding-left: 1.2em; color: var(--lk-ink-600); font-size: var(--lk-t-sm); }
.lk-pricing-notes li + li { margin-top: .4em; }

/* ==========================================================================
   11  PRICING
   ========================================================================== */

.lk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--lk-5); align-items: stretch; }.lk-plan {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--lk-ink-700);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-xl);
  padding: var(--lk-6);
  position: relative;
}.lk-plan--featured { border-color: var(--lk-blue); box-shadow: var(--lk-sh-brand); }.lk-plan__flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--lk-blue);
  color: #fff;
  font-size: var(--lk-t-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .3em .9em;
  border-radius: var(--lk-r-full);
  white-space: nowrap;
}.lk-plan__name { font-size: var(--lk-t-lg); font-weight: 700; color: var(--lk-ink); }.lk-plan__sites { font-size: var(--lk-t-sm); color: var(--lk-ink-500); }.lk-plan__price { display: flex; align-items: baseline; gap: .25em; margin: var(--lk-4) 0 var(--lk-1); flex-wrap: wrap; }.lk-plan__amount { font-size: var(--lk-t-4xl); font-weight: 800; color: var(--lk-ink); letter-spacing: -.02em; line-height: 1; }.lk-plan__per { font-size: var(--lk-t-sm); color: var(--lk-ink-500); }.lk-plan__cta { margin-top: auto; padding-top: var(--lk-6); }

/* ==========================================================================
   12  FAQ / ACCORDION
   ========================================================================== */

.lk-faq { max-width: 52rem; margin-inline: auto; }.lk-faq__item { border-bottom: 1px solid var(--lk-line); }.lk-faq__item:first-child { border-top: 1px solid var(--lk-line); }.lk-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lk-4);
  width: 100%;
  padding: var(--lk-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--lk-t-lg);
  font-weight: 650;
  color: var(--lk-ink);
  line-height: 1.4;
}.lk-faq__q svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--lk-blue-ink); transition: transform var(--lk-slow) var(--lk-ease); }.lk-faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }

/* The answer stays in the DOM (crawlable, matches the FAQPage schema) and is
   hidden with [hidden], so search engines and screen readers both get it. */
.lk-faq__a { padding: 0 0 var(--lk-5); color: var(--lk-ink-600); max-width: 46rem; }.lk-faq__a[hidden] { display: none; }

/* ==========================================================================
   13  BLOG + ARTICLE
   ========================================================================== */

.lk-post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  overflow: hidden;
  transition: border-color var(--lk-fast) var(--lk-ease),
              box-shadow var(--lk-fast) var(--lk-ease),
              transform var(--lk-fast) var(--lk-ease);
}.lk-post-card:hover { border-color: var(--lk-blue); box-shadow: var(--lk-sh-md); transform: translateY(-3px); }.lk-post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--lk-surface); overflow: hidden; }.lk-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lk-slow) var(--lk-ease); }.lk-post-card:hover .lk-post-card__media img { transform: scale(1.03); }
/* Placeholder when a post has no featured image — never an empty gray box */
.lk-post-card__media--empty {
  background: var(--lk-navy);
  background-image: radial-gradient(28rem 14rem at 30% 0%, rgba(23,126,229,.5), transparent 62%);
}.lk-post-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--lk-5); gap: var(--lk-3); }.lk-post-card__title { font-size: var(--lk-t-xl); font-weight: 700; line-height: 1.3; margin: 0; }.lk-post-card__title a { color: var(--lk-ink); text-decoration: none; }.lk-post-card__title a:hover { color: var(--lk-blue-700); }.lk-post-card__excerpt { font-size: var(--lk-t-sm); color: var(--lk-ink-600); margin: 0; }.lk-post-card__foot {
  margin-top: auto;
  padding-top: var(--lk-3);
  border-top: 1px solid var(--lk-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-2) var(--lk-4);
  align-items: center;
  font-size: var(--lk-t-xs);
  color: var(--lk-ink-500);
}.lk-post-card--feature { grid-column: 1 / -1; }@media (min-width: 900px) {.lk-post-card--feature { flex-direction: row; }.lk-post-card--feature .lk-post-card__media { flex: 0 0 52%; aspect-ratio: auto; }.lk-post-card--feature .lk-post-card__body { padding: var(--lk-8); justify-content: center; }.lk-post-card--feature .lk-post-card__title { font-size: var(--lk-t-3xl); }.lk-post-card--feature .lk-post-card__excerpt { font-size: var(--lk-t-base); }
}.lk-meta { display: inline-flex; align-items: center; gap: var(--lk-2); }.lk-meta svg { width: 1em; height: 1em; color: var(--lk-ink-400); }.lk-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; }

/* Category filter rail */
.lk-catbar { display: flex; flex-wrap: wrap; gap: var(--lk-2); }.lk-catbar a {
  display: inline-block;
  padding: .45em 1em;
  border-radius: var(--lk-r-full);
  border: 1px solid var(--lk-line);
  background: #fff;
  font-size: var(--lk-t-sm);
  font-weight: 600;
  color: var(--lk-ink-600);
  text-decoration: none;
}.lk-catbar a:hover { border-color: var(--lk-blue); color: var(--lk-blue-700); text-decoration: none; }.lk-catbar a[aria-current="page"] { background: var(--lk-navy); border-color: var(--lk-navy); color: #fff; }

/* Sticky in-page jump nav, used on long hub pages.
   Deliberately short: it stacks under an 80px header, so anything taller than
   ~52px starts eating the viewport on a laptop. It therefore sets its own
   padding rather than inheriting section rhythm. */
.lk-jumpnav {
  position: sticky;
  top: var(--lk-header-h);
  z-index: calc(var(--lk-z-header) - 1);
  border-bottom: 1px solid var(--lk-line);
  /* An explicit background is required: a transparent sticky bar would let the
     page scroll through it. */
  background: var(--lk-white);
  padding-block: var(--lk-2);
}.lk-jumpnav .lk-cluster { gap: var(--lk-1); }

/* Scroll under both bars. Kept as a variable so the two stay in step. */
:root { --lk-jumpnav-h: 52px; }@media (max-width: 719px) {
  /* On phones the bar wraps to two rows; let it scroll sideways instead so it
     never takes a quarter of the screen. */
  .lk-jumpnav .lk-cluster {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }.lk-jumpnav .lk-cluster::-webkit-scrollbar { display: none; }.lk-catbar-link { white-space: nowrap; }
}.lk-catbar-link {
  display: inline-block;
  padding: .45em 1em;
  border-radius: var(--lk-r-full);
  font-size: var(--lk-t-sm);
  font-weight: 600;
  color: var(--lk-ink-600);
  text-decoration: none;
  transition: background var(--lk-fast) var(--lk-ease), color var(--lk-fast) var(--lk-ease);
}.lk-catbar-link:hover { background: var(--lk-blue-50); color: var(--lk-blue-700); text-decoration: none; }

/* Sections targeted by the jump nav must clear BOTH sticky bars, or the
   heading you jumped to lands behind the nav that sent you there. */
.lk-jumpnav ~ * [id], .lk-jumpnav ~ [id] {
  scroll-margin-top: calc(var(--lk-header-h) + var(--lk-jumpnav-h) + var(--lk-4));
}

/* --- Article layout ----------------------------------------------------- */
.lk-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}@media (max-width: 1023px) {.lk-article-layout { grid-template-columns: minmax(0, 1fr); } }.lk-article__head { max-width: var(--lk-w-prose); }.lk-article__title { font-size: var(--lk-t-4xl); letter-spacing: -.02em; line-height: 1.14; }.lk-article__hero {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: var(--lk-r-xl);
  margin-block: var(--lk-8);
  background: var(--lk-surface);
}

/* Reading progress bar */
.lk-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--lk-blue);
  z-index: calc(var(--lk-z-header) + 1);
  pointer-events: none;
}
/* Scroll-driven where supported: zero JS, runs off the compositor */
@supports (animation-timeline: scroll()) {.lk-progress {
    animation: lk-progress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes lk-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Sticky sidebar (TOC + CTA) */
.lk-aside { position: sticky; top: calc(var(--lk-header-h) + var(--lk-6)); display: grid; gap: var(--lk-6); }@media (max-width: 1023px) {.lk-aside { position: static; } }.lk-toc__title {
  font-size: var(--lk-t-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lk-ink-500);
  margin-bottom: var(--lk-3);
}.lk-toc ol, .lk-toc ul { list-style: none; margin: 0; padding: 0; }.lk-toc li { margin: 0; }.lk-toc a {
  display: block;
  padding: .4em 0 .4em var(--lk-4);
  border-left: 2px solid var(--lk-line);
  font-size: var(--lk-t-sm);
  color: var(--lk-ink-600);
  text-decoration: none;
  line-height: 1.45;
}.lk-toc a:hover { color: var(--lk-blue-700); border-left-color: var(--lk-blue-300); text-decoration: none; }.lk-toc a[aria-current="true"] { color: var(--lk-blue-ink); border-left-color: var(--lk-blue); font-weight: 650; }.lk-toc .lk-toc__h3 a { padding-left: var(--lk-8); font-size: var(--lk-t-xs); }

/* --- Prose: styles for editor-authored content -------------------------- */
.lk-prose { max-width: var(--lk-w-prose); font-size: 1.125rem; line-height: 1.78; color: var(--lk-ink-700); }.lk-prose > * + * { margin-top: 1.4em; }.lk-prose h2 { font-size: var(--lk-t-3xl); margin-top: 2em; letter-spacing: -.015em; scroll-margin-top: calc(var(--lk-header-h) + 1rem); }.lk-prose h3 { font-size: var(--lk-t-2xl); margin-top: 1.75em; scroll-margin-top: calc(var(--lk-header-h) + 1rem); }.lk-prose h4 { font-size: var(--lk-t-xl); margin-top: 1.5em; }.lk-prose h2 + *, .lk-prose h3 + *, .lk-prose h4 + * { margin-top: .7em; }.lk-prose a {
  color: var(--lk-blue-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--lk-blue-300);
}.lk-prose a:hover { text-decoration-color: var(--lk-blue-700); }.lk-prose ul, .lk-prose ol { padding-left: 1.4em; }.lk-prose li + li { margin-top: .5em; }.lk-prose li::marker { color: var(--lk-blue-ink); }.lk-prose img, .lk-prose figure img { border-radius: var(--lk-r-lg); border: 1px solid var(--lk-line); }.lk-prose figure { margin-inline: 0; }.lk-prose figcaption { margin-top: var(--lk-3); font-size: var(--lk-t-sm); color: var(--lk-ink-500); text-align: center; }.lk-prose blockquote {
  margin-inline: 0;
  padding: var(--lk-2) 0 var(--lk-2) var(--lk-6);
  border-left: 3px solid var(--lk-blue);
  font-size: var(--lk-t-xl);
  line-height: 1.55;
  color: var(--lk-ink-800);
  font-weight: 500;
}.lk-prose blockquote cite { display: block; margin-top: var(--lk-3); font-size: var(--lk-t-sm); font-style: normal; color: var(--lk-ink-500); }.lk-prose table { font-size: var(--lk-t-base); display: block; overflow-x: auto; }.lk-prose thead th { background: var(--lk-surface); text-align: left; }.lk-prose th, .lk-prose td { padding: var(--lk-3) var(--lk-4); border: 1px solid var(--lk-line); }

/* Wide elements inside prose */
.lk-prose .alignwide { width: min(100% + 8rem, 92vw); max-width: none; margin-inline: auto; }.lk-prose .alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }.lk-prose .alignleft { float: left;  margin: .4em 1.5rem 1rem 0; max-width: 50%; }.lk-prose .alignright { float: right; margin: .4em 0 1rem 1.5rem; max-width: 50%; }.lk-prose .aligncenter { margin-inline: auto; }

/* Legacy full-width page content (see page-templates/legacy-full-width.php).
   Deliberately unopinionated: the theme imposes no width, spacing or type on
   content that was designed to lay itself out. The only thing it guarantees is
   that the content cannot push the page sideways. */
.lk-legacy { width: 100%; max-width: 100%; overflow-x: clip; }.lk-legacy img, .lk-legacy video, .lk-legacy iframe, .lk-legacy table { max-width: 100%; }

/* Share + tag row */
.lk-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lk-3); }.lk-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-full);
  color: var(--lk-ink-600);
  background: #fff;
  transition: background var(--lk-fast) var(--lk-ease), color var(--lk-fast) var(--lk-ease), border-color var(--lk-fast) var(--lk-ease);
}.lk-share__btn:hover { background: var(--lk-blue); border-color: var(--lk-blue); color: #fff; }.lk-share__btn svg { width: 1rem; height: 1rem; }.lk-tags { display: flex; flex-wrap: wrap; gap: var(--lk-2); }.lk-tags a {
  font-size: var(--lk-t-xs);
  font-weight: 600;
  padding: .3em .75em;
  border-radius: var(--lk-r-full);
  background: var(--lk-surface);
  color: var(--lk-ink-600);
  text-decoration: none;
}.lk-tags a:hover { background: var(--lk-blue-100); color: var(--lk-blue-700); text-decoration: none; }

/* Author box */
.lk-author {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--lk-5);
  align-items: start;
  background: var(--lk-surface);
  border-radius: var(--lk-r-lg);
  padding: var(--lk-6);
}.lk-author img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; }@media (max-width: 599px) {.lk-author { grid-template-columns: minmax(0, 1fr); } }

/* Prev/next */
.lk-adjacent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lk-4); }@media (max-width: 719px) {.lk-adjacent { grid-template-columns: minmax(0, 1fr); } }.lk-adjacent a {
  display: block;
  padding: var(--lk-5);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  text-decoration: none;
  color: var(--lk-ink);
  font-weight: 650;
}.lk-adjacent a:hover { border-color: var(--lk-blue); background: var(--lk-blue-50); text-decoration: none; }.lk-adjacent span {
  display: block;
  font-size: var(--lk-t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lk-ink-500);
  margin-bottom: var(--lk-2);
}.lk-adjacent--next { text-align: right; }

/* Pagination */
.lk-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lk-2); }.lk-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: .75em;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r);
  background: #fff;
  color: var(--lk-ink-700);
  font-weight: 600;
  font-size: var(--lk-t-sm);
  text-decoration: none;
}.lk-pagination .page-numbers:hover { border-color: var(--lk-blue); color: var(--lk-blue-700); text-decoration: none; }.lk-pagination .page-numbers.current { background: var(--lk-navy); border-color: var(--lk-navy); color: #fff; }.lk-pagination .dots { border-color: transparent; }

/* Breadcrumbs */
.lk-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lk-2);
  font-size: var(--lk-t-sm);
  color: var(--lk-ink-500);
  list-style: none;
  margin: 0 0 var(--lk-4);
  padding: 0;
}.lk-crumbs li { margin: 0; display: inline-flex; align-items: center; gap: var(--lk-2); }.lk-crumbs li + li::before { content: "/"; color: var(--lk-line-strong); }.lk-crumbs a { color: var(--lk-ink-500); text-decoration: none; }.lk-crumbs a:hover { color: var(--lk-blue); text-decoration: underline; }.lk-crumbs [aria-current="page"] { color: var(--lk-ink-700); font-weight: 600; }

/* ==========================================================================
   14  KNOWLEDGE BASE
   --------------------------------------------------------------------------
   These rules style Knowledge Base Pro's own markup (the `lkb-` classes) with
   the theme's tokens. The plugin's templates are NOT forked — its markup is
   clean BEM, so styling it directly means a plugin update never undoes this
   work. See linkilo-kb/README.md.
   ========================================================================== */

.lkb-wrap {
  width: 100%;
  max-width: var(--lk-w-lg);
  margin-inline: auto;
  padding-inline: var(--lk-gutter);
}

/* --- Home hero --- */
.lkb-hero {
  position: relative;
  background: var(--lk-navy);
  color: rgba(255,255,255,.82);
  padding-block: clamp(3rem, 2.5rem + 3vw, 5rem);
  margin-bottom: var(--lk-section-y);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}.lkb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(42rem 22rem at 25% 0%, rgba(23,126,229,.32), transparent 62%),
    radial-gradient(34rem 20rem at 82% 30%, rgba(99,102,241,.22), transparent 60%);
}.lkb-hero__title {
  font-size: var(--lk-t-4xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}.lkb-hero__tagline {
  font-size: var(--lk-t-lg);
  color: rgba(255,255,255,.78);
  max-width: 42em;
  margin: var(--lk-4) auto 0;
}

/* --- Search --- */
.lkb-search { max-width: 40rem; margin: var(--lk-8) auto 0; position: relative; }.lkb-search__input {
  width: 100%;
  padding: 1em 1em 1em 3rem;
  font-size: var(--lk-t-lg);
  color: var(--lk-ink);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  background: #fff;
  box-shadow: var(--lk-sh-lg);
}.lkb-search__input:focus { outline: none; box-shadow: var(--lk-sh-lg), 0 0 0 3px rgba(23,126,229,.25); }.lkb-search__icon {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--lk-ink-400);
  pointer-events: none;
}.lkb-search__results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + .5rem);
  z-index: 20;
  background: #fff;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  box-shadow: var(--lk-sh-lg);
  overflow: hidden;
  text-align: left;
}.lkb-search__results a {
  display: block;
  padding: var(--lk-3) var(--lk-5);
  color: var(--lk-ink-700);
  text-decoration: none;
  font-size: var(--lk-t-sm);
}.lkb-search__results a:hover { background: var(--lk-blue-50); color: var(--lk-blue-700); }.lkb-search__results a + a { border-top: 1px solid var(--lk-line); }

/* --- Category grid --- */
.lkb-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--lk-6); }.lkb-cat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  padding: var(--lk-6);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--lk-fast) var(--lk-ease),
              box-shadow var(--lk-fast) var(--lk-ease),
              transform var(--lk-fast) var(--lk-ease);
}.lkb-cat-card:hover { border-color: var(--lk-blue); box-shadow: var(--lk-sh-md); transform: translateY(-3px); text-decoration: none; }.lkb-cat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: var(--lk-r-lg);
  background: var(--lk-blue-100);
  color: var(--lk-blue-700);
  margin-bottom: var(--lk-4);
}.lkb-cat-card__title { font-size: var(--lk-t-lg); font-weight: 700; color: var(--lk-ink); margin: 0; }.lkb-cat-card:hover .lkb-cat-card__title { color: var(--lk-blue-700); }.lkb-cat-card__desc { font-size: var(--lk-t-sm); color: var(--lk-ink-600); margin: var(--lk-2) 0 0; }.lkb-cat-card__count { margin-top: auto; padding-top: var(--lk-4); font-size: var(--lk-t-xs); font-weight: 600; color: var(--lk-ink-500); }

/* --- Category page header --- */
.lkb-cat-header { padding-block: var(--lk-10) var(--lk-6); }.lkb-cat-header__row { display: flex; align-items: center; gap: var(--lk-4); }.lkb-cat-header__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; flex: none;
  border-radius: var(--lk-r-lg);
  background: var(--lk-blue-100); color: var(--lk-blue-700);
}.lkb-cat-header__title { font-size: var(--lk-t-4xl); font-weight: 800; letter-spacing: -.02em; }.lkb-cat-header__desc { color: var(--lk-ink-600); margin-top: var(--lk-3); max-width: 46em; }

/* --- Article lists --- */
.lkb-article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lk-3); }.lkb-list-item {
  background: #fff;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  padding: var(--lk-5);
  margin: 0;
  transition: border-color var(--lk-fast) var(--lk-ease), box-shadow var(--lk-fast) var(--lk-ease);
}.lkb-list-item:hover { border-color: var(--lk-blue); box-shadow: var(--lk-sh); }.lkb-list-item a { color: var(--lk-ink); font-weight: 650; text-decoration: none; }.lkb-list-item a:hover { color: var(--lk-blue-700); }.lkb-list-item__excerpt { font-size: var(--lk-t-sm); color: var(--lk-ink-600); margin-top: var(--lk-2); }.lkb-list-item__meta { font-size: var(--lk-t-xs); color: var(--lk-ink-500); margin-top: var(--lk-3); }

/* --- Article layout --- */
.lkb-art-header { padding-block: var(--lk-10) 0; }.lkb-art-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
  padding-block: var(--lk-8) var(--lk-section-y);
}@media (max-width: 1023px) {.lkb-art-main { grid-template-columns: minmax(0, 1fr); } }.lkb-article__title { font-size: var(--lk-t-4xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }.lkb-article__meta { display: flex; flex-wrap: wrap; gap: var(--lk-4); margin-top: var(--lk-4); font-size: var(--lk-t-sm); color: var(--lk-ink-500); }.lkb-article__reading-time, .lkb-article__updated { display: inline-flex; align-items: center; gap: var(--lk-2); }

/* Article body inherits the theme's prose styles */
.lkb-article__content { max-width: var(--lk-w-prose); font-size: 1.0625rem; line-height: 1.78; color: var(--lk-ink-700); }.lkb-article__content > * + * { margin-top: 1.3em; }.lkb-article__content h2 { font-size: var(--lk-t-2xl); margin-top: 1.9em; scroll-margin-top: calc(var(--lk-header-h) + 1rem); }.lkb-article__content h3 { font-size: var(--lk-t-xl); margin-top: 1.6em; scroll-margin-top: calc(var(--lk-header-h) + 1rem); }.lkb-article__content a { color: var(--lk-blue-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lk-blue-300); }.lkb-article__content ul, .lkb-article__content ol { padding-left: 1.4em; }.lkb-article__content li::marker { color: var(--lk-blue); }.lkb-article__content img { border-radius: var(--lk-r-lg); border: 1px solid var(--lk-line); }.lkb-article__content code { background: var(--lk-surface); border: 1px solid var(--lk-line); border-radius: var(--lk-r-sm); padding: .12em .4em; }.lkb-article__content pre { background: var(--lk-navy-deep); color: #E2E8F0; padding: var(--lk-5); border-radius: var(--lk-r-lg); overflow-x: auto; }.lkb-article__content pre code { background: none; border: 0; color: inherit; }

/* --- Sidebar + TOC --- */
.lkb-sidebar { position: sticky; top: calc(var(--lk-header-h) + var(--lk-6)); display: grid; gap: var(--lk-6); }@media (max-width: 1023px) {.lkb-sidebar { position: static; } }.lkb-toc { border: 1px solid var(--lk-line); border-radius: var(--lk-r-lg); padding: var(--lk-5); background: var(--lk-surface); }.lkb-toc ol, .lkb-toc ul { list-style: none; margin: 0; padding: 0; }.lkb-toc li { margin: 0; }.lkb-toc a {
  display: block;
  padding: .4em 0 .4em var(--lk-4);
  border-left: 2px solid var(--lk-line);
  font-size: var(--lk-t-sm);
  color: var(--lk-ink-600);
  text-decoration: none;
}.lkb-toc a:hover { color: var(--lk-blue-700); border-left-color: var(--lk-blue-300); }.lkb-section-title {
  font-size: var(--lk-t-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lk-ink-500);
  margin-bottom: var(--lk-4);
}

/* --- Breadcrumbs --- */
.lkb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lk-2); font-size: var(--lk-t-sm); color: var(--lk-ink-500); }.lkb-crumbs__link { color: var(--lk-ink-500); text-decoration: none; }.lkb-crumbs__link:hover { color: var(--lk-blue); text-decoration: underline; }.lkb-crumbs__sep { color: var(--lk-line-strong); }.lkb-crumbs__current { color: var(--lk-ink-700); font-weight: 600; }

/* --- Feedback --- */
.lkb-feedback {
  margin-top: var(--lk-12);
  padding: var(--lk-6);
  background: var(--lk-surface);
  border-radius: var(--lk-r-lg);
  max-width: var(--lk-w-prose);
}.lkb-feedback__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lk-4); justify-content: space-between; }.lkb-feedback__q { font-weight: 650; color: var(--lk-ink); }.lkb-feedback__buttons { display: flex; gap: var(--lk-2); }.lkb-feedback__btn {
  display: inline-flex; align-items: center; gap: var(--lk-2);
  padding: .6em 1.2em;
  border: 1px solid var(--lk-line-strong);
  border-radius: var(--lk-r);
  background: #fff;
  font-weight: 650;
  font-size: var(--lk-t-sm);
  color: var(--lk-ink-800);
  transition: border-color var(--lk-fast) var(--lk-ease), background var(--lk-fast) var(--lk-ease), color var(--lk-fast) var(--lk-ease);
}.lkb-feedback__btn--yes:hover { border-color: var(--lk-green); background: var(--lk-green-bg); color: var(--lk-green-ink); }.lkb-feedback__btn--no:hover { border-color: var(--lk-red); background: var(--lk-red-bg); color: var(--lk-red-ink); }.lkb-feedback__followup { width: 100%; margin-top: var(--lk-4); }.lkb-feedback__textarea {
  width: 100%; min-height: 6rem; resize: vertical;
  padding: .75em 1em;
  border: 1px solid var(--lk-line-strong);
  border-radius: var(--lk-r);
  font-size: var(--lk-t-sm);
}.lkb-feedback__textarea:focus { outline: none; border-color: var(--lk-blue); box-shadow: 0 0 0 3px rgba(23,126,229,.18); }.lkb-feedback__send {
  margin-top: var(--lk-3);
  padding: .65em 1.4em;
  border: 0; border-radius: var(--lk-r);
  background: var(--lk-blue); color: #fff;
  font-weight: 650; font-size: var(--lk-t-sm);
}.lkb-feedback__send:hover { background: var(--lk-blue-700); }.lkb-feedback__thanks { color: var(--lk-green-ink); font-weight: 650; }

/* --- Prev / next --- */
.lkb-prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lk-4); margin-top: var(--lk-10); max-width: var(--lk-w-prose); }@media (max-width: 719px) {.lkb-prevnext { grid-template-columns: minmax(0, 1fr); } }.lkb-prevnext__link {
  display: block;
  padding: var(--lk-5);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  text-decoration: none;
}.lkb-prevnext__link:hover { border-color: var(--lk-blue); background: var(--lk-blue-50); text-decoration: none; }.lkb-prevnext__link--next { text-align: right; }.lkb-prevnext__label { display: block; font-size: var(--lk-t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lk-ink-500); margin-bottom: var(--lk-2); }.lkb-prevnext__title { font-weight: 650; color: var(--lk-ink); }.lkb-prevnext__placeholder { border: 1px dashed var(--lk-line); border-radius: var(--lk-r-lg); }

/* --- Related --- */
.lkb-related { margin-top: var(--lk-12); }.lkb-related__heading { font-size: var(--lk-t-xl); font-weight: 700; margin-bottom: var(--lk-5); }.lkb-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--lk-4); }.lkb-related__card {
  display: block;
  padding: var(--lk-5);
  background: #fff;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  text-decoration: none;
  transition: border-color var(--lk-fast) var(--lk-ease), box-shadow var(--lk-fast) var(--lk-ease);
}.lkb-related__card:hover { border-color: var(--lk-blue); box-shadow: var(--lk-sh); text-decoration: none; }.lkb-related__title { font-weight: 650; color: var(--lk-ink); }.lkb-related__excerpt { font-size: var(--lk-t-sm); color: var(--lk-ink-600); margin-top: var(--lk-2); }

/* --- Search results page --- */
.lkb-search-header { padding-block: var(--lk-10) var(--lk-6); }.lkb-search-header__title { font-size: var(--lk-t-4xl); font-weight: 800; letter-spacing: -.02em; }.lkb-search-results { display: grid; gap: var(--lk-3); }.lkb-search-result { padding: var(--lk-5); background: #fff; border: 1px solid var(--lk-line); border-radius: var(--lk-r-lg); }.lkb-search-result:hover { border-color: var(--lk-blue); }.lkb-search-result__title { font-weight: 650; }.lkb-search-result__title a { color: var(--lk-ink); text-decoration: none; }.lkb-search-result__title a:hover { color: var(--lk-blue-700); }.lkb-search-result__excerpt { font-size: var(--lk-t-sm); color: var(--lk-ink-600); margin-top: var(--lk-2); }

/* --- Misc --- */
.lkb-chip {
  display: inline-flex; align-items: center; gap: var(--lk-2);
  font-size: var(--lk-t-xs); font-weight: 700;
  padding: .3em .75em; border-radius: var(--lk-r-full);
  background: var(--lk-blue-100); color: var(--lk-blue-700);
}.lkb-empty { padding: var(--lk-10); text-align: center; color: var(--lk-ink-500); background: var(--lk-surface); border-radius: var(--lk-r-lg); }.lkb-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lk-2); margin-top: var(--lk-10); }.lkb-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding-inline: .75em;
  border: 1px solid var(--lk-line); border-radius: var(--lk-r);
  background: #fff; color: var(--lk-ink-700); font-weight: 600; font-size: var(--lk-t-sm);
  text-decoration: none;
}.lkb-pagination .page-numbers.current { background: var(--lk-navy); border-color: var(--lk-navy); color: #fff; }.lkb-page--home, .lkb-page--search { padding-bottom: var(--lk-section-y); }

/* Theme-side KB helpers (used by theme templates, not the plugin) */
.lk-kb-search { max-width: 40rem; margin-inline: auto; position: relative; }.lk-kb-search input {
  width: 100%;
  padding: 1em 1em 1em 3rem;
  font-size: var(--lk-t-lg);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  background: #fff;
  box-shadow: var(--lk-sh-md);
}.lk-kb-search input::placeholder { color: var(--lk-ink-400); }.lk-kb-search > svg {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem;
  color: var(--lk-ink-400);
  pointer-events: none;
}.lk-input {
  width: 100%;
  padding: .75em 1em;
  font-size: var(--lk-t-base);
  color: var(--lk-ink);
  background: #fff;
  border: 1px solid var(--lk-line-strong);
  border-radius: var(--lk-r);
  transition: border-color var(--lk-fast) var(--lk-ease), box-shadow var(--lk-fast) var(--lk-ease);
}.lk-input:focus {
  outline: none;
  border-color: var(--lk-blue);
  box-shadow: 0 0 0 3px rgba(23, 126, 229, .18);
}.lk-gauge { height: 10px; border-radius: var(--lk-r-full); background: var(--lk-line); overflow: hidden; }.lk-gauge__fill { height: 100%; border-radius: inherit; background: var(--lk-blue); transition: width var(--lk-slow) var(--lk-ease); }.lk-gauge__fill--ok { background: var(--lk-green); }.lk-gauge__fill--warn { background: var(--lk-amber); }.lk-gauge__fill--bad { background: var(--lk-red); }
@keyframes lk-spin { to { transform: rotate(360deg); } }

/* Comments (comments.php). WordPress owns the markup; these only fit it to the type scale. */
.lk-comments { max-width: 42rem; }.lk-comments__title { margin-bottom: var(--lk-6); }.lk-comments__list, .lk-comments__list .children { list-style: none; margin: 0; padding: 0; }.lk-comments__list .children { margin-left: var(--lk-8); }.lk-comments__list .comment-body { padding: var(--lk-5) 0; border-top: 1px solid var(--lk-line); }.lk-comments__list .comment-author { display: flex; align-items: center; gap: var(--lk-3); font-weight: 600; }.lk-comments__list .avatar { border-radius: 999px; }.lk-comments__list .comment-metadata { font-size: var(--lk-t-sm); color: var(--lk-ink-500); }.lk-comments__list .comment-content { margin-top: var(--lk-3); }.lk-comments__list .reply { font-size: var(--lk-t-sm); margin-top: var(--lk-2); }.lk-comments__form label { display: block; font-weight: 600; margin-bottom: var(--lk-1); }.lk-comments__form textarea, .lk-comments__form input:not([type="checkbox"]):not([type="submit"]) { width: 100%; padding: var(--lk-3); border: 1px solid var(--lk-line); border-radius: var(--lk-r-sm, 6px); font: inherit; }.lk-comments__form p { margin: 0 0 var(--lk-4); }.lk-comments__closed { color: var(--lk-ink-500); }

/* ==========================================================================
   16  CTA BANDS + FOOTER
   ========================================================================== */

.lk-cta {
  background: var(--lk-navy);
  color: rgba(255,255,255,.8);
  border-radius: var(--lk-r-xl);
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}.lk-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(34rem 18rem at 18% 0%, rgba(23,126,229,.35), transparent 62%),
    radial-gradient(30rem 16rem at 86% 100%, rgba(99,102,241,.28), transparent 60%);
}.lk-cta h2, .lk-cta h3 { color: #fff; }.lk-cta .lk-lead { color: rgba(255,255,255,.78); margin-inline: auto; }.lk-cta .lk-cluster { justify-content: center; }

/* Related pages block — rendered from one PHP data source, which is what
   keeps every page internally linked and stops pages going orphaned. */
.lk-related__title {
  font-size: var(--lk-t-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lk-ink-500);
  margin-bottom: var(--lk-5);
}.lk-footer { background: var(--lk-surface); border-top: 1px solid var(--lk-line); padding-block: var(--lk-16) var(--lk-8); }.lk-footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: var(--lk-8) var(--lk-6); }@media (max-width: 1023px) {.lk-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.lk-footer__brand { grid-column: 1 / -1; }
}@media (max-width: 599px) {.lk-footer__grid { grid-template-columns: minmax(0, 1fr); } }.lk-footer__logo img { height: 34px; width: auto; }.lk-footer__title { font-size: var(--lk-t-sm); font-weight: 700; color: var(--lk-ink); margin: 0 0 var(--lk-4); }.lk-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lk-3); }.lk-footer__list li { margin: 0; }.lk-footer__list a { font-size: var(--lk-t-sm); color: var(--lk-ink-600); text-decoration: none; }.lk-footer__list a:hover { color: var(--lk-blue); text-decoration: underline; }.lk-footer__bottom {
  margin-top: var(--lk-12);
  padding-top: var(--lk-6);
  border-top: 1px solid var(--lk-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--lk-t-sm);
  color: var(--lk-ink-500);
}.lk-social { display: flex; gap: var(--lk-2); list-style: none; margin: 0; padding: 0; }.lk-social li { margin: 0; }.lk-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--lk-line-strong);
  border-radius: 50%;
  color: var(--lk-ink-600);
  transition: background var(--lk-fast) var(--lk-ease), color var(--lk-fast) var(--lk-ease), border-color var(--lk-fast) var(--lk-ease);
}.lk-social a:hover { background: var(--lk-blue); border-color: var(--lk-blue); color: #fff; }.lk-social svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   17  UTILITIES  (deliberately small — reach for a component first)
   ========================================================================== */

.lk-block { display: block; }.lk-measure { max-width: 34ch; }.lk-measure-wide { max-width: 34rem; }.lk-cluster--nowrap { flex-wrap: nowrap; }.lk-footer__list--inline { grid-auto-flow: column; gap: var(--lk-5); }.lk-kb-search--left { margin-inline: 0; }.lk-center { text-align: center; }.lk-balance { text-wrap: balance; }.lk-pretty { text-wrap: pretty; }.lk-mt-0 { margin-top: 0 !important; }.lk-mt-2 { margin-top: var(--lk-2); }.lk-mt-3 { margin-top: var(--lk-3); }.lk-mt-4 { margin-top: var(--lk-4); }.lk-mt-6 { margin-top: var(--lk-6); }.lk-mt-8 { margin-top: var(--lk-8); }.lk-mt-10 { margin-top: var(--lk-10); }.lk-mt-12 { margin-top: var(--lk-12); }.lk-mb-0 { margin-bottom: 0 !important; }.lk-mb-2 { margin-bottom: var(--lk-2); }.lk-mb-4 { margin-bottom: var(--lk-4); }.lk-mx-auto { margin-inline: auto; }@media (max-width: 719px) {.lk-hide-sm { display: none !important; } }@media (min-width: 720px) {.lk-only-sm { display: none !important; } }@media (max-width: 1023px) {.lk-hide-md { display: none !important; } }

/* ==========================================================================
   18  MOTION + PRINT + FORCED COLORS
   ========================================================================== */

/* Entrance animation, CSS-only. Replaces the AOS library entirely. Elements
   are visible by default and only animate where scroll-driven animations are
   supported, so nothing is ever hidden from a crawler or an older browser. */
@supports (animation-timeline: view()) {@media (prefers-reduced-motion: no-preference) {.lk-reveal {
      animation: lk-rise both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}
@keyframes lk-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}@media (prefers-reduced-motion: reduce) {*, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }html { scroll-behavior: auto; }
}@media print {.lk-header, .lk-footer, .lk-cta, .lk-aside, .lk-progress, .lk-share, .lk-promo { display: none !important; }body { color: #000; font-size: 12pt; }.lk-prose a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }.lk-article-layout { grid-template-columns: 1fr; }
}@media (forced-colors: active) {.lk-btn, .lk-card, .lk-plan, .lk-mock { border: 1px solid CanvasText; }.lk-hero::before, .lk-cta::before { display: none; }
}

/* ==========================================================================
   19  PRODUCT UI — built on the plugin's own design system
   --------------------------------------------------------------------------
   These are recreations of real Linkilo admin screens, so they follow the
   PLUGIN's design language, not this website's.

   Source: linkilo/css/linkilo-cardkit.css, which describes itself as "one
   source of truth for the modern Linkilo report pages". Its tokens are
   reproduced verbatim below. The plugin scopes everything under `.lkit-wrap`;
   so does this.

   The differences from the marketing site are deliberate and load-bearing:
     - NO shadows (the kit sets --lkit-shadow: none)
     - 6px radii, not 14px
     - primary buttons are SOFT TINTED (#f0f9ff on #bae6fd), not solid blue
     - table headers are 10px uppercase on #f9fafb
     - system font stack, not Inter
   Change these only when the plugin changes.
   ========================================================================== */

.lkit-wrap {
  /* verbatim from linkilo-cardkit.css */
  --lkit-action:       #0369a1;
  --lkit-action-bg:    #f0f9ff;
  --lkit-action-bg-h:  #e0f2fe;
  --lkit-action-bd:    #bae6fd;
  --lkit-primary:      #0369a1;
  --lkit-primary-soft: #f0f9ff;
  --lkit-text:         #1f2937;
  /* The kit ships #6b7280. That clears AA on white but only reaches 4.24:1
     on the #f0f0f1 admin screen these recreations sit on, and this is a
     public marketing page, so it goes one step darker. Every other token
     is verbatim. */
  --lkit-muted:        #5f6673;
  --lkit-border:       #e5e7eb;
  --lkit-bg-soft:      #f9fafb;
  --lkit-radius:       6px;
  --lkit-green:        #059669;
  --lkit-amber:        #d97706;
  --lkit-red:          #dc2626;

  color: var(--lkit-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;

  /* These recreations get dropped onto every kind of section background,
     including the navy hero. They must carry the admin screen with them, or
     the plugin's own dark-on-light palette lands on a dark panel and becomes
     unreadable. Painting the WordPress screen gray is also the honest thing:
     this IS a screen, not a styled card. */
  background: #f0f0f1;
  border: 1px solid var(--lk-line, #e5e7eb);
  border-radius: var(--lk-r-lg, 14px);
  padding: 18px 20px;
  overflow-x: auto;
}.lkit-wrap * { box-sizing: border-box; }

/* ---- header ---- */
.lkit-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 0 0 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--lkit-border);
}.lkit-header__main { display: flex; align-items: center; gap: 14px; }.lkit-header__icon {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lkit-action-bg);
  color: var(--lkit-action);
  border: 1px solid var(--lkit-action-bd);
  border-radius: var(--lkit-radius);
}.lkit-header__icon svg { width: 20px; height: 20px; }.lkit-header h3, .lkit-header__title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--lkit-text); }.lkit-header__sub { margin: 4px 0 0; font-size: 13px; color: var(--lkit-muted); max-width: 640px; }.lkit-header__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- cards ---- */
.lkit-card {
  background: #fff;
  border: 1px solid var(--lkit-border);
  border-radius: var(--lkit-radius);
  box-shadow: none;
  padding: 20px 22px;
  margin: 0 0 18px;
}.lkit-card--flush { padding: 0; overflow: hidden; }.lkit-card__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--lkit-text); display: flex; align-items: center; gap: 8px; }.lkit-card__title svg { width: 18px; height: 18px; color: var(--lkit-primary); }.lkit-card__head { margin-bottom: 14px; }

/* ---- stat grid ---- */
.lkit-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }.lkit-stat { background: #fff; border: 1px solid var(--lkit-border); border-radius: var(--lkit-radius); padding: 12px 14px; }.lkit-stat__num { font-size: 22px; font-weight: 700; color: var(--lkit-text); line-height: 1.1; }.lkit-stat__lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--lkit-muted); margin-top: 4px; }.lkit-stat--primary .lkit-stat__num { color: var(--lkit-primary); }.lkit-stat--good .lkit-stat__num { color: var(--lkit-green); }.lkit-stat--warn .lkit-stat__num { color: var(--lkit-amber); }

/* ---- buttons: soft tinted, exactly as the kit restyles WordPress's ---- */
.lkit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--lkit-radius);
  border: 1px solid #d1d5db;
  color: var(--lkit-text);
  background: #fff;
  box-shadow: none;
  padding: 6px 14px;
  min-height: 32px;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}.lkit-btn--primary {
  background: var(--lkit-action-bg);
  border-color: var(--lkit-action-bd);
  color: var(--lkit-action);
  font-weight: 600;
}.lkit-btn--sm { padding: 3px 10px; min-height: 26px; font-size: 12px; }

/* ---- decision banner: the kit's explain-as-you-go callout ---- */
.lkit-decision {
  background: #f0f9ff; border: 1px solid #e0f2fe; border-radius: 6px;
  padding: 12px 14px; margin: 0 0 16px;
  display: flex; gap: 12px; align-items: flex-start;
}.lkit-decision__icon { font-size: 20px; line-height: 1; flex-shrink: 0; opacity: .8; }.lkit-decision strong { color: #0c4a6e; font-size: 13px; }.lkit-decision p { font-size: 12px; color: #0c4a6e; margin: 4px 0 0; line-height: 1.55; }

/* ---- tables ---- */
.lkit-table { width: 100%; background: #fff; border-collapse: collapse; border: 0; }.lkit-table thead th {
  background: var(--lkit-bg-soft);
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: #374151;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lkit-border);
}.lkit-table td { padding: 12px 14px; border-bottom: 1px solid var(--lkit-border); vertical-align: top; font-size: 13px; }.lkit-table tbody tr:last-child td { border-bottom: 0; }.lkit-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #374151; word-break: break-word; }.lkit-muted { color: var(--lkit-muted); }

/* ---- pills ---- */
.lkit-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}.lkit-pill--good { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }.lkit-pill--warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }.lkit-pill--bad { background: #fef2f2; color: #991b1b; border-color: #fecaca; }.lkit-pill--info { background: var(--lkit-action-bg); color: #0c4a6e; border-color: var(--lkit-action-bd); }.lkit-pill--flat { background: var(--lkit-bg-soft); color: #374151; border-color: var(--lkit-border); }

/* ---- score bubble (post editor metabox) ---- */
.lkit-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 24px; padding-inline: 6px;
  border-radius: 999px; font-weight: 700; font-size: 12px; cursor: help;
}.lkit-score--high { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }.lkit-score--medium { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }.lkit-score--low { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }.lkit-brain { margin-left: 4px; font-size: 13px; cursor: help; }

/* ---- suggestion rows ---- */
.lkit-sugg { border: 1px solid var(--lkit-border); border-radius: var(--lkit-radius); padding: 14px; background: #fff; }.lkit-sugg + .lkit-sugg { margin-top: 10px; }.lkit-sugg__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.lkit-sugg__post { font-weight: 600; font-size: 13px; color: var(--lkit-text); }.lkit-sugg__sentence { margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: #374151; }.lkit-sugg__sentence a { color: var(--lkit-action); text-decoration: underline; }.lkit-sugg__edit { color: var(--lkit-action); font-size: 12px; }.lkit-sugg__meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #f3f4f6;
  font-size: 11px; color: var(--lkit-muted);
}

/* ---- tabs ---- */
.lkit-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--lkit-border); margin-bottom: 16px; }.lkit-tabs span { padding: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--lkit-muted); border-bottom: 2px solid transparent; }.lkit-tabs .is-active { color: var(--lkit-action); border-bottom-color: var(--lkit-action); font-weight: 600; }.lkit-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ==========================================================================
   21  THE FRICTION BLOCK
   --------------------------------------------------------------------------
   The section under every feature hero. Four answers: what the job is, what it
   gives back, how soon, and who does the work.

   Deliberately the plainest section on the page. It is where a visitor decides
   whether to keep reading, and a section that looks like a sales graphic is a
   section that gets scrolled past. No gradients, no cards-within-cards, one
   rule down the middle.
   ========================================================================== */

.lk-friction__grid {
  display: grid;
  gap: var(--lk-8);
  grid-template-columns: 1fr;
  align-items: start;
}.lk-friction__lead {
  margin: var(--lk-4) 0 0;
  font-size: var(--lk-t-lg);
  line-height: 1.6;
  color: var(--lk-ink);
}

/* Homepage: the consequence paragraph under "The problem" head. Same measure as the head, pulled up into its rhythm. */
.lk-problem__consequence { max-width: 46rem; margin: calc(-1 * clamp(1.5rem, 1rem + 1.5vw, 2.5rem)) auto clamp(2.5rem, 2rem + 2vw, 4rem); text-align: center; }.lk-friction__steps-label { margin-top: var(--lk-6); }.lk-friction__steps {
  list-style: none;
  counter-reset: lk-step;
  margin: var(--lk-3) 0 0;
  padding: 0;
  max-width: 24rem;
}.lk-friction__steps li {
  counter-increment: lk-step;
  position: relative;
  padding-left: 2rem;
  margin-top: var(--lk-2);
  font-size: var(--lk-t-sm);
  line-height: 1.6;
  color: var(--lk-ink-700);
}.lk-friction__steps li::before {
  content: counter(lk-step);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  border: 1px solid var(--lk-line);
  font-size: var(--lk-t-xs);
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  color: var(--lk-ink-600);
  background: var(--lk-white);
  font-variant-numeric: tabular-nums;
}.lk-friction__does {
  margin: var(--lk-4) 0 0;
  font-size: var(--lk-t-sm);
  font-weight: 600;
  color: var(--lk-ink-800);
}.lk-friction__stakes-label { margin-top: var(--lk-6); }.lk-friction__stakes {
  max-width: 24rem; /* same rendered width as the 34ch lead above it, which is set at a larger size */
  margin: var(--lk-3) 0 0;
  font-size: var(--lk-t-base);
  line-height: 1.65;
  color: var(--lk-ink-700);
}.lk-friction__note {
  margin: var(--lk-5) 0 0;
  padding-top: var(--lk-4);
  border-top: 1px solid var(--lk-line);
  font-size: var(--lk-t-sm);
  font-weight: 600;
  color: var(--lk-ink-700);
}.lk-friction__caveat {
  margin: var(--lk-8) 0 0;
  padding-top: var(--lk-5);
  border-top: 1px solid var(--lk-line);
  font-size: var(--lk-t-xs);
  color: var(--lk-ink-500);
  line-height: 1.65;
  max-width: 70ch;
}

/* --- The four answers --------------------------------------------------- */

.lk-friction__gains { display: grid; gap: var(--lk-5); }.lk-gain { display: flex; gap: var(--lk-4); align-items: flex-start; }.lk-gain__icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--lk-r-sm);
  background: var(--lk-surface);
  color: var(--lk-ink-700);
}.lk-gain__icon svg { width: 1.1rem; height: 1.1rem; }.lk-gain__icon--time { background: var(--lk-blue-bg);  color: var(--lk-blue-ink); }.lk-gain__icon--after { background: var(--lk-green-bg); color: var(--lk-green-ink); }.lk-gain__icon--speed { background: var(--lk-amber-bg); color: var(--lk-amber-ink); }

/* Who does the work — the chip color carries the answer. */
.lk-gain__icon--deterministic { background: var(--lk-surface);    color: var(--lk-ink-700); }.lk-gain__icon--ai { background: var(--lk-violet-bg);  color: var(--lk-violet-ink); }.lk-gain__icon--both { background: var(--lk-blue-bg);    color: var(--lk-blue-ink); }.lk-gain__label {
  margin: 0;
  font-size: var(--lk-t-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lk-ink-500);
}.lk-gain__value {
  margin: var(--lk-1) 0 0;
  font-size: var(--lk-t-base);
  line-height: 1.6;
  color: var(--lk-ink);
}.lk-gain__note {
  margin: var(--lk-2) 0 0;
  font-size: var(--lk-t-sm);
  line-height: 1.6;
  color: var(--lk-ink-700);
}

/* The "who does the work" answer is the one people scroll back to. */
.lk-gain--who {
  padding-top: var(--lk-5);
  border-top: 1px solid var(--lk-line);
}@media (min-width: 60rem) {.lk-friction__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--lk-10); }.lk-friction__job {
    padding-right: var(--lk-8);
    border-right: 1px solid var(--lk-line);
  }
  /* The problem column is the long one now (the by-hand steps live there), so
     the answer column is the one that stays in view while it scrolls. */
  .lk-friction__gains { position: sticky; top: 6rem; }
}

/* ==========================================================================
   20  PRODUCT DEMO
   --------------------------------------------------------------------------
   A recreation of the Linkilo admin, not an illustration of it.

   Every value below is lifted from the plugin's own stylesheets so the demo
   reads as the product rather than as this website wearing a screenshot:

     templates/url_records_v2.php      .lku-*   Summary
     core/Linkilo/Decision.php         .ldp-*   Link Priorities
     templates/broken_link_table_v2.php .lkbl-* Broken Links
     css/linkilo-cardkit.css           .lkit-*  the shared report kit
     core/Linkilo/MenuGroups.php                the grouped admin sidebar

   Consequences worth stating, because they are the opposite of the marketing
   site's design language and must not be "improved":
     - no shadows, anywhere
     - 6px radii, not 14px
     - primary buttons are soft-tinted (#f0f9ff on #bae6fd), never solid blue
     - table headers are 10px uppercase on #f9fafb
     - the system font stack, not Inter
     - WordPress grays (#1d2327 menu, #f0f0f1 screen), not brand navy
   ========================================================================== */

.lkd {
  --lkd-line: #e5e7eb;
  --lkd-line-soft: #f3f4f6;
  --lkd-ink: #1f2937;
  /* The plugin's #6b7280 clears AA on white but only reaches 4.24:1 on the
     #f0f0f1 admin screen behind it. One step darker keeps the look and
     clears AA in both places. */
  --lkd-ink-soft: #5f6673;
  --lkd-blue: #0369a1;

  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  overflow: hidden;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: var(--lkd-ink);
}

/* --- Browser frame ----------------------------------------------------- */

.lkd__chrome {
  display: flex; align-items: center; gap: var(--lk-3);
  padding: 10px 14px;
  background: var(--lk-ink-050);
  border-bottom: 1px solid var(--lk-line);
}.lkd__dots { display: flex; gap: 6px; flex: none; }.lkd__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d6d9dd; }.lkd__addr {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--lkd-ink-soft);
  background: #fff; border: 1px solid var(--lk-line); border-radius: 999px;
  padding: 4px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- WordPress admin bar ------------------------------------------------ */

.lkd__adminbar {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 12px;
  background: #1d2327; color: #f0f0f1; font-size: 12px;
}.lkd__adminbar-sp { flex: 1; }.lkd__wp { display: inline-flex; }.lkd__wp svg { width: 16px; height: 16px; }

/* --- Layout ------------------------------------------------------------- */

.lkd__body { display: flex; align-items: stretch; min-height: 34rem; }

/* --- Content Coverage Treemap -------------------------------------------
   Geometry is inline, set by lk_demo_treemap() from the squarified layout,
   exactly as D3 sets it in the plugin. Only the chrome lives here. The label
   itself is styled by the plugin's own .treemap-label, lifted into
   demo-plugin.css, so the type in the blocks is the product's, not ours. */

.lkd-treemap {
  position: relative;
  width: 100%;
  height: 420px;
  margin: 0 0 10px;
}.lkd-treemap__cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  border-radius: 4px;
  overflow: hidden;
  /* D3 insets nothing, so the blocks tile edge to edge; the border does the
     separating. box-sizing keeps the arithmetic honest at the seams. */
  box-sizing: border-box;
}

/* Funnel stage, as a dot in the corner. */
.lkd-treemap__dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 99px;
  border: 1px solid #fff;
}.lkd-treemap__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--lkd-ink-soft, #5b6270);
  background: #fff;
  border: 1px solid var(--lkd-line, #e5e7eb);
  border-radius: 6px;
}.lkd-treemap__legend span { display: inline-flex; align-items: center; gap: 5px; }.lkd-treemap__sep { margin-left: 6px; }.lkd-treemap__key {
  width: 12px; height: 12px; border-radius: 99px; display: inline-block;
}.lkd-treemap__key--ring { border-radius: 2px; border: 2px solid; background: transparent; }@media (max-width: 782px) {.lkd-treemap { height: 320px; }
}

/* --- One screen on its own, embedded in a feature page -------------------
   The demo page frames 25 screens behind a sidebar. A feature page frames the
   one screen that feature is, with no menu -- .lkd__screen is flex:1 so it
   simply takes the whole width. Slightly shorter than the demo because a
   single screen has no tall menu to match. */

.lkd--solo .lkd__body { min-height: 0; }.lkd--solo .lkd__screen { padding: 16px 18px 22px; }

/* The plugin's screens are wp-admin layouts: several of them are grids with a
   fixed sidebar track, so below roughly this width the main column collapses
   and table columns start overlapping. .lkd__screen already scrolls on x, but
   only if the content refuses to shrink -- hence the floor. */
.lkd--solo .lkd__panel { min-width: 1040px; }@media (max-width: 1100px) {
  /* Under the floor the frame scrolls sideways rather than rendering a broken
     admin screen. Tell the reader that is what is happening. */
  .lkd--solo .lkd__screen { scrollbar-width: thin; }
}.lkd__caption {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--lk-ink-soft, #5b6270);
  text-align: center;
}

/* --- A transcript, for the features that are a conversation --------------
   MCP is not a screen: it is an exchange. Showing a dashboard would
   misrepresent it, so the proof is the conversation, tool calls included --
   those are what show the answer came from real data. */

.lk-convo {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem;
  background: var(--lk-surface-2, #f8fafc);
  border: 1px solid var(--lk-line, #e5e7eb);
  border-radius: 14px;
}.lk-convo__turn { display: flex; }.lk-convo__turn--you { justify-content: flex-end; }.lk-convo__turn--ai { justify-content: flex-start; }.lk-convo__bubble {
  max-width: min(38rem, 88%);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}.lk-convo__turn--you .lk-convo__bubble {
  background: var(--lk-blue, #177EE5);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}.lk-convo__turn--ai .lk-convo__bubble {
  background: #fff;
  color: var(--lk-ink, #1f2937);
  border: 1px solid var(--lk-line, #e5e7eb);
  border-radius: 16px 16px 16px 4px;
}.lk-convo__bubble > :first-child { margin-top: 0; }.lk-convo__bubble > :last-child { margin-bottom: 0; }.lk-convo__bubble p { margin: 0 0 0.5rem; }.lk-convo__bubble ol, .lk-convo__bubble ul { margin: 0.375rem 0 0.5rem; padding-left: 1.25rem; }.lk-convo__bubble li { margin: 0.1875rem 0; }

/* The tool-call line. Monospace and quiet: it is evidence, not content. */
.lk-convo__tools {
  margin: 0 0 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  color: var(--lk-ink-soft, #5b6270);
  border-bottom: 1px dashed var(--lk-line, #e5e7eb);
  padding-bottom: 0.375rem;
}@media (max-width: 640px) {.lk-convo { padding: 0.875rem; }.lk-convo__bubble { max-width: 95%; }
}

/* --- The grouped Linkilo sidebar ---------------------------------------- */

.lkd__menu {
  flex: none; width: 172px;
  background: #1d2327; color: #f0f0f1;
  padding-bottom: 14px;
}.lkd__menu-top {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 11px 12px;
  font-size: 13px; font-weight: 600; color: #fff;
  background: #2c3338;
}.lkd__menu-top svg { width: 16px; height: 16px; }

/* Group headers reproduce Linkilo_MenuGroups::styles() exactly. */
.lkd__menu-group {
  display: block;
  font-size: 10px; font-weight: 700; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .06em;
  color: #a7aaad;
  padding: 12px 12px 5px; margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}.lkd__menu-item {
  display: block; width: 100%;
  padding: 7px 12px;
  border: 0; background: none;
  font: inherit; font-size: 13px; line-height: 1.4;
  color: #f0f0f1; text-align: left; cursor: pointer;
}button.lkd__menu-item:hover, button.lkd__menu-item:focus-visible { background: #2c3338; color: #72aee6; }.lkd__menu-item.is-current { background: #3858e9; color: #fff; font-weight: 600; }.lkd__menu-item.is-inert { color: #b4b9be; cursor: default; }

/* --- Screen ------------------------------------------------------------- */

.lkd__screen {
  flex: 1; min-width: 0;
  /* The plugin's width breakpoints are rewritten as container queries on this
     box (theme-preview/gen_demo_css.py::containerize), so its responsive CSS
     fires at the content width it was written for. */
  container-type: inline-size;
  container-name: lkd-screen;
  background: #f0f0f1;
  padding: 18px 20px 26px;
  overflow-x: auto;
  /* The containing block for anything the plugin positions absolutely. Several
     recreated screens carry an overlay -- a modal, a toast -- that the plugin
     lays out at top:0/left:0/100%/100%. With no positioned ancestor those
     resolve against the PAGE, not the screen: a full-document transparent
     sheet at z-index 50 that swallows every click on the marketing page around
     it. Keep this. */
  position: relative;
}.lkd__panel[hidden] { display: none; }.lkd-actions { display: inline-flex; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }.lkd-bar { display: block; flex: 1; min-width: 46px; height: 6px; background: var(--lkd-line); border-radius: 3px; overflow: hidden; }.lkd-bar i { display: block; height: 100%; border-radius: 3px; }.lkd-bar--high i { background: #dc2626; }.lkd-bar--med i { background: #d97706; }.lkd-bar--low i { background: #2563eb; }.lkd-tabs { display: flex; gap: 18px; margin: 0 0 14px; border-bottom: 1px solid var(--lkd-line); }.lkd-tabs span {
  padding: 8px 2px; font-size: 13px; color: var(--lkd-ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}.lkd-tabs span.is-active { color: var(--lkd-blue); border-bottom-color: var(--lkd-blue); font-weight: 600; }.lkd-note {
  margin-top: 14px; padding: 11px 13px;
  background: #fff; border: 1px solid var(--lkd-line); border-radius: 6px;
  font-size: 12px; color: #4b5563; line-height: 1.6;
}.lkd-note b { color: var(--lkd-ink); }

/* --- Topic clusters ------------------------------------------------------ */

.lkd-clusters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }.lkd-cluster { background: #fff; border: 1px solid var(--lkd-line); border-radius: 6px; padding: 14px; }.lkd-cluster__name { margin: 0; font-size: 14px; font-weight: 600; color: var(--lkd-ink); }.lkd-cluster__pillar { margin: 6px 0 0; font-size: 12px; color: #4b5563; line-height: 1.5; }.lkd-cluster__pillar span {
  display: inline-block; margin-right: 5px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--lkd-blue); background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: 3px; padding: 1px 5px; vertical-align: middle;
}.lkd-cluster__meta { margin: 8px 0 8px; font-size: 11px; color: var(--lkd-ink-soft); }.lkd-cluster__meta b { color: var(--lkd-ink); }

/* --- The post editor ----------------------------------------------------- */

.lkd-editor {
  background: #fff; border: 1px solid var(--lkd-line); border-radius: 6px;
  padding: 18px 20px; margin-bottom: 14px;
}.lkd-editor__title { margin: 0; font-size: 22px; font-weight: 700; color: #1d2327; }.lkd-editor__body { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #4b5563; max-width: 62ch; }

/* The cardkit recreations sit on the same gray screen, so drop their own
   outer margin when they are nested inside a demo panel. */
.lkd__panel .lkit-wrap { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }

/* Tab strips inside a screen. */
.lkd-tabs { display: flex; gap: 18px; margin: 0 0 16px; border-bottom: 1px solid var(--lkd-line); flex-wrap: wrap; }.lkd-tab {
  padding: 8px 2px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: 13px; color: var(--lkd-ink-soft); cursor: pointer;
}.lkd-tab:hover { color: var(--lkd-blue); }.lkd-tab.is-active { color: var(--lkd-blue); border-bottom-color: var(--lkd-blue); font-weight: 600; }.lkd-tabpanel[hidden] { display: none; }

/* Generic card, used for every chart panel. */
.lkd-card { background: #fff; border: 1px solid var(--lkd-line); border-radius: 6px; padding: 14px 16px; }.lkd-card__title { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--lkd-ink); }

/* Bar chart. */
.lkd-bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding-top: 16px; }.lkd-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }.lkd-bars__val { font-size: 10px; font-weight: 700; color: var(--lkd-ink); margin-bottom: 3px; }.lkd-bars__bar { width: 100%; max-width: 42px; border-radius: 3px 3px 0 0; background: #93c5fd; }.lkd-bars__bar--blue { background: #60a5fa; }.lkd-bars__bar--green { background: #6ee7b7; }.lkd-bars__bar--amber { background: #fcd34d; }.lkd-bars__bar--red { background: #fca5a5; }.lkd-bars__key { margin-top: 6px; font-size: 10px; color: var(--lkd-ink-soft); text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Trend line. */
.lkd-line { height: 110px; }.lkd-line svg { width: 100%; height: 100%; display: block; overflow: visible; }.lkd-line__path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }.lkd-line__area { stroke: none; }.lkd-line--blue .lkd-line__path { stroke: #2563eb; }.lkd-line--blue .lkd-line__area { fill: rgba(37, 99, 235, .10); }.lkd-line--green .lkd-line__path { stroke: #047857; }.lkd-line--green .lkd-line__area { fill: rgba(4, 120, 87, .10); }

/* Donut. */
.lkd-donut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }.lkd-donut svg { width: 108px; height: 108px; flex: none; transform: rotate(-90deg); }.lkd-donut__seg { fill: none; stroke-width: 4.4; }.lkd-donut__seg--blue { stroke: #60a5fa; }.lkd-donut__seg--green { stroke: #6ee7b7; }.lkd-donut__seg--amber { stroke: #fcd34d; }.lkd-donut__seg--red { stroke: #fca5a5; }.lkd-donut__keys { margin: 0; padding: 0; list-style: none; flex: 1; min-width: 130px; }.lkd-donut__keys li { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 12px; color: var(--lkd-ink-soft); }.lkd-donut__keys b { margin-left: auto; color: var(--lkd-ink); font-variant-numeric: tabular-nums; }.lkd-key { width: 9px; height: 9px; border-radius: 2px; flex: none; }.lkd-key--blue { background: #60a5fa; }.lkd-key--green { background: #6ee7b7; }.lkd-key--amber { background: #fcd34d; }.lkd-key--red { background: #fca5a5; }

/* Horizontal share bars. */
.lkd-shares { display: flex; flex-direction: column; gap: 9px; }.lkd-share { display: flex; align-items: center; gap: 10px; font-size: 12px; }.lkd-share__label { flex: none; width: 40%; max-width: 190px; color: var(--lkd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.lkd-share__track { flex: 1; height: 7px; background: var(--lkd-line-soft); border-radius: 4px; overflow: hidden; }.lkd-share__fill { display: block; height: 100%; border-radius: 4px; background: #60a5fa; }.lkd-share__fill--green { background: #6ee7b7; }.lkd-share__fill--amber { background: #fcd34d; }.lkd-share__fill--red { background: #fca5a5; }.lkd-share__val { flex: none; min-width: 52px; text-align: right; font-weight: 700; color: var(--lkd-ink); font-variant-numeric: tabular-nums; }

/* Toggle rows. */
.lkd-toggles { background: #fff; border: 1px solid var(--lkd-line); border-radius: 6px; }.lkd-toggles:empty { display: none; }.lkd-toggle { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--lkd-line-soft); }.lkd-toggle:last-child { border-bottom: 0; }.lkd-toggle__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--lkd-ink); }.lkd-toggle__desc { margin: 3px 0 0; font-size: 11px; color: var(--lkd-ink-soft); line-height: 1.5; }.lkd-switch {
  flex: none; width: 32px; height: 18px; margin-top: 1px;
  background: #d1d5db; border-radius: 999px; position: relative;
}.lkd-switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }.lkd-switch.is-on { background: #0369a1; }.lkd-switch.is-on i { left: auto; right: 2px; }.lkd-cluster__acts { display: flex; gap: 6px; margin: 10px 0 0; flex-wrap: wrap; }@media (max-width: 60rem) {.lkd__body { display: block; }.lkd__menu { width: auto; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; }.lkd__menu-top { width: 100%; }.lkd__menu-group { width: 100%; border-top: 0; padding: 8px 4px 2px; }.lkd__menu-item { width: auto; border-radius: 4px; }.lkd__menu-item.is-inert, .lkd__menu-group.is-inert-only { display: none; }.lkd__screen { padding: 14px; }
}

/* =========================================================================
 * Suggestion pipeline (compare pages)
 *
 * Two lanes running the same candidate set. The rendered markup is already the
 * FINAL state; theme.js adds .lk-pipe--js, and everything under that selector
 * is the rewind -- so the section is complete and readable with scripting off,
 * with a broken script, or in the moment before theme.js parses.
 * ====================================================================== */
.lk-pipe__feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lk-1);
  padding-bottom: var(--lk-6);
  text-align: center;
  position: relative;
}

/* The belt the candidates arrive on: one line down into the split. */
.lk-pipe__feed::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: var(--lk-5);
  background: linear-gradient(to bottom, var(--lk-line-strong), transparent);
}.lk-pipe__feed-n {
  font-size: var(--lk-t-4xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lk-ink);
  font-variant-numeric: tabular-nums;
}.lk-pipe__feed-label {
  font-size: var(--lk-t-sm);
  color: var(--lk-ink-500);
  max-width: 30ch;
}.lk-pipe__lanes {
  display: grid;
  gap: var(--lk-5);
  grid-template-columns: 1fr;
}@media (min-width: 860px) {.lk-pipe__lanes { grid-template-columns: 1fr 1fr; gap: var(--lk-6); }
}.lk-pipe__lane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  background: var(--lk-white);
  padding: var(--lk-5);
  box-shadow: var(--lk-sh-sm);
}.lk-pipe__lane--us {
  border-color: var(--lk-blue-100);
  box-shadow: var(--lk-sh-sm), 0 0 0 3px var(--lk-blue-50);
}.lk-pipe__lane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lk-3);
  padding-bottom: var(--lk-4);
  margin-bottom: var(--lk-4);
  border-bottom: 1px solid var(--lk-line);
}.lk-pipe__lane-name {
  font-size: var(--lk-t-lg);
  font-weight: 700;
  color: var(--lk-ink);
}.lk-pipe__lane--us .lk-pipe__lane-name { color: var(--lk-blue-ink); }.lk-pipe__lane-tag {
  font-size: var(--lk-t-xs);
  font-weight: 600;
  color: var(--lk-ink-500);
  background: var(--lk-surface);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-full);
  padding: 2px var(--lk-2);
  white-space: nowrap;
}.lk-pipe__stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lk-4);
  flex: 1 1 auto;
}.lk-pipe__stage { margin: 0; }.lk-pipe__stage-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lk-3);
  margin-bottom: var(--lk-2);
}.lk-pipe__stage-name {
  font-size: var(--lk-t-sm);
  font-weight: 600;
  color: var(--lk-ink-800);
}.lk-pipe__stage-n {
  font-size: var(--lk-t-base);
  font-weight: 700;
  color: var(--lk-ink);
  font-variant-numeric: tabular-nums;
}.lk-pipe__track {
  height: 10px;
  border-radius: var(--lk-r-full);
  background: var(--lk-surface);
  border: 1px solid var(--lk-line);
  overflow: hidden;
}.lk-pipe__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(var(--lk-s, 1));
  background: var(--lk-ink-400);
}.lk-pipe__lane--us .lk-pipe__fill { background: var(--lk-brand-gradient); }.lk-pipe__stage-note {
  margin: var(--lk-2) 0 0;
  font-size: var(--lk-t-xs);
  line-height: 1.55;
  color: var(--lk-ink-500);
}.lk-pipe__drop {
  display: inline-block;
  margin-right: var(--lk-2);
  padding: 1px var(--lk-2);
  border-radius: var(--lk-r-full);
  background: var(--lk-red-bg);
  color: var(--lk-red-ink);
  font-weight: 700;
  white-space: nowrap;
}

/* What this lane never checks. Only the "them" lane carries one. */
.lk-pipe__missing {
  list-style: none;
  margin: var(--lk-5) 0 0;
  padding: var(--lk-4);
  border-radius: var(--lk-r);
  background: var(--lk-surface);
  display: flex;
  flex-direction: column;
  gap: var(--lk-2);
  font-size: var(--lk-t-xs);
  color: var(--lk-ink-600);
}.lk-pipe__missing li {
  position: relative;
  padding-left: var(--lk-5);
}.lk-pipe__missing li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: -1px;
  font-size: var(--lk-t-base);
  line-height: 1;
  font-weight: 700;
  color: var(--lk-ink-400);
}.lk-pipe__out {
  display: flex;
  align-items: center;
  gap: var(--lk-3);
  margin-top: var(--lk-5);
  padding-top: var(--lk-4);
  border-top: 1px dashed var(--lk-line-strong);
}.lk-pipe__out-n {
  font-size: var(--lk-t-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--lk-ink-500);
  font-variant-numeric: tabular-nums;
}.lk-pipe__lane--us .lk-pipe__out-n { color: var(--lk-blue-ink); }.lk-pipe__out-label {
  font-size: var(--lk-t-sm);
  line-height: 1.4;
  color: var(--lk-ink-600);
}.lk-pipe__foot {
  margin: var(--lk-8) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: var(--lk-t-sm);
  color: var(--lk-ink-500);
}

/* --- The rewind, applied only once theme.js is driving -------------------
 *
 * Durations are literals and the per-stage stagger is set from theme.js, so the
 * timing has exactly one home. It was split across both files first -- a
 * --lk-pipe-step token here and a matching PIPE_STEP constant there -- which is
 * two things to keep in sync for no gain, since the counters have to be driven
 * from script anyway.
 */
.lk-pipe--js .lk-pipe__stage {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
}.lk-pipe--js .lk-pipe__fill {
  transform: scaleX(var(--lk-s0, 1));
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
}

/* Held for one frame while theme.js rewinds, so the reset does not animate
   backwards on its way to the start. */
.lk-pipe--resetting, .lk-pipe--resetting * {
  transition: none !important;
}.lk-pipe--js .lk-pipe__out { opacity: 0; transition: opacity 400ms ease; }.lk-pipe--js.is-running .lk-pipe__stage { opacity: 1; transform: none; }.lk-pipe--js.is-running .lk-pipe__fill { transform: scaleX(var(--lk-s, 1)); }.lk-pipe--js.is-running .lk-pipe__out { opacity: 1; }

/* Someone who asked for less motion gets the finished picture, immediately.
   theme.js checks the same query and never adds lk-pipe--js, but the rule is
   kept as a belt-and-braces for a preference toggled after load. */
@media (prefers-reduced-motion: reduce) {.lk-pipe--js .lk-pipe__stage, .lk-pipe--js .lk-pipe__fill, .lk-pipe--js .lk-pipe__out {
    opacity: 1;
    transform: none;
    transition: none;
  }.lk-pipe--js .lk-pipe__fill { transform: scaleX(var(--lk-s, 1)); }
}

/* =========================================================================
 * Head-to-head facts (compare pages)
 * ====================================================================== */
.lk-facts {
  display: grid;
  gap: var(--lk-4);
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}.lk-facts__card {
  display: flex;
  flex-direction: column;
  padding: var(--lk-5);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-lg);
  background: var(--lk-white);
  box-shadow: var(--lk-sh-sm);
}.lk-facts__label {
  margin: 0 0 var(--lk-4);
  font-size: var(--lk-t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lk-ink-500);
}.lk-facts__pair {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lk-3);
  flex: 1 1 auto;
}.lk-facts__side { margin: 0; }.lk-facts__side dt {
  font-size: var(--lk-t-xs);
  font-weight: 600;
  color: var(--lk-ink-400);
}.lk-facts__side dd {
  margin: 2px 0 0;
  font-size: var(--lk-t-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--lk-ink-700);
}.lk-facts__side--us dt { color: var(--lk-blue-ink); }.lk-facts__side--us dd { color: var(--lk-ink); }.lk-facts__note {
  margin: var(--lk-4) 0 0;
  padding-top: var(--lk-3);
  border-top: 1px solid var(--lk-line);
  font-size: var(--lk-t-xs);
  line-height: 1.55;
  color: var(--lk-ink-500);
}

/* --- The CTA eye-line ---------------------------------------------------- */
.lk-cta__arrow {
  display: block;
  width: 14px;
  height: 14px;
  margin: var(--lk-6) auto 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
  animation: lk-cta-bob 1.9s ease-in-out infinite;
}

@keyframes lk-cta-bob {
  0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: .3; }
  50%      { transform: translateY(3px) rotate(45deg);  opacity: .7; }
}@media (prefers-reduced-motion: reduce) {.lk-cta__arrow { animation: none; transform: rotate(45deg); opacity: .45; }
}

/* An overlay shown in the flow instead of over the screen.

   The plugin's dialogs are real overlays, and rendering one open in a
   recreation hides the screen it is acting on. On a feature page it was worse:
   with no positioned ancestor it resolved against the document and laid a
   transparent sheet over the whole marketing page, swallowing every click.
   .lkd__screen is now a containing block, and these dialogs run in the flow.

   The neutralising declarations are !important on purpose. Some of these
   dialogs carry the plugin's own id -- #linkilo-ai-modal-backdrop -- which the
   demo reproduces so the id's rules apply, and an id outranks any class
   selector we could write here. The accessibility layer at the end of
   demo-plugin.css is !important for the same reason. */
.lkd__screen [data-lk-demo-panel] .linkilo-modal.lkd-dialog-inline, .lkd__screen [data-lk-demo-panel] .linkilo-ai-modal.lkd-dialog-inline, .lkd__screen [data-lk-demo-panel] .sla-modal.lkd-dialog-inline {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  inset: auto !important;
  background: none !important;
  z-index: auto !important;
  padding: 0 !important;
  margin-top: var(--lk-2) !important;
}.lkd__screen [data-lk-demo-panel] .linkilo-modal.lkd-dialog-inline .modal-content, .lkd__screen [data-lk-demo-panel] .linkilo-ai-modal.lkd-dialog-inline .linkilo-ai-modal-content, .lkd__screen [data-lk-demo-panel] .sla-modal.lkd-dialog-inline .sla-modal-content {
  position: static !important;
  transform: none !important;
  max-width: 620px !important;
  margin: 0 !important;
}

/* The close button belongs to a dialog you can dismiss. This one is a picture
   of a step, so it would be a control that does nothing. */
.lkd__screen [data-lk-demo-panel] .lkd-dialog-inline .modal-close, .lkd__screen [data-lk-demo-panel] .lkd-dialog-inline .linkilo-ai-modal-close, .lkd__screen [data-lk-demo-panel] .lkd-dialog-inline .sla-modal-close {
  display: none;
}

/* =========================================================================
 * States a static recreation does not show
 *
 * The demo shows each screen in ONE coherent state: populated, mid-task. The
 * plugin also has states that only make sense in motion -- a tooltip waiting
 * for a hover, a toast that fades, an empty state for a site with nothing
 * wrong, a dialog waiting to be opened. Rendered all at once they contradict
 * the screen around them: "No broken links found" printed under a table of 94
 * broken links, or two redirect dialogs stacked over the redirection manager.
 *
 * These used to be hidden by accident, because the generator promoted the
 * plugin's inline display:none into a class rule. That also hid things the
 * demo opens ON PURPOSE -- the expandable row details, the anchor editor -- so
 * the generator no longer promotes any hiding declaration. The list of what
 * stays hidden lives here instead, where it is a decision rather than a
 * side effect. Add to it; do not reach for the generator.
 *
 * .linkilo-tooltip is two different things in the plugin: on most screens the
 * trigger wrapper holding the "?" icon (kept: the real UI shows them), on a few
 * the hover bubble itself (hidden). The bubble text is always hidden.
 * ====================================================================== */
.lkd__screen [data-lk-demo-panel] .linkilo-tooltip:not(:has(.linkilo-tooltip-icon)), .lkd__screen [data-lk-demo-panel] .linkilo-tooltip-text, .lkd__screen [data-lk-demo-panel] .lkbl-toast, .lkd__screen [data-lk-demo-panel] .toast-notification, .lkd__screen [data-lk-demo-panel] .lkbl-empty, .lkd__screen [data-lk-demo-panel] .linkilo-empty-mission, .lkd__screen [data-lk-demo-panel] .redir-modal, .lkd__screen [data-lk-demo-panel] .custom-anchor-modal {
  display: none !important;
}

/* WordPress admin buttons are white-space:nowrap with a fixed height, which
   assumes short labels. Several recreated screens lay them out in a grid of
   ~145px columns ("Load Recent Session", "Clear All Suggestions"), where the
   label paints straight out of its own box. Let those wrap. */
.lkd__screen [data-lk-demo-panel] .controls-primary .button, .lkd__screen [data-lk-demo-panel] .controls-primary button {
  white-space: normal;
  height: auto;
  min-height: 30px;
  line-height: 1.35;
}

/* Focus Keyword's "Recommended Primary" cell carries four stacked lines, and
   the longest of them is a sentence. Left to size itself it took 480px of a
   1129px table and pushed the whole thing past the screen frame. The plugin's
   own copy is shorter; capping the cell is the demo's problem to solve, not a
   change to what the screen says. */
.lkd__screen [data-lk-demo-panel="focus"] .lfk-rec-cell {
  max-width: 330px;
}

/* =========================================================================
 * Charts fill their box, the way the plugin's canvas does
 *
 * The plugin gives .linkilo-chart-body a flat 320px and drops a Chart.js
 * canvas in, which fills it. The demo draws its charts by hand at their own
 * natural size -- a 108px donut, a 130px bar row -- so each one sat at the top
 * of the box with roughly 200px of empty panel underneath. Three of those on
 * the summary dashboard is what made the screen read as half-finished.
 * ====================================================================== */
.lkd__screen [data-lk-demo-panel] .chart-wrapper > .lkd-bars, .lkd__screen [data-lk-demo-panel] .chart-wrapper > .lkd-donut { width: 100%; }.lkd__screen [data-lk-demo-panel] .linkilo-chart-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}.lkd__screen [data-lk-demo-panel] .linkilo-chart-body > .lkd-donut, .lkd__screen [data-lk-demo-panel] .linkilo-chart-body > .lkd-bars, .lkd__screen [data-lk-demo-panel] .linkilo-chart-body > .lkd-line, .lkd__screen [data-lk-demo-panel] .linkilo-chart-body > .lkd-shares, .lkd__screen [data-lk-demo-panel] .linkilo-chart-body > figure {
  flex: 1 1 auto;
  min-height: 0;
}.lkd__screen [data-lk-demo-panel] .linkilo-chart-body .lkd-bars { height: auto; }.lkd__screen [data-lk-demo-panel] .linkilo-chart-body .lkd-line { height: 100%; }.lkd__screen [data-lk-demo-panel] .linkilo-chart-body .lkd-line svg { height: 100%; width: 100%; }.lkd__screen [data-lk-demo-panel] .linkilo-chart-body .lkd-donut { justify-content: center; }.lkd__screen [data-lk-demo-panel] .linkilo-chart-body .lkd-donut svg { width: 150px; height: 150px; }.lkd__screen [data-lk-demo-panel] .linkilo-chart-body .lkd-shares { justify-content: space-evenly; }

/* Cards in a row end their call to action at the same height.
   The three Link Priorities plan cards are equal height already, but each one
   put its button straight after a different amount of prose, so the three
   buttons sat at three different heights and the row read as unfinished. */
.lkd__screen [data-lk-demo-panel] .ldp-plan-card {
  display: flex;
  flex-direction: column;
}.lkd__screen [data-lk-demo-panel] .ldp-plan-card > .ldp-mini-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* =========================================================================
 * Auto-fit grids inside a narrower frame
 *
 * The demo frame is narrower than a wp-admin content column, so the plugin's
 * repeat(auto-fit, minmax(220px, 1fr)) summary rows drop one or two cards onto
 * a second row and the screen reads as ragged. Same cards, same order, a
 * smaller minimum track so a row of summary figures stays a row.
 *
 * !important because the generated per-screen rule is scoped
 * '.lkd__screen [data-lk-demo-panel="broken"] .lkbl-summary-grid', which ties
 * with anything written here and wins on load order.
 * ====================================================================== */
.lkd__screen [data-lk-demo-panel] .lkbl-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}.lkd__screen [data-lk-demo-panel] .redir-stats {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
}

/* Four row actions in a narrow column wrapped to four lines, and widening the
   column pushed the whole table 93px past the frame so the last button was
   clipped. Two per line inside a fixed column keeps the table within its own
   width, which is what the plugin's wider admin column gets for free. */
.lkd__screen [data-lk-demo-panel] .lkbl-row-actions {
  gap: 5px !important;
}.lkd__screen [data-lk-demo-panel] .lkbl-row-actions button {
  padding: 0 8px !important;
  font-size: 11px !important;
}

/* Fixed layout with explicit widths, because the auto layout wanted 1653px in
   a 1560px frame and clipped the last column. The URL column takes the slack;
   it holds the longest text and is the one that can wrap. */
.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table {
  table-layout: fixed;
  width: 100%;
}.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table th:nth-child(1) { width: 4%; }.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table th:nth-child(2) { width: 12%; }.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table th:nth-child(3) { width: 13%; }.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table th:nth-child(4) { width: 11%; }.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table th:nth-child(5) { width: 19%; }.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table th:nth-child(6) { width: 10%; }.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table th:nth-child(7) { width: 6%; }.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table th:nth-child(8) { width: 10%; }.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table th:nth-child(9) { width: 15%; }

/* break-word, not anywhere: a URL should wrap at a sensible point rather than
   splitting "oldsupplier" across two lines. */
.lkd__screen [data-lk-demo-panel="broken"] .lkbl-table td {
  overflow-wrap: break-word;
}

/* The plugin pairs Crawl Activity with a second chart, so .sla-charts-grid is
   two columns. The demo draws only the wide one, which then sat in half the
   width with the other half empty. */
.lkd__screen [data-lk-demo-panel] .sla-chart-wide { grid-column: 1 / -1 !important; }

/* Click Analytics: the position and hourly blocks are flex containers holding
   a stats summary and a chart. The summary carries card styling and the chart
   does not, so the bars sat on the bare panel background looking like they had
   come loose from the section above. One card around both, stacked. */
.lkd__screen [data-lk-demo-panel="clicks"] .position-chart-container, .lkd__screen [data-lk-demo-panel="clicks"] .hourly-chart-container {
  flex-direction: column !important;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--linkilo-panel-border, #d8e0ea);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin-bottom: 18px;
}.lkd__screen [data-lk-demo-panel="clicks"] .position-chart-container .position-stats-summary, .lkd__screen [data-lk-demo-panel="clicks"] .hourly-chart-container .hourly-stats-summary {
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

/* Flex centring left the summary and the bars in a narrow column with the card
   empty either side. Let both stretch to the card. */
.lkd__screen [data-lk-demo-panel="clicks"] .position-chart-container > *, .lkd__screen [data-lk-demo-panel="clicks"] .hourly-chart-container > * {
  width: 100%;
  align-self: stretch;
}.lkd__screen [data-lk-demo-panel="clicks"] .position-breakdown, .lkd__screen [data-lk-demo-panel="clicks"] .total-position-clicks, .lkd__screen [data-lk-demo-panel="clicks"] .peak-hour-info {
  width: 100%;
  max-width: none;
}

/* .suggestion-meta is space-between, which reads correctly when it holds two
   groups. The recreation puts three things in it -- checkbox, confidence chip,
   rule chips -- so the chip ended up marooned in the middle of the row. Keep
   the checkbox and the score together and let the rule chips take the right. */
.lkd__screen [data-lk-demo-panel] .suggestion-meta {
  justify-content: flex-start !important;
  gap: 10px;
}.lkd__screen [data-lk-demo-panel] .suggestion-meta .rule-badge:first-of-type, .lkd__screen [data-lk-demo-panel] .suggestion-meta .rules-badges {
  margin-left: auto;
}

/* Orphan Pages: the bulk bar's second button was growing to fill the row, so
   "Find source pages" rendered as a 1200px pink band across the screen. Bulk
   actions size to their label. */
.lkd__screen [data-lk-demo-panel] [class*="bulkbar"] button {
  flex: 0 0 auto !important;
}

/* =========================================================================
 * Grids that divide evenly
 *
 * The plugin sizes these with repeat(auto-fit, minmax(...)), which is right in
 * a wp-admin column and ragged in the demo frame: eight stat cards land as six
 * and two, six legend cards as five and one, four buttons as three and one.
 * The stray card on its own row is most of what reads as unfinished. Explicit
 * counts that divide the real item count fix it without changing what is shown.
 *
 * !important throughout: the generated per-screen rules are scoped
 * '[data-lk-demo-panel="x"] .thing' and tie with anything written here.
 * ====================================================================== */
.lkd__screen [data-lk-demo-panel] .lfk-stats, .lkd__screen [data-lk-demo-panel] .lkilo-stats {
  grid-template-columns: repeat(4, 1fr) !important;
}.lkd__screen [data-lk-demo-panel] .lkilo-legend-grid, .lkd__screen [data-lk-demo-panel] .lkc-legend-grid, .lkd__screen [data-lk-demo-panel] .linkilo-ai-capability-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}.lkd__screen [data-lk-demo-panel] .controls-primary, .lkd__screen [data-lk-demo-panel] .progress-stats, .lkd__screen [data-lk-demo-panel] .help-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* =========================================================================
 * Controls look like controls
 *
 * A handful of actions rendered as bare text, so they read as labels rather
 * than things you can press. Orphan Pages was the clearest: its row action
 * carries .lkilo-btn, but the plugin also resets everything inside
 * .lkilo-row-actions to background:none/border:medium, and that rule loads
 * last. The other report screens use real buttons in the same column, so the
 * demo was inconsistent with itself as well.
 * ====================================================================== */
.lkd__screen [data-lk-demo-panel] .lkilo-row-actions .lkilo-btn {
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  color: #374151 !important;
}.lkd__screen [data-lk-demo-panel] .lkilo-row-actions .lkilo-btn-primary {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

/* Disclosure and dismiss controls the plugin leaves as bare text. A quiet
   outline is enough to say "this is a button" without competing with the
   primary action in the same row. */
.lkd__screen [data-lk-demo-panel] .lar-toggle-detail, .lkd__screen [data-lk-demo-panel] .lkc-dismiss, .lkd__screen [data-lk-demo-panel] .lic-reinspect {
  border: 1px solid #d5dbe4 !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
  background: #fff !important;
  line-height: 1.5;
}.lkd__screen [data-lk-demo-panel] .lkc-dismiss { color: #64748b !important; }

/* A chip or a button label that breaks across two lines reads as a mistake:
   "Quick / win", "Add / links". These are short labels in dense report tables,
   so they keep their line and the column sizes to them. */
.lkd__screen [data-lk-demo-panel] [class$="-btn"], .lkd__screen [data-lk-demo-panel] [class*="-btn-"], .lkd__screen [data-lk-demo-panel] [class*="-chip"], .lkd__screen [data-lk-demo-panel] [class*="-tag"], .lkd__screen [data-lk-demo-panel] [class*="-pill"], .lkd__screen [data-lk-demo-panel] [class*="-badge"] {
  white-space: nowrap;
}

/* The one exception: the suggested-action cell is a sentence, not a label. */
.lkd__screen [data-lk-demo-panel] [class*="-action-chip"], .lkd__screen [data-lk-demo-panel] [class*="-suggestion"] {
  white-space: normal;
}