/* ============================================================
   ConverNova, shared stylesheet
   Two themes: body.dark for the home, body.light for the
   technical pages. Every colour pair below is measured, and the
   ratio is written beside it.
   ============================================================ */

/* ---------- DARK, the home ---------- */
body.dark{
  --canvas:#0A0D14;
  --canvas-deep:#06080D;
  --panel:#121724;
  --panel-hi:#1A2132;
  --text:#EDF1F7;          /* 17.2:1 on canvas */
  --text-dim:#B4BECD;      /* 11.0:1 on canvas */
  --text-nav:#DCE3EC;      /* 15.0:1 on canvas */
  --accent:#4A96FF;        /*  6.6:1 on canvas, for links and emphasis */
  --accent-deep:#0B5FD0;   /* button fill, white on it is 6.0:1 */
  --accent-hi:#7FB4FF;
  --accent-muted:rgba(74,150,255,.22);
  --copper:#DC9A66;        /*  8.2:1 on canvas, and it clears 4.5:1 over the hero frame */
  --line:rgba(180,190,205,.17);
  --line-strong:rgba(180,190,205,.34);
  --btn-text:#FFFFFF;
}

/* ---------- LIGHT, the technical pages ---------- */
body.light{
  --canvas:#FBFCFD;
  --canvas-deep:#F1F4F8;
  --panel:#F4F7FA;
  --panel-hi:#EAEFF5;
  --text:#0E141C;          /* 17.8:1 on canvas */
  --text-dim:#4A5766;      /*  7.1:1 on canvas */
  --text-nav:#0E141C;
  --accent:#0B5FD0;        /*  5.8:1 on canvas */
  --accent-deep:#0B5FD0;
  --accent-hi:#0949A4;
  --accent-muted:rgba(11,95,208,.16);
  --copper:#9A5426;        /*  5.5:1 on canvas */
  --line:rgba(14,20,28,.13);
  --line-strong:rgba(14,20,28,.28);
  --btn-text:#FFFFFF;
}

:root{
  --display:"Archivo","Archivo Black",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(5,5,10,.9),0 3px 12px rgba(5,5,10,.7),0 10px 44px rgba(5,5,10,.75);
  --gutter:clamp(20px,5vw,64px);
  --maxw:1220px;
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent)}
p{margin:0}
h1,h2,h3,h4{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:800;
  line-height:1.06;letter-spacing:-.02em;margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}

/* sizes, deliberately smaller than the first build */
h1{font-size:clamp(28px,4vw,46px)}
h2{font-size:clamp(24px,3vw,38px)}
h3{font-size:clamp(17px,1.6vw,20px);letter-spacing:-.012em}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent-deep);
  color:#fff;padding:12px 20px;font-family:var(--mono);font-size:13px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   NAV. A solid bar, not a gradient wash, so the links always read.
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav-h);
  display:flex;align-items:center;gap:22px;padding:0 var(--gutter);
  background:var(--canvas-deep);border-bottom:1px solid var(--line)}
body.dark .nav{background:rgba(6,8,13,.94);backdrop-filter:blur(10px)}
body.light .nav{background:rgba(251,252,253,.95);backdrop-filter:blur(10px)}
.nav-logo{display:flex;align-items:center;margin-right:auto;text-decoration:none}
.nav-logo img{height:42px;width:auto}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links>li{list-style:none;position:relative}
.nav-links a{display:block;padding:9px 12px;border-radius:7px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.045em;text-transform:uppercase;
  color:var(--text-nav);text-decoration:none;white-space:nowrap;
  transition:background .28s var(--ease-soft),color .28s var(--ease-soft)}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--panel-hi);color:var(--accent)}
.nav ul{margin:0;padding:0}
/* dropdown */
.has-sub>ul{position:absolute;top:100%;left:0;min-width:230px;padding:7px;
  background:var(--canvas-deep);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .26s var(--ease-soft),transform .26s var(--ease),visibility .26s}
