/* Approved concept A, scoped to the staged homepage. Content is never hidden. */
.home-v2 .home-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center;padding-block:64px 56px}
.home-v2 .home-intro h1{font-size:clamp(38px,4.4vw,64px);max-width:14ch;line-height:1.08}
.home-v2 .home-intro .lead{max-width:44ch;font-size:clamp(18px,1.5vw,21px)}
.home-v2 .home-scene{margin:0;padding:0;background:transparent;border:0;min-width:0}
.home-scene svg{display:block;width:100%;height:auto;overflow:visible}
.home-scene svg text{font-family:'IBM Plex Sans',system-ui,sans-serif}
.home-v2 .home-scene figcaption{font-size:14px;line-height:1.5;max-width:60ch;margin-top:14px}
.home-v2 .seal-limit{border-left:3px solid #1f5fd6;padding-left:16px;margin-top:18px;font-size:15px;line-height:1.6;color:#47536a}
.home-v2 .seal-limit p+p{margin-top:4px;color:#123c44;font-weight:600}
.home-v2 .section-nav{position:sticky;top:0;z-index:5;background:#fff;border-block:1px solid #ced5df}
.home-v2 .section-nav .wrap{display:flex;gap:12px 30px;flex-wrap:wrap;padding-block:12px}
.home-v2 .section-nav a{font-size:15px;font-weight:600;color:#47536a;padding:6px 0;text-decoration:none;border-bottom:2px solid transparent}
.home-v2 .section-nav a[aria-current=location]{color:#1f5fd6;border-color:#1f5fd6}
.home-v2 [id]{scroll-margin-top:86px}
.home-v2 .home-limits{padding-block:54px 64px}
.home-v2 .home-limits h2{font-size:clamp(30px,3.2vw,44px);margin-bottom:28px}
.home-v2 .limit-register>div{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,3fr);gap:24px;padding:22px 0;border-top:1px solid #ced5df}
.home-v2 .limit-register dt{font-weight:600}.home-v2 .limit-register dd{margin:0;color:#47536a;max-width:76ch}
.home-v2 .home-models{background:white;border-block:1px solid #ced5df}
.home-v2 .home-model{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;padding-block:64px}
.home-v2 .home-model+.home-model{border-top:1px solid #ced5df}
.home-v2 .home-model-copy h2{font-size:clamp(28px,3vw,42px);max-width:23ch}
.home-v2 .home-model-copy p{color:#47536a;margin-top:20px;max-width:48ch}
.home-v2 .hosting-options{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.home-v2 .hosting-options button{font:600 15px/1.4 'IBM Plex Sans',sans-serif;min-height:44px;padding:10px 16px;background:white;color:#123c44;border:1px solid #647d86;border-radius:4px;cursor:pointer}
.home-v2 .hosting-options button[aria-pressed=true]{background:#123c44;color:#fff;border-color:#123c44}
.home-v2 .hosting-notes{margin:20px 0}
.home-v2 .hosting-notes>div{border-top:1px solid #ced5df;padding:12px 0;font-size:16px}
.home-v2 .hosting-notes dt{font-weight:600}.home-v2 .hosting-notes dd{margin:4px 0 0;color:#47536a}
.home-v2 .home-integration{padding-block:58px 70px}.home-v2 .home-integration h2{max-width:24ch;font-size:clamp(30px,3.2vw,44px)}
.home-v2 .home-integration p{max-width:65ch;margin:20px 0;color:#47536a}
@media(max-width:860px){.home-v2 .home-hero,.home-v2 .home-model{grid-template-columns:1fr}.home-v2 .home-hero{padding-block:34px 42px;gap:32px}.home-v2 .home-intro h1{max-width:15ch}.home-v2 .home-model{padding-block:42px;gap:24px}.home-v2 .section-nav .wrap{gap:4px 18px}.home-v2 .section-nav a{font-size:14px}.home-v2 [id]{scroll-margin-top:100px}.home-v2 .home-limits{padding-block:38px}.home-v2 .limit-register>div{grid-template-columns:1fr;gap:6px;padding-block:18px}}
@media print{.home-v2 .section-nav,.home-v2 .hosting-options{display:none}.home-v2 .home-hero{display:block;padding:12pt 0}.home-v2 .home-intro h1{font-size:28pt;max-width:22ch}.home-v2 .home-intro .lead{font-size:11pt}.home-v2 .home-scene{break-inside:avoid;max-width:130mm;margin:14pt auto!important}.home-v2 .home-scene svg{max-height:76mm;width:100%}.home-v2 .home-scene figcaption,.home-v2 .seal-limit{font-size:9pt}.home-v2 .home-limits{padding-block:16pt}.home-v2 .home-limits h2{font-size:18pt}.home-v2 .limit-register>div{padding:8pt 0;gap:14pt;font-size:10pt;break-inside:avoid}.home-v2 .home-model{display:block;padding-block:18pt;break-inside:avoid}.home-v2 .home-model-copy h2{font-size:18pt}.home-v2 .home-model-copy p,.home-v2 .hosting-notes>div{font-size:10pt;margin-top:8pt}.home-v2 .home-integration{padding-block:18pt}.home-v2 .home-integration h2{font-size:18pt}.home-v2 .home-integration p{font-size:10pt}.home-v2 [id]{scroll-margin-top:0}}
.home-v2 .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.home-v2 .home-section-title{font-size:clamp(30px,3.2vw,44px);padding-top:52px;max-width:24ch}
.home-v2 .home-model-copy h3{font-size:clamp(24px,2.4vw,32px);margin-top:24px}
.home-v2 .home-model-copy h3:first-child{margin-top:0}
.home-v2 .home-model-copy .limit-note{border-left:3px solid var(--blue);padding:10px 16px;background:var(--paper);font-size:16px}
.hosting-options[hidden]{display:none}
@media print{.home-v2 .home-section-title{font-size:18pt;padding-top:18pt}.home-v2 .home-model-copy h3{font-size:13pt}.home-v2 .home-model-copy .limit-note{font-size:9pt}.home-v2 .visually-hidden{display:none!important}}
/* Civesto scenes (J-20261007-01, concept A). Append to site.css or a new scenes.css.
   The SVGs carry their full static look in presentation attributes; these rules
   only add motion (on screen, motion allowed) and the toggle state. */
.scene svg{display:block;width:100%;height:auto;overflow:visible}
/* the limit sentence: inside the drawing from 600 px up; below 600 px the same approved sentence is HTML under the drawing */
.lb-limit-html{display:none;margin:10px 0 0;padding:6px 0 6px 12px;border-left:3px solid var(--blue);font-size:15px;line-height:1.5;color:var(--slate);max-width:46ch}
@media (max-width:599px){
  .civ-scene .lb-t{font-size:24px}
  .civ-hosting .lb-t{font-size:27px}
  .civ-scene .lb-limit{display:none}
  .lb-limit-html{display:block}
}
@keyframes civ-drive-a{0%{transform:translate(-26px,-15px);opacity:0}8%,88%{opacity:1}100%{transform:translate(156px,90px);opacity:0}}
@keyframes civ-drive-b{0%{transform:translate(156px,90px);opacity:0}8%,88%{opacity:1}100%{transform:translate(-52px,-30px);opacity:0}}
@keyframes civ-drop{0%,6%{transform:translateY(-46px);opacity:0}20%,100%{transform:none;opacity:1}}
@keyframes civ-seal{0%,58%{opacity:0}66%,100%{opacity:1}}
@keyframes civ-march{to{stroke-dashoffset:-22}}
@keyframes civ-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes civ-scan{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,9px)}}
@keyframes civ-pick{0%,40%{opacity:0}55%,100%{opacity:1}}
.js .scene.on .car-a{animation:civ-drive-a 7s linear infinite}
.js .scene.on .car-b{animation:civ-drive-b 9s linear infinite}
.js .scene.on .c1{animation:civ-drop 6s cubic-bezier(.22,.61,.36,1) infinite}
.js .scene.on .c2{animation:civ-drop 6s cubic-bezier(.22,.61,.36,1) .5s infinite backwards}
.js .scene.on .c3{animation:civ-drop 6s cubic-bezier(.22,.61,.36,1) 1s infinite backwards}
.js .scene.on .seal{animation:civ-seal 6s linear infinite}
.js .scene.on .flow{animation:civ-march 1.1s linear infinite}
.js .scene.on .rec{animation:civ-blink 1.2s steps(2) infinite}
.js .scene.on .scan{animation:civ-scan 2.4s ease-in-out infinite}
.js .scene.on .pick{animation:civ-pick 4.8s ease infinite}
/* deployment toggle: the article carries data-pick="a" or "b"; no attribute = both equal */
.opt{transition:opacity .35s ease}
[data-pick=a] .opt-b,[data-pick=b] .opt-a{opacity:.28;filter:url(#civesto-mono)}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important;transition:none!important}}
@media print{.scene *{animation:none!important}}
