/* 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;
  /* A faint cool-gray tint (not a flat white repeat) for the alternating
     sections - the same subtle banding Stripe/Linear use to separate
     sections without a hard rule or a decorative pattern. */
  --tint: color-mix(in srgb, var(--primary) 3%, var(--bg));
}
[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 { content: none; }
/* A whisper of colour, not a decoration: Stripe/Vercel-style pages are rarely
   pure flat white behind the hero - there's usually a very faint gradient
   wash for depth. One soft radial blob, no grid, no motion, no visible edge. */
[data-theme-style="tech"] .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(110% 90% at 80% -10%, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 60%);
}
[data-theme-style="tech"] .cta-band { position: relative; }
[data-theme-style="tech"] .cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 90% 110%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%);
}
[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 texture, no dot-grid; the one
   soft gradient wash is defined above (kept - not re-disabled here). */
[data-theme-style="tech"] .cta-band { background: var(--ink); }
[data-theme-style="tech"] .cta-band::before { content: none; }

/* Same whisper-of-colour treatment as the hero, extended to the other
   sections that would otherwise stay flat white - one soft blob per
   section, alternating corners, generic by section type so any site on
   this preset gets the same quiet depth regardless of its own layout. */
[data-theme-style="tech"] .section-wrap[data-type="services"] > section::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--primary) 7%, transparent) 0%, transparent 60%);
}
[data-theme-style="tech"] .section-wrap[data-type="features"] > section::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%);
}
[data-theme-style="tech"] .section-wrap[data-type="segments"] > section::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 70% at 100% 100%, color-mix(in srgb, var(--primary) 7%, transparent) 0%, transparent 60%);
}
[data-theme-style="tech"] .section-wrap[data-type="process"] > section::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 60%);
}

.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); }

/* Built-in icons, hero extras (generic: every preset gets a sane default) */
.icon { width: 24px; height: 24px; flex: none; }
.icon-tile { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: calc(var(--radius) + 4px); background: color-mix(in srgb, var(--primary) 8%, var(--bg)); color: var(--primary); margin-bottom: 18px; }
.service-list > li.has-icon::before { content: none; }
.service-list > li.has-icon .icon-tile { margin: 0; width: 40px; height: 40px; }
.hl { color: var(--primary); }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: var(--step--1); color: var(--ink-2); font-weight: 500; }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points .icon { width: 18px; height: 18px; color: var(--accent-strong); }
.hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-tile a { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); text-decoration: none; }
.hero-tile strong { font-size: var(--step-1); }
[data-theme-style="premium"] .hero-tile a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
[data-theme-style="premium"] .hero-tile span { color: rgba(255,255,255,.7); }
[data-theme-style="premium"] .hero-points { color: rgba(255,255,255,.75); }
[data-theme-style="premium"] .hl { color: color-mix(in srgb, var(--primary) 35%, #fff); }
[data-theme-style="editorial"] .hero-tiles { margin-top: 24px; }
.hero-tile span { font-size: var(--step--1); color: var(--ink-2); }
.hero-tile img { margin-top: 16px; border-radius: var(--radius); }
.tile-badge { align-self: flex-start; font-style: normal; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-strong); margin-bottom: 4px; }
.tile-arrow { position: absolute; top: 18px; right: 18px; width: 18px; height: 18px; }

/* Packages */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.plan.is-highlight { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.plan-badge { position: absolute; top: -12px; left: 24px; margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700; }
.plan h3 { font-size: var(--step-2); margin-bottom: 0.3em; }
.plan-desc { color: var(--ink-2); font-size: var(--step--1); }
.plan-price { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 16px; }
.plan-price span { display: block; font-size: var(--step--1); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.plan-features { display: grid; gap: 10px; margin: 8px 0 28px; font-size: var(--step--1); }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; }
.plan-features .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent-strong); }
.plan-cta { margin-top: auto; justify-content: center; }
.plan-foot { margin: 24px 0 0; font-size: var(--step--1); color: var(--ink-3); }

