/* ==========================================================================
   Sentor 2026 — design system
   Styles core WordPress block output. Page CONTENT is editable in the block
   editor; this file only controls how it looks.
   ========================================================================== */

:root{
  /* Neutrals */
  --sn-ink:#171A21;          /* main text and headings */
  --sn-ink-soft:#5E6673;     /* secondary body text */
  --sn-ink-faint:#6A7280;    /* tertiary / metadata */
  --sn-paper:#FFFFFF;        /* page ground */
  --sn-white:#FFFFFF;
  --sn-line:#E3E6EB;         /* borders and dividers */
  --sn-line-soft:#EEF0F4;

  /* Brand */
  --sn-brand:#2C1B55;        /* primary Sentor purple */
  --sn-brand-deep:#1F1340;   /* darkest ground: dark sections, footer */
  --sn-brand-mid:#432C75;    /* hover / secondary purple */
  --sn-tint:#F7F8FA;         /* light background section fill */
  --sn-red:#DC232A;          /* Sentor red — accent and alarms */
  --sn-red-dark:#B71C22;
  --sn-red-tint:#FDECEC;

  /* Text on the dark purple grounds */
  --sn-on-dark-soft:#CBC6DA;
  --sn-on-dark-faint:#9C94B4;
  --sn-on-dark-link:#B9AAE4;

  /* System / status */
  --sn-ok:#17875D;           /* normal / online */
  --sn-warn:#D88A00;         /* warning */
  --sn-critical:#DC232A;     /* critical / alarm */
  --sn-info:#2F6FED;         /* information */

  --sn-shadow:0 1px 2px rgba(23,26,33,.05), 0 6px 20px rgba(23,26,33,.06);
  --sn-radius:6px;
  --sn-radius-lg:10px;
  --sn-max:1180px;
  --sn-pad:28px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--sn-paper);color:var(--sn-ink-soft);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
