:root{
  --blue:#004C98;        /* PMS 2945 C */
  --blue-deep:#003A75;
  --red:#DA291C;         /* PMS 485 C */
  --navy:#0B2A4A;        /* derived from the blue: display type + body ink */
  --ink:#0B2A4A;
  --ink-soft:#5A6478;
  --line:#E3E1DA;        /* news-page card border */
  --line-cool:#E1E6ED;
  --paper:#FDFCF7;       /* the theme's own base, warm */
  --card:#FFFFFF;        /* cards sit a shade above the page */
  --paper-warm:#F4F1E9;  /* alternate band, one step deeper than the page */
  --nav-h:76px;

  --t-hero:clamp(40px,5.4vw,72px);
  --t-statement:clamp(30px,4vw,54px);
  --t-section:clamp(28px,2.6vw,38px);
  --t-card:21px;
  --t-body:17px;
  --t-meta:13px;

  --gap-grid:32px;       /* every card grid */
  --gap-tight:16px;      /* image and logo grids */
  --card-pad:26px;       /* every card body */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:var(--t-body)/1.65 "Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,.display{font-family:"Oswald","Barlow",sans-serif;font-weight:600;letter-spacing:.005em;
  margin:0;color:var(--navy)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* keyboard focus: one ring in every skin, coloured by --focus. .wp-site-blocks keeps it off the editor canvas and outranks the theme's button focus colour */
.wp-site-blocks :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* on the blue band and on the editor's dark navy (colour 8) the ring turns white, lime on DataLift */
footer.site,.mission,.has-custom-color-8-background-color{--focus:var(--focus-on-band)}
/* Complianz's notice over a blocked video or map is a dark box on a photo: its ring goes inside the box */
.wp-site-blocks .cmplz-blocked-content-notice:focus-visible{--focus:var(--focus-on-band);outline-offset:-5px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.eyebrow{font:500 var(--t-meta)/1.4 "Oswald",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.eyebrow.on-blue{color:rgba(255,255,255,.72)}
.crumbs{font:500 11px/1 "Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 20px}
.crumbs a{color:var(--blue)}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.rule{border-top:1px solid var(--line-cool)}

/* ---------- header: one header, sticky, thin; jumps and keyboard focus stop clear of it ---------- */
html{scroll-padding-top:calc(var(--nav-h) + var(--s-4))}
header.site{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line-cool)}
header.site .bar{max-width:1200px;margin:0 auto;padding:0 32px;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:28px}
header.site .logo img{height:30px;width:auto}
nav.main{display:flex;align-items:center;gap:30px}
nav.main a{font:500 13px/1 "Oswald",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
nav.main a:hover{color:var(--blue);border-color:var(--blue)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;
  font:600 12px/1 "Oswald",sans-serif;letter-spacing:.13em;text-transform:uppercase;
  padding:13px 22px;border-radius:2px;transition:background .18s}
.pill:hover{background:#B92116}
.pill:active{transform:translateY(1px) scale(.98)}
.pill.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.pill.ghost:hover{background:var(--blue);color:#fff}
.pill.on-blue{background:#fff;color:var(--blue)}
.pill.on-blue:hover{background:#F0F4F9}

/* ---------- hero slider ---------- */
.hero{position:relative;padding:64px 0 0;background:var(--paper)}
.slider{position:relative}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  gap:0;scrollbar-width:none;-ms-overflow-style:none}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start}
.slide .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;min-height:520px}
.slide h1,.slide h2.slidetitle{font-family:"Oswald",sans-serif;font-weight:600;
  font-size:var(--t-hero);line-height:1.03;letter-spacing:-.015em;max-width:15ch;margin:18px 0 0}
.slide .thin{display:block;font-weight:500;color:var(--blue)}
.slide p.lede{font-size:21px;line-height:1.5;color:var(--ink-soft);max-width:40ch;margin:26px 0 34px;font-weight:300}
/* hero-kehys on nelio: kuvat on rajattu kasin kansioon img/hero/ niin etta
   ihmiset ovat kokonaan kuvassa. Alkuperaiset ovat img/hero/originals/. */
.slide .shot{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--paper-warm)}
.slide .shot img{width:100%;height:100%;object-fit:cover}
.slidernav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:34px}
.slidernav .navgroup{display:flex;align-items:center;gap:18px}
.dots{display:flex;gap:10px;align-items:center}
.dots button{width:34px;height:3px;border:0;padding:0;background:var(--line-cool);cursor:pointer;
  border-radius:2px;transition:background .2s}
.dots button[aria-current="true"]{background:var(--blue)}
.arrows{display:flex;gap:10px}
.arrows button{width:44px;height:44px;border:1px solid var(--line-cool);background:var(--card);border-radius:50%;
  cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s}
.arrows button:hover{border-color:var(--blue);background:var(--blue);color:#fff}
.arrows svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.slidelabel{font:500 12px/1 "Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.hero .rule{margin-top:64px}

/* ---------- motion: less of it on every skin when the visitor asks ----------
   Scrolls jump and nothing fades or slides. Animations keep a 1ms run rather than none, so an end
   state held by "forwards" still lands (the Complianz "Manage consent" tab). !important because the
   universal selector has to outrank every component's own transition. slider.js reads the same query. */
@media (prefers-reduced-motion:reduce){
  html,.track{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation-duration:1ms!important;animation-iteration-count:1!important}
}

/* ---------- section frame ---------- */
section.band{padding:112px 0}
section.band.tight{padding:88px 0}
section.band.flush{padding-top:64px}
section.band.alt{background:var(--paper-warm);
  border-top:1px solid var(--line-cool);border-bottom:1px solid var(--line-cool)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:44px}
.sechead h2{font-size:var(--t-section);line-height:1.12;letter-spacing:-.01em;margin-top:14px}
.sechead p{color:var(--ink-soft);max-width:46ch;margin:10px 0 0;font-weight:300}
.sechead .more{font:500 12px/1 "Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---------- product band: three large cards ---------- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.pcard{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card);
  display:flex;flex-direction:column;transition:border-color .2s}
.pcard:hover{border-color:var(--blue)}
.pcard .pic{aspect-ratio:4/3;background:var(--paper-warm);overflow:hidden}
.pcard .pic img{width:100%;height:100%;object-fit:cover}
.pcard .body{padding:var(--card-pad);display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:var(--t-card);line-height:1.25}
.pcard .sub{font-size:15px;color:var(--ink-soft);margin:10px 0 0;font-weight:300;flex:1}
.pcard .go{margin-top:22px;font:500 12px/1 "Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.pcard .tagline{font:500 11px/1 "Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px}

/* ---------- mission: the one blue full-bleed moment ---------- */
.mission{background:var(--blue);color:#fff;padding:168px 0 148px;position:relative;overflow:hidden}
.mission::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--red)}
.mission .inner{max-width:1180px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
/* oversized ghost quotation mark */
.mission .glyph{position:absolute;top:-.30em;left:-.10em;font-family:"Oswald",sans-serif;font-weight:600;
  font-size:clamp(220px,26vw,420px);line-height:.8;color:rgba(255,255,255,.055);pointer-events:none;
  user-select:none;z-index:1}
.mission blockquote{margin:0}
.mission .q{font-family:"Oswald",sans-serif;font-weight:500;
  font-size:clamp(34px,5.6vw,80px);line-height:1.06;letter-spacing:-.018em;
  max-width:19ch;margin:22px 0 0}
.mission .q .ln{display:block}
.mission .q .hl{color:#A8CBF0;font-weight:600}
.mission .rulewrap{margin-top:52px}
.mission .rule2{width:88px;height:3px;background:var(--red)}
.mission .who{margin-top:26px}
.mission .who b{font-family:"Oswald",sans-serif;font-weight:500;font-size:20px;letter-spacing:.06em;color:#fff}
.mission .who i{font-style:normal;font-size:16px;color:rgba(255,255,255,.72);margin-left:14px;letter-spacing:.02em}

/* ---------- statement: the front page's quote language, on paper ----------
   Replaces the full-width blue panel. Same measurements as the production
   front-page mission quote: Oswald clamp(26,3.2vw,44), 64x3 red rule,
   attribution in caps. ---------------------------------------------------- */
.statement{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.statement .q{font-family:"Oswald",sans-serif;font-weight:500;
  font-size:clamp(26px,3.2vw,44px);line-height:1.18;letter-spacing:-.012em;
  color:var(--blue);margin:0;max-width:20ch}
.statement blockquote{margin:0}
.statement .line{width:64px;height:3px;background:var(--red);margin:30px 0 22px}
.statement .who{font:500 13px/1.6 "Oswald",sans-serif;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);margin:0}
.statement .who b{display:block;color:var(--navy);font-weight:500;font-size:15px}
.statement .shot{border-radius:14px;overflow:hidden;background:var(--paper-warm);aspect-ratio:4/3}
.statement .shot img{width:100%;height:100%;object-fit:cover}
.statement.solo{grid-template-columns:1fr;justify-items:center;text-align:center}
.statement.solo .q{max-width:24ch}
.statement.solo .line{margin-left:auto;margin-right:auto}
@media (max-width:1000px){.statement{grid-template-columns:1fr;gap:34px}}

/* ---------- testimonial with visible consent placeholder ---------- */
.voice{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.player{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#0F172A;aspect-ratio:16/9}
.player img{width:100%;height:100%;object-fit:cover;opacity:.55}
.player .gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}
.player .play{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center}
.player .play span{display:block;width:0;height:0;border-left:20px solid var(--blue);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.player .gate small{color:#fff;font-size:13px;max-width:34ch;line-height:1.5}
.voice .quote{font-family:"Oswald",sans-serif;font-weight:500;font-size:clamp(21px,2vw,27px);line-height:1.34;letter-spacing:-.005em}
.voice .attrib{margin-top:22px;font-size:15px;color:var(--ink-soft)}
.voice .attrib b{display:block;color:var(--ink);font-family:"Oswald",sans-serif;font-weight:500;letter-spacing:.04em;font-size:16px}

/* ---------- article + reason cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.card{border:1px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s}
.card:hover{border-color:var(--blue)}
.card .pic{aspect-ratio:16/10;overflow:hidden;background:var(--paper-warm)}
.card .pic img{width:100%;height:100%;object-fit:cover}
.card .body{padding:var(--card-pad);display:flex;flex-direction:column;flex:1}
.card .kicker{font:500 11px/1 "Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.card h3{font-size:var(--t-card);line-height:1.3}
.card p{font-size:15px;color:var(--ink-soft);margin:12px 0 0;font-weight:300;flex:1}
.card .go{margin-top:20px;font:500 12px/1 "Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

/* ---------- dealers ---------- */
.dealcount{display:flex;gap:44px;flex-wrap:wrap;margin-bottom:40px}
.dealcount .d .n{font:600 34px/1 "Oswald",sans-serif;color:var(--blue)}
.dealcount .d .l{font-size:14px;color:var(--ink-soft);margin-top:6px}
.logogrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap-tight)}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s}
.dcard:hover{border-color:var(--blue)}
.dcard .logobox{height:96px;display:grid;place-items:center;padding:16px;border-bottom:1px solid var(--line)}
.dcard .logobox img{max-height:46px;max-width:140px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.74;transition:filter .2s,opacity .2s}
.dcard:hover .logobox img{filter:none;opacity:1}
/* touch screens have no hover: the logos show in colour */
@media (hover:none){.dcard .logobox img{filter:none;opacity:1}}
.dcard .meta{padding:14px 16px 16px}
.dcard .cn{font:500 11px/1.2 "Oswald",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.dcard .dn{font-size:14px;color:var(--ink-soft);margin-top:6px;font-weight:300}
/* no website link: the logo fades and the country turns grey; the text keeps its contrast */
.dcard.nolink .logobox{opacity:.72}
.dcard.nolink .cn,body.skin-dark .dcard.nolink .cn{color:var(--ink-soft)}

/* ---------- CTA pair as its own part ---------- */
.ctapair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid)}
.ctabox{border:1px solid var(--line);border-radius:8px;padding:38px 34px;background:var(--card);
  display:flex;flex-direction:column;gap:18px;align-items:flex-start;transition:border-color .2s}
.ctabox:hover{border-color:var(--blue)}
.ctabox h3{font-size:var(--t-card);line-height:1.28;max-width:22ch}

/* ---------- footer ---------- */
footer.site{background:var(--blue);color:#fff;padding:76px 0 0;border-top:4px solid var(--red)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px}
footer.site img.mark{height:18px;margin-bottom:20px;content:var(--logo-on-dark)}
footer.site p.blurb{font-size:15px;color:rgba(255,255,255,.8);font-weight:300;max-width:34ch}
footer.site p.ixo-certs{margin:var(--s-4) 0 0;font-size:var(--fs-caption);color:var(--on-band-faint)}
body.skin-dl footer.site p.ixo-certs{display:none}
footer.site h4{font:500 12px/1 "Oswald",sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin:0 0 16px;opacity:.72}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:0 0 10px}
footer.site a{color:rgba(255,255,255,.9);font-size:15px}
footer.site a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer.site .addr{font-size:15px;color:rgba(255,255,255,.9);line-height:1.75}
footer.site .bottom{margin-top:56px;border-top:1px solid rgba(255,255,255,.16);padding:22px 0;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.7)}

/* ---------- annotation chrome for the review copy ---------- */
.note{position:relative;background:#FFFBEB;border-left:3px solid #D97706;padding:14px 18px;
  font-size:14px;color:#78350F;max-width:74ch;margin:0 auto 0;border-radius:0 6px 6px 0}
.notewrap{max-width:1200px;margin:0 auto;padding:18px 32px 0}
.reviewbar{background:var(--ink);color:#fff;font-size:13px;padding:10px 32px;text-align:center;letter-spacing:.02em}
.reviewbar b{font-family:"Oswald",sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:12px}

@media (max-width:1000px){
  .hero .grid{grid-template-columns:1fr;gap:36px}
  .products,.cards{grid-template-columns:1fr 1fr}
  .voice{grid-template-columns:1fr;gap:32px}
  .logogrid{grid-template-columns:repeat(3,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .wrap,header.site .bar{padding:0 20px}
  .products,.cards,.ctapair{grid-template-columns:1fr}
  .logogrid{grid-template-columns:repeat(2,1fr)}
  .sechead{flex-direction:column;align-items:flex-start}
  section.band{padding:72px 0}
  .mission{padding:88px 0}
  footer.site .cols{grid-template-columns:1fr}
}

/* ============================================================
   TEMPLATE ADDITIONS — product page and article page
   Same tokens, same rhythm as the front page.
   ============================================================ */

/* --- shared page hero (product + article) --- */
.phero{padding:72px 0 0}
.phero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.phero h1{font-size:clamp(34px,4.4vw,60px);line-height:1.05;letter-spacing:-.015em;max-width:16ch;margin:0}
.phero .lede{font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:42ch;margin:24px 0 32px;font-weight:300}
.phero .rule{margin-top:72px}
.phero .shot{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--paper-warm)}
.phero .shot img{width:100%;height:100%;object-fit:cover}

/* --- spec table, Apple-style rows --- */
.specs{border-top:1px solid var(--line-cool)}
.specrow{display:grid;grid-template-columns:minmax(180px,.9fr) 2fr;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--line-cool);align-items:baseline}
.specrow dt{font:500 12px/1.4 "Oswald",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.specrow dd{margin:0;font-size:17px;line-height:1.6}
.specrow dd b{font-family:"Oswald",sans-serif;font-weight:500;font-size:20px;color:var(--blue)}
dl.specs{margin:0}

/* --- feature cards (product) --- */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-grid)}
.fcard{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:var(--card-pad);transition:border-color .2s}
.fcard:hover{border-color:var(--blue)}
.fcard h3{font-size:var(--t-card);line-height:1.3;margin:0 0 10px}
.fcard p{font-size:16px;color:var(--ink-soft);margin:0;font-weight:300}
.fcard .ic{font:500 11px/1 "Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px}

/* --- gallery strip --- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-tight)}
.gallery figure{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper-warm);aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover}

/* --- article layout --- */
.article{max-width:720px;margin:0 auto}
.article .meta{font:500 12px/1 "Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.article .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line-cool)}
.article h1{font-size:clamp(30px,3.6vw,48px);line-height:1.1;letter-spacing:-.015em;margin:0 0 24px}
.article .standfirst{font-size:21px;line-height:1.6;color:var(--ink-soft);font-weight:300;margin:0 0 40px}
.article p:not(.crumbs){font-size:18px;line-height:1.72;margin:0 0 22px}
.article h2{font-size:26px;line-height:1.25;margin:44px 0 16px}
.article > h2:first-child,.article > h3:first-child{margin-top:0}
.article h3{font-size:20px;line-height:1.3;margin:36px 0 12px}
.article ul{margin:0 0 24px;padding-left:22px}
.article li{font-size:18px;line-height:1.7;margin:8px 0}
/* prose and list lines stop at the measure; boxed and centred paragraphs, the meta row, figures, tables and headings keep the column */
.article :is(p:not(.crumbs,.meta,.has-background,.has-text-align-center),li){max-width:var(--measure)}
/* core centres every child of a constrained group with margin:auto !important (the 2025 DataLift pages); only !important keeps a measured paragraph on the left edge */
.article .is-layout-constrained>p:not(.has-background,.has-text-align-center){max-width:var(--measure);margin-left:0!important}
.article figure{margin:36px 0}
.article figure img{width:100%;border-radius:10px;display:block}
.article figcaption{font-size:14px;color:var(--ink-soft);margin-top:10px}
.pullquote{border-left:3px solid var(--red);padding:6px 0 6px 26px;margin:40px 0}
.pullquote p{font-family:"Oswald",sans-serif;font-weight:500;font-size:clamp(21px,2.2vw,28px);
  line-height:1.3;color:var(--blue);margin:0;max-width:26ch}
.byline{display:flex;align-items:center;gap:14px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line-cool)}
.byline .av{width:46px;height:46px;border-radius:50%;background:var(--paper-warm);overflow:hidden;flex:none}
.byline .av img{width:100%;height:100%;object-fit:cover}
.byline b{font-family:"Oswald",sans-serif;font-weight:500;letter-spacing:.04em;display:block}
.byline span{font-size:14px;color:var(--ink-soft)}

@media (max-width:1000px){
  .phero .grid{grid-template-columns:1fr;gap:34px}
  .features,.gallery{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .features,.gallery{grid-template-columns:1fr}
  .specrow{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .article p:not(.crumbs),.article li{font-size:17px}
}

/* --- simple two-column info rows (contact, legal) --- */
.inforow{display:grid;grid-template-columns:minmax(180px,.8fr) 2fr;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--line-cool);align-items:baseline}
.inforow dt{font:500 12px/1.4 "Oswald",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.inforow dd{margin:0;font-size:17px;line-height:1.6}
.inforow dd a{color:var(--blue)}
dl.info{margin:0;border-top:1px solid var(--line-cool)}
@media (max-width:680px){.inforow{grid-template-columns:1fr;gap:6px;padding:16px 0}}

/* --- people grid (about / contact) : restrained, round portraits kept --- */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
.person{text-align:center}
.person .pav{display:block;width:190px;height:190px;border-radius:50%;overflow:hidden;
  margin:0 auto 18px;background:var(--paper);border:1px solid var(--line)}
.person .pav img{width:100%;height:100%;object-fit:cover}
.person h3{font-size:var(--t-card);line-height:1.25;color:var(--blue);margin:0 0 4px}
.person .role{font-size:15px;color:var(--ink-soft);margin:0 0 10px;font-weight:300}
.person .det{font-size:14px;line-height:1.6;margin:0}
.person .det a{color:var(--blue);text-decoration:none}
.person .det a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1000px){.people{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.people{grid-template-columns:1fr}.person .pav{width:160px;height:160px}}

/* --- pystyvideo: X510:n oma tuotevideo on 1080 x 1920, joten se saa oman
   kapean kehyksensa eika 16:9-soittimen leveytta. Itse isannoity webm,
   ei kolmatta osapuolta, joten evasteporttia ei tarvita. --- */
.vertical{display:flex;justify-content:center}
/* height:auto on pakollinen: <video height="1920"> on esitysattribuutti joka
   voittaa aspect-ration ilman sita, ja kehys venyi 342 x 1920 pikseliin. */
.vertical video{width:100%;max-width:342px;height:auto;aspect-ratio:9/16;object-fit:cover;
  border-radius:14px;background:var(--paper-warm);display:block}

/* --- kartta: tuotannossa Google Maps on Complianzin evasteportin takana,
   joten leiska nayttaa saman kasittelyn eika paljasta upotusta --- */
.mapbox{position:relative;margin-top:var(--gap-grid);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;aspect-ratio:16/7;background:var(--paper-warm)}
.mapbox img{width:100%;height:100%;object-fit:cover}
.mapbox iframe{width:100%;height:100%;border:0;display:block}
.mapbox .gate{position:absolute;inset:0;display:grid;place-items:center;padding:24px;
  background:rgba(11,42,74,.34)}
.mapbox .gate small{background:var(--blue);color:#fff;border-radius:6px;
  padding:11px 20px;font-size:13px;line-height:1.4;text-align:center;max-width:34ch}
@media (max-width:680px){.mapbox{aspect-ratio:4/3}}


/* ---------- blocks bridge: same design, rendered by core blocks ---------- */
/* the theme's global styles would otherwise set body type and ink */
:root body{font:var(--t-body)/1.65 "Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;color:var(--ink);background:var(--paper)}
/* block gap: the leiska sets its own margins */
.wp-block-post-content,.entry-content{max-width:none}
/* images come wrapped in <figure> from the image block */
.wp-block-image{margin:0;height:auto}
.wp-block-image img{display:block}
/* the quote block ships its own padding; the leiska sets the rhythm */
:root .wp-block-quote{margin:0;padding:0;border:0}
.shot .wp-block-image,.pic .wp-block-image,.logobox .wp-block-image,.player .wp-block-image{height:100%;width:100%}
.shot .wp-block-image img,.pic .wp-block-image img{height:100%;width:100%;object-fit:cover}
/* a card used to be one <a>; now the heading link stretches over the card */
.pcard,.card,.dcard,.acard,.person{position:relative}
.stretch{color:inherit}
.stretch::after{content:"";position:absolute;inset:0;z-index:1}
/* the navigation block renders the menu as a list */
nav.main ul{display:flex;align-items:center;gap:30px;margin:0;padding:0;list-style:none}
nav.main li{margin:0}

/* the news list is a query loop: core markup wearing the leiska card */
.cards.wp-block-post-template{list-style:none;padding:0;margin:0}
.cards>li.wp-block-post{border:1px solid var(--line);border-radius:8px;background:var(--card);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s;margin:0}
.cards>li.wp-block-post:hover{border-color:var(--blue)}
.cards .wp-block-post-featured-image{aspect-ratio:16/10;overflow:hidden;background:var(--paper-warm);margin:0}
.cards .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.cards .wp-block-post-title{font-size:var(--t-card);line-height:1.3;margin:0}
.cards .wp-block-post-title a{color:var(--navy)}
.cards .wp-block-post-date{font:500 11px/1 "Oswald",sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
.cards .wp-block-post-excerpt{font-size:15px;color:var(--ink-soft);margin:12px 0 0;font-weight:300}
.cards .wp-block-post-excerpt__more-text{margin-top:10px}

/* video poster block, identical to production (record 4747) */
.ixo-video{margin:0 auto;max-width:1200px;width:100%}
.ixo-video__btn{display:block;position:relative;width:100%;padding:0;border:0;
  background:#000;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:16/9}
.ixo-video__poster{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .25s ease}
.ixo-video__btn:hover .ixo-video__poster{opacity:.88}
.ixo-video__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ixo-video__play::before{content:"";width:84px;height:84px;border-radius:50%;
  background:rgba(255,255,255,.93);box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:background-color .2s ease,transform .2s ease}
.ixo-video__play::after{content:"";position:absolute;border-left:26px solid #004C98;
  border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:9px}
.ixo-video__btn:hover .ixo-video__play::before{background:#fff;transform:scale(1.05)}
.ixo-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px}
.ixo-video__note{margin:8px 0 0;font-size:13px;line-height:1.4;color:#5b6672}
.ixo-video__play::before{width:62px;height:62px}
.ixo-video__play::after{border-left-width:19px;border-top-width:12px;border-bottom-width:12px}
.ixo-video{max-width:880px;margin-left:auto;margin-right:auto}
.ixo-video ~ p{line-height:1.45}


/* ---------- dark skin: same markup, same layout, tokens swapped ---------- */
/* --blue stays the brand background for the mission band and the footer.
   Text and borders that used it get --accent, which is legible on a dark page. */
body.skin-dark{
  --paper:#050B16;
  --paper-warm:#0A1322;
  --card:#0D1728;
  --line:#1C2B44;
  --line-cool:#182740;
  --ink:#E7EDF5;
  --ink-soft:#A0B0C4;
  --navy:#F3F7FB;
  --accent:#7FB3E6;
  color-scheme:dark;
}
body.skin-dark .eyebrow{color:var(--accent)}
body.skin-dark .crumbs a{color:var(--accent)}
body.skin-dark nav.main a:hover{color:var(--accent);border-color:var(--accent)}
body.skin-dark .pill.ghost{color:var(--accent);border-color:#3E6EA3}
body.skin-dark .pill.ghost:hover{background:var(--accent);color:#0B1420}
body.skin-dark .slide .thin{color:var(--accent)}
body.skin-dark .dots button[aria-current="true"]{background:var(--accent)}
body.skin-dark .arrows button:hover{border-color:var(--accent);background:var(--accent);color:#0B1420}
body.skin-dark .sechead .more{color:var(--accent)}
body.skin-dark .pcard .go,body.skin-dark .card .go{color:var(--accent)}
body.skin-dark .dealcount .d .n{color:var(--accent)}
body.skin-dark .pcard:hover,body.skin-dark .card:hover,body.skin-dark .dcard:hover,
body.skin-dark .cards>li.wp-block-post:hover{border-color:#3E6EA3}
body.skin-dark .cards .wp-block-post-date{color:var(--ink-soft)}

/* the header logo is drawn in brand blue; on a dark ground it needs the white one.
   Brand-kit SVG (white letters, red X leg), cropped to the blue file's bounds so both render 102x30 */
:root{--logo-on-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='214.93' height='63.43' viewBox='37.65 27.86 214.93 63.43'%3E%3Cg fill='%23fff' transform='matrix(.1 0 0 -.1 0 118.67)'%3E%3Cpath d='M2491.59 353.539C2491.59 364.008 2483.44 370.754 2472.5 370.754H2449.46V314.203H2458.07V336.547H2467.15L2481.81 314.203H2492.29L2477.16 336.781C2480.42 336.781 2491.59 340.969 2491.59 353.539M2458.07 343.996V363.547H2472.5C2478.79 363.547 2482.74 359.816 2482.74 353.539 2482.74 347.719 2478.79 343.996 2472.5 343.996H2458.07'/%3E%3Cpath d='M2468.55 391.945C2441.3 391.945 2419.19 370.063 2419.19 342.59 2419.19 315.363 2441.3 293.254 2468.55 293.254 2496.02 293.254 2517.89 315.363 2517.89 342.59 2517.89 370.063 2496.02 391.945 2468.55 391.945M2468.55 301.398C2445.74 301.398 2427.35 320.012 2427.35 342.59 2427.35 365.648 2445.74 383.793 2468.55 383.793 2491.35 383.793 2509.75 365.648 2509.75 342.59 2509.75 320.012 2491.35 301.398 2468.55 301.398'/%3E%3Cpath d='M486.996 886.652H387.801V293.254H486.996V886.652'/%3E%3Cpath d='M1272.89 436.027V753C1272.89 814.348 1214.82 896 1119.96 896 1025.11 896 967.031 814.348 967.031 753V436.027C967.031 350.707 1035.27 282.758 1119.81 282.738 1119.82 282.738 1119.83 282.738 1119.84 282.738 1119.84 282.738 1119.85 282.738 1119.86 282.738 1204.4 282.758 1272.89 350.707 1272.89 436.027M1171.01 426.547C1171.01 406.566 1156.09 376.711 1119.84 376.691 1083.58 376.711 1068.92 406.566 1068.92 426.547V743.109C1068.92 766.184 1088.28 792.59 1119.96 792.59V792.609C1151.65 792.609 1171.01 766.184 1171.01 743.109V426.547'/%3E%3Cpath d='M1599.38 293.254V389.445H1441.14V886.645H1342.24V293.254H1599.38'/%3E%3Cpath d='M1765.73 886.652H1666.82V293.266H1765.73V886.652'/%3E%3Cpath d='M1944.04 293.254V544.719H2058.06V637.316H1944.04V790.102H2102.53V886.652H1844.85V293.254H1944.04'/%3E%3Cpath d='M2260.47 293.254H2359.27V790.102H2468.16V886.652H2151.67V790.102H2260.47V293.254'/%3E%3Cpath d='M941.746 889.992H832.957L743.859 751.242 654.797 889.992H545.961L743.859 593.305 941.746 889.992'/%3E%3Cpath fill='%23da291c' d='M941.746 293.254 743.859 589.945 545.961 293.254H654.75L743.859 431.711 832.906 293.254H941.746'/%3E%3C/g%3E%3C/svg%3E")}
body.skin-dark header.site .logo img{content:var(--logo-on-dark)}

/* partner logos are dark artwork on transparent: they keep a light plate */
body.skin-dark .dcard .logobox{background:#EFEEE9;border-bottom-color:#1C2B44}

/* ---------- skin: DataLift. Same system, own palette. Opt-in with ?skin=dl ---------- */
body.skin-dl{
  --paper:#050A24;       /* measured from the live DataLift page */
  --paper-warm:#0A1030;
  --card:#0D1436;
  --line:#1E2748;
  --line-cool:#192240;
  --ink:#E2E8F0;
  --ink-soft:#A3AECB;
  --navy:#E9EFF7;        /* headings */
  --accent:#CCFF00;      /* the lime, unchanged */
  --red:#CCFF00;         /* the primary call to action is lime here, not red */
}
body.skin-dl .pill{color:#050A24}
body.skin-dl .pill.ghost{background:transparent;color:var(--accent);border-color:#46551F}
body.skin-dl .pill.ghost:hover{background:var(--accent);color:#050A24}
body.skin-dl .eyebrow,body.skin-dl .crumbs a,body.skin-dl .sechead .more{color:var(--accent)}

/* shape scale: controls are 2px here too, the lime glow stays */
body.skin-dl a.ixo-nav-cta{border-radius:2px}
/* one card style per page: left aligned, like the lower row and like Legacy */
body.skin-dl .bg-white\/5.text-center{text-align:left}
body.skin-dl .bg-white\/5.items-center{align-items:flex-start}
/* the card edge was rgba(255,255,255,.05) and read as no edge at all */
body.skin-dl .bg-white\/5{border-color:var(--line)}

body.skin-dl .dots button[aria-current="true"],
body.skin-dl .arrows button:hover{background:var(--accent);color:#050A24}

body.skin-dark .logogrid img{background:#EFEEE9;border-radius:6px;padding:10px}

/* form fields follow the page, not the plugin default */
body.skin-dark .wpforms-container input[type=text],
body.skin-dark .wpforms-container input[type=email],
body.skin-dark .wpforms-container input[type=tel],
body.skin-dark .wpforms-container input[type=url],
body.skin-dark .wpforms-container input[type=number],
body.skin-dark .wpforms-container select,
body.skin-dark .wpforms-container textarea{
  background:var(--card);border:1px solid var(--line);color:var(--ink)}
body.skin-dark .wpforms-container label,
body.skin-dark .wpforms-container .wpforms-field-label{color:var(--ink)}
body.skin-dark .wpforms-container .wpforms-field-description{color:var(--ink-soft)}

/* the video poster sits on the page, not on white */
body.skin-dark .ixo-video{background:var(--paper-warm)}

/* the rest of the brand-blue text: legible tint on a dark ground */
body.skin-dark .dcard .cn,
body.skin-dark .specrow dd b,
body.skin-dark .inforow dd a,
body.skin-dark .person h3,
body.skin-dark .person .det a,
body.skin-dark .statement .q,
body.skin-dark .pullquote p{color:var(--accent)}
body.skin-dark .ctabox:hover,body.skin-dark .fcard:hover{border-color:#3E6EA3}

/* the skin switch itself */
.skin-toggle{display:inline-flex;align-items:center;gap:7px;background:transparent;
  border:1px solid var(--line-cool);border-radius:2px;color:var(--ink-soft);cursor:pointer;
  font:500 11px/1 "Oswald",sans-serif;letter-spacing:.13em;text-transform:uppercase;
  padding:10px 13px;transition:border-color .18s,color .18s;margin-right:var(--s-1)}
.skin-toggle:hover{border-color:var(--blue);color:var(--blue)}
body.skin-dark .skin-toggle:hover{border-color:var(--accent);color:var(--accent)}
.skin-toggle .dot{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;
  background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%)}
@media (max-width:680px){.skin-toggle{padding:9px 10px}.skin-toggle .label{display:none}}

/* distributors: their own labelled row, two cards wide */
.distlabel{margin-top:44px}
.distnote{font-size:15px;color:var(--ink-soft);font-weight:300;margin:8px 0 18px;max-width:56ch}
.distgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-tight);max-width:520px}
@media (max-width:680px){.distgrid{grid-template-columns:1fr;max-width:none}}

.more.soon{color:var(--ink-soft);border-bottom-color:transparent;cursor:default}

/* ---------- core replacements for the block plugins ---------- */
/* FAQ: core/details in place of the accordion plugin */
.ixo-faq details{border:1px solid var(--line);border-radius:8px;background:var(--card);margin:0 0 12px}
.ixo-faq details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:18px 22px;color:var(--navy);
  font:600 var(--t-card)/1.35 "Oswald",Impact,sans-serif}
.ixo-faq details summary::-webkit-details-marker{display:none}
.ixo-faq details summary::after{content:"+";font-size:24px;line-height:1;color:var(--accent)}
.ixo-faq details[open] summary::after{content:"\2013"}
.ixo-faq details>:not(summary){padding:0 22px 18px;margin:0}
/* inline SVG icons in place of the icon plugin */
.ixo-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}
/* core query loop, in place of the post-grid plugin */
.wp-block-query .wp-block-post-template{gap:var(--gap-grid)}
.wp-block-query .wp-block-post-featured-image img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.wp-block-query .wp-block-post-title{margin:14px 0 6px;font-size:var(--t-card);line-height:1.2}
.wp-block-query .wp-block-post-title a{color:var(--navy);text-decoration:none}
.wp-block-query .wp-block-post-excerpt{color:var(--ink-soft);font-size:var(--t-body)}
/* video embedded as a block, no script: replaces the JS-injected iframe */
.ixo-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px}
/* four short cards read better in one row on desktop */
@media (min-width:1000px){.features.four{grid-template-columns:repeat(4,1fr)}
  .features.three{grid-template-columns:repeat(3,1fr)}}
.fcard figure.cut{margin:0 0 14px;border-radius:12px;overflow:hidden;aspect-ratio:1/1}
.fcard figure.cut img{width:100%;height:100%;object-fit:cover;display:block}
/* accent word inside a heading, one rule for both skins */
.hl{color:var(--accent,var(--blue))}
/* photo hero on a cover block */
.phero .wp-block-cover__inner-container{width:100%}
.phero .herobox{max-width:660px;margin:0}
.phero .herobox h1{margin:6px 0 18px}
.phero .herobox .lede{max-width:52ch;border-left:3px solid var(--accent,var(--blue));padding-left:18px;margin:0 0 26px}
.phero .herobox .actions{margin:0 0 22px}
.inforow{display:flex;gap:28px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.inforow li{display:flex;align-items:center;gap:9px;font-size:var(--t-meta);color:var(--ink-soft)}
.inforow li::before{content:"";width:9px;height:9px;border-radius:50%;
  border:2px solid var(--accent,var(--blue));display:block}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.actions.center{justify-content:center}
.eyebrow.center{text-align:center}
/* product gallery: renders on transparent ground, contain not cover */
.gallery.wp-block-gallery figure.wp-block-image{margin:0}
.gallery.wp-block-gallery img{aspect-ratio:1/1;object-fit:contain;background:var(--paper-warm);
  border:1px solid var(--line);border-radius:12px;padding:10px;width:100%;height:auto}
/* model comparison table */
.lineup table{width:100%;border-collapse:collapse}
.lineup th,.lineup td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.lineup th{font:600 var(--t-meta)/1.3 "Oswald",Impact,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;color:var(--navy)}
.lineup td{font-size:var(--t-body);color:var(--ink-soft)}
.lineup tbody td:first-child{color:var(--navy);font-weight:600}
.lineup{overflow-x:auto}
.specs dd b{color:var(--accent,var(--blue))}
/* closing section: exclusive partners */
.partners{border:1px solid var(--line);border-radius:12px;padding:28px;margin-top:34px;
  background:color-mix(in srgb, var(--card) 70%, transparent)}
.partners .partnergrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-grid);margin-top:6px}
@media (max-width:760px){.partners .partnergrid{grid-template-columns:1fr}}
.dcard h3{font-size:var(--t-card);line-height:1.25;margin:0 0 14px}
.dcard .logobox{background:#fff;border-radius:10px;display:flex;align-items:center;
  justify-content:center;padding:26px 30px;min-height:132px}
.dcard .logobox img{max-width:100%;max-height:74px;width:auto;height:auto;object-fit:contain;display:block}
.closing .wp-block-cover__inner-container{width:100%}
.closing h2{margin:0 0 10px}
.closing .rule{width:64px;height:3px;background:var(--accent,var(--blue));border:0;margin:0 0 26px}
/* gallery as a real grid: core flex layout stretched the last image to full width */
.gallery.wp-block-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.gallery.wp-block-gallery figure.wp-block-image{width:auto!important;flex:none!important;max-width:none}
@media (max-width:900px){.gallery.wp-block-gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.gallery.wp-block-gallery{grid-template-columns:repeat(2,1fr)}}
/* rhythm inside a band: the pieces were sitting on top of each other */
.band .specs{margin:0 0 28px}
.band .gallery.wp-block-gallery{margin:0 0 26px}
.band .actions{margin:0 0 34px}
.band h3{margin:0 0 16px}
.band .lineup{margin:0 0 8px}
.band .sechead{margin:0 0 34px}
.band .features{margin:0 0 8px}
.band .splitrow{margin:0 0 40px}
/* product picture with a caption */
.pic{margin:0}
.pic img{display:block;width:100%;height:auto;border-radius:12px}
.pic.render img{background:var(--paper-warm);border:1px solid var(--line);padding:16px;
  object-fit:contain;aspect-ratio:16/9}
.pic figcaption{margin-top:10px;font:600 var(--t-meta)/1.3 "Oswald",Impact,sans-serif;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.pic figcaption b{color:var(--accent,var(--blue))}
/* featured article card and wide cut */
.fcard.feature-article{padding:0;overflow:hidden}
.fcard.feature-article>*:not(figure){padding-left:var(--card-pad);padding-right:var(--card-pad)}
.fcard.feature-article>p:last-child{padding-bottom:var(--card-pad)}
.fcard .cut.wide{aspect-ratio:21/9;border-radius:0;margin:0 0 18px}
.fcard .byline{font-size:var(--t-meta);color:var(--ink-soft);margin:0 0 16px}
.lineup th a{color:inherit;text-decoration:none;border-bottom:1px solid var(--accent,var(--blue))}
/* sechead built from core blocks: children are direct, not wrapped in a div */
.band .sechead{display:block}
.band .sechead .eyebrow{margin:0}
.band .sechead h2{margin:6px 0 0}
.band .sechead .lede{margin:12px 0 0;max-width:60ch}

/* ---------- DataLift owns its scale and its shapes ----------
   The shape scale is per skin, not global: Legacy controls are 2px,
   DataLift controls are pills. Same token, different value. */
body.skin-dl .phero{min-height:800px}
body.skin-dl .phero h1{font-size:clamp(46px,7.2vw,96px);line-height:1.06;font-weight:700;letter-spacing:-.015em}
body.skin-dl .phero .lede{font-size:clamp(17px,1.4vw,21px);max-width:44ch}
body.skin-dl .phero .herobox{max-width:820px}
body.skin-dl a.ixo-nav-cta{border-radius:9999px}
body.skin-dl .sechead h2{font-size:clamp(30px,3.4vw,48px);line-height:1.1}
body.skin-dl .fcard h3{font-size:22px}

/* ================================================================
   DataLift: the production scale, measured 10.9.2026.
   Source https://ixolift.com/product/ixolift-datalift-e-max-for-datacenter-server-handling/
   read with getComputedStyle at 1440x900. Every number below is a
   reading, not a judgement. Record:
   Brain/Projects/IXOLIFT/04-Website/Mittaus — DataLift tuotannon muotoasteikko 2026-09-10.md
   Measure production again before you change any value here.
   Body type stays Barlow: production declares Inter with no @font-face,
   so it only renders as Inter on machines that have Inter installed.
   ================================================================ */

body.skin-dl{
  --paper:#050A14;                    /* was #050A24, a drift; production is #050A14 */
  --paper-warm:#0B1221;               /* the alternate band */
  --card:rgba(255,255,255,.05);       /* cards are translucent white, not a solid navy */
  --line:rgba(255,255,255,.05);
  --line-cool:rgba(255,255,255,.10);  /* the feature tiles carry the stronger edge */
  --ink:#E2E8F0;
  --ink-soft:#94A3B8;
  --navy:#FFFFFF;                     /* headings are pure white */
  --accent:#CCFF00;
  --red:#CCFF00;
  --card-pad:24px;
  --gap-grid:32px;
}

/* the content column is a 1280px shell with 16px gutters */
body.skin-dl .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:1248px}

/* one rhythm on every band, 96px, with a hairline edge */
body.skin-dl section.band,
body.skin-dl section.band.tight,
body.skin-dl section.band.flush{padding:96px 0;border-top:1px solid var(--line)}
body.skin-dl section.band.alt{background:var(--paper-warm)}
body.skin-dl .band .sechead{margin:0 0 48px}

/* headings */
body.skin-dl h1,body.skin-dl h2,body.skin-dl h3{color:#fff}
body.skin-dl .sechead h2{font-size:var(--fs-section);line-height:var(--lh-title);font-weight:var(--w-heading);letter-spacing:var(--track-section)}
body.skin-dl .fcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
body.skin-dl .fcard h3{font-size:var(--fs-card);line-height:var(--lh-heading);font-weight:var(--w-heading);margin:0 0 10px}
body.skin-dl .fcard p:not(.eyebrow){font-size:var(--fs-small);line-height:var(--lh-body);font-weight:400;color:var(--ink-soft)}
@media (min-width:1000px){body.skin-dl .features.four{grid-template-columns:repeat(4,1fr);gap:32px}}

/* the eyebrow is a plain lime label, like "Exclusive Partners": no chip and no dot, so it cannot read as a button */
body.skin-dl .eyebrow{font:var(--label-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--accent)}

/* the call to action is a lime pill with a sentence-case label */
body.skin-dl .pill{background:var(--accent);color:#050A14;
  font:700 16px/24px "Barlow",sans-serif;letter-spacing:.4px;text-transform:none;
  border-radius:9999px;padding:16px 32px;min-height:56px;display:inline-flex;align-items:center;gap:8px}
body.skin-dl .pill:hover{background:#fff;color:#050A14}

/* hero: 80vh with a 600px floor, centred, the photo at its own brightness under one scrim and the dot grid.
   The cover block writes min-height inline, so this rule has to shout. */
body.skin-dl .phero{min-height:max(600px,80vh)!important;display:flex;align-items:center;
  padding:0;position:relative;overflow:hidden}
/* cover bands: the photo at its own brightness under one scrim of --scrim-rgb (!important beats the block's inline colour and dim class).
   Hero: solid at the left edge, .65 where the 768px text column ends, bare past it. Closing: flat .8 (its copy spans the band). */
body.skin-dl :is(.phero,.closing) .wp-block-cover__background{opacity:1!important}
body.skin-dl .phero .wp-block-cover__background{background:linear-gradient(to right,rgb(var(--scrim-rgb)),rgb(var(--scrim-rgb) / .65) min(max(50% + 160px,784px),100%),transparent)!important}
body.skin-dl .phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px}
body.skin-dl .phero .wp-block-cover__inner-container{position:relative;z-index:2;width:100%;
  max-width:1248px;margin:0 auto;padding:0 16px}
body.skin-dl .phero .herobox{max-width:768px;margin:0}
body.skin-dl .phero .herobox .eyebrow{margin:0 0 24px}
body.skin-dl .phero h1{font-size:96px;line-height:108px;font-weight:var(--w-display);letter-spacing:-.1px;
  max-width:none;margin:0 0 24px;color:#fff}
body.skin-dl .phero .herobox .lede{font:300 24px/32px "Barlow",sans-serif;color:#E2E8F0;max-width:672px;
  border-left:4px solid var(--accent);padding:8px 0 8px 24px;margin:0 0 40px}
body.skin-dl .phero .herobox .lede b{color:var(--accent);font-weight:300}
body.skin-dl .phero .herobox .actions{margin:0 0 40px}
body.skin-dl .phero .inforow li{font-size:16px;color:var(--ink-soft)}

/* the closing band is a band, not a squeezed strip */
body.skin-dl .closing{padding:48px 0}

/* the constrained layout centres its children with !important auto margins.
   Production sets the hero column against the left edge of the container. */
body.skin-dl .phero .herobox{margin-left:0!important;margin-right:auto!important}
/* the spec row inherits the contact-page rule and drew a long hairline
   across the hero; production has no rule there */
body.skin-dl .phero .inforow{border-bottom:0;padding:0}

/* Section heads. Production centres some and left-aligns others; a centred head
   carries a symmetrical bar under the heading, a left head a bar above it.
   Measured: bar 96x6, radius 9999, opacity .8, 24px from the heading. */
body.skin-dl .band .sechead.center{text-align:center;display:block;margin:0 0 64px}
body.skin-dl .band .sechead.center h2{margin:0}
body.skin-dl .sechead .rule{display:block;width:96px;height:6px;border:0;border-radius:9999px;opacity:.8;
  background:var(--accent);margin:24px 0 0}
body.skin-dl .sechead.center .rule{margin:24px auto 0}

/* the four-up cards stand centred on a round icon plate */
body.skin-dl .features.four .fcard{display:flex;flex-direction:column;align-items:center;text-align:center}
body.skin-dl .fcard .iconplate{width:96px;height:96px;border-radius:9999px;
  border:1px solid rgba(255,255,255,.1);background:var(--paper);
  display:flex;align-items:center;justify-content:center;color:var(--accent);margin:0 0 24px}
body.skin-dl .fcard .iconplate svg{width:36px;height:36px;display:block}
body.skin-dl .features.four .fcard p{max-width:250px}
/* the tinted band carries an edge top and bottom, as production does */
body.skin-dl section.band.alt{border-bottom:1px solid var(--line)}

/* the closing band: production sets the heading at the same 48px as the others
   and marks it with a solid 80x6 bar */
body.skin-dl .closing h2{font-size:var(--fs-section);line-height:var(--lh-title);font-weight:var(--w-heading);letter-spacing:var(--track-section);margin:0 0 16px}
body.skin-dl .closing .rule{width:80px;height:6px;border-radius:9999px;background:var(--accent);
  opacity:1;margin:0 0 24px}
/* the two-column split runs on a 64px gutter, as production does */
body.skin-dl .splitrow{gap:64px}

/* Feature Highlights: production sets the copy on the photo, not under it.
   Tile is square, radius 16, hairline edge; the photo fills it and a scrim
   rises from the bottom so the 24px heading and 14px line stay legible. */
body.skin-dl .features.three .fcard{position:relative;aspect-ratio:1/1;padding:32px;overflow:hidden;
  border-radius:16px;border:1px solid rgba(255,255,255,.1);background:var(--paper);
  display:flex;flex-direction:column;justify-content:flex-end}
body.skin-dl .features.three .fcard figure.cut{position:absolute;inset:0;margin:0;border-radius:0;aspect-ratio:auto;height:100%}
body.skin-dl .features.three .fcard figure.cut img{width:100%;height:100%;object-fit:cover}
body.skin-dl .features.three .fcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,#050A14 0%,rgba(5,10,20,.55) 45%,transparent 100%)}
body.skin-dl .features.three .fcard h3,
body.skin-dl .features.three .fcard p{position:relative;z-index:1}
body.skin-dl .features.three .fcard h3{font-size:var(--fs-card-lg);line-height:var(--lh-heading);font-weight:var(--w-heading);margin:0 0 8px}
body.skin-dl .features.three .fcard p{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink);max-width:none}

/* FAQ: a hairline list, 896px wide, question 18px bold, lime on hover */
body.skin-dl .ixo-faq{max-width:864px}
body.skin-dl .ixo-faq details{border:0;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;background:transparent;margin:0}
body.skin-dl .ixo-faq details:last-child{border-bottom:0}
body.skin-dl .ixo-faq details summary{font:700 18px/28px "Barlow",sans-serif;color:#fff;padding:24px 0;gap:24px;
  align-items:center;transition:color .18s}
body.skin-dl .ixo-faq details summary:hover{color:var(--accent)}
body.skin-dl .ixo-faq details summary::after{content:"+";font:300 28px/1 "Barlow",sans-serif;color:var(--accent);
  transition:transform .2s;flex:0 0 auto}
body.skin-dl .ixo-faq details[open] summary::after{content:"+";transform:rotate(45deg)}
body.skin-dl .ixo-faq details>:not(summary){padding:0 48px 24px 0;color:var(--ink-soft);font-size:16px;line-height:1.65}

/* Compare Models: the table reads as rows on the ground, no boxes */
body.skin-dl .lineup table{border-collapse:collapse;width:100%}
body.skin-dl .lineup th{font:700 18px/28px "Barlow",sans-serif;color:var(--heading);text-align:left;padding:20px 24px;
  border-bottom:1px solid var(--edge);background:transparent}
body.skin-dl .lineup td{font:500 14px/20px "Barlow",sans-serif;color:#fff;padding:18px 24px;
  border-bottom:1px solid var(--edge);background:transparent}
body.skin-dl .lineup td:first-child{color:var(--ink-soft);font-weight:400}
body.skin-dl .lineup tbody tr:hover td{background:rgba(255,255,255,.03)}

/* Closing band: production is the page ground under a dot grid, one column of
   heading, bar and call to action, then the two dealer cards. */
body.skin-dl .closing{padding:96px 0;min-height:0;position:relative;overflow:hidden}
body.skin-dl .closing .wp-block-cover__background{background:rgb(var(--scrim-rgb) / .8)!important}
body.skin-dl .closing::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px}
body.skin-dl .closing .wp-block-cover__inner-container{position:relative;z-index:2;max-width:1248px;padding:0 16px}
body.skin-dl .closing h2{max-width:20ch;margin:0 0 24px}
body.skin-dl .closing .rule{margin:0 0 32px!important}
body.skin-dl .closing .actions{margin:0 0 56px}
body.skin-dl .closing .partners .eyebrow{margin:0 0 20px}
body.skin-dl .closing .partnergrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
body.skin-dl .closing .dcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px}
body.skin-dl .closing .dcard h3{font-size:var(--fs-card-lg);line-height:var(--lh-heading);font-weight:var(--w-heading);margin:0 0 12px}
/* the theme draws a full grid on tables; production keeps only the row line */
body.skin-dl .lineup th,body.skin-dl .lineup td{border-left:0;border-right:0;border-top:0}
body.skin-dl .lineup table,body.skin-dl .lineup thead,body.skin-dl .lineup tbody{border:0}
/* the constrained layout centres the closing heading; it sits on the left with the bar */
body.skin-dl .closing h2{margin-left:0!important;margin-right:auto!important}
/* Compare Models renders: portrait PNGs with transparent ground. Production shows
   them one at a time on the band; here five stand in a row on the light render plate
   so the dark machines read against the dark band. */
body.skin-dl .gallery.wp-block-gallery{grid-template-columns:repeat(5,1fr);gap:16px;margin:0 0 32px}
body.skin-dl .gallery.wp-block-gallery figure.wp-block-image{border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--edge);background:var(--render-plate)}
body.skin-dl .gallery.wp-block-gallery img{aspect-ratio:3/4;object-fit:contain;padding:var(--s-2);background:none}

/* One-Man Operation: the four small claims under the copy are facts, not features.
   They read as a hairline list on the ground, so the page has one card row, not two. */
body.skin-dl section.band:not(.alt) .features.four .fcard{background:transparent;border:0;border-top:1px solid var(--edge);
  border-radius:0;padding:20px 0 0;align-items:flex-start;text-align:left}
body.skin-dl section.band:not(.alt) .features.four .fcard h3{font-size:var(--fs-card);line-height:var(--lh-heading);margin:0 0 6px}
body.skin-dl section.band:not(.alt) .features.four .fcard p{max-width:none}


/* ---- the same scale on a phone. Measured at 375px inside a same-origin frame:
   the 96px heading broke to three lines and the five renders shrank to 62px.
   Type slides between the phone and the desktop reading; nothing else moves. ---- */
body.skin-dl .phero h1{font-size:clamp(44px,4.5vw + 31px,96px);line-height:1.125}
body.skin-dl .phero .herobox .lede{font-size:clamp(18px,1.2vw + 13.5px,24px);line-height:1.35}
body.skin-dl .sechead h2,body.skin-dl .closing h2{font-size:var(--fs-section);line-height:var(--lh-title)}
body.skin-dl section.band,body.skin-dl section.band.tight,body.skin-dl section.band.flush,
body.skin-dl .closing{padding-top:clamp(64px,5vw + 48px,96px);padding-bottom:clamp(64px,5vw + 48px,96px)}
@media (max-width:700px){
  body.skin-dl .phero .herobox .lede{padding-left:18px}
  body.skin-dl .features.three .fcard{aspect-ratio:4/3;padding:24px}
  body.skin-dl .features.three .fcard h3{font-size:22px;line-height:28px}
  /* Why IXOLIFT?: each card is a row, the plate left of its title and line */
  body.skin-dl section.band.alt .features.four .fcard{display:grid;grid-template-columns:56px 1fr;column-gap:var(--s-4);align-items:center;text-align:left}
  body.skin-dl section.band.alt .features.four .fcard p{max-width:none}
  body.skin-dl .fcard .iconplate{grid-row:span 2;width:56px;height:56px;margin:0}
  body.skin-dl .fcard .iconplate svg{width:24px;height:24px}
  /* the renders become a swipe strip: five tiles, no orphan cell */
  body.skin-dl .gallery.wp-block-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  body.skin-dl .gallery.wp-block-gallery figure.wp-block-image{flex:0 0 46%;scroll-snap-align:start}
  body.skin-dl .closing .partnergrid{grid-template-columns:1fr;gap:20px}
  body.skin-dl .closing .dcard{padding:24px}
  body.skin-dl .lineup{overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.skin-dl .lineup th,body.skin-dl .lineup td{padding:14px 16px;white-space:nowrap}
  body.skin-dl .lineup td{white-space:normal;min-width:150px}
}
/* core sets the gallery figure width with an id-strength selector; match it */
@media (max-width:700px){
  body.skin-dl .gallery.wp-block-gallery figure.wp-block-image:not(#individual-image){flex:0 0 46%;width:46%;margin:0}
}
/* the bands need a gutter once the 1248px column meets the edge of the viewport */
body.skin-dl section.band,body.skin-dl section.band.alt{padding-left:16px;padding-right:16px}
/* core gives the gallery image width:auto and the figure flex-basis:auto, so in a
   flex strip each figure grows to the image's own 1024px. Pin both. */
@media (max-width:700px){
  body.skin-dl .gallery.wp-block-gallery{flex-wrap:nowrap}
  body.skin-dl .gallery.wp-block-gallery figure.wp-block-image:not(#individual-image){
    flex:0 0 46%!important;width:46%!important;min-width:0}
  body.skin-dl .gallery.wp-block-gallery figure.wp-block-image img{width:100%!important;height:auto}
}

/* ---- 3077 and 3109 measured 10.9.2026 (workflow measure agents), same method ---- */
/* the split rows run 592/592 in production, whatever the block says */
@media (min-width:782px){body.skin-dl .splitrow > .wp-block-column{flex-basis:0!important;flex-grow:1;min-width:0}}
/* a photo in a glass frame; a render on the light plate; the caption sits on the image */
body.skin-dl .pic{position:relative;margin:0;padding:8px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05)}
body.skin-dl .pic img{display:block;width:100%;height:auto;border-radius:var(--r-small)}
body.skin-dl .pic.render{padding:var(--s-2);border-radius:var(--r-card);background:var(--render-plate)}
/* the render keeps its box before the lazy image arrives: no layout shift */
body.skin-dl .pic.render img{width:100%;height:520px;padding:0;border:0;border-radius:0;background:none;object-fit:contain}
body.skin-dl .pic.render figcaption{background:var(--ground)}
body.skin-dl .pic figcaption{position:absolute;left:20px;bottom:20px;margin:0;padding:6px 12px;border-radius:9999px;
  background:rgba(5,10,20,.75);border:1px solid rgba(204,255,0,.3);color:var(--accent);
  font:var(--label-meta);letter-spacing:var(--track-meta);text-transform:uppercase}
/* spec rows: label and value on one line, a hairline under each */
body.skin-dl dl.specs{border-top:0;margin:0 0 32px}
body.skin-dl .specrow dt{font:700 14px/20px "Barlow",sans-serif;letter-spacing:.35px;text-transform:uppercase;color:var(--ink-soft);margin:0}
body.skin-dl .specrow dd{font:700 16px/24px "Barlow",sans-serif;color:#fff;margin:0;text-align:right}
/* the per-post lineup marks were removed 16.9.2026: A9 marks the page's own model with th.cur (block 3 at the end) */
/* three renders stay three columns */
body.skin-dl .gallery.three.wp-block-gallery{grid-template-columns:repeat(3,1fr)}
/* Data Center Trends: four photo tiles two by two, copy centred on a tinted photo */
body.skin-dl .features.two{grid-template-columns:repeat(2,1fr);gap:32px}
body.skin-dl .features.tiles .fcard{position:relative;min-height:224px;padding:32px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
body.skin-dl .features.tiles .fcard figure.cut{position:absolute;inset:0;margin:0;border-radius:0;aspect-ratio:auto;height:100%}
body.skin-dl .features.tiles .fcard figure.cut img{width:100%;height:100%;object-fit:cover}
body.skin-dl .features.tiles .fcard::after{content:"";position:absolute;inset:0;background:rgba(5,10,20,.58);pointer-events:none}
body.skin-dl .features.tiles .fcard h3,body.skin-dl .features.tiles .fcard .actions{position:relative;z-index:1}
body.skin-dl .features.tiles .fcard h3{font:var(--w-heading) var(--fs-card)/var(--lh-heading) var(--font-display);color:var(--heading);max-width:24rem;margin:0 0 20px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
body.skin-dl .features.tiles .fcard .actions{margin:0;justify-content:center}
body.skin-dl .features.tiles .fcard .pill.ghost{background:var(--ground);color:var(--ink);border-color:var(--edge);
  font:var(--label-action-sm);letter-spacing:var(--track-action);padding:10px 22px;min-height:var(--control-h-sm)}
body.skin-dl .features.tiles .fcard .pill.ghost:hover{background:var(--accent);color:#050A14}
/* Featured Article: photo left, copy right, one rounded card */
body.skin-dl .fcard.feature-article{display:grid;grid-template-columns:1fr 1fr;padding:0;border-radius:24px;overflow:hidden;
  background:#0B1221;border:1px solid rgba(255,255,255,.1)}
body.skin-dl .fcard.feature-article figure.cut.wide{margin:0;border-radius:0;aspect-ratio:auto;height:100%;min-height:420px}
body.skin-dl .fcard.feature-article figure.cut.wide img{width:100%;height:100%;object-fit:cover}
body.skin-dl .fcard.feature-article .body{padding:40px;display:flex;flex-direction:column;justify-content:center;gap:16px}
body.skin-dl .fcard.feature-article .body > *{margin:0}
body.skin-dl .fcard.feature-article h3{font-size:var(--fs-card-lg);line-height:var(--lh-heading)}
body.skin-dl .fcard.feature-article .byline{color:var(--ink-soft);font-size:14px}
@media (max-width:700px){
  body.skin-dl .features.two{grid-template-columns:1fr}
  body.skin-dl .fcard.feature-article{grid-template-columns:1fr}
  body.skin-dl .fcard.feature-article figure.cut.wide{min-height:220px;max-height:280px}
  body.skin-dl .fcard.feature-article .body{padding:24px}
}
/* core pins flex-grow:0 on a column that carries an inline flex-basis, with a
   (0,4,0) selector; equal columns need the same weight */
@media (min-width:782px){body.skin-dl .splitrow > .wp-block-column{flex-grow:1!important;flex-basis:0!important}}
/* the render plate takes the width of the render, not the whole column */
body.skin-dl .pic.render{max-width:640px;margin-bottom:32px}
@media (max-width:700px){body.skin-dl .pic.render img{height:380px}}

/* ---- mitatut viat, korjattu 10.9.2026 (kriitikon tarkistus) ---- */
/* datalift.css pakottaa kaistan h3:lle Legacyn 21/500 sielläkin, missä iholla ei ole
   sääntöä; tuotannossa "Model Lineup" on 24/32/700 ja keskitetty */
body.skin-dl .band > h3.wp-block-heading{font:var(--w-heading) var(--fs-card-lg)/var(--lh-heading) var(--font-display);color:var(--heading);text-align:center;margin:0 0 24px}
/* pikkupainikkeen kosketusalue 44 px */
body.skin-dl .features.tiles .fcard .pill.ghost{min-height:var(--control-h-sm)}
/* läpinäkyvyyden vähennys: sumennus pois, umpinainen pohja tilalle */
@media (prefers-reduced-transparency:reduce){
  body.skin-dl .pic,body.skin-dl .fcard,body.skin-dl .partners{backdrop-filter:none;background:#0B1221}
}

/* ===== RTM 2026-09-16: DataLift text fidelity with production (display case, short hero labels, byline, render badge) ===== */
body.skin-dl .lineup th{text-transform:none}
body.skin-dl .lineup th .tag{text-transform:uppercase}
body.skin-dl.postid-3109 .lineup:not(.acc-matrix) tbody td:first-child{font:var(--label-meta);letter-spacing:var(--track-meta);text-transform:uppercase}
body.skin-dl .pill .sm{display:none}
@media (max-width:639px){
  body.skin-dl .pill .lg{display:none}
  body.skin-dl .pill .sm{display:inline}
}
body.skin-dl .fcard.feature-article .byline{gap:12px;flex-wrap:wrap;font:var(--label-meta);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--ink-soft)}
body.skin-dl .fcard.feature-article .byline span{font-size:inherit;color:inherit}
body.skin-dl .fcard.feature-article .byline .cat{color:var(--accent)}
body.skin-dl .fcard.feature-article .byline .cat::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--ink-soft);margin-right:12px;vertical-align:middle}
body.skin-dl .std-badge{display:inline-flex;flex-direction:column;gap:4px;margin:24px 0 0;padding:8px 16px;border:1px solid var(--edge);border-radius:var(--r-small);font:var(--label-meta);letter-spacing:var(--track-meta);text-transform:uppercase;color:#fff}
body.skin-dl .std-badge b{font:var(--w-heading) 18px/28px var(--font-display);letter-spacing:0;text-transform:none;color:var(--accent)}

/* ===== RTM 2026-09-16: DataLift Accessories page (acc-*) and std-badge spacing ===== */
/* ================================================================
   DataLift Accessories (LiftAssist DC, RollerBoard DC), dev.
   Additive only. Every selector starts with body.skin-dl and names a
   new acc-* class; no existing component rule is changed. Append after
   the body.skin-dl block so equal-specificity rules here land later.
   Numbers reuse the measured DataLift scale (Mittaus 2026-09-10) and
   the adopted items of the 10.9. proposal where they touch these
   components (P8 ghost edge, P11 copy stack, A4 spec-row wrap).
   No new animation or transition is introduced; the site-wide
   prefers-reduced-motion gate ("motion", after the hero slider) covers them.
   ================================================================ */

/* ---- hero: the rack render, centred */
body.skin-dl .phero.acc-hero .wp-block-cover__image-background{object-position:50% 50%}
/* the skin leaves 40px under the buttons for a fact strip; this hero has none */
body.skin-dl .phero.acc-hero .herobox .actions{margin:0}
@media (max-width:700px){
  body.skin-dl .phero.acc-hero .wp-block-cover__image-background{object-position:64% 50%}
}

/* ---- ghost pills: the shared ghost edge (#46551F) measures 2.4:1 on
   navy; lime at 50 % is 4.7:1 (proposal P8). Hover text on the
   canonical navy. */
body.skin-dl .pill.ghost.acc-pill{border-color:rgba(204,255,0,.5)}
body.skin-dl .pill.ghost.acc-pill:hover{color:#050A14}

/* ---- light plate. White studio renders sit on a paper card (brand
   --paper #FAFBFC). The image is multiplied into the card, so its own
   white ground and the card become one surface whatever the JPEG's
   white came out as (measured 232-255 at the corners). Cropped 3:2
   (every subject box fits with margin); the caption sits under the
   image in dark ink, inside the card, never over the image. */
body.skin-dl .acc-plate{margin:0;padding:var(--s-2);border-radius:var(--r-card);background:var(--plate);
  border:1px solid var(--edge);isolation:isolate}
body.skin-dl .acc-plate img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  object-position:50% 50%;mix-blend-mode:multiply;border-radius:var(--r-small);background:var(--plate)}
body.skin-dl :is(.acc-plate,.acc-render) figcaption{margin:12px 4px 2px;padding:0;text-align:left;
  font:var(--label-meta);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--on-plate)}
/* per-image crop centres, from the measured subject boxes */
body.skin-dl .acc-plate .wp-image-5395{object-position:63% 50%}   /* box scene: box left, mast right */
body.skin-dl .acc-plate .wp-image-5398{object-position:26% 50%}   /* whole machine sits left of centre */

/* ---- render plate. The transparent PNG has the machine in the middle
   quarter of a 16:9 canvas (x .38-.63, y .29-.81 measured). It sits on
   the same light plate as the photos, cropped 3:2 and scaled up from its
   wheels so the machine fills the frame; the figure clips the overflow. */
body.skin-dl .acc-render{margin:0;padding:var(--s-2);border-radius:var(--r-card);overflow:hidden;border:1px solid var(--edge);
  background:var(--render-plate)}
body.skin-dl .acc-render img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:52% 60%;
  transform:scale(1.5);transform-origin:52% 45%}

/* ---- the flow: two steps side by side, plate, step name, one line.
   No card box; the plate is the visual. */
body.skin-dl .acc-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:0}
body.skin-dl .acc-step{margin:0;min-width:0}
body.skin-dl .acc-step .acc-plate{margin:0 0 20px}
body.skin-dl .acc-step h3{font:var(--w-heading) var(--fs-card-lg)/var(--lh-heading) var(--font-display);color:var(--heading);margin:0 0 8px;text-wrap:balance}
body.skin-dl .acc-step p{font:400 17px/1.65 "Barlow",sans-serif;color:var(--ink-soft);margin:0;max-width:56ch}
@media (max-width:700px){
  body.skin-dl .acc-steps{grid-template-columns:1fr;gap:40px}
}

/* ---- product head: name, a one-way bar under it, the brochure tagline
   in the brochure's own setting (Oswald caps, lime emphasis). */
body.skin-dl .sechead.acc-head{margin:0 0 48px}
body.skin-dl .sechead.acc-head h2{margin:0;text-wrap:balance}
body.skin-dl .sechead .acc-rule{margin:16px 0 24px}
body.skin-dl .sechead .acc-tagline{font:500 clamp(22px,1vw + 15px,28px)/1.25 "Oswald",sans-serif;
  text-transform:uppercase;letter-spacing:.01em;color:#fff;margin:0;max-width:34ch;text-wrap:balance}
body.skin-dl .sechead .acc-tagline b{font-weight:500;color:var(--accent)}

/* ---- product split: copy and specs left, two renders right; the
   RollerBoard row mirrors visually, the reading order stays copy first. */
body.skin-dl .splitrow.acc-split{align-items:flex-start}
@media (min-width:782px){
  body.skin-dl .splitrow.acc-flip > .wp-block-column:first-child{order:2}
}
/* copy stack (proposal P11): lede as a pull line, body one step down and
   inset to the lede's text edge, then the specs and the brochure link */
body.skin-dl .acc-copy > *{margin:0 0 16px}
body.skin-dl .acc-copy .lede{font:500 20px/32.5px "Barlow",sans-serif;color:#fff;
  border-left:4px solid var(--accent);padding:0 0 0 24px;margin:0 0 24px;max-width:none}
body.skin-dl .acc-copy p:not(.lede):not(.actions){padding-left:28px;color:var(--ink-soft);
  font-size:17px;line-height:1.65;margin:0 0 16px}
body.skin-dl .acc-copy .acc-specs{margin:32px 0 28px}
body.skin-dl .acc-copy .actions{margin:0}
body.skin-dl .acc-media > figure + figure{margin-top:24px}
@media (max-width:700px){
  body.skin-dl .acc-copy .lede{font-size:18px;line-height:28px;padding-left:18px}
  body.skin-dl .acc-copy p:not(.lede):not(.actions){padding-left:22px}
}

/* ---- spec rows on a phone: a long value drops under its label instead
   of squeezing into a right-aligned sliver (proposal A4) */
@media (max-width:700px){
  body.skin-dl .acc-specs .specrow{flex-wrap:wrap;gap:4px 16px;padding:14px 12px}
  body.skin-dl .acc-specs .specrow dd{flex:1 1 auto;min-width:45%;text-align:right}
}

/* ---- compatibility matrix: the lineup table, three columns, centred
   marks that read as words, not as colour. */
body.skin-dl .acc-matrix{max-width:896px}
body.skin-dl .acc-matrix th:not(:first-child),body.skin-dl .acc-matrix td:not(:first-child){text-align:center}
body.skin-dl .acc-yes{color:var(--accent);font-weight:700}
body.skin-dl .acc-yes::before{content:"\2713\00a0" / ""}
body.skin-dl .acc-no{color:var(--ink-soft);font-weight:500}
@media (max-width:700px){
  body.skin-dl .acc-matrix th,body.skin-dl .acc-matrix td{padding:12px 8px;white-space:normal;font-size:14px;line-height:20px;min-width:0}
}

/* ---- shared conditions and compliance: two columns, the compliance
   lines as a checked list, the shared rows as spec rows. */
body.skin-dl .acc-shared{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:start;margin:0}
body.skin-dl .acc-shared-col{min-width:0}
body.skin-dl .acc-label{font:var(--label-meta);letter-spacing:var(--track-meta);text-transform:uppercase;
  color:var(--accent);margin:0 0 8px;padding:0 16px}
body.skin-dl .acc-compliance{list-style:none;margin:0;padding:0}
body.skin-dl .acc-compliance li{display:flex;gap:14px;align-items:flex-start;padding:16px;
  border-bottom:1px solid var(--edge);font:var(--w-heading) var(--fs-card)/var(--lh-heading) var(--font-display);color:var(--heading)}
body.skin-dl .acc-compliance li::before{content:"\2713" / "";color:var(--accent);flex:0 0 auto}
body.skin-dl .acc-shared .acc-specs{margin:0}
@media (max-width:700px){
  body.skin-dl .acc-shared{grid-template-columns:1fr;gap:40px}
  body.skin-dl .acc-label{padding:0 12px}
}


body.skin-dl .std-badge{margin-bottom:40px}


/* ===== RTM 2026-09-16 (2): one header and one footer for the whole site =====
   DataLift pages now use header-leiska (5428) and footer-leiska (5429). The DataLift
   dropdown in menu 5427 and the social links in 5429 are new elements on every page, so
   their two small groups below are the only rules in this block without body.skin-dl;
   they read the skin tokens and look right in both skins. */
header.site nav.main .wp-block-navigation__submenu-container{background:var(--paper);color:var(--ink);
  border:1px solid var(--line-cool);border-radius:8px;padding:8px 0;min-width:220px}
header.site nav.main .wp-block-navigation__submenu-container a{display:block;padding:10px 18px;border-bottom:0}
footer.site .wp-block-social-links.social{margin:20px 0 0;gap:16px}
footer.site .wp-block-social-links.social .wp-social-link{color:rgba(255,255,255,.9)}
footer.site .wp-block-social-links.social .wp-social-link:hover{color:#fff}
footer.site .wp-block-social-links.social .wp-social-link a{padding:0}
footer.site .wp-block-social-links.social .wp-social-link svg{width:22px;height:22px}

/* DataLift skin: navy bar with the white logo, lime hover, a header-sized pill, dark menus, navy footer */
body.skin-dl header.site .logo img{content:var(--logo-on-dark)}
body.skin-dl header.site .skin-toggle{display:none}
body.skin-dl nav.main a:hover{color:var(--accent);border-color:var(--accent)}
body.skin-dl header.site .pill{min-height:40px;padding:10px 22px;font-size:14px;line-height:20px}
body.skin-dl footer.site{background:var(--paper-warm)}
body.skin-dl footer.site .wp-block-social-links.social .wp-social-link:hover{color:var(--accent)}
/* the DataLift bands are 1280 wide with a 16 px gutter; the bar follows them so the logo lines up with the content */
body.skin-dl header.site .bar{max-width:1280px;padding:0 16px;gap:16px}

/* ===== RTM 2026-09-16 (3): decided ideas 3, 4, 6 (A4, A9), 7 (P6), 9, 10 and 12 (A2 height) =====
   Decisions: vault Projects/IXOLIFT/04-Website/Ehdotus — DataLift dev, parannukset 2026-09-10.md, section 7. */

/* header: dropdown rows sit together */
header.site nav.main .wp-block-navigation__submenu-container{gap:0}

/* 3. less glass: no outer partners box (the dealer cards keep theirs) */
body.skin-dl .partners{border:0;border-radius:0;background:none;padding:0}

/* 4. one radius scale: pill, 16 for cards and frames, 8 for tiles and small parts */
body.skin-dl .fcard.feature-article{border-radius:16px}
body.skin-dl .features.tiles .fcard{border-radius:var(--r-card)}

/* 9. readability. P1 */
body.skin-dl .phero .herobox .lede b{font-weight:500}
/* P7 (before P6, so .rule + .lede below wins the gap) */
body.skin-dl .band .sechead .lede{font:400 18px/29.25px "Barlow",sans-serif;color:var(--ink-soft);
  max-width:60ch;margin:24px 0 0;border:0;padding:0}
/* P11; body 17/400 is a knowing departure from production's 16/300 */
body.skin-dl .splitrow .lede{font:500 20px/32.5px "Barlow",sans-serif;color:#fff;
  border-left:4px solid var(--accent);padding:0 0 0 24px;margin:0 0 24px;max-width:none}
body.skin-dl .splitrow .lede b{color:var(--accent);font-weight:500}
body.skin-dl .splitrow .lede ~ p{padding-left:28px;color:var(--ink-soft);font-size:17px;line-height:1.65;margin:0 0 16px}
body.skin-dl .splitrow .lede ~ p:last-child{margin-bottom:0}
@media (max-width:700px){
  body.skin-dl .splitrow .lede{font-size:18px;line-height:28px;padding-left:18px}
  body.skin-dl .splitrow .lede ~ p{padding-left:22px}
}
/* P13; desktop 1.1 is a knowing departure from production's 1.0 */
body.skin-dl .band .sechead:not(.center) h2{line-height:1.1}
body.skin-dl .closing h2{line-height:var(--lh-title)}
@media (max-width:700px){
  body.skin-dl .sechead h2,body.skin-dl .closing h2{line-height:1.1}
}
/* P14 */
body.skin-dl .phero h1,body.skin-dl .sechead h2,body.skin-dl .closing h2,
body.skin-dl .features .fcard h3,body.skin-dl .ixo-faq summary{text-wrap:balance}
/* P15; production's 21.5 px comes from the theme root size */
body.skin-dl .ixo-faq details>:not(summary){font-size:17px;line-height:28px;padding:0 48px 24px 0}

/* 7. P6: the bar under a left-aligned head, band eyebrows 24 px over the head, FAQ column 896 */
body.skin-dl .sechead:not(.center) .rule{margin:16px 0 24px}
body.skin-dl .sechead .rule + .lede{margin-top:0}
body.skin-dl .band .sechead h2{margin:0}
body.skin-dl .band .sechead .eyebrow{margin:0 0 24px}
body.skin-dl .ixo-faq{max-width:896px}

/* 10. accessibility and interaction. P4: no photo zooms on hover; hover edges stay in the skin */
body.skin-dl .fcard:hover,body.skin-dl .closing .dcard:hover{border-color:var(--line-cool)}
/* P8: ghost pill edge 4.7:1 */
body.skin-dl .pill.ghost{border-color:rgba(204,255,0,.5)}
body.skin-dl .pill.ghost:hover{color:#050A14}
/* P10: the plus stays visible and silent; the answer settles in (gated by the reduced-motion block above) */
body.skin-dl .ixo-faq details summary::after,
body.skin-dl .ixo-faq details[open] summary::after{content:"+" / ""}
@keyframes dl-faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
body.skin-dl .ixo-faq details[open]>:not(summary){animation:dl-faq-in .22s ease-out}

/* 12. A2: stable hero height on phones */
body.skin-dl .phero{min-height:max(600px,80svh)!important}

/* 6. A4 spec rows in production's style: the value is the loud element; rows are not controls */
body.skin-dl dl.specs{border-top:0;margin:0 0 32px;max-width:592px}
body.skin-dl .specrow{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px;margin:0 0 16px;border-radius:8px;border-bottom:1px solid rgba(255,255,255,.1)}
body.skin-dl .specrow:last-child{margin-bottom:0}
body.skin-dl .specrow dt{font:var(--label-meta);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--ink);margin:0}
body.skin-dl .specrow dd{font:var(--w-heading) var(--fs-spec)/28px var(--font-display);color:var(--heading);text-align:right;margin:0}
body.skin-dl .specrow dd b{font:inherit;color:inherit}
@media (max-width:700px){
  body.skin-dl .specrow{flex-wrap:wrap;gap:4px 16px;padding:14px 12px}
  body.skin-dl .specrow dd{font-size:18px;line-height:26px;width:100%;text-align:left}
}

/* 6. A9 model lineup: two-line heads, lime only on the page's own model (th.cur; idea 5, 24.9.2026), values white,
   table on a card. Scoped away from the Accessories compatibility table, whose columns are equals. */
body.skin-dl .lineup:not(.acc-matrix) table{background:rgba(5,10,20,.5);border-radius:var(--r-card);overflow:hidden}
body.skin-dl .lineup:not(.acc-matrix) thead tr{background:rgba(255,255,255,.05)}
body.skin-dl .lineup:not(.acc-matrix) th{font:var(--w-heading) var(--fs-card-lg)/var(--lh-heading) var(--font-display);letter-spacing:0;text-transform:none;color:var(--heading);
  padding:24px;text-align:center;vertical-align:bottom;border-bottom:1px solid rgba(255,255,255,.1)}
body.skin-dl .lineup:not(.acc-matrix) th:first-child{font-size:18px;line-height:28px;letter-spacing:.05em;text-align:left}
body.skin-dl .lineup:not(.acc-matrix) th .tag{display:block;font:var(--label-meta);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
/* the head links keep an underline, so colour is not the only link cue */
body.skin-dl .lineup:not(.acc-matrix) th a{color:#fff;border:0;text-decoration:underline;text-decoration-color:rgba(204,255,0,.6);text-underline-offset:5px}
body.skin-dl .lineup:not(.acc-matrix) th a:hover{color:var(--accent)}
/* the family hub (3109) has no model of its own, so it marks no column */
body.skin-dl:not(.postid-3109) .lineup:not(.acc-matrix) th.cur{background:rgba(204,255,0,.1);border-top:4px solid var(--accent)}
body.skin-dl:not(.postid-3109) .lineup:not(.acc-matrix) th.cur .tag{color:var(--accent)}
body.skin-dl .lineup:not(.acc-matrix) td{font:500 16px/24px "Barlow",sans-serif;padding:24px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}
body.skin-dl .lineup:not(.acc-matrix) tbody td:first-child{font:700 14px/20px "Barlow",sans-serif;color:#fff;text-align:left;background:rgba(5,10,20,.3)}
body.skin-dl .lineup:not(.acc-matrix) tbody tr:hover td{background:rgba(255,255,255,.05)}
body.skin-dl .lineup:not(.acc-matrix) tbody tr:last-child td{border-bottom:0}
@media (max-width:700px){
  body.skin-dl .lineup:not(.acc-matrix) th{padding:16px;font-size:20px;line-height:26px}
  body.skin-dl .lineup:not(.acc-matrix) th:first-child{font-size:16px}
  body.skin-dl .lineup:not(.acc-matrix) td{font-size:14px;line-height:20px;padding:14px 16px}
}
/* A4: the 592 px list sits under its left-aligned head; WordPress's constrained layout would centre it with !important */
body.skin-dl .band dl.specs{margin-left:max(0px,calc((100% - 1248px) / 2))!important;margin-right:auto!important}


/* ===== RTM 2026-09-17: DataLift Accessories v2, a third accessory (WideBoard DC) =====
   Used only by the v2 copy of the Accessories page; 5505 has neither class. */
/* three flow cards side by side above the phone breakpoint; the phone keeps its single column */
@media (min-width:701px){
  body.skin-dl .acc-steps.acc-steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* render plate for a flat product: the WideBoard table fills most of its 16:9 canvas
   (x .10-.84 measured), so no zoom; the 3:2 crop keeps both ends of the table */
body.skin-dl .acc-render.acc-render-flat img{transform:none;object-position:50% 50%;filter:drop-shadow(0 8px 12px rgb(var(--scrim-rgb) / .22))}
/* the v2 hero names three accessories: four heading lines and a three-line lede outgrow
   the 80vh hero, which has no padding of its own, so give it room above and below */
body.skin-dl .phero.acc-hero.acc-hero-tall{padding:48px 0}

/* RTM 2026-09-17 (2): closing section centred (Janne 17.9. evening).
   Heading, rule, call to action and the Exclusive Partners label are centred over the photo;
   the heading may cover the face. The dealer cards keep their own glass box: one glass layer
   (the outer partners box went 16.9.). The label text stays, it is production wording. */
body.skin-dl .closing h2{margin-left:auto!important;margin-right:auto!important;text-align:center}
body.skin-dl .closing .rule{margin:0 auto 32px!important}
body.skin-dl .closing .actions{justify-content:center}
body.skin-dl .closing .partners .eyebrow{text-align:center}

/* RTM 2026-09-17 (4): Janne 17.9. evening.
   Dealer logos in the closing section show in full colour, as they do in production.
   Footer: the DataLift subpages sit indented under DataLift in the platform list (all pages). */
body.skin-dl .closing .dcard .logobox img,body.skin-dl .closing .dcard:hover .logobox img{filter:none;opacity:1}
footer.site .wp-block-list li:has(> a[href*="/product/ixolift-datalift-"]:not([href*="product-family"])){padding-left:16px}

/* ---------- post templates, Legacy and DataLift (23.9.2026) ---------- */
/* one article markup for both: templates 200 (single) and 4737 (DataLift, skin-dl by slug) */
.article .wp-block-post-featured-image { margin:0 0 40px;border-radius:10px;overflow:hidden;background:var(--paper-warm) }
.article .wp-block-post-featured-image img { width:100%;height:100%;object-fit:cover;display:block;border-radius:0 }
/* the theme paints the date a pale green (1.4:1 on paper); the meta line owns its colour */
.article .meta .wp-block-post-date,.article .meta .wp-block-post-date a { margin:0;color:inherit }
.article h1,.cards .wp-block-post-title { text-wrap:balance }
.article h4 { font-size:18px;line-height:1.35;margin:28px 0 10px }
/* news cards from the query loop: the same body as .card .body */
.cards>li.wp-block-post>.body { padding:var(--card-pad);display:flex;flex-direction:column;flex:1 }
/* text selection from the palette: brand blue on Legacy, lime on DataLift */
::selection { background:var(--blue);color:#fff }
body.skin-dl ::selection { background:var(--accent);color:#050A14 }

/* ---------- RTM 2026-09-23 ilta: hero slider on phones ----------
   Below 1000px the slide stacks text over image, and every slide's text had its own
   height, so the images and buttons sat 0-82px apart between slides and jumped on swipe.
   The track becomes one grid and each slide a subgrid: the text row is as tall as the
   tallest slide's text, the button sits at the foot of that row, and every image starts
   at the same height. Measured at 390px: buttons 381px and images 455px on all four. */
@media (max-width:1000px){
  .hero .track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;grid-template-rows:auto auto}
  .hero .slide{display:grid;grid-row:span 2;grid-template-rows:subgrid}
  .hero .slide .grid{grid-row:span 2;grid-template-rows:subgrid;min-height:0;align-items:stretch}
  .hero .slide .grid > div:first-child{display:flex;flex-direction:column}
  .hero .slide .actions{margin-top:auto;align-items:flex-end}
  .hero .slide .shot{align-self:start}
}
@media (max-width:680px){.hero{padding-top:32px}}

/* ---------- RTM 2026-09-23 ilta: one button box ----------
   The ghost button's 1px border made it 40px tall next to a 38px solid one, so a pair
   of buttons never matched. Every pill now carries a 1px border; on solid ones it is
   transparent and the fill runs under it. .pill.ghost keeps its colour (higher specificity). */
.pill{border:1px solid transparent}

/* proposal */
/* ======================================================================
   ixolift.com web tokens, 23.9.2026 (proposal; nothing is live).
   One set of role names. Legacy values on :root (Legacy is the default skin),
   DataLift on body.skin-dl, the Legacy dark mode on body.skin-dark.
   The DataLift and dark blocks list only the values that differ from Legacy.
   Generated together with web-tokens.json from one list in check/build-tokens.py;
   edit the list and rerun it, not this file.

   Safe to append to the end of styles.css as step one. Names that already exist in
   styles.css (--blue, --red, --card, --ink, --ink-soft, --accent, --gap-grid,
   --gap-tight, --card-pad, --nav-h) keep today's Legacy and DataLift values; every
   other role has a new name that no rule reads yet. Known effects of step one:
   Legacy gains --accent (the FAQ plus sign and .ixo-icon turn brand blue), and in the
   dark mode --card and --ink move 1 and 5 RGB units toward the DataLift values.

   A custom property that uses var() is resolved where it is declared and inherited
   as a finished value. That is why the label shorthands are restated in the DataLift
   block, and why migration aliases for old names (--paper:var(--ground) and so on)
   must be declared on body, not on :root.

   --edge is a decorative hairline and stays below 3:1 on purpose (1.16 to 1.39:1).
   A control whose edge is its only visible shape (a form field, an inactive slider
   dot) reads --edge-control instead, which clears 3:1 on every surface of its skin.
   ====================================================================== */

:root{
  /* ---- Brand primitives (the four locked hues; roles read them, components do not) ---- */
  --blue:#004C98;                                            /* Legacy brand blue, PMS 2945 C. Primitive: roles read it, components do not */
  --red:#DA291C;                                             /* Legacy brand red, PMS 485 C. Primitive */
  --lime:#CCFF00;                                            /* DataLift neon. Primitive */
  --dl-navy:#050A14;                                         /* DataLift deep navy. Primitive */
  /* ---- Colour roles ---- */
  --ground:#FDFCF7;                                          /* page ground */
  --raised:#F4F1E9;                                          /* alternate band, image wells, DataLift footer */
  --card:#FFFFFF;                                            /* card fill */
  --plate:#FFFFFF;                                           /* light plate behind partner logos and white studio renders */
  --on-plate:#0B2A4A;                                        /* text on a plate */
  --render-plate:var(--raised);                              /* ground behind transparent product renders */
  --ink:#0B2A4A;                                             /* running text */
  --ink-soft:#5A6478;                                        /* secondary text, captions, meta labels */
  --heading:#0B2A4A;                                         /* headings */
  --accent:var(--blue);                                      /* brand hue as text and marks: eyebrows, "more" links, spec values, active dot, icons, the highlighted word */
  --on-accent:#FFFFFF;                                       /* text on an accent fill: ghost-button hover, arrow hover, text selection */
  --mark:var(--red);                                         /* second brand colour as a mark: rules, bars, band edges, quote bars */
  --mark-text:var(--red);                                    /* second colour as small text: card kickers and taglines */
  --action:var(--red);                                       /* primary button fill */
  --on-action:#FFFFFF;                                       /* label on the primary button */
  --action-hover:#B92116;                                    /* primary button hover fill */
  --ghost-edge:var(--blue);                                  /* outline of the secondary button (its text reads --accent) */
  --link:var(--blue);                                        /* link inside running text, always underlined */
  --link-line:currentColor;                                  /* underline colour of that link */
  --edge:#E3E1DA;                                            /* decorative hairline: card edges, band edges, header rule, table and spec rows. Below 3:1 by design and never the only outline of a control (that is --edge-control) */
  --edge-hover:var(--blue);                                  /* card edge on hover */
  --edge-control:#768290;                                    /* outline of a control whose edge is its only visible shape: form fields, inactive slider dots. At least 3:1 on --ground, --card and --raised */
  --focus:var(--blue);                                       /* keyboard focus ring */
  --focus-on-band:#FFFFFF;                                   /* keyboard focus ring on the band and on dark editor colours; they set --focus:var(--focus-on-band) */
  --band:var(--blue);                                        /* full-bleed brand band: footer, mission */
  --on-band:#FFFFFF;                                         /* text on the band */
  --on-band-soft:rgba(255,255,255,.9);                       /* links and body text on the band */
  --on-band-faint:rgba(255,255,255,.72);                     /* labels and fine print on the band */
  --scrim-rgb:11 42 74;                                      /* base colour of the overlay under text on photos, used as rgb(var(--scrim-rgb) / alpha) */
  /* ---- Type: families, weights, sizes, line heights, tracking ---- */
  --font-display:"Oswald","Arial Narrow",system-ui,sans-serif; /* Oswald: headings, labels, figures */
  --font-body:"Barlow",system-ui,-apple-system,sans-serif;   /* Barlow: everything else */
  --w-display:600;                                           /* weight of the one big headline */
  --w-heading:500;                                           /* weight of headings and card titles */
  --w-label:500;                                             /* weight of Oswald small caps */
  --w-action:600;                                            /* weight of button labels */
  --w-lead:300;                                              /* weight of hero and page ledes */
  --fs-display:clamp(40px,5.4vw,72px);                       /* the biggest headline on a page (Legacy front slider) */
  --fs-page:clamp(34px,4.4vw,60px);                          /* page-hero title */
  --fs-title:clamp(30px,3.6vw,48px);                         /* article and document title */
  --fs-section:clamp(28px,2.6vw,38px);                       /* section head */
  --fs-sub:26px;                                             /* subhead inside an article */
  --fs-card-lg:21px;                                         /* large card title: highlight tiles, dealer cards, featured article, flow steps, model-table heads */
  --fs-card:21px;                                            /* card title; article h3 */
  --fs-lead:20px;                                            /* hero and page lede */
  --fs-intro:17px;                                           /* lede under a section head */
  --fs-read:18px;                                            /* article prose and lists */
  --fs-body:17px;                                            /* body text */
  --fs-small:15px;                                           /* card copy, excerpts, captions under people and dealers */
  --fs-caption:13px;                                         /* fine print: notes under media, footer bottom line */
  --fs-spec:20px;                                            /* spec value figure (Oswald) */
  --lh-display:1.05;                                         /* line height of display and page-hero titles */
  --lh-title:1.1;                                            /* line height of titles and section heads */
  --lh-heading:1.25;                                         /* line height of subheads and card titles */
  --lh-lead:1.55;                                            /* line height of ledes */
  --lh-body:1.65;                                            /* line height of body text */
  --lh-read:1.72;                                            /* line height of article prose */
  --track-display:-.015em;                                   /* tracking of display, page and title sizes */
  --track-section:-.01em;                                    /* tracking of section heads */
  /* ---- Labels: small caps and button labels (use font:var(--label-x); letter-spacing:var(--track-x)) ---- */
  --label-eyebrow:var(--w-label) 13px/1.4 var(--font-display); /* eyebrow over a heading */
  --track-eyebrow:.16em;                                     /* tracking of the eyebrow */
  --label-meta:var(--w-label) 12px/1.2 var(--font-display);  /* breadcrumb, date, card kicker, tagline, spec and info row label, table tag, badge, byline, figure-caption chip, "more" link, footer column head */
  --track-meta:.14em;                                        /* tracking of meta labels */
  --label-action:var(--w-action) 12px/1 var(--font-display); /* button label */
  --label-action-sm:var(--w-action) 12px/1 var(--font-display); /* compact button: header, photo tiles */
  --track-action:.14em;                                      /* tracking of button labels */
  --case-action:uppercase;                                   /* case of button labels */
  --label-nav:500 13px/1 var(--font-display);                /* main navigation */
  --track-nav:.12em;                                         /* tracking of the navigation */
  /* ---- Spacing scale (--s-N = N x 4 px) ---- */
  --s-1:4px;                                                 /* spacing step, 1 x 4 px */
  --s-2:8px;                                                 /* spacing step, 2 x 4 px */
  --s-3:12px;                                                /* spacing step, 3 x 4 px */
  --s-4:16px;                                                /* spacing step, 4 x 4 px */
  --s-6:24px;                                                /* spacing step, 6 x 4 px */
  --s-8:32px;                                                /* spacing step, 8 x 4 px */
  --s-10:40px;                                               /* spacing step, 10 x 4 px */
  --s-12:48px;                                               /* spacing step, 12 x 4 px */
  --s-16:64px;                                               /* spacing step, 16 x 4 px */
  --s-24:96px;                                               /* spacing step, 24 x 4 px */
  /* ---- Rhythm: bands, gaps, padding ---- */
  --band-y:112px;                                            /* top and bottom padding of a section band */
  --band-y-tight:88px;                                       /* padding of a quieter band */
  --head-gap:34px;                                           /* space between a section head and its content */
  --gap-grid:32px;                                           /* gap in card grids */
  --gap-tight:16px;                                          /* gap in image and logo grids */
  --gap-split:56px;                                          /* gap between text and photo in a two-column row */
  --card-pad:26px;                                           /* card padding */
  --card-pad-lg:38px 34px;                                   /* padding of a large card or CTA box */
  /* ---- Layout ---- */
  --container:1200px;                                        /* outer width of a content row, gutters included */
  --gutter:32px;                                             /* side padding of the container */
  --col-read:720px;                                          /* article reading column */
  --measure:32em;                                            /* longest line of article prose and lists: about 74 Barlow characters (68ch ran 85 to 91) */
  --nav-h:76px;                                              /* header bar height */
  /* ---- Radius (a photo flush with a card edge gets 0; the card clips it) ---- */
  --r-control:2px;                                           /* buttons, toggle, header call to action */
  --r-card:8px;                                              /* cards, CTA boxes, FAQ items, frames, tables */
  --r-media:12px;                                            /* a standalone photo, video or gallery tile */
  --r-small:8px;                                             /* small parts: spec rows, badges, dropdown, logo plates, photo tiles, a photo inside a padded frame */
  --r-pill:9999px;                                           /* chips, dots, bars */
  /* ---- Borders and bars (a decorative hairline is 1px solid var(--edge); a control outline reads --edge-control) ---- */
  --rule-w:3px;                                              /* vertical rule beside a lede or quote */
  --bar-w:64px;                                              /* short bar at a heading */
  --bar-h:3px;                                               /* thickness of that bar */
  /* ---- Elevation ---- */
  --shadow-media:0 10px 30px rgba(0,0,0,.35);                /* the one shadow: a play button over a video poster */
  /* ---- Controls and touch ---- */
  --control-h:40px;                                          /* height of a standard button */
  --control-h-sm:40px;                                       /* height of a compact button; 44 px on touch screens */
  --tap-min:44px;                                            /* smallest touch box of an icon-only control */
  /* ---- Motion ---- */
  --dur-fast:180ms;                                          /* colour and edge changes */
  --dur:300ms;                                               /* movement */
  --dur-media:500ms;                                         /* photo zoom and slow fades */
  --ease:cubic-bezier(.4,0,.2,1);                            /* easing curve */
}

/* ---- DataLift: only the values that differ from Legacy ---- */
body.skin-dl{
  /* colour */
  --ground:var(--dl-navy);
  --raised:#0B1221;
  --card:rgba(255,255,255,.05);
  --plate:#FAFBFC;
  --on-plate:#2A3344;
  --render-plate:var(--plate);
  --ink:#E2E8F0;
  --ink-soft:#94A3B8;
  --heading:#FFFFFF;
  --accent:var(--lime);
  --on-accent:var(--dl-navy);
  --mark:var(--lime);
  --mark-text:var(--lime);
  --action:var(--lime);
  --on-action:var(--dl-navy);
  --action-hover:#FFFFFF;
  --ghost-edge:rgba(204,255,0,.5);
  --link:#FFFFFF;
  --link-line:rgba(204,255,0,.6);
  --edge:rgba(255,255,255,.10);
  --edge-hover:rgba(255,255,255,.10);
  --edge-control:#64748B;
  --focus:var(--lime);
  --focus-on-band:var(--lime);
  --band:#0B1221;
  --scrim-rgb:5 10 20;
  /* type */
  --w-heading:600;
  --w-label:600;
  --w-action:700;
  --fs-display:clamp(44px,4.5vw + 31px,96px);
  --fs-page:clamp(44px,4.5vw + 31px,96px);
  --fs-section:clamp(36px,2.6vw + 26px,48px);
  --fs-card-lg:clamp(22px,0.19vw + 21.26px,24px);
  --fs-card:20px;
  --fs-lead:clamp(18px,1.2vw + 13.5px,24px);
  --fs-intro:18px;
  --fs-small:16px;
  --lh-display:1.125;
  --lh-heading:1.3;
  --lh-lead:1.35;
  --track-display:0;
  --track-section:0;
  /* label */
  --label-eyebrow:var(--w-label) 12px/16px var(--font-display);
  --track-eyebrow:.1em;
  --label-meta:var(--w-label) 12px/16px var(--font-display);
  --track-meta:.1em;
  --label-action:var(--w-action) 16px/24px var(--font-body);
  --label-action-sm:var(--w-action) 14px/20px var(--font-body);
  --track-action:.025em;
  --case-action:none;
  /* rhythm */
  --band-y:clamp(64px,5vw + 48px,96px);
  --band-y-tight:clamp(64px,5vw + 48px,96px);
  --head-gap:48px;
  --gap-split:64px;
  --card-pad:24px;
  --card-pad-lg:32px;
  /* radius */
  --r-control:9999px;
  --r-card:16px;
  --r-media:16px;
  /* border */
  --rule-w:4px;
  --bar-w:96px;
  --bar-h:6px;
  /* control */
  --control-h:56px;
}

/* ---- Legacy dark mode: the DataLift neutrals under Legacy blue and red ---- */
body.skin-dark{
  /* colour */
  --ground:var(--dl-navy);
  --raised:#0B1221;
  --card:#0D1628;
  --plate:#EFEEE9;
  --on-plate:#2A3344;
  --render-plate:var(--raised);
  --ink:#E2E8F0;
  --ink-soft:#A0B0C4;
  --heading:#FFFFFF;
  --accent:#7FB3E6;
  --on-accent:var(--dl-navy);
  --mark-text:#E15449;
  --ghost-edge:#3E6EA3;
  --link:#7FB3E6;
  --edge:#1C2B44;
  --edge-hover:#3E6EA3;
  --edge-control:#64748B;
  --focus:#7FB3E6;
  --scrim-rgb:5 10 20;
}

/* ---- responsive values ---- */
@media (max-width:680px){ :root{--gutter:20px;--band-y:72px;--fs-read:17px} }
@media (max-width:700px){ body.skin-dl{--fs-spec:18px;--card-pad-lg:24px} }
@media (pointer:coarse){ :root{--control-h-sm:44px} }


/* ---------- P01: DataLift reads its token set (23.9.2026) ---------- */
/* the old DataLift names point at the token list; --line moves from .05 to .10, the others keep their values */
body.skin-dl{--paper:var(--ground);--paper-warm:var(--raised);--navy:var(--heading);--line:var(--edge);--line-cool:var(--edge)}
/* product content was saved on editor colour 8 (#050A24, retired); the class reads this variable, so no !important */
body.skin-dl .entry-content.has-custom-color-8-background-color{--wp--preset--color--custom-color-8:var(--ground)}
/* DataLift reading templates (4 posts, 4 pages): the article scale at one weight; "More from IXOLIFT" stays under the title */
body.skin-dl[class*="single-post-dark"]{--fs-section:clamp(28px,2.6vw,38px)}
body.skin-dl .article :is(h1,h2,h3,h4){font-weight:var(--w-heading);letter-spacing:0}
body.skin-dl .article h1{font-size:var(--fs-title);line-height:var(--lh-title)}
body.skin-dl .article h2{font-size:var(--fs-sub);line-height:var(--lh-heading)}
body.skin-dl .article h3{font-size:var(--fs-card);line-height:var(--lh-heading)}
/* sizes and bold saved in the editor land on the article scale; the content keeps its classes */
body.skin-dl .article{--wp--preset--font-size--medium:var(--fs-read);--wp--preset--font-size--large:var(--fs-read);--wp--preset--font-size--x-large:var(--fs-read);--wp--preset--font-size--xx-large:var(--fs-sub)}
body.skin-dl .article :is(h1,h2,h3,h4,h5,h6) :is(strong,b){font-weight:inherit}
/* the closing call to action (the navy box on 17, 20, 21, 22) keeps a section-size heading, still under the title */
body.skin-dl .article aside{--wp--preset--font-size--xx-large:var(--fs-section)}
/* news cards: one glass card, the photo meets its edge (no second frame), title and excerpt on the card scale */
body.skin-dl .cards>li.wp-block-post{border-radius:var(--r-card)}
body.skin-dl .cards>li.wp-block-post:hover{border-color:var(--edge-hover)}
body.skin-dl .cards .pic{padding:0;border:0;border-radius:0;background:none}
body.skin-dl .cards .pic img{border-radius:0}
body.skin-dl .cards .wp-block-post-title{font-size:var(--fs-card);line-height:var(--lh-heading);font-weight:var(--w-heading);letter-spacing:0}
body.skin-dl .cards .wp-block-post-excerpt{font-size:var(--fs-small);font-weight:400}
/* labels on the reading templates and news cards use the DataLift label token too; a bold wrapper in a photo chip keeps the chip weight */
body.skin-dl :is(.crumbs,.article .meta,.cards .wp-block-post-date,.sechead .more){font:var(--label-meta);letter-spacing:var(--track-meta)}
body.skin-dl .article .meta .wp-block-post-date{font:inherit;letter-spacing:inherit}
body.skin-dl .pic figcaption :is(b,strong){font-weight:inherit}
/* one frame per picture: the gallery figure carries the edge and the corner; article pictures take the media corner; dealer logo plates the small one */
body.skin-dl .gallery.wp-block-gallery img{border:0;border-radius:0}
body.skin-dl .article :is(.wp-block-post-featured-image,figure img){border-radius:var(--r-media)}
body.skin-dl .dcard .logobox{border-radius:var(--r-small);background:var(--plate)}

/* ===== P02: a working menu on every phone and tablet =====
   The menu button stands in for the menu until the whole menu fits on one line (the Legacy bar needs 904 px,
   DataLift 761 px); 1000 px is the site's existing tablet breakpoint (l.230). Replaces l.238, which hid the
   whole Navigation block, button included, below 680 px. */
@media (max-width:1000px){
  header.site nav.main .wp-block-navigation__responsive-container:not(.is-menu-open){display:none}
  header.site nav.main .wp-block-navigation__responsive-container-open{display:flex}
}
/* 24 px icons, 44 px tap area; the negative margin keeps the header row where it was */
header.site nav.main :is(.wp-block-navigation__responsive-container-open,.wp-block-navigation__responsive-container-close){padding:calc((var(--tap-min,44px) - 24px)/2);margin:calc((24px - var(--tap-min,44px))/2)}
/* the open menu takes the page ground and ink in every skin (was DataLift only, l.1164); core paints it #fff with #000 text, a white sheet in the dark mode */
header.site nav.main.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open{background:var(--paper);color:var(--ink)}

/* links in running text: always underlined, so colour is not the only cue (WCAG 1.4.1); a link inside a box coloured in the editor keeps that box's colour */
:where(.entry-content) :where(p:not(.crumbs):not(.det),li:not([class]),td,figcaption) a:not([class]){text-decoration:underline;text-underline-offset:3px}
:where(.entry-content) :where(p:not(.crumbs):not(.det),li:not([class]),td,figcaption) a:not([class]):hover{color:inherit}
:where(.entry-content) :where(p:not(.crumbs):not(.det),li:not([class]),td,figcaption) a:not([class]):not(:is(.entry-content :is(.has-text-color,.has-background,.has-link-color)) a){color:var(--link,#004C98);text-decoration-color:var(--link-line,currentColor)}
:where(.entry-content) :where(p:not(.crumbs):not(.det),li:not([class]),td,figcaption) a:not([class]):not(:is(.entry-content :is(.has-text-color,.has-background,.has-link-color)) a):hover{color:var(--ink)}
body.skin-dl :where(.entry-content) :where(p:not(.crumbs):not(.det),li:not([class]),td,figcaption) a:not([class]){text-underline-offset:5px}
body.skin-dl :where(.entry-content) :where(p:not(.crumbs):not(.det),li:not([class]),td,figcaption) a:not([class]):not(:is(.entry-content :is(.has-text-color,.has-background,.has-link-color)) a):hover{color:var(--accent)}

/* a bare block on a leiska page (no band), today only the privacy policy: the article reading column */
.page-template-wp-custom-template-leiska .entry-content>:not(section):not(.alignfull){box-sizing:border-box;max-width:calc(var(--col-read) + 2*var(--gutter));margin-inline:auto;padding:var(--s-16) var(--gutter);gap:var(--s-4)}
.page-template-wp-custom-template-leiska .entry-content>:not(section):not(.alignfull) h1{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--track-display);margin-bottom:var(--s-2)}
.page-template-wp-custom-template-leiska .entry-content>:not(section):not(.alignfull) h2{font-size:var(--fs-sub);line-height:var(--lh-heading);margin-top:var(--s-8)}
.page-template-wp-custom-template-leiska .entry-content>:not(section):not(.alignfull) h3{font-size:var(--fs-card);line-height:var(--lh-heading);margin-top:var(--s-6)}
.page-template-wp-custom-template-leiska .entry-content>:not(section):not(.alignfull) :is(p,li){font-size:var(--fs-read);line-height:var(--lh-read);overflow-wrap:anywhere}
/* saved content: bold wrappers inside headings and empty paragraphs used as spacers */
.page-template-wp-custom-template-leiska .entry-content>:not(section):not(.alignfull) :is(h1,h2,h3) strong{font-weight:inherit}
.page-template-wp-custom-template-leiska .entry-content>:not(section):not(.alignfull) p:empty{display:none}

/* ---------- linked titles, crumbs and table heads keep their face ----------
   Site Editor > Styles > Typography > Links puts Barlow on every link (0,0,1, printed after this file). Buttons keep theirs. */
:is(h1,h2,h3,h4,h5,h6,.crumbs,.eyebrow,th,figcaption) a:where(:not(.wp-element-button)){font-family:inherit}

/* ---------- Complianz banner (I03, approved by Janne 24.9.2026): the logo keeps its proportions; up to 768 px, where Complianz already draws the box full width, the centred box becomes a bottom sheet with Accept and Deny side by side and equal in size ----------
   Complianz prints its banner CSS after this file, so the rules carry the container id instead of !important. Complianz colours and settings stay as they are. */
#cmplz-cookiebanner-container .cmplz-logo img{width:auto;height:auto;max-height:24px}
@media (max-width:768px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center{top:auto;bottom:0;left:0;transform:none;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:calc(15px + env(safe-area-inset-bottom));box-shadow:0 -8px 28px rgba(0,0,0,.28)}
  #cmplz-cookiebanner-container .cmplz-center .cmplz-buttons{display:grid;grid-template-columns:1fr 1fr}
  #cmplz-cookiebanner-container .cmplz-center .cmplz-buttons>:not(.cmplz-accept):not(.cmplz-deny){grid-column:1/-1}
}
/* Complianz banner colours (Janne 24.9.2026): Deny gets a visible dark outline next to Accept. Accept, links and toggles follow the page skin: Legacy blue #004C98 by default, DataLift navy #050A14 with neon #CCFF00 on body.skin-dl.
   Complianz defines these variables on :root, so setting them on the banner wins regardless of stylesheet order. */
#cmplz-cookiebanner-container .cmplz-cookiebanner{--cmplz_button_accept_background_color:#004C98;--cmplz_button_accept_border_color:#004C98;--cmplz_button_accept_text_color:#FFFFFF;--cmplz_hyperlink_color:#004C98;--cmplz_slider_active_color:#004C98;--cmplz_button_deny_border_color:#222222}
body.skin-dl #cmplz-cookiebanner-container .cmplz-cookiebanner{--cmplz_button_accept_background_color:#050A14;--cmplz_button_accept_border_color:#050A14;--cmplz_button_accept_text_color:#CCFF00;--cmplz_hyperlink_color:#050A14;--cmplz_slider_active_color:#050A14}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny{border-width:1.5px}

/* ==========================================================================
   Template kit, 24.9.2026
   Everything below was added for the block-editor template kit (Nicole's new articles and product pages):
   1. block styles for the Styles panel (is-style-ixo-*), 2. the pattern layout (ixo-cta, two editor-only
   fixes), 3. listings (DataLift cue on post cards, the DataLift archive, pagination), 4. the editor-lock
   fallback. Every rule needs a class that published content does not carry today (is-style-ixo-*, ixo-cta,
   category-datalift on a post card, rtm-archive, a pagination block in .newsloop, .editor-styles-wrapper),
   except part 4, whose values equal what WordPress prints today. Remove this section to revert.
   ========================================================================== */


/* ---------- template kit: block styles for the editor's Styles panel (24.9.2026) ----------
   Five styles Nicole picks in the block editor, registered in rtm-leiska.php (block-styles.php):
   paragraph "Lead paragraph" (is-style-ixo-lede), quote "Statement" (is-style-ixo-statement),
   list "Check list" (is-style-ixo-checks), group "Panel" (is-style-ixo-panel) and group "Highlight"
   (is-style-ixo-highlight). Every value reads a token, so Legacy, DataLift (body.skin-dl) and the
   Legacy dark mode each get their own look from the same rule.
   Scope: the article column, post content on any template, and the editor canvas. :is() counts as its
   heaviest argument (one class here). The rules it has to beat: .article p:not(.crumbs) (0,2,1), which the
   lede only ties and beats on source order, so THIS BLOCK MUST STAY AFTER the production rules (the kit
   section below follows them; the pattern, listing and editor-lock rules after it hold no rule that ties with it); .article ul (0,1,1);
   :root .wp-block-quote (0,2,0) and the theme's :root :where(.wp-block-quote) (0,1,0); and on leiska pages
   the bare-block rules .page-template-wp-custom-template-leiska .entry-content>:not(section):not(.alignfull)
   (0,3,1) and its :is(p,li) (0,3,2), answered by the leiska rules at the end. Nothing here uses !important.
   Preset colours and sizes chosen in the editor still win: WordPress writes those with !important or inline.
   Values written out because no token holds them: the statement size clamp(24px,2.6vw,32px) and line height
   1.25 (brief), the box radius 12 px (Janne, new components; --r-media is 12 on Legacy but 16 on DataLift),
   the DataLift highlight tint .08 and edge .35 (brief), and inside the Legacy highlight the nested card
   white at 10 % and the edge white at 24 %. */

/* Lead paragraph: the article lede on the token scale (Legacy 20 px / 1.55, DataLift 18 to 24 px / 1.35, weight 300) */
:is(.article,.entry-content,.editor-styles-wrapper) p.is-style-ixo-lede{
  font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:var(--w-lead);color:var(--ink-soft);
  max-width:var(--measure);margin:0 0 var(--s-8)}
:is(.article,.entry-content,.editor-styles-wrapper) p.is-style-ixo-lede.has-text-align-center{margin-inline:auto}
:is(.article,.entry-content,.editor-styles-wrapper) p.is-style-ixo-lede.has-text-align-right{margin-left:auto}
/* a bare block on a leiska page sets its paragraphs with a heavier rule (0,3,2); the lede answers it there */
.page-template-wp-custom-template-leiska .entry-content>:not(section):not(.alignfull) p.is-style-ixo-lede{
  font-size:var(--fs-lead);line-height:var(--lh-lead)}

/* Statement: one sentence set large in Oswald, the heading bar (--bar-w x --bar-h) above it, the source as a label below */
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement{
  margin:var(--s-12) 0;padding:0;border:0;font:inherit;color:var(--heading)}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement::before{
  content:"";display:block;width:var(--bar-w);height:var(--bar-h);background:var(--accent);margin:0 0 var(--s-6)}
:is(.skin-dl .article,.skin-dl .entry-content,.skin-dl.editor-styles-wrapper,.skin-dl .editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement::before{border-radius:var(--r-pill)}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement.has-text-align-center::before{margin-inline:auto}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement.has-text-align-right::before{margin-left:auto}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement p{
  font-family:var(--font-display);font-weight:var(--w-heading);font-size:clamp(24px,2.6vw,32px);line-height:1.25;
  letter-spacing:var(--track-section);color:inherit;max-width:30ch;margin:0 0 .5em}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement.has-text-align-center p{margin-inline:auto}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement.has-text-align-right p{margin-left:auto}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement p:last-of-type{margin-bottom:0}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement cite{
  display:block;margin-top:var(--s-6);font:var(--label-meta);letter-spacing:var(--track-meta);text-transform:uppercase;
  font-style:normal;color:var(--ink-soft)}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-quote.is-style-ixo-statement cite a{font-family:inherit;color:inherit}

/* Check list: a check mark in the accent colour instead of the bullet. The mark is a mask, so it takes
   the colour of the surface it sits on; it is centred on the first line, and wrapped lines keep the text edge.
   Tabler Icons "check" path (MIT). Nested lists inherit the mark and line up under their parent's text. */
:is(.article,.entry-content,.editor-styles-wrapper) :is(ul,ol).is-style-ixo-checks:not(.has-background){padding-left:0}
:is(.article,.entry-content,.editor-styles-wrapper) :is(ul,ol).is-style-ixo-checks{list-style:none}
:is(.article,.entry-content,.editor-styles-wrapper) .is-style-ixo-checks li{list-style:none;position:relative;padding-left:1.75em}
:is(.article,.entry-content,.editor-styles-wrapper) .is-style-ixo-checks li::before{
  content:"";position:absolute;left:0;top:calc((1lh - 1em) / 2);width:1em;height:1em;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/contain no-repeat}
:is(.article,.entry-content,.editor-styles-wrapper) .is-style-ixo-checks :is(ul,ol){list-style:none;padding-left:0;margin:var(--s-2) 0 0}

/* Panel and Highlight: one box, 12 px corner, padding 28 px that eases to 20 px on a phone */
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-group:is(.is-style-ixo-panel,.is-style-ixo-highlight){
  border:1px solid transparent;border-radius:12px;padding:clamp(20px,2vw + 12px,28px);margin:var(--s-10) 0}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-group:is(.is-style-ixo-panel,.is-style-ixo-highlight)>:first-child{margin-top:0}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-group:is(.is-style-ixo-panel,.is-style-ixo-highlight)>:last-child{margin-bottom:0}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-group.is-style-ixo-panel{background:var(--card);border-color:var(--edge)}

/* Highlight, Legacy and the Legacy dark mode: the brand blue ground. The text tokens turn white inside it, so
   headings, links, list marks, statements and the focus ring follow without rules of their own */
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-group.is-style-ixo-highlight{background:var(--band);color:var(--ink)}
/* the reset skips a Highlight given its own background colour in the editor, so a light swatch keeps dark text.
   --card and --edge are reset too, so a Panel placed inside reads as a lighter blue box, not a white one */
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-group.is-style-ixo-highlight:where(:not(.has-background)){
  --ink:var(--on-band);--ink-soft:var(--on-band-soft);--navy:var(--on-band);--heading:var(--on-band);
  --accent:var(--on-band);--link:var(--on-band);--link-line:currentColor;--focus:var(--focus-on-band);
  --card:rgba(255,255,255,.1);--edge:rgba(255,255,255,.24)}
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-group.is-style-ixo-highlight ::selection{background:var(--on-band);color:var(--band)}
/* Highlight, DataLift: a lime-tinted panel on the navy page; the text tokens go back to the page's own, bold words turn lime.
   The DataLift context is written out because in the editor the skin class and .editor-styles-wrapper sit on the same <body> */
:is(.skin-dl .article,.skin-dl .entry-content,.skin-dl.editor-styles-wrapper,.skin-dl .editor-styles-wrapper) .wp-block-group.is-style-ixo-highlight{
  --ink:inherit;--ink-soft:inherit;--navy:inherit;--heading:inherit;--accent:inherit;--link:inherit;--link-line:inherit;--focus:inherit;--card:inherit;--edge:inherit;
  background:rgba(204,255,0,.08);border-color:rgba(204,255,0,.35);color:var(--ink)}
/* a DataLift Highlight given its own background colour: most palette swatches are light, so the text goes navy.
   A text colour picked in the editor (.has-text-color) is left to win */
:is(.skin-dl .article,.skin-dl .entry-content,.skin-dl.editor-styles-wrapper,.skin-dl .editor-styles-wrapper) .wp-block-group.is-style-ixo-highlight.has-background:not(.has-text-color){
  --ink:var(--on-accent);--ink-soft:var(--on-accent);--navy:var(--on-accent);--heading:var(--on-accent);--accent:var(--on-accent);
  --link:var(--on-accent);--link-line:currentColor}
:is(.skin-dl .article,.skin-dl .entry-content,.skin-dl.editor-styles-wrapper,.skin-dl .editor-styles-wrapper) .wp-block-group.is-style-ixo-highlight.has-background:not(.has-text-color) :is(h1,h2,h3,h4,h5,h6):not(.has-text-color){color:var(--heading)}
:is(.skin-dl .article,.skin-dl .entry-content,.skin-dl.editor-styles-wrapper,.skin-dl .editor-styles-wrapper) .wp-block-group.is-style-ixo-highlight ::selection{background:var(--accent);color:var(--on-accent)}
:is(.skin-dl .article,.skin-dl .entry-content,.skin-dl.editor-styles-wrapper,.skin-dl .editor-styles-wrapper) .wp-block-group.is-style-ixo-highlight :is(p,li) :is(strong,b){color:var(--accent)}
/* links inside: the leiska link rule reads --link on the front end; the editor canvas has no .entry-content, so it is said here too */
:is(.article,.entry-content,.editor-styles-wrapper) .wp-block-group.is-style-ixo-highlight a:where(:not([class])){
  color:var(--link);text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:3px}

/* ---------- leiska pages: a block placed straight into the page, or into a bare wrapper group ----------
   There the bare-block rules above set every paragraph and list item to the reading size (0,3,2) and give each
   top-level block the reading column with padding var(--s-16) var(--gutter) (0,3,1). The statement keeps its size,
   a top-level check list keeps the gutter (without it the marks sit at the screen edge on a phone), and a top-level
   Panel or Highlight becomes a box as wide as the reading column instead of an edge-to-edge block with 64 px padding.
   A top-level statement, list or lede keeps the 64 px bare-block padding, like the paragraphs around it. */
.page-template-wp-custom-template-leiska .entry-content .wp-block-quote.is-style-ixo-statement p{font-size:clamp(24px,2.6vw,32px);line-height:1.25}
.page-template-wp-custom-template-leiska .entry-content>:is(ul,ol).is-style-ixo-checks:not(.has-background){padding-left:var(--gutter)}
.page-template-wp-custom-template-leiska .entry-content>.wp-block-group:is(.is-style-ixo-panel,.is-style-ixo-highlight){
  width:calc(100% - 2*var(--gutter));max-width:var(--col-read);margin:var(--s-10) auto;padding:clamp(20px,2vw + 12px,28px)}

/* ---------- template kit: pattern layout (24.9.2026) ----------
   Part of styles.css since the kit integration (patterns.php no longer loads a separate patterns.css), so it
   follows the production rules and the block styles, on the front end and in the editor canvas. Only what the leiska and the five block styles do not already cover:
   1. the call-to-action box of the patterns "Product call to action" (class ixo-cta, new),
   2. two editor-only fixes for empty placeholders in the product-page patterns.
   Nothing here matches markup that exists in published content today: every selector needs the new
   class ixo-cta or the editor canvas (.editor-styles-wrapper). Values read the tokens, so Legacy,
   DataLift (body.skin-dl) and the Legacy dark mode (body.skin-dark) each get their own look from one rule.
   Radius 12 px in both skins is Janne's decision for new components; no token carries 12 in both skins,
   so it is written out (as in block-styles.css). */

/* 1. Call-to-action box: raised ground, hairline edge, heading, one line, buttons.
   Specificity: each rule matches the article rule it has to beat, (0,1,1) for .article h2 and (0,2,1)
   for .article p:not(.crumbs), and wins by coming later. The buttons are the site's own .pill classes.
   Padding is --card-pad-lg ("padding of a large card or CTA box": Legacy 38px 34px, DataLift 32px, 24px under 700 px).
   The heading carries --w-heading itself (Legacy 500, DataLift 600): outside .article nothing else sets it. */
.ixo-cta{box-sizing:border-box;background:var(--raised);border:1px solid var(--edge);border-radius:12px;
  padding:var(--card-pad-lg);margin:var(--s-10) 0}
.ixo-cta h2{font-size:var(--fs-sub);line-height:var(--lh-heading);font-weight:var(--w-heading);color:var(--heading);
  margin:0 0 var(--s-2);max-width:24ch;text-wrap:balance}
.ixo-cta p:not(.actions){font-size:var(--fs-read);line-height:var(--lh-body);color:var(--ink-soft);
  margin:0 0 var(--s-6);max-width:var(--measure)}
.ixo-cta p.actions{margin:0}

/* Outside an article (the top level of a page or product, where the post content runs full width): the box
   takes the reading column, and on narrow screens stays one gutter in from each edge. Inside .article the
   article is the column already, so it is left out. (0,3,0) */
:not(.article)>.entry-content>.ixo-cta{max-width:min(var(--col-read),calc(100% - 2*var(--gutter)));margin-inline:auto}

/* A bare block on a leiska page (l.1608 of styles.css, (0,4,0)) gets the reading column plus 64 px padding and
   gutter; the box keeps the column and its own padding there, and its heading and line keep their size. (0,4,0), later */
.page-template-wp-custom-template-leiska .entry-content>.ixo-cta:not(.alignfull){padding:var(--card-pad-lg);
  margin:var(--s-10) auto;max-width:min(var(--col-read),calc(100% - 2*var(--gutter)))}
.page-template-wp-custom-template-leiska .entry-content>.ixo-cta:not(.alignfull) h2{margin:0 0 var(--s-2)}
.page-template-wp-custom-template-leiska .entry-content>.ixo-cta:not(.alignfull) p:not(.actions){font-size:var(--fs-read);line-height:var(--lh-body)}

/* 2. Editor canvas only. An empty gallery shows its upload placeholder; the leiska's 5-column gallery grid
   squeezed it into one fifth of the row. An empty video block in the portrait frame gets the frame's width. */
.editor-styles-wrapper .gallery.wp-block-gallery:has(>.components-placeholder){display:block}
.editor-styles-wrapper .vertical>.wp-block-video{width:100%;max-width:342px}

/* ---------- template kit: listings (24.9.2026): DataLift articles in the shared lists, and the DataLift archive ---------- Reads only the token block (23.9.2026); no new colour, face or weight.
   The one deliberate literal is the 12px radius of new components (Janne's decision; no role token holds
   12px in both skins: --r-media is 12px in Legacy and 16px in DataLift).

   A. The DataLift cue. News & Blog (page 17), "More from IXOLIFT" under every post, and search results
      use one card: li.wp-block-post inside .cards, with the post date as its kicker. A post in the DataLift
      category carries category-datalift on that li, and its kicker gains the word DataLift in front of the
      date. On the light Legacy card it is a small navy chip with neon type, the DataLift colours in
      miniature, so the reader sees which cards open into the dark pages. On a dark list (the DataLift skin,
      the Legacy dark mode) it is a plain neon label, the way DataLift prints its labels. The chip is inline,
      so its padding does not grow the kicker line: titles in a row of cards stay level. The label is
      generated content; screen readers announce it with the date ("DataLift May 5, 2026").
      Contrast, computed (WCAG 2.x): #CCFF00 on #050A14 16.9:1; #CCFF00 on the DataLift card (white .05 over
      the navy, #121620) 15.4:1; #CCFF00 on the Legacy dark card #0D1628 15.4:1. */
.cards>li.wp-block-post.category-datalift .wp-block-post-date::before{
  content:"DataLift";
  margin-inline-end:var(--s-2);
  /* the trailing letter-spacing sits inside the box, so the end padding gives it back and the word centres */
  padding:var(--s-1) calc(var(--s-2) - var(--track-meta)) var(--s-1) var(--s-2);
  border-radius:12px;
  background:var(--dl-navy);
  color:var(--lime);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
body:is(.skin-dl,.skin-dark) .cards>li.wp-block-post.category-datalift .wp-block-post-date::before{
  padding:0;
  border-radius:0;
  background:none;
}
/* the DataLift archive lists nothing else, so the cue says nothing there */
body.category-datalift .cards>li.wp-block-post.category-datalift .wp-block-post-date::before{content:none}

/* B. The DataLift archive, /topics/datalift/ (template category-datalift, main.rtm-archive).
      The body carries category-datalift, so rtm-leiska.php adds skin-dl and every value below comes from
      the DataLift tokens. The rules read tokens only, so the same template would also sit right on Legacy. */
.rtm-archive .sechead .wp-block-query-title{
  font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--w-heading);
  letter-spacing:var(--track-display);margin:0;text-wrap:balance;
}
.rtm-archive .sechead .wp-block-term-description{margin:var(--s-4) 0 0}
.rtm-archive .sechead .wp-block-term-description p{
  margin:0;max-width:var(--measure);font-size:var(--fs-intro);line-height:var(--lh-lead);font-weight:var(--w-lead);color:var(--ink-soft);
}
/* empty state: one framed sentence with the way back, on the reading column */
.rtm-archive .wp-block-query-no-results{
  max-width:var(--col-read);padding:var(--card-pad-lg);
  border:1px solid var(--edge);border-radius:12px;background:var(--card);
}
.rtm-archive .wp-block-query-no-results p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.rtm-archive .wp-block-query-no-results a{
  color:var(--link);text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:3px;
}
.rtm-archive .wp-block-query-no-results a:hover{color:var(--accent)}
/* running-text links: 3px under Legacy, 5px under DataLift, as styles.css sets them in .entry-content */
body.skin-dl .rtm-archive .wp-block-query-no-results a{text-underline-offset:5px}

/* C. Pagination under a card list (core/query-pagination inside .newsloop). Today only the DataLift archive
      prints one; the rules sit on .newsloop so News & Blog gets the same row if it gains pagination.
      Layout: a three-column grid, Newer | numbers | Older. The side columns are equal, so the numbers stay
      centred on page 1 (no Newer), on middle pages and on the last page (no Older). Core's own
      query-pagination/style.css gives Newer margin-inline-end:auto and Older margin-inline-start:auto at
      (0,4,0); inside a grid cell those auto margins only push the link to the start or end of its own
      column, which is where justify-self already puts it, so they need no override. At 680px and below (the
      stylesheet's own phone breakpoint) Newer and Older share the first row and the numbers take the whole
      second row: at 360px the DataLift gutter leaves 288px, too little for all three on one line. The numbers
      wrap inside their row if a long run ever needs it, so the row never scrolls sideways.
      Page numbers are 44 px targets; the current page is filled with the accent. Computed contrast, Legacy:
      white on #004C98 8.4:1, numbers #0B2A4A on #FDFCF7 14.2:1, Newer/Older #004C98 8.2:1. DataLift: #050A14
      on #CCFF00 16.9:1, numbers #E2E8F0 on #050A14 16.1:1, Newer/Older #CCFF00 16.9:1. The hairline above
      the row is decorative (--edge, 1.3:1). */
.newsloop .wp-block-query-pagination{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-2) var(--s-4);
  margin:var(--s-12) 0 0;padding:var(--s-6) 0 0;border-top:1px solid var(--edge);
  font:var(--label-meta);letter-spacing:var(--track-meta);text-transform:uppercase;
}
/* Site Editor > Styles > Typography > Links puts Barlow on every link; the row keeps its label face */
.newsloop .wp-block-query-pagination a{font-family:inherit}
.newsloop .wp-block-query-pagination>:is(.wp-block-query-pagination-previous,.wp-block-query-pagination-next){
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap-min);color:var(--accent);
}
.newsloop .wp-block-query-pagination>.wp-block-query-pagination-previous{grid-column:1;justify-self:start}
.newsloop .wp-block-query-pagination>.wp-block-query-pagination-numbers{grid-column:2;justify-self:center}
.newsloop .wp-block-query-pagination>.wp-block-query-pagination-next{grid-column:3;justify-self:end}
.newsloop .wp-block-query-pagination :is(.wp-block-query-pagination-previous-arrow,.wp-block-query-pagination-next-arrow){margin:0}
.newsloop .wp-block-query-pagination>:is(.wp-block-query-pagination-previous,.wp-block-query-pagination-next):hover{
  text-decoration:underline;text-underline-offset:4px;
}
.newsloop .wp-block-query-pagination>.wp-block-query-pagination-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-1)}
.newsloop .wp-block-query-pagination-numbers .page-numbers{
  display:inline-grid;place-items:center;min-width:var(--tap-min);height:var(--tap-min);padding:0 var(--s-2);
  border-radius:12px;color:var(--ink);
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.newsloop .wp-block-query-pagination-numbers a.page-numbers:hover{background:var(--raised);color:var(--heading)}
.newsloop .wp-block-query-pagination-numbers .page-numbers.current{background:var(--accent);color:var(--on-accent)}
.newsloop .wp-block-query-pagination-numbers .page-numbers.dots{color:var(--ink-soft)}
@media (max-width:680px){
  .newsloop .wp-block-query-pagination{grid-template-columns:1fr 1fr}
  .newsloop .wp-block-query-pagination>.wp-block-query-pagination-previous{grid-area:1/1}
  .newsloop .wp-block-query-pagination>.wp-block-query-pagination-next{grid-area:1/2}
  .newsloop .wp-block-query-pagination>.wp-block-query-pagination-numbers{grid-area:2/1/3/3}
}

/* ---------- template kit: editor-lock fallback (24.9.2026) ----------
   The same text rtm_kit_lock_css() in rtm-leiska.php prints (md5 d0a1b2e80d4b243aed3c5ae346f3bbb8, 15,686 bytes):
   the presets that leave the editor, with the values WordPress prints for them today, plus the body hook for the
   new sizes. On the front end the PHP copy is appended to global-styles-inline-css, which prints after this file,
   so this copy is shadowed by identical values there. It carries the look on its own if the PHP section is
   removed or its inline print is skipped (no global-styles handle). Keep both copies equal. */
/* rtm-kit editor lock: retired presets, kept so published content renders unchanged */:root{--wp--preset--color--base: #fdfcf7;--wp--preset--color--contrast: #111111;--wp--preset--color--accent-1: #27358c;--wp--preset--color--accent-2: #e42213;--wp--preset--color--accent-3: #768290;--wp--preset--color--accent-4: #c8d7ba;--wp--preset--color--accent-5: #a5b4d5;--wp--preset--color--accent-6: #e6f1d3;--wp--preset--color--custom-color-2: #e6ebe0;--wp--preset--color--custom-color-3: #a1b5d8;--wp--preset--color--custom-color-4: #c2b8b9;--wp--preset--color--custom-color-5: #e4f0d0;--wp--preset--color--custom-color-6: #738290;--wp--preset--color--custom-color-7: #004c98;--wp--preset--color--custom-color-8: #050a24;--wp--preset--color--custom-color-9: #fe4a49;--wp--preset--color--custom-color-10: #ebeeff;--wp--preset--color--custom-color-11: #4682b4;--wp--preset--color--custom-color-12: #f4bb36;--wp--preset--color--custom-color-13: #ccff00;--wp--preset--font-size--small: 0.875rem;--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.156), 1.125rem);--wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.313), 1.375rem);--wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.313), 2rem);--wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.063), 3rem);}.wp-block-buttons{--wp--preset--color--base: #fdfcf7;--wp--preset--color--contrast: #111111;--wp--preset--color--accent-1: #27358c;--wp--preset--color--accent-2: #e42213;--wp--preset--color--accent-3: #768290;--wp--preset--color--accent-4: #c8d7ba;--wp--preset--color--accent-5: #a5b4d5;--wp--preset--color--accent-6: #e6f1d3;--wp--preset--color--custom-color-2: #e6ebe0;--wp--preset--color--custom-color-3: #a1b5d8;--wp--preset--color--custom-color-4: #c2b8b9;--wp--preset--color--custom-color-5: #e4f0d0;--wp--preset--color--custom-color-6: #738290;--wp--preset--color--custom-color-7: #0056a2;--wp--preset--color--custom-color-8: #050a24;--wp--preset--color--custom-color-9: #fe4a49;--wp--preset--color--custom-color-10: #ebeeff;--wp--preset--color--custom-color-11: #4682b4;--wp--preset--color--custom-color-12: #f4bb36;--wp--preset--color--custom-color-13: #f0fda7;}.has-base-color{color: var(--wp--preset--color--base) !important;}.has-contrast-color{color: var(--wp--preset--color--contrast) !important;}.has-accent-1-color{color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-color{color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-color{color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-color{color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-color{color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-color{color: var(--wp--preset--color--accent-6) !important;}.has-custom-color-2-color{color: var(--wp--preset--color--custom-color-2) !important;}.has-custom-color-3-color{color: var(--wp--preset--color--custom-color-3) !important;}.has-custom-color-4-color{color: var(--wp--preset--color--custom-color-4) !important;}.has-custom-color-5-color{color: var(--wp--preset--color--custom-color-5) !important;}.has-custom-color-6-color{color: var(--wp--preset--color--custom-color-6) !important;}.has-custom-color-7-color{color: var(--wp--preset--color--custom-color-7) !important;}.has-custom-color-8-color{color: var(--wp--preset--color--custom-color-8) !important;}.has-custom-color-9-color{color: var(--wp--preset--color--custom-color-9) !important;}.has-custom-color-10-color{color: var(--wp--preset--color--custom-color-10) !important;}.has-custom-color-11-color{color: var(--wp--preset--color--custom-color-11) !important;}.has-custom-color-12-color{color: var(--wp--preset--color--custom-color-12) !important;}.has-custom-color-13-color{color: var(--wp--preset--color--custom-color-13) !important;}.has-base-background-color{background-color: var(--wp--preset--color--base) !important;}.has-contrast-background-color{background-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-background-color{background-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-background-color{background-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-background-color{background-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-background-color{background-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-background-color{background-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-background-color{background-color: var(--wp--preset--color--accent-6) !important;}.has-custom-color-2-background-color{background-color: var(--wp--preset--color--custom-color-2) !important;}.has-custom-color-3-background-color{background-color: var(--wp--preset--color--custom-color-3) !important;}.has-custom-color-4-background-color{background-color: var(--wp--preset--color--custom-color-4) !important;}.has-custom-color-5-background-color{background-color: var(--wp--preset--color--custom-color-5) !important;}.has-custom-color-6-background-color{background-color: var(--wp--preset--color--custom-color-6) !important;}.has-custom-color-7-background-color{background-color: var(--wp--preset--color--custom-color-7) !important;}.has-custom-color-8-background-color{background-color: var(--wp--preset--color--custom-color-8) !important;}.has-custom-color-9-background-color{background-color: var(--wp--preset--color--custom-color-9) !important;}.has-custom-color-10-background-color{background-color: var(--wp--preset--color--custom-color-10) !important;}.has-custom-color-11-background-color{background-color: var(--wp--preset--color--custom-color-11) !important;}.has-custom-color-12-background-color{background-color: var(--wp--preset--color--custom-color-12) !important;}.has-custom-color-13-background-color{background-color: var(--wp--preset--color--custom-color-13) !important;}.has-base-border-color{border-color: var(--wp--preset--color--base) !important;}.has-contrast-border-color{border-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-border-color{border-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-border-color{border-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-border-color{border-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-border-color{border-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-border-color{border-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-border-color{border-color: var(--wp--preset--color--accent-6) !important;}.has-custom-color-2-border-color{border-color: var(--wp--preset--color--custom-color-2) !important;}.has-custom-color-3-border-color{border-color: var(--wp--preset--color--custom-color-3) !important;}.has-custom-color-4-border-color{border-color: var(--wp--preset--color--custom-color-4) !important;}.has-custom-color-5-border-color{border-color: var(--wp--preset--color--custom-color-5) !important;}.has-custom-color-6-border-color{border-color: var(--wp--preset--color--custom-color-6) !important;}.has-custom-color-7-border-color{border-color: var(--wp--preset--color--custom-color-7) !important;}.has-custom-color-8-border-color{border-color: var(--wp--preset--color--custom-color-8) !important;}.has-custom-color-9-border-color{border-color: var(--wp--preset--color--custom-color-9) !important;}.has-custom-color-10-border-color{border-color: var(--wp--preset--color--custom-color-10) !important;}.has-custom-color-11-border-color{border-color: var(--wp--preset--color--custom-color-11) !important;}.has-custom-color-12-border-color{border-color: var(--wp--preset--color--custom-color-12) !important;}.has-custom-color-13-border-color{border-color: var(--wp--preset--color--custom-color-13) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-xx-large-font-size{font-size: var(--wp--preset--font-size--xx-large) !important;}:where(.wp-block-buttons).has-base-color{color: var(--wp--preset--color--base) !important;}:where(.wp-block-buttons).has-contrast-color{color: var(--wp--preset--color--contrast) !important;}:where(.wp-block-buttons).has-accent-1-color{color: var(--wp--preset--color--accent-1) !important;}:where(.wp-block-buttons).has-accent-2-color{color: var(--wp--preset--color--accent-2) !important;}:where(.wp-block-buttons).has-accent-3-color{color: var(--wp--preset--color--accent-3) !important;}:where(.wp-block-buttons).has-accent-4-color{color: var(--wp--preset--color--accent-4) !important;}:where(.wp-block-buttons).has-accent-5-color{color: var(--wp--preset--color--accent-5) !important;}:where(.wp-block-buttons).has-accent-6-color{color: var(--wp--preset--color--accent-6) !important;}:where(.wp-block-buttons).has-custom-color-2-color{color: var(--wp--preset--color--custom-color-2) !important;}:where(.wp-block-buttons).has-custom-color-3-color{color: var(--wp--preset--color--custom-color-3) !important;}:where(.wp-block-buttons).has-custom-color-4-color{color: var(--wp--preset--color--custom-color-4) !important;}:where(.wp-block-buttons).has-custom-color-5-color{color: var(--wp--preset--color--custom-color-5) !important;}:where(.wp-block-buttons).has-custom-color-6-color{color: var(--wp--preset--color--custom-color-6) !important;}:where(.wp-block-buttons).has-custom-color-7-color{color: var(--wp--preset--color--custom-color-7) !important;}:where(.wp-block-buttons).has-custom-color-8-color{color: var(--wp--preset--color--custom-color-8) !important;}:where(.wp-block-buttons).has-custom-color-9-color{color: var(--wp--preset--color--custom-color-9) !important;}:where(.wp-block-buttons).has-custom-color-10-color{color: var(--wp--preset--color--custom-color-10) !important;}:where(.wp-block-buttons).has-custom-color-11-color{color: var(--wp--preset--color--custom-color-11) !important;}:where(.wp-block-buttons).has-custom-color-12-color{color: var(--wp--preset--color--custom-color-12) !important;}:where(.wp-block-buttons).has-custom-color-13-color{color: var(--wp--preset--color--custom-color-13) !important;}:where(.wp-block-buttons).has-base-background-color{background-color: var(--wp--preset--color--base) !important;}:where(.wp-block-buttons).has-contrast-background-color{background-color: var(--wp--preset--color--contrast) !important;}:where(.wp-block-buttons).has-accent-1-background-color{background-color: var(--wp--preset--color--accent-1) !important;}:where(.wp-block-buttons).has-accent-2-background-color{background-color: var(--wp--preset--color--accent-2) !important;}:where(.wp-block-buttons).has-accent-3-background-color{background-color: var(--wp--preset--color--accent-3) !important;}:where(.wp-block-buttons).has-accent-4-background-color{background-color: var(--wp--preset--color--accent-4) !important;}:where(.wp-block-buttons).has-accent-5-background-color{background-color: var(--wp--preset--color--accent-5) !important;}:where(.wp-block-buttons).has-accent-6-background-color{background-color: var(--wp--preset--color--accent-6) !important;}:where(.wp-block-buttons).has-custom-color-2-background-color{background-color: var(--wp--preset--color--custom-color-2) !important;}:where(.wp-block-buttons).has-custom-color-3-background-color{background-color: var(--wp--preset--color--custom-color-3) !important;}:where(.wp-block-buttons).has-custom-color-4-background-color{background-color: var(--wp--preset--color--custom-color-4) !important;}:where(.wp-block-buttons).has-custom-color-5-background-color{background-color: var(--wp--preset--color--custom-color-5) !important;}:where(.wp-block-buttons).has-custom-color-6-background-color{background-color: var(--wp--preset--color--custom-color-6) !important;}:where(.wp-block-buttons).has-custom-color-7-background-color{background-color: var(--wp--preset--color--custom-color-7) !important;}:where(.wp-block-buttons).has-custom-color-8-background-color{background-color: var(--wp--preset--color--custom-color-8) !important;}:where(.wp-block-buttons).has-custom-color-9-background-color{background-color: var(--wp--preset--color--custom-color-9) !important;}:where(.wp-block-buttons).has-custom-color-10-background-color{background-color: var(--wp--preset--color--custom-color-10) !important;}:where(.wp-block-buttons).has-custom-color-11-background-color{background-color: var(--wp--preset--color--custom-color-11) !important;}:where(.wp-block-buttons).has-custom-color-12-background-color{background-color: var(--wp--preset--color--custom-color-12) !important;}:where(.wp-block-buttons).has-custom-color-13-background-color{background-color: var(--wp--preset--color--custom-color-13) !important;}:where(.wp-block-buttons).has-base-border-color{border-color: var(--wp--preset--color--base) !important;}:where(.wp-block-buttons).has-contrast-border-color{border-color: var(--wp--preset--color--contrast) !important;}:where(.wp-block-buttons).has-accent-1-border-color{border-color: var(--wp--preset--color--accent-1) !important;}:where(.wp-block-buttons).has-accent-2-border-color{border-color: var(--wp--preset--color--accent-2) !important;}:where(.wp-block-buttons).has-accent-3-border-color{border-color: var(--wp--preset--color--accent-3) !important;}:where(.wp-block-buttons).has-accent-4-border-color{border-color: var(--wp--preset--color--accent-4) !important;}:where(.wp-block-buttons).has-accent-5-border-color{border-color: var(--wp--preset--color--accent-5) !important;}:where(.wp-block-buttons).has-accent-6-border-color{border-color: var(--wp--preset--color--accent-6) !important;}:where(.wp-block-buttons).has-custom-color-2-border-color{border-color: var(--wp--preset--color--custom-color-2) !important;}:where(.wp-block-buttons).has-custom-color-3-border-color{border-color: var(--wp--preset--color--custom-color-3) !important;}:where(.wp-block-buttons).has-custom-color-4-border-color{border-color: var(--wp--preset--color--custom-color-4) !important;}:where(.wp-block-buttons).has-custom-color-5-border-color{border-color: var(--wp--preset--color--custom-color-5) !important;}:where(.wp-block-buttons).has-custom-color-6-border-color{border-color: var(--wp--preset--color--custom-color-6) !important;}:where(.wp-block-buttons).has-custom-color-7-border-color{border-color: var(--wp--preset--color--custom-color-7) !important;}:where(.wp-block-buttons).has-custom-color-8-border-color{border-color: var(--wp--preset--color--custom-color-8) !important;}:where(.wp-block-buttons).has-custom-color-9-border-color{border-color: var(--wp--preset--color--custom-color-9) !important;}:where(.wp-block-buttons).has-custom-color-10-border-color{border-color: var(--wp--preset--color--custom-color-10) !important;}:where(.wp-block-buttons).has-custom-color-11-border-color{border-color: var(--wp--preset--color--custom-color-11) !important;}:where(.wp-block-buttons).has-custom-color-12-border-color{border-color: var(--wp--preset--color--custom-color-12) !important;}:where(.wp-block-buttons).has-custom-color-13-border-color{border-color: var(--wp--preset--color--custom-color-13) !important;}/* rtm-kit editor lock: new sizes follow the skin */body{--wp--preset--font-size--ixo-small: var(--fs-small, 15px);--wp--preset--font-size--ixo-body: var(--fs-read, 18px);--wp--preset--font-size--ixo-lead: var(--fs-lead, 20px);--wp--preset--font-size--ixo-subhead: var(--fs-sub, 26px);--wp--preset--font-size--ixo-section: var(--fs-section, clamp(28px,2.6vw,38px));}