/* =====================================================================
   RepliCar product pages · version 2
   Every rule is scoped to .replicar-page, so nothing leaks into the
   surrounding TYPO3 page. Design tokens match the live RepliCar pages.
   ===================================================================== */
@font-face{
  font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonts/sourcesans3-var.woff2) format('woff2');
}
.replicar-page{
  --bg:#0a0f12;
  --bg2:#0d1519;
  --panel:#0f1a20;
  --panel2:#122129;
  --line:#1c2e37;
  --line2:#27404c;
  --petrol:#006c90;
  --petrol-light:#287F9A;
  --cyan:#00e3ec;
  --txt:#e8eef1;
  --txt-soft:#9fb1ba;
  --txt-mute:#7c8d96;
  --accent:#00e3ec;
  /* signal classes: one colour per job, for marks only, never for running text */
  --sig-rf:#ff9650;
  --sig-time:#ffc446;
  --sig-data:#00e3ec;
  --sig-ctrl:#f078af;
  --sig-pwr:#96aab4;
  --sig-host:#5fbf5f;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  margin:0;padding:0;box-sizing:border-box;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.replicar-page *{margin:0;padding:0;box-sizing:border-box}
.replicar-page a{color:inherit}
.replicar-page :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.replicar-page img{max-width:100%;display:block}
.replicar-page button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.replicar-page code{font-family:var(--mono);font-size:.92em;color:var(--txt);background:var(--bg2);border:1px solid var(--line);padding:1px 6px}
.replicar-page sup{font-size:.7em;line-height:0}

/* ---------- layout ---------- */
.replicar-page section{position:relative;padding:104px 0 24px;scroll-margin-top:calc(var(--replicar-nav-offset,0px) + 64px)}
.replicar-page .inner{max-width:1180px;margin:0 auto;padding:0 24px}
.replicar-page .inner.wide{max-width:1360px}
.replicar-page .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:16px}
.replicar-page .eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.replicar-page h1,.replicar-page h2{font-size:clamp(30px,4vw,50px);font-weight:900;letter-spacing:-.02em;line-height:1.06;max-width:24ch}
.replicar-page h3{font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.replicar-page h4{font-size:16px;font-weight:700}
.replicar-page p{line-height:1.6}
.replicar-page .lead{margin-top:16px;font-size:clamp(15.5px,1.4vw,18px);line-height:1.6;color:var(--txt-soft);max-width:68ch}
.replicar-page .lead.flush{margin-top:0}
.replicar-page .bigstat .v{font-size:clamp(30px,3.2vw,42px);font-weight:900;color:var(--txt);line-height:1.1}
.replicar-page .bigstat .l{margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--txt-mute);text-transform:uppercase}
.replicar-page .muted{color:var(--txt-mute)}
.replicar-page .note{font-size:13px;line-height:1.55;color:var(--txt-mute);margin-top:16px;max-width:96ch}
.replicar-page .note b{color:var(--txt-soft);font-weight:600}
.replicar-page .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.replicar-page .mt-s{margin-top:24px}.replicar-page .mt-m{margin-top:44px}.replicar-page .mt-l{margin-top:64px}
.replicar-page.anim [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.replicar-page.anim [data-reveal].in{opacity:1;transform:none}
.replicar-page .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.replicar-page .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.replicar-page .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1040px){.replicar-page .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.replicar-page .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.replicar-page .grid2,.replicar-page .grid3,.replicar-page .grid4{grid-template-columns:1fr}}
.replicar-page .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.replicar-page .split.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media (max-width:980px){.replicar-page .split,.replicar-page .split.rev{grid-template-columns:1fr;gap:28px}}

