/* =============================================================================
   LockerGrid — component styles
   -----------------------------------------------------------------------------
   These styles sit ON TOP of core blocks. Every layout decision that WordPress
   can express natively (columns, grids, spacing, colour, alignment) is set on
   the blocks themselves and is editable in the editor. What lives here is only
   the brand detailing core blocks have no setting for: the hairline card, the
   technical grid backdrop, the eyebrow label, the enquiry form controls.

   Colour values come from theme.json presets, so changing a colour in
   Appearance → Editor → Styles updates everything below.

   1.  Primitives (eyebrow, lede, mono, badge, display)
   2.  Surfaces (cards, panels, dark sections, grid backdrop)
   3.  Routes & flows (path cards, flow nodes, architecture, ecosystem)
   4.  Content bits (chips, notes, stats, tiles, kit legend, lists)
   5.  Hero
   6.  Forms (Custom HTML blocks)
   7.  Motion
   8.  Responsive
   ========================================================================== */

:root {
  --lg-blue: var(--wp--preset--color--blue, #1354d4);
  --lg-blue-deep: var(--wp--preset--color--blue-deep, #0d419e);
  --lg-blue-bright: var(--wp--preset--color--blue-bright, #2e72f0);
  --lg-blue-pale: var(--wp--preset--color--blue-pale, #e2ecfe);
  --lg-blue-tint: var(--wp--preset--color--blue-tint, #f2f6ff);
  --lg-signal: var(--wp--preset--color--signal, #00b89e);
  --lg-signal-bright: var(--wp--preset--color--signal-bright, #21d3b8);
  --lg-signal-deep: var(--wp--preset--color--signal-deep, #00947f);
  --lg-signal-pale: var(--wp--preset--color--signal-pale, #d6f6f0);
  --lg-ink: var(--wp--preset--color--ink, #05122b);
  --lg-line: var(--wp--preset--color--line, #dde4ee);
  --lg-line-strong: var(--wp--preset--color--line-strong, #c6d2e2);
  --lg-surface: var(--wp--preset--color--surface, #f7f9fc);
  --lg-surface-deep: var(--wp--preset--color--surface-deep, #eef2f8);
  --lg-text: var(--wp--preset--color--contrast, #0e1d33);
  --lg-muted: var(--wp--preset--color--muted, #5b6c85);
  --lg-muted-soft: var(--wp--preset--color--muted-soft, #8494a9);
  --lg-mono-font: var(--wp--preset--font-family--mono, ui-monospace, monospace);

  --lg-d-text: #eef3fb;
  --lg-d-muted: #9db0cc;
  --lg-d-line: rgba(255, 255, 255, 0.11);
  --lg-d-line-strong: rgba(255, 255, 255, 0.2);
  --lg-d-surface: rgba(255, 255, 255, 0.045);

  --lg-r-sm: 8px;
  --lg-r-md: 12px;
  --lg-r-lg: 18px;
  --lg-r-xl: 26px;
}

/* 1. PRIMITIVES ============================================================ */

.lg-eyebrow,
.is-style-lg-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--lg-mono-font);
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lg-blue);
  margin-bottom: 18px;
}
.lg-eyebrow::before,
.is-style-lg-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.lg-eyebrow.lg-eyebrow--plain::before { display: none; }
.has-text-align-center.lg-eyebrow,
.has-text-align-center.is-style-lg-eyebrow { justify-content: center; }

.lg-lede,
.is-style-lg-lede {
  font-size: var(--wp--preset--font-size--lede, 1.18rem);
  line-height: 1.6;
  color: var(--lg-muted);
  max-width: 62ch;
}
.lg-lede--wide { max-width: 74ch; }
.has-text-align-center.lg-lede,
.has-text-align-center.is-style-lg-lede { margin-inline: auto; }

.lg-mono,
.is-style-lg-mono {
  font-family: var(--lg-mono-font);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lg-muted-soft);
  margin: 0;
}

.lg-display { letter-spacing: -0.035em; line-height: 1.03; font-weight: 660; }

.lg-num {
  font-family: var(--lg-mono-font);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--lg-blue-bright);
  margin: 0;
}

.lg-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 14px 6px 10px;
  border-radius: 100px;
  border: 1px solid var(--lg-blue-pale);
  background: var(--lg-blue-tint);
  font-size: 0.815rem;
  font-weight: 520;
  color: var(--lg-blue-deep);
}
.lg-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lg-signal);
  box-shadow: 0 0 0 3px rgba(0, 184, 158, 0.18);
  flex: none;
}

.lg-rule-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--lg-mono-font);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lg-muted-soft);
}
.lg-rule-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lg-line);
}

.lg-pull {
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  line-height: 1.32;
  letter-spacing: -0.028em;
  font-weight: 600;
  color: var(--lg-ink);
}

.lg-callout {
  border-left: 3px solid var(--lg-blue-bright);
  padding: 6px 0 6px 24px;
  font-size: 1.1rem;
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: var(--lg-text);
}

/* 2. SURFACES ============================================================== */

.lg-card,
.is-style-lg-card {
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-lg);
  background: #fff;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.28s ease, border-color 0.28s ease;
}
.lg-card > :last-child, .is-style-lg-card > :last-child { margin-bottom: 0; }
.lg-card p, .is-style-lg-card p { color: var(--lg-muted); font-size: 0.965rem; }
.lg-card h3, .lg-card h4 { margin-bottom: 0.45em; }

.lg-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--wp--preset--shadow--lift, 0 10px 24px -8px rgba(9, 26, 51, 0.12));
  border-color: var(--lg-line-strong);
}

/* Icon chip: a core/image sized small, sitting in a tinted square */
.lg-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--lg-r-sm);
  background: var(--lg-blue-tint);
  border: 1px solid var(--lg-blue-pale);
  display: grid !important;
  place-items: center;
  margin: 0 0 18px;
}
.lg-icon img { width: 22px; height: 22px; display: block; }

