/* Dvelopin www v2 (19 Oct 2026) - turn 4, option 4a (3c revised).
   Bootstrap 5.3.8 theme overrides (loaded after bootstrap.min.css) plus the site
   styles from the design export: assets/site-v4.css, assets/site-v5.css and
   assets/portal-widget-v2.css, 3c values only, kept to the rules the four pages use.
   The export's container queries become media queries (768px site, 440px widget).
   The --bs-* custom property names from the export are kept. */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --bs-primary: #1E5A82;
  --bs-primary-rgb: 30, 90, 130;
  --bs-body-bg: #FFFFFF;
  --bs-body-color: #2B3440;
  --bs-border-color: #D9D3CA;
  --bs-link-color: #1E5A82;
  --bs-link-color-rgb: 30, 90, 130;
  --bs-emphasis-color: #0F2E44;
  /* status set from WIDGET-SPEC: a functional green, amber and red */
  --bs-success: #146C43;
  --bs-success-rgb: 20, 108, 67;
  --bs-success-bg-subtle: #E3F4EA;
  --bs-success-text-emphasis: #146C43;
  --bs-warning: #8A4B00;
  --bs-warning-rgb: 138, 75, 0;
  --bs-warning-bg-subtle: #FFF1D6;
  --bs-warning-text-emphasis: #8A4B00;
  --bs-danger: #A1251B;
  --bs-danger-rgb: 161, 37, 27;
  --bs-danger-bg-subtle: #FBE8E6;
  --bs-danger-text-emphasis: #A1251B;
  --bs-body-font-family: "Source Sans 3", system-ui, sans-serif;
}

/* Option 3c: White page with Steel hero and call-to-action bands and Sky section tints.
   Every band sets local color tokens and components read them, so an option is a token change. */
