/* Performance Marketing side — modelled on midnightlabs.ai, painted as the
   dark mode of the Website Design brand (green-black + the same #39FF14 neon).
   Loaded after styles.css and base.css; repaints legacy tokens and styles the new hero. */

:root[data-theme="performance"] {
  color-scheme: dark;
  --bg: #060B08;
  --bg-soft: #09100C;
  --bg-tint: #0C1510;
  --bg-warm: #09100C;
  --surface: #0B120E;
  --surface-strong: #0F1812;
  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, 0.72);
  --ink-muted: rgba(255, 255, 255, 0.54);
  --on-ink: #060B08;
  --ink-rgb: 255, 255, 255;
  --bg-rgb: 6, 11, 8;
  --surface-rgb: 11, 18, 14;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --accent: #39FF14;
  --accent-soft: rgba(57, 255, 20, 0.12);
  --accent-strong: #39FF14;
  --success: #4ADE80;
  --footer: #040705;
  --footer-line: rgba(255, 255, 255, 0.08);
  --surface-card-bg: rgba(255, 255, 255, 0.03);
  --surface-card-muted-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  --surface-card-soft-bg: rgba(255, 255, 255, 0.025);
  --surface-card-border: rgba(255, 255, 255, 0.08);
  --surface-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --pill-bg: rgba(255, 255, 255, 0.06);
  --icon-chip-bg: #0F1812;
  --icon-chip-color: #FFFFFF;
  --focus: #39FF14;
  --header-bg: rgba(6, 11, 8, 0.72);

  /* Legacy fine-tuning tokens (styles.css) */
  --ink-strong: #39FF14;
  --ink-max: #6BFF4F;
  --bg-gradient-end: #060B08;
  --glass-rgb: 6, 11, 8;
  --band-rgb: 11, 18, 14;
  --ticker-fade-rgb: 6, 11, 8;
  --logo-chip-bg: #0F1812;

  /* Type D (round 3): Inter Tight headings, Instrument Serif italic accents,
     Inter body (opsz axis loaded, so large body text gets the display cut). */
  --font-display: "Inter Tight", "Inter", "Noto Sans Thai", system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-body: "Inter", "Noto Sans Thai", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.035em;
  --display-leading: 1.12;
  --display-case: none;
  --text-body: 16px;
  --text-heading-xl: clamp(36px, 4.4vw, 60px);
  --text-heading-lg: clamp(32px, 3.8vw, 52px);
  --text-heading-md: clamp(28px, 3.2vw, 44px);
  --text-heading-sm: clamp(22px, 2.2vw, 30px);

  /* Same width as the Website Design side so the header lines up across the wipe */
  --max-width: 1240px;
  --section-y: clamp(72px, 9vw, 128px);
  --radius: 24px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --toggle-bg: rgba(255, 255, 255, 0.05);
  --toggle-border: 1px solid rgba(255, 255, 255, 0.1);
  --toggle-ink: rgba(255, 255, 255, 0.64);
  --toggle-ink-hover: #FFFFFF;
  --toggle-active-bg: #39FF14;
  --toggle-active-ink: #041006;
  --toggle-active-shadow: 0 0 24px rgba(57, 255, 20, 0.25);
  --toggle-font: 500 13px/12px var(--font-body);

  --btn-font: 500 14px/1 var(--font-body);
  --btn-tracking: 0;
  --btn-case: none;

  /* Motion tokens (same curves as the design side) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.34, 1.45, .64, 1);
}

[data-theme="performance"] body {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(57, 255, 20, 0.07), transparent 62%),
    var(--bg);
}
/* Performance page: a faint scanline texture scrolling with the page (part of
   the body background, so no extra layer). 1.3% white on #060B08 moves body
   text contrast by well under 1%. */
[data-theme="performance"] body.p-page {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(57, 255, 20, 0.07), transparent 62%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.013) 0 1px, transparent 1px 4px),
    var(--bg);
}
/* The legacy light grid overlay reads as noise on the dark page */
[data-theme="performance"] body::before { display: none; }
[data-theme="performance"] ::selection { background: rgba(57, 255, 20, 0.35); color: #fff; }

/* Two-tone headlines. Body <em> stays in the body face; in headings the accent
   words (<em>, and the .p-muted second lines) switch to Instrument Serif italic.
   The serif has a small x-height next to Inter Tight, so it runs at 1.1em; its
   line-height is pulled in to match (so the line box doesn't grow), and a hair
   of right padding keeps the italic overhang off the next word.
   Colour: <em> is the neon key word, .p-muted is soft white. */
[data-theme="performance"] em { font-family: inherit; }
[data-theme="performance"] :is(h1, h2, h3) :is(em, .p-muted),
[data-theme="performance"] .p-serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 400; font-synthesis: none;
  font-size: 1.1em; line-height: .86; letter-spacing: -0.01em; padding-right: .045em;
}
[data-theme="performance"] :is(h1, h2, h3) em { color: var(--accent); }
[data-theme="performance"] :is(h1, h2, h3) .p-muted { color: rgba(232, 242, 235, 0.74); }

/* Buttons */
[data-theme="performance"] .btn--primary {
  background: var(--accent); color: #041006;
  box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.5), 0 10px 36px -8px rgba(57, 255, 20, 0.55);
}
[data-theme="performance"] .btn--primary:hover { background: #6BFF4F; box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.7), 0 14px 44px -8px rgba(57, 255, 20, 0.7); }
[data-theme="performance"] .btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); }
[data-theme="performance"] .btn--ghost:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.04); }

/* Header: toggle is the same footprint as on the Website Design side, so the
   wipe reads as the same page flipping (design toggle = 2px border + mono caps). */
[data-theme="performance"] .service-toggle { border-width: 2px; }

/* Legacy wrappers share the new container width */
[data-theme="performance"] .section,
[data-theme="performance"] .section-shell,
[data-theme="performance"] .footer-inner,
[data-theme="performance"] .hero-proof-title { width: min(100% - 32px, var(--max-width)); }
@media (min-width: 768px) {
  [data-theme="performance"] .section,
  [data-theme="performance"] .section-shell,
  [data-theme="performance"] .footer-inner,
  [data-theme="performance"] .hero-proof-title { width: min(100% - 64px, var(--max-width)); }
}

/* Links inside running text stay identifiable without colour (WCAG 1.4.1) */
[data-theme="performance"] p a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(57, 255, 20, 0.5); }

/* ---------- Legacy component repaint ---------- */

/* Type */
[data-theme="performance"] :is(.section-head h2, .mission-copy h2, .case-study-copy h3, .final-cta-content h2, .faq-header h2, .footer-head h2, .free-audit-copy h2, .process-step h3, .comparison-heading) {
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.08;
}
[data-theme="performance"] .body-copy { font-weight: 400; }
[data-theme="performance"] .section-head { align-items: center; text-align: center; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
[data-theme="performance"] .section-head h2 { max-width: 20ch; }

/* Pills: hairline border + a neon status dot */
[data-theme="performance"] .pill-badge,
[data-theme="performance"] .final-cta-content .section-pill {
  padding: 7px 14px 7px 26px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--ink-soft); font-size: 13px; font-weight: 500; letter-spacing: 0;
}
[data-theme="performance"] .pill-badge::before { background: rgba(255, 255, 255, 0.03); }
[data-theme="performance"] .pill-badge::after {
  content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(57, 255, 20, 0.8);
}

/* Chips: dark glass instead of a white halo */
[data-theme="performance"] .icon-chip {
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 32px rgba(0, 0, 0, 0.55);
}
[data-theme="performance"] .logo-img { border: 1px solid var(--line-strong); box-shadow: none; }
[data-theme="performance"] .logo-text { font-weight: 600; letter-spacing: -0.02em; }

/* Free audit card */
[data-theme="performance"] .free-audit-card {
  margin-top: clamp(56px, 7vw, 96px);
  background: radial-gradient(700px 360px at 0% 0%, rgba(57, 255, 20, 0.08), transparent 70%), var(--surface-card-bg);
}
[data-theme="performance"] .free-audit-copy .body-copy { font-size: 16px; }
[data-theme="performance"] .free-audit-check { background: rgba(255, 255, 255, 0.02); border-color: var(--line); align-items: center; }
[data-theme="performance"] .free-audit-check-icon {
  width: 40px; height: 40px; margin-top: 0; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(57, 255, 20, 0.2), rgba(57, 255, 20, 0.05));
  border: 1px solid rgba(57, 255, 20, 0.25); color: var(--accent);
}
[data-theme="performance"] .free-audit-check-icon svg { width: 18px; height: 18px; }
[data-theme="performance"] .free-audit-check strong { font-weight: 600; }

/* Mission */
[data-theme="performance"] .mission-layout {
  background: radial-gradient(640px 320px at 100% 0%, rgba(57, 255, 20, 0.07), transparent 70%), var(--surface-card-muted-bg);
}

@media (min-width: 960px) {
  /* Heading left, copy right, so the card isn't half empty */
  [data-theme="performance"] .mission-copy { display: flow-root; }
  [data-theme="performance"] .mission-copy > .section-pill,
  [data-theme="performance"] .mission-copy > h2 { float: left; clear: left; width: 44%; }
  [data-theme="performance"] .mission-copy > .section-pill { width: fit-content; }
  [data-theme="performance"] .mission-copy > p { margin-left: 52%; max-width: none; }
  [data-theme="performance"] .mission-copy > p:first-of-type { margin-top: 58px; }
}

/* Case studies */
[data-theme="performance"] .results { background: linear-gradient(180deg, rgba(var(--band-rgb), 0.6) 0%, rgba(var(--bg-rgb), 0) 100%); border-top: 1px solid var(--line); }
[data-theme="performance"] .case-study { background: rgba(255, 255, 255, 0.02); }
[data-theme="performance"] .case-study-kicker { color: var(--accent); letter-spacing: 0.14em; }
[data-theme="performance"] .case-study-media { background: var(--surface); }
[data-theme="performance"] .case-study-metrics > div { border-top: 1px solid var(--line); padding-top: 16px; }
[data-theme="performance"] .metric-number { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; color: #fff; }
[data-theme="performance"] .metric-label { color: var(--ink-soft); font-size: 15px; font-weight: 400; }
[data-theme="performance"] .case-study-media { position: relative; }
[data-theme="performance"] .case-study-media img { filter: saturate(.9) brightness(.82); }
[data-theme="performance"] .case-study-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line), inset 0 0 80px rgba(6, 11, 8, 0.45); border-radius: inherit; }