/* Dark sections — the group carries backgroundColor from the editor;
   these rules only fix the text colours of what sits inside it. */
.lg-dark { color: var(--lg-d-text); }
.lg-dark h1, .lg-dark h2, .lg-dark h3, .lg-dark h4, .lg-dark h5 { color: #fff; }
.lg-dark p:not(.lg-eyebrow):not(.lg-num) { color: var(--lg-d-muted); }
.lg-dark .lg-eyebrow, .lg-dark .is-style-lg-eyebrow { color: var(--lg-signal-bright); }
.lg-dark .lg-num { color: var(--lg-signal-bright); }
.lg-dark a:not(.wp-block-button__link) { color: var(--lg-signal-bright); }
.lg-dark .lg-card,
.lg-dark .is-style-lg-card {
  background: var(--lg-d-surface);
  border-color: var(--lg-d-line);
}
.lg-dark .lg-card--hover:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: var(--lg-d-line-strong);
  box-shadow: none;
}
.lg-dark .lg-icon {
  background: rgba(0, 184, 158, 0.1);
  border-color: rgba(0, 184, 158, 0.26);
}
.lg-dark .lg-rule-label::after { background: var(--lg-d-line); }
.lg-dark .lg-pull, .lg-dark .lg-callout { color: #fff; }
.lg-dark .lg-callout { border-color: var(--lg-signal); }
.lg-dark .lg-badge {
  background: rgba(0, 184, 158, 0.08);
  border-color: rgba(0, 184, 158, 0.26);
  color: var(--lg-signal-bright);
}
.lg-dark .wp-block-separator { color: var(--lg-d-line); }

/* Technical grid backdrop */
.lg-grid-bg { position: relative; overflow: hidden; isolation: isolate; }
.lg-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(19, 84, 212, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(19, 84, 212, 0.055) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
}
.lg-dark.lg-grid-bg::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
}