/* Style playground */
.pg-panel { display: grid; gap: 24px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.pg-label { margin: 0 0 10px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.pg-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-style, .pg-swatch { appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 600; font-size: var(--step--1); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.pg-style:hover, .pg-swatch:hover { border-color: var(--primary); }
.pg-style[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg-swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pg-dots { display: inline-flex; }
.pg-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--sw1); border: 2px solid var(--bg); }
.pg-dots i + i { margin-left: -6px; background: var(--sw2); }
.pg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pg-note { margin: 0; font-size: var(--step--1); color: var(--ink-3); flex: 1 1 280px; }
.pg-float { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--step--1); font-weight: 600; max-width: calc(100% - 32px); }
.pg-float[hidden] { display: none; }
.pg-float button { appearance: none; border: 0; border-radius: 999px; padding: 8px 14px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }

/* Brand mark next to a text wordmark (only when no logo image is set) */
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wordmark::before { content: ""; width: 26px; height: 26px; border-radius: 8px; background: var(--primary); box-shadow: inset -9px -9px 0 var(--accent); }

/* ---------- Documentation ---------- */
.docs-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); background: var(--bg-2); }
.docs-hero h1 { margin-bottom: 0.3em; }
.docs-hero .lede { margin-bottom: 28px; }
.docs-search { position: relative; max-width: 420px; }
.docs-search.big { max-width: 640px; }
.docs-search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
.docs-search input { width: 100%; height: 46px; padding: 0 16px 0 46px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg); font: inherit; color: var(--ink); }
.docs-search.big input { height: 58px; font-size: 1.05rem; }
.docs-search input:focus { outline: 2px solid var(--accent-strong); outline-offset: 1px; border-color: transparent; }
.docs-home { padding-block: clamp(36px, 5vw, 64px); }
.docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.docs-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--bg); }
.docs-card[hidden], [data-docs-item][hidden], .docs-nav-group[hidden] { display: none; }
.docs-card header { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.docs-card h2 { font-size: var(--step-1); margin: 0; }
.docs-card header p { margin: 0; font-size: var(--step--1); color: var(--ink-3); }
.docs-card-num { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--radius); background: var(--primary); color: #fff; font-weight: 700; font-size: 0.9rem; }
.docs-card ul { display: grid; gap: 2px; }
.docs-card li a { display: block; padding: 10px 12px; margin: 0 -12px; border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.docs-card li a:hover { background: var(--bg-2); }
.docs-card li strong { display: block; font-weight: 600; }
.docs-card li span { display: block; font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; }
.docs-no-results { color: var(--ink-3); }
.docs-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: clamp(28px, 4vw, 56px); padding-block: clamp(28px, 4vw, 48px) var(--space); align-items: start; }
.docs-side, .docs-toc { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow: auto; }
.docs-side-inner > summary { display: none; }
.docs-side .docs-search { margin-bottom: 18px; }
.docs-side .docs-search input { height: 40px; font-size: var(--step--1); }
.docs-nav-group + .docs-nav-group { margin-top: 18px; }
.docs-nav-title { margin: 0 0 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.docs-nav a { display: block; padding: 6px 10px; margin-left: -10px; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-size: 0.93rem; line-height: 1.4; }
.docs-nav a:hover { color: var(--ink); background: var(--bg-2); }
.docs-nav a[aria-current="page"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--bg)); font-weight: 600; }
.docs-article { max-width: 780px; min-width: 0; }
.docs-article h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); margin-bottom: 0.3em; }
.docs-article .breadcrumb ol { margin-bottom: 14px; }
.docs-meta { font-size: var(--step--1); color: var(--ink-3); padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.docs-body { max-width: none; }
.docs-body h2 { font-size: var(--step-2); margin-top: 2em; scroll-margin-top: 96px; }
.docs-body h3 { scroll-margin-top: 96px; margin-top: 1.6em; }
.docs-body .anchor { margin-left: 8px; color: var(--ink-3); text-decoration: none; opacity: 0; font-weight: 400; }
.docs-body h2:hover .anchor, .docs-body h3:hover .anchor { opacity: 1; }
.docs-body ol { list-style: none; padding-left: 0; counter-reset: step; }
.docs-body ol > li { position: relative; padding-left: 44px; margin-bottom: 14px; counter-increment: step; min-height: 30px; }
.docs-body ol > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 0.85rem; }
.docs-body code { font-size: 0.88em; }
.docs-body kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; font: 600 0.85em/1.5 ui-monospace, monospace; background: var(--bg); }
.docs-body figure.shot { margin: 1.6em 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.docs-body figure.shot img { margin: 0; border-radius: 0; width: 100%; cursor: zoom-in; }
.docs-body figure.shot figcaption { padding: 10px 14px; font-size: var(--step--1); color: var(--ink-2); border-top: 1px solid var(--line); background: var(--bg); }
.docs-body blockquote.callout { --c: var(--primary); margin: 1.5em 0; padding: 14px 18px; border: 0; border-left: 4px solid var(--c); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--c) 8%, var(--bg)); color: var(--ink); }
.docs-body blockquote.callout p:last-child { margin-bottom: 0; }
.docs-body .callout-title { color: var(--c); }
.docs-body blockquote.callout-tip { --c: #15803d; }
.docs-body blockquote.callout-warning { --c: #b45309; }
.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.docs-pager a { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.docs-pager a:hover { border-color: var(--primary); }
.docs-pager a span { font-size: var(--step--1); color: var(--ink-3); }
.docs-pager .next { text-align: right; }
.docs-help { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding: 24px; border-radius: var(--radius); background: var(--bg-2); }
.docs-help .icon-tile { margin: 0; flex: none; }
.docs-help > div { flex: 1 1 260px; }
.docs-help h2 { font-size: var(--step-1); margin-bottom: 0.2em; }
.docs-help p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.docs-toc ul { display: grid; gap: 2px; border-left: 2px solid var(--line); }
.docs-toc a { display: block; padding: 4px 0 4px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-3); text-decoration: none; font-size: 0.86rem; line-height: 1.4; }
.docs-toc li.l3 a { padding-left: 26px; }
.docs-toc a:hover { color: var(--ink); }
.docs-toc a[aria-current] { color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
.zoom-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(10, 14, 20, .85); cursor: zoom-out; }
.zoom-overlay img { max-width: 100%; max-height: 100%; border-radius: 8px; }
@media (max-width: 1100px) { .docs-layout { grid-template-columns: 230px minmax(0, 1fr); } .docs-toc { display: none; } }
@media (max-width: 860px) {
  .docs-layout { grid-template-columns: 1fr; gap: 20px; }
  .docs-side { position: static; max-height: none; overflow: visible; }
  .docs-side-inner { border: 1px solid var(--line); border-radius: var(--radius); }
  .docs-side-inner > summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-weight: 600; cursor: pointer; list-style: none; }
  .docs-side-inner > summary::-webkit-details-marker { display: none; }
  .docs-side-inner > summary::after { content: "+"; font-size: 1.3rem; color: var(--primary); }
  .docs-side-inner[open] > summary::after { content: "–"; }
  .docs-side-inner > div { padding: 0 16px 16px; }
  .docs-pager { grid-template-columns: 1fr; }
}

/* 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; } }

/* ---------- Fresh style ----------
   Bright and friendly without decoration tricks: flat solid colour blocks in
   the brand's two colours, bento-style card grids, built-in line icons, big
   rounded radii and pill buttons. No gradients, glows, blurs, textures or
   background patterns - depth comes only from colour blocks and whitespace.
   Every colour derives from --primary / --accent, so it works for any brand. */
:root[data-theme-style="fresh"] {
  --ink: color-mix(in srgb, var(--primary) 18%, #0b1220);
  --ink-2: color-mix(in srgb, var(--primary) 12%, #4a5463);
  --line: color-mix(in srgb, var(--primary) 12%, #fff);
  --navy: color-mix(in srgb, var(--primary) 62%, #000);
  --sky: color-mix(in srgb, var(--accent) 16%, #fff);
  --mist: color-mix(in srgb, var(--primary) 5%, #fff);
  --card: var(--mist);
  --tint: var(--bg);
  --bg-2: var(--mist);
  --radius: 14px;
  --r-lg: 28px;
  --space: clamp(64px, 9vw, 120px);
  --mark: polygon(35% 0, 100% 0, 65% 100%, 0 100%); /* slanted block, echoes a Z-like logo mark */
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");
  --ic-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7'/%3E%3C/svg%3E");
}
[data-theme-style="fresh"] main h1, [data-theme-style="fresh"] main h2 { font-weight: 800; letter-spacing: -0.03em; }
[data-theme-style="fresh"] main h3 { font-weight: 700; letter-spacing: -0.015em; }
[data-theme-style="fresh"] .section-head h2 { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.75rem); line-height: 1.1; }
[data-theme-style="fresh"] .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); font-size: 0.78rem; letter-spacing: 0.1em; font-weight: 700; }
[data-theme-style="fresh"] .eyebrow::before { content: ""; width: 14px; height: 12px; background: var(--accent); clip-path: var(--mark); }
[data-theme-style="fresh"] .section-head { margin-bottom: clamp(36px, 5vw, 60px); }

/* Buttons: pills, solid fills, hover = darker fill (no lift shadow) */
[data-theme-style="fresh"] .btn { border-radius: 999px; padding: 13px 24px; font-weight: 700; border-width: 2px; }
[data-theme-style="fresh"] .btn-primary { background: var(--primary); }
[data-theme-style="fresh"] .btn-primary:hover { background: var(--navy); }
[data-theme-style="fresh"] .btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--line); }
[data-theme-style="fresh"] .btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
[data-theme-style="fresh"] .btn-light:hover { background: var(--sky); }
[data-theme-style="fresh"] .btn-ghost { border-color: rgba(255,255,255,.45); }
[data-theme-style="fresh"][data-motion="on"] .btn:hover { transform: translateY(-2px); box-shadow: none; }
[data-theme-style="fresh"] .link-arrow { color: var(--primary); }
[data-theme-style="fresh"] .site-nav .nav-cta { padding: 10px 20px; }
[data-theme-style="fresh"] .site-nav > ul > li > a[aria-current="page"] { box-shadow: 0 2px 0 var(--accent); }

/* One flat white surface; cards carry the colour. No hairlines between sections. */
[data-theme-style="fresh"] .section-wrap + .section-wrap > section { border-top: 0; }
[data-theme-style="fresh"] .section-wrap > section::before, [data-theme-style="fresh"] .section-wrap > section::after { content: none; }
[data-theme-style="fresh"] .section-wrap > section { padding-block: clamp(40px, 5vw, 64px); }

/* Hero: an inset rounded panel with the copy left and coloured tiles right */
[data-theme-style="fresh"] .hero { background: var(--mist); margin: 8px clamp(8px, 1.4vw, 20px) 0; border-radius: var(--r-lg); padding-block: clamp(48px, 7vw, 96px) !important; }
[data-theme-style="fresh"] .hero.has-image .hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 5vw, 64px); }
[data-theme-style="fresh"] .hero .eyebrow { background: var(--bg); padding: 7px 14px 7px 12px; border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--ink); font-weight: 600; margin-bottom: 1.4em; }
[data-theme-style="fresh"] .hero h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.8rem); line-height: 1.04; letter-spacing: -0.04em; max-width: 15ch; }
[data-theme-style="fresh"] .hl { color: var(--primary); box-shadow: inset 0 -0.26em 0 var(--sky); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-theme-style="fresh"] .hero .lede { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); color: var(--ink-2); max-width: 46ch; }
[data-theme-style="fresh"] .hero-points .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--primary); color: #fff; stroke-width: 3; }
[data-theme-style="fresh"] .hero-points { color: var(--ink); }

