:root{color-scheme:dark;--sf00:#0A0C0F;--sf01:rgba(99,200,236,0.28);--sf02:#63C8EC;--sf03:#9BDDF4;--sf04:#E6EBF2;--sf05:#4C5866;--sf06:rgba(255,255,255,0.025);--sf07:#F0A08C;--sf08:rgba(255, 255, 255, 0.08);--sf09:rgba(27, 141, 217, 0.2);--sf10:rgb(159, 173, 188);--sf11:rgb(27, 141, 217);--sf12:rgb(255, 255, 255);--sf13:rgba(255, 255, 255, 0.18);--sf14:rgb(109, 122, 138);--sf15:rgba(255, 255, 255, 0.16);--sf16:rgba(255, 255, 255, 0.1);--sf17:rgb(17, 23, 32);--sf18:rgb(12, 16, 21);--sf19:rgba(255, 255, 255, 0.06);--sf20:rgb(147, 160, 176);--sf21:rgb(62, 74, 87);--sf22:rgba(27, 141, 217, 0.22);--sf23:rgba(255, 255, 255, 0.12);--sf24:rgb(123, 135, 151);--sf25:rgba(99, 200, 236, 0);--sf26:rgba(27, 141, 217, 0.14);--sf27:rgba(27, 141, 217, 0.04);--sf28:rgb(198, 207, 218);--sf29:rgb(15, 20, 25);--sf30:rgba(27, 141, 217, 0.18);--sf31:rgba(27, 141, 217, 0.16);--sf32:rgba(255, 255, 255, 0.14);--sf33:rgba(10, 12, 15, 0.86);--sf34:rgb(58, 163, 230);--sf35:rgba(99, 200, 236, 0.5);--sf36:rgb(17, 24, 32);--sf37:rgb(17, 24, 31);--sf38:rgba(10,12,15,0.98)}
:root[data-theme="light"]{color-scheme:light;--sf00:#F5F7FA;--sf01:rgba(10, 107, 170, 0.28);--sf02:#0A6BAA;--sf03:#07568A;--sf04:#0E1620;--sf05:#66727F;--sf06:rgba(14, 22, 32, 0.033);--sf07:#B4432A;--sf08:rgba(14, 22, 32, 0.104);--sf09:rgba(27, 141, 217, 0.14);--sf10:#45515E;--sf11:#1B8DD9;--sf12:#FFFFFF;--sf13:rgba(14, 22, 32, 0.234);--sf14:#5B6878;--sf15:rgba(14, 22, 32, 0.208);--sf16:rgba(14, 22, 32, 0.13);--sf17:#F3F7FB;--sf18:#FFFFFF;--sf19:rgba(14, 22, 32, 0.078);--sf20:#4C5866;--sf21:#A9B3BE;--sf22:rgba(27, 141, 217, 0.154);--sf23:rgba(14, 22, 32, 0.156);--sf24:#596675;--sf25:rgba(10, 107, 170, 0.0);--sf26:rgba(27, 141, 217, 0.098);--sf27:rgba(27, 141, 217, 0.028);--sf28:#2B3744;--sf29:#EEF2F6;--sf30:rgba(27, 141, 217, 0.126);--sf31:rgba(27, 141, 217, 0.112);--sf32:rgba(14, 22, 32, 0.182);--sf33:rgba(245, 247, 250, 0.9);--sf34:#1577BB;--sf35:rgba(10, 107, 170, 0.5);--sf36:#EEF4FA;--sf37:#EEF4FA;--sf38:rgba(245, 247, 250, 0.98)}
:root{--sf-text:var(--sf04);--sf-dim:var(--sf21);--sf-muted:var(--sf14);--sf-nav:var(--sf28);--sf-accent:var(--sf02);--sf-border:var(--sf32)}
/* SuiteFunction theme — base styles (from the design's global <style>) */
html, body { margin: 0; padding: 0; background: var(--sf00); }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--sf01); }
a { color: var(--sf02); text-decoration: none; }
a:hover { color: var(--sf03); }
body { color: var(--sf04); font-family: 'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
.sf-site { background: var(--sf00); color: var(--sf04); font-family: 'IBM Plex Sans', system-ui, sans-serif; min-height: 100vh; }
.sf-main { display: block; }

/* Buttons from the design are links here; keep their look. */
:where(a.as-btn) { display: inline-block; text-align: center; text-decoration: none; line-height: normal; font: 400 13.3333px Arial, sans-serif; letter-spacing: normal; word-spacing: normal; }

/* Image slots: the image fills its frame, cropped to fit (as in the design). */
.slot-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.slot-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; 
  padding: 20px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.04em;
  color: var(--sf05); background: repeating-linear-gradient(135deg, var(--sf06) 0 10px, transparent 10px 20px); }

/* Header: active nav indicator and the phone menu button */
.nav-ind { display: none; }
body.sf-nav-products [data-nav="products"] .nav-ind,
body.sf-nav-compare [data-nav="compare"] .nav-ind,
body.sf-nav-about [data-nav="about"] .nav-ind,
body.sf-nav-contact [data-nav="contact"] .nav-ind { display: block; }
.nav-toggle { display: none; }

/* Admin bar offset for the sticky header */
body.admin-bar .site-header { top: 32px !important; }

/* Contact form state */
[data-bind="formMsg"]:empty { display: none; }
.sf-form-error { color: var(--sf07) !important; }
.sf-form-ok { color: var(--sf02) !important; }


