/* Company-profile engine – public stylesheet.
   Brand values (--primary, --accent, --font, --radius) are injected from settings. */
:root {
  --ink: #15191f;
  --ink-2: #4a5260;
  --ink-3: #7b8494;
  --line: #e3e6ea;
  --bg: #ffffff;
  --bg-2: #f5f6f8;
  --max: 1160px;
  --gutter: clamp(20px, 4vw, 40px);
  --space: clamp(56px, 9vw, 112px);
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.35rem, 1.2rem + 0.8vw, 1.6rem);
  --step-3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-4: clamp(2rem, 1.5rem + 2vw, 3rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--font); font-size: var(--step-0); line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
h1, h2, h3, h4 { font-family: var(--font-heading, var(--font)); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; color: var(--ink); text-wrap: balance; }
h1, .h1 { font-size: var(--step-4); letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: 760px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--ink-3); }
.eyebrow { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 0.9em; }
.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 62ch; line-height: 1.55; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { margin-bottom: 0.4em; }
.section-head .lede { margin-bottom: 0; }
.section-foot { margin-top: 40px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s ease, box-shadow .15s ease; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); color: #fff; }
.btn-secondary { background: transparent; color: var(--primary); border-color: currentColor; }
.btn-secondary:hover { color: var(--accent-strong); }
.btn-light { background: #fff; color: var(--primary); }
.btn-light:hover { background: #f1f3f5; color: var(--primary); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
[data-motion="on"] .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--ink) 25%, transparent); }
[data-motion="on"] .btn:active { transform: translateY(0); box-shadow: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-block; }
.link-arrow::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .2s ease; }
.link-arrow:hover { text-decoration: underline; }
[data-motion="on"] .link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Motion system ----------
   Classes are applied by site.js at runtime only, so pages never depend on JS
   to be visible: without JS every element simply keeps its normal opacity/position. */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