/* ---------- product sub navigation ---------- */
/* --replicar-nav-offset: height of a sticky site header above the product navigation (0 if none) */
.replicar-page .subnav{position:sticky;top:var(--replicar-nav-offset,0px);z-index:40;background:rgba(10,15,18,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.replicar-page .subnav .inner{display:flex;align-items:center;gap:22px;height:56px;max-width:1360px}
.replicar-page .subnav .brand{font-weight:900;letter-spacing:.04em;font-size:18px;text-decoration:none;white-space:nowrap}
.replicar-page .subnav nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.replicar-page .subnav nav::-webkit-scrollbar{display:none}
.replicar-page .subnav nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-soft);text-decoration:none;padding:8px 12px;border-bottom:2px solid transparent;white-space:nowrap}
.replicar-page .subnav nav a:hover{color:var(--txt)}
.replicar-page .subnav nav a[aria-current="page"]{color:var(--txt);border-bottom-color:var(--accent)}
.replicar-page .subnav .navcta{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#04333f;background:var(--accent);padding:9px 14px;white-space:nowrap}
.replicar-page .subnav .navcta:hover{background:#fff}
@media (max-width:760px){.replicar-page .subnav .navcta{display:none}}
.replicar-page .r{display:inline-block;transform:scaleX(-1)}

/* ---------- hero ---------- */
.replicar-page .hero{padding:68px 0 56px;overflow:hidden}
.replicar-page .hero .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:44px;align-items:center;max-width:1320px}
@media (max-width:1000px){.replicar-page .hero .inner{grid-template-columns:1fr}}
.replicar-page .wordmark{font-size:clamp(54px,8.6vw,112px);font-weight:900;letter-spacing:.01em;line-height:.95;text-shadow:0 0 42px rgba(0,227,236,.24)}
.replicar-page .hero h1{font-size:clamp(40px,5.6vw,72px);line-height:1;letter-spacing:-.025em}
.replicar-page .hero .subtitle{margin-top:14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--txt-mute);text-transform:uppercase}
.replicar-page .hero .claim{margin-top:20px;font-size:clamp(21px,2.4vw,29px);font-weight:600;letter-spacing:-.01em;max-width:28ch;line-height:1.25}
.replicar-page .hero .claim em{font-style:normal;color:var(--accent)}
.replicar-page .hero .sub{margin-top:16px;font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:var(--txt-soft);max-width:58ch}
.replicar-page .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.replicar-page .btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--petrol);text-decoration:none;font-weight:700;font-size:16px;padding:14px 26px;white-space:nowrap}
.replicar-page .btn:hover{background:var(--cyan);color:#04333f}
.replicar-page .btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line2)}
.replicar-page .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.replicar-page .hero .visual{position:relative}
.replicar-page .hero .visual img{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.replicar-page .hero .visual svg{display:block;width:100%;height:auto}
.replicar-page .cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--txt-mute);text-transform:uppercase}
.replicar-page .cap b{color:var(--txt-soft);font-weight:600}
.replicar-page .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.replicar-page .badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line2);color:var(--txt-soft);background:rgba(10,15,18,.6)}
.replicar-page .badge.ok{border-color:var(--sig-host);color:#c4ebc4}
.replicar-page .badge.ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sig-host)}
.replicar-page .badge.req{border-color:var(--petrol-light);color:#bfe3ee}

/* key facts strip */
.replicar-page .facts{margin-top:38px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:rgba(13,21,25,.72)}
@media (max-width:620px){.replicar-page .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.replicar-page .fact{padding:16px 18px;border-right:1px solid var(--line)}
.replicar-page .fact:last-child{border-right:0}
@media (max-width:620px){.replicar-page .fact:nth-child(2){border-right:0}.replicar-page .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.replicar-page .fact .v{font-size:clamp(21px,2.2vw,30px);font-weight:900;color:var(--txt);line-height:1.1;white-space:nowrap}
.replicar-page .fact .v .u{color:var(--accent);font-size:.6em;font-weight:700;margin-left:3px}
.replicar-page .fact .l{margin-top:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--txt-mute);text-transform:uppercase;line-height:1.4}

/* ---------- figures ---------- */
.replicar-page .fig{border:1px solid var(--line);background:radial-gradient(ellipse at 50% 40%,#10262e 0%,#0c1418 78%);padding:22px}
.replicar-page .fig svg{display:block;width:100%;height:auto}
.replicar-page .fig.scroll{overflow-x:auto}
.replicar-page .fig.scroll svg{min-width:760px}
.replicar-page .fig figcaption,.replicar-page figure>figcaption{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--txt-mute);text-transform:uppercase;line-height:1.5}
.replicar-page .photo{border:1px solid var(--line);background:radial-gradient(ellipse at 50% 55%,#12303b 0%,#0c1418 72%);padding:26px}
.replicar-page .photo img{width:100%;height:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}

/* SVG typography and marks (inline SVG inherits the page font) */
.replicar-page .s-h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;font-weight:600;fill:var(--petrol-light);text-transform:uppercase}
.replicar-page .s-t{font-family:var(--sans);font-size:15px;font-weight:700;fill:var(--txt)}
.replicar-page .s-tl{font-family:var(--sans);font-size:13.5px;font-weight:700;fill:var(--txt)}
.replicar-page .s-b{font-family:var(--sans);font-size:13px;fill:var(--txt-soft)}
.replicar-page .s-s{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;fill:var(--txt-mute)}
.replicar-page .s-m{font-family:var(--mono);font-size:11px;letter-spacing:.08em;fill:var(--txt-soft)}
.replicar-page .s-big{font-family:var(--sans);font-size:30px;font-weight:900;fill:var(--txt)}
.replicar-page .s-box{fill:#0c1216;stroke:var(--line2);stroke-width:1.2}
.replicar-page .s-box.hl{stroke:var(--petrol-light);fill:#0e1f26}
.replicar-page .s-box.dim{stroke:var(--line2);fill:#0b1114}
.replicar-page .s-sub{fill:#10232b;stroke:var(--petrol-light);stroke-width:1.2}
.replicar-page .s-master{fill:#141c22;stroke:var(--sig-time);stroke-width:1.2}
.replicar-page .s-chip{fill:#05080a;stroke:#3a4a52;stroke-width:1}
.replicar-page .s-line{fill:none;stroke-width:1.8}
.replicar-page .s-line.rf{stroke:var(--sig-rf)}
.replicar-page .s-line.time{stroke:var(--sig-time)}
.replicar-page .s-line.data{stroke:var(--sig-data)}
.replicar-page .s-line.ctrl{stroke:var(--sig-ctrl);stroke-dasharray:5 4}
.replicar-page .s-line.pwr{stroke:var(--sig-pwr);stroke-dasharray:2 4}
.replicar-page .s-line.host{stroke:var(--sig-host)}
.replicar-page .s-line.mute{stroke:#3d525c}
.replicar-page .s-line.coax{stroke:var(--sig-data);stroke-width:5;stroke-linecap:round}
.replicar-page .s-lead{fill:none;stroke:#5d7480;stroke-width:1}
.replicar-page .s-dot{fill:var(--accent)}
.replicar-page .legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--txt-soft);text-transform:uppercase}
.replicar-page .legend span{display:inline-flex;align-items:center;gap:8px}
.replicar-page .legend i{display:inline-block;width:20px;height:0;border-top:2px solid}
.replicar-page .legend i.d{border-top-style:dashed}
.replicar-page .legend i.o{border-top-style:dotted}
.replicar-page .legend i.sq{width:12px;height:12px;border:0}

/* ---------- motion: visual panels, stages, pulses (driven by motion.js) ---------- */
.replicar-page .viz{border:1px solid var(--line);background:var(--panel);box-shadow:0 0 60px rgba(0,108,144,.10) inset;min-width:0}
.replicar-page .viz .head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--txt-mute);text-transform:uppercase}
.replicar-page .viz .dotlive{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:rc-blink 1.6s ease-in-out infinite}
.replicar-page .viz canvas{display:block;width:100%;height:250px}
.replicar-page .viz.tall canvas{height:clamp(240px,30vw,400px)}
.replicar-page .viz .foot{padding:8px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--txt-mute);text-transform:uppercase}
@keyframes rc-blink{50%{opacity:.25}}
.replicar-page .stages{margin-top:20px}
.replicar-page .stage{display:grid;grid-template-columns:minmax(260px,5fr) minmax(300px,6fr);gap:44px;align-items:center;padding:48px 0;border-top:1px solid var(--line)}
.replicar-page .stage:first-child{border-top:0}
@media (max-width:860px){.replicar-page .stage{grid-template-columns:1fr;gap:22px;padding:36px 0}}
.replicar-page .stage .num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:12px;text-transform:uppercase}
.replicar-page .stage .num::after{content:"";width:64px;height:1px;background:var(--line)}
.replicar-page .stage h3{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.015em}
.replicar-page .stage p{margin-top:10px;font-size:15.5px;color:var(--txt-soft);max-width:46ch}
.replicar-page .pl{pointer-events:none}
.replicar-page .pl.data{fill:var(--sig-data)}
.replicar-page .pl.coax{fill:#fff}
.replicar-page .pl.time{fill:var(--sig-time)}
.replicar-page .pl.ctrl{fill:var(--sig-ctrl)}
.replicar-page .pl.pwr{fill:#d5e0e6}
.replicar-page .pl.host{fill:var(--sig-host)}
.replicar-page .cable-flow{animation:rc-dash 1.1s linear infinite}
@keyframes rc-dash{to{stroke-dashoffset:-26}}
.replicar-page .mv{animation:rc-channel 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes rc-channel{0%,100%{opacity:.35}30%{opacity:1;fill:#00e3ec}}
.replicar-page .hero{isolation:isolate}
.replicar-page .hero-array{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.6;
  -webkit-mask-image:linear-gradient(90deg,transparent 38%,rgba(0,0,0,.35) 56%,#000 76%),linear-gradient(180deg,#000 70%,transparent 88%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 38%,rgba(0,0,0,.35) 56%,#000 76%),linear-gradient(180deg,#000 70%,transparent 88%);mask-composite:intersect}
@media (max-width:1000px){.replicar-page .hero-array{display:none}}

/* ---------- comparison table ---------- */
.replicar-page .tbl-wrap{overflow-x:auto;margin-top:36px;border:1px solid var(--line)}
.replicar-page table{width:100%;border-collapse:collapse;font-size:14.5px}
.replicar-page table.cmp{min-width:820px}
.replicar-page table th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--txt-mute);text-align:left;padding:14px 16px;background:var(--bg2);border-bottom:1px solid var(--line);text-transform:uppercase;font-weight:600;vertical-align:bottom}
.replicar-page table td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--txt-soft);vertical-align:top;line-height:1.5;font-variant-numeric:tabular-nums}
.replicar-page table tr:last-child td,.replicar-page table tr:last-child th{border-bottom:0}
.replicar-page table th[scope=row],.replicar-page table td.k{color:var(--txt);font-weight:600;font-family:var(--sans);font-size:14.5px;letter-spacing:0;text-transform:none;background:transparent;border-bottom:1px solid var(--line);vertical-align:top;width:19%}
.replicar-page table.cmp .rc{background:rgba(0,108,144,.16);color:var(--txt)}
.replicar-page table.cmp th.rc{color:var(--accent);border-top:2px solid var(--accent);border-left:1px solid var(--petrol-light);border-right:1px solid var(--petrol-light)}
.replicar-page table.cmp td.rc{border-left:1px solid var(--petrol-light);border-right:1px solid var(--petrol-light)}
.replicar-page table.cmp tr:last-child td.rc{border-bottom:1px solid var(--petrol-light)}
@media (max-width:760px){
  .replicar-page table.cmp{min-width:0}
  .replicar-page table.cmp thead{display:none}
  .replicar-page table.cmp tr{display:block;border-bottom:1px solid var(--line);padding:4px 0 8px}
  .replicar-page table.cmp tr:last-child{border-bottom:0}
  .replicar-page table.cmp th[scope=row]{display:block;width:auto;border:0;padding:14px 16px 4px;font-size:16px}
  .replicar-page table.cmp td{display:block;border:0;padding:5px 16px}
  .replicar-page table.cmp td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--txt-mute);text-transform:uppercase}
  .replicar-page table.cmp td.rc,.replicar-page table.cmp tr:last-child td.rc{border:0;border-left:2px solid var(--accent);margin:6px 16px 4px;padding:8px 12px}
  .replicar-page table.cmp td.rc::before{color:var(--accent)}
  .replicar-page .fig.scroll figcaption::before{content:"Swipe sideways for the full diagram · ";color:var(--accent)}
}
.replicar-page table.spec td:first-child{color:var(--txt);font-weight:600;width:34%}
.replicar-page table.spec td:last-child{color:var(--txt)}
.replicar-page table.spec tr.grp td{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;background:var(--bg2);font-weight:600;padding:10px 16px}
.replicar-page table.rows td:first-child{color:var(--txt);font-weight:600}
/* The site head sets "table, table td, table th { background-color:#888888 !important }" for all pages.
   These rules restore the RepliCar table colours, inside .replicar-page only. */
.replicar-page table,.replicar-page table tr,.replicar-page table td,.replicar-page table th[scope=row]{background-color:transparent!important}
.replicar-page table th{background-color:var(--bg2)!important}
.replicar-page table.cmp .rc{background-color:rgba(0,108,144,.16)!important}
.replicar-page table.spec tr.grp td{background-color:var(--bg2)!important}

/* ---------- system strip (components with arrows) ---------- */
.replicar-page .chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:26px;border:1px solid var(--line)}
@media (max-width:900px){.replicar-page .chain{grid-template-columns:1fr}}
.replicar-page .chain>div{position:relative;padding:22px 22px 24px;background:var(--panel);border-right:1px solid var(--line)}
.replicar-page .chain>div:last-child{border-right:0}
@media (max-width:900px){.replicar-page .chain>div{border-right:0;border-bottom:1px solid var(--line)}.replicar-page .chain>div:last-child{border-bottom:0}}
.replicar-page .chain .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.replicar-page .chain h3{margin-top:8px;font-size:19px}
.replicar-page .chain p{margin-top:8px;font-size:14.5px;color:var(--txt-soft)}
.replicar-page .chain .sw{display:block;width:28px;height:3px;margin-top:16px}

/* ---------- benefit and service cards ---------- */
.replicar-page .card{border:1px solid var(--line);background:var(--panel);padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px}
.replicar-page .card.hl{border-color:var(--petrol-light);box-shadow:0 0 60px rgba(0,108,144,.12) inset}
.replicar-page .card .ico{width:40px;height:40px;margin-bottom:6px}
.replicar-page .card h3{font-size:19px}
.replicar-page .card p{color:var(--txt-soft);font-size:15px}
.replicar-page .card ul{list-style:none;margin-top:4px}
.replicar-page .card li{font-size:14.5px;line-height:1.5;color:var(--txt-soft);padding:7px 0 7px 16px;border-top:1px solid var(--line);position:relative}
.replicar-page .card li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;background:var(--petrol-light)}
.replicar-page .card .more{margin-top:auto;padding-top:10px}
.replicar-page .ico path,.replicar-page .ico circle,.replicar-page .ico rect,.replicar-page .ico line,.replicar-page .ico polyline{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.replicar-page .ico .f{fill:var(--accent);stroke:none}
.replicar-page .morelink{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--cyan);padding-bottom:2px;text-transform:uppercase}
.replicar-page .morelink:hover{color:var(--txt);border-color:var(--txt)}

/* ---------- product family ---------- */
.replicar-page .fam{border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column}
.replicar-page .fam.hl{border-color:var(--petrol-light)}
.replicar-page .fam .ph{aspect-ratio:16/10;background:radial-gradient(ellipse at 50% 55%,#12303b 0%,#0c1418 72%);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:18px;position:relative}
.replicar-page .fam .ph svg{width:100%;height:100%}
.replicar-page .fam .ph .badge{position:absolute;left:10px;top:10px;z-index:1}
.replicar-page .fam .ph:has(img){aspect-ratio:4/3}
.replicar-page .fam .ph img{position:absolute;left:18px;top:18px;width:calc(100% - 36px);height:calc(100% - 36px);object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
.replicar-page .hero .visual img.portrait{width:auto;max-width:100%;max-height:640px;margin:0 auto}
.replicar-page .vstack{display:flex;flex-direction:column;gap:14px}
.replicar-page .photo figcaption{margin-top:14px}
.replicar-page .fam .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.replicar-page .fam h3{font-size:22px}
.replicar-page .fam p{font-size:15px;color:var(--txt-soft)}
.replicar-page .fam .more{margin-top:auto;padding-top:12px}
.replicar-page .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--txt-mute);text-transform:uppercase;line-height:1.5}
.replicar-page .kvl{margin-top:4px}
.replicar-page .kvl .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.replicar-page .kvl dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--txt-mute);padding-top:2px;text-transform:uppercase}
.replicar-page .kvl dd{font-size:14.5px;color:var(--txt);text-align:right}
.replicar-page .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.replicar-page .wide-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);border:1px solid var(--line);background:var(--panel);margin-top:20px}
@media (max-width:900px){.replicar-page .wide-card{grid-template-columns:1fr}}
.replicar-page .wide-card .ph{border-right:1px solid var(--line);overflow:hidden;min-height:220px}
@media (max-width:900px){.replicar-page .wide-card .ph{border-right:0;border-bottom:1px solid var(--line)}}
.replicar-page .wide-card .ph img{width:100%;height:100%;object-fit:cover;opacity:.9}
.replicar-page .wide-card .ph.product{display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(ellipse at 50% 55%,#12303b 0%,#0c1418 72%)}
.replicar-page .wide-card .ph.product img{height:auto;object-fit:contain;opacity:1;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
.replicar-page .wide-card .body{padding:24px 26px;display:flex;flex-direction:column;gap:10px}
.replicar-page .wide-card h3{font-size:22px}
.replicar-page .wide-card p{font-size:15px;color:var(--txt-soft)}
.replicar-page .wide-card .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
@media (max-width:560px){.replicar-page .wide-card .cols{grid-template-columns:1fr}}

/* ---------- numbered steps ---------- */
.replicar-page .steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:40px;counter-reset:st;border-top:1px solid var(--line)}
@media (max-width:900px){.replicar-page .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.replicar-page .steps{grid-template-columns:1fr}}
.replicar-page .steps li{counter-increment:st;padding:24px 22px 8px 0;position:relative}
.replicar-page .steps li::before{content:"0" counter(st);display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent);margin-bottom:12px}
.replicar-page .steps li::after{content:"";position:absolute;left:0;top:-1px;width:42px;height:2px;background:var(--accent)}
.replicar-page .steps h3{font-size:19px}
.replicar-page .steps p{margin-top:8px;font-size:15px;color:var(--txt-soft);max-width:34ch}

/* ---------- key/value list beside figures ---------- */
.replicar-page .kv{margin-top:22px;border-top:1px solid var(--line)}
.replicar-page .kv>div{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.replicar-page .kv dt{display:flex;align-items:flex-start;gap:10px;font-weight:700;color:var(--txt);font-size:15px}
.replicar-page .kv dt i{flex:0 0 auto;width:12px;height:12px;margin-top:5px}
.replicar-page .kv dd{color:var(--txt-soft);font-size:15px;line-height:1.55}
@media (max-width:560px){.replicar-page .kv>div{grid-template-columns:1fr;gap:4px}}

/* ---------- coherence modes ---------- */
.replicar-page .modes .card svg{display:block;width:100%;height:auto;margin-bottom:6px}
.replicar-page .modes .card .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}

/* ---------- data flow (HTML, stacks on narrow screens) ---------- */
.replicar-page .flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:36px}
@media (max-width:1040px){.replicar-page .flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}}
@media (max-width:600px){.replicar-page .flow{grid-template-columns:1fr}}
.replicar-page .flow>div{position:relative;border:1px solid var(--line);border-top:3px solid var(--c,var(--line2));background:var(--panel);padding:16px 16px 18px;margin-right:22px}
.replicar-page .flow>div:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;width:12px;height:12px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:translateY(-50%) rotate(45deg)}
@media (max-width:600px){.replicar-page .flow>div{margin-right:0;margin-bottom:20px}.replicar-page .flow>div:not(:last-child)::after{right:50%;top:auto;bottom:-17px;transform:translateX(50%) rotate(135deg)}}
.replicar-page .flow .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--txt-mute);text-transform:uppercase}
.replicar-page .flow h4{margin-top:6px;font-size:16px}
.replicar-page .flow p{margin-top:6px;font-size:13.5px;color:var(--txt-soft);line-height:1.5}

