/* Ported for the idsystems.ch prototype: TYPO3 host rules and TTF font-faces removed, the shell serves Rajdhani. */
/* ID-DIGITIZER product page — scoped to avoid conflicts with the existing website */
.ids-digitizer-page {
  --ids-magenta: #ab005e;
  --ids-magenta-dark: #85004a;
  --ids-magenta-light: #e94ba2;
  --ids-magenta-tint: #f5e0ec;
  --ids-magenta-pale: #fbf2f7;
  --ids-ink: #111214;
  --ids-charcoal: #2c2c2b;
  --ids-panel: #1b1c20;
  --ids-grey: #585857;
  --ids-muted: #6f7075;
  --ids-line: #e0d0d8;
  /* Fixed local base for all sizing below — deliberately NOT "1rem".
     rem is relative to the SITE'S root <html> font-size, which on
     idsystems.ch computes to 10px (a 62.5% root-scaling reset), not
     the 16px this page was designed and tested against. Every size
     below is written as calc(N * var(--ids-rem)) instead of "Nrem" so
     it renders correctly regardless of what the rest of the site sets
     the root font-size to. */
  --ids-rem: 16px;
  --ids-soft: #f2f2f2;
  --ids-white: #ffffff;
  --ids-ui-text: calc(1 * var(--ids-rem));
  --ids-ui-line: 1.28;
  --ids-note-text: calc(1 * var(--ids-rem));
  --ids-note-line: 1.38;
  --ids-faq-question: calc(1.05 * var(--ids-rem));
  --ids-faq-answer: calc(.98 * var(--ids-rem));
  color: var(--ids-ink) !important;
  background: var(--ids-white) !important;
  font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow: hidden;
}
/* ROOT-CAUSE FIX — do not remove.
   idsystems.ch's global stylesheet contains a bare universal rule:
       * { color: rgb(77,77,77); font-family: "Rajdhani", sans-serif; }
   A universal selector matches every descendant DIRECTLY. A directly-set
   value always beats an INHERITED one, regardless of how specific or
   !important the ancestor's rule is — inheritance simply isn't in that
   competition. That is why hardening the section/hero/card wrappers had
   no effect: each child was being painted #4d4d4d by `*` independently.
   Re-asserting `color: inherit` here restores the normal inheritance
   chain for everything inside the component. This selector (one class +
   universal) outranks the site's bare `*`, so it wins cleanly, and it
   deliberately does NOT use !important so the component's own explicit
   colour rules below still apply as normal. */
.ids-digitizer-page *,
.ids-digitizer-page *::before,
.ids-digitizer-page *::after { box-sizing: border-box; color: inherit; }
/* The site also sets font-family on the same bare `*` rule, and has
   element-level rules (e.g. `.content-area span`, `.content-area li`)
   that hit descendants DIRECTLY and therefore beat inheritance from the
   component's wrappers — same mechanism as the colour problem above.
   Re-assert inheritance for the text-bearing elements the component uses. */