[data-motion="off"] .reveal, [data-motion="off"] .reveal.is-visible { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

[data-motion="on"] .product-card, [data-motion="on"] .post-card { transition: transform .25s ease; }
[data-motion="on"] .product-card:hover, [data-motion="on"] .post-card:hover { transform: translateY(-5px); }
[data-motion="on"] .product-thumb img, [data-motion="on"] .post-thumb img { transition: transform .4s ease; }
[data-motion="on"] .product-card:hover .product-thumb img, [data-motion="on"] .post-card:hover .post-thumb img { transform: scale(1.05); }

/* Header */
/* Fully opaque: a translucent + blurred header sitting over the hero's dot-grid
   picked up the pattern underneath, showing as a faint halo around the nav button. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand img { height: 32px; width: auto; }
.wordmark { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.03em; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav > ul { display: flex; gap: 28px; }
.site-nav > ul > li { position: relative; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 6px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav > ul > li > a[aria-current="page"] { box-shadow: 0 2px 0 var(--accent-strong); }
/* Two classes so this reliably beats ".site-nav a" (class+tag), which was
   winning on specificity over a bare ".nav-cta" and silently zeroing the
   button's horizontal padding — the cause of the cramped, "haloed" look. */
.site-nav .nav-cta { color: #fff !important; padding: 10px 18px; }
.submenu { position: absolute; top: 100%; left: -12px; min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 0; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.has-children:hover .submenu, .has-children:focus-within .submenu { display: block; }
.submenu a { display: block; padding: 8px 14px; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: transform .2s; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -7px; } .bars::after { top: 7px; }
.nav-open .bars { background: transparent; }
.nav-open .bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Sections */
.section-wrap > section { padding-block: var(--space); position: relative; }
/* Optional decorative background image (any section can have one, set via its
   own "Background image" field). Faded and full-bleed behind the section; the
   section's own content sits above it via the container's z-index. */
.section-bg-image { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.4; mix-blend-mode: multiply; }
.section-wrap > section > .container { position: relative; z-index: 1; }
.section-wrap + .section-wrap > section { border-top: 1px solid var(--line); }
.section-wrap[data-type="hero"] + .section-wrap > section,
.section-wrap[data-type="cta"] > section, .section-wrap[data-type="stats"] > section, .section-wrap[data-type="logos"] > section { border-top: 0; }

/* Alternating tint so plain sections don't all read as the same white block.
   Sections with their own explicit background (hero, statement, stats, logos, cta) are excluded. */
:root { --tint: #f6f4f1; }
:root { --tint: color-mix(in srgb, var(--primary) 5%, var(--bg)); }
.section-wrap:nth-of-type(even) > section:not(.hero):not(.statement):not(.stats):not(.logos):not(.cta-band) { background: var(--tint); }
.section-wrap:nth-of-type(even) + .section-wrap > section { border-top-color: transparent; }

/* Hero */
.hero { padding-block: clamp(64px, 10vw, 128px) !important; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--primary) 20%, transparent) 1.5px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
          mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
.hero.has-image .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
.hero h1 { max-width: 18ch; }
.hero .lede { font-size: var(--step-2); font-weight: 400; }
.hero-media img { border-radius: var(--radius); }

/* Dynamic style: a slow-drifting blurred colour wash ("aurora") behind the hero,
   built from radial-gradient blobs animated with transform only (GPU-friendly,
   no layout cost). Frozen to a still frame when motion is off. */
[data-theme-style="dynamic"] .hero::after {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none; filter: blur(60px);
  background:
    radial-gradient(38% 38% at 22% 28%, color-mix(in srgb, var(--primary) 38%, transparent), transparent 70%),
    radial-gradient(32% 32% at 78% 18%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%),
    radial-gradient(42% 42% at 65% 82%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%);
}
[data-theme-style="dynamic"][data-motion="on"] .hero::after { animation: aurora-drift 24s ease-in-out infinite alternate; }
@keyframes aurora-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3%, 2%) scale(1.06); }
  100% { transform: translate(2%, -3%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { [data-theme-style="dynamic"] .hero::after { animation: none !important; } }

/* ---------- Premium style ----------
   Dark, dramatic hero and closing band; a fine film-grain texture for material
   depth; serif display headings (set via heading_font_family in settings);
   persistently-elevated cards instead of flat bordered lists; a glowing
   primary button. Everything else (layout, spacing, content) is unchanged —
   this is a skin, not a fork. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme-style="premium"] h1, [data-theme-style="premium"] h2, [data-theme-style="premium"] h3, [data-theme-style="premium"] h4 { letter-spacing: -0.005em; }
[data-theme-style="premium"] .eyebrow { letter-spacing: 0.12em; }

[data-theme-style="premium"] .hero {
  background: radial-gradient(120% 100% at 15% 0%, color-mix(in srgb, var(--primary) 55%, #050810) 0%, #050810 60%);
  color: rgba(255,255,255,.92);
}
[data-theme-style="premium"] .hero::before {
  /* fine light dot-grid instead of the dark-on-white version, plus grain for texture */
  background-image:
    var(--grain),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1.5px, transparent 0);
  background-size: 140px 140px, 26px 26px;
  opacity: .5;
  mix-blend-mode: overlay;
}
[data-theme-style="premium"] .hero::after {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none; filter: blur(70px);
  background:
    radial-gradient(32% 40% at 80% 15%, color-mix(in srgb, var(--accent) 65%, transparent), transparent 70%),
    radial-gradient(36% 44% at 15% 85%, color-mix(in srgb, var(--primary) 70%, transparent), transparent 70%),
    radial-gradient(24% 30% at 55% 40%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
}
[data-theme-style="premium"][data-motion="on"] .hero::after { animation: aurora-drift 26s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { [data-theme-style="premium"] .hero::after { animation: none !important; } }
[data-theme-style="premium"] .hero .eyebrow { color: color-mix(in srgb, var(--accent) 70%, white); }
[data-theme-style="premium"] .hero h1 { color: #fff; }
[data-theme-style="premium"] .hero .lede { color: rgba(255,255,255,.68); }
[data-theme-style="premium"] .hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,.35); }
[data-theme-style="premium"] .hero .btn-secondary:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
[data-theme-style="premium"] .hero-media { filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); }

/* Primary button stays a plain, solid fill in the brand's actual primary colour —
   no gradient, no colour-tinted glow. A gradient-and-glow button is a generic
   "AI template" tell, and it had also drifted toward a leftover orange
   (#ff8a4c) from before the real brand palette was wired in. */
[data-theme-style="premium"] .btn-primary { background: var(--primary); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--ink) 35%, transparent); }
[data-theme-style="premium"] .btn-primary:hover { background: var(--accent-strong); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--ink) 35%, transparent); }

