/* ==========================================================================
   AIGuiderPRO — main stylesheet
   Tokens come from theme.json. This file styles components only.
   Nothing here re-declares a colour, size or spacing value.
   ========================================================================== */

:root {
  --aigp-motion-fast: 120ms;
  --aigp-motion-base: 200ms;
  --aigp-motion-slow: 320ms;
  --aigp-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --aigp-measure: 38rem;
  --aigp-focus: var(--wp--preset--color--signal);
}


/* ==========================================================================
   SEMANTIC SURFACE LAYER
   Dark is the default. Components reference intent (--s-*), never a literal
   colour, so .aigp-surface--light flips a whole region for long-form reading
   without a second stylesheet.
   ========================================================================== */
:root,
.aigp-surface--dark {
  --s-bg:          var(--wp--preset--color--canvas);
  --s-bg-2:        var(--wp--preset--color--canvas-800);
  --s-panel:       var(--wp--preset--color--surface);
  --s-panel-2:     var(--wp--preset--color--surface-2);
  --s-border:      var(--wp--preset--color--hairline);
  --s-border-2:    var(--wp--preset--color--hairline-2);
  --s-control:     var(--wp--preset--color--control);   /* 3.65:1 — WCAG 1.4.11 */
  --s-text:        var(--wp--preset--color--ink-200);
  --s-text-strong: var(--wp--preset--color--paper);
  --s-text-muted:  var(--wp--preset--color--ink-300);
  --s-text-faint:  var(--wp--preset--color--ink-400);
  --s-link:        var(--wp--preset--color--cyan);
  --s-link-hover:  var(--wp--preset--color--lavender);
  --s-accent:      var(--wp--preset--color--cyan);
}

/* Long-form reading surface: articles, knowledge base, glossary.
   Dark is correct for marketing; sustained reading is measurably easier on
   light, so this exists rather than forcing one surface everywhere. */
.aigp-surface--light {
  --s-bg:          var(--wp--preset--color--paper);
  --s-bg-2:        var(--wp--preset--color--paper-alt);
  --s-panel:       var(--wp--preset--color--paper);
  --s-panel-2:     var(--wp--preset--color--paper-alt);
  --s-border:      var(--wp--preset--color--line);
  --s-border-2:    var(--wp--preset--color--line-strong);
  --s-control:     var(--wp--preset--color--line-strong);
  --s-text:        var(--wp--preset--color--ink-800);
  --s-text-strong: var(--wp--preset--color--ink-900);
  --s-text-muted:  var(--wp--preset--color--ink-500);
  --s-text-faint:  var(--wp--preset--color--ink-500);
  --s-link:        var(--wp--preset--color--blue-700);
  --s-link-hover:  var(--wp--preset--color--signal-ink);
  --s-accent:      var(--wp--preset--color--signal);
  background: var(--s-bg);
  color: var(--s-text);
}
.aigp-surface--light h1,
.aigp-surface--light h2,
.aigp-surface--light h3 { color: var(--s-text-strong); }
.aigp-surface--light a  { color: var(--s-link); }

/* --------------------------------------------------------------- baseline */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Every number on the site. Tabular figures keep columns honest. */
.aigp-num {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}

p, li { max-width: var(--aigp-measure); }
.aigp-card p, .aigp-cta__title, .aigp-compare p { max-width: none; }

/* Visible, high-contrast focus. Never removed. */
:focus-visible {
  outline: 2px solid var(--aigp-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.aigp-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--wp--preset--color--ink-900);
  color: var(--wp--preset--color--paper);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  z-index: 999;
}
.aigp-skip:focus { left: var(--wp--preset--spacing--40); top: var(--wp--preset--spacing--40); }

/* ------------------------------------------------------------- structure */

.aigp-section { padding-block: var(--wp--preset--spacing--80); }
.aigp-section + .aigp-section { padding-block-start: 0; }

/* -------------------------------------------------------------- eyebrow */

.aigp-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--2xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--s-text-muted);
  margin-block-end: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------ definition */