body.s4 {
  --steel: #1E5A82;
  --deep: #0F2E44;
  --sky: #E3EEF6;
  --copper: #C8693A;
  --paper: #FAF7F2;
  --slate: #2B3440;
  --stone: #D9D3CA;
  --f: "Source Sans 3", system-ui, sans-serif;
  --fh: "Source Serif 4", Georgia, serif;
  --err: #A1251B;
  /* band tokens: light defaults */
  --bg: #FFFFFF;
  --card: var(--paper);
  --h: var(--deep);
  --tx: var(--slate);
  --lk: var(--steel);
  --lk-h: var(--deep);
  --kick: var(--steel);
  --svc: var(--steel);
  --line: var(--stone);
  --tick: var(--steel);
  --nav-on: var(--steel);
  --bp-bg: var(--steel);
  --bp-fg: #FFFFFF;
  --bp-hbg: var(--deep);
  --bp-hfg: #FFFFFF;
  --b2: var(--steel);
  --b2-h: #FFFFFF;
  --ring: var(--steel);
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

body.s4 *, body.s4 *::before, body.s4 *::after { box-sizing: border-box; }
body.s4 h1, body.s4 h2, body.s4 h3, body.s4 h4, body.s4 p, body.s4 ul, body.s4 ol, body.s4 figure { margin: 0; }
body.s4 ul, body.s4 ol { padding: 0; list-style: none; }
body.s4 a { color: var(--lk); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.s4 a:hover { color: var(--lk-h); text-decoration-thickness: 2px; }
body.s4 :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 4px; }

/* bands */
.s4 .band { background: var(--bg); color: var(--tx); }
.s4 .band-alt { --bg: var(--sky); --card: #FFFFFF; }
.s4 .band-hero, .s4 .band-cta, .s4 .box-steel {
  --bg: var(--steel); --card: var(--steel); --h: #FFFFFF; --tx: #FFFFFF; --lk: #FFFFFF; --lk-h: var(--sky);
  --kick: #FFFFFF; --svc: var(--sky); --line: rgba(255, 255, 255, 0.35); --tick: #FFFFFF;
  --bp-bg: #FFFFFF; --bp-fg: var(--deep); --bp-hbg: var(--sky); --bp-hfg: var(--deep);
  --b2: #FFFFFF; --b2-h: var(--steel); --ring: #FFFFFF;
}
/* footer: Steel Deep in every option */
.s4 .ftr {
  --bg: var(--deep); --card: var(--deep); --h: #FFFFFF; --tx: var(--sky); --lk: #FFFFFF; --lk-h: var(--sky);
  --kick: var(--sky); --svc: var(--sky); --line: #2A4A62; --tick: var(--sky); --nav-on: var(--sky);
  --b2: #FFFFFF; --b2-h: var(--deep); --ring: #FFFFFF;
}

/* type */
/* 2 Nov 2026: headings Source Serif 4, text Source Sans 3 (same pair as the documents) */
.s4 h1, .s4 h2, .s4 h3, .s4 h4, .s4 h5, .s4 h6, .s4 .h1, .s4 .h2, .s4 .h3, .s4 .h4, .s4 .h5, .s4 .h6 { font-family: var(--fh); }
.s4 .h1 { font-weight: 700; font-size: 60px; line-height: 1.08; letter-spacing: -0.015em; color: var(--h); text-wrap: balance; }
.s4 .h2 { font-weight: 700; font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; color: var(--h); text-wrap: balance; }
.s4 .h3 { font-weight: 700; font-size: 26px; line-height: 1.25; color: var(--h); text-wrap: balance; }
.s4 .h4 { font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--h); }
.s4 .lead { font-size: 21px; line-height: 1.55; max-width: 640px; color: var(--tx); }
.s4 .small { font-size: 16px; line-height: 1.5; }
.s4 .kicker { font-weight: 700; font-size: 16px; color: var(--kick); }
.s4 .svc-line { font-weight: 600; font-size: 22px; line-height: 1.4; color: var(--svc); text-wrap: balance; max-width: 560px; }

/* layout */
.s4 .wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.s4 .sec { padding: 96px 0; }
.s4 .sec-s { padding: 64px 0; }
.s4 .hero { padding: 88px 0 96px; }
.s4 .stack8 { display: flex; flex-direction: column; gap: 8px; }
.s4 .stack12 { display: flex; flex-direction: column; gap: 12px; }
.s4 .stack16 { display: flex; flex-direction: column; gap: 16px; }
.s4 .stack24 { display: flex; flex-direction: column; gap: 24px; }
.s4 .stack32 { display: flex; flex-direction: column; gap: 32px; }
/* max-widths moved out of inline style="" attributes (CSP: no inline styles) */
.s4 .mw-720 { max-width: 720px; }
.s4 .mw-760 { max-width: 760px; }
.s4 .mw-860 { max-width: 860px; }
.s4 .mw-900 { max-width: 900px; }
.s4 .btn-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.s4 .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.s4 .box { background: var(--card); border: 1px solid var(--stone); border-radius: 8px; }
.s4 .box-line { border: 1px solid var(--stone); border-radius: 8px; }
.s4 .box-steel { background: var(--steel); color: #FFFFFF; border-radius: 8px; }

/* buttons (Bootstrap .btn / .btn-primary / .btn-outline-primary, themed by band tokens) */
.s4 .btn { min-height: 48px; padding: 0 22px; --bs-btn-border-radius: 6px; font-family: var(--f); font-weight: 700; font-size: 17px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; border-width: 2px; display: inline-flex; align-items: center; justify-content: center; }
.s4 a.btn { color: var(--bs-btn-color); text-decoration: none; }
.s4 a.btn:hover, .s4 a.btn:focus-visible { color: var(--bs-btn-hover-color); }
.s4 .btn:hover { text-decoration: none; }
.s4 .btn-sm { min-height: 40px; padding: 0 16px; font-size: 16px; }
.s4 .btn-primary {
  --bs-btn-bg: var(--bp-bg);
  --bs-btn-border-color: var(--bp-bg);
  --bs-btn-color: var(--bp-fg);
  --bs-btn-hover-bg: var(--bp-hbg);
  --bs-btn-hover-border-color: var(--bp-hbg);
  --bs-btn-hover-color: var(--bp-hfg);
  --bs-btn-active-bg: var(--bp-hbg);
  --bs-btn-active-border-color: var(--bp-hbg);
  --bs-btn-active-color: var(--bp-hfg);
  --bs-btn-disabled-bg: var(--bp-bg);
  --bs-btn-disabled-border-color: var(--bp-bg);
  --bs-btn-disabled-color: var(--bp-fg);
}
.s4 .btn-outline-primary {
  --bs-btn-color: var(--b2);
  --bs-btn-border-color: var(--b2);
  --bs-btn-hover-bg: var(--b2);
  --bs-btn-hover-border-color: var(--b2);
  --bs-btn-hover-color: var(--b2-h);
  --bs-btn-active-bg: var(--b2);
  --bs-btn-active-border-color: var(--b2);
  --bs-btn-active-color: var(--b2-h);
}

/* header */
.s4 .hdr { position: relative; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.s4 .hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
.s4 .logo { display: block; line-height: 0; }
/* Tight lockup: its left edge is the D tile's left edge, so it sits on the content column. */
.s4 .logo img { height: 32.26px; width: auto; display: block; }
.s4 .hdr .nav { display: flex; align-items: center; gap: 32px; }
.s4 .nav-l { font-weight: 600; font-size: 17px; color: var(--h); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.s4 .nav-l:hover { color: var(--lk-h); text-decoration: none; border-bottom-color: var(--line); }
.s4 .nav-l.on { color: var(--h); border-bottom-color: var(--nav-on); }
.s4 .menu-b { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--b2); background: transparent; color: var(--h); font-family: var(--f); font-weight: 700; font-size: 16px; cursor: pointer; }
.s4 .bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.s4 .bars span { display: block; height: 2px; background: currentColor; border-radius: 1px; }

/* phone menu: Bootstrap offcanvas (offcanvas-end) styled as the export drawer */
#phoneMenu {
  --bs-offcanvas-width: 320px;
  --bs-offcanvas-bg: var(--bg);
  --bs-offcanvas-color: var(--tx);
  --bs-offcanvas-border-color: var(--line);
}
#phoneMenu .drawer { display: flex; flex-direction: column; gap: 0; padding-top: 4px; }
#phoneMenu .drawer .nav-l { display: flex; align-items: center; min-height: 52px; font-size: 19px; border-bottom: 1px solid var(--line); }
#phoneMenu .drawer .nav-l.on { border-bottom-color: var(--line); color: var(--lk); }
#phoneMenu .drawer .btn { margin-top: 16px; width: 100%; }

/* footer */
.s4 .ftr { background: var(--bg); color: var(--tx); padding: 72px 0 40px; }
.s4 .ftr-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 48px; }
.s4 .ftr .logo img { width: 264.4px; height: auto; }
.s4 .ftr-h { font-weight: 700; font-size: 16px; color: #FFFFFF; margin-bottom: 12px; }
.s4 .ftr-links { display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.s4 .ftr-links a { color: var(--sky); font-weight: 500; text-decoration: none; }
.s4 .ftr-links a:hover { color: #FFFFFF; text-decoration: underline; }
.s4 .ftr-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--steel); font-size: 15px; color: var(--sky); }
.s4 .ftr-base a { color: var(--sky); font-weight: 500; }

/* lists */
.s4 .ticks { display: flex; flex-direction: column; gap: 10px; }
.s4 .ticks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.s4 .ticks li::before { content: ""; width: 12px; height: 7px; border-left: 2.5px solid var(--tick); border-bottom: 2.5px solid var(--tick); transform: translateY(-3px) rotate(-45deg); }

/* steps (no numbers) */
.s4 .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--h); }
.s4 .step { padding: 24px 28px 0 0; display: flex; flex-direction: column; gap: 8px; }