[data-theme-style="fresh"] .hero-tiles { gap: 14px; grid-template-areas: "a b" "a c" "d d"; }
[data-theme-style="fresh"] .hero-tiles.n1 { grid-template-areas: "a a"; }
[data-theme-style="fresh"] .hero-tiles.n2 { grid-template-areas: "a b"; }
[data-theme-style="fresh"] .hero-tiles.n3 { grid-template-areas: "a b" "a c"; }
[data-theme-style="fresh"] .hero-tile.t1 { grid-area: a; } [data-theme-style="fresh"] .hero-tile.t2 { grid-area: b; }
[data-theme-style="fresh"] .hero-tile.t3 { grid-area: c; } [data-theme-style="fresh"] .hero-tile.t4 { grid-area: d; }
[data-theme-style="fresh"] .hero-tile a { border: 0; border-radius: 22px; padding: 24px 64px 24px 24px; min-height: 148px; gap: 6px; overflow: hidden; transition: transform .2s ease; }
[data-theme-style="fresh"] .hero-tile strong { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
[data-theme-style="fresh"] .hero-tile span { font-size: 0.9rem; line-height: 1.45; color: inherit; opacity: .82; }
[data-theme-style="fresh"] .hero-tile.t1 a { background: var(--primary); color: #fff; padding-right: 24px; }
[data-theme-style="fresh"] .hero-tile.t1 strong { padding-right: 44px; }
[data-theme-style="fresh"] .hero-tile.t1 img { margin-top: auto; border-radius: 14px; width: 100%; }
[data-theme-style="fresh"] .hero-tile.t1 span { margin-bottom: 20px; }
[data-theme-style="fresh"] .tile-badge { background: var(--accent); color: var(--navy); padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
[data-theme-style="fresh"] .hero-tile.t2 a { background: var(--accent); color: var(--navy); }
[data-theme-style="fresh"] .hero-tile.t3 a { background: var(--bg); color: var(--ink); }
[data-theme-style="fresh"] .hero-tile.t4 a { background: var(--navy); color: #fff; min-height: 0; }
[data-theme-style="fresh"] .tile-arrow { top: 20px; right: 20px; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: rgba(255,255,255,.18); transition: transform .2s ease; }
[data-theme-style="fresh"] .hero-tile.t3 .tile-arrow { background: var(--sky); color: var(--primary); }
[data-theme-style="fresh"] .hero-tile.t2 .tile-arrow { background: rgba(255,255,255,.4); }
[data-theme-style="fresh"][data-motion="on"] .hero-tile a:hover { transform: translateY(-3px); }
[data-theme-style="fresh"] .hero-tile a:hover .tile-arrow { transform: rotate(-45deg); }

/* Problem vs. solution: a muted card beside a solid brand card */
[data-theme-style="fresh"] .compare-grid { gap: 16px; background: none; border: 0; overflow: visible; }
[data-theme-style="fresh"] .compare-col { border-radius: var(--r-lg); padding: clamp(28px, 4vw, 44px); background: var(--card); }
[data-theme-style="fresh"] .compare-col h3 { font-size: 1.25rem; margin-bottom: 22px; }
[data-theme-style="fresh"] .compare-col h3::before { content: none; }
[data-theme-style="fresh"] .compare-problem h3 { color: var(--ink-2); }
[data-theme-style="fresh"] .compare-solution { background: var(--primary); }
[data-theme-style="fresh"] .compare-solution h3 { color: #fff; }
[data-theme-style="fresh"] .compare-col ul { gap: 16px; }
[data-theme-style="fresh"] .compare-col li { padding-left: 38px; min-height: 24px; color: var(--ink-2); }
[data-theme-style="fresh"] .compare-solution li { color: #fff; }
[data-theme-style="fresh"] .compare-col li::before, [data-theme-style="fresh"] .compare-col li::after { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; }
[data-theme-style="fresh"] .compare-problem li::before { background: var(--line); }
[data-theme-style="fresh"] .compare-problem li::after { background: var(--ink-2); -webkit-mask: var(--ic-x) center / 18px no-repeat; mask: var(--ic-x) center / 18px no-repeat; }
[data-theme-style="fresh"] .compare-solution li::before { background: var(--accent); }
[data-theme-style="fresh"] .compare-solution li::after { background: var(--navy); -webkit-mask: var(--ic-check) center / 18px no-repeat; mask: var(--ic-check) center / 18px no-repeat; }

/* Services: bento grid, the first service gets the big brand-coloured card */
[data-theme-style="fresh"] .service-list { grid-template-columns: repeat(3, 1fr); gap: 16px; border: 0; }
[data-theme-style="fresh"] .service-list > li { position: relative; display: flex; flex-direction: column; gap: 0; padding: 32px; border: 0; border-radius: var(--r-lg); background: var(--card); transition: transform .2s ease; }
[data-theme-style="fresh"] .service-list > li::before { content: none; }
[data-theme-style="fresh"] .service-list > li:first-child { grid-column: span 2; background: var(--primary); color: #fff; }
[data-theme-style="fresh"] .service-list > li .icon-tile { width: 52px; height: 52px; border-radius: 16px; background: var(--bg); margin-bottom: 22px; }
[data-theme-style="fresh"] .service-list > li:first-child .icon-tile { background: var(--accent); color: var(--navy); }
[data-theme-style="fresh"] .service-list > li > h3 { font-size: 1.3rem; margin-bottom: 8px; }
[data-theme-style="fresh"] .service-list > li:first-child > h3, [data-theme-style="fresh"] .service-list > li:first-child > p, [data-theme-style="fresh"] .service-list > li:first-child .service-points li { color: #fff; }
[data-theme-style="fresh"] .service-list h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
[data-theme-style="fresh"] .service-list h3 a:hover { color: inherit; }
[data-theme-style="fresh"][data-motion="on"] .service-list > li:has(a):hover { transform: translateY(-4px); }
[data-theme-style="fresh"] .service-points { margin-top: auto; padding-top: 20px; gap: 8px; }
[data-theme-style="fresh"] .service-points li { padding-left: 26px; font-size: 0.92rem; }
[data-theme-style="fresh"] .service-points li::before { top: 2px; width: 18px; height: 18px; border-radius: 0; background: var(--primary); -webkit-mask: var(--ic-check) center / 18px no-repeat; mask: var(--ic-check) center / 18px no-repeat; }
[data-theme-style="fresh"] .service-list > li:first-child .service-points li::before { background: var(--accent); }
@media (min-width: 961px) { [data-theme-style="fresh"] .service-list > li:first-child .service-points { grid-template-columns: repeat(3, 1fr); } }

/* Products: soft cards with the illustration set into the card */
[data-theme-style="fresh"] .product-grid { gap: 16px; }
[data-theme-style="fresh"] .product-card { background: var(--card); border-radius: var(--r-lg); padding: 12px 12px 28px; }
[data-theme-style="fresh"] .product-thumb { border-radius: 20px; margin-bottom: 22px; background: var(--bg); }
[data-theme-style="fresh"] .product-body { display: flex; flex-direction: column; flex: 1; padding: 0 16px; }
[data-theme-style="fresh"] .product-card .eyebrow { font-size: 0.7rem; }
[data-theme-style="fresh"] .product-card h3 { font-size: 1.5rem; font-weight: 800; }
[data-theme-style="fresh"] .product-card .link-arrow { margin-top: 14px; }
[data-theme-style="fresh"][data-motion="on"] .product-card:hover { transform: translateY(-4px); }
[data-theme-style="fresh"][data-motion="on"] .product-card:hover .product-thumb img { transform: scale(1.03); }

/* Features: icon cards */
[data-theme-style="fresh"] .feature-grid { gap: 16px; }
[data-theme-style="fresh"] .feature-grid li { border: 0; background: var(--card); border-radius: var(--r-lg); padding: 30px 28px; }
[data-theme-style="fresh"] .feature-grid .icon-tile { width: 52px; height: 52px; border-radius: 16px; background: var(--sky); margin-bottom: 26px; }
[data-theme-style="fresh"] .feature-grid li:nth-child(4n+2) .icon-tile { background: var(--primary); color: #fff; }
[data-theme-style="fresh"] .feature-grid li:nth-child(4n+3) .icon-tile { background: var(--accent); color: var(--navy); }
[data-theme-style="fresh"] .feature-grid li:nth-child(4n+4) .icon-tile { background: var(--navy); color: #fff; }
[data-theme-style="fresh"] .feature-grid h3 { font-size: 1.2rem; }
[data-theme-style="fresh"] .feature-index { font-size: 0.85rem; color: var(--primary); opacity: 1; }

/* Segments: pill switcher + one rounded panel */
[data-theme-style="fresh"] .segments-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 0; border-radius: 999px; background: var(--mist); margin-bottom: 20px; }
[data-theme-style="fresh"] .segments-tab { border: 0; border-radius: 999px; padding: 10px 18px; margin: 0; color: var(--ink-2); font-size: 0.92rem; transition: background .15s, color .15s; }
[data-theme-style="fresh"] .segments-tab:hover { color: var(--primary); }
[data-theme-style="fresh"] .segments-tab[aria-selected="true"] { background: var(--primary); color: #fff; }
[data-theme-style="fresh"] .segments-panel { background: var(--card); border-radius: var(--r-lg); padding: 16px; gap: clamp(24px, 4vw, 56px); }
[data-theme-style="fresh"] .segments-media { border-radius: 20px; background: var(--bg); }
[data-theme-style="fresh"] .segments-text { padding: 16px 24px 16px 0; }
[data-theme-style="fresh"] .segments-text h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); font-weight: 800; }
[data-theme-style="fresh"] .segments-text .link-arrow { display: inline-flex; margin-top: 8px; padding: 11px 20px; border-radius: 999px; background: var(--primary); color: #fff; text-decoration: none; }
[data-theme-style="fresh"] .segments-text .link-arrow:hover { background: var(--navy); }

/* Process: numbered steps on a dashed track */
[data-theme-style="fresh"] .process-list { gap: 16px; }
[data-theme-style="fresh"] .process-list::before { top: 26px; height: 0; background: none; border-top: 2px dashed var(--line); }
[data-theme-style="fresh"] .process-list > li { max-width: none; }
[data-theme-style="fresh"] .process-list li::before { width: 54px; height: 54px; border-radius: 18px; background: var(--accent); color: var(--navy); font-size: 1.2rem; font-weight: 800; margin-bottom: 20px; box-shadow: 0 0 0 8px var(--bg); }
[data-theme-style="fresh"] .process-list li:first-child::before { background: var(--primary); color: #fff; }
[data-theme-style="fresh"] .process-list h3 { font-size: 1.1rem; }
[data-theme-style="fresh"] .process-list p { font-size: 0.95rem; }

/* FAQ: rounded disclosure cards */
[data-theme-style="fresh"] .faq .section-head { text-align: center; margin-inline: auto; }
[data-theme-style="fresh"] .faq-list { display: grid; gap: 12px; }
[data-theme-style="fresh"] .faq-list details { border: 0 !important; background: var(--card); border-radius: 20px; padding: 0 24px; }
[data-theme-style="fresh"] .faq-list summary { padding: 20px 0; font-size: 1.05rem; align-items: center; }
[data-theme-style="fresh"] .faq-list summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); color: var(--primary); font-size: 1.3rem; font-weight: 600; transition: transform .2s ease, background .2s; }
[data-theme-style="fresh"] .faq-list details[open] summary::after { content: "+"; transform: rotate(45deg); background: var(--primary); color: #fff; }
[data-theme-style="fresh"] .faq-list .prose { padding-bottom: 22px; }

/* Posts */
[data-theme-style="fresh"] .post-grid { gap: 16px; }
[data-theme-style="fresh"] .post-card { height: 100%; background: var(--card); border-radius: var(--r-lg); padding: 28px; transition: transform .2s ease; position: relative; }
[data-theme-style="fresh"] .post-card h3 { font-size: 1.15rem; line-height: 1.3; }
[data-theme-style="fresh"] .post-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
[data-theme-style="fresh"] .post-meta { align-items: center; margin-bottom: 16px; }
[data-theme-style="fresh"] .post-cat { background: var(--bg); color: var(--primary); padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; }
[data-theme-style="fresh"][data-motion="on"] .post-card:hover { transform: translateY(-4px); }
[data-theme-style="fresh"] .post-thumb { border-radius: 18px; }
[data-theme-style="fresh"] .post-grid li { height: 100%; }

/* CTA: a solid brand-colour block inside the page width, with two slanted
   blocks echoing the logo mark (flat shapes, no gradient) */
[data-theme-style="fresh"] .cta-band { background: none; color: inherit; overflow: visible; padding-block: 0 var(--space) !important; }
[data-theme-style="fresh"] .cta-band > .container { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); padding: clamp(36px, 6vw, 72px); background: var(--primary); border-radius: var(--r-lg); overflow: hidden; color: #fff; }
[data-theme-style="fresh"] .cta-band > .container::before, [data-theme-style="fresh"] .cta-band > .container::after { content: ""; position: absolute; clip-path: var(--mark); pointer-events: none; }
[data-theme-style="fresh"] .cta-band > .container::before { width: 300px; height: 230px; right: -40px; top: -30px; background: var(--accent); }
[data-theme-style="fresh"] .cta-band > .container::after { width: 260px; height: 200px; right: 130px; bottom: -60px; background: color-mix(in srgb, var(--primary) 80%, #fff); }
[data-theme-style="fresh"] .cta-grid { flex-direction: column; align-items: flex-start; gap: 28px; }
[data-theme-style="fresh"] .cta-grid > * { position: relative; z-index: 1; }
[data-theme-style="fresh"] .cta-band h2 { max-width: 20ch; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
[data-theme-style="fresh"] .cta-band p { color: rgba(255,255,255,.85); font-size: 1.1rem; }
[data-theme-style="fresh"] .cta-band .btn-ghost:hover { background: rgba(255,255,255,.12); }

/* Footer */
[data-theme-style="fresh"] .site-footer { background: var(--mist); border-top: 0; }
[data-theme-style="fresh"] .footer-bottom { border-color: var(--line); }

@media (max-width: 960px) {
  [data-theme-style="fresh"] .hero-grid { grid-template-columns: 1fr !important; }
  [data-theme-style="fresh"] .service-list { grid-template-columns: 1fr 1fr; }
  [data-theme-style="fresh"] .feature-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  [data-theme-style="fresh"] .segments-text { padding: 8px 12px 16px; }
  [data-theme-style="fresh"] .process-list::before { content: none; }
  [data-theme-style="fresh"] .process-list > li { flex-basis: 40%; }
  [data-theme-style="fresh"] .cta-band > .container::before { width: 180px; height: 140px; right: -50px; }
  [data-theme-style="fresh"] .cta-band > .container::after { display: none; }
}
@media (max-width: 720px) {
  [data-theme-style="fresh"] .service-list, [data-theme-style="fresh"] .feature-grid.cols-4 { grid-template-columns: 1fr; }
  [data-theme-style="fresh"] .service-list > li:first-child { grid-column: auto; }
  [data-theme-style="fresh"] .service-list > li { padding: 26px; }
  [data-theme-style="fresh"] .hero-tiles { grid-template-areas: "a a" "b c" "d d"; }
  [data-theme-style="fresh"] .hero-tiles.n3 { grid-template-areas: "a a" "b c"; }
  [data-theme-style="fresh"] .hero-tile a { padding: 20px 20px 20px 20px; min-height: 0; }
  [data-theme-style="fresh"] .hero-tile.t2 a, [data-theme-style="fresh"] .hero-tile.t3 a { padding-top: 64px; }
  [data-theme-style="fresh"] .hero-tile.t1 a { padding-right: 20px; }
  [data-theme-style="fresh"] .hero-tile strong { font-size: 1.2rem; }
  [data-theme-style="fresh"] .tile-arrow { top: 16px; right: auto; left: 16px; }
  [data-theme-style="fresh"] .hero-tile.t1 .tile-arrow, [data-theme-style="fresh"] .hero-tile.t4 .tile-arrow { left: auto; right: 16px; }
  [data-theme-style="fresh"] .segments-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; border-radius: 20px; scrollbar-width: none; }
  [data-theme-style="fresh"] .segments-tab { white-space: nowrap; }
  [data-theme-style="fresh"] .process-list > li { flex-basis: 100%; }
  [data-theme-style="fresh"] .site-nav { background: var(--bg); }
}

/* Fresh: sections the Zonaku page doesn't use */
[data-theme-style="fresh"] .wordmark { font-weight: 800; font-size: 1.45rem; letter-spacing: -0.04em; }
[data-theme-style="fresh"] .wordmark::before { border-radius: 9px; clip-path: none; }
[data-theme-style="fresh"] .stats { background: none; color: inherit; padding-block: clamp(20px, 3vw, 32px) 0 !important; }
[data-theme-style="fresh"] .stat-row { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
[data-theme-style="fresh"] .stat-row > div { background: var(--card); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
[data-theme-style="fresh"] .stat-row > div:first-child { background: var(--primary); color: #fff; }
[data-theme-style="fresh"] .stat-row dd { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); font-weight: 800; color: var(--primary); }
[data-theme-style="fresh"] .stat-row > div:first-child dd { color: #fff; }
[data-theme-style="fresh"] .stat-row dt { margin: 0; color: var(--ink-2); font-size: 0.95rem; font-weight: 500; }
[data-theme-style="fresh"] .stat-row > div:first-child dt { color: rgba(255,255,255,.85); }
[data-theme-style="fresh"] .logos { background: none; }
[data-theme-style="fresh"] .logo-row { gap: 12px; }
[data-theme-style="fresh"] .logo-row li > span, [data-theme-style="fresh"] .logo-row li > a > span { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 700; }
[data-theme-style="fresh"] .logos-heading { color: var(--primary); }
[data-theme-style="fresh"] .split-grid { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); background: var(--card); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 56px); gap: clamp(28px, 4vw, 56px); }
[data-theme-style="fresh"] .split-media img { border-radius: 18px; border: 1px solid var(--line); }
[data-theme-style="fresh"] .split .prose ul { list-style: none; padding: 0; }
[data-theme-style="fresh"] .split .prose li { position: relative; padding-left: 28px; }
[data-theme-style="fresh"] .split .prose li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--primary); -webkit-mask: var(--ic-check) center / 18px no-repeat; mask: var(--ic-check) center / 18px no-repeat; }
[data-theme-style="fresh"] .split h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
[data-theme-style="fresh"] .plan-grid { gap: 16px; }
[data-theme-style="fresh"] .plan { border: 0; border-radius: var(--r-lg); background: var(--card); padding: 32px; }
[data-theme-style="fresh"] .plan.is-highlight { background: var(--primary); color: #fff; box-shadow: none; }
[data-theme-style="fresh"] .plan.is-highlight h3, [data-theme-style="fresh"] .plan.is-highlight .plan-desc, [data-theme-style="fresh"] .plan.is-highlight .plan-price span { color: #fff; }
[data-theme-style="fresh"] .plan.is-highlight .plan-features .icon { color: var(--accent); }
[data-theme-style="fresh"] .plan.is-highlight .btn-primary { background: #fff; color: var(--primary); }
[data-theme-style="fresh"] .plan-badge { position: static; align-self: flex-start; margin-bottom: 14px; background: var(--accent); color: var(--navy); }
[data-theme-style="fresh"] .plan h3 { font-size: 1.6rem; font-weight: 800; }
[data-theme-style="fresh"] .plan-features { font-size: 0.95rem; }
[data-theme-style="fresh"] .pg-panel { border: 0; border-radius: var(--r-lg); background: var(--card); }
[data-theme-style="fresh"] .pg-style, [data-theme-style="fresh"] .pg-swatch { border-width: 2px; border-color: transparent; }
[data-theme-style="fresh"] .pg-swatch[aria-pressed="true"] { border-color: var(--primary); box-shadow: none; }
[data-theme-style="fresh"] .pg-label { color: var(--primary); }
[data-theme-style="fresh"] .page-header { background: var(--mist); border: 0; margin: 8px clamp(8px, 1.4vw, 20px) 0; border-radius: var(--r-lg); }
[data-theme-style="fresh"] .page-header h1 { font-weight: 800; letter-spacing: -0.035em; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); }
[data-theme-style="fresh"] .contact-form input, [data-theme-style="fresh"] .contact-form textarea { border: 2px solid var(--line); border-radius: 14px; background: var(--bg); }
[data-theme-style="fresh"] .contact-aside { background: var(--card); border-radius: var(--r-lg); padding: 28px; }
[data-theme-style="fresh"] .timeline-list { border-left: 2px dashed var(--line); }
[data-theme-style="fresh"] .timeline-list li::before { background: var(--accent); border-color: var(--bg); width: 14px; height: 14px; left: -8px; }
@media (max-width: 720px) { [data-theme-style="fresh"] .split-grid { padding: 20px; } }
@media (max-width: 720px) { [data-theme-style="fresh"] .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; } [data-theme-style="fresh"] .stat-row > div { padding: 20px; } [data-theme-style="fresh"] .stat-row dt { font-size: 0.85rem; } }

/* Fresh: documentation */
[data-theme-style="fresh"] .docs-hero { background: var(--mist); margin: 8px clamp(8px, 1.4vw, 20px) 0; border-radius: var(--r-lg); }
[data-theme-style="fresh"] .docs-hero h1 { font-weight: 800; letter-spacing: -0.035em; font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); }
[data-theme-style="fresh"] .docs-search input { border: 2px solid transparent; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); }
[data-theme-style="fresh"] .docs-search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
[data-theme-style="fresh"] .docs-side .docs-search input { background: var(--mist); box-shadow: none; }
[data-theme-style="fresh"] .docs-card { border: 0; background: var(--card); border-radius: var(--r-lg); padding: 28px; }
[data-theme-style="fresh"] .docs-card-num { border-radius: 14px; }
[data-theme-style="fresh"] .docs-cards .docs-card:nth-child(4n+2) .docs-card-num { background: var(--accent); color: var(--navy); }
[data-theme-style="fresh"] .docs-cards .docs-card:nth-child(4n+3) .docs-card-num { background: var(--navy); }
[data-theme-style="fresh"] .docs-cards .docs-card:nth-child(4n+4) .docs-card-num { background: var(--sky); color: var(--primary); }
[data-theme-style="fresh"] .docs-card li a { border-radius: 14px; }
[data-theme-style="fresh"] .docs-card li a:hover { background: var(--bg); }
[data-theme-style="fresh"] .docs-nav a { border-radius: 10px; }
[data-theme-style="fresh"] .docs-nav a[aria-current="page"] { background: var(--sky); }
[data-theme-style="fresh"] .docs-article h1 { font-weight: 800; letter-spacing: -0.03em; }
[data-theme-style="fresh"] .docs-body figure.shot { border-radius: 18px; }
[data-theme-style="fresh"] .docs-body blockquote.callout { border-radius: 0 14px 14px 0; }
[data-theme-style="fresh"] .docs-pager a { border: 0; background: var(--card); border-radius: 18px; }
[data-theme-style="fresh"] .docs-pager a:hover { background: var(--sky); }
[data-theme-style="fresh"] .docs-help { background: var(--primary); color: #fff; border-radius: var(--r-lg); padding: 28px; }
[data-theme-style="fresh"] .docs-help h2 { color: #fff; }
[data-theme-style="fresh"] .docs-help p { color: rgba(255,255,255,.85); }
[data-theme-style="fresh"] .docs-help .icon-tile { background: var(--accent); color: var(--navy); border-radius: 16px; }
[data-theme-style="fresh"] .docs-help .btn-primary { background: #fff; color: var(--primary); }
[data-theme-style="fresh"] .docs-side-inner { border-color: var(--line); }
@media (max-width: 860px) { [data-theme-style="fresh"] .docs-side-inner { border: 0; background: var(--mist); border-radius: 18px; } }