/* ===========================================================================
   m2register.com — M2 brand, "orange front door" edition
   Rebranded 2026-09-30 on the client's brief: M2 orange as the primary
   colour, the M2 logo clearly shown, M2's own artwork. The M2 sites share the
   brand, never a layout. This one is the most orange of the seven: a solid
   M2-orange header, heroes that are built the way M2's own banners are (live
   copy on the left, M2 artwork bleeding in from the right), light warm pages,
   6px corners, an orange closing band and a black footer with white icons.

   Contrast. White on the hero veil (#C84400 and darker) is 4.9:1 or better;
   white on --o-cta #D24100 is 4.67:1, so no gradient behind white text runs
   lighter than --o-cta (header, dock, closing band, phone hero); --o-text #B8420A on white is 5.5:1.
   #FF6A00 itself never carries text. A modifier like .sl-sec--deep has the
   same specificity as .sl-sec, so overrides are written doubled.
   =========================================================================== */

:root{
  --o:#FF6A00;
  --o-2:#FF8A3D;
  --o-cta:#D24100;
  --o-cta-h:#B33A0D;
  --o-text:#B8420A;
  --o-deep:#C84400;

  --page:#FAF7F4;
  --card:#FFFFFF;
  --peach:#FFF1E6;
  --line:#EEE3DA;
  --line-2:#E3D2C4;
  --ink:#1C1410;
  --ink-2:#4A3C33;
  --ink-3:#6D5E54;

  --night:#17110E;
  --night-text:#D8CCC2;
  --night-mute:#A89C92;

  --v-max:1140px;
  --v-col:760px;
  --r:6px;
  --pop:0 2px 6px rgba(60,24,6,.06), 0 12px 32px rgba(60,24,6,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:Sora,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.8;-webkit-font-smoothing:antialiased;
  padding-bottom:72px; /* clears the sticky dock */
}
img{max-width:100%;height:auto}
a{color:var(--o-text);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.4px;margin:0}

.sl-wrap{width:100%;max-width:var(--v-max);margin:0 auto;padding:0 22px}
.sl-col{width:100%;max-width:var(--v-col);margin:0 auto;padding:0 22px}
.sl-skip{position:absolute;left:-9999px}
.sl-skip:focus{left:14px;top:14px;z-index:500;background:#fff;color:var(--o-text);padding:10px 18px;border-radius:6px}

.sl-cell__i,.sl-game__i,.sl-pay span{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* ---------------- buttons ---------------- */
.sl-btn{
  display:inline-block;padding:12px 24px;border-radius:var(--r);font-weight:800;font-size:15px;
  line-height:1.3;text-align:center;border:2px solid transparent;transition:.16s ease;
}
.sl-btn:hover{text-decoration:none}
.sl-btn--go{background:var(--o-cta);color:#fff;border-color:var(--o-cta)}
.sl-btn--go:hover{background:var(--o-cta-h);border-color:var(--o-cta-h)}
.sl-btn--edge{background:transparent;color:var(--o-text);border-color:var(--line-2)}
.sl-btn--edge:hover{border-color:var(--o-cta);color:var(--o-cta)}
.sl-btn--lg{padding:15px 32px;font-size:16.5px}
/* on orange the roles invert: white is the loud button */
.sl-hero .sl-btn--go,.sl-bar .sl-btn--go,.sl-close .sl-btn--go,.sl-dock .sl-btn--go{background:#fff;color:var(--o-text);border-color:#fff}
.sl-hero .sl-btn--go:hover,.sl-bar .sl-btn--go:hover,.sl-close .sl-btn--go:hover,.sl-dock .sl-btn--go:hover{background:var(--peach);border-color:var(--peach)}
.sl-hero .sl-btn--edge,.sl-close .sl-btn--edge{color:#fff;border-color:rgba(255,255,255,.75)}
.sl-hero .sl-btn--edge:hover,.sl-close .sl-btn--edge:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}

/* ---------------- header - solid M2 orange ---------------- */
.sl-bar{position:sticky;top:0;z-index:200;background:linear-gradient(90deg,var(--o-deep),var(--o-cta));
  box-shadow:0 3px 14px rgba(120,40,0,.25)}
.sl-bar__in{display:flex;align-items:center;gap:24px;min-height:66px}
.sl-mark{display:flex;align-items:center;gap:10px}
.sl-mark:hover{text-decoration:none}
/* the logo is orange and white, so on the orange bar it sits on a white plate */
.sl-mark__plate{display:inline-flex;align-items:center;background:#fff;border-radius:9px;padding:5px 9px;
  box-shadow:0 2px 8px rgba(90,30,0,.25)}
.sl-mark__plate img{height:30px;width:auto;display:block}
.sl-mark__reel{display:none}
.sl-mark__name{font-weight:800;font-size:19px;color:#fff;letter-spacing:-.5px}
.sl-nav{display:flex;gap:24px;margin-left:auto}
.sl-nav a{color:#fff;font-size:14.5px;font-weight:700;opacity:.92}
.sl-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.sl-bar__cta{padding:10px 20px;font-size:14.5px}
.sl-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;
  margin-left:auto;background:transparent;border:1.5px solid rgba(255,255,255,.7);border-radius:var(--r);cursor:pointer;padding:0 10px}
.sl-burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:.2s}
body.sl-open .sl-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.sl-open .sl-burger span:nth-child(2){opacity:0}
body.sl-open .sl-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- hero - copy left, M2 artwork bleeding in from the right ---------------- */
.sl-hero{position:relative;isolation:isolate;overflow:hidden;padding:72px 0 66px;color:#fff;
  background:linear-gradient(115deg,#B83C00 0%,var(--o-cta) 46%,var(--o) 100%)}
.sl-hero__pic{position:absolute;top:0;right:0;bottom:0;width:60%;height:100%;object-fit:cover;
  object-position:40% 50%;z-index:-2}
.sl-hero__veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,#B83C00 0%,var(--o-deep) 44%,rgba(200,68,0,.93) 54%,rgba(200,68,0,0) 78%),
  linear-gradient(0deg,rgba(150,45,0,.35),transparent 30%)}
.sl-hero .sl-wrap{position:relative;z-index:1}
/* the copy is left-aligned beside the art, so its buttons follow it rather than centring */
.sl-hero .sl-mid{text-align:left;margin-top:26px!important;max-width:640px}
.sl-over{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:2.2px;
  text-transform:uppercase;color:#fff}
.sl-over::before{content:"";display:inline-block;width:26px;height:3px;background:#fff;border-radius:2px;
  vertical-align:middle;margin:-2px 10px 0 0}
.sl-hero h1{font-size:clamp(30px,4.4vw,50px);font-weight:800;letter-spacing:-1.4px;color:#fff;
  margin-bottom:20px;max-width:min(640px,100%)}
.sl-lede,.sl-hero__sub{margin:0 0 30px;max-width:600px;font-size:17.5px;color:#fff}
.sl-hero .sl-lede strong,.sl-hero .sl-hero__sub strong{color:#fff}
.sl-hero__btns{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:46px}
.sl-hero a:not(.sl-btn){color:#fff;text-decoration:underline}

.sl-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:0;padding:0;max-width:760px}
.sl-facts li{background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:0 8px 24px rgba(90,30,0,.22)}
.sl-facts b{display:block;font-size:28px;font-weight:800;color:var(--o-text);line-height:1.1;letter-spacing:-1px}
.sl-facts span{display:block;margin-top:4px;font-size:13px;color:var(--ink-2);line-height:1.45}

/* ---------------- sections ---------------- */
.sl-sec{padding:70px 0;border-bottom:1px solid var(--line)}
/* .sl-sec--deep is ONE class - doubled so it beats .sl-sec on specificity */
.sl-sec.sl-sec--deep{background:var(--card)}
.sl-tag{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--o-text)}
.sl-sec h2{font-size:clamp(25px,3.3vw,35px);font-weight:800;margin-bottom:18px;color:var(--ink)}
.sl-sec h3{font-size:18px;font-weight:700;margin:0 0 9px;color:var(--ink)}
.sl-sec p{margin:0 0 17px;color:var(--ink-2)}
.sl-sec .sl-lede{max-width:720px;font-size:17px;color:var(--ink-2);margin-bottom:34px!important}
.sl-mid{text-align:center;margin:34px 0 0!important}
.sl-fine{margin:22px 0 0!important;font-size:13.5px;color:var(--ink-3)}
.sl-col h3{margin-top:30px}
.sl-col h2+p,.sl-col h3+p{margin-top:0}

/* M2 artwork in a section */
.sl-art{display:block;margin:6px 0 26px;border-radius:var(--r);overflow:hidden;line-height:0;box-shadow:var(--pop)}
.sl-art img{width:100%;height:auto;display:block}
a.sl-art{transition:transform .18s ease}
a.sl-art:hover{transform:translateY(-2px)}

/* ---------------- grids ---------------- */
.sl-grid{display:grid;gap:18px}
.sl-grid--3{grid-template-columns:repeat(3,1fr)}
.sl-grid--4{grid-template-columns:repeat(4,1fr)}

.sl-cell{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.sl-cell:hover{border-color:var(--o);transform:translateY(-3px);box-shadow:var(--pop)}
.sl-cell--mini{padding:20px}
.sl-cell__i{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  font-size:1.4rem;background:var(--peach);border:1px solid #F6D3BC;border-radius:var(--r);margin-bottom:15px}
.sl-cell p{font-size:14.5px;margin-bottom:0;line-height:1.68}

/* studio tiles - M2's portrait art, the name band over the foot of the tile */
/* doubled: .sl-sec h3 (class+element) outweighs a single class */
.sl-studios__h.sl-studios__h{margin-top:34px}
.sl-studios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
.sl-studio{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);
  box-shadow:var(--pop)}
.sl-studio img{width:100%;height:auto;aspect-ratio:351/453;object-fit:cover;display:block}
.sl-studio figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;
  background:linear-gradient(180deg,transparent,rgba(23,17,14,.92) 58%);
  font-size:12.5px;font-weight:700;color:#fff;text-align:center}
.sl-studio figcaption em{display:block;margin-top:2px;font-style:normal;font-size:11px;
  font-weight:700;color:var(--o-2);text-transform:uppercase;letter-spacing:.07em}
@media(max-width:860px){.sl-studios{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.sl-studios{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.sl-game{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--o);border-radius:var(--r);
  padding:24px 22px;transition:border-color .16s ease,transform .16s ease}
.sl-game:hover{border-color:var(--o);transform:translateY(-3px)}
.sl-game__i{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  font-size:1.5rem;background:var(--peach);border:1px solid #F6D3BC;border-radius:var(--r);margin-bottom:15px}
.sl-game p{font-size:14.5px;margin-bottom:0;line-height:1.68}

.sl-pay{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--o);border-radius:var(--r);padding:19px 22px}
.sl-pay span{font-size:1.4rem;margin-bottom:8px}
.sl-pay b{font-size:15.5px;font-weight:800;margin-bottom:2px}
.sl-pay i{font-style:normal;font-size:13px;color:var(--ink-3);line-height:1.5}

/* payment marks under the method list - white chips, name beside the mark */
.sl-paylogos{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;list-style:none;padding:0}
.sl-paylogos li{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:7px 14px 7px 8px;font-size:14px;font-weight:700;color:var(--ink);box-shadow:0 1px 3px rgba(60,24,6,.05)}
.sl-paylogos img,.sl-paylogos svg{height:28px;width:auto;max-width:56px;object-fit:contain;display:block}

/* ---------------- rows ---------------- */
.sl-rows{margin:0 0 22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sl-rows>div{display:flex;flex-direction:column;gap:2px;padding:15px 20px;
  border-bottom:1px solid var(--line);background:var(--card)}
.sl-rows>div:last-child{border-bottom:0}
.sl-rows b{font-size:15px;color:var(--ink)}
.sl-rows span{font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* ---------------- steps ---------------- */
.sl-steps{counter-reset:s;list-style:none;margin:0 0 22px;padding:0}
.sl-steps li{counter-increment:s;position:relative;padding:0 0 13px 42px;
  font-size:15.5px;color:var(--ink-2);line-height:1.7}
.sl-steps li:last-child{padding-bottom:0}
.sl-steps li::before{content:counter(s);position:absolute;left:0;top:4px;width:27px;height:27px;
  background:var(--o-cta);color:#fff;border-radius:var(--r);font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center}

/* ---------------- ticks ---------------- */
.sl-ticks{list-style:none;margin:0 0 20px;padding:0}
.sl-ticks li{position:relative;padding-left:26px;margin-bottom:11px;font-size:15.5px;
  color:var(--ink-2);line-height:1.7}
.sl-ticks li::before{content:"▸";position:absolute;left:0;top:0;color:var(--o);font-weight:800}

/* ---------------- notes ---------------- */
.sl-note{background:var(--peach);border:1px solid #F6D3BC;
  border-left:4px solid var(--o);border-radius:var(--r);padding:19px 22px;margin:0 0 20px}
.sl-note p{margin:0;font-size:15.5px;color:var(--ink)}
.sl-note--warn{background:#FFF8E8;border-color:#F3DFAE;border-left-color:#E0A100}

/* ---------------- faq ---------------- */
.sl-faqcat{margin:34px 0 14px!important;font-size:12px!important;font-weight:800!important;
  letter-spacing:1.9px;text-transform:uppercase;color:var(--o-text)!important;
  padding-bottom:9px;border-bottom:2px solid var(--o)}
.sl-qa h4{font-size:16.5px;font-weight:700;margin:20px 0 6px;color:var(--ink)}
.sl-qa h4:first-child{margin-top:0}
.sl-qa p{font-size:15.5px;margin-bottom:0}

/* ---------------- close - the orange band ---------------- */
.sl-close{padding:74px 0;text-align:center;color:#fff;
  background:radial-gradient(620px 300px at 50% 0%,rgba(255,255,255,.14),transparent 66%),
             linear-gradient(115deg,#B83C00,var(--o-deep) 55%,var(--o-cta))}
.sl-close h2{font-size:clamp(25px,3.3vw,34px);font-weight:800;margin-bottom:14px;color:#fff}
.sl-close p{margin:0 auto 26px;max-width:580px;color:#fff}

/* ---------------- footer ---------------- */
.sl-foot{background:var(--night);color:var(--night-mute);padding:50px 0 26px;font-size:14.5px}
.sl-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}
.sl-foot h3{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--o-2)}
.sl-foot ul{list-style:none;margin:0;padding:0}
.sl-foot li{margin-bottom:8px}
.sl-foot a{color:var(--night-text)}
.sl-foot a:hover{color:#fff}
.sl-foot p{margin:12px 0 0;font-size:13.5px;line-height:1.7}
.sl-foot__logo{height:44px;width:auto;display:block}
.sl-mark__name--foot{color:#fff;font-size:18px}
.sl-foot__legal{margin-top:36px;padding-top:22px;border-top:1px solid #33271F}
.sl-foot__legal p{margin:0 0 9px;font-size:13.5px}
.sl-foot__legal b{color:var(--o-2)}
.sl-foot__mini{font-size:12.5px!important}

/* social row - white discs with the network's own colour, via internal /to/ redirects */
.sl-social{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:18px 0 0!important;padding:0}
.sl-social li{margin:0!important}
.sl-social a{display:block;width:36px;height:36px;border-radius:50%;transition:transform .15s ease}
.sl-social a:hover{transform:scale(1.08)}
.sl-social svg{width:36px;height:36px;display:block}
.sl-social--lg{margin:22px 0 8px!important}
.sl-social--lg a,.sl-social--lg svg{width:46px;height:46px}
.sl-social--lg a{box-shadow:0 2px 10px rgba(60,24,6,.14)}

/* ---------------- sticky dock ---------------- */
.sl-dock{position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:linear-gradient(90deg,var(--o-deep),var(--o-cta));box-shadow:0 -4px 18px rgba(90,30,0,.25)}
.sl-dock__in{max-width:var(--v-max);margin:0 auto;padding:11px 22px;
  display:flex;align-items:center;justify-content:center;gap:18px}
.sl-dock__txt{font-size:15px;font-weight:700;color:#fff}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .sl-grid--4{grid-template-columns:repeat(2,1fr)}
  .sl-facts{grid-template-columns:repeat(2,1fr)}
  .sl-nav{
    position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0;
    background:#fff;border-bottom:3px solid var(--o);padding:8px 22px 16px;box-shadow:var(--pop);
  }
  .sl-nav a{color:var(--ink);opacity:1}
  body.sl-open .sl-nav{display:flex}
  .sl-nav a{padding:12px 0;font-size:15.5px}
  .sl-burger{display:flex}
  .sl-bar__in{position:relative;gap:12px}
  .sl-bar__cta{margin-left:0}
}
@media (max-width:820px){
  .sl-grid--3{grid-template-columns:repeat(2,1fr)}
  .sl-foot__grid{grid-template-columns:repeat(2,1fr);gap:28px}
  /* the artwork becomes a strip across the top of the hero; the copy sits on solid orange */
  /* white copy on a phone sits on the darker half of the orange only (4.67:1 or better) */
  .sl-hero{padding-top:0;background:linear-gradient(180deg,var(--o-cta),#B83C00)}
  .sl-hero__pic{position:relative;display:block;width:100%;height:210px;object-position:55% 40%;
    margin-bottom:34px;z-index:0}
  .sl-hero__veil{display:none}
}
@media (max-width:560px){
  body{font-size:16px;padding-bottom:66px}
  .sl-sec{padding:50px 0}
  .sl-hero{padding-bottom:46px}
  .sl-grid--3,.sl-grid--4,.sl-facts{grid-template-columns:1fr}
  .sl-hero__btns .sl-btn{width:100%}
  .sl-btn{white-space:normal}
  .sl-foot__grid{grid-template-columns:1fr}
  .sl-dock__txt{display:none}
  .sl-dock .sl-btn{width:100%}
  .sl-mark__plate img{height:26px}
  .sl-mark__name{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sl-btn,.sl-cell,.sl-game,.sl-burger span,a.sl-art,.sl-social a{transition:none}
  .sl-cell:hover,.sl-game:hover,a.sl-art:hover,.sl-social a:hover{transform:none}
}

/* data table */
.sl-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px}
.sl-table{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:480px}
.sl-table thead th{background:var(--o-deep);color:#fff;font-weight:800;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;text-align:left;white-space:nowrap}
.sl-table td{padding:13px 16px;text-align:left;vertical-align:top;font-size:15px;
  color:var(--ink-2);border-bottom:1px solid var(--line)}
.sl-table tbody tr:last-child td{border-bottom:0}
.sl-table tbody tr:nth-child(even) td{background:#FFFAF6}
.sl-table td:first-child{color:var(--ink);font-weight:700;white-space:nowrap}
.sl-table td:nth-child(2){font-variant-numeric:tabular-nums;color:var(--o-text);font-weight:800}
.sl-caveat{font-size:14.5px;color:var(--ink-2);border-left:3px solid var(--o);
  padding:2px 0 2px 16px;margin:0 0 6px}
.sl-rtp{margin:8px 0 0 !important;font-size:12.5px;font-weight:700;letter-spacing:.03em;
  color:var(--o-text)}
.sl-studiolist{font-size:14.5px;line-height:1.9;color:var(--ink-2);margin:0 0 14px}
.sl-studiolist b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--o-text);margin-bottom:5px}

/* ---- sub-page furniture --------------------------------------------------
   .sl-hero--sub doubled: a lone modifier ties with .sl-hero on specificity. */
.sl-hero.sl-hero--sub{padding:40px 0 38px}
.sl-hero.sl-hero--sub h1{font-size:clamp(26px,3.4vw,40px)}
.sl-hero.sl-hero--sub .sl-hero__btns{margin-bottom:0}
.sl-crumb{margin:0 0 12px;font-size:13.5px;color:#fff}
.sl-crumb a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sl-crumb span[aria-current]{color:#fff;opacity:.9}
@media (max-width:820px){.sl-hero.sl-hero--sub{padding-top:0}.sl-hero.sl-hero--sub:not(:has(.sl-hero__pic)){padding-top:34px}}

/* provider tile grid */
.sl-studiogrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 18px}
.sl-studiogrid img{width:100%;height:auto;aspect-ratio:351/453;object-fit:cover;display:block;
  border-radius:var(--r);box-shadow:var(--pop);transition:transform .16s ease}
.sl-studiogrid img:hover{transform:translateY(-3px)}
@media(max-width:860px){.sl-studiogrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.sl-studiogrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}}

/* inline links in running copy - underline is the non-colour cue */
.sl-ilink{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;font-weight:700;text-decoration-color:var(--o)}
.sl-ilink:hover,.sl-ilink:focus-visible{text-decoration-thickness:2px}

/* ---- client feedback round 2 (2026-09-30): agent, blog, promotions --------
   Light cards, 6px corners, the orange rule and --o-deep table heads of the
   rest of the sheet: --o-text on white 5.5:1, white on --o-cta 4.67:1. */
.sl-hero .sl-postmeta{margin:0 0 18px;font-size:14px;font-weight:700;color:#fff;letter-spacing:.02em}
@media (min-width:821px){.sl-hero__pic.sl-hero__pic--narrow{width:44%}}
/* text tables: the base .sl-table styles column 2 as a figure - not here */
.sl-table.sl-table--text td:first-child{white-space:normal}
.sl-table.sl-table--text td:nth-child(2){color:var(--ink-2);font-weight:400;font-variant-numeric:normal}
.sl-col .sl-rows,.sl-col .sl-tablewrap{margin-top:6px}

/* promotions - the client's campaign banners */
.sl-promos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:8px 0 30px}
.sl-promo{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.sl-promo:hover{border-color:var(--o);transform:translateY(-3px);box-shadow:var(--pop)}
.sl-promo__art{display:block;line-height:0;border-bottom:4px solid var(--o)}
.sl-promo__art img{width:100%;height:auto;display:block}
.sl-promo__body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:18px 20px 22px}
.sl-sec .sl-promo h3{font-size:18.5px;margin:0 0 4px}
.sl-sec .sl-promo__meta{margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--ink-3)}
.sl-sec .sl-promo__body p:not(.sl-promo__meta):not(.sl-promo__tag){font-size:15px;margin:0 0 18px}
.sl-promo .sl-btn{margin-top:auto}
.sl-sec .sl-promo__tag{display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:4px;font-size:11px;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;background:var(--o-cta);color:#fff}
.sl-sec .sl-promo__tag--new{background:var(--peach);color:var(--o-text);box-shadow:inset 0 0 0 1px #F6D3BC}
.sl-sec .sl-promo__tag--on{background:var(--night);color:#fff}
.sl-promo.is-ended{opacity:.6}
.sl-promo.is-ended .sl-btn{display:none}
.sl-sec .sl-promo.is-ended .sl-promo__tag{background:var(--ink-3);color:#fff;box-shadow:none}
.sl-sec .sl-promos+h3{margin:36px 0 8px}

/* blog cards */
.sl-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px}
.sl-posts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sl-post{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .16s ease,box-shadow .16s ease}
.sl-post:hover{border-color:var(--o);box-shadow:var(--pop)}
.sl-post__art{display:block;line-height:0;background:var(--o-cta)}
.sl-post__art img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block}
.sl-post__body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:16px 18px 20px}
.sl-sec .sl-post h3{font-size:17px;line-height:1.4;margin:0 0 9px}
.sl-sec .sl-post h3 a{color:var(--ink)}
.sl-sec .sl-post h3 a:hover{color:var(--o-text)}
.sl-sec .sl-post__meta{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o-text)}
.sl-sec .sl-post p{font-size:14.5px;margin:0 0 14px}
.sl-post .sl-ilink{margin-top:auto;font-size:14.5px}
@media (max-width:820px){.sl-promos,.sl-posts,.sl-posts--2{grid-template-columns:1fr}}

@media (max-width:374px){.sl-social--lg a,.sl-social--lg svg{width:42px;height:42px}}

.sl-nav .sl-lang{padding:3px 9px;border:1.5px solid rgba(255,255,255,.7);border-radius:var(--r)}
.sl-lang__l{display:none}
@media (max-width:1000px){.sl-nav .sl-lang{border:0;border-radius:0;padding:12px 0}.sl-lang__s{display:none}.sl-lang__l{display:inline}}