/* forms (Bootstrap form-label / form-control / invalid-feedback / alert) */
.s4 .form { display: flex; flex-direction: column; gap: 20px; }
.s4 .form form { display: flex; flex-direction: column; gap: 20px; }
.s4 .fld { display: flex; flex-direction: column; gap: 6px; }
.s4 .fld .form-label, .s4 .fld .invalid-feedback { margin: 0; }
.s4 .form-label { font-weight: 700; font-size: 16px; color: var(--deep); }
.s4 .form-label .opt { font-weight: 500; color: var(--slate); }
.s4 .form-control {
  font-family: var(--f); font-weight: 500; font-size: 17px; color: var(--slate);
  background: #FFFFFF; border: 1px solid #8A8F96; border-radius: 6px; padding: 12px 14px; min-height: 48px; width: 100%;
}
.s4 textarea.form-control { min-height: 150px; resize: vertical; line-height: 1.5; }
.s4 .form-control:hover { border-color: var(--deep); }
.s4 .form-control:focus { outline: 3px solid rgba(30, 90, 130, 0.35); outline-offset: 0; border-color: var(--steel); box-shadow: none; }
.s4 .form-control.is-invalid { border-color: var(--err); border-width: 2px; padding: 11px 13px; }
.s4 .invalid-feedback { font-size: 15px; color: var(--err); font-weight: 700; }
.s4 .form .alert-danger {
  --bs-alert-bg: #FBE8E6;
  --bs-alert-color: var(--err);
  --bs-alert-border-color: var(--err);
  border-radius: 6px; padding: 14px 16px; font-size: 16px; font-weight: 600;
}
.s4 .done { border: 1px solid var(--stone); border-radius: 8px; padding: 32px; background: var(--paper); }
/* honeypot: visually hidden */
.s4 .hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* proof-of-work check (altcha-widget 3.5.0 with its own altcha.css): the package's colors mapped to the site tokens */
.s4 altcha-widget {
  display: block;
  --altcha-color-base: var(--bg);
  --altcha-color-base-content: var(--slate);
  --altcha-color-neutral: var(--stone);
  --altcha-color-neutral-content: var(--slate);
  --altcha-color-primary: var(--steel);
  --altcha-color-error: var(--err);
  --altcha-color-success: var(--bs-success);
  --altcha-border-color: var(--stone);
  --altcha-checkbox-border-color: var(--slate);
  --altcha-checkbox-outline-color: var(--steel);
  --altcha-border-radius: 6px;
  --altcha-max-width: 100%;
  font-family: var(--f); font-size: 16px; color: var(--slate);
}
.s4 .form-ns { margin: 0; font-size: 16px; font-weight: 600; color: var(--err); }