.aigp-definition {
  border-inline-start: 2px solid var(--wp--preset--color--signal);
  padding-inline-start: var(--wp--preset--spacing--50);
  margin-block: var(--wp--preset--spacing--60);
}
.aigp-definition p {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.4;
  color: var(--s-text-strong);
  margin: 0;
}

/* ------------------------------------------------------------ answer card */

.aigp-answer {
  background: var(--s-panel-2);
  border: 1px solid var(--s-border-2);
  border-radius: 8px;
  padding: var(--wp--preset--spacing--60);
  margin-block: var(--wp--preset--spacing--60);
}
.aigp-answer__q { font-size: var(--wp--preset--font-size--lg); margin: 0 0 var(--wp--preset--spacing--30); }
.aigp-answer__a { margin: 0; color: var(--s-text); }

/* ------------------------------------------------------------------ stats */

.aigp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--wp--preset--spacing--50);
  margin-block: var(--wp--preset--spacing--60);
}
.aigp-stat { margin: 0; padding: var(--wp--preset--spacing--50); border-top: 2px solid var(--s-accent); }
.aigp-stat__value { font-size: var(--wp--preset--font-size--3xl); line-height: 1; color: var(--s-text-strong); }
.aigp-stat__meta  { font-size: var(--wp--preset--font-size--xs); color: var(--s-text-muted); margin-block-start: var(--wp--preset--spacing--30); }

/* ------------------------------------------------------------------ cards */

.aigp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--wp--preset--spacing--50);
}
.aigp-card {
  display: block;
  padding: var(--wp--preset--spacing--60);
  background: var(--s-panel);
  border: 1px solid var(--s-border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--aigp-motion-base) var(--aigp-ease),
              box-shadow var(--aigp-motion-base) var(--aigp-ease),
              transform var(--aigp-motion-base) var(--aigp-ease);
}
a.aigp-card:hover {
  border-color: var(--s-border-2);
  box-shadow: var(--wp--preset--shadow--lift);
  transform: translateY(-2px);
}
.aigp-card__title { font-size: var(--wp--preset--font-size--md); margin: 0 0 var(--wp--preset--spacing--30); }
.aigp-card__body  { font-size: var(--wp--preset--font-size--sm); color: var(--s-text-muted); margin: 0; }

/* ---------------------------------------------------------------- buttons */

.aigp-btn {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  padding: 0.75rem 1.375rem;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--aigp-motion-fast) var(--aigp-ease),
              border-color var(--aigp-motion-fast) var(--aigp-ease),
              transform var(--aigp-motion-fast) var(--aigp-ease);
}
.aigp-btn:active { transform: translateY(1px); }
.aigp-btn--primary { background: var(--wp--preset--gradient--brand-edge); color: var(--wp--preset--color--canvas); font-weight: 650; }
.aigp-btn--primary:hover { background: var(--wp--preset--gradient--brand-sweep); }
.aigp-btn--ghost { background: transparent; color: var(--s-text-strong); border-color: var(--s-control); }
.aigp-btn--ghost:hover { border-color: var(--s-text-strong); background: var(--s-panel-2); }

/* ------------------------------------------------------------------- FAQ */

.aigp-faq { border-top: 1px solid var(--s-border); }
.aigp-faq__item { border-bottom: 1px solid var(--s-border); }
.aigp-faq__q {
  cursor: pointer; list-style: none;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--md);
  color: var(--s-text-strong);
  position: relative;
  transition: color var(--aigp-motion-fast) var(--aigp-ease);
}
.aigp-faq__q::-webkit-details-marker { display: none; }
.aigp-faq__q:hover { color: var(--s-link); } /* 9.35:1 */
.aigp-faq__q::after {
  content: ""; position: absolute; right: 0.25rem; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--aigp-motion-base) var(--aigp-ease);
}
.aigp-faq__item[open] .aigp-faq__q::after { transform: rotate(-135deg); margin-top: -2px; }
.aigp-faq__a { padding-block-end: var(--wp--preset--spacing--50); color: var(--s-text); }

/* ----------------------------------------------------------------- steps */