main{display:block;}
h1,h2,h3,h4,h5,h6{
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;font-weight:700;line-height:1.14;
  color:var(--sn-ink);margin:0 0 .5em;text-wrap:balance;
}
h1{font-size:clamp(2.25rem,5vw,3.75rem);font-weight:700;}
h2{font-size:clamp(1.75rem,3.4vw,2.625rem);font-weight:700;}
h3{font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:600;}
h4{font-size:1.375rem;font-weight:600;}
h5{font-size:1.1875rem;font-weight:600;}
h6{font-size:1.0625rem;font-weight:600;}
p{margin:0 0 1.1em;}
a{color:var(--sn-brand-mid);}
:focus-visible{outline:2px solid var(--sn-brand);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
.sn-skip{position:absolute;left:-999px;top:0;background:var(--sn-brand);color:#fff;padding:10px 16px;z-index:200;}
.sn-skip:focus{left:12px;top:12px;}

/* --------------------------------------------------------------------------
   Layout — every section is a full-width Group block with constrained inner
   content, so backgrounds bleed edge to edge while text stays centred.
   -------------------------------------------------------------------------- */
.alignfull{width:100%;max-width:100%;margin-left:0;margin-right:0;}
.sn-wrap{max-width:var(--sn-max);margin:0 auto;padding:0 var(--sn-pad);}

/* The section itself holds the content column, via padding rather than by
   centring each child. Centring children individually meant anything with a
   narrower measure — a .sn-lede at 58ch — was pushed to the middle of the page
   instead of lining up with the heading above it. */
.sn-section{
  padding-block:80px;
  padding-inline:max(var(--sn-pad), calc((100% - var(--sn-max)) / 2));
  width:100%;max-width:100%;
}
/* !important is required here: WordPress's own constrained-layout rule sets
   margin-left/right to auto with !important, which is what pushed narrower
   elements to the middle of the page. */
.sn-section.wp-block-group > *{margin-inline:0 !important;}
.sn-section.wp-block-group > .alignfull{max-width:100%;}
/* Sections that are deliberately centred keep their centring. */
.sn-cta.wp-block-group > *,
.sn-proof.wp-block-group > *,
.sn-section.wp-block-group > .sn-center{margin-inline:auto !important;}
.sn-section--tight{padding-block:52px;}
.sn-section--flush{padding-block:0;}
.sn-section--tint{background:var(--sn-tint);}
.sn-section--paper{background:var(--sn-paper);}
.sn-section--white{background:var(--sn-white);}

/* Dark section: recolour descendants so editors can drop any block in safely */
.sn-section--dark{background:var(--sn-brand-deep);color:var(--sn-on-dark-soft);}
.sn-section--dark h1,.sn-section--dark h2,.sn-section--dark h3,
.sn-section--dark h4,.sn-section--dark h5{color:#fff;}
.sn-section--dark p{color:var(--sn-on-dark-soft);}
.sn-section--dark .sn-eyebrow{color:var(--sn-on-dark-link);}
.sn-section--dark a:not(.wp-block-button__link){color:var(--sn-on-dark-link);}

@media(max-width:640px){
  .sn-section{padding-block:52px;}
  .sn-section--tight{padding-block:40px;}
  :root{--sn-pad:20px;}
}

/* --------------------------------------------------------------------------
   Text roles — applied as "Additional CSS class" on a paragraph
   -------------------------------------------------------------------------- */
.sn-eyebrow{
  font-family:'Inter',sans-serif;font-size:.875rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;color:var(--sn-red);font-weight:600;margin-bottom:14px;
}
.sn-lede{font-size:1.1875rem;color:var(--sn-ink-soft);max-width:58ch;}
.sn-mono{font-family:'Inter',sans-serif;}
.sn-small{font-size:.8125rem;}
.sn-muted{color:var(--sn-ink-faint);}
.sn-center{text-align:center;margin-inline:auto;}
.sn-center .sn-lede{margin-inline:auto;}

/* --------------------------------------------------------------------------
   Cards — a Group block with class sn-card
   -------------------------------------------------------------------------- */
.sn-card{
  background:var(--sn-white);border:1px solid var(--sn-line);
  border-radius:var(--sn-radius-lg);padding:26px;box-shadow:var(--sn-shadow);
}
/* Equal heights only where a card is the sole occupant of its column. Applying
   height:100% to every card made two stacked cards each claim the full column
   height, so the second one overflowed the section. */
.wp-block-column > .sn-card:only-child,
.wp-block-column > .sn-industry:only-child,
.wp-block-column > .sn-download:only-child{height:100%;}
.sn-card h2,.sn-card h3,.sn-card h4{font-size:1.1rem;margin-bottom:8px;}
.sn-card p{font-size:.93rem;}
.sn-card p:last-child,.sn-card ul:last-child{margin-bottom:0;}
.sn-card ul{padding-left:18px;font-size:.93rem;margin:0 0 1em;}
.sn-card li{margin-bottom:5px;}
.sn-section--dark .sn-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);box-shadow:none;}

/* Optional decorative icon — add sn-ico-* alongside sn-card */
[class*="sn-ico-"]::before{
  content:"";display:block;width:44px;height:44px;margin-bottom:16px;
  border-radius:10px;background-color:var(--sn-tint);
  background-repeat:no-repeat;background-position:center;background-size:22px 22px;
}
.sn-section--dark [class*="sn-ico-"]::before{background-color:rgba(185,170,228,.16);}
.sn-ico-watch::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C1B55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");}
.sn-ico-control::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C1B55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='4'/%3E%3Ccircle cx='16' cy='12' r='2.5'/%3E%3C/svg%3E");}
.sn-ico-alert::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C1B55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E");}
.sn-ico-tower::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C1B55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l6 20M12 2L6 22M9 9h6M8 14h8'/%3E%3C/svg%3E");}
.sn-ico-water::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C1B55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2s7 8 7 13a7 7 0 1 1-14 0c0-5 7-13 7-13z'/%3E%3C/svg%3E");}
.sn-ico-shield::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C1B55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");}
.sn-ico-leaf::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C1B55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21c9-1 14-6 15-15-9 1-14 6-15 15z'/%3E%3Cpath d='M5 21c2-5 5-8 10-10'/%3E%3C/svg%3E");}
.sn-ico-building::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C1B55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h6v17M11 21V9h8a1 1 0 0 1 1 1v11M8 8h.01M8 12h.01M8 16h.01'/%3E%3C/svg%3E");}

/* --------------------------------------------------------------------------
   Buttons — core Button block, restyled
   -------------------------------------------------------------------------- */
.wp-block-button__link{
  font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;
  padding:13px 24px;border-radius:var(--sn-radius);
  border:1.5px solid transparent;text-decoration:none;
  transition:background .15s ease,transform .15s ease,color .15s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background:var(--sn-brand);color:#fff;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background:var(--sn-brand-mid);transform:translateY(-1px);color:#fff;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;border-color:var(--sn-ink);color:var(--sn-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:rgba(23,26,33,.06);}
.sn-section--dark .wp-block-button.is-style-outline .wp-block-button__link,
.sn-cta .wp-block-button.is-style-outline .wp-block-button__link{border-color:#fff;color:#fff;}
.sn-section--dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.sn-cta .wp-block-button.is-style-outline .wp-block-button__link:hover{background:rgba(255,255,255,.12);}
.wp-block-buttons{gap:14px;}

/* Header/footer buttons (not blocks) */
.sn-btn{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:1rem;
  padding:13px 24px;border-radius:var(--sn-radius);text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
  transition:background .15s ease,transform .15s ease;
}
.sn-btn--primary{background:var(--sn-brand);color:#fff;}
.sn-btn--primary:hover{background:var(--sn-brand-mid);color:#fff;transform:translateY(-1px);}
.sn-btn--sm{padding:10px 18px;font-size:.85rem;white-space:nowrap;}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.sn-hero{padding-block:72px 88px;}
.sn-hero h1{margin-bottom:20px;max-width:19ch;text-wrap:pretty;}
.sn-hero .sn-lede{margin-bottom:28px;}
.sn-hero .wp-block-columns{align-items:center;gap:52px;}
.sn-hero-media{position:relative;}
.sn-hero-media .wp-block-image{margin:0;}
.sn-hero-media img{width:100%;}
@media(max-width:781px){
  .sn-hero{padding-block:44px 56px;}
  .sn-hero .wp-block-columns{gap:32px;}
}

/* Live-readings overlay card — a Group with class sn-float inside the media column */
.sn-float{
  background:var(--sn-white);border:1px solid var(--sn-line);
  border-radius:var(--sn-radius-lg);padding:14px 18px;width:220px;
  box-shadow:0 2px 4px rgba(23,26,33,.08),0 14px 40px rgba(23,26,33,.14);
}
.sn-float p{
  display:flex;justify-content:space-between;gap:12px;
  font-size:.875rem;margin:0 0 4px;color:var(--sn-ink-soft);
}
.sn-float p:last-child{margin-bottom:0;}
.sn-float p strong{
  font-family:'Inter',sans-serif;color:var(--sn-ink);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sn-float .sn-float-head{
  display:block;font-size:.875rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--sn-brand-mid);font-weight:700;margin-bottom:8px;
}
.sn-float .sn-float-head::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--sn-ok);margin-right:7px;box-shadow:0 0 0 3px rgba(23,138,79,.18);
}
@media(min-width:782px){
  .sn-float{position:absolute;left:-26px;bottom:-26px;}
}
@media(max-width:781px){.sn-float{width:auto;margin-top:16px;}}

/* Stat row */
.sn-stats{
  display:flex;gap:32px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--sn-line);
}
.sn-stats p{font-size:.82rem;margin:0;}
.sn-stats strong{
  display:block;font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;font-size:1.15rem;color:var(--sn-ink);
}

/* --------------------------------------------------------------------------
   Proof strip
   -------------------------------------------------------------------------- */
.sn-proof{
  background:var(--sn-tint);padding-block:26px;
  border-top:1px solid var(--sn-line);border-bottom:1px solid var(--sn-line);
}
.sn-proof p{
  margin:0;text-align:center;color:var(--sn-brand-mid);
  font-weight:600;font-size:1rem;
}

/* --------------------------------------------------------------------------
   Industry cards — Group with class sn-industry (image + heading + text)
   -------------------------------------------------------------------------- */
/* NOTE: deliberately NOT display:flex. WordPress's constrained-layout rule puts
   `margin-inline:auto` on child blocks, which in a flex column collapses each
   child to its content width — that shrinks the panel to icon size. */
.sn-industry{
  border:1px solid var(--sn-line);border-radius:var(--sn-radius-lg);
  overflow:hidden;background:var(--sn-white);display:block;
}
.sn-industry .wp-block-image{margin:0;}
/* Cards keep a uniform frame so the grid lines up, but nothing is cropped:
   contain fits the whole picture and any spare space takes the card's own
   white, so it is invisible rather than a visible bar. */
.sn-industry .wp-block-image img{width:100%;aspect-ratio:4/3;object-fit:contain;
  background:var(--sn-white);}
.sn-industry h2,.sn-industry h3,.sn-industry h4{
  font-size:1.05rem;margin:18px 20px 6px;
}
.sn-industry p{font-size:.88rem;margin:0 20px 18px;}
.sn-industry:hover{border-color:var(--sn-brand);}
.sn-industry a{text-decoration:none;}
.sn-industry a:hover{text-decoration:underline;}

/* Branded panel used where photography isn't ready — Group class sn-panel */
.sn-panel{
  width:100%;max-width:none;margin-inline:0;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--sn-brand-mid) 0%,var(--sn-brand) 58%,var(--sn-brand-deep) 100%);
  position:relative;overflow:hidden;
}
.sn-panel::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 78% 22%,rgba(220,0,29,.30),transparent 54%);
}
.sn-panel[class*="sn-ico-"]::before{
  background-color:transparent;width:46px;height:46px;background-size:46px 46px;
  margin:0;position:relative;z-index:1;filter:brightness(0) invert(1);opacity:.9;
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */
.sn-product .wp-block-image{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:var(--sn-paper);border-radius:var(--sn-radius);
  margin:0 0 14px;padding:10px;
}
.sn-product .wp-block-image img{max-height:100%;width:auto;max-width:100%;object-fit:contain;}
.sn-sku{
  font-family:'Inter',sans-serif;font-size:.875rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--sn-red);margin-bottom:4px;
}