/* the widget on a dark band: same widget, only the frame edge changes so it reads on Steel */
.s4 .band-hero .pw { border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 18px 44px rgba(6, 20, 31, 0.45); }

/* Home: What we do */
.s4 .svc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.s4 .svc-big { padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.s4 .svc-sm { padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.s4 .tour-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.s4 .teaser { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.s4 .url-chip { font-weight: 700; color: var(--steel); white-space: nowrap; }
.s4 .cta-in { padding: 0; }

/* Home: the portal hosting line under the managed hosting card */
.s4 .svc-also { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 16px; border-top: 1px solid var(--stone); }
.s4 .svc-also strong { font-weight: 700; font-size: 17px; color: var(--deep); }

/* Home: "Also from us", a hairline-topped block that sits under What we do on the same white ground */
.s4 .sec-also { padding: 0 0 96px; }
.s4 .also-us { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; padding-top: 40px; border-top: 1px solid var(--line); }
.s4 .also-body { display: flex; flex-direction: column; gap: 24px; }
.s4 .also-items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.s4 .also-i { display: flex; flex-direction: column; gap: 8px; }

/* Home: Who it's for (RoleStrip) */
.s4 .roles { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 40px; }
.s4 .role { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--h); }
.s4 .role-n { font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--h); }
.s4 .role-t { font-weight: 700; font-size: 16px; color: var(--kick); }
.s4 .role-no { font-size: 16px; }
.s4 .role.lead-role .role-n { font-size: 30px; }

/* Portal tour (Bootstrap nav nav-tabs + tab-content) */
.s4 .tour { display: flex; flex-direction: column; gap: 28px; }
.s4 .tour-tabs { position: relative; display: flex; gap: 32px; box-shadow: inset 0 -1px 0 var(--line); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.s4 .tour-tabs::-webkit-scrollbar { display: none; }
.s4 .tour-tabs .nav-link {
  flex: none; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  padding: 12px 2px 13px; font-family: var(--f); font-weight: 700; font-size: 17px; color: var(--tx);
  cursor: pointer; min-height: 48px;
}
.s4 .tour-tabs .nav-link:hover { color: var(--lk); }
.s4 .tour-tabs .nav-link.active { color: var(--h); border-bottom-color: var(--nav-on); background: none; }
.s4 .tour-body.active { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; align-items: center; }
.s4 .tour-cap { display: flex; flex-direction: column; gap: 16px; }

/* Hosting: Two ways we host */
.s4 .also { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; padding-top: 20px; border-top: 1px solid var(--line); }
.s4 .also strong { font-weight: 700; font-size: 17px; color: var(--h); }
.s4 .ways { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.s4 .way-big { padding: 40px; display: flex; flex-direction: column; gap: 16px; align-self: start; }
.s4 .way-sm { padding: 32px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.s4 .bottom { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
.s4 .bottom-b { padding: 32px; display: flex; flex-direction: column; gap: 14px; background: #FFFFFF; }
.s4 .bottom-a { padding: 40px; display: flex; flex-direction: column; gap: 14px; }

/* Hosting: What every server includes */
.s4 .ix { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.s4 .ix-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.s4 .ix-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.s4 .ix-t { font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--h); }

/* Hosting: How it works */
.s4 .steps.steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s4 .need { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 32px; border-top: 1px solid var(--line); }
.s4 .need-t { max-width: 640px; }

/* What we build with (Integrations) */
.s4 .ig { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.s4 .ig.ig-stack { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.s4 .ig-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.s4 .ig-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.s4 .ig-g { font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--kick); }
.s4 .ig-n { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.s4 .ig-n li { font-weight: 700; font-size: 19px; line-height: 1.4; color: var(--h); }
.s4 .ig-n.plain li { font-weight: 500; font-size: 18px; color: var(--tx); }
.s4 .ig-more { margin-top: 20px; }
.s4 .ig-more strong { font-weight: 700; color: var(--h); }

/* Development: What we build */
.s4 .build { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
.s4 .build-web { padding: 48px 40px; display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; min-height: 300px; }
.s4 .build-web .h2 { font-size: 48px; }
.s4 .build-mob { padding: 40px; display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; }
.s4 .build-host { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 0; border-top: 1px solid var(--line); margin-top: 16px; }

/* Contact: form and details */
.s4 .ct { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: start; }
.s4 .ct-form { border: 1px solid var(--stone); border-radius: 8px; padding: 40px; background: #FFFFFF; }
.s4 .ct-side { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.s4 .ct-item { display: flex; flex-direction: column; gap: 4px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.s4 .ct-item:last-child { border-bottom: 0; padding-bottom: 0; }
.s4 .ct-v { font-weight: 700; font-size: 20px; color: var(--h); }
.s4 a.ct-v { color: var(--lk); }
.s4 .ct-hero-b { padding-top: 88px; padding-bottom: 72px; }

/* Client portal widget (portal-widget-v2.css, 3c / variant A).
   Colors are Bootstrap theme tokens (--bs-*) set on .pw. */
.pw {
  --bs-primary: #1E5A82;
  --bs-primary-contrast: #FFFFFF;
  --bs-primary-bg-subtle: #E3EEF6;
  --bs-primary-fg-emphasis: #0F2E44;
  --bs-bg-body: #FAF7F2;
  --bs-bg-1: #FFFFFF;
  --bs-fg-body: #2B3440;
  --bs-fg-emphasis: #0F2E44;
  --bs-fg-3: #6B7179;
  --bs-border-color: #D9D3CA;
  --bs-link-color: #1E5A82;
  --bs-radius-4: 6px;
  --bs-radius-5: 8px;
  --dv-navy: #0F2E44;
  --dv-sidebar-fg: #A3B4C1;
  --dv-sidebar-brand: #E3EEF6;
  --pw-bar: #1E5A82;
  --pw-live: #C8693A;
  /* status pills, variant A (default): a functional green, amber and red, used for status only */
  --bs-success-bg-subtle: #E3F4EA;
  --bs-success-fg-emphasis: #146C43;
  --bs-warning-bg-subtle: #FFF1D6;
  --bs-warning-fg-emphasis: #8A4B00;
  --bs-danger-bg-subtle: #FBE8E6;
  --bs-danger-fg-emphasis: #A1251B;
  --pw-warn-border: transparent;
  --pw-ok-dot: none;
  --pw-ok-text: #146C43;

  display: block;
  margin: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-radius-5);
  overflow: hidden;
  background: var(--bs-bg-body);
  box-shadow: 0 1px 2px rgba(15, 46, 68, 0.06), 0 16px 40px rgba(15, 46, 68, 0.12);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--bs-fg-body);
  text-align: left;
}
.pw *, .pw *::before, .pw *::after { box-sizing: border-box; }

.pw-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bs-bg-1); border-bottom: 1px solid var(--bs-border-color); }
.pw-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--bs-bg-body); border: 1px solid var(--bs-border-color); border-radius: var(--bs-radius-4); padding: 5px 10px; font-size: 13px; color: var(--bs-fg-body); }
.pw-chip { font-weight: 700; font-size: 12px; line-height: 1.3; color: var(--bs-primary-fg-emphasis); background: var(--bs-primary-bg-subtle); border-radius: 4px; padding: 3px 8px; white-space: nowrap; }

.pw-body { display: grid; grid-template-columns: 164px minmax(0, 1fr); min-height: 300px; }
.pw-side { background: var(--dv-navy); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.pw-brand { font-weight: 700; font-size: 14px; padding: 0 10px 14px; color: var(--dv-sidebar-brand); }
.pw-nav { padding: 8px 10px; border-radius: var(--bs-radius-4); color: var(--dv-sidebar-fg); font-size: 14px; font-weight: 600; }
.pw-nav.on { background: var(--bs-primary); color: var(--bs-primary-contrast); font-weight: 700; }

.pw-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pw-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pw-title { font-weight: 700; font-size: 18px; color: var(--bs-fg-emphasis); }
.pw-sub { font-weight: 700; font-size: 14px; color: var(--bs-fg-emphasis); margin-bottom: 4px; }
.pw-card { background: var(--bs-bg-1); border: 1px solid var(--bs-border-color); border-radius: var(--bs-radius-5); }
.pw-cardpad { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }

/* CPU chart: Steel bars, the latest bar Copper (graphics only) */
.pw-chart { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: 3px; height: 64px; }
.pw-chart span { display: block; background: var(--pw-bar); border-radius: 2px 2px 0 0; }
.pw-chart span.now { background: var(--pw-live); }
/* CPU bar heights moved out of inline style="" attributes (CSP: no inline styles) */
.pw-chart .bar-1 { height: 28.8%; }
.pw-chart .bar-2 { height: 35.2%; }
.pw-chart .bar-3 { height: 24%; }
.pw-chart .bar-4 { height: 19.2%; }
.pw-chart .bar-5 { height: 22.4%; }
.pw-chart .bar-6 { height: 32%; }
.pw-chart .bar-7 { height: 54.4%; }
.pw-chart .bar-8 { height: 65.6%; }
.pw-chart .bar-9 { height: 60.8%; }
.pw-chart .bar-10 { height: 48%; }
.pw-chart .bar-11 { height: 41.6%; }
.pw-chart .bar-12 { height: 38.4%; }
.pw-chart .bar-13 { height: 44.8%; }
.pw-chart .bar-14 { height: 52.8%; }
.pw-chart .bar-15 { height: 72%; }
.pw-chart .bar-16 { height: 83.2%; }
.pw-chart .bar-17 { height: 64%; }
.pw-chart .bar-18 { height: 49.6%; }
.pw-chart .bar-19 { height: 43.2%; }
.pw-chart .bar-20 { height: 35.2%; }
.pw-chart .bar-21 { height: 30.4%; }
.pw-chart .bar-22 { height: 25.6%; }
.pw-chart .bar-23 { height: 22.4%; }
.pw-chart .bar-24 { height: 20.8%; }
.pw-cap { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--bs-fg-3); }

/* table: Stone rules between rows, no zebra, no vertical lines */
.pw-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pw-table th { text-align: left; font-weight: 700; color: var(--bs-fg-3); padding: 8px 12px; border-bottom: 1px solid var(--bs-border-color); white-space: nowrap; }
.pw-table td { padding: 10px 12px; border-bottom: 1px solid var(--bs-border-color); white-space: nowrap; color: var(--bs-fg-body); }
.pw-table tr:last-child td { border-bottom: 0; }
.pw-table .num { text-align: right; }
.pw-table .nm { max-width: 0; width: 40%; overflow: hidden; text-overflow: ellipsis; }

/* status pills */
.pw-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; line-height: 1.3; padding: 2px 8px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; }
.pw-badge.ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-fg-emphasis); }
.pw-badge.ok::before { content: ""; display: var(--pw-ok-dot); width: 6px; height: 6px; border-radius: 50%; background: var(--pw-live); }
.pw-badge.warn { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-fg-emphasis); border-color: var(--pw-warn-border); }
.pw-badge.err { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-fg-emphasis); }
.pw-badge.info { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-fg-emphasis); }