/* ---------- software stack ---------- */
.replicar-page .stack{margin-top:36px;border:1px solid var(--line)}
.replicar-page .stack>div{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1.1fr);gap:22px;padding:20px 22px;border-bottom:1px solid var(--line);background:var(--panel);align-items:start}
.replicar-page .stack>div:last-child{border-bottom:0}
.replicar-page .stack>div:nth-child(odd){background:var(--bg2)}
@media (max-width:860px){.replicar-page .stack>div{grid-template-columns:1fr;gap:6px}}
.replicar-page .stack .lvl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;padding-top:4px}
.replicar-page .stack h3{font-size:18px}
.replicar-page .stack .nm{display:block;margin-top:4px;font-family:var(--mono);font-size:11.5px;color:var(--txt-mute);letter-spacing:.04em}
.replicar-page .stack p{font-size:15px;color:var(--txt-soft)}

/* ---------- code sample ---------- */
.replicar-page pre{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--txt);background:var(--bg2);border:1px solid var(--line);padding:16px 18px;overflow-x:auto}
.replicar-page pre .c{color:var(--txt-mute)}

/* ---------- FAQ ---------- */
.replicar-page .faq{margin-top:36px;border-top:1px solid var(--line)}
.replicar-page .faq details{border-bottom:1px solid var(--line)}
.replicar-page .faq summary{list-style:none;cursor:pointer;padding:19px 44px 19px 0;font-size:18px;font-weight:700;position:relative}
.replicar-page .faq summary::-webkit-details-marker{display:none}
.replicar-page .faq summary::after{content:"+";position:absolute;right:6px;top:15px;font-family:var(--mono);font-size:22px;color:var(--accent);font-weight:400}
.replicar-page .faq details[open] summary::after{content:"\2013"}
.replicar-page .faq .a{padding:0 0 22px;color:var(--txt-soft);font-size:15.5px;line-height:1.65;max-width:82ch}
.replicar-page .faq .a p+p{margin-top:10px}

