/* A4IT site — components the Automatize base (site.css) does not have.
   Same vocabulary: hairlines, no radius, no shadow, mono for labels, numbers instead of icons.
   The blocks from "in-page table of contents" to "small helpers" are taken from the
   KognitCapture site (kc.css); what follows them is A4IT's own. */

/* ---------- in-page table of contents ---------- */
.toc { display:flex; flex-wrap:wrap; gap:6px; padding:14px 0; border-bottom:1px solid var(--line); }
.toc a { font-family:var(--mono); font-size:12px; padding:5px 9px; border:1px solid var(--line); }
.toc a:hover { background:var(--ink); color:var(--bg); text-decoration:none; }

/* ---------- pipeline ---------- */
.pipe { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); border-top:1px solid var(--ink); border-left:1px solid var(--line); counter-reset:pipe; }
.pipe li { padding:16px 16px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); counter-increment:pipe; }
.pipe li::before { content:counter(pipe, decimal-leading-zero); display:block; font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:10px; }
.pipe .t { font-size:17px; }
.pipe .d { font-size:13.5px; }
.pipe .k { font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:10px; display:block; }

/* ---------- detailed feature blocks ---------- */
.block { padding:clamp(28px,3.4vw,44px) 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(20px,4vw,56px); align-items:start; scroll-margin-top:16px; }
.block > header .eyebrow { margin-bottom:12px; }
.block > header .h-big { margin-bottom:12px; }
.block > header p { font-size:15px; color:var(--muted); margin:0 0 14px; text-wrap:pretty; }
.block .items { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:0 28px; }
.item { border-top:1px solid var(--line); padding:14px 0 16px; }
.item .t { font-size:15.5px; }
.item .d { font-size:14px; margin-top:5px; line-height:1.5; }
.item .o { font-family:var(--mono); font-size:11.5px; line-height:1.55; color:var(--muted); margin-top:8px; display:block; }
@media (max-width:860px) { .block { grid-template-columns:1fr; } }

/* ---------- data tables (full container width, scroll on small screens) ---------- */
.tbl-wrap { width:100%; overflow-x:auto; margin-top:18px; border-top:1px solid var(--ink); }
.tbl { width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.tbl th, .tbl td { padding:11px 16px 11px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-weight:400; text-wrap:pretty; }
.tbl thead th { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.tbl tbody th { font-weight:600; }
.tbl td.mono, .tbl .n { font-family:var(--mono); font-size:12.5px; }
.tbl .yes::before { content:"■ "; font-size:9px; vertical-align:1px; }
.tbl .no { color:var(--muted); }
.tbl .no::before { content:"□ "; font-size:9px; vertical-align:1px; }
.tbl caption { caption-side:bottom; text-align:left; font-size:12px; color:var(--muted); padding-top:12px; }

/* ---------- FAQ ---------- */
.faq details { border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { display:grid; grid-template-columns:32px minmax(0,1fr) 20px; gap:12px; padding:16px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--mono); font-weight:400; text-align:right; }
.faq details[open] summary::after { content:"−"; }
.faq summary:hover { background:var(--tint); }
.faq .a { padding:0 32px 20px 44px; font-size:15.5px; line-height:1.55; color:var(--muted); max-width:900px; text-wrap:pretty; }
.faq .a p { margin:0 0 10px; }
.faq .a p:last-child { margin:0; }
@media (max-width:560px) { .faq .a { padding:0 0 18px; } }

/* ---------- code sample ---------- */
.code { margin:14px 0 0; padding:16px 18px; background:var(--tint); border-left:2px solid var(--ink); font-family:var(--mono); font-size:12.5px; line-height:1.6; overflow-x:auto; white-space:pre; tab-size:2; }
.code .c { color:var(--muted); }


.incl li { break-inside:avoid; position:relative; padding:0 0 10px 18px; font-size:14.5px; text-wrap:pretty; }
.incl li::before { content:"■"; position:absolute; left:0; top:2px; font-size:9px; }
.incl.not li { color:var(--muted); }
.incl.not li::before { content:"□"; }

/* ---------- footer ---------- */
.foot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:24px 32px; padding:32px 0 28px; border-bottom:1px solid var(--line); }
.foot-grid h2 { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 12px; }
.foot-grid ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:14px; }
.foot-grid p { margin:0; font-size:14px; color:var(--muted); max-width:300px; text-wrap:pretty; }