/* Elevated cards instead of flat bordered lists */
[data-theme-style="premium"] .product-card { background: #fff; border-radius: 14px; padding: 16px 16px 24px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -10px rgba(16,24,40,.12); }
[data-theme-style="premium"] .product-card .product-thumb { margin: -16px -16px 20px; border-radius: 14px 14px 0 0; }
[data-theme-style="premium"][data-motion="on"] .product-card:hover { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 24px 40px -12px rgba(16,24,40,.22); }
[data-theme-style="premium"] .feature-grid li { border-top: 0; background: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 24px -10px rgba(16,24,40,.1); }
[data-theme-style="premium"] .feature-grid.cols-3 li:nth-child(3n+2), [data-theme-style="premium"] .feature-grid.cols-4 li:nth-child(even), [data-theme-style="premium"] .feature-grid.cols-2 li:nth-child(even) { border-top: 0; }
[data-theme-style="premium"] .feature-index { font-family: var(--font-heading, var(--font)); font-style: italic; opacity: .3; }

[data-theme-style="premium"] .cta-band { background: radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--primary) 45%, #050810) 0%, #050810 55%); }
[data-theme-style="premium"] .cta-band::before { background-image: var(--grain), radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1.5px, transparent 0); background-size: 140px 140px, 26px 26px; mix-blend-mode: overlay; }
[data-theme-style="premium"] .cta-band::after {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none; filter: blur(80px);
  background:
    radial-gradient(34% 55% at 90% 30%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(30% 50% at 55% 95%, color-mix(in srgb, var(--primary) 60%, transparent), transparent 70%);
}
[data-theme-style="premium"][data-motion="on"] .cta-band::after { animation: aurora-drift 30s ease-in-out infinite alternate-reverse; }
@media (prefers-reduced-motion: reduce) { [data-theme-style="premium"] .cta-band::after { animation: none !important; } }

[data-theme-style="premium"] .statement-inner { border-left: none; padding-left: 0; }
[data-theme-style="premium"] .statement-text { font-family: var(--font-heading, var(--font)); font-size: var(--step-2); font-weight: 500; }

/* Statement */
/* ---------- Editorial style ----------
   Deliberately anti-mainstream: oversized display type, a strict monochrome
   base with the accent used in exactly one or two places rather than spread
   across the page, an asymmetric full-bleed hero with a giant faint numeral
   instead of a card-mockup illustration, sharp-edged buttons instead of soft
   rounded ones, and no glossy/shadowed cards anywhere - hairline rules and
   whitespace do the work instead. Not a copy of any specific site; a distinct
   fourth preset alongside minimal/dynamic/premium, picked the same way. */
:root[data-theme-style="editorial"] {
  --step-4: clamp(2.75rem, 1.5rem + 7vw, 7rem);
  --tint: var(--bg-2);
  --radius: 0px; /* sharp edges everywhere this token is used: cards, thumbnails, form inputs, the map, the submenu */
  --chapter-ink: color-mix(in srgb, var(--ink) 14%, transparent); /* outline colour for the chapter numeral below; a dark section (the CTA band) redefines this to a light tint instead of overriding the numeral rule directly */
}
[data-theme-style="editorial"] main { counter-reset: chapter; }
[data-theme-style="editorial"] .section-wrap { counter-increment: chapter; }
[data-theme-style="editorial"] h1, [data-theme-style="editorial"] .h1 { letter-spacing: -0.035em; line-height: 0.98; }
[data-theme-style="editorial"] .btn { border-radius: 0; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; font-size: 0.78rem; padding: 15px 28px; }
[data-theme-style="editorial"] .btn-primary { background: var(--primary); color: #fff; }
[data-theme-style="editorial"] .btn-primary:hover { background: var(--accent-strong); color: #fff; }
[data-theme-style="editorial"] .btn-secondary { border-color: var(--primary); color: var(--primary); }
[data-theme-style="editorial"] .btn-secondary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
[data-theme-style="editorial"] .btn-ghost { border-radius: 0; }

[data-theme-style="editorial"] .hero { overflow: hidden; min-height: 100vh; display: flex; align-items: center; padding-block: clamp(120px, 14vw, 200px) !important; }
[data-theme-style="editorial"] .hero::before { content: none; }
[data-theme-style="editorial"] .hero::after {
  /* Fully inside the hero's box (not bled off the edge and clipped by
     overflow:hidden) - a whole, legible outlined numeral, not a stray arc. */
  content: counter(chapter, decimal-leading-zero); position: absolute; right: clamp(24px, 4vw, 64px); bottom: clamp(20px, 3vw, 48px); z-index: 0; pointer-events: none;
  font-family: var(--font-heading, var(--font)); font-weight: 800; line-height: 1;
  font-size: clamp(4rem, 11vw, 9rem); color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--primary) 35%, transparent);
}
[data-theme-style="editorial"] .hero-grid { position: relative; z-index: 1; grid-template-columns: 1fr !important; }
[data-theme-style="editorial"] .hero .lede { max-width: 52ch; }
[data-theme-style="editorial"] .hero-media { display: none; }
[data-theme-style="editorial"] .hero .eyebrow { display: inline-flex; align-items: center; gap: 14px; color: var(--ink-2); }
[data-theme-style="editorial"] .hero .eyebrow::before { content: ""; width: 36px; height: 2px; background: var(--accent-strong); }
[data-theme-style="editorial"] .hero h1 { max-width: none; color: var(--primary); }
@media (max-width: 720px) { [data-theme-style="editorial"] .hero::after { font-size: clamp(6rem, 32vw, 11rem); } }

[data-theme-style="editorial"] .cta-band { background: var(--primary); --chapter-ink: color-mix(in srgb, white 30%, transparent); }
[data-theme-style="editorial"] .cta-band::before { content: none; }

/* The same chapter numeral the hero uses, repeated on every other top-level
   section (smaller, quieter) so it reads as one running system instead of a
   one-off hero decoration. Sits behind the section's own content (negative
   z-index), so it never competes with text or buttons in that corner. */
[data-theme-style="editorial"] .section-wrap:not([data-type="hero"]) > section::after {
  content: counter(chapter, decimal-leading-zero); position: absolute; z-index: -1; pointer-events: none;
  right: clamp(16px, 3vw, 40px); bottom: clamp(10px, 2vw, 24px);
  font-family: var(--font-heading, var(--font)); font-weight: 800; line-height: 1;
  font-size: clamp(2.25rem, 5vw, 4.5rem); color: transparent;
  -webkit-text-stroke: 1px var(--chapter-ink);
}

/* Carry the same monochrome-plus-one-accent, sharp-edged, big-numeral language
   into the sections that would otherwise still look like the default theme. */
[data-theme-style="editorial"] .feature-index { font-family: var(--font-heading, var(--font)); font-size: 3rem; font-weight: 800; opacity: .2; font-style: normal; }
[data-theme-style="editorial"] .process-list li::before { border-radius: 0; background: var(--primary); }
[data-theme-style="editorial"] .compare-solution { background: var(--bg); }
[data-theme-style="editorial"] .compare-solution h3 { color: var(--primary); }
[data-theme-style="editorial"] .compare-col li::before, [data-theme-style="editorial"] .compare-solution li::before { color: var(--ink-3); }

/* ---------- Tech style ----------
   Stripe / Linear / Vercel register: near-monochrome, one restrained accent
   colour used only for interactive elements (never as decoration), real
   product screenshots instead of illustrations, small consistent border
   radii with hairline borders instead of shadows or gradients, generous
   uniform whitespace, and motion that is barely noticeable rather than a
   feature in itself. No serif display type, no oversized numerals, no
   background patterns, no gradients on buttons. */
:root[data-theme-style="tech"] {
  --radius: 8px;
  --tint: var(--bg); /* sections stay one flat white/near-white, separated by hairlines only */
}
[data-theme-style="tech"] h1, [data-theme-style="tech"] h2, [data-theme-style="tech"] h3, [data-theme-style="tech"] h4 { letter-spacing: -0.02em; }
[data-theme-style="tech"] .eyebrow { color: var(--ink-3); font-weight: 600; }

/* Buttons: small, tight, normal case, hairline border instead of a shadow */
[data-theme-style="tech"] .btn { font-weight: 600; font-size: 0.9rem; padding: 10px 18px; }
[data-theme-style="tech"] .btn-primary { background: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, black 8%, transparent); }
[data-theme-style="tech"] .btn-primary:hover { background: color-mix(in srgb, var(--primary) 85%, black); }
[data-theme-style="tech"] .btn-secondary { border-color: var(--line); color: var(--ink); background: var(--bg); }
[data-theme-style="tech"] .btn-secondary:hover { border-color: var(--ink-3); color: var(--ink); background: var(--bg-2); }
[data-theme-style="tech"][data-motion="on"] .btn:hover { transform: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, black 8%, transparent); }