.has-sub:hover>ul,.has-sub:focus-within>ul{opacity:1;visibility:visible;transform:none}
.has-sub>ul li{list-style:none}
.has-sub>ul a{text-transform:none;font-family:var(--body);font-size:14.5px;letter-spacing:0}
.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;
  width:42px;height:38px;cursor:pointer;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:11px;width:18px;height:1.5px;background:var(--text);
  transition:transform .3s var(--ease),opacity .3s}
.nav-toggle span{top:18px}
.nav-toggle span::before{top:-6px;left:0}
.nav-toggle span::after{top:6px;left:0}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1080px){
  /* No blur on the bar here. A backdrop-filter makes the element the
     containing block for its fixed descendants, which collapsed the panel
     below to nothing. The bar is 94% opaque anyway. */
  body.dark .nav,body.light .nav{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-toggle{display:block}
  /* An explicit height, not bottom:0, so the panel is sized correctly
     whatever acts as its containing block. dvh tracks the address bar. */
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;
    height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));
    flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;
    background:var(--canvas);padding:16px var(--gutter) 40px;
    transform:translateX(100%);transition:transform .4s var(--ease);}
  .nav.open .nav-links{transform:none}
  .nav-links a{padding:13px 4px;font-size:14px;border-bottom:1px solid var(--line)}
  .has-sub>ul{position:static;opacity:1;visibility:visible;transform:none;
    border:none;box-shadow:none;background:none;padding:0 0 0 14px;min-width:0}
  .nav .btn{display:none}
}

/* ============================================================
   BUTTONS. White on a deeper blue: 6.0:1, and it looks the way
   the client wanted rather than dark text on a bright fill.
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:8px;border:1px solid transparent;
  font-family:var(--mono);font-size:13px;letter-spacing:.03em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease-soft),border-color .3s var(--ease-soft),
             color .3s var(--ease-soft),transform .3s var(--ease)}
.btn-primary{background:var(--accent-deep);color:var(--btn-text);font-weight:500}
.btn-primary:hover{background:var(--accent-hi);transform:translateY(-2px)}
body.dark .btn-primary:hover{background:#1B6FE0}
.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
@media(pointer:coarse){.btn{min-height:44px}}

/* ============================================================
   SECTIONS
   ============================================================ */
main{position:relative;z-index:1}
.sec{padding:clamp(58px,7.5vw,104px) 0}
.sec.alt{background:var(--canvas-deep)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);display:flex;align-items:center;gap:11px;margin:0 0 14px}
.kicker::after{content:"";height:1px;flex:1;max-width:64px;background:var(--line-strong)}
.lede{margin-top:15px;max-width:60ch;color:var(--text-dim);font-size:clamp(15.5px,1.3vw,17.5px)}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--copper)}

/* page header used on every inner page */
.phead{padding:calc(var(--nav-h) + clamp(40px,5.5vw,72px)) 0 clamp(30px,4vw,54px);
  border-bottom:1px solid var(--line);background:var(--canvas-deep)}
.phead h1{max-width:20ch}
.phead .lede{max-width:66ch;margin-top:17px;font-size:clamp(16px,1.4vw,18.5px)}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-dim);
  margin-bottom:16px}
.crumbs a{color:var(--text-dim);text-decoration:none}
.crumbs a:hover{color:var(--accent)}

/* the signature: a roll-off curve that draws itself */
.divider{display:block;width:100%;height:60px;overflow:visible;margin:8px 0}
.divider .nominal{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:5 6;fill:none}
.divider .curve{stroke:var(--accent);stroke-width:1.6;fill:none;
  stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 1.6s var(--ease)}
.divider.in .curve{stroke-dashoffset:0}
.divider .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--text-dim);
  text-transform:uppercase;opacity:0;transition:opacity .6s var(--ease-soft) .8s}
.divider.in .lbl{opacity:.8}