.lg-figure {
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-lg);
  background: #fff;
  box-shadow: var(--wp--preset--shadow--soft, 0 1px 3px rgba(9, 26, 51, 0.05));
}
.lg-figure--flat { box-shadow: none; background: var(--lg-surface); }
.lg-dark .lg-figure { background: var(--lg-d-surface); border-color: var(--lg-d-line); box-shadow: none; }

.lg-cta-band {
  border-radius: var(--lg-r-xl);
  overflow: hidden;
}

/* 3. ROUTES & FLOWS ======================================================== */

.lg-path-card {
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-xl);
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.3s ease, border-color 0.3s ease;
}
.lg-path-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--float, 0 26px 60px -18px rgba(9, 26, 51, 0.22));
  border-color: var(--lg-blue-pale);
}
.lg-path-card > :last-child { margin-bottom: 0; }
.lg-path-card .lg-num,
.lg-path-card .lg-route {
  font-family: var(--lg-mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lg-blue);
  margin: 0 0 14px;
}
.lg-path-card--build {
  background: var(--lg-ink);
  border-color: var(--lg-ink-soft, #123059);
}
.lg-path-card--build:hover { border-color: var(--lg-signal-deep); }
.lg-path-card--build h2, .lg-path-card--build h3 { color: #fff; }
.lg-path-card--build p { color: var(--lg-d-muted); }
.lg-path-card--build .lg-route { color: var(--lg-signal-bright); }
.lg-path-card--build .lg-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--lg-d-line);
  color: var(--lg-d-text);
}