.aigp-steps { list-style: none; padding: 0; margin: var(--wp--preset--spacing--60) 0; counter-reset: step; }
.aigp-steps__item {
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--wp--preset--spacing--50);
  padding-block: var(--wp--preset--spacing--50);
  border-top: 1px solid var(--s-border);
}
.aigp-steps__n { color: var(--s-text-muted); font-size: var(--wp--preset--font-size--sm); }
.aigp-steps__item h3 { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--md); }
.aigp-steps__item p  { margin: 0; color: var(--s-text-muted); font-size: var(--wp--preset--font-size--sm); }

/* --------------------------------------------------------------- pricing */

.aigp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--wp--preset--spacing--40); }
.aigp-plan { padding: var(--wp--preset--spacing--60); border: 1px solid var(--s-border); border-radius: 8px; }
.aigp-plan__name  { font-size: var(--wp--preset--font-size--md); margin: 0 0 var(--wp--preset--spacing--30); }
.aigp-plan__price { font-size: var(--wp--preset--font-size--2xl); color: var(--s-text-strong); margin: 0 0 var(--wp--preset--spacing--50); }
.aigp-plan__period{ font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--sm); color: var(--s-text-muted); }

/* ------------------------------------------------------------------- CTA */

.aigp-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--70);
  background: var(--wp--preset--color--ink-900);
  border-radius: 10px;
  margin-block: var(--wp--preset--spacing--80);
}
.aigp-cta__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--preset--color--paper);
  margin: 0; max-width: 28ch;
}
.aigp-cta .aigp-btn--primary { background: var(--s-panel); color: var(--s-text-strong); }
.aigp-cta .aigp-btn--primary:hover { background: var(--wp--preset--gradient--brand-sweep); }

/* -------------------------------------------------------- fit / timeline */

.aigp-fit {
  border: 1px solid var(--s-border);
  border-left: 2px solid var(--wp--preset--color--amber);
  border-radius: 6px;
  padding: var(--wp--preset--spacing--60);
  background: var(--s-panel-2);
  margin-block: var(--wp--preset--spacing--60);
}
.aigp-fit__title, .aigp-timeline__title { font-size: var(--wp--preset--font-size--md); margin: 0 0 var(--wp--preset--spacing--30); }
.aigp-timeline { margin-block: var(--wp--preset--spacing--60); }

/* ------------------------------------------------------------ comparison */

.aigp-compare { overflow-x: auto; margin-block: var(--wp--preset--spacing--60); }
.aigp-compare__table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm); }
.aigp-compare__table th, .aigp-compare__table td {
  text-align: left; padding: var(--wp--preset--spacing--40);
  border-bottom: 1px solid var(--s-border); vertical-align: top;
}
.aigp-compare__table th { font-weight: 600; color: var(--s-text-strong); width: 30%; }

/* ------------------------------------------------------- team and quotes */

.aigp-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--wp--preset--spacing--50); }
.aigp-team__member { margin: 0; }
.aigp-team__member img { width: 100%; height: auto; border-radius: 6px; display: block; }
.aigp-team__member figcaption { margin-block-start: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--sm); }
.aigp-team__member figcaption span { display: block; color: var(--s-text-muted); }

.aigp-quote { border-left: 2px solid var(--wp--preset--color--verdigris); padding-inline-start: var(--wp--preset--spacing--50); margin-block: var(--wp--preset--spacing--60); }
.aigp-quote p { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--lg); margin: 0 0 var(--wp--preset--spacing--30); }
.aigp-quote cite { font-style: normal; font-size: var(--wp--preset--font-size--sm); color: var(--s-text-muted); }

/* ---------------------------------------------------------- verification */

.aigp-verify { display: flex; gap: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--xs); color: var(--s-text-muted); }
.aigp-verify__mark { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 0.45em; border-radius: 50%; background: var(--wp--preset--color--verdigris); }

/* --------------------------------------------------------------- prompts */

