/* ==========================================================================
   Vellox · site.css · design system "Violet in motion"
   Violet as a confident flat brand colour on white and lavender grounds, one
   crisp animated gradient band (page heroes, closing call to action), at most
   one violet or night band per page, warm accents with intent, Archivo only.
   Markup contracts: docs/site-v3/COMPONENTS.md. Motion: motion.css + motion.js.
   Page-only styles belong in /assets/css/pages/<page>.css, never here.

   Contents
    0. Tokens (+ aliases of the v3 names that page CSS still uses)
    1. Base and reset            12. Proof figures
    2. Typography                13. Who-does-what matrix
    3. Layout                    14. Toggles, swap containers, chips
    4. Buttons, links, icons     15. Feature split, pillars, steps, phone row, cards, lifts, photos
    5. Header, mega menu,        16. Accordion
       mobile panel              17. Pricing plans
    6. Page hero (.phero)        18. Forms
    7. Legacy hero (.hero)       19. Domain checker (.dc-*)
    8. Tabs and tab panels       20. Night band, violet band, price line
    9. Product stage             21. Closing call to action, footer
   10. Frames, crops, captions   22. Utilities
   11. Lists and tags            23. Focus, view transitions, motion, print
   Breakpoints: phone < 760 · tablet 760–1099 · desktop >= 1100 (nav) · wide >= 1280
   ========================================================================== */


/* 0. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand */
  --violet: #6B4EFF;
  --violet-600: #5A3EF2;
  --violet-700: #4930D6;
  --violet-50: #F5F2FF;
  --violet-100: #EBE5FF;
  --violet-200: #DCD3FF;
  --indigo: #3B2DBF;
  --deep: #2A1B6E;
  --night: #140D33;
  --night-2: #1E1548;                 /* raised surface on the night band */

  /* Neutrals (violet-tinted) */
  --ink: #16121F;
  --ink-2: #2B2638;
  --slate: #5C5870;                   /* secondary text: 6.8:1 on white, 6.2:1 on lavender */
  --slate-2: #8A859C;                 /* decorative only, never text */
  --line: #E7E3F3;
  --line-2: #D6CFEC;
  --line-field: #847E9C;              /* form boundaries: 3.9:1 on white, 3.5:1 on lavender */
  --placeholder: #6E6982;             /* 5.2:1 on white */
  --paper: #FFFFFF;
  --mist: #FAF9FF;                    /* NOTE: a light ground now (was a grey text colour in v3) */

  /* Warm accents, used with intent. One colour per channel, everywhere:
     Email violet · SMS coral · Agenți AI pink · Analiză sun · mint = success only */
  --coral: #FF7A59;
  --sun: #FFC23D;
  --pink: #FF5FA2;
  --mint: #2FD39A;
  --peach: #FFE7DC;
  --peach-2: #FFD9C8;
  --violet-tint: #EDE8FF;   --violet-ink: #4930D6;
  --coral-tint: #FFE9E1;    --coral-ink: #B8431F;
  --pink-tint: #FFE6F1;     --pink-ink: #CC2F74;
  --sun-tint: #FFF2D2;      --sun-ink: #8A5300;
  --mint-tint: #E3F8EF;

  /* Status: domain checker and form messages */
  --ok: #0F7A4E;
  --warn: #8A5300;
  --bad: #C22A33;

  /* On dark grounds (night band, gradient band, violet band) */
  --on-dark: #FFFFFF;
  --on-dark-2: rgb(255 255 255 / .78);
  --on-dark-line: rgb(255 255 255 / .16);
  --on-dark-link: #CFC4FF;

  /* Type */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --wd-display: 114%;
  --wd-h2: 112%;
  --wd-h3: 104%;
  --wd-ui: 104%;
  --wd-num: 84%;                      /* second voice: condensed numerals and small labels */
  --fs-body: 1.0625rem;               /* 17px, 18px from 1280px */
  --fs-small: .875rem;
  --fs-lede: clamp(1.125rem, 1.02rem + .38vw, 1.3125rem);
  --fs-h1: clamp(2.5rem, 1.15rem + 3.9vw, 4.5rem);
  --fs-h1-compact: clamp(2.375rem, 1.2rem + 3.5vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.3rem + 2vw, 3.375rem);
  --fs-h3: clamp(1.1875rem, 1.08rem + .4vw, 1.4375rem);
  --lh-body: 1.55;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --sec: clamp(72px, 4.2vw + 48px, 120px);          /* about 108px at 1440 */
  --section: var(--sec);
  --max: 1240px;
  --gutter: max(20px, 4.4vw);
  --header-h: 72px;
  --bar-h: 38px;

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-tag: 999px;
  --r-btn: 14px;                      /* fields, chips; buttons are pills */
  --r-frame: 14px;
  --r-stage: 28px;
  --r-phone: 40px;

  /* Depth: layered and violet-tinted, never one flat grey shadow */
  --sh-1: 0 1px 2px rgb(42 27 110 / .06), 0 2px 10px -2px rgb(42 27 110 / .08);
  --sh-2: 0 1px 2px rgb(42 27 110 / .07), 0 16px 34px -16px rgb(42 27 110 / .28);
  --sh-3: 0 1px 2px rgb(42 27 110 / .06), 0 30px 60px -32px rgb(42 27 110 / .45);
  --sh-frame: 0 0 0 1px rgb(22 18 31 / .06), 0 2px 4px rgb(42 27 110 / .06), 0 30px 60px -28px rgb(42 27 110 / .38), 0 80px 120px -60px rgb(42 27 110 / .34);
  --sh-float: drop-shadow(0 1px 1.5px rgb(42 27 110 / .14)) drop-shadow(0 16px 22px rgb(42 27 110 / .22));
  --sh-photo: 0 40px 80px -44px rgb(42 27 110 / .55), 0 2px 6px rgb(42 27 110 / .08);
  --shadow-shot: var(--sh-frame);
  --shadow-dark: 0 40px 70px -30px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .08);
  --shadow-pop: 0 24px 60px -24px rgb(42 27 110 / .42), 0 6px 16px -8px rgb(42 27 110 / .16);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.18, 1.18, .32, 1);
  --t-fast: .2s;
  --t-swap: .3s;

  /* Text that sits directly on the page ground (flips on dark bands) */
  --fg: var(--ink);
  --fg-2: var(--slate);
  --fg-line: var(--line);

  /* v3 names kept as aliases so page CSS keeps working (prefer the new names) */
  --fog: var(--violet-50);
  --graphite: var(--slate);
  --line-strong: var(--line-2);
  --rule-hover: #A69FC4;
  --ink-hover: var(--ink-2);
  --ink-raised: var(--night-2);
  --ink-line: #3A3170;
  --amber: var(--violet);
  --amber-deep: var(--violet-700);
  --amber-tint: var(--violet-100);
}
@media (max-width: 759.98px) { :root { --header-h: 64px; --bar-h: 30px; } }
@media (min-width: 1280px)   { :root { --fs-body: 1.125rem; } }
@media (min-width: 1680px)   { :root { --max: 1400px; } }
html[data-mo-tone="dark"] { --fg: #fff; --fg-2: var(--on-dark-2); --fg-line: var(--on-dark-line); }
/* Greek (lang=el): Archivo has no Greek glyphs. build.py loads Roboto Flex (opsz, wdth, wght; greek + latin)
   on Greek pages only, and it leads the stack there, so Greek and Latin words match within a page. The
   wordmark stays Archivo (it is the logo). Greek is never set in capitals by CSS (no text-transform anywhere),
   so the tonos is always kept. */
:root:lang(el) { --font: "Roboto Flex", "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
:lang(el) .brand__word { font-family: "Archivo", var(--font); }
/* At the same weight and width Roboto Flex is about 4% darker than Archivo and sets Greek tighter, so the
   big titles get a little less weight and tracking (measured: 740 matches Archivo 780's ink). The widths
   stay: Roboto Flex at 114% is already narrower than Archivo, which suits the longer Greek words. */
:root:lang(el) :is(h1, .display, .cta__title, .ht__title) { font-weight: 740; letter-spacing: -.02em; }
:root:lang(el) :is(h2, .h2) { letter-spacing: -.016em; }


/* 1. Base and reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--mist);           /* canvas below a short page continues the footer */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  font-variant-numeric: lining-nums;
  overflow-wrap: break-word;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.menu-open { overflow: hidden; }
[hidden] { display: none !important; }
img, svg, video, picture, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
strong, b { font-weight: 660; }
::selection { background: var(--violet-100); color: var(--ink); }
main { display: block; }
main > section, .foot > section { overflow-x: clip; }


/* 2. Typography ------------------------------------------------------------ */
h1, .display {
  font-size: var(--fs-h1);
  font-weight: 780;
  font-stretch: var(--wd-display);
  letter-spacing: -.03em;
  line-height: 1.1;                 /* Romanian comma-below letters (ș ț) need the room */
  text-wrap: balance;
}
.display--compact { font-size: var(--fs-h1-compact); }
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 760;
  font-stretch: var(--wd-h2);
  letter-spacing: -.026em;
  line-height: 1.08;
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 660;
  font-stretch: var(--wd-h3);
  letter-spacing: -.012em;
  line-height: 1.2;
  text-wrap: balance;
}
h4, .h4 { font-size: 1.0625rem; font-weight: 640; font-stretch: var(--wd-ui); line-height: 1.3; }
p { text-wrap: pretty; }
.lede {
  max-width: 34em;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}
.small { font-size: var(--fs-small); line-height: 1.5; }
.muted { color: var(--fg-2); }
.prose { max-width: 40em; }
.prose > * + * { margin-top: var(--s4); }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose ol { padding-left: 1.4em; list-style: decimal; }
.prose li + li { margin-top: var(--s2); }
.prose li::marker { color: var(--violet); }
/* Kicker: a short label above a title, with the channel's dot */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9375rem; font-weight: 650; font-stretch: var(--wd-ui); letter-spacing: .005em; line-height: 1.3;
  color: var(--violet-700);
}
.kicker::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--violet)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--violet)) 22%, transparent); }
@media (max-width: 419.98px) { h1, .display { letter-spacing: -.025em; } }


/* 3. Layout ---------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(880px + 2 * var(--gutter)); }

/* Sections: white (default), lavender (.section--fog / .section--lavender), at most one
   violet (.band-violet) or night (.band-ink / .band-night) band per page. */