.pw-btn { display: inline-flex; align-items: center; font-weight: 700; font-size: 12.5px; line-height: 1.3; color: var(--bs-primary-contrast); background: var(--bs-primary); border: 1px solid var(--bs-primary); border-radius: var(--bs-radius-4); padding: 4px 10px; white-space: nowrap; }
.pw-btn-o { display: inline-flex; align-items: center; font-weight: 700; font-size: 12.5px; line-height: 1.3; color: var(--bs-primary); background: var(--bs-bg-1); border: 1px solid var(--bs-border-color); border-radius: var(--bs-radius-4); padding: 3px 9px; white-space: nowrap; }

/* tour panels */
.pw-lg .pw-body { min-height: 420px; }
.pw-lg .pw-main { padding: 22px 26px; gap: 16px; }
.pw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--bs-border-color); font-size: 13.5px; }
.pw-row:last-child { border-bottom: 0; }
.pw-mut { color: var(--bs-fg-3); font-size: 13px; }
.pw-ok { color: var(--pw-ok-text); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.pw-ok::before { content: ""; display: var(--pw-ok-dot); width: 6px; height: 6px; border-radius: 50%; background: var(--pw-live); }
.pw-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px; }
.pw-tile { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.pw-tile.tall { grid-row: span 2; }
.pw-big { font-weight: 700; font-size: 22px; color: var(--bs-fg-emphasis); }

/* phone: site at 768px and under (the export's container queries, as media queries) */
@media (max-width: 768px) {
  .s4 .wrap { padding: 0 20px; }
  .s4 .sec { padding: 56px 0; }
  .s4 .sec-s { padding: 44px 0; }
  .s4 .hero { padding: 44px 0 52px; }
  .s4 .h1 { font-size: 40px; line-height: 1.1; }
  .s4 .h2 { font-size: 30px; }
  .s4 .h3 { font-size: 22px; }
  .s4 .lead { font-size: 19px; }
  .s4 .svc-line { font-size: 19px; }
  .s4 .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .s4 .hdr-in { height: 64px; }
  .s4 .logo img { height: 24.2px; }
  .s4 .hdr .nav { display: none; }
  .s4 .menu-b { display: inline-flex; }
  .s4 .btn { white-space: normal; text-align: center; }
  .s4 .btn-row > .btn { flex: 1 1 100%; }
  .s4 .ftr { padding: 56px 0 32px; }
  .s4 .ftr-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .s4 .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .s4 .step { padding: 18px 0; border-top: 1px solid var(--line); }
  .s4 .steps .step:first-child { border-top: 2px solid var(--h); }
  .s4 .done { padding: 22px; }

  /* Home */
  .s4 .svc { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .s4 .svc-big, .s4 .svc-sm { padding: 24px; }
  .s4 .tour-head, .s4 .teaser { flex-direction: column; align-items: flex-start; gap: 16px; }
  .s4 .teaser .btn { width: 100%; }
  .s4 .sec-also { padding: 0 0 56px; }
  .s4 .also-us { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 28px; }
  .s4 .also-items { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  /* Who it's for */
  .s4 .roles { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .s4 .role.lead-role .role-n { font-size: 24px; }

  /* Portal tour */
  .s4 .tour-tabs { gap: 22px; margin: 0 -20px; padding: 0 20px; }
  .s4 .tour-body.active { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  /* Hosting */
  .s4 .ways, .s4 .bottom { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .s4 .way-big, .s4 .way-sm, .s4 .bottom-a, .s4 .bottom-b { padding: 22px; }
  .s4 .way-sm .btn, .s4 .way-big .btn { width: 100%; }
  .s4 .ix, .s4 .ig { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .s4 .ix-row, .s4 .ig-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; }
  .s4 .steps.steps3 { grid-template-columns: minmax(0, 1fr); }
  .s4 .need { flex-direction: column; align-items: stretch; gap: 16px; padding-top: 24px; }
  .s4 .need .btn { width: 100%; }
  .s4 .ig-n { gap: 4px 20px; }

  /* Development */
  .s4 .build { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .s4 .build-web, .s4 .build-mob { padding: 24px; min-height: 0; }
  .s4 .build-web .h2 { font-size: 32px; }
  .s4 .build-host { flex-direction: column; align-items: flex-start; margin-top: 8px; }

  /* Contact */
  .s4 .ct { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .s4 .ct-form { border: 0; padding: 0; background: transparent; }
  .s4 .ct-hero-b { padding-top: 48px; padding-bottom: 40px; }
  .s4 .ct-form .btn { width: 100%; }
}

/* widget at its own narrow width: the export's @container pw (max-width: 440px) */
@media (max-width: 440px) {
  .pw-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pw-side { flex-direction: row; overflow: hidden; padding: 8px; gap: 4px; }
  .pw-brand { display: none; }
  .pw-nav { padding: 6px 8px; font-size: 13px; white-space: nowrap; }
  .pw-main, .pw-lg .pw-main { padding: 14px; }
  .pw-lg .pw-body { min-height: 0; }
  .pw-hide-m { display: none; }
  .pw-tiles { grid-template-columns: minmax(0, 1fr); }
  .pw-tile.tall { grid-row: auto; }
}

/* Fulfillment policy: readable line length, bullets back on its lists */
.s4 .policy { max-width: 760px; }
.s4 .policy ul { list-style: disc; padding-left: 1.25rem; }
.s4 .policy li + li { margin-top: 6px; }

/* Short pages (404, error pages): footer sits at the bottom of the screen, no white strip under it */
body.s4 { min-height: 100vh; display: flex; flex-direction: column; }
body.s4 > main { flex: 1 0 auto; }

/* Policies (/privacy, /cookies, /legal): reading column with an "On this page" rail; fold-out list on phones */
.s4 .ph { display: inline; font-weight: 700; color: var(--deep); background: #FFF4E0; border: 1px dashed var(--copper); border-radius: 4px; padding: 1px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.s4 .policy .b { font-weight: 700; color: var(--h); }
.s4 .pol-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; padding-bottom: 32px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.s4 .pol-head.flat { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.s4 .pol-meta { font-size: 16px; line-height: 1.5; color: var(--slate); margin: 0; }
.s4 .pol-grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: 64px; align-items: start; }
.s4 .pol-grid .policy { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
.s4 .pol-grid .policy p, .s4 .pol-grid .policy ul { margin: 0; }
.s4 .pol-grid .policy .h3 { margin: 20px 0 0; scroll-margin-top: 24px; }
.s4 .policy .lead-p { font-size: 19px; }
.s4 .tbl-w { overflow-x: auto; border: 1px solid var(--stone); border-radius: 8px; }
.s4 .pol-tbl { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.s4 .pol-tbl th { text-align: left; font-weight: 700; color: var(--deep); background: var(--sky); padding: 12px 14px; vertical-align: bottom; }
.s4 .pol-tbl td { padding: 12px 14px; border-top: 1px solid var(--stone); vertical-align: top; overflow-wrap: break-word; }
.s4 .pol-tbl td:first-child { font-weight: 700; color: var(--deep); }
.s4 .pol-tbl .url { word-break: break-all; }
.s4 .toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }
.s4 .toc-h { font-weight: 700; font-size: 16px; color: var(--kick); margin: 0; }
.s4 .toc-l { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.s4 .toc-l a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--tx); text-decoration: none; }
.s4 .toc-l a:hover, .s4 .toc-l a:focus-visible { color: var(--lk-h); text-decoration: underline; }
.s4 .toc-m { display: none; }
.s4 .toc-m summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-weight: 700; color: var(--deep); }
.s4 .toc-m summary::-webkit-details-marker { display: none; }
.s4 .toc-m summary::after { content: "Show"; font-weight: 600; font-size: 16px; color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.s4 .toc-m[open] summary::after { content: "Hide"; }
.s4 .toc-m .toc-l { padding: 0 16px 8px; border-top: 1px solid var(--stone); }
.s4 .toc-m .toc-l a:last-child { border-bottom: 0; }
.s4 .lg-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 900px; }
.s4 .lg-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.s4 .lg-row a { font-size: 20px; font-weight: 700; }
.s4 .lg-row p { margin: 0; }
.s4 .ftr-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 900px) {
  .s4 .pol-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .s4 .toc { display: none; }
  .s4 .toc-m { display: block; margin-top: 24px; border: 1px solid var(--stone); border-radius: 8px; background: #FFFFFF; }
  .s4 .pol-tbl thead { display: none; }
  .s4 .pol-tbl, .s4 .pol-tbl tbody, .s4 .pol-tbl tr, .s4 .pol-tbl td { display: block; width: 100%; }
  .s4 .tbl-w { border: 0; }
  .s4 .pol-tbl tr { border: 1px solid var(--stone); border-radius: 8px; padding: 6px 0; margin-bottom: 12px; }
  .s4 .pol-tbl td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; border-top: 0; padding: 6px 14px; }
  .s4 .pol-tbl td::before { content: attr(data-l); font-weight: 700; color: var(--slate); }
  .s4 .lg-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}