/* ---- generated from the design (one class per inline style) ---- */
.cd511fb{position: relative; overflow: hidden; border-bottom: 1px solid var(--sf08)}
.c95c750{position: absolute; inset: 0px; background: radial-gradient(900px 520px at 78% -10%, var(--sf09), transparent 70%)}
.c3669c8{position: relative; max-width: 1240px; margin: 0px auto; padding: 104px 32px 96px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: start}
.c8fdd03{font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sf02); margin-bottom: 28px}
.cb02261{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(42px, 4.6vw, 66px); line-height: 1.03; letter-spacing: -0.03em; margin: 0px 0px 26px; text-wrap: pretty}
.ca00326{font-size: 18.5px; line-height: 1.6; color: var(--sf10); margin: 0px 0px 36px; max-width: 56ch; text-wrap: pretty}
.cf2ab9b{display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px}
.c8d8255{background: var(--sf11); color: var(--sf12); border: 0px; cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: 15.5px; padding: 15px 26px; border-radius: 2px}
.c7ddf0d{background: transparent; color: var(--sf04); border: 1px solid var(--sf13); cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: 15.5px; padding: 15px 26px; border-radius: 2px}
.c70ae77{display: flex; align-items: center; gap: 20px; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf14)}
.c149440{width: 1px; height: 12px; background: var(--sf15)}
.c26bbba{border: 1px solid var(--sf16); background: linear-gradient(var(--sf17), var(--sf18))}
.cdb916b{display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--sf08); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf14)}
.ce658fe{width: 7px; height: 7px; border-radius: 50%; background: var(--sf11)}
.c0c82a4{padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 24px}
.c35b37b{font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--sf02); margin-bottom: 12px}
.c20487c{display: flex; flex-direction: column; gap: 10px}
.c1d417c{display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--sf19)}
.cb25c87{font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--sf04)}
.c506ba2{font-size: 14.5px; color: var(--sf20)}
.c83b99a{display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline}
.c705986{border-bottom: 1px solid var(--sf08); background: var(--sf18)}
.c14635f{max-width: 1240px; margin: 0px auto; padding: 52px 32px}
.c12291e{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 24px}
.cb0c2d2{border-left: 2px solid var(--sf11); padding-left: 18px}
.c7a3c98{font-family: "Space Grotesk", sans-serif; font-size: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--sf21)}
.cf8a3e8{display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px}
.c543707{font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf14)}
.cf90e10{display: flex; gap: 2px}
.cb62320{background: var(--sf22); color: var(--sf04); border: 0px; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; padding: 3px 6px; border-radius: 2px}
.c263cb3{background: transparent; color: var(--sf14); border: 0px; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; padding: 3px 6px; border-radius: 2px}
.c13a34b{border-left: 2px solid var(--sf23); padding-left: 18px}
.ce9ce62{font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf14); margin-top: 6px}
.c8ae579{border-bottom: 1px solid var(--sf08)}
.cc2a95a{max-width: 1240px; margin: 0px auto; padding: 72px 32px 0px}
.c70a739{position: relative; width: 100%; aspect-ratio: 16 / 8; border: 1px solid var(--sf23); background: var(--sf18)}
.ceaaa56{max-width: 1240px; margin: 0px auto; padding: 44px 32px 56px; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center}
.c952771{font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf14)}
.ce93ccb{display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 16px}
.c262371{display: flex; align-items: center; justify-content: center; height: 44px; opacity: 0.72}
.c3fc15f{display: block; max-height: 30px; max-width: 100%; width: auto; height: auto}
.cf3e89f{display: block; max-height: 44px; max-width: 100%; width: auto; height: auto}
.cb85987{max-width: 1240px; margin: 0px auto; padding: 104px 32px}
.c67585f{max-width: 60ch; margin-bottom: 56px}
.c3d074a{font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sf02); margin-bottom: 20px}
.cf64a4c{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.025em; margin: 0px}
.cb51c2b{display: grid; grid-template-columns: 1fr 56px 1.15fr 56px 1fr; align-items: stretch}
.cbb5495{display: flex; flex-direction: column; gap: 12px}
.c2a0e00{font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--sf14); margin-bottom: 4px}
.cf48a81{border: 1px solid var(--sf23); background: var(--sf18); padding: 18px 20px}
.c837128{font-size: 13.5px; color: var(--sf24); margin-top: 6px}
.c7f77d7{display: flex; align-items: center; justify-content: center}
.c19a8be{width: 100%; height: 1px; background: linear-gradient(90deg, var(--sf25), var(--sf02))}
.c2dfdd2{border: 1px solid var(--sf11); background: linear-gradient(var(--sf26), var(--sf27)); padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 14px}
.c133d27{display: flex; align-items: center; gap: 10px}
.c60cc4e{width: 7px; height: 7px; border-radius: 50%; background: var(--sf02)}
.cff0a06{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 20px; color: var(--sf12)}
.cd387bd{display: flex; flex-direction: column; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--sf28)}
.cad348b{padding-bottom: 10px; border-bottom: 1px solid var(--sf08)}
.cbf9b7e{width: 100%; height: 1px; background: linear-gradient(90deg, var(--sf02), var(--sf25))}
.c496d6b{max-width: 60ch; margin-bottom: 60px}
.c80175b{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.025em; margin: 0px 0px 18px}
.ce2d760{font-size: 17.5px; line-height: 1.65; color: var(--sf10); margin: 0px}
.cfa5311{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sf08); border: 1px solid var(--sf08)}
.cdb4727{background: var(--sf18); padding: 36px 32px 40px}
.c0c1c01{font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--sf21); margin-bottom: 22px}
.c314460{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; margin: 0px 0px 14px}
.c452416{font-size: 15.5px; line-height: 1.65; color: var(--sf20); margin: 0px}
.cb861c5{margin-top: 28px}
.cb86c3d{background: transparent; border: 1px solid var(--sf13); color: var(--sf04); cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-size: 15px; padding: 14px 24px; border-radius: 2px}
.c5babf3{display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 52px}
.c555f60{max-width: 56ch}
.c54ee17{background: none; border: 0px; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf02); padding: 0px; white-space: nowrap}
.c833fa4{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px}
.c023867{text-align: left; background: var(--sf29); border: 1px solid var(--sf16); cursor: pointer; padding: 34px 32px 32px; display: flex; flex-direction: column; gap: 14px}
.c20d708{display: flex; align-items: center; justify-content: space-between}
.c01afae{font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf02)}
.c262da7{font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--sf14)}
.c9d39a7{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 26px; letter-spacing: -0.02em; margin: 0px; color: var(--sf04)}
.caa0a92{font-size: 15.5px; line-height: 1.6; color: var(--sf20); margin: 0px}
.cf1d9fc{max-width: 1240px; margin: 0px auto; padding: 104px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center}
.c1e055e{font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sf02); margin-bottom: 26px}
.ceb9054{margin: 0px; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.32; letter-spacing: -0.02em; color: var(--sf04); text-wrap: pretty}
.c73f8c8{margin-top: 28px; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf14)}
.c6e4d48{position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--sf23); background: var(--sf18)}
.cdf42e9{background: linear-gradient(var(--sf18), var(--sf00))}
.cb65fe1{max-width: 1240px; margin: 0px auto; padding: 96px 32px; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap}
.c9ea5a5{max-width: 52ch}
.c623b7d{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; margin: 0px 0px 14px}
.c2abc39{font-size: 17px; line-height: 1.65; color: var(--sf10); margin: 0px}
.cee2de5{display: flex; gap: 14px; flex-wrap: wrap}
.c8ca284{background: transparent; color: var(--sf04); border: 1px solid var(--sf13); cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-size: 15.5px; padding: 15px 26px; border-radius: 2px}
.c1e3476{max-width: 1240px; margin: 0px auto; padding: 88px 32px 104px}
.cf20ec6{max-width: 62ch; margin-bottom: 64px}
.ca3ca7b{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(36px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.03em; margin: 0px 0px 20px}
.cacd7ac{font-size: 18px; line-height: 1.65; color: var(--sf10); margin: 0px}
.cb8d18f{display: flex; flex-direction: column; gap: 1px; background: var(--sf08); border: 1px solid var(--sf08)}
.c781aad{text-align: left; background: var(--sf18); border: 0px; cursor: pointer; padding: 42px 40px; display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 40px; align-items: center}
.cc7f3e7{font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf02); margin-bottom: 12px}
.cc738ab{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 27px; letter-spacing: -0.02em; margin: 0px; color: var(--sf04)}
.cbcb730{font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--sf02)}
.c16a8cd{max-width: 62ch; margin: 96px 0px 40px}
.ce6cdd9{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.025em; margin: 0px}
.ca81b77{position: absolute; inset: 0px; background: radial-gradient(820px 460px at 85% -20%, var(--sf30), transparent 70%)}
.c68b128{position: relative; max-width: 1240px; margin: 0px auto; padding: 88px 32px 84px}
.c32bb26{background: none; border: 0px; padding: 0px; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf14); margin-bottom: 32px}
.ccb54cd{display: grid; grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 0.9fr); gap: 72px; align-items: center}
.c5650c4{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(38px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.03em; margin: 0px 0px 24px; text-wrap: pretty}
.c32f62f{font-size: 18px; line-height: 1.62; color: var(--sf10); margin: 0px 0px 34px; max-width: 56ch}
.cf58faa{background: transparent; color: var(--sf04); border: 1px solid var(--sf13); cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-size: 15.5px; padding: 15px 26px; border-radius: 2px; text-decoration: none; display: inline-block}
.c33c7a0{display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--sf08)}
.cc595b7{display: block; height: 44px; width: auto}
.c6542da{display: block; width: 88px; height: 88px}
.c4ebe40{display: flex; flex-direction: column; gap: 16px; min-width: 0px}
.c1f0087{position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--sf23); background: var(--sf18)}
.c455b6e{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 1px; background: var(--sf08); border: 1px solid var(--sf08)}
.c8c9ae9{background: var(--sf18); padding: 16px}
.cb8a57d{font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 600; color: var(--sf04)}
.c7dafb1{font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf14); margin-top: 6px}
.c370169{font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 600; color: var(--sf21)}
.ccdfa34{max-width: 1240px; margin: 0px auto; padding: 96px 32px}
.c06225f{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.025em; margin: 0px 0px 56px; max-width: 44ch}
.c0d091d{display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--sf08); border: 1px solid var(--sf08)}
.c95e95e{background: var(--sf00); padding: 38px 34px 40px}
.cf50c46{display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px}
.c713dc9{font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--sf21)}
.cdaaaf7{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -0.015em; margin: 0px}
.c387de6{display: flex; flex-direction: column; gap: 13px; font-size: 15.5px; line-height: 1.55; color: var(--sf20)}
.ca040bc{display: grid; grid-template-columns: 14px 1fr; gap: 12px}
.ca7805f{color: var(--sf11)}
.c4461d4{max-width: 1240px; margin: 0px auto; padding: 88px 32px}
.c33faa6{font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sf02); margin-bottom: 22px}
.ccb595e{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.025em; margin: 0px 0px 40px; max-width: 30ch}
.ca7b607{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 1px; background: var(--sf08); border: 1px solid var(--sf08)}
.cf67ef6{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 1px}
.c8785ea{background: var(--sf00); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 10px}
.c9dd79c{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 18px; color: var(--sf04)}
.cc2bcd6{font-size: 15px; line-height: 1.6; color: var(--sf20); margin: 0px}
.c345f48{font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sf02); margin-bottom: 36px}
.cb61916{display: grid; grid-template-columns: minmax(0px, 1.4fr) minmax(0px, 1fr); gap: 20px; align-items: start}
.cac1f45{position: relative; min-width: 0px; aspect-ratio: 16 / 10; border: 1px solid var(--sf23); background: var(--sf18)}
.cc1ecbf{position: relative; min-width: 0px; aspect-ratio: 4 / 5; border: 1px solid var(--sf23); background: var(--sf18)}
.cfdfb16{margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px}
.cce29c9{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.025em; margin: 0px 0px 44px; max-width: 30ch}
.c89a1df{overflow-x: auto}
.c69e710{min-width: 820px; display: flex; flex-direction: column; gap: 1px; background: var(--sf08); border: 1px solid var(--sf08)}
.c27c199{display: grid; grid-template-columns: 1fr 1.2fr 1fr 1fr; gap: 1px}
.c25ea5d{background: var(--sf00); padding: 18px 20px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf14)}
.cb309b0{background: var(--sf00); padding: 18px 20px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf02)}
.c0ef7e1{background: var(--sf00); padding: 18px 20px; font-size: 14.5px; line-height: 1.55; color: var(--sf04)}
.c275949{background: var(--sf00); padding: 18px 20px; font-size: 14.5px; line-height: 1.55; color: var(--sf20)}
.cdf4ae9{max-width: 1240px; margin: 0px auto; padding: 72px 32px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start}
.c7ce99f{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.025em; margin: 0px}
.ccb5536{display: grid; grid-template-columns: minmax(0px, 1fr); gap: 1px; background: var(--sf08); border: 1px solid var(--sf08)}
.ca99948{background: var(--sf00); padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 14px}
.c112d3d{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 22px; color: var(--sf04)}
.c511378{font-family: "Space Grotesk", sans-serif; font-size: 16px; line-height: 1.5; color: var(--sf04); margin: 0px}
.cddd339{font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf02); text-decoration: none; margin-top: auto}
.c346952{max-width: 1240px; margin: 0px auto; padding: 96px 32px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start}
.cd9ae0c{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.025em; margin: 0px 0px 20px}
.ca5f9c3{font-size: 16.5px; line-height: 1.65; color: var(--sf10); margin: 0px}
.ca95bc5{display: flex; flex-direction: column; gap: 1px; background: var(--sf08); border-top: 1px solid var(--sf08); border-bottom: 1px solid var(--sf08)}
.c2ddf68{background: var(--sf18); padding: 26px 4px 26px 0px}
.c04d87b{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 18px; margin: 0px 0px 10px; color: var(--sf04)}
.c842e81{max-width: 1240px; margin: 0px auto; padding: 88px 32px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center}
.cdd0e34{flex: 1 1 280px; max-width: 40ch}
.cfd9ab1{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.025em; margin: 0px 0px 18px}
.c39c7d3{flex: 999 1 560px; min-width: 0px; position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--sf23); background: var(--sf18)}
.c87e03f{position: absolute; inset: 0px; width: 100%; height: 100%; border: 0px; display: block}
.c95a5be{max-width: 1240px; margin: 0px auto; padding: 88px 32px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap}
.c58d131{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -0.025em; margin: 0px; max-width: 40ch}
.c330221{position: absolute; inset: 0px; background: radial-gradient(820px 460px at 85% -20%, var(--sf31), transparent 70%)}
.c9fbc72{position: relative; max-width: 1240px; margin: 0px auto; padding: 88px 32px 80px}
.c19ff11{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(36px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.03em; margin: 0px 0px 24px; max-width: 22ch; text-wrap: pretty}
.ca5093a{font-size: 18px; line-height: 1.62; color: var(--sf10); margin: 0px 0px 34px; max-width: 60ch}
.cd20bc8{background: var(--sf00); padding: 36px 32px 40px}
.cea2aac{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -0.015em; margin: 0px 0px 20px}
.ce8ecea{margin-top: 20px; position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--sf23); background: var(--sf00)}
.c8a1673{max-width: 64ch; margin-bottom: 56px}
.cd07a54{border-top: 1px solid var(--sf16)}
.c06eb9e{display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; padding: 34px 0px; border-bottom: 1px solid var(--sf08)}
.ccdafdc{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 23px; line-height: 1.25; letter-spacing: -0.02em; margin: 0px; color: var(--sf04)}
.c882f60{font-size: 16.5px; line-height: 1.6; color: var(--sf20); margin: 0px}
.cdcaa3f{margin-top: 64px; border: 1px solid var(--sf16); background: var(--sf18); padding: 56px 48px; text-align: center}
.caff645{margin: 0px auto; max-width: 36ch; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.32; letter-spacing: -0.02em; color: var(--sf04)}
.cb9265d{margin-top: 56px; display: flex; gap: 14px; flex-wrap: wrap}
.ca883ac{max-width: 1240px; margin: 0px auto; padding: 88px 32px 84px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start}
.c756cb4{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(36px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.03em; margin: 0px 0px 24px}
.cf21453{font-size: 18px; line-height: 1.65; color: var(--sf10); margin: 0px 0px 20px}
.c06e79f{border: 1px solid var(--sf16); background: var(--sf18)}
.c509d0a{padding: 14px 20px; border-bottom: 1px solid var(--sf08); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf14)}
.cad67f1{display: flex; flex-direction: column}
.ce93328{padding: 20px; border-bottom: 1px solid var(--sf19); font-size: 15px; line-height: 1.55; color: var(--sf20)}
.cf66c8c{padding: 20px; font-size: 15px; line-height: 1.55; color: var(--sf20)}
.c80d5b2{display: grid; grid-template-columns: minmax(0px, 0.8fr) minmax(0px, 1.2fr); gap: 72px; align-items: start}
.ccc8a6a{display: flex; flex-direction: column; gap: 16px}
.cdd13a4{position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--sf23); background: var(--sf18)}
.ce00c89{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 19px; color: var(--sf04)}
.c098f6f{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.025em; margin: 0px 0px 22px}
.caaccb2{display: flex; flex-direction: column; gap: 14px; margin: 0px 0px 40px}
.c69ef95{display: grid; grid-template-columns: 200px minmax(0px, 1fr); gap: 32px; padding: 22px 0px; border-bottom: 1px solid var(--sf08)}
.c326186{font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf04)}
.c674029{font-size: 15.5px; line-height: 1.6; color: var(--sf20)}
.c81cd5f{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -0.025em; margin: 0px 0px 44px}
.c7647e7{background: var(--sf00); padding: 34px 24px; font-family: "Space Grotesk", sans-serif; font-size: 18px; font-weight: 500; color: var(--sf04)}
.c4f6ed1{margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch}
.cfbb2ba{border: 1px solid var(--sf16); background: var(--sf00); padding: 36px 34px}
.cfa0a9b{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 20px; margin: 0px 0px 14px}
.ca4ca00{font-size: 15.5px; line-height: 1.65; color: var(--sf20); margin: 0px 0px 24px}
.c34e3e3{display: block; height: 48px; width: auto; margin-bottom: 16px}
.c2c2f57{display: flex; gap: 16px}
.c3c0d1a{display: block; width: 120px; height: 120px}
.c2a3ae0{position: relative; height: 96px; border: 1px solid var(--sf16); background: var(--sf18)}
.c2e574d{position: absolute; top: 50%; left: 24px; transform: translateY(-50%); height: 64px; width: auto; display: block}
.cce2da6{max-width: 1240px; margin: 0px auto; padding: 96px 32px; text-align: center}
.cd4cbd4{margin: 0px auto; max-width: 34ch; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -0.02em; color: var(--sf04)}
.c3311de{margin-top: 40px; background: var(--sf11); color: var(--sf12); border: 0px; cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: 15.5px; padding: 15px 26px; border-radius: 2px}
.ca103f4{display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 80px; align-items: start}
.cbfe12f{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(34px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -0.03em; margin: 0px 0px 22px}
.cc962f7{font-size: 17.5px; line-height: 1.65; color: var(--sf10); margin: 0px 0px 44px}
.c1de56d{background: var(--sf18); padding: 26px 28px}
.ce3ee04{font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf14); margin-bottom: 10px}
.c4f7a33{font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 500; color: var(--sf04); text-decoration: none}
.c60496a{display: flex; flex-direction: column; gap: 8px}
.c0238e7{font-size: 16px; line-height: 1.6; color: var(--sf28)}
.cd7fdd1{font-size: 15px; line-height: 1.6; color: var(--sf20)}
.cdf1430{border: 1px solid var(--sf16); background: var(--sf18); padding: 40px 38px 44px}
.c99fa13{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -0.015em; margin: 0px 0px 28px}
.c9926c0{display: flex; flex-direction: column; gap: 20px}
.c64ffb6{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px}
.c922ece{display: flex; flex-direction: column; gap: 9px}
.c71e5c5{color: var(--sf02)}
.c16a240{background: var(--sf00); border: 1px solid var(--sf23); color: var(--sf04); font-family: "IBM Plex Sans", sans-serif; font-size: 15px; padding: 13px 14px; border-radius: 2px}
.c9c1d4f{background: var(--sf00); border: 1px solid var(--sf23); color: var(--sf04); font-family: "IBM Plex Sans", sans-serif; font-size: 15px; padding: 13px 14px; border-radius: 2px; resize: vertical}
.c19de78{display: flex; flex-direction: column; gap: 11px}
.cca0e04{font-size: 14.5px; line-height: 1.5; color: var(--sf28)}
.c9e9b12{display: flex; gap: 10px; flex-wrap: wrap}
.caf4749{background: transparent; border: 1px solid var(--sf32); color: var(--sf28); padding: 10px 18px; font-family: "IBM Plex Sans", sans-serif; font-size: 14.5px; border-radius: 2px; cursor: pointer}
.cd7dd55{display: flex; gap: 12px; align-items: flex-start; cursor: pointer}
.c2aa4ae{margin: 3px 0px 0px; width: 16px; height: 16px; accent-color: var(--sf11); flex: 0 0 auto}
.ca3f24a{background: var(--sf11); color: var(--sf12); border: 0px; cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: 15.5px; padding: 15px 26px; border-radius: 2px; align-self: flex-start; white-space: nowrap}
.cd3d4df{position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0}
.c277408{font-size: 14px; line-height: 1.6; color: var(--sf07); margin: 0px}
.c83e0b1{display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start}
.c1a6ada{flex: 1 1 300px; max-width: 52ch}
.cd9148e{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(34px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -0.03em; margin: 0px 0px 22px; text-wrap: pretty}
.c78467b{font-size: 17px; line-height: 1.65; color: var(--sf10); margin: 0px 0px 28px; max-width: 44ch}
.ced287b{white-space: nowrap; background: transparent; color: var(--sf04); border: 1px solid var(--sf13); cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-size: 15.5px; padding: 14px 24px}
.c1f99ef{flex: 999 1 580px; background: var(--sf12); border: 1px solid var(--sf23); min-width: 0px}
.cb7fd11{display: block; border: 0px; width: 100%; height: 720px}
.c541d37{margin-top: 26px; background: none; border: 0px; padding: 0px; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf14)}
.cc65852{max-width: 820px; margin: 0px auto; padding: 88px 32px 104px}
.c14e2f6{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0px 0px 18px; text-wrap: pretty}
.c26b866{font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--sf14); margin-bottom: 40px}
.c7ab01f{display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px}
.ca2a140{font-size: 17px; line-height: 1.7; color: var(--sf28); margin: 0px; text-wrap: pretty}
.c3254f8{display: grid; grid-template-columns: 200px minmax(0px, 1fr); gap: 40px; padding: 30px 0px; border-bottom: 1px solid var(--sf08)}
.c1e6dea{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.35; margin: 0px; color: var(--sf04)}
.c5d7034{display: flex; flex-direction: column; gap: 14px; min-width: 0px}
.ce67e34{display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--sf10)}
.c983d08{font-size: 16px; line-height: 1.7; color: var(--sf10); margin: 0px; white-space: pre-line; text-wrap-style: pretty}
.c57f8e3{font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf02); margin: 12px 0px 0px}
.c9b968b{border: 1px solid var(--sf16); display: flex; flex-direction: column}
.c4383cb{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--sf19); background: var(--sf29); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em; line-height: 1.5; color: var(--sf14)}
.c15fbce{min-width: 0px; overflow-wrap: anywhere}
.c14c7fe{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--sf19); background: transparent; font-family: "IBM Plex Sans", sans-serif; font-size: 14.5px; letter-spacing: 0px; line-height: 1.5; color: var(--sf10)}
.c4f666e{position: sticky; top: 0px; z-index: 50; background: var(--sf33); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sf08)}
.cd63dd3{max-width: 1240px; margin: 0px auto; padding: 0px 32px; height: 72px; display: flex; align-items: center; gap: 40px}
.cce287a{display: flex; align-items: center; gap: 12px; background: none; border: 0px; padding: 0px; cursor: pointer}
.ca5a227{height: 30px; width: auto; display: block}
.c75e262{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--sf04)}
.c5e46a8{display: flex; align-items: center; gap: 4px; margin-left: auto}
.c80bfaf{position: relative; display: flex; flex-direction: column; align-items: center}
.cedb6ec{background: none; border: 0px; cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-size: 14.5px; color: var(--sf28); padding: 8px 14px}
.c6c093f{margin-left: 16px; white-space: nowrap; background: var(--sf11); color: var(--sf12); border: 0px; cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: 14.5px; padding: 11px 20px; border-radius: 2px}
.cbefb1d{position: absolute; bottom: -2px; height: 2px; width: 22px; background: var(--sf11)}
.c3b0a28{border-top: 1px solid var(--sf08); background: var(--sf00)}
.c8b0ec5{max-width: 1240px; margin: 0px auto; padding: 56px 32px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px}
.cb014d8{display: flex; align-items: center; gap: 12px; margin-bottom: 16px}
.cb1015f{height: 26px; width: auto; display: block}
.cb0fc8f{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 16px; color: var(--sf04)}
.c2dfa7f{font-size: 14.5px; line-height: 1.6; color: var(--sf14); margin: 0px; max-width: 34ch}
.c1e8524{font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf05)}
.c010e6d{text-align: left; background: none; border: 0px; padding: 0px; cursor: pointer; font-size: 14.5px; color: var(--sf20)}
.cbdd233{display: block; height: 36px; width: auto; align-self: flex-start}
.c2be0d8{display: flex; gap: 10px}
.cdf0a20{display: block; width: 64px; height: 64px}
.cc37838{display: block; height: 44px; width: auto; align-self: flex-start}
.cc69332{max-width: 1240px; margin: 0px auto; padding: 0px 32px 44px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--sf05)}
.ccae565{color: var(--sf05)}
body.sf-page-products .sf-main{max-width: 1240px; margin: 0px auto; padding: 88px 32px 104px}
body.sf-page-why-suitefunction .sf-main{max-width: 1240px; margin: 0px auto; padding: 88px 32px 104px}
body.sf-page-contact .sf-main{max-width: 1240px; margin: 0px auto; padding: 88px 32px 104px}
body.sf-page-book-a-demo .sf-main{max-width: 1240px; margin: 0px auto; padding: 88px 32px 104px}