.ids-digitizer-page span,
.ids-digitizer-page li,
.ids-digitizer-page p,
.ids-digitizer-page strong,
.ids-digitizer-page b,
.ids-digitizer-page em,
.ids-digitizer-page td,
.ids-digitizer-page th,
.ids-digitizer-page summary,
.ids-digitizer-page figcaption { color: inherit; }
.ids-digitizer-page,
.ids-digitizer-page * { font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif; }
/* ...except the deliberately monospaced parts of the demo/code panels. */
.ids-digitizer-page .ids-demo-json,
.ids-digitizer-page .ids-demo-json *,
.ids-digitizer-page .ids-demo-card-value,
.ids-digitizer-page .ids-demo-step-num { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.ids-digitizer-page img { display: block; max-width: 100%; height: auto; }
/* The site sets link colour at two levels (`a` and `.MainContent a`), both
   of which hit anchors directly and outrank a plain `color: inherit` here.
   Links inside this component should take their surrounding text colour;
   the few that are meant to look like links style themselves explicitly. */
.ids-digitizer-page a { color: inherit !important; }
.ids-digitizer-page .ids-deployment-link { color: var(--ids-magenta) !important; }
.ids-digitizer-page .ids-deployment-card--local .ids-deployment-link { color: var(--ids-magenta-light) !important; }
.ids-digitizer-page button,
.ids-digitizer-page input,
.ids-digitizer-page textarea,
.ids-digitizer-page select { font: inherit; }
.ids-digitizer-page .ids-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.ids-digitizer-page .ids-section { padding: 64px 0; }
.ids-digitizer-page .ids-section--soft { background: var(--ids-soft) !important; }
.ids-digitizer-page .ids-section--dark { color: var(--ids-white) !important; background: var(--ids-charcoal) !important; }
.ids-digitizer-page .ids-eyebrow {
  margin: 0 0 9.6px;
  color: var(--ids-magenta) !important;
  font-size: calc(.68 * var(--ids-rem));
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ids-digitizer-page .ids-eyebrow::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  margin-right: 8px;
  margin-bottom: 3px;
  background: var(--ids-magenta) !important;
  vertical-align: middle;
}
.ids-digitizer-page h1,
.ids-digitizer-page h2,
.ids-digitizer-page h3 { margin-top: 0; line-height: 1.12; color: var(--ids-ink) !important; }
.ids-digitizer-page h1 { margin-bottom: 22px; font-size: clamp(calc(2.2 * var(--ids-rem)), 5vw, calc(3.6 * var(--ids-rem))); letter-spacing: -.018em; }
.ids-digitizer-page h2 { margin-bottom: 16px; font-size: clamp(calc(1.5 * var(--ids-rem)), 2.8vw, calc(2.1 * var(--ids-rem))); letter-spacing: -.012em; }
.ids-digitizer-page h3 { margin-bottom: 11px; font-size: calc(1.2 * var(--ids-rem)); }
/* Dark-surface headings: a bare heading only INHERITS color from its dark
   wrapper, and inheritance can never win against a direct h1/h2/h3 rule
   elsewhere on the host site — even a weak one, even against !important on
   the wrapper — because inherited values aren't in that competition at all.
   Every heading on a dark background needs its own direct, explicit rule. */
.ids-digitizer-page .ids-hero h1,
.ids-digitizer-page .ids-hero h2,
.ids-digitizer-page .ids-hero h3,
.ids-digitizer-page .ids-section--dark h1,
.ids-digitizer-page .ids-section--dark h2,
.ids-digitizer-page .ids-section--dark h3,
.ids-digitizer-page .ids-deployment-card--local h1,
.ids-digitizer-page .ids-deployment-card--local h2,
.ids-digitizer-page .ids-deployment-card--local h3,
.ids-digitizer-page .ids-industries h1,
.ids-digitizer-page .ids-industries h2,
.ids-digitizer-page .ids-industries h3,
.ids-digitizer-page .ids-cta h1,
.ids-digitizer-page .ids-cta h2,
.ids-digitizer-page .ids-cta h3 { color: var(--ids-white) !important; }
.ids-digitizer-page p { margin-top: 0; }
.ids-digitizer-page .ids-lead { max-width: 790px; margin-bottom: 0; color: #55575d !important; font-size: calc(1.05 * var(--ids-rem)); line-height: 1.5; }
.ids-digitizer-page .ids-section--dark .ids-lead { color: #c9c9cf !important; }
.ids-digitizer-page .ids-highlight { color: var(--ids-magenta) !important; }
.ids-digitizer-page .ids-button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.ids-digitizer-page .ids-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 14px 26px;
  border: 1px solid var(--ids-magenta);
  border-radius: 0;
  background: var(--ids-magenta) !important;
  color: var(--ids-white) !important;
  font-size: var(--ids-ui-text);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ids-digitizer-page .ids-button:hover { transform: translateY(-2px); background: var(--ids-magenta-dark) !important; border-color: var(--ids-magenta-dark) !important; }
.ids-digitizer-page .ids-button--secondary { background: transparent !important; color: rgba(255,255,255,.8) !important; border-width: 1.5px; border-color: rgba(255,255,255,.3) !important; }
.ids-digitizer-page .ids-button--secondary:hover { background: rgba(255,255,255,.05) !important; color: var(--ids-white) !important; border-color: var(--ids-white) !important; }
.ids-digitizer-page .ids-button--light { background: var(--ids-white) !important; color: var(--ids-ink) !important; border-color: var(--ids-white) !important; }
.ids-digitizer-page .ids-button--light:hover { background: #f2f2f5 !important; color: var(--ids-ink) !important; border-color: #f2f2f5 !important; }
.ids-digitizer-page .ids-button svg { width: 18px; height: 18px; margin-left: 10px; }

/* Hero */
.ids-digitizer-page .ids-hero {
  position: relative;
  min-height: 690px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: var(--ids-white) !important;
  background: var(--ids-charcoal) !important;
}
.ids-digitizer-page .ids-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(171,0,94,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(171,0,94,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ids-digitizer-page .ids-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ids-magenta) !important;
}
.ids-digitizer-page .ids-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr);
  align-items: center;
  gap: clamp(42px, 6vw, 86px);
  padding: 70px 0 62px;
}
.ids-digitizer-page .ids-hero__content { min-width: 0; }
.ids-digitizer-page .ids-hero h1 { max-width: 650px; color: var(--ids-white) !important; }
.ids-digitizer-page .ids-hero__product { display: inline-flex; gap: 7px; align-items: baseline; margin-bottom: 25px; font-size: calc(1 * var(--ids-rem)); font-weight: 700; letter-spacing: .08em; color: var(--ids-white) !important; }
.ids-digitizer-page .ids-hero__product span:last-child { color: var(--ids-magenta-light) !important; }
.ids-digitizer-page .ids-hero .ids-lead { max-width: 650px; color: #e4e4e7 !important; font-size: calc(1.1 * var(--ids-rem)); }
.ids-digitizer-page .ids-hero .ids-hero__trial-note { margin: 14px 0 0; color: #b8b8bf !important; font-size: calc(.95 * var(--ids-rem)); line-height: 1.5; }
.ids-digitizer-page .ids-hero .ids-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; color: #d0d0d5 !important; font-size: calc(.95 * var(--ids-rem)); line-height: 1.35; }
.ids-digitizer-page .ids-hero__facts span { display: inline-flex; align-items: center; gap: 8px; color: #d0d0d5 !important; }
.ids-digitizer-page .ids-hero__facts span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ids-magenta-light); box-shadow: 0 0 14px rgba(233,75,162,.75); }
.ids-digitizer-page .ids-hero__visual { min-width: 0; margin: 0; }
.ids-digitizer-page .ids-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: #07080a;
  box-shadow: 0 35px 90px rgba(0,0,0,.52), 0 0 55px rgba(171,0,94,.14);
}
.ids-digitizer-page .ids-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.ids-digitizer-page .ids-hero-video { width: 100%; height: 100%; display: block; object-fit: cover; background: #08090b; }
.ids-digitizer-page .ids-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.45));
}
.ids-digitizer-page .ids-video-play[hidden] { display: none; }
.ids-digitizer-page .ids-video-play__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(171,0,94,.92);
  box-shadow: 0 0 0 10px rgba(171,0,94,.13), 0 0 38px rgba(171,0,94,.42);
  transition: transform .18s ease, background .18s ease;
}
.ids-digitizer-page .ids-video-play__icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 19px solid #fff;
}
.ids-digitizer-page .ids-video-play:hover .ids-video-play__icon { transform: scale(1.06); background: var(--ids-magenta-dark); }
.ids-digitizer-page .ids-video-play__label { padding: 10px 18px; border-radius: 999px; background: rgba(7,8,10,.72); font-size: calc(1.4 * var(--ids-rem)); font-weight: 700; line-height: var(--ids-ui-line); letter-spacing: .02em; backdrop-filter: blur(8px); }
.ids-digitizer-page .ids-hero .ids-hero__visual figcaption { margin-top: 10px; color: #bfc0c6 !important; font-size: calc(.95 * var(--ids-rem)); line-height: var(--ids-note-line); text-align: center; }

/* Intro strip */
.ids-digitizer-page .ids-proof-strip { background: var(--ids-white) !important; border-bottom: 1px solid var(--ids-line); }
.ids-digitizer-page .ids-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ids-digitizer-page .ids-proof-item { padding: 22px 24px; border-right: 1px solid var(--ids-line); }
.ids-digitizer-page .ids-proof-item:first-child { padding-left: 0; }
.ids-digitizer-page .ids-proof-item:last-child { border-right: 0; }
.ids-digitizer-page .ids-proof-item strong { display: block; margin-bottom: 2px; font-size: calc(1.05 * var(--ids-rem)); line-height: 1.25; }
.ids-digitizer-page .ids-proof-item span { color: var(--ids-muted) !important; font-size: var(--ids-note-text); line-height: var(--ids-note-line); }

/* Two-column content */
.ids-digitizer-page .ids-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 54px; }
.ids-digitizer-page .ids-copy p { color: #55575d !important; font-size: calc(1.02 * var(--ids-rem)); }
.ids-digitizer-page .ids-check-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ids-digitizer-page .ids-check-list li { position: relative; padding-left: 34px; color: var(--ids-ink) !important; }
.ids-digitizer-page .ids-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: rgba(171,0,94,.1) !important;
  color: var(--ids-magenta) !important;
  font-size: calc(.88 * var(--ids-rem));
  font-weight: 700;
}
.ids-digitizer-page .ids-interface-frame { position: relative; padding: 14px; border: 1px solid #d7d7db; background: #fff !important; box-shadow: 0 24px 70px rgba(17,18,20,.13); }
.ids-digitizer-page .ids-interface-frame::before { content: "ID-DIGITIZER INTERFACE"; display: block; padding: 2px 0 12px; color: var(--ids-magenta) !important; font-size: calc(.8 * var(--ids-rem)); line-height: var(--ids-ui-line); font-weight: 700; letter-spacing: .14em; }
.ids-digitizer-page:lang(de) .ids-interface-frame::before { content: "ID-DIGITIZER OBERFLÄCHE"; }
.ids-digitizer-page:lang(fr) .ids-interface-frame::before { content: "INTERFACE ID-DIGITIZER"; }
.ids-digitizer-page .ids-interface-frame img { border: 1px solid #ececef; }

/* Workflow */
.ids-digitizer-page .ids-workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.ids-digitizer-page .ids-workflow-step { position: relative; padding: 28px 20px 24px; border: 1px solid rgba(255,255,255,.1); border-top: 3px solid var(--ids-magenta); background: rgba(255,255,255,.04) !important; }
.ids-digitizer-page .ids-workflow-step__icon { width: 72px; height: 72px; display: block; margin-bottom: 14px; }
.ids-digitizer-page .ids-workflow-step__number { position: absolute; top: 26px; right: 22px; font-weight: 700; color: var(--ids-magenta-light) !important; font-size: calc(1.3 * var(--ids-rem)); letter-spacing: .04em; }
.ids-digitizer-page .ids-workflow-step h3 { color: var(--ids-white) !important; margin-bottom: 6px; font-size: calc(1.05 * var(--ids-rem)); }
.ids-digitizer-page .ids-workflow-step p { margin-bottom: 0; color: #c4c5ca !important; font-size: calc(1 * var(--ids-rem)); line-height: var(--ids-note-line); }

/* Feature cards */
.ids-digitizer-page .ids-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.ids-digitizer-page .ids-card { min-height: 220px; padding: 26px; border: 1px solid var(--ids-line); border-top: 3px solid var(--ids-magenta); background: var(--ids-white) !important; transition: transform .18s ease, box-shadow .18s ease; }
.ids-digitizer-page .ids-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(171,0,94,.14); }
.ids-digitizer-page .ids-card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; background: rgba(171,0,94,.09) !important; color: var(--ids-magenta) !important; }
.ids-digitizer-page .ids-card__icon svg { width: 27px; height: 27px; }
.ids-digitizer-page .ids-card p { margin-bottom: 0; color: var(--ids-muted) !important; font-size: calc(1.02 * var(--ids-rem)); line-height: 1.55; }


/* Deployment options */
.ids-digitizer-page .ids-deployment-section { border-top: 1px solid var(--ids-line); border-bottom: 1px solid var(--ids-line); }
.ids-digitizer-page .ids-deployment-intro { max-width: 920px; }
.ids-digitizer-page .ids-deployment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.ids-digitizer-page .ids-deployment-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  min-height: 100%;
  padding: 31px;
  border: 1px solid var(--ids-line);
  border-top: 3px solid var(--ids-magenta);
  background: var(--ids-white) !important;
  box-shadow: 0 16px 44px rgba(17,18,20,.07);
}
.ids-digitizer-page .ids-deployment-card--local { border-color: #3a3b41; border-top-color: var(--ids-magenta); background: var(--ids-charcoal) !important; color: var(--ids-white) !important; box-shadow: 0 22px 58px rgba(17,18,20,.18); }
.ids-digitizer-page .ids-deployment-card__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(171,0,94,.28);
  border-radius: 50%;
  background: rgba(171,0,94,.08) !important;
  color: var(--ids-magenta) !important;
}
.ids-digitizer-page .ids-deployment-card--local .ids-deployment-card__icon { border-color: rgba(233,75,162,.42); background: rgba(171,0,94,.18) !important; color: var(--ids-magenta-light) !important; }
.ids-digitizer-page .ids-deployment-card__icon svg { width: 34px; height: 34px; }
.ids-digitizer-page .ids-deployment-card__label { margin: 0 0 6px; color: var(--ids-magenta) !important; font-size: calc(.8 * var(--ids-rem)); font-weight: 700; line-height: var(--ids-ui-line); letter-spacing: .1em; text-transform: uppercase; }
.ids-digitizer-page .ids-deployment-badge { display: inline-block; margin: 0 0 10px; padding: 5px 13px; border-radius: 20px; background: var(--ids-magenta) !important; color: #fff !important; font-size: calc(.75 * var(--ids-rem)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ids-digitizer-page .ids-deployment-card--local .ids-deployment-card__label { color: var(--ids-magenta-light) !important; }
.ids-digitizer-page .ids-deployment-card h3 { margin-bottom: 12px; font-size: calc(1.4 * var(--ids-rem)); line-height: 1.18; }
.ids-digitizer-page .ids-deployment-card p:not(.ids-deployment-card__label):not(.ids-deployment-badge) { margin-bottom: 18px; color: #55575d !important; font-size: calc(1.02 * var(--ids-rem)); line-height: 1.5; }
/* Escalated on purpose: the base rule above has TWO :not() clauses, which
   gives it higher specificity (0,0,4,1) than a simple two-class override
   like ".ids-deployment-card--local p:not(...)" (0,0,3,1) would have —
   even with matching !important, specificity still decides the tie, and
   the base rule was winning. Repeating the scope class here guarantees
   this override always outranks the base regardless of how many :not()
   exclusions either selector carries. */
.ids-digitizer-page.ids-digitizer-page .ids-deployment-card--local p:not(.ids-deployment-card__label) { color: #d1d1d6 !important; }
.ids-digitizer-page .ids-deployment-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ids-digitizer-page .ids-deployment-tags span { padding: 7px 11px; border: 1px solid #d8d8dd; background: #f7f7f9 !important; color: #44454a !important; font-size: calc(.85 * var(--ids-rem)); font-weight: 600; line-height: 1.25; }
.ids-digitizer-page .ids-deployment-card--local .ids-deployment-tags span { border-color: #3f4047; background: #202126 !important; color: #ededf0 !important; }
.ids-digitizer-page .ids-deployment-link { display: inline-flex; align-items: center; gap: 9px; color: var(--ids-magenta) !important; font-size: calc(1 * var(--ids-rem)); font-weight: 700; line-height: 1.25; text-decoration: none; }
.ids-digitizer-page .ids-deployment-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ids-digitizer-page .ids-deployment-card--local .ids-deployment-link { color: var(--ids-magenta-light) !important; }

/* Use cases */
.ids-digitizer-page .ids-usecase-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: start; }
.ids-digitizer-page .ids-document-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.ids-digitizer-page .ids-document-list span { display: flex; align-items: center; min-height: 58px; padding: 13px 16px; border-left: 4px solid var(--ids-magenta); background: var(--ids-soft) !important; font-size: calc(.95 * var(--ids-rem)); font-weight: 700; color: var(--ids-ink) !important; }
.ids-digitizer-page .ids-industries { padding: 34px; border-top: 3px solid var(--ids-magenta); background: var(--ids-charcoal) !important; color: var(--ids-white) !important; }
.ids-digitizer-page .ids-industries h3 { font-size: calc(1.2 * var(--ids-rem)); }
.ids-digitizer-page .ids-industries ul { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ids-digitizer-page .ids-industries li { padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); color: #dedee2 !important; font-size: calc(1.02 * var(--ids-rem)); }
.ids-digitizer-page .ids-industries li:last-child { padding-bottom: 0; border-bottom: 0; }

/* Integration/code */
.ids-digitizer-page .ids-integration-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: center; }
.ids-digitizer-page .ids-code-card { overflow: hidden; border: 1px solid #33343a; background: #15161a !important; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.ids-digitizer-page .ids-code-card__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #33343a; background: #202126 !important; color: #c8c9ce !important; font-size: calc(1 * var(--ids-rem)); line-height: var(--ids-ui-line); }
.ids-digitizer-page .ids-code-card__bar span { color: #c8c9ce !important; }
.ids-digitizer-page .ids-code-card pre span:not(.ids-code-key):not(.ids-code-number) { color: #d7d7db !important; }
.ids-digitizer-page .ids-code-dots { display: flex; gap: 7px; }
.ids-digitizer-page .ids-code-dots i { width: 8px; height: 8px; border-radius: 50%; background: #5b5c62; }
/* Both JSON/code areas on the page wrap their content in <pre><code>.
   This stylesheet previously styled `pre` but never `code` — and `code`
   is the innermost element, painted on top of everything. Browser
   defaults AND most CMS themes give code/pre their own light background
   and colour, which is what was covering the dark panels. Force both to
   be transparent so the panel behind them shows through, and let the
   syntax-highlight spans supply their own colours. */
.ids-digitizer-page pre,
.ids-digitizer-page code,
.ids-digitizer-page .ids-demo-json pre,
.ids-digitizer-page .ids-demo-json code,
.ids-digitizer-page .ids-code-card pre,
.ids-digitizer-page .ids-code-card code {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page pre,
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page code { background: transparent !important; background-color: transparent !important; }
.ids-digitizer-page .ids-demo-json code { color: #9aa0ad !important; }
.ids-digitizer-page .ids-code-card code { color: #e8e8eb !important; }
.ids-digitizer-page pre { margin: 0; padding: 28px; overflow: auto; color: #e8e8eb !important; font: 500 17px/1.7 "Rajdhani", "Arial Narrow", Arial, sans-serif;
  letter-spacing: .015em; }
.ids-digitizer-page .ids-code-key { color: #e94ba2 !important; }
.ids-digitizer-page .ids-code-string { color: #d7d7db !important; }
.ids-digitizer-page .ids-code-number { color: #ffb3d9 !important; }
.ids-digitizer-page .ids-integration-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.ids-digitizer-page .ids-integration-tags span { padding: 10px 15px; border: 1px solid #393a40; color: #d5d5da !important; font-size: calc(.85 * var(--ids-rem)); line-height: var(--ids-ui-line); }

/* Comparison */
.ids-digitizer-page .ids-comparison { margin-top: 28px; border: 1px solid var(--ids-line); }
.ids-digitizer-page .ids-comparison-row { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.ids-digitizer-page .ids-comparison-row > div { padding: 20px 22px; border-right: 1px solid var(--ids-line); border-bottom: 1px solid var(--ids-line); font-size: calc(.95 * var(--ids-rem)); line-height: 1.48; }
.ids-digitizer-page .ids-comparison-row > div:last-child { border-right: 0; }
.ids-digitizer-page .ids-comparison-row:last-child > div { border-bottom: 0; }
.ids-digitizer-page .ids-comparison-row--head { background: var(--ids-charcoal) !important; color: var(--ids-white) !important; font-weight: 700; }
.ids-digitizer-page .ids-comparison-row--head > div { border-right-color: rgba(255,255,255,.08); text-transform: uppercase; letter-spacing: .06em; font-size: calc(.8 * var(--ids-rem)); }
.ids-digitizer-page .ids-comparison-row--head > div:nth-child(3) { color: #ff9dc9 !important; }
.ids-digitizer-page .ids-comparison-row:nth-child(even) > div:not(:nth-child(3)) { background: var(--ids-soft) !important; }
.ids-digitizer-page .ids-comparison-row > div:first-child { font-weight: 700; }
.ids-digitizer-page .ids-comparison-row > div:nth-child(2) { color: var(--ids-muted) !important; }
.ids-digitizer-page .ids-comparison-row > div:nth-child(3) { background: var(--ids-magenta-tint) !important; color: var(--ids-magenta-dark) !important; font-weight: 700; }

/* FAQ */
.ids-digitizer-page .ids-faq { max-width: 1060px; margin: 26px auto 0; border-top: 1px solid var(--ids-line); }
.ids-digitizer-page .ids-faq details { border-bottom: 1px solid var(--ids-line); }
.ids-digitizer-page .ids-faq summary { position: relative; padding: 22px 58px 22px 0; cursor: pointer; font-size: var(--ids-faq-question); font-weight: 700; line-height: 1.3; list-style: none; transition: color .15s ease; }
.ids-digitizer-page .ids-faq summary::-webkit-details-marker { display: none; }
.ids-digitizer-page .ids-faq summary:hover { color: var(--ids-magenta) !important; }
.ids-digitizer-page .ids-faq details[open] summary { color: var(--ids-magenta) !important; }
.ids-digitizer-page .ids-faq summary::after { content: "+"; position: absolute; right: 5px; top: 13px; color: var(--ids-magenta) !important; font-size: calc(1.6 * var(--ids-rem)); font-weight: 400; line-height: 1; }
.ids-digitizer-page .ids-faq details[open] summary::after { content: "\2212"; }
.ids-digitizer-page .ids-faq details p { max-width: 980px; padding: 0 56px 24px 0; color: var(--ids-muted) !important; font-size: var(--ids-faq-answer); line-height: 1.45; }

/* CTA */
.ids-digitizer-page .ids-cta { position: relative; padding: 58px 0; overflow: hidden; background: var(--ids-magenta) !important; color: var(--ids-white) !important; }
.ids-digitizer-page .ids-cta::after { content: "{}"; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.09); font: 700 clamp(calc(10 * var(--ids-rem)), 28vw, calc(25 * var(--ids-rem)))/1 "Rajdhani", "Arial Narrow", Arial, sans-serif; }
.ids-digitizer-page .ids-cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; }
.ids-digitizer-page .ids-cta h2 { max-width: 780px; margin-bottom: 12px; }
.ids-digitizer-page .ids-cta p { max-width: 730px; margin-bottom: 0; color: #ffe6f4 !important; }
.ids-digitizer-page .ids-cta__actions { display: grid; gap: 12px; min-width: min(100%, 330px); }
.ids-digitizer-page .ids-button--light-outline { background: transparent !important; color: var(--ids-white) !important; border-color: rgba(255,255,255,.78); }
.ids-digitizer-page .ids-button--light-outline:hover { background: rgba(255,255,255,.12) !important; border-color: var(--ids-white) !important; }

/* Standalone preview header/footer */
.ids-demo-header { position: sticky; top: 0; z-index: 50; border-bottom: 2.5px solid #ab005e; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif; }
.ids-demo-header__inner { width: min(1180px, calc(100% - 40px)); min-height: 68px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ids-demo-logo { font-size: calc(1.55 * var(--ids-rem)); font-weight: 700; letter-spacing: -.02em; text-decoration: none; color: #585857; }
.ids-demo-logo span { color: #ab005e; }
.ids-demo-nav { display: flex; gap: 22px; align-items: center; font-size: calc(.9 * var(--ids-rem)); line-height: 1.25; }
.ids-demo-nav a { color: #585857; text-decoration: none; font-weight: 500; transition: color .15s ease; }
.ids-demo-nav a:hover { color: #ab005e; }
.ids-demo-nav a:last-child { padding: 7px 18px; background: #ab005e; color: #fff; font-weight: 600; transition: background .15s ease; }
.ids-demo-nav a:last-child:hover { background: #85004a; color: #fff; }
.ids-demo-footer { padding: 26px 20px; text-align: center; background: #2c2c2b; border-top: 3px solid #ab005e; color: #b9b9bf; font: 400 calc(.83 * var(--ids-rem))/1.38 "Rajdhani", "Arial Narrow", Arial, sans-serif; }

@media (max-width: 980px) {
  .ids-digitizer-page .ids-section { padding: 52px 0; }
  .ids-digitizer-page .ids-two-col,
  .ids-digitizer-page .ids-usecase-grid,
  .ids-digitizer-page .ids-integration-grid { grid-template-columns: 1fr; gap: 34px; }
  .ids-digitizer-page .ids-card-grid { grid-template-columns: repeat(2, 1fr); }
  .ids-digitizer-page .ids-deployment-grid { grid-template-columns: 1fr; }
  .ids-digitizer-page .ids-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .ids-digitizer-page .ids-proof-item:nth-child(2) { border-right: 0; }
  .ids-digitizer-page .ids-proof-item:nth-child(-n+2) { border-bottom: 1px solid var(--ids-line); }
  .ids-digitizer-page .ids-cta__inner { grid-template-columns: 1fr; }
  .ids-digitizer-page .ids-workflow-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ids-digitizer-page .ids-container { width: min(100% - 28px, 1180px); }
  .ids-digitizer-page .ids-hero { min-height: 690px; align-items: end; }
  .ids-digitizer-page .ids-hero__content { padding: 88px 0 55px; }
  .ids-digitizer-page .ids-proof-grid { grid-template-columns: 1fr; }
  .ids-digitizer-page .ids-proof-item,
  .ids-digitizer-page .ids-proof-item:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--ids-line); }
  .ids-digitizer-page .ids-proof-item:last-child { border-bottom: 0; }
  .ids-digitizer-page .ids-card-grid { grid-template-columns: 1fr; }
  .ids-digitizer-page .ids-card { min-height: 0; }
  .ids-digitizer-page .ids-document-list { grid-template-columns: 1fr; }
  .ids-digitizer-page .ids-deployment-card { grid-template-columns: 1fr; padding: 25px; }
  .ids-digitizer-page .ids-deployment-card__icon { width: 56px; height: 56px; }
  .ids-digitizer-page .ids-workflow-grid { grid-template-columns: 1fr; }
  .ids-digitizer-page .ids-comparison { overflow-x: auto; }
  .ids-digitizer-page .ids-comparison-row { min-width: 720px; }
  .ids-demo-nav a:not(:last-child) { display: none; }
  .ids-digitizer-page .ids-button { width: 100%; padding: 14px 20px; }
  .ids-digitizer-page .ids-faq summary { padding-right: 48px; }
  .ids-digitizer-page .ids-faq details p { padding-right: 16px; }
  .ids-digitizer-page .ids-cta__actions { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ids-digitizer-page *, .ids-digitizer-page *::before, .ids-digitizer-page *::after { scroll-behavior: auto !important; transition: none !important; }
}


/* Hero video responsive layout */
@media (max-width: 1040px) {
  .ids-digitizer-page .ids-hero__grid { grid-template-columns: 1fr; gap: 34px; padding: 58px 0 50px; }
  .ids-digitizer-page .ids-hero__content { max-width: 780px; }
  .ids-digitizer-page .ids-hero__visual { width: min(880px, 100%); }
}
@media (max-width: 720px) {
  .ids-digitizer-page .ids-hero { min-height: 0; align-items: center; }
  .ids-digitizer-page .ids-hero__grid { gap: 28px; padding: 48px 0 42px; }
  .ids-digitizer-page .ids-hero__content { padding: 0; }
  .ids-digitizer-page .ids-video-frame { border-radius: 12px; }
  .ids-digitizer-page .ids-video-play__icon { width: 64px; height: 64px; }
  .ids-digitizer-page .ids-video-play__icon::before { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 16px; }
}
/* ===================================================================
   ID-DIGITIZER interactive demo (replaces the hero video)
   Brand-corrected from an initial Gemini-generated prototype:
   - magenta corrected to the real brand hex (was a brighter off-brand shade)
   - the cyan accent was removed entirely (not part of the ID-Systems brand)
   - fonts switched to match the rest of the page (Rajdhani / system fallback)
   - all classes/ids prefixed ids-demo- to avoid colliding with the rest
     of this shared stylesheet
   - responsive rules added (the original had none at all)
=================================================================== */

.ids-digitizer-page .ids-demo {
  --demo-bg: #08090d;
  --demo-panel-bg: rgba(15, 18, 26, 0.75);
  --demo-panel-border: rgba(255, 255, 255, 0.08);
  --demo-panel-border-glow: rgba(171, 0, 94, 0.35);

  --demo-magenta: var(--ids-magenta);
  --demo-magenta-light: var(--ids-magenta-light);
  --demo-magenta-glow: rgba(171, 0, 94, 0.45);
  --demo-magenta-dim: rgba(171, 0, 94, 0.14);

  --demo-green: #00c853;
  --demo-green-glow: rgba(0, 200, 83, 0.25);

  --demo-text-main: #f8fafc;
  --demo-text-muted: #7d8494;
  --demo-text-dim: #9aa0ad;

  position: relative;
  width: 100%;
  background-color: var(--demo-bg) !important;
  border-radius: 16px;
  padding: 20px;
  font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif;
  color: var(--demo-text-main) !important;
  box-shadow: 0 25px 70px rgba(0,0,0,0.55);
  background-image:
    radial-gradient(circle at 50% 20%, rgba(171, 0, 94, 0.08) 0%, transparent 60%),
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
}

.ids-digitizer-page .ids-demo * { box-sizing: border-box; }

/* ---------- header / stepper ---------- */
.ids-digitizer-page .ids-demo-header {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--demo-panel-bg); backdrop-filter: blur(12px);
  border: 1px solid var(--demo-panel-border); border-radius: 12px;
  padding: 12px 20px; margin-bottom: 12px; flex-wrap: wrap; gap: 10px;
}
.ids-digitizer-page .ids-demo-brand {
  font-size: calc(1.3 * var(--ids-rem)); font-weight: 800; letter-spacing: .05em;
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.ids-digitizer-page .ids-demo-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--demo-magenta); box-shadow: 0 0 10px var(--demo-magenta);
  animation: idsDemoPulse 1.2s infinite ease-in-out; flex-shrink: 0;
}
@keyframes idsDemoPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .4; } }
.ids-digitizer-page .ids-demo-badge {
  background: var(--demo-magenta-dim) !important; color: var(--demo-magenta-light) !important;
  border: 1px solid var(--demo-magenta); font-size: calc(1 * var(--ids-rem)); padding: 2px 8px;
  border-radius: 4px; font-weight: 700; letter-spacing: .03em;
}
.ids-digitizer-page .ids-demo-steps { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ids-digitizer-page .ids-demo-step { display: flex; align-items: center; gap: 8px; color: var(--demo-text-muted) !important; font-size: calc(1.15 * var(--ids-rem)); font-weight: 600; transition: color .3s ease; }
.ids-digitizer-page .ids-demo-step-num {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--demo-panel-border); display: flex; align-items: center;
  justify-content: center; font-size: calc(1 * var(--ids-rem)); font-family: monospace; flex-shrink: 0;
  transition: all .3s ease;
}
.ids-digitizer-page .ids-demo-step.active { color: var(--demo-text-main) !important; }
.ids-digitizer-page .ids-demo-step.active .ids-demo-step-num {
  background: var(--demo-magenta) !important; border-color: var(--demo-magenta) !important; color: #fff !important;
  box-shadow: 0 0 12px var(--demo-magenta-glow);
}
.ids-digitizer-page .ids-demo-step.completed .ids-demo-step-num {
  background: var(--demo-green) !important; border-color: var(--demo-green) !important; color: #000 !important;
}

/* ---------- status banner ---------- */
.ids-digitizer-page .ids-demo-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--demo-panel-bg) !important; backdrop-filter: blur(12px);
  border: 1px solid var(--demo-panel-border); border-left: 3px solid var(--demo-magenta);
  border-radius: 8px; padding: 10px 18px; margin-bottom: 12px; flex-wrap: wrap;
  min-height: 97px;
}
.ids-digitizer-page .ids-demo-banner-text { font-size: calc(1.15 * var(--ids-rem)); font-weight: 600; display: flex; align-items: center; gap: 8px; line-height: 1.35; color: var(--demo-text-main) !important; }
.ids-digitizer-page .ids-demo-progress-track { width: 150px; height: 4px; background: rgba(255,255,255,.06) !important; border-radius: 2px; overflow: hidden; }
.ids-digitizer-page .ids-demo-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--demo-magenta), var(--demo-magenta-light)) !important; transition: width .3s linear; }

/* ---------- workspace grid ---------- */
/* Default: stacked single column. This component's real-world width in the
   two-column hero is only ~480-650px on desktop (narrower than most phones
   in "mobile" view, where the hero itself stacks and the visual gets up to
   880px) — so viewport-based breakpoints can't drive this layout correctly.
   Container queries respond to the element's own rendered width instead. */
.ids-digitizer-page .ids-demo { container-type: inline-size; container-name: idsdemo; }

.ids-digitizer-page .ids-demo-workspace {
  display: grid; grid-template-columns: 1fr;
  background: var(--demo-panel-bg); backdrop-filter: blur(16px);
  border: 1px solid var(--demo-panel-border); border-radius: 16px;
  overflow: hidden; position: relative;
}
.ids-digitizer-page .ids-demo-panel-label {
  font-size: calc(1 * var(--ids-rem)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--demo-text-muted) !important; margin-bottom: 10px;
}

/* panel 1: document */
.ids-digitizer-page .ids-demo-doc-panel { border-bottom: 1px solid var(--demo-panel-border); padding: 18px; display: flex; flex-direction: column; }
.ids-digitizer-page .ids-demo-paper {
  background: #fff !important; border-radius: 8px; flex: 1; padding: 18px 16px; color: #0f172a !important;
  font-size: calc(1.05 * var(--ids-rem)); line-height: 1.5; position: relative; box-shadow: 0 8px 30px rgba(0,0,0,.4);
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; min-height: 260px;
}
.ids-digitizer-page .ids-demo-doc-head { display: flex; justify-content: space-between; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.ids-digitizer-page .ids-demo-doc-title { font-weight: 800; font-size: calc(1.4 * var(--ids-rem)); letter-spacing: -0.01em; }
.ids-digitizer-page .ids-demo-field {
  position: relative; border-radius: 3px; transition: all .3s ease; padding: 1px 3px; display: inline-block;
}
.ids-digitizer-page .ids-demo-field.highlighted { background: var(--demo-magenta-dim) !important; outline: 1.5px solid var(--demo-magenta); box-shadow: 0 0 10px var(--demo-magenta-glow); }
.ids-digitizer-page .ids-demo-field.validated { background: var(--demo-green-glow) !important; outline: 1.5px solid var(--demo-green); }
.ids-digitizer-page .ids-demo-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ids-digitizer-page .ids-demo-table th { text-align: left; font-size: calc(.85 * var(--ids-rem)); text-transform: uppercase; color: #64748b !important; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; }
.ids-digitizer-page .ids-demo-table td { padding: 6px 0; border-bottom: 1px dashed #f1f5f9; font-size: calc(.95 * var(--ids-rem)); }
.ids-digitizer-page .ids-demo-laser {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--demo-magenta);
  box-shadow: 0 0 15px var(--demo-magenta), 0 0 30px var(--demo-magenta); opacity: 0; z-index: 10; pointer-events: none;
}
.ids-digitizer-page .ids-demo-laser.scanning { animation: idsDemoScan 1.8s ease-in-out infinite alternate; opacity: 1; }
@keyframes idsDemoScan { 0% { top: 2%; } 100% { top: 96%; } }

/* panel 2: AI core */
.ids-digitizer-page .ids-demo-core-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; background: rgba(6,8,12,.9); border-bottom: 1px solid var(--demo-panel-border);
  overflow: hidden; min-height: 130px; padding: 16px;
}
.ids-digitizer-page .ids-demo-core-node {
  position: relative; width: 108px; height: 108px; border-radius: 16px;
  border: 1.5px solid var(--demo-magenta); background: rgba(16,4,12,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: box-shadow .4s ease; z-index: 1;
}
.ids-digitizer-page .ids-demo-core-node.processing { box-shadow: 0 0 30px var(--demo-magenta-glow), 0 0 60px var(--demo-magenta-dim); }
.ids-digitizer-page .ids-demo-core-brand { font-size: calc(.9 * var(--ids-rem)); font-weight: 700; letter-spacing: .06em; color: var(--demo-text-dim) !important; text-transform: uppercase; }
.ids-digitizer-page .ids-demo-core-title { font-size: calc(1.15 * var(--ids-rem)); font-weight: 800; color: var(--demo-magenta-light) !important; letter-spacing: .04em; }
.ids-digitizer-page .ids-demo-core-glow {
  position: absolute; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, var(--demo-magenta-dim) 0%, transparent 70%); opacity: 0; transition: opacity .4s ease;
}
.ids-digitizer-page .ids-demo-core-glow.active { opacity: 1; }
.ids-digitizer-page .ids-demo-stream-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.ids-digitizer-page .ids-demo-stream-path { fill: none; stroke: var(--demo-magenta); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: 0; transition: opacity .3s ease; }
.ids-digitizer-page .ids-demo-stream-path.active { opacity: .6; animation: idsDemoDash 1s linear infinite; }
@keyframes idsDemoDash { to { stroke-dashoffset: -20; } }

/* panel 3: extracted output */
.ids-digitizer-page .ids-demo-output-panel { padding: 18px; display: flex; flex-direction: column; }
.ids-digitizer-page .ids-demo-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ids-digitizer-page .ids-demo-field-card {
  background: rgba(255,255,255,.03); border: 1px solid var(--demo-panel-border); border-radius: 8px;
  padding: 10px 12px; transition: all .3s ease; min-width: 0;
}
.ids-digitizer-page .ids-demo-field-card.extracted { border-color: var(--demo-magenta) !important; background: var(--demo-magenta-dim) !important; }
.ids-digitizer-page .ids-demo-field-card.validated { border-color: var(--demo-green) !important; }
.ids-digitizer-page .ids-demo-card-label { font-size: calc(.8 * var(--ids-rem)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--demo-text-muted) !important; margin-bottom: 4px; overflow-wrap: break-word; }
.ids-digitizer-page .ids-demo-card-value { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; font-size: calc(1.05 * var(--ids-rem)); font-weight: 700; font-family: monospace; overflow-wrap: anywhere; min-height: 48px; line-height: 1.35; color: var(--demo-text-main) !important; }
.ids-digitizer-page .ids-demo-check {
  width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: calc(.85 * var(--ids-rem)); background: rgba(255,255,255,.05); color: transparent; transition: all .3s ease; flex-shrink: 0;
}
.ids-digitizer-page .ids-demo-field-card.validated .ids-demo-check { background: var(--demo-green) !important; color: #000 !important; box-shadow: 0 0 8px var(--demo-green-glow); }

.ids-digitizer-page .ids-demo-json {
  flex: none; background: #050608 !important; border: 1px solid var(--demo-panel-border); border-radius: 8px;
  padding: 12px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: calc(.95 * var(--ids-rem)); color: #9aa0ad !important; overflow-y: auto; overflow-x: hidden; opacity: .15; transition: opacity .5s ease;
  height: 150px;
}
.ids-digitizer-page .ids-demo-json pre { overflow-wrap: anywhere; }
.ids-digitizer-page .ids-demo-json.visible { opacity: 1; border-color: var(--demo-panel-border-glow); }
.ids-digitizer-page .ids-demo-json .k { color: var(--demo-magenta-light) !important; }
.ids-digitizer-page .ids-demo-json .s { color: #4ade80 !important; }
.ids-digitizer-page .ids-demo-json .n { color: #f39c12 !important; }

.ids-digitizer-page .ids-demo-dock { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ids-digitizer-page .ids-demo-btn {
  background: rgba(255,255,255,.04) !important; border: 1px solid var(--demo-panel-border); color: var(--demo-text-main) !important;
  font-family: inherit; font-size: calc(1 * var(--ids-rem)); font-weight: 700; padding: 7px 14px; border-radius: 6px;
  cursor: pointer; transition: all .2s ease;
}
.ids-digitizer-page .ids-demo-btn:hover { background: rgba(255,255,255,.08) !important; }
.ids-digitizer-page .ids-demo-btn.active-toggle { background: var(--demo-magenta) !important; border-color: var(--demo-magenta); color: #fff !important; }
.ids-digitizer-page .ids-demo-btn[hidden] { display: none; }

/* ---------- specificity escalation ----------
   Everything above uses "!important" at the file's normal 1-2 class
   specificity. That's enough to beat a same-or-lower-specificity rule
   on the host site regardless of importance, and enough to beat a
   higher-specificity rule that ISN'T !important. It is NOT guaranteed
   to beat a host-site rule that is BOTH more specific AND !important —
   in that one case, specificity is still the deciding tiebreaker even
   between two !important declarations. The lines below re-assert the
   backgrounds that were confirmed still failing on the live site by
   repeating the scope class, which is valid CSS and inflates
   specificity without needing an ID or inline styles. Redundant with,
   and safe alongside, the rules above. */
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page .ids-demo { background-color: var(--demo-bg) !important; }
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page .ids-demo-banner { background: var(--demo-panel-bg) !important; }
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page .ids-demo-workspace { background: var(--demo-panel-bg) !important; }
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page .ids-demo-json { background: #050608 !important; color: #9aa0ad !important; }
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page .ids-demo-paper { background: #fff !important; color: #0f172a !important; }
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page .ids-demo-step-num { background: rgba(255,255,255,.08) !important; }
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page .ids-demo-step.active .ids-demo-step-num { background: var(--demo-magenta) !important; border-color: var(--demo-magenta) !important; color: #fff !important; }
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page .ids-demo-step.completed .ids-demo-step-num { background: var(--demo-green) !important; border-color: var(--demo-green) !important; color: #000 !important; }
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page .ids-hero { background: var(--ids-charcoal) !important; color: var(--ids-white) !important; }
.ids-digitizer-page.ids-digitizer-page.ids-digitizer-page .ids-section--dark { background: var(--ids-charcoal) !important; color: var(--ids-white) !important; }

/* ---------- responsive: driven by the component's own width, not viewport ---------- */
.ids-digitizer-page .ids-demo-step span.ids-demo-step-label { display: none; color: inherit !important; }

@container idsdemo (min-width: 560px) {
  .ids-digitizer-page .ids-demo-step span.ids-demo-step-label { display: inline; color: inherit !important; }
}

@container idsdemo (min-width: 820px) {
  .ids-digitizer-page .ids-demo-workspace { grid-template-columns: 1.7fr 0.75fr 2fr; min-height: 460px; }
  .ids-digitizer-page .ids-demo-doc-panel,
  .ids-digitizer-page .ids-demo-core-panel { border-bottom: none; border-right: 1px solid var(--demo-panel-border); min-height: 0; }
  .ids-digitizer-page .ids-demo-core-node { width: 116px; height: 116px; }
  .ids-digitizer-page .ids-demo-core-brand { font-size: calc(.95 * var(--ids-rem)); }
  .ids-digitizer-page .ids-demo-core-title { font-size: calc(1.25 * var(--ids-rem)); }
  .ids-digitizer-page .ids-demo-stream-canvas { display: block; }
  .ids-digitizer-page .ids-demo-card-value { font-size: calc(1.15 * var(--ids-rem)); }
  .ids-digitizer-page .ids-demo-json { font-size: calc(1 * var(--ids-rem)); }
}

@container idsdemo (max-width: 380px) {
  .ids-digitizer-page .ids-demo { padding: 12px; }
  .ids-digitizer-page .ids-demo-header { padding: 10px 14px; }
  .ids-digitizer-page .ids-demo-brand { font-size: calc(1.15 * var(--ids-rem)); }
  .ids-digitizer-page .ids-demo-fields-grid { grid-template-columns: 1fr; }
  .ids-digitizer-page .ids-demo-banner { padding: 10px 14px; }
  .ids-digitizer-page .ids-demo-progress-track { width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .ids-digitizer-page .ids-demo-dot,
  .ids-digitizer-page .ids-demo-laser.scanning,
  .ids-digitizer-page .ids-demo-stream-path.active { animation: none; }
}


/* Brand rule: magenta text on dark grounds is #E94BA2 (#AB005E on charcoal measured 1.93:1). */
.ids-digitizer-page :is(.ids-hero, .ids-section--dark, .ids-cta, .ids-industries) :is(.ids-eyebrow, .ids-highlight) { color: #E94BA2 !important; }