.aigp-prompts { margin-block: var(--wp--preset--spacing--60); }
.aigp-prompts__title { font-size: var(--wp--preset--font-size--lg); margin: 0 0 var(--wp--preset--spacing--40); }
.aigp-prompts ul { list-style: none; padding: 0; margin: 0; }
.aigp-prompts__item {
  padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  border-top: 1px solid var(--s-border);
  position: relative; max-width: none;
  font-family: var(--wp--preset--font-family--display);
  color: var(--s-text);
}
.aigp-prompts__item::before {
  content: "\201C"; position: absolute; left: 0; top: 0.55em;
  color: var(--s-text-muted);
  font-family: var(--wp--preset--font-family--display); font-size: 1.4em; line-height: 0;
}

/* ------------------------------------------------------------ dark blocks */

.aigp-dark { background: var(--wp--preset--color--ink-900); color: var(--wp--preset--color--ink-200); }
.aigp-dark h1, .aigp-dark h2, .aigp-dark h3 { color: var(--wp--preset--color--paper); }
.aigp-dark a { color: var(--wp--preset--color--blue-200); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 47.9375rem) {
  .aigp-section { padding-block: var(--wp--preset--spacing--70); }
  .aigp-cta { flex-direction: column; align-items: flex-start; padding: var(--wp--preset--spacing--60); }
  .aigp-steps__item { grid-template-columns: 2rem 1fr; gap: var(--wp--preset--spacing--40); }
  .aigp-compare__table th { width: 40%; }
  .aigp-btn { width: 100%; justify-content: center; }
  .aigp-cta .aigp-btn { width: auto; }
}

/* Touch devices get no hover transforms — they fire on tap and feel broken. */
@media (hover: none) {
  a.aigp-card:hover { transform: none; box-shadow: none; }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ print */

@media print {
  .aigp-cta, .aigp-skip, nav { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* --------------------------------------------------- enhancement layer */

.aigp-progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  height: 2px; width: 100%;
  background: var(--wp--preset--color--signal);
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 100; pointer-events: none;
}

[data-aigp-toc] { font-size: var(--wp--preset--font-size--sm); }
[data-aigp-toc] ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--s-border); }
[data-aigp-toc] li { margin: 0; }
[data-aigp-toc] a {
  display: block; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  color: var(--s-text-muted); text-decoration: none;
  border-left: 2px solid transparent; margin-left: -1px;
  transition: color var(--aigp-motion-fast) var(--aigp-ease), border-color var(--aigp-motion-fast) var(--aigp-ease);
}
[data-aigp-toc] a:hover { color: var(--s-link); }
[data-aigp-toc] a[data-current] { color: var(--s-text-strong); border-left-color: var(--s-accent); }

@media (min-width: 64rem) {
  [data-aigp-toc] { position: sticky; top: var(--wp--preset--spacing--80); }
}

[data-aigp-palette] { display: none; }
[data-aigp-palette][data-open] {
  display: block; position: fixed; inset-block-start: 12vh; inset-inline: 0;
  margin-inline: auto; max-width: 34rem; z-index: 200;
  background: var(--s-panel);
  border: 1px solid var(--s-border-2);
  border-radius: 10px; box-shadow: var(--wp--preset--shadow--over);
  padding: var(--wp--preset--spacing--40);
}
[data-aigp-palette] input {
  width: 100%; border: 0; padding: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--md); background: transparent;
  color: var(--s-text-strong);
}

[data-aigp-header] { transition: box-shadow var(--aigp-motion-base) var(--aigp-ease); }
[data-aigp-header][data-scrolled] { box-shadow: var(--wp--preset--shadow--card); }

/* Screen-reader-only utility. Required by the palette label and skip link. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto; margin: 0; clip: auto; white-space: normal;
}

.aigp-palette { display: none; }

/* ==========================================================================
   BRAND LAYER — derived from the official AIGuiderPRO logo
   Canvas #010419 · cyan #02E1FD · blue #0086FF · violet #5E33DE · lavender #A865ED
   The gradient is the logo's sweep, reused as the system's only gradient.
   ========================================================================== */

/* Dark surfaces are the brand canvas. ink-900 and canvas are the same value,
   so existing dark sections became brand-correct without markup changes. */
.aigp-dark,
.aigp-cta {
  background: var(--wp--preset--gradient--canvas-deep, var(--wp--preset--color--canvas));
}
.aigp-dark a { color: var(--wp--preset--color--cyan); }
.aigp-dark a:hover { color: var(--wp--preset--color--lavender); }