/* ---- hover / focus states ---- */
.h0:hover { color: var(--sf12) !important; }
.h1:hover { background: var(--sf34) !important; }
.h2:hover { border-color: var(--sf02) !important; color: var(--sf02) !important; }
.h3:hover { color: var(--sf02) !important; }
.h4:hover { border-color: var(--sf35) !important; background: var(--sf36) !important; }
.h5:hover { background: var(--sf37) !important; }
.h6:hover { color: var(--sf04) !important; }
.h7:hover { border-color: var(--sf02) !important; }
.h8:focus { border-color: var(--sf02) !important; outline: none !important; }

/* ---- tablet and phone ---- */
@media (max-width: 900px){
.c3669c8{grid-template-columns: minmax(0, 1fr) !important; padding: 57px 20px 53px 20px !important; gap: 28px !important}
.cf2ab9b{flex-wrap: wrap !important}
.c70ae77{flex-wrap: wrap !important}
.cdb916b{flex-wrap: wrap !important}
.c1d417c{grid-template-columns: minmax(0, 1fr) !important}
.c83b99a{grid-template-columns: minmax(0, 1fr) !important}
.c14635f{padding: 52px 20px 52px 20px !important}
.c12291e{grid-template-columns: repeat(2, minmax(0, 1fr)) !important}
.c7a3c98{font-size: 30px !important}
.cf8a3e8{flex-wrap: wrap !important}
.cf90e10{flex-wrap: wrap !important}
.cc2a95a{padding: 40px 20px 0px 20px !important}
.ceaaa56{grid-template-columns: minmax(0, 1fr) !important; padding: 44px 20px 56px 20px !important}
.ce93ccb{grid-template-columns: repeat(2, minmax(0, 1fr)) !important}
.cb85987{padding: 57px 20px 57px 20px !important}
.cb51c2b{grid-template-columns: repeat(2, minmax(0, 1fr)) !important}
.c133d27{flex-wrap: wrap !important}
.cfa5311{grid-template-columns: minmax(0, 1fr) !important}
.cdb4727{padding: 36px 20px 40px 20px !important}
.c5babf3{flex-wrap: wrap !important}
.c833fa4{grid-template-columns: minmax(0, 1fr) !important}
.c023867{padding: 34px 20px 32px 20px !important}
.cf1d9fc{grid-template-columns: minmax(0, 1fr) !important; padding: 57px 20px 57px 20px !important; gap: 28px !important}
.cb65fe1{flex-wrap: wrap !important; padding: 53px 20px 53px 20px !important; gap: 28px !important}
.cee2de5{flex-wrap: wrap !important}
.c1e3476{padding: 48px 20px 57px 20px !important}
.c781aad{grid-template-columns: minmax(0, 1fr) !important; padding: 42px 20px 42px 20px !important}
.c68b128{padding: 48px 20px 46px 20px !important}
.ccb54cd{grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important}
.c33c7a0{flex-wrap: wrap !important}
.c455b6e{grid-template-columns: minmax(0, 1fr) !important}
.ccdfa34{padding: 53px 20px 53px 20px !important}
.c0d091d{grid-template-columns: minmax(0, 1fr) !important}
.c95e95e{padding: 38px 20px 40px 20px !important}
.cf50c46{flex-wrap: wrap !important}
.ca040bc{grid-template-columns: minmax(0, 1fr) !important}
.c4461d4{padding: 48px 20px 48px 20px !important}
.cf67ef6{grid-template-columns: minmax(0, 1fr) !important}
.cb61916{grid-template-columns: minmax(0, 1fr) !important}
.cfdfb16{grid-template-columns: minmax(0, 1fr) !important}
.c69e710{min-width: 0 !important}
.c27c199{grid-template-columns: repeat(2, minmax(0, 1fr)) !important}
.cdf4ae9{grid-template-columns: minmax(0, 1fr) !important; padding: 40px 20px 40px 20px !important; gap: 28px !important}
.ca99948{padding: 28px 20px 32px 20px !important}
.c346952{grid-template-columns: minmax(0, 1fr) !important; padding: 53px 20px 53px 20px !important; gap: 28px !important}
.c842e81{flex-wrap: wrap !important; padding: 48px 20px 48px 20px !important; gap: 28px !important}
.c39c7d3{flex: 1 1 100% !important}
.c95a5be{flex-wrap: wrap !important; padding: 48px 20px 48px 20px !important}
.c9fbc72{padding: 48px 20px 44px 20px !important}
.cd20bc8{padding: 36px 20px 40px 20px !important}
.c06eb9e{grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important}
.cdcaa3f{padding: 56px 20px 56px 20px !important}
.cb9265d{flex-wrap: wrap !important}
.ca883ac{grid-template-columns: minmax(0, 1fr) !important; padding: 48px 20px 46px 20px !important; gap: 28px !important}
.c80d5b2{grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important}
.c69ef95{grid-template-columns: minmax(0, 1fr) !important}
.c4f6ed1{grid-template-columns: minmax(0, 1fr) !important}
.cfbb2ba{padding: 36px 20px 36px 20px !important}
.c2c2f57{flex-wrap: wrap !important}
.cce2da6{padding: 53px 20px 53px 20px !important}
.ca103f4{grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important}
.c1de56d{padding: 26px 20px 26px 20px !important}
.cdf1430{padding: 40px 20px 44px 20px !important}
.c9e9b12{flex-wrap: wrap !important}
.cd7dd55{flex-wrap: wrap !important}
.c83e0b1{flex-wrap: wrap !important; gap: 28px !important}
.c1f99ef{flex: 1 1 100% !important}
.cc65852{padding: 48px 20px 57px 20px !important}
.c3254f8{grid-template-columns: minmax(0, 1fr) !important}
.ce67e34{grid-template-columns: minmax(0, 1fr) !important}
.c4383cb{grid-template-columns: minmax(0, 1fr) !important}
.c14c7fe{grid-template-columns: minmax(0, 1fr) !important}
.c4f666e{position: static !important}
.cd63dd3{flex-wrap: wrap !important; padding: 0px 20px 0px 20px !important}
.cce287a{flex-wrap: wrap !important}
.c5e46a8{flex-wrap: wrap !important}
.c8b0ec5{grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 56px 20px 40px 20px !important; gap: 28px !important}
.cb014d8{flex-wrap: wrap !important}
.c2be0d8{flex-wrap: wrap !important}
.cc69332{flex-wrap: wrap !important; padding: 0px 20px 44px 20px !important}
body.sf-page-products .sf-main{padding: 48px 20px 57px 20px !important}
body.sf-page-why-suitefunction .sf-main{padding: 48px 20px 57px 20px !important}
body.sf-page-contact .sf-main{padding: 48px 20px 57px 20px !important}
body.sf-page-book-a-demo .sf-main{padding: 48px 20px 57px 20px !important}
/* hand-written phone/tablet rules */
.site-header > div { padding: 0 20px !important; gap: 16px !important; }
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto;
  width: 40px; height: 40px; padding: 0 9px; background: none; border: 1px solid var(--sf32); border-radius: 2px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--sf04); }