.section { padding-block: var(--sec); background: var(--paper); color: var(--fg); }
.section--fog, .section--lavender { background: var(--violet-50); }
.section--mist { background: var(--mist); }
/* Same ground twice in a row: one gap, not two */
.section:not(.section--fog):not(.section--lavender):not(.band-ink):not(.band-violet):not(.band-night) + .section:not(.section--fog):not(.section--lavender):not(.band-ink):not(.band-violet):not(.band-night),
.hero + .section:not(.section--fog):not(.section--lavender):not(.band-ink):not(.band-violet):not(.band-night),
:is(.section--fog, .section--lavender) + :is(.section--fog, .section--lavender),
.phero:not(.phero--white) + :is(.section--fog, .section--lavender),
.phero--white + .section:not(.section--fog):not(.section--lavender):not(.band-ink):not(.band-violet):not(.band-night) { padding-top: 0; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section head: h2 + at most one sentence, optional link on the right */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4) var(--s7);
  margin-bottom: clamp(36px, 2.4vw + 20px, 64px);
}
.section-head__text { max-width: 46rem; }
.section-head__text > .kicker { margin-bottom: 14px; }
.section-head__text > p:not(.kicker) { margin-top: 18px; }
.section-head__aside { padding-bottom: .35em; }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center .section-head__text { margin-inline: auto; }
.section-head--center .lede { margin-inline: auto; }

.cols { display: grid; gap: var(--s7) var(--s6); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099.98px) { .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899.98px)  { .cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759.98px)  { .cols--2, .cols--3, .cols--4 { grid-template-columns: minmax(0, 1fr); } }
.stack > * + * { margin-top: var(--stack, var(--s4)); }


/* 4. Buttons, links, icons ------------------------------------------------- */
.btn {
  --bh: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--bh);
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font-size: 1rem;
  font-weight: 640;
  font-stretch: 106%;
  line-height: 1.15;
  letter-spacing: -.004em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.btn--lg { --bh: 56px; padding: 0 30px; font-size: 1.0625rem; }
.btn--sm { --bh: 42px; padding: 0 20px; font-size: .9375rem; }
.btn--block { display: flex; width: 100%; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary {
  background: var(--violet); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 1px 2px rgb(42 27 110 / .22), 0 10px 22px -10px rgb(107 78 255 / .8);
}
.btn--primary:hover { background: var(--violet-600); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 1px 2px rgb(42 27 110 / .22), 0 16px 30px -12px rgb(107 78 255 / .9); }
/* Secondary = the quiet white pill with a violet-tinted ring */
.btn--secondary, .btn--quiet {
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-2), 0 1px 2px rgb(42 27 110 / .06);
}
.btn--secondary:hover, .btn--quiet:hover { color: var(--violet-700); box-shadow: inset 0 0 0 1.5px var(--violet), 0 8px 18px -10px rgb(42 27 110 / .35); }
/* On violet, night or gradient grounds */
.btn--light, .btn--inverse { background: #fff; color: var(--deep); box-shadow: 0 1px 2px rgb(20 13 51 / .18), 0 14px 32px -14px rgb(20 13 51 / .55); }
.btn--light:hover, .btn--inverse:hover { color: var(--violet-700); transform: translateY(-1px); box-shadow: 0 1px 2px rgb(20 13 51 / .18), 0 22px 40px -16px rgb(20 13 51 / .6); }
.btn--glass {
  background: rgb(20 13 51 / .24); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
}
.btn--glass:hover { background: rgb(20 13 51 / .36); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .85); }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 40%, transparent); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 85%, transparent); }
.btn[disabled], .btn[aria-disabled="true"], .btn[aria-busy="true"] { opacity: .62; cursor: progress; transform: none; }
.btn__arrow { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* Phones: buttons in a row stack full-width; a text link stays left-aligned */
@media (max-width: 519.98px) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
  .actions .link { align-self: flex-start; padding-block: 6px; }
  .actions--inline { flex-direction: row; align-items: center; }
  .actions--inline .btn { width: auto; }
}

.link {
  color: var(--violet-700);
  font-weight: 620;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .2s, color .2s;
}
.link:hover { text-decoration-color: currentColor; }
/* Inline links get vertical padding: a hit area of at least 24px, no layout change */
.link, .note a, .cta__mail a, .dc-next a { padding-block: 4px; }
.note a, .small a { padding-block: 5px; }
.prose a, .lede a { color: var(--violet-700); text-decoration-thickness: 1.5px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.prose a:hover, .lede a:hover { text-decoration-color: currentColor; }
.link--arrow::after { content: " →"; }

/* Icon tile (mega menu, cards): .ico + a colour (one per channel) */
.ico {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--ico-bg, var(--violet-50)); color: var(--ico-fg, var(--violet));
}
.ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico--lg { width: 48px; height: 48px; border-radius: 14px; }
.ico--lg svg { width: 24px; height: 24px; }
.ico--violet, .ico--email { --ico-bg: var(--violet-tint); --ico-fg: var(--violet-600); }
.ico--coral, .ico--sms { --ico-bg: var(--coral-tint); --ico-fg: #D94E2A; }
.ico--pink, .ico--ai { --ico-bg: var(--pink-tint); --ico-fg: var(--pink-ink); }
.ico--sun, .ico--data { --ico-bg: var(--sun-tint); --ico-fg: #A86A00; }
.ico--mint { --ico-bg: var(--mint-tint); --ico-fg: var(--ok); }
/* Channel dot (8px), same key */
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--violet)); vertical-align: .1em; }
.dot--email, .kicker--email { --dot: var(--violet); }
.dot--sms, .kicker--sms { --dot: var(--coral); }
.dot--ai, .kicker--ai { --dot: var(--pink); }
.dot--data, .kicker--data { --dot: var(--sun); }
.dot--ok { --dot: var(--mint); }