@media (max-width: 1120px) {
  /* Legacy bug: the reverse card pins copy to column 2, which adds an implicit
     column once the grid collapses to one column. */
  [data-theme="performance"] .case-study--reverse .case-study-media,
  [data-theme="performance"] .case-study--reverse .case-study-copy { grid-column: auto; grid-row: auto; }
  [data-theme="performance"] .case-study-media { min-height: 0; aspect-ratio: 16 / 10; }
  [data-theme="performance"] .testimonial-image { min-height: 0; height: clamp(220px, 36vw, 320px); }
}

/* Process: three cards on desktop, stacked list below */
[data-theme="performance"] .process-icon-card {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(57, 255, 20, 0.2), rgba(57, 255, 20, 0.05));
  border: 1px solid rgba(57, 255, 20, 0.25); color: var(--accent);
}
[data-theme="performance"] .process-icon-card svg { width: 24px; height: 24px; }
[data-theme="performance"] .process-step p { color: var(--ink-soft); }
[data-theme="performance"] .process-step h3 { font-size: clamp(22px, 2vw, 26px); margin-bottom: 10px; }
[data-theme="performance"] .process-step {
  padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}
@media (min-width: 960px) {
  [data-theme="performance"] .process-list { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  [data-theme="performance"] .process-step { grid-template-columns: 1fr; gap: 28px; align-content: start; }
}
@media (min-width: 761px) and (max-width: 959px) {
  [data-theme="performance"] .process-step { grid-template-columns: 56px 1fr; }
}
@media (max-width: 760px) {
  [data-theme="performance"] .process-step { text-align: left; grid-template-columns: 1fr; gap: 20px; }
  [data-theme="performance"] .process-icon-card { margin: 0; }
}

/* Testimonial */
[data-theme="performance"] .testimonial-quote-badge { background: var(--accent); color: #041006; border-color: rgba(57, 255, 20, 0.6); box-shadow: 0 0 40px rgba(57, 255, 20, 0.3); }
[data-theme="performance"] .testimonial-quote-badge span { font-family: var(--font-display); font-style: normal; font-weight: 600; transform: translateY(14px); }
[data-theme="performance"] .testimonial-inner blockquote { font-weight: 500; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.2; letter-spacing: -0.025em; }
[data-theme="performance"] .testimonial-inner cite { font-weight: 600; }
/* The Golfnest tile fills its card instead of floating as a pasted square */
[data-theme="performance"] .testimonial-image-card { padding: 0; overflow: hidden; background: #617361; }
[data-theme="performance"] .testimonial-image { border-radius: 0; min-height: 320px; }
[data-theme="performance"] .testimonial-image img { object-fit: contain; padding: 0; }

/* Comparison */
[data-theme="performance"] .comparison-heading { font-weight: 500; }
[data-theme="performance"] .comparison-col--other { background: rgba(255, 255, 255, 0.015); }
[data-theme="performance"] .comparison-col--other .comparison-list li { color: rgba(255, 255, 255, 0.58); font-weight: 400; }
[data-theme="performance"] .comparison-col--us {
  border-color: rgba(57, 255, 20, 0.3);
  background: radial-gradient(120% 70% at 50% 0%, rgba(57, 255, 20, 0.1), transparent 60%), rgba(255, 255, 255, 0.02);
  box-shadow: 0 30px 80px -30px rgba(57, 255, 20, 0.25);
}
[data-theme="performance"] .comparison-col--us .comparison-list li { color: #fff; font-weight: 500; }
[data-theme="performance"] .comparison-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%2339FF14'/%3E%3Cpath d='M6 10.2 8.6 12.8 14.2 7.2' fill='none' stroke='%23041006' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="performance"] .comparison-col--other .comparison-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='%23FFFFFF' fill-opacity='.06' stroke='%23FFFFFF' stroke-opacity='.18'/%3E%3Cpath d='M7.2 7.2 12.8 12.8M12.8 7.2 7.2 12.8' fill='none' stroke='%23FFFFFF' stroke-opacity='.55' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* FAQ */
[data-theme="performance"] .faq-mark-icon rect { fill: var(--accent); }
[data-theme="performance"] .faq-mark-icon path { stroke: #041006; }
[data-theme="performance"] .faq-mark-icon circle { fill: #041006; }
[data-theme="performance"] .faq-item { margin-bottom: 0; }
[data-theme="performance"] .faq-trigger { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); font-size: 17px; font-weight: 500; transition: border-color .2s ease, background-color .2s ease; }
[data-theme="performance"] .faq-trigger:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); }
[data-theme="performance"] .faq-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 400; }
[data-theme="performance"] .faq-item.active .faq-icon { background: var(--accent); color: #041006; }
[data-theme="performance"] .faq-answer p { color: var(--ink-soft); }

/* Final CTA */
[data-theme="performance"] .final-cta { background: radial-gradient(800px 400px at 50% 100%, rgba(57, 255, 20, 0.16), transparent 70%); }
[data-theme="performance"] .final-cta-card { border-color: rgba(57, 255, 20, 0.18); }
[data-theme="performance"] .final-cta-content .body-copy { font-size: 17px; }
[data-theme="performance"] .founder-memo em { color: #fff; font-style: italic; }

/* Floating CTA */
[data-theme="performance"] .floating-cta {
  background: var(--accent); color: #041006; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.5), 0 12px 36px -8px rgba(57, 255, 20, 0.6);
}
[data-theme="performance"] .floating-cta:hover { background: #6BFF4F; }

/* Footer */
[data-theme="performance"] .footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 240px); }
[data-theme="performance"] .footer-inner { padding: clamp(56px, 7vw, 96px) 0 40px; }
[data-theme="performance"] .footer-head h2 { letter-spacing: -0.035em; }
[data-theme="performance"] .footer-socials a { background: rgba(255, 255, 255, 0.06); color: #fff; border: 1px solid var(--line); }
[data-theme="performance"] .footer-socials a:hover { background: var(--accent); color: #041006; }
[data-theme="performance"] .footer-col h4 { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
[data-theme="performance"] .footer-col a:hover { color: var(--accent); }
[data-theme="performance"] .footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; }
[data-theme="performance"] .footer-bottom p { color: var(--ink-muted); }


/* =====================================================================
   Performance Marketing page (round 3: BlueAlpha structure, our colours).
   Loaded with base.css only (no legacy styles.css). Everything below is
   scoped to classes that only exist on /performance-marketing, so the
   legacy case-study pages above are untouched.

   Rhythm: dark green-black sections alternate with brand sage sections,
   joined by pixel-dither bands (.p-px). Neon is the accent everywhere; on
   sage it is only ever a fill or a highlighter behind ink, never text.
   ===================================================================== */

:root[data-theme="performance"] {
  --night: #060B08;
  --night-2: #0B120E;
  --sage: #EEF3EC;
  --sage-2: #E2EADF;
  --paper: #F8FBF6;
  --ink-l: #0C0C0B;
  --neon: #39FF14;
  --neon-hi: #6BFF4F;
  --neon-mid: #1E9A0B;
  --neon-deep: #0E5A06;
  --neon-ink: #041006;
  --font-mono: "Fragment Mono", "Noto Sans Thai", ui-monospace, SFMono-Regular, Menlo, monospace;
  --p-ink-2: rgba(255, 255, 255, 0.66);   /* body copy on night: 9.4:1 */
  --p-ink-3: rgba(255, 255, 255, 0.54);   /* small print on night: 6.6:1 */
  --p-sec-y: clamp(80px, 9vw, 136px);
  --p-hdr: 76px;                          /* header height the hero slides under */
}
@media (max-width: 1023px) { :root[data-theme="performance"] { --p-hdr: 124px; } }

/* ---------- Section modes ----------
   Tokens inherit from the nearest mode, so a dark card inside a sage
   section (the final CTA) gets dark tokens without extra overrides. */
.p-dark {
  --s-bg: var(--night); --s-ink: #FFFFFF; --s-ink-2: var(--p-ink-2); --s-ink-3: var(--p-ink-3);
  --s-line: rgba(255, 255, 255, 0.1); --s-line-2: rgba(255, 255, 255, 0.18);
  --em-ink: var(--neon); --em-mark: none; --em-glow: 0 0 42px rgba(57, 255, 20, 0.35);
  color: var(--s-ink);
}
.p-light {
  --s-bg: var(--sage); --s-ink: var(--ink-l); --s-ink-2: rgba(12, 12, 11, 0.74); --s-ink-3: rgba(12, 12, 11, 0.64);
  --s-line: rgba(12, 12, 11, 0.12); --s-line-2: rgba(12, 12, 11, 0.22);
  --em-ink: var(--ink-l); --em-glow: none;
  --em-mark: linear-gradient(180deg, transparent 54%, var(--neon) 54%, var(--neon) 92%, transparent 92%);
  color: var(--s-ink); color-scheme: light;
}
.p-sec.p-dark, .p-sec.p-light { background-color: var(--s-bg); }
.p-sec { padding-block: var(--p-sec-y); }

/* ---------- Type ---------- */
.p-h1 { font-size: clamp(48px, 6.1vw, 88px); line-height: .96; letter-spacing: -0.045em; }
.p-h2 { font-size: clamp(34px, 4.1vw, 58px); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.p-h3 { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.2; letter-spacing: -0.02em; }
.p-lede { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; color: var(--s-ink-2); max-width: 48ch; }
.p-body { color: var(--s-ink-2); font-size: 17px; line-height: 1.6; }
.p-label { font: 500 13px/1.2 var(--font-body); color: rgba(255, 255, 255, 0.72); }
/* Accent words: neon on night; on sage an ink word over a neon highlighter
   that sweeps in with the heading (static and full without motion). */
.p-page :is(h1, h2, h3) em {
  color: var(--em-ink); text-shadow: var(--em-glow);
  background-image: var(--em-mark); background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.p-light :is(h1, h2) em { padding-inline: .06em .1em; margin-inline: -.03em; }
.js-motion .p-light [data-split]:not(.visible) em { background-size: 0% 100%; }
.js-motion .p-light [data-split] em { transition: background-size .9s var(--ease-out) .35s; }
.p-unit { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; font-size: .72em; margin-left: .03em; }
.p-unit--pre { font-size: .6em; margin: 0 .04em 0 0; vertical-align: .34em; }

/* ---------- Label chip: two-tone pixel icon + mono label ---------- */
.p-chip {
  display: inline-flex; align-items: stretch; width: fit-content; height: 26px;
  font: 400 12px/1 var(--font-mono); letter-spacing: .02em; color: var(--neon-ink);
}
.p-chip__icon {
  flex: none; width: 21px; align-self: stretch;
  background: linear-gradient(90deg, var(--neon-deep) 0 33.4%, var(--neon-mid) 0 66.7%, var(--sage) 0);
}
.p-light .p-chip__icon { background: linear-gradient(90deg, var(--ink-l) 0 33.4%, var(--neon-mid) 0 66.7%, #FFFFFF 0); }
.p-chip__text { display: inline-flex; align-items: center; padding: 1px 10px 0; background: var(--neon); white-space: nowrap; }

/* ---------- Pixel notch corners (BlueAlpha's signature) ----------
   Two 2x2 pixel blocks at the top-right and bottom-left corners: a light
   corner pixel flanked by two darker ones. Pure background layers, so the
   element's ::before/::after stay free. Set --fill instead of background. */
.notch, .p-btn {
  --px: 6px; --n-l: var(--sage); --n-d: rgba(255, 255, 255, 0.2); --fill: transparent;
  background:
    conic-gradient(var(--n-l) 0 25%, var(--n-d) 0 50%, #0000 0 75%, var(--n-d) 0) 100% 0 / calc(var(--px) * 2) calc(var(--px) * 2) no-repeat border-box,
    conic-gradient(#0000 0 25%, var(--n-d) 0 50%, var(--n-l) 0 75%, var(--n-d) 0) 0 100% / calc(var(--px) * 2) calc(var(--px) * 2) no-repeat border-box,
    var(--fill);
}

/* ---------- Buttons: sharp, notched, label roll ---------- */
.p-page .p-btn {
  --px: 5px; position: relative; min-height: 50px; padding: 0 18px 0 22px; gap: 14px; border-radius: 0;
  font: 500 15px/1 var(--font-body); letter-spacing: -0.005em;
  transition: transform .2s var(--ease-out), color .2s ease;
}
.p-page .p-btn:hover { transform: translateY(-2px); }
.p-page .p-btn:active { transform: translateY(1px) scale(.98); }
.p-btn--neon { --fill: var(--neon); --n-l: var(--sage); --n-d: var(--neon-mid); color: var(--neon-ink); }
.p-btn--neon:hover { --fill: var(--neon-hi); }
.p-btn--sage { --fill: var(--sage); --n-l: var(--neon); --n-d: #B4C3AF; color: var(--ink-l); }
.p-btn--sage:hover { --fill: #FFFFFF; }
.p-btn--ink { --fill: var(--ink-l); --n-l: var(--sage); --n-d: #3A4A3D; color: #FFFFFF; }
.p-btn--ink:hover { --fill: #1B241E; }
.p-page .p-btn .btn__icon { display: grid; place-items: center; width: 16px; height: 16px; }
.p-page .p-btn .btn__icon svg { width: 15px; height: 15px; }
.p-page .p-btn:hover .btn__icon svg { transform: translateX(3px); }
.p-page .p-btn .btn__icon svg { transition: transform .35s var(--ease-out); }
.p-link {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font: 500 15px/1.2 var(--font-body); color: var(--s-ink);
  text-decoration: underline; text-decoration-color: var(--neon-mid); text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.p-dark .p-link { color: var(--neon); text-decoration-color: rgba(57, 255, 20, 0.45); }
.p-link svg { width: 15px; height: 15px; transition: transform .35s var(--ease-out); }
.p-link:hover svg { transform: translateX(4px); }

/* ---------- Pixel-dither bands between dark and sage ----------
   The band shows the colour above; a 12px-cell mask (denser towards the
   bottom) lets the colour below dissolve up into it. A sparse second mask
   twinkles in pixel steps while motion is on; static otherwise. */
.p-px { --c-top: var(--sage); --c-bot: var(--night); position: relative; height: 72px; background: var(--c-top); overflow: hidden; }
.p-px--to-light { --c-top: var(--night); --c-bot: var(--sage); }
.p-px::before, .p-px::after { content: ""; position: absolute; inset: 0; background: var(--c-bot); }
.p-px::before {
  -webkit-mask: url("/assets/perf/pixel-band.svg") 0 100% / 480px 72px repeat-x;
  mask: url("/assets/perf/pixel-band.svg") 0 100% / 480px 72px repeat-x;
}
.p-px::after {
  opacity: 0;
  -webkit-mask: url("/assets/perf/pixel-spark.svg") 0 100% / 480px 72px repeat-x;
  mask: url("/assets/perf/pixel-spark.svg") 0 100% / 480px 72px repeat-x;
}
.js-motion .p-px::after { opacity: 1; animation: p-px-twinkle 5.4s steps(1, end) infinite; }
.p-px--to-light::before, .p-px--to-light::after { transform: scaleX(-1); }
@keyframes p-px-twinkle {
  0% { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  25% { -webkit-mask-position: -132px 100%; mask-position: -132px 100%; }
  50% { -webkit-mask-position: -276px 100%; mask-position: -276px 100%; }
  75% { -webkit-mask-position: -84px 100%; mask-position: -84px 100%; }
}
@media (max-width: 599px) {
  .p-px { height: 54px; }
  .p-px::before, .p-px::after { -webkit-mask-size: 360px 54px; mask-size: 360px 54px; }
}
@media (prefers-reduced-motion: reduce) { .p-px::after { animation: none !important; opacity: 0; } }

/* ---------- Section heads ---------- */
.p-head { display: grid; gap: 20px; justify-items: center; text-align: center; }
.p-head .p-h2 { max-width: 19ch; margin-inline: auto; }
.p-head__sub { color: var(--s-ink-2); font-size: 17px; line-height: 1.55; max-width: 52ch; }
.p-head--split { justify-items: start; text-align: left; }
.p-head--split .p-h2 { margin-inline: 0; max-width: 17ch; }
.p-head__main { display: grid; gap: 20px; justify-items: start; }
@media (min-width: 900px) {
  .p-head--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .p-head--split .p-head__sub { max-width: 40ch; justify-self: end; padding-top: 46px; }
}

/* ---------- 1. Hero ---------- */
.p-hero {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; align-items: flex-end;
  min-height: clamp(640px, 100svh, 940px); margin-top: calc(-1 * var(--p-hdr));
  padding: calc(var(--p-hdr) + 72px) 0 clamp(44px, 5.4vw, 80px);
  background: var(--night);
}
.p-hero__field {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Static stand-in for the canvas (no JS, first paint, the toggle wipe):
     soft neon terrain glow + a fine dot dither, both fading out bottom-left. */
  background:
    radial-gradient(55% 60% at 78% 22%, rgba(57, 255, 20, 0.34), transparent 70%),
    radial-gradient(40% 45% at 58% 48%, rgba(30, 154, 11, 0.32), transparent 72%),
    radial-gradient(70% 55% at 96% 70%, rgba(14, 90, 6, 0.55), transparent 75%),
    linear-gradient(180deg, #071209, var(--night));
}
.p-hero__field::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(205, 255, 190, 0.5) 0 1px, transparent 1.4px) 0 0 / 6px 6px;
  -webkit-mask-image: radial-gradient(60% 65% at 80% 25%, #000, transparent 72%);
  mask-image: radial-gradient(60% 65% at 80% 25%, #000, transparent 72%);
}
.p-hero__field::after {
  /* legibility scrim behind the title, plus a fade into the next section */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 62% at 8% 92%, rgba(6, 11, 8, 0.9), rgba(6, 11, 8, 0.55) 48%, transparent 78%),
    linear-gradient(0deg, rgba(6, 11, 8, 0.65), transparent 34%),
    linear-gradient(180deg, rgba(6, 11, 8, 0.92), rgba(6, 11, 8, 0.5) calc(var(--p-hdr) * .9), transparent calc(var(--p-hdr) * 1.9));
}
.p-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; image-rendering: pixelated; }
.p-field.is-live { opacity: 1; }
.via-switch .p-field { transition: none; }
.p-hero__field.is-live::before, .p-final__field.is-live::before { opacity: 0; transition: opacity .9s ease; }
.p-hero__inner { display: grid; gap: 40px; align-items: end; }
.p-hero__copy { display: grid; justify-items: start; }
.p-hero__chip { margin-bottom: clamp(20px, 2.2vw, 28px); }
.p-hero .p-h1 { max-width: 13ch; }
.p-hero .p-lede { margin-top: clamp(18px, 2vw, 26px); color: rgba(255, 255, 255, 0.8); }
.p-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: clamp(26px, 2.6vw, 36px); }
@media (min-width: 1024px) {
  .p-hero__inner { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; }
  .p-hero .p-h1 { max-width: none; }
}
@media (max-width: 1023px) { .p-readout { display: none; } }
@media (max-width: 599px) {
  .p-hero { min-height: clamp(600px, 92svh, 860px); }
  .p-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .p-hero__ctas .p-btn { justify-content: space-between; }
}

/* Hero readout: the demo dashboard's YTD KPIs as a live feed (sample data). */
.p-readout {
  --px: 6px; --n-l: var(--neon); --n-d: rgba(57, 255, 20, 0.35);
  --fill: linear-gradient(180deg, rgba(10, 20, 14, 0.78), rgba(6, 11, 8, 0.86));
  position: relative; border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  background:
    conic-gradient(var(--n-l) 0 25%, var(--n-d) 0 50%, #0000 0 75%, var(--n-d) 0) 100% 0 / 12px 12px no-repeat border-box,
    conic-gradient(#0000 0 25%, var(--n-d) 0 50%, var(--n-l) 0 75%, var(--n-d) 0) 0 100% / 12px 12px no-repeat border-box,
    var(--fill);
}
.p-kpis { display: grid; gap: 0; padding: 16px 18px 6px; }
.p-kpis__head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font: 400 11.5px/1.2 var(--font-mono); color: var(--p-ink-3); }
.p-kpis__head .p-frame__tag { margin-left: auto; }
.p-kpis__grid { display: grid; }
.p-kpi { display: grid; grid-template-columns: minmax(0, 1fr) 104px; grid-template-areas: "label spark" "value spark" "foot foot"; column-gap: 12px; row-gap: 4px; align-items: center; padding: 14px 0 12px; }
.p-kpi + .p-kpi { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.p-kpi__label { grid-area: label; font: 400 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--p-ink-3); }
.p-kpi__value { grid-area: value; font: 600 26px/1.05 var(--font-display); letter-spacing: -0.035em; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-kpi__value [data-ticker].is-ticking { color: #D9FFCF; text-shadow: 0 0 14px rgba(57, 255, 20, 0.45); }
.p-kpi__foot { grid-area: foot; font-size: 12px; line-height: 1.35; color: var(--p-ink-3); font-variant-numeric: tabular-nums; }
.p-spark { grid-area: spark; position: relative; height: 38px; }
.p-spark svg { width: 100%; height: 100%; overflow: visible; }
.p-spark__line { fill: none; stroke: var(--neon); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.55)); }
.p-spark__area { fill: rgba(57, 255, 20, 0.1); }
.p-spark__end, .p-chart__end {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: var(--neon); box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.18), 0 0 12px rgba(57, 255, 20, 0.9);
}

/* Intro (motion.js adds .intro-go after fonts, .intro-done ~1.7s later) */
.js-motion:not(.intro-done) .p-hero :is(.p-hero__chip, .p-lede, .p-hero__ctas, .p-readout) { opacity: 0; transform: translateY(32px); }
.intro-go:not(.intro-done) .p-hero__chip { animation: rise .6s var(--ease-expo) both .05s; }
.intro-go:not(.intro-done) .p-hero .p-lede { animation: rise .6s var(--ease-expo) both .4s; }
.intro-go:not(.intro-done) .p-hero__ctas { animation: rise .6s var(--ease-expo) both .5s; }
.intro-go:not(.intro-done) .p-readout { animation: rise .9s var(--ease-expo) both .6s; }

/* "Sample data" tags and the live status dot */
.p-frame__tag {
  justify-self: end; padding: 4px 8px; white-space: nowrap;
  border: 1px solid rgba(57, 255, 20, 0.36); color: var(--neon); font: 400 10.5px/1 var(--font-mono); letter-spacing: .02em;
}
.p-status { display: inline-flex; align-items: center; gap: 7px; color: var(--neon); font: 400 11.5px/1 var(--font-mono); }
.p-status__dot { position: relative; display: inline-block; flex: none; width: 7px; height: 7px; background: var(--neon); box-shadow: 0 0 10px rgba(57, 255, 20, 0.9); }
.p-frame__tag .p-status__dot { width: 6px; height: 6px; margin-right: 6px; vertical-align: 0; }
.p-status__dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(57, 255, 20, 0.8); opacity: 0; animation: p-sonar 2.4s var(--ease-out) infinite; }
@keyframes p-sonar { 0% { opacity: .9; transform: scale(.4); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .p-status__dot::after { animation: none; } }
@media (max-width: 599px) { .p-hide-sm { display: none; } }

/* ---------- 2. Trusted by: logo grid + tabbed results ---------- */
.p-trust__title { max-width: 21ch; margin-inline: auto; text-align: center; }
.p-logos {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: space-around; align-items: center;
  gap: 36px 24px; max-width: 1080px; margin: clamp(44px, 5vw, 64px) auto clamp(56px, 6vw, 88px);
}
.p-logos li { display: grid; place-items: center; min-height: 56px; }
.p-logos img { height: 34px; width: auto; opacity: .88; }
.p-logos img[alt="J.D. Pools"] { height: 44px; }
.p-logos img[alt="Siam Sports Society"] { height: 54px; }
.p-logos img[alt="JSP Real Estate"] { height: 24px; }
.p-logos img[alt="Calkub"] { height: 32px; }
.p-logos__tint { filter: brightness(0); }
.p-wordmark { display: inline-block; font: 600 20px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: currentColor; }
.p-logos .p-wordmark { opacity: .88; }
@media (min-width: 900px) { .p-logos { grid-template-columns: repeat(6, auto); justify-content: space-between; } }
@media (max-width: 599px) {
  .p-logos { gap: 28px 16px; }
  .p-logos img { height: 26px; }
  .p-logos img[alt="J.D. Pools"] { height: 34px; }
  .p-logos img[alt="Siam Sports Society"] { height: 44px; }
  .p-logos img[alt="JSP Real Estate"] { height: 17px; }
  .p-logos img[alt="Calkub"] { height: 24px; }
  .p-logos .p-wordmark { font-size: 15px; }
}

.p-cases { max-width: 1160px; margin-inline: auto; background: var(--paper); border: 2px solid var(--ink-l); }
.p-cases__tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--sage-2); border-bottom: 2px solid var(--ink-l); }
.p-cases__thumb {
  position: absolute; z-index: 0; left: 0; top: 0; bottom: -2px;
  width: var(--thumb-w, 0px); transform: translateX(var(--thumb-x, 0px));
  background: var(--paper); border-bottom: 4px solid var(--neon); box-shadow: inset 0 -6px 0 -2px var(--ink-l);
}
.p-cases__tabs.is-ready .p-cases__thumb { transition: transform .5s var(--ease-out), width .5s var(--ease-out); }
.p-cases__tab {
  position: relative; z-index: 1; display: grid; place-items: center; height: 76px; padding: 0 16px;
  border: 0; background: none; color: var(--ink-l); cursor: pointer; font: inherit;
  transition: opacity .25s ease;
}
.p-cases__tab + .p-cases__tab { border-left: 1px solid var(--s-line); }
.p-cases__tab img { height: 30px; width: auto; }
.p-cases__tab img[alt="J.D. Pools"] { height: 36px; }
.p-cases__tab img[alt="Siam Sports Society"] { height: 36px; }
.p-cases__tab[aria-selected="false"] { opacity: .5; }
.p-cases__tab[aria-selected="false"]:hover { opacity: .85; }
.p-cases__tab:focus-visible { outline: 2px solid var(--ink-l); outline-offset: -6px; }
.p-cases__tabs:not(.is-ready) .p-cases__tab[aria-selected="true"] { background: var(--paper); }
@media (scripting: enabled) { [data-tabs] [role="tabpanel"][data-tab-hidden] { display: none; } }

.p-case { display: grid; outline: none; }
.p-case:focus-visible { outline: 2px solid var(--ink-l); outline-offset: -6px; }
.p-case + .p-case { border-top: 2px solid var(--ink-l); }
.p-case[hidden] { display: none; }
.p-case.is-leaving { opacity: 0; transition: opacity .15s ease; }
.p-case.is-entering .p-case__story > * { animation: rise .6s var(--ease-expo) both; }
.p-case.is-entering .p-case__story > :nth-child(2) { animation-delay: .05s; }
.p-case.is-entering .p-case__story > :nth-child(3) { animation-delay: .1s; }
.p-case.is-entering .p-case__fig { animation: rise .7s var(--ease-expo) both .08s; }
.js-motion .p-case.is-entering .p-case__story > *, .js-motion .p-case.is-entering .p-case__fig { opacity: 0; transform: translateY(18px); }
.p-case__story { display: grid; align-content: start; justify-items: start; gap: 20px; margin: 0; padding: clamp(24px, 3.4vw, 44px); }
.p-case__tag { font: 400 12px/1.2 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--s-ink-3); }
.p-case__line, .p-case blockquote p { font: 500 clamp(19px, 1.6vw, 23px)/1.42 var(--font-body); letter-spacing: -0.012em; color: var(--ink-l); max-width: 40ch; text-wrap: pretty; }
.p-case blockquote { margin: 0; }
.p-case__by { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--s-ink-2); }
.p-case__by strong { color: var(--ink-l); font-weight: 600; }
.p-case__by span:last-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: 2px; background: var(--neon-mid); }
.p-case__figs {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: center; gap: 28px; margin: 0;
  padding: clamp(28px, 3.4vw, 44px); color: #FFFFFF;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(57, 255, 20, 0.22), transparent 62%),
    var(--night);
}
.p-case__figs::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, rgba(205, 255, 190, 0.42) 0 1px, transparent 1.4px) 0 0 / 6px 6px;
  -webkit-mask-image: radial-gradient(70% 70% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(70% 70% at 100% 0%, #000, transparent 70%);
}
.p-case__fig { display: grid; gap: 8px; }
.p-case__fig + .p-case__fig { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.p-case__fig dd { margin: 0; font: 600 clamp(64px, 7.4vw, 112px)/.86 var(--font-display); letter-spacing: -0.055em; color: var(--neon); text-shadow: 0 0 48px rgba(57, 255, 20, 0.35); white-space: nowrap; }
.p-case__fig dt { font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); max-width: 30ch; }
.p-case__figs--one .p-case__fig dd { font-size: clamp(96px, 11vw, 168px); }
@media (min-width: 900px) {
  .p-case { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .p-case__story { align-content: center; }
}
@media (max-width: 599px) {
  .p-cases__tab { height: 60px; padding: 0 8px; }
  .p-cases__tab img { height: 22px; }
  .p-cases__tab img[alt="J.D. Pools"] { height: 28px; }
  .p-cases__tab .p-wordmark { font-size: 14px; }
}

/* ---------- 3. How we're different ---------- */
.p-diff { padding-bottom: calc(var(--p-sec-y) * .6); overflow: clip; }
.p-diff__art { margin: clamp(24px, 4vw, 48px) 0 0; }
.p-iso { width: 100%; height: auto; overflow: visible; }
.p-iso--system { max-width: 1180px; margin-inline: auto; }
.iso-grid polyline { fill: none; stroke: rgba(255, 255, 255, 0.075); stroke-width: 1; }
.p-iso polygon { stroke-linejoin: round; }
.iso-ghost polygon { fill: #070D09; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.iso-node polygon { stroke: rgba(57, 255, 20, 0.6); stroke-width: 1.2; }
.iso-node .f-t { fill: #102016; }
.iso-node .f-l { fill: #08110B; }
.iso-node .f-r { fill: #0C1A10; }
.iso-row polygon { fill: rgba(57, 255, 20, 0.2); stroke: rgba(57, 255, 20, 0.7); stroke-width: 1; }
.iso-hero polygon { stroke: #C9FFB8; stroke-width: 1.2; }
.iso-hero .f-t { fill: var(--neon); }
.iso-hero .f-l { fill: #1FB10B; }
.iso-hero .f-r { fill: #2DD811; }
.iso-hero-chart { fill: none; stroke: var(--neon-ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.iso-hero-face { fill: var(--neon-ink); font-family: var(--font-mono); letter-spacing: .04em; }
:is(.iso-face, .iso-face-t) { fill: var(--neon); font-family: var(--font-mono); letter-spacing: .04em; }
.iso-check { fill: none; stroke: var(--neon); stroke-width: 2.6; stroke-linecap: square; }
.iso-flow-base { fill: none; stroke: rgba(57, 255, 20, 0.22); stroke-width: 2; }
.iso-flow { fill: none; stroke: var(--neon); stroke-width: 2; stroke-dasharray: 5 15; filter: drop-shadow(0 0 3px rgba(57, 255, 20, 0.9)); }
.js-motion .iso-flow { animation: p-flow 1.2s linear infinite; }
@keyframes p-flow { to { stroke-dashoffset: -20; } }
.iso-dot { fill: var(--neon); filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.9)); }
.iso-glow { fill: url(#sysGlow); }
.iso-mark line { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.iso-mark circle { fill: #FFFFFF; }
.iso-mark text { font: 400 12.5px var(--font-mono); fill: #FFFFFF; }
.iso-mark__n { fill: var(--neon); }
@media (max-width: 767px) { .iso-mark text { display: none; } }

.p-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(20px, 3vw, 36px); background: var(--s-line); border: 1px solid var(--s-line); }
.p-legend li { display: grid; gap: 4px; padding: 16px 18px; background: var(--night); }
.p-legend__n { font: 400 12px/1 var(--font-mono); color: var(--neon); }
.p-legend strong { font: 600 16px/1.25 var(--font-display); letter-spacing: -0.015em; }
.p-legend li > span:last-child { font-size: 14px; color: var(--s-ink-3); }
@media (min-width: 900px) { .p-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.p-six { display: grid; gap: 1px; margin-top: clamp(56px, 7vw, 104px); background: var(--s-line); border: 1px solid var(--s-line); }
.p-six__item { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.6vw, 34px); background: var(--night); transition: background-color .3s ease; }
.p-six__item:hover { background: #0A140E; }
.p-six__item p { color: var(--s-ink-2); font-size: 15.5px; line-height: 1.55; }
.p-six__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; color: var(--neon); background: rgba(57, 255, 20, 0.08); border: 1px solid rgba(57, 255, 20, 0.32); }
.p-six__icon svg { width: 20px; height: 20px; }
@media (min-width: 640px) { .p-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .p-six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 4. We fit your setup ---------- */
.p-fit { padding-top: calc(var(--p-sec-y) * .6); }
.p-fit__cards { display: grid; gap: 10px; margin-top: clamp(40px, 5vw, 64px); }
.p-card { --px: 8px; display: flex; flex-direction: column; gap: 14px; min-height: 520px; padding: 22px 22px 26px; color: var(--ink-l); }
.p-card--sage { --fill: var(--sage); --n-l: #FFFFFF; --n-d: #C3D0BF; }
.p-card--neon { --fill: var(--neon); --n-l: var(--sage); --n-d: var(--neon-mid); color: var(--neon-ink); }
.p-card .p-h3 { margin-top: auto; padding-top: 8px; font-size: clamp(21px, 1.7vw, 24px); }
.p-card > p:last-child { color: rgba(12, 12, 11, 0.74); font-size: 15.5px; line-height: 1.55; max-width: 38ch; }
.p-card--neon > p:last-child { color: rgba(4, 16, 6, 0.8); }
.p-card__step { display: inline-flex; align-items: stretch; height: 24px; width: fit-content; font: 400 12px/24px var(--font-mono); letter-spacing: .02em; }
.p-card__step .p-chip__icon { width: 18px; }
.p-card__step { background: var(--ink-l); color: #FFFFFF; padding-right: 10px; gap: 10px; }
.p-card--neon .p-card__step .p-chip__icon { background: linear-gradient(90deg, var(--neon-deep) 0 33.4%, var(--neon-mid) 0 66.7%, var(--sage) 0); }
.p-card--sage .p-card__step .p-chip__icon { background: linear-gradient(90deg, var(--neon-deep) 0 33.4%, var(--neon-mid) 0 66.7%, var(--neon) 0); }
@media (min-width: 960px) { .p-fit__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 959px) { .p-card { min-height: 0; } .p-card .p-h3 { margin-top: 12px; } }

/* Mini product diagrams inside the cards (decorative, aria-hidden) */
.p-ui {
  position: relative; align-self: center; width: min(100%, 300px); margin-block: 28px 12px;
  font: 500 12.5px/1.3 var(--font-body); color: var(--ink-l);
}
.p-ui--audit { background: #FFFFFF; border: 1px solid rgba(12, 12, 11, 0.16); box-shadow: 8px 8px 0 rgba(12, 12, 11, 0.06); overflow: hidden; }
.p-ui__head { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-bottom: 1px solid rgba(12, 12, 11, 0.1); font-weight: 600; }
.p-ui__pill { font: 400 10.5px/1 var(--font-mono); padding: 4px 6px; background: var(--ink-l); color: var(--neon); }
.p-ui__rows li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid rgba(12, 12, 11, 0.06); }
.p-ui__rows li:first-child { border-top: 0; }
.p-ui__rows i { flex: none; width: 10px; height: 10px; }
.p-ui__rows i.ok { background: var(--neon-mid); }
.p-ui__rows i.warn { border: 2px solid var(--ink-l); }
.p-ui__rows li.is-flag { background: rgba(57, 255, 20, 0.14); }
.p-ui__rows b { margin-left: auto; font: 400 10px/1 var(--font-mono); padding: 4px 6px; background: var(--neon); color: var(--neon-ink); }
.p-ui--audit::after {
  /* scan line */
  content: ""; position: absolute; left: 0; right: 0; top: 42px; height: 2px;
  background: var(--neon-mid); box-shadow: 0 0 10px rgba(30, 154, 11, 0.8); opacity: 0;
}
.js-motion .p-ui--audit::after { animation: p-scan 3.6s var(--ease-out) infinite; }
@keyframes p-scan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .9; } 80% { opacity: .9; } 100% { transform: translateY(180px); opacity: 0; } }

.p-ui--track { padding: 14px; background: var(--night); color: #FFFFFF; box-shadow: 8px 8px 0 rgba(4, 16, 6, 0.18); }
.p-ui__flow { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 6px; }
.p-ui__node { padding: 6px 8px; border: 1px solid rgba(57, 255, 20, 0.5); font: 400 10.5px/1 var(--font-mono); color: var(--neon); white-space: nowrap; }
.p-ui__merge { display: block; height: 22px; margin: 0 16%; border: 1px solid rgba(57, 255, 20, 0.5); border-top: 0; position: relative; }
.p-ui__merge::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; background: rgba(57, 255, 20, 0.5); }
.p-ui__events { margin-top: 10px; border: 1px solid rgba(255, 255, 255, 0.12); }
.p-ui__events li { display: grid; grid-template-columns: minmax(0, 1fr) auto 8px; align-items: center; gap: 10px; padding: 9px 10px; }
.p-ui__events li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.p-ui__events code { font: 400 11.5px/1 var(--font-mono); color: var(--neon); }
.p-ui__events span { font-size: 11.5px; color: rgba(255, 255, 255, 0.7); }
.p-ui__events i { width: 8px; height: 8px; background: var(--neon); box-shadow: 0 0 8px rgba(57, 255, 20, 0.9); }
.js-motion .p-ui__events i { animation: p-blink 2.4s steps(2, jump-none) infinite; }
.js-motion .p-ui__events li:nth-child(2) i { animation-delay: .8s; }
.js-motion .p-ui__events li:nth-child(3) i { animation-delay: 1.6s; }
@keyframes p-blink { 50% { opacity: .25; } }

.p-ui--tree { display: grid; justify-items: center; padding: 6px 0; }
.p-ui__root { padding: 8px 14px; background: var(--ink-l); color: #FFFFFF; font-weight: 600; box-shadow: 6px 6px 0 rgba(12, 12, 11, 0.08); }
.p-ui__branches { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; margin-top: 26px; }
.p-ui__branches::before { content: ""; position: absolute; left: 25%; right: 25%; top: -14px; height: 14px; border: 1.5px solid var(--ink-l); border-bottom: 0; }
.p-ui__branches::after { content: ""; position: absolute; left: 50%; top: -26px; height: 12px; border-left: 1.5px solid var(--ink-l); }
.p-ui__branches > div { display: grid; justify-items: center; gap: 22px; position: relative; }
.p-ui__branches > div::after { content: ""; position: absolute; left: 50%; top: 32px; height: 22px; border-left: 1.5px dashed var(--ink-l); }
.p-ui__leaf { padding: 8px 10px; background: #FFFFFF; border: 1px solid rgba(12, 12, 11, 0.2); white-space: nowrap; font-size: 11.5px; box-shadow: 6px 6px 0 rgba(12, 12, 11, 0.06); }
.p-ui__test { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; background: #FFFFFF; border: 1px dashed rgba(12, 12, 11, 0.4); font: 400 11px/1 var(--font-mono); }
.p-ui__test--live { border: 1px solid var(--ink-l); }
.p-ui__test b { font-weight: 400; padding: 3px 5px; background: var(--neon); color: var(--neon-ink); }

/* ---------- 5. One live system: exploded layers ---------- */
.p-stack { display: grid; gap: 28px; max-width: 1160px; margin: clamp(40px, 5vw, 72px) auto 0; }
.p-layer { display: grid; gap: 4px; justify-items: center; }
.p-layer__art { position: relative; width: min(100%, 460px); height: auto; overflow: visible; }
.p-layer__note {
  --px: 7px; --fill: #FFFFFF; --n-l: var(--neon); --n-d: #C8D4C4;
  display: grid; gap: 10px; justify-items: start; width: min(100%, 360px); padding: 22px 22px 24px;
  border: 1px solid rgba(12, 12, 11, 0.14);
}
.p-layer--dash .p-layer__note { --fill: var(--neon); --n-l: var(--sage); --n-d: var(--neon-mid); border-color: var(--neon); color: var(--neon-ink); }
.p-layer__k { font: 400 11.5px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--s-ink-3); }
.p-layer--dash .p-layer__k { color: rgba(4, 16, 6, 0.72); }
.p-layer__note > p:not(.p-layer__k) { color: var(--s-ink-2); font-size: 15px; line-height: 1.55; }
.p-layer--dash .p-layer__note > p:not(.p-layer__k) { color: rgba(4, 16, 6, 0.82); }
.p-layer--dash .p-link { color: var(--neon-ink); text-decoration-color: var(--neon-ink); }
@media (min-width: 1100px) {
  .p-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 470px) minmax(0, 1fr); column-gap: 32px; row-gap: 0; }
  .p-layer { display: contents; }
  .p-layer__art { grid-column: 2; width: 100%; margin-top: -26%; }
  .p-layer:first-child .p-layer__art { margin-top: 0; }
  .p-layer__note { align-self: center; }
  .p-layer:nth-child(odd) .p-layer__note { grid-column: 1; justify-self: end; }
  .p-layer:nth-child(even) .p-layer__note { grid-column: 3; justify-self: start; }
  .p-layer:nth-child(1) > * { grid-row: 1; }
  .p-layer:nth-child(2) > * { grid-row: 2; }
  .p-layer:nth-child(3) > * { grid-row: 3; }
  .p-layer:nth-child(4) > * { grid-row: 4; }
  .p-layer:nth-child(1) .p-layer__art { z-index: 4; }
  .p-layer:nth-child(2) .p-layer__art { z-index: 3; }
  .p-layer:nth-child(3) .p-layer__art { z-index: 2; }
  .p-layer:nth-child(4) .p-layer__art { z-index: 1; }
  .p-layer:nth-child(n) .p-layer__note { position: relative; z-index: 5; }
}
.p-layer__art polygon { stroke: var(--ink-l); stroke-width: 1.1; stroke-linejoin: round; }
.lyr-slab .f-t { fill: #FFFFFF; }
.lyr-slab .f-l { fill: #DCE6D8; }
.lyr-slab .f-r { fill: #C3D1BE; }
.lyr-slab--neon .f-t { fill: var(--neon); }
.lyr-slab--neon .f-l { fill: #2ACB10; }
.lyr-slab--neon .f-r { fill: #1E9A0B; }
.lyr-tile .f-t { fill: #F4F8F2; }
.lyr-tile .f-l { fill: #D3DECF; }
.lyr-tile .f-r { fill: #BBCAB5; }
.lyr-tile--neon .f-t { fill: var(--neon); }
.lyr-tile--neon .f-l { fill: #2ACB10; }
.lyr-tile--neon .f-r { fill: #1E9A0B; }
.lyr-screen .f-t { fill: #0C0C0B; }
.lyr-screen .f-l, .lyr-screen .f-r { fill: #26302A; }
.lyr-kpi polygon { stroke: rgba(57, 255, 20, 0.6); }
.lyr-kpi .f-t { fill: #16221A; }
.lyr-kpi .f-l, .lyr-kpi .f-r { fill: #0E1611; }
.lyr-t { fill: var(--ink-l); font-family: var(--font-mono); letter-spacing: .03em; }
.lyr-t--ink { fill: var(--neon-ink); }
.lyr-t--neon { fill: var(--neon); }
.lyr-edge { fill: var(--ink-l); font-family: var(--font-mono); letter-spacing: .06em; }
.lyr-chart { fill: none; stroke: var(--neon); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.lyr-chart-dot { fill: var(--neon); }
.lyr-pipe { fill: none; stroke: var(--ink-l); stroke-width: 1.4; stroke-dasharray: 3 3; }
.lyr-riser { stroke: var(--ink-l); stroke-width: 1.2; stroke-dasharray: 3 5; }
.js-motion .lyr-riser { animation: p-rise-flow 1.1s linear infinite; }
@keyframes p-rise-flow { to { stroke-dashoffset: 16; } }
@media (max-width: 1099px) { .lyr-riser { display: none; } }

/* Product frames (real dashboard + native chart), dark on sage */
.p-frame {
  position: relative; margin: 0; overflow: hidden; color: #FFFFFF;
  background: linear-gradient(180deg, #101B14, #0A120D);
  border: 1px solid rgba(12, 12, 11, 0.9);
  box-shadow: 14px 14px 0 rgba(12, 12, 11, 0.08);
}
.p-frame__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  height: 40px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font: 400 11.5px/1 var(--font-mono); color: rgba(255, 255, 255, 0.66);
}
.p-frame__dots { display: flex; gap: 6px; }
.p-frame__dots i { width: 9px; height: 9px; background: rgba(255, 255, 255, 0.16); }
.p-frame__dots i:first-child { background: var(--neon); }
.p-frame__url, .p-frame__title { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.p-frame picture, .p-frame img { display: block; width: 100%; }
.p-frame figcaption { padding: 13px 16px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 599px) { .p-frame__bar { grid-template-columns: auto 1fr auto; height: 36px; padding: 0 10px; gap: 8px; } .p-frame__title { justify-self: center; overflow: hidden; } }

.p-console { margin-top: clamp(64px, 8vw, 112px); }
.p-console .p-frame__title { gap: 10px; }
.p-console__body { display: grid; gap: 1px; background: rgba(255, 255, 255, 0.08); }
.p-console__body > * { background: #0B140F; }
@media (min-width: 1024px) { .p-console__body { grid-template-columns: minmax(0, 1fr) 320px; } }
.p-chart { display: grid; gap: 14px; padding: clamp(16px, 2.4vw, 28px); }
.p-chart__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font: 500 13px/1.2 var(--font-body); color: rgba(255, 255, 255, 0.84); }
.p-chart__key { display: inline-flex; align-items: center; gap: 8px; }
.p-chart__key::before { content: ""; width: 16px; height: 2px; background: currentColor; }
.p-chart__key--spend::before { background: var(--neon); box-shadow: 0 0 8px rgba(57, 255, 20, 0.8); }
.p-chart__key--leads::before { background: #FFFFFF; }
.p-chart__note { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--p-ink-3); }
.p-chart__plot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; height: clamp(220px, 26vw, 320px); margin-bottom: 26px; }
/* Tick positions match the SVG: ฿25k/300 at y=20, ฿0/0 at y=290 of 300. */
.p-chart__y { position: relative; min-width: 30px; font: 400 11px/1 var(--font-mono); color: var(--p-ink-3); font-variant-numeric: tabular-nums; }
.p-chart__y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.p-chart__y--leads span { right: auto; left: 0; }
.p-chart__y span:nth-child(1) { top: 6.667%; }
.p-chart__y span:nth-child(2) { top: 24.667%; }
.p-chart__y span:nth-child(3) { top: 42.667%; }
.p-chart__y span:nth-child(4) { top: 60.667%; }
.p-chart__y span:nth-child(5) { top: 78.667%; }
.p-chart__y span:nth-child(6) { top: 96.667%; }
.p-chart__y--spend { color: rgba(160, 255, 140, 0.76); }
.p-chart__canvas { position: relative; }
.p-chart__canvas::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6.667%; height: 90%; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0.07) 0 1px, transparent 1px) 0 0 / 100% 20% repeat-y;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.p-chart__canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.p-chart__line--spend { stroke: var(--neon); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.6)); }
.p-chart__line--leads { stroke: rgba(255, 255, 255, 0.9); }
.p-chart__end--leads { background: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 0 0 10px rgba(255, 255, 255, 0.6); }
.p-chart__x { position: absolute; left: 0; right: 0; top: calc(96.667% + 12px); font: 400 11px/1 var(--font-mono); color: var(--p-ink-3); }
.p-chart__x span { position: absolute; top: 0; }
.p-chart__x span::before { content: ""; position: absolute; left: 0; top: -12px; width: 1px; height: 6px; background: rgba(255, 255, 255, 0.2); }
@media (max-width: 599px) { .p-chart__plot { gap: 6px; } }
.p-split { display: grid; align-content: start; gap: 6px; padding: clamp(18px, 2.4vw, 28px); }
.p-split__label { font: 400 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--p-ink-3); }
.p-split__total { font: 600 clamp(28px, 2.6vw, 36px)/1.1 var(--font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.p-split__list { display: grid; gap: 20px; margin-top: 18px; }
.p-split__list li { display: grid; gap: 8px; }
.p-split__row { display: flex; justify-content: space-between; align-items: baseline; font: 500 14.5px/1.2 var(--font-body); color: rgba(255, 255, 255, 0.86); }
.p-split__row strong { font: 400 22px/1 var(--font-serif); font-style: italic; color: var(--neon); }
.p-split__bar { display: block; height: 6px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.p-split__bar i { display: block; height: 100%; width: calc(var(--share) * 100%); background: linear-gradient(90deg, var(--neon-mid), var(--neon)); box-shadow: 0 0 12px rgba(57, 255, 20, 0.6); transform-origin: left; }
.p-split__list li + li .p-split__bar i { background: rgba(255, 255, 255, 0.7); box-shadow: none; }
.p-split__meta { font-size: 12.5px; line-height: 1.4; color: var(--p-ink-3); font-variant-numeric: tabular-nums; }

/* Real screenshots, three across (a swipe row on phones) */
.p-shots { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; margin-top: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: thin; }
.p-shots > * { scroll-snap-align: start; }
.p-shots .p-frame { box-shadow: 8px 8px 0 rgba(12, 12, 11, 0.08); }
@media (min-width: 600px) { .p-shots { grid-auto-columns: 58%; } }
@media (min-width: 1024px) { .p-shots { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; align-items: start; } }

/* Chart draw ([data-draw], motion.js adds .is-drawn at ~35% in view). The
   hidden state only exists with motion on and not after a toggle wipe, so no
   JS, reduced motion and .via-switch all render the finished chart. */
.js-motion:not(.via-switch) [data-draw]:not(.is-drawn) :is(.p-chart__canvas svg, .p-spark svg) { clip-path: inset(-10% 100% -10% 0); }
.js-motion:not(.via-switch) [data-draw]:not(.is-drawn) :is(.p-chart__end, .p-spark__end) { opacity: 0; transform: scale(0); }
.js-motion:not(.via-switch) [data-draw]:not(.is-drawn) .p-split__bar i { transform: scaleX(0); }
.js-motion [data-draw] :is(.p-chart__canvas svg, .p-spark svg) { clip-path: inset(-10% 0 -10% 0); transition: clip-path 1.8s cubic-bezier(.45, 0, .2, 1) .15s; }
.js-motion [data-draw] .p-spark svg { transition-duration: 1.3s; }
.js-motion [data-draw] .p-kpi:nth-child(2) .p-spark svg { transition-delay: .3s; }
.js-motion [data-draw] .p-kpi:nth-child(3) .p-spark svg { transition-delay: .45s; }
.js-motion [data-draw] :is(.p-chart__end, .p-spark__end) { transition: opacity .3s ease 1.8s, transform .5s var(--ease-pop) 1.8s; }
.js-motion [data-draw] .p-split__bar i { transition: transform 1.2s var(--ease-expo) .5s; }
.js-motion [data-draw] .p-split__list li + li .p-split__bar i { transition-delay: .7s; }

/* Cursor spotlight on the dark product frame (script.js writes --mx/--my) */
[data-spotlight] { isolation: isolate; }
[data-spotlight]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(57, 255, 20, 0.1), transparent 62%);
  transition: opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-spotlight]::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; padding: 1px;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(140, 255, 110, 0.95), rgba(57, 255, 20, 0.35) 45%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: opacity .3s ease;
  }
  [data-spotlight]:hover::after { opacity: 1; }
}
[data-spotlight]:hover::before { opacity: 1; }

/* ---------- 6. Proof bento ---------- */
.p-proof { padding-top: calc(var(--p-sec-y) * .55); }
.p-bento { display: grid; gap: 12px; max-width: 1100px; margin: clamp(40px, 5vw, 64px) auto 0; }
.p-bento__metrics { display: grid; gap: 12px; }
.p-metric {
  --px: 8px; --fill: var(--ink-l); --n-l: var(--sage); --n-d: #3D463F;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: clamp(220px, 22vw, 280px); padding: 22px 24px 24px; color: #FFFFFF;
}
.p-metric--field {
  --gx: 100%;
  --fill: radial-gradient(85% 90% at var(--gx) 0%, rgba(57, 255, 20, 0.42), rgba(30, 154, 11, 0.18) 45%, transparent 72%), radial-gradient(60% 60% at calc(100% - var(--gx)) 100%, rgba(14, 90, 6, 0.5), transparent 70%), var(--night);
}
.p-metric--field:nth-child(even) { --gx: 0%; }
.p-metric--field::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, rgba(215, 255, 200, 0.55) 0 1px, transparent 1.4px) 0 0 / 6px 6px;
  -webkit-mask-image: radial-gradient(70% 80% at var(--gx) 0%, #000, transparent 72%);
  mask-image: radial-gradient(70% 80% at var(--gx) 0%, #000, transparent 72%);
}
.p-metric__k { font: 400 12px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--neon); }
.p-metric__v { font: 600 clamp(72px, 8.4vw, 124px)/.82 var(--font-display); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-metric__v .p-unit { color: var(--neon); }
.p-metric__l { font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); max-width: 26ch; }
.p-metric:nth-child(even) { text-align: right; align-items: flex-end; }
.p-badges { display: grid; gap: 12px; align-content: start; }
.p-badge {
  --px: 6px; --fill: var(--ink-l); --n-l: var(--neon); --n-d: #3D463F;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: 16px 18px; color: #FFFFFF;
}
.p-badge strong { font: 600 16px/1.25 var(--font-display); letter-spacing: -0.01em; }
.p-badge > span:last-child, .p-badge a > span:last-child { grid-column: 2; font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.66); }
.p-badge__icon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; background: rgba(57, 255, 20, 0.1); border: 1px solid rgba(57, 255, 20, 0.35); color: var(--neon); }
.p-badge__icon svg { width: 19px; height: 19px; }
.p-badge--link { --fill: var(--neon); --n-l: var(--sage); --n-d: var(--neon-mid); display: block; padding: 0; color: var(--neon-ink); }
.p-badge--link a { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 18px; }
.p-badge--link a > span:last-child { color: rgba(4, 16, 6, 0.8); }
.p-badge--link .p-badge__icon { background: var(--neon-ink); border-color: var(--neon-ink); color: var(--neon); }
.p-badge--link strong { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (min-width: 640px) { .p-bento__metrics { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .p-bento { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
  .p-badges { grid-template-rows: repeat(5, 1fr); }
}
@media (min-width: 640px) and (max-width: 1023px) { .p-badges { grid-template-columns: 1fr 1fr; } .p-badge--link { grid-column: 1 / -1; } }

/* ---------- 7. Pricing + comparison ---------- */
.p-prices { display: grid; gap: 12px; max-width: 1040px; margin: clamp(40px, 5vw, 64px) auto 0; }
@media (min-width: 900px) { .p-prices { grid-template-columns: 1fr 1fr; } }
.p-price {
  --px: 7px; --fill: linear-gradient(180deg, #0D1711, #09100C); --n-l: var(--neon); --n-d: var(--neon-deep);
  display: grid; gap: 20px; align-content: start; padding: clamp(26px, 3.2vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.p-price--featured { --fill: var(--neon); --n-l: var(--sage); --n-d: var(--neon-mid); border-color: var(--neon); color: var(--neon-ink); box-shadow: 0 40px 110px -40px rgba(57, 255, 20, 0.45); }
.p-price__name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 400 13px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.p-price__name .p-chip__icon { width: 18px; height: 18px; }
.p-price--featured .p-price__name { color: var(--neon-ink); }
.p-price--featured .p-price__name .p-chip__icon { background: linear-gradient(90deg, var(--neon-ink) 0 33.4%, var(--neon-mid) 0 66.7%, var(--sage) 0); }
.p-price__badge { padding: 5px 8px; background: var(--neon-ink); color: var(--neon); font-size: 11px; text-transform: none; letter-spacing: 0; }
.p-price__amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.p-price__amount strong { font: 600 clamp(52px, 6vw, 80px)/1 var(--font-display); letter-spacing: -0.05em; }
.p-price__amount span { font: italic 400 24px/1 var(--font-serif); color: rgba(232, 242, 235, 0.72); }
.p-price--featured .p-price__amount span { color: rgba(4, 16, 6, 0.74); }
.p-price__for { color: var(--s-ink-2); font-size: 16px; line-height: 1.5; max-width: 40ch; }
.p-price--featured .p-price__for { color: rgba(4, 16, 6, 0.82); }
.p-price .p-checks { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.p-price--featured .p-checks { border-top-color: rgba(4, 16, 6, 0.2); }
.p-price__note { padding: 13px 15px; border: 1px dashed rgba(255, 255, 255, 0.2); color: var(--s-ink-2); font-size: 14.5px; line-height: 1.5; }
.p-price__note strong { color: #FFFFFF; font-weight: 600; }
.p-price--featured .p-price__note { border-color: rgba(4, 16, 6, 0.35); color: rgba(4, 16, 6, 0.82); }
.p-price .p-btn { justify-self: start; margin-top: 4px; }
@media (max-width: 599px) { .p-price .p-btn { justify-self: stretch; justify-content: space-between; } }

.p-checks { display: grid; gap: 12px; }
.p-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: rgba(255, 255, 255, 0.86); font-size: 15.5px; line-height: 1.5; }
.p-checks li::before {
  content: ""; width: 18px; height: 18px; margin-top: 2px;
  background: var(--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23041006' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.p-price--featured .p-checks li { color: var(--neon-ink); }
.p-price--featured .p-checks li::before {
  background: var(--neon-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%2339FF14' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.p-compare {
  --px: 7px; --fill: #0A120D; --n-l: var(--neon); --n-d: var(--neon-deep);
  max-width: 1040px; margin: 12px auto 0; padding: clamp(24px, 3vw, 40px); border: 1px solid rgba(255, 255, 255, 0.12);
}
.p-compare__title { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.02em; margin-bottom: 12px; }
.p-compare__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.p-compare__row > span { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 15.5px; line-height: 1.45; }
.p-compare__row > span:first-child { color: rgba(255, 255, 255, 0.58); }
.p-compare__row > span:last-child { color: #FFFFFF; }
.p-compare__row > span::before {
  content: ""; width: 18px; height: 18px; margin-top: 2px; border: 1px solid rgba(255, 255, 255, 0.22);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7 13 13M13 7 7 13' fill='none' stroke='%23FFFFFF' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.p-compare__row > span:last-child::before {
  border: 0;
  background: var(--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23041006' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.p-compare__row--head { border-top: 0; padding-top: 4px; }
.p-compare__row--head > span { display: flex; align-items: center; gap: 8px; font: 400 12px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--p-ink-3) !important; }
.p-compare__row--head > span::before { display: none; }
.p-compare__row--head img { width: 16px; height: 16px; }
@media (max-width: 639px) {
  .p-compare__row { grid-template-columns: 1fr; gap: 8px; }
  .p-compare__row--head { display: none; }
}

/* ---------- 8. FAQ ---------- */
.p-faq { padding-top: calc(var(--p-sec-y) * .4); }
.p-faq__grid { display: grid; gap: 40px; }
.p-faq__head { display: grid; gap: 20px; justify-items: start; align-content: start; }
.p-faq__head .p-h2 { max-width: 12ch; }
@media (min-width: 1024px) {
  .p-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; }
  .p-faq__head { position: sticky; top: 120px; align-self: start; }
}
.p-faq .faq-list { gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.p-faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.p-faq summary { padding: 24px 0; font: 500 clamp(17px, 1.5vw, 20px)/1.3 var(--font-display); letter-spacing: -0.015em; transition: color .2s ease; }
.p-faq summary:hover { color: var(--neon); }
.p-faq .faq-icon {
  position: relative; width: 30px; height: 30px; border-radius: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform .35s var(--ease-out), background-color .25s ease, border-color .25s ease;
}
.p-faq .faq-icon::before, .p-faq .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: #FFFFFF; }
.p-faq .faq-icon::after { transform: rotate(90deg); }
.p-faq details[open] .faq-icon { background: var(--neon); border-color: var(--neon); }
.p-faq details[open] .faq-icon::before, .p-faq details[open] .faq-icon::after { background: var(--neon-ink); }
.p-faq details p { padding: 0 48px 24px 0; margin-top: -6px; color: var(--s-ink-2); font-size: 16px; line-height: 1.6; max-width: 62ch; }
.p-faq .p-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(57, 255, 20, 0.6); }

/* ---------- 9. Final CTA: textured night card holding the enquiry ---------- */
.p-final-wrap { padding-top: calc(var(--p-sec-y) * .7); }
.p-final {
  --reveal-y: 120px; --px: 10px; --n-l: var(--neon); --n-d: var(--neon-mid); --fill: var(--night);
  /* dark tokens inside the sage section */
  --s-ink: #FFFFFF; --s-ink-2: var(--p-ink-2); --s-ink-3: var(--p-ink-3); --s-line: rgba(255, 255, 255, 0.1);
  --em-ink: var(--neon); --em-mark: none; --em-glow: 0 0 42px rgba(57, 255, 20, 0.35);
  position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF;
  padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 72px);
}
.p-final::after {
  /* the card's texture covers its own background, so its notches sit above it */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    conic-gradient(var(--n-l) 0 25%, var(--n-d) 0 50%, #0000 0 75%, var(--n-d) 0) 100% 0 / calc(var(--px) * 2) calc(var(--px) * 2) no-repeat,
    conic-gradient(#0000 0 25%, var(--n-d) 0 50%, var(--n-l) 0 75%, var(--n-d) 0) 0 100% / calc(var(--px) * 2) calc(var(--px) * 2) no-repeat;
}
.p-final__field {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(57, 255, 20, 0.3), transparent 70%),
    radial-gradient(50% 60% at 30% 100%, rgba(14, 90, 6, 0.55), transparent 72%),
    var(--night);
}
.p-final__field::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(205, 255, 190, 0.45) 0 1px, transparent 1.4px) 0 0 / 6px 6px;
  -webkit-mask-image: radial-gradient(55% 65% at 0% 0%, #000, transparent 72%);
  mask-image: radial-gradient(55% 65% at 0% 0%, #000, transparent 72%);
}
.p-final__field::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 11, 8, 0.25), rgba(6, 11, 8, 0.7) 60%); }
.p-final__grid { display: grid; gap: 40px; align-items: start; }
.p-final__copy { display: grid; gap: 22px; justify-items: start; }
.p-final__title { font-size: clamp(44px, 5.6vw, 84px); line-height: .96; max-width: 9ch; }
.p-final__lede { color: rgba(255, 255, 255, 0.8); font-size: 17px; line-height: 1.55; max-width: 40ch; }
.p-founder { margin: 10px 0 0; padding: 18px 0 0 20px; border-left: 2px solid var(--neon); max-width: 46ch; }
.p-founder blockquote { margin: 0; display: grid; gap: 10px; }
.p-founder p { color: rgba(255, 255, 255, 0.8); font-size: 16px; line-height: 1.55; }
.p-founder figcaption { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: 400 12px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--p-ink-3); }
.p-founder figcaption img { width: 16px; height: 16px; }
@media (min-width: 1024px) {
  .p-final__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(40px, 5vw, 88px); align-items: center; }
}
@media (min-width: 1200px) { .p-final__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); } }
@media (max-width: 599px) { .p-final-wrap .container { width: calc(100% - 16px); } }

/* Inline enquiry flow, dark (start.js mounts into [data-inline-start]).
   The design theme styles its own copy in theme-design.css. */
[data-theme="performance"] .start-inline {
  --err: #FF8A8A;
  position: relative; text-align: left; width: 100%;
  background: rgba(8, 15, 11, 0.9);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0;
  padding: clamp(20px, 3.6vw, 36px);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(57, 255, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[data-theme="performance"] .start-inline__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 16px; margin-bottom: clamp(20px, 2.6vw, 28px); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="performance"] .start-inline__head .p-label:first-child { display: inline-flex; align-items: center; gap: 8px; }
[data-theme="performance"] .start-inline__head .p-label:first-child::before { content: ""; width: 7px; height: 7px; border-radius: 0; background: var(--accent); box-shadow: 0 0 10px rgba(57, 255, 20, 0.9); }
[data-theme="performance"] .start-inline__progress { padding: 5px 9px; border-radius: 0; font-family: var(--font-mono); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 12px; }
[data-theme="performance"] .start-inline__progress:empty { display: none; }
[data-theme="performance"] .start-inline__noscript { margin-bottom: 20px; color: var(--p-ink-2); }

[data-theme="performance"] .start-inline .form-stage h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 12px; outline: none; }
[data-theme="performance"] .start-inline .form-stage p { color: var(--p-ink-2); margin: 0 0 20px; }
[data-theme="performance"] .start-inline .form-stage p strong { color: #fff; font-weight: 600; }
[data-theme="performance"] .start-inline .form-stage h3 + label,
[data-theme="performance"] .start-inline .form-stage h3 + .choice { margin-top: 20px; }
[data-theme="performance"] .start-inline label { display: block; margin-bottom: 18px; }
[data-theme="performance"] .start-inline label > span { display: block; font: 500 14.5px/1.4 var(--font-body); color: rgba(255, 255, 255, 0.88); margin-bottom: 8px; }
[data-theme="performance"] .start-inline .hint { font-weight: 400; font-size: 13px; line-height: 1.45; color: var(--p-ink-3); margin: -2px 0 10px; }
[data-theme="performance"] .start-inline .req { color: var(--accent); margin-left: 2px; }
[data-theme="performance"] .start-inline :is(input[type="text"], input[type="email"], textarea) {
  display: block; width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 2px; background: rgba(255, 255, 255, 0.04); color: #fff;
  font: 400 16px/1.4 var(--font-body); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
[data-theme="performance"] .start-inline textarea { min-height: 110px; resize: vertical; }
[data-theme="performance"] .start-inline :is(input, textarea):hover { border-color: rgba(255, 255, 255, 0.28); }
[data-theme="performance"] .start-inline :is(input, textarea):focus { outline: none; border-color: var(--accent); background: rgba(57, 255, 20, 0.04); box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.2); }

[data-theme="performance"] .start-inline .choice {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 54px; margin-bottom: 10px; padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 2px; background: rgba(255, 255, 255, 0.03); color: #fff;
  font: 500 15.5px/1.35 var(--font-body); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s var(--ease-out);
}
[data-theme="performance"] .start-inline .choice::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.4); transition: all .2s ease;
}
[data-theme="performance"] .start-inline .choice input { position: absolute; opacity: 0; pointer-events: none; }
[data-theme="performance"] .start-inline .choice:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); transform: translateX(2px); }
[data-theme="performance"] .start-inline .choice.selected { border-color: rgba(57, 255, 20, 0.6); background: rgba(57, 255, 20, 0.08); box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.25), 0 0 26px -8px rgba(57, 255, 20, 0.55); }
[data-theme="performance"] .start-inline .choice.selected::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px #0A120D, 0 0 10px rgba(57, 255, 20, 0.7); }
[data-theme="performance"] .start-inline .choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

[data-theme="performance"] .start-inline .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
[data-theme="performance"] .start-inline .secondary + .primary { margin-left: auto; }
[data-theme="performance"] .start-inline .actions:has(.primary + .primary) { flex-direction: column; align-items: stretch; }
[data-theme="performance"] .start-inline button { cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
[data-theme="performance"] .start-inline button.primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 24px;
  border: 0; border-radius: 0; background: var(--accent); color: #041006;
  font: 500 15px/1.2 var(--font-body); text-align: center;
  box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.35), 0 18px 60px -18px rgba(57, 255, 20, 0.55);
  transition: transform .2s var(--ease-out), background-color .2s ease, box-shadow .2s ease;
}
[data-theme="performance"] .start-inline button.primary:hover:not(:disabled) { background: #6BFF4F; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.6), 0 20px 60px -16px rgba(57, 255, 20, 0.75); }
[data-theme="performance"] .start-inline button.primary:disabled { box-shadow: none; }
[data-theme="performance"] .start-inline button.secondary {
  min-height: 44px; padding: 10px 4px; border: 0; background: none; color: var(--p-ink-2);
  font: 500 15px/1.3 var(--font-body); text-align: left;
}
[data-theme="performance"] .start-inline button.secondary:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
[data-theme="performance"] .start-inline button:disabled { opacity: 0.35; cursor: not-allowed; }
[data-theme="performance"] .start-inline button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-theme="performance"] .start-inline .form-error {
  margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(255, 138, 138, 0.45); border-radius: 0;
  background: rgba(255, 90, 90, 0.08); color: #FFC2C2; font-size: 14px; font-weight: 500;
}
[data-theme="performance"] .start-inline .form-stage ul { display: grid; gap: 12px; margin: 0 0 4px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; background: rgba(255, 255, 255, 0.03); }
[data-theme="performance"] .start-inline .form-stage li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: rgba(255, 255, 255, 0.86); line-height: 1.45; }
[data-theme="performance"] .start-inline .form-stage li::before {
  content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 0;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23041006' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
@media (max-width: 479px) {
  [data-theme="performance"] .start-inline .actions { gap: 8px; }
  [data-theme="performance"] .start-inline button.primary { order: -1; flex: 1 1 100%; margin-left: 0; }
  [data-theme="performance"] .start-inline button.secondary { flex: 1 1 100%; text-align: center; }
  [data-theme="performance"] .start-inline .secondary + .primary { margin-left: 0; }
}

/* ---------- 10. Footer (the band above dissolves into it) ---------- */
.p-px--footer { margin-top: 0; }
.p-footer { position: relative; overflow: hidden; padding-top: clamp(48px, 5vw, 72px); background: var(--night); }
.p-footer__top { display: grid; gap: 48px; }
.p-footer__brand { display: grid; gap: 18px; justify-items: start; align-content: start; }
.p-footer__brand .brand { grid-area: auto; }
.p-footer__brand em { font: italic 400 1.1em/.86 var(--font-serif); letter-spacing: -0.01em; color: var(--accent); padding-right: .04em; }
.p-footer__brand p { font: 500 clamp(24px, 2.6vw, 34px)/1.12 var(--font-display); letter-spacing: -0.035em; max-width: 15ch; }
.p-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px 48px; }
.p-footer__h { font: 400 12px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--p-ink-3); margin-bottom: 16px; }
.p-footer__cols ul { display: grid; gap: 12px; }
.p-footer__cols a { display: inline-flex; font-size: 15px; color: rgba(255, 255, 255, 0.82); transition: color .2s ease; }
.p-footer__cols a:hover { color: var(--accent); }
@media (min-width: 900px) {
  .p-footer__top { grid-template-columns: minmax(0, 1fr) auto; }
  .p-footer__cols { grid-template-columns: repeat(3, auto); gap: 72px; }
}
.p-footer__word {
  margin-top: clamp(48px, 6vw, 88px); text-align: center; white-space: nowrap; user-select: none;
  font: 600 min(15.4vw, 222px)/.78 var(--font-display); letter-spacing: -0.065em;
  background: linear-gradient(180deg, rgba(57, 255, 20, 0.55), rgba(57, 255, 20, 0.12) 62%, transparent 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.p-footer__bottom small { color: var(--p-ink-3); font: 400 12px/1.4 var(--font-mono); }