/* The signature: a 2px gradient edge lifted straight from the mark's sweep. */
.aigp-cta {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.aigp-cta::before {
  content: "";
  position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px;
  background: var(--wp--preset--gradient--brand-edge);
}

/* Hero on canvas, with the sweep bleeding in from the upper right as the
   logo's orbit does. Kept low-contrast so the H1 remains the LCP element. */
.aigp-hero--canvas {
  position: relative;
  background: var(--wp--preset--gradient--canvas-deep);
  color: var(--wp--preset--color--ink-200);
  isolation: isolate;
}
.aigp-hero--canvas::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60rem 32rem at 78% -10%, rgba(2,225,253,0.16), transparent 62%),
    radial-gradient(46rem 28rem at 96% 32%, rgba(105,63,235,0.20), transparent 66%);
  pointer-events: none;
}
.aigp-hero--canvas h1 { color: var(--wp--preset--color--paper); max-width: 18ch; }
.aigp-hero--canvas p  { max-width: 46ch; font-size: var(--wp--preset--font-size--md); }

/* Header: logo left, navigation right, never a stacked column. */
.aigp-header .wp-block-group { align-items: center; }
.aigp-header .wp-block-site-logo img { max-width: 180px; height: auto; }
@media (max-width: 47.9375rem) {
  .aigp-header .wp-block-site-logo img { max-width: 132px; }
}

/* Gradient headline accent. Falls back to solid where background-clip is
   unsupported, so the text is never invisible. */
.aigp-accent {
  color: var(--wp--preset--color--blue-600);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .aigp-accent {
    background: var(--wp--preset--gradient--brand-edge);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Glass panels — used sparingly, and only over the canvas where there is
   something behind them to refract. Glass over flat white is decoration. */
.aigp-glass {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: var(--wp--preset--spacing--60);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
@supports not (backdrop-filter: blur(1px)) {
  .aigp-glass { background: rgba(255,255,255,0.07); }
}
.aigp-glass h3 { color: var(--wp--preset--color--paper); }
.aigp-glass p  { color: var(--wp--preset--color--ink-200); }

/* Cards gain a gradient top edge on hover — the mark's motion, restrained. */
a.aigp-card { position: relative; overflow: hidden; }
a.aigp-card::after {
  content: "";
  position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px;
  background: var(--wp--preset--gradient--brand-edge);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--aigp-motion-base) var(--aigp-ease);
}
a.aigp-card:hover::after { transform: scaleX(1); }

/* Focus ring picks up the brand violet rather than the old warm accent. */
:root { --aigp-focus: var(--wp--preset--color--signal); }

/* Reading progress and the definition rule both carry the gradient. */
.aigp-progress { background: var(--wp--preset--gradient--brand-edge); }
.aigp-definition { border-image: var(--wp--preset--gradient--brand-edge) 1; }

/* Logo sizing: the mark needs breathing room equal to the cap height of the A. */
.wp-block-site-logo img { height: auto; }
.aigp-header .wp-block-site-logo { padding-block: var(--wp--preset--spacing--20); }

@media (prefers-reduced-motion: reduce) {
  a.aigp-card::after { transition: none; }
}

/* ==========================================================================
   PREMIUM LAYER — motion, depth and surface refinement
   Every effect is opt-out under prefers-reduced-motion and pointer:coarse.
   ========================================================================== */

body { background: var(--s-bg); color: var(--s-text); }

/* Ambient orbit wash on the page shell, echoing the mark. Fixed and
   non-repainting, so it costs nothing on scroll. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(52rem 30rem at 82% -6%, rgba(2,225,253,0.07), transparent 60%),
    radial-gradient(46rem 30rem at 8% 4%, rgba(94,51,222,0.09), transparent 62%);
}

/* Cards: raised panel, hairline edge, gradient reveal on hover. */
.aigp-card {
  background: linear-gradient(180deg, var(--s-panel) 0%, var(--s-bg-2) 100%);
  border-radius: 12px;
}
a.aigp-card:hover { box-shadow: var(--wp--preset--shadow--lift); }

/* Scroll reveal. Elements are visible by default and only hidden once JS
   confirms IntersectionObserver support — content is never lost to a
   failed script. */
[data-aigp-reveal] { opacity: 1; transform: none; }
html[data-aigp-ready] [data-aigp-reveal]:not([data-revealed]) {
  opacity: 0; transform: translateY(14px);
}
html[data-aigp-ready] [data-aigp-reveal] {
  transition: opacity 620ms var(--aigp-ease), transform 620ms var(--aigp-ease);
}
[data-revealed] { opacity: 1 !important; transform: none !important; }

/* Section rhythm: generous on desktop, tightened on small screens. */
.aigp-section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* Headings tighten as they scale up — large type needs less tracking. */
h1 { letter-spacing: -0.032em; }
h2 { letter-spacing: -0.024em; }
h3 { letter-spacing: -0.014em; }

/* Selection picks up the brand rather than the browser default. */
::selection { background: rgba(2,225,253,0.28); color: var(--wp--preset--color--paper); }

/* Custom scrollbar on dark — the default light track breaks the surface. */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--wp--preset--color--canvas); }
  ::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--hairline-2);
    border-radius: 8px; border: 3px solid var(--wp--preset--color--canvas);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--blue-600); }
}