/* ---------- downloads ---------- */
.replicar-page .dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);margin-top:28px}
@media (max-width:900px){.replicar-page .dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.replicar-page .dl>a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-right:1px solid var(--line);text-decoration:none;background:var(--panel)}
.replicar-page .dl>a:last-child{border-right:0}
@media (max-width:900px){.replicar-page .dl>a:nth-child(2){border-right:0}.replicar-page .dl>a:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.replicar-page .dl>a:hover{background:var(--panel2)}
.replicar-page .dl b{font-size:16px}
.replicar-page .dl span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--txt-mute);text-transform:uppercase}

/* ---------- CTA + footer ---------- */
.replicar-page .cta{margin-top:40px;padding:36px 38px;background:var(--petrol);border-bottom:3px solid var(--cyan);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.replicar-page .cta h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#fff;letter-spacing:-.015em}
.replicar-page .cta p{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.92);margin-top:8px;max-width:62ch}
.replicar-page .cta .acts{display:flex;flex-wrap:wrap;gap:10px}
.replicar-page .cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.replicar-page .cta .btn.ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
.replicar-page footer.rfoot{border-top:1px solid var(--line);margin-top:90px}
.replicar-page footer.rfoot .inner{padding:26px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.replicar-page footer.rfoot img{height:26px;opacity:.85}
.replicar-page footer.rfoot span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--txt-mute)}