#site-nav { display: none !important; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column !important;
  align-items: stretch !important; gap: 0 !important; margin: 0 !important; padding: 12px 20px 20px;
  background: var(--sf38); border-bottom: 1px solid var(--sf08); }
.site-header.nav-open #site-nav { display: flex !important; }
#site-nav > div { align-items: flex-start !important; }
#site-nav > div > a { padding: 12px 0 !important; font-size: 16px !important; }
#site-nav .nav-ind { display: none !important; }
#site-nav .nav-cta { margin: 12px 0 0 !important; }
body.admin-bar .site-header { top: 46px !important; }
iframe { max-width: 100%; }
h1, h2, h3 { overflow-wrap: anywhere; }

}
@media (max-width: 560px){
.c12291e{grid-template-columns: minmax(0, 1fr) !important}
.ce93ccb{grid-template-columns: minmax(0, 1fr) !important}
.cb51c2b{grid-template-columns: minmax(0, 1fr) !important}
.c27c199{grid-template-columns: minmax(0, 1fr) !important}
.c8b0ec5{grid-template-columns: minmax(0, 1fr) !important}
}

/* ---- light / dark switch ---- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px;
  margin-left: 14px; padding: 0; background: none; border: 1px solid var(--sf-border); border-radius: 2px;
  color: var(--sf-nav); cursor: pointer; transition: color .15s, border-color .15s; }
.theme-toggle:hover { color: var(--sf-text); border-color: var(--sf-accent); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
@media (max-width: 900px) {
  .theme-toggle { margin-left: auto !important; }
  .nav-toggle { margin-left: 8px !important; }
}

/* Light mode: details the colour swap alone cannot handle */
:root[data-theme="light"] img[src*="-white."] { filter: brightness(0); opacity: .78; }
:root[data-theme="light"] .site-header a img[alt="SuiteFunction"] { filter: none; opacity: 1; }
:root[data-theme="light"] .cff0a06 { color: var(--sf-text) !important; }
:root[data-theme="light"] .slot-img { box-shadow: none; }
:root[data-theme="light"] ::selection { background: rgba(10, 107, 170, 0.18); }

/* Paired screenshots: a dark and a light version sit in the same frame; show the one that matches the theme */
.slot-img.img-light { display: none; }
:root[data-theme="light"] .slot-img.img-dark { display: none; }
:root[data-theme="light"] .slot-img.img-light { display: block; }

/* Captions under illustrations: the key point in ordinary page text, not only in the image */
.sf-fig { margin: 0; min-width: 0; }
.sf-caption { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--sf20); }

/* Customer testimonial sections */
.sf-intro { font-size: 15.5px; line-height: 1.65; color: var(--sf20); margin: 18px 0 0; max-width: 34em; }
.sf-cta { display: inline-block; margin-top: 28px; }
.sf-metric { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sf-metric b { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--sf02); }
.sf-metric span { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf14); }

/* Customer stories page */
body.sf-nav-customers [data-nav="customers"] .nav-ind { display: block; }
.sf-story { scroll-margin-top: 80px; }
.sf-story-head { max-width: 780px; margin-bottom: 36px; }
.sf-story-head .c58d131 { margin-bottom: 14px; }
.sf-story-head .ca5093a { margin-bottom: 0; }
.sf-story-head .sf-metric { margin-top: 22px; }
.sf-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--sf08); border: 1px solid var(--sf08); }
.sf-fact { background: var(--sf00); padding: 22px 22px 26px; }
.sf-fact-label { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf02); margin: 0 0 12px; }
.sf-fact p, .sf-fact li { font-size: 15px; line-height: 1.6; color: var(--sf20); margin: 0; }
.sf-fact ul { margin: 0; padding-left: 18px; }
.sf-fact li + li { margin-top: 6px; }
.sf-fact a { color: var(--sf02); }
.sf-quote { margin: 40px 0 0; max-width: 820px; border-left: 2px solid var(--sf11); padding-left: 28px; display: flex; flex-direction: column; gap: 14px; }
.sf-quote blockquote { margin: 0; }
.sf-quote blockquote p { font-family: "Space Grotesk", sans-serif; font-size: 18px; line-height: 1.55; color: var(--sf04); margin: 0 0 16px; }
.sf-quote blockquote p.sf-q { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf02); margin: 28px 0 10px; }
.sf-quote blockquote p.sf-q:first-child { margin-top: 0; }
.sf-jump { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-jump a { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf04); text-decoration: none; border: 1px solid var(--sf08); padding: 9px 14px; }
.sf-jump a:hover { border-color: var(--sf11); color: var(--sf02); }
.sf-more { display: block; margin-top: 18px; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf02); text-decoration: none; }
@media (max-width: 1100px) { .sf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sf-facts { grid-template-columns: minmax(0, 1fr); } .sf-quote { padding-left: 18px; } .sf-quote blockquote p { font-size: 16.5px; } }

/* "Free" note on the Bank Match hero */
.sf-free { font-size: 16px; line-height: 1.6; color: var(--sf10); margin: -18px 0 30px; max-width: 60ch; }
.sf-free strong { color: var(--sf02); font-weight: 600; }

/* Two-column feature with a tall screenshot (Stripe checkout) */
.sf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: start; }
.sf-split-text { position: sticky; top: 96px; }
.sf-split-list { margin-top: 28px; }
.sf-shot { display: block; width: 100%; height: auto; border: 1px solid var(--sf08); border-radius: 4px; background: #fff; }
@media (max-width: 900px) { .sf-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } .sf-split-text { position: static; } .sf-split-fig { max-width: 520px; } }