/* Form controls inherit the surface instead of the browser's light default. */
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="url"], textarea, select {
  background: var(--s-panel);
  color: var(--s-text-strong);
  border: 1px solid var(--s-control);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  font: inherit;
  width: 100%;
  transition: border-color var(--aigp-motion-fast) var(--aigp-ease),
              box-shadow var(--aigp-motion-fast) var(--aigp-ease);
}
input::placeholder, textarea::placeholder { color: var(--s-text-faint); }
input:focus, textarea:focus, select:focus {
  border-color: var(--wp--preset--color--blue-600);
  box-shadow: 0 0 0 3px rgba(0,134,255,0.22);
  outline: none;
}
label { display: block; font-size: var(--wp--preset--font-size--sm); color: var(--s-text-muted); margin-block-end: var(--wp--preset--spacing--20); }

@media (prefers-reduced-motion: reduce) {
  html[data-aigp-ready] [data-aigp-reveal]:not([data-revealed]) { opacity: 1; transform: none; }
  body::before { display: none; }
}

/* --------------------------------------------------- header layout fixes */
/* The logo was rendering at its natural size. Cap it to the header rhythm. */
.aigp-header .wp-block-site-logo img,
.aigp-header .custom-logo {
  height: 46px !important;
  width: auto !important;
  max-width: none;
  display: block;
}
.aigp-header .wp-block-site-logo { line-height: 0; }
.aigp-header .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--md);
  color: var(--s-text-strong);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.aigp-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(1,4,25,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--s-border);
}
.aigp-header .wp-block-navigation a { color: var(--s-text); text-decoration: none; }
.aigp-header .wp-block-navigation a:hover { color: var(--s-link); }
@media (max-width: 47.9375rem) {
  .aigp-header .wp-block-site-logo img { height: 36px !important; }
  .aigp-header .wp-block-site-title { display: none; }
}

/* ------------------------------------------------ header row, hardened */
/* Belt-and-braces: even if layout classes are stripped by a plugin or an
   older WordPress, the header stays a single horizontal row. */
.aigp-header > .wp-block-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
  flex-wrap: nowrap;
  max-width: var(--wp--style--global--wide-size, 72rem);
  margin-inline: auto;
  width: 100%;
}
.aigp-header .wp-block-navigation__container {
  flex-wrap: nowrap;
  gap: var(--wp--preset--spacing--50);
}
.aigp-header .wp-block-navigation { flex: 0 1 auto; }
.aigp-header .wp-block-site-title { flex: 0 0 auto; }

/* Hero: constrain the copy even when alignfull is applied to the wrapper. */
.aigp-hero--canvas > * {
  max-width: var(--wp--style--global--wide-size, 72rem);
  margin-inline: auto;
  width: 100%;
}
.aigp-hero--canvas p { max-width: 44rem; }

