/* MusterGRC website — built from the KrdBrkV5 design canvas (5-Oct-26) on
   Brand Foundations & Style Guide v1.0. Light-first; Source Serif for
   headlines, IBM Plex Sans for everything else; Muster blues for structure.

     --dark   #0E3A52  Muster Dark: type, dark bands, footer
     --blue   #1CB3E8  Muster Blue: accent rules, key phrases, primary buttons
     --deep   #17789B  Deep Blue: labels and links on light
     --night  #04151F  framework bar
   The assurance band is Vero AI's, in Vero AI's own palette (vero-ai.com):
     --v-ink #24213B  --v-violet #6E60DF  --v-lav #9082EC  --v-pale #F0F0F8
   Fonts are self-hosted, so nothing leaves the origin (see _headers). */
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-var.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-var.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --dark:#0E3A52;--blue:#1CB3E8;--deep:#17789B;--night:#04151F;--pale:#8FDDF5;
  --text:#24485C;--muted:#4A6373;--ice:#E6F5FC;--ice2:#CDEBF7;--rule:#D6E6EE;--grey:#F3F6F8;--on-dark:#DCEBF2;--on-dark-2:#9CC9DD;
  --v-ink:#24213B;--v-violet:#6E60DF;--v-lav:#9082EC;--v-pale:#F0F0F8;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:var(--dark);font-family:var(--sans);font-size:17px;line-height:1.6;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--deep)}
a:hover{color:var(--dark)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
::selection{background:var(--blue);color:var(--night)}
h1,h2,h3,p,ul,ol,figure{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--dark);color:#FFFFFF;padding:12px 18px;z-index:50;font-weight:600}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- type ---------- */
.label{display:block;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--deep)}
.eyebrow{display:flex;flex-direction:column;gap:14px}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(38px,5.2vw,66px);line-height:1.06;letter-spacing:.01em}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(30px,3.8vw,46px);line-height:1.12}
h3{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.25}
.em{color:var(--blue)}
.lede{font-size:19px;line-height:1.6;color:var(--text)}
.copy{font-size:16px;color:var(--text)}
.head{display:flex;flex-direction:column;gap:18px;max-width:820px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:10px;background:var(--blue);color:var(--dark);
  text-decoration:none;font:inherit;font-weight:600;font-size:14px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;border:0;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.btn:hover{background:#4CC4EE;color:var(--dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,179,232,.3)}
.btn.ghost{background:transparent;border:2px solid var(--dark);padding:0 26px}
.btn.ghost:hover{background:var(--dark);color:#FFFFFF;box-shadow:none}
.btn.small{min-height:44px;padding:0 22px;font-size:13px;letter-spacing:.16em}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.textlink{display:inline-flex;align-items:center;min-height:48px;font-weight:600;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--deep);text-decoration:none;border-bottom:2px solid var(--blue)}

/* ---------- framework bar + header ---------- */
.framework{background:var(--night);color:#FFFFFF;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.framework .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;padding-block:10px}
.framework i{font-style:normal;color:var(--blue)}
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:16px}
.logo{display:block;line-height:0;flex-shrink:0}
.logo img{height:40px;width:auto;max-width:none}
@media(max-width:480px){.nav .btn.small{padding:0 16px;letter-spacing:.1em}}
#site-nav{display:flex;align-items:center;gap:8px 28px;font-size:15px;font-weight:500}
#site-nav a:not(.btn){color:var(--dark);text-decoration:none;padding:10px 0;position:relative;white-space:nowrap}
#site-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
#site-nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:transparent;border:1px solid var(--rule);border-radius:10px;cursor:pointer;padding:0}
.nav-toggle i{display:block;width:18px;height:2px;background:var(--dark);transition:transform .18s ease,opacity .18s ease}
header.open .nav-toggle i:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.open .nav-toggle i:nth-child(2){opacity:0}
header.open .nav-toggle i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1180px){
  .nav-toggle{display:inline-flex}
  #site-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:#FFFFFF;border-bottom:1px solid var(--rule);padding:4px 24px 22px}
  header.open #site-nav{display:flex}
  #site-nav a:not(.btn){padding:14px 2px;font-size:17px;border-bottom:1px solid var(--rule)}
  #site-nav a:not(.btn)::after{display:none}
  #site-nav .btn{margin-top:18px}
}

/* ---------- sections ---------- */
.band{padding-block:clamp(72px,9vw,112px)}
.ice{background:var(--ice)}
.ruled{border-top:1px solid var(--rule)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:56px;align-items:center}

/* hero */
.hero{position:relative;overflow:hidden}
.hero-copy{position:relative;z-index:1}
/* The shards sit behind the photo column; in the single-column layout they would cover the headline. */

.hero .split{position:relative;padding-block:clamp(64px,8vw,96px) clamp(56px,7vw,88px)}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero .lede{max-width:560px}
.actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero .split{grid-template-columns:1fr}
.hero-copy{max-width:640px}
/* the linework owl, half a face, as one floating graphic: fixed to the right of
   the screen, the same as on the first page throughout, drifting gently.
   It floats in front of the content as a light, multiplied linework layer
   (clicks pass through), so cards and bands never hide it; only the Vero AI
   section and the dark closing section (which has its own owl) cover it. */
/* the dark closing section shows the same owl in the same place (.cta-owl,
   also fixed, clipped to the section), so as the section scrolls over the
   page the owl changes colour rather than a second owl appearing */
.owl-float,.cta-owl{position:fixed;top:140px;right:0;height:calc((100vh - 160px)*1.2);aspect-ratio:540/1720;pointer-events:none}
.owl-float{z-index:2;opacity:.38;mix-blend-mode:multiply}
.owl-float .construct,.cta-owl .construct{animation:float 12s ease-in-out infinite}
main{position:relative}
.framework{position:relative;z-index:1}
.vero,.dark-cta,footer.site{position:relative;z-index:3}
@media(max-width:900px){.owl-float{opacity:.18}.cta-owl{opacity:.22}.owl-float,.cta-owl{height:calc((100vh - 160px)*.85)}}



/* four elements strip */
.strip{background:var(--ice);border-block:1px solid var(--ice2)}
.strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px;padding-block:40px}
.strip .item{display:flex;flex-direction:column;gap:6px;padding-left:18px;border-left:1px solid var(--blue)}
.strip .item .label{font-size:12px}
.strip .item b{font-family:var(--serif);font-weight:700;font-size:22px}
/* the strip is a dark band like the closing section, with the same owl
   showing through as it scrolls past */
