/* Sysprola v3: shared layer for the pages rebuilt from the v3 prototype.

   The page markup is extracted from the prototype and carries its own inline
   styles, so this file only holds what inline styles cannot express: hover
   states, the header's two states, and the values the prototype switches in
   JavaScript at its 390px mobile frame. Rules that must beat an inline style
   use !important. */

/* base: the prototype's own global stylesheet, verbatim */
html,body{margin:0;padding:0;background:#EDEAE3;font-family:Manrope,system-ui,sans-serif;color:#2A2A30;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#F94E00;text-decoration:none}
a:hover{color:#16161A;text-decoration:underline}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}

/* Prototype controls that navigate were <button>s; here they are links, so
   they take the browser's button defaults back. Their inline styles still
   override any of this, exactly as they did on the button. */
a.v3-btn{display:inline-flex;align-items:center;justify-content:center;font-size:13.3333px;font-weight:400;line-height:normal;color:#000;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;text-align:center;margin:0;padding:1px 6px;border:2px outset #767676;background-color:#EFEFEF;cursor:pointer}
a.v3-btn:hover{color:#000;text-decoration:none}
/* a button that sets its own display lays its children out with flex/grid
   defaults; only a plain button centres its label */
a.v3-btn[style*="display:"]{align-items:normal;justify-content:normal}
/* the shared header, drawer and mega-menu links were never underlined */
.v3-hdr-link:hover,.sysmega-col a:hover,[data-drawer] a:hover,[data-nav] a:hover{text-decoration:none}

/* hover states, copied from the prototype's generated stylesheet */
.scp0:hover{background:#F4F2ED!important}
.scp1:hover{background:#F4F2ED!important;text-decoration:none!important;color:#16161A!important}
.scp2:hover{background:#F94E00!important}
.scp3:hover{background:#FFF4EC!important}
.scp5:hover{color:#16161A!important}
.scp6:hover{background:rgba(255,255,255,.16)!important}
.scp7:hover{transform:translateY(-4px)!important;box-shadow:rgba(22,22,26,.08) 0 14px 30px!important}
.scp8:hover{background:#FAF9F6!important;border-color:#D3CEC4!important;transform:translateY(-4px)!important;box-shadow:rgba(22,22,26,.08) 0 14px 30px!important}
.scp9:hover{background:#16161A!important;color:#fff!important;border-color:#16161A!important}
.scpa:hover{transform:translateY(-4px)!important;box-shadow:rgba(22,22,26,.08) 0 14px 30px!important;border-color:#D3CEC4!important}
.scpb:hover{background:#FAF9F6!important}
.scpc:hover{text-decoration-color:#FF6A00!important}
.scpd:hover{transform:translateY(-4px)!important;box-shadow:rgba(22,22,26,.18) 0 18px 40px!important}
.scpe:hover{border-color:#D3CEC4!important;transform:translateY(-4px)!important;box-shadow:rgba(22,22,26,.08) 0 14px 30px!important}
.scpf:hover{transform:translateY(-3px)!important;box-shadow:rgba(22,22,26,.07) 0 10px 24px!important}
.scpg:hover{opacity:.75!important}
.scph:hover{background:rgba(255,255,255,.1)!important}
.scpi:hover{background:#10693A!important;color:#fff!important;text-decoration:none!important}
.scpj:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;text-decoration:none!important}
.scpk:hover{color:#FF8A3D!important}
.scpl:hover{border-color:#FF6A00!important;color:#fff!important;background:rgba(255,106,0,.15)!important;text-decoration:none!important}
.scpm:hover{color:#fff!important}
.scp7,.scp8,.scpa,.scpd,.scpe,.scpf{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}

/* header: MOTION-SPEC 5-7 */
[data-nav]{transition:background .2s,color .2s,border-color .2s}
.v3-logo-w{display:none!important}
[data-nav].is-over{background:rgba(22,22,26,.35)!important;border-bottom-color:rgba(255,255,255,.18)!important}
[data-nav].is-over .v3-logo-d{display:none!important}
[data-nav].is-over .v3-logo-w{display:block!important}
[data-nav].is-over .v3-hdr-link{color:#fff!important}
[data-nav].is-over .v3-hdr-link.scp4:hover,[data-nav].is-over .v3-hdr-link[aria-expanded="true"]{background:rgba(255,255,255,.16)!important}
[data-nav].is-over .sysburger{background:transparent!important;border-color:rgba(255,255,255,.18)!important}
[data-nav].is-over .sysburger rect{fill:#fff}
.v3-hdr-link:hover{background:#F4F2ED}
@media (max-width:760px){
  .sysburger{display:flex!important}
  [data-desk]{display:none!important}
  .sysmega{display:none!important}
}
@media (min-width:761px){
  .sysburger{display:none!important}
  [data-drawer],[data-drawer-overlay]{display:none!important}
}
.sysmega-col a:hover{color:#FF6A00}
html.sys-locked,html.sys-locked body{overflow:hidden}


/* values the prototype swaps in JS for its 390px frame */
@media (max-width:760px){
  .v3-cols{grid-template-columns:minmax(0,1fr)!important}
  .v3-heropad{padding:32px 20px 32px!important}
  .v3-heropad2{padding:56px 20px 48px!important}
  .v3-heromin{min-height:0!important}
  .v3-span2{grid-column:1/-1!important}
  .v3-footpad{padding-bottom:18px!important}
}

/* mobile: the prototype swaps the floating WhatsApp pill for a sticky CTA bar */
.v3-sticky{display:none!important}
@media (max-width:760px){
  .v3-sticky{display:flex!important;position:fixed;left:0;right:0;bottom:0}
  body.has-v3-sticky{padding-bottom:65px}
  [data-v3-pill]{display:none!important}
}

/* reduced motion: nothing hidden, nothing moving */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* blog post body: the article HTML comes from the CMS, so it is styled here */
.article-prose{font-size:17px;line-height:1.7;color:#2A2A30}
.article-prose h2{font-family:Sora,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#16161A;font-size:clamp(22px,3cqw,30px);margin:40px 0 12px;scroll-margin-top:96px}
.article-prose h3{font-family:Sora,sans-serif;font-weight:600;color:#16161A;font-size:20px;margin:28px 0 8px;scroll-margin-top:96px}
.article-prose p{margin:0 0 16px}
.article-prose ul,.article-prose ol{margin:0 0 18px;padding-left:22px}
.article-prose li{margin:6px 0}
.article-prose a{color:#F94E00;text-decoration:underline;text-underline-offset:2px}
.article-prose a:hover{color:#16161A}
.article-prose img{border-radius:8px;border:1px solid #E7E3DC;height:auto}
.article-prose blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid #FF6A00;background:#FAF9F6;font-family:Sora,sans-serif;font-size:19px;color:#16161A}
.article-prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.article-prose th,.article-prose td{border:1px solid #E7E3DC;padding:8px 10px;text-align:left}
.article-prose th{background:#FAF9F6;color:#16161A}
.article-prose .related-guides,.article-prose .post-cta{margin-top:32px;padding:18px 20px;border:1px solid #E7E3DC;border-radius:8px;background:#FAF9F6}
.article-prose .related-guides h2,.article-prose .post-cta h2{font-size:18px;margin:0 0 8px}
#artTitle{font-family:Sora,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.12;color:#fff;font-size:clamp(28px,4.4cqw,48px);margin:0;max-width:22ch;text-wrap:balance}