@media (max-width: 61.9375rem) {
  .aigp-header > .wp-block-group { flex-wrap: wrap; }
}

/* =========================================================================
   HEADER ROW — structure-independent.
   Works whether or not WordPress emits layout classes, and regardless of
   how deeply the logo/nav/button are nested.
   ========================================================================= */
header.aigp-header {
  display: block !important;
  padding-inline: var(--wp--preset--spacing--50);
}
header.aigp-header > .wp-block-group,
header.aigp-header > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: var(--wp--preset--spacing--50);
  max-width: 72rem;
  margin-inline: auto;
  width: 100%;
}
header.aigp-header > div > .wp-block-group,
header.aigp-header > div > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--wp--preset--spacing--50);
  flex-wrap: nowrap !important;
}
header.aigp-header .wp-block-navigation,
header.aigp-header .wp-block-navigation__container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: var(--wp--preset--spacing--50);
  margin: 0;
}
header.aigp-header .wp-block-navigation-item { margin: 0; }
header.aigp-header .wp-block-site-title { margin: 0; white-space: nowrap; }
header.aigp-header .wp-block-buttons { margin: 0; }

@media (max-width: 61.9375rem) {
  header.aigp-header .wp-block-site-title { display: none; }
  header.aigp-header .wp-block-navigation__container { flex-wrap: wrap !important; }
}

/* =========================================================================
   1.1.1 CORRECTIONS
   ========================================================================= */

/* The header row rule was matching the command palette and the skip link,
   forcing both visible. Exclude anything that is not the header bar. */
header.aigp-header > div[data-aigp-palette],
header.aigp-header > .aigp-palette {
  display: none !important;
}
header.aigp-header > div[data-aigp-palette][data-open] {
  display: block !important;
  position: fixed; inset-block-start: 12vh; inset-inline: 0;
  margin-inline: auto; max-width: 34rem; z-index: 200;
}
header.aigp-header > a.aigp-skip { display: inline-block !important; }

/* Hero: deterministic size and alignment. Left-aligned, full measure. */
.aigp-hero--canvas { text-align: left; }
.aigp-hero--canvas h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.5rem) !important;
  line-height: 1.04;
  letter-spacing: -0.032em;
  max-width: 20ch;
  margin: 0 0 var(--wp--preset--spacing--50);
}
.aigp-hero--canvas p {
  font-size: var(--wp--preset--font-size--md);
  max-width: 56ch;
  margin-inline: 0;
}
.aigp-hero--canvas .wp-block-buttons { justify-content: flex-start; }

/* Section headings were rendering at body size. Set them explicitly. */
main h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); margin-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40); }
main h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
main h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.08; }

/* Header proportions: larger mark, quieter wordmark, nav on one line. */
.aigp-header .wp-block-site-logo img,
.aigp-header .custom-logo { height: 54px !important; }
.aigp-header .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 1rem !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--s-text-muted);
}
header.aigp-header .wp-block-navigation {
  font-size: 0.9375rem;
  flex: 1 1 auto;
  justify-content: flex-end;
}
header.aigp-header .wp-block-navigation__container {
  gap: 1.35rem !important;
  row-gap: 0.5rem;
}
header.aigp-header .wp-block-buttons .wp-block-button__link {
  white-space: nowrap;
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
}

@media (max-width: 74rem) {
  header.aigp-header .wp-block-site-title { display: none; }
  header.aigp-header .wp-block-navigation { font-size: 0.875rem; }
  header.aigp-header .wp-block-navigation__container { gap: 1rem !important; }
}

/* ------------------------------------------------------- illustrations */
.aigp-illus {
  margin: var(--wp--preset--spacing--60) 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--s-border);
  background: var(--s-panel);
  box-shadow: var(--wp--preset--shadow--card);
}
.aigp-illus img { display: block; width: 100%; height: auto; }

/* Homepage split: copy left, artwork right. */
.aigp-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--wp--preset--spacing--80);
  align-items: center;
}
.aigp-split .aigp-illus { margin: 0; }
@media (max-width: 61.9375rem) {
  .aigp-split { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
}