/* reveals */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .78s var(--ease),transform .78s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.02s}
.stagger.in>*:nth-child(2){transition-delay:.1s}
.stagger.in>*:nth-child(3){transition-delay:.18s}
.stagger.in>*:nth-child(4){transition-delay:.26s}
.stagger.in>*:nth-child(5){transition-delay:.34s}
.stagger.in>*:nth-child(6){transition-delay:.42s}
.stagger.done>*:nth-child(1),.stagger.done>*:nth-child(2),.stagger.done>*:nth-child(3),
.stagger.done>*:nth-child(4),.stagger.done>*:nth-child(5),.stagger.done>*:nth-child(6){
  transition-delay:0s!important}

/* ============================================================
   COMPONENTS
   ============================================================ */
/* proof strip with icons */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--canvas-deep)}
.proof .row{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
.proof .cell{background:var(--canvas);padding:24px 16px;text-align:center}
.proof svg{width:26px;height:26px;margin:0 auto 12px;display:block;
  stroke:var(--copper);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.proof .n{font-family:var(--display);font-variation-settings:"wdth" 100;font-weight:800;
  font-size:clamp(18px,2vw,25px);letter-spacing:-.02em;color:var(--text)}
.proof .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--copper);margin-top:7px}
@media(max-width:900px){.proof .row{grid-template-columns:repeat(2,1fr)}
  .proof .cell:last-child{grid-column:1/-1}}

/* card grid */
.cards{display:grid;gap:18px;margin-top:38px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cards.c3,.cards.c2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:26px 24px 30px;
  transition:border-color .4s var(--ease-soft),background .4s var(--ease-soft),
             transform .4s var(--ease)}
.card:hover{border-color:var(--accent-muted);background:var(--panel-hi);transform:translateY(-3px)}
.card h3{margin-bottom:10px}
.card p{color:var(--text-dim);font-size:15.5px}
.card .art{height:112px;margin-bottom:20px}
.card .art svg{width:100%;height:100%;overflow:visible}
.art .st{stroke:var(--text-dim);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.art .cu{stroke:var(--copper);stroke-width:2.1;fill:none;stroke-linecap:round}
.art .fx{stroke:var(--accent);stroke-width:1.4;fill:none;stroke-dasharray:5 6;opacity:.9}
.card:hover .art .fx{animation:flux 3.2s linear infinite}
@keyframes flux{to{stroke-dashoffset:-44}}

/* split skeleton */
.split{display:grid;grid-template-columns:.76fr 1.24fr;gap:clamp(28px,4.5vw,60px);
  align-items:start}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:28px}}
.split-aside{position:sticky;top:calc(var(--nav-h) + 26px)}
@media(max-width:940px){.split-aside{position:static}}
.split-aside p{margin-top:18px;color:var(--text-dim);max-width:36ch;font-size:15.5px}
.split-aside .btn{margin-top:22px}

/* spec sheet rows */
.spec-rows{border-top:1px solid var(--line-strong)}
.spec-rows .r{display:grid;grid-template-columns:150px 1fr;gap:clamp(14px,2.4vw,32px);
  align-items:baseline;padding:19px 0 21px;border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease-soft)}
.spec-rows .r:hover{border-color:var(--accent-muted)}
@media(max-width:640px){.spec-rows .r{grid-template-columns:1fr;gap:6px}}
.spec-rows dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper);margin:0}
.spec-rows dd{margin:0;color:var(--text-dim);font-size:15.5px}

/* data table */
.tbl-scroll{overflow-x:auto;margin-top:30px;border:1px solid var(--line);border-radius:11px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.8px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper);background:var(--panel);font-weight:500}
td{color:var(--text-dim)}
td:first-child{color:var(--text);font-weight:500}
tr:last-child td{border-bottom:none}
/* a part number split across two lines stops being a part number */
#named-designs td:first-child{white-space:nowrap}
@media(max-width:640px){#named-designs td:first-child{white-space:normal}}

/* numbered steps */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(22px,3vw,40px)}
@media(max-width:620px){.steps{grid-template-columns:1fr}}
.step{padding:24px 0 28px;border-top:1px solid var(--line);
  transition:border-color .4s var(--ease-soft)}
.step:hover{border-color:var(--accent)}
.step .no{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--copper);
  margin-bottom:13px}
.step h3{margin-bottom:9px}
.step p{color:var(--text-dim);font-size:15px}

/* photo grid */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:38px}
.photos.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.photos,.photos.two{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.photos,.photos.two{grid-template-columns:1fr}}
.photo{position:relative;border-radius:11px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);aspect-ratio:4/3;
  transition:border-color .4s var(--ease-soft),transform .5s var(--ease)}
.photo:hover{border-color:var(--accent-muted);transform:translateY(-3px)}
.photo img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease)}
.photo:hover img{transform:scale(1.045)}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 13px 11px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:#fff;
  background:linear-gradient(to top,rgba(6,8,13,.94),transparent)}

/* faq */
.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:21px 44px 21px 0;position:relative;
  font-family:var(--display);font-variation-settings:"wdth" 106;font-weight:600;
  font-size:clamp(16px,1.7vw,19px);letter-spacing:-.012em;
  transition:color .3s var(--ease-soft)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  margin-top:-7px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .a{padding:0 8% 23px 0;color:var(--text-dim);max-width:76ch}

/* what happens next */
.next{border-top:1px solid var(--line-strong)}
.next div{padding:17px 0 19px;border-bottom:1px solid var(--line)}
.next b{display:block;font-family:var(--display);font-variation-settings:"wdth" 100;
  font-weight:800;font-size:19px;letter-spacing:-.018em}
.next span{display:block;color:var(--text-dim);font-size:14.5px;margin-top:4px}

/* ============================================================
   FORMS
   ============================================================ */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:7px}
.f.full{grid-column:1/-1}
.f label,.flabel{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--copper)}
.f input,.f select,.f textarea{background:var(--panel);border:1px solid var(--line-strong);
  border-radius:8px;padding:12px 14px;font-size:15.5px;width:100%;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);
  background:var(--panel-hi);outline:none}
.f textarea{min-height:124px;resize:vertical}
.f input[type=file]{padding:10px 12px;font-family:var(--mono);font-size:13px}
.fieldset{border:1px solid var(--line);border-radius:12px;padding:22px 22px 26px;margin:0 0 22px}
.fieldset legend{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--copper);padding:0 8px}
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
@media(max-width:760px){.checks{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.checks{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);cursor:pointer;font-size:14.5px;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.check:hover{border-color:var(--accent-muted);background:var(--panel-hi)}
.check input{width:17px;height:17px;accent-color:var(--accent-deep);flex:none}
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:18px;font-size:14.5px;
  color:var(--text-dim)}
.consent input{width:17px;height:17px;accent-color:var(--accent-deep);margin-top:3px;flex:none}
.hint{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);line-height:1.6;margin-top:10px}
.formmsg{margin-top:18px;padding:16px 18px;border-radius:10px;font-size:15px;display:none}
.formmsg.on{display:block}
.formmsg.ok{background:var(--accent-muted);border:1px solid var(--accent);color:var(--text)}
.formmsg.bad{background:rgba(242,109,91,.13);border:1px solid rgba(242,109,91,.45);color:var(--text)}

/* guidance panel beside the form */
.guide{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media(max-width:760px){.guide{grid-template-columns:1fr}}
.guide div{border:1px solid var(--line);border-radius:11px;padding:19px 20px 22px;
  background:var(--panel)}
.guide h4{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--copper);margin:0 0 12px;font-weight:500}
.guide ul{margin:0;padding-left:17px;color:var(--text-dim);font-size:14px;line-height:1.7}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--line);padding:48px 0 34px;background:var(--canvas-deep)}
.f-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
.f-top img{height:46px;width:auto}
.f-tag{margin-top:15px;color:var(--text-dim);font-size:15px}
.f-tag span{display:block}
.f-cols{display:flex;gap:44px;flex-wrap:wrap}
.f-cols h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--copper);margin:0 0 11px;font-weight:500}
.f-cols ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.f-cols a{font-size:14.5px;color:var(--text-dim);text-decoration:none;
  transition:color .3s var(--ease-soft)}