.lg-flow-node {
  padding: 18px 20px;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-md);
  background: #fff;
  height: 100%;
}
.lg-flow-node > :last-child { margin-bottom: 0; }
.lg-flow-node .lg-mono { font-size: 0.68rem; margin-bottom: 6px; }
.lg-flow-node strong,
.lg-flow-node .lg-flow-title {
  display: block;
  font-weight: 580;
  font-size: 0.98rem;
  letter-spacing: -0.012em;
  color: var(--lg-text);
  margin: 0;
}
.lg-flow-node .lg-flow-sub {
  font-size: 0.85rem;
  color: var(--lg-muted);
  margin: 4px 0 0;
}
.lg-flow-node--accent {
  border-color: var(--lg-blue-bright);
  background: var(--lg-blue-tint);
  box-shadow: var(--wp--preset--shadow--blue, 0 12px 30px -10px rgba(19, 84, 212, 0.45));
}
.lg-flow-node--accent .lg-flow-title { color: var(--lg-blue-deep); }
.lg-dark .lg-flow-node { background: var(--lg-d-surface); border-color: var(--lg-d-line); }
.lg-dark .lg-flow-node .lg-flow-title { color: #fff; }
.lg-dark .lg-flow-node .lg-flow-sub { color: var(--lg-d-muted); }
.lg-dark .lg-flow-node--accent {
  background: rgba(0, 184, 158, 0.09);
  border-color: var(--lg-signal-deep);
  box-shadow: none;
}
.lg-dark .lg-flow-node--accent .lg-flow-title { color: var(--lg-signal-bright); }

.lg-arch-layer {
  padding: 20px clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-md);
  background: #fff;
  transition: border-color 0.26s ease;
}
.lg-arch-layer:hover { border-color: var(--lg-blue-pale); }
.lg-arch-layer > :last-child { margin-bottom: 0; }
.lg-arch-layer .lg-mono { font-size: 0.66rem; letter-spacing: 0.15em; margin-bottom: 5px; }
.lg-arch-layer .lg-arch-name {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--lg-text);
  margin: 0;
}
.lg-arch-layer--core {
  border-color: var(--lg-blue);
  background: var(--lg-blue-tint);
  box-shadow: var(--wp--preset--shadow--blue, 0 12px 30px -10px rgba(19, 84, 212, 0.45));
}
.lg-arch-layer--core .lg-arch-name { color: var(--lg-blue-deep); }
.lg-dark .lg-arch-layer { background: var(--lg-d-surface); border-color: var(--lg-d-line); }
.lg-dark .lg-arch-layer .lg-arch-name { color: #fff; }
.lg-dark .lg-arch-layer--core {
  background: rgba(19, 84, 212, 0.16);
  border-color: var(--lg-blue-bright);
  box-shadow: none;
}

.lg-parts { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.lg-part {
  font-family: var(--lg-mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 6px 11px;
  border-radius: 4px;
  border: 1px solid var(--lg-line);
  background: var(--lg-surface);
  color: var(--lg-muted);
  white-space: nowrap;
}
.lg-dark .lg-part {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--lg-d-line);
  color: var(--lg-d-text);
}
.lg-arch-layer--core .lg-part {
  border-color: rgba(91, 147, 247, 0.4);
  background: rgba(91, 147, 247, 0.12);
}

.lg-joint {
  font-family: var(--lg-mono-font);
  color: var(--lg-line-strong);
  text-align: center;
  margin: 0;
  line-height: 1;
}
.lg-dark .lg-joint { color: var(--lg-d-line-strong); }

.lg-eco-step {
  padding: 14px 18px;
  border-radius: var(--lg-r-sm);
  border: 1px solid var(--lg-d-line);
  background: rgba(255, 255, 255, 0.035);
}
.lg-eco-step > :last-child { margin-bottom: 0; }
.lg-eco-step .lg-eco-name {
  font-size: 0.96rem;
  font-weight: 580;
  color: #fff;
  letter-spacing: -0.012em;
  margin: 0;
}
.lg-eco-step .lg-eco-sub { font-size: 0.83rem; color: var(--lg-d-muted); margin: 3px 0 0; }
.lg-eco-step--hub {
  border-color: var(--lg-blue-bright);
  background: linear-gradient(180deg, rgba(19, 84, 212, 0.22), rgba(19, 84, 212, 0.08));
}

.lg-sku {
  border: 1px solid var(--lg-d-line);
  border-radius: var(--lg-r-lg);
  background: var(--lg-d-surface);
  transition: border-color 0.28s ease, transform 0.28s ease;
}
.lg-sku:hover { border-color: var(--lg-signal-deep); transform: translateY(-3px); }
.lg-sku .lg-mono { color: var(--lg-signal-bright); font-size: 0.68rem; }
.lg-sku h4 { color: #fff; }
.lg-sku p { color: var(--lg-d-muted); font-size: 0.88rem; }
.lg-sku img { margin-inline: auto; }

.lg-powered-bar {
  padding: 18px;
  border: 1px dashed var(--lg-d-line-strong);
  border-radius: var(--lg-r-md);
  text-align: center;
  font-family: var(--lg-mono-font);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lg-signal-bright);
  margin: 0;
}

/* 4. CONTENT BITS ========================================================== */

.lg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.lg-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--lg-line);
  border-radius: 100px;
  background: var(--lg-surface);
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--lg-muted);
  white-space: nowrap;
}
.lg-dark .lg-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--lg-d-line);
  color: var(--lg-d-text);
}
.lg-chip--live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lg-signal);
  box-shadow: 0 0 0 3px rgba(0, 184, 158, 0.18);
}

.lg-note {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid var(--lg-line);
  border-left: 3px solid var(--lg-muted-soft);
  border-radius: 4px;
  background: var(--lg-surface);
  font-size: 0.9rem;
  color: var(--lg-muted);
  margin: 0;
}
.lg-note::before {
  content: "i";
  flex: none;
  width: 17px; height: 17px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: var(--lg-mono-font);
  font-size: 0.66rem;
  line-height: 15px;
  text-align: center;
  opacity: 0.7;
  margin-top: 3px;
}
.lg-dark .lg-note {
  background: var(--lg-d-surface);
  border-color: var(--lg-d-line);
  border-left-color: var(--lg-d-line-strong);
  color: var(--lg-d-muted);
}