/* ---------- small helpers ---------- */
.mt0 { margin-top:0; } .mb0 { margin-bottom:0; }
.mt-s { margin-top:12px; } .mt-m { margin-top:22px; } .mt-l { margin-top:34px; }
.mb-s { margin-bottom:12px; } .mb-m { margin-bottom:22px; } .mb-l { margin-bottom:30px; }
.tag { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.tag.road { border-style:dashed; }
.cols-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:clamp(24px,4vw,64px); }
.sec > .h-sec + .body { margin-top:10px; }
section[id], article[id] { scroll-margin-top:16px; }
button.btn-ghost { background:transparent; color:var(--ink); cursor:pointer; font-family:inherit; }
.form select { background:var(--bg); border:0; border-bottom:1px solid var(--ink); padding:12px 0; font-size:15px; font-family:'Instrument Sans', system-ui, sans-serif; letter-spacing:0; text-transform:none; color:var(--ink); }
@media print { .site-header, .sec-cta, .site-footer nav { display:none !important; } }
html:not(.js) .js-only { display:none; }
.faq .a a, .body a, .prose a, .d a, .checks a, .info a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* ---------- A4IT: green as the one colour ---------- */
::selection { background:var(--accent); color:var(--btnFg); }
.brand-mark { width:30px; font-size:13px; letter-spacing:-.02em; }
.site-nav > a[aria-current="page"] { color:var(--accent); }
.pipe, .tbl-wrap { border-top-color:var(--accent); }
.why > div, .uc { border-top-color:var(--accent); }
.h-hero .muted, .h-page .muted, .h-detail .muted { color:var(--muted); }
.stat b { color:var(--accent); }
.btn:focus-visible, .btn-ghost:focus-visible { outline-color:var(--accent); }

/* ---------- "what do you need" tiles (home): plain links, one per service line ---------- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); border-top:1px solid var(--accent); border-left:1px solid var(--line); }
.tiles a { display:flex; flex-direction:column; gap:6px; padding:16px 16px 18px; min-height:132px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.tiles a:hover { background:var(--btn); color:var(--btnFg); text-decoration:none; }
.tiles a:hover .num, .tiles a:hover .d { color:inherit; opacity:.8; }
.tiles .t { font-size:17px; }
.tiles .d { margin-top:0; }
.tiles .go { margin-top:auto; font-family:var(--mono); font-size:12px; }

/* ---------- panels ---------- */
.panel { border:1px solid var(--accent); padding:clamp(18px,2.6vw,30px); margin-top:22px; }
.panel .h-big { margin:8px 0 12px; }
.panel .links { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.card { color:inherit; }
/* a single card left over on the last row of three takes the whole row */
@media (min-width:901px) { .cards > .card:last-child:nth-child(3n+1) { grid-column:1 / -1; min-height:0; } }
a.card .go { font-family:var(--mono); font-size:12px; }
.sec > .lead, .sec-detail > .lead { max-width:900px; }
.sec-detail .btns { margin-top:28px; }
.three { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:24px 32px; margin-top:20px; }
.three > div { border-top:1px solid var(--accent); padding-top:16px; }
.three .kicker { margin-bottom:10px; }

/* ---------- long text (legal page) ---------- */
.prose { max-width:78ch; font-size:16px; line-height:1.6; }
.prose h2 { font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em; line-height:1.1; margin:40px 0 12px; scroll-margin-top:16px; }
.prose h3 { font-size:17px; margin:24px 0 8px; }
.prose p, .prose ul { margin:0 0 14px; color:var(--muted); text-wrap:pretty; }
.prose ul { padding-inline-start:20px; }
.prose strong { color:var(--ink); font-weight:600; }

/* ---------- contact form ---------- */
.form textarea { min-height:140px; }
.form .consent { font-family:'Instrument Sans', system-ui, sans-serif; font-size:13px; letter-spacing:0; text-transform:none; }
.form input:focus, .form textarea:focus, .form select:focus { border-bottom-color:var(--accent); }
html[data-theme="dark"] .form-error, html[data-theme="agentic"] .form-error { color:#FF8A80; }
.incl.one { columns:auto; }