/* --------------------------------------------------------------------------
   Diagram row — Group class sn-node per step
   -------------------------------------------------------------------------- */
.sn-node{text-align:center;}
.sn-node h3,.sn-node h4{font-size:.98rem;margin-bottom:4px;color:#fff;}
.sn-node p{font-size:.82rem;margin:0;}
.sn-node[class*="sn-ico-"]::before{
  margin-inline:auto;border-radius:50%;
  background-color:rgba(185,164,240,.14);
  box-shadow:inset 0 0 0 1.5px rgba(185,164,240,.45);
  width:52px;height:52px;background-size:24px 24px;
  filter:brightness(0) invert(1);opacity:.85;
}
.sn-step{
  font-family:'Inter',sans-serif;font-size:.875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sn-on-dark-link);margin-bottom:6px;
}

/* --------------------------------------------------------------------------
   Badges (protocols) — a paragraph per badge inside a row Group
   -------------------------------------------------------------------------- */
.sn-badges{display:flex;gap:12px;flex-wrap:wrap;}
.sn-badges p,.sn-badge{
  margin:0;font-family:'Inter',sans-serif;font-size:.875rem;font-weight:600;
  color:var(--sn-brand-mid);background:var(--sn-white);border:1px solid var(--sn-line);
  padding:8px 16px;border-radius:20px;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.sn-cta{background:var(--sn-brand-mid);padding-block:64px;text-align:center;color:#fff;}
.sn-cta h2,.sn-cta h3{color:#fff;max-width:26ch;margin-inline:auto;}
.sn-cta p{color:var(--sn-on-dark-soft);max-width:52ch;margin-inline:auto;}
.sn-cta .wp-block-buttons{justify-content:center;}
.sn-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background:#fff;color:var(--sn-brand);
}
.sn-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{background:var(--sn-tint);}

/* --------------------------------------------------------------------------
   Tables (spec / software comparison)
   -------------------------------------------------------------------------- */
.wp-block-table{overflow-x:auto;}
.wp-block-table table{
  width:100%;border-collapse:collapse;font-size:.9rem;background:var(--sn-white);
  border:1px solid var(--sn-line);border-radius:var(--sn-radius-lg);overflow:hidden;
}
.wp-block-table th{
  text-align:left;font-family:'Inter',sans-serif;font-size:.875rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--sn-ink-faint);
  padding:14px 18px;border-bottom:1.5px solid var(--sn-line);background:transparent;
}
.wp-block-table td{
  padding:14px 18px;border-bottom:1px solid var(--sn-line-soft);
  color:var(--sn-ink-soft);vertical-align:top;
}
.wp-block-table tr:last-child td{border-bottom:none;}
.wp-block-table td:first-child{
  font-family:'Inter',sans-serif;color:var(--sn-ink);font-weight:600;
}

/* --------------------------------------------------------------------------
   FAQ — core Details blocks
   -------------------------------------------------------------------------- */
.wp-block-details{
  border-bottom:1px solid var(--sn-line);padding:0;margin:0;background:transparent;
}
.wp-block-details:first-of-type{border-top:1px solid var(--sn-line);}
.wp-block-details summary{
  padding:20px 4px;cursor:pointer;font-weight:600;font-size:1.02rem;
  color:var(--sn-ink);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.wp-block-details summary::-webkit-details-marker{display:none;}
.wp-block-details summary::after{
  content:"+";font-size:1.4rem;color:var(--sn-brand);font-weight:400;flex:0 0 auto;
}
.wp-block-details[open] summary::after{content:"–";}
.wp-block-details p{padding:0 4px 22px;margin:0;max-width:74ch;}

/* --------------------------------------------------------------------------
   Download rows — Group class sn-download
   -------------------------------------------------------------------------- */
.sn-download{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--sn-white);border:1px solid var(--sn-line);
  border-radius:var(--sn-radius-lg);padding:16px 20px;box-shadow:var(--sn-shadow);
}
/* Same constrained-layout guard as .sn-industry — this one IS flex, so its
   children need their auto margins neutralised explicitly. */
.sn-download > *{margin:0;max-width:none;}
.sn-download h2,.sn-download h3,.sn-download h4{font-size:.98rem;margin-bottom:2px;flex-basis:100%;}
.sn-download p{font-size:.88rem;flex:1 1 60%;}
.sn-download .wp-block-buttons{flex:0 0 auto;}
.sn-download .wp-block-button__link{padding:9px 16px;font-size:.85rem;}

/* --------------------------------------------------------------------------
   Contact form (shortcode output)
   -------------------------------------------------------------------------- */
.sn-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.sn-field--full{grid-column:1 / -1;}
.sn-field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--sn-ink);}
.sn-field input,.sn-field select,.sn-field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--sn-line);
  border-radius:var(--sn-radius);font-family:inherit;font-size:.95rem;
  background:var(--sn-white);color:var(--sn-ink);
}
.sn-field input:focus,.sn-field select:focus,.sn-field textarea:focus{
  outline:none;border-color:var(--sn-brand);
}
.sn-form-note{font-size:.82rem;color:var(--sn-ink-faint);}
.sn-form-status{padding:14px 16px;border-radius:var(--sn-radius);margin-bottom:20px;font-size:.9rem;font-weight:600;}
.sn-form-status--ok{background:var(--sn-tint);color:var(--sn-brand-mid);}
.sn-form-status--err{background:var(--sn-red-tint);color:var(--sn-red);}
.sn-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
@media(max-width:640px){.sn-form-grid{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.sn-header{position:sticky;top:0;z-index:100;background:var(--sn-paper);border-bottom:1px solid var(--sn-line);}
.sn-header-inner{
  max-width:var(--sn-max);margin:0 auto;padding:18px var(--sn-pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .2s ease;
}
.sn-header.is-compact .sn-header-inner{padding-block:11px;}
.sn-logo{display:flex;align-items:center;flex:0 0 auto;}
.sn-logo img{height:54px;width:auto;max-width:none;object-fit:contain;display:block;}
.sn-header.is-compact .sn-logo img{height:44px;}
.sn-nav-list{list-style:none;display:flex;gap:24px;margin:0;padding:0;}
.sn-nav-list > li > a{
  text-decoration:none;color:var(--sn-ink);font-weight:500;font-size:1rem;
  padding:6px 2px;border-bottom:2px solid transparent;display:block;
}
.sn-nav-list > li > a:hover,.sn-nav-list > li.current-menu-item > a{border-color:var(--sn-brand);}

/* Dropdown submenus */
.sn-nav-list li{position:relative;}
.sn-nav-list .menu-item-has-children > a::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.55;
}
.sn-nav-list .sub-menu{
  position:absolute;top:calc(100% + 6px);left:-12px;min-width:262px;
  list-style:none;margin:0;padding:8px;
  background:var(--sn-white);border:1px solid var(--sn-line);
  border-radius:var(--sn-radius-lg);box-shadow:0 4px 8px rgba(23,26,33,.06),0 18px 44px rgba(23,26,33,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);z-index:120;
  /* Closing waits a moment, so a diagonal move towards the panel is forgiving. */
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  transition-delay:.28s;
}
/* Invisible bridge across the gap between the menu item and the panel. Without
   it the pointer leaves the parent li mid-travel and the panel shuts before it
   can be reached. */
.sn-nav-list .sub-menu::before{
  content:"";position:absolute;left:0;right:0;top:-14px;height:16px;
}
.sn-nav-list > li:hover > .sub-menu,
.sn-nav-list > li:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;
}
/* The whole header-height column under a parent item stays hoverable.
   Scoped to the desktop breakpoint — setting display on .sn-nav unscoped
   overrides the mobile rule that hides it, and both navs then render. */
@media(min-width:981px){
  .sn-nav{align-self:stretch;display:flex;align-items:center;}
  .sn-nav-list{align-items:stretch;}
  .sn-nav-list > li{display:flex;align-items:center;}
}
.sn-nav-list .sub-menu li{width:100%;}
.sn-nav-list .sub-menu a{
  display:block;padding:9px 12px;border-radius:var(--sn-radius);
  font-size:.9rem;font-weight:500;color:var(--sn-ink);
  text-decoration:none;border-bottom:none;white-space:normal;
}
.sn-nav-list .sub-menu a:hover{background:var(--sn-tint);color:var(--sn-brand-mid);}

/* Mobile: submenus are simply indented, always visible */
.sn-mobile-list .sub-menu{
  list-style:none;margin:10px 0 0;padding:0 0 0 16px;
  display:flex;flex-direction:column;gap:10px;
  border-left:2px solid var(--sn-line);
}
.sn-mobile-list .sub-menu a{font-size:.94rem;color:var(--sn-ink-soft);}
.sn-header-actions{display:flex;align-items:center;gap:16px;flex:0 0 auto;}
.sn-header-actions .sn-btn{white-space:nowrap;}
.sn-header-phone{font-size:.85rem;color:var(--sn-ink-soft);font-weight:500;text-decoration:none;white-space:nowrap;}
.sn-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0;}
.sn-nav-toggle span{display:block;width:24px;height:2px;background:var(--sn-ink);}
.sn-mobile-nav{display:none;flex-direction:column;gap:16px;padding:20px var(--sn-pad) 28px;border-top:1px solid var(--sn-line);}
.sn-mobile-nav.is-open{display:flex;}
.sn-mobile-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.sn-mobile-list a{text-decoration:none;color:var(--sn-ink);font-weight:500;font-size:1.05rem;}
.sn-mobile-nav .sn-btn{justify-content:center;}
@media(max-width:980px){
  .sn-nav{display:none;}
  .sn-header-phone{display:none;}
  .sn-header-actions > .sn-btn{display:none;}
  .sn-nav-toggle{display:flex;}
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sn-footer{background:var(--sn-brand-deep);color:var(--sn-on-dark-soft);padding-top:64px;}
.sn-footer-inner{max-width:var(--sn-max);margin:0 auto;padding:0 var(--sn-pad);}
.sn-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:32px;padding-bottom:48px;}
.sn-footer-col h2{
  color:#fff;font-family:'Inter',sans-serif;font-size:.875rem;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;
}
.sn-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.sn-footer-col ul a{color:var(--sn-on-dark-soft);text-decoration:none;font-size:.88rem;}
.sn-footer-col ul a:hover{color:#fff;}
.sn-footer-brand img{height:52px;width:auto;margin-bottom:12px;}
.sn-footer-brand p{font-size:.85rem;max-width:28ch;margin:0;}
.sn-footer-contact li{display:flex;flex-direction:column;gap:2px;}
.sn-footer-contact span{font-size:.875rem;color:var(--sn-on-dark-faint);}
.sn-footer-base{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.sn-footer-base p{margin:0;font-size:.8rem;color:var(--sn-on-dark-faint);}
.sn-footer-legal{display:flex;gap:20px;}
.sn-footer-legal a{color:var(--sn-on-dark-faint);text-decoration:none;font-size:.8rem;}
.sn-footer-legal a:hover{color:#fff;}
@media(max-width:900px){.sn-footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.sn-footer-grid{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.sn-prose{max-width:74ch;}
.sn-notice{max-width:640px;margin:80px auto;padding:24px;background:var(--sn-red-tint);border-radius:var(--sn-radius-lg);color:var(--sn-red);}
.sn-entry{padding-block:24px;border-bottom:1px solid var(--sn-line);}
.wp-block-columns{margin-bottom:0;}
.wp-block-image{margin-bottom:0;}
.wp-block-image img{border-radius:var(--sn-radius-lg);}
.sn-product .wp-block-image img,.sn-hero-media .wp-block-image img{border-radius:0;}

/* --------------------------------------------------------------------------
   Breadcrumbs — rendered on interior pages, mirrored in BreadcrumbList schema
   -------------------------------------------------------------------------- */
.sn-breadcrumbs{max-width:var(--sn-max);margin:0 auto;padding:18px var(--sn-pad) 0;}
.sn-breadcrumbs ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.82rem;color:var(--sn-ink-faint);
}
.sn-breadcrumbs li{display:flex;align-items:center;gap:8px;}
.sn-breadcrumbs li:not(:last-child)::after{content:"/";color:var(--sn-line);}
.sn-breadcrumbs a{color:var(--sn-ink-faint);text-decoration:none;}
.sn-breadcrumbs a:hover{color:var(--sn-brand-mid);text-decoration:underline;}
.sn-breadcrumbs li[aria-current]{color:var(--sn-ink-soft);}

/* --- Case-study stat cards ------------------------------------------------ */
.sn-proof .sn-card{text-align:center;}
.sn-proof .sn-card h3{font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;font-size:clamp(1.9rem,3vw,2.4rem);
  line-height:1.05;margin:0 20px 6px !important;color:var(--sn-brand);}
.sn-proof .sn-card p{margin:0 20px 20px !important;font-size:.9rem;color:var(--sn-ink-faint);}
.sn-stat{font-size:.95rem;color:var(--sn-ink-faint);}
.sn-stat strong{color:var(--sn-brand);font-size:1.15rem;}

/* Keep multi-word navigation items on one line where there is room. */
.sn-nav a,.sn-nav > li > a{white-space:nowrap;}


/* --- Header fit ----------------------------------------------------------
   The nav, the phone number and the CTA compete for the same row. Below
   1240px the gaps tighten and the phone number drops before anything wraps. */
@media (max-width:1240px){
  .sn-nav-list{gap:18px;}
  .sn-header-inner{gap:16px;}
  .sn-nav-list > li > a{font-size:.92rem;}
}
@media (max-width:1120px){
  .sn-header-phone{display:none;}
}

.sn-footer-distributor{display:block;font-style:normal;font-size:.875rem;line-height:1.4;
  margin-top:3px;color:var(--sn-on-dark-faint);}
.sn-cols-2{columns:2;column-gap:32px;}
@media (max-width:640px){.sn-cols-2{columns:1;}}

/* --- Page hero photography ------------------------------------------------ */
/* Hero photography is shown whole — no cropping. The frame is capped in width
   rather than height, so a 3:2 image sits at a sensible size without the
   browser trimming anything off it. */
.sn-page-hero img,.sn-industry-hero img{
  width:100%;height:auto;border-radius:var(--sn-radius);display:block;
}
.sn-page-hero,.sn-industry-hero{margin-block:0;max-width:920px;margin-inline:auto !important;}

/* --- Outage cost calculator ----------------------------------------------- */
.sn-calc{margin:0;}
.sn-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
@media (max-width:900px){.sn-calc-grid{grid-template-columns:1fr;}}

.sn-calc fieldset{
  border:1px solid var(--sn-line);border-radius:var(--sn-radius);
  padding:20px 22px 6px;margin:0 0 18px;background:var(--sn-paper);
}
.sn-calc legend{
  font-family:'Inter',sans-serif;font-size:.875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sn-brand);
  padding:0 8px;margin-left:-8px;
}
.sn-calc-opt{color:var(--sn-ink-faint);font-weight:400;}

.sn-calc label{display:block;margin:0 0 16px;font-size:.9rem;font-weight:600;color:var(--sn-ink);}
.sn-calc label span{display:block;font-weight:400;font-size:.8rem;color:var(--sn-ink-faint);margin-top:2px;}
.sn-calc input[type=number],.sn-calc input[type=text]{
  display:block;width:100%;margin-top:7px;padding:10px 12px;
  font:inherit;font-size:.95rem;font-weight:500;color:var(--sn-ink);
  background:#fff;border:1.5px solid var(--sn-line);border-radius:6px;
}
.sn-calc input:focus{outline:none;border-color:var(--sn-brand-mid);
  box-shadow:0 0 0 3px rgba(44,27,85,.12);}

.sn-calc-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.sn-calc-cur{font-size:.8rem;font-weight:600;color:var(--sn-ink-faint);
  display:flex;align-items:center;gap:8px;margin:0;}
.sn-calc-cur select{font:inherit;padding:6px 8px;border:1.5px solid var(--sn-line);
  border-radius:6px;background:#fff;}
.sn-btn--ghost{background:none;border:1.5px solid var(--sn-line);color:var(--sn-ink-soft);}
.sn-btn--ghost:hover{border-color:var(--sn-brand-mid);color:var(--sn-brand);}

/* results panel */
.sn-calc-out{
  position:sticky;top:104px;background:var(--sn-brand-deep);color:#fff;
  border-radius:var(--sn-radius);padding:28px 30px 30px;
}
@media (max-width:900px){.sn-calc-out{position:static;}}
.sn-calc-out .sn-eyebrow{color:var(--sn-on-dark-soft);margin:0 0 6px;}
.sn-calc-head{margin-bottom:18px;}
.sn-calc-head--alt{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);}
.sn-calc-big{
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;font-weight:700;line-height:1.05;
  font-size:clamp(2.1rem,4.4vw,2.9rem);margin:0;color:#fff;
}
.sn-calc-big--good{color:#4FD095;}
.sn-calc-sub{margin:4px 0 0;font-size:.85rem;color:var(--sn-on-dark-soft);}

.sn-calc-table{width:100%;border-collapse:collapse;margin:0;font-size:.9rem;}
.sn-calc-table th{
  text-align:left;font-weight:400;color:var(--sn-on-dark-soft);
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.sn-calc-table td{
  text-align:right;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);white-space:nowrap;
}
.sn-calc-table tr.is-total th,.sn-calc-table tr.is-total td{
  border-bottom:none;border-top:1.5px solid rgba(255,255,255,.28);
  padding-top:12px;color:#fff;font-weight:700;
}
.sn-calc-note{margin:18px 0 0;font-size:.82rem;line-height:1.5;color:var(--sn-on-dark-faint);}

/* --- Pipedrive web form ---------------------------------------------------
   The form is injected by Pipedrive's loader after the page paints, so the
   container reserves height to stop the layout jumping as it arrives. */
.pipedriveWebForms{min-height:560px;}
@media (max-width:900px){.pipedriveWebForms{min-height:640px;}}

/* --- Supplied image slots -------------------------------------------------
   Slots render only when an image has been filed against them, so an empty
   slot leaves no trace on the page. */
.sn-slot-card{margin:0 0 16px !important;}
.sn-slot-card img{width:100%;height:auto;border-radius:var(--sn-radius);display:block;}
.sn-card .sn-slot-card,.sn-product .sn-slot-card{margin:0 20px 14px !important;}

/* --- "Why Sentor" paired images -------------------------------------------
   The two rows carry different claims and need to read as a matched pair.
   Locking both to 3:2 stops one image towering over the other and leaving a
   void beside the heading opposite it. */
.sn-why-img{margin:0 !important;}
.sn-why-img img{
  width:100%;aspect-ratio:3/2;object-fit:contain;background:var(--sn-white);
  border-radius:var(--sn-radius);display:block;
}
.sn-section.wp-block-group > .sn-page-hero,
.sn-section.wp-block-group > .sn-industry-hero{max-width:860px;margin-inline:0 !important;}
.sn-page-hero .wp-block-image,.sn-industry-hero .wp-block-image{margin:0;}

/* ==========================================================================
   Type scale, applied last so it settles every component rule.
   Sizes only — no layout, spacing or colour change here.
   16px body · 19px lede/component headings · 14px labels · 13px supporting
   ========================================================================== */

/* --- 16px: body, cards, tables, forms, buttons, navigation ---------------- */
.sn-btn,.sn-btn--sm,
.wp-block-button__link,.wp-element-button,
.sn-download .wp-block-button__link,
.sn-field input,.sn-field select,.sn-field textarea,
.sn-calc input[type=number],.sn-calc input[type=text],
.wp-block-table table,.sn-calc-table,
.sn-node p,.sn-stat,.sn-form-status,
.sn-nav-list > li > a,.sn-nav-list .sub-menu a,
.sn-mobile-list a,.sn-mobile-list .sub-menu a{font-size:1rem;}

/* --- 19px: lede and component headings ----------------------------------- */
.sn-lede,.sn-stats strong,.sn-stat strong,
.sn-card h3,.sn-card h4,.sn-industry h3,.sn-industry h4,
.sn-node h3,.sn-node h4,.sn-product h3,.sn-download h3{font-size:1.1875rem;}

/* --- 14px: labels and metadata ------------------------------------------- */
.sn-eyebrow,.sn-sku,.sn-step,.sn-badges p,.sn-badge,
.wp-block-table th,.sn-calc-table th,
.sn-field label,.sn-calc label,.sn-calc legend,.sn-calc-cur,
.sn-stats p,.sn-float p,.sn-float .sn-float-head,
.sn-proof .sn-card p,.sn-breadcrumbs ol,
.sn-footer-col h2,.sn-footer-contact span,
.sn-header-phone{font-size:.875rem;}

/* --- 13px: small supporting text ----------------------------------------- */
.sn-small,.sn-form-note,.sn-calc-note,.sn-calc-sub,
.sn-calc label span,.sn-calc-opt,
.sn-footer-brand p,.sn-footer-base p,.sn-footer-legal a,
.sn-footer-distributor{font-size:.8125rem;}

/* --- Display figures track the H2 rung ----------------------------------- */
.sn-calc-big,.sn-proof .sn-card h3{font-size:clamp(1.75rem,3.4vw,2.625rem);}

/* --- Typeface, re-asserted over later component rules -------------------- */
.sn-calc legend,.sn-calc-opt,.sn-calc label,.sn-calc-table,
.sn-calc input,.sn-calc select,
.sn-footer-col h2,.sn-footer-contact span,
.sn-float p strong,.sn-sku,.sn-step,.sn-badges p,.sn-badge,
.wp-block-table th,.wp-block-table td:first-child,
.sn-btn,.sn-btn--sm,.wp-block-button__link,.wp-element-button{
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
}
.sn-calc-big,.sn-stats strong,.sn-proof .sn-card h3{
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;
}

/* --- Weights ------------------------------------------------------------- */
.sn-eyebrow,.sn-sku,.sn-step,.wp-block-table th,
.sn-calc-table th,.sn-field label,.sn-calc label,.sn-calc legend,
.sn-footer-col h2{font-weight:500;}
.sn-btn,.sn-btn--sm,.wp-block-button__link,.wp-element-button{font-weight:600;}
.sn-calc-big,.sn-stats strong,.sn-stat strong{font-weight:700;}

/* Card lists share the card body size. */
.sn-card ul,.sn-card ol,.sn-card li,
.sn-industry ul,.sn-industry li,
.sn-product ul,.sn-product li{font-size:1rem;}

/* ==========================================================================
   Mobile navigation — scrolling and reach
   The panel sits inside a sticky header, so without a height bound it simply
   grows past the bottom of the screen and the items below (including the
   quote button) cannot be reached. Bounding it to the viewport and scrolling
   inside fixes that. dvh tracks the browser's own chrome on iOS and Android;
   vh is the fallback for older engines.
   ========================================================================== */
.sn-mobile-nav.is-open{
  display:flex;
  max-height:calc(100vh - var(--sn-header-h, 76px));
  max-height:calc(100dvh - var(--sn-header-h, 76px));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
}
/* The quote button stays put at the foot of the panel so it is reachable
   without scrolling to the very end on a long menu. */
.sn-mobile-nav.is-open > .sn-btn{
  position:sticky;bottom:0;margin-top:4px;
  box-shadow:0 -10px 16px -8px rgba(23,26,33,.18);
}
/* Nested lists stay within the panel. */
.sn-mobile-list .sub-menu{max-width:100%;}
.sn-mobile-list a{display:block;padding-block:2px;}

/* --------------------------------------------------------------------------
   Wide tables scroll inside their own frame rather than pushing the page
   sideways. Needed after the label size increase widened the header cells.
   -------------------------------------------------------------------------- */
.wp-block-table{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;}
.wp-block-table > table{min-width:0;}
.wp-block-group,.wp-block-column,.sn-section{min-width:0;}
@media(max-width:700px){
  .wp-block-table > table{min-width:34rem;}
}

/* Submenu disclosure. The parent link keeps its own tap target for navigating;
   the button beside it only opens the submenu. */
.sn-mobile-list .sn-has-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.sn-mobile-list .sn-has-sub > a{flex:1 1 auto;}
.sn-sub-toggle{
  flex:0 0 auto;width:40px;height:40px;margin:-8px 0;
  background:none;border:0;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.sn-sub-toggle::before{
  content:"";width:9px;height:9px;
  border-right:2px solid var(--sn-ink-faint);border-bottom:2px solid var(--sn-ink-faint);
  transform:translateY(-2px) rotate(45deg);transition:transform .18s ease;
}
.sn-sub-toggle[aria-expanded="true"]::before{transform:translateY(2px) rotate(225deg);}
.sn-mobile-list .sn-has-sub > .sub-menu{flex:1 0 100%;}
.sn-mobile-list .sub-menu[hidden]{display:none;}

/* The page behind the open menu is held still so a swipe moves the menu.
   The panel keeps its own overflow, so it still scrolls independently. */
body.sn-nav-locked{overflow:hidden;}

/* ==========================================================================
   Reading measure
   Line length is capped rather than font sizes reduced. Past roughly 90
   characters the eye loses its place returning to the next line; centred text
   sits slightly narrower again, being harder to track.
   ========================================================================== */
.sn-section > p,
.sn-section > .wp-block-paragraph,
.sn-section > ul,
.sn-section > ol{max-width:70ch;}

.sn-section > .sn-center,
.sn-cta p,
.sn-proof p{max-width:62ch;}

/* Eyebrows are short labels and headings have their own balancing — neither
   should be constrained by the body measure. */
.sn-section > .sn-eyebrow,
.sn-section > h1,.sn-section > h2,.sn-section > h3{max-width:none;}

/* Small notes carry caveats and qualifications, so they are set one step up
   from the minimum and given their own measure. */
.sn-small,
.sn-section > p.sn-small{font-size:.875rem;max-width:80ch;}

/* Footer legal and credits stay at the smallest size; they are peripheral. */
.sn-footer-base p,.sn-footer-legal a,.sn-footer-brand p,
.sn-footer-distributor{font-size:.8125rem;}

/* --- Related companies -----------------------------------------------------
   A quiet corporate row above the legal line. Deliberately understated so it
   reads as an association, not as a technical claim. */
.sn-footer-related{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;
  padding-top:26px;margin-top:8px;border-top:1px solid rgba(255,255,255,.1);
}
.sn-footer-related > span{
  font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sn-on-dark-faint);
}
.sn-footer-related ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;
}
.sn-footer-related a{
  font-size:.8125rem;color:var(--sn-on-dark-soft);text-decoration:none;
}
.sn-footer-related a:hover{color:#fff;text-decoration:underline;}

/* Scenario tables read as label/value pairs, so the first column is styled as
   the label and there is no header row. */
.sn-flow-table td:first-child{
  font-weight:600;color:var(--sn-ink);width:24%;white-space:normal;
}
@media(max-width:700px){.sn-flow-table td:first-child{width:34%;}}