.lg-stat { padding: clamp(22px, 2.5vw, 32px); }
.lg-stat .lg-stat-value {
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--lg-ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.lg-stat .lg-stat-label { font-size: 0.86rem; color: var(--lg-muted); margin: 9px 0 0; }
.lg-dark .lg-stat .lg-stat-value { color: #fff; }
.lg-dark .lg-stat .lg-stat-label { color: var(--lg-d-muted); }
.lg-stat-band {
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-lg);
  overflow: hidden;
  background: #fff;
}
.lg-dark .lg-stat-band { background: var(--lg-d-surface); border-color: var(--lg-d-line); }
.lg-stat-band .lg-stat + .lg-stat { border-left: 1px solid var(--lg-line); }
.lg-dark .lg-stat-band .lg-stat + .lg-stat { border-color: var(--lg-d-line); }

.lg-tile {
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-md);
  background: #fff;
  transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
  display: block;
  height: 100%;
}
.lg-tile:hover {
  transform: translateY(-3px);
  border-color: var(--lg-blue-pale);
  box-shadow: var(--wp--preset--shadow--lift, 0 10px 24px -8px rgba(9, 26, 51, 0.12));
}
.lg-tile > :last-child { margin-bottom: 0; }
.lg-tile .lg-mono { color: var(--lg-blue-bright); font-size: 0.7rem; }
.lg-tile h3 { font-size: 1.08rem; margin: 12px 0 8px; }
.lg-tile p { font-size: 0.925rem; color: var(--lg-muted); margin: 0; }

.lg-kit-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 13px 4px;
  border-bottom: 1px solid var(--lg-line);
}
.lg-kit-item:last-child { border-bottom: 0; }
.lg-kit-item .lg-num { font-size: 0.74rem; }
.lg-kit-item .lg-kit-name {
  font-weight: 570;
  font-size: 0.98rem;
  letter-spacing: -0.014em;
  color: var(--lg-text);
  margin: 0;
}
.lg-kit-item .lg-kit-desc { font-size: 0.885rem; color: var(--lg-muted); margin: 2px 0 0; }
.lg-dark .lg-kit-item { border-color: var(--lg-d-line); }
.lg-dark .lg-kit-item .lg-kit-name { color: #fff; }
.lg-dark .lg-kit-item .lg-kit-desc { color: var(--lg-d-muted); }

.lg-pf-step {
  text-align: center;
  padding: 16px 8px;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-sm);
  background: #fff;
  height: 100%;
}
.lg-pf-step > :last-child { margin-bottom: 0; }
.lg-pf-step .lg-mono { font-size: 0.62rem; letter-spacing: 0.1em; justify-content: center; }
.lg-pf-step .lg-pf-name {
  font-size: 0.845rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  margin: 7px 0 0;
  color: var(--lg-text);
}

.lg-stack-row {
  padding: clamp(24px, 2.8vw, 34px) 0;
  border-bottom: 1px solid var(--lg-line);
  transition: background 0.25s ease;
}
.lg-stack-row:first-child { border-top: 1px solid var(--lg-line); }
.lg-stack-row:hover { background: linear-gradient(90deg, rgba(19, 84, 212, 0.035), transparent 70%); }
.lg-dark .lg-stack-row { border-color: var(--lg-d-line); }
.lg-dark .lg-stack-row:hover { background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 70%); }

/* core/list with a diamond marker */
.lg-feature-list { list-style: none; padding-left: 0; margin: 0; }
.lg-feature-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  color: var(--lg-muted);
  font-size: 0.975rem;
}
.lg-feature-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.62em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--lg-blue-bright);
  transform: rotate(45deg);
}
.lg-dark .lg-feature-list li::before { background: var(--lg-signal); }