/* Hero: no illustration, no dot-grid, no glow - a real product screenshot
   in a plain bordered frame is the entire visual, exactly like the sites
   this preset is modelled on. */
[data-theme-style="tech"] .hero { padding-block: clamp(72px, 9vw, 120px) !important; }
[data-theme-style="tech"] .hero::before, [data-theme-style="tech"] .hero::after { content: none; }
[data-theme-style="tech"] .hero .eyebrow {
  display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2);
  font-size: 0.78rem; font-weight: 600; text-transform: none; letter-spacing: 0;
}
[data-theme-style="tech"] .hero h1 { font-weight: 700; max-width: 16ch; }
[data-theme-style="tech"] .hero-media { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(16,24,40,.08); }
[data-theme-style="tech"] .hero-media img { border-radius: 0; }

/* Flat cards: hairline border, small radius, no shadow at rest */
[data-theme-style="tech"] .product-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 20px; transition: border-color .15s ease; }
[data-theme-style="tech"] .product-card .product-thumb { margin: -16px -16px 20px; border-radius: 11px 11px 0 0; background: var(--bg-2); }
[data-theme-style="tech"][data-motion="on"] .product-card:hover { transform: none; border-color: var(--ink-3); }
[data-theme-style="tech"] .feature-grid li { border-top: none; border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
/* Matches the exact selectors (and beats their specificity) of the alternating
   accent-coloured top border used elsewhere, so it doesn't survive as a stray
   stripe on this preset's plain hairline-bordered cards. */
[data-theme-style="tech"] .feature-grid.cols-3 li:nth-child(3n+2),
[data-theme-style="tech"] .feature-grid.cols-4 li:nth-child(even),
[data-theme-style="tech"] .feature-grid.cols-2 li:nth-child(even) { border-top-color: var(--line); }
[data-theme-style="tech"] .feature-index { font-size: 0.8rem; font-weight: 700; opacity: 0.5; }
[data-theme-style="tech"] .segments-media { border: 1px solid var(--line); border-radius: 10px; }
[data-theme-style="tech"] .compare-grid { border-radius: 12px; }
[data-theme-style="tech"] .compare-solution { background: var(--bg); }
[data-theme-style="tech"] .compare-solution h3 { color: var(--primary); }
[data-theme-style="tech"] .compare-col li::before, [data-theme-style="tech"] .compare-solution li::before { color: var(--ink-3); }

/* CTA band: plain solid dark fill, no grain, no glow, no gradient */
[data-theme-style="tech"] .cta-band { background: var(--ink); }
[data-theme-style="tech"] .cta-band::before, [data-theme-style="tech"] .cta-band::after { content: none; }

.statement { background: var(--bg-2); }
.statement-inner { max-width: 640px; padding-left: 24px; border-left: 3px solid var(--accent-strong); }
.statement-text { font-size: var(--step-1); line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.statement-text p:last-child { margin-bottom: 0; }

/* Prose */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--step-2); margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 3px solid var(--accent-strong); color: var(--ink-2); }
.prose img { border-radius: var(--radius); margin: 1.5em 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.5em 0; font-size: var(--step--1); }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose code { background: var(--bg-2); padding: 2px 5px; border-radius: 3px; font-size: 0.9em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }

/* Split */
.split-grid { display: grid; gap: 56px; align-items: center; grid-template-columns: 1fr 1fr; }
.split.image-left .split-media { order: -1; }
.split-media img { border-radius: var(--radius); }
.split-media { margin: 0; }

/* Features */
.feature-grid { display: grid; gap: 40px 48px; }
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.feature-grid li { padding-top: 20px; border-top: 2px solid var(--ink); }
.feature-grid.cols-3 li:nth-child(3n+2) { border-top-color: var(--accent-strong); }
.feature-grid.cols-4 li:nth-child(even) { border-top-color: var(--accent-strong); }
.feature-grid.cols-2 li:nth-child(even) { border-top-color: var(--accent-strong); }
.feature-index { display: block; font-size: 1.75rem; font-weight: 700; color: var(--ink-3); opacity: .45; letter-spacing: 0; margin-bottom: 10px; font-variant-numeric: tabular-nums; line-height: 1; }
.feature-grid p { color: var(--ink-2); margin: 0; }

/* Stats */
.stats { background: var(--primary); color: #fff; padding-block: clamp(40px, 6vw, 64px) !important; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; margin: 0; }
.stat-row dd { margin: 0; font-size: var(--step-4); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-row dt { margin-top: 8px; color: rgba(255,255,255,.75); font-size: var(--step--1); }

/* Timeline */
.timeline-list { max-width: 820px; border-left: 2px solid var(--line); margin-left: 6px; }
.timeline-list li { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 0 0 40px 32px; }
.timeline-list li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-strong); border: 2px solid #fff; }
.timeline-list time { font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.timeline-list p { color: var(--ink-2); margin: 0; }

/* Products */
/* Flex + wrap + center: an uneven last row (e.g. 4 cards) centers itself
   instead of a lone card sitting flush left with a large empty gap beside it. */
.product-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 32px; }
.product-grid > li { flex: 1 1 300px; max-width: 360px; }
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-thumb { display: block; background: var(--bg-2); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; aspect-ratio: 16/10; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .eyebrow { margin-bottom: 0.5em; font-size: 0.72rem; color: var(--ink-3); }
.product-card h3 { font-size: var(--step-2); margin-bottom: 0.3em; }
.product-card h3 a { color: inherit; text-decoration: none; }
.product-card h3 a:hover { color: var(--accent-strong); }
.product-tagline { font-weight: 500; margin-bottom: 0.5em; }
.product-summary { color: var(--ink-2); font-size: var(--step--1); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-group + .product-group { margin-top: 64px; }
.group-title { font-size: var(--step-1); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.products-index, .blog-index, .product-detail, .post-detail .container, .not-found { padding-block: var(--space); }
.product-layout { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }
.product-hero { margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; }
.product-side { position: sticky; top: 96px; display: grid; gap: 32px; }
.product-side h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 14px; }
.feature-list li { padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--step--1); }
.feature-list strong { display: block; }
.feature-list span { color: var(--ink-2); }
.link-list li { padding: 6px 0; }
.related { border-top: 1px solid var(--line); padding-block: var(--space); }
.related h2 { margin-bottom: 40px; }

/* Services / process */
.service-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.service-list > li { display: grid; grid-template-columns: 60px 1fr 1.4fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); counter-increment: svc; }
.service-list > li::before { content: counter(svc, decimal-leading-zero); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.service-list > li > h3 { margin: 0; font-size: var(--step-1); }
.service-list h3 a { color: inherit; text-decoration: none; }
.service-list h3 a:hover { color: var(--accent-strong); }
.service-list > li > p { margin: 0; color: var(--ink-2); }
.service-points { grid-column: 3; margin-top: 10px; display: grid; gap: 6px; }
.service-points li { position: relative; padding-left: 16px; color: var(--ink-2); font-size: var(--step--1); }
.service-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-strong); }