.f-cols a:hover{color:var(--accent)}
.f-bot{margin-top:38px;padding-top:21px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:.03em;
  line-height:1.7}
/* The legal links sit above the copyright line and are given a little more
   size than it, because they are navigation and it is not. */
.f-legal{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 14px;font-size:12px}
.f-legal a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-strong);
  padding-bottom:2px}
.f-legal a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.f-bot p{margin:0}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal,.stagger>*{opacity:1!important;transform:none!important}
  .divider .curve{stroke-dashoffset:0!important}
  .divider .lbl{opacity:1!important}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ============================================================
   LEGAL PAGES. One readable column of running text, which the
   marketing pages never needed. The pending marker is loud on
   purpose: these documents carry company details that only the
   client can supply, and a page must never reach the server
   with one still in it.
   ============================================================ */
.legal{max-width:74ch}
.legal h2{font-size:clamp(19px,1.9vw,24px);margin:46px 0 14px}
.legal h2:first-child{margin-top:0}
.legal h3{margin:28px 0 10px}
.legal p{margin:0 0 15px;color:var(--text-dim)}
.legal ul{margin:0 0 16px;padding-left:22px;color:var(--text-dim)}
.legal li{margin-bottom:7px}
.legal dl{margin:0 0 18px}
.legal dt{font-weight:500;color:var(--text);margin-top:12px}
.legal dd{margin:3px 0 0;color:var(--text-dim)}
.legal .updated{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:34px}
mark.pending{background:#FFE08A;color:#4A3200;padding:1px 7px;border-radius:4px;
  font-family:var(--mono);font-size:12.5px;font-weight:500}

/* ============================================================
   COOKIE NOTICE. A small card in the corner rather than a bar
   across the page, because it should be answerable and then
   forgotten. Accept and Decline share one style on purpose:
   a reject that looks weaker than the accept is not a free
   choice, and the AEPD treats it as no consent at all.
   ============================================================ */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;
  padding:14px var(--gutter);
  background:var(--canvas);border-top:1px solid var(--line-strong);
  box-shadow:0 -14px 40px rgba(0,0,0,.16);
  transform:translateY(100%);transition:transform .42s var(--ease)}
.cc.in{transform:none}
.cc p{margin:0;flex:1 1 420px;font-size:13.5px;line-height:1.55;color:var(--text-dim)}
.cc-row{display:flex;gap:10px;flex:0 0 auto}
.cc-row button{min-width:124px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:11px 16px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--text);
  transition:border-color .22s var(--ease-soft),color .22s var(--ease-soft)}
.cc-row button:hover{border-color:var(--accent);color:var(--accent)}
/* the footer control that reopens it, matching the legal links beside it */
.f-legal button{font:inherit;background:none;border:0;padding:0 0 2px;cursor:pointer;
  color:var(--text);border-bottom:1px solid var(--line-strong)}
.f-legal button:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:560px){
  .cc{padding:15px 16px}
  .cc p{flex:1 1 100%;font-size:13px}
  .cc-row{flex:1 1 100%}
  .cc-row button{flex:1;min-width:0}
}
/* the cookie table inside a legal page */
.legal-table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px;
  display:block;overflow-x:auto;white-space:nowrap}
.legal-table th,.legal-table td{text-align:left;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line);vertical-align:top}
.legal-table th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);font-weight:400}
.legal-table td{color:var(--text-dim)}
.legal-table td:first-child{font-family:var(--mono);font-size:12.5px;color:var(--text)}
.legal code{font-family:var(--mono);font-size:12.5px;background:var(--panel-hi);
  padding:2px 6px;border-radius:4px;color:var(--text)}
@media(min-width:720px){.legal-table{white-space:normal}}

/* The chat launcher and the cookie notice both live in the bottom right, and
   the launcher was landing on the Accept button. It steps up while the notice
   is on screen and drops back when the visitor has answered. */
body.cc-open #hubspot-messages-iframe-container{bottom:104px!important}
@media(max-width:560px){
  body.cc-open #hubspot-messages-iframe-container{bottom:150px!important}
}