/* 5. Header, mega menu, mobile panel --------------------------------------- */
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff;
  font-weight: 620; text-decoration: none; transform: translateY(-180%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* Sticky glass header. Solid (ink on white glass) by default; on pages whose first section
   carries [data-header-over] it starts transparent with white text over the gradient band
   (site.js adds .is-solid after the first pixels of scroll or while a menu is open). */
.hdr {
  position: sticky; top: 0; z-index: 60; isolation: isolate;
  color: var(--ink);
  --mark-body: var(--violet); --mark-flap: #fff;
  transition: color .35s var(--ease);
}
.hdr::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--header-h); z-index: -1;
  background: rgb(255 255 255 / .8);
  -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
  box-shadow: 0 1px 0 rgb(22 18 31 / .07);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.hdr.is-open::before { background: #fff; }
.hdr__bar { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
[data-header-over] { margin-top: calc(-1 * var(--header-h)); }

/* Over the gradient (top of the page, nothing open) */
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) { color: #fff; --mark-body: #fff; --mark-flap: var(--violet); }
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open)::before { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Over a night band (site.js sets html.hdr-dark; motion.js sets data-mo-tone) */
html.hdr-dark .hdr.is-solid:not(.is-open),
html[data-mo-tone="dark"] .hdr.is-solid:not(.is-open) { color: #fff; --mark-body: #fff; --mark-flap: var(--night); }
html.hdr-dark .hdr.is-solid:not(.is-open)::before,
html[data-mo-tone="dark"] .hdr.is-solid:not(.is-open)::before { background: rgb(20 13 51 / .62); box-shadow: 0 1px 0 rgb(255 255 255 / .08); }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: inherit; text-decoration: none; }
.brand__mark { width: 32px; height: 32px; }
.brand__body { fill: var(--mark-body, var(--violet)); transition: fill .35s var(--ease); }
.brand__flap { fill: none; stroke: var(--mark-flap, #fff); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s var(--ease); }
.brand__word { font-size: 1.4375rem; font-weight: 780; font-stretch: 118%; letter-spacing: -.03em; line-height: 1; }

.nav { display: none; }
.hdr__actions { display: none; margin-left: auto; align-items: center; gap: 10px; }
@media (min-width: 1100px) {
  .nav { display: block; }
  .hdr__actions { display: flex; }
}
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  font-size: .96875rem; font-weight: 560; font-stretch: var(--wd-ui); line-height: 1; text-decoration: none; white-space: nowrap; color: inherit;
  transition: background-color .2s var(--ease), color .2s;
}
.nav__link:hover, .nav__toggle[aria-expanded="true"] { background: rgb(107 78 255 / .08); color: var(--violet-700); }
.nav__link[aria-current="page"], .nav__toggle.is-current { color: var(--violet-700); background: rgb(107 78 255 / .07); }
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) .nav__link:hover,
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) .nav__link[aria-current="page"],
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) .nav__toggle.is-current,
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) .nav__toggle[aria-expanded="true"] { background: rgb(255 255 255 / .16); color: #fff; }
html.hdr-dark .hdr.is-solid:not(.is-open) .nav__link:hover, html[data-mo-tone="dark"] .hdr.is-solid:not(.is-open) .nav__link:hover,
html.hdr-dark .hdr.is-solid:not(.is-open) .nav__link[aria-current="page"], html[data-mo-tone="dark"] .hdr.is-solid:not(.is-open) .nav__link[aria-current="page"],
html.hdr-dark .hdr.is-solid:not(.is-open) .nav__toggle.is-current, html[data-mo-tone="dark"] .hdr.is-solid:not(.is-open) .nav__toggle.is-current,
html.hdr-dark .hdr.is-solid:not(.is-open) .nav__toggle[aria-expanded="true"], html[data-mo-tone="dark"] .hdr.is-solid:not(.is-open) .nav__toggle[aria-expanded="true"] { background: rgb(255 255 255 / .12); color: #fff; }
.nav__chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
/* 1100–1439px: the spacing (and the nav type, by half a pixel) tightens with the width, so the brand, the
   seven entries, the language code, the login link and the demo button stay on one line in all three
   languages, with room left for a classic 17px scrollbar at 1100. From 1440 the full values apply. */
@media (min-width: 1100px) and (max-width: 1439.98px) {
  .hdr__bar { gap: calc(12px + (100vw - 1100px) * .047); }
  .nav__list { gap: calc((100vw - 1100px) * .0059); }
  .nav__link { padding: 0 calc(7px + (100vw - 1100px) * .0206); font-size: calc(15px + (100vw - 1100px) * .00147); }
  .hdr__actions { gap: calc(4px + (100vw - 1100px) * .0176); }
  .hdr .hdr__login { padding: 0 calc(9px + (100vw - 1100px) * .0206); font-size: calc(15px + (100vw - 1100px) * .00147); }
  .hdr .hdr__cta { padding: 0 calc(16px + (100vw - 1100px) * .0118); }
}

.hdr__login {
  display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px;
  font-size: .96875rem; font-weight: 600; font-stretch: var(--wd-ui); text-decoration: none; color: inherit; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.hdr__login:hover { color: var(--violet-700); background: rgb(107 78 255 / .08); }
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) .hdr__login:hover,
html.hdr-dark .hdr.is-solid:not(.is-open) .hdr__login:hover { color: #fff; background: rgb(255 255 255 / .16); }
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) .hdr__cta { background: #fff; color: var(--deep); box-shadow: 0 8px 22px -10px rgb(20 13 51 / .6); }
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) .hdr__cta:hover { color: var(--violet-700); }

/* Mega menu (Platformă): one card under the header; opened by click, never by hover */
.mega {
  position: absolute; top: calc(100% + 14px); left: -18px; z-index: 5;
  display: grid; grid-template-columns: 236px 460px; gap: 8px;
  padding: 10px; border-radius: 22px;
  background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px rgb(22 18 31 / .06), 0 24px 60px -24px rgb(42 27 110 / .42), 0 6px 16px -8px rgb(42 27 110 / .16);
  transform-origin: 80px 0;
}
@media (prefers-reduced-motion: no-preference) { .mega:not([hidden]) { animation: mega-in .28s var(--ease) both; } }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.mega__intro { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: 16px; background: var(--violet-50); }
.mega__title { font-size: 1.0625rem; font-weight: 700; font-stretch: 108%; letter-spacing: -.01em; }
.mega__text { font-size: .875rem; line-height: 1.45; color: var(--slate); }
.mega__all { margin-top: auto; font-size: .875rem; }
.mega__links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mega__link {
  display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 2px; align-content: start;
  padding: 14px; border-radius: 14px; color: var(--ink); text-decoration: none;
  transition: background-color .2s var(--ease);
}
.mega__link .ico { grid-row: span 2; }
.mega__link:hover { background: var(--violet-50); }
.mega__link[aria-current="page"] { background: var(--violet-50); box-shadow: inset 0 0 0 1.5px var(--violet-200); }
.mega__name { font-size: .9375rem; font-weight: 650; font-stretch: var(--wd-ui); }
.mega__desc { font-size: .8125rem; line-height: 1.4; color: var(--slate); }

/* Mobile: „Meniu” button and full-height panel */
.menu-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 999px;
  background: var(--violet-50); color: var(--ink);
  font-size: .9375rem; font-weight: 620;
}
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) .menu-btn { background: rgb(255 255 255 / .16); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.hdr-dark .hdr.is-solid:not(.is-open) .menu-btn, html[data-mo-tone="dark"] .hdr.is-solid:not(.is-open) .menu-btn { background: rgb(255 255 255 / .12); color: #fff; }
.menu-btn__icon { position: relative; width: 18px; height: 12px; }
.menu-btn__icon span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-btn__icon span:first-child { top: 1px; }
.menu-btn__icon span:last-child { top: 9px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon span:first-child { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon span:last-child { top: 5px; transform: rotate(-45deg); }
@media (min-width: 1100px) { .menu-btn { display: none; } .mpanel { display: none !important; } }

.mpanel {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 59; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: var(--ink);
  box-shadow: inset 0 1px 0 var(--line);
}
@media (prefers-reduced-motion: no-preference) { .mpanel:not([hidden]) { animation: mpanel-in .3s var(--ease) both; } }
@keyframes mpanel-in { from { opacity: 0; transform: translateY(-8px); } }
.mpanel__inner { display: flex; flex-direction: column; gap: 28px; min-height: 100%; padding-top: 12px; padding-bottom: 28px; }
.mpanel__label { margin: 8px 0 6px; font-size: .8125rem; font-weight: 640; color: var(--slate); }
.mpanel__sub a { display: flex; align-items: center; gap: 14px; min-height: 56px; font-size: 1.125rem; font-weight: 620; text-decoration: none; border-bottom: 1px solid var(--line); }
.mpanel__sub .mpanel__all a { min-height: 52px; border: 0; font-size: 1rem; }
.mpanel__main { margin-top: 8px; }
.mpanel__main a { display: flex; align-items: center; gap: 10px; min-height: 54px; font-size: 1.25rem; font-weight: 680; font-stretch: 106%; letter-spacing: -.01em; text-decoration: none; border-bottom: 1px solid var(--line); }
.mpanel a[aria-current="page"] { color: var(--violet-700); }
.mpanel__main a[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.mpanel__actions { display: grid; gap: 10px; margin-top: auto; }

/* Language switcher (partials/lang-menu.html + lang-row.html; build.py links only versions that exist).
   Desktop: a quiet code in the nav-link style before the login link. It is a .nav__link, so it follows every
   header state (over the gradient, glass, night glass) exactly like the nav. The list opens in the mega-menu
   style: click, Esc, outside click, focus leaving (site.js §3). */
.lang { position: relative; flex: none; }
.nav__link.lang__btn { gap: 6px; padding: 0 10px; font-size: .875rem; font-weight: 620; letter-spacing: .03em; }
@media (max-width: 1439.98px) { .nav__link.lang__btn { padding: 0 calc(8px + (100vw - 1100px) * .0059); } }
.lang__globe { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; }
.lang__menu {
  position: absolute; top: calc(100% + 14px); right: -8px; z-index: 5;
  min-width: 196px; padding: 8px; border-radius: 18px;
  background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px rgb(22 18 31 / .06), 0 24px 60px -24px rgb(42 27 110 / .42), 0 6px 16px -8px rgb(42 27 110 / .16);
  transform-origin: calc(100% - 32px) 0;
}
@media (prefers-reduced-motion: no-preference) { .lang__menu:not([hidden]) { animation: mega-in .28s var(--ease) both; } }
.lang__menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.lang__list { display: grid; gap: 2px; }
/* Without JavaScript the list opens on hover and on keyboard focus instead */
html:not(.js) .lang:is(:hover, :focus-within) .lang__menu[hidden] { display: block !important; }
.lang__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 0 12px 0 14px; border-radius: 12px;
  font-size: .9375rem; font-weight: 560; font-stretch: var(--wd-ui); line-height: 1.2;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang__link:hover { background: var(--violet-50); color: var(--violet-700); }
.lang__link[aria-current] { color: var(--violet-700); font-weight: 650; }
.lang__link:focus-visible { outline-offset: 0; }
.lang__check { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* „Ελληνικά” on Romanian and English pages: Archivo has no Greek, so the system font draws it (SF, Segoe UI,
   Roboto), and those look heavier than Archivo at the same weight. */
html:not(:lang(el)) :is(.lang__link, .mpanel__langs a)[lang="el"] { font-weight: 480; }
html:not(:lang(el)) .phero__langs a[lang="el"] { font-weight: 520; }
/* Inside the white menu cards the focus ring stays violet in every header state */
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) :is(.mega, .lang__menu) :focus-visible,
html.hdr-dark .hdr.is-solid:not(.is-open) :is(.mega, .lang__menu) :focus-visible { outline-color: var(--violet); }

/* Mobile panel: a quiet row of the language names at the bottom */
.mpanel__lang { display: flex; align-items: center; gap: 12px; color: var(--slate); }
.mpanel__globe { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; }
.mpanel__langs { display: flex; flex-wrap: wrap; column-gap: 22px; }
.mpanel__langs a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 560; color: var(--slate); text-decoration: none; }
.mpanel__langs a:hover { color: var(--violet-700); }
.mpanel__langs a[aria-current] { color: var(--ink); font-weight: 680; }


/* 6. Page hero (.phero) -----------------------------------------------------
   The one inner-page hero: the animated gradient band runs under the header and the copy,
   its lower edge skewed; the page's real screen (browser frame) rises out of the band onto
   the lavender ground, with one or two real UI cut-outs lifted off it.
   Grid trick, no measuring: the band covers the copy row plus an overlap row; the media starts
   in the overlap row, so it always sits partly on the band and partly below it.
   Layouts: default = stacked (headline across, product below: the strong poster);
   .phero--split = copy left, media right (compact media: a phone, a card, a form result);
   .phero--text = no media (the band holds the whole hero).
   -------------------------------------------------------------------------- */
.phero {
  --side: max(var(--gutter), calc((100% - var(--max)) / 2));
  --overlap: clamp(120px, 17vw, 300px);      /* how much of the media sits on the band */
  --skew: clamp(40px, 6vw, 112px);           /* the band's lower edge rises by this to the right */
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: [full-start] var(--side) [content-start copy-start media-start] minmax(0, 1fr) [copy-end media-end content-end] var(--side) [full-end];
  grid-template-rows: [band-start copy-start] auto [copy-end overlap-start] var(--overlap) [overlap-end band-end rest-start] auto [rest-end];
  padding-bottom: var(--sec);
  background: var(--violet-50);
  color: var(--ink);
  overflow-x: clip;
}
.phero--white { background: var(--paper); }
.phero__band {
  grid-column: full; grid-row: band-start / band-end;
  position: relative; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--skew)), 0 100%);
  background: var(--indigo);
}
.phero__canvas, .phero__band > canvas {
  position: absolute; inset: 0;
  --gradient-1: #2F23A8; --gradient-2: #3B2DBF; --gradient-3: #6B4EFF; --gradient-4: #FF5FA2; --gradient-5: #FFC23D;
  background-color: var(--indigo);
  background-image: linear-gradient(var(--fallback-angle, 150deg), #2F23A8 0%, #3B2DBF 24%, #5A41F3 44%, #6B4EFF 56%, #E95BB7 72%, #FF7E78 84%, #FFB547 100%);
}
/* A soft shade along the header and behind the copy keeps white text AA on every colour */
.phero__band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(20 13 51 / .32) 0, rgb(20 13 51 / 0) 160px),
    linear-gradient(90deg, rgb(20 13 51 / .24) 0, rgb(20 13 51 / 0) 62%);
}
.phero__copy {
  grid-column: copy; grid-row: copy-start / copy-end;
  align-self: end;
  position: relative; z-index: 1; min-width: 0;
  padding: calc(var(--header-h) + clamp(40px, 5.6vw, 88px)) 0 clamp(36px, 3.4vw, 56px);
  color: #fff;
}
/* Kicker on the band: a glass pill with the channel's dot */
.phero__kicker {
  padding: 6px 14px 6px 12px; border-radius: 999px;
  background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24);
  color: #fff; font-size: .875rem;
  --dot: #CFC4FF;
}
.phero__kicker.kicker--sms { --dot: var(--coral); }
.phero__kicker.kicker--ai { --dot: var(--pink); }
.phero__kicker.kicker--data { --dot: var(--sun); }
.phero__kicker::before { box-shadow: none; }
.phero__title { max-width: 15em; color: #fff; }
.phero__title .ln { display: block; }
.phero__lede { max-width: 36em; margin-top: clamp(18px, 1.6vw, 26px); font-size: var(--fs-lede); line-height: 1.5; color: rgb(255 255 255 / .92); text-wrap: balance; }
.phero__kicker + .phero__title { margin-top: 20px; }
/* Small links to the other languages' homes (the shared 404) */
.phero__langs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 18px; font-size: .9375rem; color: #fff; }
.phero__globe { width: 16px; height: 16px; flex: none; margin-right: -8px; fill: none; stroke: currentColor; stroke-width: 1.25; opacity: .85; }
.phero__langs a { display: inline-flex; align-items: center; min-height: 32px; color: #fff; font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.phero__actions { margin-top: clamp(26px, 2.4vw, 38px); }
.phero__actions .link, .phero__copy .link { color: #fff; text-decoration-color: rgb(255 255 255 / .5); }
.phero__copy :focus-visible { outline-color: #fff; }
.phero__copy .btn:focus-visible { box-shadow: 0 0 0 3px var(--indigo), 0 0 0 5.5px #fff; }

.phero__media {
  grid-column: media; grid-row: overlap-start / rest-end;
  position: relative; z-index: 2; min-width: 0; margin: 0;
}
.phero__stage { position: relative; }
.phero__stage > .frame, .phero__stage > .phone, .phero__stage > .stage { position: relative; z-index: 1; }
.phero__media > .stage { margin-top: 0; }
.phero__cap { margin-top: 18px; max-width: 52em; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.phero__cap .note { display: block; margin-top: 4px; }
.phero__stage > .lift { z-index: 3; }
.phero__media--card { max-width: 640px; }

/* Phones: a phone frame (frame--adapt) rising out of the band, centred */
@media (max-width: 759.98px) {
  .phero { --overlap: clamp(150px, 44vw, 240px); --skew: 40px; }
  .phero__copy { padding-top: calc(var(--header-h) + 36px); padding-bottom: 32px; }
  .phero__actions .btn { flex: 1 1 auto; }
  .phero__cap { text-align: center; margin-inline: auto; }
}

/* Large screens, split: copy left, media right; the band is the copy row, the media hangs below */
@media (min-width: 1100px) {
  .phero--split {
    --tail: clamp(110px, 11vw, 200px);
    grid-template-columns: [full-start] var(--side) [content-start copy-start] minmax(0, 6fr) [copy-end] clamp(40px, 4.4vw, 80px) [media-start] minmax(0, 6fr) [media-end content-end] var(--side) [full-end];
    grid-template-rows: [band-start copy-start] auto [copy-end band-end rest-start] var(--tail) [rest-end];
  }
  .phero--split .phero__copy { align-self: center; padding-bottom: calc(var(--skew) + 48px); }
  .phero--split .phero__title { font-size: clamp(2.375rem, 1rem + 2.9vw, 3.625rem); max-width: 12em; }
  .phero--split .phero__media {
    grid-row: copy-start / rest-end; align-self: end;
    margin-top: calc(var(--header-h) + 40px);
  }
  .phero--split .phero__media--card { justify-self: end; width: 100%; }
  /* --flip: media left, copy right */
  .phero--split.phero--flip {
    grid-template-columns: [full-start] var(--side) [content-start media-start] minmax(0, 6fr) [media-end] clamp(40px, 4.4vw, 80px) [copy-start] minmax(0, 6fr) [copy-end content-end] var(--side) [full-end];
  }
  .phero--flip .phero__band { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--skew))); }
}
/* --text: no media */
.phero--text { grid-template-rows: [band-start copy-start] auto [copy-end band-end]; padding-bottom: 0; }
.phero--text .phero__copy { padding-bottom: calc(var(--skew) + clamp(64px, 7vw, 112px)); }


/* 7. Legacy hero (.hero) ----------------------------------------------------
   The v3 hero markup still renders cleanly (white ground, violet type) until a page moves
   to .phero. */
.hero { padding-block: clamp(40px, 3vw + 24px, 88px) var(--sec); }
.hero__title .ln { display: block; }
.hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s5) var(--s8);
  margin-top: clamp(22px, 1.5vw + 14px, 36px);
}
.hero__row .lede { max-width: 31em; }
.hero--split .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--s7) var(--s8);
}
.hero--split .lede { margin-top: var(--s5); }
.hero--split .actions { margin-top: var(--s6); }
@media (max-width: 899.98px) {
  .hero__row { grid-template-columns: minmax(0, 1fr); }
  .hero--split .hero__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759.98px) {
  .hero__title .ln { display: inline; }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { width: 100%; }
}


/* 8. Tabs and tab panels -----------------------------------------------------
   .ruler-tabs keeps its v3 name; it now reads as the prototype's steps: a dot, a label and a
   one-line description per tab; the active one lifts onto a white card. Phones: a row of
   pills (the active one violet) that scrolls sideways. */
.ruler-tabs {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 6px;
  padding: 6px;
  border-radius: 22px;
  background: rgb(107 78 255 / .06);
}
.ruler-tab {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 13px 14px 12px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--slate);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease);
}
.ruler-tab:hover { background: rgb(255 255 255 / .6); color: var(--ink); }
.ruler-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgb(22 18 31 / .05), 0 10px 24px -14px rgb(42 27 110 / .45); }
.ruler-tab__label {
  position: relative;
  display: block;
  padding-left: 18px;
  font-size: 1.0625rem;
  font-weight: 620;
  font-stretch: var(--wd-ui);
  line-height: 1.25;
}
.ruler-tab__label::before {
  content: "";
  position: absolute;
  top: .42em;
  left: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line-field);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ruler-tab[aria-selected="true"] .ruler-tab__label::before { background: var(--tab-dot, var(--violet)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tab-dot, var(--violet)) 20%, transparent); }
.ruler-tab__desc {
  display: block;
  margin-top: 3px;
  padding-left: 18px;
  color: var(--slate);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.4;
}
.ruler-tabs__caption { display: none; }

/* Vertical list of tabs (e.g. a module index) */
.ruler-tabs--vertical { display: flex; flex-direction: column; gap: 2px; padding: 0; background: none; border-radius: 0; }
.ruler-tabs--vertical .ruler-tab { padding: 11px 12px; border-radius: 14px; }
.ruler-tabs--vertical .ruler-tab:hover { background: rgb(107 78 255 / .06); }
.ruler-tabs--vertical .ruler-tab[aria-selected="true"] { background: #fff; }

@media (max-width: 899.98px) {
  .ruler-tabs:not(.ruler-tabs--vertical) {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: -7px;                     /* room for the focus ring inside the scroller */
    padding: 7px;
    border-radius: 0;
    background: none;
    scroll-padding-inline: 7px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ruler-tabs:not(.ruler-tabs--vertical)::-webkit-scrollbar { display: none; }
  .ruler-tabs:not(.ruler-tabs--vertical) .ruler-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--line-2);
    scroll-snap-align: start;
  }
  .ruler-tabs:not(.ruler-tabs--vertical) .ruler-tab[aria-selected="true"] { background: var(--violet); color: #fff; box-shadow: 0 8px 18px -10px rgb(107 78 255 / .9); }
  .ruler-tabs:not(.ruler-tabs--vertical) .ruler-tab__label { padding-left: 0; font-size: 1rem; white-space: nowrap; }
  .ruler-tabs:not(.ruler-tabs--vertical) .ruler-tab__label::before { display: none; }
  .ruler-tabs:not(.ruler-tabs--vertical) .ruler-tab__desc { display: none; }
  .ruler-tabs__caption { display: block; margin-top: var(--s3); color: var(--slate); font-size: .9375rem; }
}

/* Edge fade on any horizontal scroller (site.js sets data-fade) */
[data-fade="end"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
[data-fade="start"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
}
[data-fade="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

/* Panels. Default: inactive panels carry [hidden]; the new one fades in.
   .tab-panels--stack: panels share one grid cell and cross-fade (same-size content); the
   inactive ones skip rendering, so their lazy images wait until hover/focus/selection. */
.tab-panel { min-width: 0; }
.tab-panel:focus-visible { outline-offset: 6px; }
[data-tabs].is-interacted .tab-panels:not(.tab-panels--stack) > .tab-panel:not([hidden]) {
  animation: panel-in .45s var(--ease) both;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tab-panels--stack { display: grid; }
.tab-panels--stack > .tab-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-swap) ease, visibility 0s linear var(--t-swap);
}
.tab-panels--stack > .tab-panel:not(.is-active) { content-visibility: hidden; }
.tab-panels--stack > .tab-panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-swap) ease;
}


/* 9. Product stage ------------------------------------------------------------
   A lavender stage that carries the tabs, the framed screen and its caption. */
.stage {
  position: relative;
  margin-top: clamp(40px, 2.5vw + 20px, 64px);
  padding: 10px clamp(16px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px);
  border-radius: var(--r-stage);
  background: var(--violet-50);
  box-shadow: inset 0 0 0 1px rgb(107 78 255 / .08);
}
.section--fog .stage, .section--lavender .stage, .phero .stage { background: #fff; box-shadow: var(--sh-2), inset 0 0 0 1px var(--line); }
.section--fog .stage .ruler-tabs, .section--lavender .stage .ruler-tabs { background: var(--violet-50); }
.stage > .ruler-tabs, .stage > .toggle { margin-top: 6px; }
.stage__panels { margin-top: var(--s5); }
.stage__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s6);
  margin-top: var(--s4);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.stage__caption > span { max-width: 54em; }
.stage__caption .link { white-space: nowrap; }
.stage__note { margin-top: var(--s3); color: var(--slate); font-size: var(--fs-small); }
@media (max-width: 899.98px) {
  .stage { padding: 12px var(--s5) var(--s5); }
}
@media (max-width: 759.98px) {
  .stage { padding: 12px var(--s4) var(--s5); border-radius: 22px; }
  .stage__panels { margin-top: var(--s4); }
  .stage__caption { flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
  .stage__caption > span { max-width: 30em; }
  .stage__note { text-align: center; }
}


/* 10. Frames, crops, captions ------------------------------------------------- */
/* Browser frame: white, radius 14, layered violet shadow, a quiet bar with the real
   address of the screen in a pill (with a lock). No traffic-light dots. */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-frame);
  background: var(--paper);
  box-shadow: var(--sh-frame);
}
.frame--flat { box-shadow: 0 0 0 1px var(--line); }
.frame__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--bar-h);
  padding: 0 16px;
  background: linear-gradient(#FDFCFF, #F7F5FE);
  border-bottom: 1px solid #ECE8F7;
  white-space: nowrap;
}
.frame__addr {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  height: 24px; padding: 0 12px; border-radius: 999px; background: #EFECF9;
  font-size: .75rem; font-weight: 500; line-height: 24px; color: #625D78;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame__addr::before {
  content: ""; flex: none; width: 9px; height: 11px;
  background: currentColor; opacity: .75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2 4.5V3.2a2.5 2.5 0 0 1 5 0v1.3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Crect x='.5' y='4.5' width='8' height='6' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2 4.5V3.2a2.5 2.5 0 0 1 5 0v1.3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Crect x='.5' y='4.5' width='8' height='6' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 759.98px) { .frame__addr { height: 20px; line-height: 20px; font-size: .6875rem; } }
.frame__view {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ar, auto);
}
.frame__view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
/* Adaptive frame: below 760px it becomes a phone (use with a <picture> whose phone source
   comes from /assets/img/mobile/). */
@media (max-width: 759.98px) {
  .frame--adapt {
    width: min(100%, var(--phone-w, 286px));
    margin-inline: auto;
    padding: 7px;
    border-radius: var(--r-phone);
    background: #0F0B1E;
    box-shadow: inset 0 0 0 1.5px #3A3354, 0 2px 4px rgb(20 13 51 / .12), 0 30px 50px -24px rgb(42 27 110 / .55);
  }
  .frame--adapt .frame__bar { display: none; }
  .frame--adapt .frame__view {
    border-radius: calc(var(--r-phone) - 7px);
    aspect-ratio: var(--ar-phone, .6);
    background: #fff;
  }
  .frame--adapt .frame__view img { object-position: top center; }
}

/* Phone frame: a night bezel */
.phone {
  width: min(100%, var(--phone-w, 300px));
  padding: 7px;
  border-radius: var(--r-phone);
  background: #0F0B1E;
  box-shadow: inset 0 0 0 1.5px #3A3354, 0 2px 4px rgb(20 13 51 / .12), 0 30px 50px -24px rgb(42 27 110 / .55);
}
.phone__view {
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ar, 585 / 1266);
  border-radius: calc(var(--r-phone) - 7px);
  background: #fff;
}
.phone__view img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Crop window: show any rectangle of a screenshot.
   Inline vars, in the image's 1x pixel space:
   --iw --ih (image size), --x --y (window top-left), --w (window width), --ar (window ratio).
   Optional overrides per breakpoint: --x-md --y-md --w-md --ar-md (< 1100px),
   --iw-sm --ih-sm --x-sm --y-sm --w-sm --ar-sm (< 760px). */
.crop {
  --_iw: var(--iw, 1192);
  --_ih: var(--ih, 936);
  --_x: var(--x, 0);
  --_y: var(--y, 0);
  --_w: var(--w, var(--_iw));
  --_ar: var(--ar, 1.5);
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--_ar);
  background: var(--paper);
}
.crop img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  width: calc(var(--_iw) / var(--_w) * 100%);
  height: auto;
  transform: translate(calc(var(--_x) / var(--_iw) * -100%), calc(var(--_y) / var(--_ih) * -100%));
}
@media (max-width: 1099.98px) {
  .crop {
    --_x: var(--x-md, var(--x, 0));
    --_y: var(--y-md, var(--y, 0));
    --_w: var(--w-md, var(--w, var(--_iw)));
    --_ar: var(--ar-md, var(--ar, 1.5));
  }
}
@media (max-width: 759.98px) {
  .crop {
    --_iw: var(--iw-sm, var(--iw, 1192));
    --_ih: var(--ih-sm, var(--ih, 936));
    --_x: var(--x-sm, var(--x-md, var(--x, 0)));
    --_y: var(--y-sm, var(--y-md, var(--y, 0)));
    --_w: var(--w-sm, var(--w-md, var(--w, var(--_iw))));
    --_ar: var(--ar-sm, var(--ar-md, var(--ar, 1.5)));
  }
}

/* Captions describe what is visible, in one line */
.caption {
  max-width: 60em;
  margin-top: var(--s3);
  color: var(--fg-2);
  font-size: .9375rem;
  line-height: 1.5;
}
.note { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.5; }


/* 11. Lists and tags ------------------------------------------------------------
   .ruler-list keeps its name: items carry a violet check on light separators. */
.ruler-list { display: grid; }
.ruler-list > li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-top: 1px solid var(--fg-line);
}
.ruler-list > li:first-child { border-top: 0; }
.ruler-list > li::before {
  content: "";
  position: absolute; left: 0; top: 16px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--violet-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.4 7.3l2.3 2.3 4.9-5' fill='none' stroke='%234930D6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.ruler-list__title { display: block; font-weight: 640; font-stretch: var(--wd-ui); line-height: 1.35; }
.ruler-list__text { display: block; margin-top: 2px; color: var(--fg-2); font-size: .9375rem; line-height: 1.5; }
/* --strong: the list sits on a white card */
.ruler-list--strong {
  padding: 6px clamp(18px, 2vw, 28px);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}
.section--fog .ruler-list--strong, .section--lavender .ruler-list--strong { box-shadow: var(--sh-2); }
.ruler-list--2, .ruler-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
.ruler-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ruler-list--2 > li:nth-child(2), .ruler-list--3 > li:nth-child(-n+3) { border-top: 0; }
@media (max-width: 899.98px) {
  .ruler-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ruler-list--3 > li:nth-child(3) { border-top: 1px solid var(--fg-line); }
}
@media (max-width: 759.98px) {
  .ruler-list--2, .ruler-list--3 { grid-template-columns: minmax(0, 1fr); }
  .ruler-list--2 > li:nth-child(2), .ruler-list--3 > li:nth-child(2), .ruler-list--3 > li:nth-child(3) { border-top: 1px solid var(--fg-line); }
}
/* Navigation list: the whole row is the link */
.ruler-list--links > li { padding: 0; }
.ruler-list--links > li::before { display: none; }
.ruler-list--links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 60px;
  padding: 12px 14px;
  margin-inline: -14px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 650;
  font-stretch: var(--wd-ui);
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.ruler-list--links a::after {
  content: ""; flex: none; order: 3; width: 32px; height: 32px; border-radius: 50%;
  background: var(--violet-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%234930D6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: transform .3s var(--ease), background-color .2s var(--ease);
}
.ruler-list--links a:hover { background: var(--violet-50); color: var(--violet-700); }
.ruler-list--links a:hover::after { transform: translateX(3px); background-color: #fff; }
.ruler-list--links .ruler-list__text { margin: 0 0 0 auto; font-size: .9375rem; font-weight: 400; text-align: right; color: var(--slate); }

.tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--violet-50);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 580;
  font-stretch: var(--wd-ui);
  line-height: 1.2;
}
.section--fog .tag, .section--lavender .tag, .phero .tag { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tag--email::before, .tag--sms::before, .tag--ai::before, .tag--data::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.tag--email { --dot: var(--violet); } .tag--sms { --dot: var(--coral); } .tag--ai { --dot: var(--pink); } .tag--data { --dot: var(--sun); }


/* 12. Proof figures ------------------------------------------------------------
   Static numbers with their dates (never counted up). A coloured tick per figure; the
   condensed second voice of Archivo for the numerals. In .band-violet: all white. */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s7) var(--s6);
}
.figure { position: relative; padding-top: 22px; border-top: 1px solid var(--fg-line); }
.figure::before { content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tick, var(--violet)); }
.figure:nth-child(4n+2) { --tick: var(--pink); }
.figure:nth-child(4n+3) { --tick: var(--coral); }
.figure:nth-child(4n+4) { --tick: var(--sun); }
.figure__num {
  display: block;
  font-size: clamp(2.5rem, 1.5rem + 2.9vw, 4.25rem);
  font-weight: 800;
  font-stretch: var(--wd-num);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--fg);
}
/* Long numbers (5.000.000+) scale to their own column instead of running into the next one:
   the numeral string is ~4.75em wide, so 20cqi keeps it inside (the plain clamp stays as fallback) */
.figure { container-type: inline-size; }
.figure__num { font-size: min(clamp(2.5rem, 1.5rem + 2.9vw, 4.25rem), 20cqi); }
.figure__label { display: block; max-width: 16em; margin-top: 12px; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--fg); text-wrap: balance; }
.figure__date { display: block; margin-top: var(--s2); color: var(--fg-2); font-size: var(--fs-small); line-height: 1.4; }
.figures__note { margin-top: var(--s5); color: var(--fg-2); font-size: var(--fs-small); }
@media (max-width: 999.98px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759.98px) {
  .figures { gap: var(--s6) var(--s4); }
  .figure__num { font-size: clamp(2rem, 9vw, 2.75rem); font-size: min(clamp(2rem, 9vw, 2.75rem), 20cqi); }
  .figure__label { font-size: .9375rem; }
}


/* 13. Who-does-what matrix ------------------------------------------------------
   Columns = the steps of a campaign; one row per way of working. The row buttons are a
   [data-toggle] group (radio look); rows are click proxies ([data-toggle-for]). */
.matrix { --mx-cols: minmax(0, 3.1fr) repeat(4, minmax(0, 2fr)); --mx-gap: 10px; display: grid; gap: 10px; }
.matrix__steps {
  display: grid;
  grid-template-columns: var(--mx-cols);
  column-gap: var(--mx-gap);
  padding: 0 18px;
  color: var(--fg-2);
  font-size: .8125rem;
  font-weight: 640;
  font-stretch: var(--wd-ui);
}
.matrix__row {
  display: grid;
  grid-template-columns: var(--mx-cols);
  column-gap: var(--mx-gap);
  align-items: stretch;
  padding: 16px 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  cursor: pointer;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.matrix__row.is-selected { box-shadow: inset 0 0 0 2px var(--violet), 0 22px 44px -26px rgb(107 78 255 / .55); }
.matrix__row:not(.is-selected):hover { box-shadow: inset 0 0 0 1.5px var(--violet-200), var(--sh-2); }
.matrix__head { min-width: 0; padding-right: var(--s3); }
.matrix__mode {
  position: relative;
  display: block;
  margin: -4px 0 0 -4px;
  padding: 4px 4px 4px 32px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  text-align: left;
}
.matrix__mode::before {
  content: "";
  position: absolute; top: 6px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--line-field);
  transition: box-shadow .3s var(--ease);
}
.matrix__mode[aria-pressed="true"]::before { box-shadow: inset 0 0 0 6px var(--violet); }
.matrix__name {
  display: block;
  font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem);
  font-weight: 700;
  font-stretch: 106%;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.matrix__sub { margin-top: 2px; padding-left: 28px; color: var(--slate); font-size: .9375rem; line-height: 1.45; }
.matrix__bar {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--violet);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 620;
  font-stretch: var(--wd-ui);
  line-height: 1.35;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
  transition: background-color var(--t-swap) ease, color var(--t-swap) ease;
}
.matrix__cells {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--mx-gap);
}
.matrix__cell {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--violet-50);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 560;
  line-height: 1.35;
  transition: background-color var(--t-swap) ease, color var(--t-swap) ease;
}
.matrix__step {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* States: the unselected rows stay legible (no opacity on text) */
.matrix__row:not(.is-selected) .matrix__bar { background: var(--violet-50); color: var(--slate); box-shadow: none; }
.matrix__row:not(.is-selected) .matrix__cell { background: var(--mist); color: var(--slate); }
.section--fog .matrix__row:not(.is-selected) .matrix__cell, .section--lavender .matrix__row:not(.is-selected) .matrix__cell { background: var(--violet-50); }
/* Under the matrix: the selected mode's copy + its screenshot ([data-when]) */
.matrix-detail {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
  gap: var(--s6) var(--s8);
  margin-top: clamp(32px, 2vw + 20px, 56px);
}
.matrix-detail__copy { padding-top: var(--s2); }
.matrix-detail__copy > h2, .matrix-detail__copy > h3 { margin-bottom: var(--s3); }
.matrix-detail__lead { max-width: 19em; color: var(--ink); font-size: var(--fs-lede); line-height: 1.45; }
.matrix-detail__copy .actions { margin-top: var(--s5); gap: var(--s3) var(--s5); }
.matrix-detail__figure { min-width: 0; }
@media (max-width: 899.98px) {
  .matrix-detail { grid-template-columns: minmax(0, 1fr); }
  .matrix-detail__copy { order: 2; padding-top: 0; }
  .matrix__steps { display: none; }
  .matrix__row { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 16px; }
  .matrix__bar, .matrix__cells { grid-column: 1; }
  .matrix__bar { min-height: 0; padding: 14px 16px; font-size: 1rem; }
  .matrix__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .matrix__step {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 2px;
    overflow: visible;
    clip-path: none;
    color: var(--violet-700);
    font-size: .75rem;
    font-weight: 640;
    white-space: normal;
  }
  .matrix__bar .matrix__step { color: rgb(255 255 255 / .92); margin-right: 8px; }
  .matrix__row:not(.is-selected) .matrix__bar .matrix__step { color: var(--slate); }
}


/* 14. Toggles, swap containers, chips --------------------------------------------- */
/* Segmented toggle: a [data-toggle] group of aria-pressed buttons */
.toggle {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: var(--violet-50);
  box-shadow: inset 0 0 0 1px rgb(107 78 255 / .1);
}
.section--fog .toggle, .section--lavender .toggle, .stage .toggle { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.toggle__btn {
  position: relative;
  min-height: 40px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--slate);
  font-size: .9375rem;
  font-weight: 620;
  font-stretch: var(--wd-ui);
  line-height: 1.2;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease);
}
.toggle__btn:hover { color: var(--ink); }
.toggle__btn[aria-pressed="true"] { background: var(--violet); color: #fff; box-shadow: 0 6px 14px -6px rgb(107 78 255 / .8); }

/* Stacked crossfade for [data-when] children (site.js toggles .is-on) */
[data-swap] { display: grid; }
[data-swap] > * {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity var(--t-swap) ease, visibility 0s linear var(--t-swap);
}
[data-swap] > :not(.is-on) { opacity: 0; visibility: hidden; }
[data-swap] > .is-on { opacity: 1; visibility: visible; transition: opacity var(--t-swap) ease; }

/* Filter chips (aria-pressed buttons) */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  font-size: .9375rem;
  font-weight: 600;
  font-stretch: var(--wd-ui);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--violet); color: var(--violet-700); }
.chip[aria-pressed="true"] { background: var(--violet); color: #fff; box-shadow: 0 8px 18px -10px rgb(107 78 255 / .9); }
.chip__count { color: var(--slate); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__count { color: rgb(255 255 255 / .9); }


/* 15. Feature split, pillars, steps, phone row, cards, lifts, photos ----------- */
/* Feature split: one sentence + one screenshot, alternating sides */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--s7) clamp(40px, 5vw, 88px);
}
.split + .split { margin-top: var(--sec); }
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--top { align-items: start; }
.split--flip .split__text { order: 2; }
.split__text > * + * { margin-top: var(--s4); }
.split__text > .kicker + * { margin-top: 14px; }
.split__text > .ruler-list, .split__text > .note { margin-top: var(--s5); }
.split__text > .actions, .split__text > .price-line { margin-top: var(--s6); }
.split__text > .brandline + * { margin-top: var(--s5); }
.split__media { position: relative; min-width: 0; }
.split__media > .toggle { margin-bottom: var(--s4); }
@media (max-width: 899.98px) {
  .split, .split--flip { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .split--flip .split__text { order: 0; }
}

/* Product line: app icon + product name (StoreIQ) */
.brandline { display: flex; align-items: center; gap: var(--s3); color: var(--fg-2); }
.brandline img { flex: none; width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 6px 18px -8px rgb(20 13 51 / .45); }
.brandline strong { color: var(--fg); font-weight: 720; font-stretch: var(--wd-h2); }

/* Pillars: four pages, each a framed screen + title + one sentence on a tinted tile. The
   whole tile is the link (stretched title link); it lifts on hover. */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pillar {
  position: relative; min-width: 0; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) 0;
  border-radius: var(--r-xl);
  background: var(--pillar-bg, var(--violet-tint));
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pillar:nth-child(4n+2) { --pillar-bg: var(--peach); }
.pillar:nth-child(4n+3) { --pillar-bg: var(--pink-tint); }
.pillar:nth-child(4n+4) { --pillar-bg: var(--sun-tint); }
.pillar:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgb(42 27 110 / .5); }
.pillar .frame { order: 2; margin-top: var(--s5); margin-bottom: -2px; border-radius: 14px 14px 0 0; transition: transform .6s var(--ease); }
.pillar:hover .frame { transform: translateY(-6px); }
.pillar__body { order: 1; }
.pillar__title { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem); font-weight: 740; font-stretch: 110%; letter-spacing: -.022em; line-height: 1.1; }
.pillar__title a { padding-block: 2px; color: inherit; text-decoration: none; }
.pillar__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.pillar__title a:focus-visible { outline: 0; }
.pillar:has(.pillar__title a:focus-visible) { outline: 2.5px solid var(--violet); outline-offset: 4px; }
.pillar__text { max-width: 30em; margin-top: var(--s2); color: var(--ink-2); }
.pillar__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--s3);
  color: var(--violet-700);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .22em;
}
.pillar:hover .pillar__more { text-decoration-color: currentColor; }
@media (max-width: 759.98px) {
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pillar { padding-bottom: clamp(22px, 2.4vw, 32px); }
  .pillar .frame { display: none; }
}

/* Steps: only for a real sequence. Numbered rings joined by connectors that fill violet → pink
   one after another while the list scrolls through (motion.js sets --p 0 → 1 on [data-steps];
   without it they are full). Any number of steps; 3 columns ≥ 900px (set --cols for 2 or 4). */
.steps {
  --gap: var(--s6); --n: 3; --p: 1;
  position: relative; display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--s7) var(--gap);
  counter-reset: step;
}
.steps:has(> .step:nth-child(2):last-child) { --n: 2; }
.steps:has(> .step:nth-child(4):last-child) { --n: 4; }
.steps:has(> .step:nth-child(5):last-child) { --n: 5; }
.step { position: relative; z-index: 1; --i: 0; }
.step:nth-child(2) { --i: 1; } .step:nth-child(3) { --i: 2; } .step:nth-child(4) { --i: 3; } .step:nth-child(5) { --i: 4; }
.step:not(:last-child)::before, .step:not(:last-child)::after {
  content: ""; position: absolute; z-index: -1;
  left: 56px; right: calc(8px - var(--gap)); top: 23px; height: 2px; border-radius: 2px;
  background: var(--fg-line);
}
.step:not(:last-child)::after {
  background: linear-gradient(90deg, var(--violet), var(--pink));
  transform-origin: 0 50%;
  transform: scaleX(clamp(0, calc(var(--p) * (var(--n) - 1) - var(--i)), 1));
}
.step__n {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--violet-700);
  box-shadow: inset 0 0 0 2px var(--violet), 0 8px 20px -10px rgb(107 78 255 / .6);
  font-size: 1.125rem; font-weight: 760; font-stretch: 112%; font-variant-numeric: tabular-nums; line-height: 1;
}
.step__title { margin-top: var(--s5); }
.step__text { max-width: 24em; margin-top: var(--s2); color: var(--fg-2); }
/* Vertical rail: below 900px, or anywhere with .steps--vertical (e.g. a narrow side column) */
.steps--vertical { --gap: var(--s5); grid-template-columns: minmax(0, 1fr); row-gap: var(--gap); }
.steps--vertical .step { padding-left: 72px; min-height: 48px; }
.steps--vertical .step__n { position: absolute; left: 0; top: -4px; }
.steps--vertical .step__title { margin-top: 6px; }
.steps--vertical .step:not(:last-child)::before, .steps--vertical .step:not(:last-child)::after { left: 23px; right: auto; top: 50px; bottom: calc(6px - var(--gap)); width: 2px; height: auto; }
.steps--vertical .step:not(:last-child)::after { background: linear-gradient(var(--violet), var(--pink)); transform-origin: 50% 0; transform: scaleY(clamp(0, calc(var(--p) * (var(--n) - 1) - var(--i)), 1)); }
@media (max-width: 899.98px) {
  .steps { --gap: var(--s5); grid-template-columns: minmax(0, 1fr); row-gap: var(--gap); }
  .step { padding-left: 72px; min-height: 48px; }
  .step__n { position: absolute; left: 0; top: -4px; }
  .step__title { margin-top: 6px; }
  .step:not(:last-child)::before, .step:not(:last-child)::after { left: 23px; right: auto; top: 50px; bottom: calc(6px - var(--gap)); width: 2px; height: auto; }
  .step:not(:last-child)::after { background: linear-gradient(var(--violet), var(--pink)); transform-origin: 50% 0; transform: scaleY(clamp(0, calc(var(--p) * (var(--n) - 1) - var(--i)), 1)); }
}

/* Horizontal, swipeable row (e.g. phone screens). Add tabindex="0", role="region" and an
   aria-label so it can be scrolled with the keyboard. */
.phone-row {
  display: flex;
  gap: var(--s5);
  overflow-x: auto;
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s2) var(--gutter) var(--s6);
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.phone-row > * { flex: 0 0 auto; scroll-snap-align: start; }
.phone-row .phone { --phone-w: 248px; }
.phone-row figcaption { max-width: 248px; margin-top: var(--s3); }
.phone-row:focus-visible { outline-offset: -4px; border-radius: 24px; }

/* Card: a white surface with a hairline ring and violet depth (lavender on white grounds
   with .card--tint). */
.card {
  position: relative; min-width: 0;
  padding: clamp(22px, 2.2vw, 32px);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.card--tint { background: var(--violet-50); box-shadow: none; }
.card--lift { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.card--lift:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--sh-3); }
.card > .ico { margin-bottom: var(--s4); }
.card__title { font-size: var(--fs-h3); font-weight: 680; font-stretch: var(--wd-h3); letter-spacing: -.012em; line-height: 1.2; }
.card__text { margin-top: var(--s2); color: var(--fg-2); }

/* Lift: a real UI cut-out (from /assets/img/cutouts*) floating over a screen or a photo.
   Place it inside a positioned parent with --lx / --ly (left / top in % of the parent) and
   --lw (width). Decorative copies of what the screen shows: alt="" + aria-hidden="true". */
.lift {
  position: absolute; display: block; max-width: none; height: auto;
  left: var(--lx, auto); top: var(--ly, auto); right: var(--lr, auto); bottom: var(--lb, auto);
  width: var(--lw, 34%);
  filter: var(--sh-float);
  pointer-events: none;
}
.lift--right { left: auto; right: var(--lr, -4%); }
.lift--bottom { top: auto; bottom: var(--lb, -8%); }
@media (max-width: 759.98px) {
  .lift { width: var(--lw-sm, var(--lw, 40%)); }
  .lift--wide { display: none; }
}

/* Photo: licensed, illustrative scenes (PHOTOS.md), rounded, with violet depth. Add
   data-unmask for the scroll-in opening (motion.js). */
.photo { position: relative; overflow: hidden; margin: 0; border-radius: var(--r-xl); aspect-ratio: var(--ar, 4 / 3); box-shadow: var(--sh-photo); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.photo-stage { position: relative; }
.photo-stage > .photo { margin-right: 8%; }
.photo-stage > .lift { z-index: 2; }


/* 16. Accordion (details/summary) ------------------------------------------------ */
.faq { display: grid; gap: 10px; }
.faq__item {
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .3s var(--ease);
}
.section--fog .faq__item, .section--lavender .faq__item { box-shadow: var(--sh-1); }
.faq__item[open] { box-shadow: inset 0 0 0 1.5px var(--violet-200), var(--sh-2); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 64px;
  padding: 18px 20px 18px 24px;
  border-radius: 18px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 640;
  font-stretch: var(--wd-ui);
  line-height: 1.3;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    linear-gradient(var(--violet-700), var(--violet-700)) center / 12px 2px no-repeat,
    linear-gradient(var(--violet-700), var(--violet-700)) center / 2px 12px no-repeat,
    var(--violet-50);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.faq__item[open] > .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--violet-700); }
.faq__a { max-width: 44em; padding: 0 24px 22px; color: var(--slate); }
.faq__a > * + * { margin-top: var(--s3); }


/* 17. Pricing plans (StoreIQ only — Vellox has no public prices) ----------------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}
.plan--featured { box-shadow: inset 0 0 0 2px var(--violet), 0 30px 60px -34px rgb(107 78 255 / .6); }
.plan__name { font-size: var(--fs-h3); font-weight: 680; font-stretch: var(--wd-h3); letter-spacing: -.01em; line-height: 1.2; }
.plan__meta { margin-top: 4px; color: var(--slate); }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: var(--s5); }
.plan__amount {
  font-size: clamp(2.4rem, 2rem + 1.4vw, 3.25rem);
  font-weight: 800;
  font-stretch: var(--wd-num);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.plan__amount--text { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); font-stretch: var(--wd-h2); }
.plan__per { color: var(--slate); }
.plan__note { min-height: 1.5em; margin-top: var(--s2); color: var(--slate); font-size: var(--fs-small); }
.plan .ruler-list { margin-top: var(--s5); }
.plan__cta { margin-top: auto; padding-top: var(--s6); }
.plans__note { margin-top: var(--s5); color: var(--fg-2); font-size: var(--fs-small); }
@media (max-width: 899.98px) { .plans { grid-template-columns: minmax(0, 1fr); } }


/* 18. Forms -------------------------------------------------------------------- */
.form { display: grid; gap: var(--s5); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 599.98px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.form.is-sent > .form__row, .form.is-sent > .field, .form.is-sent > fieldset { display: none; }
.field { display: grid; align-content: start; gap: var(--s2); min-width: 0; }
.field__label { font-size: .9375rem; font-weight: 640; font-stretch: var(--wd-ui); line-height: 1.3; }
.field__label .req { color: var(--violet-700); font-weight: 600; }
.field__hint { color: var(--slate); font-size: var(--fs-small); }
.input, .textarea, .select {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1.5px solid var(--line-field);
  border-radius: var(--r-btn);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--violet-700); }
.input::placeholder, .textarea::placeholder { color: var(--placeholder); opacity: 1; }
.input:focus, .textarea:focus, .select:focus { outline: 0; border-color: var(--violet); box-shadow: 0 0 0 4px rgb(107 78 255 / .2); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--bad); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(194 42 51 / .16); }
.textarea { min-height: 148px; resize: vertical; }
.select { padding-right: 44px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235C5870' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 12px no-repeat; }
.field-error { color: var(--bad); font-size: var(--fs-small); font-weight: 600; }
/* Checkbox chips: real checkboxes, styled as pills */
.check-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.check-chip { position: relative; display: inline-flex; }
.check-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check-chip span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-field);
  font-size: .9375rem;
  font-weight: 580;
  font-stretch: var(--wd-ui);
  line-height: 1.25;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.check-chip span::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line-field);
}
.check-chip:hover span { box-shadow: inset 0 0 0 1.5px var(--violet); }
.check-chip input:checked + span { background: var(--violet); color: #fff; box-shadow: 0 8px 18px -10px rgb(107 78 255 / .9); }
.check-chip input:checked + span::before {
  box-shadow: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.5L11 4.3' fill='none' stroke='%236B4EFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.check-chip input:focus-visible + span { outline: 2.5px solid var(--violet); outline-offset: 3px; }
.form-status { min-height: 1.5em; color: var(--slate); font-size: .9375rem; }
.form-status--ok { color: var(--ok); font-weight: 620; }
.form-status--error { color: var(--bad); font-weight: 620; }
.form-status a { color: inherit; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
/* Honeypot: clipped in place, not display:none (bots fill it, people never see or reach it) */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}


/* 19. Domain checker (domain-check.js renders the .dc-* markup) --------------------- */
.dc-panel {
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--r-xl);
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 4px rgb(42 27 110 / .04), 0 40px 80px -44px rgb(42 27 110 / .45);
}
.dc-form, .dc-result { min-width: 0; }
.dc-form__row {
  display: flex; gap: 8px; margin-top: var(--s2); padding: 6px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-field);
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.dc-form__row:focus-within { box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 5px rgb(107 78 255 / .16); }
.dc-form__row .input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 8px 0 16px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; }
.dc-form__row .input:focus { box-shadow: none; }
.dc-form__row .btn { flex: none; }
.dc-form__hint { margin-top: var(--s2); color: var(--slate); font-size: var(--fs-small); }
@media (max-width: 519.98px) {
  .dc-form__row { flex-direction: column; border-radius: 22px; }
  .dc-form__row .input { min-height: 50px; }
  .dc-form__row .btn { width: 100%; }
}
.dc-out { margin-top: var(--s5); }
.dc-out:empty { display: none; }
.dc-verdict { margin-bottom: 8px; padding: 14px 16px; border-radius: 16px; background: var(--violet-50); font-size: 1rem; line-height: 1.5; }
.dc-verdict strong { font-weight: 720; font-stretch: var(--wd-ui); }
.dc-result--ok .dc-verdict { background: #E9FAF2; }
.dc-result--warn .dc-verdict { background: #FFF6E0; }
.dc-result--bad .dc-verdict { background: #FFEDEB; }
.dc-list { display: grid; }
.dc-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  padding: 15px 4px;
  border-top: 1px solid var(--line);
}
.dc-row:first-child { border-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .dc-row:not(.dc-row--idle) { animation: dc-in .45s var(--ease) both; }
  .dc-row:nth-child(2) { animation-delay: .06s; } .dc-row:nth-child(3) { animation-delay: .12s; } .dc-row:nth-child(4) { animation-delay: .18s; }
}
@keyframes dc-in { from { opacity: 0; transform: translateY(6px); } }
.dc-dot { grid-row: span 2; align-self: start; width: 12px; height: 12px; margin: 6px 0 0 4px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--line-2); }
.dc-name { font-weight: 660; font-stretch: var(--wd-ui); }
.dc-state { justify-self: end; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 660; background: var(--violet-50); color: var(--slate); white-space: nowrap; }
.dc-detail { grid-column: 2 / -1; font-size: .9375rem; line-height: 1.45; color: var(--slate); }
.dc-record { grid-column: 2 / -1; display: block; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); font: 500 .8125rem/1.45 var(--mono); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-row--ok .dc-dot { background: var(--mint); box-shadow: 0 0 0 4px rgb(47 211 154 / .18); }
.dc-row--ok .dc-state { background: var(--mint-tint); color: var(--ok); }
.dc-row--warn .dc-dot { background: var(--sun); box-shadow: 0 0 0 4px rgb(255 194 61 / .22); }
.dc-row--warn .dc-state { background: #FFF3D6; color: var(--warn); }
.dc-row--bad .dc-dot { background: #FF5A52; box-shadow: 0 0 0 4px rgb(255 90 82 / .18); }
.dc-row--bad .dc-state { background: #FFE6E4; color: var(--bad); }
.dc-row--info .dc-dot { background: var(--violet-200); box-shadow: none; }
.dc-row--idle .dc-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-field); }
.dc-next { margin-top: 12px; font-weight: 640; }
.dc-next a { color: var(--violet-700); font-weight: 640; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.dc-note { margin-top: 10px; font-size: .8125rem; line-height: 1.5; color: var(--slate); }
.dc-loading, .dc-error { padding: 18px 4px; font-size: .9688rem; color: var(--slate); }
.dc-loading { display: flex; align-items: center; gap: 10px; }
.dc-loading::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--violet-200); border-top-color: var(--violet); animation: dc-spin .8s linear infinite; }
.dc-error { color: var(--bad); font-weight: 580; }
@keyframes dc-spin { to { transform: rotate(360deg); } }


/* 20. Night band, violet band, price line ------------------------------------------
   At most ONE of these per page. .band-ink (v3 name) = .band-night: the night-violet band.
   .band-violet: the flat brand-violet statement band (e.g. proof figures): all text white. */
.band-ink, .band-night {
  position: relative;
  overflow: hidden;
  padding-block: var(--sec);
  background: var(--night);
  color: #fff;
  --fg: #fff; --fg-2: var(--on-dark-2); --fg-line: var(--on-dark-line);
}
.band-violet {
  position: relative;
  overflow: hidden;
  padding-block: var(--sec);
  background: var(--violet);
  color: #fff;
  --fg: #fff; --fg-2: #fff; --fg-line: rgb(255 255 255 / .3);
}
.band-violet .figure:nth-child(4n+1) { --tick: #fff; }
:is(.band-ink, .band-night, .band-violet) :is(h1, h2, h3, h4) { color: #fff; }
:is(.band-ink, .band-night) :is(.lede, .muted, .caption, .note, .ruler-list__text, .figure__date, .step__text, .ruler-tab__desc, .ruler-tabs__caption, .plan__meta, .plan__per, .field__hint, .brandline, .stage__note, .stage__caption) { color: var(--on-dark-2); }
.band-violet :is(.lede, .muted, .caption, .note, .ruler-list__text, .figure__date, .step__text, .brandline, .stage__note) { color: #fff; }
:is(.band-ink, .band-night, .band-violet) .link,
:is(.band-ink, .band-night, .band-violet) .prose a,
:is(.band-ink, .band-night, .band-violet) .lede a { color: #fff; text-decoration-color: rgb(255 255 255 / .45); }
:is(.band-ink, .band-night, .band-violet) .link:hover { text-decoration-color: #fff; }
:is(.band-ink, .band-night) .btn--secondary, :is(.band-ink, .band-night, .band-violet) .btn--quiet { background: rgb(255 255 255 / .08); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .4); }
:is(.band-ink, .band-night) .btn--secondary:hover, :is(.band-ink, .band-night, .band-violet) .btn--quiet:hover { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.band-violet .btn--primary { background: #fff; color: var(--violet-700); box-shadow: 0 1px 2px rgb(20 13 51 / .18), 0 14px 32px -14px rgb(20 13 51 / .55); }
.band-violet .btn--secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .7); }
:is(.band-ink, .band-night) .frame, :is(.band-ink, .band-night) .phone { box-shadow: var(--shadow-dark); }
:is(.band-ink, .band-night) .frame { background: var(--night-2); }
:is(.band-ink, .band-night) .frame__bar { background: linear-gradient(#251B57, #1E1548); border-bottom-color: rgb(255 255 255 / .08); }
:is(.band-ink, .band-night) .frame__addr { background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .74); }
:is(.band-ink, .band-night) .ruler-tabs { background: rgb(255 255 255 / .06); }
:is(.band-ink, .band-night) .ruler-tab { color: var(--on-dark-2); }
:is(.band-ink, .band-night) .ruler-tab:hover { background: rgb(255 255 255 / .06); color: #fff; }
:is(.band-ink, .band-night) .ruler-tab[aria-selected="true"] { background: rgb(255 255 255 / .12); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
:is(.band-ink, .band-night) .ruler-tab__label::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5); }
:is(.band-ink, .band-night) .toggle { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
:is(.band-ink, .band-night) .toggle__btn { color: var(--on-dark-2); }
:is(.band-ink, .band-night) .toggle__btn:hover { color: #fff; }
:is(.band-ink, .band-night) .toggle__btn[aria-pressed="true"] { background: #fff; color: var(--deep); box-shadow: 0 4px 10px -4px rgb(0 0 0 / .4); }
:is(.band-ink, .band-night) .ruler-list > li::before { background-color: rgb(255 255 255 / .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.4 7.3l2.3 2.3 4.9-5' fill='none' stroke='%23CFC4FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.band-violet .ruler-list > li::before { background-color: rgb(255 255 255 / .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.4 7.3l2.3 2.3 4.9-5' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:is(.band-ink, .band-night) .tag { background: rgb(255 255 255 / .1); color: #fff; box-shadow: none; }
:is(.band-ink, .band-night, .band-violet) ::selection { background: #fff; color: var(--night); }
/* Price set in white wide type */
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.price-line__amount {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  font-weight: 800;
  font-stretch: var(--wd-display);
  letter-spacing: -.02em;
  line-height: 1;
}
.price-line__note { color: var(--fg-2); }


/* 21. Closing call to action (gradient band), footer ------------------------------- */
.cta { position: relative; isolation: isolate; color: #fff; padding: clamp(130px, 14vw, 220px) 0 clamp(88px, 9vw, 140px); }
.cta__band { position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 clamp(56px, 10vw, 150px), 100% 0, 100% 100%, 0 100%); background: var(--indigo); }
.cta__canvas {
  position: absolute; inset: 0;
  --gradient-1: #2F23A8; --gradient-2: #3B2DBF; --gradient-3: #6B4EFF; --gradient-4: #FF5FA2; --gradient-5: #FFC23D;
  background-color: var(--indigo);
  background-image: linear-gradient(112deg, #2A1E9E 0%, #3B2DBF 22%, #4B36DC 40%, #6B4EFF 54%, #E95BB7 70%, #FF7E78 84%, #FFB547 100%);
}
.cta__band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(20 13 51 / .3) 0, rgb(20 13 51 / 0) 62%); }
/* Every layer of a diagonal band carries the band's own cut. Some browsers do not apply a parent's
   clip-path to composited children (the WebGL canvas and the shade over it), which let the shade
   show as a grey wedge above the diagonal. inherit = the same polygon on the same box. */
.cta__band > *, .cta__band::after, .phero__band > *, .phero__band::after { clip-path: inherit; }
.cta__inner { display: grid; gap: 36px; }
.cta__title { max-width: 12em; font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5rem); font-weight: 780; font-stretch: var(--wd-display); letter-spacing: -.032em; line-height: 1.06; color: #fff; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cta__mail { font-size: 1.0625rem; color: rgb(255 255 255 / .92); }
.cta__mail a { color: #fff; font-weight: 650; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.cta :focus-visible { outline-color: #fff; }
.cta .btn:focus-visible { box-shadow: 0 0 0 3px var(--indigo), 0 0 0 5.5px #fff; }
/* Above its diagonal the call to action continues the ground of the page's last section */
main:has(> :last-child:is(.section--fog, .section--lavender, .phero:not(.phero--white):not(.phero--text))) ~ .foot .cta { background: var(--violet-50); }
main:has(> :last-child.section--mist) ~ .foot .cta { background: var(--mist); }
main:has(> :last-child:is(.band-ink, .band-night)) ~ .foot .cta { background: var(--night); }
main:has(> :last-child.band-violet) ~ .foot .cta { background: var(--violet); }
/* The band links to /contact/; on that page it is not needed */
.cta:has(a[aria-current="page"]) { display: none; }
@media (max-width: 519.98px) {
  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; }
}

.foot { display: block; }
.foot__main { padding: clamp(64px, 6vw, 96px) 0 36px; background: var(--mist); color: var(--ink); }
.cta:has(a[aria-current="page"]) + .foot__main { box-shadow: inset 0 1px 0 var(--line); }
.foot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
.foot__brand { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; }
.brand--foot { --mark-body: var(--violet); --mark-flap: #fff; color: var(--ink); justify-self: start; padding-block: 4px; }
.foot__tag { max-width: 22em; font-size: .9375rem; line-height: 1.5; color: var(--slate); }
@media (min-width: 1024px) { .foot__grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); } .foot__brand { grid-column: auto; } }
.foot__col { min-width: 0; }
.foot__title { margin-bottom: 14px; font-size: .875rem; font-weight: 680; font-stretch: var(--wd-ui); letter-spacing: 0; line-height: 1.3; color: var(--ink); }
.foot__links { display: grid; gap: 4px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 32px; font-size: .9375rem; color: var(--slate); text-decoration: none; transition: color .2s; }
.foot__links a:hover { color: var(--violet-700); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.foot__links a[aria-current="page"] { color: var(--violet-700); font-weight: 620; }
.foot__product { display: block; margin-top: 4px; font-size: .8125rem; font-weight: 680; color: var(--ink); }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--slate); }


/* 22. Utilities -------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.nw { white-space: nowrap; }
/* Show only at >= 760px / only below 760px (e.g. captions for desktop vs phone screenshots) */
@media (max-width: 759.98px) { .vis-wide { display: none !important; } }
@media (min-width: 760px)    { .vis-narrow { display: none !important; } }
/* Inline marker (decorative: add aria-hidden="true"); now a violet dot */
.slash {
  display: inline-block;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--violet);
  vertical-align: .12em;
}
.mt-s2 { margin-top: var(--s2); }
.mt-s4 { margin-top: var(--s4); }
.mt-s5 { margin-top: var(--s5); }
.mt-s6 { margin-top: var(--s6); }
.mt-s7 { margin-top: var(--s7); }
.mt-section { margin-top: var(--sec); }
.center { text-align: center; }


/* 23. Focus, view transitions, motion, print ----------------------------------------- */
:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
:where(a:not(.btn), summary):focus-visible { border-radius: 6px; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--violet); }
.ruler-tab:focus-visible, .toggle__btn:focus-visible, .chip:focus-visible { outline-offset: 2px; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 0; }
.dc-form__row .input:focus-visible { outline: 0; }
:is(.band-ink, .band-night, .band-violet) :focus-visible,
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) :focus-visible,
html.hdr-dark .hdr.is-solid:not(.is-open) :focus-visible { outline-color: #fff; }
:is(.band-ink, .band-night) .btn:focus-visible { box-shadow: 0 0 0 3px var(--night), 0 0 0 5.5px #fff; }
.band-violet .btn:focus-visible { box-shadow: 0 0 0 3px var(--violet), 0 0 0 5.5px #fff; }
html.js:has([data-header-over]) .hdr:not(.is-solid):not(.is-open) .btn:focus-visible { box-shadow: 0 0 0 3px var(--indigo), 0 0 0 5.5px #fff; }

/* Cross-page transitions. The header bar is captured on its own so it does not flash; the
   header box itself is not named (that would make it a backdrop root and kill its blur). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.hdr__bar { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
::view-transition-group(site-header) { animation-duration: 0s; }

/* Photos open from a slightly smaller window while they scroll in (motion.js sets --unmask) */
html.js-unmask [data-unmask] { clip-path: inset(calc(var(--unmask, 0) * 10%) calc(var(--unmask, 0) * 7%) round calc(var(--r-xl) + var(--unmask, 0) * 12px)); }
html.js-unmask [data-unmask] img { transform: scale(calc(1 + var(--unmask, 0) * .1)); }

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

@media print {
  .hdr, .mpanel, .mega, .cta, .phero__band, .lift { display: none !important; }
  .phero__copy, .phero__title, .phero__lede { color: var(--ink); }
  .band-ink, .band-night, .band-violet { background: none; color: var(--ink); --fg: var(--ink); --fg-2: var(--slate); }
  :is(.band-ink, .band-night, .band-violet) :is(h1, h2, h3, h4) { color: var(--ink); }
}