/* Flex + wrap + center (see .product-grid above); the connecting line assumes the
   common case of one row (4 items) and is a purely decorative timeline cue. */
.process-list { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; counter-reset: step; }
.process-list::before { content: ""; position: absolute; top: 18px; left: 40px; right: 40px; height: 1px; background: var(--line); z-index: 0; }
.process-list > li { position: relative; z-index: 1; flex: 1 1 220px; max-width: 260px; }
.process-list li { counter-increment: step; }
.process-list li::before { content: counter(step); position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 600; font-size: 0.9rem; margin-bottom: 16px; }
.process-list h3 { font-size: var(--step-0); }
.process-list p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }

/* Team, logos, testimonials, faq */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 40px 32px; }
.team-grid img, .avatar-placeholder { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--bg-2); margin-bottom: 16px; }
.avatar-placeholder { display: grid; place-items: center; font-size: 2.5rem; color: var(--ink-3); font-weight: 600; }
.team-grid h3 { font-size: var(--step-0); margin-bottom: 0.1em; }
.team-grid .role { color: var(--ink-3); font-size: var(--step--1); }
.team-grid p { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.logos { padding-block: clamp(32px, 5vw, 56px) !important; background: var(--bg-2); }
.logos-heading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); text-align: center; margin-bottom: 28px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 56px; }
.logo-row img { height: 36px; width: auto; filter: grayscale(1); opacity: .7; }
.logo-row span { font-weight: 600; color: var(--ink-3); }
.logo-row a { text-decoration: none; }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.quote-grid blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--accent-strong); }
.quote-grid p { font-size: var(--step-1); line-height: 1.45; }
.quote-grid footer { color: var(--ink-2); font-size: var(--step--1); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--ink-3); font-weight: 400; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list .prose { padding-bottom: 18px; color: var(--ink-2); }