@media (prefers-reduced-motion:reduce){
  .replicar-page *{transition:none!important;animation:none!important}
  .replicar-page.anim [data-reveal]{opacity:1;transform:none}
}

/* =====================================================================
   PREVIEW ONLY: stand-in for the TYPO3 header and footer.
   Not needed once the content sits inside wellenzahl.com.
   ===================================================================== */
body.wz-preview{margin:0;background:#0a0f12}
.wz-top{background:#0a0f12;border-bottom:1px solid #1c2e37}
.wz-top .in{max-width:1360px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.wz-top img{height:38px;width:auto}
.wz-top nav{display:flex;gap:22px;font-family:'Source Sans 3',Arial,sans-serif;font-size:15px;color:#9fb1ba}
.wz-top nav span{white-space:nowrap}
.wz-top nav span.cur{color:#e8eef1;border-bottom:2px solid #00e3ec;padding-bottom:4px}
@media (max-width:820px){.wz-top nav{display:none}}
.wz-crumb{max-width:1360px;margin:0 auto;padding:10px 24px;font-family:ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.12em;color:#7c8d96;text-transform:uppercase}
.wz-foot{border-top:1px solid #1c2e37;padding:22px 24px;text-align:center;font-family:'Source Sans 3',Arial,sans-serif;color:#7c8d96;font-size:14px}