/* core/table */
.lg-table table { border-collapse: collapse; width: 100%; }
.lg-table thead th {
  text-align: left;
  font-family: var(--lg-mono-font);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lg-muted);
  font-weight: 500;
  padding: 15px 20px;
  background: var(--lg-surface);
  border-bottom: 1px solid var(--lg-line);
}
.lg-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--lg-line);
  color: var(--lg-muted);
  vertical-align: top;
}
.lg-table tbody tr:last-child td { border-bottom: 0; }
.lg-table tbody td:first-child { font-weight: 550; color: var(--lg-text); }
.lg-table .wp-block-table { border: 1px solid var(--lg-line); border-radius: var(--lg-r-md); overflow: hidden; }

/* core/details as the FAQ accordion */
.lg-acc .wp-block-details {
  border-bottom: 1px solid var(--lg-line);
  padding: 0;
}
.lg-acc .wp-block-details:first-child { border-top: 1px solid var(--lg-line); }
.lg-acc .wp-block-details summary {
  padding: 22px 2px;
  font-size: 1.04rem;
  font-weight: 560;
  letter-spacing: -0.016em;
  color: var(--lg-text);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 34px;
}
.lg-acc .wp-block-details summary::-webkit-details-marker { display: none; }
.lg-acc .wp-block-details summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--lg-blue), var(--lg-blue)) center/13px 1.6px no-repeat,
    linear-gradient(var(--lg-blue), var(--lg-blue)) center/1.6px 13px no-repeat;
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}
.lg-acc .wp-block-details[open] summary::after {
  background: linear-gradient(var(--lg-blue), var(--lg-blue)) center/13px 1.6px no-repeat;
}
.lg-acc .wp-block-details > :not(summary) {
  padding: 0 2px 24px;
  color: var(--lg-muted);
  max-width: 74ch;
}

/* Anchor nav strip */
.lg-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lg-line);
  margin: 0;
  list-style: none;
}
.lg-anchor-nav a {
  font-family: var(--lg-mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lg-muted);
  padding: 7px 12px;
  border-radius: 100px;
  border: 1px solid transparent;
  display: inline-block;
}
.lg-anchor-nav a:hover {
  color: var(--lg-blue-deep);
  background: var(--lg-blue-tint);
  border-color: var(--lg-blue-pale);
}

/* Buttons: secondary + on-dark variants, applied via the button's class field */
.wp-block-button.lg-btn-ghost .wp-block-button__link {
  background: transparent;
  color: var(--lg-text);
  border: 1px solid var(--lg-line-strong);
}
.wp-block-button.lg-btn-ghost .wp-block-button__link:hover {
  border-color: var(--lg-ink);
  background: var(--lg-surface);
  color: var(--lg-text);
}
.wp-block-button.lg-btn-white .wp-block-button__link { background: #fff; color: var(--lg-ink); }
.wp-block-button.lg-btn-white .wp-block-button__link:hover { background: var(--lg-blue-tint); color: var(--lg-ink); }
.wp-block-button.lg-btn-on-dark .wp-block-button__link {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid var(--lg-d-line-strong);
}
.wp-block-button.lg-btn-on-dark .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}
.wp-block-button .wp-block-button__link { transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .22s ease; }
.wp-block-button:not(.lg-btn-ghost):not(.lg-btn-white):not(.lg-btn-on-dark) .wp-block-button__link {
  box-shadow: var(--wp--preset--shadow--blue, 0 12px 30px -10px rgba(19, 84, 212, 0.45));
}

/* 5. HERO ================================================================== */