/* Posts */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.post-list { display: grid; gap: 48px; max-width: 760px; }
.post-list li + li { padding-top: 48px; border-top: 1px solid var(--line); }
.post-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); background: var(--bg-2); margin-bottom: 16px; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-meta { display: flex; gap: 14px; font-size: 0.85rem; color: var(--ink-3); margin-bottom: 8px; }
.post-cat { color: var(--accent-strong); font-weight: 600; }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a:hover { color: var(--accent-strong); }
.post-card p:last-child { color: var(--ink-2); font-size: var(--step--1); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-cover { margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; max-width: 760px; color: var(--ink-3); }

/* CTA band */
.cta-band { background: var(--ink); color: #fff; padding-block: clamp(48px, 7vw, 80px) !important; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1.5px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 100% 50%, black, transparent);
          mask-image: radial-gradient(ellipse 60% 100% at 100% 50%, black, transparent);
}
.cta-band h2 { color: #fff; margin-bottom: 0.3em; }
.cta-band p { color: rgba(255,255,255,.75); margin: 0; max-width: 56ch; }
[data-theme-style="dynamic"] .cta-band::after {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none; filter: blur(70px);
  background:
    radial-gradient(34% 50% at 85% 30%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
    radial-gradient(30% 45% at 60% 90%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 70%);
}
[data-theme-style="dynamic"][data-motion="on"] .cta-band::after { animation: aurora-drift 28s ease-in-out infinite alternate-reverse; }
@media (prefers-reduced-motion: reduce) { [data-theme-style="dynamic"] .cta-band::after { animation: none !important; } }
.cta-grid { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Problem vs. solution */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare-col { background: var(--bg); padding: 32px; }
.compare-col h3 { font-size: var(--step-0); margin-bottom: 16px; }
.compare-problem h3 { color: var(--ink-2); }
.compare-problem h3::before { content: "✕ "; color: var(--ink-3); }
.compare-solution { background: color-mix(in srgb, var(--primary) 4%, var(--bg)); }
.compare-solution h3 { color: var(--primary); }
.compare-solution h3::before { content: "✓ "; color: var(--accent-strong); }
.compare-col ul { display: grid; gap: 12px; }
.compare-col li { position: relative; padding-left: 20px; color: var(--ink-2); }
.compare-col li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }
.compare-solution li::before { content: "—"; color: var(--accent-strong); }

/* Industry / audience switcher */
.segments-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.segments-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 4px; margin-bottom: -1px; font: inherit; font-weight: 600; font-size: var(--step--1); color: var(--ink-3); cursor: pointer; }
.segments-tab:hover { color: var(--ink); }
.segments-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent-strong); }
.segments-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.segments-panel[hidden] { display: none; }
.segments-media { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); aspect-ratio: 4/3; }
.segments-media img { width: 100%; height: 100%; object-fit: cover; }
.segments-text h3 { margin-bottom: 0.4em; }
.segments-text p { color: var(--ink-2); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
.contact-form label { display: block; font-size: var(--step--1); font-weight: 500; margin-bottom: 18px; }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; border: 1px solid #c9ced6; border-radius: var(--radius); background: #fff; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--accent-strong); outline-offset: 1px; border-color: transparent; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.hp { position: absolute; left: -9999px; }
.form-notice { padding: 12px 14px; border-radius: var(--radius); font-size: var(--step--1); margin-bottom: 20px; }
.form-notice.ok { background: #e8f5ee; color: #14532d; }
.form-notice.err { background: #fdecec; color: #7f1d1d; }
.cf-turnstile { margin-bottom: 16px; }
.contact-details { margin: 0; display: grid; gap: 20px; }
.contact-details dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
.contact-details dd { margin: 0; }
.contact-details a { text-decoration: none; }
.map { width: 100%; aspect-ratio: 4/3; border: 0; margin-top: 32px; border-radius: var(--radius); }

/* Page header / breadcrumb */
.page-header { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.page-header h1 { max-width: 22ch; }
.page-header .lede { margin-bottom: 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.85rem; color: var(--ink-3); margin-bottom: 20px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-top: clamp(48px, 6vw, 72px); font-size: var(--step--1); color: var(--ink-2); }
/* --footer-cols is set inline from the actual number of columns rendered (about +
   configured nav columns + contact), so an extra/missing column never wraps
   misaligned under the first column regardless of how many are configured. */
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(calc(var(--footer-cols, 4) - 1), 1fr); gap: 40px; padding-bottom: 48px; }
.footer-about p { max-width: 36ch; margin-top: 16px; }
.footer-col h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 14px; }
.footer-col li { margin-bottom: 8px; }
.footer-col a, .footer-contact a, .social a { color: var(--ink-2); text-decoration: none; }
.footer-col a:hover, .footer-contact a:hover, .social a:hover { color: var(--ink); text-decoration: underline; }
.footer-contact p { margin-bottom: 8px; }
.social { display: flex; gap: 16px; margin-top: 16px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-block: 20px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-3); }
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; gap: 20px; }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--ink); }

/* Responsive */
@media (max-width: 960px) {
  .hero.has-image .hero-grid, .split-grid, .product-layout, .contact-grid { grid-template-columns: 1fr; }
  .feature-grid.cols-3, .feature-grid.cols-4, .product-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-side { position: static; }
  .service-list > li { grid-template-columns: 48px 1fr; }
  .service-list > li > p, .service-points { grid-column: 2; }
  .compare-grid, .segments-panel { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; gap: 12px; }
  .nav-open .site-nav { display: flex; }
  .site-nav > ul { flex-direction: column; gap: 0; }
  .site-nav > ul > li > a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-nav > ul > li > a[aria-current="page"] { box-shadow: none; color: var(--accent-strong); }
  .submenu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 8px 16px; }
  .nav-cta { justify-content: center; margin-top: 8px; }
  .feature-grid.cols-2, .feature-grid.cols-3, .feature-grid.cols-4, .product-grid, .post-grid, .footer-grid, .field-row { grid-template-columns: 1fr; }
  .timeline-list li { grid-template-columns: 1fr; gap: 4px; }
  .split.image-left .split-media { order: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }