/* ==========================================================================
   Dynamic Document API — Document & Image Generation API
   Single stylesheet. No framework. No JavaScript dependency.
   Re-skin the whole site by editing the tokens in :root.
   ========================================================================== */

/* --- 1. Fonts (self-hosted, no third-party connection) ------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallback: eliminates the layout shift while Inter loads (CLS = 0) */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Helvetica Neue'), local('Arial');
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* --- 2. Tokens ----------------------------------------------------------- */
:root {
  --ink:        #111b35;
  --ink-soft:   #23304c;
  --muted:      #67718b;
  --dim:        #667085;
  --line:       #e6eafa;
  --line-2:     #dfe4f4;

  --brand:      #5b5cf6;
  --brand-2:    #4751e9;
  --blue:       #2366eb;
  --cyan:       #28c7ee;
  --indigo-50:  #eef1ff;

  --surface:    #f7f9ff;
  --night:      #08162d;
  --night-2:    #0c192d;
  --night-3:    #101f38;
  --white:      #fff;

  --shadow:     0 18px 55px rgba(28, 47, 97, .11);
  --shadow-sm:  0 16px 40px rgba(40, 53, 95, .06);

  --radius:     14px;
  --radius-lg:  20px;
  --radius-sm:  9px;

  --font: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system,
          BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
          'Liberation Mono', monospace;
}

/* --- 3. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: #d9ddff; color: var(--ink); }

/* --- 4. Layout primitives ------------------------------------------------ */
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.section { padding: 90px 0; }

.section-head { text-align: center; max-width: 780px; margin: 0 auto 38px; }
.section-head h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  margin: 8px 0 14px;
  letter-spacing: -.045em;
}
.section-head > p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; margin: 0; }
.section-head--left { text-align: left; margin-left: 0; max-width: none; }
/* This headline is meant to read as one line; it scales with the viewport and
   only wraps once there is not enough room. */
.section-head--left h2, #use-cases .section-head h2 { font-size: clamp(1.55rem, 2.85vw, 2.4rem); }
/* These headlines are meant to read as one line on desktop. */
#product .section-head, #how-it-works .section-head, #pricing .section-head { max-width: none; }
#product .section-head h2,
#how-it-works .section-head h2,
#pricing .section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
/* The sub-line stays at the original measure so it keeps its two-line rhythm. */
#pricing .section-head > p:not(.eyebrow) { max-width: 780px; margin-inline: auto; }
@media (min-width: 1120px) {
  .section-head--left h2,
  #use-cases .section-head h2,
  #product .section-head h2,
  #how-it-works .section-head h2,
  #pricing .section-head h2 { white-space: nowrap; }
}

.eyebrow {
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 800;
  color: #5561cc;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--brand);
  color: var(--white);
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 5. Header ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
}
.nav {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.18rem;
  font-weight: 850;
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.brand-mark {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  /* Same drawing as /assets/img/favicon.svg: speed lines + a document with a
     folded corner. Inline data URI, so no extra request. */
  background: #5b6cf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23745cff'/%3E%3Cstop offset='1' stop-color='%232a7ff3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='18' fill='url%28%23g%29'/%3E%3Cpath d='M16 24h7M11 32h12M18 40h5' stroke='%23fff' stroke-opacity='.6' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M32 13h11l9 9v25a4 4 0 0 1-4 4H32a4 4 0 0 1-4-4V17a4 4 0 0 1 4-4z' fill='%23fff'/%3E%3Cpath d='M43 13v6a3 3 0 0 0 3 3h6z' fill='%23c7ccff'/%3E%3Cpath d='M33 30h13M33 37h13M33 44h7' stroke='%235b5cf6' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100%;
  box-shadow: 0 7px 18px rgba(96, 92, 246, .29);
  flex-shrink: 0;
}

.nav-links { display: flex; gap: 28px; font-size: .9rem; color: #3f4860; }
.nav-links a { font-weight: 500; transition: color .18s ease; }
.nav-links a:hover { color: var(--brand); }

.nav-actions { display: flex; gap: 13px; align-items: center; font-size: .9rem; }
.nav-signin { font-weight: 600; color: var(--ink-soft); }
.nav-signin:hover { color: var(--brand); }

/* Language switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  background: var(--white);
}
.lang-switch a {
  padding: 6px 9px;
  color: var(--dim);
  transition: background-color .18s ease, color .18s ease;
}
.lang-switch a:hover { color: var(--ink); background: var(--surface); }
.lang-switch a[aria-current="true"] { background: var(--indigo-50); color: #4b4cd8; }

/* Mobile nav — <details>, works with zero JavaScript */
.mobile-nav { display: none; position: relative; }
.mobile-nav > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
}
.mobile-nav > summary::-webkit-details-marker { display: none; }
.mobile-nav > summary svg { width: 20px; height: 20px; }
.mobile-nav[open] > summary .i-menu { display: none; }
.mobile-nav .i-close { display: none; }
.mobile-nav[open] > summary .i-close { display: block; }
.mobile-nav-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(18rem, calc(100vw - 32px));
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
}
.mobile-nav-panel a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-soft);
}
/* Icon left of the label; it takes the link's colour, so it follows the
   hover state without a rule of its own. */
.mobile-nav-panel a > svg {
  flex: none;
  width: 18px; height: 18px;
  color: #9aa3bb;
}
.mobile-nav-panel a:hover { background: var(--surface); color: var(--brand); }
.mobile-nav-panel a:hover > svg { color: currentColor; }
/* Without this the panel's link colour would beat .btn-primary's white. */
.mobile-nav-panel a.btn-primary { color: var(--white); }
.mobile-nav-panel hr { border: 0; border-top: 1px solid var(--line); margin: 8px 4px; }
.mobile-nav-panel .btn { width: 100%; margin-top: 4px; }
.mobile-nav-lang { display: flex; gap: 8px; padding: 8px 12px 4px; }

/* --- 6. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 19px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 750;
  font-size: .9rem;
  line-height: 1.2;
  transition: transform .2s ease, box-shadow .2s ease,
              background-color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  color: var(--white);
  background: linear-gradient(135deg, #6172ff, var(--brand-2));
  box-shadow: 0 10px 25px rgba(89, 102, 239, .26);
}
.btn-primary:hover { box-shadow: 0 14px 32px rgba(89, 102, 239, .36); }

.btn-secondary {
  background: var(--white);
  border-color: var(--line-2);
  color: var(--ink-soft);
}
.btn-secondary:hover { border-color: #c3cbe8; }

/* --- 7. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 58px;
  /* The right half sits on a light lavender field with a soft diagonal edge,
     not a blurred blob: it keeps the grid readable behind the product shot. */
  background:
    radial-gradient(120% 90% at 92% 0%, rgba(206, 214, 255, .75) 0, rgba(206, 214, 255, 0) 55%),
    linear-gradient(112deg,
      rgba(233, 236, 255, 0) 36%,
      rgba(229, 233, 255, .85) 52%,
      rgba(219, 225, 255, 1) 100%),
    linear-gradient(var(--white), #f8faff);
}
/* On stacked layouts the field would sit behind the headline: keep a light
   tint in the top-right corner only. */
@media (max-width: 900px) {
  .hero {
    background:
      radial-gradient(90% 55% at 100% 0%, rgba(210, 217, 255, .6) 0, rgba(210, 217, 255, 0) 60%),
      linear-gradient(var(--white), #f8faff);
  }
  .hero::after, .hero-shapes { display: none; }
}

/* Translucent panels drifting behind the product shot, like the design draft:
   slightly rotated rounded rectangles, no images, no JavaScript. */
.hero-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-shapes i {
  position: absolute;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(139, 150, 225, .22);
  background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .18));
  box-shadow: 0 18px 40px rgba(60, 73, 150, .05);
}
.hero-shapes i:nth-child(1) { right: 12%; top: -4%;  width: 190px; height: 150px; transform: rotate(11deg); }
.hero-shapes i:nth-child(2) { right: -3%; top: 24%;  width: 120px; height: 250px; transform: rotate(-7deg); }
.hero-shapes i:nth-child(3) { right: 34%; top: -7%;  width: 130px; height: 96px;  transform: rotate(-13deg); }
.hero-shapes i:nth-child(4) { right: 6%;  bottom: 4%; width: 150px; height: 130px; transform: rotate(9deg); }
.hero-shapes i:nth-child(5) {
  right: 26%; bottom: -6%;
  width: 210px; height: 120px;
  transform: rotate(-5deg);
  background: linear-gradient(145deg, rgba(200, 209, 255, .38), rgba(226, 231, 255, .1));
  border-color: rgba(139, 150, 225, .16);
}

/* Faint diagonal bands over the lavender field */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .75) 57%, rgba(255, 255, 255, 0) 67%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .6) 76%, rgba(255, 255, 255, 0) 86%),
    linear-gradient(68deg, rgba(186, 196, 255, 0) 62%, rgba(186, 196, 255, .4) 82%, rgba(186, 196, 255, 0) 96%);
  pointer-events: none;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(101, 116, 186, .068) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 116, 186, .068) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0, …) on the artwork column only: its min-content is wider than
     the column it gets, and a bare 1.1fr would let it push the grid past the
     screen edge and cut the headline off. The text column keeps its
     min-content floor, so the headline breaks as before. */
  grid-template-columns: .9fr minmax(0, 1.1fr);
  align-items: center;
  gap: 52px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  padding: 6px 12px;
  border: 1px solid #dfe3f5;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #54607a;
}
.badge b { color: #23827d; }

.hero h1 {
  /* Capped well below the 5.1rem of the design draft: the German compounds
     ("pixelgenaue") and the shorter scale keep the hero above the fold. */
  font-size: clamp(2.05rem, 3.7vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.06em;
  font-weight: 800;
  margin: 23px 0 22px;
}
/* Dash and typed word stay on one line. */
.h1-tail { display: inline-block; }
@media (min-width: 900px) { .h1-tail { white-space: nowrap; } }

.hero h1 .h1-tail > span {
  /* The word types itself in, but its box is reserved from the first paint, so
     nothing around it moves (CLS stays 0). A hard-edged mask uncovers the word
     in character-sized steps; the caret rides along on that edge.
     --tw is the finished width in character units. */
  --tw: 15.3ch;
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  width: var(--tw);
  white-space: nowrap;
  overflow: hidden;
  background: linear-gradient(95deg, #4b3bff 0%, #2b6ff5 48%, #10bff2 100%) left / var(--tw) 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-mask-image: linear-gradient(90deg, #000 0 50%, rgba(0, 0, 0, 0) 50%);
  mask-image: linear-gradient(90deg, #000 0 50%, rgba(0, 0, 0, 0) 50%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  animation: hero-type 1.6s steps(15, end) .4s both;
}
html[lang="de"] .hero h1 .h1-tail > span { --tw: 13.6ch; }
.hero h1 .h1-tail > span::after {
  content: "";
  position: absolute;
  left: 0; top: .1em; bottom: .16em;
  width: .05em;
  margin-left: -.05em;
  background: #2b6ff5;
  opacity: 0;
  transform: translateX(var(--tw));
  animation: hero-caret 1.6s steps(15, end) .4s both,
             hero-blink .8s steps(1, end) .4s 5 both;
}
@keyframes hero-type {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
@keyframes hero-caret {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--tw)); }
}
@keyframes hero-blink {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .h1-tail > span, .hero h1 .h1-tail > span::after { animation: none; }
}

.hero-lede {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 570px;
  margin: 0 0 28px;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 16px 0 0;
  color: #656f8a;
  font-size: .78rem;
}
.hero-note li { display: flex; align-items: center; gap: 5px; }
.hero-note li::before { content: "✓"; color: #4c65ee; font-weight: 800; }

/* --- 8. Hero animation ---------------------------------------------------
   A 12-second story in three acts: design a template → send JSON → get the
   file back. Pure CSS: only transform and opacity animate, so everything runs
   on the compositor (no layout shift, no main-thread work, works without JS).

   Geometry is authored on a 56 × 49 grid. The stage sets 1em = 1/56 of its
   container's width, so the whole scene scales as one piece at any size.

   Base styles describe the FINAL frame (act 3, outputs visible). That frame is
   what prefers-reduced-motion users get; the keyframes animate from there.  */

.ha-wrap { container-type: inline-size; width: 100%; max-width: 640px; justify-self: center; }
.ha {
  --t: 12s;
  position: relative;
  aspect-ratio: 56 / 49;
  font-size: 10px;                 /* fallback without container queries */
  font-size: calc(100cqw / 56);
  line-height: 1.3;
}
/* No blurred glow behind the animation: the hero's lavender field does the job. */
.ha-glow { display: none; }

/* Scenes ------------------------------------------------------------------ */
.ha-sc { position: absolute; inset: 0 0 10em 0; }
.ha-sc1, .ha-cap1 { opacity: 0; animation: ha-sc1 var(--t) ease-in-out infinite both; }
.ha-sc2, .ha-cap2 { opacity: 0; animation: ha-sc2 var(--t) ease-in-out infinite both; }
.ha-sc3, .ha-cap3 {             animation: ha-sc3 var(--t) ease-in-out infinite both; }

@keyframes ha-sc1 {
  0%, 29%       { opacity: 1; transform: none; }
  31%           { opacity: 0; transform: translateY(-1em); }
  31.1%, 97.5%  { opacity: 0; transform: translateY(1em); }
  100%          { opacity: 1; transform: none; }
}
@keyframes ha-sc2 {
  0%, 31%       { opacity: 0; transform: translateY(1em); }
  33%, 62%      { opacity: 1; transform: none; }
  64%           { opacity: 0; transform: translateY(-1em); }
  64.1%, 100%   { opacity: 0; transform: translateY(1em); }
}
@keyframes ha-sc3 {
  0%, 64%       { opacity: 0; transform: translateY(1em); }
  66%, 95%      { opacity: 1; transform: none; }
  97.5%         { opacity: 0; transform: translateY(-1em); }
  97.6%, 100%   { opacity: 0; transform: translateY(1em); }
}

/* Act 1 · template editor ---------------------------------------------------- */
.ha-win {
  position: absolute; left: 2em; top: 2em; width: 52em; height: 34em;
  background: #f5f7fd;
  border: 1px solid #dbe1f3;
  border-radius: 1.6em;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ha-chrome {
  display: flex; gap: .6em; align-items: center;
  height: 3.4em; padding: 0 1.6em;
  background: var(--white);
  border-bottom: 1px solid #e8ebf5;
}
.ha-chrome i { width: .9em; height: .9em; border-radius: 50%; background: #dfe4f4; }

.ha-tile {
  position: absolute; left: 1.6em; width: 6.4em; height: 5.6em;
  display: grid; place-items: center; align-content: center; gap: .3em;
  background: var(--white);
  border: 1px solid #e3e8f6;
  border-radius: 1em;
  color: #5b62eb;
}
.ha-tile1 { top: 5em; }
.ha-tile2 { top: 11.6em; }
.ha-tile3 { top: 18.2em; }
.ha-tile svg { width: 2.2em; height: 2.2em; position: relative; }
.ha-tile span { position: relative; font-size: .78em; font-weight: 800; letter-spacing: .06em; color: #56617a; }
.ha-tile b {                       /* "picked" highlight */
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: #e5e8ff;
  box-shadow: 0 0 0 .2em #5b5cf6 inset;
  opacity: 0;
}
.ha-tile1 b { animation: ha-tile1 var(--t) ease-in-out infinite both; }
.ha-tile2 b { animation: ha-tile2 var(--t) ease-in-out infinite both; }
.ha-tile3 b { animation: ha-tile3 var(--t) ease-in-out infinite both; }
@keyframes ha-tile1 { 0%, 1.5% { opacity: 0; } 2.5%, 4% { opacity: 1; } 6%, 100% { opacity: 0; } }
@keyframes ha-tile2 { 0%, 9% { opacity: 0; } 10%, 11.5% { opacity: 1; } 13.5%, 100% { opacity: 0; } }
@keyframes ha-tile3 { 0%, 16.5% { opacity: 0; } 17.5%, 19% { opacity: 1; } 21%, 100% { opacity: 0; } }

.ha-page {
  position: absolute; left: 10em; top: 5em; width: 40em; height: 27em;
  background: var(--white);
  border: 1px solid #e8ebf5;
  border-radius: .8em;
  box-shadow: 0 1em 2.4em rgba(23, 45, 89, .06);
}
.ha-page i { position: absolute; left: 3em; height: .5em; border-radius: 1em; background: #e8ebf5; }
.ha-page i:nth-child(1) { top: 2.2em; width: 9em; }
.ha-page i:nth-child(2) { top: 3.4em; width: 6em; }
.ha-page i:nth-child(3) { bottom: 2em; width: 11em; }

/* Elements dragged from the toolbar onto the page */
.ha-drop { position: absolute; transform-origin: 0 0; }
.ha-dropA {
  left: 15em; top: 11em; height: 3.2em; padding: 0 1.2em;
  display: grid; place-items: center;
  background: #eef1ff;
  border: .15em dashed #7c83f6;
  border-radius: .7em;
  animation: ha-dropA var(--t) ease-in-out infinite both;
}
.ha-dropA span { font: 700 1.2em/1 var(--mono); color: #4a4ed0; white-space: nowrap; }
.ha-dropB {
  left: 15em; top: 17em; width: 34em; height: 10.5em;
  border: 1px solid #e8ebf5; border-radius: .6em; overflow: hidden;
  background: var(--white);
  animation: ha-dropB var(--t) ease-in-out infinite both;
}
.ha-dropB b { display: block; height: 2.4em; background: #111b35; }
.ha-dropB i { display: block; height: 2.7em; border-bottom: 1px solid #eef0f6; position: relative; }
.ha-dropB i::before, .ha-dropB i::after {
  content: ""; position: absolute; top: 1.1em; height: .5em; border-radius: 1em; background: #e3e7f3;
}
.ha-dropB i::before { left: 1.4em; width: 12em; }
.ha-dropB i::after  { right: 1.4em; width: 5em; }
.ha-dropC {
  left: 38.5em; top: 9.5em; width: 11em; height: 6em;
  border-radius: .7em;
  background: linear-gradient(135deg, #dae4ff, #8897e9);
  animation: ha-dropC var(--t) ease-in-out infinite both;
}
@keyframes ha-dropA {
  0%, 2.5%    { opacity: 0; transform: translate(-10.2em, -2.7em) scale(.5); }
  3.0%      { opacity: 1; transform: translate(-10.2em, -2.7em) scale(.5); }
  7%, 50%   { opacity: 1; transform: none; }
  51%, 100% { opacity: 0; transform: translate(-10.2em, -2.7em) scale(.5); }
}
@keyframes ha-dropB {
  0%, 10% { opacity: 0; transform: translate(-10.2em, -2.1em) scale(.3); }
  10.5%       { opacity: 1; transform: translate(-10.2em, -2.1em) scale(.3); }
  14.5%, 50% { opacity: 1; transform: none; }
  51%, 100% { opacity: 0; transform: translate(-10.2em, -2.1em) scale(.3); }
}
@keyframes ha-dropC {
  0%, 17.5%   { opacity: 0; transform: translate(-33.7em, 12em) scale(.5); }
  18.0%     { opacity: 1; transform: translate(-33.7em, 12em) scale(.5); }
  22%, 50%  { opacity: 1; transform: none; }
  51%, 100% { opacity: 0; transform: translate(-33.7em, 12em) scale(.5); }
}

.ha-cursor {
  position: absolute; left: -.2em; top: -.15em;
  width: 2.2em; height: 2.64em;
  transform-origin: 0 0;
  transform: translate(48em, 30em);
  filter: drop-shadow(0 .3em .5em rgba(17, 27, 53, .25));
  animation: ha-cursor var(--t) ease-in-out infinite both;
}
@keyframes ha-cursor {
  0%        { transform: translate(48em, 30em); }
  1.8%      { transform: translate(6.8em, 9.8em); }
  2.5%      { transform: translate(6.8em, 9.8em) scale(.85); }
  7%        { transform: translate(17em, 12.5em) scale(.85); }
  7.8%      { transform: translate(17em, 12.5em); }
  9.3%      { transform: translate(6.8em, 16.4em); }
  10%       { transform: translate(6.8em, 16.4em) scale(.85); }
  14.5%     { transform: translate(17em, 18.5em) scale(.85); }
  15.3%     { transform: translate(17em, 18.5em); }
  16.8%     { transform: translate(6.8em, 23em); }
  17.5%     { transform: translate(6.8em, 23em) scale(.85); }
  22%       { transform: translate(40.5em, 11em) scale(.85); }
  23%       { transform: translate(40.5em, 11em); }
  27%, 100% { transform: translate(48em, 30em); }
}

/* Act 2 · send JSON ------------------------------------------------------------ */
.ha-code {
  position: absolute; left: 3em; top: 2.5em; width: 33em; height: 33.5em;
  background: #0d1a31;
  border: 1px solid #1f3152;
  border-radius: 1.6em;
  box-shadow: var(--shadow);
  color: #bbcae5;
  overflow: hidden;
}
.ha-code-head {
  display: flex; align-items: center; gap: .5em;
  height: 4.4em; padding: 0 1.8em;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font: 600 1.25em/1 var(--mono);
}
.ha-code-head i { width: .7em; height: .7em; border-radius: 50%; background: #4ade80; margin-right: .3em; }
.ha-code-head .m { color: #ee8ee1; }
.ha-code-head em {
  margin-left: auto; font: 800 .75em/1 var(--font); letter-spacing: .06em; font-style: normal;
  padding: .45em .8em; border-radius: 99px; background: #4a4ed0; color: var(--white);
}
.ha-json { padding: 1.4em 0 0 1.5em; font: 500 1.3em/1.75 var(--mono); white-space: pre; }
.ha-json span { display: block; animation: ha-line var(--t) ease-out infinite both; }
.ha-json span:nth-child(2) { animation-delay: .15s; }
.ha-json span:nth-child(3) { animation-delay: .3s; }
.ha-json span:nth-child(4) { animation-delay: .45s; }
.ha-json span:nth-child(5) { animation-delay: .6s; }
.ha-json span:nth-child(6) { animation-delay: .75s; }
.ha-json span:nth-child(7) { animation-delay: .9s; }
.ha-json span:nth-child(8) { animation-delay: 1.05s; }
.ha-json span span { display: inline; animation: none; }
.ha-json .k { color: #f6d481; }
.ha-json .s { color: #7adcf8; }
.ha-json .n { color: #ffb86b; }
@keyframes ha-line {
  0%, 33.5% { opacity: 0; transform: translateX(-.6em); }
  35%, 80%  { opacity: 1; transform: none; }
  81%, 100% { opacity: 0; transform: translateX(-.6em); }
}

.ha-code-foot {
  position: absolute; left: 1.8em; right: 1.8em; bottom: 1.8em; height: 3.6em;
  display: flex; align-items: center;
}
.ha-btn {
  padding: .75em 1.5em; border-radius: .7em;
  background: #4a4ed0; color: var(--white);
  font-size: 1.2em; font-weight: 700;
  animation: ha-btn var(--t) ease-in-out infinite both;
}
@keyframes ha-btn { 0%, 44% { transform: none; } 45.5% { transform: scale(.9); } 47%, 100% { transform: none; } }
.ha-st { position: absolute; right: 0; font: 600 1.15em/1 var(--mono); display: flex; align-items: center; gap: .5em; }
.ha-st1 { color: #bbcae5; opacity: 0; animation: ha-st1 var(--t) ease-in-out infinite both; }
.ha-st2 { color: #6ee7a8; animation: ha-st2 var(--t) ease-in-out infinite both; }
.ha-st2 i { width: .6em; height: .6em; border-radius: 50%; background: #4ade80; }
@keyframes ha-st1 { 0%, 44.5% { opacity: 0; } 46%, 54.5% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes ha-st2 {
  0%, 55%   { opacity: 0; transform: translateY(.4em); }
  57%, 90%  { opacity: 1; transform: none; }
  91%, 100% { opacity: 0; transform: translateY(.4em); }
}

.ha-flow {
  position: absolute; left: 36em; top: 19.2em; width: 7.5em;
  border-top: .22em dashed #9aa6d6;
}
.ha-packet {
  position: absolute; left: -.7em; top: -.82em;
  width: 1.4em; height: 1.4em; border-radius: 50%;
  background: #5b5cf6;
  box-shadow: 0 0 0 .35em rgba(91, 92, 246, .2), 0 0 1.4em #5b5cf6;
  opacity: 0;
  animation: ha-packet var(--t) ease-in-out infinite both;
}
@keyframes ha-packet {
  0%, 46.5% { opacity: 0; transform: translateX(0); }
  47.5%     { opacity: 1; transform: translateX(0); }
  53%       { opacity: 1; transform: translateX(7.5em); }
  54%, 100% { opacity: 0; transform: translateX(7.5em); }
}

.ha-engine {
  position: absolute; left: 43.5em; top: 14.8em; width: 9em; height: 9em;
  display: grid; place-items: center;
  border-radius: 2.4em;
  background: linear-gradient(145deg, #745cff, #2a7ff3);
  box-shadow: 0 1.4em 3em rgba(96, 92, 246, .35);
  animation: ha-engine var(--t) ease-in-out infinite both;
}
.ha-engine span { grid-area: 1 / 1; width: 4.2em; height: 2.7em; border-radius: .7em; }
.ha-engine span:nth-of-type(1) { background: rgba(255, 255, 255, .45); transform: translate(-.75em, .75em); }
.ha-engine span:nth-of-type(2) { background: var(--white); transform: translate(.75em, -.75em); }
.ha-engine b {
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 .35em #7c83f6;
  opacity: 0;
  animation: ha-ring var(--t) ease-out infinite both;
}
@keyframes ha-engine { 0%, 52.5% { transform: none; } 54% { transform: scale(1.08); } 56%, 100% { transform: none; } }
@keyframes ha-ring {
  0%, 53%   { opacity: 0; transform: scale(1); }
  54%       { opacity: .6; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(1.7); }
}

/* Act 3 · the finished files ---------------------------------------------------- */
.ha-doc {
  position: absolute; left: 3.2em; top: 1em; width: 31em; height: 37em;
  padding: 2.2em 2.2em 7.4em;   /* bottom strip: QR, stamp, footer */
  background: var(--white);
  border: 1px solid #e3e8f6;
  border-radius: 1.4em;
  box-shadow: var(--shadow);
  animation: ha-doc var(--t) ease-out infinite both;
}
.ha-doc p { margin: 0; }
.ha-doc-top { display: flex; justify-content: space-between; align-items: center; }
.ha-doc-top strong { font-size: 2em; font-weight: 800; letter-spacing: -.03em; }
.ha-logo { width: 2.6em; height: 2.6em; border-radius: 50%; border: .5em solid #7885f9; }
.ha-doc-meta { font-size: .95em; color: #7b849c; margin: .3em 0 1em !important; }

/* Who to and from */
.ha-parties { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1em; margin-bottom: 1em; }
.ha-doc-lbl { font-size: .8em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8b93ab; }
.ha-doc-cust { font-size: 1.15em; font-weight: 700; margin: .25em 0 .15em !important; color: var(--ink); }
.ha-addr { font-size: .92em; line-height: 1.5; color: #7b849c; }

/* Line items */
.ha-thead {
  display: grid; grid-template-columns: 1fr 3.2em 6em;
  padding-bottom: .5em;
  border-bottom: 1.5px solid #e6eaf6;
  font-size: .8em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b93ab;
}
.ha-thead span:nth-child(2) { text-align: center; }
.ha-thead span:last-child { text-align: right; }
.ha-row {
  display: grid; grid-template-columns: 1fr 3.2em 6em;
  padding: .48em 0;
  border-bottom: 1px solid #f0f2f9;
  font-size: 1.02em; color: #56617a;
  animation: ha-row var(--t) ease-out infinite both;
}
.ha-row span:nth-child(2) { text-align: center; }
.ha-row span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.ha-row2 { animation-delay: .12s; }
.ha-row3 { animation-delay: .24s; }

/* Totals */
.ha-sum {
  display: flex; justify-content: space-between;
  padding: .28em 0 .28em 40%;
  font-size: .95em; color: #7b849c;
  animation: ha-row var(--t) ease-out infinite both;
}
.ha-sum span:last-child { font-variant-numeric: tabular-nums; color: #56617a; }
.ha-sum1 { animation-delay: .36s; padding-top: .7em; }
.ha-sum2 { animation-delay: .44s; }
.ha-total {
  display: flex; justify-content: space-between;
  grid-template-columns: none;
  animation-delay: .52s;
  margin-top: .3em;
  padding: .6em .9em;
  border: 0;
  border-radius: .7em;
  background: var(--indigo-50);
  color: var(--ink); font-weight: 800; font-size: 1.15em;
}
@keyframes ha-row {
  0%, 69%   { opacity: 0; transform: translateX(-.8em); }
  71%, 100% { opacity: 1; transform: none; }
}
@keyframes ha-doc {
  0%, 65%     { opacity: 0; transform: translateY(2em); }
  69.5%, 100% { opacity: 1; transform: none; }
}

/* Paid stamp, QR code and footer */
.ha-stamp {
  position: absolute; left: 7.8em; bottom: 1.9em;
  padding: .3em .75em;
  border: .22em solid #18a07a;
  border-radius: .5em;
  color: #18a07a;
  font: 800 1.1em/1 var(--font); letter-spacing: .12em;
  transform: rotate(-9deg);
  opacity: .9;
  animation: ha-stamp var(--t) ease-out infinite both;
}
@keyframes ha-stamp {
  0%, 78%     { opacity: 0; transform: rotate(-9deg) scale(1.5); }
  81.5%, 100% { opacity: .9; transform: rotate(-9deg) scale(1); }
}
.ha-qr {
  position: absolute; left: 2.2em; bottom: 2em;
  width: 4.4em; height: 4.4em;
  border-radius: .3em;
  background:
    /* three finder patterns */
    linear-gradient(#111b35, #111b35) 0 0 / 1.5em .42em no-repeat,
    linear-gradient(#111b35, #111b35) 0 0 / .42em 1.5em no-repeat,
    linear-gradient(#111b35, #111b35) 100% 0 / 1.5em .42em no-repeat,
    linear-gradient(#111b35, #111b35) 100% 0 / .42em 1.5em no-repeat,
    linear-gradient(#111b35, #111b35) 0 100% / 1.5em .42em no-repeat,
    linear-gradient(#111b35, #111b35) 0 100% / .42em 1.5em no-repeat,
    /* data cells */
    repeating-conic-gradient(#111b35 0 25%, #fff 0 50%) 0 0 / .62em .62em;
  box-shadow: 0 0 0 .3em #fff;
}
.ha-doc-foot { position: absolute; left: 7.9em; bottom: 4.9em; font-size: .85em; line-height: 1.4; color: #8b93ab; max-width: 11em; }
.ha-fmt {
  position: absolute; top: -1.1em; right: 2em;
  padding: .5em .9em; border-radius: 99px;
  background: #4a4ed0; color: var(--white);
  font: 800 1em/1 var(--font); letter-spacing: .08em;
  box-shadow: 0 .6em 1.4em rgba(74, 78, 208, .3);
}

/* The image output: a designed poster, drawn in CSS */
.ha-img {
  position: absolute; left: 33.5em; top: 13.5em; width: 20em; height: 21.5em;
  padding: 1.8em;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 1.6em;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(90% 70% at 15% 10%, rgba(120, 90, 255, .95) 0, rgba(120, 90, 255, 0) 60%),
    radial-gradient(70% 60% at 95% 30%, rgba(0, 200, 255, .55) 0, rgba(0, 200, 255, 0) 70%),
    linear-gradient(155deg, #2b1f6b 0%, #4b3fd6 45%, #1d63d8 100%);
  color: var(--white);
  box-shadow: 0 2em 3.6em rgba(41, 54, 123, .35), inset 0 0 0 1px rgba(255, 255, 255, .18);
  transform: rotate(-3deg);
  animation: ha-img var(--t) ease-out infinite both;
}
/* Abstract artwork behind the text */
.ha-art { position: absolute; inset: 0; z-index: -1; }
.ha-art i { position: absolute; display: block; border-radius: 50%; }
.ha-art i:nth-child(1) {
  right: -3em; top: -3em; width: 14em; height: 14em;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 65%);
}
.ha-art i:nth-child(2) {
  left: -2.5em; bottom: 3em; width: 11em; height: 11em;
  background: radial-gradient(circle at 50% 50%, rgba(0, 231, 255, .5), rgba(0, 231, 255, 0) 68%);
}
.ha-art i:nth-child(3) {
  right: 2.4em; top: 4.2em; width: 6.4em; height: 6.4em;
  border-radius: 1.4em;
  border: .28em solid rgba(255, 255, 255, .35);
  transform: rotate(18deg);
}
.ha-art i:nth-child(4) {
  left: -4em; bottom: -6em; right: -4em; height: 12em;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}
.ha-img-brand {
  position: absolute; left: 1.8em; top: 1.6em;
  font: 800 .95em/1 var(--font); letter-spacing: .28em;
  color: rgba(255, 255, 255, .85);
}
.ha-img-size {
  position: absolute; right: 1.6em; bottom: 1.5em;
  font: 700 .82em/1 var(--font); letter-spacing: .06em;
  color: rgba(255, 255, 255, .65);
}
.ha-img small { font-size: 1em; font-weight: 800; letter-spacing: .16em; color: rgba(255, 255, 255, .85); }
.ha-img b { font-size: 3.1em; line-height: .98; letter-spacing: -.035em; margin: .12em 0 .5em; }
.ha-img-cta {
  align-self: flex-start;
  padding: .7em 1.1em;
  border-radius: 99px;
  background: rgba(255, 255, 255, .95);
  color: #2b1f6b;
  font: 800 .95em/1 var(--font);
}
@keyframes ha-img {
  0%, 72%     { opacity: 0; transform: translate(2em, 1.5em) rotate(6deg); }
  76.5%, 100% { opacity: 1; transform: rotate(-3deg); }
}

.ha-check {
  position: absolute; left: 28.8em; top: 31em; width: 5.4em; height: 5.4em;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #22c38e;
  box-shadow: 0 0 0 .5em rgba(34, 195, 142, .18), 0 1em 2em rgba(34, 195, 142, .35);
  animation: ha-check var(--t) ease-out infinite both;
}
.ha-check svg { width: 3em; height: 3em; }
@keyframes ha-check {
  0%, 77%     { opacity: 0; transform: scale(.3); }
  79%         { opacity: 1; transform: scale(1.15); }
  80.5%, 100% { opacity: 1; transform: scale(1); }
}

/* Stepper ------------------------------------------------------------------------ */
.ha-steps { position: absolute; left: 0; right: 0; top: 39.5em; height: 9.5em; }
.ha-cap {
  position: absolute; inset: 0 0 auto;
  margin: 0; text-align: center;
  font-size: 1.65em; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.ha-cap b { color: #4a4ed0; margin-right: .35em; }
.ha-track {
  position: absolute; left: 11em; right: 11em; top: 5em; height: .35em;
  border-radius: 1em; background: #dfe4f4; overflow: hidden;
}
.ha-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #5b5cf6, #2a7ff3);
  transform-origin: 0 50%;
  animation: ha-fill var(--t) ease-in-out infinite both;
}
@keyframes ha-fill {
  0%, 29%   { transform: scaleX(0); }
  33%, 62%  { transform: scaleX(.5); }
  66%, 95%  { transform: scaleX(1); }
  99%, 100% { transform: scaleX(0); }
}
.ha-node {
  position: absolute; top: 4.07em; width: 2.2em; height: 2.2em;
  border-radius: 50%;
  background: var(--white);
  border: .25em solid #cfd6ee;
}
.ha-node1 { left: 9.9em; }
.ha-node2 { left: 26.9em; }
.ha-node3 { left: 43.9em; }
.ha-node i {
  position: absolute; inset: -.25em;
  border-radius: 50%;
  background: #5b5cf6;
  box-shadow: 0 0 0 .35em rgba(91, 92, 246, .18), inset 0 0 0 .55em #5b5cf6, inset 0 0 0 2em var(--white);
}
.ha-node2 i { animation: ha-n2 var(--t) ease-in-out infinite both; }
.ha-node3 i { animation: ha-n3 var(--t) ease-in-out infinite both; }
@keyframes ha-n2 { 0%, 31% { opacity: 0; } 33%, 95% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes ha-n3 { 0%, 64% { opacity: 0; } 66%, 95% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
.ha-node em {
  position: absolute; top: 2.9em; left: 50%;
  transform: translateX(-50%);
  font-style: normal; font-size: 1.15em; font-weight: 600;
  color: #56617a; white-space: nowrap;
}

/* Narrow stages: the scene scales down as a whole, but the step captions are
   the one part people actually read — keep them legible on phones. */
@container (max-width: 480px) {
  .ha-cap { font-size: 2.15em; }
  .ha-node em { font-size: 1.6em; top: 2.2em; }
}

@media (prefers-reduced-motion: reduce) {
  .ha, .ha * { animation: none !important; }
}

/* --- 9. Trust band: six facts as cards ----------------------------------- */
/* The band sits on the hero background, so it brings no background of its own. */
.trust {
  position: relative;
  z-index: 1;
  padding: 46px 0 0;
}
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trust-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 19px;
  border: 1px solid rgba(214, 221, 246, .9);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 10px 26px rgba(40, 53, 95, .07);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.trust-card:hover { border-color: #c9d1f0; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(40, 53, 95, .1); }
.trust-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #3b3fd8;   /* plain indigo glyph, like the design draft: no tinted tile */
}
.trust-text { display: block; min-width: 0; }
.trust-text b { display: block; font-size: 1.02rem; letter-spacing: -.02em; }
.trust-text span { font-size: .78rem; color: var(--muted); }

/* Four across as long as they stay readable, then two, then one. */
@media (max-width: 860px) { .trust-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-row { grid-template-columns: 1fr; } }
@media (max-width: 1080px) and (min-width: 861px) {
  .trust-card { gap: 10px; padding: 15px 14px; }
  .trust-text b { font-size: .95rem; }
  .trust-text span { font-size: .74rem; }
}

.icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--indigo-50);
  color: #5b62eb;
  display: grid;
  place-items: center;
  margin-inline: auto;
  flex-shrink: 0;
}
.icon svg { width: 18px; height: 18px; }
.icon--left { margin-inline: 0; }

/* --- 10. Feature cards --------------------------------------------------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.feature-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 28px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-card h3 { font-size: 1.08rem; margin: 12px 0 6px; letter-spacing: -.02em; }
.feature-card p { font-size: .88rem; color: var(--muted); margin: 0 0 22px; }

.mini-art {
  height: 190px;
  border-radius: 11px;
  background: linear-gradient(145deg, #f6f8ff, #e9edff);
  padding: 16px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  overflow: hidden;
}
.editor { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 8px; width: 100%; height: 145px; }
.toolbar, .canvas { border-radius: 7px; }
.toolbar { position: relative; background: #0f1d34; padding: 10px; }
.toolbar i { position: relative; display: block; height: 5px; background: rgba(120, 132, 154, .3); margin: 7px 0; border-radius: 3px; }
.canvas { background: var(--white); padding: 13px; }

/* --- 10b. Animated feature cards -------------------------------------------
   Each card shows what it promises: documents fanning out, three campaign
   images, and a template being filled in an editor. Pure CSS, only transform
   and opacity animate, and the base styles are the final frame (what
   prefers-reduced-motion users see). Sizes scale with the card: 1em is 1/33
   of the artwork width.                                                     */
.mini-art.ma {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 33 / 25;
  margin-top: 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, #f6f7ff, #eef1fb);
  border: 1px solid #e8ebf8;
  overflow: hidden;
}
/* An element cannot query its own size, so the scale lives on the children:
   1em is 1/33 of the artwork width. */
.ma > * {
  font-size: 10px;                 /* fallback without container queries */
  font-size: calc(100cqw / 33);
}

/* Chip in the bottom-left corner of every artwork */
.ma-chip {
  position: absolute;
  z-index: 3;
  left: 1.4em; bottom: 1.4em;
  display: flex; align-items: center; gap: .7em;
  margin: 0;
  padding: .7em .9em;
  border-radius: .9em;
  background: var(--white);
  box-shadow: 0 .8em 1.8em rgba(40, 53, 95, .12);
  animation: ma-chip var(--mt) infinite both;
}
.ma-chip-ic {
  width: 2.4em; height: 2.4em;
  border-radius: .6em;
  display: grid; place-items: center;
  font: 800 .78em/1 var(--font);
  color: #fff;
}
.ma-chip .c-pdf { background: linear-gradient(140deg, #ff6a5e, #e0374b); }
.ma-chip .c-png { background: linear-gradient(140deg, #4aa8ff, #2f6ff0); }
.ma-chip .c-tpl { background: linear-gradient(140deg, #7b6bff, #4751e9); }
.ma-chip b { display: block; font: 800 1em/1.2 var(--font); color: var(--ink); }
.ma-chip span span { font: .85em/1.2 var(--font); color: var(--muted); }
@keyframes ma-chip {
  0%, 62%   { opacity: 0; transform: translateY(.6em); }
  70%, 94%  { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: translateY(.6em); }
}

/* Card 1: contract, invoice and report fanning out --------------------- */
.ma-pdf { --mt: 9s; }
.ma-doc {
  position: absolute;
  width: 12.5em; height: 15.5em;
  padding: 1em;
  border-radius: .8em;
  background: var(--white);
  border: 1px solid #e6eaf7;
  box-shadow: 0 1em 2.2em rgba(40, 53, 95, .1);
  animation: ma-doc var(--mt) infinite both;
}
.ma-doc b { display: block; font: 800 1.15em/1.2 var(--font); color: var(--ink); letter-spacing: -.02em; }
.ma-doc i { display: block; height: .5em; border-radius: .25em; background: #e9ecf8; margin-top: .85em; }
.ma-doc i:nth-of-type(2) { width: 85%; }
.ma-doc i:nth-of-type(3) { width: 70%; }
.ma-doc i:nth-of-type(4) { width: 78%; }
.ma-doc-l { left: .6em;  top: 4.6em; transform: rotate(-8deg); animation-delay: .1s; }
.ma-doc-r { right: .6em; top: 4.6em; transform: rotate(8deg);  animation-delay: .25s; }
.ma-doc-c {
  left: 50%; top: 2.4em;
  width: 14.5em; height: 18.5em;
  margin-left: -7.25em;
  z-index: 2;
  animation-delay: .4s;
}
.ma-doc-c b { font-size: 1.45em; }
.ma-meta { display: flex; gap: .5em; margin-top: .7em; }
.ma-meta i { height: .45em; width: 3.6em; border-radius: .25em; background: #eceffb; margin: 0; }
.ma-line {
  display: flex; justify-content: space-between; align-items: center; gap: .8em;
  margin-top: .9em;
  padding-bottom: .55em;
  border-bottom: 1px solid #f1f3fa;
}
.ma-line i { height: .5em; border-radius: .25em; background: #e9ecf8; margin: 0; transform-origin: left; animation: ma-fill var(--mt) infinite both; }
.ma-line i:first-child { flex: 1; }
.ma-line i:last-child { width: 3em; background: #d9def4; }
.ma-line:nth-of-type(2) i { animation-delay: .1s; }
.ma-line:nth-of-type(3) i { animation-delay: .2s; }
.ma-line:nth-of-type(4) i { animation-delay: .3s; }
.ma-tot { display: flex; justify-content: space-between; margin-top: 1.1em; }
.ma-tot i { height: .7em; border-radius: .3em; margin: 0; }
.ma-tot i:first-child { width: 4.4em; background: #cdd3f6; }
.ma-tot i:last-child { width: 5.2em; background: #4751e9; }
@keyframes ma-doc {
  0%, 12%   { opacity: 0; transform: translateY(1.6em) rotate(0deg); }
  26%, 94%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}
.ma-doc-l { animation-name: ma-doc-l; }
.ma-doc-r { animation-name: ma-doc-r; }
@keyframes ma-doc-l {
  0%, 6%    { opacity: 0; transform: translate(3em, 1.4em) rotate(0deg); }
  20%, 94%  { opacity: 1; transform: rotate(-8deg); }
  98%, 100% { opacity: 0; transform: rotate(-8deg); }
}
@keyframes ma-doc-r {
  0%, 12%   { opacity: 0; transform: translate(-3em, 1.4em) rotate(0deg); }
  26%, 94%  { opacity: 1; transform: rotate(8deg); }
  98%, 100% { opacity: 0; transform: rotate(8deg); }
}
@keyframes ma-fill {
  0%, 34%   { transform: scaleX(0); }
  46%, 100% { transform: scaleX(1); }
}

/* Card 2: three campaign images --------------------------------------- */
.ma-img { --mt: 10s; }
.ma-poster {
  position: absolute;
  /* Prozent statt em: so bleiben die Abstände links und rechts bei jeder
     Kartenbreite gleich; die Höhe folgt dem Seitenverhältnis der Bilder. */
  top: 0; bottom: 0;
  margin-block: auto;          /* senkrecht mittig, egal wie hoch die Karte ist */
  width: 31.8%;
  aspect-ratio: 240 / 373;
  border-radius: .9em;
  overflow: hidden;
  box-shadow: 0 1em 2.2em rgba(40, 53, 95, .18);
  animation: ma-poster var(--mt) infinite both;
}
.ma-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ma-poster::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: ma-shine var(--mt) infinite both;
}
.ma-po1 { left: .9%; }
.ma-po2 { left: 34.1%; animation-delay: .18s; }
.ma-po3 { left: 67.3%; animation-delay: .36s; }
.ma-po2::after { animation-delay: .5s; }
.ma-po3::after { animation-delay: 1s; }
@keyframes ma-poster {
  0%, 10%   { opacity: 0; transform: translateY(1.2em) scale(.94); }
  24%, 94%  { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: translateY(1.2em) scale(.94); }
}
@keyframes ma-shine {
  0%, 30%   { transform: translateX(-120%); }
  46%, 100% { transform: translateX(120%); }
}

/* Card 3: the visual editor ------------------------------------------- */
.ma-tpl { --mt: 8s; }
.ma-editor {
  position: absolute;
  left: 1.4em; right: 1.4em; top: 1.2em;
  height: 16.4em;
  display: flex;
  border-radius: .9em;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #e6eaf7;
  box-shadow: 0 1em 2.2em rgba(40, 53, 95, .1);
}
.ma-side {
  width: 9.4em;
  padding: .9em .8em;
  background: var(--night-2);
  color: #9db0cf;
  font: .85em/1 var(--font);
}
.ma-side small { display: block; font: 800 .85em/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #93a6c8; margin-bottom: .9em; }
.ma-side span {
  display: block;
  padding: .5em .55em;
  margin-bottom: .25em;
  border-radius: .45em;
  background: rgba(255, 255, 255, .05);
}
.ma-side span:nth-child(2) { color: #fff; background: rgba(97, 114, 255, .28); }
.ma-canvas { position: relative; flex: 1; padding: .9em 1em; }
.ma-brand { display: flex; align-items: center; gap: .5em; margin: 0 0 .8em; font: 700 .9em/1 var(--font); color: var(--muted); }
.ma-brand i { width: 1.4em; height: 1.4em; border-radius: .35em; background: linear-gradient(145deg, #745cff, #2a7ff3); }
.ma-hello {
  position: relative;
  margin: 0 0 .8em;
  padding: .45em .55em;
  border: 1px dashed #b9c1ef;
  border-radius: .45em;
  font: 800 1.15em/1.25 var(--font);
  color: var(--ink);
  animation: ma-select var(--mt) infinite both;
}
.ma-var { position: relative; display: inline-block; min-width: 9.4em; color: #3a3fc4; }
/* One name at a time: step-end switching, so two never overlap and the text
   never sits at a half-faded (low-contrast) opacity. */
.ma-var span { position: absolute; left: 0; top: 0; white-space: nowrap; animation-duration: var(--mt); animation-timing-function: step-end; animation-iteration-count: infinite; animation-fill-mode: both; }
.ma-v0 { position: relative !important; animation-name: ma-n0; }
.ma-v1 { animation-name: ma-n1; }
.ma-v2 { animation-name: ma-n2; }
.ma-v3 { animation-name: ma-n3; }
@keyframes ma-n0 { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes ma-n1 { 0% { opacity: 0; } 25% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ma-n2 { 0% { opacity: 0; } 50% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes ma-n3 { 0% { opacity: 0; } 75% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes ma-select {
  0%, 22%   { border-color: transparent; }
  26%, 100% { border-color: #b9c1ef; }
}
.ma-photo {
  position: relative;
  height: 5.6em;
  border-radius: .5em;
  overflow: hidden;
  background: linear-gradient(180deg, #cfe0ff, #eaf1ff 55%, #f7faff);
}
.ma-photo i { position: absolute; bottom: 0; display: block; }
.ma-photo i:first-child {
  left: -1em; width: 12em; height: 4.6em;
  background: linear-gradient(150deg, #6e83d8, #41579f);
  clip-path: polygon(0 100%, 42% 0, 100% 100%);
}
.ma-photo i:last-child {
  right: -1em; width: 10em; height: 3.4em;
  background: linear-gradient(150deg, #9fb0e8, #6376bb);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.ma-cursor {
  position: absolute;
  left: 6.5em; top: 3.4em;
  width: .9em; height: 1.3em;
  background: var(--ink);
  clip-path: polygon(0 0, 0 100%, 28% 74%, 52% 100%, 68% 88%, 44% 62%, 100% 58%);
  animation: ma-cursor var(--mt) infinite both;
}
@keyframes ma-cursor {
  0%       { transform: translate(4em, 5em); }
  20%, 34% { transform: none; }
  60%      { transform: translate(2.5em, 7.5em); }
  100%     { transform: translate(4em, 5em); }
}

@media (prefers-reduced-motion: reduce) {
  .ma, .ma * { animation: none !important; }
}

/* --- 11. How it works ---------------------------------------------------- */
.how { position: relative; overflow: hidden; background: var(--surface); }

/* Isometric cubes in the top-right corner, drawn in SVG. */
.how-cubes {
  position: absolute;
  right: -90px; top: -78px;
  width: 400px;
  pointer-events: none;
  opacity: .9;
  -webkit-mask-image: linear-gradient(200deg, #000 55%, transparent 85%);
  mask-image: linear-gradient(200deg, #000 55%, transparent 85%);
}
.how-cubes svg { width: 100%; height: auto; display: block; }
.how-cubes .cb polygon { stroke: rgba(255, 255, 255, .8); stroke-width: 1; }
.how-cubes .cb2 { opacity: .8; }
.how-cubes .cb3 { opacity: .6; }
.how .wrap { position: relative; z-index: 1; }
/* Headline stays in front of the cubes (they are positioned, so they would
   otherwise paint over it). */
.how .section-head { position: relative; z-index: 1; }

/* Request line next to a handwritten aside */
/* Code block flush left, the handwritten note to its right. */
.how-run {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  margin-top: 26px;
}
.code-shell { flex: 0 1 660px; }
.code-shell { position: relative; }
.how-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #616b85;   /* 4.7:1 on the section background */
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
  font-size: 1.32rem;
  line-height: 1.45;
}
/* The note sits at a slight angle, like a handwritten margin note. */
.how-note-text { display: block; transform: rotate(-5deg); transform-origin: left center; }
.how-note-text span { display: block; white-space: nowrap; }
.how-arrow { width: 62px; height: 34px; flex-shrink: 0; color: #9aa4c0; }

@media (max-width: 900px) {
  .how-cubes { width: 230px; right: -70px; top: -40px; opacity: .5; }
  .how-run { flex-direction: column; align-items: stretch; }
  /* The 660px basis is a width for the row layout; stacked it would become
     a height and leave a large empty block under the code. */
  .how-run .code-shell { flex: 0 1 auto; }
  .how-note { justify-content: center; text-align: center; }
  .how-note-text { transform: rotate(-3deg); }
  .how-arrow { transform: rotate(90deg); }
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;   /* number left, text right */
  column-gap: 16px;
  align-items: start;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}
.step-num { grid-row: 1 / span 2; }
.step h3, .step > p:not(.step-num) { grid-column: 2; }
.step-num {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #4a4ed0;
  background: var(--indigo-50);
  font-weight: 900;
  font-size: .85rem;
}
.step h3 { margin: 4px 0 6px; font-size: 1.05rem; letter-spacing: -.02em; }
.step > p:not(.step-num) { margin: 0; color: var(--muted); font-size: .88rem; }
/* Arrow centred in the 30px gap: it never touches a card border, so it needs
   no background patch over the frame. */
.step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translate(50%, -50%);
  color: #9aa4c0;
  font-size: 1.05rem;
  line-height: 1;
}

.code-shell { position: relative; }
.code-copy {
  position: absolute;
  right: 14px; top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: #dbe4f4;
  font: 700 .74rem/1 var(--font);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.code-copy::before {
  content: "";
  width: 12px; height: 12px;
  border: 1.6px solid currentColor;
  border-radius: 3px;
  box-shadow: 3px -3px 0 -1.6px rgba(219, 228, 244, .5), 3px -3px 0 0 currentColor;
}
.code-copy:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
.code-copy.is-done { color: #6ee7b7; border-color: rgba(110, 231, 183, .45); }

.code-tag {
  position: absolute;
  left: 18px; top: 14px;
  padding: 5px 11px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  color: #cfdaed;
  font: 700 .72rem/1 var(--font);
  letter-spacing: .04em;
}
.code-strip {
  margin: 0;
  padding: 48px 24px 22px;
  border-radius: 13px;
  background: var(--night-2);
  color: #9db0cf;
  font: 12.5px/1.7 var(--mono);
  overflow-x: auto;
  white-space: pre;
}
.code-strip b { color: #70d9f7; font-weight: 700; }
.code-strip .str { color: #f6d481; }

/* --- 12. Dark integrations band ------------------------------------------ */
/* Same isometric cubes as the section above, in the dark palette. */
.dark-cubes {
  position: absolute;
  left: 55%; top: -34px;
  width: 360px;
  pointer-events: none;
  opacity: .9;
  -webkit-mask-image: radial-gradient(120% 100% at 40% 25%, #000 45%, transparent 85%);
  mask-image: radial-gradient(120% 100% at 40% 25%, #000 45%, transparent 85%);
}
.dark-cubes svg { width: 100%; height: auto; display: block; }
.dark-cubes polygon { stroke: rgba(126, 148, 200, .25); stroke-width: 1; }
.dark-cubes .dcb2 { opacity: .75; }
.dark .wrap { position: relative; z-index: 1; }

.dark {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 30%, #253e7a 0, transparent 25%),
    var(--night);
  color: var(--white);
}
@media (max-width: 900px) {
  .dark-cubes { left: auto; right: -70px; top: -30px; width: 220px; opacity: .6; }
}
.dark-grid { display: grid; grid-template-columns: 1.4fr .62fr; gap: 55px; align-items: end; }
.automation { margin-bottom: -34px; }   /* sits lower than the tile row */
.dark h2 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 10px 0 16px;
}
.dark p { color: #a9b5ca; margin: 0; }
.dark .eyebrow { color: #8e9eff; }

/* One row of square tiles: logo inside, label underneath. */
.techs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin-top: 30px; }
.tech {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: #bdc9de;
}
.tech-tile {
  width: 100%;
  max-width: 62px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #13243f;
  border: 1px solid #243856;
  border-radius: 14px;
  transition: border-color .2s ease, transform .2s ease;
}
.tech:hover .tech-tile { border-color: #3d5a86; transform: translateY(-2px); }
.tech svg { width: 26px; height: 26px; }

.automation {
  background: var(--night-3);
  border: 1px solid #304260;
  border-radius: var(--radius);
  padding: 24px;
}
.automation h3 { margin: 0 0 15px; font-size: 1.08rem; }
.automation li { margin: 11px 0; color: #cbd5e6; font-size: .9rem; display: flex; gap: 8px; }
.automation li::before { content: "✓"; color: var(--white); font-weight: 800; }

/* --- 13. Developer experience -------------------------------------------- */
.dev-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 24px; align-items: stretch; }
.big-code.code-shell { position: relative; }
.big-code .code-copy { top: 14px; right: 16px; }

.big-code {
  background: var(--night-2);
  color: #9db0cf;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.big-code pre {
  margin: 0;
  padding: 22px 24px;
  font: 12.5px/1.7 var(--mono);
  overflow-x: auto;
  flex: 1;
}
.big-code .kw  { color: #ed8cdc; }
.big-code .str { color: #f6d481; }
.big-code .fn  { color: #7adcf8; }
.big-code .num { color: #ffb86b; }
.big-code .com { color: #7d90b4; font-style: italic; }

/* CSS-only code tabs: radio inputs, no JavaScript */
.codetabs { display: flex; flex-direction: column; }
.codetabs > input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.codetabs-list {
  display: flex;
  gap: 4px;
  padding: 10px 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  overflow-x: auto;
  scrollbar-width: none;
}
.codetabs-list::-webkit-scrollbar { display: none; }
.codetabs-list label {
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  font-size: .78rem;
  font-weight: 700;
  color: #8290ac;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, background-color .18s ease;
}
.codetabs-list label:hover { color: #cfdaed; background: rgba(255, 255, 255, .04); }
.codetabs-panel { display: none; }

.codetabs > input:nth-of-type(1):checked ~ .codetabs-list label:nth-of-type(1),
.codetabs > input:nth-of-type(2):checked ~ .codetabs-list label:nth-of-type(2),
.codetabs > input:nth-of-type(3):checked ~ .codetabs-list label:nth-of-type(3),
.codetabs > input:nth-of-type(4):checked ~ .codetabs-list label:nth-of-type(4) {
  color: var(--white);
  border-bottom-color: #6172ff;
  background: rgba(97, 114, 255, .12);
}
.codetabs > input:nth-of-type(1):checked ~ .codetabs-panels .codetabs-panel:nth-of-type(1),
.codetabs > input:nth-of-type(2):checked ~ .codetabs-panels .codetabs-panel:nth-of-type(2),
.codetabs > input:nth-of-type(3):checked ~ .codetabs-panels .codetabs-panel:nth-of-type(3),
.codetabs > input:nth-of-type(4):checked ~ .codetabs-panels .codetabs-panel:nth-of-type(4) {
  display: block;
}
.codetabs > input:nth-of-type(1):focus-visible ~ .codetabs-list label:nth-of-type(1),
.codetabs > input:nth-of-type(2):focus-visible ~ .codetabs-list label:nth-of-type(2),
.codetabs > input:nth-of-type(3):focus-visible ~ .codetabs-list label:nth-of-type(3),
.codetabs > input:nth-of-type(4):focus-visible ~ .codetabs-list label:nth-of-type(4) {
  outline: 2px solid #8e9eff;
  outline-offset: -2px;
}

.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: stretch; }
.benefit {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 20px;
  background: var(--white);
  display: flex;
  gap: 14px;
  align-items: center;
  transition: border-color .2s ease, transform .2s ease;
}
.benefit:hover { border-color: #c9d1f0; transform: translateY(-2px); }
.benefit .icon { width: 38px; height: 38px; border-radius: 11px; }
.benefit .icon svg { width: 19px; height: 19px; }
.benefit strong { display: block; font-size: .92rem; color: var(--ink); margin-bottom: 2px; }
.benefit span { font-size: .79rem; color: var(--muted); }

/* --- 14. Use cases ------------------------------------------------------- */
.use-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }
@media (max-width: 1080px) { .use-grid { grid-template-columns: repeat(3, 1fr); } }
.use {
  padding: 26px 12px 22px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--white);
  transition: border-color .2s ease, transform .2s ease;
}
.use:hover { border-color: #c9d1f0; transform: translateY(-3px); }
.use .icon { margin-bottom: 13px; width: 46px; height: 46px; border-radius: 50%; }
.use .icon svg { width: 21px; height: 21px; }
.use b { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }

.enterprise {
  position: relative;
  overflow: hidden;
  margin-top: 35px;
  padding: 38px 40px 32px;
  border-radius: 20px;
  background: radial-gradient(90% 120% at 12% 0%, #16264a 0, transparent 60%), #0b1930;
  color: var(--white);
}
/* Dotted world map, generated from public-domain Natural Earth land shapes. */
.ent-map {
  position: absolute;
  right: -30px; top: 46%;
  width: 700px;
  aspect-ratio: 1100 / 385;
  transform: translateY(-50%);
  background: url("/assets/img/worldmap.png") center / contain no-repeat;
  opacity: .75;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}
/* A few points on the map light up, one after another. Decorative: they mark
   nothing in particular, only transform and opacity animate. */
.ent-pt {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #cfe9ff;
  box-shadow: 0 0 16px 5px rgba(120, 190, 255, .85);
  animation: ent-pt 6s ease-in-out infinite both;
}
.ent-pt::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 190, 255, .35), rgba(120, 190, 255, 0) 70%);
}
.ent-pt::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(143, 208, 255, .55);
  animation: ent-ring 6s ease-out infinite both;
}
.ent-pt.p1 { left: 52.4%; top: 17.4%; }
.ent-pt.p2 { left: 29.4%; top: 24.8%; animation-delay: 1.5s; }
.ent-pt.p2::after { animation-delay: 1.5s; }
.ent-pt.p3 { left: 78.8%; top: 56.1%; animation-delay: 3s; }
.ent-pt.p3::after { animation-delay: 3s; }
.ent-pt.p4 { left: 37%;   top: 75.8%; animation-delay: 4.5s; }
.ent-pt.p4::after { animation-delay: 4.5s; }
@keyframes ent-pt {
  0%, 100% { opacity: .45; transform: scale(.8); }
  10%      { opacity: 1;   transform: scale(1.05); }
  34%      { opacity: .45; transform: scale(.8); }
}
@keyframes ent-ring {
  0%       { opacity: .7; transform: scale(.4); }
  30%      { opacity: 0;  transform: scale(1.6); }
  100%     { opacity: 0;  transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .ent-pt, .ent-pt::after { animation: none !important; }
  .ent-pt { opacity: .9; }
  .ent-pt::after { opacity: 0; }
}

.ent-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.enterprise h3 { font-size: 1.85rem; margin: 6px 0 0; letter-spacing: -.03em; }
.enterprise > .ent-head p:not(.eyebrow) { color: #acb8cb; max-width: 44ch; margin: 10px 0 0; }
.enterprise .eyebrow { color: #91a4ff; margin: 0; }

.ent-feats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ent-feats li { display: flex; align-items: center; gap: 12px; }
.ent-feats span span { display: block; }
.ent-feats .icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #cfdaf7; margin: 0; }
.ent-feats .icon svg { width: 17px; height: 17px; }
.ent-feats b { display: block; font-size: .9rem; }
.ent-feats span span { font-size: .76rem; line-height: 1.35; color: #9fadc4; }

@media (max-width: 900px) {
  .enterprise { padding: 30px 24px 26px; }
  .ent-head { display: block; }
  .ent-head .btn { margin-top: 20px; }
  .ent-feats { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ent-map { width: 420px; right: -90px; opacity: .4; }
}
@media (max-width: 560px) {
  .ent-feats { grid-template-columns: 1fr; }
}

/* --- 15. Pricing --------------------------------------------------------- */
.pricing { background: #f8faff; }
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }

.price {
  position: relative;
  isolation: isolate;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(28, 47, 97, .05), 0 14px 34px -22px rgba(28, 47, 97, .28);
  transition: transform .25s ease;
}
/* A short accent on the top edge. It stops short of the rounded corners, so
   it never pokes out past the curve. */
.price::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #c9cffa, #d4ebfb);
}
/* The deeper hover shadow sits on a pseudo-element and fades in with opacity:
   animating box-shadow itself would repaint on every frame. */
.price::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 28px 60px -26px rgba(43, 63, 180, .38);
  opacity: 0;
  transition: opacity .25s ease;
}
.price:hover { transform: translateY(-4px); }
.price:hover::after { opacity: 1; }
.price h3, .price h4 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; }
.price-desc { font-size: .86rem; color: var(--muted); margin: 6px 0 0; }
.amount { font-size: 2.6rem; font-weight: 800; margin: 18px 0 8px; letter-spacing: -.05em; line-height: 1; }
.amount .per { font-size: .8rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.price ul { margin: 22px 0 24px; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
/* Block, not flex: a link inside an item ("Render packs from €50") must flow
   with the text around it instead of becoming a separate, spaced-out item. */
.price li { position: relative; padding-left: 28px; font-size: .86rem; line-height: 1.45; color: #4a5570; }
.price li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #eef0ff;
  color: #4b3bff;
  font-size: .66rem;
  font-weight: 900;
}
.price .btn { width: 100%; margin-top: auto; }

/* The most popular plan: a dark card with a brand glow, like the dark bands of
   the home page. Its label sits in the corner, so every card in the row starts
   on the same line. */
.price.popular {
  border-color: transparent;
  color: #fff;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(75, 59, 255, .38), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(16, 191, 242, .16), transparent 60%),
    linear-gradient(165deg, #1a2452 0%, #0c1633 62%, #0a1a3b 100%);
  box-shadow: 0 30px 70px -30px rgba(59, 70, 230, .6), 0 0 0 1px rgba(120, 132, 255, .32);
}
.price.popular::before { background: linear-gradient(90deg, #4b3bff, #2b6ff5 50%, #10bff2); }
.price.popular .eyebrow {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4b3bff, #2b6ff5);
  color: #fff;
  font-size: .64rem;
  letter-spacing: .1em;
  box-shadow: 0 6px 16px -6px rgba(75, 59, 255, .7);
}
.price.popular .price-desc,
.price.popular .billing-note,
.price.popular .amount .per { color: #aeb9d9; }
.price.popular ul { border-top-color: rgba(255, 255, 255, .12); }
.price.popular li { color: #d9e0f3; }
.price.popular li::before { background: rgba(125, 145, 255, .22); color: #aebfff; }
.price.popular li a { color: #aebfff; }
@media (prefers-reduced-motion: reduce) {
  .price, .price::after { transition: none; }
  .price:hover { transform: none; }
}

.price-note { text-align: center; margin: 22px 0 0; font-size: .82rem; color: var(--muted); }

/* --- 16. FAQ ------------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq details[open] { border-color: #ccd4f2; box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  font-weight: 700;
  font-size: .97rem;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid #8993aa;
  border-bottom: 2px solid #8993aa;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq .answer { padding: 0 22px 20px; color: var(--muted); font-size: .9rem; margin: 0; }
.faq .answer a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.faq .answer + .answer { margin-top: 10px; }

/* --- 17. Final CTA ------------------------------------------------------- */
.cta { padding: 76px 0; }
.cta-box {
  padding: 36px 46px;
  border-radius: var(--radius-lg);
  background: linear-gradient(110deg, #395bea, #7252f2 60%, #347bd9);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  position: relative;
  overflow: hidden;
}
.cta-box h2 { font-size: clamp(1.5rem, 2.35vw, 2.2rem); margin: 0; letter-spacing: -.04em; line-height: 1.12; }
.cta-box p { color: #e1e7ff; margin: 10px 0 0; }
.cta-box .btn { position: relative; z-index: 2; }
.cta-text { max-width: none; }
.cta-box p { max-width: 34em; }
.cta-text .btn { margin-top: 22px; }

/* Rendered documents drifting beside the headline: the hero idea in
   miniature. Rotated rounded rectangles, no images, no JavaScript. 1em is
   1/42 of the artwork width, so the whole cluster scales with the box. The
   base styles are the resting frame (what prefers-reduced-motion users see);
   only transform animates.                                                  */
.cta-art {
  container-type: inline-size;
  position: relative;
  flex: 0 0 auto;
  width: min(395px, 36%);
  aspect-ratio: 42 / 25;
  align-self: center;
  /* The cluster may reach into the band's padding, so the cards nearly touch
     its edges without making the band taller. */
  margin: -20px 40px -20px 0;
  pointer-events: none;
}
/* Soft light behind the stack, so the cards read as lit from the front */
.cta-art::before {
  content: "";
  position: absolute;
  inset: -20% -14% -24%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 48%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 72%);
}
.cta-art > * {
  position: absolute;
  display: block;
  font-size: 10px;                 /* fallback without container queries */
  font-size: calc(100cqw / 42);
  border-radius: 1.1em;
  border: 1px solid rgba(255, 255, 255, .42);
  background: linear-gradient(148deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .15));
  box-shadow: 0 2em 3.4em rgba(8, 15, 50, .22), inset 0 .12em 0 rgba(255, 255, 255, .55);
  transform: rotate(var(--r, 0deg));
  animation: cta-float var(--t, 9s) ease-in-out var(--d, 0s) infinite both;
}
@keyframes cta-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-.8em) rotate(var(--r, 0deg)); }
}

/* Two empty panels, further back and dimmer */
.cta-ghost {
  background: linear-gradient(148deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07));
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 1.4em 2.6em rgba(8, 15, 50, .14);
}
.cta-g1 { --r: 12deg;  --t: 11s; --d: -1.2s; left: 0;      top: 9.6em; width: 8em;   height: 10.6em; }
.cta-g2 { --r: -11deg; --t: 12s; --d: -3.4s; left: 33.4em; top: .3em;  width: 7.6em; height: 8.6em; }

/* Template in the back */
.cta-tpl {
  --r: -9deg; --t: 10s; --d: -2.2s;
  left: 3.6em; top: 5em;
  width: 11.4em; height: 15em;
  padding: 1.2em;
  z-index: 3;
}
.cta-tpl b { display: block; width: 58%; height: .95em; border-radius: .3em; background: rgba(255, 255, 255, .82); }
.cta-tpl i { display: block; height: .5em; border-radius: .25em; background: rgba(255, 255, 255, .44); margin-top: .95em; }
.cta-tpl i:nth-of-type(2) { width: 86%; }
.cta-tpl i:nth-of-type(3) { width: 66%; }
.cta-tpl-img {
  display: block;
  margin-top: 1.25em;
  height: 4.6em;
  border-radius: .6em;
  border: 1px solid rgba(255, 255, 255, .3);
  background: linear-gradient(145deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16));
}

/* Bar chart */
.cta-chart {
  --r: 8deg; --t: 10.5s; --d: -4.1s;
  left: 29.2em; top: 4.2em;
  width: 10.6em; height: 12.6em;
  padding: 1.1em;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: .95em;
}
.cta-chart-top { display: flex; align-items: center; justify-content: space-between; }
.cta-chart-top b { display: block; width: 3.8em; height: .65em; border-radius: .33em; background: rgba(255, 255, 255, .82); }
.cta-chart-top i { display: block; width: 1.3em; height: 1.3em; border-radius: 50%; border: .22em solid rgba(255, 255, 255, .5); }
.cta-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: .6em;
  padding-bottom: .55em;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.cta-bars i {
  flex: 1;
  border-radius: .3em .3em .15em .15em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .42));
}
.cta-bars i:nth-of-type(1) { height: 36%; }
.cta-bars i:nth-of-type(2) { height: 62%; }
.cta-bars i:nth-of-type(3) { height: 45%; }
.cta-bars i:nth-of-type(4) { height: 88%; }

/* Invoice in front */
.cta-doc {
  --r: -3deg; --t: 9s; --d: -.6s;
  left: 13.6em; top: 2.4em;
  width: 14em; height: 18.6em;
  padding: 1.35em 1.35em 3.4em;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: linear-gradient(158deg, #fff, #f1f4ff);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 2.4em 4em rgba(8, 15, 50, .3), inset 0 .12em 0 #fff;
}
.cta-doc-top { display: flex; align-items: center; justify-content: space-between; }
.cta-doc strong { font: 800 1.2em/1 var(--font); letter-spacing: -.03em; color: #141d44; }
.cta-seal {
  width: 1.8em; height: 1.8em;
  border-radius: 50%;
  background: linear-gradient(140deg, #7b6bff, #2f6ff0);
  box-shadow: 0 .3em .7em rgba(56, 72, 190, .38);
}
.cta-doc-meta { display: flex; gap: .55em; margin-top: 1em; }
.cta-doc-meta i { width: 3.6em; height: .42em; border-radius: .21em; background: #d7dcf0; }
.cta-doc-meta i:last-child { width: 2.2em; }
.cta-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.2em;
  padding: .6em;
  border-radius: .4em;
  background: #141d44;
}
.cta-doc-head i { height: .38em; border-radius: .19em; background: rgba(255, 255, 255, .6); }
.cta-doc-head i:first-child { width: 45%; }
.cta-doc-head i:last-child  { width: 22%; }
.cta-doc-row { display: flex; align-items: center; justify-content: space-between; margin-top: 1.05em; }
.cta-doc-row i { height: .46em; border-radius: .23em; background: #e0e5f5; }
.cta-doc-row i:first-child { width: 54%; }
.cta-doc-row i:last-child  { width: 22%; }
.cta-doc-row:nth-of-type(2) i:first-child { width: 46%; }
.cta-doc-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1em;
  border-top: 1px solid #e6eaf7;
}
.cta-doc-sum i:first-child { width: 32%; height: .5em;  border-radius: .25em; background: #c5cbe6; }
.cta-doc-sum i:last-child  { width: 30%; height: .85em; border-radius: .43em; background: linear-gradient(90deg, #6b5bff, #2f6ff0); }
.cta-doc-tag {
  position: absolute;
  left: 1.35em; bottom: 1.25em;
  padding: .5em .65em;
  border-radius: .45em;
  font: 800 .6em/1 var(--font);
  letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(140deg, #ff6a5e, #e0374b);
  box-shadow: 0 .5em 1em rgba(224, 55, 75, .4);
}

/* Rendered image */
.cta-img {
  --r: 5deg; --t: 9.5s; --d: -2.9s;
  left: 21.6em; top: 13.9em;
  width: 13.4em; height: 9.9em;
  z-index: 6;
  overflow: hidden;
  background: #fff;
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 2.2em 3.6em rgba(8, 15, 50, .28), inset 0 .12em 0 #fff;
}
.cta-sky {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 71%;
  overflow: hidden;
  background: linear-gradient(168deg, #93a5ff, #5b63f0 58%, #3f8ae0);
}
.cta-sun {
  position: absolute;
  right: 1.7em; top: 1.2em;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: #ffd27a;
  box-shadow: 0 0 1.6em rgba(255, 210, 122, .85);
}
.cta-peak {
  position: absolute;
  left: -4%; right: -4%; bottom: 0;
  height: 72%;
  background: linear-gradient(180deg, #f2f4ff, #c3caf4);
  clip-path: polygon(0 100%, 24% 24%, 43% 66%, 63% 6%, 100% 100%);
}
.cta-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 29%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
  background: #fff;
}
.cta-cap b { font: 800 .82em/1 var(--font); letter-spacing: -.01em; color: #141d44; }
.cta-cap i { width: 2.4em; height: .38em; border-radius: .19em; background: #dfe4f4; }

/* --- 18. Footer ---------------------------------------------------------- */
.footer { padding: 48px 0; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 30px; }
.footer h2 {
  font-size: .8rem;
  margin: 0 0 13px;
  letter-spacing: .02em;
}
.footer a { display: block; font-size: .78rem; color: var(--muted); margin: 7px 0; transition: color .18s ease; }
.footer a:hover { color: var(--brand); }
.footer .brand { margin-bottom: 12px; display: inline-flex; font-size: 1.1rem; }
.footer .brand:hover { color: inherit; }
.footer p { font-size: .78rem; color: var(--muted); margin: 0 0 10px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--muted);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-bottom a { display: inline; margin: 0; }

/* --- 19. Error page ------------------------------------------------------ */
.error-page { text-align: center; padding: 110px 0; }
.error-page .amount {
  font-size: clamp(4rem, 12vw, 7rem);
  background: linear-gradient(90deg, #4c5dff, #238cf0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}
.error-page p { color: var(--muted); max-width: 42ch; margin: 12px auto 28px; }

/* --- 20. Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
  .techs { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .cta-box { padding: 32px 36px; }
  .cta-art { width: min(330px, 35%); }
}

@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .mobile-nav { display: block; }
  .hero-grid, .dark-grid, .dev-grid { grid-template-columns: minmax(0, 1fr); }
  .ha-wrap { margin: 8px auto 0; }
  .dark-grid { gap: 34px; }
  .cards-3, .prices { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { display: none; }
  .use-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .cta-art { display: none; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 28px, 1180px); }
  .section { padding: 68px 0; }
  .hero { padding-top: 45px; }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.05rem); }
  .hero-note { flex-direction: column; gap: 6px; }
  .use-grid, .benefits { grid-template-columns: 1fr 1fr; }
  .techs { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .enterprise, .cta-box { display: block; padding: 30px; }
  .enterprise .btn, .cta-box .btn { margin-top: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .code-strip { padding: 18px; font-size: 11px; }
  /* On phones the copy button would sit on top of the last language tab:
     both get a little smaller so the row ends before the button. */
  .codetabs-list { padding-left: 10px; }
  .codetabs-list label { padding: 8px 9px; font-size: .74rem; }
  .code-copy { padding: 6px 9px; font-size: .68rem; gap: 5px; }
  .big-code .code-copy { right: 10px; }
}

/* Narrow phones (360 px and below): the two-up benefit cards are wider than
   half the screen once icon, gap and padding are counted, and would push the
   page sideways. */
@media (max-width: 420px) {
  .benefits { grid-template-columns: 1fr; }
}

/* --- 21. Print ----------------------------------------------------------- */
@media print {
  .site-header, .ha-wrap, .cta, .hero::before { display: none !important; }
  body { color: #000; background: #fff; }
  .dark, .enterprise { background: #fff !important; color: #000 !important; }
}

/* --- 22. Additions ------------------------------------------------------- */
.eyebrow--spaced { margin-top: 28px; }
.section--tight { padding-top: 20px; }

/* Question headings keep semantic weight without visual restyling */
.faq summary .faq-q {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: -.01em;
}

/* Benefit items stack their two text lines */
.benefit > span:last-child { display: block; }

/* Hero badge & eyebrow are paragraphs — reset default margins */
.badge { margin: 0; }
.hero .eyebrow { margin-bottom: 0; }
.section-head .eyebrow { margin: 0; }
.step-num { margin: 0; }
.price .eyebrow { margin: 0 0 6px; }
.enterprise .eyebrow { margin: 0 0 6px; }
.dark .eyebrow { margin: 0; }
.footer-bottom p { margin: 0; }

/* Sprite holder + decorative placeholder widths (keeps markup style-attribute free) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero-actions.is-centered { justify-content: center; }

/* Feature cards: equal height, mini-art pinned to the bottom edge */
.feature-card { display: flex; flex-direction: column; }
.feature-card .mini-art { margin-top: auto; }


/* --- 23. Billing period switch (annual / monthly) ------------------------
   Radio inputs drive the whole thing; no JavaScript involved. Both price
   variants sit in the markup, CSS reveals the selected one.              */

.billing-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.billing-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 30px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.pricing .wrap { display: flex; flex-direction: column; align-items: center; }
.pricing .section-head, .pricing .prices, .pricing .price-note { width: 100%; }

.billing-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.billing-toggle label:hover { color: var(--ink); }

/* Sehr schmale Geräte: die deutschen Labels sind länger als die englischen und
   sprengen sonst den Pill-Umschalter. */
@media (max-width: 380px) {
  .billing-toggle { max-width: 100%; }
  .billing-toggle label { padding: 9px 12px; gap: 5px; font-size: .82rem; }
  .billing-toggle .save { font-size: .66rem; padding: 2px 5px; }
}

.billing-toggle .save {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e2f6ef;
  color: #17695f;
}

/* Selected period */
#bill-annual:checked  ~ .billing-toggle label[for="bill-annual"],
#bill-monthly:checked ~ .billing-toggle label[for="bill-monthly"] {
  background: var(--ink);
  color: var(--white);
}
#bill-annual:checked ~ .billing-toggle label[for="bill-annual"] .save {
  background: #2ecfae;
  color: #06302a;
}

/* Keyboard focus lands on the hidden radio — show it on the visible label */
#bill-annual:focus-visible  ~ .billing-toggle label[for="bill-annual"],
#bill-monthly:focus-visible ~ .billing-toggle label[for="bill-monthly"] {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Swap the amounts */
.on-monthly { display: none; }
#bill-monthly:checked ~ .prices .on-annual  { display: none; }
#bill-monthly:checked ~ .prices .on-monthly { display: inline; }

.billing-note {
  font-size: .78rem;
  color: var(--dim);
  margin: -4px 0 0;
  min-height: 1.4em;
}

.price-note a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 420px) {
  .billing-toggle label { padding: 9px 14px; font-size: .82rem; }
}


/* --- 24. Plan groups (PDF only / Images + PDFs) -------------------------- */
.plan-group {
  width: 100%;
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.prices + .plan-group { margin-top: 42px; }


/* --- 25. Header dropdowns ------------------------------------------------
   <details> menus: open and close without JavaScript. */
.nav-drop { position: relative; }
.nav-drop > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: color .18s ease;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-drop > summary:hover, .nav-drop[open] > summary { color: var(--brand); }
.nav-drop-panel {
  position: absolute;
  left: -14px;
  top: calc(100% + 14px);
  min-width: 15rem;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
}
.nav-drop-panel a { padding: 9px 12px; border-radius: var(--radius-sm); }
.nav-drop-panel a:hover { background: var(--surface); }
.nav-drop-panel a[aria-current="page"] { color: var(--brand); font-weight: 700; }
.nav-links { align-items: center; }
.mobile-nav-panel .mobile-nav-label {
  margin: 6px 12px 2px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --- 26. Product pages ---------------------------------------------------- */
.hero--page { padding-bottom: 70px; }
.hero--page .hero-lede sup a { color: var(--brand); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; font-size: .78rem; color: var(--dim); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #b3bbd0; }
.crumbs a:hover { color: var(--brand); }
.byline { margin: 18px 0 0; font-size: .78rem; color: var(--dim); }
.byline a { text-decoration: underline; text-underline-offset: 2px; }

.lead-block { padding: 64px 0 20px; }
.prose { width: min(780px, calc(100% - 40px)); margin-inline: auto; }
.prose h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.04em;
  margin: 0 0 16px;
}
.prose h3 { font-size: 1.12rem; letter-spacing: -.02em; margin: 34px 0 8px; }
.prose p, .prose li { color: var(--ink-soft); font-size: 1rem; }
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 18px; display: grid; gap: 8px; }
/* Der Listenpunkt ist ein Flex-Container: das Häkchen in ::before, der Text
   daneben. Achtung — jedes Inline-Element im <li> (strong, code, a) wird zu
   einem eigenen Flex-Item und bleibt dann auf einer Zeile. Enthält ein Punkt
   mehr als reinen Text, gehört sein Inhalt in ein <span>. */
.prose ul li { display: flex; gap: 10px; }
.prose ul li::before { content: "✓"; color: #4c65ee; font-weight: 800; flex-shrink: 0; }
.prose a:not(.btn) { color: var(--brand-2); text-decoration: underline; text-underline-offset: 2px; }
.prose code, .facts code, .params code, .cmp code, .faq .answer code {
  font: .86em var(--mono);
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--indigo-50);
  color: #3a3fb8;
}
.prose pre code { font: inherit; padding: 0; background: none; color: inherit; border-radius: 0; }
.answer-text {
  font-size: 1.14rem !important;
  line-height: 1.65;
  padding: 22px 26px;
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
}

.page-sec { padding: 56px 0; }
.page-sec--alt { background: var(--surface); }
.wide { width: min(1000px, calc(100% - 40px)); margin-inline: auto; }
.prose .wide, .prose .prose { width: 100%; }

/* Tables: facts, parameters, comparison */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); margin: 8px 0 18px; }
.facts, .params, .cmp { width: 100%; border-collapse: collapse; font-size: .84rem; }
.facts th, .facts td, .params th, .params td, .cmp th, .cmp td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.facts tr:last-child > *, .params tr:last-child > *, .cmp tr:last-child > * { border-bottom: 0; }
.facts th { width: 34%; font-weight: 700; color: var(--ink); background: var(--surface); }
.facts td { color: var(--ink-soft); }
.params thead th, .cmp thead th {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--surface);
}
.params td:first-child { white-space: nowrap; }
.params td, .cmp td { color: var(--ink-soft); }
.cmp { min-width: 680px; }
.cmp tbody th { font-weight: 700; color: var(--ink); width: 19%; }
.cmp .us { background: #f4f5ff; }
.footnote { font-size: .78rem; color: var(--dim); margin: 0 0 8px; }

/* Code block on product pages */
.page-code { margin: 10px 0 18px; }
.page-code pre { max-height: 560px; }
.response-note { margin-top: 18px; }

/* Feature grid under "What the engine supports" */
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feat {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.feat .icon { margin: 0 0 14px; }
.feat h3 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -.02em; }
.feat p { margin: 0 0 10px; color: var(--muted); font-size: .9rem; }
.feat p:last-child { margin-bottom: 0; }
.feat pre {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--night-2);
  color: #cfdaed;
  font: 12px/1.65 var(--mono);
  overflow-x: auto;
}
.feat pre .str { color: #f6d481; }
.feat pre .com { color: #7d90b4; }
.feat code { font: .85em var(--mono); color: #3a3fb8; }
.feat pre code { color: inherit; font-size: inherit; }

/* Sync vs async diagram */
.flow-fig { margin: 18px 0 20px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.flow-fig svg { width: 100%; height: auto; }
.flow-fig figcaption { font-size: .8rem; color: var(--dim); margin-top: 10px; }
.flow-fig .fl-box { fill: var(--surface); stroke: var(--line-2); }
.flow-fig .fl-us { fill: var(--indigo-50); stroke: #c9cff8; }
.flow-fig .fl-t { fill: var(--ink); font: 600 13px var(--font); }
.flow-fig .fl-s { fill: var(--muted); font: 12px var(--font); }
.flow-fig .fl-h { fill: #5561cc; font: 800 11px var(--font); letter-spacing: .12em; }
.flow-fig .fl-a { stroke: #8b94c9; stroke-width: 1.6; fill: none; }
.flow-fig .fl-a2 { stroke: #5b5cf6; stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
.flow-fig .fl-l { fill: var(--ink-soft); font: 12px var(--mono); }

/* Pricing teaser */
.price-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}
.price-teaser .price { padding: 24px; }
.price-teaser .amount { margin: 8px 0 4px; font-size: 2rem; }

/* Related pages */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.related a {
  display: block;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color .2s ease, transform .2s ease;
}
.related a:hover { border-color: #c9d1f0; transform: translateY(-3px); }
.related b { display: block; font-size: .95rem; margin-bottom: 6px; }
.related span { font-size: .84rem; color: var(--muted); }

@media (max-width: 900px) {
  .feat-grid, .price-teaser { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .prose, .wide { width: calc(100% - 28px); }
  .answer-text { padding: 18px; }
}

/* --- 27. HTML → PDF hero animation -----------------------------------------
   HTML lines appear on the left, PDF pages stack up on the right. Only
   transform and opacity animate. Base styles are the FINAL frame, which is
   also what prefers-reduced-motion users see. 10 s loop. */
.hp-wrap { container-type: inline-size; width: 100%; max-width: 600px; justify-self: center; }
.hp {
  --t: 10s;
  position: relative;
  aspect-ratio: 60 / 44;
  font-size: 10px;
  font-size: calc(100cqw / 60);
}
.hp-code {
  position: absolute;
  left: 0; top: 4em;
  width: 31em; height: 29em;
  padding: 1.6em 1.8em;
  border-radius: 1.4em;
  background: var(--night-2);
  box-shadow: 0 2em 5em rgba(12, 25, 45, .25);
  font: 1.2em/1.9 var(--mono);
  color: #9db0cf;
}
.hp-code-head { display: flex; gap: .5em; align-items: center; margin-bottom: 1em; font-size: .85em; color: #7d90b4; }
.hp-code-head i { width: .7em; height: .7em; border-radius: 50%; background: #2b3c5c; }
.hp-code-head b { margin-left: .6em; color: #70d9f7; font-weight: 700; }
.hp-lines { position: relative; overflow: hidden; }
.hp-line { display: block; white-space: pre; min-height: 1.9em; }
.hp-line .t { color: #ed8cdc; }
.hp-line .a { color: #7adcf8; }
.hp-line .s { color: #f6d481; }
/* "Typing": a cover in the code background slides down line by line */
.hp-lines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--night-2);
  transform: translateY(101%);
  animation: hp-type var(--t) infinite both;
}
@keyframes hp-type {
  0%, 3%   { transform: translateY(0); animation-timing-function: steps(11, end); }
  33%, 93% { transform: translateY(101%); }
  97%, 100% { transform: translateY(0); }
}

.hp-arrow {
  position: absolute;
  left: 30.4em; top: 19.5em;
  width: 4.6em; height: 4.6em;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #6172ff, var(--brand-2));
  color: #fff;
  font: 800 1.1em/1 var(--font);
  box-shadow: 0 1em 2.4em rgba(89, 102, 239, .35);
  z-index: 3;
  animation: hp-pulse var(--t) infinite both;
}
.hp-arrow span { font-size: .8em; }
@keyframes hp-pulse {
  0%, 36%  { transform: scale(.6); opacity: 0; }
  40%      { transform: scale(1.15); opacity: 1; }
  44%, 92% { transform: scale(1); opacity: 1; }
  97%, 100% { transform: scale(.6); opacity: 0; }
}

.hp-page {
  position: absolute;
  top: 5em;
  width: 21em; height: 29.7em;
  padding: 1.8em 1.7em;
  border-radius: .6em;
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: 0 1.6em 3.6em rgba(28, 47, 97, .16);
  left: 36em;
}
.hp-p1 { z-index: 2; animation: hp-page1 var(--t) infinite both; }
@keyframes hp-page1 {
  0%, 40% { opacity: 0; transform: translateY(-3em); }
  45%, 92% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
.hp-p2 { transform: translate(.8em, 1.2em) rotate(2deg); animation: hp-page2 var(--t) infinite both; }
@keyframes hp-page2 {
  0%, 46% { opacity: 0; transform: translate(.8em, -2em) rotate(2deg); }
  51%, 92% { opacity: 1; transform: translate(.8em, 1.2em) rotate(2deg); }
  97%, 100% { opacity: 0; transform: translate(.8em, 1.2em) rotate(2deg); }
}
.hp-p3 { transform: translate(1.6em, 2.4em) rotate(4deg); animation: hp-page3 var(--t) infinite both; }
@keyframes hp-page3 {
  0%, 52% { opacity: 0; transform: translate(1.6em, -1em) rotate(4deg); }
  57%, 92% { opacity: 1; transform: translate(1.6em, 2.4em) rotate(4deg); }
  97%, 100% { opacity: 0; transform: translate(1.6em, 2.4em) rotate(4deg); }
}
.hp-p1 .hp-h { display: block; width: 60%; height: 1.4em; border-radius: .3em; background: var(--brand-2); margin-bottom: 1.4em; }
.hp-p1 .hp-r { display: block; height: .8em; border-radius: .3em; background: #e3e7f6; margin: .9em 0; transform-origin: left; animation: hp-row var(--t) infinite both; }
.hp-p1 .hp-r:nth-of-type(2) { width: 92%; animation-delay: .1s; }
.hp-p1 .hp-r:nth-of-type(3) { width: 80%; animation-delay: .2s; }
.hp-p1 .hp-r:nth-of-type(4) { width: 86%; animation-delay: .3s; }
.hp-p1 .hp-r:nth-of-type(5) { width: 64%; animation-delay: .4s; }
@keyframes hp-row {
  0%, 44%  { transform: scaleX(0); }
  50%, 100% { transform: scaleX(1); }
}
/* Report page: bars grow inside the first PDF page, after it has appeared.
   Only transform animates; the base state is the final frame. */
.hp-bars { display: flex; align-items: flex-end; gap: .55em; height: 7.5em; margin-bottom: 1.4em; }
.hp-bars i {
  flex: 1;
  border-radius: .25em .25em 0 0;
  background: linear-gradient(180deg, #8f9bff, var(--brand-2));
  transform-origin: bottom;
  animation: hp-bar var(--t) infinite both;
}
.hp-bars i:nth-child(1) { height: 42%; }
.hp-bars i:nth-child(2) { height: 58%; animation-delay: .08s; }
.hp-bars i:nth-child(3) { height: 47%; animation-delay: .16s; }
.hp-bars i:nth-child(4) { height: 76%; animation-delay: .24s; }
.hp-bars i:nth-child(5) { height: 100%; animation-delay: .32s; }
@keyframes hp-bar {
  0%, 45%   { transform: scaleY(0); }
  53%, 100% { transform: scaleY(1); }
}
/* Certificate page: the first page becomes a certificate — centred lines, a
   seal, a signature line and a QR block. Nothing here animates on its own. */
.hp-cert { text-align: center; }
.hp-cert .hp-h { width: 70%; margin-inline: auto; }
.hp-cert .hp-r { margin-inline: auto; }
.hp-cert .hp-r:nth-of-type(1) { width: 52%; height: 1.1em; background: #c8cff7; }
.hp-cert .hp-r:nth-of-type(2) { width: 78%; }
.hp-cert .hp-r:nth-of-type(3) { width: 64%; }
.hp-seal {
  display: block;
  width: 4.6em; height: 4.6em;
  margin: 2.2em auto 1.6em;
  border-radius: 50%;
  border: .35em solid #dfe4fb;
  background: radial-gradient(circle at 50% 50%, var(--brand-2) 0 32%, #eef1ff 33%);
}
.hp-sign { display: block; width: 46%; height: 2px; margin: 0 auto .7em; background: #c3cadd; }
.hp-qr {
  position: absolute;
  right: 1.7em; bottom: 3.4em;
  width: 3.4em; height: 3.4em;
  background:
    conic-gradient(from 90deg at 50% 50%, #2b3559 0 25%, #fff 0 50%, #2b3559 0 75%, #fff 0);
  background-size: 1.13em 1.13em;
  border: .3em solid #fff;
  outline: 1px solid var(--line-2);
}
/* Receipt page: the front page becomes a narrow thermal slip, with the wider
   A4 copies still visible behind it. */
.hp-slip { left: 41em; width: 15em; padding: 1.6em 1.3em; }
.hp-slip .hp-h { width: 74%; height: 1.1em; margin-inline: auto; }
.hp-slip .hp-r { height: .7em; margin: .7em 0; }
.hp-slip .hp-r:nth-of-type(1) { width: 100%; }
.hp-slip .hp-r:nth-of-type(2) { width: 86%; }
.hp-slip .hp-r:nth-of-type(3) { width: 72%; }
.hp-dash { display: block; margin: 1.2em 0 1em; border-top: 2px dashed #d5dbe9; }
.hp-total { display: flex; justify-content: space-between; gap: 1em; }
.hp-total i { height: 1.1em; border-radius: .2em; background: #c7cdf7; }
.hp-total i:first-child { width: 40%; }
.hp-total i:last-child { width: 32%; background: var(--brand-2); }
.hp-bar {
  display: block;
  height: 2.6em;
  margin-top: 1.6em;
  background: repeating-linear-gradient(90deg, #2b3559 0 .18em, #fff 0 .34em, #2b3559 0 .46em, #fff 0 .72em);
}
/* Document page: the front page shows the document types of the library. */
.hp-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-top: 1.6em; }
.hp-kinds span {
  padding: .9em .4em;
  border-radius: .5em;
  background: #eef1ff;
  border: 1px solid #dfe4fb;
  font: 700 .95em/1 var(--font);
  color: #4b5580;
  text-align: center;
}
.hp-kinds span:first-child { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.hp-tbl { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .45em; margin-top: 1.6em; }
.hp-tbl i { height: 1.2em; border-radius: .2em; background: #eef1ff; }
.hp-tbl i:nth-child(-n+3) { background: #c7cdf7; }
.hp-foot { position: absolute; left: 0; right: 0; bottom: 1.2em; text-align: center; font: 600 .95em var(--font); color: #8b94ad; }
.hp-badge {
  position: absolute;
  right: 0; top: 0;
  padding: .7em 1.2em;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  font: 700 1.15em var(--font);
  color: #17695f;
  z-index: 4;
  animation: hp-badge var(--t) infinite both;
}
.hp-badge::before { content: "✓ "; }
@keyframes hp-badge {
  0%, 60%  { opacity: 0; transform: translateY(.8em); }
  64%, 92% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hp, .hp * { animation: none !important; }
}

/* --- 28. Longer brand name ("Dynamic Document API"): nav never wraps; the
   burger menu takes over earlier than the 900px layout breakpoint. */
.nav-links a, .nav-drop > summary, .nav-actions a, .brand { white-space: nowrap; }
@media (max-width: 1160px) {
  .nav-links, .nav-actions { display: none; }
  .mobile-nav { display: block; }
}

/* --- 29. Wordmark ---------------------------------------------------------
   "Dynamic" over "Document", both lines exactly the same (ink) width, and
   "API" as tall as the two lines together, from the cap top of "Dynamic" to
   the baseline of "Document".

   Measured in Inter 850: "Document" is 1.177x as wide as "Dynamic" at equal
   size, so "Dynamic" gets 1.177x the font size. --bl is the size of
   "Document". Inter metrics: cap height .7275em, ascent .96875em,
   descent .2412em; at line-height 1 the cap top sits .1358em below the line
   box and the baseline .8633em.
     span = .8642 x 1.177 + .02 + .8633 = 1.9005 x --bl
     API  = 1.9005 / .7275            = 2.612 x --bl                      */
.brand-word {
  --bl: .64em;
  display: inline-flex;
  align-items: center;
  gap: .16em;
  line-height: 1;
}
.brand-lines { display: flex; flex-direction: column; letter-spacing: 0; }
.brand-lines > span { display: block; line-height: 1; }
.brand-lines > span:first-child { font-size: calc(var(--bl) * 1.177); }
.brand-lines > span:last-child { font-size: var(--bl); margin-top: .02em; }
.brand-api {
  font-size: calc(var(--bl) * 2.612);
  line-height: .8;
  letter-spacing: -.035em;
  position: relative;
  top: .0044em;   /* the two-line cap span sits .0115 x --bl below its box centre */
}

/* --- 30. Logo card -----------------------------------------------------------
   Icon + wordmark sit together on a white card with a hairline border.
   Chosen over the free-standing lockup on 22.09.2026. */
.brand {
  padding: 5px 13px 5px 5px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: var(--white);
  box-shadow: 0 4px 14px rgba(40, 53, 95, .07);
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* The icon's own glow (0 7px 18px) was made for the free-standing logo and
   spills past the card edge; inside the card a tight shadow is enough. */
.brand .brand-mark { box-shadow: 0 1px 3px rgba(60, 64, 170, .25); }
.brand:hover { border-color: #c9d1f0; box-shadow: 0 6px 18px rgba(40, 53, 95, .1); }
.footer .brand, .footer .brand:hover { color: var(--ink); }

/* --- 31. Footer with a "Use cases" column (six columns) ------------------ */
.footer-grid { grid-template-columns: 1.5fr repeat(6, 1fr); gap: 22px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* --- 32. Hub diagram (PDF generation API) ----------------------------------
   Four inputs → one engine → PDF / image. Dots travel along the lines with
   transform + opacity only; the static diagram is the reduced-motion frame. */
.hub-wrap { width: 100%; max-width: 600px; justify-self: center; }
.hub-fig { width: 100%; height: auto; display: block; }
.hub-fig .hb-box  { fill: #fff; stroke: var(--line-2); }
.hub-fig .hb-eng  { fill: var(--night-2); }
.hub-fig .hb-out  { fill: var(--indigo-50); stroke: #c9cff8; }
.hub-fig .hb-t    { fill: var(--ink); font: 700 15px var(--font); }
.hub-fig .hb-s    { fill: var(--muted); font: 12px var(--mono); }
.hub-fig .hb-et   { fill: #fff; font: 700 16px var(--font); }
.hub-fig .hb-es   { fill: #9db0cf; font: 12px var(--mono); }
.hub-fig .hb-line { stroke: #c3c9e6; stroke-width: 2; fill: none; }
.hub-fig .hb-dot  { fill: var(--brand); opacity: 0; }
.hub-fig .hb-in   { animation: hb-in 4s infinite; }
.hub-fig .hb-o    { animation: hb-o 4s infinite; }
.hub-fig .d2 { animation-delay: .5s; }
.hub-fig .d3 { animation-delay: 1s; }
.hub-fig .d4 { animation-delay: 1.5s; }
@keyframes hb-in {
  0%        { transform: translateX(0);    opacity: 0; }
  6%        { opacity: 1; }
  30%       { transform: translateX(84px); opacity: 1; }
  34%, 100% { transform: translateX(84px); opacity: 0; }
}
@keyframes hb-o {
  0%, 36%   { transform: translateX(0);    opacity: 0; }
  42%       { opacity: 1; }
  64%       { transform: translateX(62px); opacity: 1; }
  68%, 100% { transform: translateX(62px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-fig .hb-dot { animation: none !important; opacity: 0; }
}

/* --- 33. Links from homepage cards to product pages ----------------------- */
.feature-card p a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 2px; }
.use { position: relative; }
.use-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.use-link:hover { color: var(--brand); }


/* --- 34. Legal pages -------------------------------------------------------
   One narrow reading column, a table of contents with anchors, a draft
   notice and a highlight for passages that still need confirmation. No new
   patterns: type, tables and spacing come from the product pages.          */
.legal { padding: 54px 0 76px; }
.legal .prose { width: min(760px, calc(100% - 40px)); }
.legal-kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 10px;
}
.legal h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.04em;
  margin: 0 0 10px;
}
.legal-meta { font-size: .82rem; color: var(--dim); margin: 0 0 26px; }
.legal-draft {
  margin: 0 0 30px;
  padding: 16px 20px;
  border: 1px solid #f0dcae;
  border-left: 4px solid #d99b26;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fff9ee;
}
.legal-draft p { margin: 0; font-size: .92rem; color: #6b4e18; }
mark.tbd {
  background: #ffeeb8;
  color: #6b4e18;
  padding: 0 5px;
  border-radius: 4px;
  font-style: normal;
}
.legal-toc {
  margin: 0 0 38px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.legal-toc-h {
  margin: 0 0 10px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.legal-toc ol {
  margin: 0;
  list-style: decimal;
  padding-left: 1.4em;
  columns: 2;
  column-gap: 30px;
  font-size: .88rem;
}
.legal-toc li { margin: 4px 0; break-inside: avoid; }
.legal-toc a { color: var(--ink-soft); }
.legal-toc a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.legal h2 { scroll-margin-top: 90px; font-size: 1.28rem; margin: 38px 0 12px; }
.legal h2:first-of-type { margin-top: 0; }
.legal .prose p, .legal .prose li { font-size: .97rem; line-height: 1.7; }
.legal .prose ul { margin: 0 0 18px; padding-left: 0; }
.legal .prose ul { list-style: disc; }
.legal .prose ul li { display: list-item; margin-left: 1.15em; }
.legal .prose ul li::before { content: none; }
.legal .prose a:not(.btn) { color: var(--brand-2); text-decoration: underline; text-underline-offset: 2px; }
.legal .table-scroll { margin: 4px 0 20px; }
.legal .facts th { width: 42%; font-weight: 600; }
@media (max-width: 620px) {
  .legal-toc ol { columns: 1; }
  .legal { padding: 38px 0 56px; }
}
.legal-lead { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 30px; }
.legal-form {
  margin: 4px 0 22px;
  padding: 22px 24px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
}
.legal-form p { margin: 0 0 12px; font-size: .95rem; }
.legal-form p:last-child { margin-bottom: 0; }
.legal-formnote { color: var(--dim); font-size: .85rem !important; }
.legal h3 { font-size: 1rem; margin: 26px 0 8px; }
.legal-steps { list-style: decimal; padding-left: 1.4em; margin: 0 0 18px; }
.legal-steps li { display: list-item; margin: 0 0 10px; }

/* --- 35. Image generation hero -----------------------------------------------
   One payload, three sizes: an OG image, a square post and a story, fanned out
   with a render pass sweeping over each in turn. Only transform and opacity
   animate; the base styles are the resting frame, which is also what
   prefers-reduced-motion users see. */
.ig-wrap { container-type: inline-size; width: 100%; max-width: 600px; justify-self: center; }
.ig {
  position: relative;
  aspect-ratio: 60 / 37;
  font-size: 10px;                 /* fallback without container queries */
  font-size: calc(100cqw / 60);
}

/* Warm light behind the stack, so the cards read as lit from the front */
.ig-glow {
  position: absolute;
  left: 4em; top: 1.4em; right: 2em; bottom: 3em;
  border-radius: 50%;
  background:
    radial-gradient(52% 54% at 42% 44%, rgba(120, 128, 255, .3), rgba(120, 128, 255, 0) 70%),
    radial-gradient(46% 48% at 78% 68%, rgba(40, 199, 238, .24), rgba(40, 199, 238, 0) 72%);
}

/* The request that produced them */
.ig-chip {
  position: absolute;
  left: 0; top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .75em 1.1em;
  border-radius: .9em;
  background: var(--night-2);
  box-shadow: 0 1.2em 2.4em rgba(12, 25, 45, .26);
  font: 1.15em/1 var(--mono);
  color: #9db0cf;
  white-space: nowrap;
  animation: ig-float 11s ease-in-out -2s infinite both;
}
.ig-chip b { color: #70d9f7; font-weight: 700; }
.ig-chip em { font-style: normal; color: #f6d481; }

.ig-card {
  position: absolute;
  overflow: hidden;
  display: block;
  border-radius: 1.3em;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 2.2em 4.2em rgba(14, 26, 70, .26), inset 0 .1em 0 rgba(255, 255, 255, .5);
  transform: rotate(var(--r, 0deg));
  animation: ig-float var(--t, 10s) ease-in-out var(--d, 0s) infinite both;
}
@keyframes ig-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-.7em) rotate(var(--r, 0deg)); }
}

/* The render pass: a light band crosses one card after the other */
.ig-sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, 0) 58%);
  transform: translateX(-60%);
  opacity: 0;
  animation: ig-sweep 9s ease-in-out var(--sd, 0s) infinite both;
}
@keyframes ig-sweep {
  0%       { transform: translateX(-60%); opacity: 0; }
  4%       { opacity: 1; }
  16%      { transform: translateX(60%); opacity: 0; }
  100%     { transform: translateX(60%); opacity: 0; }
}

/* Size and format, bottom left of every card */
.ig-tag {
  position: absolute;
  left: .9em; bottom: .9em;
  z-index: 3;
  padding: .42em .7em;
  border-radius: .55em;
  background: rgba(8, 18, 42, .5);
  font: 700 .92em/1 var(--mono);
  letter-spacing: -.01em;
  color: #fff;
}
.ig-kicker {
  display: block;
  margin-bottom: .7em;
  font: 800 .92em/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

/* Story, 9:16, furthest back */
.ig-story {
  --r: 7deg; --t: 12s; --d: -4.4s; --sd: 2.2s;
  left: 46.4em; top: 5.6em;
  width: 12.6em; height: 22.4em;
  padding: 1.5em 1.2em;
  z-index: 2;
  background: linear-gradient(162deg, #1b2450 0%, #4232a6 48%, #7b3fbf 100%);
}
.ig-progress { position: absolute; left: 1.1em; right: 1.1em; top: 1em; display: flex; gap: .3em; }
.ig-progress i { flex: 1; height: .28em; border-radius: .14em; background: rgba(255, 255, 255, .34); }
.ig-progress i:first-child { background: #fff; }
.ig-story-body { position: absolute; left: 1.4em; right: 1.4em; top: 3.6em; }
.ig-story b { display: block; font: 800 2.2em/1.08 var(--font); letter-spacing: -.035em; color: #fff; }
.ig-pill {
  display: inline-block;
  margin-top: 1.3em;
  padding: .55em 1em;
  border-radius: 999px;
  background: #fff;
  font: 700 .95em/1 var(--font);
  color: #2c1c6b;
}

/* Square post, 1:1, front left */
.ig-square {
  --r: -7deg; --t: 10.5s; --d: -1.6s; --sd: 1.1s;
  left: .6em; top: 17.4em;
  width: 17em; height: 17em;
  z-index: 4;
  background: #fff;
}
.ig-photo {
  position: absolute;
  inset: 0 0 5.4em;
  overflow: hidden;
  background: linear-gradient(180deg, #ffd08a 0%, #ff9d7a 52%, #f4707f 100%);
}
.ig-sun {
  position: absolute;
  left: 60%; top: 24%;
  width: 3.1em; height: 3.1em;
  border-radius: 50%;
  background: #fff6d8;
  box-shadow: 0 0 1.6em rgba(255, 246, 216, .9);
}
.ig-ridge, .ig-ridge2 { position: absolute; left: -10%; right: -10%; bottom: 0; }
.ig-ridge  { height: 5.4em; background: #b8496b; clip-path: polygon(0 100%, 22% 26%, 44% 74%, 68% 14%, 100% 86%, 100% 100%); }
.ig-ridge2 { height: 3.2em; background: #7d2f5c; clip-path: polygon(0 100%, 30% 32%, 58% 82%, 84% 40%, 100% 74%, 100% 100%); }
.ig-cap { position: absolute; left: 1.2em; right: 1.2em; bottom: 1.2em; }
.ig-cap b { display: block; font: 800 1.35em/1.15 var(--font); letter-spacing: -.03em; color: var(--ink); }
.ig-cap i { display: block; height: .42em; margin-top: .6em; border-radius: .21em; background: #dfe4f4; }
.ig-cap i:last-of-type { width: 58%; }
/* The OG card covers this card's top-right corner, so the tag sits low. */
.ig-square .ig-tag { left: auto; right: .9em; }

/* OG image, 1200×630, in front */
.ig-og {
  --r: -2deg; --t: 9s; --d: -.4s; --sd: 0s;
  left: 10.4em; top: 3.6em;
  width: 34em; height: 17.85em;
  z-index: 5;
  background: linear-gradient(128deg, #4b46e5 0%, #2f7ef0 54%, #28c7ee 100%);
  box-shadow: 0 2.8em 5em rgba(14, 26, 70, .32), inset 0 .1em 0 rgba(255, 255, 255, .5);
}
.ig-blob {
  position: absolute;
  right: -3.4em; top: -5em;
  width: 17em; height: 17em;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
}
.ig-og-body { position: absolute; left: 2.2em; top: 2.4em; right: 2.2em; }
.ig-og b { display: block; font: 800 2.55em/1.14 var(--font); letter-spacing: -.035em; color: #fff; }
.ig-by { display: flex; align-items: center; gap: .6em; margin-top: 1.5em; }
.ig-by i {
  width: 1.7em; height: 1.7em;
  border-radius: .5em;
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 .32em #2f7ef0, inset 0 0 0 .55em rgba(255, 255, 255, .92);
}
.ig-by em { font: 600 1.02em/1 var(--font); font-style: normal; color: rgba(255, 255, 255, .88); }
.ig-og .ig-tag { background: rgba(8, 18, 42, .34); }

@media (max-width: 900px) {
  /* Stacked under the text: the cluster gets its own breathing room. */
  .ig-wrap { max-width: 520px; margin-top: 8px; }
}

/* --- 36. Pricing hero: one month of usage with an automatic top-up ----------
   The bar fills to 14,830 of 15,000 renders; fewer than 200 are left, so 1,000
   are added for €4 and the month closes at €51 — no overage bill. The numbers
   are the Growth plan's (€47 billed annually, top-ups €4 per 1,000). Only
   transform and opacity animate; the base styles are the final frame, which is
   also what prefers-reduced-motion shows. 10 s loop. */
.pr-wrap { container-type: inline-size; width: 100%; max-width: 540px; justify-self: center; }
.pr {
  --t: 10s;
  position: relative;
  aspect-ratio: 54 / 44;
  font-size: 10px;
  font-size: calc(100cqw / 54);
}
.pr-card {
  position: absolute;
  left: 2em; top: 6em;
  width: 40em;
  padding: 2.4em 2.6em 2.2em;
  border-radius: 1.6em;
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: 0 2.4em 6em rgba(28, 47, 97, .16);
}
.pr-head { display: flex; justify-content: space-between; align-items: center; font: 600 1.25em/1 var(--font); color: var(--muted); }
.pr-plan { padding: .5em 1em; border-radius: 999px; background: #eef0ff; color: var(--brand-2); font-weight: 800; }
.pr-big { margin: 1.3em 0 1em; font: 500 1.45em/1.1 var(--font); color: var(--muted); }
.pr-big b { margin-right: .25em; font-size: 2em; font-weight: 800; letter-spacing: -.045em; color: var(--ink); }
.pr-track { display: flex; gap: .35em; height: 1.4em; }
.pr-inc { position: relative; flex: 15; overflow: hidden; border-radius: 1em 0 0 1em; background: #e9ecf8; }
.pr-inc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #4b3bff, #2b6ff5);
  transform-origin: left;
  transform: scaleX(.989);
  animation: pr-fill var(--t) infinite both;
}
.pr-extra {
  flex: 1;
  border-radius: 0 1em 1em 0;
  background: #10bff2;
  transform-origin: left;
  animation: pr-extra var(--t) infinite both;
}
.pr-legend { display: flex; gap: 1.8em; margin-top: 1em; font: 500 1.1em/1 var(--font); color: var(--muted); }
.pr-legend i { display: inline-block; width: .8em; height: .8em; margin-right: .5em; border-radius: 50%; background: #2b6ff5; }
.pr-legend span + span i { background: #10bff2; }
.pr-rows {
  display: grid;
  gap: .85em;
  margin-top: 2.1em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font: 500 1.25em/1 var(--font);
  color: var(--ink-soft);
}
.pr-rows div { display: flex; justify-content: space-between; gap: 1em; }
.pr-rows b { font-weight: 700; color: var(--ink); }
.pr-rows .pr-total { padding-top: .85em; border-top: 1px dashed var(--line-2); font-weight: 800; color: var(--ink); }
.pr-rows .pr-total b { font-weight: 800; }
.pr-rows .pr-add, .pr-rows .pr-total { animation: pr-in var(--t) infinite both; }
.pr-toast {
  position: absolute;
  right: 0; top: 1.2em;
  display: flex;
  align-items: center;
  gap: 1.1em;
  padding: 1.2em 1.6em 1.2em 1.2em;
  border-radius: 1.3em;
  background: var(--night-2);
  color: #fff;
  box-shadow: 0 1.8em 4em rgba(12, 25, 45, .3);
  z-index: 2;
  animation: pr-in var(--t) infinite both;
}
.pr-toast i {
  display: grid;
  place-items: center;
  width: 2.6em; height: 2.6em;
  border-radius: 50%;
  background: linear-gradient(145deg, #3ad6a4, #17a57e);
  font: 800 1.2em/1 var(--font);
  font-style: normal;
}
.pr-toast b { display: block; font: 700 1.3em/1.2 var(--font); }
.pr-toast small { display: block; margin-top: .3em; font: 500 1.05em/1.2 var(--font); color: #9db0cf; }
.pr-chip {
  position: absolute;
  right: 3em; bottom: 3.4em;
  padding: .8em 1.4em;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  font: 700 1.2em/1 var(--font);
  color: #17695f;
  z-index: 2;
  animation: pr-pop var(--t) infinite both;
}
.pr-chip::before { content: "✓ "; }
@keyframes pr-fill {
  0%, 4%    { transform: scaleX(0); }
  40%, 92%  { transform: scaleX(.989); }
  97%, 100% { transform: scaleX(0); }
}
@keyframes pr-extra {
  0%, 46%   { transform: scaleX(0); }
  54%, 92%  { transform: scaleX(1); }
  97%, 100% { transform: scaleX(0); }
}
@keyframes pr-in {
  0%, 44%   { opacity: 0; transform: translateY(.8em); }
  50%, 92%  { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes pr-pop {
  0%, 58%   { opacity: 0; transform: scale(.85); }
  64%, 92%  { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pr, .pr *, .pr *::after { animation: none !important; }
}

/* --- 37. "EN" marker in the German menu -------------------------------------
   Docs and tools exist only in English; the German menu says so before the
   click instead of after it. */
.lang-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px 0;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  color: var(--muted);
  vertical-align: 1px;
}