.lg-hero { background: var(--wp--preset--gradient--hero-wash, linear-gradient(180deg, #f2f6ff 0%, #fff 62%)); }
.lg-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-top: 24px;
  border-top: 1px solid var(--lg-line);
  margin: 0;
}
.lg-hero-meta .lg-part {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lg-muted);
}
.lg-hero-legend { list-style: none; padding-left: 0; margin: 0; }
.lg-hero-legend li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 11px 2px;
  border-bottom: 1px solid var(--lg-line);
  margin: 0;
}
.lg-hero-legend li:last-child { border-bottom: 0; }
.lg-hero-legend li::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--lg-line-strong);
  align-self: center;
  grid-row: 1 / span 2;
  grid-column: 1;
}
.lg-hero-legend b,
.lg-hero-legend span { grid-column: 2; }
.lg-hero-legend li:nth-child(2)::before { background: var(--lg-blue-bright); }
.lg-hero-legend li:nth-child(3)::before { background: var(--lg-signal-bright); }
.lg-hero-legend li:nth-child(4)::before { background: var(--lg-blue); }
.lg-hero-legend b { display: block; font-size: 0.94rem; font-weight: 580; letter-spacing: -0.014em; color: var(--lg-text); }
.lg-hero-legend span { display: block; font-family: var(--lg-mono-font); font-size: 0.7rem; color: var(--lg-muted-soft); }

.lg-only-mobile { display: none !important; }

/* 6. FORMS (Custom HTML blocks) ============================================ */

.lg-form {
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-xl);
  background: #fff;
  box-shadow: var(--wp--preset--shadow--lift, 0 10px 24px -8px rgba(9, 26, 51, 0.12));
  overflow: hidden;
}
.lg-form-head {
  padding: clamp(22px, 2.4vw, 30px);
  border-bottom: 1px solid var(--lg-line);
  background: var(--lg-surface);
}
.lg-form-head h3 { margin: 0 0 4px; font-size: 1.14rem; font-weight: 620; letter-spacing: -0.014em; }
.lg-form-head p { margin: 0; font-size: 0.925rem; color: var(--lg-muted); }
.lg-form-body { padding: clamp(22px, 2.6vw, 34px); }

.lg-field { margin-bottom: 26px; border: 0; padding: 0; margin-inline: 0; }
.lg-field > legend,
.lg-field > .lg-label {
  display: block;
  font-size: 0.845rem;
  font-weight: 580;
  color: var(--lg-text);
  margin-bottom: 12px;
  padding: 0;
}
.lg-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 9px; }
.lg-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-sm);
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--lg-muted);
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.lg-opt:hover { border-color: var(--lg-blue-pale); background: var(--lg-blue-tint); }
.lg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.lg-opt .lg-dot {
  width: 16px; height: 16px; flex: none;
  border: 1.5px solid var(--lg-line-strong);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.16s ease;
}
.lg-opt input[type="checkbox"] + .lg-dot { border-radius: 4px; }
.lg-opt .lg-dot::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: inherit;
  background: var(--lg-blue);
  transform: scale(0);
  transition: transform 0.16s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.lg-opt input:checked + .lg-dot { border-color: var(--lg-blue); }
.lg-opt input:checked + .lg-dot::after { transform: scale(1); }
.lg-opt:has(input:checked) { border-color: var(--lg-blue); background: var(--lg-blue-tint); color: var(--lg-blue-deep); }
.lg-opt input:focus-visible + .lg-dot { outline: 2px solid var(--lg-blue-bright); outline-offset: 2px; }

.lg-form input[type="text"],
.lg-form input[type="email"],
.lg-form input[type="tel"],
.lg-form select,
.lg-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-r-sm);
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--lg-text);
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.lg-form input:focus, .lg-form select:focus, .lg-form textarea:focus {
  outline: 0;
  border-color: var(--lg-blue-bright);
  box-shadow: 0 0 0 3px rgba(46, 114, 240, 0.14);
}
.lg-form textarea { resize: vertical; min-height: 108px; }
.lg-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.lg-submit {
  width: 100%;
  padding: 17px 32px;
  border: 0;
  border-radius: var(--lg-r-sm);
  background: var(--lg-blue);
  color: #fff;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 560;
  cursor: pointer;
  transition: background 0.18s ease;
}
.lg-submit:hover { background: var(--lg-blue-deep); }
.lg-submit[disabled] { background: var(--lg-signal-deep); cursor: default; }