.strip.dark-cta{border-block:0}
.strip .wrap{position:relative}
.strip.dark-cta .item .label{color:var(--blue)}
.strip.dark-cta .item b{color:#FFFFFF}

/* standards overview */
.overview{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;width:100%;margin-top:24px;text-align:left}
.cards2 > div{background:var(--ice);padding:28px;display:flex;flex-direction:column;gap:10px}
.cards2 .label{font-size:12px}

/* why: three gaps + before / after */
.why{display:flex;flex-direction:column;gap:48px}
.gaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:1px solid var(--blue)}
.gaps > div{padding:28px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--rule)}
.gaps > div:first-child{padding-left:0;border-left:0}
.gaps .num{font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--deep)}
@media(max-width:700px){.gaps > div,.gaps > div:first-child{padding-left:0;padding-right:0;border-left:0;border-top:1px solid var(--rule)}.gaps > div:first-child{border-top:0}}
/* what changes with MusterGRC: three illustrated benefits */
.benefits{display:flex;flex-direction:column;gap:28px}
.benefits-head{display:flex;flex-direction:column;gap:12px}
.benefits-head h3{font-size:clamp(26px,2.8vw,34px)}
.benefit-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:980px){.benefit-cards{grid-template-columns:1fr}}
.benefit{display:flex;flex-direction:column;gap:10px;border:1px solid var(--rule);border-radius:10px;padding:20px 20px 24px;background:#FFFFFF;transition:transform .3s var(--ease),box-shadow .3s}
.benefit:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(14,58,82,.1)}
.benefit .art{background:var(--ice);border-radius:8px;padding:10px;margin-bottom:8px}
.benefit svg{display:block;width:100%;height:auto}
.benefit .t{font-family:var(--serif);font-weight:700;font-size:22px}
.benefit .note{font-size:12px;color:var(--muted)}
.benefit text{font-family:var(--sans);fill:#24485C}
.benefit .cap{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.benefit .tiny{font-size:9.5px}
.benefit .strong{font-weight:600;fill:#0E3A52}
.benefit .in{font-size:11px;font-weight:600;fill:#04151F}
.benefit .mid{text-anchor:middle}
.benefit .seg{transform-box:fill-box;transform-origin:left center;transition:transform .9s var(--ease)}
.benefit .s2{transition-delay:.15s}.benefit .s3{transition-delay:.3s}.benefit .s4{transition-delay:.6s}
.benefit.pending .seg{transform:scaleX(0)}
.benefit .tick{transition:opacity .5s 1.6s,transform .5s 1.6s var(--ease);transform-box:fill-box;transform-origin:center}
.benefit.pending .tick{opacity:0;transform:translate(286px,30px) scale(.3)}
.benefit .line.slow{transition-duration:3.2s}
.wins{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:20px 24px;border-radius:10px;background:var(--dark);color:#FFFFFF}
.wins .label{color:var(--blue)}
.wins ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px}
.wins li{display:flex;gap:10px}
.wins li::before{content:"✓";color:var(--blue);font-weight:600}
/* the same owl shows through the navy panel as it scrolls past */
.wins{position:relative;z-index:3;clip-path:inset(0 round 10px)}
.wins .label,.wins ul{position:relative}

/* small card graphics (the benefit cards) */
.art{display:block;background:var(--ice);border-radius:8px;padding:8px;margin-bottom:6px}
.art.on-dark{background:rgba(255,255,255,.08)}
.art svg{display:block;width:100%;height:auto}
.art text{font-family:var(--sans);fill:#24485C}
.art .g-cap{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.art .g-t{font-size:10px}
.art .g-q{font-size:20px;font-weight:700;fill:#FFFFFF}
.art .strong{font-weight:600;fill:#0E3A52}
.art .mid{text-anchor:middle}
.art .grow{transform-box:fill-box;transform-origin:left center;transition:transform 1s .3s var(--ease)}
.art .pop{transform-box:fill-box;transform-origin:center;transition:opacity .4s,transform .4s var(--ease)}
.art .draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s .3s var(--ease)}
.pending .art .grow{transform:scaleX(0)}
.pending .art .pop{opacity:0;transform:scale(.3)}
.pending .art .draw{stroke-dashoffset:1}


/* the Muster platform: intro, checks and the walkthrough of real screens */
.muster-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px 64px;align-items:end;margin-bottom:48px}
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
.pillars > div{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:2px solid var(--blue)}
.pillars .t{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--deep)}
.pillars .d{font-size:15px;line-height:1.55;color:var(--text)}
@media(max-width:560px){.pillars{grid-template-columns:1fr}}
.walkthrough{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.steps-list{display:flex;flex-direction:column;border-top:2px solid var(--dark)}
.steps-list [role=tab]{position:relative;display:grid;grid-template-columns:40px 1fr;gap:12px;text-align:left;font:inherit;color:var(--muted);
  background:transparent;border:0;border-bottom:1px solid var(--rule);padding:18px 8px 18px 0;cursor:pointer;transition:color .2s,background .2s}
.steps-list [role=tab]:hover{color:var(--dark);background:linear-gradient(90deg,var(--ice),transparent 80%)}
.steps-list .wn{font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--deep);padding-top:3px}
.steps-list b{display:block;font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.25;color:inherit}
.steps-list .wd{display:block;font-size:15px;line-height:1.55;margin-top:4px;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s var(--ease),opacity .35s}
.steps-list [aria-selected=true]{color:var(--dark)}
.steps-list [aria-selected=true] .wd{max-height:8em;opacity:1;color:var(--text)}
.steps-list [aria-selected=true]::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--blue);transform-origin:left;transform:scaleX(1)}
.walkthrough.auto .steps-list [aria-selected=true]::after{animation:wtbar var(--wt,7s) linear forwards}
@keyframes wtbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.screen{position:sticky;top:110px}
.chrome{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#0B2333;border-radius:8px 8px 0 0}
.chrome i{width:10px;height:10px;border-radius:50%;background:#2B4A5E}
.chrome span{margin-left:10px;font-size:12px;letter-spacing:.06em;color:var(--on-dark-2)}
.panels{position:relative;background:#1B3950;border-radius:0 0 8px 8px;overflow:hidden;box-shadow:0 30px 60px rgba(14,58,82,.22)}
.panels figure{margin:0;animation:wtfade .35s ease}
@keyframes wtfade{from{opacity:0}to{opacity:1}}
.panels img{display:block;width:100%;height:auto}
.screen .caption{margin-top:12px;font-size:13px;color:var(--muted)}
@media(max-width:900px){.walkthrough{grid-template-columns:1fr}.screen{position:static;order:-1}}

/* what we build: what a management system is, and the collateral */
.build{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px;align-items:start}
.ms{display:flex;flex-direction:column;gap:28px}
.layers{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.layers li{width:var(--w);display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:6px;transition:width .9s var(--ease)}
.layers li:nth-child(1){background:var(--dark);color:#FFFFFF}
.layers li:nth-child(2){background:var(--deep);color:#FFFFFF}
.layers li:nth-child(3){background:var(--blue);color:var(--night)}
.layers li:nth-child(4){background:var(--ice2);color:var(--dark)}
.layers b{font-family:var(--serif);font-weight:700;font-size:19px}
.layers span{font-size:14px;opacity:.9;text-align:right}
.layers.pending li{width:40%}
.cycle{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--rule)}
.cycle .steps{font-size:16px;color:var(--text)}
.cycle i{font-style:normal;color:var(--blue);margin:0 4px}
.kitlist{display:flex;flex-direction:column;gap:14px}
.kit{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:18px 20px;border:1px solid var(--rule);border-radius:10px;background:#FFFFFF;transition:transform .3s var(--ease),box-shadow .3s}
.kit:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(14,58,82,.08)}
.kit .doc{width:24px;height:auto;margin-top:2px}
.kit .t{display:block;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.kit ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--text)}
.kit li{position:relative;padding-left:14px}
.kit li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:2px;background:var(--blue)}
@media(max-width:560px){.layers li{flex-direction:column;align-items:flex-start;gap:2px}.layers span{text-align:left}}

/* independent assurance: Vero AI's band. Kept quiet: a pale lavender ground
   and dark type, with Vero AI's violet only on the small accents. */
.vero{background:var(--v-pale);border-block:1px solid #E4E1F7}
.vero .wrap{display:flex;flex-direction:column;gap:48px}
.vero .glow{display:none}
.vero-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:32px 64px;align-items:end}
.vero .label{color:var(--v-violet)}
.vero h2 .em{color:var(--v-violet)}
.vero-mark{display:flex;flex-direction:column;gap:10px;padding:28px 32px;border:1px solid #DCD8F7;border-radius:14px;background:#FFFFFF}
.vero-mark .word{font-family:var(--sans);font-weight:600;font-size:34px;line-height:1;letter-spacing:-.01em;color:var(--v-ink)}
.vero-mark .tag{font-size:15px;color:var(--text)}
.vero-mark .note{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.vero-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.vero-cards > div{border:1px solid #E4E1F7;border-top:3px solid var(--v-lav);border-radius:0 0 10px 10px;background:#FFFFFF;padding:24px;display:flex;flex-direction:column;gap:8px;transition:transform .3s var(--ease),box-shadow .3s}
.vero-cards > div:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(36,33,59,.08)}
.vero-cards .t{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--v-violet)}
.vero-cards .d{font-size:15px;color:var(--text)}
.vero .source{font-size:13px;color:var(--muted)}
.vero .source a{color:var(--v-violet)}

/* credibility */
.cred{display:flex;flex-direction:column;gap:40px;align-items:center;text-align:center}
.cred .head{align-items:center;max-width:760px}
.cred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;width:100%}
.cred-grid > div{border:1px solid var(--blue);padding:28px 20px;display:flex;flex-direction:column;gap:6px;align-items:center}
.cred-grid b{font-family:var(--serif);font-weight:700;font-size:22px}
.cred-grid span{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--deep)}

/* audience */
.audience{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px;margin-top:40px}
.audience > div{background:#FFFFFF;padding:36px;display:flex;flex-direction:column;gap:14px}

/* final call to action, with the working contact form */
.cta{position:relative;overflow:hidden}
.dark-cta{background:linear-gradient(160deg,var(--dark) 0%,var(--night) 100%);color:#FFFFFF}
.dark-cta h2{color:#FFFFFF}
.dark-cta .lede{color:var(--on-dark)}
.dark-cta .alt{color:var(--on-dark)}
.dark-cta .alt a{color:var(--blue)}
.dark-cta{clip-path:inset(0)}
.cta-owl{opacity:.45}
.form-card{position:relative;width:100%;max-width:680px;background:#FFFFFF;color:var(--dark);border-radius:14px;padding:clamp(20px,3vw,36px);box-shadow:0 30px 60px rgba(4,21,31,.4)}
.form-card .form{margin-top:0;max-width:none}
/* the form card: a heading, firm fields, and a footer row with the privacy
   note on the left and the send button on the right */
.form-head{display:flex;flex-direction:column;gap:4px;margin-bottom:22px;text-align:left}
.form-head h3{font-family:var(--serif);font-size:24px;line-height:1.2;color:var(--dark);margin:0}
.form-head p{font-size:15px;color:var(--muted);margin:0}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:20px;margin-top:4px}
.form-note{font-size:13px;line-height:1.5;color:var(--muted);margin:0;flex:1 1 220px}
.form-note a{color:var(--deep)}
.form-card .form .btn{align-self:auto}
@media(max-width:560px){.form-foot .btn{width:100%;justify-content:center;order:-1}}
/* the construction-line owl (brand guide p.19): fine Muster Blue linework on
   Muster Dark, half a face cut at the centre line, drawing itself in */
.line{fill:none;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.6s var(--ease)}
.eye{transition:opacity .6s 2s,transform .6s 2s var(--ease);transform-box:fill-box;transform-origin:center}
.pending .line{stroke-dashoffset:1}
.pending .eye{opacity:0;transform:scale(.4)}
.construct{display:block;width:100%;height:100%}
.cta .inner{position:relative;max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:26px;align-items:center;text-align:center}
.cta h2{font-size:clamp(34px,4.4vw,54px);line-height:1.1}
.cta .lede{max-width:620px}
.form{width:100%;max-width:640px;display:flex;flex-direction:column;gap:14px;text-align:left;margin-top:8px}
.form .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--dark)}
.form input,.form textarea{font:inherit;font-weight:400;font-size:16px;letter-spacing:.01em;padding:12px 14px;border:1px solid #C5D5DE;border-radius:8px;background:#FBFDFE;color:var(--dark);width:100%;transition:border-color .2s,box-shadow .2s}
.form textarea{resize:vertical;min-height:6em}
.form input:hover,.form textarea:hover{border-color:#9FB8C6}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--deep);background:#FFFFFF;box-shadow:0 0 0 4px rgba(28,179,232,.2)}
.form textarea::placeholder{color:#8AA0AD}
#turnstile:has(iframe[style*="display: none"]),#turnstile:empty{display:none}
.form .opt{font-weight:400;color:var(--muted)}
.form .btn{align-self:center}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.status{font-size:15px;color:var(--muted);text-align:left;margin:0}
.status:empty{display:none}
.status.ok{color:var(--deep);font-weight:600}
.status.err{color:#9A4A12}
.alt{font-size:15px;color:var(--muted)}

/* footer */
footer.site{background:var(--dark);color:var(--on-dark);border-top:1px solid rgba(28,179,232,.25)}
.foot{display:flex;flex-direction:column;gap:48px;padding-block:72px 32px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:40px}
.foot-cols > div{display:flex;flex-direction:column;gap:12px;font-size:15px}
.foot-cols .h{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#FFFFFF}
.foot-cols a{color:var(--on-dark);text-decoration:none}
.foot-cols a:hover{color:#FFFFFF}
.foot-cols .brand{gap:18px}
.foot-cols .brand img{height:40px;width:auto;align-self:flex-start}
.foot-cols .brand .label{font-size:12px;color:var(--blue)}
.foot-cols .brand span:last-child{font-size:14px}
.foot-cols .cta-link{color:var(--blue);font-weight:600}
.foot-base{border-top:1px solid var(--deep);padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--on-dark-2)}
.foot-base a{color:var(--on-dark-2)}

/* reveal on scroll: only elements that start below the fold are ever hidden,
   so nothing flickers and nothing is hidden without JavaScript. */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.pending{opacity:0;transform:translateY(28px)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
.float{animation:float 9s ease-in-out infinite}
.float.slow{animation-duration:12s}
@keyframes float{50%{translate:0 -10px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .float,.panels figure,.owl-float .construct,.cta-owl .construct{animation:none}
  .reveal,.btn,.vero-cards > div,.benefit,.benefit .seg,.benefit .tick,.art .grow,.art .pop,.art .draw,.layers li,.kit{transition:none}
  .layers.pending li{width:var(--w)}
  .pending .art .grow,.pending .art .pop{transform:none;opacity:1}
  .pending .art .draw{stroke-dashoffset:0}
  .benefit.pending .seg{transform:none}
  .benefit.pending .tick{opacity:1;transform:translate(286px,30px)}
  .reveal.pending{opacity:1;transform:none}
  .line,.eye{transition:none}
  .pending .line{stroke-dashoffset:0}
  .pending .eye{opacity:1;transform:none}
}

/* plain pages: privacy, 404, the no-JavaScript form reply */
main.plain{max-width:780px;padding-block:clamp(48px,7vw,104px)}
main.plain > img{margin-bottom:24px}
main.plain .kicker{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--deep);margin-bottom:16px}
main.plain h1{font-size:clamp(40px,5vw,64px);line-height:1;margin-bottom:24px}
main.plain h2{font-size:clamp(22px,2.4vw,28px);margin:40px 0 12px}
main.plain p,main.plain li{margin-bottom:12px}
main.plain ul{padding-left:20px;margin-bottom:12px}
main.plain .lede.big{font-size:19px}
main.plain .btn{margin-top:16px}
.table-wrap{overflow-x:auto;margin:8px 0 16px;border:1px solid var(--rule);border-radius:10px}
main.plain table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
main.plain th,main.plain td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--rule)}
main.plain th{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);background:var(--grey)}
main.plain tr:last-child td{border-bottom:0}
main.plain code{font-size:13px;background:var(--ice);padding:2px 6px;border-radius:4px;color:var(--dark);white-space:nowrap}
/* on phones each table row becomes a card: the name on top, then each
   field with its own small label, so nothing needs sideways scrolling */
@media(max-width:640px){
  .table-wrap{border:0;overflow:visible}
  main.plain table{min-width:0;font-size:15px}
  main.plain table thead{display:none}
  main.plain table,main.plain tbody,main.plain tr,main.plain td{display:block;width:100%}
  main.plain tr{border:1px solid var(--rule);border-radius:10px;margin-bottom:12px;background:#FFFFFF;overflow:hidden}
  main.plain td{border:0;padding:4px 16px 10px}
  main.plain td::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);margin-bottom:2px}
  main.plain td:first-child{background:var(--grey);border-bottom:1px solid var(--rule);padding:12px 16px;margin-bottom:8px}
  main.plain td:first-child::before{display:none}
  main.plain tr:last-child td{border-bottom:0}
  main.plain tr:last-child td:first-child{border-bottom:1px solid var(--rule)}
}
/* the privacy page's own small header and footer */
.plain-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.plain-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:36px;font-size:14px}
.plain-foot img{height:28px;width:auto}