.lg-form-note { font-size: 0.82rem; color: var(--lg-muted-soft); margin-top: 14px; }

.lg-form-success {
  display: none;
  padding: 26px;
  border: 1px solid var(--lg-signal);
  background: var(--lg-signal-pale);
  border-radius: var(--lg-r-md);
  color: var(--lg-signal-deep);
}
.lg-form-success.is-on { display: block; }
.lg-form-success strong { color: #06695b; display: block; margin-bottom: 4px; font-size: 1.05rem; }

/* 7. MOTION ================================================================ */

.lg-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.66s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.66s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.lg-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lg-reveal { opacity: 1; transform: none; transition: none; }
  .lg-card--hover:hover, .lg-path-card:hover, .lg-tile:hover, .lg-sku:hover { transform: none; }
}

/* The editor must never hide content behind a reveal animation. */
.editor-styles-wrapper .lg-reveal { opacity: 1; transform: none; }

/* 8. RESPONSIVE ============================================================ */

@media (max-width: 781px) {
  .lg-only-mobile { display: block !important; }
  .lg-only-desktop { display: none !important; }
  .lg-field-grid { grid-template-columns: 1fr; }
  .lg-stat-band .lg-stat + .lg-stat { border-left: 0; border-top: 1px solid var(--lg-line); }
  .lg-anchor-nav { display: none; }
}

@media (max-width: 600px) {
  .lg-kit-item { grid-template-columns: 1fr; gap: 2px; }
  .lg-chips { gap: 6px; }
}

/* Equation glyphs sit at a fixed optical size regardless of source resolution */
.lg-eq-img img { max-width: 120px; }
.lg-sku img { max-width: 150px; }
.lg-icon img { width: 22px; height: 22px; }

/* A light path card dropped onto a dark band takes the dark treatment */
.lg-dark .lg-path-card:not(.lg-path-card--build) {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--lg-d-line);
}
.lg-dark .lg-path-card h2,
.lg-dark .lg-path-card h3 { color: #fff; }
.lg-dark .lg-path-card p { color: var(--lg-d-muted); }
.lg-dark .lg-path-card .lg-route { color: var(--lg-blue-bright); }
.lg-dark .lg-path-card--build .lg-route { color: var(--lg-signal-bright); }
.lg-dark .lg-path-card:hover {
  border-color: var(--lg-d-line-strong);
  box-shadow: none;
}

/* =============================================================================
   18. COMPATIBILITY & TEMPLATE FIXES (v1.1)
   ========================================================================== */

/* WordPress refuses font-size preset slugs named h1–h6: it drops them silently,
   which left every heading falling back to body size. The presets are now
   title-sm / title-md / title-lg / title-xl. These two aliases keep pages that
   were imported before the rename rendering correctly, so there is no need to
   re-import anything. */
.has-h1-font-size { font-size: var(--wp--preset--font-size--title-xl); }
.has-h2-font-size { font-size: var(--wp--preset--font-size--title-lg); }
.has-h3-font-size { font-size: var(--wp--preset--font-size--title-md); }
.has-h4-font-size { font-size: var(--wp--preset--font-size--title-sm); }

/* Every LockerGrid page opens with its own H1 inside the hero, so the page
   template's post title is a duplicate — and the padding reserved for it left a
   large gap above the hero. Hide one, close the other.

   To bring page titles back (for a plain page that needs one), delete this
   block, or add a Heading block at the top of that page instead. Blog posts are
   unaffected. */
body.page .wp-block-post-title { display: none; }
body.page .wp-site-blocks > main { margin-block-start: 0; }
body.page .wp-site-blocks > main > .wp-block-group { padding-block-start: 0; }