/** Shopify CDN: Minification failed

Line 1559:2 Unexpected ")"

**/
/* SkyStruct website — generated bundle. Edit src/styles/*.css */
/* ==== ss-website-tokens.css ==== */
/* SkyStruct website design tokens. All custom properties are --ss- prefixed.
   Core palette is fixed by the brand guidelines; tints are opacity-derived. */
:root {
  /* Brand palette */
  --ss-color-ink: #02040F;
  --ss-color-white: #FFFFFF;
  --ss-color-paper: #F8F9FA;
  --ss-color-mist: #E9ECEF;
  --ss-color-blue: #0071CE;
  --ss-color-navy: #001F54;

  /* Derived blues (same hue family) */
  --ss-color-blue-strong: #005CA8;          /* hover / pressed on light */
  --ss-color-blue-bright: #4DA3EE;          /* accent text on dark surfaces (AA) */
  --ss-color-blue-08: rgba(0, 113, 206, 0.08);
  --ss-color-blue-12: rgba(0, 113, 206, 0.12);
  --ss-color-blue-20: rgba(0, 113, 206, 0.2);
  --ss-color-blue-40: rgba(0, 113, 206, 0.4);
  /* Pale blues (tints of #0071CE toward white) for dissolves and the record folder */
  --ss-color-blue-mist: #EEF5FC;
  --ss-color-blue-tint: #D7E7F7;
  --ss-color-blue-tint-strong: #BFD6EF;

  /* Dark surfaces */
  --ss-color-night: #02040F;
  --ss-color-night-card: #0B0F1C;
  --ss-color-navy-deep: #00163D;

  /* Text — light surfaces */
  --ss-text-1: #02040F;
  --ss-text-2: rgba(2, 4, 15, 0.7);
  --ss-text-3: rgba(2, 4, 15, 0.58);
  /* Text — dark surfaces */
  --ss-text-inverse-1: #FFFFFF;
  --ss-text-inverse-2: rgba(255, 255, 255, 0.7);
  --ss-text-inverse-3: rgba(255, 255, 255, 0.52);

  /* Lines */
  --ss-line: rgba(2, 4, 15, 0.09);
  --ss-line-strong: rgba(2, 4, 15, 0.16);
  --ss-line-inverse: rgba(255, 255, 255, 0.1);
  --ss-line-inverse-strong: rgba(255, 255, 255, 0.18);

  /* Typography */
  --ss-font-sans: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ss-font-arabic: "Noto Sans Arabic", "Open Sans", system-ui, sans-serif;
  /* Type scale — aligned to Brand Guidelines v2 §5 (audited round 8; the hero had drifted to 99px).
     hero 40 → 68 · display (page H1 / statement) 36 → 56 · h1 (feature heading) 34 → 48 ·
     h2 (section) 28 → 42 · h3 21 → 28 · h4 18 → 22. Product-UI graphics have their own sizes
     (--ss-ui-title / body / meta) and only ever scale with their composition. Large sizes tighten tracking; body stays 0. */
  --ss-size-hero: clamp(2.5rem, 1.55rem + 3vw, 4.25rem);         /* 40 → 68 */
  --ss-size-display: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);       /* 36 → 56 */
  --ss-size-h1: clamp(2.125rem, 1.6rem + 1.6vw, 3rem);           /* 34 → 48 */
  --ss-size-h2: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem);        /* 28 → 42 */
  --ss-size-h3: clamp(1.3125rem, 1.1rem + 0.6vw, 1.75rem);       /* 21 → 28 */
  --ss-size-h4: clamp(1.125rem, 1.04rem + 0.3vw, 1.375rem);      /* 18 → 22 */
  --ss-size-h5: 1.125rem;                                         /* optical step between 16 and 19.2 */
  --ss-size-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);        /* 17 → 19.2 */
  --ss-size-body: 1rem;
  --ss-size-control: 0.9375rem;   /* 15px: navigation, buttons, tabs (v2 §5) */
  --ss-size-small: 0.875rem;
  --ss-size-micro: 0.8125rem;
  --ss-size-eyebrow: 0.75rem;
  --ss-size-caption: 0.75rem;     /* 12px: captions, notes, metadata (v2 minimum for marketing text) */
  --ss-size-ui: 0.71875rem;       /* 11.5px: dense product-UI mockups and letter chips only */
  --ss-size-ui-xs: 0.625rem;
  --ss-ui-title: 15px;            /* product-UI graphic title (design resolution) */
  --ss-ui-body: 13px;
  --ss-ui-meta: 11px;      /* 10px: product-UI mockup labels on phones only */
  --ss-tracking-display: -0.03em;
  --ss-tracking-h1: -0.025em;
  --ss-tracking-h2: -0.02em;
  --ss-tracking-h3: -0.015em;
  --ss-tracking-eyebrow: 0.09em;

  /* Spacing scale */
  --ss-space-1: 4px;
  --ss-space-2: 8px;
  --ss-space-3: 12px;
  --ss-space-4: 16px;
  --ss-space-5: 24px;
  --ss-space-6: 32px;
  --ss-space-7: 48px;
  --ss-space-8: 64px;
  --ss-space-9: 96px;
  --ss-space-10: 128px;
  /* Section rhythm (negative space, not dividers): compact · standard · large. Phones 44 / 60 / 80. */
  --ss-section-y: clamp(60px, 2.6rem + 4.6vw, 128px);
  --ss-section-y-compact: clamp(44px, 2.1rem + 2.8vw, 80px);
  --ss-section-y-large: clamp(80px, 3.6rem + 6vw, 160px);

  /* Breakpoints (media queries cannot read custom properties, so these are the only values used):
     640 · 768 · 900 · 1024 · 1280 — max-width rules use value − 1 (639 / 767 / 899 / 1023). */
  /* Connecting lines (rails, timelines, paths): one weight across every journey/sequence component. */
  --ss-rail-weight: 2px;
  /* Layout */
  --ss-container: 1280px;
  --ss-measure: 680px;
  --ss-measure-lead: 600px;
  --ss-gutter: clamp(20px, 4vw, 48px);
  --ss-header-h: 80px;

  /* Glass — light surfaces (default). Dark contexts re-map these below. */
  --ss-glass-bg: rgba(255, 255, 255, 0.58);
  --ss-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --ss-glass-border: rgba(2, 4, 15, 0.08);
  --ss-glass-border-active: rgba(0, 113, 206, 0.45);
  --ss-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --ss-glass-shadow: 0 6px 20px rgba(2, 4, 15, 0.06);
  --ss-glass-blur: saturate(160%) blur(14px);
  --ss-glass-text: var(--ss-color-navy);
  --ss-glass-accent: var(--ss-color-blue);

  /* Radii */
  /* Radius scale (v2 §14): hairline shapes ≤ 3px stay literal; everything else uses a step. */
  --ss-radius-xs: 6px;
  --ss-radius-sm: 8px;
  --ss-radius-md: 12px;
  --ss-radius-control: 10px;
  --ss-radius-card: 16px;
  --ss-radius-panel: 20px;
  --ss-radius-inset: 28px;
  --ss-radius-pill: 999px;
  --ss-radius-button: 10px;   /* every action button: rounded rectangle, never a pill */
  /* Static film grain (feTurbulence) layered on dark fields to prevent gradient banding. */
  --ss-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Depth */
  --ss-shadow-card: 0 1px 2px rgba(2, 4, 15, 0.04), 0 10px 30px rgba(2, 4, 15, 0.05);
  --ss-shadow-card-hover: 0 1px 2px rgba(2, 4, 15, 0.05), 0 16px 40px rgba(2, 4, 15, 0.08);
  --ss-shadow-float: 0 24px 64px rgba(2, 4, 15, 0.14), 0 2px 6px rgba(2, 4, 15, 0.06);
  --ss-shadow-dark: 0 12px 40px rgba(0, 0, 0, 0.28);
  /* Elevation scale (v2 §15–17 soft depth). Light surfaces: navy-tinted; dark surfaces: black. */
  --ss-elev-1: 0 8px 24px rgba(0, 31, 84, 0.08);
  --ss-elev-2: 0 22px 50px rgba(0, 31, 84, 0.1);
  --ss-elev-3: 0 30px 70px rgba(0, 31, 84, 0.12);
  --ss-elev-4: 0 40px 80px rgba(0, 31, 84, 0.14);
  --ss-elev-dark-1: 0 18px 44px rgba(0, 0, 0, 0.3);
  --ss-elev-dark-2: 0 40px 80px rgba(0, 0, 0, 0.42);
  --ss-highlight-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Motion */
  --ss-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ss-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ss-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ss-dur-press: 80ms;        /* press feedback: immediate */
  --ss-dur-fast: 160ms;
  --ss-dur-base: 260ms;
  --ss-dur-slow: 420ms;
  --ss-dur-story: 480ms;
  /* Motion tokens (website + Company Profile): entrances fast, ambient loops calm. */
  --ss-motion-fast: 180ms;      /* small UI changes, hovers */
  --ss-motion-ui: 260ms;        /* toggles, tabs, panels */
  --ss-motion-card: 420ms;      /* card entrances */
  --ss-motion-large: 600ms;     /* large images / product frames */
  --ss-motion-section: 750ms;   /* major section intros */
  --ss-motion-stagger: 60ms;    /* between peer elements */

  /* Layers */
  --ss-z-header: 50;
  --ss-z-menu: 60;
  --ss-z-mobile-nav: 80;
  --ss-z-transition: 100;
}

/* Dark contexts re-map the glass tokens once, so every glass component adapts. */
.ss-website-section--dark, .ss-website-section--navy, .ss-website-inset, .ss-website-immersive, .ss-website-footer, .ss-website-tier-card--pro, .ss-website-duo__layer--pro {
  --ss-glass-bg: rgba(255, 255, 255, 0.06);
  --ss-glass-bg-strong: rgba(255, 255, 255, 0.1);
  --ss-glass-border: rgba(255, 255, 255, 0.12);
  --ss-glass-border-active: rgba(77, 163, 238, 0.6);
  --ss-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ss-glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --ss-glass-text: var(--ss-text-inverse-1);
  --ss-glass-accent: var(--ss-color-blue-bright);
}

/* ---------- Layer B · C.L.I.C. identity palette (Brand Guidelines v2) ----------
   SkyStruct Blue stays the master platform accent and belongs to no pillar. Each pillar is an
   equally weighted contextual identity, used AROUND content and product (eyebrows, icons, active
   tabs, diagrams, paths, pale tints, media glows), never as page fills or on real product UI.
   base = the v2 swatch (fills, strokes, icons, large labels)
   ink = v2 accessible dark (small text on white / soft ≥ 4.5:1)
   soft = v2 soft background · surface = v2 surface tint (no small ink text on it)
   bright = derived light tone for text and marks on dark fields (≥ 7:1 on #02040F)
   Meaning is never carried by colour alone: letters, names and icons always accompany it. */
:root {
  /* Construction: Signal Vermilion (2026-10-12; replaces the rejected Terracotta #E76D4F).
     base #E8492E 3.87:1 on white (marks, icons) · ink #B8321B 5.98:1 on white, 5.31:1 on soft · bright #FF7A5E 7.98:1 on night. */
  --ss-clic-construction: #E8492E; --ss-clic-construction-ink: #B8321B; --ss-clic-construction-soft: #FEF0EC; --ss-clic-construction-surface: #FCDDD5; --ss-clic-construction-bright: #FF7A5E;
  --ss-clic-labour: #9568D8;       --ss-clic-labour-ink: #6E49B6;       --ss-clic-labour-soft: #F7F2FC;       --ss-clic-labour-surface: #E9DDF7;       --ss-clic-labour-bright: #C3A8F0;
  --ss-clic-inventory: #3FA36C;    --ss-clic-inventory-ink: #2C7C50;    --ss-clic-inventory-soft: #EFF8F3;    --ss-clic-inventory-surface: #DCEFE4;    --ss-clic-inventory-bright: #82D4A6;
  --ss-clic-cost: #C85A82;         --ss-clic-cost-ink: #9F4165;         --ss-clic-cost-soft: #FCF1F5;         --ss-clic-cost-surface: #F3DBE4;         --ss-clic-cost-bright: #EBA3BE;
  /* border = subtle hairline tint of each identity. */
  --ss-clic-construction-border: rgba(232, 73, 46, 0.28); --ss-clic-labour-border: rgba(149, 104, 216, 0.28);
  --ss-clic-inventory-border: rgba(63, 163, 108, 0.3); --ss-clic-cost-border: rgba(200, 90, 130, 0.28);
  /* Legacy alias: "tint" = soft background. */
  --ss-clic-construction-tint: var(--ss-clic-construction-soft); --ss-clic-labour-tint: var(--ss-clic-labour-soft);
  --ss-clic-inventory-tint: var(--ss-clic-inventory-soft); --ss-clic-cost-tint: var(--ss-clic-cost-soft);
  /* AI cue: SkyStruct blue resolving into a cool cyan — intelligence, not sci-fi. */
  --ss-ai-from: #0071CE; --ss-ai-to: #1E9FCC; --ss-ai-tint: #E4F3FA; --ss-ai-bright: #7FD3F0;
  /* With no pillar context, "accent" IS SkyStruct Blue (platform framing). */
  --ss-accent: var(--ss-color-blue); --ss-accent-ink: var(--ss-color-blue-strong); --ss-accent-bright: var(--ss-color-blue-bright);
  --ss-accent-tint: var(--ss-color-blue-mist); --ss-accent-soft: var(--ss-color-blue-mist); --ss-accent-surface: var(--ss-color-blue-tint);
  --ss-accent-border: rgba(0, 113, 206, 0.24);
}
[data-ss-clic="construction"] { --ss-accent: var(--ss-clic-construction); --ss-accent-ink: var(--ss-clic-construction-ink); --ss-accent-bright: var(--ss-clic-construction-bright); --ss-accent-tint: var(--ss-clic-construction-soft); --ss-accent-soft: var(--ss-clic-construction-soft); --ss-accent-surface: var(--ss-clic-construction-surface); --ss-accent-border: var(--ss-clic-construction-border); }
[data-ss-clic="labour"]       { --ss-accent: var(--ss-clic-labour); --ss-accent-ink: var(--ss-clic-labour-ink); --ss-accent-bright: var(--ss-clic-labour-bright); --ss-accent-tint: var(--ss-clic-labour-soft); --ss-accent-soft: var(--ss-clic-labour-soft); --ss-accent-surface: var(--ss-clic-labour-surface); --ss-accent-border: var(--ss-clic-labour-border); }
[data-ss-clic="inventory"]    { --ss-accent: var(--ss-clic-inventory); --ss-accent-ink: var(--ss-clic-inventory-ink); --ss-accent-bright: var(--ss-clic-inventory-bright); --ss-accent-tint: var(--ss-clic-inventory-soft); --ss-accent-soft: var(--ss-clic-inventory-soft); --ss-accent-surface: var(--ss-clic-inventory-surface); --ss-accent-border: var(--ss-clic-inventory-border); }
[data-ss-clic="cost"]         { --ss-accent: var(--ss-clic-cost); --ss-accent-ink: var(--ss-clic-cost-ink); --ss-accent-bright: var(--ss-clic-cost-bright); --ss-accent-tint: var(--ss-clic-cost-soft); --ss-accent-soft: var(--ss-clic-cost-soft); --ss-accent-surface: var(--ss-clic-cost-surface); --ss-accent-border: var(--ss-clic-cost-border); }
[data-ss-clic="platform-2"]   { --ss-accent: #2470AE; --ss-accent-ink: #1D5E95; --ss-accent-bright: #8EC2EE; --ss-accent-tint: var(--ss-color-blue-mist); --ss-accent-soft: var(--ss-color-blue-mist); --ss-accent-surface: var(--ss-color-blue-tint); }
[data-ss-clic="platform-3"]   { --ss-accent: #1F4E8C; --ss-accent-ink: #001F54; --ss-accent-bright: #A9C6EC; --ss-accent-tint: #E8EEF7; --ss-accent-soft: #E8EEF7; --ss-accent-surface: #D3DEEE; }
[data-ss-clic="platform"]     { --ss-accent: var(--ss-color-blue); --ss-accent-ink: var(--ss-color-blue-strong); --ss-accent-bright: var(--ss-color-blue-bright); --ss-accent-tint: var(--ss-color-blue-mist); --ss-accent-soft: var(--ss-color-blue-mist); --ss-accent-surface: var(--ss-color-blue-tint); }

/* ---------- Layer C · Semantic UI palette ----------
   Functional states only. Deliberately NOT the C.L.I.C. hues (Inventory Leaf ≠ success,
   Construction Terracotta ≠ warning): success is a cooler teal-green, critical a true red.
   base = text/icon on white (AA) · tint = chip surface · bright = text/marks on dark. */
:root {
  --ss-state-success: #0F7A62;  --ss-state-success-tint: #E1F4EE;  --ss-state-success-bright: #5FD3B5;
  --ss-state-warning: #94600A;  --ss-state-warning-tint: #FCF1DC;  --ss-state-warning-bright: #F5C565;
  --ss-state-critical: #B42318; --ss-state-critical-tint: #FDE8E6; --ss-state-critical-bright: #F8968C;
  --ss-state-overdue: #A3361A;  --ss-state-overdue-tint: #FBEAE3;  --ss-state-overdue-bright: #F2A184;
  --ss-state-pending: #4F5B6B;  --ss-state-pending-tint: #EDF0F4;  --ss-state-pending-bright: #AEB8C6;
  --ss-state-info: #0B63B5;     --ss-state-info-tint: #E6F1FB;     --ss-state-info-bright: #7EC0F5;
  --ss-state-disabled: #8A929E; --ss-state-disabled-tint: #F1F3F5; --ss-state-disabled-bright: #5E6672;
  /* Component aliases (approved → success, review → warning, risk → critical). */
  --ss-status-approved: var(--ss-state-success); --ss-status-approved-tint: var(--ss-state-success-tint); --ss-status-approved-bright: var(--ss-state-success-bright);
  --ss-status-review: var(--ss-state-warning);   --ss-status-review-tint: var(--ss-state-warning-tint);   --ss-status-review-bright: var(--ss-state-warning-bright);
  --ss-status-risk: var(--ss-state-critical);    --ss-status-risk-tint: var(--ss-state-critical-tint);    --ss-status-risk-bright: var(--ss-state-critical-bright);
  --ss-status-info: var(--ss-state-info);        --ss-status-info-tint: var(--ss-state-info-tint);        --ss-status-info-bright: var(--ss-state-info-bright);
}

/* ---------- Icon scale ----------
   Lucide glyphs at a constant 1.5px stroke. Three sizes; containers only where hierarchy needs one. */
:root { --ss-icon-sm: 16px; --ss-icon-md: 20px; --ss-icon-lg: 24px; --ss-icon-tile: 40px; }

/* Capability pages: ONE active accent, taken from the page's C.L.I.C. area (data-ss-clic on
   every capability section). Shared capability CSS reads only these aliases. */
:root, .ss-website-capability-page {
  --ss-capability-accent: var(--ss-accent);
  --ss-capability-accent-soft: var(--ss-accent-soft);
  --ss-capability-accent-surface: var(--ss-accent-surface);
  --ss-capability-accent-border: var(--ss-accent-border);
  --ss-capability-accent-dark: var(--ss-accent-ink);
  --ss-capability-accent-glow: var(--ss-accent-bright);
}

/* ==== ss-website-horizon.css ==== */
/* GENERATED by src/tools/ss-website-horizon.mjs — do not edit by hand.
   Seamless cloud-horizon tiles (3200 × 220, wrap horizontally). */
:root {
  --ss-horizon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3200 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='mist' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234DA3EE' stop-opacity='0.22'/%3E%3Cstop offset='1' stop-color='%23B4D2F0' stop-opacity='0.7'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C9DFF5' stop-opacity='0.75'/%3E%3Cstop offset='1' stop-color='%23F3F8FD' stop-opacity='1'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='-10%' y='-50%' width='120%' height='200%'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Cfilter id='m' x='-10%' y='-50%' width='120%' height='200%'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Cfilter id='n' x='-10%' y='-50%' width='120%' height='200%'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-320,260 L-320,74.8 L-310,81.0 L-300,88.0 L-290,96.0 L-280,105.2 L-270,115.7 L-260,128.0 L-250,142.6 L-240,157.5 L-230,143.4 L-220,131.5 L-210,121.4 L-200,112.7 L-190,105.1 L-180,98.4 L-170,92.7 L-160,87.7 L-150,83.4 L-140,79.7 L-130,76.7 L-120,74.3 L-110,72.4 L-100,71.1 L-90,70.3 L-80,70.0 L-70,70.3 L-60,71.1 L-50,72.4 L-40,74.3 L-30,72.3 L-20,67.8 L-10,64.0 L0,60.8 L10,58.0 L20,55.8 L30,54.2 L40,53.0 L50,52.2 L60,52.0 L70,52.2 L80,53.0 L90,54.2 L100,55.8 L110,58.0 L120,60.8 L130,64.0 L140,67.8 L150,72.3 L160,77.3 L170,83.1 L180,89.7 L190,97.1 L200,105.5 L210,115.0 L220,126.0 L230,138.7 L240,153.8 L250,166.0 L260,149.6 L270,136.5 L280,125.6 L290,116.4 L300,108.5 L310,101.8 L320,96.0 L330,91.1 L340,86.9 L350,83.5 L360,80.8 L370,78.7 L380,77.2 L390,76.3 L400,76.0 L410,76.3 L420,77.2 L430,78.7 L440,80.8 L450,83.5 L460,86.9 L470,91.1 L480,96.0 L490,101.8 L500,108.5 L510,116.4 L520,125.6 L530,136.5 L540,149.6 L550,164.2 L560,144.4 L570,128.4 L580,114.8 L590,103.1 L600,92.8 L610,83.6 L620,75.5 L630,68.3 L640,61.8 L650,56.0 L660,50.9 L670,46.3 L680,42.4 L690,38.9 L700,36.0 L710,33.5 L720,31.5 L730,30.0 L740,28.9 L750,28.2 L760,28.0 L770,28.2 L780,28.9 L790,30.0 L800,31.5 L810,33.5 L820,36.0 L830,38.9 L840,42.4 L850,46.3 L860,50.9 L870,56.0 L880,61.8 L890,68.3 L900,75.5 L910,83.6 L920,92.8 L930,103.1 L940,114.8 L950,128.4 L960,144.4 L970,164.2 L980,190.9 L990,236.0 L1000,189.2 L1010,165.1 L1020,147.5 L1030,133.4 L1040,121.5 L1050,111.4 L1060,102.7 L1070,95.1 L1080,88.4 L1090,82.7 L1100,77.7 L1110,73.4 L1120,69.7 L1130,66.7 L1140,64.3 L1150,62.4 L1160,61.1 L1170,60.3 L1180,60.0 L1190,60.3 L1200,61.1 L1210,62.4 L1220,64.3 L1230,66.7 L1240,69.7 L1250,73.4 L1260,77.7 L1270,82.7 L1280,88.4 L1290,95.1 L1300,102.7 L1310,111.4 L1320,121.5 L1330,133.4 L1340,147.5 L1350,147.8 L1360,131.3 L1370,117.4 L1380,105.3 L1390,94.6 L1400,85.1 L1410,76.7 L1420,69.1 L1430,62.3 L1440,56.2 L1450,50.7 L1460,45.8 L1470,41.5 L1480,37.7 L1490,34.4 L1500,31.6 L1510,29.3 L1520,27.4 L1530,25.9 L1540,24.8 L1550,24.2 L1560,24.0 L1570,24.2 L1580,24.8 L1590,25.9 L1600,27.4 L1610,29.3 L1620,31.6 L1630,34.4 L1640,37.7 L1650,41.5 L1660,45.8 L1670,50.7 L1680,56.2 L1690,62.3 L1700,69.1 L1710,76.7 L1720,85.1 L1730,94.6 L1740,105.3 L1750,117.4 L1760,131.3 L1770,147.8 L1780,168.1 L1790,195.4 L1800,236.0 L1810,236.0 L1820,202.5 L1830,173.1 L1840,153.9 L1850,139.0 L1860,126.8 L1870,116.6 L1880,107.9 L1890,100.4 L1900,93.9 L1910,88.4 L1920,83.6 L1930,79.6 L1940,76.3 L1950,73.6 L1960,71.6 L1970,70.1 L1980,69.3 L1990,69.0 L2000,69.3 L2010,70.1 L2020,71.6 L2030,73.6 L2040,76.3 L2050,79.6 L2060,83.6 L2070,88.4 L2080,93.9 L2090,100.4 L2100,107.9 L2110,116.6 L2120,126.8 L2130,139.0 L2140,153.9 L2150,152.9 L2160,135.5 L2170,121.0 L2180,108.6 L2190,97.8 L2200,88.3 L2210,79.9 L2220,72.4 L2230,65.7 L2240,59.7 L2250,54.4 L2260,49.8 L2270,45.7 L2280,42.2 L2290,39.1 L2300,36.6 L2310,34.6 L2320,33.0 L2330,31.9 L2340,31.2 L2350,31.0 L2360,31.2 L2370,31.9 L2380,33.0 L2390,34.6 L2400,36.6 L2410,39.1 L2420,42.2 L2430,45.7 L2440,49.8 L2450,54.4 L2460,59.7 L2470,65.7 L2480,72.4 L2490,79.9 L2500,88.3 L2510,97.8 L2520,108.6 L2530,121.0 L2540,135.5 L2550,152.9 L2560,175.2 L2570,208.8 L2580,236.0 L2590,185.6 L2600,160.8 L2610,142.6 L2620,128.0 L2630,115.7 L2640,105.2 L2650,96.0 L2660,88.0 L2670,81.0 L2680,74.8 L2690,69.4 L2700,64.7 L2710,60.7 L2720,57.2 L2730,54.4 L2740,52.0 L2750,50.3 L2760,49.0 L2770,48.3 L2780,48.0 L2790,48.3 L2800,49.0 L2810,50.3 L2820,52.0 L2830,54.4 L2840,57.2 L2850,60.7 L2860,64.7 L2870,69.4 L2880,74.8 L2890,81.0 L2900,88.0 L2910,96.0 L2920,105.2 L2930,115.7 L2940,128.0 L2950,142.6 L2960,157.5 L2970,143.4 L2980,131.5 L2990,121.4 L3000,112.7 L3010,105.1 L3020,98.4 L3030,92.7 L3040,87.7 L3050,83.4 L3060,79.7 L3070,76.7 L3080,74.3 L3090,72.4 L3100,71.1 L3110,70.3 L3120,70.0 L3130,70.3 L3140,71.1 L3150,72.4 L3160,74.3 L3170,72.3 L3180,67.8 L3190,64.0 L3200,60.8 L3210,58.0 L3220,55.8 L3230,54.2 L3240,53.0 L3250,52.2 L3260,52.0 L3270,52.2 L3280,53.0 L3290,54.2 L3300,55.8 L3310,58.0 L3320,60.8 L3330,64.0 L3340,67.8 L3350,72.3 L3360,77.3 L3370,83.1 L3380,89.7 L3390,97.1 L3400,105.5 L3410,115.0 L3420,126.0 L3430,138.7 L3440,153.8 L3450,166.0 L3460,149.6 L3470,136.5 L3480,125.6 L3490,116.4 L3500,108.5 L3510,101.8 L3520,96.0 L3520,260 Z' fill='url(%23a)' filter='url(%23f)'/%3E%3Cpath d='M-320,260 L-320,117.3 L-310,116.3 L-300,116.0 L-290,116.3 L-280,117.3 L-270,119.0 L-260,121.4 L-250,124.6 L-240,128.5 L-230,133.3 L-220,139.1 L-210,146.0 L-200,154.2 L-190,164.0 L-180,176.0 L-170,191.2 L-160,212.1 L-150,236.0 L-140,236.0 L-130,236.0 L-120,236.0 L-110,236.0 L-100,236.0 L-90,236.0 L-80,236.0 L-70,236.0 L-60,236.0 L-50,236.0 L-40,236.0 L-30,236.0 L-20,236.0 L-10,236.0 L0,236.0 L10,236.0 L20,236.0 L30,236.0 L40,236.0 L50,236.0 L60,231.7 L70,203.3 L80,184.7 L90,170.4 L100,158.8 L110,149.0 L120,140.8 L130,133.7 L140,127.7 L150,122.6 L160,118.3 L170,114.8 L180,111.9 L190,109.8 L200,108.2 L210,107.3 L220,107.0 L230,107.3 L240,108.2 L250,109.8 L260,111.9 L270,114.8 L280,118.3 L290,122.6 L300,127.7 L310,133.7 L320,140.8 L330,149.0 L340,158.8 L350,170.4 L360,184.7 L370,203.3 L380,231.7 L390,236.0 L400,236.0 L410,218.0 L420,199.7 L430,186.6 L440,176.6 L450,168.5 L460,162.1 L470,156.9 L480,152.9 L490,149.8 L500,147.7 L510,146.4 L520,146.0 L530,146.4 L540,147.7 L550,149.8 L560,152.9 L570,156.9 L580,162.1 L590,168.5 L600,176.6 L610,186.6 L620,199.7 L630,218.0 L640,236.0 L650,236.0 L660,236.0 L670,236.0 L680,236.0 L690,236.0 L700,236.0 L710,234.5 L720,205.1 L730,185.9 L740,171.0 L750,158.8 L760,148.6 L770,139.9 L780,132.4 L790,125.9 L800,120.4 L810,115.6 L820,111.6 L830,108.3 L840,105.6 L850,103.6 L860,102.1 L870,101.3 L880,101.0 L890,101.3 L900,102.1 L910,103.6 L920,105.6 L930,108.3 L940,111.6 L950,115.6 L960,120.4 L970,125.9 L980,132.4 L990,139.9 L1000,148.6 L1010,158.8 L1020,171.0 L1030,185.9 L1040,205.1 L1050,234.5 L1060,236.0 L1070,236.0 L1080,236.0 L1090,236.0 L1100,236.0 L1110,236.0 L1120,236.0 L1130,236.0 L1140,236.0 L1150,236.0 L1160,236.0 L1170,216.0 L1180,195.9 L1190,181.4 L1200,170.0 L1210,160.8 L1220,153.1 L1230,146.8 L1240,141.5 L1250,137.2 L1260,133.8 L1270,131.3 L1280,129.4 L1290,128.4 L1300,128.0 L1310,128.4 L1320,129.4 L1330,131.3 L1340,133.8 L1350,137.2 L1360,141.5 L1370,146.8 L1380,153.1 L1390,160.8 L1400,170.0 L1410,181.4 L1420,195.9 L1430,216.0 L1440,236.0 L1450,236.0 L1460,236.0 L1470,236.0 L1480,236.0 L1490,236.0 L1500,236.0 L1510,236.0 L1520,235.3 L1530,205.0 L1540,185.1 L1550,169.7 L1560,157.1 L1570,146.4 L1580,137.2 L1590,129.3 L1600,122.4 L1610,116.4 L1620,111.2 L1630,106.8 L1640,103.0 L1650,99.9 L1660,97.4 L1670,95.4 L1680,94.1 L1690,93.3 L1700,93.0 L1710,93.3 L1720,94.1 L1730,95.4 L1740,97.4 L1750,99.9 L1760,103.0 L1770,106.8 L1780,111.2 L1790,116.4 L1800,122.4 L1810,129.3 L1820,137.2 L1830,146.4 L1840,157.1 L1850,169.7 L1860,185.1 L1870,205.0 L1880,235.3 L1890,236.0 L1900,236.0 L1910,236.0 L1920,236.0 L1930,236.0 L1940,236.0 L1950,236.0 L1960,220.0 L1970,200.7 L1980,186.9 L1990,176.2 L2000,167.5 L2010,160.5 L2020,154.7 L2030,150.0 L2040,146.3 L2050,143.5 L2060,141.5 L2070,140.4 L2080,140.0 L2090,140.4 L2100,141.5 L2110,143.5 L2120,146.3 L2130,150.0 L2140,154.7 L2150,160.5 L2160,167.5 L2170,176.2 L2180,186.9 L2190,200.7 L2200,220.0 L2210,236.0 L2220,236.0 L2230,236.0 L2240,236.0 L2250,236.0 L2260,236.0 L2270,236.0 L2280,236.0 L2290,236.0 L2300,236.0 L2310,218.6 L2320,196.0 L2330,179.6 L2340,166.5 L2350,155.6 L2360,146.4 L2370,138.5 L2380,131.8 L2390,126.0 L2400,121.1 L2410,116.9 L2420,113.5 L2430,110.8 L2440,108.7 L2450,107.2 L2460,106.3 L2470,106.0 L2480,106.3 L2490,107.2 L2500,108.7 L2510,110.8 L2520,113.5 L2530,116.9 L2540,121.1 L2550,126.0 L2560,131.8 L2570,138.5 L2580,146.4 L2590,155.6 L2600,166.5 L2610,179.6 L2620,196.0 L2630,218.6 L2640,236.0 L2650,236.0 L2660,236.0 L2670,236.0 L2680,236.0 L2690,236.0 L2700,236.0 L2710,236.0 L2720,236.0 L2730,236.0 L2740,236.0 L2750,236.0 L2760,212.1 L2770,191.2 L2780,176.0 L2790,164.0 L2800,154.2 L2810,146.0 L2820,139.1 L2830,133.3 L2840,128.5 L2850,124.6 L2860,121.4 L2870,119.0 L2880,117.3 L2890,116.3 L2900,116.0 L2910,116.3 L2920,117.3 L2930,119.0 L2940,121.4 L2950,124.6 L2960,128.5 L2970,133.3 L2980,139.1 L2990,146.0 L3000,154.2 L3010,164.0 L3020,176.0 L3030,191.2 L3040,212.1 L3050,236.0 L3060,236.0 L3070,236.0 L3080,236.0 L3090,236.0 L3100,236.0 L3110,236.0 L3120,236.0 L3130,236.0 L3140,236.0 L3150,236.0 L3160,236.0 L3170,236.0 L3180,236.0 L3190,236.0 L3200,236.0 L3210,236.0 L3220,236.0 L3230,236.0 L3240,236.0 L3250,236.0 L3260,231.7 L3270,203.3 L3280,184.7 L3290,170.4 L3300,158.8 L3310,149.0 L3320,140.8 L3330,133.7 L3340,127.7 L3350,122.6 L3360,118.3 L3370,114.8 L3380,111.9 L3390,109.8 L3400,108.2 L3410,107.3 L3420,107.0 L3430,107.3 L3440,108.2 L3450,109.8 L3460,111.9 L3470,114.8 L3480,118.3 L3490,122.6 L3500,127.7 L3510,133.7 L3520,140.8 L3520,260 Z' fill='url(%23b)' filter='url(%23m)'/%3E%3Cpath d='M-320,260 L-320,172.0 L-310,167.1 L-300,162.9 L-290,159.5 L-280,156.8 L-270,154.7 L-260,153.2 L-250,152.3 L-240,152.0 L-230,152.3 L-220,153.2 L-210,154.7 L-200,156.8 L-190,159.5 L-180,162.9 L-170,167.1 L-160,172.0 L-150,177.8 L-140,184.5 L-130,192.4 L-120,199.6 L-110,190.4 L-100,182.5 L-90,175.8 L-80,170.0 L-70,165.1 L-60,160.9 L-50,157.5 L-40,154.8 L-30,152.7 L-20,151.2 L-10,150.3 L0,150.0 L10,150.3 L20,151.2 L30,152.7 L40,154.8 L50,157.5 L60,160.9 L70,165.1 L80,170.0 L90,175.8 L100,182.5 L110,190.4 L120,199.6 L130,210.5 L140,223.6 L150,236.0 L160,236.0 L170,236.0 L180,236.0 L190,236.0 L200,236.0 L210,224.2 L220,213.8 L230,205.1 L240,197.7 L250,191.4 L260,186.1 L270,181.7 L280,178.0 L290,175.1 L300,172.8 L310,171.3 L320,170.3 L330,170.0 L340,170.3 L350,171.3 L360,172.8 L370,175.1 L380,178.0 L390,181.7 L400,186.1 L410,191.4 L420,197.7 L430,205.1 L440,213.8 L450,224.2 L460,236.0 L470,236.0 L480,236.0 L490,222.2 L500,208.1 L510,196.4 L520,186.5 L530,178.1 L540,170.7 L550,164.4 L560,159.0 L570,154.3 L580,150.4 L590,147.2 L600,144.6 L610,142.5 L620,141.1 L630,140.3 L640,140.0 L650,140.3 L660,141.1 L670,142.5 L680,144.6 L690,147.2 L700,150.4 L710,154.3 L720,159.0 L730,164.4 L740,170.7 L750,178.1 L760,186.5 L770,196.4 L780,208.1 L790,222.2 L800,236.0 L810,236.0 L820,236.0 L830,236.0 L840,236.0 L850,236.0 L860,236.0 L870,236.0 L880,236.0 L890,236.0 L900,231.2 L910,220.6 L920,211.7 L930,204.1 L940,197.8 L950,192.4 L960,187.8 L970,184.1 L980,181.1 L990,178.9 L1000,177.3 L1010,176.3 L1020,176.0 L1030,176.3 L1040,177.3 L1050,178.9 L1060,181.1 L1070,184.1 L1080,187.8 L1090,192.4 L1100,197.8 L1110,204.1 L1120,211.7 L1130,220.6 L1140,231.2 L1150,236.0 L1160,236.0 L1170,236.0 L1180,236.0 L1190,236.0 L1200,236.0 L1210,236.0 L1220,236.0 L1230,236.0 L1240,236.0 L1250,236.0 L1260,222.1 L1270,209.4 L1280,198.8 L1290,189.8 L1300,182.1 L1310,175.4 L1320,169.7 L1330,164.9 L1340,160.8 L1350,157.4 L1360,154.7 L1370,152.6 L1380,151.2 L1390,150.3 L1400,150.0 L1410,150.3 L1420,151.2 L1430,152.6 L1440,154.7 L1450,157.4 L1460,160.8 L1470,164.9 L1480,169.7 L1490,175.4 L1500,182.1 L1510,189.8 L1520,198.8 L1530,209.4 L1540,222.1 L1550,236.0 L1560,236.0 L1570,236.0 L1580,236.0 L1590,236.0 L1600,236.0 L1610,236.0 L1620,236.0 L1630,236.0 L1640,236.0 L1650,236.0 L1660,236.0 L1670,236.0 L1680,236.0 L1690,236.0 L1700,226.2 L1710,215.8 L1720,207.1 L1730,199.7 L1740,193.4 L1750,188.1 L1760,183.7 L1770,180.0 L1780,177.1 L1790,174.8 L1800,173.3 L1810,172.3 L1820,172.0 L1830,172.3 L1840,173.3 L1850,174.8 L1860,177.1 L1870,180.0 L1880,183.7 L1890,188.1 L1900,193.4 L1910,199.7 L1920,207.1 L1930,215.8 L1940,226.2 L1950,236.0 L1960,236.0 L1970,236.0 L1980,236.0 L1990,236.0 L2000,236.0 L2010,236.0 L2020,236.0 L2030,236.0 L2040,236.0 L2050,227.9 L2060,213.3 L2070,201.4 L2080,191.3 L2090,182.6 L2100,175.2 L2110,168.8 L2120,163.2 L2130,158.5 L2140,154.5 L2150,151.3 L2160,148.6 L2170,146.6 L2180,145.1 L2190,144.3 L2200,144.0 L2210,144.3 L2220,145.1 L2230,146.6 L2240,148.6 L2250,151.3 L2260,154.5 L2270,158.5 L2280,163.2 L2290,168.8 L2300,175.2 L2310,182.6 L2320,191.3 L2330,201.4 L2340,213.3 L2350,227.9 L2360,236.0 L2370,236.0 L2380,236.0 L2390,236.0 L2400,236.0 L2410,236.0 L2420,236.0 L2430,236.0 L2440,236.0 L2450,236.0 L2460,236.0 L2470,234.0 L2480,222.2 L2490,212.4 L2500,204.0 L2510,196.9 L2520,190.8 L2530,185.7 L2540,181.4 L2550,177.8 L2560,175.0 L2570,172.8 L2580,171.2 L2590,170.3 L2600,170.0 L2610,170.3 L2620,171.2 L2630,172.8 L2640,175.0 L2650,177.8 L2660,181.4 L2670,185.7 L2680,190.8 L2690,196.9 L2700,204.0 L2710,212.4 L2720,222.2 L2730,234.0 L2740,236.0 L2750,236.0 L2760,236.0 L2770,236.0 L2780,236.0 L2790,236.0 L2800,236.0 L2810,236.0 L2820,225.6 L2830,212.5 L2840,201.6 L2850,192.4 L2860,184.5 L2870,177.8 L2880,172.0 L2890,167.1 L2900,162.9 L2910,159.5 L2920,156.8 L2930,154.7 L2940,153.2 L2950,152.3 L2960,152.0 L2970,152.3 L2980,153.2 L2990,154.7 L3000,156.8 L3010,159.5 L3020,162.9 L3030,167.1 L3040,172.0 L3050,177.8 L3060,184.5 L3070,192.4 L3080,199.6 L3090,190.4 L3100,182.5 L3110,175.8 L3120,170.0 L3130,165.1 L3140,160.9 L3150,157.5 L3160,154.8 L3170,152.7 L3180,151.2 L3190,150.3 L3200,150.0 L3210,150.3 L3220,151.2 L3230,152.7 L3240,154.8 L3250,157.5 L3260,160.9 L3270,165.1 L3280,170.0 L3290,175.8 L3300,182.5 L3310,190.4 L3320,199.6 L3330,210.5 L3340,223.6 L3350,236.0 L3360,236.0 L3370,236.0 L3380,236.0 L3390,236.0 L3400,236.0 L3410,224.2 L3420,213.8 L3430,205.1 L3440,197.7 L3450,191.4 L3460,186.1 L3470,181.7 L3480,178.0 L3490,175.1 L3500,172.8 L3510,171.3 L3520,170.3 L3520,260 Z' fill='%23FFFFFF' filter='url(%23n)'/%3E%3C/svg%3E");
  --ss-horizon-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3200 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.14'/%3E%3Cstop offset='1' stop-color='%23B4D2F0' stop-opacity='0.04'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237DB0E3' stop-opacity='0.26'/%3E%3Cstop offset='1' stop-color='%230071CE' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23B4D2F0' stop-opacity='0.24'/%3E%3Cstop offset='1' stop-color='%23001F54' stop-opacity='0.88'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='-10%' y='-50%' width='120%' height='200%'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3Cfilter id='m' x='-10%' y='-50%' width='120%' height='200%'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-320,260 L-320,74.8 L-310,81.0 L-300,88.0 L-290,96.0 L-280,105.2 L-270,115.7 L-260,128.0 L-250,142.6 L-240,157.5 L-230,143.4 L-220,131.5 L-210,121.4 L-200,112.7 L-190,105.1 L-180,98.4 L-170,92.7 L-160,87.7 L-150,83.4 L-140,79.7 L-130,76.7 L-120,74.3 L-110,72.4 L-100,71.1 L-90,70.3 L-80,70.0 L-70,70.3 L-60,71.1 L-50,72.4 L-40,74.3 L-30,72.3 L-20,67.8 L-10,64.0 L0,60.8 L10,58.0 L20,55.8 L30,54.2 L40,53.0 L50,52.2 L60,52.0 L70,52.2 L80,53.0 L90,54.2 L100,55.8 L110,58.0 L120,60.8 L130,64.0 L140,67.8 L150,72.3 L160,77.3 L170,83.1 L180,89.7 L190,97.1 L200,105.5 L210,115.0 L220,126.0 L230,138.7 L240,153.8 L250,166.0 L260,149.6 L270,136.5 L280,125.6 L290,116.4 L300,108.5 L310,101.8 L320,96.0 L330,91.1 L340,86.9 L350,83.5 L360,80.8 L370,78.7 L380,77.2 L390,76.3 L400,76.0 L410,76.3 L420,77.2 L430,78.7 L440,80.8 L450,83.5 L460,86.9 L470,91.1 L480,96.0 L490,101.8 L500,108.5 L510,116.4 L520,125.6 L530,136.5 L540,149.6 L550,164.2 L560,144.4 L570,128.4 L580,114.8 L590,103.1 L600,92.8 L610,83.6 L620,75.5 L630,68.3 L640,61.8 L650,56.0 L660,50.9 L670,46.3 L680,42.4 L690,38.9 L700,36.0 L710,33.5 L720,31.5 L730,30.0 L740,28.9 L750,28.2 L760,28.0 L770,28.2 L780,28.9 L790,30.0 L800,31.5 L810,33.5 L820,36.0 L830,38.9 L840,42.4 L850,46.3 L860,50.9 L870,56.0 L880,61.8 L890,68.3 L900,75.5 L910,83.6 L920,92.8 L930,103.1 L940,114.8 L950,128.4 L960,144.4 L970,164.2 L980,190.9 L990,236.0 L1000,189.2 L1010,165.1 L1020,147.5 L1030,133.4 L1040,121.5 L1050,111.4 L1060,102.7 L1070,95.1 L1080,88.4 L1090,82.7 L1100,77.7 L1110,73.4 L1120,69.7 L1130,66.7 L1140,64.3 L1150,62.4 L1160,61.1 L1170,60.3 L1180,60.0 L1190,60.3 L1200,61.1 L1210,62.4 L1220,64.3 L1230,66.7 L1240,69.7 L1250,73.4 L1260,77.7 L1270,82.7 L1280,88.4 L1290,95.1 L1300,102.7 L1310,111.4 L1320,121.5 L1330,133.4 L1340,147.5 L1350,147.8 L1360,131.3 L1370,117.4 L1380,105.3 L1390,94.6 L1400,85.1 L1410,76.7 L1420,69.1 L1430,62.3 L1440,56.2 L1450,50.7 L1460,45.8 L1470,41.5 L1480,37.7 L1490,34.4 L1500,31.6 L1510,29.3 L1520,27.4 L1530,25.9 L1540,24.8 L1550,24.2 L1560,24.0 L1570,24.2 L1580,24.8 L1590,25.9 L1600,27.4 L1610,29.3 L1620,31.6 L1630,34.4 L1640,37.7 L1650,41.5 L1660,45.8 L1670,50.7 L1680,56.2 L1690,62.3 L1700,69.1 L1710,76.7 L1720,85.1 L1730,94.6 L1740,105.3 L1750,117.4 L1760,131.3 L1770,147.8 L1780,168.1 L1790,195.4 L1800,236.0 L1810,236.0 L1820,202.5 L1830,173.1 L1840,153.9 L1850,139.0 L1860,126.8 L1870,116.6 L1880,107.9 L1890,100.4 L1900,93.9 L1910,88.4 L1920,83.6 L1930,79.6 L1940,76.3 L1950,73.6 L1960,71.6 L1970,70.1 L1980,69.3 L1990,69.0 L2000,69.3 L2010,70.1 L2020,71.6 L2030,73.6 L2040,76.3 L2050,79.6 L2060,83.6 L2070,88.4 L2080,93.9 L2090,100.4 L2100,107.9 L2110,116.6 L2120,126.8 L2130,139.0 L2140,153.9 L2150,152.9 L2160,135.5 L2170,121.0 L2180,108.6 L2190,97.8 L2200,88.3 L2210,79.9 L2220,72.4 L2230,65.7 L2240,59.7 L2250,54.4 L2260,49.8 L2270,45.7 L2280,42.2 L2290,39.1 L2300,36.6 L2310,34.6 L2320,33.0 L2330,31.9 L2340,31.2 L2350,31.0 L2360,31.2 L2370,31.9 L2380,33.0 L2390,34.6 L2400,36.6 L2410,39.1 L2420,42.2 L2430,45.7 L2440,49.8 L2450,54.4 L2460,59.7 L2470,65.7 L2480,72.4 L2490,79.9 L2500,88.3 L2510,97.8 L2520,108.6 L2530,121.0 L2540,135.5 L2550,152.9 L2560,175.2 L2570,208.8 L2580,236.0 L2590,185.6 L2600,160.8 L2610,142.6 L2620,128.0 L2630,115.7 L2640,105.2 L2650,96.0 L2660,88.0 L2670,81.0 L2680,74.8 L2690,69.4 L2700,64.7 L2710,60.7 L2720,57.2 L2730,54.4 L2740,52.0 L2750,50.3 L2760,49.0 L2770,48.3 L2780,48.0 L2790,48.3 L2800,49.0 L2810,50.3 L2820,52.0 L2830,54.4 L2840,57.2 L2850,60.7 L2860,64.7 L2870,69.4 L2880,74.8 L2890,81.0 L2900,88.0 L2910,96.0 L2920,105.2 L2930,115.7 L2940,128.0 L2950,142.6 L2960,157.5 L2970,143.4 L2980,131.5 L2990,121.4 L3000,112.7 L3010,105.1 L3020,98.4 L3030,92.7 L3040,87.7 L3050,83.4 L3060,79.7 L3070,76.7 L3080,74.3 L3090,72.4 L3100,71.1 L3110,70.3 L3120,70.0 L3130,70.3 L3140,71.1 L3150,72.4 L3160,74.3 L3170,72.3 L3180,67.8 L3190,64.0 L3200,60.8 L3210,58.0 L3220,55.8 L3230,54.2 L3240,53.0 L3250,52.2 L3260,52.0 L3270,52.2 L3280,53.0 L3290,54.2 L3300,55.8 L3310,58.0 L3320,60.8 L3330,64.0 L3340,67.8 L3350,72.3 L3360,77.3 L3370,83.1 L3380,89.7 L3390,97.1 L3400,105.5 L3410,115.0 L3420,126.0 L3430,138.7 L3440,153.8 L3450,166.0 L3460,149.6 L3470,136.5 L3480,125.6 L3490,116.4 L3500,108.5 L3510,101.8 L3520,96.0 L3520,260 Z' fill='url(%23a)' filter='url(%23f)'/%3E%3Cpath d='M-320,260 L-320,117.3 L-310,116.3 L-300,116.0 L-290,116.3 L-280,117.3 L-270,119.0 L-260,121.4 L-250,124.6 L-240,128.5 L-230,133.3 L-220,139.1 L-210,146.0 L-200,154.2 L-190,164.0 L-180,176.0 L-170,191.2 L-160,212.1 L-150,236.0 L-140,236.0 L-130,236.0 L-120,236.0 L-110,236.0 L-100,236.0 L-90,236.0 L-80,236.0 L-70,236.0 L-60,236.0 L-50,236.0 L-40,236.0 L-30,236.0 L-20,236.0 L-10,236.0 L0,236.0 L10,236.0 L20,236.0 L30,236.0 L40,236.0 L50,236.0 L60,231.7 L70,203.3 L80,184.7 L90,170.4 L100,158.8 L110,149.0 L120,140.8 L130,133.7 L140,127.7 L150,122.6 L160,118.3 L170,114.8 L180,111.9 L190,109.8 L200,108.2 L210,107.3 L220,107.0 L230,107.3 L240,108.2 L250,109.8 L260,111.9 L270,114.8 L280,118.3 L290,122.6 L300,127.7 L310,133.7 L320,140.8 L330,149.0 L340,158.8 L350,170.4 L360,184.7 L370,203.3 L380,231.7 L390,236.0 L400,236.0 L410,218.0 L420,199.7 L430,186.6 L440,176.6 L450,168.5 L460,162.1 L470,156.9 L480,152.9 L490,149.8 L500,147.7 L510,146.4 L520,146.0 L530,146.4 L540,147.7 L550,149.8 L560,152.9 L570,156.9 L580,162.1 L590,168.5 L600,176.6 L610,186.6 L620,199.7 L630,218.0 L640,236.0 L650,236.0 L660,236.0 L670,236.0 L680,236.0 L690,236.0 L700,236.0 L710,234.5 L720,205.1 L730,185.9 L740,171.0 L750,158.8 L760,148.6 L770,139.9 L780,132.4 L790,125.9 L800,120.4 L810,115.6 L820,111.6 L830,108.3 L840,105.6 L850,103.6 L860,102.1 L870,101.3 L880,101.0 L890,101.3 L900,102.1 L910,103.6 L920,105.6 L930,108.3 L940,111.6 L950,115.6 L960,120.4 L970,125.9 L980,132.4 L990,139.9 L1000,148.6 L1010,158.8 L1020,171.0 L1030,185.9 L1040,205.1 L1050,234.5 L1060,236.0 L1070,236.0 L1080,236.0 L1090,236.0 L1100,236.0 L1110,236.0 L1120,236.0 L1130,236.0 L1140,236.0 L1150,236.0 L1160,236.0 L1170,216.0 L1180,195.9 L1190,181.4 L1200,170.0 L1210,160.8 L1220,153.1 L1230,146.8 L1240,141.5 L1250,137.2 L1260,133.8 L1270,131.3 L1280,129.4 L1290,128.4 L1300,128.0 L1310,128.4 L1320,129.4 L1330,131.3 L1340,133.8 L1350,137.2 L1360,141.5 L1370,146.8 L1380,153.1 L1390,160.8 L1400,170.0 L1410,181.4 L1420,195.9 L1430,216.0 L1440,236.0 L1450,236.0 L1460,236.0 L1470,236.0 L1480,236.0 L1490,236.0 L1500,236.0 L1510,236.0 L1520,235.3 L1530,205.0 L1540,185.1 L1550,169.7 L1560,157.1 L1570,146.4 L1580,137.2 L1590,129.3 L1600,122.4 L1610,116.4 L1620,111.2 L1630,106.8 L1640,103.0 L1650,99.9 L1660,97.4 L1670,95.4 L1680,94.1 L1690,93.3 L1700,93.0 L1710,93.3 L1720,94.1 L1730,95.4 L1740,97.4 L1750,99.9 L1760,103.0 L1770,106.8 L1780,111.2 L1790,116.4 L1800,122.4 L1810,129.3 L1820,137.2 L1830,146.4 L1840,157.1 L1850,169.7 L1860,185.1 L1870,205.0 L1880,235.3 L1890,236.0 L1900,236.0 L1910,236.0 L1920,236.0 L1930,236.0 L1940,236.0 L1950,236.0 L1960,220.0 L1970,200.7 L1980,186.9 L1990,176.2 L2000,167.5 L2010,160.5 L2020,154.7 L2030,150.0 L2040,146.3 L2050,143.5 L2060,141.5 L2070,140.4 L2080,140.0 L2090,140.4 L2100,141.5 L2110,143.5 L2120,146.3 L2130,150.0 L2140,154.7 L2150,160.5 L2160,167.5 L2170,176.2 L2180,186.9 L2190,200.7 L2200,220.0 L2210,236.0 L2220,236.0 L2230,236.0 L2240,236.0 L2250,236.0 L2260,236.0 L2270,236.0 L2280,236.0 L2290,236.0 L2300,236.0 L2310,218.6 L2320,196.0 L2330,179.6 L2340,166.5 L2350,155.6 L2360,146.4 L2370,138.5 L2380,131.8 L2390,126.0 L2400,121.1 L2410,116.9 L2420,113.5 L2430,110.8 L2440,108.7 L2450,107.2 L2460,106.3 L2470,106.0 L2480,106.3 L2490,107.2 L2500,108.7 L2510,110.8 L2520,113.5 L2530,116.9 L2540,121.1 L2550,126.0 L2560,131.8 L2570,138.5 L2580,146.4 L2590,155.6 L2600,166.5 L2610,179.6 L2620,196.0 L2630,218.6 L2640,236.0 L2650,236.0 L2660,236.0 L2670,236.0 L2680,236.0 L2690,236.0 L2700,236.0 L2710,236.0 L2720,236.0 L2730,236.0 L2740,236.0 L2750,236.0 L2760,212.1 L2770,191.2 L2780,176.0 L2790,164.0 L2800,154.2 L2810,146.0 L2820,139.1 L2830,133.3 L2840,128.5 L2850,124.6 L2860,121.4 L2870,119.0 L2880,117.3 L2890,116.3 L2900,116.0 L2910,116.3 L2920,117.3 L2930,119.0 L2940,121.4 L2950,124.6 L2960,128.5 L2970,133.3 L2980,139.1 L2990,146.0 L3000,154.2 L3010,164.0 L3020,176.0 L3030,191.2 L3040,212.1 L3050,236.0 L3060,236.0 L3070,236.0 L3080,236.0 L3090,236.0 L3100,236.0 L3110,236.0 L3120,236.0 L3130,236.0 L3140,236.0 L3150,236.0 L3160,236.0 L3170,236.0 L3180,236.0 L3190,236.0 L3200,236.0 L3210,236.0 L3220,236.0 L3230,236.0 L3240,236.0 L3250,236.0 L3260,231.7 L3270,203.3 L3280,184.7 L3290,170.4 L3300,158.8 L3310,149.0 L3320,140.8 L3330,133.7 L3340,127.7 L3350,122.6 L3360,118.3 L3370,114.8 L3380,111.9 L3390,109.8 L3400,108.2 L3410,107.3 L3420,107.0 L3430,107.3 L3440,108.2 L3450,109.8 L3460,111.9 L3470,114.8 L3480,118.3 L3490,122.6 L3500,127.7 L3510,133.7 L3520,140.8 L3520,260 Z' fill='url(%23b)' filter='url(%23m)'/%3E%3Cpath d='M-320,260 L-320,172.0 L-310,167.1 L-300,162.9 L-290,159.5 L-280,156.8 L-270,154.7 L-260,153.2 L-250,152.3 L-240,152.0 L-230,152.3 L-220,153.2 L-210,154.7 L-200,156.8 L-190,159.5 L-180,162.9 L-170,167.1 L-160,172.0 L-150,177.8 L-140,184.5 L-130,192.4 L-120,199.6 L-110,190.4 L-100,182.5 L-90,175.8 L-80,170.0 L-70,165.1 L-60,160.9 L-50,157.5 L-40,154.8 L-30,152.7 L-20,151.2 L-10,150.3 L0,150.0 L10,150.3 L20,151.2 L30,152.7 L40,154.8 L50,157.5 L60,160.9 L70,165.1 L80,170.0 L90,175.8 L100,182.5 L110,190.4 L120,199.6 L130,210.5 L140,223.6 L150,236.0 L160,236.0 L170,236.0 L180,236.0 L190,236.0 L200,236.0 L210,224.2 L220,213.8 L230,205.1 L240,197.7 L250,191.4 L260,186.1 L270,181.7 L280,178.0 L290,175.1 L300,172.8 L310,171.3 L320,170.3 L330,170.0 L340,170.3 L350,171.3 L360,172.8 L370,175.1 L380,178.0 L390,181.7 L400,186.1 L410,191.4 L420,197.7 L430,205.1 L440,213.8 L450,224.2 L460,236.0 L470,236.0 L480,236.0 L490,222.2 L500,208.1 L510,196.4 L520,186.5 L530,178.1 L540,170.7 L550,164.4 L560,159.0 L570,154.3 L580,150.4 L590,147.2 L600,144.6 L610,142.5 L620,141.1 L630,140.3 L640,140.0 L650,140.3 L660,141.1 L670,142.5 L680,144.6 L690,147.2 L700,150.4 L710,154.3 L720,159.0 L730,164.4 L740,170.7 L750,178.1 L760,186.5 L770,196.4 L780,208.1 L790,222.2 L800,236.0 L810,236.0 L820,236.0 L830,236.0 L840,236.0 L850,236.0 L860,236.0 L870,236.0 L880,236.0 L890,236.0 L900,231.2 L910,220.6 L920,211.7 L930,204.1 L940,197.8 L950,192.4 L960,187.8 L970,184.1 L980,181.1 L990,178.9 L1000,177.3 L1010,176.3 L1020,176.0 L1030,176.3 L1040,177.3 L1050,178.9 L1060,181.1 L1070,184.1 L1080,187.8 L1090,192.4 L1100,197.8 L1110,204.1 L1120,211.7 L1130,220.6 L1140,231.2 L1150,236.0 L1160,236.0 L1170,236.0 L1180,236.0 L1190,236.0 L1200,236.0 L1210,236.0 L1220,236.0 L1230,236.0 L1240,236.0 L1250,236.0 L1260,222.1 L1270,209.4 L1280,198.8 L1290,189.8 L1300,182.1 L1310,175.4 L1320,169.7 L1330,164.9 L1340,160.8 L1350,157.4 L1360,154.7 L1370,152.6 L1380,151.2 L1390,150.3 L1400,150.0 L1410,150.3 L1420,151.2 L1430,152.6 L1440,154.7 L1450,157.4 L1460,160.8 L1470,164.9 L1480,169.7 L1490,175.4 L1500,182.1 L1510,189.8 L1520,198.8 L1530,209.4 L1540,222.1 L1550,236.0 L1560,236.0 L1570,236.0 L1580,236.0 L1590,236.0 L1600,236.0 L1610,236.0 L1620,236.0 L1630,236.0 L1640,236.0 L1650,236.0 L1660,236.0 L1670,236.0 L1680,236.0 L1690,236.0 L1700,226.2 L1710,215.8 L1720,207.1 L1730,199.7 L1740,193.4 L1750,188.1 L1760,183.7 L1770,180.0 L1780,177.1 L1790,174.8 L1800,173.3 L1810,172.3 L1820,172.0 L1830,172.3 L1840,173.3 L1850,174.8 L1860,177.1 L1870,180.0 L1880,183.7 L1890,188.1 L1900,193.4 L1910,199.7 L1920,207.1 L1930,215.8 L1940,226.2 L1950,236.0 L1960,236.0 L1970,236.0 L1980,236.0 L1990,236.0 L2000,236.0 L2010,236.0 L2020,236.0 L2030,236.0 L2040,236.0 L2050,227.9 L2060,213.3 L2070,201.4 L2080,191.3 L2090,182.6 L2100,175.2 L2110,168.8 L2120,163.2 L2130,158.5 L2140,154.5 L2150,151.3 L2160,148.6 L2170,146.6 L2180,145.1 L2190,144.3 L2200,144.0 L2210,144.3 L2220,145.1 L2230,146.6 L2240,148.6 L2250,151.3 L2260,154.5 L2270,158.5 L2280,163.2 L2290,168.8 L2300,175.2 L2310,182.6 L2320,191.3 L2330,201.4 L2340,213.3 L2350,227.9 L2360,236.0 L2370,236.0 L2380,236.0 L2390,236.0 L2400,236.0 L2410,236.0 L2420,236.0 L2430,236.0 L2440,236.0 L2450,236.0 L2460,236.0 L2470,234.0 L2480,222.2 L2490,212.4 L2500,204.0 L2510,196.9 L2520,190.8 L2530,185.7 L2540,181.4 L2550,177.8 L2560,175.0 L2570,172.8 L2580,171.2 L2590,170.3 L2600,170.0 L2610,170.3 L2620,171.2 L2630,172.8 L2640,175.0 L2650,177.8 L2660,181.4 L2670,185.7 L2680,190.8 L2690,196.9 L2700,204.0 L2710,212.4 L2720,222.2 L2730,234.0 L2740,236.0 L2750,236.0 L2760,236.0 L2770,236.0 L2780,236.0 L2790,236.0 L2800,236.0 L2810,236.0 L2820,225.6 L2830,212.5 L2840,201.6 L2850,192.4 L2860,184.5 L2870,177.8 L2880,172.0 L2890,167.1 L2900,162.9 L2910,159.5 L2920,156.8 L2930,154.7 L2940,153.2 L2950,152.3 L2960,152.0 L2970,152.3 L2980,153.2 L2990,154.7 L3000,156.8 L3010,159.5 L3020,162.9 L3030,167.1 L3040,172.0 L3050,177.8 L3060,184.5 L3070,192.4 L3080,199.6 L3090,190.4 L3100,182.5 L3110,175.8 L3120,170.0 L3130,165.1 L3140,160.9 L3150,157.5 L3160,154.8 L3170,152.7 L3180,151.2 L3190,150.3 L3200,150.0 L3210,150.3 L3220,151.2 L3230,152.7 L3240,154.8 L3250,157.5 L3260,160.9 L3270,165.1 L3280,170.0 L3290,175.8 L3300,182.5 L3310,190.4 L3320,199.6 L3330,210.5 L3340,223.6 L3350,236.0 L3360,236.0 L3370,236.0 L3380,236.0 L3390,236.0 L3400,236.0 L3410,224.2 L3420,213.8 L3430,205.1 L3440,197.7 L3450,191.4 L3460,186.1 L3470,181.7 L3480,178.0 L3490,175.1 L3500,172.8 L3510,171.3 L3520,170.3 L3520,260 Z' fill='url(%23c)'/%3E%3C/svg%3E");
  --ss-horizon-ratio: 14.5455;
  --ss-horizon-light-v2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3200 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='mist' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238A99AC' stop-opacity='0.2'/%3E%3Cstop offset='1' stop-color='%23D6E0EA' stop-opacity='0.7'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23DDE4EC' stop-opacity='0.75'/%3E%3Cstop offset='1' stop-color='%23F4F6F9' stop-opacity='1'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='-10%' y='-50%' width='120%' height='200%'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Cfilter id='m' x='-10%' y='-50%' width='120%' height='200%'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Cfilter id='n' x='-10%' y='-50%' width='120%' height='200%'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-320,260 L-320,74.8 L-310,81.0 L-300,88.0 L-290,96.0 L-280,105.2 L-270,115.7 L-260,128.0 L-250,142.6 L-240,157.5 L-230,143.4 L-220,131.5 L-210,121.4 L-200,112.7 L-190,105.1 L-180,98.4 L-170,92.7 L-160,87.7 L-150,83.4 L-140,79.7 L-130,76.7 L-120,74.3 L-110,72.4 L-100,71.1 L-90,70.3 L-80,70.0 L-70,70.3 L-60,71.1 L-50,72.4 L-40,74.3 L-30,72.3 L-20,67.8 L-10,64.0 L0,60.8 L10,58.0 L20,55.8 L30,54.2 L40,53.0 L50,52.2 L60,52.0 L70,52.2 L80,53.0 L90,54.2 L100,55.8 L110,58.0 L120,60.8 L130,64.0 L140,67.8 L150,72.3 L160,77.3 L170,83.1 L180,89.7 L190,97.1 L200,105.5 L210,115.0 L220,126.0 L230,138.7 L240,153.8 L250,166.0 L260,149.6 L270,136.5 L280,125.6 L290,116.4 L300,108.5 L310,101.8 L320,96.0 L330,91.1 L340,86.9 L350,83.5 L360,80.8 L370,78.7 L380,77.2 L390,76.3 L400,76.0 L410,76.3 L420,77.2 L430,78.7 L440,80.8 L450,83.5 L460,86.9 L470,91.1 L480,96.0 L490,101.8 L500,108.5 L510,116.4 L520,125.6 L530,136.5 L540,149.6 L550,164.2 L560,144.4 L570,128.4 L580,114.8 L590,103.1 L600,92.8 L610,83.6 L620,75.5 L630,68.3 L640,61.8 L650,56.0 L660,50.9 L670,46.3 L680,42.4 L690,38.9 L700,36.0 L710,33.5 L720,31.5 L730,30.0 L740,28.9 L750,28.2 L760,28.0 L770,28.2 L780,28.9 L790,30.0 L800,31.5 L810,33.5 L820,36.0 L830,38.9 L840,42.4 L850,46.3 L860,50.9 L870,56.0 L880,61.8 L890,68.3 L900,75.5 L910,83.6 L920,92.8 L930,103.1 L940,114.8 L950,128.4 L960,144.4 L970,164.2 L980,190.9 L990,236.0 L1000,189.2 L1010,165.1 L1020,147.5 L1030,133.4 L1040,121.5 L1050,111.4 L1060,102.7 L1070,95.1 L1080,88.4 L1090,82.7 L1100,77.7 L1110,73.4 L1120,69.7 L1130,66.7 L1140,64.3 L1150,62.4 L1160,61.1 L1170,60.3 L1180,60.0 L1190,60.3 L1200,61.1 L1210,62.4 L1220,64.3 L1230,66.7 L1240,69.7 L1250,73.4 L1260,77.7 L1270,82.7 L1280,88.4 L1290,95.1 L1300,102.7 L1310,111.4 L1320,121.5 L1330,133.4 L1340,147.5 L1350,147.8 L1360,131.3 L1370,117.4 L1380,105.3 L1390,94.6 L1400,85.1 L1410,76.7 L1420,69.1 L1430,62.3 L1440,56.2 L1450,50.7 L1460,45.8 L1470,41.5 L1480,37.7 L1490,34.4 L1500,31.6 L1510,29.3 L1520,27.4 L1530,25.9 L1540,24.8 L1550,24.2 L1560,24.0 L1570,24.2 L1580,24.8 L1590,25.9 L1600,27.4 L1610,29.3 L1620,31.6 L1630,34.4 L1640,37.7 L1650,41.5 L1660,45.8 L1670,50.7 L1680,56.2 L1690,62.3 L1700,69.1 L1710,76.7 L1720,85.1 L1730,94.6 L1740,105.3 L1750,117.4 L1760,131.3 L1770,147.8 L1780,168.1 L1790,195.4 L1800,236.0 L1810,236.0 L1820,202.5 L1830,173.1 L1840,153.9 L1850,139.0 L1860,126.8 L1870,116.6 L1880,107.9 L1890,100.4 L1900,93.9 L1910,88.4 L1920,83.6 L1930,79.6 L1940,76.3 L1950,73.6 L1960,71.6 L1970,70.1 L1980,69.3 L1990,69.0 L2000,69.3 L2010,70.1 L2020,71.6 L2030,73.6 L2040,76.3 L2050,79.6 L2060,83.6 L2070,88.4 L2080,93.9 L2090,100.4 L2100,107.9 L2110,116.6 L2120,126.8 L2130,139.0 L2140,153.9 L2150,152.9 L2160,135.5 L2170,121.0 L2180,108.6 L2190,97.8 L2200,88.3 L2210,79.9 L2220,72.4 L2230,65.7 L2240,59.7 L2250,54.4 L2260,49.8 L2270,45.7 L2280,42.2 L2290,39.1 L2300,36.6 L2310,34.6 L2320,33.0 L2330,31.9 L2340,31.2 L2350,31.0 L2360,31.2 L2370,31.9 L2380,33.0 L2390,34.6 L2400,36.6 L2410,39.1 L2420,42.2 L2430,45.7 L2440,49.8 L2450,54.4 L2460,59.7 L2470,65.7 L2480,72.4 L2490,79.9 L2500,88.3 L2510,97.8 L2520,108.6 L2530,121.0 L2540,135.5 L2550,152.9 L2560,175.2 L2570,208.8 L2580,236.0 L2590,185.6 L2600,160.8 L2610,142.6 L2620,128.0 L2630,115.7 L2640,105.2 L2650,96.0 L2660,88.0 L2670,81.0 L2680,74.8 L2690,69.4 L2700,64.7 L2710,60.7 L2720,57.2 L2730,54.4 L2740,52.0 L2750,50.3 L2760,49.0 L2770,48.3 L2780,48.0 L2790,48.3 L2800,49.0 L2810,50.3 L2820,52.0 L2830,54.4 L2840,57.2 L2850,60.7 L2860,64.7 L2870,69.4 L2880,74.8 L2890,81.0 L2900,88.0 L2910,96.0 L2920,105.2 L2930,115.7 L2940,128.0 L2950,142.6 L2960,157.5 L2970,143.4 L2980,131.5 L2990,121.4 L3000,112.7 L3010,105.1 L3020,98.4 L3030,92.7 L3040,87.7 L3050,83.4 L3060,79.7 L3070,76.7 L3080,74.3 L3090,72.4 L3100,71.1 L3110,70.3 L3120,70.0 L3130,70.3 L3140,71.1 L3150,72.4 L3160,74.3 L3170,72.3 L3180,67.8 L3190,64.0 L3200,60.8 L3210,58.0 L3220,55.8 L3230,54.2 L3240,53.0 L3250,52.2 L3260,52.0 L3270,52.2 L3280,53.0 L3290,54.2 L3300,55.8 L3310,58.0 L3320,60.8 L3330,64.0 L3340,67.8 L3350,72.3 L3360,77.3 L3370,83.1 L3380,89.7 L3390,97.1 L3400,105.5 L3410,115.0 L3420,126.0 L3430,138.7 L3440,153.8 L3450,166.0 L3460,149.6 L3470,136.5 L3480,125.6 L3490,116.4 L3500,108.5 L3510,101.8 L3520,96.0 L3520,260 Z' fill='url(%23a)' filter='url(%23f)'/%3E%3Cpath d='M-320,260 L-320,117.3 L-310,116.3 L-300,116.0 L-290,116.3 L-280,117.3 L-270,119.0 L-260,121.4 L-250,124.6 L-240,128.5 L-230,133.3 L-220,139.1 L-210,146.0 L-200,154.2 L-190,164.0 L-180,176.0 L-170,191.2 L-160,212.1 L-150,236.0 L-140,236.0 L-130,236.0 L-120,236.0 L-110,236.0 L-100,236.0 L-90,236.0 L-80,236.0 L-70,236.0 L-60,236.0 L-50,236.0 L-40,236.0 L-30,236.0 L-20,236.0 L-10,236.0 L0,236.0 L10,236.0 L20,236.0 L30,236.0 L40,236.0 L50,236.0 L60,231.7 L70,203.3 L80,184.7 L90,170.4 L100,158.8 L110,149.0 L120,140.8 L130,133.7 L140,127.7 L150,122.6 L160,118.3 L170,114.8 L180,111.9 L190,109.8 L200,108.2 L210,107.3 L220,107.0 L230,107.3 L240,108.2 L250,109.8 L260,111.9 L270,114.8 L280,118.3 L290,122.6 L300,127.7 L310,133.7 L320,140.8 L330,149.0 L340,158.8 L350,170.4 L360,184.7 L370,203.3 L380,231.7 L390,236.0 L400,236.0 L410,218.0 L420,199.7 L430,186.6 L440,176.6 L450,168.5 L460,162.1 L470,156.9 L480,152.9 L490,149.8 L500,147.7 L510,146.4 L520,146.0 L530,146.4 L540,147.7 L550,149.8 L560,152.9 L570,156.9 L580,162.1 L590,168.5 L600,176.6 L610,186.6 L620,199.7 L630,218.0 L640,236.0 L650,236.0 L660,236.0 L670,236.0 L680,236.0 L690,236.0 L700,236.0 L710,234.5 L720,205.1 L730,185.9 L740,171.0 L750,158.8 L760,148.6 L770,139.9 L780,132.4 L790,125.9 L800,120.4 L810,115.6 L820,111.6 L830,108.3 L840,105.6 L850,103.6 L860,102.1 L870,101.3 L880,101.0 L890,101.3 L900,102.1 L910,103.6 L920,105.6 L930,108.3 L940,111.6 L950,115.6 L960,120.4 L970,125.9 L980,132.4 L990,139.9 L1000,148.6 L1010,158.8 L1020,171.0 L1030,185.9 L1040,205.1 L1050,234.5 L1060,236.0 L1070,236.0 L1080,236.0 L1090,236.0 L1100,236.0 L1110,236.0 L1120,236.0 L1130,236.0 L1140,236.0 L1150,236.0 L1160,236.0 L1170,216.0 L1180,195.9 L1190,181.4 L1200,170.0 L1210,160.8 L1220,153.1 L1230,146.8 L1240,141.5 L1250,137.2 L1260,133.8 L1270,131.3 L1280,129.4 L1290,128.4 L1300,128.0 L1310,128.4 L1320,129.4 L1330,131.3 L1340,133.8 L1350,137.2 L1360,141.5 L1370,146.8 L1380,153.1 L1390,160.8 L1400,170.0 L1410,181.4 L1420,195.9 L1430,216.0 L1440,236.0 L1450,236.0 L1460,236.0 L1470,236.0 L1480,236.0 L1490,236.0 L1500,236.0 L1510,236.0 L1520,235.3 L1530,205.0 L1540,185.1 L1550,169.7 L1560,157.1 L1570,146.4 L1580,137.2 L1590,129.3 L1600,122.4 L1610,116.4 L1620,111.2 L1630,106.8 L1640,103.0 L1650,99.9 L1660,97.4 L1670,95.4 L1680,94.1 L1690,93.3 L1700,93.0 L1710,93.3 L1720,94.1 L1730,95.4 L1740,97.4 L1750,99.9 L1760,103.0 L1770,106.8 L1780,111.2 L1790,116.4 L1800,122.4 L1810,129.3 L1820,137.2 L1830,146.4 L1840,157.1 L1850,169.7 L1860,185.1 L1870,205.0 L1880,235.3 L1890,236.0 L1900,236.0 L1910,236.0 L1920,236.0 L1930,236.0 L1940,236.0 L1950,236.0 L1960,220.0 L1970,200.7 L1980,186.9 L1990,176.2 L2000,167.5 L2010,160.5 L2020,154.7 L2030,150.0 L2040,146.3 L2050,143.5 L2060,141.5 L2070,140.4 L2080,140.0 L2090,140.4 L2100,141.5 L2110,143.5 L2120,146.3 L2130,150.0 L2140,154.7 L2150,160.5 L2160,167.5 L2170,176.2 L2180,186.9 L2190,200.7 L2200,220.0 L2210,236.0 L2220,236.0 L2230,236.0 L2240,236.0 L2250,236.0 L2260,236.0 L2270,236.0 L2280,236.0 L2290,236.0 L2300,236.0 L2310,218.6 L2320,196.0 L2330,179.6 L2340,166.5 L2350,155.6 L2360,146.4 L2370,138.5 L2380,131.8 L2390,126.0 L2400,121.1 L2410,116.9 L2420,113.5 L2430,110.8 L2440,108.7 L2450,107.2 L2460,106.3 L2470,106.0 L2480,106.3 L2490,107.2 L2500,108.7 L2510,110.8 L2520,113.5 L2530,116.9 L2540,121.1 L2550,126.0 L2560,131.8 L2570,138.5 L2580,146.4 L2590,155.6 L2600,166.5 L2610,179.6 L2620,196.0 L2630,218.6 L2640,236.0 L2650,236.0 L2660,236.0 L2670,236.0 L2680,236.0 L2690,236.0 L2700,236.0 L2710,236.0 L2720,236.0 L2730,236.0 L2740,236.0 L2750,236.0 L2760,212.1 L2770,191.2 L2780,176.0 L2790,164.0 L2800,154.2 L2810,146.0 L2820,139.1 L2830,133.3 L2840,128.5 L2850,124.6 L2860,121.4 L2870,119.0 L2880,117.3 L2890,116.3 L2900,116.0 L2910,116.3 L2920,117.3 L2930,119.0 L2940,121.4 L2950,124.6 L2960,128.5 L2970,133.3 L2980,139.1 L2990,146.0 L3000,154.2 L3010,164.0 L3020,176.0 L3030,191.2 L3040,212.1 L3050,236.0 L3060,236.0 L3070,236.0 L3080,236.0 L3090,236.0 L3100,236.0 L3110,236.0 L3120,236.0 L3130,236.0 L3140,236.0 L3150,236.0 L3160,236.0 L3170,236.0 L3180,236.0 L3190,236.0 L3200,236.0 L3210,236.0 L3220,236.0 L3230,236.0 L3240,236.0 L3250,236.0 L3260,231.7 L3270,203.3 L3280,184.7 L3290,170.4 L3300,158.8 L3310,149.0 L3320,140.8 L3330,133.7 L3340,127.7 L3350,122.6 L3360,118.3 L3370,114.8 L3380,111.9 L3390,109.8 L3400,108.2 L3410,107.3 L3420,107.0 L3430,107.3 L3440,108.2 L3450,109.8 L3460,111.9 L3470,114.8 L3480,118.3 L3490,122.6 L3500,127.7 L3510,133.7 L3520,140.8 L3520,260 Z' fill='url(%23b)' filter='url(%23m)'/%3E%3Cpath d='M-320,260 L-320,172.0 L-310,167.1 L-300,162.9 L-290,159.5 L-280,156.8 L-270,154.7 L-260,153.2 L-250,152.3 L-240,152.0 L-230,152.3 L-220,153.2 L-210,154.7 L-200,156.8 L-190,159.5 L-180,162.9 L-170,167.1 L-160,172.0 L-150,177.8 L-140,184.5 L-130,192.4 L-120,199.6 L-110,190.4 L-100,182.5 L-90,175.8 L-80,170.0 L-70,165.1 L-60,160.9 L-50,157.5 L-40,154.8 L-30,152.7 L-20,151.2 L-10,150.3 L0,150.0 L10,150.3 L20,151.2 L30,152.7 L40,154.8 L50,157.5 L60,160.9 L70,165.1 L80,170.0 L90,175.8 L100,182.5 L110,190.4 L120,199.6 L130,210.5 L140,223.6 L150,236.0 L160,236.0 L170,236.0 L180,236.0 L190,236.0 L200,236.0 L210,224.2 L220,213.8 L230,205.1 L240,197.7 L250,191.4 L260,186.1 L270,181.7 L280,178.0 L290,175.1 L300,172.8 L310,171.3 L320,170.3 L330,170.0 L340,170.3 L350,171.3 L360,172.8 L370,175.1 L380,178.0 L390,181.7 L400,186.1 L410,191.4 L420,197.7 L430,205.1 L440,213.8 L450,224.2 L460,236.0 L470,236.0 L480,236.0 L490,222.2 L500,208.1 L510,196.4 L520,186.5 L530,178.1 L540,170.7 L550,164.4 L560,159.0 L570,154.3 L580,150.4 L590,147.2 L600,144.6 L610,142.5 L620,141.1 L630,140.3 L640,140.0 L650,140.3 L660,141.1 L670,142.5 L680,144.6 L690,147.2 L700,150.4 L710,154.3 L720,159.0 L730,164.4 L740,170.7 L750,178.1 L760,186.5 L770,196.4 L780,208.1 L790,222.2 L800,236.0 L810,236.0 L820,236.0 L830,236.0 L840,236.0 L850,236.0 L860,236.0 L870,236.0 L880,236.0 L890,236.0 L900,231.2 L910,220.6 L920,211.7 L930,204.1 L940,197.8 L950,192.4 L960,187.8 L970,184.1 L980,181.1 L990,178.9 L1000,177.3 L1010,176.3 L1020,176.0 L1030,176.3 L1040,177.3 L1050,178.9 L1060,181.1 L1070,184.1 L1080,187.8 L1090,192.4 L1100,197.8 L1110,204.1 L1120,211.7 L1130,220.6 L1140,231.2 L1150,236.0 L1160,236.0 L1170,236.0 L1180,236.0 L1190,236.0 L1200,236.0 L1210,236.0 L1220,236.0 L1230,236.0 L1240,236.0 L1250,236.0 L1260,222.1 L1270,209.4 L1280,198.8 L1290,189.8 L1300,182.1 L1310,175.4 L1320,169.7 L1330,164.9 L1340,160.8 L1350,157.4 L1360,154.7 L1370,152.6 L1380,151.2 L1390,150.3 L1400,150.0 L1410,150.3 L1420,151.2 L1430,152.6 L1440,154.7 L1450,157.4 L1460,160.8 L1470,164.9 L1480,169.7 L1490,175.4 L1500,182.1 L1510,189.8 L1520,198.8 L1530,209.4 L1540,222.1 L1550,236.0 L1560,236.0 L1570,236.0 L1580,236.0 L1590,236.0 L1600,236.0 L1610,236.0 L1620,236.0 L1630,236.0 L1640,236.0 L1650,236.0 L1660,236.0 L1670,236.0 L1680,236.0 L1690,236.0 L1700,226.2 L1710,215.8 L1720,207.1 L1730,199.7 L1740,193.4 L1750,188.1 L1760,183.7 L1770,180.0 L1780,177.1 L1790,174.8 L1800,173.3 L1810,172.3 L1820,172.0 L1830,172.3 L1840,173.3 L1850,174.8 L1860,177.1 L1870,180.0 L1880,183.7 L1890,188.1 L1900,193.4 L1910,199.7 L1920,207.1 L1930,215.8 L1940,226.2 L1950,236.0 L1960,236.0 L1970,236.0 L1980,236.0 L1990,236.0 L2000,236.0 L2010,236.0 L2020,236.0 L2030,236.0 L2040,236.0 L2050,227.9 L2060,213.3 L2070,201.4 L2080,191.3 L2090,182.6 L2100,175.2 L2110,168.8 L2120,163.2 L2130,158.5 L2140,154.5 L2150,151.3 L2160,148.6 L2170,146.6 L2180,145.1 L2190,144.3 L2200,144.0 L2210,144.3 L2220,145.1 L2230,146.6 L2240,148.6 L2250,151.3 L2260,154.5 L2270,158.5 L2280,163.2 L2290,168.8 L2300,175.2 L2310,182.6 L2320,191.3 L2330,201.4 L2340,213.3 L2350,227.9 L2360,236.0 L2370,236.0 L2380,236.0 L2390,236.0 L2400,236.0 L2410,236.0 L2420,236.0 L2430,236.0 L2440,236.0 L2450,236.0 L2460,236.0 L2470,234.0 L2480,222.2 L2490,212.4 L2500,204.0 L2510,196.9 L2520,190.8 L2530,185.7 L2540,181.4 L2550,177.8 L2560,175.0 L2570,172.8 L2580,171.2 L2590,170.3 L2600,170.0 L2610,170.3 L2620,171.2 L2630,172.8 L2640,175.0 L2650,177.8 L2660,181.4 L2670,185.7 L2680,190.8 L2690,196.9 L2700,204.0 L2710,212.4 L2720,222.2 L2730,234.0 L2740,236.0 L2750,236.0 L2760,236.0 L2770,236.0 L2780,236.0 L2790,236.0 L2800,236.0 L2810,236.0 L2820,225.6 L2830,212.5 L2840,201.6 L2850,192.4 L2860,184.5 L2870,177.8 L2880,172.0 L2890,167.1 L2900,162.9 L2910,159.5 L2920,156.8 L2930,154.7 L2940,153.2 L2950,152.3 L2960,152.0 L2970,152.3 L2980,153.2 L2990,154.7 L3000,156.8 L3010,159.5 L3020,162.9 L3030,167.1 L3040,172.0 L3050,177.8 L3060,184.5 L3070,192.4 L3080,199.6 L3090,190.4 L3100,182.5 L3110,175.8 L3120,170.0 L3130,165.1 L3140,160.9 L3150,157.5 L3160,154.8 L3170,152.7 L3180,151.2 L3190,150.3 L3200,150.0 L3210,150.3 L3220,151.2 L3230,152.7 L3240,154.8 L3250,157.5 L3260,160.9 L3270,165.1 L3280,170.0 L3290,175.8 L3300,182.5 L3310,190.4 L3320,199.6 L3330,210.5 L3340,223.6 L3350,236.0 L3360,236.0 L3370,236.0 L3380,236.0 L3390,236.0 L3400,236.0 L3410,224.2 L3420,213.8 L3430,205.1 L3440,197.7 L3450,191.4 L3460,186.1 L3470,181.7 L3480,178.0 L3490,175.1 L3500,172.8 L3510,171.3 L3520,170.3 L3520,260 Z' fill='%23FFFFFF' filter='url(%23n)'/%3E%3C/svg%3E");
  --ss-horizon-night-v2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3200 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.12'/%3E%3Cstop offset='1' stop-color='%23C7D1DD' stop-opacity='0.04'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238A99AC' stop-opacity='0.22'/%3E%3Cstop offset='1' stop-color='%232A3444' stop-opacity='0.4'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C7D1DD' stop-opacity='0.2'/%3E%3Cstop offset='1' stop-color='%23141B26' stop-opacity='0.9'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='-10%' y='-50%' width='120%' height='200%'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3Cfilter id='m' x='-10%' y='-50%' width='120%' height='200%'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-320,260 L-320,74.8 L-310,81.0 L-300,88.0 L-290,96.0 L-280,105.2 L-270,115.7 L-260,128.0 L-250,142.6 L-240,157.5 L-230,143.4 L-220,131.5 L-210,121.4 L-200,112.7 L-190,105.1 L-180,98.4 L-170,92.7 L-160,87.7 L-150,83.4 L-140,79.7 L-130,76.7 L-120,74.3 L-110,72.4 L-100,71.1 L-90,70.3 L-80,70.0 L-70,70.3 L-60,71.1 L-50,72.4 L-40,74.3 L-30,72.3 L-20,67.8 L-10,64.0 L0,60.8 L10,58.0 L20,55.8 L30,54.2 L40,53.0 L50,52.2 L60,52.0 L70,52.2 L80,53.0 L90,54.2 L100,55.8 L110,58.0 L120,60.8 L130,64.0 L140,67.8 L150,72.3 L160,77.3 L170,83.1 L180,89.7 L190,97.1 L200,105.5 L210,115.0 L220,126.0 L230,138.7 L240,153.8 L250,166.0 L260,149.6 L270,136.5 L280,125.6 L290,116.4 L300,108.5 L310,101.8 L320,96.0 L330,91.1 L340,86.9 L350,83.5 L360,80.8 L370,78.7 L380,77.2 L390,76.3 L400,76.0 L410,76.3 L420,77.2 L430,78.7 L440,80.8 L450,83.5 L460,86.9 L470,91.1 L480,96.0 L490,101.8 L500,108.5 L510,116.4 L520,125.6 L530,136.5 L540,149.6 L550,164.2 L560,144.4 L570,128.4 L580,114.8 L590,103.1 L600,92.8 L610,83.6 L620,75.5 L630,68.3 L640,61.8 L650,56.0 L660,50.9 L670,46.3 L680,42.4 L690,38.9 L700,36.0 L710,33.5 L720,31.5 L730,30.0 L740,28.9 L750,28.2 L760,28.0 L770,28.2 L780,28.9 L790,30.0 L800,31.5 L810,33.5 L820,36.0 L830,38.9 L840,42.4 L850,46.3 L860,50.9 L870,56.0 L880,61.8 L890,68.3 L900,75.5 L910,83.6 L920,92.8 L930,103.1 L940,114.8 L950,128.4 L960,144.4 L970,164.2 L980,190.9 L990,236.0 L1000,189.2 L1010,165.1 L1020,147.5 L1030,133.4 L1040,121.5 L1050,111.4 L1060,102.7 L1070,95.1 L1080,88.4 L1090,82.7 L1100,77.7 L1110,73.4 L1120,69.7 L1130,66.7 L1140,64.3 L1150,62.4 L1160,61.1 L1170,60.3 L1180,60.0 L1190,60.3 L1200,61.1 L1210,62.4 L1220,64.3 L1230,66.7 L1240,69.7 L1250,73.4 L1260,77.7 L1270,82.7 L1280,88.4 L1290,95.1 L1300,102.7 L1310,111.4 L1320,121.5 L1330,133.4 L1340,147.5 L1350,147.8 L1360,131.3 L1370,117.4 L1380,105.3 L1390,94.6 L1400,85.1 L1410,76.7 L1420,69.1 L1430,62.3 L1440,56.2 L1450,50.7 L1460,45.8 L1470,41.5 L1480,37.7 L1490,34.4 L1500,31.6 L1510,29.3 L1520,27.4 L1530,25.9 L1540,24.8 L1550,24.2 L1560,24.0 L1570,24.2 L1580,24.8 L1590,25.9 L1600,27.4 L1610,29.3 L1620,31.6 L1630,34.4 L1640,37.7 L1650,41.5 L1660,45.8 L1670,50.7 L1680,56.2 L1690,62.3 L1700,69.1 L1710,76.7 L1720,85.1 L1730,94.6 L1740,105.3 L1750,117.4 L1760,131.3 L1770,147.8 L1780,168.1 L1790,195.4 L1800,236.0 L1810,236.0 L1820,202.5 L1830,173.1 L1840,153.9 L1850,139.0 L1860,126.8 L1870,116.6 L1880,107.9 L1890,100.4 L1900,93.9 L1910,88.4 L1920,83.6 L1930,79.6 L1940,76.3 L1950,73.6 L1960,71.6 L1970,70.1 L1980,69.3 L1990,69.0 L2000,69.3 L2010,70.1 L2020,71.6 L2030,73.6 L2040,76.3 L2050,79.6 L2060,83.6 L2070,88.4 L2080,93.9 L2090,100.4 L2100,107.9 L2110,116.6 L2120,126.8 L2130,139.0 L2140,153.9 L2150,152.9 L2160,135.5 L2170,121.0 L2180,108.6 L2190,97.8 L2200,88.3 L2210,79.9 L2220,72.4 L2230,65.7 L2240,59.7 L2250,54.4 L2260,49.8 L2270,45.7 L2280,42.2 L2290,39.1 L2300,36.6 L2310,34.6 L2320,33.0 L2330,31.9 L2340,31.2 L2350,31.0 L2360,31.2 L2370,31.9 L2380,33.0 L2390,34.6 L2400,36.6 L2410,39.1 L2420,42.2 L2430,45.7 L2440,49.8 L2450,54.4 L2460,59.7 L2470,65.7 L2480,72.4 L2490,79.9 L2500,88.3 L2510,97.8 L2520,108.6 L2530,121.0 L2540,135.5 L2550,152.9 L2560,175.2 L2570,208.8 L2580,236.0 L2590,185.6 L2600,160.8 L2610,142.6 L2620,128.0 L2630,115.7 L2640,105.2 L2650,96.0 L2660,88.0 L2670,81.0 L2680,74.8 L2690,69.4 L2700,64.7 L2710,60.7 L2720,57.2 L2730,54.4 L2740,52.0 L2750,50.3 L2760,49.0 L2770,48.3 L2780,48.0 L2790,48.3 L2800,49.0 L2810,50.3 L2820,52.0 L2830,54.4 L2840,57.2 L2850,60.7 L2860,64.7 L2870,69.4 L2880,74.8 L2890,81.0 L2900,88.0 L2910,96.0 L2920,105.2 L2930,115.7 L2940,128.0 L2950,142.6 L2960,157.5 L2970,143.4 L2980,131.5 L2990,121.4 L3000,112.7 L3010,105.1 L3020,98.4 L3030,92.7 L3040,87.7 L3050,83.4 L3060,79.7 L3070,76.7 L3080,74.3 L3090,72.4 L3100,71.1 L3110,70.3 L3120,70.0 L3130,70.3 L3140,71.1 L3150,72.4 L3160,74.3 L3170,72.3 L3180,67.8 L3190,64.0 L3200,60.8 L3210,58.0 L3220,55.8 L3230,54.2 L3240,53.0 L3250,52.2 L3260,52.0 L3270,52.2 L3280,53.0 L3290,54.2 L3300,55.8 L3310,58.0 L3320,60.8 L3330,64.0 L3340,67.8 L3350,72.3 L3360,77.3 L3370,83.1 L3380,89.7 L3390,97.1 L3400,105.5 L3410,115.0 L3420,126.0 L3430,138.7 L3440,153.8 L3450,166.0 L3460,149.6 L3470,136.5 L3480,125.6 L3490,116.4 L3500,108.5 L3510,101.8 L3520,96.0 L3520,260 Z' fill='url(%23a)' filter='url(%23f)'/%3E%3Cpath d='M-320,260 L-320,117.3 L-310,116.3 L-300,116.0 L-290,116.3 L-280,117.3 L-270,119.0 L-260,121.4 L-250,124.6 L-240,128.5 L-230,133.3 L-220,139.1 L-210,146.0 L-200,154.2 L-190,164.0 L-180,176.0 L-170,191.2 L-160,212.1 L-150,236.0 L-140,236.0 L-130,236.0 L-120,236.0 L-110,236.0 L-100,236.0 L-90,236.0 L-80,236.0 L-70,236.0 L-60,236.0 L-50,236.0 L-40,236.0 L-30,236.0 L-20,236.0 L-10,236.0 L0,236.0 L10,236.0 L20,236.0 L30,236.0 L40,236.0 L50,236.0 L60,231.7 L70,203.3 L80,184.7 L90,170.4 L100,158.8 L110,149.0 L120,140.8 L130,133.7 L140,127.7 L150,122.6 L160,118.3 L170,114.8 L180,111.9 L190,109.8 L200,108.2 L210,107.3 L220,107.0 L230,107.3 L240,108.2 L250,109.8 L260,111.9 L270,114.8 L280,118.3 L290,122.6 L300,127.7 L310,133.7 L320,140.8 L330,149.0 L340,158.8 L350,170.4 L360,184.7 L370,203.3 L380,231.7 L390,236.0 L400,236.0 L410,218.0 L420,199.7 L430,186.6 L440,176.6 L450,168.5 L460,162.1 L470,156.9 L480,152.9 L490,149.8 L500,147.7 L510,146.4 L520,146.0 L530,146.4 L540,147.7 L550,149.8 L560,152.9 L570,156.9 L580,162.1 L590,168.5 L600,176.6 L610,186.6 L620,199.7 L630,218.0 L640,236.0 L650,236.0 L660,236.0 L670,236.0 L680,236.0 L690,236.0 L700,236.0 L710,234.5 L720,205.1 L730,185.9 L740,171.0 L750,158.8 L760,148.6 L770,139.9 L780,132.4 L790,125.9 L800,120.4 L810,115.6 L820,111.6 L830,108.3 L840,105.6 L850,103.6 L860,102.1 L870,101.3 L880,101.0 L890,101.3 L900,102.1 L910,103.6 L920,105.6 L930,108.3 L940,111.6 L950,115.6 L960,120.4 L970,125.9 L980,132.4 L990,139.9 L1000,148.6 L1010,158.8 L1020,171.0 L1030,185.9 L1040,205.1 L1050,234.5 L1060,236.0 L1070,236.0 L1080,236.0 L1090,236.0 L1100,236.0 L1110,236.0 L1120,236.0 L1130,236.0 L1140,236.0 L1150,236.0 L1160,236.0 L1170,216.0 L1180,195.9 L1190,181.4 L1200,170.0 L1210,160.8 L1220,153.1 L1230,146.8 L1240,141.5 L1250,137.2 L1260,133.8 L1270,131.3 L1280,129.4 L1290,128.4 L1300,128.0 L1310,128.4 L1320,129.4 L1330,131.3 L1340,133.8 L1350,137.2 L1360,141.5 L1370,146.8 L1380,153.1 L1390,160.8 L1400,170.0 L1410,181.4 L1420,195.9 L1430,216.0 L1440,236.0 L1450,236.0 L1460,236.0 L1470,236.0 L1480,236.0 L1490,236.0 L1500,236.0 L1510,236.0 L1520,235.3 L1530,205.0 L1540,185.1 L1550,169.7 L1560,157.1 L1570,146.4 L1580,137.2 L1590,129.3 L1600,122.4 L1610,116.4 L1620,111.2 L1630,106.8 L1640,103.0 L1650,99.9 L1660,97.4 L1670,95.4 L1680,94.1 L1690,93.3 L1700,93.0 L1710,93.3 L1720,94.1 L1730,95.4 L1740,97.4 L1750,99.9 L1760,103.0 L1770,106.8 L1780,111.2 L1790,116.4 L1800,122.4 L1810,129.3 L1820,137.2 L1830,146.4 L1840,157.1 L1850,169.7 L1860,185.1 L1870,205.0 L1880,235.3 L1890,236.0 L1900,236.0 L1910,236.0 L1920,236.0 L1930,236.0 L1940,236.0 L1950,236.0 L1960,220.0 L1970,200.7 L1980,186.9 L1990,176.2 L2000,167.5 L2010,160.5 L2020,154.7 L2030,150.0 L2040,146.3 L2050,143.5 L2060,141.5 L2070,140.4 L2080,140.0 L2090,140.4 L2100,141.5 L2110,143.5 L2120,146.3 L2130,150.0 L2140,154.7 L2150,160.5 L2160,167.5 L2170,176.2 L2180,186.9 L2190,200.7 L2200,220.0 L2210,236.0 L2220,236.0 L2230,236.0 L2240,236.0 L2250,236.0 L2260,236.0 L2270,236.0 L2280,236.0 L2290,236.0 L2300,236.0 L2310,218.6 L2320,196.0 L2330,179.6 L2340,166.5 L2350,155.6 L2360,146.4 L2370,138.5 L2380,131.8 L2390,126.0 L2400,121.1 L2410,116.9 L2420,113.5 L2430,110.8 L2440,108.7 L2450,107.2 L2460,106.3 L2470,106.0 L2480,106.3 L2490,107.2 L2500,108.7 L2510,110.8 L2520,113.5 L2530,116.9 L2540,121.1 L2550,126.0 L2560,131.8 L2570,138.5 L2580,146.4 L2590,155.6 L2600,166.5 L2610,179.6 L2620,196.0 L2630,218.6 L2640,236.0 L2650,236.0 L2660,236.0 L2670,236.0 L2680,236.0 L2690,236.0 L2700,236.0 L2710,236.0 L2720,236.0 L2730,236.0 L2740,236.0 L2750,236.0 L2760,212.1 L2770,191.2 L2780,176.0 L2790,164.0 L2800,154.2 L2810,146.0 L2820,139.1 L2830,133.3 L2840,128.5 L2850,124.6 L2860,121.4 L2870,119.0 L2880,117.3 L2890,116.3 L2900,116.0 L2910,116.3 L2920,117.3 L2930,119.0 L2940,121.4 L2950,124.6 L2960,128.5 L2970,133.3 L2980,139.1 L2990,146.0 L3000,154.2 L3010,164.0 L3020,176.0 L3030,191.2 L3040,212.1 L3050,236.0 L3060,236.0 L3070,236.0 L3080,236.0 L3090,236.0 L3100,236.0 L3110,236.0 L3120,236.0 L3130,236.0 L3140,236.0 L3150,236.0 L3160,236.0 L3170,236.0 L3180,236.0 L3190,236.0 L3200,236.0 L3210,236.0 L3220,236.0 L3230,236.0 L3240,236.0 L3250,236.0 L3260,231.7 L3270,203.3 L3280,184.7 L3290,170.4 L3300,158.8 L3310,149.0 L3320,140.8 L3330,133.7 L3340,127.7 L3350,122.6 L3360,118.3 L3370,114.8 L3380,111.9 L3390,109.8 L3400,108.2 L3410,107.3 L3420,107.0 L3430,107.3 L3440,108.2 L3450,109.8 L3460,111.9 L3470,114.8 L3480,118.3 L3490,122.6 L3500,127.7 L3510,133.7 L3520,140.8 L3520,260 Z' fill='url(%23b)' filter='url(%23m)'/%3E%3Cpath d='M-320,260 L-320,172.0 L-310,167.1 L-300,162.9 L-290,159.5 L-280,156.8 L-270,154.7 L-260,153.2 L-250,152.3 L-240,152.0 L-230,152.3 L-220,153.2 L-210,154.7 L-200,156.8 L-190,159.5 L-180,162.9 L-170,167.1 L-160,172.0 L-150,177.8 L-140,184.5 L-130,192.4 L-120,199.6 L-110,190.4 L-100,182.5 L-90,175.8 L-80,170.0 L-70,165.1 L-60,160.9 L-50,157.5 L-40,154.8 L-30,152.7 L-20,151.2 L-10,150.3 L0,150.0 L10,150.3 L20,151.2 L30,152.7 L40,154.8 L50,157.5 L60,160.9 L70,165.1 L80,170.0 L90,175.8 L100,182.5 L110,190.4 L120,199.6 L130,210.5 L140,223.6 L150,236.0 L160,236.0 L170,236.0 L180,236.0 L190,236.0 L200,236.0 L210,224.2 L220,213.8 L230,205.1 L240,197.7 L250,191.4 L260,186.1 L270,181.7 L280,178.0 L290,175.1 L300,172.8 L310,171.3 L320,170.3 L330,170.0 L340,170.3 L350,171.3 L360,172.8 L370,175.1 L380,178.0 L390,181.7 L400,186.1 L410,191.4 L420,197.7 L430,205.1 L440,213.8 L450,224.2 L460,236.0 L470,236.0 L480,236.0 L490,222.2 L500,208.1 L510,196.4 L520,186.5 L530,178.1 L540,170.7 L550,164.4 L560,159.0 L570,154.3 L580,150.4 L590,147.2 L600,144.6 L610,142.5 L620,141.1 L630,140.3 L640,140.0 L650,140.3 L660,141.1 L670,142.5 L680,144.6 L690,147.2 L700,150.4 L710,154.3 L720,159.0 L730,164.4 L740,170.7 L750,178.1 L760,186.5 L770,196.4 L780,208.1 L790,222.2 L800,236.0 L810,236.0 L820,236.0 L830,236.0 L840,236.0 L850,236.0 L860,236.0 L870,236.0 L880,236.0 L890,236.0 L900,231.2 L910,220.6 L920,211.7 L930,204.1 L940,197.8 L950,192.4 L960,187.8 L970,184.1 L980,181.1 L990,178.9 L1000,177.3 L1010,176.3 L1020,176.0 L1030,176.3 L1040,177.3 L1050,178.9 L1060,181.1 L1070,184.1 L1080,187.8 L1090,192.4 L1100,197.8 L1110,204.1 L1120,211.7 L1130,220.6 L1140,231.2 L1150,236.0 L1160,236.0 L1170,236.0 L1180,236.0 L1190,236.0 L1200,236.0 L1210,236.0 L1220,236.0 L1230,236.0 L1240,236.0 L1250,236.0 L1260,222.1 L1270,209.4 L1280,198.8 L1290,189.8 L1300,182.1 L1310,175.4 L1320,169.7 L1330,164.9 L1340,160.8 L1350,157.4 L1360,154.7 L1370,152.6 L1380,151.2 L1390,150.3 L1400,150.0 L1410,150.3 L1420,151.2 L1430,152.6 L1440,154.7 L1450,157.4 L1460,160.8 L1470,164.9 L1480,169.7 L1490,175.4 L1500,182.1 L1510,189.8 L1520,198.8 L1530,209.4 L1540,222.1 L1550,236.0 L1560,236.0 L1570,236.0 L1580,236.0 L1590,236.0 L1600,236.0 L1610,236.0 L1620,236.0 L1630,236.0 L1640,236.0 L1650,236.0 L1660,236.0 L1670,236.0 L1680,236.0 L1690,236.0 L1700,226.2 L1710,215.8 L1720,207.1 L1730,199.7 L1740,193.4 L1750,188.1 L1760,183.7 L1770,180.0 L1780,177.1 L1790,174.8 L1800,173.3 L1810,172.3 L1820,172.0 L1830,172.3 L1840,173.3 L1850,174.8 L1860,177.1 L1870,180.0 L1880,183.7 L1890,188.1 L1900,193.4 L1910,199.7 L1920,207.1 L1930,215.8 L1940,226.2 L1950,236.0 L1960,236.0 L1970,236.0 L1980,236.0 L1990,236.0 L2000,236.0 L2010,236.0 L2020,236.0 L2030,236.0 L2040,236.0 L2050,227.9 L2060,213.3 L2070,201.4 L2080,191.3 L2090,182.6 L2100,175.2 L2110,168.8 L2120,163.2 L2130,158.5 L2140,154.5 L2150,151.3 L2160,148.6 L2170,146.6 L2180,145.1 L2190,144.3 L2200,144.0 L2210,144.3 L2220,145.1 L2230,146.6 L2240,148.6 L2250,151.3 L2260,154.5 L2270,158.5 L2280,163.2 L2290,168.8 L2300,175.2 L2310,182.6 L2320,191.3 L2330,201.4 L2340,213.3 L2350,227.9 L2360,236.0 L2370,236.0 L2380,236.0 L2390,236.0 L2400,236.0 L2410,236.0 L2420,236.0 L2430,236.0 L2440,236.0 L2450,236.0 L2460,236.0 L2470,234.0 L2480,222.2 L2490,212.4 L2500,204.0 L2510,196.9 L2520,190.8 L2530,185.7 L2540,181.4 L2550,177.8 L2560,175.0 L2570,172.8 L2580,171.2 L2590,170.3 L2600,170.0 L2610,170.3 L2620,171.2 L2630,172.8 L2640,175.0 L2650,177.8 L2660,181.4 L2670,185.7 L2680,190.8 L2690,196.9 L2700,204.0 L2710,212.4 L2720,222.2 L2730,234.0 L2740,236.0 L2750,236.0 L2760,236.0 L2770,236.0 L2780,236.0 L2790,236.0 L2800,236.0 L2810,236.0 L2820,225.6 L2830,212.5 L2840,201.6 L2850,192.4 L2860,184.5 L2870,177.8 L2880,172.0 L2890,167.1 L2900,162.9 L2910,159.5 L2920,156.8 L2930,154.7 L2940,153.2 L2950,152.3 L2960,152.0 L2970,152.3 L2980,153.2 L2990,154.7 L3000,156.8 L3010,159.5 L3020,162.9 L3030,167.1 L3040,172.0 L3050,177.8 L3060,184.5 L3070,192.4 L3080,199.6 L3090,190.4 L3100,182.5 L3110,175.8 L3120,170.0 L3130,165.1 L3140,160.9 L3150,157.5 L3160,154.8 L3170,152.7 L3180,151.2 L3190,150.3 L3200,150.0 L3210,150.3 L3220,151.2 L3230,152.7 L3240,154.8 L3250,157.5 L3260,160.9 L3270,165.1 L3280,170.0 L3290,175.8 L3300,182.5 L3310,190.4 L3320,199.6 L3330,210.5 L3340,223.6 L3350,236.0 L3360,236.0 L3370,236.0 L3380,236.0 L3390,236.0 L3400,236.0 L3410,224.2 L3420,213.8 L3430,205.1 L3440,197.7 L3450,191.4 L3460,186.1 L3470,181.7 L3480,178.0 L3490,175.1 L3500,172.8 L3510,171.3 L3520,170.3 L3520,260 Z' fill='url(%23c)'/%3E%3C/svg%3E");
}

/* ==== ss-website-base.css ==== */
/* Base: reset, document typography, focus and accessibility primitives. */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ss-header-h) + 16px);
  background: var(--ss-color-white);
}

body {
  margin: 0;
  font-family: var(--ss-font-sans);
  font-size: var(--ss-size-body);
  line-height: 1.6;
  color: var(--ss-text-1);
  background: var(--ss-color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

:lang(ar) body,
[dir="rtl"] body,
[lang="ar"] { font-family: var(--ss-font-arabic); }
[lang="en"] { font-family: var(--ss-font-sans); }

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }  /* zero specificity: component padding always wins */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }
strong { font-weight: 600; }
[hidden] { display: none !important; }

::selection { background: var(--ss-color-blue-20); }

/* Focus — always visible for keyboard users, SkyStruct blue. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ss-color-blue);
  outline-offset: 2px;
  border-radius: var(--ss-radius-xs);
}
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) :focus-visible,
.ss-website-section--navy :focus-visible,
.ss-website-footer :focus-visible { outline-color: var(--ss-color-blue-bright); }

.ss-website-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.ss-website-skip-link {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: calc(var(--ss-z-transition) + 1);
  padding: 10px 16px;
  border-radius: var(--ss-radius-control);
  background: var(--ss-color-ink);
  color: var(--ss-color-white);
  font-weight: 600;
  font-size: var(--ss-size-small);
  transform: translateY(-160%);
  transition: transform var(--ss-dur-fast) var(--ss-ease-out);
}
.ss-website-skip-link:focus-visible { transform: none; }

.ss-website-main { display: block; }
.ss-website-main:focus { outline: none; }

.ss-website-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ss-website-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir="rtl"] .ss-website-icon--directional { transform: scaleX(-1); }
/* Product UI fragments stay LTR inside Arabic pages: their arrows keep pointing forward. */
[dir="rtl"] [dir="ltr"] .ss-website-icon--directional { transform: none; }

/* Arabic typography: no negative tracking (it breaks letter joining),
   taller line height for ascenders/descenders. */
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] body { line-height: 1.75; }

/* SkyStruct scrollbar: slim, brand-blue thumb on a transparent track. */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--ss-radius-pill); background: linear-gradient(180deg, var(--ss-color-blue), var(--ss-color-navy)) padding-box; }
  ::-webkit-scrollbar-thumb:hover { border-width: 2px; }
  ::-webkit-scrollbar-corner { background: transparent; }
}
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: rgba(0, 113, 206, 0.7) transparent; }
}

/* Hero display: the largest step, reserved for page-opening statements. */
.ss-website-title--hero { font-size: var(--ss-size-hero); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; }
[lang="ar"] .ss-website-title--hero { line-height: 1.25; letter-spacing: 0; }
/* Masked word reveal (words split by scenes.js). */
.ss-website-split__word { display: inline-block; overflow: hidden; padding-block: 0.08em 0.12em; margin-block: -0.08em -0.12em; vertical-align: top; }
.ss-website-split__inner { display: inline-block; animation: ss-split-in 650ms var(--ss-ease-out) calc(var(--ss-entry, 0ms) + 80ms + var(--ss-i) * 45ms) both; }
@keyframes ss-split-in { from { transform: translateY(110%); } }

/* ==== ss-website-layout.css ==== */
/* Layout primitives: containers, section surfaces and shared compositions. */
.ss-website-container {
  width: 100%;
  max-width: calc(var(--ss-container) + var(--ss-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--ss-gutter);
}

/* ---------- Page canvas ----------
   Light sections are translucent: the page canvas (white) and the page environment
   (clouds + light, see .ss-website-environment) show through them, so the page reads as
   one continuous space. Dark sections are solid fields that enter and leave through
   cloud horizons. */
.ss-website-main { position: relative; isolation: isolate; overflow-x: clip; background: var(--ss-color-white); }
.ss-website-section {
  position: relative;
  padding-block: var(--ss-section-y);
  isolation: isolate;
}
.ss-website-section--compact { padding-block: var(--ss-section-y-compact); }
.ss-website-section--large { padding-block: var(--ss-section-y-large); }
.ss-website-section--white { background: transparent; }
/* Paper: a soft cool tint that fades in and out — never a seam. */
.ss-website-section--paper {
  --ss-blend: clamp(96px, 12vw, 200px);
  background: linear-gradient(180deg, rgba(238, 244, 251, 0) 0, rgba(238, 244, 251, 0.72) var(--ss-blend), rgba(238, 244, 251, 0.72) calc(100% - var(--ss-blend)), rgba(238, 244, 251, 0) 100%);
}
.ss-website-section--dark,
.ss-website-section--navy { color: var(--ss-text-inverse-1); overflow-x: clip; }
.ss-website-section--dark { background-color: var(--ss-color-night); }
.ss-website-section--navy { background-color: var(--ss-color-navy); }
/* Fine grain on dark fields prevents gradient banding. */
.ss-website-section--dark, .ss-website-section--navy, .ss-website-footer { background-image: var(--ss-grain); background-size: 180px; }

/* ---------- Transition system (automatic; reuse, never invent per page) ----------
   1. blend   — paper tints fade in and out over the shared canvas; light sections never meet at a seam.
   2. horizon — a dark field meets the light page through drifting cloud layers (the brand's cloud
                base): at its bottom when a light section follows, at its top when it follows a light
                section, and above the footer when a page ends light. Dark → dark continues unbroken.
                Applied purely from section order (works for Shopify's section wrappers too).
   3. inset   — dark content held as a large card inside a light section.
   4. environment — page-level clouds and light continue behind every light section. */
:root { --ss-horizon: clamp(96px, 11vw, 190px); }
/* Horizon strips are wider than the page and drift physically leftwards, so they are anchored
   with physical left: 0 (not inset-inline-start) — in RTL a right anchor would open a gap. */
@keyframes ss-horizon-drift { to { transform: translateX(calc(var(--ss-horizon) * var(--ss-horizon-ratio) * -1)); } }
@keyframes ss-horizon-drift-top { to { transform: scaleY(-1) translateX(calc(var(--ss-horizon) * var(--ss-horizon-ratio) * -1)); } }

/* Apply horizons from section order (D = a dark field). Source: sections are siblings in
   <main>; Shopify: each sits in a .shopify-section wrapper — both are covered. */
/* Top horizon: every dark section … */
.ss-website-main :is(.ss-website-section--dark, .ss-website-section--navy) { padding-top: calc(var(--ss-section-y) + var(--ss-horizon) * 0.7); }
.ss-website-main :is(.ss-website-section--dark, .ss-website-section--navy)::before {
  content: "";
  position: absolute; left: 0; top: -1px; z-index: -1;
  width: calc(100% + var(--ss-horizon) * var(--ss-horizon-ratio));
  height: var(--ss-horizon);
  background: var(--ss-horizon-light) left bottom / auto 100% repeat-x;
  transform: scaleY(-1);
  animation: ss-horizon-drift-top 170s linear infinite;
  pointer-events: none;
}
/* … except the first on a page and those that follow another dark section. */
.ss-website-main > .ss-website-environment + :is(.ss-website-section--dark, .ss-website-section--navy),
.ss-website-main > .ss-website-environment + * > :is(.ss-website-section--dark, .ss-website-section--navy):first-child,
.ss-website-main > .ss-website-environment + * > :first-child > :is(.ss-website-section--dark, .ss-website-section--navy):first-child,
:is(.ss-website-section--dark, .ss-website-section--navy) + :is(.ss-website-section--dark, .ss-website-section--navy),
.shopify-section:has(> :is(.ss-website-section--dark, .ss-website-section--navy):last-child) + .shopify-section > :is(.ss-website-section--dark, .ss-website-section--navy):first-child { padding-top: var(--ss-section-y); }
.ss-website-main > .ss-website-environment + :is(.ss-website-section--dark, .ss-website-section--navy)::before,
.ss-website-main > .ss-website-environment + * > :is(.ss-website-section--dark, .ss-website-section--navy):first-child::before,
.ss-website-main > .ss-website-environment + * > :first-child > :is(.ss-website-section--dark, .ss-website-section--navy):first-child::before,
:is(.ss-website-section--dark, .ss-website-section--navy) + :is(.ss-website-section--dark, .ss-website-section--navy)::before,
.shopify-section:has(> :is(.ss-website-section--dark, .ss-website-section--navy):last-child) + .shopify-section > :is(.ss-website-section--dark, .ss-website-section--navy):first-child::before { content: none; }
/* Bottom horizon: dark sections followed by a light section. */
:is(.ss-website-section--dark, .ss-website-section--navy):has(+ .ss-website-section:not(.ss-website-section--dark, .ss-website-section--navy)),
.shopify-section:has(+ .shopify-section > .ss-website-section:first-child:not(.ss-website-section--dark, .ss-website-section--navy)) > :is(.ss-website-section--dark, .ss-website-section--navy):last-child { padding-bottom: calc(var(--ss-section-y) + var(--ss-horizon) * 0.8); }
:is(.ss-website-section--dark, .ss-website-section--navy):has(+ .ss-website-section:not(.ss-website-section--dark, .ss-website-section--navy))::after,
.shopify-section:has(+ .shopify-section > .ss-website-section:first-child:not(.ss-website-section--dark, .ss-website-section--navy)) > :is(.ss-website-section--dark, .ss-website-section--navy):last-child::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; z-index: -1;
  width: calc(100% + var(--ss-horizon) * var(--ss-horizon-ratio));
  height: var(--ss-horizon);
  background: var(--ss-horizon-light) left bottom / auto 100% repeat-x;
  animation: ss-horizon-drift 140s linear infinite;
  pointer-events: none;
}
/* Feather: the field's outer edge dissolves into the page canvas (no painted white band). */
:is(.ss-website-section--dark, .ss-website-section--navy) {
  -webkit-mask-image: linear-gradient(to bottom, transparent -1px, #000 var(--ss-fade-top, 0px), #000 calc(100% - var(--ss-fade-bottom, 0px)), transparent calc(100% + 1px));
  mask-image: linear-gradient(to bottom, transparent -1px, #000 var(--ss-fade-top, 0px), #000 calc(100% - var(--ss-fade-bottom, 0px)), transparent calc(100% + 1px));
}
.ss-website-main :is(.ss-website-section--dark, .ss-website-section--navy) { --ss-fade-top: calc(var(--ss-horizon) * 0.32); }
.ss-website-main > .ss-website-environment + :is(.ss-website-section--dark, .ss-website-section--navy),
.ss-website-main > .ss-website-environment + * > :is(.ss-website-section--dark, .ss-website-section--navy):first-child,
.ss-website-main > .ss-website-environment + * > :first-child > :is(.ss-website-section--dark, .ss-website-section--navy):first-child,
:is(.ss-website-section--dark, .ss-website-section--navy) + :is(.ss-website-section--dark, .ss-website-section--navy),
.shopify-section:has(> :is(.ss-website-section--dark, .ss-website-section--navy):last-child) + .shopify-section > :is(.ss-website-section--dark, .ss-website-section--navy):first-child { --ss-fade-top: 0px; }
:is(.ss-website-section--dark, .ss-website-section--navy):has(+ .ss-website-section:not(.ss-website-section--dark, .ss-website-section--navy)),
.shopify-section:has(+ .shopify-section > .ss-website-section:first-child:not(.ss-website-section--dark, .ss-website-section--navy)) > :is(.ss-website-section--dark, .ss-website-section--navy):last-child { --ss-fade-bottom: calc(var(--ss-horizon) * 0.32); }

/* Light sections right after a horizon need less top space: the clouds already separate them. */
:is(.ss-website-section--dark, .ss-website-section--navy) + .ss-website-section:not(.ss-website-section--dark, .ss-website-section--navy),
.shopify-section:has(> :is(.ss-website-section--dark, .ss-website-section--navy):last-child) + .shopify-section > .ss-website-section:first-child:not(.ss-website-section--dark, .ss-website-section--navy) { padding-top: calc(var(--ss-section-y) * 0.55); }
@media (prefers-reduced-motion: reduce) { .ss-website-main :is(.ss-website-section--dark, .ss-website-section--navy)::before, .ss-website-main :is(.ss-website-section--dark, .ss-website-section--navy)::after { animation: none; } }

.ss-website-inset {  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 1.5rem + 3.5vw, 88px) clamp(20px, 0.5rem + 3.5vw, 72px);
  border-radius: var(--ss-radius-inset);
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(0, 113, 206, 0.22), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(0, 31, 84, 0.8), transparent 70%),
    var(--ss-color-night);
  color: var(--ss-text-inverse-1);
  box-shadow: var(--ss-highlight-inner), 0 40px 90px rgba(2, 4, 15, 0.18);
}
.ss-website-inset::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, rgba(77, 163, 238, 0.45), rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.02));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.ss-website-inset .ss-website-lead { color: var(--ss-text-inverse-2); }

@media (max-width: 767px) { :root { --ss-radius-inset: 20px; } }

/* Split: heading column + prose column */
.ss-website-split {
  display: grid;
  gap: var(--ss-space-6) var(--ss-space-8);
  align-items: start;
}
@media (min-width: 900px) {
  .ss-website-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.ss-website-split__lead { display: grid; gap: var(--ss-space-6); }
.ss-website-split__lead > .ss-website-section-header:last-child { margin-bottom: 0; }  /* the split gap already separates it from its prose */

.ss-website-prose { display: grid; gap: var(--ss-space-4); max-width: var(--ss-measure); color: var(--ss-text-2); }
.ss-website-prose p { font-size: 1.0625rem; }

.ss-website-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss-space-3);
}
.ss-website-actions--center { justify-content: center; margin-top: var(--ss-space-7); }

/* ---------- Phone snap rows ----------
   Peer card groups become a horizontal, snapping row on phones (the next card peeks in),
   so pages stay compact. Used only for groups of equals — never for primary sequences. */
@media (max-width: 767px) {
  .ss-website-main .ss-website-plans {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--ss-gutter) * -1);
    padding: 20px var(--ss-gutter) 44px;
    margin-block: -16px -30px;
    --ss-plan-shadow: 0 1px 2px rgba(2, 4, 15, 0.05), 0 10px 22px rgba(2, 4, 15, 0.08);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ss-gutter);
    scrollbar-width: none;
  }
  .ss-website-plans::-webkit-scrollbar { display: none; }
  .ss-website-plans > * {
    flex: 0 0 min(84%, 340px);
    scroll-snap-align: start;
  }
}
/* Snap rows must never widen their grid/flex parents. */
:is(.ss-website-worlds, .ss-website-worlds__panels, .ss-website-worlds__panel, .ss-website-features, .ss-website-split > *) { min-width: 0; }
/* Consecutive dark fields overlap by a pixel so sub-pixel edges never let the canvas show through. */
:is(.ss-website-section--dark, .ss-website-section--navy) + :is(.ss-website-section--dark, .ss-website-section--navy),
.shopify-section:has(> :is(.ss-website-section--dark, .ss-website-section--navy):last-child) + .shopify-section > :is(.ss-website-section--dark, .ss-website-section--navy):first-child { margin-top: -1px; }
.ss-website-footer { margin-top: -1px; }

/* Plan cards inside the phone swipe row: a tighter shadow that fits the row's side gutters. */
@media (max-width: 767px) { .ss-website-main .ss-website-plans > .ss-website-plan { box-shadow: var(--ss-plan-shadow), 0 0 0 1px var(--ss-line); } .ss-website-main .ss-website-plans > .ss-website-plan.is-recommended { box-shadow: var(--ss-plan-shadow), 0 0 0 3px rgba(0, 113, 206, 0.16); } }

/* The first section of a page always clears the floating header (the section rhythm alone is
   smaller than the header on phones). */
@media (max-width: 1023px) {
  :is(.ss-website-main > .ss-website-section:first-child, .ss-website-main > .ss-website-environment:first-child + .ss-website-section, .ss-website-main > .ss-website-environment:first-child + :not(section) > .ss-website-section:first-child, .ss-website-main > .shopify-section:first-of-type > .ss-website-section:first-child) { padding-top: max(var(--ss-hero-pt, 0px), calc(var(--ss-header-h) + 36px)); }
}

/* ==== ss-website-backdrop.css ==== */
/* SkyStruct backdrop language: aurora light, glass cloud forms, slat structures.
   Used by heroes, CTA, footer and storytelling sections. Never a grid. */
.ss-website-backdrop {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --ss-aurora-a: rgba(0, 113, 206, 0.42);
  --ss-aurora-b: rgba(0, 31, 84, 0.95);
  --ss-aurora-c: rgba(77, 163, 238, 0.28);
  --ss-cloud-top: rgba(173, 208, 245, 0.2);
  --ss-cloud-bottom: rgba(0, 113, 206, 0);
  --ss-cloud-edge: rgba(255, 255, 255, 0.55);
  --ss-structure-color: rgba(77, 163, 238, 0.55);
}
.ss-website-backdrop--light {
  --ss-aurora-a: rgba(0, 113, 206, 0.16);
  --ss-aurora-b: rgba(0, 31, 84, 0.08);
  --ss-aurora-c: rgba(77, 163, 238, 0.14);
  --ss-cloud-top: rgba(255, 255, 255, 0.95);
  --ss-cloud-bottom: rgba(214, 231, 248, 0.55);
  --ss-cloud-edge: rgba(0, 113, 206, 0.16);
  --ss-structure-color: rgba(0, 113, 206, 0.22);
}
/* Light backdrops fade at both edges: light pools and clouds that run past the section dissolve
   instead of being cut by the section's clip (no hard horizontal line at either seam). */
.ss-website-backdrop--light:not(.ss-website-backdrop--section, .ss-website-backdrop--quiet, .ss-website-backdrop--cta) { --ss-bd-fade: clamp(120px, 14vw, 220px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--ss-bd-fade), #000 calc(100% - var(--ss-bd-fade)), transparent); mask-image: linear-gradient(180deg, transparent, #000 var(--ss-bd-fade), #000 calc(100% - var(--ss-bd-fade)), transparent); }
.ss-website-backdrop__layer { position: absolute; display: block; will-change: transform; }
.ss-website-backdrop__shape { display: block; width: 100%; height: 100%; }
.ss-website-backdrop__shape svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Aurora: soft light pools that drift slowly. */
.ss-website-backdrop__layer--aurora-a { width: min(72vw, 940px); aspect-ratio: 1; left: -20%; top: 6%; }
.ss-website-backdrop__layer--aurora-b { width: min(64vw, 820px); aspect-ratio: 1; right: -14%; top: -30%; }
.ss-website-backdrop__layer--aurora-c { width: min(46vw, 600px); aspect-ratio: 1; left: 36%; bottom: -36%; }
.ss-website-backdrop__layer--aurora-a .ss-website-backdrop__shape,
.ss-website-backdrop__layer--aurora-b .ss-website-backdrop__shape,
.ss-website-backdrop__layer--aurora-c .ss-website-backdrop__shape { border-radius: 50%; filter: blur(48px); animation: ss-backdrop-drift 30s var(--ss-ease-in-out) infinite alternate; }
.ss-website-backdrop__layer--aurora-a .ss-website-backdrop__shape { background: radial-gradient(circle, var(--ss-aurora-a), transparent 66%); }
.ss-website-backdrop__layer--aurora-b .ss-website-backdrop__shape { background: radial-gradient(circle, var(--ss-aurora-b), transparent 68%); animation-duration: 36s; animation-delay: -10s; }
.ss-website-backdrop__layer--aurora-c .ss-website-backdrop__shape { background: radial-gradient(circle, var(--ss-aurora-c), transparent 66%); animation-duration: 26s; animation-delay: -16s; }

/* Glass cloud forms (from the cloud base of the mark). */
.ss-website-backdrop__layer--cloud-a { width: min(62vw, 860px); aspect-ratio: 2; right: -8%; top: 14%; }
.ss-website-backdrop__layer--cloud-b { width: min(38vw, 520px); aspect-ratio: 2; left: -8%; bottom: 4%; opacity: 0.8; }
.ss-website-backdrop__layer--cloud-a .ss-website-backdrop__shape,
.ss-website-backdrop__layer--cloud-b .ss-website-backdrop__shape { filter: drop-shadow(0 30px 60px rgba(0, 31, 84, 0.18)); animation: ss-backdrop-float 24s var(--ss-ease-in-out) infinite alternate; }
.ss-website-backdrop__layer--cloud-b .ss-website-backdrop__shape { animation-duration: 30s; animation-delay: -12s; }

/* Structure: towers of slats rising from the horizon, fading upward. */
.ss-website-backdrop__layer--structure {
  inset-inline: 0; bottom: 0; height: min(48vh, 440px); opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* Mesh: a slow, morphing field of brand blues (CTA). Transform-only animation. */
.ss-website-backdrop__layer--mesh { inset: -20%; }
.ss-website-backdrop__layer--mesh .ss-website-backdrop__shape {
  background:
    radial-gradient(30% 40% at 25% 35%, rgba(0, 113, 206, 0.55), transparent 70%),
    radial-gradient(28% 36% at 75% 30%, rgba(77, 163, 238, 0.35), transparent 70%),
    radial-gradient(40% 45% at 60% 80%, rgba(0, 31, 84, 0.9), transparent 70%),
    radial-gradient(25% 30% at 15% 85%, rgba(77, 163, 238, 0.22), transparent 70%);
  filter: blur(30px);
  animation: ss-mesh 38s var(--ss-ease-in-out) infinite alternate;
}
@keyframes ss-mesh { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12) translate(3%, -2%); } 100% { transform: rotate(-6deg) scale(1.05) translate(-3%, 3%); } }

/* Variants tune composition, not the recipe. */
.ss-website-backdrop--section { inset: 0 0 -20%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent); }
.ss-website-backdrop--section .ss-website-backdrop__layer--cloud-a { top: 6%; right: -14%; width: min(60vw, 900px); }
.ss-website-backdrop--section .ss-website-backdrop__layer--cloud-b { top: 34%; bottom: auto; left: -10%; width: min(46vw, 640px); }
.ss-website-backdrop--hero .ss-website-backdrop__layer--cloud-a { top: 22%; right: -18%; width: min(66vw, 940px); }
.ss-website-backdrop--hero .ss-website-backdrop__layer--structure { height: min(46vh, 420px); bottom: 34%; opacity: 0.22; }
.ss-website-backdrop--hero .ss-website-backdrop__layer--cloud-b { top: 20%; bottom: auto; left: -10%; }
.ss-website-backdrop--quiet { opacity: 0.6; }
/* Feathered top and bottom so dark sections can follow each other without an edge. */
.ss-website-backdrop--quiet, .ss-website-backdrop--cta { -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }

@keyframes ss-backdrop-drift { to { transform: translate3d(5%, -6%, 0) scale(1.08); } }
@keyframes ss-backdrop-float { to { transform: translate3d(-2.5%, -4%, 0); } }

@media (max-width: 767px) {
  .ss-website-backdrop__layer--cloud-a { width: 120vw; right: -40%; }
  .ss-website-backdrop__layer--cloud-b { display: none; }
  .ss-website-backdrop__layer--structure { height: 34vh; }
}
.ss-website-backdrop.is-paused .ss-website-backdrop__shape,
.ss-website-backdrop.is-paused ~ * .ss-website-backdrop__shape { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ss-website-backdrop__shape { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .ss-website-backdrop__layer--cloud-a, .ss-website-backdrop__layer--cloud-b { display: none; }
}

/* ---------- Page environment (behind every light section) ----------
   Placed along the whole page so clouds and light cross section boundaries.
   Hierarchy: content first; environment supports; never decorates every gap. */
.ss-website-environment {
  position: absolute; inset: 0; z-index: 0;
  transition: opacity 900ms var(--ss-ease-out);
  overflow: hidden; pointer-events: none;
  --ss-cloud-top: rgba(205, 225, 246, 0.95);
  --ss-cloud-bottom: rgba(238, 245, 252, 0);
  --ss-cloud-edge: rgba(0, 113, 206, 0.3);
}
.ss-website-environment__cloud { position: absolute; display: block; width: min(64vw, 920px); aspect-ratio: 2; will-change: transform; }
.ss-website-environment__cloud svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 30px 50px rgba(0, 31, 84, 0.06)); }
.ss-website-environment__cloud--one   { top: 5%;  inset-inline-end: -16%; }
.ss-website-environment__cloud--two   { top: 16%; inset-inline-start: -22%; width: min(52vw, 760px); }
.ss-website-environment__cloud--three { top: 28%; inset-inline-end: -12%; width: min(72vw, 1040px); }
.ss-website-environment__cloud--four  { top: 40%; inset-inline-start: -14%; width: min(48vw, 700px); }
.ss-website-environment__cloud--five  { top: 52%; inset-inline-end: -20%; width: min(58vw, 860px); }
.ss-website-environment__cloud--six   { top: 64%; inset-inline-start: -18%; width: min(66vw, 960px); }
.ss-website-environment__cloud--seven { top: 76%; inset-inline-end: -14%; width: min(50vw, 720px); }
.ss-website-environment__cloud--eight { top: 88%; inset-inline-start: -16%; width: min(60vw, 880px); }
.ss-website-environment__light { position: absolute; display: block; width: min(80vw, 1100px); aspect-ratio: 1.3; border-radius: 50%; filter: blur(70px); animation: ss-backdrop-drift 40s var(--ss-ease-in-out) infinite alternate; }
.ss-website-environment__light--one   { top: 10%; inset-inline-start: -25%; background: radial-gradient(closest-side, rgba(0, 113, 206, 0.14), transparent); }
.ss-website-environment__light--two   { top: 30%; inset-inline-end: -30%; background: radial-gradient(closest-side, rgba(77, 163, 238, 0.16), transparent); animation-duration: 52s; animation-delay: -20s; }
.ss-website-environment__light--three { top: 50%; inset-inline-start: 5%; background: radial-gradient(closest-side, rgba(191, 214, 239, 0.45), transparent); animation-duration: 46s; animation-delay: -10s; }
.ss-website-environment__light--four  { top: 68%; inset-inline-end: -20%; background: radial-gradient(closest-side, rgba(0, 113, 206, 0.11), transparent); animation-duration: 58s; animation-delay: -30s; }
.ss-website-environment__light--five  { top: 86%; inset-inline-start: -10%; background: radial-gradient(closest-side, rgba(191, 214, 239, 0.4), transparent); animation-duration: 44s; }
@media (max-width: 767px) {
  .ss-website-environment__cloud { width: 130vw; }
  .ss-website-environment__cloud--two, .ss-website-environment__cloud--four, .ss-website-environment__cloud--six, .ss-website-environment__cloud--eight { display: none; }
  .ss-website-environment__cloud--one, .ss-website-environment__cloud--three, .ss-website-environment__cloud--five, .ss-website-environment__cloud--seven { inset-inline-end: -55%; }
  .ss-website-environment__light { filter: blur(40px); }
}
@media (prefers-reduced-motion: reduce) { .ss-website-environment__light { animation: none; } }
/* Hidden (not counted as layout shift) until scenes.js has seen the page and fonts settle. */
.ss-website-js .ss-website-environment:not(.is-ready) { visibility: hidden; opacity: 0; }
@media (prefers-reduced-transparency: reduce) { .ss-website-environment { display: none; } }

/* ==== ss-website-components.css ==== */
/* Reusable components. Page files may compose these but never redefine them. */

/* ---------- Typography ---------- */
/* Glass — the one SkyStruct glass surface. Every glass component is listed
   here; light/dark appearance comes from the context-mapped --ss-glass-* tokens. */
.ss-website-glass,
.ss-website-eyebrow {
  background: var(--ss-glass-bg);
  border: 1px solid var(--ss-glass-border);
  box-shadow: var(--ss-glass-highlight), var(--ss-glass-shadow);
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
  color: var(--ss-glass-text);
}

/* Eyebrow: a small glass text pill. */
.ss-website-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: var(--ss-radius-pill);
  font-size: var(--ss-size-eyebrow);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ss-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ss-glass-accent);
}
[dir="rtl"] .ss-website-eyebrow { font-size: var(--ss-size-micro); }
/* Small phones: long eyebrows keep to one line (tighter tracking), balanced if they must wrap. */
@media (max-width: 479px) { .ss-website-eyebrow { letter-spacing: 0.05em; text-wrap: balance; } [dir="rtl"] .ss-website-eyebrow { letter-spacing: 0; } }

.ss-website-title { font-weight: 700; color: inherit; text-wrap: balance; }
.ss-website-title--display { font-size: var(--ss-size-display); line-height: 1.05; letter-spacing: var(--ss-tracking-display); }
.ss-website-title--h1 { font-size: var(--ss-size-h1); line-height: 1.08; letter-spacing: var(--ss-tracking-h1); }
.ss-website-title--h2 { font-size: var(--ss-size-h2); line-height: 1.12; letter-spacing: var(--ss-tracking-h2); }
.ss-website-title--h3 { font-size: var(--ss-size-h3); line-height: 1.2; letter-spacing: var(--ss-tracking-h3); font-weight: 600; }
.ss-website-title--h4 { font-size: var(--ss-size-h4); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.ss-website-title--h5 { font-size: var(--ss-size-h5); line-height: 1.35; font-weight: 600; }
[dir="rtl"] .ss-website-title { line-height: 1.3; }
[dir="rtl"] .ss-website-title--display { line-height: 1.22; }
/* Phones: a card-level title set at h1 steps down to h2, so it never rivals its section heading. */
@media (max-width: 767px) { h3.ss-website-title--h1, h4.ss-website-title--h1 { font-size: var(--ss-size-h2); } }

.ss-website-lead {
  font-size: var(--ss-size-lead);
  line-height: 1.55;
  color: var(--ss-text-2);
  max-width: var(--ss-measure-lead);
  text-wrap: pretty;
}
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) .ss-website-lead,
.ss-website-section--navy .ss-website-lead { color: var(--ss-text-inverse-2); }

/* ---------- Section header ---------- */
.ss-website-section-header {
  display: grid;
  gap: var(--ss-space-5);
  margin-bottom: clamp(40px, 2rem + 2vw, 64px);
}
.ss-website-section-header__titles { display: grid; gap: var(--ss-space-4); justify-items: start; max-width: 760px; }
.ss-website-section-header--center { justify-items: center; text-align: center; }
.ss-website-section-header--center .ss-website-section-header__titles { justify-items: center; }
@media (min-width: 900px) {
  .ss-website-section-header--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--ss-space-8); }
  .ss-website-section-header--split .ss-website-section-header__lead { padding-bottom: 6px; }
}

/* ---------- Buttons ---------- */
.ss-website-button {
  --ss-btn-bg: var(--ss-color-blue);
  --ss-btn-fg: var(--ss-color-white);
  --ss-btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--ss-radius-button);
  border: 1px solid var(--ss-btn-border);
  background: var(--ss-btn-bg);
  color: var(--ss-btn-fg);
  font-size: var(--ss-size-control);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--ss-dur-fast) var(--ss-ease-out), border-color var(--ss-dur-fast) var(--ss-ease-out), color var(--ss-dur-fast) var(--ss-ease-out), transform var(--ss-dur-fast) var(--ss-ease-out), box-shadow var(--ss-dur-base) var(--ss-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ss-website-button__icon { width: 18px; height: 18px; transition: transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-button:hover .ss-website-button__icon { transform: translateX(3px); }
[dir="rtl"] .ss-website-button:hover .ss-website-icon--directional.ss-website-button__icon { transform: scaleX(-1) translateX(3px); }
.ss-website-button:active { transform: scale(0.98); transition-duration: var(--ss-dur-press); }

.ss-website-button--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(2, 4, 15, 0.16); }
.ss-website-button--primary:hover { --ss-btn-bg: var(--ss-color-blue-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 113, 206, 0.24); }
.ss-website-button--secondary { --ss-btn-bg: var(--ss-color-white); --ss-btn-fg: var(--ss-text-1); --ss-btn-border: var(--ss-line-strong); }
.ss-website-button--secondary:hover { --ss-btn-border: var(--ss-color-blue); --ss-btn-fg: var(--ss-color-blue); }
.ss-website-button--on-dark { --ss-btn-bg: rgba(255, 255, 255, 0.06); --ss-btn-fg: var(--ss-color-white); --ss-btn-border: var(--ss-line-inverse-strong); }
.ss-website-button--on-dark:hover { --ss-btn-bg: rgba(255, 255, 255, 0.12); --ss-btn-border: rgba(255, 255, 255, 0.32); }
.ss-website-button--ghost-dark { --ss-btn-bg: transparent; --ss-btn-fg: var(--ss-text-inverse-2); }
.ss-website-button--ghost-dark:hover { --ss-btn-fg: var(--ss-color-white); }
.ss-website-button--sm { min-height: 40px; padding: 0 16px; font-size: var(--ss-size-small); }
.ss-website-button--lg { min-height: 50px; padding: 0 24px; }
.ss-website-button[data-ss-block] { width: 100%; }

.ss-website-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ss-color-blue);
  min-height: 44px;
}
.ss-website-text-link span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--ss-dur-base) var(--ss-ease-out); }
[dir="rtl"] .ss-website-text-link span { background-position: 100% 100%; }
.ss-website-text-link:hover span { background-size: 100% 1px; }
.ss-website-text-link__icon { width: 18px; height: 18px; transition: transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-text-link:hover .ss-website-text-link__icon { transform: translateX(3px); }
[dir="rtl"] .ss-website-text-link:hover .ss-website-text-link__icon { transform: scaleX(-1) translateX(3px); }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) .ss-website-text-link,
.ss-website-section--navy .ss-website-text-link { color: var(--ss-color-blue-bright); }

.ss-website-icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--ss-radius-control);
  color: inherit;
  transition: background-color var(--ss-dur-fast) var(--ss-ease-out);
}
.ss-website-icon-button:hover { background: rgba(127, 135, 150, 0.12); }
.ss-website-icon-button .ss-website-icon { width: 22px; height: 22px; }

/* ---------- Chips, status, availability ---------- */
.ss-website-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-website-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: var(--ss-radius-pill);
  background: var(--ss-color-blue-08);
  color: var(--ss-color-navy);
  font-size: var(--ss-size-micro);
  font-weight: 600;
  line-height: 1.3;
}
.ss-website-chip--outline { background: var(--ss-color-white); border: 1px solid var(--ss-line-strong); color: var(--ss-text-2); }
.ss-website-chip--glass { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px var(--ss-line), 0 4px 12px rgba(0, 31, 84, 0.06); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); color: var(--ss-text-1); }
.ss-website-chip--on-dark { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--ss-line-inverse); color: var(--ss-text-inverse-1); }

.ss-website-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--ss-radius-pill);
  font-size: var(--ss-size-micro);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.ss-website-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ss-website-status .ss-website-icon { width: 14px; height: 14px; }
.ss-website-status:has(.ss-website-icon)::before { display: none; }
.ss-website-status--approved { background: var(--ss-status-approved-tint); color: var(--ss-status-approved); }
.ss-website-status--active { background: var(--ss-status-info-tint); color: var(--ss-status-info); }
.ss-website-status--review { background: var(--ss-status-review-tint); color: var(--ss-status-review); }
.ss-website-status--risk { background: var(--ss-status-risk-tint); color: var(--ss-status-risk); }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive, .ss-website-drill) .ss-website-status--approved { background: rgba(111, 211, 164, 0.14); color: var(--ss-status-approved-bright); }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive, .ss-website-drill) .ss-website-status--review { background: rgba(244, 196, 107, 0.14); color: var(--ss-status-review-bright); }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive, .ss-website-drill) .ss-website-status--risk { background: rgba(242, 154, 166, 0.14); color: var(--ss-status-risk-bright); box-shadow: none; }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive, .ss-website-drill) .ss-website-status--active { background: rgba(126, 192, 245, 0.14); color: var(--ss-status-info-bright); }
.ss-website-status--risk::before { border-radius: 1px; transform: rotate(45deg); }

.ss-website-avail { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ss-size-small); font-weight: 600; }
.ss-website-avail .ss-website-icon { width: 18px; height: 18px; padding: 2px; border-radius: 50%; }
.ss-website-avail--yes { color: var(--ss-color-navy); }
.ss-website-avail--yes .ss-website-icon { background: var(--ss-color-blue); color: var(--ss-color-white); }
.ss-website-avail--limited { color: var(--ss-text-2); }
.ss-website-avail--limited .ss-website-icon { background: var(--ss-color-blue-12); color: var(--ss-color-blue); }
.ss-website-avail--no { color: var(--ss-text-3); font-weight: 400; }
.ss-website-avail--no .ss-website-icon { background: var(--ss-color-mist); color: var(--ss-text-3); }

.ss-website-tier-mark {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: none;
}
.ss-website-tier-mark--lite { background: var(--ss-color-white); box-shadow: inset 0 0 0 2px var(--ss-color-blue); }
.ss-website-tier-mark--pro { background: var(--ss-color-blue); box-shadow: 0 0 0 2px var(--ss-color-navy), 0 0 0 3px var(--ss-color-blue-40); }

/* ---------- Icon tile ---------- */
.ss-website-icon-tile {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--ss-radius-control);
  background: linear-gradient(160deg, rgba(0, 113, 206, 0.12), transparent 62%), var(--ss-glass-bg-strong);
  border: 1px solid var(--ss-glass-border);
  box-shadow: var(--ss-glass-highlight), 0 6px 16px rgba(0, 113, 206, 0.08);
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
  color: var(--ss-glass-accent);
}
.ss-website-icon-tile .ss-website-icon { width: 20px; height: 20px; }
.ss-website-icon-tile--sm { width: 34px; height: 34px; border-radius: var(--ss-radius-sm); }
.ss-website-icon-tile--sm .ss-website-icon { width: 18px; height: 18px; }

/* ---------- Check list ---------- */
.ss-website-check-list { display: grid; gap: 10px; }
.ss-website-check-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ss-text-2); }
.ss-website-check-list .ss-website-icon { width: 18px; height: 18px; margin-top: 3px; color: var(--ss-color-blue); }
.ss-website-check-list--compact li { font-size: var(--ss-size-control); }
.ss-website-check-list--on-dark li { color: var(--ss-text-inverse-2); }
.ss-website-check-list--on-dark .ss-website-icon { color: var(--ss-color-blue-bright); }

/* ---------- Breadcrumb ---------- */
.ss-website-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 var(--ss-space-5); font-size: var(--ss-size-micro); color: var(--ss-text-3); }
.ss-website-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.ss-website-breadcrumb a { color: var(--ss-text-2); }
.ss-website-breadcrumb a:hover { color: var(--ss-color-blue); }
@media (max-width: 767px) { .ss-website-breadcrumb a { display: inline-block; padding-block: 11px; margin-block: -11px; } }  /* 44px tap height, layout unchanged */
.ss-website-breadcrumb [aria-current] { color: var(--ss-text-1); font-weight: 600; }
.ss-website-breadcrumb__sep { width: 14px; height: 14px; opacity: 0.6; }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) .ss-website-breadcrumb ol,
.ss-website-section--navy .ss-website-breadcrumb ol { color: var(--ss-text-inverse-3); }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) .ss-website-breadcrumb a,
.ss-website-section--navy .ss-website-breadcrumb a { color: var(--ss-text-inverse-2); }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) .ss-website-breadcrumb [aria-current],
.ss-website-section--navy .ss-website-breadcrumb [aria-current] { color: var(--ss-color-white); }

/* ---------- Product UI frame ---------- */
.ss-website-ui-frame {
  position: relative;
  border-radius: var(--ss-radius-panel);
  padding: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 249, 250, 0.9));
  border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-float);
}
.ss-website-ui-frame__bar { display: flex; align-items: center; gap: 12px; height: 26px; padding-inline: 8px; }
.ss-website-ui-frame__dots { display: flex; gap: 5px; }
.ss-website-ui-frame__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(2, 4, 15, 0.12); }
.ss-website-ui-frame__url { margin-inline: auto; padding: 2px 14px; border-radius: var(--ss-radius-pill); background: rgba(2, 4, 15, 0.04); font-size: var(--ss-size-ui); color: var(--ss-text-3); transform: translateX(-20px); }
.ss-website-ui-frame__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--ss-radius-md);
  background: var(--ss-color-white);
  aspect-ratio: 1222 / 763;
  box-shadow: 0 0 0 1px rgba(2, 4, 15, 0.06);
}
.ss-website-ui-frame__image { width: 100%; height: 100%; object-fit: cover; object-position: top left; transform-origin: 0 0; transition: transform var(--ss-dur-story) var(--ss-ease-out); }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) .ss-website-ui-frame,
.ss-website-section--navy .ss-website-ui-frame {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-color: var(--ss-line-inverse);
  box-shadow: var(--ss-highlight-inner), var(--ss-elev-dark-2);
}
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) .ss-website-ui-frame__dots i,
.ss-website-section--navy .ss-website-ui-frame__dots i { background: rgba(255, 255, 255, 0.18); }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) .ss-website-ui-frame__url,
.ss-website-section--navy .ss-website-ui-frame__url { background: rgba(255, 255, 255, 0.06); color: var(--ss-text-inverse-3); }
.ss-website-ui-frame--compact { padding: 4px; border-radius: var(--ss-radius-md); box-shadow: var(--ss-shadow-card); }
.ss-website-ui-frame--compact .ss-website-ui-frame__bar { display: none; }
.ss-website-ui-frame--compact .ss-website-ui-frame__viewport { border-radius: var(--ss-radius-sm); }

/* ---------- Controlled project record (signature) ---------- */
.ss-website-record-label {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: var(--ss-size-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ss-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ss-color-blue-bright);
}
.ss-website-record-label .ss-website-icon { width: 16px; height: 16px; }
.ss-website-record {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: var(--ss-radius-card);
  background: var(--ss-color-white);
  color: var(--ss-text-1);
  border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-float);
  text-align: start;
}
.ss-website-record__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ss-website-record__type { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ss-size-micro); font-weight: 600; color: var(--ss-color-blue); }
.ss-website-record__type .ss-website-icon { width: 16px; height: 16px; }
.ss-website-record__id { font-size: var(--ss-size-caption); font-weight: 600; color: var(--ss-text-3); font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: var(--ss-radius-xs); background: var(--ss-color-paper); border: 1px solid var(--ss-line); }
.ss-website-record__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }
.ss-website-record__meta { display: grid; border-top: 1px solid var(--ss-line); }
.ss-website-record__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; align-items: center; padding-block: 9px; border-bottom: 1px solid var(--ss-line); font-size: var(--ss-size-micro); }
.ss-website-record__row dt { display: inline-flex; align-items: center; gap: 6px; color: var(--ss-text-3); font-weight: 600; }
.ss-website-record__row dt .ss-website-icon { width: 15px; height: 15px; }
.ss-website-record__row dd { color: var(--ss-text-1); font-weight: 600; }
.ss-website-record__status { position: relative; display: inline-grid; }
.ss-website-record__status > * { grid-area: 1 / 1; }
.ss-website-record__history-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--ss-size-micro); font-weight: 600; color: var(--ss-text-3); }
.ss-website-record__history-label .ss-website-icon { width: 15px; height: 15px; }
.ss-website-record__timeline { position: relative; display: grid; gap: 8px; list-style: none; padding: 0; padding-inline-start: 16px; }
.ss-website-record__timeline::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 3px; width: 1px; background: var(--ss-line-strong); }
.ss-website-record__event { position: relative; display: grid; font-size: var(--ss-size-micro); line-height: 1.4; }
.ss-website-record__event::before { content: ""; position: absolute; inset-inline-start: -16px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ss-color-white); box-shadow: inset 0 0 0 2px var(--ss-color-blue); }
.ss-website-record__who { font-weight: 600; }
.ss-website-record__what { color: var(--ss-text-2); }
.ss-website-record--compact { padding: 18px; gap: 12px; }

.ss-website-record__ai { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--ss-radius-control); background: var(--ss-color-blue-08); color: var(--ss-color-navy); font-size: var(--ss-size-micro); font-weight: 600; }
.ss-website-record__ai .ss-website-icon { width: 15px; height: 15px; color: var(--ss-color-blue); }
.ss-website-record--animated .ss-website-record__ai { opacity: 0; transform: translateY(4px); transition: opacity var(--ss-dur-slow) var(--ss-ease-out) var(--ss-dur-base), transform var(--ss-dur-slow) var(--ss-ease-out) var(--ss-dur-base); }
.ss-website-record--animated.is-approved .ss-website-record__ai,
html:not(.ss-website-js) .ss-website-record--animated .ss-website-record__ai { opacity: 1; transform: none; }

/* Intelligence signal: a quiet pulse used wherever SkyStruct surfaces insight. */
.ss-website-signal { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ss-glass-accent); }
.ss-website-signal::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--ss-glass-accent); opacity: 0; animation: ss-signal 2.4s var(--ss-ease-out) infinite; }
@keyframes ss-signal { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- FAQ ---------- */
.ss-website-faq { display: grid; gap: var(--ss-space-6); }
@media (min-width: 1024px) {
  .ss-website-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--ss-space-9); }
  .ss-website-faq__intro { position: sticky; top: calc(var(--ss-header-h) + 32px); align-self: start; }
}
.ss-website-faq__list { border-top: 1px solid var(--ss-line-strong); }
.ss-website-faq__item { border-bottom: 1px solid var(--ss-line); }
.ss-website-faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ss-space-5);
  min-height: 64px;
  padding-block: 18px;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.4;
  cursor: pointer; list-style: none;
  transition: color var(--ss-dur-fast) var(--ss-ease-out);
}
.ss-website-faq__question::-webkit-details-marker { display: none; }
.ss-website-faq__question:hover { color: var(--ss-color-blue); }
.ss-website-faq__toggle { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--ss-line-strong); transition: transform var(--ss-dur-base) var(--ss-ease-out), background-color var(--ss-dur-base) var(--ss-ease-out), border-color var(--ss-dur-base); }
.ss-website-faq__toggle .ss-website-icon { width: 16px; height: 16px; }
.ss-website-faq__item[open] .ss-website-faq__toggle { transform: rotate(45deg); background: var(--ss-color-blue); border-color: var(--ss-color-blue); color: var(--ss-color-white); }
.ss-website-faq__answer { overflow: hidden; }
.ss-website-faq__answer p { padding-bottom: 22px; max-width: 720px; color: var(--ss-text-2); }

/* ---------- Segmented control (tabs / filters) ---------- */
.ss-website-segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--ss-radius-pill);
  background: var(--ss-color-mist);
  box-shadow: inset 0 1px 2px rgba(2, 4, 15, 0.06);
}
.ss-website-segmented__option {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--ss-radius-pill);
  font-size: var(--ss-size-small); font-weight: 600;
  color: var(--ss-text-2);
  transition: background-color var(--ss-dur-base) var(--ss-ease-out), color var(--ss-dur-base) var(--ss-ease-out), box-shadow var(--ss-dur-base) var(--ss-ease-out);
}
.ss-website-segmented__option:hover { color: var(--ss-text-1); }
.ss-website-segmented__option[aria-selected="true"],
.ss-website-segmented__option[aria-pressed="true"] { background: var(--ss-color-white); color: var(--ss-text-1); box-shadow: 0 1px 2px rgba(2, 4, 15, 0.08), var(--ss-elev-1); }
.ss-website-segmented--lg .ss-website-segmented__option { min-height: 46px; padding: 0 22px; font-size: var(--ss-size-control); }
.ss-website-segmented--on-dark { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--ss-line-inverse); }
.ss-website-segmented--on-dark .ss-website-segmented__option { color: var(--ss-text-inverse-2); }
.ss-website-segmented--on-dark .ss-website-segmented__option:hover { color: var(--ss-color-white); }
.ss-website-segmented--on-dark .ss-website-segmented__option[aria-selected="true"] { background: rgba(255, 255, 255, 0.12); color: var(--ss-color-white); box-shadow: var(--ss-highlight-inner); }
/* Glass variant with a sliding puck: the Lite / Pro switches (Pricing hero, One connected flow). */
.ss-website-segmented--glass { position: relative; padding: 5px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* Sliding puck: sized and placed by scenes.js (initPuck) from the selected option.
   Without JS it stays hidden and the selected option keeps its own highlight. */
.ss-website-segmented__puck { display: none; }
.ss-website-js .ss-website-segmented__puck {
  display: block; position: absolute; left: 0; top: 0; z-index: 0;
  width: var(--ss-puck-w, 0); height: var(--ss-puck-h, 0);
  transform: translate(var(--ss-puck-x, 0), var(--ss-puck-y, 0));
  border-radius: var(--ss-radius-pill);
  background: linear-gradient(180deg, #FFFFFF, var(--ss-color-blue-mist));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--ss-elev-dark-1), 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: transform var(--ss-dur-slow) var(--ss-ease-out), width var(--ss-dur-slow) var(--ss-ease-out);
  pointer-events: none;
}
.ss-website-segmented--glass .ss-website-segmented__option { position: relative; z-index: 1; min-width: 160px; justify-content: center; }
@media (max-width: 639px) {
  .ss-website-segmented--glass { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 360px; }
  .ss-website-segmented--glass .ss-website-segmented__option { min-width: 0; padding: 0 10px; font-size: var(--ss-size-small); white-space: nowrap; }
}
.ss-website-js .ss-website-segmented--glass .ss-website-segmented__option[aria-selected="true"] { background: none; box-shadow: none; color: var(--ss-text-1); }

/* ---------- Floating chip (over product UI) ---------- */
.ss-website-floating-chip {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: var(--ss-radius-md);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ss-text-1);
  border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ss-website-floating-chip__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--ss-radius-sm); background: var(--ss-color-blue); color: var(--ss-color-white); }
.ss-website-floating-chip__icon .ss-website-icon { width: 18px; height: 18px; }
.ss-website-floating-chip__label { display: block; font-size: var(--ss-size-micro); font-weight: 600; }
.ss-website-floating-chip__status { display: block; font-size: var(--ss-size-caption); color: var(--ss-text-3); }

/* ---------- Photography ---------- */
.ss-website-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-website-conversion__photo { margin: var(--ss-space-2) 0 var(--ss-space-2); aspect-ratio: 16 / 9; border-radius: var(--ss-radius-panel); overflow: hidden; box-shadow: var(--ss-elev-2); }

/* ---------- C.L.I.C. accents (controlled) ----------
   Where a pillar accent applies, it touches letters, icons, eyebrows and indicators only. */
[data-ss-clic] .ss-website-icon-tile { color: var(--ss-accent); background: linear-gradient(160deg, color-mix(in srgb, var(--ss-accent) 14%, transparent), transparent 62%), var(--ss-glass-bg-strong); }
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive, .ss-website-footer) [data-ss-clic] .ss-website-icon-tile { color: var(--ss-accent-bright); }
/* Selector */
/* Capability pages */
[data-ss-clic] .ss-website-eyebrow { color: var(--ss-accent-ink); }
.ss-website-section--dark[data-ss-clic] .ss-website-eyebrow { color: var(--ss-accent-bright); }
[data-ss-clic] .ss-website-outcomes__index, [data-ss-clic] .ss-website-stages__label { color: var(--ss-accent-ink); }
[data-ss-clic].ss-website-outcomes-story.is-story .ss-website-outcomes__item.is-active { border-inline-start-color: var(--ss-accent); }
[data-ss-clic] .ss-website-cap-hero__diagram { background: radial-gradient(80% 70% at 85% 10%, color-mix(in srgb, var(--ss-accent) 14%, transparent), transparent 70%), rgba(255, 255, 255, 0.82); }
/* Menus, footer, modules */

/* ---------- SkyStruct AI cue ----------
   Icon only: the AI glyph in a small round tile whose gradient hairline slowly orbits and whose
   glyph gently twinkles. The label is the accessible name (role="img"), never visible text. */
@property --ss-ai-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ss-website-ai-badge {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; vertical-align: middle;
  border-radius: 50%;
  color: var(--ss-ai-to);
  background: linear-gradient(var(--ss-ai-tint), var(--ss-ai-tint)) padding-box, conic-gradient(from var(--ss-ai-angle), var(--ss-ai-from), var(--ss-ai-to) 40%, color-mix(in srgb, var(--ss-ai-from) 18%, transparent) 62%, var(--ss-ai-from)) border-box;
  border: 1.5px solid transparent;
  animation: ss-ai-orbit 4.5s linear infinite;
}
.ss-website-ai-badge .ss-website-icon { width: 14px; height: 14px; animation: ss-ai-twinkle 3s var(--ss-ease-in-out) infinite; }
.ss-website-ai-badge--dark, :is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) .ss-website-ai-badge { color: var(--ss-ai-bright); background: linear-gradient(rgba(6, 20, 50, 0.9), rgba(6, 20, 50, 0.9)) padding-box, conic-gradient(from var(--ss-ai-angle), var(--ss-ai-bright), var(--ss-ai-from) 40%, rgba(127, 211, 240, 0.15) 62%, var(--ss-ai-bright)) border-box; }
.ss-website-ai-badge--dark .ss-website-icon { color: var(--ss-ai-bright); }
@keyframes ss-ai-orbit { to { --ss-ai-angle: 360deg; } }
@keyframes ss-ai-twinkle { 0%, 70%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 82% { transform: scale(1.18) rotate(12deg); opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .ss-website-ai-badge, .ss-website-ai-badge .ss-website-icon { animation: none; } .ss-website-ai-badge { --ss-ai-angle: 300deg; } }
.ss-website-ai-badge--float { position: absolute; z-index: 2; top: 12px; inset-inline-start: 12px; box-shadow: 0 6px 18px rgba(0, 31, 84, 0.18); }
.ss-website-eyebrow--ai .ss-website-icon { width: 15px; height: 15px; margin-inline-end: 6px; vertical-align: -3px; color: var(--ss-ai-bright); }
.ss-website-flow__eyebrow .ss-website-ai-badge { margin-inline-start: 8px; width: 22px; height: 22px; }
.ss-website-cap-hero__ai { color: var(--ss-text-3); }
.ss-website-drill__insight { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--ss-radius-pill); font-size: var(--ss-size-ui); font-weight: 700; color: var(--ss-ai-bright); background: rgba(30, 159, 204, 0.12); box-shadow: inset 0 0 0 1px rgba(127, 211, 240, 0.35); }
.ss-website-drill__insight .ss-website-icon { width: 14px; height: 14px; }

/* ---------- Collaboration presence ----------
   Avatars, a named cursor that glides into the UI and one activity event. Decorative. */
.ss-website-presence { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ss-website-presence__avatars { position: absolute; top: 12%; inset-inline-end: 5%; display: flex; }
.ss-website-presence__avatar { display: grid; place-items: center; width: 30px; height: 30px; margin-inline-start: -8px; border-radius: 50%; border: 2px solid #fff; background: var(--ss-accent); color: #fff; font-size: var(--ss-size-caption); font-weight: 700; box-shadow: 0 4px 10px rgba(0, 31, 84, 0.2); }
.ss-website-presence__avatar { overflow: hidden; }
.ss-website-presence__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-website-presence__cursor { position: absolute; top: 44%; left: 46%; display: flex; align-items: flex-start; gap: 2px; animation: ss-presence-move 9s var(--ss-ease-in-out) infinite; }
.ss-website-presence__cursor svg { width: 18px; height: 18px; fill: var(--ss-accent); stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.ss-website-presence__label { margin-top: 12px; padding: 4px 9px; border-radius: 6px 10px 10px 10px; background: var(--ss-accent); color: #fff; font-size: var(--ss-size-ui); font-weight: 600; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 31, 84, 0.22); }
.ss-website-presence__label b { font-weight: 700; }
.ss-website-presence__event { position: absolute; bottom: 10%; inset-inline-end: 4%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--ss-radius-md); background: rgba(255, 255, 255, 0.95); border: 1px solid var(--ss-line); box-shadow: 0 12px 30px rgba(0, 31, 84, 0.18); font-size: var(--ss-size-micro); font-weight: 600; color: var(--ss-text-1); opacity: 0; animation: ss-presence-event 9s var(--ss-ease-out) infinite; }
.ss-website-presence__event .ss-website-icon { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--ss-state-success); color: #fff; }
@keyframes ss-presence-move { 0% { transform: translate(-60px, 40px); } 35%, 60% { transform: translate(40px, -10px); } 85%, 100% { transform: translate(-60px, 40px); } }
@keyframes ss-presence-event { 0%, 38% { opacity: 0; transform: translateY(8px); } 45%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-4px); } }
[dir="rtl"] .ss-website-presence__cursor { left: auto; right: 46%; }
[dir="rtl"] .ss-website-presence__cursor svg { transform: scaleX(-1); }
[dir="rtl"] .ss-website-presence__label { border-radius: 10px 6px 10px 10px; }
.ss-website-presence--hero .ss-website-presence__avatars { top: 9%; }
.ss-website-presence--media .ss-website-presence__cursor { top: 50%; left: 38%; }
.ss-website-presence--screens .ss-website-presence__avatars { top: 14%; }
@media (max-width: 639px) { .ss-website-presence__label { font-size: var(--ss-size-ui-xs); padding: 3px 7px; } .ss-website-presence__event { font-size: var(--ss-size-ui); padding: 6px 9px; } .ss-website-presence__avatar { width: 24px; height: 24px; font-size: var(--ss-size-ui-xs); } }
@media (prefers-reduced-motion: reduce) { .ss-website-presence__cursor, .ss-website-presence__event { animation: none; } .ss-website-presence__event { opacity: 1; } }
.ss-website-story-screens { position: relative; }
@media (max-width: 899px) { .ss-website-presence__cursor, .ss-website-presence__event { display: none; } }

/* ---------- Mobile carousel (peer content) ----------
   .is-carousel is set by scenes.js below the list's breakpoint. Slides snap to the start edge,
   the next slide peeks in; the nav sits under the track (prev · count + progress · next). */
.ss-website-js .is-carousel {
  display: flex !important; flex-wrap: nowrap; gap: 12px !important;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--ss-gutter) * -1) !important; padding-inline: var(--ss-gutter) !important; scroll-padding-inline: var(--ss-gutter);
  grid-template-columns: none !important; grid-auto-rows: auto !important;
}
/* Shadow room: the scroll box clips vertically too, so the track carries its own padding for the
   cards' shadows and pulls it back with negative margins (layout spacing unchanged). */
/* Only the bottom is pulled back, so a list keeps its own top margin (spacing to the copy above). */
.ss-website-js .is-carousel { padding-block: 10px 44px !important; margin-bottom: -44px !important; }
.ss-website-js .is-carousel::-webkit-scrollbar { display: none; }
.ss-website-js .is-carousel > * { flex: 0 0 var(--ss-slide, 86%); max-width: 440px; scroll-snap-align: start; scroll-snap-stop: always; }
.ss-website-js .is-carousel:focus-visible { outline: 2px solid #0071CE; outline-offset: 4px; border-radius: 12px; }
.ss-website-carousel-nav { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ss-website-carousel-nav[hidden] { display: none; }
.ss-website-carousel-nav__btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--ss-line-strong); background: var(--ss-color-white); color: var(--ss-text-1); cursor: pointer; transition: background-color 160ms, opacity 160ms; }
.ss-website-carousel-nav__btn:disabled { opacity: 0.35; cursor: default; }
.ss-website-carousel-nav__btn:focus-visible { outline: 2px solid #0071CE; outline-offset: 2px; }
.ss-website-carousel-nav__btn .ss-website-icon { width: 18px; height: 18px; }
.ss-website-carousel-nav__count { flex: none; min-width: 44px; font-size: var(--ss-size-small); font-variant-numeric: tabular-nums; color: var(--ss-text-3); text-align: center; }
.ss-website-carousel-nav__count b { color: var(--ss-text-1); }
.ss-website-carousel-nav__bar { position: relative; flex: 1; height: 3px; border-radius: 2px; background: var(--ss-line); overflow: hidden; }
.ss-website-carousel-nav__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: inherit; background: #0B0D12; transition: width 300ms var(--ss-ease-out); }
:is(.ss-website-section--dark, .ss-website-pro-dark, .ss-website-immersive, .ss-website-capai__inset) .ss-website-carousel-nav__btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
:is(.ss-website-section--dark, .ss-website-pro-dark, .ss-website-immersive, .ss-website-capai__inset) .ss-website-carousel-nav__count { color: rgba(255, 255, 255, 0.6); }
:is(.ss-website-section--dark, .ss-website-pro-dark, .ss-website-immersive, .ss-website-capai__inset) .ss-website-carousel-nav__count b { color: #FFFFFF; }
:is(.ss-website-section--dark, .ss-website-pro-dark, .ss-website-immersive, .ss-website-capai__inset) .ss-website-carousel-nav__bar { background: rgba(255, 255, 255, 0.16); }
:is(.ss-website-section--dark, .ss-website-pro-dark, .ss-website-immersive, .ss-website-capai__inset) .ss-website-carousel-nav__bar i { background: #FFFFFF; }

:is(.ss-website-section--dark, .ss-website-pro-dark, .ss-website-immersive, .ss-website-capai__inset) .ss-website-carousel-nav__btn:disabled { opacity: 0.45; }

/* Carousel controls (site-wide): just ← →, close together and centred under the track. */
.ss-website-carousel-nav { justify-content: center; gap: 12px; }
.ss-website-carousel-nav__count, .ss-website-carousel-nav__bar { display: none; }

/* Phones: no desktop measure caps on headings and leads — they use the available width. */
@media (max-width: 767px) {
  .ss-website-title, .ss-website-lead, .ss-website-section-header__lead, .ss-website-section-header__titles { max-width: none !important; }
}

/* ==== ss-website-scenes.css ==== */
/* SkyStruct scene modules: large, scroll-driven section compositions shared across pages
   (Lite/Pro duo, globe). Split out of components.css in Phase 3. */

/* ---------- Lite + Pro duo (pinned wipe → split) ---------- */
.ss-website-family__tag { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ss-size-eyebrow); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-color-blue); }
.ss-website-duo__layer--pro .ss-website-family__tag,
.ss-website-section--navy .ss-website-family__tag,
:is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive) .ss-website-family__tag { color: var(--ss-color-blue-bright); }
.ss-website-duo-section { padding-bottom: var(--ss-space-7); }
.ss-website-duo { --ss-wipe: 100; --ss-exit: 0; position: relative; margin-top: var(--ss-space-7); }
.ss-website-duo__layer--lite { background: linear-gradient(180deg, var(--ss-color-blue-mist), var(--ss-color-white) 70%); color: var(--ss-text-1); }
.ss-website-duo__layer--pro {
  background: radial-gradient(70% 80% at 0% 100%, rgba(0, 113, 206, 0.35), transparent 60%), linear-gradient(160deg, var(--ss-color-navy) 0%, var(--ss-color-navy-deep) 55%, var(--ss-color-ink) 100%);
  color: var(--ss-text-inverse-1);
}
.ss-website-duo__grid { display: grid; gap: var(--ss-space-7); align-items: center; }
.ss-website-duo__copy { display: grid; gap: var(--ss-space-4); justify-items: start; align-content: center; }
.ss-website-duo__copy .ss-website-actions { margin-top: var(--ss-space-2); }
.ss-website-duo__summary { font-size: var(--ss-size-lead); color: var(--ss-text-2); max-width: 470px; }
.ss-website-duo__body { color: var(--ss-text-2); max-width: 470px; }
.ss-website-duo__layer--pro :is(.ss-website-duo__summary, .ss-website-duo__body) { color: var(--ss-text-inverse-2); }
.ss-website-duo__layer--pro .ss-website-title { color: var(--ss-color-white); }
.ss-website-duo__signals { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-website-duo__signal { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border-radius: var(--ss-radius-pill); font-size: var(--ss-size-small); font-weight: 600; }
.ss-website-duo__signal .ss-website-icon { width: 16px; height: 16px; color: var(--ss-glass-accent); }
.ss-website-duo__visual { position: relative; }
.ss-website-duo__visual::before { content: ""; position: absolute; inset: 10% 6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 113, 206, 0.28), transparent); filter: blur(30px); }
.ss-website-duo__layer--lite .ss-website-ui-frame { box-shadow: var(--ss-elev-4), 0 0 0 1px rgba(0, 31, 84, 0.06); }
.ss-website-duo__layer--pro .ss-website-ui-frame { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); border-color: var(--ss-line-inverse); box-shadow: var(--ss-highlight-inner), var(--ss-elev-dark-2); }
.ss-website-duo__divider { display: none; }
/* Stacked (touch, tablet, reduced motion): the same two scenes as rounded product cards. */
.ss-website-duo__stage { display: grid; gap: 16px; padding-inline: var(--ss-gutter); }
.ss-website-duo__layer { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ss-radius-panel); padding-block: clamp(40px, 2rem + 3vw, 80px); }
.ss-website-duo__layer .ss-website-container { padding-inline: clamp(20px, 4vw, 48px); }
@media (min-width: 1024px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-duo__stage { display: block; padding-inline: 0; }
  }
@media (min-width: 1024px) {
  .ss-website-duo__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ss-space-8); }
  .ss-website-duo__layer--pro .ss-website-duo__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ss-website-duo__layer--pro .ss-website-duo__copy { grid-column: 2; grid-row: 1; }
    .ss-website-duo__layer--lite .ss-website-duo__visual { margin-inline-end: calc(var(--ss-gutter) * -1 - 40px); }
  .ss-website-duo__layer--pro .ss-website-duo__visual { grid-column: 1; grid-row: 1; margin-inline-start: calc(var(--ss-gutter) * -1 - 40px); }
}

/* Pinned version: one stage, Pro clipped by --ss-wipe (100 = hidden, 0 = full, 50 = split).
   --ss-exit (0 → 1) resolves both halves into two product cards that sit inside the 1280px
   content container (immersive full-bleed before, normal content system after). Each layer's
   clip and its frame (surface, border, shadow) read the same two inset variables, so the card
   edge, shadow and content always agree. --ss-leave-* lift the cards out, Lite first. */
@media (min-width: 1024px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-duo {
    height: 290vh;
    --ss-leave-lite: 0; --ss-leave-pro: 0;
    --ss-card-side: max(var(--ss-gutter), calc((100% - var(--ss-container)) / 2));
    --ss-card-top: calc(var(--ss-exit) * (var(--ss-header-h) + 28px));
    --ss-card-bottom: calc(var(--ss-exit) * 104px);
    --ss-card-radius: calc(var(--ss-exit) * 24px);
  }
  .ss-website-js .ss-website-duo__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
    .ss-website-js .ss-website-duo__layer--lite, .ss-website-js .ss-website-duo__frame--lite {
    --ss-cl: calc(var(--ss-exit) * var(--ss-card-side)); --ss-cr: calc(var(--ss-exit) * (50% + 12px));
    transform: translate3d(0, calc(var(--ss-leave-lite) * -14vh), 0);
  }
  .ss-website-js .ss-website-duo__layer--pro, .ss-website-js .ss-website-duo__frame--pro {
    --ss-cl: calc(var(--ss-wipe) * 1% + var(--ss-exit) * 12px); --ss-cr: calc(var(--ss-exit) * var(--ss-card-side));
    transform: translate3d(0, calc(var(--ss-leave-pro) * -14vh), 0);
  }
  [dir="rtl"].ss-website-js .ss-website-duo__layer--lite, [dir="rtl"].ss-website-js .ss-website-duo__frame--lite { --ss-cr: calc(var(--ss-exit) * var(--ss-card-side)); --ss-cl: calc(var(--ss-exit) * (50% + 12px)); }
  [dir="rtl"].ss-website-js .ss-website-duo__layer--pro, [dir="rtl"].ss-website-js .ss-website-duo__frame--pro { --ss-cr: calc(var(--ss-wipe) * 1% + var(--ss-exit) * 12px); --ss-cl: calc(var(--ss-exit) * var(--ss-card-side)); }
  .ss-website-js .ss-website-duo__layer { position: absolute; inset: 0; display: grid; align-items: center; padding-block: calc(var(--ss-header-h) + 16px) 24px; border-radius: 0; clip-path: inset(var(--ss-card-top) var(--ss-cr) var(--ss-card-bottom) var(--ss-cl) round var(--ss-card-radius)); }
  .ss-website-js .ss-website-duo__frame {
    display: block; position: absolute; top: var(--ss-card-top); bottom: var(--ss-card-bottom); left: var(--ss-cl); right: var(--ss-cr);
    border-radius: var(--ss-card-radius); opacity: var(--ss-exit); pointer-events: none;
  }
  /* Lite card: a pale SkyStruct surface (the layer itself is transparent so the page atmosphere carries through the intro). */
  .ss-website-js .ss-website-duo__frame--lite { background: linear-gradient(165deg, var(--ss-color-white) 0%, var(--ss-color-blue-mist) 100%); border: 1px solid rgba(0, 31, 84, 0.09); box-shadow: var(--ss-glass-highlight), 0 1px 2px rgba(2, 4, 15, 0.04), var(--ss-elev-2); }
  .ss-website-js .ss-website-duo__frame--pro { box-shadow: 0 30px 70px rgba(0, 31, 84, 0.28); }
  .ss-website-js .ss-website-duo__divider {
    display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--ss-wipe) * 1%); z-index: 3;
    width: 2px; margin-left: -1px;
    background: linear-gradient(180deg, transparent, var(--ss-color-blue-bright) 20%, rgba(255, 255, 255, 0.9) 50%, var(--ss-color-blue-bright) 80%, transparent);
    box-shadow: 0 0 24px rgba(77, 163, 238, 0.8);
    opacity: calc(min(1, (100 - var(--ss-wipe)) / 6) * min(1, var(--ss-wipe) / 6) * (1 - var(--ss-exit)));
    pointer-events: none;
  }
  [dir="rtl"].ss-website-js .ss-website-duo__divider { left: auto; right: calc(var(--ss-wipe) * 1%); margin: 0 -1px 0 0; }
  .ss-website-duo__knob { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--ss-radius-pill); transform: translate(-50%, -50%); white-space: nowrap; font-size: var(--ss-size-micro); font-weight: 700; color: var(--ss-color-white); --ss-glass-bg: rgba(6, 14, 40, 0.6); --ss-glass-border: rgba(255, 255, 255, 0.24); }
  .ss-website-duo__knob i { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.4); }
  /* Compare phase: product visuals step back; each story centres inside its own card. */
  .ss-website-js .ss-website-duo__visual { transition: opacity var(--ss-dur-story) var(--ss-ease-out), transform var(--ss-dur-story) var(--ss-ease-out); }
  .ss-website-js .ss-website-duo[data-ss-duo-phase="compare"] .ss-website-duo__visual { opacity: 0; transform: scale(0.94); }
  .ss-website-js .ss-website-duo__layer .ss-website-container { padding-inline: var(--ss-gutter); max-width: var(--ss-container); }
  .ss-website-js .ss-website-duo__copy { transition: transform var(--ss-dur-story) var(--ss-ease-out); }
  .ss-website-js .ss-website-duo[data-ss-duo-phase="compare"] .ss-website-duo__copy { transform: translateX(var(--ss-copy-shift)); }
  .ss-website-js .ss-website-duo__layer--lite { --ss-copy-shift: clamp(24px, 3vw, 56px); }
  .ss-website-js .ss-website-duo__layer--pro { --ss-copy-shift: calc(clamp(24px, 3vw, 56px) * -1); }
  [dir="rtl"].ss-website-js .ss-website-duo__layer--lite { --ss-copy-shift: calc(clamp(24px, 3vw, 56px) * -1); }
  [dir="rtl"].ss-website-js .ss-website-duo__layer--pro { --ss-copy-shift: clamp(24px, 3vw, 56px); }
  .ss-website-js .ss-website-duo__layer--lite .ss-website-duo__visual { margin-inline-end: 0; }
  .ss-website-js .ss-website-duo__layer--pro .ss-website-duo__visual { margin-inline-start: 0; }
}

/* Globe: WebGL dotted land on a lit sphere (2D canvas fallback); see globe.js. */
.ss-website-globe { position: relative; width: min(100%, 620px); aspect-ratio: 1; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ss-website-globe.is-dragging { cursor: grabbing; }
.ss-website-globe__body {
  position: absolute; inset: 4%; border-radius: 50%;
  background: radial-gradient(circle at 50% 18%, rgba(77, 163, 238, 0.3), rgba(0, 31, 84, 0.6) 40%, rgba(2, 4, 15, 0.95) 72%), var(--ss-color-night);
  box-shadow: inset 0 30px 80px rgba(77, 163, 238, 0.16), 0 0 0 1px rgba(77, 163, 238, 0.28), 0 -10px 90px rgba(0, 113, 206, 0.45), 0 -30px 240px rgba(0, 113, 206, 0.25);
}
.ss-website-globe__dots, .ss-website-globe__overlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--ss-dur-story) var(--ss-ease-out); }
.ss-website-globe.is-ready :is(.ss-website-globe__dots, .ss-website-globe__overlay) { opacity: 1; }
.ss-website-globe__label {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 8px;
  border-radius: var(--ss-radius-pill);
  background: rgba(6, 14, 40, 0.72); border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: var(--ss-size-micro); font-weight: 600; color: var(--ss-color-white); white-space: nowrap;
  transform: translate(var(--ss-gx, -999px), var(--ss-gy, -999px)) translate(12px, -50%);
  opacity: var(--ss-gv, 0);
  transition: opacity var(--ss-dur-base);
  pointer-events: none;
}
.ss-website-globe__label i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-color-blue-bright); }
.ss-website-globe__label--origin { padding: 7px 14px 7px 10px; font-size: var(--ss-size-small); border-color: rgba(77, 163, 238, 0.5); box-shadow: var(--ss-elev-dark-1); transform: translate(var(--ss-gx, -999px), var(--ss-gy, -999px)) translate(18px, -50%); }
.ss-website-globe__label--origin i { width: 9px; height: 9px; background: var(--ss-color-white); box-shadow: 0 0 0 3px rgba(77, 163, 238, 0.45); }
.ss-website-globe__label--origin span { display: grid; line-height: 1.2; }
/* Label placement around each marker (markets cluster tightly around Doha). */
.ss-website-globe__label[data-ss-side="above"] { transform: translate(var(--ss-gx, -999px), var(--ss-gy, -999px)) translate(-50%, calc(-100% - 16px)); }
.ss-website-globe__label[data-ss-side="left"] { transform: translate(var(--ss-gx, -999px), var(--ss-gy, -999px)) translate(calc(-100% - 12px), -50%); }
.ss-website-globe__label[data-ss-side="below"] { transform: translate(var(--ss-gx, -999px), var(--ss-gy, -999px)) translate(-50%, 14px); }
.ss-website-globe__label[data-ss-side="right"] { transform: translate(var(--ss-gx, -999px), var(--ss-gy, -999px)) translate(12px, -50%); }
.ss-website-globe__label--origin small { font-size: var(--ss-size-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-color-blue-bright); }
[lang="ar"] .ss-website-globe__label--origin small { letter-spacing: 0; text-transform: none; }

/* Duo: intro and stage share one atmosphere (no stage background in the pinned version). */
.ss-website-duo-section { overflow-x: clip; }
.ss-website-duo__frame { display: none; }
/* Intro: centred, staged. Eyebrow first, then the title rises word by word through a mask
   while a soft light develops beneath it and the Lite scene emerges (scroll-linked). */
.ss-website-duo-intro { position: relative; display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; padding-block: var(--ss-space-4) 0; }
.ss-website-duo-intro__title { max-width: 22ch; }
.ss-website-duo-intro__light { position: absolute; z-index: -1; left: 50%; top: 40%; width: min(90vw, 980px); aspect-ratio: 2.4; border-radius: 50%; transform: translate(-50%, -30%); background: radial-gradient(closest-side, rgba(0, 113, 206, 0.16), rgba(77, 163, 238, 0.08) 50%, transparent); filter: blur(20px); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-duo-intro { --ss-r: clamp(0, (var(--ss-progress, 1) - 0.1) / 0.32, 1); }
  .ss-website-js .ss-website-duo-intro .ss-website-eyebrow { opacity: clamp(0, var(--ss-r) * 3, 1); transform: translateY(calc((1 - clamp(0, var(--ss-r) * 3, 1)) * 12px)); }
  .ss-website-js .ss-website-duo-intro__light { opacity: var(--ss-r); transform: translate(-50%, -30%) scale(calc(0.7 + var(--ss-r) * 0.3)); }
  .ss-website-js .is-split-scroll .ss-website-split__inner { animation: none; transform: var(--ss-split-off, translateY(calc((1 - clamp(0, var(--ss-r) * 1.7 - 0.25 - var(--ss-i) * 0.07, 1)) * 105%))); }
  .ss-website-js .ss-website-duo { margin-top: var(--ss-space-6); }
}
/* Contextual compare prompt: a small floating helper, only while both product cards are visible. */
.ss-website-duo__prompt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; width: fit-content; margin: var(--ss-space-5) auto 0; padding: 10px 12px 10px 18px; border-radius: var(--ss-radius-md); font-size: var(--ss-size-small); color: var(--ss-text-2); }
.ss-website-duo__prompt-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--ss-radius-button); font-weight: 600; color: var(--ss-color-blue); text-decoration: none; transition: background var(--ss-dur-fast) var(--ss-ease-out); }
.ss-website-duo__prompt-link .ss-website-icon { width: 16px; height: 16px; transition: transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-duo__prompt-link:hover { background: var(--ss-color-blue-08); }
.ss-website-duo__prompt-link:hover .ss-website-icon { transform: translateX(3px); }
[dir="rtl"] .ss-website-duo__prompt-link:hover .ss-website-icon { transform: scaleX(-1) translateX(3px); }
@media (min-width: 1024px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-duo__layer--lite { background: transparent; }
  .ss-website-js .ss-website-duo__layer--lite .ss-website-backdrop { display: none; }
  .ss-website-js .ss-website-duo__prompt { position: absolute; z-index: 4; left: 50%; bottom: 36px; margin: 0; white-space: nowrap; opacity: 0; transform: translate(-50%, 12px) scale(0.98); pointer-events: none;
    transition: opacity var(--ss-dur-base) var(--ss-ease-out), transform var(--ss-dur-slow) var(--ss-ease-out); }
  .ss-website-js .ss-website-duo[data-ss-duo-prompt="on"] .ss-website-duo__prompt,
  .ss-website-js .ss-website-duo__prompt:focus-within { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
}
/* Short desktop screens: slimmer card insets and a tighter story so both cards always fit. */
@media (min-width: 1024px) and (min-height: 680px) and (max-height: 820px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-duo { --ss-card-top: calc(var(--ss-exit) * (var(--ss-header-h) + 12px)); --ss-card-bottom: calc(var(--ss-exit) * 78px); }
  .ss-website-js .ss-website-duo__prompt { bottom: 18px; }
  .ss-website-js .ss-website-duo[data-ss-duo-phase="compare"] .ss-website-duo__copy { gap: 12px; }
  .ss-website-js .ss-website-duo[data-ss-duo-phase="compare"] .ss-website-duo__summary { font-size: var(--ss-size-body); }
  .ss-website-js .ss-website-duo[data-ss-duo-phase="compare"] .ss-website-title--h1 { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem); }
}
/* Lite / Pro cards: ONE component, two themes. Shared rows (title · summary · signals + AI cue ·
   CTA), top-aligned; the variable rows are equalised across the pair ([data-ss-peers]), so equal
   copy blocks centre identically and every row starts on the same line in both cards. */
.ss-website-duo__copy { align-content: start; grid-template-rows: auto auto auto auto; }
.ss-website-duo__meta { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 10px 12px; }
.ss-website-duo__meta .ss-website-duo__signals { flex: 0 1 auto; }
/* Pro layer = the Pro page's dark recipe (near-black canvas, one low navy light, neutral glass
   pills, white check marks) — not navy + bright blue. */
.ss-website-duo__layer--pro { background: radial-gradient(60% 70% at 0% 100%, rgba(0, 31, 84, 0.7), transparent 62%), radial-gradient(50% 50% at 100% 0%, rgba(0, 113, 206, 0.12), transparent 70%), linear-gradient(160deg, #0B0F19 0%, #05070E 55%, #02040F 100%); }
.ss-website-duo__layer--pro .ss-website-duo__signal { color: rgba(244, 245, 247, 0.92); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.ss-website-duo__layer--pro .ss-website-duo__signal .ss-website-icon { color: #FFFFFF; }
.ss-website-duo__layer--pro .ss-website-check-list .ss-website-icon { color: #FFFFFF; }

/* Phones: the two products stay a Lite → Pro pair, but compact — body-size summary, small signal
   pills, tighter card padding; the scaled product graphic sits right under the CTA. */
@media (max-width: 767px) {
  .ss-website-duo__layer { padding-block: 32px 28px; }
  .ss-website-duo__grid { gap: var(--ss-space-5); }
  .ss-website-duo__summary { font-size: var(--ss-size-body); }
  .ss-website-duo__signals { gap: 6px; }
  .ss-website-duo__signal { min-height: 30px; padding: 0 11px 0 8px; gap: 6px; font-size: var(--ss-size-micro); }
  .ss-website-duo__signal .ss-website-icon { width: 14px; height: 14px; }
}

@media (max-width: 1023px) { .ss-website-js .is-split-scroll { --ss-split-off: none; } .ss-website-js .ss-website-duo-intro { --ss-r: 1 !important; } }

/* Stacked Lite / Pro cards (below the side-by-side scene): the light Lite card keeps a defined
   edge on the near-white page — a cool tinted surface, hairline border and soft lift. */
@media (max-width: 1023px) {
  .ss-website-duo__layer--lite { background: linear-gradient(180deg, #E6F0FB, #F6F9FD 72%); box-shadow: 0 0 0 1px rgba(0, 31, 84, 0.1), 0 18px 44px rgba(0, 31, 84, 0.1); }
}

/* ==== ss-website-sections.css ==== */


/* ---------- Core capabilities (Lite / Pro): a compact vertical list + one stage ----------
   Desktop: rows (icon · title · indicator) grouped by area on the left; the stage on the right
   shows the selected module's copy directly above its product moment. Below 1024px the list
   is replaced by one compact picker that sits right above the copy. Area colour appears only
   as a small accent (row icon, indicator, category mark). */
.ss-website-capsel { display: grid; gap: clamp(28px, 1.5rem + 2vw, 56px); margin-top: clamp(36px, 2rem + 2vw, 64px); }
.ss-website-capsel__stage { display: grid; gap: 18px; min-width: 0; }
.ss-website-capsel__group { display: grid; gap: 2px; }
.ss-website-capsel__group + .ss-website-capsel__group { margin-top: 14px; }
.ss-website-capsel__group-label { margin-bottom: 6px; padding-inline: 12px; font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
.ss-website-capsel__row {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 8px; align-items: center; gap: 12px;
  width: 100%; min-height: 46px; padding: 7px 14px 7px 8px; border-radius: 12px; border: 1px solid transparent;
  text-align: start; font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-2); background: transparent;
  transition: background-color var(--ss-motion-fast), color var(--ss-motion-fast), border-color var(--ss-motion-fast), box-shadow var(--ss-motion-ui) var(--ss-ease-out);
}
.ss-website-capsel__row-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ss-text-3); background: color-mix(in srgb, var(--ss-text-1) 5%, transparent); transition: color var(--ss-motion-fast), background-color var(--ss-motion-fast); }
.ss-website-capsel__row-icon .ss-website-icon { width: 16px; height: 16px; }
.ss-website-capsel__row-title { min-width: 0; line-height: 1.3; text-wrap: balance; }
.ss-website-capsel__row-mark { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ss-line-strong); transition: background-color var(--ss-motion-fast), box-shadow var(--ss-motion-ui); }
.ss-website-capsel__row:hover { color: var(--ss-text-1); background: color-mix(in srgb, var(--ss-text-1) 4%, transparent); }
.ss-website-capsel__row:active { transform: scale(0.99); }
.ss-website-capsel__row[aria-selected="true"] { color: var(--ss-text-1); background: var(--ss-color-white); border-color: var(--ss-line); box-shadow: 0 6px 18px rgba(0, 31, 84, 0.07); }
.ss-website-capsel__row[aria-selected="true"] .ss-website-capsel__row-icon { color: var(--ss-accent); background: color-mix(in srgb, var(--ss-accent) 12%, transparent); }
.ss-website-capsel__row[aria-selected="true"] .ss-website-capsel__row-mark { background: var(--ss-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-accent) 20%, transparent); }
.ss-website-capsel__row[aria-selected="true"]::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: -1px; width: 3px; border-radius: 3px; background: var(--ss-accent); }
@media (min-width: 1024px) {
  .ss-website-capsel { grid-template-columns: minmax(220px, 3fr) minmax(0, 8fr); column-gap: clamp(32px, 3.5vw, 72px); align-items: start; }
  .ss-website-capsel__selector { display: block; position: sticky; top: calc(var(--ss-header-h, 72px) + 24px); }
}
/* Below 1024px: the tabs are a horizontal rail of icon pills (visible choices, not a dropdown);
   the rail bleeds to the screen edge and fades out to show there is more to scroll. */
@media (max-width: 1023px) {
  .ss-website-capsel { gap: 20px; }
  .ss-website-capsel__selector { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--ss-gutter); scrollbar-width: none;
    margin-inline: calc(var(--ss-gutter) * -1); padding: 14px var(--ss-gutter) 28px; margin-block: -14px 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  [dir="rtl"] .ss-website-capsel__selector { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); }
  .ss-website-capsel__selector::-webkit-scrollbar { display: none; }
  .ss-website-capsel__group { display: contents; }
  .ss-website-capsel__group + .ss-website-capsel__group { margin-top: 0; }
  .ss-website-capsel__group-label, .ss-website-capsel__row-mark { display: none; }
  .ss-website-capsel__row { flex: none; width: auto; grid-template-columns: 28px auto; gap: 8px; min-height: 44px; padding: 6px 16px 6px 7px; white-space: nowrap; scroll-snap-align: start;
    border-color: var(--ss-line); background: color-mix(in srgb, var(--ss-color-white) 75%, transparent); }
  .ss-website-capsel__row-icon { width: 28px; height: 28px; }
  .ss-website-capsel__row[aria-selected="true"] { border-color: var(--ss-accent); background: var(--ss-color-white); box-shadow: inset 0 0 0 1px var(--ss-accent), 0 8px 20px color-mix(in srgb, var(--ss-accent) 18%, transparent); }
  .ss-website-capsel__row[aria-selected="true"]::before { display: none; }
  .ss-website-capsel__row[aria-selected="true"] .ss-website-capsel__row-icon { color: #FFFFFF; background: var(--ss-accent); }
  .ss-website-pro-dark .ss-website-capsel__row { border-color: var(--ss-pro-border); background: rgba(255, 255, 255, 0.04); }
  .ss-website-pro-dark .ss-website-capsel__row[aria-selected="true"] { border-color: var(--ss-accent-bright, var(--ss-accent)); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px var(--ss-accent-bright, var(--ss-accent)); }
  .ss-website-pro-dark .ss-website-capsel__row[aria-selected="true"] .ss-website-capsel__row-icon { color: #02040F; background: var(--ss-accent-bright, #FFFFFF); }
}
.ss-website-capsel__panels { display: grid; }
.ss-website-capsel__panel { display: grid; gap: var(--ss-space-5); }
.ss-website-js .ss-website-capsel__panel:not([hidden]) { animation: ss-capsel-in var(--ss-motion-card) var(--ss-ease-out); }
@keyframes ss-capsel-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ss-website-js .ss-website-capsel__panel:not([hidden]) { animation: none; } }
.ss-website-capsel__media { min-width: 0; }
.ss-website-capsel__media .ss-website-pui { width: min(100%, 620px); margin-inline: auto; }
.ss-website-capsel__text { display: grid; gap: 10px; justify-items: start; }
.ss-website-capsel__category { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-accent-ink); }
.ss-website-capsel__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ss-accent); background: var(--ss-accent-soft, color-mix(in srgb, var(--ss-accent) 12%, transparent)); }
.ss-website-capsel__icon .ss-website-icon { width: 16px; height: 16px; }
.ss-website-capsel__body { color: var(--ss-text-2); }

/* ---------- Onboarding + FAQ chapter (Lite / Pro) ----------
   Desktop with motion: the approved steps travel horizontally while the page scrolls (the pin
   lasts only as long as the track: --ss-track-shift, set by scenes.js). Elsewhere: a swipeable row. */
.ss-website-onboarding { padding-bottom: var(--ss-section-y); }
.ss-website-onboarding__viewport { margin-top: calc(clamp(28px, 1.5rem + 1.5vw, 48px) - 24px); margin-bottom: -80px; padding-block: 24px 80px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ss-website-onboarding__viewport::-webkit-scrollbar { display: none; }
.ss-website-onboarding__track { display: flex; gap: 20px; width: max-content; padding-inline: max(var(--ss-gutter), calc((100vw - var(--ss-container)) / 2)); padding-bottom: 8px; }
.ss-website-onboarding__stage { display: grid; grid-template-rows: auto 1fr; width: min(82vw, 460px); overflow: hidden; scroll-snap-align: center; border-radius: var(--ss-radius-card); background: var(--ss-color-white); box-shadow: 0 0 0 1px var(--ss-line), 0 20px 50px rgba(0, 31, 84, 0.08); }
.ss-website-onboarding__media { max-height: 250px; overflow: hidden; padding: 18px 18px 0; background: linear-gradient(180deg, var(--ss-color-blue-mist), var(--ss-color-white)); -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent); mask-image: linear-gradient(180deg, #000 74%, transparent); }
.ss-website-onboarding__body { display: grid; align-content: start; gap: 10px; padding: clamp(20px, 1rem + 1vw, 28px); }
.ss-website-onboarding__num span { display: inline-grid; place-items: center; min-width: 36px; height: 28px; padding: 0 10px; border-radius: var(--ss-radius-pill); font-size: var(--ss-size-micro); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-color-blue-strong); background: var(--ss-color-blue-mist); box-shadow: inset 0 0 0 1px rgba(0, 113, 206, 0.18); }
.ss-website-onboarding__title { font-size: var(--ss-size-h5); font-weight: 600; line-height: 1.3; color: var(--ss-text-1); }
.ss-website-onboarding__text { color: var(--ss-text-2); font-size: var(--ss-size-small); line-height: 1.6; }
.ss-website-onboarding__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ss-website-onboarding__pills li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--ss-radius-pill); background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 113, 206, 0.16); box-shadow: 0 2px 8px rgba(0, 31, 84, 0.04); font-size: var(--ss-size-micro); line-height: 1.35; color: var(--ss-text-1); }
.ss-website-onboarding__pills .ss-website-icon { flex: none; width: 13px; height: 13px; color: var(--ss-color-blue); }
.ss-website-onboarding__rail { display: none; }
.ss-website-onboarding__faq { margin-top: clamp(64px, 3rem + 4vw, 128px); }
@media (min-width: 1024px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-onboarding__scene.is-pinned { height: calc(100vh + var(--ss-track-shift, 0px)); }
  .ss-website-js .is-pinned .ss-website-onboarding__sticky { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; padding-top: var(--ss-header-h); }
  .ss-website-js .is-pinned .ss-website-onboarding__viewport { overflow: visible; scroll-snap-type: none; }
  .ss-website-js .is-pinned .ss-website-onboarding__track { transform: translateX(calc(var(--ss-progress, 0) * var(--ss-track-shift, 0px) * -1)); will-change: transform; }
  [dir="rtl"].ss-website-js .is-pinned .ss-website-onboarding__track { transform: translateX(calc(var(--ss-progress, 0) * var(--ss-track-shift, 0px))); }
  .ss-website-js .is-pinned .ss-website-onboarding__stage { width: min(32vw, 440px); }
  .ss-website-js .is-pinned .ss-website-onboarding__media { max-height: 220px; }
  .ss-website-js .is-pinned .ss-website-onboarding__rail { display: block; position: relative; height: 3px; margin-top: 28px; border-radius: 2px; background: var(--ss-line); overflow: hidden; }
  .ss-website-js .is-pinned .ss-website-onboarding__rail-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--ss-progress, 0) * 100%); background: var(--ss-color-blue); }
  [dir="rtl"].ss-website-js .is-pinned .ss-website-onboarding__rail-fill { inset: 0 0 0 auto; }
}

/* ---------- Tier card (capability pages: Lite / Pro availability) ---------- */
.ss-website-tier-card { display: grid; gap: var(--ss-space-3); justify-items: start; padding: var(--ss-space-6); border-radius: var(--ss-radius-card); border: 1px solid var(--ss-line); background: var(--ss-color-paper); }
.ss-website-tier-card p:not(.ss-website-family__tag) { color: var(--ss-text-2); font-size: var(--ss-size-control); }
.ss-website-tier-card--pro { background: radial-gradient(80% 80% at 100% 0%, rgba(0, 113, 206, 0.3), transparent 60%), var(--ss-color-navy); color: var(--ss-text-inverse-1); border-color: transparent; }
.ss-website-tier-card--pro p:not(.ss-website-family__tag) { color: var(--ss-text-inverse-2); }
.ss-website-tier-card--pro .ss-website-family__tag, .ss-website-tier-card--pro .ss-website-text-link { color: var(--ss-color-blue-bright); }
td) { padding: 12px 20px; vertical-align: middle; }
/* Phones: feature label + one product (or plan) column, switched with a segmented control. */
@media (max-width: 767px) {
  .ss-website-js .ss-website-compare__switch { display: inline-flex; position: sticky; top: calc(var(--ss-header-h) + 8px); z-index: 3; box-shadow: var(--ss-elev-1); }
  .ss-website-compare__area-head { width: 42%; }
  .ss-website-compare--avail .ss-website-compare__area-head { width: 46%; }
  .ss-website-compare__table thead th { position: static; }
  .ss-website-js [data-ss-compare] .ss-website-compare__table tr > :is(td, th):not(:first-child) { display: none; }
  .ss-website-js [data-ss-compare][data-ss-col="1"] .ss-website-compare__table tr > :nth-child(2),
  .ss-website-js [data-ss-compare][data-ss-col="2"] .ss-website-compare__table tr > :nth-child(3),
  .ss-website-js [data-ss-compare][data-ss-col="3"] .ss-website-compare__table tr > :nth-child(4) { display: table-cell; }
  .ss-website-compare__table tbody :is(th, td) { padding: 12px 14px; font-size: var(--ss-size-small); }
  .ss-website-compare__head { padding: 14px; }
  .ss-website-compare--avail .ss-website-avail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- Audience scenes (Lite + Pro) ---------- */
.ss-website-audience__stage { display: grid; gap: var(--ss-space-5); align-items: start; }
@media (min-width: 1024px) { .ss-website-audience__stage { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--ss-space-7); } }
.ss-website-audience__list { display: grid; gap: 8px; }
.ss-website-audience__tab { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 18px; border-radius: var(--ss-radius-card); text-align: start; font-size: 1.0625rem; font-weight: 700; color: var(--ss-text-2); border: 1px solid transparent; transition: background-color var(--ss-dur-base), border-color var(--ss-dur-base), color var(--ss-dur-base), transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-audience__tab:hover { color: var(--ss-text-1); background: rgba(255, 255, 255, 0.6); }
.ss-website-audience__tab[aria-selected="true"] { color: var(--ss-text-1); background: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 0 #fff, var(--ss-elev-2); }
.ss-website-audience__tab-title { flex: 1; }
.ss-website-audience__tab-arrow { width: 18px; height: 18px; color: var(--ss-color-blue); opacity: 0; transform: translateX(-6px); transition: opacity var(--ss-dur-base), transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-audience__tab[aria-selected="true"] .ss-website-audience__tab-arrow { opacity: 1; transform: none; }
[dir="rtl"] .ss-website-audience__tab-arrow { transform: scaleX(-1) translateX(-6px); }
[dir="rtl"] .ss-website-audience__tab[aria-selected="true"] .ss-website-audience__tab-arrow { transform: scaleX(-1); }
.ss-website-audience__panel { display: grid; gap: 0; }
.ss-website-audience__panel:not([hidden]) { animation: ss-card-in 520ms var(--ss-ease-out) both; }
.ss-website-audience__photo { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--ss-radius-inset); overflow: hidden; box-shadow: var(--ss-elev-3); }
.ss-website-audience__caption { position: relative; z-index: 2; display: grid; gap: 14px; margin: -70px 24px 0; padding: 22px 26px; border-radius: var(--ss-radius-panel); background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: var(--ss-elev-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ss-website-audience__caption p { color: var(--ss-text-2); font-size: var(--ss-size-lead); }
/* Dark treatment (Lite and Pro product pages): same composition, inverse tones. */
.ss-website-section--dark .ss-website-audience__tab { color: var(--ss-text-inverse-2); }
.ss-website-section--dark .ss-website-audience__tab:hover { color: var(--ss-color-white); background: rgba(255, 255, 255, 0.06); }
.ss-website-section--dark .ss-website-audience__tab[aria-selected="true"] { color: var(--ss-color-white); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(0, 0, 0, 0.3); }
.ss-website-section--dark .ss-website-audience__tab .ss-website-icon-tile { color: var(--ss-color-blue-bright); background: rgba(77, 163, 238, 0.12); border-color: rgba(77, 163, 238, 0.25); }
.ss-website-section--dark .ss-website-audience__tab-arrow { color: var(--ss-color-blue-bright); }
.ss-website-section--dark .ss-website-audience__caption { background: linear-gradient(160deg, rgba(0, 31, 84, 0.92), rgba(2, 12, 40, 0.94)); border-color: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ss-website-section--dark .ss-website-audience__caption p { color: var(--ss-text-inverse-2); }
.ss-website-presence--photo .ss-website-presence__avatars { top: 18px; inset-inline-end: 22px; }
.ss-website-presence--photo .ss-website-presence__event { bottom: auto; top: 60px; inset-inline-end: 18px; animation: none; opacity: 1; }
@media (max-width: 1023px) {
  .ss-website-audience__list { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--ss-gutter) * -1); padding: 14px var(--ss-gutter) 34px; margin-block: -12px -26px; }
  .ss-website-audience__tab { flex: 0 0 auto; width: auto; min-height: 52px; font-size: var(--ss-size-control); padding: 8px 14px; }
  .ss-website-audience__tab .ss-website-icon-tile { width: 32px; height: 32px; }
  .ss-website-audience__tab-arrow { display: none; }
  .ss-website-audience__caption { margin: -40px 12px 0; padding: 18px; }
}
@media (max-width: 899px) { .ss-website-presence--photo .ss-website-presence__event { display: inline-flex; } }

/* ---------- Capability link row/card (related capabilities) ---------- */
.ss-website-cap-link {
  display: flex; align-items: center; gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  border-radius: var(--ss-radius-md);
  border: 1px solid var(--ss-line);
  background: var(--ss-color-paper);
  transition: border-color var(--ss-dur-base) var(--ss-ease-out), background-color var(--ss-dur-base) var(--ss-ease-out), transform var(--ss-dur-base) var(--ss-ease-out);
}
.ss-website-cap-link__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ss-radius-control); background: var(--ss-color-white); box-shadow: inset 0 0 0 1px var(--ss-line); color: var(--ss-color-blue); flex: none; }
.ss-website-cap-link__icon .ss-website-icon { width: 20px; height: 20px; }
.ss-website-cap-link__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ss-website-cap-link__name { font-weight: 600; }
.ss-website-cap-link__desc { font-size: var(--ss-size-small); color: var(--ss-text-3); }
.ss-website-cap-link__pillar { font-size: var(--ss-size-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-color-blue); }
.ss-website-cap-link__arrow { width: 18px; height: 18px; color: var(--ss-text-3); transition: transform var(--ss-dur-base) var(--ss-ease-out), color var(--ss-dur-base); }
.ss-website-cap-link:hover { border-color: var(--ss-color-blue-40); background: var(--ss-color-white); }
.ss-website-cap-link:hover .ss-website-cap-link__arrow { color: var(--ss-color-blue); transform: translateX(3px); }
[dir="rtl"] .ss-website-cap-link:hover .ss-website-cap-link__arrow { transform: scaleX(-1) translateX(3px); }
.ss-website-cap-link--card { align-items: flex-start; padding: 20px; min-height: 100%; }
/* Pillar colour: the link takes its section's C.L.I.C. accent (SkyStruct Blue when none). */
.ss-website-cap-link__pillar { color: var(--ss-accent-ink); }
.ss-website-cap-link__icon { color: var(--ss-accent); }

/* Core capabilities stage: copy first, then the product moment; both enter together on change. */
.ss-website-capsel__panel .ss-website-capsel__text { max-width: 720px; }
@media (min-width: 1024px) { .ss-website-capsel__panel { gap: clamp(20px, 1.6vw, 28px); } .ss-website-capsel__media .ss-website-pui { width: min(100%, 720px); margin-inline: 0; } }
/* Phones: the single visible plan / product column takes the remaining width (no dead column). */
@media (max-width: 767px) {
  .ss-website-js [data-ss-compare] .ss-website-compare__table { width: 100%; table-layout: auto; }
  .ss-website-js [data-ss-compare] .ss-website-compare__table tr > :is(td, th):not(:first-child) { width: auto; min-width: 0; }
}

/* Onboarding cards in the swipe row (below 1024px): a tighter shadow that fits the side gutters. */
@media (max-width: 1023px) {
  .ss-website-onboarding__stage { box-shadow: 0 0 0 1px rgba(2, 4, 15, 0.09), 0 8px 18px rgba(0, 31, 84, 0.08); }
  .ss-website-pro-dark .ss-website-onboarding__viewport .ss-website-onboarding__stage { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.32); }
}

@media (max-width: 1023px) {
  .ss-website-capsel__stage { margin-top: 4px; }
  .ss-website-capsel__category { display: none; }  /* the selected pill already names the module */
}
.ss-website-capsel__cta { margin-top: 6px; }

/* ==== ss-website-navigation.css ==== */
/* Header, mega menus, mobile navigation, sound controls, footer. */

/* ---------- Header: a floating glass capsule ---------- */
.ss-website-header {
  position: sticky;
  top: 0;
  z-index: var(--ss-z-header);
  height: var(--ss-header-h);
  margin-bottom: calc(var(--ss-header-h) * -1);
  padding-top: 12px;
  color: var(--ss-text-1);
  transition: color var(--ss-dur-base) var(--ss-ease-out), transform var(--ss-dur-slow) var(--ss-ease-out);
}
.ss-website-header.is-hidden:not(.is-menu-open):not(:focus-within) { transform: translateY(-110%); }
.ss-website-header--visible { transform: none; }
/* Shopify wraps the header in a section <div> exactly as tall as the header, which confined the
   sticky header to that box: it scrolled away with it and never came back. The wrapper takes no
   box of its own, so the header sticks to the page as in Source. */
.ss-website-shopify-section--header { display: contents; }
.ss-website-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ss-space-4);
  height: calc(var(--ss-header-h) - 16px);
  width: min(100% - 2 * var(--ss-gutter) + 24px, var(--ss-container) + 24px);
  padding-block: 0;
  max-width: none;
  margin-inline: auto;
  padding-inline: 18px 8px;
}
[dir="rtl"] .ss-website-header__bar { padding-inline: 18px 8px; }
/* Material lives on a pseudo-element so the bar never becomes a containing
   block for fixed descendants and the blur never clips the mega menus. */
.ss-website-header__bar::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: var(--ss-radius-card);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(2, 4, 15, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--ss-elev-1);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  transition: background-color var(--ss-dur-base) var(--ss-ease-out), border-color var(--ss-dur-base), box-shadow var(--ss-dur-base);
  pointer-events: none;
}
.ss-website-header.is-scrolled .ss-website-header__bar::before { background: rgba(255, 255, 255, 0.84); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--ss-elev-2); }
.ss-website-header.is-tone-dark { color: var(--ss-text-inverse-1); }
.ss-website-header.is-tone-dark .ss-website-header__bar::before { background: rgba(10, 18, 44, 0.42); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--ss-elev-dark-1); }
.ss-website-header.is-tone-dark.is-scrolled .ss-website-header__bar::before { background: rgba(6, 12, 32, 0.72); }
.ss-website-header.is-menu-open .ss-website-header__bar::before { background: rgba(255, 255, 255, 0.96); border-color: var(--ss-line); }
.ss-website-header.is-menu-open { color: var(--ss-text-1); }
@media (max-width: 639px) { .ss-website-header__bar { padding-inline: 14px 6px; height: calc(var(--ss-header-h) - 20px); } .ss-website-header.is-scrolled .ss-website-header__bar { height: calc(var(--ss-header-h) - 24px); } }

.ss-website-logo { display: inline-flex; align-items: center; flex: none; padding-block: 6px; }
.ss-website-logo__img { width: auto; height: 46px; }
.ss-website-header__logo .ss-website-logo__img { height: 42px; }
.ss-website-logo__img--dark { display: none; }
.ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-logo__img--light,
.ss-website-footer .ss-website-logo__img--light { display: none; }
.ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-logo__img--dark,
.ss-website-footer .ss-website-logo__img--dark { display: block; }

.ss-website-nav { display: none; }
@media (min-width: 1024px) { .ss-website-nav { display: block; margin-inline-start: var(--ss-space-3); } }
.ss-website-nav__list { position: relative; display: flex; align-items: center; gap: 2px; }
/* Sliding highlight: follows hover/focus/open item (positioned by navigation.js). */
.ss-website-nav__indicator {
  position: absolute; top: 50%; left: 0; z-index: -1;
  height: 42px; width: 0;
  border-radius: var(--ss-radius-control);
  background: rgba(127, 135, 150, 0.14);
  opacity: 0;
  transform: translate(var(--ss-x, 0), -50%);
  transition: transform var(--ss-dur-slow) var(--ss-ease-out), width var(--ss-dur-slow) var(--ss-ease-out), opacity var(--ss-dur-base);
  pointer-events: none;
}
.ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-nav__indicator { background: rgba(255, 255, 255, 0.12); }
.ss-website-nav__indicator.is-visible { opacity: 1; }
.ss-website-nav__trigger,
.ss-website-nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--ss-radius-control);
  font-size: var(--ss-size-control); font-weight: 600;
  opacity: 0.86;
  transition: opacity var(--ss-dur-fast), background-color var(--ss-dur-fast);
}
.ss-website-nav__trigger:hover, .ss-website-nav__link:hover,
.ss-website-nav__trigger[aria-expanded="true"], .ss-website-nav__link[aria-current] { opacity: 1; }
html:not(.ss-website-js) .ss-website-nav__trigger:hover, html:not(.ss-website-js) .ss-website-nav__link:hover { background: rgba(127, 135, 150, 0.12); }
.ss-website-nav__link[aria-current]::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ss-color-blue-bright); }
.ss-website-nav__link { position: relative; }
.ss-website-nav__chevron { width: 16px; height: 16px; transition: transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-nav__trigger[aria-expanded="true"] .ss-website-nav__chevron { transform: rotate(180deg); }

.ss-website-header__actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.ss-website-header__utilities { display: flex; align-items: center; gap: 2px; }
/* No utility box: language toggle, then circular icon buttons (sound, log in), then the CTA. */
.ss-website-header__utilities { gap: 6px; }
.ss-website-header__round { width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 50%; background: rgba(127, 135, 150, 0.08); box-shadow: inset 0 0 0 1px rgba(127, 135, 150, 0.16); transition: background-color var(--ss-dur-fast), box-shadow var(--ss-dur-fast); }
.ss-website-header__round:hover, .ss-website-header__round[aria-expanded="true"] { background: rgba(127, 135, 150, 0.16); }
.ss-website-header__round .ss-website-icon { width: 19px; height: 19px; }
.ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-header__bar .ss-website-header__round { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #FFFFFF; }

/* Log in: circular button; hover (fine pointers), click or keyboard opens the two product logins. */
.ss-website-header__login { position: relative; display: none; }
.ss-website-popover--login { position: absolute; top: calc(100% + 12px); inset-inline-end: 0; z-index: var(--ss-z-menu); width: 290px; padding: 8px; border-radius: 18px; background: linear-gradient(180deg, #FFFFFF, #FAFBFC); color: var(--ss-text-1); border: 1px solid rgba(11, 13, 18, 0.07); box-shadow: 0 1px 2px rgba(2, 4, 15, 0.05), 0 24px 60px rgba(2, 4, 15, 0.16); }
.ss-website-popover--login::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.ss-website-popover--login .ss-website-menu-item { align-items: center; }
.ss-website-popover--login .ss-website-menu-item__arrow { margin-top: 0; }
.ss-website-mobile-nav__logins { display: grid; gap: 8px; }
.ss-website-header__actions [data-ss-header-cta] { display: none; }
@media (min-width: 640px) { .ss-website-header__actions [data-ss-header-cta] { display: inline-flex; } }
@media (min-width: 1024px) {
  .ss-website-header__login { display: block; }
  .ss-website-header__menu { display: none; }
}
.ss-website-header__sound { position: relative; }
.ss-website-audio-icon--on { display: none; }
.ss-website-html.is-sound-on .ss-website-audio-icon--on { display: block; }
.ss-website-html.is-sound-on .ss-website-audio-icon--off { display: none; }

/* Language switch */
/* Language toggle: compact EN | AR segmented control (a selector, so pill geometry). */
.ss-website-lang-form { display: contents; }
.ss-website-langtoggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--ss-radius-pill); background: rgba(127, 135, 150, 0.12); box-shadow: inset 0 0 0 1px rgba(127, 135, 150, 0.16); }
.ss-website-langtoggle__opt { display: inline-grid; place-items: center; min-width: 38px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--ss-radius-pill); background: transparent; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--ss-text-2); cursor: pointer; transition: background-color var(--ss-dur-fast), color var(--ss-dur-fast); }
.ss-website-langtoggle a.ss-website-langtoggle__opt:hover, .ss-website-langtoggle button.ss-website-langtoggle__opt:hover { color: var(--ss-text-1); background: rgba(127, 135, 150, 0.14); }
.ss-website-langtoggle__opt.is-active { color: var(--ss-color-white); background: #0B0D12; cursor: default; }
.ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-header__bar .ss-website-langtoggle { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-header__bar .ss-website-langtoggle__opt { color: var(--ss-text-inverse-2); }
.ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-header__bar .ss-website-langtoggle__opt.is-active { color: #0B0D12; background: #F4F5F7; }
.ss-website-langtoggle--header { display: none; }
@media (min-width: 900px) { .ss-website-langtoggle--header { display: inline-flex; } }
@media (pointer: coarse) { .ss-website-langtoggle__opt { min-width: 48px; height: 40px; } }

/* ---------- Mega menus: one shell, one group, one item ---------- */
.ss-website-mega {
  position: absolute; top: calc(100% + 14px); left: 0; right: 0; z-index: var(--ss-z-menu);
  padding: 14px; border-radius: 20px;
  /* Near-solid surface: a nested backdrop blur inside the glass header renders unreliably. */
  background: linear-gradient(180deg, #FFFFFF, #FAFBFC); color: var(--ss-text-1);
  border: 1px solid rgba(11, 13, 18, 0.07);
  box-shadow: 0 1px 2px rgba(2, 4, 15, 0.05), 0 24px 60px rgba(2, 4, 15, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform-origin: top center;
}
.ss-website-mega.is-entering { animation: ss-menu-in var(--ss-dur-base) var(--ss-ease-out); }
@keyframes ss-menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.99); } }
.ss-website-mega__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; }
/* Product and Company: the main group spans three columns and lays its items out in a row. */
.ss-website-mega--product .ss-website-mega__group:first-child { grid-column: span 3; }
.ss-website-mega--product .ss-website-mega__group:first-child .ss-website-mega__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; }
/* Company: four peers (About · Newsroom · Contact · Security & Trust) across the full shell. */
.ss-website-mega--company .ss-website-mega__group:first-child { grid-column: 1 / -1; }
.ss-website-mega--company .ss-website-mega__group:first-child .ss-website-mega__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 8px; }
.ss-website-mega--company .ss-website-mega__group:first-child { padding-top: 4px; }
.ss-website-mega__group { display: grid; align-content: start; gap: 2px; min-width: 0; }
.ss-website-mega__label { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
.ss-website-mega__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-accent); }
.ss-website-mega__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* Menu item (shared by every dropdown and the mobile panel). */
.ss-website-menu-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ss-text-1); transition: background-color var(--ss-dur-fast); }
.ss-website-menu-item__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--ss-text-2); background: rgba(127, 135, 150, 0.1); box-shadow: inset 0 0 0 1px rgba(127, 135, 150, 0.14); transition: color var(--ss-dur-fast), background-color var(--ss-dur-fast); }
.ss-website-menu-item__icon .ss-website-icon { width: 17px; height: 17px; }
.ss-website-menu-item__text { display: grid; gap: 2px; flex: 1; min-width: 0; padding-top: 1px; }
.ss-website-menu-item__title { font-size: var(--ss-size-control); font-weight: 600; line-height: 1.3; }
.ss-website-menu-item__desc { font-size: var(--ss-size-micro); line-height: 1.45; color: var(--ss-text-3); }
.ss-website-menu-item__arrow { flex: none; width: 15px; height: 15px; margin-top: 9px; color: var(--ss-text-3); opacity: 0; transform: translateX(-4px); transition: opacity var(--ss-dur-fast), transform var(--ss-dur-base) var(--ss-ease-out); }
[dir="rtl"] .ss-website-menu-item__arrow { transform: translateX(4px) scaleX(-1); }
.ss-website-menu-item:hover, .ss-website-menu-item:focus-visible { background: rgba(127, 135, 150, 0.1); }
.ss-website-menu-item:hover .ss-website-menu-item__icon { color: var(--ss-text-1); background: var(--ss-color-white); }
.ss-website-menu-item:hover .ss-website-menu-item__arrow, .ss-website-menu-item:focus-visible .ss-website-menu-item__arrow { opacity: 1; transform: none; }
[dir="rtl"] .ss-website-menu-item:hover .ss-website-menu-item__arrow { transform: scaleX(-1); }
.ss-website-menu-item[aria-current="page"] { background: rgba(127, 135, 150, 0.1); }
.ss-website-menu-item[aria-current="page"] .ss-website-menu-item__title::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 8px; vertical-align: middle; border-radius: 50%; background: var(--ss-accent, #0071CE); }
/* Product cues: Lite light, Pro dark. */
.ss-website-menu-item--lite .ss-website-menu-item__icon { color: #0B0D12; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(11, 13, 18, 0.12); }
.ss-website-menu-item--pro .ss-website-menu-item__icon, .ss-website-menu-item--pro:hover .ss-website-menu-item__icon { color: #FFFFFF; background: #0B0D12; box-shadow: none; }

/* ---------- Popover (sound) ---------- */
.ss-website-popover {
  position: absolute;
  top: calc(100% + 22px);
  inset-inline-end: -8px;
  z-index: var(--ss-z-menu);
  width: min(340px, calc(100vw - 24px));
  padding: 18px;
  border-radius: var(--ss-radius-card);
  background: var(--ss-color-white);
  color: var(--ss-text-1);
  border: 1px solid var(--ss-line);
  box-shadow: 0 24px 60px rgba(2, 4, 15, 0.18);
  transform-origin: top right;
}
[dir="rtl"] .ss-website-popover { transform-origin: top left; }
.ss-website-popover.is-entering { animation: ss-pop-in var(--ss-dur-base) var(--ss-ease-out); }
@keyframes ss-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
.ss-website-popover__title { font-weight: 700; margin-bottom: 8px; }

.ss-website-audio { display: grid; gap: 4px; }
.ss-website-audio__row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding-block: 12px; border-top: 1px solid var(--ss-line); }
.ss-website-audio__name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--ss-size-control); }
.ss-website-audio__name .ss-website-icon { width: 18px; height: 18px; color: var(--ss-color-blue); }
.ss-website-audio__note { font-size: var(--ss-size-micro); color: var(--ss-text-3); line-height: 1.45; margin-top: 2px; }
.ss-website-audio__volume { grid-column: 1 / -1; display: block; }
.ss-website-audio__volume input { width: 100%; accent-color: var(--ss-color-blue); height: 28px; }
.ss-website-audio__row:not(.is-on) .ss-website-audio__volume { opacity: 0.45; }

.ss-website-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--ss-size-micro); font-weight: 600; color: var(--ss-text-2); }
.ss-website-switch__track { position: relative; width: 40px; height: 24px; border-radius: var(--ss-radius-md); background: var(--ss-color-mist); box-shadow: inset 0 0 0 1px var(--ss-line-strong); transition: background-color var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-switch__thumb { position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ss-color-white); box-shadow: 0 1px 3px rgba(2, 4, 15, 0.25); transition: transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-switch[aria-checked="true"] .ss-website-switch__track { background: var(--ss-color-blue); box-shadow: none; }
.ss-website-switch[aria-checked="true"] .ss-website-switch__thumb { transform: translateX(16px); }
[dir="rtl"] .ss-website-switch[aria-checked="true"] .ss-website-switch__thumb { transform: translateX(-16px); }
.ss-website-switch__state { min-width: 2.5em; }

/* ---------- Mobile navigation (sheet) ---------- */
.ss-website-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--ss-z-mobile-nav);
  display: flex;
  flex-direction: column;
  background: var(--ss-color-white);
  color: var(--ss-text-1);
  overscroll-behavior: contain;
}
.ss-website-mobile-nav.is-entering { animation: ss-sheet-in var(--ss-dur-slow) var(--ss-ease-out); }
.ss-website-mobile-nav.is-leaving { animation: ss-sheet-in var(--ss-dur-base) var(--ss-ease-in) reverse forwards; }
@keyframes ss-sheet-in { from { opacity: 0; transform: translateX(24px); } }
[dir="rtl"] .ss-website-mobile-nav.is-entering,
[dir="rtl"] .ss-website-mobile-nav.is-leaving { animation-name: ss-sheet-in-rtl; }
@keyframes ss-sheet-in-rtl { from { opacity: 0; transform: translateX(-24px); } }
.ss-website-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; height: var(--ss-header-h); padding-inline: var(--ss-gutter); border-bottom: 1px solid var(--ss-line); flex: none; }
.ss-website-mobile-nav__logo .ss-website-logo__img--dark { display: none; }
.ss-website-mobile-nav__body { flex: 1; overflow-y: auto; padding: 8px var(--ss-gutter) 24px; -webkit-overflow-scrolling: touch; }
.ss-website-mobile-nav__group { border-bottom: 1px solid var(--ss-line); }
.ss-website-mobile-nav__summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px;
  font-size: 1.1875rem; font-weight: 600;
  list-style: none; cursor: pointer;
}
.ss-website-mobile-nav__summary::-webkit-details-marker { display: none; }
.ss-website-mobile-nav__summary--link { border-bottom: 1px solid var(--ss-line); }
.ss-website-mobile-nav__chevron { width: 20px; height: 20px; color: var(--ss-text-3); transition: transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-mobile-nav__group[open] .ss-website-mobile-nav__chevron { transform: rotate(180deg); }
.ss-website-mobile-nav__panel { display: grid; gap: 2px; padding-bottom: 16px; }
.ss-website-mobile-nav__utilities { display: grid; gap: 4px; margin-top: 16px; }
.ss-website-mobile-nav__lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; border-bottom: 1px solid var(--ss-line); font-size: var(--ss-size-body); font-weight: 600; }
.ss-website-mobile-nav__panel .ss-website-mega__group { padding-block: 4px; }
.ss-website-mobile-nav__panel .ss-website-menu-item { align-items: center; min-height: 52px; }
.ss-website-mobile-nav__panel .ss-website-menu-item__arrow { display: none; }
.ss-website-mobile-nav__group--sound .ss-website-mobile-nav__summary { font-size: var(--ss-size-body); }
.ss-website-mobile-nav__foot { display: grid; gap: 10px; padding: 16px var(--ss-gutter) max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ss-line); background: var(--ss-color-white); flex: none; }
.ss-website-mobile-nav__foot .ss-website-button { width: 100%; }
.ss-website-html.is-nav-locked { overflow: hidden; }

/* ---------- Header refinement (2026-10-12): lighter glass, compact on scroll, calmer links,
   section context. Information architecture unchanged. ---------- */
.ss-website-header__bar { transition: height var(--ss-dur-slow) var(--ss-ease-out); }
.ss-website-header__bar::before {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(2, 4, 15, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(2, 4, 15, 0.04), 0 10px 30px rgba(2, 4, 15, 0.06);
  -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
}
.ss-website-header.is-scrolled .ss-website-header__bar { height: calc(var(--ss-header-h) - 20px); }
.ss-website-header.is-scrolled .ss-website-header__bar::before { background: rgba(255, 255, 255, 0.86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(2, 4, 15, 0.05), 0 14px 36px rgba(2, 4, 15, 0.09); }
.ss-website-header__logo .ss-website-logo__img { transition: height var(--ss-dur-slow) var(--ss-ease-out); }
.ss-website-header.is-scrolled .ss-website-header__logo .ss-website-logo__img { height: 40px; }
.ss-website-nav__trigger, .ss-website-nav__link { opacity: 1; color: var(--ss-text-2); letter-spacing: -0.005em; transition: color var(--ss-dur-fast), background-color var(--ss-dur-fast); }
.ss-website-header.is-tone-dark:not(.is-menu-open) :is(.ss-website-nav__trigger, .ss-website-nav__link) { color: var(--ss-text-inverse-2); }
.ss-website-nav__trigger:hover, .ss-website-nav__link:hover, .ss-website-nav__trigger[aria-expanded="true"], .ss-website-nav__link[aria-current] { color: var(--ss-text-1); }
.ss-website-header.is-tone-dark:not(.is-menu-open) :is(.ss-website-nav__trigger:hover, .ss-website-nav__link:hover, .ss-website-nav__trigger[aria-expanded="true"], .ss-website-nav__link[aria-current]) { color: var(--ss-color-white); }
/* Section context: a small marker under the section the page belongs to; on capability pages it
   takes the page's area colour. */
.ss-website-nav__trigger { position: relative; }
.ss-website-nav__trigger::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -6px; border-radius: 50%; background: var(--ss-nav-context, var(--ss-color-blue-bright)); opacity: 0; transform: scale(0.4); transition: opacity var(--ss-dur-base), transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-body:has(.ss-website-capability-page) [data-ss-menu-trigger="capabilities"]::after,
.ss-website-body:has(.ss-website-tier-hero, .ss-website-product-hero) [data-ss-menu-trigger="product"]::after,
.ss-website-body:has(.ss-website-about-hero, .ss-website-contact, .ss-website-demo) [data-ss-menu-trigger="company"]::after { opacity: 1; transform: none; }
.ss-website-body:has(.ss-website-capability-page[data-ss-clic="construction"]) { --ss-nav-context: var(--ss-clic-construction); }
.ss-website-body:has(.ss-website-capability-page[data-ss-clic="labour"]) { --ss-nav-context: var(--ss-clic-labour); }
.ss-website-body:has(.ss-website-capability-page[data-ss-clic="inventory"]) { --ss-nav-context: var(--ss-clic-inventory); }
.ss-website-body:has(.ss-website-capability-page[data-ss-clic="cost"]) { --ss-nav-context: var(--ss-clic-cost); }
/* Current page inside the mega menus (aria-current set by navigation.js). */
@media (prefers-reduced-motion: reduce) { .ss-website-header__bar, .ss-website-header__logo .ss-website-logo__img { transition: none; } }

/* Header CTA: neutral — off-black on light, off-white where the bar sits over a dark surface. */
.ss-website-header .ss-website-button--primary[data-ss-header-cta], .ss-website-mobile-nav .ss-website-button--primary[data-ss-header-cta] { --ss-btn-bg: #0B0D12; --ss-btn-fg: #FFFFFF; box-shadow: none; }
.ss-website-header .ss-website-button--primary[data-ss-header-cta]:hover { --ss-btn-bg: #2A2E36; }
.ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-header__bar .ss-website-button--primary[data-ss-header-cta] { --ss-btn-bg: #F4F5F7; --ss-btn-fg: #0B0D12; }
.ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-header__bar .ss-website-button--primary[data-ss-header-cta]:hover { --ss-btn-bg: #FFFFFF; }
/* With a dropdown open the bar is already near-opaque; its backdrop blur is switched off so the
   menu (a descendant) is never composited beneath page content. */
.ss-website-header.is-menu-open .ss-website-header__bar::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.98); }

/* ---------- Quick-access dock ----------
   Closed: a 56px glass disc with the SkyStruct mark (a utility, not a chat bubble). Open: the
   panel materialises from the control (scale + blur from the bottom-inline-end corner) and the
   mark turns into a close glyph. Phones: the panel is a bottom sheet above a light scrim.
   Kept clear of browser chrome with safe-area insets; hidden while the mobile menu is open. */
.ss-website-dock { --ss-dock-gap: max(20px, env(safe-area-inset-bottom)); position: fixed; z-index: calc(var(--ss-z-header) + 5); inset-inline-end: max(20px, env(safe-area-inset-right)); bottom: var(--ss-dock-gap); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
[dir="rtl"] .ss-website-dock { inset-inline-end: max(20px, env(safe-area-inset-left)); }
.ss-website-dock > * { pointer-events: auto; }
.is-nav-locked .ss-website-dock { visibility: hidden; }
.ss-website-dock__toggle {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 247, 251, 0.74));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(11, 13, 18, 0.08), 0 14px 32px rgba(2, 4, 15, 0.18), 0 2px 6px rgba(2, 4, 15, 0.08);
  transition: transform 220ms var(--ss-ease-out), box-shadow 220ms var(--ss-ease-out), background-color 220ms;
}
.ss-website-dock__toggle:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(11, 13, 18, 0.1), 0 18px 38px rgba(2, 4, 15, 0.22), 0 2px 6px rgba(2, 4, 15, 0.08); }
.ss-website-dock__toggle:active { transform: scale(0.96); }
.ss-website-dock__toggle:focus-visible { outline: 2px solid #0071CE; outline-offset: 3px; }
.ss-website-dock__mark, .ss-website-dock__close { grid-area: 1 / 1; transition: opacity 200ms var(--ss-ease-out), transform 260ms var(--ss-ease-out); }
.ss-website-dock__mark { width: 22px; height: 22px; color: #0B0D12; }
.ss-website-dock.is-on-dark .ss-website-dock__mark { color: #FFFFFF; }
.ss-website-dock__close { width: 22px; height: 22px; color: #0B0D12; opacity: 0; transform: rotate(-45deg) scale(0.7); }
.ss-website-dock.is-open .ss-website-dock__mark { opacity: 0; transform: rotate(45deg) scale(0.7); }
.ss-website-dock.is-open .ss-website-dock__close { opacity: 1; transform: none; }
/* Dark surfaces underneath (header tone logic marks them): the disc deepens to stay a calm object. */
.ss-website-dock.is-on-dark .ss-website-dock__toggle { background: linear-gradient(180deg, rgba(30, 34, 44, 0.78), rgba(11, 13, 18, 0.72)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.14), 0 14px 32px rgba(0, 0, 0, 0.4); }
.ss-website-dock.is-on-dark .ss-website-dock__close { color: #FFFFFF; }

.ss-website-dock__panel {
  width: 300px; padding: 14px; border-radius: 22px; transform-origin: 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 249, 251, 0.95));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(11, 13, 18, 0.08), 0 30px 70px rgba(2, 4, 15, 0.24), 0 6px 16px rgba(2, 4, 15, 0.08);
  opacity: 0; transform: translateY(10px) scale(0.92); filter: blur(6px);
  transition: opacity 220ms var(--ss-ease-out), transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.05), filter 260ms var(--ss-ease-out);
}
[dir="rtl"] .ss-website-dock__panel { transform-origin: 0 100%; }
.ss-website-dock.is-open .ss-website-dock__panel { opacity: 1; transform: none; filter: none; }
.ss-website-dock__title { padding: 4px 8px 10px; font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
[lang="ar"] .ss-website-dock__title { letter-spacing: 0; text-transform: none; font-size: var(--ss-size-small); }
.ss-website-dock__list { display: grid; gap: 2px; }
.ss-website-dock__link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px 6px 6px; border-radius: 12px; font-size: var(--ss-size-small); font-weight: 600; color: #0B0D12; text-decoration: none; transition: background-color 160ms var(--ss-ease-out); }
[dir="rtl"] .ss-website-dock__link { padding: 6px 6px 6px 10px; }
.ss-website-dock__link:hover, .ss-website-dock__link:focus-visible { background: rgba(11, 13, 18, 0.05); }
.ss-website-dock__link:focus-visible { outline: 2px solid #0071CE; outline-offset: -2px; }
.ss-website-dock__label { flex: 1; min-width: 0; }
.ss-website-dock__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--ss-dock-ink); background: var(--ss-dock-tint); }
.ss-website-dock__icon .ss-website-icon { width: 18px; height: 18px; }
.ss-website-dock__arrow { width: 16px; height: 16px; color: var(--ss-text-3); opacity: 0; transform: translateX(-4px); transition: opacity 160ms, transform 200ms var(--ss-ease-out); }
[dir="rtl"] .ss-website-dock__arrow { transform: scaleX(-1) translateX(-4px); }
.ss-website-dock__link:hover .ss-website-dock__arrow, .ss-website-dock__link:focus-visible .ss-website-dock__arrow { opacity: 1; transform: none; }
[dir="rtl"] .ss-website-dock__link:hover .ss-website-dock__arrow, [dir="rtl"] .ss-website-dock__link:focus-visible .ss-website-dock__arrow { transform: scaleX(-1); }
.ss-website-dock__link--platform { --ss-dock-ink: #0071CE; --ss-dock-tint: #E6F1FB; }
.ss-website-dock__link--violet { --ss-dock-ink: var(--ss-home-violet-ink); --ss-dock-tint: var(--ss-home-violet-tint); }
.ss-website-dock__link--green { --ss-dock-ink: var(--ss-home-green-ink); --ss-dock-tint: var(--ss-home-green-tint); }
.ss-website-dock__link--coral { --ss-dock-ink: var(--ss-home-coral-ink); --ss-dock-tint: var(--ss-home-coral-tint); }
/* Lite / Pro keep their product identities: Lite light (white tile, signature blue), Pro dark. */
.ss-website-dock__link--lite .ss-website-dock__icon { color: #0071CE; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 113, 206, 0.28); }
.ss-website-dock__link--pro .ss-website-dock__icon { color: #FFFFFF; background: linear-gradient(160deg, #1B2333, #02040F); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ss-website-dock__cta { --ss-btn-bg: #0B0D12; --ss-btn-fg: #FFFFFF; width: 100%; justify-content: center; margin-top: 10px; }
.ss-website-dock__cta:hover { --ss-btn-bg: #2A2E36; }
.ss-website-dock__scrim { position: fixed; inset: 0; z-index: -1; background: rgba(2, 4, 15, 0.32); opacity: 0; visibility: hidden; transition: opacity 220ms var(--ss-ease-out), visibility 0s 220ms; pointer-events: none; }
@media (max-width: 639px) {
  .ss-website-dock { --ss-dock-gap: max(16px, calc(env(safe-area-inset-bottom) + 8px)); inset-inline-end: 16px; }
  .ss-website-dock__toggle { width: 52px; height: 52px; }
  .ss-website-dock__panel { position: fixed; inset-inline: 12px; bottom: calc(var(--ss-dock-gap) + 64px); width: auto; transform-origin: 50% 100%; transform: translateY(24px); filter: none; }
  .ss-website-dock.is-open .ss-website-dock__scrim { opacity: 1; visibility: visible; transition: opacity 220ms var(--ss-ease-out); pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-website-dock__panel { transform: none; filter: none; }
  .ss-website-dock__mark, .ss-website-dock__close { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .ss-website-dock__toggle, .ss-website-dock__panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: #FFFFFF; }
}
@media print { .ss-website-dock { display: none; } }
/* Never over a form while the visitor is typing; leave the footer's last row clear on phones. */
html:has(:is(input, textarea, select):focus) .ss-website-dock:not(.is-open) { opacity: 0; pointer-events: none; transition: opacity 160ms; }
@media (max-width: 639px) { .ss-website-footer__bottom { padding-bottom: 76px; } }

/* Menu icon colour follows meaning (expressive palette): platform blue, pricing green, compare
   sun, company sun / people coral / security green; capabilities take their C.L.I.C. pillar colour.
   Lite and Pro keep the primary product identities (Lite light, Pro dark). */
.ss-website-menu-item--blue { --ss-mi-ink: #0071CE; --ss-mi-tint: #E6F1FB; }
.ss-website-menu-item--green { --ss-mi-ink: var(--ss-home-green-ink); --ss-mi-tint: var(--ss-home-green-tint); }
.ss-website-menu-item--sun { --ss-mi-ink: var(--ss-home-sun-ink); --ss-mi-tint: var(--ss-home-sun-tint); }
.ss-website-menu-item--coral { --ss-mi-ink: var(--ss-home-coral-ink); --ss-mi-tint: var(--ss-home-coral-tint); }
.ss-website-menu-item--violet { --ss-mi-ink: var(--ss-home-violet-ink); --ss-mi-tint: var(--ss-home-violet-tint); }
.ss-website-mega__group[data-ss-clic="construction"] { --ss-mi-ink: var(--ss-home-coral-ink); --ss-mi-tint: var(--ss-home-coral-tint); --ss-mi-dot: var(--ss-home-coral); }
.ss-website-mega__group[data-ss-clic="labour"] { --ss-mi-ink: var(--ss-home-violet-ink); --ss-mi-tint: var(--ss-home-violet-tint); --ss-mi-dot: var(--ss-home-violet); }
.ss-website-mega__group[data-ss-clic="inventory"] { --ss-mi-ink: var(--ss-home-green-ink); --ss-mi-tint: var(--ss-home-green-tint); --ss-mi-dot: var(--ss-home-green); }
.ss-website-mega__group[data-ss-clic="cost"] { --ss-mi-ink: var(--ss-home-magenta-ink); --ss-mi-tint: var(--ss-home-magenta-tint); --ss-mi-dot: var(--ss-home-magenta); }
.ss-website-mega__group[data-ss-clic] .ss-website-mega__dot { background: var(--ss-mi-dot); }
:is(.ss-website-mega__group[data-ss-clic], .ss-website-menu-item--blue, .ss-website-menu-item--green, .ss-website-menu-item--sun, .ss-website-menu-item--coral, .ss-website-menu-item--violet) .ss-website-menu-item__icon,
:is(.ss-website-mega__group[data-ss-clic], .ss-website-menu-item--blue, .ss-website-menu-item--green, .ss-website-menu-item--sun, .ss-website-menu-item--coral, .ss-website-menu-item--violet) .ss-website-menu-item:hover .ss-website-menu-item__icon,
:is(.ss-website-menu-item--blue, .ss-website-menu-item--green, .ss-website-menu-item--sun, .ss-website-menu-item--coral, .ss-website-menu-item--violet):hover .ss-website-menu-item__icon { color: var(--ss-mi-ink); background: var(--ss-mi-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-mi-ink) 16%, transparent); }
.ss-website-menu-item--lite .ss-website-menu-item__icon, .ss-website-menu-item--lite:hover .ss-website-menu-item__icon { color: #0071CE; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 113, 206, 0.3), 0 1px 2px rgba(0, 31, 84, 0.08); }
.ss-website-menu-item--pro .ss-website-menu-item__icon, .ss-website-menu-item--pro:hover .ss-website-menu-item__icon { color: #FFFFFF; background: linear-gradient(160deg, #1B2333, #02040F); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ss-website-dock { transition: transform 280ms var(--ss-ease-out), opacity 220ms var(--ss-ease-out); }
.ss-website-dock.is-aside { transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; }
.ss-website-dock.is-aside > * { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ss-website-dock { transition: opacity 120ms; } .ss-website-dock.is-aside { transform: none; } }

.ss-website-footer__credit-link { display: inline-flex; align-items: center; border-radius: 4px; }
.ss-website-footer__credit-link:focus-visible { outline: 2px solid #4DA3EE; outline-offset: 3px; }

/* ==== ss-website-closing.css ==== */
/* Closing chapter: one shared pre-footer conversion moment flowing into the footer.
   The pre-footer's top edge is a wide recessed notch (mask); its background resolves into the
   footer's night tone, so the two read as a single final surface with no seam. */

/* ---------- Pre-footer ---------- */
.ss-website-prefooter {
  --ss-notch-w: min(1180px, 94vw);
  --ss-notch-d: calc(var(--ss-notch-w) * 0.068);
  position: relative; z-index: 1; isolation: isolate;
  text-align: center;
}
/* The section itself is transparent; its night surface (with the notch mask) is an inner layer,
   so the edge line and the upward glow can sit on the notch without being clipped. */
.ss-website-main .ss-website-section.ss-website-prefooter { background: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.ss-website-prefooter__bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background-color: var(--ss-color-night); background-image: var(--ss-grain); background-size: 180px;
  /* Notch: centre tile (S-curves into a wide flat recess) + shoulders + body. 1px overlaps hide seams. */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0C140 0 190 80 320 80H680C810 80 860 0 1000 0V80H0Z'/%3E%3C/svg%3E") 50% 0 / var(--ss-notch-w) calc(var(--ss-notch-d) + 1px) no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(50% - var(--ss-notch-w) / 2 + 1px) calc(var(--ss-notch-d) + 1px) no-repeat,
    linear-gradient(#000 0 0) 100% 0 / calc(50% - var(--ss-notch-w) / 2 + 1px) calc(var(--ss-notch-d) + 1px) no-repeat,
    linear-gradient(#000 0 0) 0 var(--ss-notch-d) / 100% 100% no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0C140 0 190 80 320 80H680C810 80 860 0 1000 0V80H0Z'/%3E%3C/svg%3E") 50% 0 / var(--ss-notch-w) calc(var(--ss-notch-d) + 1px) no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(50% - var(--ss-notch-w) / 2 + 1px) calc(var(--ss-notch-d) + 1px) no-repeat,
    linear-gradient(#000 0 0) 100% 0 / calc(50% - var(--ss-notch-w) / 2 + 1px) calc(var(--ss-notch-d) + 1px) no-repeat,
    linear-gradient(#000 0 0) 0 var(--ss-notch-d) / 100% 100% no-repeat;
}
/* Edge: a faint slate line following the notch profile. */
.ss-website-prefooter__edge { position: absolute; inset: 0 0 auto; z-index: 0; display: flex; justify-content: center; overflow: hidden; height: calc(var(--ss-notch-d) + 2px); pointer-events: none; }
.ss-website-prefooter__edge i { flex: 1; height: 1px; background: var(--ss-prefooter-edge); }
.ss-website-prefooter__edge svg { flex: none; width: var(--ss-notch-w); max-width: none; height: calc(var(--ss-notch-d) + 1px); overflow: visible; }
.ss-website-prefooter__edge path { fill: none; stroke: var(--ss-prefooter-edge); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ss-website-prefooter { --ss-prefooter-edge: rgba(148, 163, 184, 0.55); }
/* Glow: a little SkyStruct-blue light rising from the recess into the page above. */
.ss-website-prefooter__glow { position: absolute; left: 50%; top: 0; z-index: -2; width: min(1000px, 90vw); height: 220px; translate: -50% -52%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 113, 206, 0.16), rgba(77, 163, 238, 0.06) 60%, transparent); pointer-events: none; }
/* The notch replaces the automatic cloud horizon; the shoulders overlap the previous section's padding. */
.ss-website-main .ss-website-section.ss-website-prefooter {
  margin-top: calc(var(--ss-notch-d) * -1);
  padding-top: calc(var(--ss-notch-d) + clamp(64px, 3rem + 4vw, 128px));
  padding-bottom: clamp(72px, 4rem + 3vw, 120px);
}
.ss-website-main .ss-website-section.ss-website-prefooter::before { content: none; }

.ss-website-prefooter__media { position: absolute; inset: 0; overflow: hidden; }
.ss-website-prefooter__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1800ms var(--ss-ease-in-out), transform 9000ms linear;
}
.ss-website-prefooter__slide.is-active { opacity: 0.62; transform: scale(1); }
.ss-website-prefooter.is-static .ss-website-prefooter__slide { transition: none; transform: none; }
/* Scrim: navy veil for legibility, a lighter window behind the composer, solid night at the
   bottom where the footer begins. */
.ss-website-prefooter__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(0, 31, 84, 0.25), rgba(2, 4, 15, 0.55) 70%),
    linear-gradient(180deg, rgba(0, 31, 84, 0.72) 0%, rgba(0, 31, 84, 0.5) 38%, rgba(2, 4, 15, 0.86) 72%, var(--ss-color-night) 90%);
}
/* Same grain as the footer, over the scrim, so the hand-off into the footer has no visible edge. */
.ss-website-prefooter__scrim::after { content: ""; position: absolute; inset: 0; background: var(--ss-grain); background-size: 180px; }
.ss-website-prefooter__inner { display: grid; justify-items: center; }
.ss-website-prefooter__title { max-width: 15ch; color: var(--ss-color-white); text-wrap: balance; }

/* Composer: an AI-style prompt field with its send action inside. */
.ss-website-composer {
  display: flex; align-items: flex-end; gap: 12px;
  width: min(100%, 720px); margin-top: clamp(28px, 1.25rem + 1.5vw, 44px);
  padding: 10px 10px 10px 22px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: start;
  transition: border-color var(--ss-dur-base) var(--ss-ease-out), box-shadow var(--ss-dur-base) var(--ss-ease-out), background-color var(--ss-dur-base);
}
[dir="rtl"] .ss-website-composer { padding: 10px 22px 10px 10px; }
.ss-website-composer:hover { border-color: rgba(255, 255, 255, 0.26); }
.ss-website-composer:focus-within { border-color: rgba(77, 163, 238, 0.75); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 4px rgba(77, 163, 238, 0.22), 0 24px 60px rgba(0, 0, 0, 0.35); }
.ss-website-composer__input {
  flex: 1; min-width: 0; min-height: 48px; max-height: 220px; padding: 12px 0;
  border: 0; background: transparent; color: var(--ss-color-white);
  font: inherit; font-size: 1.0625rem; line-height: 1.5;
  resize: none; overflow-y: hidden; outline: none; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.ss-website-composer__input::placeholder { color: rgba(255, 255, 255, 0.74); opacity: 1; }
.ss-website-composer__send {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--ss-color-white); background: var(--ss-color-blue);
  box-shadow: 0 6px 16px rgba(0, 113, 206, 0.45);
  transition: background-color var(--ss-dur-fast), transform var(--ss-dur-press) var(--ss-ease-out), opacity var(--ss-dur-fast);
}
.ss-website-composer:not(.has-text) .ss-website-composer__send { opacity: 0.8; }
.ss-website-composer__send:hover { background: #0063B5; }
.ss-website-composer__send:active { transform: scale(0.94); }
.ss-website-composer__send .ss-website-icon { width: 20px; height: 20px; }
.ss-website-prefooter__actions { justify-content: center; margin-top: var(--ss-space-6); }

.ss-website-prefooter__toggle {
  position: absolute; bottom: clamp(16px, 2vw, 28px); inset-inline-end: clamp(16px, 2vw, 28px);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--ss-text-inverse-2); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  transition: color var(--ss-dur-fast), background-color var(--ss-dur-fast);
}
.ss-website-prefooter__toggle:hover { color: var(--ss-color-white); background: rgba(255, 255, 255, 0.12); }
.ss-website-prefooter__toggle .ss-website-icon { width: 16px; height: 16px; }
.ss-website-prefooter__play, .ss-website-prefooter.is-paused .ss-website-prefooter__pause { display: none; }
.ss-website-prefooter.is-paused .ss-website-prefooter__play { display: block; }

@media (max-width: 639px) {
  .ss-website-prefooter { --ss-notch-w: 112vw; --ss-notch-d: 36px; }
  .ss-website-composer { border-radius: 22px; padding-inline-start: 18px; }
  .ss-website-composer__input { min-height: 72px; font-size: 1rem; }
  .ss-website-prefooter__actions .ss-website-button { width: 100%; }
}
@media (prefers-reduced-transparency: reduce) { .ss-website-composer { -webkit-backdrop-filter: none; backdrop-filter: none; background: #142038; } }

/* ---------- Footer ---------- */
.ss-website-footer {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: clamp(40px, 2rem + 2vw, 72px);
  background-color: var(--ss-color-night);
  color: var(--ss-text-inverse-2);
  font-size: var(--ss-size-small);
}
.ss-website-footer a { transition: color var(--ss-dur-fast), background-color var(--ss-dur-fast), border-color var(--ss-dur-fast); }
.ss-website-footer__inner { display: grid; gap: clamp(36px, 2rem + 1.5vw, 56px); }

/* Head: logo, contact actions, social marks. */
.ss-website-footer__head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 12px; padding-bottom: clamp(28px, 1.5rem + 1vw, 40px); border-bottom: 1px solid var(--ss-line-inverse); }
.ss-website-footer__logo { margin-inline-end: auto; }
.ss-website-footer__logo .ss-website-logo__img { height: 48px; }
.ss-website-footer__contact, .ss-website-footer__social { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-website-footer__action {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 14px 18px;
  border-radius: var(--ss-radius-control); border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05); color: var(--ss-text-inverse-1);
  font-size: var(--ss-size-ui); font-weight: 600;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ss-website-footer__action .ss-website-icon { width: 16px; height: 16px; flex: none; color: var(--ss-color-blue-bright); }
.ss-website-footer__action:hover, .ss-website-footer__social a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); color: var(--ss-color-white); }
.ss-website-footer__social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: var(--ss-text-inverse-1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ss-website-brand-icon { display: block; width: 17px; height: 17px; }
.ss-website-footer__social li:first-child .ss-website-brand-icon { width: 15px; }

/* Link architecture: one column per group (7 on desktop), wrapping to 4 / 3, accordion on phones. */
.ss-website-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
@media (min-width: 900px) { .ss-website-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ss-website-footer__nav { grid-template-columns: 1.05fr 1.15fr 1fr 1fr 1fr 0.9fr 1.15fr; } }
.ss-website-footer__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; font-size: var(--ss-size-eyebrow); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-inverse-1); list-style: none; cursor: default; }
.ss-website-footer__title::-webkit-details-marker { display: none; }
.ss-website-footer__chevron { display: none; width: 16px; height: 16px; transition: transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-footer__group ul { display: grid; gap: 10px; }
.ss-website-footer__group a {
  display: inline-block; line-height: 1.45; color: var(--ss-text-inverse-2);
  /* Hover / focus: the label brightens, steps 2px inward and a hairline draws in beneath it. */
  background: linear-gradient(var(--ss-color-blue-bright), var(--ss-color-blue-bright)) no-repeat 0 100% / 0 1px;
  transition: color 220ms var(--ss-ease-out), background-size 260ms var(--ss-ease-out), translate 220ms var(--ss-ease-out);
}
[dir="rtl"] .ss-website-footer__group a { background-position: 100% 100%; }
.ss-website-footer__group a:hover, .ss-website-footer__group a:focus-visible { color: var(--ss-color-white); background-size: 100% 1px; translate: 2px 0; }
[dir="rtl"] .ss-website-footer__group a:hover, [dir="rtl"] .ss-website-footer__group a:focus-visible { translate: -2px 0; }
@media (prefers-reduced-motion: reduce) { .ss-website-footer__group a:hover, .ss-website-footer__group a:focus-visible { translate: none; } }
@media (max-width: 767px) {
  .ss-website-footer__nav { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ss-website-footer__group { border-bottom: 1px solid var(--ss-line-inverse); }
  .ss-website-footer__title { min-height: 52px; margin: 0; cursor: pointer; }
  .ss-website-footer__chevron { display: block; color: var(--ss-text-inverse-2); }
  .ss-website-footer__group[open] .ss-website-footer__chevron { transform: rotate(180deg); }
  .ss-website-footer__group ul { gap: 0; padding-bottom: 12px; }
  .ss-website-footer__group a { display: flex; align-items: center; min-height: 40px; }
  .ss-website-footer__logo { flex-basis: 100%; }
}

/* Bottom bar: entity · flexible space · design credit. */
.ss-website-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--ss-line-inverse); color: var(--ss-text-inverse-3); font-size: var(--ss-size-micro); }
.ss-website-footer__credit { display: inline-flex; align-items: center; gap: 10px; }
.ss-website-footer__credit img { width: auto; height: 15px; opacity: 0.66; transition: opacity var(--ss-dur-base); }
.ss-website-footer__credit:hover img { opacity: 1; }

/* Live cloud horizon: three translucent layers drifting at different speeds. Static for reduced motion. */
.ss-website-footer__horizon { position: relative; height: clamp(90px, 10vw, 150px); margin-top: var(--ss-space-6); overflow: hidden; pointer-events: none; }
.ss-website-footer__horizon span {
  position: absolute; left: 0; bottom: 0;
  width: calc(100% + clamp(90px, 10vw, 150px) * var(--ss-horizon-ratio));
  height: 100%;
  background: var(--ss-horizon-night) left bottom / auto 100% repeat-x;
  animation: ss-footer-cloud 90s linear infinite;
  will-change: transform;
}
.ss-website-footer__horizon span:nth-child(2) { bottom: -14%; opacity: 0.7; animation-duration: 140s; animation-direction: reverse; background-position: 37% bottom; }
.ss-website-footer__horizon span:nth-child(3) { bottom: -30%; opacity: 0.55; animation-duration: 210s; background-position: 71% bottom; }
@keyframes ss-footer-cloud { to { transform: translateX(calc(clamp(90px, 10vw, 150px) * var(--ss-horizon-ratio) * -1)); } }
@media (prefers-reduced-motion: reduce) { .ss-website-footer__horizon span { animation: none; } }

/* Pages without the pre-footer (Contact, Demo, legal) end light: the footer enters through the light horizon. */
.ss-website-main:has(> .ss-website-section:last-child:not(.ss-website-section--dark, .ss-website-section--navy)) + .ss-website-footer,
.ss-website-main:has(> .shopify-section:last-child > .ss-website-section:last-child:not(.ss-website-section--dark, .ss-website-section--navy)) ~ .shopify-section .ss-website-footer {
  padding-top: calc(clamp(40px, 2rem + 2vw, 72px) + var(--ss-horizon) * 0.7);
  -webkit-mask-image: linear-gradient(transparent, #000 calc(var(--ss-horizon) * 0.32)); mask-image: linear-gradient(transparent, #000 calc(var(--ss-horizon) * 0.32));
}
.ss-website-main:has(> .ss-website-section:last-child:not(.ss-website-section--dark, .ss-website-section--navy)) + .ss-website-footer::before,
.ss-website-main:has(> .shopify-section:last-child > .ss-website-section:last-child:not(.ss-website-section--dark, .ss-website-section--navy)) ~ .shopify-section .ss-website-footer::before {
  content: ""; position: absolute; left: 0; top: -1px; z-index: -1;
  width: calc(100% + var(--ss-horizon) * var(--ss-horizon-ratio)); height: var(--ss-horizon);
  background: var(--ss-horizon-light) left bottom / auto 100% repeat-x;
  transform: scaleY(-1);
  animation: ss-horizon-drift-top 170s linear infinite;
}

@media (max-width: 767px) {
  .ss-website-footer__contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ss-website-footer__contact > * { justify-content: flex-start; }
}

@media (max-width: 1023px) {
  .ss-website-main > .ss-website-section:has(+ .ss-website-prefooter),
  .ss-website-main > .shopify-section:has(+ .shopify-section .ss-website-prefooter) > .ss-website-section:last-child { padding-bottom: calc(var(--ss-section-y) + 48px); }
}

/* ==== ss-website-forms.css ==== */
/* Forms: visible labels, clear focus, accessible errors, mobile-friendly controls. */
.ss-website-form-card {
  position: relative;
  padding: clamp(20px, 1rem + 1.5vw, 36px);
  border-radius: var(--ss-radius-panel);
  background: var(--ss-color-white);
  border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-card);
}
.ss-website-form { display: grid; gap: var(--ss-space-5); }
.ss-website-form__grid { display: grid; gap: 18px 16px; }
@media (min-width: 640px) {
  .ss-website-form__grid { grid-template-columns: 1fr 1fr; }
  .ss-website-form__grid > :not(.ss-website-field--half) { grid-column: 1 / -1; }
}
.ss-website-field { display: grid; gap: 6px; align-content: start; }
.ss-website-field__label { font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-1); }
.ss-website-field__optional { font-weight: 400; color: var(--ss-text-3); }
.ss-website-field__hint { font-size: var(--ss-size-micro); color: var(--ss-text-3); margin-top: -2px; }
.ss-website-field__input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: var(--ss-radius-control);
  border: 1px solid var(--ss-line-strong);
  background: var(--ss-color-white);
  font-size: var(--ss-size-body); /* 16px prevents iOS zoom */
  color: var(--ss-text-1);
  transition: border-color var(--ss-dur-fast) var(--ss-ease-out), box-shadow var(--ss-dur-fast) var(--ss-ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.ss-website-field__input::placeholder { color: var(--ss-text-3); }
.ss-website-field__input:hover { border-color: rgba(2, 4, 15, 0.28); }
.ss-website-field__input:focus-visible,
.ss-website-field__input:focus { outline: none; border-color: var(--ss-color-blue); box-shadow: 0 0 0 4px var(--ss-color-blue-12); }
.ss-website-field__input--area { min-height: 120px; resize: vertical; line-height: 1.5; }
.ss-website-field__select { position: relative; }
.ss-website-field__select select { padding-inline-end: 42px; cursor: pointer; }
.ss-website-field__chevron { position: absolute; inset-inline-end: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; color: var(--ss-text-3); }
.ss-website-field__error { display: flex; align-items: center; gap: 6px; font-size: var(--ss-size-micro); font-weight: 600; color: var(--ss-state-critical); }
/* Lucide "circle-alert" (same family as the sprite), drawn as a mask so it takes the state colour. */
.ss-website-field__error::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat; }
.ss-website-field.is-invalid .ss-website-field__input,
.ss-website-choices.is-invalid .ss-website-choice__box { border-color: var(--ss-state-critical); box-shadow: 0 0 0 1px var(--ss-state-critical); }

.ss-website-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; grid-column: 1 / -1; min-width: 0; }
.ss-website-choices legend { padding: 0; margin-bottom: 8px; }
.ss-website-choices__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-website-choice { position: relative; display: inline-flex; }
.ss-website-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ss-website-choice__box {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--ss-radius-control);
  border: 1px solid var(--ss-line-strong);
  background: var(--ss-color-white);
  font-size: var(--ss-size-control); font-weight: 600; color: var(--ss-text-2);
  transition: all var(--ss-dur-fast) var(--ss-ease-out);
}
.ss-website-choice__box .ss-website-icon { width: 18px; height: 18px; color: var(--ss-text-3); }
.ss-website-choice:hover .ss-website-choice__box { border-color: var(--ss-color-blue-40); color: var(--ss-text-1); }
.ss-website-choice input:checked + .ss-website-choice__box { border-color: var(--ss-color-blue); background: var(--ss-color-blue-08); color: var(--ss-color-navy); box-shadow: inset 0 0 0 1px var(--ss-color-blue); }
.ss-website-choice input:checked + .ss-website-choice__box .ss-website-icon { color: var(--ss-color-blue); }
.ss-website-choice input:focus-visible + .ss-website-choice__box { outline: 2px solid var(--ss-color-blue); outline-offset: 2px; }

.ss-website-form__consent { display: flex; gap: 8px; align-items: flex-start; font-size: var(--ss-size-micro); color: var(--ss-text-3); line-height: 1.5; }
.ss-website-form__consent .ss-website-icon { width: 16px; height: 16px; margin-top: 2px; }
.ss-website-form__consent a { color: var(--ss-color-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ss-website-form__summary { padding: 12px 16px; border-radius: var(--ss-radius-control); background: var(--ss-color-mist); border-inline-start: 3px solid var(--ss-color-ink); font-weight: 600; font-size: var(--ss-size-small); }
.ss-website-form__summary p { display: flex; align-items: center; gap: 8px; }
.ss-website-form__summary .ss-website-icon { width: 18px; height: 18px; }
.ss-website-form__preview-note { font-size: var(--ss-size-caption); color: var(--ss-text-3); text-align: center; }
.ss-website-form__success { display: grid; justify-items: start; gap: var(--ss-space-3); padding: var(--ss-space-5) 0; }
.ss-website-form__success p:not(.ss-website-title) { color: var(--ss-text-2); }

/* ---------- Shopify Forms slot (Shopify theme only) ----------
   The page design owns the container (the same form card); the Shopify Forms inline app block owns
   everything inside it. Only the outer frame is styled here — no selectors into the app's markup. */
.ss-website-form-slot { position: relative; min-height: 420px; }
.ss-website-form-slot > * { max-width: 100%; }
.ss-website-form-slot__hint { margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--ss-line-strong); font-size: var(--ss-size-small); color: var(--ss-text-2); background: var(--ss-color-paper); }
.ss-website-form-slot__fallback { font-size: var(--ss-size-small); color: var(--ss-text-2); }
.ss-website-form-slot__fallback a { font-weight: 600; color: var(--ss-text-1); }

/* ==== ss-website-motion.css ==== */
/* Motion: calm reveals, page transitions and the reduced-motion contract.
   Content is always visible without JS; reveals only apply once JS runs. */
.ss-website-js [data-ss-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--ss-dur-story) var(--ss-ease-out), transform var(--ss-dur-story) var(--ss-ease-out);
  transition-delay: calc(var(--ss-i, 0) * var(--ss-motion-stagger));
}
.ss-website-js [data-ss-reveal].is-revealed { opacity: 1; transform: none; }

/* Smooth scrolling (Lenis) — required base rules. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
[data-lenis-prevent] { overscroll-behavior: contain; }

/* Pointer trail (fine pointers only; canvas created by cursor.js). Never intercepts input. */
.ss-website-trail { position: fixed; inset: 0; z-index: calc(var(--ss-z-transition) - 1); width: 100%; height: 100%; pointer-events: none; }

/* Page transition: a short near-black wipe with a structural blue line. */
.ss-website-transition {
  position: fixed;
  inset: 0;
  z-index: var(--ss-z-transition);
  pointer-events: none;
  background: var(--ss-color-night);
  transform: scaleY(0);
  transform-origin: bottom;
}
.ss-website-transition__line {
  position: absolute; inset-inline: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ss-color-blue) 30%, var(--ss-color-blue-bright) 50%, var(--ss-color-blue) 70%, transparent);
  transform: scaleX(0);
}
.ss-website-transition__mark {
  position: absolute; left: 50%; top: calc(50% - 44px);
  width: 76px; height: 34px;
  transform: translateX(-50%);
  background: url("ss-website-mark-coloured-192.png") center / contain no-repeat;
  opacity: 0;
}
.ss-website-transition.is-covering .ss-website-transition__mark { opacity: 1; transition: opacity var(--ss-dur-base) var(--ss-ease-out) var(--ss-dur-fast); }
.ss-website-html.is-arriving .ss-website-transition__mark { animation: ss-transition-mark-out 160ms var(--ss-ease-out) forwards; }
@keyframes ss-transition-mark-out { from { opacity: 1; } to { opacity: 0; } }
.ss-website-transition.is-covering { transform: scaleY(1); transition: transform var(--ss-dur-base) var(--ss-ease-in-out); }
.ss-website-transition.is-covering .ss-website-transition__line { transform: scaleX(1); transition: transform var(--ss-dur-slow) var(--ss-ease-out) var(--ss-dur-fast); }
/* Arrival reveal is pure CSS so the page can never stay covered if JS fails. */
.ss-website-html.is-arriving .ss-website-transition { transform: scaleY(1); transform-origin: top; animation: ss-transition-reveal 460ms var(--ss-ease-in-out) 40ms forwards; }
@keyframes ss-transition-reveal { to { transform: scaleY(0); } }

/* Entry (first full load of a session): the official SkyStruct logo (unmodified SVG artwork) —
   the towers-and-cloud mark rises out of its baseline, the wordmark settles beneath it and a short
   SkyStruct-blue connection line completes like a progress line. Once the page has loaded and at
   least 3 s have passed (transitions.js adds .is-entry-done) the logo fades and the night panel
   lifts. Safety: a CSS-only lift at 6.5 s. Reduced motion: the logo appears static (global rule).
   The two parts are the same artwork clipped at the gap between mark (0–79.5%) and wordmark
   (86.5–100%), so the logo is never redrawn or distorted. */
.ss-website-transition__logo { position: absolute; left: 50%; top: 50%; width: clamp(168px, 22vw, 240px); aspect-ratio: 266.65 / 151.36; transform: translate(-50%, -62%); opacity: 0; }
.ss-website-transition__logo-mark, .ss-website-transition__logo-word { position: absolute; inset: 0; background: url("ss-website-logo-full-coloured-on-dark.svg") center / 100% 100% no-repeat; }
.ss-website-transition__logo-mark { clip-path: inset(0 0 17% 0); }
.ss-website-transition__logo-word { clip-path: inset(83% 0 0 0); }
.ss-website-html.is-entry { --ss-entry: 420ms; }
.ss-website-html.is-entry .ss-website-transition { transform: scaleY(1); transform-origin: top; animation: ss-transition-reveal 600ms var(--ss-ease-in-out) 6500ms forwards; }
.ss-website-html.is-entry .ss-website-transition__logo { opacity: 1; }
.ss-website-html.is-entry .ss-website-transition__logo-mark { animation: ss-entry-mark 1100ms var(--ss-ease-out) 200ms both; }
.ss-website-html.is-entry .ss-website-transition__logo-word { animation: ss-entry-word 700ms var(--ss-ease-out) 1050ms both; }
.ss-website-html.is-entry .ss-website-transition__line { inset-inline: auto; left: calc(50% - clamp(84px, 11vw, 120px)); width: clamp(168px, 22vw, 240px); top: calc(50% + clamp(46px, 6vw, 64px)); height: 2px; border-radius: 2px; background: #0071CE; transform-origin: left; animation: ss-entry-line 1500ms var(--ss-ease-in-out) 1400ms forwards; }
.ss-website-html.is-entry.is-entry-done .ss-website-transition { animation: ss-entry-lift 640ms var(--ss-ease-in-out) 220ms forwards; }
.ss-website-html.is-entry.is-entry-done .ss-website-transition__logo { animation: ss-entry-fade 300ms var(--ss-ease-out) forwards; }
.ss-website-html.is-entry.is-entry-done .ss-website-transition__line { transform: scaleX(1); animation: ss-entry-line-out 300ms var(--ss-ease-out) forwards; }
.ss-website-html.is-entry:not(.is-entry-done) :is(.ss-website-main, .ss-website-header) * { animation-play-state: paused !important; }
@keyframes ss-entry-lift { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes ss-entry-line-out { to { opacity: 0; } }
@keyframes ss-entry-mark { from { clip-path: inset(83% 0 17% 0); transform: translateY(6%); } to { clip-path: inset(0 0 17% 0); transform: none; } }
@keyframes ss-entry-word { from { opacity: 0; transform: translateY(5%); } to { opacity: 1; transform: none; } }
/* Panel entrance used by tab panels (modules, audience scenes, pricing results). */
@keyframes ss-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ss-entry-fade { to { opacity: 0; transform: translate(-50%, -66%); } }
@keyframes ss-entry-line { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .ss-website-js [data-ss-reveal] { opacity: 1; transform: none; }
  .ss-website-transition { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .ss-website-header__bar::before { background: var(--ss-color-white); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-header__bar::before { background: var(--ss-color-night); }
  .ss-website-mega { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ss-website-floating-chip { background: var(--ss-color-white); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Tilt stage: a product visual rises with perspective and settles flat as it scrolls
   into view (driven by a view-mode scene on the stage: [data-ss-scene="view"]). */
.ss-website-tilt-stage { perspective: 1800px; }
.ss-website-tilt { position: relative; transform-origin: 50% 0; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-tilt {
    transform: rotateX(calc(max(0, 0.5 - var(--ss-progress, 0)) * 34deg)) scale(calc(1 - max(0, 0.5 - var(--ss-progress, 0)) * 0.12));
    will-change: transform;
  }
}

/* The native system cursor is always used (no replacement cursor). */

/* Pointer light: a soft highlight follows the pointer across selected surfaces. */
@media (hover: hover) and (pointer: fine) {
  [data-ss-glow] { position: relative; }
  [data-ss-glow]::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(320px circle at var(--ss-gx, 50%) var(--ss-gy, 50%), rgba(77, 163, 238, 0.12), transparent 65%); transition: opacity var(--ss-dur-slow) var(--ss-ease-out); }
  [data-ss-glow]:hover::after { opacity: 1; }
  :is(.ss-website-section--dark, .ss-website-inset, .ss-website-immersive, .ss-website-leader--lead) [data-ss-glow]::after, .ss-website-leader--lead[data-ss-glow]::after { background: radial-gradient(320px circle at var(--ss-gx, 50%) var(--ss-gy, 50%), rgba(255, 255, 255, 0.08), transparent 65%); }
  [data-ss-tilt]:not([data-ss-tilt="vars"]) { transition: transform var(--ss-dur-story) var(--ss-ease-out); transform: perspective(1200px) rotateX(calc(var(--ss-ty, 0) * -2.5deg)) rotateY(calc(var(--ss-tx, 0) * 3deg)); }
}

/* ==== ss-website-home.css ==== */
/* Home page compositions. Shared motifs (dissolve, inset, sheet, glass) live in
   layout/components; this file only composes them. */

/* ---------- Hero: editorial, centred, product rising out of the atmosphere ---------- */
.ss-website-home-hero { padding-top: calc(var(--ss-header-h) + clamp(40px, 1rem + 4.5vw, 88px)); overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #061237 0%, var(--ss-color-ink) 62%); }
.ss-website-home-hero__layout { display: grid; gap: clamp(48px, 1.5rem + 4vw, 88px); }
.ss-website-home-hero__copy { display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; }
.ss-website-home-hero__copy .ss-website-title { max-width: 15ch; }
[dir="rtl"] .ss-website-home-hero__copy .ss-website-title { max-width: 18ch; }
.ss-website-home-hero__lead { max-width: 600px; margin-inline: auto; }
.ss-website-home-hero__copy .ss-website-actions { justify-content: center; }
/* Trust marquee — small, slow, secondary. Logos rest at low emphasis; hover pauses and lifts them. */
.ss-website-marquee { width: min(100%, 760px); margin-top: var(--ss-space-3); display: grid; gap: 14px; justify-items: center; }
.ss-website-marquee__label { font-size: var(--ss-size-eyebrow); font-weight: 600; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-inverse-3); }
[lang="ar"] .ss-website-marquee__label { letter-spacing: 0; text-transform: none; font-size: var(--ss-size-micro); }
.ss-website-marquee__viewport { width: 100%; overflow: hidden; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.ss-website-marquee__track { display: flex; width: max-content; animation: ss-marquee 64s linear infinite; }
.ss-website-marquee__list { display: flex; align-items: center; gap: clamp(36px, 4vw, 56px); padding-inline-end: clamp(36px, 4vw, 56px); }
.ss-website-marquee__item { display: flex; align-items: center; height: 36px; }
.ss-website-marquee__item img { display: block; width: auto; max-width: none; opacity: 0.46; transition: opacity var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-marquee__viewport:hover .ss-website-marquee__track,
.ss-website-marquee.is-paused .ss-website-marquee__track { animation-play-state: paused; }
.ss-website-marquee__viewport:hover img { opacity: 0.68; }
.ss-website-marquee__item:hover img { opacity: 1; }
@keyframes ss-marquee { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 767px) {
  .ss-website-marquee__track { animation-duration: 48s; }
  .ss-website-marquee__list { gap: 32px; padding-inline-end: 32px; }
  .ss-website-marquee__item img { transform: scale(0.86); }
}
/* Reduced motion: a still, centred row (the duplicate copy is removed). */
@media (prefers-reduced-motion: reduce) {
  .ss-website-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
  .ss-website-marquee__track { animation: none; width: 100%; }
  .ss-website-marquee__list { flex-wrap: wrap; justify-content: center; gap: 18px 32px; padding: 0; }
  .ss-website-marquee__list[aria-hidden="true"] { display: none; }
}

/* The product video rises with a perspective tilt that settles to a gentle resting angle. */
.ss-website-home-hero__stage { position: relative; }
.ss-website-ui-frame--hero { margin-inline: auto; width: min(100%, 1120px); }
.ss-website-ui-frame--video .ss-website-ui-frame__viewport { aspect-ratio: 16 / 9; background: var(--ss-color-night); }
.ss-website-ui-frame__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-website-home-hero__stage::before {
  content: ""; position: absolute; inset: -6% 6% 20%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 113, 206, 0.55), transparent 70%);
  filter: blur(40px);
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-home-hero__tilt {
    transform:
      rotateX(calc(7deg + max(0, 0.5 - var(--ss-progress, 0)) * 44deg + var(--ss-ty, 0) * -1.5deg))
      rotateY(calc(var(--ss-tx, 0) * 2deg))
      scale(calc(1 - max(0, 0.5 - var(--ss-progress, 0)) * 0.14));
    transition: transform 600ms var(--ss-ease-out);
  }
}

/* Hero entrance: eyebrow, masked words, then supporting copy, then the product. */
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-home-hero__copy > :not(.ss-website-title),
  .ss-website-js .ss-website-home-hero__stage { animation: ss-hero-rise 1000ms var(--ss-ease-out) both; }
  .ss-website-js .ss-website-home-hero__copy > .ss-website-eyebrow { animation-delay: calc(var(--ss-entry, 0ms) + 80ms); }
  .ss-website-js .ss-website-home-hero__lead { animation-delay: calc(var(--ss-entry, 0ms) + 220ms); }
  .ss-website-js .ss-website-home-hero__copy > .ss-website-actions { animation-delay: calc(var(--ss-entry, 0ms) + 300ms); }
  .ss-website-js .ss-website-home-hero__copy > .ss-website-marquee { animation-delay: calc(var(--ss-entry, 0ms) + 360ms); }
  .ss-website-js .ss-website-home-hero__stage { animation-duration: 800ms; animation-delay: calc(var(--ss-entry, 0ms) + 260ms); }
}
@keyframes ss-hero-rise { from { opacity: 0; transform: translateY(28px); } }

/* Record sequence: history arrives, status flips to Approved, AI summary appears. */
.ss-website-record--animated [data-ss-status-to] { opacity: 0; transform: translateY(4px); }
.ss-website-record--animated [data-ss-record-event] { opacity: 0; transform: translateX(-6px); }
[dir="rtl"] .ss-website-record--animated [data-ss-record-event] { transform: translateX(6px); }
.ss-website-record--animated [data-ss-status-from],
.ss-website-record--animated [data-ss-status-to],
.ss-website-record--animated [data-ss-record-event] { transition: opacity var(--ss-dur-slow) var(--ss-ease-out), transform var(--ss-dur-slow) var(--ss-ease-out); }
.ss-website-record--animated [data-ss-record-event].is-shown { opacity: 1; transform: none; }
.ss-website-record--animated.is-approved [data-ss-status-from] { opacity: 0; transform: translateY(-4px); }
.ss-website-record--animated.is-approved [data-ss-status-to] { opacity: 1; transform: none; }
.ss-website-record--animated.is-approved { box-shadow: var(--ss-shadow-float), 0 0 0 1px var(--ss-color-blue-40), 0 0 40px rgba(0, 113, 206, 0.25); transition: box-shadow var(--ss-dur-story) var(--ss-ease-out); }
html:not(.ss-website-js) .ss-website-record--animated [data-ss-record-event],
html:not(.ss-website-js) .ss-website-record--animated [data-ss-status-to] { opacity: 1; transform: none; }
html:not(.ss-website-js) .ss-website-record--animated [data-ss-status-from] { display: none; }

/* ---------- The problem: chapter 1 · the statement ----------
   One sentence, large, on the light cloud atmosphere. Words light up as the visitor reads down. */
.ss-website-statement { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: center; min-height: min(100svh, 1000px); }
.ss-website-statement__inner { display: grid; justify-items: center; text-align: center; }
.ss-website-statement__text { max-width: 19ch; font-size: clamp(2.25rem, 1rem + 4.4vw, 5.25rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.035em; color: #02040F; text-wrap: balance; }
[dir="rtl"] .ss-website-statement__text { max-width: 22ch; line-height: 1.4; letter-spacing: 0; }
.ss-website-backdrop--statement .ss-website-backdrop__layer--cloud-a { top: 52%; right: -16%; width: min(62vw, 920px); }
.ss-website-backdrop--statement .ss-website-backdrop__layer--cloud-b { top: 2%; left: -14%; width: min(46vw, 640px); }
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-statement__inner { --ss-r: clamp(0, (var(--ss-progress, 1) - 0.14) / 0.38, 1); }
  .ss-website-js .ss-website-statement .is-split-scroll .ss-website-split__inner { transform: none; opacity: calc(0.16 + 0.84 * clamp(0, var(--ss-r) * 1.9 - var(--ss-i) * 0.06, 1)); }
}

/* ---------- The problem: chapters 2–4 · full-screen films ----------
   Footage (tinted towards #001F54, desaturated) under a bottom-start shade; copy sits in the
   darkest, calmest corner so it reads over any frame. Desktop: each film rises over the previous
   one as a card that opens to full bleed, holds, then is covered by the next. */
.ss-website-films { position: relative; }
.ss-website-film { position: relative; isolation: isolate; color: #FFFFFF; }
.ss-website-film__stage { position: relative; display: grid; align-items: end; min-height: 100svh; overflow: hidden; }
.ss-website-film__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #000000; }
.ss-website-film__video { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) contrast(1.06); }
.ss-website-film__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); }  /* neutral: natural colour, darker exposure */
.ss-website-film__shade { position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(85% 75% at 0% 100%, rgba(0, 0, 0, 0.55), transparent 72%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.58) 32%, rgba(0, 0, 0, 0.16) 62%, rgba(0, 0, 0, 0.36) 100%); }
[dir="rtl"] .ss-website-film__shade { background:
    radial-gradient(85% 75% at 100% 100%, rgba(0, 0, 0, 0.55), transparent 72%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.58) 32%, rgba(0, 0, 0, 0.16) 62%, rgba(0, 0, 0, 0.36) 100%); }
.ss-website-film__content { display: grid; justify-items: start; gap: 20px; padding-block: calc(var(--ss-header-h) + 56px) clamp(64px, 3rem + 5vw, 136px); }
.ss-website-film__content > * { max-width: 720px; }
.ss-website-film__index { display: flex; align-items: baseline; gap: 8px; font-size: var(--ss-size-small); font-weight: 600; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.ss-website-film__index span { color: rgba(255, 255, 255, 0.62); letter-spacing: 0.08em; }
.ss-website-film__icon { position: relative; display: grid; place-items: center; width: 60px; height: 60px; margin-top: 4px; border-radius: 18px; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)); border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 34px rgba(2, 4, 15, 0.4); }
.ss-website-film__icon .ss-website-icon { width: 28px; height: 28px; }
/* AI: the mark carries a slow signature-blue signal (no label, no aqua inside the primary chapters). */
.ss-website-film__icon--ai::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 1px rgba(0, 113, 206, 0.7), 0 0 26px rgba(0, 113, 206, 0.55); opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) { .ss-website-film__icon--ai::after { animation: ss-film-signal 3.6s var(--ss-ease-in-out) infinite; } }
@keyframes ss-film-signal { 50% { opacity: 1; } }
.ss-website-film__title { max-width: 14ch; font-size: clamp(2.5rem, 1.25rem + 4vw, 5.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; color: #FFFFFF; text-wrap: balance; text-shadow: 0 2px 30px rgba(2, 4, 15, 0.35); }
[dir="rtl"] .ss-website-film__title { line-height: 1.3; letter-spacing: 0; }
.ss-website-film__body { max-width: 52ch; font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); line-height: 1.6; color: rgba(255, 255, 255, 0.86); text-wrap: pretty; }
@media (max-width: 767px) {
  .ss-website-films { --ss-film-side: 16px; --ss-film-radius: 28px; }  /* phones: inset card with the page gutter */
  .ss-website-film__stage { min-height: 88svh; }
  .ss-website-film__content { gap: 16px; padding-block: 120px 56px; }
  .ss-website-film__icon { width: 52px; height: 52px; border-radius: 16px; }
  .ss-website-film__icon .ss-website-icon { width: 24px; height: 24px; }
}
/* Staging: index + icon → title → body (scroll position on desktop, first view elsewhere). */
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-film__content > * { opacity: 0; transform: translateY(26px); transition: opacity 480ms var(--ss-ease-out), transform 560ms var(--ss-ease-out); }
  .ss-website-js .ss-website-film.is-s1 :is(.ss-website-film__index, .ss-website-film__icon),
  .ss-website-js .ss-website-film.is-s2 .ss-website-film__title,
  .ss-website-js .ss-website-film.is-s3 .ss-website-film__body { opacity: 1; transform: none; }
  .ss-website-js .ss-website-film.is-s1 .ss-website-film__icon { transition-delay: 90ms; }
  /* Without the pinned stage all three steps arrive together: stagger them. */
  .ss-website-js .ss-website-film:not(.is-pinned).is-s2 .ss-website-film__title { transition-delay: 100ms; }
  .ss-website-js .ss-website-film:not(.is-pinned).is-s3 .ss-website-film__body { transition-delay: 180ms; }
}
@media (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-film { z-index: 1; height: 180svh; }
  .ss-website-js .ss-website-film + .ss-website-film { z-index: 2; margin-top: -100svh; }
  .ss-website-js .ss-website-film + .ss-website-film + .ss-website-film { z-index: 3; height: 140svh; }
  .ss-website-js .ss-website-film__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
  /* Enter: inset card → full bleed (--ss-in). Contract: full bleed → card (--ss-out). Cover: the card fades as the next chapter rises (--ss-cover). */
  .ss-website-js .ss-website-film__media { --ss-o: max(calc(1 - var(--ss-in, 1)), var(--ss-out, 0)); clip-path: inset(calc(var(--ss-o) * 9%) calc(var(--ss-o) * var(--ss-film-side, 6%)) calc(var(--ss-out, 0) * 9%) round calc(var(--ss-o) * var(--ss-film-radius, 40px))); }
  .ss-website-js .ss-website-film__stage { opacity: calc(1 - min(1, var(--ss-cover, 0) * 3.2)); }
  .ss-website-js .ss-website-film__video { transform: scale(calc(1.16 - var(--ss-in, 1) * 0.1 + var(--ss-out, 0) * 0.04)); }
  .ss-website-js .ss-website-film__content { opacity: calc(1 - min(1, var(--ss-out, 0) * 1.6)); transform: translateY(calc(var(--ss-out, 0) * -32px)); }
}

/* ---------- The answer: one controlled environment (flow) ---------- */
.ss-website-flow { position: relative; isolation: isolate; overflow: clip; }
.ss-website-flow__inner { position: relative; }
.ss-website-flow__header { display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; margin-bottom: clamp(40px, 2rem + 3vw, 88px); }
.ss-website-flow__header .ss-website-title { max-width: 16ch; }
.ss-website-flow__lead { max-width: 46ch; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.55; color: var(--ss-text-2); text-wrap: balance; }

/* Below 1024px: one vertical spine — inputs (dashed, loose) ↓ SkyStruct ↓ outcomes (solid blue). */
.ss-website-dataflow { position: relative; display: grid; justify-items: center; width: 100%; max-width: 520px; margin-inline: auto; text-align: start; }
.ss-website-dataflow__svg { display: none; }
.ss-website-dataflow__caption { max-width: 32ch; margin-bottom: 14px; font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; text-align: center; color: var(--ss-text-3); }
[lang="ar"] .ss-website-dataflow__caption { letter-spacing: 0; text-transform: none; font-size: var(--ss-size-small); }
.ss-website-dataflow__caption--out { margin-top: 4px; color: #0071CE; }
.ss-website-dataflow__sources, .ss-website-dataflow__outcomes { position: relative; display: grid; gap: 12px; width: 100%; }
.ss-website-dataflow__sources::before, .ss-website-dataflow__outcomes::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; border-left: 2px dashed rgba(91, 108, 135, 0.4); transform: translateX(-1px); }
.ss-website-dataflow__outcomes::before { border-left: 2px solid rgba(0, 113, 206, 0.5); }
/* Glass pills: translucent surface, hairline border, icon tile. */
.ss-website-dataflow__node {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px 10px 10px;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 253, 0.9));
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 1px rgba(11, 13, 18, 0.07), 0 12px 28px rgba(0, 31, 84, 0.09);
  font-size: var(--ss-size-small); font-weight: 600; line-height: 1.3; color: var(--ss-text-1);
}
[dir="rtl"] .ss-website-dataflow__node { padding: 10px 10px 10px 16px; }
.ss-website-dataflow__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--ss-home-neutral-700); background: var(--ss-home-neutral-50); box-shadow: inset 0 0 0 1px var(--ss-line); }
.ss-website-dataflow__icon .ss-website-icon { width: 18px; height: 18px; }
.ss-website-dataflow__node--outcome .ss-website-dataflow__icon { border-radius: 50%; color: #FFFFFF; background: var(--ss-home-green); box-shadow: 0 4px 10px rgba(18, 184, 134, 0.3); }
/* Lanes: the spine between groups, with a signal travelling in the direction of the flow. */
.ss-website-dataflow__lane { position: relative; display: block; width: 24px; height: 64px; overflow: hidden; }
.ss-website-dataflow__lane::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 6px; border-left: 2px dashed rgba(91, 108, 135, 0.4); }
.ss-website-dataflow__lane--out::before { border-left: 2px solid rgba(0, 113, 206, 0.5); }
.ss-website-dataflow__lane::after { content: ""; position: absolute; left: 7px; bottom: 4px; width: 10px; height: 10px; border-right: 2px solid rgba(91, 108, 135, 0.6); border-bottom: 2px solid rgba(91, 108, 135, 0.6); transform: rotate(45deg); }
.ss-website-dataflow__lane--out::after { border-color: #0071CE; }
.ss-website-dataflow__lane i { position: absolute; left: 7px; top: 0; width: 10px; height: 100%; transform: translateY(-100%); }
.ss-website-dataflow__lane i::after { content: ""; position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #8EA0BC; }
.ss-website-dataflow__lane--out i::after { background: #0071CE; box-shadow: 0 0 8px rgba(0, 113, 206, 0.6); }
@media (prefers-reduced-motion: no-preference) { .ss-website-dataflow__lane i { animation: ss-lane 1.9s var(--ss-ease-in-out) infinite; } .ss-website-dataflow__lane--out i { animation-delay: 0.6s; } }
@keyframes ss-lane { 0% { transform: translateY(-100%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-10%); opacity: 0; } }

/* SkyStruct hub: system rings around the platform core, the four record states on the ring. */
.ss-website-hub { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin-block: 4px; }
.ss-website-hub::before { content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 113, 206, 0.16), rgba(0, 113, 206, 0.05) 58%, transparent); pointer-events: none; }
.ss-website-hub__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(90deg); }
.ss-website-hub__glow { fill: rgba(255, 255, 255, 0.5); stroke: none; }
.ss-website-hub__ring { fill: none; stroke: rgba(0, 31, 84, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ss-website-hub__ring--outer { stroke: rgba(0, 113, 206, 0.42); stroke-dasharray: 2 7; }
.ss-website-hub__ring--mid { stroke: rgba(0, 31, 84, 0.1); }
.ss-website-hub__orbit { transform-box: fill-box; transform-origin: center; }
.ss-website-hub__sat { fill: #0071CE; }
.ss-website-hub__port { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ss-website-hub__port--in { stroke: rgba(91, 108, 135, 0.55); }
.ss-website-hub__port--out { stroke: #0071CE; }
.ss-website-hub__core {
  position: absolute; inset: 20.3%; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8%; text-align: center;
  border-radius: 50%; border: 1px solid #FFFFFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 252, 0.94));
  box-shadow: 0 0 0 1px rgba(0, 113, 206, 0.18), 0 24px 50px rgba(0, 31, 84, 0.16), 0 0 54px rgba(0, 113, 206, 0.16), inset 0 -12px 24px rgba(0, 113, 206, 0.06);
}
.ss-website-hub__mark { display: grid; place-items: center; width: clamp(36px, 22%, 46px); aspect-ratio: 1; border-radius: 30%; background: linear-gradient(180deg, #FFFFFF, #EEF5FC); box-shadow: 0 0 0 1px rgba(0, 113, 206, 0.18), 0 6px 14px rgba(0, 31, 84, 0.12); }
.ss-website-hub__mark img { width: 74%; height: 74%; object-fit: contain; }
.ss-website-hub__name { display: grid; gap: 3px; font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.125rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: #02040F; }
.ss-website-hub__name small { max-width: 14ch; margin-inline: auto; font-size: 0.6875rem; font-weight: 600; line-height: 1.25; letter-spacing: 0; color: #0071CE; }
.ss-website-hub__beat { display: flex; gap: 3px; margin-top: 2px; }
.ss-website-hub__beat i { width: 12px; height: 3px; border-radius: 2px; background: rgba(0, 113, 206, 0.2); }
.ss-website-hub__attrs { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.ss-website-hub__attr { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }
.ss-website-hub__attr--responsibility { left: 16.4%; top: 16.4%; --ss-led: var(--ss-home-coral); }
.ss-website-hub__attr--status { left: 83.6%; top: 16.4%; --ss-led: var(--ss-home-green); }
.ss-website-hub__attr--evidence { left: 16.4%; top: 83.6%; --ss-led: var(--ss-home-sun); }
.ss-website-hub__attr--history { left: 83.6%; top: 83.6%; --ss-led: #0071CE; }
.ss-website-hub__attr dt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.08), 0 8px 18px rgba(0, 31, 84, 0.1); font-size: 0.75rem; font-weight: 700; line-height: 1.2; color: #02040F; }
[dir="rtl"] .ss-website-hub__attr dt { padding: 6px 9px 6px 11px; }
.ss-website-hub__attr dt .ss-website-icon { width: 13px; height: 13px; color: var(--ss-home-neutral-500); }
.ss-website-hub__led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ss-led); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-led) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .ss-website-hub__orbit { animation: ss-hub-orbit 48s linear infinite; }
  .ss-website-hub__beat i { animation: ss-hub-beat 2.4s var(--ss-ease-in-out) infinite; }
  .ss-website-hub__beat i:nth-child(2) { animation-delay: 0.3s; } .ss-website-hub__beat i:nth-child(3) { animation-delay: 0.6s; }
  .ss-website-hub__led { animation: ss-hub-led 4.8s var(--ss-ease-in-out) infinite; animation-delay: calc(var(--ss-i) * 1.2s); }
}
@keyframes ss-hub-orbit { to { transform: rotate(360deg); } }
@keyframes ss-hub-beat { 0%, 100% { background: rgba(0, 113, 206, 0.2); } 35% { background: #0071CE; } }
@keyframes ss-hub-led { 0%, 70%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-led) 22%, transparent); } 20% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ss-led) 30%, transparent); } }
@media (max-width: 380px) { .ss-website-hub__attr dt { padding: 5px 9px 5px 7px; font-size: 0.6875rem; } }

@media (min-width: 1024px) {
  .ss-website-dataflow { display: block; aspect-ratio: 1200 / 540; max-width: 1120px; }
  .ss-website-dataflow__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  [dir="rtl"] .ss-website-dataflow__svg { transform: scaleX(-1); }
  .ss-website-dataflow__caption, .ss-website-dataflow__lane, .ss-website-dataflow__sources::before, .ss-website-dataflow__outcomes::before { display: none; }
  .ss-website-dataflow__sources, .ss-website-dataflow__outcomes { position: absolute; inset: 0; display: block; }
  .ss-website-dataflow__node { position: absolute; top: var(--ss-y); inset-inline-start: 0; width: 21.8%; min-height: 0; transform: translateY(-50%); }
  .ss-website-dataflow__node--outcome { inset-inline-start: auto; inset-inline-end: 0; width: 21.5%; }
  .ss-website-hub { position: absolute; left: 36.667%; top: 20.37%; width: 26.667%; margin: 0; }
  [dir="rtl"] .ss-website-hub { left: auto; right: 36.667%; }
  .ss-website-hub__rings { transform: none; }
  [dir="rtl"] .ss-website-hub__rings { transform: scaleX(-1); }
  .ss-website-dataflow__path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .ss-website-dataflow__path--in { stroke: rgba(91, 108, 135, 0.4); stroke-dasharray: 2 6; }
  .ss-website-dataflow__path--out { stroke: rgba(0, 113, 206, 0.5); }
  .ss-website-dataflow__pulse--in { fill: #8EA0BC; }
  .ss-website-dataflow__pulse--out { fill: #0071CE; filter: drop-shadow(0 0 4px rgba(0, 113, 206, 0.55)); }
}
/* Arrival: inputs settle in, the hub forms, paths appear, outcomes arrive last. */
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-dataflow :is(.ss-website-dataflow__node, .ss-website-hub, .ss-website-dataflow__svg, .ss-website-dataflow__lane, .ss-website-dataflow__caption) { opacity: 0; transition: opacity 450ms var(--ss-ease-out), transform 450ms var(--ss-ease-out); }
  .ss-website-js .ss-website-dataflow .ss-website-dataflow__node { transition-delay: calc(40ms + var(--ss-i) * 50ms); }
  .ss-website-js .ss-website-dataflow .ss-website-hub { transform: scale(0.94); transition-delay: 160ms; }
  .ss-website-js .ss-website-dataflow .ss-website-dataflow__svg { transition-delay: 240ms; }
  .ss-website-js .ss-website-dataflow .ss-website-dataflow__node--outcome { transition-delay: calc(360ms + var(--ss-i) * 60ms); }
  .ss-website-js .ss-website-dataflow.is-revealed :is(.ss-website-dataflow__node, .ss-website-hub, .ss-website-dataflow__svg, .ss-website-dataflow__lane, .ss-website-dataflow__caption) { opacity: 1; }
  .ss-website-js .ss-website-dataflow.is-revealed .ss-website-hub { transform: none; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-dataflow .ss-website-dataflow__node { transform: translateY(-50%); }
  .ss-website-dataflow.is-revealed .ss-website-dataflow__node { animation: ss-node-float 7s var(--ss-ease-in-out) infinite alternate; animation-delay: calc(var(--ss-i) * -1.7s); }
}
@keyframes ss-node-float { from { translate: 0 -2px; } to { translate: 0 2px; } }

/* ---------- C.L.I.C. framework: selector + one light panel ----------
   The selected area's identity colour flows through the selector puck, the panel's ambient light,
   icons and links (data-ss-clic on the root follows the selection). Typography and structure lead. */
.ss-website-clic { overflow: clip; }
.ss-website-clic__selector { display: flex; justify-content: center; margin-top: var(--ss-space-6); }
.ss-website-clic__tabs { background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px var(--ss-line), 0 10px 30px rgba(0, 31, 84, 0.08); }
.ss-website-clic__tabs .ss-website-segmented__option { min-width: 0; gap: 8px; padding: 0 20px; color: var(--ss-text-2); }
.ss-website-clic__tabs .ss-website-segmented__option .ss-website-icon { width: 18px; height: 18px; color: var(--ss-text-3); transition: color var(--ss-dur-base); }
.ss-website-clic__tabs .ss-website-segmented__option[data-ss-clic-tab="construction"] { --ss-tab-accent: var(--ss-clic-construction-ink); }
.ss-website-clic__tabs .ss-website-segmented__option[data-ss-clic-tab="labour"] { --ss-tab-accent: var(--ss-clic-labour-ink); }
.ss-website-clic__tabs .ss-website-segmented__option[data-ss-clic-tab="inventory"] { --ss-tab-accent: var(--ss-clic-inventory-ink); }
.ss-website-clic__tabs .ss-website-segmented__option[data-ss-clic-tab="cost"] { --ss-tab-accent: var(--ss-clic-cost-ink); }
.ss-website-clic__tabs .ss-website-segmented__option:hover .ss-website-icon { color: var(--ss-tab-accent); }
.ss-website-js .ss-website-clic__tabs .ss-website-segmented__option[aria-selected="true"],
.ss-website-clic__tabs .ss-website-segmented__option[aria-selected="true"] { color: var(--ss-accent-ink); }
.ss-website-clic__tabs .ss-website-segmented__option[aria-selected="true"] .ss-website-icon { color: var(--ss-accent); }
.ss-website-clic__tabs .ss-website-segmented__puck { background: var(--ss-color-white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ss-accent) 35%, transparent), 0 6px 18px color-mix(in srgb, var(--ss-accent) 22%, transparent); transition: transform var(--ss-dur-base) var(--ss-ease-out), width var(--ss-dur-base) var(--ss-ease-out), box-shadow var(--ss-dur-base); }
@media (max-width: 639px) {
  .ss-website-clic__tabs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; border-radius: 28px; }  /* two rows: a rounded box the pills fit inside, not a pill */
  .ss-website-clic__tabs .ss-website-segmented__option { padding: 0 12px; }
}

.ss-website-clic__stage { position: relative; margin-top: clamp(28px, 1.5rem + 1.5vw, 48px); }
.ss-website-clic__panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: clamp(28px, 1.5rem + 2vw, 56px);
  padding: clamp(24px, 1rem + 3vw, 56px);
  border-radius: var(--ss-radius-panel); border: 1px solid var(--ss-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  box-shadow: var(--ss-elev-3);
}
/* Ambient light in the area's colour. */
.ss-website-clic__panel::before { content: ""; position: absolute; inset: -40% auto auto -20%; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ss-accent) 16%, transparent), transparent); }
[dir="rtl"] .ss-website-clic__panel::before { inset: -40% -20% auto auto; }
@media (min-width: 1024px) { .ss-website-clic__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.ss-website-js .ss-website-clic__panel:not([hidden]) { animation: ss-clic-in 420ms var(--ss-ease-out); }
.ss-website-js .ss-website-clic__panel:not([hidden]) .ss-website-clic__caps li { animation: ss-clic-in 420ms var(--ss-ease-out) both; animation-delay: calc(80ms + var(--ss-i) * 50ms); }
@keyframes ss-clic-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ss-website-js .ss-website-clic__panel:not([hidden]), .ss-website-js .ss-website-clic__panel:not([hidden]) .ss-website-clic__caps li { animation: none; } }

.ss-website-clic__intro { display: grid; gap: var(--ss-space-4); align-content: start; }
.ss-website-clic__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: var(--ss-size-eyebrow); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-accent-ink); }
.ss-website-clic__eyebrow .ss-website-icon-tile { color: var(--ss-accent); background: var(--ss-accent-soft); }
.ss-website-clic__title { max-width: 18ch; font-size: var(--ss-size-h3); font-weight: 600; line-height: 1.2; letter-spacing: var(--ss-tracking-h2); color: var(--ss-text-1); text-wrap: balance; }
.ss-website-clic__replaces { display: grid; gap: 12px; margin-top: var(--ss-space-3); padding-top: var(--ss-space-4); border-top: 1px solid var(--ss-line); }
.ss-website-clic__replaces-label { font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
/* Tool stack: official product icons + names as compact chips (consolidation, not attack). */
.ss-website-clic__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-website-clic__tool { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 14px 0 10px; border-radius: var(--ss-radius-control); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ss-line), 0 1px 2px rgba(11, 13, 18, 0.04); font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-1); }
.ss-website-clic__tool img { flex: none; width: 20px; height: 20px; object-fit: contain; }

/* Capability cards: ONE component family. Fixed zones — icon · title (rows equalised across the
   peer group, so one- and two-line titles share a baseline) · optional AI indicator · description
   — with the arrow pinned top-end. Equal heights per grid row. */
.ss-website-clic__caps { display: grid; gap: 12px; grid-auto-rows: 1fr; }
@media (min-width: 640px) { .ss-website-clic__caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ss-website-clic__caps > li { display: grid; }
.ss-website-clic__cap {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start;
  padding: 22px; border-radius: var(--ss-radius-card); background: var(--ss-color-white); box-shadow: inset 0 0 0 1px var(--ss-line);
  transition: box-shadow var(--ss-dur-base) var(--ss-ease-out), transform var(--ss-dur-base) var(--ss-ease-out);
}
.ss-website-clic__cap:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-accent) 45%, transparent), 0 14px 30px rgba(0, 31, 84, 0.1); transform: translateY(-2px); }
.ss-website-clic__cap-icon { grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ss-accent); background: var(--ss-accent-soft); }
.ss-website-clic__cap-icon .ss-website-icon { width: 20px; height: 20px; }
.ss-website-clic__cap-name { grid-column: 2; grid-row: 1; align-self: start; padding-top: 2px; font-weight: 600; font-size: 1.0625rem; color: var(--ss-text-1); line-height: 1.3; text-wrap: wrap; }
.ss-website-clic__cap-meta { grid-column: 2; grid-row: 2; display: flex; align-items: center; }
.ss-website-clic__cap-meta:not(:empty) { padding-top: 6px; }
.ss-website-clic__cap-desc { grid-column: 2; grid-row: 3; margin-top: 10px; font-size: var(--ss-size-small); line-height: 1.55; color: var(--ss-text-2); }
.ss-website-clic__cap-arrow { grid-column: 3; grid-row: 1; width: 18px; height: 18px; margin-top: 4px; color: var(--ss-accent-ink); transition: transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-clic__cap:hover .ss-website-clic__cap-arrow { transform: translateX(3px); }
[dir="rtl"] .ss-website-clic__cap-arrow { transform: scaleX(-1); }
[dir="rtl"] .ss-website-clic__cap:hover .ss-website-clic__cap-arrow { transform: translateX(-3px) scaleX(-1); }

/* ---------- Built for the region (home, light) ---------- */
.ss-website-region-light { overflow: clip; }
.ss-website-region-light__layout { display: grid; gap: clamp(32px, 2rem + 2vw, 64px); align-items: center; }
@media (min-width: 1024px) { .ss-website-region-light__layout { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.ss-website-region-light__copy { display: grid; gap: var(--ss-space-5); justify-items: start; }
.ss-website-region-light__copy .ss-website-title { max-width: 17ch; }
.ss-website-region-light__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--ss-space-2); }
.ss-website-region-light__facts li { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--ss-radius-control); background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px var(--ss-line), var(--ss-elev-1); font-weight: 600; font-size: var(--ss-size-small); color: var(--ss-text-1); }
.ss-website-region-light__facts .ss-website-icon { width: 18px; height: 18px; color: var(--ss-color-blue); }
.ss-website-region-light__visual { position: relative; display: grid; place-items: center; }
.ss-website-region-light__visual::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 113, 206, 0.16), transparent); filter: blur(30px); }
.ss-website-globe--light { width: min(100%, 620px); }
.ss-website-globe--light .ss-website-globe__body {
  background: radial-gradient(circle at 36% 28%, #FFFFFF, #EEF5FC 48%, #D5E5F6 82%, #C3D8EF);
  box-shadow: inset -24px -34px 70px rgba(0, 54, 140, 0.12), inset 10px 14px 40px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(0, 113, 206, 0.12), 0 40px 90px rgba(0, 31, 84, 0.16);
}

/* ---------- Momentum: verified statistics, each with a small looping graphic ----------
   Shared by Home and About. Colour follows meaning: time (sun), value built (green),
   people (violet), partners (coral). Loops run only while on screen ([data-ss-loop] → .is-live). */
.ss-website-proof__stats { display: grid; margin-top: clamp(36px, 2rem + 2vw, 64px); border-top: 1px solid var(--ss-line-strong); }
@media (min-width: 640px) { .ss-website-proof__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ss-website-proof__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ss-website-proof__stat { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 1rem + 1.5vw, 36px) clamp(16px, 1.5vw, 28px) clamp(24px, 1rem + 1vw, 32px); border-bottom: 1px solid var(--ss-line); }
@media (min-width: 640px) { .ss-website-proof__stat + .ss-website-proof__stat { border-inline-start: 1px solid var(--ss-line); } .ss-website-proof__stat:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; } }
@media (min-width: 1024px) { .ss-website-proof__stat:nth-child(odd) { padding-inline-start: clamp(16px, 1.5vw, 28px); } .ss-website-proof__stat:not(:first-child) { border-inline-start: 1px solid var(--ss-line); } .ss-website-proof__stat:first-child { padding-inline-start: 0; } .ss-website-proof__stat { border-bottom: 0; } }
.ss-website-proof__stat:nth-child(1) { --ss-stat: var(--ss-home-sun); --ss-stat-soft: #FCE7B2; }
.ss-website-proof__stat:nth-child(2) { --ss-stat: var(--ss-home-green); --ss-stat-soft: #C9EEDF; }
.ss-website-proof__stat:nth-child(3) { --ss-stat: var(--ss-home-violet); --ss-stat-soft: #DDD6FF; }
.ss-website-proof__stat:nth-child(4) { --ss-stat: var(--ss-home-coral); --ss-stat-soft: #FFD6CF; }
.ss-website-proof__art { display: block; margin-bottom: var(--ss-space-3); }
.ss-website-stat-art { display: block; width: 100%; max-width: 248px; height: 72px; overflow: visible; }
[dir="rtl"] .ss-website-stat-art { transform: scaleX(-1); }
.ss-website-proof__value { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #0B0D12; font-variant-numeric: tabular-nums; }
.ss-website-proof__label { max-width: 26ch; font-size: var(--ss-size-small); line-height: 1.5; color: var(--ss-text-2); }
.ss-website-proof__note { margin-top: var(--ss-space-4); font-size: var(--ss-size-micro); color: var(--ss-text-3); }
/* Static (final) state: also the reduced-motion and no-JS rendering. */
.ss-website-stat-art__base { stroke: var(--ss-line-strong); stroke-width: 1; }
.ss-website-stat-art__tick { stroke: var(--ss-stat-soft); stroke-width: 2; stroke-linecap: round; }
.ss-website-stat-art__tick.is-on { stroke: var(--ss-stat); }
.ss-website-stat-art__head { opacity: 0; }
.ss-website-stat-art__head line { stroke: #0B0D12; stroke-width: 1.25; }
.ss-website-stat-art__head circle { fill: #0B0D12; }
.ss-website-stat-art__bar { fill: var(--ss-stat-soft); }
.ss-website-stat-art__bar.is-on { fill: var(--ss-stat); }
.ss-website-stat-art__seat { fill: var(--ss-stat-soft); }
.ss-website-stat-art__seat.is-on { fill: var(--ss-stat); }
.ss-website-stat-art__link { fill: none; stroke: var(--ss-stat-soft); stroke-width: 1.5; stroke-dasharray: 1; }
.ss-website-stat-art__node { fill: var(--ss-stat); }
.ss-website-stat-art__hub { fill: #0B0D12; }
.ss-website-stat-art__halo { fill: var(--ss-stat); opacity: 0.16; }
.ss-website-stat-art :is(.ss-website-stat-art__bar, .ss-website-stat-art__seat, .ss-website-stat-art__node, .ss-website-stat-art__halo) { transform-box: fill-box; transform-origin: 50% 100%; }
.ss-website-stat-art :is(.ss-website-stat-art__seat, .ss-website-stat-art__node, .ss-website-stat-art__halo) { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-stat-art__tick { animation: ss-stat-tick 7.2s linear infinite both; animation-delay: calc(var(--ss-i) * 0.18s); }
  .ss-website-js .ss-website-stat-art__head { animation: ss-stat-head 7.2s linear infinite both; }
  .ss-website-js .ss-website-stat-art__bar { animation: ss-stat-build 7.2s var(--ss-ease-out) infinite both; animation-delay: calc(var(--ss-i) * 0.16s); }
  .ss-website-js .ss-website-stat-art__seat.is-on { animation: ss-stat-seat 7.2s var(--ss-ease-out) infinite both; animation-delay: calc(var(--ss-i) * 0.17s); }
  .ss-website-js .ss-website-stat-art__link { animation: ss-stat-link 7.2s var(--ss-ease-out) infinite both; animation-delay: calc(var(--ss-i) * 0.2s); }
  .ss-website-js .ss-website-stat-art__node { animation: ss-stat-node 7.2s var(--ss-ease-out) infinite both; animation-delay: calc(0.3s + var(--ss-i) * 0.2s); }
  .ss-website-js .ss-website-stat-art__halo { animation: ss-stat-halo 2.4s var(--ss-ease-out) infinite; }
  .ss-website-js [data-ss-loop]:not(.is-live) .ss-website-stat-art * { animation-play-state: paused; }
}
@keyframes ss-stat-tick { 0% { stroke: var(--ss-stat-soft); } 3% { stroke: var(--ss-stat); } 62% { stroke: var(--ss-stat); } 78%, 100% { stroke: var(--ss-stat-soft); } }
@keyframes ss-stat-head { 0% { opacity: 0; transform: translateX(0); } 4% { opacity: 1; } 78% { opacity: 1; transform: translateX(228px); } 86%, 100% { opacity: 0; transform: translateX(228px); } }
@keyframes ss-stat-build { 0% { transform: scaleY(0.14); opacity: 0.4; } 12% { transform: scaleY(1); opacity: 1; } 78% { transform: scaleY(1); opacity: 1; } 94%, 100% { transform: scaleY(0.14); opacity: 0.4; } }
@keyframes ss-stat-seat { 0% { fill: var(--ss-stat-soft); transform: scale(1); } 4% { fill: var(--ss-stat); transform: scale(1.22); } 8% { transform: scale(1); } 80% { fill: var(--ss-stat); } 94%, 100% { fill: var(--ss-stat-soft); } }
@keyframes ss-stat-link { 0% { stroke-dashoffset: 1; opacity: 1; stroke: var(--ss-stat-soft); } 10% { stroke-dashoffset: 0; stroke: var(--ss-stat); } 80% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ss-stat-node { 0%, 6% { transform: scale(0); } 11% { transform: scale(1.25); } 14% { transform: scale(1); } 80% { transform: scale(1); opacity: 1; } 94%, 100% { transform: scale(0.5); opacity: 0; } }
@keyframes ss-stat-halo { 0% { transform: scale(0.8); opacity: 0.3; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- Supported by: one open, light panel (no per-logo boxes) ---------- */
.ss-website-supported { display: grid; gap: 20px; margin-top: clamp(56px, 3rem + 3vw, 104px); }
.ss-website-supported__title { display: flex; align-items: center; gap: 16px; font-size: var(--ss-size-eyebrow); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
[lang="ar"] .ss-website-supported__title { letter-spacing: 0; text-transform: none; font-size: var(--ss-size-small); }
.ss-website-supported__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ss-line-strong), transparent); }
[dir="rtl"] .ss-website-supported__title::after { background: linear-gradient(270deg, var(--ss-line-strong), transparent); }
.ss-website-supported__panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 100%); box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.06), 0 34px 70px -34px rgba(0, 31, 84, 0.24), inset 0 1px 0 #FFFFFF; }
.ss-website-supported__light { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 70% at 12% 0%, rgba(0, 113, 206, 0.08), transparent 70%), radial-gradient(30% 60% at 88% 0%, rgba(255, 194, 51, 0.1), transparent 70%), radial-gradient(40% 80% at 55% 110%, rgba(123, 97, 255, 0.07), transparent 70%); }
.ss-website-supported__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ss-website-supported__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ss-website-supported__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ss-website-supported__item { position: relative; display: grid; place-items: center; min-height: 128px; padding: 26px 18px; transition: background-color var(--ss-dur-base) var(--ss-ease-out); }
@media (min-width: 1024px) { .ss-website-supported__item { min-height: 152px; } }
/* Hairline separators that fade at their ends (columns, then rows on wrapped layouts). */
.ss-website-supported__item::before { content: ""; position: absolute; inset-block: 24%; inset-inline-start: 0; width: 1px; background: linear-gradient(transparent, rgba(11, 13, 18, 0.1), transparent); }
.ss-website-supported__item::after { content: ""; position: absolute; inset-inline: 16%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(11, 13, 18, 0.1), transparent); }
.ss-website-supported__item:nth-child(2n + 1)::before, .ss-website-supported__item:nth-child(-n + 2)::after { display: none; }
@media (min-width: 640px) {
  .ss-website-supported__item:nth-child(2n + 1)::before, .ss-website-supported__item:nth-child(-n + 2)::after { display: block; }
  .ss-website-supported__item:nth-child(3n + 1)::before, .ss-website-supported__item:nth-child(-n + 3)::after { display: none; }
}
@media (min-width: 1024px) {
  .ss-website-supported__item:nth-child(3n + 1)::before { display: block; }
  .ss-website-supported__item:nth-child(6n + 1)::before, .ss-website-supported__item::after { display: none; }
}
.ss-website-supported__item img { display: block; width: auto; max-width: 100%; height: auto; opacity: 0.92; filter: saturate(0.92); transition: opacity var(--ss-dur-base) var(--ss-ease-out), filter var(--ss-dur-base) var(--ss-ease-out), transform var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-supported__item--ooredoo img { opacity: 0.86; }
.ss-website-supported__item--ink img { filter: brightness(0); opacity: 0.78; }
.ss-website-supported__item:hover { background: radial-gradient(closest-side, rgba(0, 113, 206, 0.06), transparent); }
.ss-website-supported__item:hover img { opacity: 1; filter: none; transform: translateY(-2px); }
.ss-website-supported__item--ink:hover img { filter: brightness(0); }
.ss-website-supported__item--text span { font-weight: 600; color: var(--ss-text-2); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-supported__grid:not(.is-revealed) .ss-website-supported__item img { opacity: 0; transform: translateY(10px); }
  .ss-website-js .ss-website-supported__grid.is-revealed .ss-website-supported__item img { transition-delay: calc(var(--ss-i) * 70ms); }
  .ss-website-js .ss-website-supported__grid.is-revealed .ss-website-supported__item:hover img { transition-delay: 0ms; }
}

/* ---------- Testimonial: one verified voice, framed by the industry ----------
   The field is a square container; faces sit on two orbits (cqi units, so the whole field
   scales as one). Scroll progress (--ss-progress, "view") opens the orbits outward and lets
   them recede while the portrait comes into focus. */
.ss-website-voice { position: relative; isolation: isolate; overflow: clip; }
.ss-website-backdrop--voice .ss-website-backdrop__layer--cloud-a { top: 46%; right: -20%; width: min(60vw, 880px); }
.ss-website-backdrop--voice .ss-website-backdrop__layer--cloud-b { top: 6%; left: -16%; width: min(44vw, 620px); }
.ss-website-voice__stage { --ss-f: 1; display: grid; gap: clamp(28px, 1.5rem + 2vw, 64px); align-items: center; margin: clamp(32px, 2rem + 2vw, 72px) 0 0; }
@media (min-width: 1024px) { .ss-website-voice__stage { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.ss-website-voice__field { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.ss-website-voice__orbits { position: absolute; inset: 0; opacity: calc(1 - var(--ss-f) * 0.22); }
.ss-website-voice__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ss-website-voice__rings circle { fill: none; stroke: rgba(0, 31, 84, 0.12); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.ss-website-voice__spin { position: absolute; inset: 0; }
.ss-website-voice__face { position: absolute; left: 50%; top: 50%; width: calc(var(--z) * 1cqi); aspect-ratio: 1; margin: calc(var(--z) * -0.5cqi) 0 0 calc(var(--z) * -0.5cqi);
  transform: rotate(var(--a)) translateX(calc(var(--R) * 1cqi * (0.8 + 0.2 * var(--ss-f)))) rotate(calc(var(--a) * -1)); }
.ss-website-voice__face--o0 { --R: 38; }
.ss-website-voice__face--o1 { --R: 49; }
.ss-website-voice__face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #FFFFFF; box-shadow: 0 10px 24px rgba(0, 31, 84, 0.16); filter: saturate(0.6); opacity: 0.82; }
.ss-website-voice__face--o1 img { border-width: 2px; filter: saturate(0.45); opacity: 0.58; }
.ss-website-voice__portrait { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 258 / 321; border-radius: 26px; overflow: hidden; background: #E9EEF4;
  transform: translate(-50%, -50%) scale(calc(0.9 + 0.1 * var(--ss-f)));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 0 9px rgba(255, 255, 255, 0.55), 0 30px 60px rgba(0, 31, 84, 0.24), 0 0 calc(var(--ss-f) * 80px) rgba(0, 113, 206, 0.22); }
.ss-website-voice__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-website-voice__words { position: relative; display: grid; gap: 20px; justify-items: start; width: 100%; max-width: 600px; margin-inline: auto; }
.ss-website-voice__mark { display: block; height: 52px; font-family: Georgia, "Times New Roman", serif; font-size: 128px; line-height: 0.95; color: #0071CE; }
.ss-website-voice__quote p { font-size: clamp(1.4rem, 1.05rem + 1.25vw, 2.2rem); font-weight: 600; line-height: 1.32; letter-spacing: -0.02em; color: #02040F; text-wrap: pretty; }
.ss-website-voice__quote em { font-style: normal; background: linear-gradient(transparent 64%, rgba(0, 113, 206, 0.2) 64%) no-repeat 0 0 / 100% 100%; }
.ss-website-voice__by { display: grid; gap: 4px; width: 100%; padding-top: 20px; border-top: 1px solid var(--ss-line); }
.ss-website-voice__name { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: #02040F; }
.ss-website-voice__role { font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ss-text-3); }
.ss-website-voice__org { display: block; width: auto; height: 34px; margin-top: 14px; filter: brightness(0); opacity: 0.74; }
[dir="rtl"] .ss-website-voice__words { justify-items: end; }
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-voice__stage { --ss-f: clamp(0, (var(--ss-progress, 1) - 0.1) / 0.34, 1); }
  .ss-website-js .ss-website-voice__spin { animation: ss-voice-spin 150s linear infinite; }
  .ss-website-js .ss-website-voice__face img { animation: ss-voice-spin 150s linear infinite reverse; }
  .ss-website-js .ss-website-voice__stage:not(.is-live) :is(.ss-website-voice__spin, .ss-website-voice__face img) { animation-play-state: paused; }
  .ss-website-js .ss-website-voice__stage :is(.ss-website-voice__mark, .ss-website-voice__quote, .ss-website-voice__name, .ss-website-voice__role, .ss-website-voice__org) { opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ss-ease-out), transform 500ms var(--ss-ease-out); }
  .ss-website-js .ss-website-voice__stage.is-revealed :is(.ss-website-voice__mark, .ss-website-voice__quote, .ss-website-voice__name, .ss-website-voice__role) { opacity: 1; transform: none; }
  .ss-website-js .ss-website-voice__stage.is-revealed .ss-website-voice__org { opacity: 0.74; transform: none; }
  .ss-website-js .ss-website-voice__stage.is-revealed .ss-website-voice__mark { transition-delay: 60ms; }
  .ss-website-js .ss-website-voice__stage.is-revealed .ss-website-voice__quote { transition-delay: 140ms; }
  .ss-website-js .ss-website-voice__stage.is-revealed .ss-website-voice__name { transition-delay: 360ms; }
  .ss-website-js .ss-website-voice__stage.is-revealed .ss-website-voice__role { transition-delay: 420ms; }
  .ss-website-js .ss-website-voice__stage.is-revealed .ss-website-voice__org { transition-delay: 480ms; }
  .ss-website-js .ss-website-voice__quote em { background-size: 0% 100%; transition: background-size 700ms var(--ss-ease-out) 420ms; }
  .ss-website-js .ss-website-voice__stage.is-revealed .ss-website-voice__quote em { background-size: 100% 100%; }
}
@keyframes ss-voice-spin { to { rotate: 360deg; } }
@media (max-width: 1023px) {
  .ss-website-voice__field { width: min(100%, 440px); }
  .ss-website-voice__words { justify-items: center; text-align: center; }
  .ss-website-voice__by { justify-items: center; }
  .ss-website-voice__mark { height: 44px; font-size: 104px; }
}

/* ---------- Mobile condensing (credibility) ----------
   Momentum: one statistic per view in a swipe track (cards, not stacked full-width rows).
   Supported by: a compact 3-column logo grid. Testimonial: a smaller field so the one verified
   voice stays the focal point near the top of the section. */
@media (max-width: 767px) {
  .ss-website-proof__stats.is-carousel { border-top: 0; margin-top: var(--ss-space-6); }
  .ss-website-proof__stats.is-carousel > .ss-website-proof__stat { --ss-slide: 84%; padding: 24px 22px 26px !important; border: 1px solid var(--ss-line) !important; border-radius: 20px; background: linear-gradient(180deg, #FFFFFF, #F8F9FB); box-shadow: 0 10px 30px rgba(11, 13, 18, 0.05); }
  .ss-website-supported__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss-website-supported__item { min-height: 92px; padding: 16px 10px; }
  .ss-website-supported__item img { transform: scale(0.82); }
  .ss-website-supported__item:nth-child(n)::before { display: block; }
  .ss-website-supported__item:nth-child(3n + 1)::before { display: none; }
  .ss-website-supported__item::after { display: none; }
  .ss-website-supported__item:nth-child(n + 4)::after { display: block; }
  .ss-website-voice__field { width: min(100%, 320px); }
  .ss-website-voice__stage { gap: 18px; }
}
/* CLIC capability cards become a swipe track on phones. */
@media (max-width: 639px) { .ss-website-clic__caps.is-carousel > li { --ss-slide: 86%; } }
/* Phones: the capability card stacks its zones (icon + arrow row, then title, AI, description) so
   the copy uses the full card width; rows stay equalised across the family. */
@media (max-width: 639px) {
  .ss-website-clic__cap { grid-template-columns: 44px minmax(0, 1fr) 18px; grid-template-rows: auto auto auto 1fr; row-gap: 0; padding: 20px; }
  .ss-website-clic__cap-icon { grid-row: 1; }
  .ss-website-clic__cap-arrow { grid-row: 1; align-self: center; margin-top: 0; }
  .ss-website-clic__cap-name { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; }
  .ss-website-clic__cap-meta { grid-column: 1 / -1; grid-row: 3; }
  .ss-website-clic__cap-desc { grid-column: 1 / -1; grid-row: 4; }
}
/* Phones: the three films are shorter (still full-bleed, still one per screen-ish). */
@media (max-width: 767px) { .ss-website-film__stage { min-height: 76svh; } }

/* ==========================================================================
   Home hero media: intro film → white → SkyStruct mega dashboard (live).
   State machine in ss-website-product-ui.js: data-state (init · intro · white · assembling ·
   live · static) and data-scene (a · b · c). The app.skystruct.com viewport is filled by ONE
   full-frame application (three module screens, one visible); glass-framed modules float across
   the frame edge. Phones: one module at a time inside the frame (same height).
   ========================================================================== */
.ss-website-hero-media { position: relative; margin-inline: auto; width: min(100%, 1120px); --ss-out: 7%; }
.ss-website-hero-media .ss-website-ui-frame--hero { width: 100%; }
.ss-website-hero-media__screen, .ss-website-hero-media__intro, .ss-website-hero-media__white { position: absolute; inset: 0; }
.ss-website-hero-media__screen { overflow: hidden; background: #FFFFFF; }
.ss-website-hero-media__intro { width: 100%; height: 100%; object-fit: cover; z-index: 3; transition: opacity 420ms var(--ss-ease-out); }
.ss-website-hero-media__white { z-index: 2; background: #FFFFFF; opacity: 0; transition: opacity 300ms var(--ss-ease-out); pointer-events: none; }
.ss-website-hero-media[data-state="white"] .ss-website-hero-media__intro { opacity: 0; }
.ss-website-hero-media[data-state="white"] .ss-website-hero-media__white { opacity: 1; }
.ss-website-hero-media:is([data-state="assembling"], [data-state="live"], [data-state="static"]) .ss-website-hero-media__intro { opacity: 0; visibility: hidden; transition: opacity 420ms, visibility 0s 420ms; }
.ss-website-hero-media[data-state="static"] .ss-website-hero-media__intro, html:not(.ss-website-js) .ss-website-hero-media__intro { display: none; }

/* Full-frame application screens: the active module expands over the previous one from the
   right (a tab change in one app); the previous one stays until covered. */
.ss-website-hero-screen { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 0 0 100%); transition: clip-path 640ms var(--ss-ease-in-out) 0s, transform 640ms var(--ss-ease-in-out); transform: translateX(2%); }
.ss-website-hero-screen > .ss-website-pui__scaled { width: 100%; height: 100%; }
.ss-website-hero-screen .ss-website-pui__window { height: 664px; overflow: hidden; border-radius: 0; box-shadow: none; }
.ss-website-hero-media[data-scene="a"] .ss-website-hero-screen--a, .ss-website-hero-media[data-scene="b"] .ss-website-hero-screen--b, .ss-website-hero-media[data-scene="c"] .ss-website-hero-screen--c { z-index: 2; clip-path: inset(0 0 0 0); transform: none; }
.ss-website-hero-media:is([data-state="init"], [data-state="intro"], [data-state="white"]) .ss-website-hero-screen { transition: none; }
html:not(.ss-website-js) .ss-website-hero-screen--a { clip-path: none; transform: none; }
/* Project-dashboard additions (scene A): what needs attention, with owners and status. */
.ss-website-hero-app__attention { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ss-website-hero-app__label { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; }
.ss-website-hero-app__alert { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.08); font-family: "Open Sans", sans-serif; }
.ss-website-hero-app__alert i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ss-ui-tone-bg, #EEF4FB); color: var(--ss-ui-tone, #2563EB); }
.ss-website-hero-app__alert .ss-website-icon { width: 14px; height: 14px; }
.ss-website-hero-app__alert b { display: block; font-size: 11.5px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-website-hero-app__alert small { display: block; font-size: 10px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Glass-framed modules (no browser chrome) across the frame edge. */
.ss-website-hero-floats { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ss-website-hero-float { position: absolute; opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.96); transition: opacity 260ms var(--ss-ease-out), transform 260ms var(--ss-ease-out), visibility 0s 260ms; }
.ss-website-hero-float__glass { padding: 7px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 1px rgba(0, 31, 84, 0.1), 0 30px 60px rgba(2, 8, 30, 0.35), 0 8px 18px rgba(2, 8, 30, 0.18); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.ss-website-hero-float__glass > .ss-website-pui__scaled { border-radius: 14px; background: #FFFFFF; }
.ss-website-hero-float .ss-website-pui__card { position: static; inset: auto; width: 100%; height: 100%; margin: 0; box-shadow: none; animation: none !important; opacity: 1 !important; transform: none !important; }
.ss-website-hero-float .ss-website-pro-ui__owners { align-items: flex-start; }
/* A card that is itself the artboard keeps its design size and the artboard scale (no rewrap at tablet widths). */
.ss-website-hero-float .ss-website-pui__scaled > .ss-website-pui__card { position: absolute; inset: 0 auto auto 0; width: calc(var(--ss-w) * 1px) !important; height: calc(var(--ss-h) * 1px); transform: scale(tan(atan2(100cqw, calc(var(--ss-vw) * 1px)))) !important; }
.ss-website-hero-media:is([data-state="assembling"], [data-state="live"], [data-state="static"])[data-scene="a"] .ss-website-hero-float[data-scene="a"],
.ss-website-hero-media:is([data-state="assembling"], [data-state="live"], [data-state="static"])[data-scene="b"] .ss-website-hero-float[data-scene="b"],
.ss-website-hero-media:is([data-state="assembling"], [data-state="live"], [data-state="static"])[data-scene="c"] .ss-website-hero-float[data-scene="c"] { opacity: 1; visibility: visible; transform: none; transition: opacity 520ms var(--ss-ease-out) 380ms, transform 620ms var(--ss-ease-out) 380ms, visibility 0s 380ms; }
.ss-website-hero-media .ss-website-hero-float.is-primary { transition-delay: 0s; }
.ss-website-hero-media:is([data-state="assembling"], [data-state="live"], [data-state="static"]) .ss-website-hero-float:not(.is-primary)[data-scene] { transition-delay: 0s, 0s, 260ms; }
.ss-website-hero-media:is([data-state="assembling"], [data-state="live"], [data-state="static"])[data-scene="a"] .ss-website-hero-float:not(.is-primary)[data-scene="a"],
.ss-website-hero-media:is([data-state="assembling"], [data-state="live"], [data-state="static"])[data-scene="b"] .ss-website-hero-float:not(.is-primary)[data-scene="b"],
.ss-website-hero-media:is([data-state="assembling"], [data-state="live"], [data-state="static"])[data-scene="c"] .ss-website-hero-float:not(.is-primary)[data-scene="c"] { transition-delay: 620ms, 620ms, 620ms; }
html:not(.ss-website-js) .ss-website-hero-float[data-scene="a"] { opacity: 1; visibility: visible; transform: none; }
/* Placement (percent of the frame; --ss-out = how far modules may cross the edge). */
.ss-website-hero-float--drawing { right: calc(var(--ss-out) * -1); top: 9%; width: 32%; }
.ss-website-hero-float--request { left: calc(var(--ss-out) * -1); bottom: -7%; width: 25%; }
.ss-website-hero-float--insight { right: calc(var(--ss-out) * -1); top: 22%; width: 27%; }
.ss-website-hero-float--model { left: calc(var(--ss-out) * -1); bottom: -6%; width: 30%; }
.ss-website-hero-float--issue { left: calc(var(--ss-out) * -1); bottom: -5%; width: 27%; }
.ss-website-hero-float--milestone { right: calc(var(--ss-out) * -1); bottom: -8%; width: 21%; }
/* Module internals */
.ss-website-hero-mod { display: grid; grid-template-rows: auto 1fr; height: 100%; background: #FFFFFF; font-family: "Open Sans", sans-serif; }
.ss-website-hero-mod__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #EEF0F3; font-size: 13px; color: #111827; }
.ss-website-hero-mod__head .ss-website-icon { width: 16px; height: 16px; color: #2563EB; }
.ss-website-hero-mod__head b { flex: 1; font-weight: 600; }
.ss-website-hero-mod__pin { padding: 3px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; color: #B42318; background: #FEE4E2; }
.ss-website-hero-mod > .ss-website-art { min-height: 0; height: 100%; }
.ss-website-hero-insight { height: 100%; padding: 2px; }
.ss-website-hero-insight .ss-website-aiflow__insight { box-shadow: none; }
.ss-website-hero-chip { position: absolute; right: 5%; bottom: -5%; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px 7px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.08), 0 14px 30px rgba(2, 8, 30, 0.28); font-family: "Open Sans", sans-serif; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 260ms, transform 260ms, visibility 0s 260ms; }
.ss-website-hero-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ss-website-hero-chip span { display: grid; line-height: 1.2; }
.ss-website-hero-chip b { font-size: 13px; color: #0B0D12; }
.ss-website-hero-chip small { font-size: 11px; color: #6B7280; }
.ss-website-hero-chip i { width: 8px; height: 8px; margin-inline-start: 4px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.ss-website-hero-media:is([data-state="assembling"], [data-state="live"], [data-state="static"])[data-scene="b"] .ss-website-hero-chip { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms 900ms, transform 520ms var(--ss-ease-out) 900ms, visibility 0s 900ms; }
.ss-website-mega__swap { display: inline-grid; justify-items: end; }
.ss-website-mega__swap > * { grid-area: 1 / 1; }
.ss-website-mega__swap > :first-child { opacity: 0; }
/* Connectors (measured in JS; only between related elements). */
.ss-website-hero-links { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ss-website-hero-links path { fill: none; stroke: rgba(125, 180, 230, 0.85); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ss-ease-out) 700ms; }
.ss-website-hero-links circle { fill: #4DA3EE; stroke: #FFFFFF; stroke-width: 2; opacity: 0; transition: opacity 300ms 1300ms; }
.ss-website-hero-links.is-drawn path { stroke-dashoffset: 0; }
.ss-website-hero-links.is-drawn circle { opacity: 1; }

/* Tablet: modules cross the edge less; no person chip. Phones: one module at a time inside. */
@media (max-width: 1279px) { .ss-website-hero-media { --ss-out: 3.5%; } }
@media (max-width: 1100px) { .ss-website-hero-media { --ss-out: -1.5%; } .ss-website-hero-chip { display: none; } }
@media (max-width: 767px) {
  .ss-website-hero-screen .ss-website-pui__scaled { --ss-view-w: 700; --ss-view-h: 394; }
  .ss-website-hero-links { display: none; }
  .ss-website-hero-float:not(.is-primary) { display: none; }
  /* Desktop idea kept: the module overlaps the screen and crosses its bottom edge (the frame
     reserves that overhang), so the dashboard behind stays readable as a dashboard. */
  .ss-website-hero-media { margin-bottom: 15%; }
  .ss-website-hero-float.is-primary { left: auto; right: -1%; top: auto; bottom: -15%; width: 56%; }
  .ss-website-hero-float--issue.is-primary { width: 56%; }
  .ss-website-hero-float__glass { padding: 4px; border-radius: 14px; }
  .ss-website-hero-float__glass > .ss-website-pui__scaled { border-radius: 10px; }
}

/* Assembly (≈2 s) on scene A, then quiet live motion: 1–3 small changes at a time. */
@media (prefers-reduced-motion: no-preference) {
  .ss-website-hero-media[data-state="assembling"] .ss-website-hero-screen--a .ss-website-pui__scaled { animation: ss-mega-frame 700ms var(--ss-ease-out) both; }
  .ss-website-hero-media[data-state="assembling"] .ss-website-hero-screen--a :is(.ss-website-pro-ui__rail, .ss-website-pro-ui__bar, .ss-website-pro-ui__band, .ss-website-pro-ui__cells, .ss-website-pro-ui__counters, .ss-website-hero-app__attention) { animation: ss-mega-rise 520ms var(--ss-ease-out) both; }
  .ss-website-hero-media[data-state="assembling"] .ss-website-pro-ui__rail { animation-name: ss-mega-slide !important; animation-delay: 200ms !important; }
  .ss-website-hero-media[data-state="assembling"] .ss-website-pro-ui__bar { animation-delay: 280ms !important; }
  .ss-website-hero-media[data-state="assembling"] .ss-website-pro-ui__band { animation-delay: 380ms !important; }
  .ss-website-hero-media[data-state="assembling"] .ss-website-pro-ui__cells { animation-delay: 480ms !important; }
  .ss-website-hero-media[data-state="assembling"] .ss-website-pro-ui__counters { animation-delay: 580ms !important; }
  .ss-website-hero-media[data-state="assembling"] .ss-website-hero-app__attention { animation-delay: 680ms !important; }
  .ss-website-hero-media[data-state="live"] .ss-website-mega__swap > :first-child { animation: ss-mega-swap-out 5.5s var(--ss-ease-in-out) infinite; }
  .ss-website-hero-media[data-state="live"] .ss-website-mega__swap > :last-child { animation: ss-mega-swap-in 5.5s var(--ss-ease-in-out) infinite; }
  .ss-website-hero-media[data-state="live"][data-scene="c"] .ss-website-hero-float--milestone .ss-website-lite-ui__ring-fill { animation: ss-mega-ring 5.5s var(--ss-ease-in-out) infinite; }
  .ss-website-hero-media[data-state="live"][data-scene="c"] .ss-website-hero-float--milestone .ss-website-pui__from { animation: ss-mega-from 5.5s var(--ss-ease-in-out) infinite; }
  .ss-website-hero-media[data-state="live"][data-scene="c"] .ss-website-hero-float--milestone .ss-website-pui__to { animation: ss-mega-to 5.5s var(--ss-ease-in-out) infinite; }
  .ss-website-hero-media[data-state="live"][data-scene="b"] .ss-website-hero-screen--b .ss-website-pro-ui__line--forecast { stroke-dasharray: 1000; animation: ss-mega-draw-in 1400ms var(--ss-ease-out) 300ms both; }
  .ss-website-hero-media[data-state="live"] .ss-website-hero-chip i { animation: ss-mega-pulse 2.4s var(--ss-ease-in-out) infinite; }
  .ss-website-hero-media[data-state="live"][data-scene="b"] .ss-website-hero-float--model .ss-website-art--model > svg g { animation: ss-mega-bob 2.8s var(--ss-ease-in-out) infinite; }
  .ss-website-hero-media[data-state="live"][data-scene="c"] .ss-website-hero-screen--c [data-ss-hero-anchor="issues"] { animation: ss-mega-focus 5.5s var(--ss-ease-in-out) infinite; }
}
.ss-website-hero-media.is-paused *, .ss-website-hero-media.is-paused { animation-play-state: paused !important; }
@keyframes ss-mega-frame { from { opacity: 0; transform: scale(0.96); } }
@keyframes ss-mega-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes ss-mega-slide { from { opacity: 0; transform: translateX(-16px); } }
@keyframes ss-mega-swap-out { 0%, 30% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes ss-mega-swap-in { 0%, 30% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes ss-mega-ring { 0%, 30% { stroke-dasharray: 60 100; } 40%, 100% { stroke-dasharray: 80 100; } }
@keyframes ss-mega-from { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes ss-mega-to { 0%, 30% { opacity: 0; } 34%, 100% { opacity: 1; } }
@keyframes ss-mega-draw-in { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes ss-mega-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); } 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.08); } }
@keyframes ss-mega-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ss-mega-focus { 0%, 20% { box-shadow: none; } 35%, 75% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35); } 100% { box-shadow: none; } }

/* Phones: headings use the width they have (no desktop measure caps that force 4-line stacks). */
@media (max-width: 767px) {
  .ss-website-flow__header .ss-website-title, .ss-website-region-light__copy .ss-website-title, .ss-website-clic__title { max-width: none; text-wrap: balance; }
  .ss-website-flow__header .ss-website-title { font-size: var(--ss-size-h2); }
}

@media (max-width: 767px) {
  .ss-website-film__title { font-size: var(--ss-size-h1); }
  .ss-website-film__body { font-size: var(--ss-size-body); }
  .ss-website-film__content { padding-block: calc(var(--ss-header-h) + 40px) 44px; gap: 14px; }
}

/* ==== ss-website-immersive.css ==== */
/* Immersive product chapter (home): One connected flow → SkyStruct Pro AI.
   A dark surface starts as an inset card inside the light page, widens to full bleed while the
   visitor is inside the chapter and contracts on the way out. Content keeps the 1280px measure.
   --ss-expand (0 inset … 1 full bleed) is set by immersive.js; static inset without motion. */
.ss-website-immersive {
  --ss-expand: 0;
  position: relative; isolation: isolate;
  padding-block: clamp(96px, 5rem + 4vw, 168px);
  color: var(--ss-text-inverse-1);
}
.ss-website-immersive__surface {
  --ss-edge: calc((100% - min(var(--ss-container), 100% - 2 * var(--ss-gutter))) / 2);
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background-color: var(--ss-color-night); background-image: var(--ss-grain); background-size: 180px;
  clip-path: inset(0 calc((1 - var(--ss-expand)) * var(--ss-edge)) round calc((1 - var(--ss-expand)) * var(--ss-radius-inset)));
}
.ss-website-immersive__glow { position: absolute; left: 50%; top: 0; width: min(1400px, 140vw); aspect-ratio: 1.6; translate: -50% -38%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 113, 206, 0.34), rgba(0, 54, 140, 0.12) 55%, transparent); }
.ss-website-immersive__glow--ai { top: 58%; width: min(1200px, 130vw); background: radial-gradient(closest-side, rgba(77, 163, 238, 0.2), rgba(0, 54, 140, 0.08) 55%, transparent); }
.ss-website-immersive .ss-website-title { color: var(--ss-color-white); }
.ss-website-immersive .ss-website-eyebrow { color: var(--ss-color-blue-bright); background: rgba(77, 163, 238, 0.1); border-color: rgba(77, 163, 238, 0.3); }
.ss-website-immersive__block + .ss-website-immersive__block { margin-top: clamp(120px, 6rem + 6vw, 220px); }

/* One connected flow: see ss-website-product-ui.css (product-UI compositions + approved steps). */

/* ---------- SkyStruct Pro AI: two product stories ---------- */
.ss-website-ai-story { display: grid; gap: clamp(28px, 1.5rem + 1.5vw, 48px); align-items: center; margin-top: clamp(56px, 3rem + 3vw, 112px); }
@media (min-width: 1024px) {
  .ss-website-ai-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 5vw, 96px); }
  .ss-website-ai-story--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ss-website-ai-story--reverse .ss-website-ai-story__copy { order: 2; }
}
.ss-website-ai-story__copy { display: grid; gap: var(--ss-space-4); justify-items: start; max-width: 480px; }
.ss-website-ai-story__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ss-size-eyebrow); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-color-blue-bright); }
.ss-website-ai-story__label .ss-website-icon { width: 18px; height: 18px; }
.ss-website-ai-story__body { color: var(--ss-text-inverse-2); font-size: var(--ss-size-lead, 1.125rem); line-height: 1.6; }
.ss-website-ai-story__visual { position: relative; }
.ss-website-ai-story__visual::before { content: ""; position: absolute; inset: 10% 6% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 113, 206, 0.4), transparent); filter: blur(34px); }
.ss-website-ai-note { max-width: 760px; margin: clamp(56px, 3rem + 2vw, 88px) auto 0; text-align: center; font-size: var(--ss-size-micro); line-height: 1.6; color: var(--ss-text-inverse-3); }

/* ==== ss-website-product-ui.css ==== */
/* SkyStruct product-UI visual system (site-wide).
     0. Tokens          product spacing + display-frame material
     1. Display frame   .ss-website-display — glass presentation object (hero · product · feature · mini)
     2. Composition     .ss-website-pui — stage, overlays, personas, product-level scaling
     3. Product skins   .ss-website-lite-ui / .ss-website-pro-ui — literal product colours and type
     4. Shared blocks   .ss-website-ui-* — head, tabs, rows, fields, metrics, progress, bars, steps …
     5. Specific scenes workspaces, handover, register, forecast, support, region
     6. Placements      flow map, page slots, responsive
     7. Motion          seamless loops (JS + motion allowed + on screen); default = final state
   Glass is used only for the presentation frame, its label and selected marketing overlays —
   never for the product UI inside. */

/* ===================== 0. Tokens ===================== */
:root {
  --ss-product-space-xs: 6px;
  --ss-product-space-sm: 10px;
  --ss-product-space-md: 16px;
  --ss-product-space-lg: 24px;
  --ss-product-space-xl: 36px;
}
.ss-website-display {
  --ss-display-pad: 14px;
  --ss-display-radius: 24px;
  --ss-display-blur: 18px;
  --ss-display-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.4));
  --ss-display-border: rgba(255, 255, 255, 0.95);
  --ss-display-edge: rgba(11, 13, 18, 0.07);
  --ss-display-highlight: inset 1px 1px 0 rgba(255, 255, 255, 0.95), inset -1px -1px 0 rgba(11, 13, 18, 0.05);
  --ss-display-shadow: 0 2px 6px rgba(11, 13, 18, 0.04), 0 30px 80px rgba(11, 13, 18, 0.13);
  --ss-display-sheen: linear-gradient(125deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 32%);
  --ss-display-glow: rgba(0, 113, 206, 0.16);
  --ss-display-inner-shadow: 0 0 0 1px rgba(11, 13, 18, 0.07), 0 10px 30px rgba(11, 13, 18, 0.08);
}
/* Dark environments: a darker, clearer glass. */
:is(.ss-website-immersive, .ss-website-duo__layer--pro, .ss-website-section--dark, .ss-website-inset) .ss-website-display {
  --ss-display-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035));
  --ss-display-border: rgba(255, 255, 255, 0.16);
  --ss-display-edge: rgba(0, 0, 0, 0.3);
  --ss-display-highlight: inset 1px 1px 0 rgba(255, 255, 255, 0.28), inset -1px -1px 0 rgba(0, 0, 0, 0.28);
  --ss-display-shadow: 0 40px 110px rgba(0, 0, 0, 0.5);
  --ss-display-sheen: linear-gradient(125deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 34%);
  --ss-display-inner-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 40px rgba(0, 0, 0, 0.35);
}
.ss-website-display--glow-blue { --ss-display-tint: 0, 113, 206; }
.ss-website-display--glow-violet { --ss-display-tint: 123, 97, 255; }
.ss-website-display--glow-amber { --ss-display-tint: 255, 176, 32; }
.ss-website-display--glow-green { --ss-display-tint: 18, 184, 134; }
.ss-website-display--glow-coral { --ss-display-tint: 255, 106, 85; }
.ss-website-display--glow-neutral { --ss-display-tint: 138, 153, 172; }
.ss-website-display--hero { --ss-display-pad: 20px; --ss-display-radius: 30px; }
.ss-website-display--product { --ss-display-pad: 16px; --ss-display-radius: 26px; }
.ss-website-display--feature { --ss-display-pad: 12px; --ss-display-radius: 22px; }
.ss-website-display--mini { --ss-display-pad: 7px; --ss-display-radius: 16px; --ss-display-blur: 12px; }

/* ===================== 1. Display frame ===================== */
.ss-website-display { position: relative; isolation: isolate; }
/* Environmental light: a soft local glow picked up by the glass. */
.ss-website-display::before { content: ""; position: absolute; inset: 6% 4% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ss-display-tint, 0, 113, 206), 0.22), transparent 72%); filter: blur(34px); pointer-events: none; }
.ss-website-display__glass {
  position: relative; padding: var(--ss-display-pad); border-radius: var(--ss-display-radius);
  background: var(--ss-display-bg); border: 1px solid var(--ss-display-border);
  box-shadow: var(--ss-display-highlight), 0 0 0 1px var(--ss-display-edge), var(--ss-display-shadow);
  -webkit-backdrop-filter: blur(var(--ss-display-blur)) saturate(140%); backdrop-filter: blur(var(--ss-display-blur)) saturate(140%);
}
/* Refraction sheen across the upper-left of the glass. */
.ss-website-display__glass::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: var(--ss-display-sheen); pointer-events: none; }
.ss-website-display__inner { position: relative; overflow: hidden; border-radius: calc(var(--ss-display-radius) - var(--ss-display-pad)); box-shadow: var(--ss-display-inner-shadow); }
.ss-website-display__label { position: absolute; top: -14px; left: 22px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: var(--ss-radius-pill); font-size: 12px; font-weight: 600; color: var(--ss-text-1); background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.06), 0 8px 20px rgba(11, 13, 18, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ss-website-display__label i { width: 7px; height: 7px; border-radius: 50%; background: #0071CE; }
:is(.ss-website-immersive, .ss-website-duo__layer--pro) .ss-website-display__label { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
@media (prefers-reduced-transparency: reduce) { .ss-website-display__glass, .ss-website-display__label { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ===================== 2. Composition ===================== */
.ss-website-pui { position: relative; margin: 0; padding: 0 28px 44px; --ss-loop: 10s; }
.ss-website-pui__stage { position: relative; text-align: left; }
.ss-website-pui__window { position: relative; background: #FFFFFF; }
.ss-website-pui__body { padding: var(--ss-product-space-lg); }
.ss-website-pui__card { position: absolute; z-index: 3; width: 260px; padding: 18px; border-radius: 16px; background: #FFFFFF; color: #111827; box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.06), 0 26px 60px rgba(11, 13, 18, 0.26); }
.ss-website-pui__card > * + * { margin-top: 12px !important; }
.ss-website-pui__card-label { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6B7280; }
.ss-website-pui__card--br { right: -24px; bottom: -36px; }
.ss-website-pui__card--bl { left: -24px; bottom: -36px; }
.ss-website-pui__card--tr { right: -24px; top: 20%; }
.ss-website-persona { display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #E5E7EB; }
.ss-website-pui__who { display: inline-flex; align-items: center; gap: 12px; }
.ss-website-pui__who b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: #111827; }
.ss-website-pui__who small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.3; color: #6B7280; }
/* Product-level workspaces: drawn at full size, scaled to the frame width. */
/* The visible window can be a crop of the workspace (--ss-view-w / --ss-view-h, top-left anchored):
   the workspace keeps its real layout and is shown at a larger, readable scale. */
.ss-website-pui__scaled { --ss-vw: var(--ss-view-w, var(--ss-w)); --ss-vh: var(--ss-view-h, var(--ss-h)); position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: var(--ss-vw) / var(--ss-vh); }
.ss-website-pui__scaled > * { position: absolute; top: 0; left: 0; width: calc(var(--ss-w) * 1px); height: calc(var(--ss-h) * 1px); transform-origin: 0 0; transform: scale(tan(atan2(100cqw, calc(var(--ss-vw) * 1px)))); }
[dir="rtl"] .ss-website-pui__scaled > * { left: 0; right: auto; }
.ss-website-pui__swap { display: inline-grid; }
.ss-website-pui__swap > span { grid-area: 1 / 1; }
.ss-website-pui__from { opacity: 0; }

/* ===================== 3. Product skins ===================== */
.ss-website-lite-ui { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; letter-spacing: 0; color: #0F172A; -webkit-font-smoothing: antialiased; }
.ss-website-pro-ui { font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.45; letter-spacing: 0; color: #1F2430; }
:is(.ss-website-lite-ui, .ss-website-pro-ui) :is(p, ul, ol, li, dl, dd) { margin: 0; padding: 0; list-style: none; }
:is(.ss-website-lite-ui, .ss-website-pro-ui) small { display: block; }
:is(.ss-website-lite-ui, .ss-website-pro-ui) em { font-style: normal; }
:is(.ss-website-lite-ui, .ss-website-pro-ui) b { font-weight: 600; }
:is(.ss-website-lite-ui, .ss-website-pro-ui) .ss-website-icon { width: 16px; height: 16px; flex: none; }
/* Lite shell */
.ss-website-lite-ui__bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #FFFFFF; border-bottom: 1px solid #EEF2F6; }
.ss-website-lite-ui__mark { width: 30px; height: auto; margin-right: 4px; }
.ss-website-lite-ui__bar > b { font-size: 14px; font-weight: 700; white-space: nowrap; }
.ss-website-lite-ui__pill { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #FFFFFF; background: #2563EB; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28); white-space: nowrap; }
.ss-website-lite-ui__pill .ss-website-icon { width: 14px; height: 14px; }
.ss-website-lite-ui .ss-website-pui__body { background: #F8FAFC; }
/* Pro shell */
.ss-website-pro-ui.ss-website-pui__window { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.ss-website-pro-ui__rail { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 16px 0; background: #002052; color: rgba(255, 255, 255, 0.86); }
.ss-website-pro-ui__rail img { width: 28px; height: auto; margin-bottom: 6px; filter: brightness(0) invert(1); }
.ss-website-pro-ui__main { min-width: 0; background: #FFFFFF; }
.ss-website-pro-ui__bar { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid #EDEFF2; }
.ss-website-pro-ui__menu { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: #3A3F4A; background: #EEF2F8; }
.ss-website-pro-ui__bar > b { font-size: 14px; color: #2A2F3A; white-space: nowrap; }
.ss-website-pro-ui__tab { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; padding: 7px 13px; border-radius: 8px; font-size: 13px; color: #2F6CB0; background: #EEF4FB; white-space: nowrap; }
.ss-website-pro-ui__navtext { font-size: 13.5px; color: #4B5563; white-space: nowrap; }

/* ===================== 4. Shared blocks ===================== */
.ss-website-pui__body > * + * { margin-top: var(--ss-product-space-md) !important; }
/* Status chips: one vocabulary, two product shapes. */
.ss-website-ui-status { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 9px; border-radius: 6px; border: 1px solid; font-size: 10.5px; font-weight: 700; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.ss-website-pro-ui .ss-website-ui-status { padding: 5px 11px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ss-website-pro-ui .ss-website-ui-status::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1.5px dashed currentColor; }
.ss-website-ui-status--done, .ss-website-ui-status--passed, .ss-website-ui-status--approved { color: #047857; background: #ECFDF5; border-color: #A7F3D0; }
.ss-website-pro-ui :is(.ss-website-ui-status--done, .ss-website-ui-status--passed, .ss-website-ui-status--approved) { color: #23874F; background: #ECF9F2; border-color: #A8E3C4; }
.ss-website-ui-status--pending, .ss-website-ui-status--review { color: #B45309; background: #FFFBEB; border-color: #FDE68A; }
.ss-website-pro-ui :is(.ss-website-ui-status--pending, .ss-website-ui-status--review) { color: #8A6A00; background: #FFF8DB; border-color: #F3DE8A; }
.ss-website-ui-status--progress { color: #1D4ED8; background: #EFF6FF; border-color: #BFDBFE; }
.ss-website-pro-ui .ss-website-ui-status--progress { color: #2F6CB0; background: #EEF4FB; border-color: #BCD3EE; }
.ss-website-ui-status--open { color: #334155; background: #F8FAFC; border-color: #CBD5E1; }
.ss-website-ui-status--medium { color: #92400E; background: #FEF3C7; border-color: #FCD34D; }
.ss-website-ui-status--behind { padding: 6px 14px; border-radius: 999px; color: #DC2626; background: #FEF2F2; border-color: #FCA5A5; }
.ss-website-ui-status--behind::before { display: none; }
/* Tones (dots, metrics, progress bars). */
.ss-website-ui-tone--blue { --ss-tone: #2563EB; --ss-tone-soft: #EFF6FF; }
.ss-website-ui-tone--green { --ss-tone: #10B981; --ss-tone-soft: #ECFDF5; }
.ss-website-ui-tone--amber { --ss-tone: #F59E0B; --ss-tone-soft: #FFFBEB; }
.ss-website-ui-tone--red { --ss-tone: #E11D48; --ss-tone-soft: #FEF2F2; }
.ss-website-ui-tone--violet { --ss-tone: #8B5CF6; --ss-tone-soft: #F5F3FF; }
.ss-website-ui-tone--slate { --ss-tone: #64748B; --ss-tone-soft: #F1F5F9; }
/* Head */
.ss-website-ui-head { display: flex; align-items: center; gap: 14px; }
.ss-website-ui-head__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: #2563EB; background: #EFF6FF; }
.ss-website-pro-ui .ss-website-ui-head__icon { color: #2F6CB0; background: #EEF4FB; }
.ss-website-ui-head__icon .ss-website-icon { width: 20px; height: 20px; }
.ss-website-ui-head__text { flex: 1; min-width: 0; }
.ss-website-ui-head__text b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.ss-website-ui-head__text small { margin-top: 2px; font-size: 13px; color: #64748B; }
/* Tabs */
.ss-website-ui-tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.ss-website-ui-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; color: #475569; white-space: nowrap; }
.ss-website-ui-tabs .is-active { color: #1D4ED8; background: #EFF6FF; font-weight: 600; }
.ss-website-pro-ui .ss-website-ui-tabs { gap: 4px; margin-inline: calc(var(--ss-product-space-lg) * -1); padding: 0 var(--ss-product-space-md); border-bottom: 1px solid #E6E6E6; }
.ss-website-pro-ui .ss-website-ui-tabs span { padding: 10px 12px; border-radius: 0; border-bottom: 2px solid transparent; }
.ss-website-pro-ui .ss-website-ui-tabs .is-active { color: #2C6DB0; background: none; border-bottom-color: #2C6DB0; }
.ss-website-ui-tabs i { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10px; font-style: normal; font-weight: 700; color: #4B5563; background: #EEF1F6; }
.ss-website-ui-tabs .is-active i { color: #FFFFFF; background: #2C6DB0; }
/* Rows */
.ss-website-ui-rows { display: grid; gap: var(--ss-product-space-sm); }
.ss-website-ui-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px !important; border-radius: 12px; background: #FFFFFF; border: 1px solid #E5E7EB; }
.ss-website-pro-ui .ss-website-ui-row { border-radius: 10px; border-color: #E4E4E4; }
.ss-website-ui-row__text { flex: 1; min-width: 0; }
.ss-website-ui-row__text b { display: block; font-size: 14px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-website-ui-row__text small { margin-top: 3px; font-size: 12.5px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-website-ui-row__value { flex: none; font-size: 14px; font-weight: 700; color: #0F172A; }
.ss-website-ui-row--focus { border-color: #93C5FD; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }
.ss-website-pro-ui .ss-website-ui-row--focus { border-color: #7FA9DA; background: #F7FAFE; box-shadow: 0 0 0 4px rgba(47, 108, 176, 0.1); }
.ss-website-ui-row--done { background: #F3FBF8; border-color: #D1F0E4; }
.ss-website-ui-row--done .ss-website-ui-row__text b { color: #94A3B8; text-decoration: line-through; text-decoration-color: #94A3B8; }
.ss-website-ui-lead { display: grid; place-items: center; flex: none; }
.ss-website-ui-lead--icon { width: 36px; height: 36px; border-radius: 10px; color: #475569; background: #F1F5F9; }
.ss-website-ui-lead--check { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #CBD5E1; color: transparent; }
.ss-website-ui-lead--check .ss-website-icon { width: 13px; height: 13px; stroke-width: 3; }
.ss-website-ui-row--done .ss-website-ui-lead--check { border-color: #10B981; color: #10B981; }
.ss-website-ui-lead--dot { width: 10px; height: 10px; margin-inline: 7px; border-radius: 50%; background: var(--ss-tone); box-shadow: 0 0 0 4px var(--ss-tone-soft); }
.ss-website-ui-row .ss-website-persona { width: 36px; height: 36px; }
/* Fields */
.ss-website-ui-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ss-product-space-sm); }
.ss-website-ui-fields div { min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid #E3E6EA; background: #FFFFFF; }
.ss-website-ui-fields dt { font-size: 11.5px; color: #6B7280; }
.ss-website-ui-fields dd { margin-top: 3px !important; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-website-ui-fields--list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ss-website-ui-fields--list div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; }
.ss-website-ui-fields--list dd { margin: 0 !important; font-size: 13px; }
/* Metrics */
.ss-website-ui-metrics { display: flex; flex-wrap: wrap; gap: var(--ss-product-space-sm); }
.ss-website-ui-metric { flex: 1 1 90px; padding: 12px 14px; border-radius: 12px; background: var(--ss-tone-soft); }
.ss-website-ui-metric small { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748B; }
.ss-website-ui-metric b { display: block; margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: #0F172A; }
/* Progress */
.ss-website-ui-progress { display: grid; gap: var(--ss-product-space-md); padding: 16px 18px !important; border-radius: 12px; background: #FFFFFF; border: 1px solid #E5E7EB; }
.ss-website-ui-progress span { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.ss-website-ui-progress b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-website-ui-progress em { font-weight: 700; color: #0F172A; }
.ss-website-ui-progress i { display: block; height: 7px; margin-top: 8px; border-radius: 4px; background: #F1F5F9; overflow: hidden; }
.ss-website-ui-progress s { display: block; height: 100%; border-radius: inherit; background: var(--ss-tone); text-decoration: none; transform-origin: left; }
/* Bars */
.ss-website-ui-bars { padding: 16px 18px !important; border-radius: 12px; background: #FFFFFF; border: 1px solid #E5E7EB; }
.ss-website-ui-bars__legend { display: flex; gap: 16px; font-size: 12px; color: #475569; }
.ss-website-ui-bars__key { display: inline-flex; align-items: center; gap: 6px; }
.ss-website-ui-bars__key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.ss-website-ui-bars__key--a::before, .ss-website-ui-bars__a { background: #2563EB; }
.ss-website-ui-bars__key--b::before, .ss-website-ui-bars__b { background: #10B981; }
.ss-website-pro-ui :is(.ss-website-ui-bars__key--a::before, .ss-website-ui-bars__a) { background: #1F6FB5; }
.ss-website-pro-ui :is(.ss-website-ui-bars__key--b::before, .ss-website-ui-bars__b) { background: #22C55E; }
.ss-website-ui-bars__plot { display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; height: 140px; margin-top: 14px; padding-top: 8px; border-bottom: 1px solid #E2E8F0; background: repeating-linear-gradient(to top, transparent 0 34px, #F1F5F9 34px 35px); }
.ss-website-ui-bars__group { display: grid; justify-items: center; gap: 8px; height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
.ss-website-ui-bars__cols { display: flex; align-items: flex-end; gap: 5px; height: 100%; }
.ss-website-ui-bars__cols i { display: block; width: 16px; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.ss-website-ui-bars__group small { margin-bottom: -26px; font-size: 11.5px; color: #64748B; }
.ss-website-ui-bars { padding-bottom: 36px !important; }
/* Chips */
.ss-website-ui-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-website-ui-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid #E5E7EB; font-size: 12.5px; color: #374151; background: #F8FAFC; }
.ss-website-ui-chips .ss-website-icon { width: 13px; height: 13px; }
.ss-website-ui-chips--ai li { color: #0A5C66; background: #E0F7FA; border-color: #B6ECF2; }
/* Photos */
.ss-website-ui-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--ss-product-space-sm); }
.ss-website-ui-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
/* Note */
.ss-website-ui-note { display: flex; align-items: center; gap: 10px; padding: 11px 14px !important; border-radius: 10px; font-size: 13px; }
.ss-website-ui-note--muted { color: #475569; background: #F1F5F9; }
.ss-website-ui-note--warn { font-weight: 600; color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; }
.ss-website-ui-note--warn .ss-website-icon { color: #D97706; }
.ss-website-ui-person { display: flex; }
/* Steps (lifecycle / workflow) */
.ss-website-ui-steps { display: grid; gap: 10px; }
.ss-website-ui-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px !important; border-radius: 12px; border: 1px solid #E5E7EB; background: #FFFFFF; }
.ss-website-ui-step b { display: block; font-size: 14px; }
.ss-website-ui-step small { font-size: 12.5px; color: #64748B; }
.ss-website-ui-step__mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #64748B; background: #F1F5F9; }
.ss-website-ui-step__mark .ss-website-icon { width: 14px; height: 14px; stroke-width: 3; }
.ss-website-ui-step--done .ss-website-ui-step__mark { color: #FFFFFF; background: #10B981; }
.ss-website-ui-step--progress .ss-website-ui-step__mark { color: #FFFFFF; background: #2F6CB0; }
.ss-website-ui-step--focus { border-color: #7FA9DA; box-shadow: 0 0 0 4px rgba(47, 108, 176, 0.1); }
/* Model (BIM) */
.ss-website-ui-model { position: relative; border-radius: 12px; background: linear-gradient(180deg, #F4F7FB, #E9EEF5); }
.ss-website-ui-model svg { display: block; width: 100%; height: auto; }
.ss-website-ui-model__plate { fill: rgba(47, 108, 176, 0.06); stroke: #94A9C6; stroke-width: 1; }
.ss-website-ui-model__edge { stroke: #94A9C6; stroke-width: 1; fill: none; }
.ss-website-ui-model__pick { fill: rgba(245, 158, 11, 0.32); stroke: #D97706; stroke-width: 1.5; }
.ss-website-ui-model__tag { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 6px; font-size: 12px; color: #2F6CB0; background: #FFFFFF; box-shadow: 0 0 0 1px #DCE3EE; }

/* ===================== 5. Specific scenes ===================== */
/* Lite workspace (960 × 560 design size) */
.ss-website-lite-ui--workspace { display: grid; grid-template-columns: 210px minmax(0, 1fr); background: #F8FAFC; }
.ss-website-lite-ui__side { display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; background: #FFFFFF; border-right: 1px solid #E2E8F0; }
.ss-website-lite-ui__side > img { width: 40px; height: auto; margin: 0 0 18px 10px; }
.ss-website-lite-ui__side > span { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: #334155; }
.ss-website-lite-ui__side > span .ss-website-icon { width: 18px; height: 18px; color: #64748B; }
.ss-website-lite-ui__side .is-active { color: #1D4ED8; background: #EFF6FF; font-weight: 600; }
.ss-website-lite-ui__side .is-active .ss-website-icon { color: #2563EB; }
.ss-website-lite-ui__side .ss-website-lite-ui__me { height: auto; margin-top: auto; padding: 16px 8px 0; border-top: 1px solid #EEF2F6; border-radius: 0; }
.ss-website-lite-ui__me b { display: block; font-size: 13.5px; }
.ss-website-lite-ui__me small { font-size: 12px; color: #94A3B8; }
.ss-website-lite-ui__canvas { display: flex; flex-direction: column; gap: 22px; padding: 30px; }
.ss-website-lite-ui__greeting { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px !important; border-radius: 16px; background: #F0F7FF; border: 1px solid #DBEAFE; }
.ss-website-lite-ui__greeting b { display: block; font-size: 23px; font-weight: 700; letter-spacing: -0.01em; }
.ss-website-lite-ui__greeting small { margin-top: 4px; font-size: 13.5px; color: #475569; }
.ss-website-lite-ui__greeting strong { font-size: 15px; }
.ss-website-lite-ui__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ss-website-lite-ui__metric { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E5E7EB; }
.ss-website-lite-ui__metric i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--ss-tone); background: var(--ss-tone-soft); }
.ss-website-lite-ui__metric b { display: block; font-size: 23px; font-weight: 700; line-height: 1.1; }
.ss-website-lite-ui__metric small { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #64748B; }
.ss-website-lite-ui__cards { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.ss-website-lite-ui__card { padding: 22px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E5E7EB; }
.ss-website-lite-ui__card-head { display: flex; justify-content: space-between; font-size: 16px; }
.ss-website-lite-ui__card-head em { font-size: 18px; font-weight: 700; color: #2563EB; }
.ss-website-lite-ui__card-sub { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #64748B; }
.ss-website-lite-ui__meter { display: block; height: 8px; margin-top: 20px; border-radius: 4px; background: #F1F5F9; }
.ss-website-lite-ui__meter i { display: block; width: 97%; height: 100%; border-radius: inherit; background: #2563EB; }
.ss-website-lite-ui__tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px !important; }
.ss-website-lite-ui__tally span { padding: 10px; border-radius: 10px; border: 1px solid #EEF2F6; text-align: center; }
.ss-website-lite-ui__tally small { font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: #475569; }
.ss-website-lite-ui__tally b { font-size: 16px; }
.ss-website-lite-ui__recent { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 !important; border-bottom: 1px solid #F1F5F9; }
.ss-website-lite-ui__recent b { display: block; font-size: 14px; }
.ss-website-lite-ui__recent small { font-size: 12px; color: #94A3B8; }
/* Pro workspace (1000 × 600 design size) */
.ss-website-pro-ui--workspace { display: grid; grid-template-columns: 60px minmax(0, 1fr); background: #F7F7F7; }
.ss-website-pro-ui--workspace .ss-website-pro-ui__bar { padding: 16px 24px; gap: 18px; }
.ss-website-pro-ui__page { display: flex; flex-direction: column; gap: 18px; padding: 24px; background: #F7F7F7; }
.ss-website-pro-ui__band { display: flex; align-items: center; gap: 16px; padding: 20px 26px; border-radius: 16px; color: #FFFFFF; background: linear-gradient(90deg, #14254A, #0F1E42); }
.ss-website-pro-ui__initials { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 10px; font-size: 16px; font-weight: 700; color: #FFFFFF; background: #28334F; border: 1px solid rgba(255, 255, 255, 0.16); }
.ss-website-pro-ui__band b { display: block; font-size: 19px; }
.ss-website-pro-ui__band small { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 13px; color: #C7CEDB; }
.ss-website-pro-ui__band .ss-website-ui-status { margin-left: 10px; color: #F3B23A; background: rgba(243, 178, 58, 0.12); border-color: #A57A1F; }
.ss-website-pro-ui__ring { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-left: auto; }
.ss-website-pro-ui__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ss-website-pro-ui__ring circle { fill: none; stroke: #2B3A5C; stroke-width: 8; }
.ss-website-pro-ui__ring .ss-website-pro-ui__ring-fill { stroke: #F2B33D; stroke-dasharray: 45 100; stroke-linecap: round; }
.ss-website-pro-ui__ring b { font-size: 16px; }
.ss-website-pro-ui__cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.25fr; border-radius: 16px; background: #FFFFFF; border: 1px solid #E6E6E6; }
.ss-website-pro-ui__cell { padding: 18px 22px; border-right: 1px solid #EFEFEF; }
.ss-website-pro-ui__cell > small { margin-bottom: 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8F98; }
.ss-website-pro-ui__cell > b { display: block; padding-top: 8px; font-size: 14.5px; }
.ss-website-pro-ui__days { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.ss-website-pro-ui__days span { flex: 1; padding: 12px; border-radius: 10px; text-align: center; color: #2E6DB4; background: #E8F1FF; }
.ss-website-pro-ui__days span + span { color: #DD8426; background: #FBF3DB; }
.ss-website-pro-ui__days b { display: block; font-size: 18px; font-weight: 700; }
.ss-website-pro-ui__days small { font-size: 11.5px; color: #8A8F98; }
.ss-website-pro-ui__counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ss-website-pro-ui__counter { padding: 20px 22px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E6E6E6; }
.ss-website-pro-ui__counter p { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px !important; font-size: 15px; }
.ss-website-pro-ui__counter p em { padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #2F6CB0; background: #EEF4FB; }
.ss-website-pro-ui__counter > span { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #F0F1F3; font-size: 13.5px; }
.ss-website-pro-ui__counter small { color: #6B7280; }
/* Product-level overlays */
.ss-website-pui__card--progress { right: -28px; bottom: -40px; width: 236px; }
.ss-website-lite-ui__ms-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.ss-website-lite-ui__ring { position: relative; display: grid; place-items: center; width: 100px; height: 100px; margin: 16px auto 4px !important; }
.ss-website-lite-ui__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ss-website-lite-ui__ring circle { fill: none; stroke: #E2E8F0; stroke-width: 9; }
.ss-website-lite-ui__ring .ss-website-lite-ui__ring-fill { stroke: #10B981; stroke-linecap: round; stroke-dasharray: 80 100; }
.ss-website-lite-ui__ring b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ss-website-lite-ui__ring-tasks { display: grid !important; justify-content: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748B; }
.ss-website-pui__activity { padding-top: 14px !important; border-top: 1px solid #EEF2F6; }
.ss-website-pui__card--request { right: -28px; bottom: -44px; width: 310px; padding: 0 0 18px; overflow: hidden; }
.ss-website-pui__card--request > * + * { margin-top: 14px !important; }
.ss-website-pro-ui__drawer-head { padding: 14px 18px !important; font-size: 14px; font-weight: 600; color: #FFFFFF; background: linear-gradient(90deg, #011B4C 55%, #0A2A63); }
.ss-website-pui__card--request .ss-website-ui-fields, .ss-website-pui__card--request .ss-website-pro-ui__detail-status { margin-inline: 18px; }
.ss-website-pro-ui__owners { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-inline: 18px !important; padding: 14px !important; border-radius: 12px; border: 1px solid #E3E6EA; background: #FAFBFC; }
.ss-website-pro-ui__owners > span > small { margin-bottom: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7280; }
.ss-website-pro-ui__owners .ss-website-pui__who { gap: 9px; }
.ss-website-pro-ui__owners .ss-website-persona { width: 32px; height: 32px; }
.ss-website-pro-ui__arrow { align-self: center; margin-top: 18px; color: #9AA1AC; }
.ss-website-pro-ui__detail-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: #6B7280; }
/* Handover (Lite) */
.ss-website-lite-ui__checks .ss-website-ui-row { min-height: 60px; }
.ss-website-lite-ui__checkrow--pending .ss-website-ui-lead--icon { color: #D97706; background: #FFFBEB; }
.ss-website-lite-ui__checkrow--pending small { color: #B45309; }
.ss-website-lite-ui__checkrow--passed .ss-website-ui-lead--icon { color: #059669; background: #ECFDF5; }
.ss-website-lite-ui__checkrow--passed small { color: #047857; }
.ss-website-lite-ui__checkrow[data-ss-anchor="issues"] { border-color: #FCD34D; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14); }
.ss-website-lite-ui__checkrow small { display: inline-block; padding: 0 4px; margin-left: -4px; border-radius: 4px; }
.ss-website-lite-ui__request { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 11px; border: 1px solid #E2E8F0; background: #F1F5F9; font-size: 14px; font-weight: 600; color: #5B6778; }
.ss-website-pui__card--issue { left: -36px; bottom: -44px; width: 280px; }
.ss-website-lite-ui__issue-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: #475569; }
.ss-website-lite-ui__issue-tags span { display: inline-flex; align-items: center; gap: 5px; }
.ss-website-lite-ui__issue-title { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.ss-website-lite-ui__assignee { display: block !important; padding: 12px 14px !important; border-radius: 12px; border: 1px solid #EEF2F6; background: #F8FAFC; }
.ss-website-lite-ui__assignee > small { margin-bottom: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #526072; }
/* Register (Pro) */
.ss-website-pro-ui__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ss-website-pro-ui__table th { padding: 12px 10px; border-bottom: 1px solid #E6E6E6; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; color: #6B7280; white-space: nowrap; }
.ss-website-pro-ui__table td { padding: 16px 10px; border-bottom: 1px solid #F0F1F3; white-space: nowrap; }
.ss-website-pro-ui__table tbody tr:last-child td { border-bottom: 0; }
.ss-website-pro-ui__owners-cell { display: inline-flex; align-items: center; gap: 6px; }
.ss-website-pro-ui__owners-cell .ss-website-persona { width: 30px; height: 30px; }
.ss-website-pro-ui__owners-cell .ss-website-icon { width: 12px; height: 12px; color: #9AA1AC; }
.ss-website-pro-ui__row--pick td { background: #F7FAFE; }
.ss-website-pro-ui__row--pick td:first-child { box-shadow: inset 3px 0 0 #2F6CB0; font-weight: 600; }
.ss-website-pui__card--context { left: -36px; bottom: -150px; width: 290px; }
.ss-website-pui--register { padding-bottom: 170px; }
.ss-website-pro-ui__ctx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ss-website-pro-ui__ctx-head b { font-size: 14.5px; }
.ss-website-pro-ui__ctx-head span { font-size: 12px; color: #6B7280; }
/* Forecast (Pro) */
.ss-website-pro-ui__kpis { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-bottom: var(--ss-product-space-md) !important; border-bottom: 1px solid #EEF0F3; }
.ss-website-pro-ui__kpi small { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7280; }
.ss-website-pro-ui__kpi b { display: block; margin-top: 2px; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.ss-website-pro-ui__kpis .ss-website-ui-status { margin-left: auto; }
.ss-website-pro-ui__chart { padding-top: var(--ss-product-space-sm); }
.ss-website-pro-ui__chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.ss-website-pro-ui__chart-head b { font-size: 15px; font-weight: 700; }
.ss-website-pro-ui__legend { display: flex; gap: 14px; font-size: 12px; color: #3D4452; }
.ss-website-pro-ui__legend i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }
.ss-website-pro-ui__legend i::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ss-series); }
.ss-website-pro-ui__legend--planned { --ss-series: #1F6FB5; } .ss-website-pro-ui__legend--actual { --ss-series: #22C55E; } .ss-website-pro-ui__legend--forecast { --ss-series: #F97316; }
.ss-website-pro-ui__plot { display: block; width: 100%; height: auto; margin-top: var(--ss-product-space-lg); overflow: visible; }
.ss-website-pro-ui__grid { stroke: #EEF0F3; stroke-width: 1; }
.ss-website-pro-ui__ylabel { font: 10px "Open Sans", sans-serif; fill: #8A8F98; text-anchor: end; }
.ss-website-pro-ui__xlabel { font: 10.5px "Open Sans", sans-serif; fill: #6B7280; text-anchor: middle; }
.ss-website-pro-ui__area { fill: rgba(31, 111, 181, 0.14); }
.ss-website-pro-ui__forecast-area { fill: rgba(249, 115, 22, 0.16); }
.ss-website-pro-ui__line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ss-website-pro-ui__line--planned { stroke: #1F6FB5; } .ss-website-pro-ui__line--actual { stroke: #22C55E; } .ss-website-pro-ui__line--forecast { stroke: #F97316; stroke-dasharray: 6 5; }
.ss-website-pui__ai-insight { position: absolute; z-index: 3; right: -28px; top: 44%; width: 300px; }
.ss-website-pui__insight-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: #5B3FE0; background: #EFECFF; }
/* Support Copilot (Pro) */
.ss-website-pro-ui__copilot { display: flex; align-items: center; gap: 12px; padding-bottom: var(--ss-product-space-md) !important; border-bottom: 1px solid #EEF0F3; }
.ss-website-pro-ui__copilot b { display: block; font-size: 14px; }
.ss-website-pro-ui__copilot small { font-size: 12px; color: #6B7280; }
.ss-website-pro-ui__support-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; color: #0A7380; background: #E0F7FA; }
.ss-website-pro-ui__thread { padding-top: var(--ss-product-space-sm); }
.ss-website-pro-ui__ask { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.ss-website-pro-ui__ask span { padding: 12px 18px; border-radius: 16px 16px 4px 16px; font-size: 14.5px; background: #EEF1F6; }
.ss-website-pro-ui__answer { margin-top: var(--ss-product-space-lg); }
.ss-website-pro-ui__author { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.ss-website-pro-ui__author .ss-website-pro-ui__support-icon { width: 26px; height: 26px; }
.ss-website-pro-ui__answer-title { margin: 10px 0 14px !important; font-size: 17px; font-weight: 600; }
.ss-website-pro-ui__steps { display: grid; gap: var(--ss-product-space-sm); }
.ss-website-pro-ui__step { padding: 13px 16px !important; border-radius: 12px; border: 1px solid #E3E6EA; }
.ss-website-pro-ui__step b { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ss-website-pro-ui__step b span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; background: #EEF1F6; }
.ss-website-pro-ui__step small { margin-top: 5px; padding-left: 32px; font-size: 12.5px; line-height: 1.5; color: #4B5563; }
.ss-website-pro-ui__step--focus { border-color: #B9AEFF; background: #F7F5FF; box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.12); }
.ss-website-pro-ui__step--focus b span { color: #FFFFFF; background: #7B61FF; }
.ss-website-pui__card--step { right: -28px; bottom: -110px; width: 300px; padding: 20px; }
.ss-website-pui--support { padding-bottom: 130px; }
.ss-website-pro-ui__step-head { display: flex; align-items: center; gap: 10px; }
.ss-website-pro-ui__step-head span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #FFFFFF; background: #7B61FF; }
.ss-website-pro-ui__step-head b { font-size: 16px; }

/* ===================== 6. Placements ===================== */
/* Feature / mini moments: overlays a little smaller; mini has no overlays and tighter bodies. */
.ss-website-pui--feature .ss-website-pui__card { width: 248px; }
.ss-website-pui--mini { padding: 0; }
.ss-website-pui--mini .ss-website-pui__body { padding: var(--ss-product-space-md); }
.ss-website-pui--mini .ss-website-pui__body > * + * { margin-top: var(--ss-product-space-sm) !important; }
.ss-website-pui--mini .ss-website-ui-row { min-height: 48px; padding: 10px 12px !important; }
.ss-website-pui--mini .ss-website-lite-ui__bar, .ss-website-pui--mini .ss-website-pro-ui__bar { padding: 10px 14px; }
.ss-website-pui--mini .ss-website-pro-ui.ss-website-pui__window { grid-template-columns: 36px minmax(0, 1fr); }
.ss-website-pui--mini .ss-website-pro-ui__rail { gap: 14px; }
.ss-website-pui--mini .ss-website-pro-ui__rail span:nth-of-type(n + 4) { display: none; }
.ss-website-pui--mini .ss-website-ui-photos img:nth-child(n + 3) { display: none; }
/* Product-level heroes and intros. */
.ss-website-pui--product { width: min(100%, 680px); margin-inline: auto; }
.ss-website-pui--handover, .ss-website-pui--register { width: min(100%, 620px); margin-inline: auto; }

/* One connected flow: steps left and right, composition centre, connectors between. */
.ss-website-showcase__switch { display: flex; justify-content: center; margin-top: var(--ss-space-6); }
.ss-website-showcase__stage { display: grid; margin-top: clamp(40px, 2rem + 2.5vw, 72px); }
.ss-website-showcase__tier { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 240ms var(--ss-ease-out), visibility 0s linear 240ms; }
.ss-website-showcase__tier.is-active { opacity: 1; visibility: visible; transition: opacity 240ms var(--ss-ease-out); }
.ss-website-flowmap { position: relative; display: grid; gap: 28px; }
.ss-website-flowmap__lines { display: none; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ss-website-flowmap__lines path { fill: none; stroke: rgba(176, 196, 222, 0.32); stroke-width: 1.25; stroke-linecap: round; transition: stroke 220ms, stroke-width 220ms; }
.ss-website-flowmap__lines path.is-active { stroke: #7DB4E6; stroke-width: 1.75; }
.ss-website-flowmap__lines.is-drawing path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ss-flow-draw 520ms var(--ss-ease-out) forwards; }
@keyframes ss-flow-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ss-website-flowmap__lines.is-drawing path { animation: none; stroke-dasharray: none; } }
.ss-website-flowmap__lines circle { fill: #0B1530; stroke: rgba(176, 196, 222, 0.7); stroke-width: 1.5; transition: fill 220ms, stroke 220ms; }
.ss-website-flowmap__lines circle.is-active { fill: #7DB4E6; stroke: #FFFFFF; }
.ss-website-flowmap__item { transition: border-color 220ms, background-color 220ms; }
.ss-website-flowmap__item.is-active { border-color: rgba(125, 180, 230, 0.5); background: rgba(125, 180, 230, 0.07); }
.ss-website-flowmap__center { position: relative; z-index: 1; min-width: 0; }
.ss-website-flowmap__side { position: relative; z-index: 3; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; align-content: center; }
.ss-website-flowmap__item { display: grid; gap: 5px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.1); }
.ss-website-flowmap__icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 4px; border-radius: 10px; color: #FFFFFF; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); }
.ss-website-flowmap__icon .ss-website-icon { width: 15px; height: 15px; }
.ss-website-flowmap__eyebrow { display: flex; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-inverse-2); }
.ss-website-flowmap__eyebrow span { color: var(--ss-text-inverse-3); font-variant-numeric: tabular-nums; }
.ss-website-flowmap__title { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #FFFFFF; }
.ss-website-flowmap__body { font-size: 13px; line-height: 1.5; color: var(--ss-text-inverse-2); }
/* 3-column map + connectors from 1180px (keep in sync with `wide` in ss-website-product-ui.js). */
@media (min-width: 1180px) {
  .ss-website-flowmap { grid-template-columns: minmax(220px, 1fr) minmax(500px, 640px) minmax(220px, 1fr); column-gap: clamp(36px, 4vw, 72px); align-items: center; }
  .ss-website-flowmap__lines { display: block; }
  .ss-website-flowmap__side--start { justify-items: end; }
  .ss-website-flowmap__side--end { justify-items: start; }
  .ss-website-flowmap__side .ss-website-flowmap__item { width: min(100%, 290px); }
}
.ss-website-flowmap__steps { display: contents; }
.ss-website-flowmap .ss-website-carousel-nav { grid-column: 1 / -1; }
@media (min-width: 1180px) {
  .ss-website-flowmap__side--start { grid-area: 1 / 1; }
  .ss-website-flowmap__center { grid-area: 1 / 2; }
  .ss-website-flowmap__side--end { grid-area: 1 / 3; }
}
/* Below 1180px: the screen, then ONE active step (carousel); the screen zooms onto that step's
   panel. No connectors. */
@media (max-width: 1179px) {
  .ss-website-flowmap { gap: 16px; }
  .ss-website-flowmap__center { width: min(100%, 640px); margin-inline: auto; }
  .ss-website-flowmap__steps { display: flex; gap: 12px; }
  .ss-website-flowmap__steps .ss-website-flowmap__side { display: contents; }
  .ss-website-flowmap__steps.is-carousel .ss-website-flowmap__item { --ss-slide: 100%; flex: 0 0 100%; max-width: none; scroll-snap-align: start; scroll-snap-stop: always; }
  .ss-website-flowmap .ss-website-carousel-nav { width: min(100%, 640px); margin: 0 auto; }
  .ss-website-flowmap__steps.is-carousel { width: min(100%, 640px); margin-inline: auto; }
  .ss-website-flowui { overflow: hidden; border-radius: 12px; }
  .ss-website-flowui > .ss-website-pui__scaled { transition: transform 620ms var(--ss-ease-in-out); transform-origin: var(--ss-fx, 50%) var(--ss-fy, 50%); }
  .ss-website-flowui.is-focusing > .ss-website-pui__scaled { transform: scale(1.16); }
  .ss-website-flowui [data-ss-anchor] { transition: box-shadow 320ms var(--ss-ease-out), opacity 320ms; }
  .ss-website-flowui.is-focusing [data-ss-anchor]:not(.is-focus) { opacity: 0.55; }
  .ss-website-flowui [data-ss-anchor].is-focus { box-shadow: 0 0 0 2px #2563EB, 0 10px 24px rgba(37, 99, 235, 0.22); }
}
@media (max-width: 1179px) and (prefers-reduced-motion: reduce) { .ss-website-flowui > .ss-website-pui__scaled { transition: none; } }

/* Tablet: fewer peripheral overhangs. */
@media (max-width: 1023px) {
  .ss-website-pui { padding: 0 18px 36px; }
  .ss-website-pui__card { --ss-shift: -16px; }
}
/* Shared fit: a composition narrower than its design width (data-ss-fit) is drawn at that width
   and scaled as one picture — layout, overlaps and overlays intact, height reserved at scale.
   UI text may become small on phones: the website copy carries the message. (JS: product-ui.js) */
[data-ss-fit] { min-width: 0; max-width: 100%; }
[data-ss-fit].is-fit { position: relative; padding: 0; }
[data-ss-fit].is-fit > :first-child { position: absolute; top: 0; left: 0; width: calc(var(--ss-fit-w) * 1px); transform: scale(var(--ss-fit, 1)); transform-origin: 0 0; }
.ss-website-pui.is-fit > .ss-website-pui__stage { padding: 0 28px 44px; }
.ss-website-pui.is-fit .ss-website-pui__card { --ss-shift: 0px; }
@media (max-width: 639px) {
  .ss-website-display { --ss-display-blur: 10px; }
}

/* ===================== 7. Motion: seamless ambient loops =====================
   State A → interaction → State B → hold → soft reset. Overlays fade before anything resets. */
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-pui * { animation-duration: var(--ss-loop); animation-timing-function: var(--ss-ease-in-out); animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; animation-delay: calc(var(--ss-loop) * -0.17); }
  .ss-website-js .ss-website-pui.is-live * { animation-play-state: running; }
}
@keyframes ss-pui-card { 0%, 14% { opacity: 0; transform: translateY(14px); } 22%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes ss-pui-slide { 0%, 14% { opacity: 0; transform: translate(18px, 10px); } 22%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translate(18px, 10px); } }
@keyframes ss-pui-focus { 0%, 6% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } 12%, 88% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); } 96%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } }
@keyframes ss-pui-grow { 0%, 4% { transform: scaleX(0.25); } 22%, 88% { transform: none; } 97%, 100% { transform: scaleX(0.25); } }
@keyframes ss-pui-rise { 0%, 4% { transform: scaleY(0.2); } 22%, 88% { transform: none; } 97%, 100% { transform: scaleY(0.2); } }
@keyframes ss-pui-ring { 0%, 26% { stroke-dasharray: 60 100; } 36%, 88% { stroke-dasharray: 80 100; } 97%, 100% { stroke-dasharray: 60 100; } }
@keyframes ss-pui-from { 0%, 28% { opacity: 1; } 32%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes ss-pui-to { 0%, 28% { opacity: 0; } 32%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ss-pui-late { 0%, 32% { opacity: 0; transform: translateY(6px); } 40%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; } }
@keyframes ss-pui-owner { 0%, 30% { box-shadow: none; } 36%, 50% { box-shadow: 0 0 0 4px rgba(47, 108, 176, 0.16); } 58%, 100% { box-shadow: none; } }
@keyframes ss-pui-pop { 0%, 52% { transform: none; } 57% { transform: scale(1.08); } 64%, 100% { transform: none; } }
@keyframes ss-pui-mark { 0%, 40% { background: transparent; } 46%, 56% { background: #FEF3C7; } 64%, 100% { background: transparent; } }
@keyframes ss-pui-draw { 0%, 12% { clip-path: inset(0 100% 0 0); opacity: 1; } 32%, 86% { clip-path: inset(0 0 0 0); opacity: 1; } 93% { clip-path: inset(0 0 0 0); opacity: 0; } 96%, 100% { clip-path: inset(0 100% 0 0); opacity: 1; } }
@keyframes ss-pui-fade { 0%, 26% { opacity: 0; } 36%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes ss-pui-pulse { 0%, 38% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } 44% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.14); } 52%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@keyframes ss-pui-insight { 0%, 46% { opacity: 0; transform: translateY(12px); } 54%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(12px); } }
@keyframes ss-pui-ask { 0%, 3% { opacity: 0; transform: translateY(8px); } 9%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes ss-pui-answer { 0%, 12% { opacity: 0; transform: translateY(6px); } 18%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ss-pui-violet { 0%, 30% { box-shadow: 0 0 0 0 rgba(123, 97, 255, 0); } 36%, 90% { box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.12); } 96%, 100% { box-shadow: 0 0 0 0 rgba(123, 97, 255, 0); } }
@keyframes ss-pui-expand { 0%, 40% { opacity: 0; transform: translate(-14px, -12px) scale(0.95); } 48%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translate(-14px, -12px) scale(0.95); } }
@media (prefers-reduced-motion: no-preference) {
  /* Shared: focused moments — the supporting card enters, holds, leaves; data grows in. */
  .ss-website-js .ss-website-pui--moment .ss-website-pui__card { animation-name: ss-pui-card; }
  .ss-website-js .ss-website-pui--moment .ss-website-ui-row--focus { animation-name: ss-pui-focus; }
  .ss-website-js .ss-website-pui--moment .ss-website-ui-progress s { animation-name: ss-pui-grow; }
  .ss-website-js .ss-website-pui--moment .ss-website-ui-bars__cols i { animation-name: ss-pui-rise; }
  /* Lite product + family: a task completes and the milestone moves 60% → 80%. */
  .ss-website-js .ss-website-pui :is(.ss-website-pui__card--progress) { animation-name: ss-pui-card; }
  .ss-website-js .ss-website-pui .ss-website-lite-ui__ring-fill { animation-name: ss-pui-ring; }
  .ss-website-js .ss-website-pui .ss-website-pui__from { animation-name: ss-pui-from; }
  .ss-website-js .ss-website-pui .ss-website-pui__to { animation-name: ss-pui-to; }
  .ss-website-js .ss-website-pui .ss-website-pui__activity { animation-name: ss-pui-late; }
  /* Pro product + family: the request detail arrives, ownership highlights, Approved settles. */
  .ss-website-js .ss-website-pui .ss-website-pui__card--request { animation-name: ss-pui-slide; }
  .ss-website-js .ss-website-pui .ss-website-pro-ui__owners { animation-name: ss-pui-owner; }
  .ss-website-js .ss-website-pui .ss-website-pui__card--request .ss-website-pro-ui__detail-status .ss-website-ui-status { animation-name: ss-pui-pop; }
  /* Handover: the open issue surfaces with its owner; the pending check is marked. */
  .ss-website-js .ss-website-pui--handover .ss-website-pui__card--issue { animation-name: ss-pui-card; }
  .ss-website-js .ss-website-pui--handover .ss-website-lite-ui__assignee { animation-name: ss-pui-late; }
  .ss-website-js .ss-website-pui--handover [data-ss-anchor="issues"] small { animation-name: ss-pui-mark; }
  /* Register: the selected submittal opens its linked context. */
  .ss-website-js .ss-website-pui--register .ss-website-pui__card--context { animation-name: ss-pui-card; }
  .ss-website-js .ss-website-pui--register .ss-website-pro-ui__row--pick .ss-website-ui-status { animation-name: ss-pui-pop; }
  /* Forecast: the forecast line draws, Behind Plan pulses once, the insight arrives. */
  .ss-website-js .ss-website-pui--forecast { --ss-loop: 11s; }
  .ss-website-js .ss-website-pui--forecast .ss-website-pro-ui__line--forecast { animation-name: ss-pui-draw; }
  .ss-website-js .ss-website-pui--forecast .ss-website-pro-ui__forecast-area { animation-name: ss-pui-fade; }
  .ss-website-js .ss-website-pui--forecast .ss-website-ui-status--behind { animation-name: ss-pui-pulse; }
  .ss-website-js .ss-website-pui--forecast .ss-website-pui__ai-insight { animation-name: ss-pui-insight; }
  /* Support: question → answer → step 3 in focus → expanded step. */
  .ss-website-js .ss-website-pui--support { --ss-loop: 11s; }
  .ss-website-js .ss-website-pui--support .ss-website-pro-ui__ask { animation-name: ss-pui-ask; }
  .ss-website-js .ss-website-pui--support :is(.ss-website-pro-ui__author, .ss-website-pro-ui__answer-title, .ss-website-pro-ui__step) { animation-name: ss-pui-answer; }
  .ss-website-js .ss-website-pui--support .ss-website-pro-ui__step:nth-child(2) { animation-delay: calc(var(--ss-loop) * -0.17 + 140ms); }
  .ss-website-js .ss-website-pui--support .ss-website-pro-ui__step--focus { animation-name: ss-pui-answer, ss-pui-violet; animation-delay: calc(var(--ss-loop) * -0.17 + 280ms), calc(var(--ss-loop) * -0.17); }
  .ss-website-js .ss-website-pui--support .ss-website-pui__card--step { animation-name: ss-pui-expand; }
}

/* ===================== 8. Capability personality: scenes + artifacts =====================
   Variety inside, consistency outside: the glass frame, spacing and type stay shared; the artifact
   (drawing, model, photo, people, money, risk, flow, map) tells you the capability at a glance. */
.ss-website-pui__scene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 420px; overflow: hidden; background: #F3F6FA; }
:is(.ss-website-immersive, .ss-website-pro-dark, .ss-website-section--dark) .ss-website-pui__scene { background: #E9EEF5; }
.ss-website-pui__scene > .ss-website-pui__window { position: relative; z-index: 1; min-width: 0; align-self: center; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.08), 0 26px 60px rgba(11, 13, 18, 0.24); }
/* back: the artifact fills the scene; the window floats over its right side. */
.ss-website-pui__scene--back > .ss-website-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-website-pui__scene--back > .ss-website-pui__window { margin: 56px 20px 28px 22%; }
/* corner: the artifact stays the subject (drawing, model); a compact window sits bottom-right. */
.ss-website-pui__scene--corner { min-height: 460px; }
.ss-website-pui__scene--corner > .ss-website-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-website-pui__scene--corner > .ss-website-pui__window { align-self: end; justify-self: end; width: min(62%, 400px); margin: 120px 18px 18px 0; }
/* split: the artifact owns the left column; the window overlaps it from the right. */
.ss-website-pui__scene--split { grid-template-columns: minmax(0, 50%) minmax(0, 1fr); align-items: center; }
.ss-website-pui__scene--split > .ss-website-art { position: relative; align-self: stretch; }
.ss-website-pui__scene--split > .ss-website-pui__window { margin: 28px 20px 28px -28px; }
.ss-website-pui--art .ss-website-pui__body { padding: var(--ss-product-space-md) var(--ss-product-space-md) 20px; }
.ss-website-pui--art .ss-website-pui__body > * + * { margin-top: 12px !important; }
.ss-website-pui--art .ss-website-ui-row { min-height: 52px; padding: 10px 14px !important; }
.ss-website-pui--art .ss-website-pro-ui.ss-website-pui__window { grid-template-columns: 40px minmax(0, 1fr); }
.ss-website-pui--art .ss-website-pro-ui__rail span:nth-of-type(n + 5) { display: none; }
.ss-website-pui--art .ss-website-pro-ui__tab { display: none; }
.ss-website-pui--art .ss-website-lite-ui__bar .ss-website-ui-status { display: none; }

/* Blueprint */
.ss-website-art--blueprint { display: block; }
.ss-website-art__dim { font: 10px "Open Sans", sans-serif; fill: #3B6AA6; text-anchor: middle; }
.ss-website-art__tb { font: 9.5px "Open Sans", sans-serif; fill: #1F4E86; }
.ss-website-art__tb--strong { font-weight: 700; letter-spacing: 0.08em; }
.ss-website-art__rev { font: 700 9px "Open Sans", sans-serif; fill: #FFFFFF; text-anchor: middle; }
.ss-website-art__pin { font: 700 11px "Open Sans", sans-serif; fill: #FFFFFF; text-anchor: middle; }
.ss-website-art__stamp { font: 800 17px "Open Sans", sans-serif; letter-spacing: 0.14em; fill: #16A34A; text-anchor: middle; }
.ss-website-art__stamp--sub { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; }
/* Photo evidence */
.ss-website-art--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-website-art--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 13, 18, 0.05), rgba(11, 13, 18, 0.35)); }
.ss-website-art__marker { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font: 600 12px "Open Sans", sans-serif; color: #111827; background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 20px rgba(11, 13, 18, 0.25); transform: translate(-12px, -50%); }
.ss-website-art__marker i { width: 14px; height: 14px; border-radius: 50%; background: var(--ss-mark, #FF6A55); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ss-mark, #FF6A55) 28%, transparent); }
.ss-website-art__marker--coral { --ss-mark: #FF6A55; } .ss-website-art__marker--green { --ss-mark: #12B886; } .ss-website-art__marker--blue { --ss-mark: #0071CE; }
.ss-website-art__chip { position: absolute; z-index: 1; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font: 600 12px "Open Sans", sans-serif; color: #FFFFFF; background: rgba(11, 13, 18, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ss-website-art__chip .ss-website-icon { width: 14px; height: 14px; }
/* Model */
.ss-website-art--model { background: radial-gradient(70% 60% at 35% 45%, #FFFFFF, #E6ECF4); }
.ss-website-art--model > svg { position: absolute; left: 2%; top: 16%; width: 66%; height: 80%; }
.ss-website-art__plate { fill: rgba(47, 108, 176, 0.07); stroke: #8EA6C6; stroke-width: 1.2; }
.ss-website-art__col { stroke: #A6B9D2; stroke-width: 1.2; }
.ss-website-art__pick { fill: rgba(245, 158, 11, 0.35); stroke: #D97706; stroke-width: 2; }
.ss-website-art__tree { position: absolute; left: 18px; top: 18px; display: grid; gap: 2px; margin: 0; padding: 10px; list-style: none; border-radius: 12px; font: 12px "Open Sans", sans-serif; color: #4B5563; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px #DCE3EE, 0 10px 24px rgba(11, 13, 18, 0.1); }
.ss-website-art__tree li { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 22px; border-radius: 6px; }
.ss-website-art__tree li.is-open { padding-left: 8px; font-weight: 600; color: #1F2430; }
.ss-website-art__tree li.is-active { color: #8A5800; background: #FFF6DC; }
.ss-website-art__tree .ss-website-icon { width: 13px; height: 13px; }
/* People */
.ss-website-art--people { display: grid; align-content: center; gap: 10px; padding: 24px 40px 24px 18px; background: linear-gradient(160deg, #FFFFFF, #EEF2F7); }
.ss-website-art__head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-family: Inter, sans-serif; }
.ss-website-art__head b { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: #0F172A; }
.ss-website-art__head span { font-size: 13px; color: #64748B; }
.ss-website-art__crew { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px 16px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 1px #E5E7EB, 0 6px 16px rgba(11, 13, 18, 0.05); font-family: Inter, sans-serif; }
.ss-website-art__crew .ss-website-persona { width: 40px; height: 40px; }
.ss-website-art__crew b { display: block; font-size: 13px; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-website-art__crew small { display: block; font-size: 12px; color: #64748B; white-space: nowrap; }
.ss-website-art__crew em { font-size: 20px; font-style: normal; font-weight: 800; color: #0F172A; }
.ss-website-art__crew i { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #10B981 var(--ss-pct), #E2E8F0 var(--ss-pct)); }
/* Finance */
.ss-website-art--finance { display: grid; align-content: center; gap: 16px; padding: 26px 50px 22px 24px; background: linear-gradient(160deg, #FFFFFF, #F1F4F8); }
.ss-website-art__totals { display: grid; gap: 8px; }
.ss-website-art__totals p { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid #E5E7EB; font-family: "Open Sans", sans-serif; }
.ss-website-art__totals small { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7280; }
.ss-website-art__totals b { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: #111827; }
.ss-website-art__totals em { font-size: 12px; font-style: normal; font-weight: 700; color: #B0296A; }
.ss-website-art--finance svg { display: block; width: 100%; height: auto; }
.ss-website-art__wf { fill: #1F2430; }
.ss-website-art__wf--total { fill: #E5448F; }
.ss-website-art__wf--up { fill: #FFC233; } .ss-website-art__wf--down { fill: #12B886; }
.ss-website-art__wf-label { font: 10px "Open Sans", sans-serif; fill: #6B7280; text-anchor: middle; }
/* Risk matrix */
.ss-website-art--matrix { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-content: center; gap: 8px; padding: 26px 52px 22px 18px; background: linear-gradient(160deg, #FFFFFF, #F4F6F9); }
.ss-website-art__grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; aspect-ratio: 1; }
.ss-website-art__cell { border-radius: 6px; }
.ss-website-art__cell--low { background: #DCF5EA; } .ss-website-art__cell--mid { background: #FFEFC2; } .ss-website-art__cell--high { background: #FFD3CB; }
.ss-website-art__risk { position: absolute; left: calc((var(--i) - 0.5) * 20%); top: calc((5.5 - var(--p)) * 20%); display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 7px; border-radius: 999px; font: 700 11.5px "Open Sans", sans-serif; color: #FFFFFF; background: #1F2430; box-shadow: 0 6px 14px rgba(11, 13, 18, 0.25); transform: translate(-50%, -50%); }
.ss-website-art__axis { margin: 0; font: 700 10.5px "Open Sans", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; }
.ss-website-art__axis--y { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
.ss-website-art__axis--x { grid-column: 2; text-align: center; }
/* Material flow */
.ss-website-art--flow { display: grid; align-content: center; padding: 26px 52px 26px 24px; background: linear-gradient(160deg, #FFFFFF, #EFF5F1); }
.ss-website-art--flow ol { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ss-website-art--flow ol::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(#12B886 55%, #D9E2EC 55%); }
.ss-website-art__node { position: relative; display: flex; align-items: center; gap: 14px; font-family: Inter, sans-serif; }
.ss-website-art__node i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: #FFFFFF; background: #D9E2EC; box-shadow: 0 0 0 4px #FFFFFF; }
.ss-website-art__node i .ss-website-icon { width: 16px; height: 16px; }
.ss-website-art__node--done i { background: #12B886; }
.ss-website-art__node--active i { background: #0B0D12; box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 7px rgba(18, 184, 134, 0.25); }
.ss-website-art__node b { display: block; font-size: 14px; font-weight: 600; color: #0F172A; }
.ss-website-art__node small { display: block; font-size: 12px; color: #64748B; }
/* Portfolio map */
.ss-website-art--map { background: linear-gradient(160deg, #EAF1F8, #DCE6F1); }
.ss-website-art--map svg { position: absolute; inset: 6% 18% 6% 4%; width: 78%; height: 88%; overflow: visible; }
.ss-website-art__land { fill: #FFFFFF; stroke: #B9C9DC; stroke-width: 1.5; }
.ss-website-art__site circle { fill: var(--ss-site); }
.ss-website-art__site .ss-website-art__halo { fill: color-mix(in srgb, var(--ss-site) 22%, transparent); }
.ss-website-art__site text { font: 600 11px "Open Sans", sans-serif; fill: #1F2430; paint-order: stroke; stroke: #FFFFFF; stroke-width: 3px; }
.ss-website-art__site--amber { --ss-site: #F2B33D; } .ss-website-art__site--blue { --ss-site: #0071CE; } .ss-website-art__site--green { --ss-site: #12B886; }

/* Narrow scenes recompose — artifact as a cropped band above the window, not a shrunk scene.
   Driven by the scene's own width (container query), so a narrow column on desktop (e.g. a
   1024px capability page) recomposes exactly like a phone. */
.ss-website-pui--art .ss-website-display__inner { container-type: inline-size; }
@container (max-width: 560px) {
  .ss-website-pui__scene { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .ss-website-pui__scene--back > .ss-website-art, .ss-website-pui__scene--corner > .ss-website-art { position: relative; height: 200px; }
  .ss-website-pui__scene--corner > .ss-website-pui__window { width: auto; margin: -48px 12px 14px; justify-self: stretch; }
  .ss-website-pui__scene--back > .ss-website-pui__window, .ss-website-pui__scene--split > .ss-website-pui__window, [dir="rtl"] .ss-website-pui__scene--back > .ss-website-pui__window { margin: -48px 12px 14px; }
  .ss-website-pui__scene--split > .ss-website-art { padding: 20px 18px 64px; }
  .ss-website-art--model > svg { width: 70%; left: 26%; }
  .ss-website-art__grid { max-width: 260px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-pui--art .ss-website-art__marker { animation-name: ss-pui-late; }
  .ss-website-js .ss-website-pui--art .ss-website-art__risk { animation-name: ss-pui-pop; }
}

/* ===================== 9. Fit (QA 2026-10-13) =====================
   Lists inside product windows never size to their content's min-content width: rows,
   progress lines and field grids shrink, and their text truncates (ellipsis) instead of
   pushing the window wider than its frame. */
:is(.ss-website-ui-rows, .ss-website-ui-progress, .ss-website-ui-fields, .ss-website-ui-metrics, .ss-website-ui-steps) { min-width: 0; }
:is(.ss-website-ui-rows, .ss-website-ui-progress, .ss-website-ui-fields, .ss-website-ui-metrics, .ss-website-ui-steps) > * { min-width: 0; }
.ss-website-ui-progress span { min-width: 0; }
.ss-website-ui-progress b { min-width: 0; }
.ss-website-ui-progress em { flex: none; }
.ss-website-lite-ui__pill { display: inline-block; min-width: 0; max-width: 58%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.4; }
.ss-website-lite-ui__pill .ss-website-icon { display: inline-block; margin-inline-end: 7px; vertical-align: -2px; }
.ss-website-pro-ui .ss-website-ui-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
/* One connected flow (home): the register sits in a narrow centre column — drop the Discipline column there. */
/* Narrow focused moments: a row's status / value moves under its title instead of squeezing it. */
.ss-website-pui--moment .ss-website-display__inner { container-type: inline-size; }
@container (max-width: 420px) {
  .ss-website-pui--moment .ss-website-ui-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
  .ss-website-pui--moment .ss-website-ui-row > :is(.ss-website-ui-status, .ss-website-ui-row__value) { grid-column: 2; justify-self: start; margin: 0; }
  .ss-website-pui--moment .ss-website-ui-row__text b, .ss-website-pui--moment .ss-website-ui-row__text small { white-space: normal; }
}

/* ---------- One connected flow: horizontal product screens ---------- */
.ss-website-flowui { border-radius: 18px; padding: 7px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 30px 70px rgba(0, 0, 0, 0.45); }
.ss-website-flowui > .ss-website-pui__scaled { border-radius: 12px; background: #FFFFFF; }
.ss-website-flowui .ss-website-pui__window { height: 525px; border-radius: 0; box-shadow: none; }
.ss-website-flowui__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; padding: 16px; font-family: "Open Sans", sans-serif; }
.ss-website-flowui__col { display: grid; gap: 12px; align-content: start; }
.ss-website-flowui__panel { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.08), 0 4px 12px rgba(14, 26, 58, 0.04); transition: box-shadow 220ms; }
.ss-website-flowui__panel.is-active { box-shadow: 0 0 0 2px #4DA3EE, 0 8px 22px rgba(0, 113, 206, 0.18); }
.ss-website-flowui__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #111827; }
.ss-website-flowui__head .ss-website-icon { width: 15px; height: 15px; color: #2563EB; }
.ss-website-flowui__head b { font-weight: 700; }
.ss-website-flowui__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid #F0F2F5; }
.ss-website-flowui__row > span { font-size: 12px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-website-flowui__row > small { grid-row: 2; font-size: 10.5px; color: #6B7280; }
.ss-website-flowui__row > em { grid-column: 2; grid-row: 1 / span 2; }
.ss-website-flowui__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-website-flowui__chips span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #1F3A5F; background: #EEF4FB; }
.ss-website-flowui__chips .ss-website-icon { width: 12px; height: 12px; }
.ss-website-flowui__evidence { display: flex; gap: 10px; align-items: center; }
.ss-website-flowui__evidence img { width: 96px; height: 64px; border-radius: 8px; object-fit: cover; }
.ss-website-flowui__evidence > span { display: grid; gap: 3px; }
.ss-website-flowui__evidence b { font-size: 12px; color: #111827; }
.ss-website-flowui__evidence small { font-size: 10.5px; color: #6B7280; }
.ss-website-flowui__bar { display: grid; gap: 4px; }
.ss-website-flowui__bar span { display: flex; justify-content: space-between; font-size: 11.5px; }
.ss-website-flowui__bar b { font-weight: 600; color: #111827; }
.ss-website-flowui__bar small { color: #6B7280; }
.ss-website-flowui__bar i { position: relative; display: block; height: 6px; border-radius: 3px; background: #EEF0F3; overflow: hidden; }
.ss-website-flowui__bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: #2563EB; }
.ss-website-flowui__bar--green i::after { background: #10B981; }
.ss-website-flowui__bar--amber i::after { background: #F59E0B; }
.ss-website-flowui__bar--violet i::after { background: #7C3AED; }
.ss-website-flowui__path { display: flex; align-items: center; gap: 8px; }
.ss-website-flowui__path > span { display: grid; justify-items: center; gap: 3px; }
.ss-website-flowui__path img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ss-website-flowui__path small { font-size: 9.5px; color: #6B7280; white-space: nowrap; }
.ss-website-flowui__path > .ss-website-icon { width: 14px; height: 14px; color: #9CA3AF; }
.ss-website-flowui__note { font-size: 11px; font-weight: 600; color: #1F3A5F; }
.ss-website-flowui__evidence .ss-website-pui__who { display: flex; align-items: center; gap: 6px; }
.ss-website-flowui__evidence .ss-website-pui__who img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ss-website-flowui__evidence .ss-website-pui__who span { display: grid; line-height: 1.2; }
.ss-website-flowui__evidence .ss-website-pui__who b { font-size: 11px; }
.ss-website-flowui__evidence .ss-website-pui__who small { font-size: 9.5px; color: #6B7280; }
/* RTL: the product screen stays LTR, so the diagram keeps its LTR arrangement (steps 01–03 beside
   the screen's left column, 04–05 beside its right column) while the card text stays RTL. */
@media (min-width: 1180px) {
  [dir="rtl"] .ss-website-flowmap { direction: ltr; }
  [dir="rtl"] .ss-website-flowmap__item { direction: rtl; text-align: right; }
}

/* ==== ss-website-product.css ==== */
/* Product overview and the shared Lite/Pro product-page system. */

/* ---------- Product overview hero (light): centred copy framed by Lite (left) and Pro (right) ----------
   Same frame, tilt and motion for both products; only the UI and the ambient light differ. */
.ss-website-product-hero { position: relative; overflow: clip; padding-top: calc(var(--ss-header-h) + clamp(56px, 2rem + 5vw, 120px)); padding-bottom: clamp(56px, 3rem + 3vw, 112px); background: radial-gradient(90% 60% at 50% 0%, rgba(0, 113, 206, 0.08), transparent 70%); }
.ss-website-product-hero__stage { position: relative; }
.ss-website-product-hero__copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; }
.ss-website-product-hero__copy .ss-website-title { max-width: 14ch; }
@media (min-width: 1200px) { .ss-website-product-hero__copy { max-width: 620px; margin-inline: auto; } }
.ss-website-product-hero__copy .ss-website-lead { max-width: 560px; margin-inline: auto; }
.ss-website-product-hero__product { position: relative; }
/* Wide: the products flank the copy, partly cropped by the viewport, tilted toward it. */
@media (min-width: 1200px) {
  .ss-website-product-hero__stage { min-height: clamp(440px, 32vw, 520px); display: grid; align-items: center; }
  .ss-website-product-hero__product { position: absolute; top: 50%; width: min(44vw, 700px); perspective: 1600px; transform: translateY(calc(-50% - var(--ss-progress, 0) * 40px)); }
  .ss-website-product-hero__product--lite { right: calc(50% + 350px); }
  .ss-website-product-hero__product--pro { left: calc(50% + 350px); }
  .ss-website-product-hero__product .ss-website-pui__stage { transform: rotateY(var(--ss-turn)); transform-origin: var(--ss-origin) 50%; transform-style: preserve-3d; }
  .ss-website-product-hero__product--lite { --ss-turn: 12deg; --ss-origin: 100%; }
  .ss-website-product-hero__product--pro { --ss-turn: -12deg; --ss-origin: 0%; }
}
/* Below 1200px: the family sits beneath the copy, side by side, tilted toward each other. */
@media (max-width: 1199px) {
  .ss-website-product-hero__stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); perspective: 1600px; }
  .ss-website-product-hero__copy { grid-column: 1 / -1; grid-row: 1; margin-bottom: clamp(32px, 2rem + 2vw, 64px); }
  .ss-website-product-hero__product--lite .ss-website-pui__stage { transform: rotateY(6deg); transform-origin: 100% 50%; }
  .ss-website-product-hero__product--pro .ss-website-pui__stage { transform: rotateY(-6deg); transform-origin: 0% 50%; }
}
@media (max-width: 899px) {
  .ss-website-product-hero__stage { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ss-website-product-hero__product { width: min(100%, 620px); margin-inline: auto; }
  .ss-website-product-hero__product .ss-website-pui__stage { transform: none; }
}
/* Entrance: copy first, then Lite from the left and Pro from the right. */
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-product-hero__product { animation: ss-product-in 700ms var(--ss-ease-out) both; animation-delay: calc(var(--ss-entry, 0ms) + 200ms); }
  .ss-website-js .ss-website-product-hero__product--lite { --ss-from: -64px; }
  .ss-website-js .ss-website-product-hero__product--pro { --ss-from: 64px; animation-delay: calc(var(--ss-entry, 0ms) + 300ms); }
  [dir="rtl"] .ss-website-js .ss-website-product-hero__product--lite { --ss-from: 64px; }
  [dir="rtl"] .ss-website-js .ss-website-product-hero__product--pro { --ss-from: -64px; }
}
@keyframes ss-product-in { from { opacity: 0; translate: var(--ss-from) 0; } }

/* ---------- Lite / Pro product pages: one system ----------
   --ss-product-light tints the contextual lighting; everything else is shared. Lite: open sky
   blue. Pro: a deeper navy-blue light. Both pages stay light-led and clearly siblings. */
.ss-website-product-page--lite { --ss-product-light: rgba(77, 163, 238, 0.22); --ss-product-light-2: rgba(173, 208, 245, 0.35); }
.ss-website-product-page--pro { --ss-product-light: rgba(0, 54, 140, 0.2); --ss-product-light-2: rgba(0, 113, 206, 0.16); }

/* Hero: breadcrumb → H1 → body → CTAs → Suitable for → product-level composition. */
.ss-website-tier-hero { position: relative; overflow: clip; padding-top: calc(var(--ss-header-h) + clamp(40px, 2rem + 3vw, 96px)); padding-bottom: clamp(64px, 3rem + 4vw, 128px); }
.ss-website-tier-hero__light { position: absolute; inset: 0 0 auto; z-index: -1; height: 100%; background: radial-gradient(60% 45% at 50% 62%, var(--ss-product-light), transparent 70%), radial-gradient(80% 40% at 50% 0%, var(--ss-product-light-2), transparent 70%); pointer-events: none; }
.ss-website-tier-hero__copy { display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; }
.ss-website-tier-hero__copy .ss-website-lead { max-width: 600px; margin-inline: auto; }
.ss-website-tier-hero__suitable { display: grid; justify-items: center; gap: 10px; margin-top: var(--ss-space-2); }
.ss-website-tier-hero__suitable-label { font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
.ss-website-tier-hero .ss-website-chip-list { justify-content: center; }
/* Breadcrumb as a quiet glass pill. */
.ss-website-tier-hero .ss-website-breadcrumb ol { justify-content: center; margin: 0; padding: 6px 14px; border-radius: var(--ss-radius-pill); background: rgba(255, 255, 255, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1px var(--ss-line), 0 6px 18px rgba(0, 31, 84, 0.06); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
/* Media: the product-level composition in the hero glass frame. */
.ss-website-tier-hero__media { margin-top: clamp(56px, 2rem + 3vw, 96px); }
.ss-website-tier-hero__media .ss-website-pui--product { width: min(100%, 980px); }

/* ---------- Outcomes story ---------- */
.ss-website-outcomes { display: grid; gap: var(--ss-space-7); }
.ss-website-outcomes__list { display: grid; border-top: 1px solid var(--ss-line-strong); }
/* Below 1024px: visual (scaled) + one active reason card + ← n / 5 →, all within one screen. */
@media (max-width: 1023px) {
  .ss-website-outcomes { grid-template-columns: minmax(0, 1fr); gap: var(--ss-space-5); }
  .ss-website-outcomes__list.is-carousel { border-top: 0; }
  .ss-website-outcomes__list.is-carousel > .ss-website-outcomes__item { --ss-slide: 100%; max-width: none; padding: 20px 20px 22px; border: 1px solid var(--ss-line); border-radius: var(--ss-radius-card); background: var(--ss-color-white); box-shadow: var(--ss-shadow-card); }
  .ss-website-pro-dark .ss-website-outcomes__list.is-carousel > .ss-website-outcomes__item { border-color: var(--ss-line-inverse); background: rgba(255, 255, 255, 0.04); box-shadow: none; }
  .ss-website-outcomes__reasons .ss-website-carousel-nav { margin-top: 12px; }
}
.ss-website-outcomes-story--pro .ss-website-outcomes__list { border-top-color: var(--ss-line-inverse); }
.ss-website-outcomes__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--ss-space-4); padding-block: var(--ss-space-5); border-bottom: 1px solid var(--ss-line); transition: color var(--ss-dur-slow); }
.ss-website-outcomes-story--pro .ss-website-outcomes__item { border-bottom-color: var(--ss-line-inverse); }
.ss-website-outcomes__index { font-size: var(--ss-size-small); font-weight: 700; color: var(--ss-color-blue); padding-top: 6px; }
.ss-website-outcomes-story--pro .ss-website-outcomes__index { color: var(--ss-color-blue-bright); }
.ss-website-outcomes__item p { color: var(--ss-text-2); margin-top: 6px; }
.ss-website-outcomes-story--pro .ss-website-outcomes__item p { color: var(--ss-text-inverse-2); }
@media (min-width: 1024px) {
  .ss-website-outcomes { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--ss-space-8); align-items: start; }
  .ss-website-outcomes__visual { position: sticky; top: calc(50vh - 220px); }
  .ss-website-outcomes-story.is-story .ss-website-outcomes__list { padding-bottom: 12vh; border-top: 0; }
  .ss-website-outcomes-story.is-story .ss-website-outcomes__item { min-height: 42vh; align-content: center; border-bottom: 0; border-inline-start: 2px solid var(--ss-line); padding-inline-start: var(--ss-space-5); }
  .ss-website-outcomes-story--pro.is-story .ss-website-outcomes__item { border-inline-start-color: var(--ss-line-inverse); }
  .ss-website-outcomes-story.is-story .ss-website-outcomes__item.is-active { border-inline-start-color: var(--ss-color-blue); }
  /* Compact (Lite / Pro "why teams choose"): shorter beats so five reasons take ~1.3 screens, not 2.3. */
  .ss-website-outcomes-story--compact.is-story .ss-website-outcomes__list { padding-bottom: 4vh; }
  .ss-website-outcomes-story--compact.is-story .ss-website-outcomes__item { min-height: 26vh; }
  /* Colour tiers (never opacity) keep inactive reasons AA-readable. */
  .ss-website-outcomes-story--lite.is-story .ss-website-outcomes__item:not(.is-active) .ss-website-title { color: var(--ss-text-2); }
  .ss-website-outcomes-story--lite.is-story .ss-website-outcomes__item:not(.is-active) p { color: var(--ss-text-3); }
  .ss-website-outcomes-story--pro.is-story .ss-website-outcomes__item:not(.is-active) .ss-website-title { color: var(--ss-text-inverse-2); }
  .ss-website-outcomes-story--pro.is-story .ss-website-outcomes__item:not(.is-active) p { color: var(--ss-text-inverse-3); }
}

/* Lite visual: scattered sources clear away as structured records arrive. */
.ss-website-transform { position: relative; display: grid; gap: var(--ss-space-4); padding: clamp(20px, 1rem + 1.5vw, 40px); border-radius: var(--ss-radius-panel); background: radial-gradient(70% 60% at 100% 0%, rgba(0, 113, 206, 0.16), transparent 70%), linear-gradient(160deg, var(--ss-color-blue-mist), var(--ss-color-white)); border: 1px solid rgba(0, 113, 206, 0.14); box-shadow: var(--ss-elev-3); }
.ss-website-outcomes__canvas { container-type: inline-size; }
@container (min-width: 520px) { .ss-website-transform { grid-template-columns: 1fr auto 1.2fr; align-items: center; } }
.ss-website-transform__label { margin-bottom: 12px; font-size: var(--ss-size-eyebrow); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
.ss-website-transform__col ul { display: grid; gap: 10px; }
.ss-website-transform__scrap { padding: 10px 12px; border-radius: var(--ss-radius-sm); background: var(--ss-color-white); border: 1px dashed var(--ss-line-strong); font-size: var(--ss-size-micro); color: var(--ss-text-2); transform: rotate(calc((var(--ss-i) - 1.5) * 1.6deg)); transition: transform var(--ss-dur-story) var(--ss-ease-out), background-color var(--ss-dur-story), border-color var(--ss-dur-story), color var(--ss-dur-story); }
.ss-website-transform__scrap.is-cleared { transform: translateX(10px) rotate(0); background: transparent; border-color: var(--ss-line); color: var(--ss-text-3); text-decoration: line-through; text-decoration-color: rgba(2, 4, 15, 0.3); }
[dir="rtl"] .ss-website-transform__scrap.is-cleared { transform: translateX(-10px) rotate(0); }
.ss-website-transform__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ss-color-blue); color: var(--ss-color-white); justify-self: center; box-shadow: 0 0 0 8px rgba(0, 113, 206, 0.1); }
@container (max-width: 519px) { .ss-website-transform__arrow { transform: rotate(90deg); } }
[dir="rtl"] .ss-website-transform__arrow .ss-website-icon { transform: scaleX(-1); }
.ss-website-transform__arrow .ss-website-icon { width: 20px; height: 20px; }
.ss-website-transform__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--ss-radius-md); background: var(--ss-color-white); border: 1px solid var(--ss-line); box-shadow: var(--ss-shadow-card); font-size: var(--ss-size-small); font-weight: 600; }
.ss-website-transform__row > span:not(.ss-website-icon-tile) { flex: 1; }
.ss-website-transform__check { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--ss-color-blue); color: var(--ss-color-white); stroke-width: 2.4; }
.ss-website-js .ss-website-transform__row { opacity: 0.001; transform: translateY(10px) scale(0.98); transition: opacity var(--ss-dur-story) var(--ss-ease-out), transform var(--ss-dur-story) var(--ss-ease-out), box-shadow var(--ss-dur-story); }
.ss-website-js .ss-website-transform__row.is-on { opacity: 1; transform: none; }
.ss-website-transform.is-complete { border-color: rgba(0, 113, 206, 0.35); }
/* The newest structured record glows briefly as it lands; the meter counts the records structured. */
.ss-website-transform__row.is-latest { box-shadow: 0 0 0 1px rgba(0, 113, 206, 0.35), 0 10px 26px rgba(0, 113, 206, 0.16); }
.ss-website-transform__progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; min-height: 24px; }
.ss-website-transform__meter { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--ss-color-blue-tint); overflow: hidden; }
.ss-website-transform__meter i { position: absolute; inset: 0 auto 0 0; width: calc(var(--ss-done, var(--ss-total)) / var(--ss-total) * 100%); border-radius: inherit; background: var(--ss-color-blue); transition: width var(--ss-dur-story) var(--ss-ease-out); }
[dir="rtl"] .ss-website-transform__meter i { inset: 0 0 0 auto; }
.ss-website-transform__done { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ss-size-micro); font-weight: 700; color: var(--ss-color-blue); white-space: nowrap; }
.ss-website-transform__done .ss-website-icon { width: 14px; height: 14px; }
.ss-website-js .ss-website-transform__done { opacity: 0; transform: translateY(4px); transition: opacity var(--ss-dur-slow) var(--ss-ease-out), transform var(--ss-dur-slow) var(--ss-ease-out); }
.ss-website-js .ss-website-transform.is-complete .ss-website-transform__done { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ss-website-js .ss-website-transform__done { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ss-website-js .ss-website-transform__row { opacity: 1; transform: none; } }

/* ---------- Product: family sequence (the homepage duo, shorter and without the compare prompt) ---------- */
@media (min-width: 1024px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-duo-section--product .ss-website-duo { height: 240vh; }
}

/* ---------- Product: Find your fit (full comparison, always visible) ---------- */
.ss-website-fit .ss-website-section-header .ss-website-title { max-width: 24ch; margin-inline: auto; }
.ss-website-fit__frame { margin-top: clamp(40px, 2rem + 2vw, 72px); border-radius: var(--ss-radius-panel); background: var(--ss-color-white); box-shadow: inset 0 0 0 1px var(--ss-line), var(--ss-elev-2); overflow: clip; }
.ss-website-fit__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: start; }
.ss-website-fit__col-feature { width: 26%; }
.ss-website-fit__table th, .ss-website-fit__table td { text-align: start; vertical-align: top; }
/* Product headers: sticky under the site header, tinted with each product's identity. */
.ss-website-fit__table thead th {
  position: sticky; top: var(--ss-header-h); z-index: 3;
  padding: 22px 24px 20px; border-bottom: 1px solid var(--ss-line-strong);
  background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ss-website-fit__corner { vertical-align: bottom !important; font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
.ss-website-fit__product { display: table-cell; }
.ss-website-fit__table thead .ss-website-fit__product--lite { background: linear-gradient(180deg, rgba(238, 245, 252, 0.95), rgba(255, 255, 255, 0.9)); box-shadow: inset 0 3px 0 var(--ss-color-blue-bright); }
.ss-website-fit__table thead .ss-website-fit__product--pro { background: linear-gradient(180deg, rgba(229, 236, 246, 0.95), rgba(255, 255, 255, 0.9)); box-shadow: inset 0 3px 0 var(--ss-color-navy); }
.ss-website-fit__product-tag { display: flex; align-items: center; gap: 8px; font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-2); }
.ss-website-fit__product-name { display: block; margin-top: 6px; font-size: var(--ss-size-h4); font-weight: 700; letter-spacing: -0.01em; color: var(--ss-text-1); }
/* Groups and rows. */
.ss-website-fit__group-row th { padding: 28px 24px 10px; font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-color-blue); border-bottom: 1px solid var(--ss-line); }
.ss-website-fit__feature, .ss-website-fit__cell { padding: 20px 24px; border-bottom: 1px solid var(--ss-line); transition: background-color var(--ss-dur-fast); }
.ss-website-fit__group:last-child .ss-website-fit__row:last-child > * { border-bottom: 0; }
.ss-website-fit__feature { display: table-cell; font-weight: 600; color: var(--ss-text-1); }
.ss-website-fit__feature > span:last-child { display: inline; }
.ss-website-fit__feature-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-inline-end: 12px; vertical-align: middle; border-radius: 10px; color: var(--ss-color-blue); background: var(--ss-color-blue-mist); }
.ss-website-fit__feature-icon .ss-website-icon { width: 17px; height: 17px; }
.ss-website-fit__cell { font-size: var(--ss-size-body); line-height: 1.55; color: var(--ss-text-1); }
.ss-website-fit__cell--pro { background: rgba(0, 31, 84, 0.022); }
.ss-website-fit__row:hover > * { background-color: rgba(0, 113, 206, 0.04); }
/* The defining difference (Product approach) is emphasised. */
.ss-website-fit__row.is-key > * { background-color: var(--ss-color-blue-mist); }
.ss-website-fit__row.is-key .ss-website-fit__phrase { font-weight: 600; }
.ss-website-fit__cell-label { display: none; }
/* List-like cells: short items that wrap, each with a small mark in the product's colour. */
.ss-website-fit__items { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ss-website-fit__items li { position: relative; padding-inline-start: 13px; }
.ss-website-fit__items li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.68em; width: 5px; height: 5px; border-radius: 50%; background: var(--ss-color-blue-bright); }
.ss-website-fit__cell--pro .ss-website-fit__items li::before { background: var(--ss-color-navy); }
.ss-website-fit__more { margin-top: var(--ss-space-5); text-align: center; }

/* Tablet: tighter cells. */
@media (max-width: 1023px) {
  .ss-website-fit__feature, .ss-website-fit__cell, .ss-website-fit__table thead th { padding-inline: 16px; }
  .ss-website-fit__col-feature { width: 24%; }
  .ss-website-fit__feature-icon { display: none; }
}
/* Phones: the feature spans the row; Lite and Pro sit side by side beneath it under sticky product heads. */
@media (max-width: 767px) {
  .ss-website-fit__frame { margin-inline: calc(var(--ss-gutter) * -0.5); }
  .ss-website-fit__table, .ss-website-fit__table thead, .ss-website-fit__table tbody { display: block; }
  .ss-website-fit__table colgroup { display: none; }
  .ss-website-fit__table thead { position: sticky; top: var(--ss-header-h); z-index: 3; }
  .ss-website-fit__table thead th { position: static; }
  .ss-website-fit__table thead tr, .ss-website-fit__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-website-fit__corner { display: none !important; }
  .ss-website-fit__product, .ss-website-fit__feature { display: block; }
  .ss-website-fit__table thead th { padding: 14px 14px 12px; }
  .ss-website-fit__product-tag { display: none; }
  .ss-website-fit__product-name { margin-top: 0; font-size: var(--ss-size-control); }
  .ss-website-fit__group-row { display: block; }
  .ss-website-fit__group-row th { display: block; padding: 22px 14px 8px; }
  .ss-website-fit__feature { grid-column: 1 / -1; padding: 16px 14px 4px; border-bottom: 0; }
  .ss-website-fit__cell { padding: 6px 14px 16px; font-size: var(--ss-size-small); }
  .ss-website-fit__items { gap: 4px 12px; }
}

/* ==========================================================================
   SkyStruct Pro — the dark counterpart (v3, 2026-10-13)
   Same architecture as Lite, dark operating mode. Every Pro section carries
   .ss-website-section--dark + .ss-website-pro-dark (the audience section too).
   · One continuous night canvas (#02040F → graphite), no banded greys between sections;
     each section adds only a soft, low light.
   · One surface recipe (glass on dark): faint white fill, hairline border, top highlight.
   · Type: white / off-white / neutral grey. Eyebrows and pills are neutral.
   · Signature blue (#0071CE / #001F54) is restrained: progress, focus, the active marker.
     Other colour only where it means something: AI aqua, C.L.I.C. dots on the module pills,
     success green on checks, human/presence colours inside product UI.
   · Product UI inside glass frames stays authentic (light) — the contrast is intended.
   ========================================================================== */
.ss-website-pro-dark {
  --ss-pro-bg: #02040F; --ss-pro-bg-2: #070A13; --ss-pro-raise: #0D111B;
  --ss-pro-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  --ss-pro-border: rgba(255, 255, 255, 0.1); --ss-pro-border-strong: rgba(255, 255, 255, 0.18);
  --ss-pro-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --ss-pro-accent: #4DA3EE; /* signature blue, lifted for dark backgrounds (4.5:1+) */
  --ss-text-1: #F4F5F7; --ss-text-2: rgba(232, 236, 243, 0.76); --ss-text-3: rgba(232, 236, 243, 0.58);
  --ss-line: rgba(255, 255, 255, 0.09); --ss-line-strong: rgba(255, 255, 255, 0.16);
  --ss-line-inverse: rgba(255, 255, 255, 0.09);
  --ss-text-inverse-2: rgba(232, 236, 243, 0.76);
  --ss-glass-bg: rgba(255, 255, 255, 0.05); --ss-glass-bg-strong: rgba(255, 255, 255, 0.08); --ss-glass-border: var(--ss-pro-border);
  --ss-glass-highlight: var(--ss-pro-highlight); --ss-glass-text: #F4F5F7;
  --ss-product-light: rgba(0, 113, 206, 0.12); --ss-product-light-2: rgba(138, 153, 172, 0.08);
  position: relative; isolation: isolate;
  color: var(--ss-text-1);
  background: var(--ss-pro-bg);
}
/* Section light: one soft source each, no hard bands (top and bottom fade into the canvas). */
.ss-website-pro-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ss-website-pro-dark.ss-website-tier-hero::before { background: radial-gradient(60% 46% at 50% 0%, rgba(0, 113, 206, 0.2), transparent 72%), radial-gradient(50% 40% at 50% 78%, rgba(0, 31, 84, 0.55), transparent 75%); }
.ss-website-pro-dark.ss-website-outcomes-story::before { background: radial-gradient(42% 36% at 22% 48%, rgba(0, 31, 84, 0.5), transparent 75%); }
.ss-website-pro-dark.ss-website-capsel-section::before { background: radial-gradient(44% 40% at 76% 42%, rgba(0, 31, 84, 0.55), transparent 75%), linear-gradient(180deg, transparent, var(--ss-pro-bg-2) 50%, transparent); }
.ss-website-pro-dark.ss-website-audience::before { background: radial-gradient(46% 42% at 70% 60%, rgba(0, 31, 84, 0.5), transparent 75%); }
.ss-website-pro-dark.ss-website-onboarding::before { background: linear-gradient(180deg, transparent, var(--ss-pro-bg-2) 35%, var(--ss-pro-bg-2) 70%, transparent); }
.ss-website-pro-dark.ss-website-section--dark { background-color: var(--ss-pro-bg); }
.ss-website-pro-dark .ss-website-title { color: #FFFFFF; }
.ss-website-pro-dark .ss-website-lead, .ss-website-pro-dark .ss-website-section-header p { color: var(--ss-text-2); }
/* Eyebrows: neutral glass (never blue text on Pro). */
.ss-website-pro-dark .ss-website-eyebrow { color: rgba(244, 245, 247, 0.86); background: rgba(255, 255, 255, 0.05); border-color: var(--ss-pro-border-strong); box-shadow: var(--ss-pro-highlight); }
/* Breadcrumb */
.ss-website-pro-dark .ss-website-breadcrumb ol { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--ss-pro-border); }
.ss-website-pro-dark .ss-website-breadcrumb :is(a, span, li) { color: var(--ss-text-2); }
.ss-website-pro-dark .ss-website-breadcrumb [aria-current] { color: #FFFFFF; }
/* Buttons: neutral, white on dark (same rule as the header CTA). */
.ss-website-pro-dark .ss-website-button--primary { --ss-btn-bg: #F4F5F7; --ss-btn-fg: #02040F; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.ss-website-pro-dark .ss-website-button--primary:hover { --ss-btn-bg: #FFFFFF; }
.ss-website-pro-dark .ss-website-button--secondary { --ss-btn-bg: rgba(255, 255, 255, 0.04); --ss-btn-fg: #FFFFFF; --ss-btn-border: rgba(255, 255, 255, 0.24); }
.ss-website-pro-dark .ss-website-button--secondary:hover { --ss-btn-bg: rgba(255, 255, 255, 0.09); }
.ss-website-pro-dark .ss-website-text-link { color: #FFFFFF; }
/* Hero: suitable-for chips are dark glass, not light pills. */
.ss-website-pro-dark .ss-website-tier-hero__suitable-label { color: var(--ss-text-3); }
.ss-website-pro-dark .ss-website-chip, .ss-website-pro-dark .ss-website-chip--glass { color: rgba(244, 245, 247, 0.88); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ss-pro-border); box-shadow: var(--ss-pro-highlight); }

/* Why teams move: the story list on the canvas (hairlines + one active marker, no slab). */
.ss-website-pro-dark .ss-website-outcomes__list { border-top-color: var(--ss-pro-border); }
.ss-website-pro-dark .ss-website-outcomes__item { background: none; box-shadow: none; border-color: var(--ss-pro-border); }
.ss-website-pro-dark .ss-website-outcomes__item p { color: var(--ss-text-2); }
.ss-website-pro-dark .ss-website-outcomes__index { color: rgba(232, 236, 243, 0.62); font-variant-numeric: tabular-nums; }
.ss-website-pro-dark.is-story .ss-website-outcomes__item, .ss-website-pro-dark .is-story .ss-website-outcomes__item { border-inline-start-color: var(--ss-pro-border); }
.ss-website-pro-dark.is-story .ss-website-outcomes__item.is-active, .ss-website-pro-dark .is-story .ss-website-outcomes__item.is-active { border-inline-start-color: var(--ss-pro-accent); }
.ss-website-pro-dark .ss-website-outcomes__item.is-active .ss-website-outcomes__index { color: var(--ss-pro-accent); }
/* Transform panel: dark glass; columns are open (no muddy fills). */
.ss-website-pro-dark .ss-website-transform { background: radial-gradient(70% 60% at 100% 0%, rgba(0, 113, 206, 0.14), transparent 70%), linear-gradient(160deg, #0F131D, #05070E); border: 1px solid var(--ss-pro-border); box-shadow: var(--ss-pro-highlight), 0 40px 80px rgba(0, 0, 0, 0.5); }
.ss-website-pro-dark .ss-website-transform.is-complete { border-color: rgba(77, 163, 238, 0.36); }
.ss-website-pro-dark .ss-website-transform__col { background: none; border: 0; box-shadow: none; }
.ss-website-pro-dark .ss-website-transform__label { color: var(--ss-text-3); }
.ss-website-pro-dark .ss-website-transform__label .ss-website-tier-mark { background: var(--ss-pro-accent); border-color: var(--ss-pro-accent); }
.ss-website-pro-dark .ss-website-transform__scrap { color: var(--ss-text-2); background: transparent; border: 1px dashed rgba(255, 255, 255, 0.18); }
.ss-website-pro-dark .ss-website-transform__scrap.is-cleared { color: var(--ss-text-3); border-color: rgba(255, 255, 255, 0.08); }
.ss-website-pro-dark .ss-website-transform__row { color: #FFFFFF; background: var(--ss-pro-surface); border: 1px solid var(--ss-pro-border); box-shadow: var(--ss-pro-highlight); }
.ss-website-pro-dark .ss-website-transform__row.is-latest { box-shadow: var(--ss-pro-highlight), 0 0 0 1px rgba(77, 163, 238, 0.45), 0 12px 28px rgba(0, 113, 206, 0.2); }
.ss-website-pro-dark .ss-website-transform__row .ss-website-icon-tile { color: #FFFFFF; background: rgba(255, 255, 255, 0.07); border-color: var(--ss-pro-border); }
.ss-website-pro-dark .ss-website-transform__check { background: var(--ss-home-green); }
.ss-website-pro-dark .ss-website-transform__arrow { background: #F4F5F7; color: #02040F; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05); }
.ss-website-pro-dark .ss-website-transform__meter { background: rgba(255, 255, 255, 0.1); }
.ss-website-pro-dark .ss-website-transform__meter i { background: var(--ss-pro-accent); }
.ss-website-pro-dark .ss-website-transform__done { color: var(--ss-home-green-glow); }

/* Core capabilities: neutral glass rows; the C.L.I.C. area shows only on the icon and dot. */
.ss-website-pro-dark .ss-website-capsel__row { color: var(--ss-text-2); }
.ss-website-pro-dark .ss-website-capsel__row:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.05); }
.ss-website-pro-dark .ss-website-capsel__row-icon { color: var(--ss-text-3); background: rgba(255, 255, 255, 0.06); }
.ss-website-pro-dark .ss-website-capsel__row-mark { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28); }
.ss-website-pro-dark .ss-website-capsel__row[aria-selected="true"] { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); border-color: var(--ss-pro-border); box-shadow: var(--ss-pro-highlight), 0 10px 26px rgba(0, 0, 0, 0.3); }
.ss-website-pro-dark .ss-website-capsel__row[aria-selected="true"] .ss-website-capsel__row-icon { color: var(--ss-accent-bright, #FFFFFF); background: rgba(255, 255, 255, 0.1); }
.ss-website-pro-dark .ss-website-capsel__row[aria-selected="true"] .ss-website-capsel__row-mark { background: var(--ss-accent-bright, var(--ss-accent)); }
.ss-website-pro-dark .ss-website-capsel__row[aria-selected="true"]::before { background: var(--ss-accent-bright, var(--ss-accent)); }
.ss-website-pro-dark .ss-website-capsel__group-label, .ss-website-pro-dark .ss-website-capsel__category { color: var(--ss-text-3); }
.ss-website-pro-dark .ss-website-capsel__icon { color: #FFFFFF; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--ss-pro-border); }
.ss-website-pro-dark .ss-website-capsel__body { color: var(--ss-text-2); }

/* Who it is for: tabs + photo + caption on the same dark recipe (no navy slabs). */
.ss-website-pro-dark .ss-website-audience__tab { color: var(--ss-text-2); border-color: transparent; }
.ss-website-pro-dark .ss-website-audience__tab:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.05); }
.ss-website-pro-dark .ss-website-audience__tab[aria-selected="true"] { color: #FFFFFF; background: var(--ss-pro-surface); border-color: var(--ss-pro-border-strong); box-shadow: var(--ss-pro-highlight); }
.ss-website-pro-dark .ss-website-audience__tab .ss-website-icon-tile { color: #FFFFFF; background: rgba(255, 255, 255, 0.07); border-color: var(--ss-pro-border); }
.ss-website-pro-dark .ss-website-audience__tab-arrow { color: #FFFFFF; }
.ss-website-pro-dark .ss-website-audience__caption { background: linear-gradient(160deg, rgba(13, 17, 27, 0.94), rgba(2, 4, 15, 0.96)); border: 1px solid var(--ss-pro-border); box-shadow: var(--ss-pro-highlight), 0 30px 60px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ss-website-pro-dark .ss-website-audience__caption p { color: var(--ss-text-2); }
.ss-website-pro-dark .ss-website-audience__photo { box-shadow: 0 0 0 1px var(--ss-pro-border), 0 40px 80px rgba(0, 0, 0, 0.5); }

/* Onboarding: dark glass cards, the light product UI framed inside. */
.ss-website-pro-dark .ss-website-onboarding__stage { background: var(--ss-pro-surface), var(--ss-pro-raise); border: 1px solid var(--ss-pro-border); box-shadow: var(--ss-pro-highlight), 0 30px 60px rgba(0, 0, 0, 0.4); }
.ss-website-pro-dark .ss-website-onboarding__media { background: radial-gradient(80% 70% at 50% 0%, rgba(0, 113, 206, 0.16), transparent 70%), #0A0E17; }
.ss-website-pro-dark .ss-website-onboarding__num span { color: #FFFFFF; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--ss-pro-border-strong); }
.ss-website-pro-dark .ss-website-onboarding__text { color: var(--ss-text-2); }
.ss-website-pro-dark .ss-website-onboarding__pills li { color: var(--ss-text-1); background: rgba(255, 255, 255, 0.04); border-color: var(--ss-pro-border); box-shadow: none; }
.ss-website-pro-dark .ss-website-onboarding__pills .ss-website-icon { color: var(--ss-home-green-glow); }
.ss-website-pro-dark .ss-website-onboarding__rail { background: rgba(255, 255, 255, 0.08); }
.ss-website-pro-dark .ss-website-onboarding__rail-fill { background: var(--ss-pro-accent); }
/* FAQ */
.ss-website-pro-dark .ss-website-faq__list { border-top-color: var(--ss-pro-border-strong); }
.ss-website-pro-dark .ss-website-faq__item { border-bottom-color: var(--ss-pro-border); }
.ss-website-pro-dark .ss-website-faq__toggle { color: #FFFFFF; border-color: var(--ss-pro-border-strong); }
.ss-website-pro-dark .ss-website-faq__item[open] .ss-website-faq__toggle { color: #02040F; background: #F4F5F7; border-color: #F4F5F7; }
.ss-website-pro-dark .ss-website-faq__answer { color: var(--ss-text-2); }
/* Glass product frames on the dark canvas: a cool, low rim instead of a white halo. */
.ss-website-pro-dark .ss-website-display { --ss-display-border: rgba(255, 255, 255, 0.14); }
.ss-website-pro-dark .ss-website-pui__label { color: #F4F5F7; background: rgba(13, 17, 27, 0.9); box-shadow: inset 0 0 0 1px var(--ss-pro-border-strong); }

/* Product hero: the Pro product bleeds off the inline-end edge, so its request card anchors
   towards the centre (never cut by the viewport). */
@media (min-width: 1200px) { .ss-website-product-hero__product--pro .ss-website-pui__card--request { right: auto; left: -56px; } }
.ss-website-pro-dark .ss-website-presence__event { color: #0B0D12; }
.ss-website-transform__label { display: flex; align-items: center; gap: 8px; }
.ss-website-transform__label .ss-website-tier-mark { flex: none; margin: 0; }
/* Phones: the Product Overview hero is copy-first; the products are presented directly below in
   the family section (the same compositions), so they are not repeated back to back. */
@media (max-width: 639px) { .ss-website-product-hero__product { display: none; } .ss-website-product-hero { padding-bottom: 40px; } }

@media (max-width: 767px) { .ss-website-product-hero { padding-bottom: 24px; } }
@media (max-width: 767px) { .ss-website-product-hero__copy .ss-website-actions { margin-top: 4px; } .ss-website-product-hero__copy { gap: var(--ss-space-4); } }

/* ==== ss-website-capabilities.css ==== */
/* Capability page system (all nine capability pages).
   One active accent per page: every capability section carries .ss-website-capability-page +
   data-ss-clic, and only --ss-capability-accent* (tokens.css) colour its content. SkyStruct Blue
   stays in the global chrome (nav, pre-footer, footer); real product UI is never recoloured. */

/* ---------- One accent: shared components re-tinted inside capability content ---------- */
.ss-website-capability-page .ss-website-eyebrow { color: var(--ss-capability-accent-dark); background: var(--ss-capability-accent-soft); border-color: var(--ss-capability-accent-border); }
.ss-website-capability-page .ss-website-button--primary { background: var(--ss-color-ink); box-shadow: 0 8px 20px rgba(2, 4, 15, 0.18); }
.ss-website-capability-page .ss-website-button--primary:hover { background: #1B2233; }
.ss-website-capability-page .ss-website-text-link { color: var(--ss-capability-accent-dark); }
.ss-website-capability-page .ss-website-faq__item[open] .ss-website-faq__toggle { background: var(--ss-capability-accent-dark); border-color: var(--ss-capability-accent-dark); }
.ss-website-capability-page .ss-website-avail--yes { color: var(--ss-text-1); }
.ss-website-capability-page .ss-website-avail--yes .ss-website-icon { background: var(--ss-capability-accent); }
.ss-website-capability-page .ss-website-avail--limited .ss-website-icon { background: var(--ss-capability-accent-soft); color: var(--ss-capability-accent-dark); }
/* Glass-pill breadcrumb (same treatment as the Lite / Pro heroes). */
.ss-website-cap-hero .ss-website-breadcrumb ol { margin: 0; padding: 6px 14px; border-radius: var(--ss-radius-pill); background: rgba(255, 255, 255, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1px var(--ss-line), 0 6px 18px rgba(0, 31, 84, 0.06); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }

/* ---------- 1 · Hero ---------- */
.ss-website-cap-hero { position: relative; overflow: clip; padding-top: calc(var(--ss-header-h) + clamp(40px, 2rem + 3vw, 96px)); padding-bottom: clamp(64px, 3rem + 4vw, 128px); }
.ss-website-cap-hero__light { position: absolute; inset: 0; z-index: -1; background: radial-gradient(48% 60% at 78% 46%, var(--ss-capability-accent-soft), transparent 70%); pointer-events: none; }
.ss-website-cap-hero__layout { display: grid; gap: clamp(40px, 2rem + 3vw, 80px); align-items: center; }
@media (min-width: 1024px) { .ss-website-cap-hero__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.ss-website-cap-hero__copy { display: grid; gap: var(--ss-space-5); justify-items: start; }
/* Optical balance: the copy sits slightly above the media's centre line. */
@media (min-width: 1024px) { .ss-website-cap-hero__copy { margin-top: -4%; } }
.ss-website-cap-hero__copy .ss-website-title { max-width: 12ch; }
.ss-website-cap-hero__copy .ss-website-lead { max-width: 520px; }
.ss-website-cap-hero__ai { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px var(--ss-capability-accent-border), 0 6px 16px rgba(2, 4, 15, 0.05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ss-website-cap-hero__ai-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; color: var(--ss-capability-accent); background: var(--ss-capability-accent-soft); }
.ss-website-cap-hero__ai-icon .ss-website-icon { width: 16px; height: 16px; }
.ss-website-cap-hero__ai > span:last-child { display: grid; line-height: 1.3; }
.ss-website-cap-hero__ai b { font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-1); }
.ss-website-cap-hero__ai b + span { font-size: var(--ss-size-micro); color: var(--ss-text-3); }
/* Media: the capability's product moment in the shared glass display frame. */
.ss-website-cap-hero__media { position: relative; }
.ss-website-cap-hero__media .ss-website-pui { width: min(100%, 660px); margin-inline: auto; }

/* ---------- 2 · Journey ---------- */
.ss-website-journey__layout { display: grid; gap: var(--ss-space-7); margin-top: clamp(40px, 2rem + 2vw, 72px); }
.ss-website-journey__visual, .ss-website-journey__line { display: none; }
.ss-website-journey__stages { display: grid; gap: clamp(40px, 2rem + 2vw, 64px); }
.ss-website-journey__stage { display: grid; gap: 14px; justify-items: start; }
.ss-website-journey__num { display: grid; place-items: center; min-width: 46px; height: 40px; padding: 0 10px; border-radius: 12px; font-size: var(--ss-size-small); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-capability-accent-dark); background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px var(--ss-capability-accent-border), 0 6px 16px rgba(2, 4, 15, 0.06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow var(--ss-dur-slow) var(--ss-ease-out), background-color var(--ss-dur-slow); }
.ss-website-journey__title { font-size: var(--ss-size-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ss-text-1); transition: color var(--ss-dur-slow); }
.ss-website-journey__media { width: 100%; max-width: 520px; margin: 4px 0; }
.ss-website-journey__points { display: grid; gap: 8px; width: 100%; max-width: 520px; }
.ss-website-journey__points li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.66); box-shadow: inset 0 0 0 1px var(--ss-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--ss-size-small); line-height: 1.5; color: var(--ss-text-1); }
.ss-website-journey__points .ss-website-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ss-capability-accent); }
@media (min-width: 1024px) {
  .ss-website-journey__layout { grid-template-columns: minmax(0, 6fr) 64px minmax(0, 5fr); gap: 0 clamp(16px, 2vw, 32px); align-items: start; }
  .ss-website-journey__visual { display: block; position: sticky; top: calc(50vh - 200px); }
  .ss-website-journey__screens { display: grid; }
  .ss-website-journey__image { grid-area: 1 / 1; opacity: 0; transition: opacity 380ms var(--ss-ease-out); }
  .ss-website-journey__image.is-active { opacity: 1; }
  .ss-website-journey__media { display: none; }
  /* The line: a quiet gradient track; the active part fills in the accent, a small signal leads it. */
  .ss-website-journey__line { display: block; position: relative; align-self: stretch; }
  .ss-website-journey__line::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 2px; translate: -50% 0; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--ss-line-strong) 8%, var(--ss-line-strong) 92%, transparent); }
  .ss-website-journey__fill { position: absolute; top: 0; left: 50%; width: 2px; height: calc((var(--ss-step, 0) + 0.5) / var(--ss-steps) * 100%); translate: -50% 0; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--ss-capability-accent) 30%); transition: height 700ms var(--ss-ease-out); }
  .ss-website-journey__signal { position: absolute; left: 50%; top: calc((var(--ss-step, 0) + 0.5) / var(--ss-steps) * 100%); width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: var(--ss-capability-accent); box-shadow: 0 0 0 5px var(--ss-capability-accent-soft), 0 0 18px var(--ss-capability-accent-border); transition: top 700ms var(--ss-ease-out); }
  .ss-website-journey__stage { min-height: 48vh; align-content: center; padding-block: 24px; }
  .ss-website-journey__stages { gap: 0; }
  .is-story .ss-website-journey__stage:not(.is-active) .ss-website-journey__title { color: var(--ss-text-3); }
  .is-story .ss-website-journey__stage.is-active .ss-website-journey__num { background: var(--ss-color-white); box-shadow: inset 0 0 0 1px var(--ss-capability-accent-border), 0 0 0 4px var(--ss-capability-accent-soft), 0 10px 24px rgba(2, 4, 15, 0.08); }
}
@media (prefers-reduced-motion: no-preference) {
  .ss-website-journey__signal { animation: ss-journey-signal 2.8s var(--ss-ease-in-out) infinite; }
}
@keyframes ss-journey-signal { 50% { box-shadow: 0 0 0 8px var(--ss-capability-accent-soft), 0 0 22px var(--ss-capability-accent-border); } }

/* ---------- 3 · Key features table + Lite / Pro cards ---------- */
.ss-website-capfeat__layout { display: grid; gap: clamp(28px, 1.5rem + 2vw, 48px); margin-top: clamp(36px, 2rem + 2vw, 64px); align-items: start; }
@media (min-width: 1200px) { .ss-website-capfeat__layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.ss-website-capfeat__frame { margin-top: 0; }
.ss-website-capfeat__col-feature { width: 54%; }
.ss-website-capfeat__product { font-size: var(--ss-size-control); font-weight: 700; color: var(--ss-text-1); vertical-align: bottom !important; }
.ss-website-capfeat__feature { display: table-cell; }
.ss-website-capfeat__name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ss-text-1); }
.ss-website-capfeat__name .ss-website-icon { width: 16px; height: 16px; color: var(--ss-capability-accent); }
.ss-website-capfeat__desc { display: block; margin-top: 4px; max-width: 60ch; font-size: var(--ss-size-small); font-weight: 400; line-height: 1.55; color: var(--ss-text-2); }
.ss-website-capfeat__cell { vertical-align: middle !important; }
.ss-website-capfeat__ai-row > * { background-color: color-mix(in srgb, var(--ss-capability-accent-soft) 60%, transparent); }
.ss-website-capfeat__table .ss-website-fit__row.is-different .ss-website-fit__cell:last-child { box-shadow: inset 2px 0 0 var(--ss-capability-accent-border); }
[dir="rtl"] .ss-website-capfeat__table .ss-website-fit__row.is-different .ss-website-fit__cell:last-child { box-shadow: inset -2px 0 0 var(--ss-capability-accent-border); }
.ss-website-capfeat__products { display: grid; gap: 16px; }
@media (min-width: 640px) and (max-width: 1199px) { .ss-website-capfeat__products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-website-capfeat__products-title { grid-column: 1 / -1; } }
.ss-website-capfeat__products-title { font-size: var(--ss-size-h5); font-weight: 600; line-height: 1.3; color: var(--ss-text-1); }
/* Lite / Pro: two equal text cards — Lite light, Pro dark. No product imagery. */
.ss-website-capcard { position: relative; display: grid; align-content: start; gap: 14px; padding: clamp(24px, 1.25rem + 1vw, 32px); border-radius: var(--ss-radius-card); background: var(--ss-color-white); box-shadow: inset 0 0 0 1px var(--ss-line), 0 10px 30px rgba(11, 13, 18, 0.05); }
.ss-website-capcard__mark { display: block; width: auto; height: 24px; }
.ss-website-capcard--pro { background: radial-gradient(120% 90% at 85% 0%, rgba(0, 113, 206, 0.32), transparent 60%), linear-gradient(160deg, #0A2A5E 0%, #061A3D 55%, #030D24 100%); color: #FFFFFF; box-shadow: 0 0 0 1px rgba(120, 170, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px rgba(3, 13, 36, 0.32); }
.ss-website-capcard--pro .ss-website-capcard__name { color: #FFFFFF; }
.ss-website-capcard--pro .ss-website-capcard__body { color: rgba(255, 255, 255, 0.74); }
.ss-website-capcard--pro .ss-website-text-link { color: #FFFFFF; }
.ss-website-capcard__name { font-size: var(--ss-size-h4); font-weight: 700; color: var(--ss-text-1); }
.ss-website-capcard__body { font-size: var(--ss-size-body); line-height: 1.6; color: var(--ss-text-2); }

/* ---------- 4 · Smarter analysis ---------- */
.ss-website-capai__inset { position: relative; overflow: hidden; padding: clamp(32px, 1.5rem + 3vw, 72px) clamp(20px, 1rem + 3vw, 64px); }
.ss-website-capai__glow { position: absolute; left: 50%; top: 42%; z-index: 0; width: min(900px, 120%); aspect-ratio: 1.8; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ss-capability-accent-glow) 16%, transparent), transparent); pointer-events: none; }
.ss-website-capai__inset > * { position: relative; }
.ss-website-capai .ss-website-eyebrow { color: var(--ss-capability-accent-glow); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.ss-website-capai .ss-website-title { color: var(--ss-color-white); }
.ss-website-capai__items { display: grid; gap: 12px; margin-top: clamp(28px, 1.5rem + 1.5vw, 44px); }
@media (min-width: 900px) { .ss-website-capai__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ss-website-capai__item { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ss-website-capai__item.is-focus { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-capability-accent-glow) 45%, transparent); }
.ss-website-capai__item-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; color: var(--ss-capability-accent-glow); background: rgba(255, 255, 255, 0.06); }
.ss-website-capai__item-icon .ss-website-icon { width: 17px; height: 17px; }
.ss-website-capai__item h3 { font-size: var(--ss-size-control); font-weight: 600; color: var(--ss-color-white); }
.ss-website-capai__item p { margin-top: 4px; font-size: var(--ss-size-small); line-height: 1.55; color: var(--ss-text-inverse-2); }
.ss-website-capai__note { margin-top: var(--ss-space-5); text-align: center; font-size: var(--ss-size-micro); line-height: 1.6; color: var(--ss-text-inverse-3); }

/* Phones: keep every piece of content, drop the decorative extras that only add length. */
@media (max-width: 639px) {
  .ss-website-journey__stages { gap: 36px; }
    .ss-website-capfeat__desc { font-size: var(--ss-size-micro); line-height: 1.5; }
  .ss-website-capfeat__table .ss-website-fit__feature { padding-bottom: 2px; }
  .ss-website-capai__items { gap: 8px; }
  .ss-website-capai__item { padding: 12px; }
}

/* ==========================================================================
   Capability colour system v2 (2026-10-13) — the Home philosophy.
   The page is no longer coated in its C.L.I.C. colour. Foundation: ink / off-white / neutrals.
   Colour follows the ROLE of each element:
   · success (Included, verified) → green · limited → sun · progress + platform → signature blue
   · AI → aqua · the capability's own contextual accent (--ss-context) → only its hero light,
     icon mark and product-display glow. Identity comes from the subject-specific visuals.
   ========================================================================== */
.ss-website-capability-page[data-ss-clic] {
  --ss-accent: #0B0D12; --ss-accent-ink: #0B0D12; --ss-accent-bright: #FFFFFF;
  --ss-accent-soft: #F6F7F9; --ss-accent-tint: #F6F7F9; --ss-accent-surface: #ECEEF2; --ss-accent-border: #D4D8DF;
  --ss-capability-accent: #0B0D12; --ss-capability-accent-dark: #0B0D12; --ss-capability-accent-soft: #F6F7F9;
  --ss-capability-accent-surface: #ECEEF2; --ss-capability-accent-border: #D4D8DF; --ss-capability-accent-glow: var(--ss-home-ai-glow);
  --ss-progress-blue: #0071CE; --ss-progress-soft: #E6F1FB; --ss-progress-border: rgba(0, 113, 206, 0.3);
}
.ss-website-capability-page[data-ss-clic="construction"] { --ss-context: var(--ss-home-coral); --ss-context-ink: var(--ss-home-coral-ink); --ss-context-soft: var(--ss-home-coral-tint); }
.ss-website-capability-page[data-ss-clic="labour"] { --ss-context: var(--ss-home-violet); --ss-context-ink: var(--ss-home-violet-ink); --ss-context-soft: var(--ss-home-violet-tint); }
.ss-website-capability-page[data-ss-clic="inventory"] { --ss-context: var(--ss-home-green); --ss-context-ink: var(--ss-home-green-ink); --ss-context-soft: var(--ss-home-green-tint); }
.ss-website-capability-page[data-ss-clic="cost"] { --ss-context: var(--ss-home-magenta); --ss-context-ink: var(--ss-home-magenta-ink); --ss-context-soft: var(--ss-home-magenta-tint); }

/* Eyebrows: neutral pills (as on Home). */
.ss-website-capability-page .ss-website-eyebrow { color: #3B4049; background: #F6F7F9; border-color: #E2E5EA; }
.ss-website-capability-page.ss-website-section--dark .ss-website-eyebrow, .ss-website-capability-page .ss-website-capai .ss-website-eyebrow { color: rgba(255, 255, 255, 0.86); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
/* Hero: the contextual accent lives here only — ambient light + the capability mark. */
.ss-website-cap-hero__light { background: radial-gradient(48% 60% at 78% 46%, color-mix(in srgb, var(--ss-context, #0071CE) 12%, transparent), transparent 70%); }
.ss-website-capability-page .ss-website-cap-hero .ss-website-icon-tile { color: var(--ss-context-ink, #0071CE); background: var(--ss-context-soft, #E6F1FB); }
/* AI cue in the hero: aqua (AI), not the category colour. */
.ss-website-cap-hero__ai { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-home-ai) 35%, transparent), 0 6px 16px rgba(2, 4, 15, 0.06); }
.ss-website-cap-hero__ai-icon { color: var(--ss-home-ai-ink); background: var(--ss-home-ai-tint); }
/* Feature table: Included = success; limited = sun; differences flagged in signature blue. */
.ss-website-capability-page .ss-website-avail--yes .ss-website-icon { background: var(--ss-home-green); color: #FFFFFF; }
.ss-website-capability-page .ss-website-avail--limited .ss-website-icon { background: var(--ss-home-sun-tint); color: var(--ss-home-sun-ink); }
.ss-website-capfeat__table .ss-website-fit__row.is-different > :first-child { box-shadow: inset 3px 0 0 var(--ss-progress-border); }
[dir="rtl"] .ss-website-capfeat__table .ss-website-fit__row.is-different > :first-child { box-shadow: inset -3px 0 0 var(--ss-progress-border); }
.ss-website-capfeat__ai-row > * { background-color: color-mix(in srgb, var(--ss-home-ai-tint) 60%, transparent); }
.ss-website-capfeat__name .ss-website-icon { color: var(--ss-home-ai-ink); }
/* Journey: progress through the workflow is platform progress → signature blue; checks neutral. */
.ss-website-capability-page .ss-website-journey__num { color: #005A9E; background: var(--ss-progress-soft); border-color: var(--ss-progress-border); }
.ss-website-capability-page .ss-website-journey__points .ss-website-icon { color: var(--ss-home-green-ink); }
@media (min-width: 1024px) {
  .ss-website-capability-page .ss-website-journey__fill { background: linear-gradient(180deg, transparent, var(--ss-progress-blue) 30%); }
  .ss-website-capability-page .ss-website-journey__signal { background: var(--ss-progress-blue); box-shadow: 0 0 0 5px var(--ss-progress-soft), 0 0 18px var(--ss-progress-border); animation-name: ss-journey-signal-blue; }
  .ss-website-capability-page .is-story .ss-website-journey__stage.is-active .ss-website-journey__num,
  .ss-website-capability-page.is-story .ss-website-journey__stage.is-active .ss-website-journey__num { box-shadow: inset 0 0 0 1px var(--ss-progress-border), 0 0 0 4px var(--ss-progress-soft), 0 10px 24px rgba(2, 4, 15, 0.08); }
}
/* FAQ open state: ink. Text links: ink. */
.ss-website-capability-page .ss-website-faq__item[open] .ss-website-faq__toggle { background: #0B0D12; border-color: #0B0D12; }
@keyframes ss-journey-signal-blue { 50% { box-shadow: 0 0 0 8px var(--ss-progress-soft), 0 0 22px var(--ss-progress-border); } }
.ss-website-capcard { grid-template-rows: auto auto auto 1fr; }
.ss-website-capcard > .ss-website-text-link { align-self: end; }

/* Phones: journey bullets are a light checklist (no card per point) so each stage stays one screen. */
@media (max-width: 767px) {
  .ss-website-journey__points { gap: 6px; }
  .ss-website-journey__points li { padding: 2px 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* About story as a chapter carousel: photo first, then the chapter text. */
  /* One stage at a time: a defined card — 01 · title · visual · points — with ← → beneath. */
  .ss-website-journey__stages.is-carousel > .ss-website-journey__stage { --ss-slide: 90%; align-content: start; gap: 12px; padding: 18px 18px 20px; border-radius: var(--ss-radius-card); background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px var(--ss-line), 0 14px 34px rgba(2, 4, 15, 0.07); }
  .ss-website-journey__stages.is-carousel .ss-website-journey__media { width: 100%; margin: 4px 0; }
  .ss-website-about-story .ss-website-journey__stages.is-carousel .ss-website-journey__media { order: -1; }
}

@media (max-width: 767px) {
  .ss-website-capfeat__table .ss-website-fit__row.is-different .ss-website-fit__cell:last-child { box-shadow: none; }
}

/* Comparison: the Pricing matrix (.ss-website-fitx) with the feature title + a short note. */
.ss-website-capfeat__fitx { width: 100%; max-width: none; }
.ss-website-capfeat__fitx .ss-website-capfeat__name { font-size: var(--ss-size-small); }
.ss-website-capfeat__fitx .ss-website-capfeat__desc { font-size: var(--ss-size-micro); color: var(--ss-text-2); }
@media (max-width: 639px) { .ss-website-capfeat__fitx .ss-website-capfeat__desc { display: none; } }

/* ==== ss-website-ai-flow.css ==== */
/* ==========================================================================
   Smarter analysis: the shared aiFlow system (Home + capability pages).
   Same family as the Home data flow: loose dashed lanes in → AI hub → one solid lane out →
   a light product insight card with its reviewer. Sits on dark insets.
   ========================================================================== */
.ss-website-aiflow {
  --ss-af: var(--ss-capability-accent-glow, #6FB7FF);
  position: relative; display: grid; margin: clamp(32px, 2rem + 2vw, 56px) 0 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lin" "src" "din" "hub" "dout" "lout" "res" "cap";
  justify-items: stretch;
}
@media (min-width: 900px) {
  .ss-website-aiflow {
    grid-template-columns: minmax(0, 1fr) clamp(56px, 7vw, 110px) auto clamp(40px, 5vw, 80px) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "lin . . . lout" "src wires hub out res" "cap cap cap cap cap";
    align-items: center;
  }
}
.ss-website-aiflow__label { font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-inverse-3); }
[dir="rtl"] .ss-website-aiflow__label { letter-spacing: 0; }
.ss-website-aiflow__label--in { grid-area: lin; margin-bottom: 10px; }
.ss-website-aiflow__label--out { grid-area: lout; margin-bottom: 10px; }
.ss-website-aiflow__label--hub { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap; color: var(--ss-af); }

/* Sources: three record rows (equal height so the lanes meet their centres). */
.ss-website-aiflow__sources { grid-area: src; display: grid; grid-template-rows: repeat(3, 1fr); }
.ss-website-aiflow__sources li { display: flex; align-items: center; padding-block: 5px; }
@media (min-width: 900px) { .ss-website-aiflow__sources { align-self: stretch; } }
.ss-website-aiflow__card { display: grid; grid-template-columns: 34px minmax(0, 1fr) 8px; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.22); }
.ss-website-aiflow__src-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ss-af); background: color-mix(in srgb, var(--ss-af) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-af) 22%, transparent); }
.ss-website-aiflow__src-icon .ss-website-icon { width: 17px; height: 17px; }
.ss-website-aiflow__src-text { min-width: 0; font-size: var(--ss-size-small); font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, 0.92); }
.ss-website-aiflow__led { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-af); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-af) 22%, transparent); }

/* Lanes in (desktop): dashed, converging; the dash travels toward the hub. */
.ss-website-aiflow__wires { grid-area: wires; display: none; align-self: stretch; width: 100%; height: 100%; overflow: visible; }
[dir="rtl"] .ss-website-aiflow__wires { transform: scaleX(-1); }
.ss-website-aiflow__lane { fill: none; stroke: color-mix(in srgb, var(--ss-af) 70%, transparent); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Lane out (desktop): solid and even — the information is ordered once interpreted. */
.ss-website-aiflow__out { grid-area: out; display: none; position: relative; height: 2px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--ss-af) 30%, transparent), var(--ss-af)); }
[dir="rtl"] .ss-website-aiflow__out { background: linear-gradient(270deg, color-mix(in srgb, var(--ss-af) 30%, transparent), var(--ss-af)); }
.ss-website-aiflow__out i { position: absolute; top: 50%; inset-inline-start: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ss-af) 35%, transparent), 0 0 14px var(--ss-af); opacity: 0; }
/* Phones / tablets: short vertical drops between the stacked parts. */
.ss-website-aiflow__drop { position: relative; justify-self: center; width: 2px; height: 34px; margin-block: 6px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--ss-af) 70%, transparent) 0 3px, transparent 3px 9px); }
.ss-website-aiflow__drop--in { grid-area: din; }
.ss-website-aiflow__drop--out { grid-area: dout; margin-bottom: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--ss-af) 30%, transparent), var(--ss-af)); }
.ss-website-aiflow__drop i { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 10px var(--ss-af); opacity: 0; }
@media (min-width: 900px) {
  .ss-website-aiflow__wires, .ss-website-aiflow__out { display: block; }
  .ss-website-aiflow__drop { display: none; }
}

/* Hub: the same ring language as the Home record hub, in the area's light. */
.ss-website-aiflow__hub { grid-area: hub; position: relative; justify-self: center; display: grid; place-items: center; width: clamp(136px, 12vw, 176px); aspect-ratio: 1; margin-bottom: 26px; }
@media (min-width: 900px) { .ss-website-aiflow__hub { margin-bottom: 0; } }
.ss-website-aiflow__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ss-website-aiflow__glow { fill: color-mix(in srgb, var(--ss-af) 9%, transparent); }
.ss-website-aiflow__ring { fill: none; stroke: color-mix(in srgb, var(--ss-af) 30%, transparent); stroke-width: 1; }
.ss-website-aiflow__ring--mid { stroke-opacity: 0.8; }
.ss-website-aiflow__ring--outer { stroke-dasharray: 2 5; stroke: color-mix(in srgb, var(--ss-af) 55%, transparent); }
.ss-website-aiflow__sat { fill: var(--ss-af); }
.ss-website-aiflow__orbit { transform-origin: 0 0; }
.ss-website-aiflow__core { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; width: 64%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.98), #EEF3FA); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 46px color-mix(in srgb, var(--ss-af) 35%, transparent); }
.ss-website-aiflow__core img { width: 36%; height: auto; }
.ss-website-aiflow__core-ai { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #FFFFFF; background: linear-gradient(135deg, #0071CE, #5A3FD6); }
.ss-website-aiflow__core-ai .ss-website-icon { width: 15px; height: 15px; }
.ss-website-aiflow__beat { display: flex; gap: 3px; }
.ss-website-aiflow__beat i { width: 10px; height: 3px; border-radius: 2px; background: rgba(0, 113, 206, 0.22); }

/* Result: the insight card (light product surface). Also used alone (Home product crops). */
.ss-website-aiflow__result { grid-area: res; min-width: 0; }
@media (max-width: 899px) { .ss-website-aiflow__result { margin-inline: 10px; } }
.ss-website-aiflow__insight { display: grid; gap: 8px; padding: 16px 18px 14px; border-radius: 16px; background: #FFFFFF; color: #0B0D12; box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.06), 0 22px 50px rgba(0, 0, 0, 0.3), 0 0 0 6px color-mix(in srgb, var(--ss-af, #6FB7FF) 14%, transparent); }
.ss-website-aiflow__insight-kind { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; color: #4B5563; }
.ss-website-aiflow__insight-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #0071CE; background: #EAF3FC; }
.ss-website-aiflow__insight-icon .ss-website-icon { width: 14px; height: 14px; }
.ss-website-aiflow__insight-ai { margin-inline-start: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #FFFFFF; background: linear-gradient(135deg, #0071CE, #5A3FD6); }
.ss-website-aiflow__insight-ai .ss-website-icon { width: 12px; height: 12px; }
.ss-website-aiflow__insight-title { font-size: var(--ss-size-control, 1rem); font-weight: 700; line-height: 1.35; color: #0B0D12; }
.ss-website-aiflow__insight-body { font-size: var(--ss-size-small); line-height: 1.55; color: #4B5563; }
.ss-website-aiflow__insight-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid #EEF0F3; }
.ss-website-aiflow__insight-foot img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ss-website-aiflow__insight-foot span { display: grid; min-width: 0; line-height: 1.25; }
.ss-website-aiflow__insight-foot b { font-size: 0.8125rem; font-weight: 600; color: #0B0D12; }
.ss-website-aiflow__insight-foot small { font-size: 0.6875rem; color: #6B7280; }
.ss-website-aiflow__insight-foot em { margin-inline-start: auto; flex: none; padding: 4px 9px; border-radius: 999px; font-style: normal; font-size: 0.6875rem; font-weight: 700; color: #92400E; background: #FEF3C7; }
.ss-website-aiflow__caption { grid-area: cap; margin-top: 18px; text-align: center; font-size: var(--ss-size-micro); color: var(--ss-text-inverse-3); }

/* Motion (plays once on view, then the lanes keep a quiet pulse while visible). Final state
   without JS or with reduced motion: everything visible, nothing moving. */
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js [data-ss-capai] .ss-website-aiflow__sources li { opacity: 0; translate: 0 8px; transition: opacity var(--ss-motion-card) var(--ss-ease-out), translate var(--ss-motion-card) var(--ss-ease-out); transition-delay: calc(var(--ss-i) * 90ms); }
  .ss-website-js [data-ss-capai] :is(.ss-website-aiflow__wires, .ss-website-aiflow__out, .ss-website-aiflow__drop) { opacity: 0; transition: opacity var(--ss-motion-large) var(--ss-ease-out) 320ms; }
  .ss-website-js [data-ss-capai] .ss-website-aiflow__hub { opacity: 0; scale: 0.92; transition: opacity var(--ss-motion-card) var(--ss-ease-out) 420ms, scale var(--ss-motion-large) var(--ss-ease-out) 420ms; }
  .ss-website-js [data-ss-capai] .ss-website-aiflow__result { opacity: 0; translate: 0 10px; transition: opacity var(--ss-motion-card) var(--ss-ease-out) 820ms, translate var(--ss-motion-card) var(--ss-ease-out) 820ms; }
  .ss-website-js [data-ss-capai].is-played :is(.ss-website-aiflow__sources li, .ss-website-aiflow__wires, .ss-website-aiflow__out, .ss-website-aiflow__drop, .ss-website-aiflow__hub, .ss-website-aiflow__result) { opacity: 1; translate: 0 0; scale: 1; }
  .ss-website-js [data-ss-capai].is-played .ss-website-aiflow__lane { animation: ss-aiflow-dash 1.4s linear infinite; animation-delay: calc(var(--ss-i) * -0.35s); }
  .ss-website-js [data-ss-capai].is-played .ss-website-aiflow__orbit { animation: ss-aiflow-orbit 36s linear infinite; }
  .ss-website-js [data-ss-capai].is-played .ss-website-aiflow__beat i { animation: ss-aiflow-beat 1.6s var(--ss-ease-in-out) infinite; }
  .ss-website-js [data-ss-capai].is-played .ss-website-aiflow__beat i:nth-child(2) { animation-delay: 0.2s; }
  .ss-website-js [data-ss-capai].is-played .ss-website-aiflow__beat i:nth-child(3) { animation-delay: 0.4s; }
  .ss-website-js [data-ss-capai].is-played .ss-website-aiflow__out i { animation: ss-aiflow-travel 2.2s var(--ss-ease-in-out) 1s infinite; }
  .ss-website-js [data-ss-capai].is-played .ss-website-aiflow__drop i { animation: ss-aiflow-drop 1.8s var(--ss-ease-in-out) 0.8s infinite; }
}
@keyframes ss-aiflow-dash { to { stroke-dashoffset: -18; } }
@keyframes ss-aiflow-orbit { to { transform: rotate(360deg); } }
@keyframes ss-aiflow-beat { 0%, 100% { background: rgba(0, 113, 206, 0.22); } 35% { background: #0071CE; } }
@keyframes ss-aiflow-travel { 0% { inset-inline-start: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { inset-inline-start: calc(100% - 8px); opacity: 0; } }
@keyframes ss-aiflow-drop { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } }

/* ==== ss-website-company.css ==== */
/* About, Pricing and conversion (Contact / Demo) pages. */

/* ---------- About ---------- */
/* Hero: eyebrow + H1, centred, in a contained dark field (the cloud atmosphere stays). */
.ss-website-about-hero { display: grid; align-items: center; min-height: min(76vh, 720px); padding-top: calc(var(--ss-header-h) + clamp(32px, 2rem + 2vw, 72px)); overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #061237 0%, var(--ss-color-ink) 62%); }
.ss-website-about-hero__copy { display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; }
.ss-website-about-hero__copy .ss-website-title { max-width: 16ch; }
[lang="ar"] .ss-website-about-hero__copy .ss-website-title { max-width: 18ch; }

/* Who we are: one large statement revealed word by word; a minimal gallery and two cloud
   layers drift at their own speeds. Pinned (≈2 screens) on wide screens with motion. */
.ss-website-who { position: relative; overflow: clip; }
.ss-website-who__sticky { position: relative; display: grid; align-items: center; isolation: isolate; }
.ss-website-who__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; }
.ss-website-who__eyebrow { margin: 0; }
.ss-website-who__text { max-width: 36ch; font-size: clamp(1.375rem, 0.9rem + 1.55vw, 2.25rem); font-weight: 600; line-height: 1.32; letter-spacing: -0.015em; color: var(--ss-text-1); text-wrap: pretty; }
[lang="ar"] .ss-website-who__text { max-width: 32ch; line-height: 1.6; letter-spacing: 0; }
.ss-website-who__word { color: rgba(2, 4, 15, 0.45); transition: color 320ms var(--ss-ease-out); }
.ss-website-who__word.is-on { color: var(--ss-text-1); }
.ss-website-who__clouds, .ss-website-who__gallery { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ss-website-who__cloud { position: absolute; width: min(46vw, 620px); height: auto; fill: rgba(214, 231, 248, 0.75); }
.ss-website-who__cloud--a { left: -10%; bottom: 2%; transform: translateY(calc(var(--ss-progress, 0) * -160px)); }
.ss-website-who__cloud--b { right: -12%; top: 6%; width: min(36vw, 480px); fill: rgba(226, 238, 250, 0.85); transform: translateY(calc(var(--ss-progress, 0) * -80px)); }
.ss-website-who__gallery { display: none; }
.ss-website-who__photo { position: absolute; display: block; height: auto; border-radius: 16px; object-fit: cover; box-shadow: 0 24px 50px rgba(2, 4, 15, 0.12); opacity: 0.92; }
.ss-website-who__photo--0 { top: 10%; left: -2%; width: clamp(160px, 15vw, 230px); aspect-ratio: 4 / 5; transform: translateY(calc((0.5 - var(--ss-progress, 0.5)) * 140px)); }
.ss-website-who__photo--1 { bottom: 9%; left: 5%; width: clamp(180px, 17vw, 260px); aspect-ratio: 16 / 11; transform: translateY(calc((0.5 - var(--ss-progress, 0.5)) * 70px)); }
.ss-website-who__photo--2 { top: 13%; right: -3%; width: clamp(160px, 15vw, 230px); aspect-ratio: 4 / 5; transform: translateY(calc((0.5 - var(--ss-progress, 0.5)) * 100px)); }
.ss-website-who__photo--3 { bottom: 11%; right: 4%; width: clamp(180px, 17vw, 260px); aspect-ratio: 16 / 11; transform: translateY(calc((0.5 - var(--ss-progress, 0.5)) * 160px)); }
@media (min-width: 1200px) { .ss-website-who__gallery { display: block; } }
@media (min-width: 1200px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-who { height: 170vh; padding-block: 0; }
  .ss-website-js .ss-website-who__sticky { position: sticky; top: 0; height: 100vh; padding-top: var(--ss-header-h); }
}
@media (prefers-reduced-motion: reduce) { .ss-website-who__word { color: var(--ss-text-1); } .ss-website-who__cloud, .ss-website-who__photo { transform: none; } }
html:not(.ss-website-js) .ss-website-who__word { color: var(--ss-text-1); }

/* Our purpose: intro → Mission → Vision. Pinned on wide screens with motion (vars from scenes.js);
   elsewhere the intro and the two equal cards simply stack. */
.ss-website-purpose__stage { display: grid; gap: var(--ss-space-6); }
.ss-website-purpose__intro { display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; }
.ss-website-purpose__intro .ss-website-title { max-width: 18ch; }
.ss-website-purpose__card { display: grid; gap: var(--ss-space-4); align-content: start; padding: clamp(28px, 1.5rem + 2.5vw, 56px); border-radius: var(--ss-radius-panel); background: rgba(255, 255, 255, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 0 1px var(--ss-line), var(--ss-elev-3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ss-website-purpose__label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ss-size-eyebrow); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-color-blue-strong); }
.ss-website-purpose__label .ss-website-icon { width: 18px; height: 18px; color: var(--ss-color-blue); }
.ss-website-purpose__body { font-size: var(--ss-size-lead); line-height: 1.6; color: var(--ss-text-2); }
@media (min-width: 768px) { .ss-website-purpose__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-website-purpose__intro { grid-column: 1 / -1; } }
@media (min-width: 1024px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-purpose { height: 200vh; padding-block: 0; }
  .ss-website-js .ss-website-purpose__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .ss-website-js .ss-website-purpose__stage { position: relative; display: block; height: 100%; }
  .ss-website-js .ss-website-purpose__intro, .ss-website-js .ss-website-purpose__card { position: absolute; top: 50%; left: 50%; will-change: transform, opacity; }
  .ss-website-js .ss-website-purpose__intro { width: min(100%, 900px); opacity: calc(1 - var(--ss-intro-out, 0)); transform: translate(-50%, calc(-50% - var(--ss-intro-out, 0) * 48px)); }
  .ss-website-js .ss-website-purpose__card { width: min(760px, 86%); }
  .ss-website-js .ss-website-purpose__card--mission { opacity: calc(var(--ss-card-in, 0) * (1 - var(--ss-swap, 0))); transform: translate(calc(-50% - var(--ss-swap, 0) * 72vw), calc(-50% + (1 - var(--ss-card-in, 0)) * 48px)); }
  .ss-website-js .ss-website-purpose__card--vision { opacity: var(--ss-swap, 0); transform: translate(calc(-50% + (1 - var(--ss-swap, 0)) * 72vw), -50%); }
  [dir="rtl"].ss-website-js .ss-website-purpose__card--mission { transform: translate(calc(-50% + var(--ss-swap, 0) * 72vw), calc(-50% + (1 - var(--ss-card-in, 0)) * 48px)); }
  [dir="rtl"].ss-website-js .ss-website-purpose__card--vision { transform: translate(calc(-50% - (1 - var(--ss-swap, 0)) * 72vw), -50%); }
}

/* Story chapters: one stage, a different visual per chapter. */
.ss-website-chapter { position: relative; aspect-ratio: 16 / 12; border-radius: var(--ss-radius-inset); overflow: hidden; background: radial-gradient(80% 70% at 80% 10%, rgba(0, 113, 206, 0.14), transparent 70%), linear-gradient(160deg, var(--ss-color-blue-mist), #fff); border: 1px solid rgba(0, 113, 206, 0.12); box-shadow: var(--ss-elev-4); }
.ss-website-chapter__panel { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(18px, 3vw, 40px); opacity: 0; transform: scale(0.98); transition: opacity var(--ss-dur-story) var(--ss-ease-out), transform var(--ss-dur-story) var(--ss-ease-out); }
.ss-website-chapter__panel.is-active { opacity: 1; transform: none; }
html:not(.ss-website-js) .ss-website-chapter__panel:first-child { opacity: 1; }
.ss-website-chapter__panel { padding: 0; }
.ss-website-chapter__panel > img { width: 100%; height: 100%; object-fit: cover; }
/* Story photography (About 05–09): each chapter's photograph fills the panel, clean (no
   overlays), and drifts slowly while active. */
.ss-website-chapter__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(1.06); transition: transform 6s linear; }
.ss-website-chapter__panel.is-active .ss-website-chapter__photo { transform: scale(1); }
/* Below 1024px the sticky stage is hidden: each chapter carries its own photograph inline. */
.ss-website-about-story__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--ss-radius-inset); }
.ss-website-about-story__media .ss-website-chapter__photo { position: static; transform: none; transition: none; object-position: 50% 30%; }
@media (prefers-reduced-motion: reduce) { .ss-website-chapter__photo { transform: none; transition: none; } }
/* Leadership: three equal cards (same size, portrait, hierarchy). Phones: a swipeable row. */
.ss-website-leaders { display: flex; gap: 16px; margin-top: calc(clamp(36px, 2rem + 2vw, 64px) - 16px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--ss-gutter) * -1); padding: 20px var(--ss-gutter) 34px; margin-bottom: -18px; }
.ss-website-leaders::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { ul.ss-website-leaders { padding: 20px var(--ss-gutter) 34px; } }  /* beats the ul[role=list] reset: room for card shadows */
.ss-website-leader { display: grid; grid-template-rows: auto 1fr; flex: 0 0 min(80vw, 340px); overflow: hidden; scroll-snap-align: center; border-radius: var(--ss-radius-card); background: var(--ss-color-white); box-shadow: inset 0 0 0 1px var(--ss-line), var(--ss-elev-1); transition: transform var(--ss-dur-base) var(--ss-ease-out), box-shadow var(--ss-dur-base); }
@media (min-width: 900px) { .ss-website-leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); overflow: visible; margin-inline: 0; padding: 0; margin-top: clamp(36px, 2rem + 2vw, 64px); margin-bottom: 0; } }
.ss-website-leader:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ss-line-strong), var(--ss-elev-2); }
.ss-website-leader__photo { margin: 0; aspect-ratio: 1; overflow: hidden; background: linear-gradient(180deg, #F1F5FB, #E3EBF6); }
/* The chair's official photo is landscape: frame it at the same apparent scale as the others. */
.ss-website-leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform-origin: 50% 100%; transition: transform var(--ss-dur-story) var(--ss-ease-out); }
.ss-website-leader:hover .ss-website-leader__photo img { transform: scale(1.03); }
.ss-website-leader__text { display: grid; gap: 8px; align-content: start; padding: clamp(20px, 1rem + 1vw, 28px); }
.ss-website-leader__role { font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-color-blue-strong); }
.ss-website-leader__name { font-size: var(--ss-size-h4); font-weight: 700; line-height: 1.2; color: var(--ss-text-1); }
.ss-website-leader__bio { font-size: var(--ss-size-small); line-height: 1.6; color: var(--ss-text-2); }
.ss-website-leader__links { display: flex; gap: 8px; margin-top: 6px; }
.ss-website-leader__links a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ss-text-2); box-shadow: inset 0 0 0 1px var(--ss-line); transition: color var(--ss-dur-fast), box-shadow var(--ss-dur-fast); }
.ss-website-leader__links a:hover { color: var(--ss-color-blue); box-shadow: inset 0 0 0 1px var(--ss-color-blue); }
.ss-website-journey__text { max-width: 52ch; color: var(--ss-text-2); }

/* ---------- Pricing ---------- */
.ss-website-pricing__hero { padding-top: calc(var(--ss-header-h) + clamp(48px, 2rem + 4vw, 112px)); overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #061237 0%, var(--ss-color-ink) 62%); }
.ss-website-pricing__header { display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; }
.ss-website-pricing__header .ss-website-title { max-width: 18ch; }
.ss-website-pricing__header .ss-website-lead { margin-inline: auto; }

/* ---------- Conversion pages ---------- */
.ss-website-conversion { padding-top: calc(var(--ss-header-h) + clamp(32px, 1.5rem + 3vw, 80px)); }
.ss-website-conversion::before { content: ""; position: absolute; inset: 0 0 auto; height: 640px; z-index: -1; background: radial-gradient(40% 60% at 20% 0%, rgba(0, 113, 206, 0.1), transparent 70%), linear-gradient(180deg, var(--ss-color-white), var(--ss-color-paper)); }
.ss-website-conversion__layout { display: grid; gap: var(--ss-space-7); align-items: start; }
@media (min-width: 1024px) { .ss-website-conversion__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ss-space-8); } .ss-website-conversion__form { position: sticky; top: calc(var(--ss-header-h) + 24px); } }
.ss-website-conversion__intro { display: grid; gap: var(--ss-space-5); justify-items: start; }
.ss-website-conversion__form { display: grid; gap: var(--ss-space-4); }
.ss-website-conversion__subhead { margin-top: var(--ss-space-4); font-size: var(--ss-size-h5); font-weight: 600; }
.ss-website-routes { display: grid; gap: 10px; width: 100%; }
.ss-website-route { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 16px; border-radius: var(--ss-radius-card); border: 1px solid var(--ss-line); background: var(--ss-color-white); text-align: start; transition: border-color var(--ss-dur-base) var(--ss-ease-out), box-shadow var(--ss-dur-base) var(--ss-ease-out); }
.ss-website-route:hover { border-color: var(--ss-color-blue-40); }
.ss-website-route[aria-pressed="true"] { border-color: var(--ss-color-blue); box-shadow: inset 0 0 0 1px var(--ss-color-blue), var(--ss-shadow-card); }
.ss-website-route__text { display: grid; gap: 4px; }
.ss-website-route__title { font-weight: 600; }
.ss-website-route__body { font-size: var(--ss-size-small); color: var(--ss-text-2); line-height: 1.5; }
.ss-website-direct { display: grid; gap: 10px; width: 100%; padding-top: var(--ss-space-5); border-top: 1px solid var(--ss-line); font-size: var(--ss-size-control); }
.ss-website-direct__title { font-weight: 600; margin-bottom: 4px; }
.ss-website-direct p { display: flex; align-items: center; gap: 10px; }
.ss-website-direct .ss-website-icon { width: 18px; height: 18px; color: var(--ss-color-blue); flex: none; }
.ss-website-direct a { color: var(--ss-color-blue); font-weight: 600; }
.ss-website-direct__customer { margin-top: 6px; padding: 12px 14px; border-radius: var(--ss-radius-md); background: var(--ss-color-white); border: 1px solid var(--ss-line); }
.ss-website-expect { display: grid; gap: var(--ss-space-4); width: 100%; padding-top: var(--ss-space-5); border-top: 1px solid var(--ss-line); }
.ss-website-expect > p { color: var(--ss-text-2); }
.ss-website-expect__list { display: grid; gap: var(--ss-space-5); margin-top: var(--ss-space-3); }
.ss-website-expect__list li { display: flex; gap: 14px; align-items: flex-start; }
.ss-website-expect__list p { color: var(--ss-text-2); font-size: var(--ss-size-control); margin-top: 4px; }
.ss-website-demo-band { display: grid; gap: var(--ss-space-5); align-items: center; }
.ss-website-demo-band p { color: var(--ss-text-inverse-2); }
@media (min-width: 900px) { .ss-website-demo-band { grid-template-columns: 1fr auto; } }

.ss-website-demo-band .ss-website-eyebrow { justify-self: start; }
.ss-website-demo-band > div { max-width: 640px; display: grid; gap: var(--ss-space-3); justify-items: start; }

/* About — principles on one track. */
.ss-website-principles__track { position: relative; display: grid; gap: var(--ss-space-4); margin-top: var(--ss-space-7); }
@media (min-width: 1024px) {
  .ss-website-principles__track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ss-space-5); }
  .ss-website-principles__track::before { content: ""; position: absolute; inset-inline: 0; top: 28px; height: var(--ss-rail-weight); background: linear-gradient(90deg, var(--ss-color-blue), var(--ss-color-blue-bright)); opacity: 0.35; }
  [dir="rtl"] .ss-website-principles__track::before { background: linear-gradient(-90deg, var(--ss-color-blue), var(--ss-color-blue-bright)); }
}
.ss-website-principles__item { position: relative; display: grid; gap: 10px; align-content: start; padding: 0 0 22px; border-radius: var(--ss-radius-panel); outline-offset: 6px; }
.ss-website-principles__node { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--ss-radius-card); color: #fff; background: var(--ss-accent); box-shadow: 0 0 0 6px #fff, 0 14px 30px color-mix(in srgb, var(--ss-accent) 40%, transparent); transition: transform var(--ss-dur-slow) var(--ss-ease-out); }
.ss-website-principles__node .ss-website-icon { width: 24px; height: 24px; }
.ss-website-principles__index { font-size: var(--ss-size-micro); font-weight: 700; color: var(--ss-accent-ink); margin-top: 8px; }
.ss-website-principles__item p { color: var(--ss-text-2); }
.ss-website-principles__item:hover .ss-website-principles__node, .ss-website-principles__item:focus-visible .ss-website-principles__node { transform: translateY(-4px) rotate(-4deg); }
.ss-website-about-who .ss-website-eyebrow { justify-self: start; }
.ss-website-leader__text { grid-template-rows: auto auto 1fr auto; }
/* Phones: feature checks become compact wrapping chips, so the recommendation stays a short scroll
   from the sliders and checks that drive it. */
@media (max-width: 639px) {
  .ss-website-calc__checks:not(:has(.ss-website-calc__check--radio)) { display: flex; flex-wrap: wrap; gap: 6px; }
  .ss-website-calc__checks:not(:has(.ss-website-calc__check--radio)) .ss-website-calc__check { min-height: 40px; padding: 8px 12px; border-radius: var(--ss-radius-pill); align-items: center; font-size: var(--ss-size-small); }
  .ss-website-calc__checks:not(:has(.ss-website-calc__check--radio)) .ss-website-calc__box { width: 16px; height: 16px; margin: 0; border-radius: 50%; background-size: 11px; }
  .ss-website-calc__inputs { gap: var(--ss-space-4); }
}

/* Phones: the "who we are" statement reads as a lead paragraph, start-aligned, not a 20-line display block. */
@media (max-width: 767px) {
  .ss-website-who__text { max-width: none; font-size: 1.1875rem; line-height: 1.5; letter-spacing: 0; text-align: start; }
}

/* Who we are below 1200px: editorial sequence (photo · lead · photo pair · paragraph · photo · paragraph). */
.ss-website-who__story { display: none; }
@media (max-width: 1199px) {
  .ss-website-who__inner { justify-items: stretch; text-align: start; }
  .ss-website-who__eyebrow { justify-self: start; }
  .ss-website-who__text { display: none; }
  .ss-website-who__story { display: grid; gap: 20px; max-width: 640px; }
  .ss-website-who__story p { font-size: var(--ss-size-lead); line-height: 1.6; color: var(--ss-text-2); }
  .ss-website-who__story .ss-website-who__lead { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 600; line-height: 1.4; color: var(--ss-text-1); }
  .ss-website-who__shot { display: block; width: 100%; height: auto; border-radius: var(--ss-radius-card); object-fit: cover; box-shadow: 0 18px 40px rgba(2, 4, 15, 0.1); }
  .ss-website-who__shot--wide { aspect-ratio: 16 / 10; }
  .ss-website-who__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ss-website-who__pair .ss-website-who__shot { aspect-ratio: 4 / 5; }
  .ss-website-who__clouds { opacity: 0.5; }
}

/* Leadership below 900px: all three as full-width cards, scrolled naturally (never a carousel). */
@media (max-width: 899px) {
  ul.ss-website-leaders { display: grid; gap: 20px; overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }
  .ss-website-leader { flex: none; }
  .ss-website-leader__photo { aspect-ratio: 5 / 4; }
}

/* ==== ss-website-pricing.css ==== */
/* ==========================================================================
   Pricing: overview cards · Lite estimator · Pro configurator · Find your fit · rates.
   Lite = light (white, off-white, near-black type). Pro = deep blue, white type.
   Tables stay neutral so they scan.
   ========================================================================== */
.ss-website-pricing__currency { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--ss-space-4); font-size: var(--ss-size-small); color: var(--ss-text-inverse-2); }
.ss-website-pricing__currency .ss-website-icon { width: 16px; height: 16px; }

/* ---------- Overview cards: one internal layout for both products ---------- */
.ss-website-pcards { display: grid; gap: 20px; max-width: 1080px; margin-inline: auto; }
@media (min-width: 900px) { .ss-website-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.ss-website-pcard { display: grid; grid-template-rows: auto auto auto auto 1fr auto; align-content: start; gap: 16px; padding: clamp(24px, 1.2rem + 1.4vw, 40px); border-radius: var(--ss-radius-card); background: linear-gradient(180deg, #FFFFFF, #F7F8FA); box-shadow: inset 0 0 0 1px var(--ss-line), 0 18px 44px rgba(11, 13, 18, 0.06); }
.ss-website-pcard--pro { color: #FFFFFF; background: radial-gradient(120% 80% at 85% 0%, rgba(0, 113, 206, 0.3), transparent 60%), linear-gradient(160deg, #0A2A5E 0%, #061A3D 55%, #030D24 100%); box-shadow: 0 0 0 1px rgba(120, 170, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 50px rgba(3, 13, 36, 0.3); }
.ss-website-pcard__title { font-size: var(--ss-size-h4); font-weight: 700; line-height: 1.25; color: var(--ss-text-1); }
.ss-website-pcard__lead { color: var(--ss-text-2); line-height: 1.6; }
.ss-website-pcard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 16px; border-top: 1px solid var(--ss-line); }
.ss-website-pcard__from { font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-2); }
.ss-website-pcard__amount { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ss-text-1); font-variant-numeric: tabular-nums; }
[dir="rtl"] .ss-website-pcard__amount { letter-spacing: 0; }
.ss-website-pcard__unit { flex-basis: 100%; font-size: var(--ss-size-small); color: var(--ss-text-2); }
.ss-website-pcard__min { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: rgba(11, 13, 18, 0.035); box-shadow: inset 0 0 0 1px var(--ss-line); }
.ss-website-pcard__min-label { font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
[dir="rtl"] .ss-website-pcard__min-label { letter-spacing: 0; }
.ss-website-pcard__min-value b { font-size: var(--ss-size-h4); font-weight: 700; color: var(--ss-text-1); font-variant-numeric: tabular-nums; }
.ss-website-pcard__min-value span { font-size: var(--ss-size-small); color: var(--ss-text-2); }
.ss-website-pcard__signals { display: grid; align-content: start; margin: 0; }
.ss-website-pcard__signals div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--ss-line); }
.ss-website-pcard__signals dt { font-size: var(--ss-size-small); color: var(--ss-text-2); }
.ss-website-pcard__signals dd { margin: 0; text-align: end; font-size: var(--ss-size-small); color: var(--ss-text-2); }
.ss-website-pcard__signals dd b { font-weight: 700; color: var(--ss-text-1); font-variant-numeric: tabular-nums; }
.ss-website-pcard__actions { display: grid; gap: 10px; align-self: end; align-content: end; padding-top: 4px; }
.ss-website-pcard__actions .ss-website-button { justify-content: center; width: 100%; }
.ss-website-pcard--pro :is(.ss-website-pcard__title, .ss-website-pcard__amount, .ss-website-pcard__min-value b, .ss-website-pcard__signals dd b) { color: #FFFFFF; }
.ss-website-pcard--pro :is(.ss-website-pcard__lead, .ss-website-pcard__from, .ss-website-pcard__unit, .ss-website-pcard__min-value span, .ss-website-pcard__signals dt, .ss-website-pcard__signals dd) { color: rgba(255, 255, 255, 0.72); }
.ss-website-pcard--pro .ss-website-pcard__min-label { color: rgba(255, 255, 255, 0.56); }
.ss-website-pcard--pro :is(.ss-website-pcard__price, .ss-website-pcard__signals div) { border-color: rgba(255, 255, 255, 0.12); }
.ss-website-pcard--pro .ss-website-pcard__min { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.ss-website-pcard--pro .ss-website-family__tag { color: rgba(255, 255, 255, 0.86); }
/* Neutral CTAs: white on the deep-blue surfaces. */
.ss-website-pcard--pro .ss-website-button--primary { --ss-btn-bg: #F4F5F7; --ss-btn-fg: #0B0D12; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); }
.ss-website-pcard--pro .ss-website-button--primary:hover { --ss-btn-bg: #FFFFFF; }

/* Card details zone: Lite = minimum + key rates; Pro = what the custom quote reflects. */
.ss-website-pcard__details { display: grid; align-content: start; gap: 14px; }
.ss-website-pcard__custom { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: #FFFFFF; }
[dir="rtl"] .ss-website-pcard__custom { letter-spacing: 0; }
.ss-website-pcard__factors { display: grid; gap: 0; }
@media (min-width: 480px) { .ss-website-pcard__factors { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
.ss-website-pcard__factors li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--ss-size-small); color: rgba(255, 255, 255, 0.86); }
.ss-website-pcard__factors .ss-website-icon { flex: none; width: 16px; height: 16px; color: #7DB4E6; }

/* ---------- Lite estimator ---------- */
.ss-website-est { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .ss-website-est { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: clamp(28px, 3vw, 48px); } }
.ss-website-est__inputs { display: grid; gap: 22px; }
.ss-website-est__grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .ss-website-est__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ss-website-qty { display: grid; grid-template-rows: auto auto auto; gap: 8px; padding: 16px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ss-line), 0 6px 16px rgba(11, 13, 18, 0.04); }
.ss-website-qty__head { display: grid; gap: 2px; }
.ss-website-qty__head label { font-weight: 600; color: var(--ss-text-1); }
.ss-website-qty__hint { font-size: var(--ss-size-micro); line-height: 1.45; color: var(--ss-text-3); }
.ss-website-qty__control { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.ss-website-qty__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ss-text-1); background: var(--ss-color-mist, #F1F3F6); transition: background-color var(--ss-motion-fast), transform var(--ss-motion-fast); }
.ss-website-qty__btn:hover { background: #E6E9EE; }
.ss-website-qty__btn:active { transform: scale(0.96); }
.ss-website-qty__btn .ss-website-icon { width: 18px; height: 18px; }
.ss-website-qty__control input { width: 100%; height: 44px; border: 1px solid var(--ss-line-strong); border-radius: 12px; background: #FFFFFF; text-align: center; font: inherit; font-size: var(--ss-size-h5, 1.125rem); font-weight: 700; color: var(--ss-text-1); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.ss-website-qty__control input::-webkit-outer-spin-button, .ss-website-qty__control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ss-website-qty__control input:focus-visible, .ss-website-qty__btn:focus-visible { outline: 2px solid #0071CE; outline-offset: 2px; }
.ss-website-qty__rate { min-height: 1.3em; font-size: var(--ss-size-micro); font-weight: 600; color: var(--ss-text-2); font-variant-numeric: tabular-nums; }
.ss-website-qty__rate.is-custom { color: #B45309; }
.ss-website-billing { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ss-website-billing legend { margin-bottom: 10px; padding: 0; font-weight: 600; color: var(--ss-text-1); }
.ss-website-billing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-website-billing label { position: relative; display: block; cursor: pointer; }
.ss-website-billing input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ss-website-billing span { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; min-height: 52px; padding: 10px 14px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ss-line-strong); font-weight: 600; color: var(--ss-text-2); transition: box-shadow var(--ss-motion-fast), color var(--ss-motion-fast); }
.ss-website-billing span em { font-style: normal; font-size: var(--ss-size-micro); font-weight: 700; color: #047857; }
.ss-website-billing input:checked + span { color: var(--ss-text-1); box-shadow: inset 0 0 0 2px #0B0D12, 0 6px 16px rgba(11, 13, 18, 0.08); }
.ss-website-billing input:focus-visible + span { outline: 2px solid #0071CE; outline-offset: 2px; }
.ss-website-est__more { border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ss-line); }
.ss-website-est__more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 18px; font-weight: 600; color: var(--ss-text-1); cursor: pointer; list-style: none; }
.ss-website-est__more summary::-webkit-details-marker { display: none; }
.ss-website-est__more summary .ss-website-icon { width: 18px; height: 18px; transition: transform var(--ss-motion-ui) var(--ss-ease-out); }
.ss-website-est__more[open] summary .ss-website-icon { transform: rotate(180deg); }
.ss-website-est__more > :not(summary) { margin-inline: 18px; }
.ss-website-est__more > :last-child { margin-bottom: 18px; }
.ss-website-est__more-lead { margin-bottom: 14px; font-size: var(--ss-size-small); color: var(--ss-text-2); }
.ss-website-est__more .ss-website-qty { box-shadow: inset 0 0 0 1px var(--ss-line); background: #FAFBFC; }
.ss-website-est__grid--services { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ss-website-est__checks { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 640px) { .ss-website-est__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ss-website-est__check { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ss-line-strong); cursor: pointer; }
.ss-website-est__check input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ss-website-est__box { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ss-line-strong); color: transparent; transition: background-color var(--ss-motion-fast), color var(--ss-motion-fast); }
.ss-website-est__box .ss-website-icon { width: 14px; height: 14px; }
.ss-website-est__check input:checked ~ .ss-website-est__box { background: #0B0D12; color: #FFFFFF; box-shadow: none; }
.ss-website-est__check input:focus-visible ~ .ss-website-est__box { outline: 2px solid #0071CE; outline-offset: 2px; }
.ss-website-est__check-text { display: grid; gap: 2px; font-weight: 600; color: var(--ss-text-1); }
.ss-website-est__check-text small { font-size: var(--ss-size-micro); font-weight: 500; color: var(--ss-text-3); }

/* Result panel: beside the inputs on desktop (sticky), straight after them on phones. */
.ss-website-est__result { display: grid; gap: 16px; padding: clamp(20px, 1rem + 1vw, 28px); border-radius: var(--ss-radius-card); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ss-line), 0 24px 56px rgba(11, 13, 18, 0.08); }
@media (min-width: 1024px) { .ss-website-est__result { position: sticky; top: calc(var(--ss-header-h, 72px) + 24px); } }
.ss-website-est__result-title { font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
[dir="rtl"] .ss-website-est__result-title { letter-spacing: 0; }
.ss-website-est__lines { display: grid; margin: 0; }
.ss-website-est__line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ss-line); font-size: var(--ss-size-small); }
.ss-website-est__line[hidden] { display: none; }
.ss-website-est__line dt { color: var(--ss-text-2); }
.ss-website-est__line dd { display: flex; align-items: baseline; gap: 10px; margin: 0; text-align: end; }
.ss-website-est__calc { font-size: var(--ss-size-micro); color: var(--ss-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-website-est__line b { font-weight: 700; color: var(--ss-text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-website-est__line--strong dt, .ss-website-est__line--strong b { font-weight: 700; color: var(--ss-text-1); }
.ss-website-est__minimum { display: grid; margin-top: 12px; padding: 4px 14px 12px; border-radius: 14px; background: #FFF8EB; box-shadow: inset 0 0 0 1px #FBE3B3; }
.ss-website-est__minimum[hidden] { display: none; }
.ss-website-est__minimum .ss-website-est__line { border-color: #F6DDAB; }
.ss-website-est__small { margin-top: 6px; font-size: var(--ss-size-micro); line-height: 1.5; color: var(--ss-text-2); }
.ss-website-est__small[hidden] { display: none; }
.ss-website-est__total { display: grid; gap: 4px; margin-top: 14px; }
.ss-website-est__total[hidden], .ss-website-est__custom[hidden] { display: none; }
.ss-website-est__total-label { font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-2); }
.ss-website-est__total-value b { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ss-text-1); font-variant-numeric: tabular-nums; }
[dir="rtl"] .ss-website-est__total-value b { letter-spacing: 0; }
.ss-website-est__total-value span { color: var(--ss-text-2); }
.ss-website-est__lines--summary { margin-top: 8px; }
.ss-website-est__custom { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: #FFF8EB; box-shadow: inset 0 0 0 1px #FBE3B3; }
.ss-website-est__custom .ss-website-est__total-label { color: #92400E; }
.ss-website-est__note { font-size: var(--ss-size-micro); line-height: 1.55; color: var(--ss-text-3); }
.ss-website-est__result .ss-website-button { justify-content: center; width: 100%; }

/* ---------- Find your fit: feature-first comparison matrix ---------- */
.ss-website-fitx { max-width: 1080px; margin-inline: auto; }
.ss-website-fitx__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.ss-website-fitx__c-feature { width: 52%; }
.ss-website-fitx__c-tier { width: 24%; }
@media (max-width: 639px) { .ss-website-fitx__c-feature { width: 46%; } .ss-website-fitx__c-tier { width: 27%; } }
.ss-website-fitx__table thead th { position: sticky; top: calc(var(--ss-header-h, 72px) + 8px); z-index: 2; padding: 14px 16px; text-align: start; vertical-align: bottom; font-size: var(--ss-size-small); font-weight: 700; color: var(--ss-text-1); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--ss-line-strong); }
.ss-website-fitx__table thead th.ss-website-fitx__col { text-align: center; }
.ss-website-fitx__table thead th.ss-website-fitx__col--pro { color: #FFFFFF; background: linear-gradient(160deg, #0A2A5E, #061A3D); box-shadow: none; }
.ss-website-fitx__table thead th:first-child { border-start-start-radius: 14px; }
.ss-website-fitx__table thead th:last-child { border-start-end-radius: 14px; }
.ss-website-fitx__head { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.ss-website-fitx__feature-head { font-size: var(--ss-size-micro) !important; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3) !important; }
[dir="rtl"] .ss-website-fitx__feature-head { letter-spacing: 0; }
.ss-website-fitx__group-row th { padding: 26px 16px 10px; text-align: start; font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); border-bottom: 1px solid var(--ss-line-strong); }
[dir="rtl"] .ss-website-fitx__group-row th { letter-spacing: 0; }
.ss-website-fitx__table tbody tr:not(.ss-website-fitx__group-row) > * { padding: 14px 16px; border-bottom: 1px solid var(--ss-line); vertical-align: middle; }
.ss-website-fitx__table tbody th[scope="row"] { text-align: start; font-weight: 500; font-size: var(--ss-size-small); line-height: 1.5; color: var(--ss-text-1); }
.ss-website-fitx__cell { text-align: center; }
.ss-website-fitx__cell--pro { background: rgba(6, 26, 61, 0.035); }
.ss-website-fitx__table tbody tr:not(.ss-website-fitx__group-row):hover > * { background-color: rgba(11, 13, 18, 0.025); }
.ss-website-fitx__mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.ss-website-fitx__mark .ss-website-icon { width: 15px; height: 15px; }
.ss-website-fitx__mark--yes { color: #FFFFFF; background: #0B0D12; }
.ss-website-fitx__cell--pro .ss-website-fitx__mark--yes { background: #0A2A5E; }
.ss-website-fitx__mark--no { color: var(--ss-text-3); }
.ss-website-fitx__text { font-size: var(--ss-size-micro); font-weight: 600; line-height: 1.4; color: var(--ss-text-1); font-variant-numeric: tabular-nums; }
.ss-website-fitx__note { max-width: 1080px; margin: 16px auto 0; font-size: var(--ss-size-micro); color: var(--ss-text-3); }
@media (max-width: 639px) {
  .ss-website-fitx__table thead th, .ss-website-fitx__table tbody tr:not(.ss-website-fitx__group-row) > * { padding: 12px 8px; }
  .ss-website-fitx__table thead th { top: calc(var(--ss-header-h, 64px) + 4px); font-size: var(--ss-size-micro); }
  .ss-website-fitx__group-row th { padding-inline: 8px; }
  .ss-website-fitx__head .ss-website-tier-mark { display: none; }
}

/* Small phones: long prices and labels wrap inside their columns instead of widening them. */
.ss-website-est, .ss-website-est > *, .ss-website-est__result { min-width: 0; }
@media (max-width: 639px) {
  .ss-website-est__line { flex-wrap: wrap; }
  .ss-website-est__line dd { flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; }

  .ss-website-fitx__text { overflow-wrap: anywhere; hyphens: auto; }
}
.ss-website-est__result > * { min-width: 0; }
.ss-website-est__result .ss-website-button { white-space: normal; text-align: center; }

/* ==== ss-website-legal.css ==== */
/* Legal and trust documents: readable measure, sticky contents, reading progress. */
.ss-website-legal__progress { position: fixed; inset-inline: 0; top: 0; z-index: calc(var(--ss-z-header) + 1); height: 2px; pointer-events: none; }
.ss-website-legal__progress span { display: block; height: 100%; background: var(--ss-color-blue); transform: scaleX(var(--ss-progress, 0)); transform-origin: left; }
[dir="rtl"] .ss-website-legal__progress span { transform-origin: right; }

.ss-website-legal-hero { padding-top: calc(var(--ss-header-h) + clamp(32px, 1.5rem + 2vw, 64px)); padding-bottom: clamp(40px, 2rem + 2vw, 64px); }
.ss-website-legal-hero .ss-website-container { display: grid; gap: var(--ss-space-4); justify-items: start; }
.ss-website-legal-hero .ss-website-breadcrumb ol { margin-bottom: var(--ss-space-3); }
.ss-website-legal-hero .ss-website-title { max-width: 900px; }
.ss-website-legal__updated { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ss-size-small); color: var(--ss-text-3); }
.ss-website-legal__updated .ss-website-icon { width: 16px; height: 16px; }

.ss-website-legal { padding-top: clamp(40px, 2rem + 2vw, 72px); }
.ss-website-legal__layout { display: grid; gap: var(--ss-space-6); }
@media (min-width: 1024px) {
  .ss-website-legal__layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--ss-space-9); }
  .ss-website-legal__aside { position: sticky; top: calc(var(--ss-header-h) + 32px); align-self: start; max-height: calc(100vh - var(--ss-header-h) - 64px); overflow-y: auto; }
}
.ss-website-legal__aside { display: grid; gap: var(--ss-space-6); align-content: start; }
.ss-website-legal__aside-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--ss-size-eyebrow); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
.ss-website-legal__toc { border: 1px solid var(--ss-line); border-radius: var(--ss-radius-card); padding: 14px 16px; background: var(--ss-color-paper); }
.ss-website-legal__toc summary { list-style: none; cursor: pointer; min-height: 32px; }
.ss-website-legal__toc summary::-webkit-details-marker { display: none; }
.ss-website-legal__toc summary .ss-website-icon { width: 16px; height: 16px; transition: transform var(--ss-dur-base); }
.ss-website-legal__toc[open] summary .ss-website-icon { transform: rotate(180deg); }
.ss-website-legal__toc ol { display: grid; gap: 2px; margin-top: 10px; }
.ss-website-legal__toc a { display: block; padding: 7px 10px; border-radius: var(--ss-radius-sm); font-size: var(--ss-size-small); color: var(--ss-text-2); line-height: 1.4; border-inline-start: 2px solid transparent; }
.ss-website-legal__toc a:hover { color: var(--ss-text-1); background: var(--ss-color-white); }
.ss-website-legal__toc a.is-active { color: var(--ss-color-blue); font-weight: 600; border-inline-start-color: var(--ss-color-blue); border-start-start-radius: 0; border-end-start-radius: 0; background: var(--ss-color-white); }
@media (min-width: 1024px) { .ss-website-legal__toc { border: 0; padding: 0; background: none; } .ss-website-legal__toc summary { pointer-events: none; } .ss-website-legal__toc summary .ss-website-icon { display: none; } }
.ss-website-legal__nav ul { display: grid; gap: 2px; margin-top: 10px; }
.ss-website-legal__nav a { display: block; padding: 8px 10px; border-radius: var(--ss-radius-sm); font-size: var(--ss-size-small); color: var(--ss-text-2); }
.ss-website-legal__nav a:hover { background: var(--ss-color-paper); color: var(--ss-text-1); }
.ss-website-legal__nav a[aria-current] { color: var(--ss-text-1); font-weight: 600; background: var(--ss-color-paper); }

.ss-website-legal__content { max-width: 720px; color: var(--ss-text-2); gap: 0; }
.ss-website-legal__content h2 { margin-top: var(--ss-space-7); margin-bottom: var(--ss-space-4); font-size: var(--ss-size-h4); font-weight: 600; line-height: 1.3; color: var(--ss-text-1); scroll-margin-top: calc(var(--ss-header-h) + 24px); }
.ss-website-legal__content h2:first-of-type { margin-top: 0; }
.ss-website-legal__content p { margin-bottom: var(--ss-space-4); font-size: var(--ss-size-body); line-height: 1.75; }
.ss-website-legal__content a { color: var(--ss-color-blue); text-decoration: underline; text-underline-offset: 2px; }
.ss-website-legal__contact { display: flex; gap: 14px; align-items: flex-start; margin-top: var(--ss-space-7); padding: var(--ss-space-5); border-radius: var(--ss-radius-card); background: var(--ss-color-paper); border: 1px solid var(--ss-line); }
.ss-website-legal__contact > .ss-website-icon { width: 22px; height: 22px; color: var(--ss-color-blue); flex: none; }
.ss-website-legal__contact p:last-child { margin: 6px 0 0; }

.ss-website-legal__trust { margin-bottom: var(--ss-space-7); padding: var(--ss-space-5); border-radius: var(--ss-radius-panel); background: radial-gradient(80% 100% at 100% 0%, rgba(0, 113, 206, 0.28), transparent 60%), var(--ss-color-navy); color: var(--ss-text-inverse-1); }
.ss-website-legal__trust .ss-website-legal__aside-title { color: var(--ss-text-inverse-3); }
.ss-website-legal__trust ul { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 640px) { .ss-website-legal__trust ul { grid-template-columns: 1fr 1fr; } }
.ss-website-legal__trust .ss-website-legal__trust-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--ss-radius-md); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ss-line-inverse); color: var(--ss-color-white); text-decoration: none; font-weight: 600; font-size: var(--ss-size-small); transition: background-color var(--ss-dur-fast); }
.ss-website-legal__trust-link:hover { background: rgba(255, 255, 255, 0.1); }
.ss-website-legal__trust-link span { flex: 1; }
.ss-website-legal__trust-link .ss-website-icon { width: 16px; height: 16px; color: var(--ss-color-blue-bright); }
.ss-website-legal__content h3 { margin-top: var(--ss-space-5); margin-bottom: var(--ss-space-3); font-size: var(--ss-size-h5, 1.125rem); font-weight: 600; line-height: 1.35; color: var(--ss-text-1); }
.ss-website-legal__content ul { display: grid; gap: 8px; margin: 0 0 var(--ss-space-4); padding-inline-start: 1.25em; list-style: disc; line-height: 1.7; }
.ss-website-legal__content a { color: var(--ss-color-blue); text-decoration: underline; text-underline-offset: 2px; }
.ss-website-legal__content [lang="en"] { text-align: left; }

/* ---------- Sitemap (footer-only) ---------- */
.ss-website-sitemap { padding-top: calc(var(--ss-header-h) + clamp(48px, 2rem + 4vw, 104px)); }
.ss-website-sitemap__grid { display: grid; gap: clamp(28px, 2rem + 1vw, 48px); margin-top: clamp(36px, 2rem + 2vw, 64px); padding-top: clamp(28px, 2vw, 40px); border-top: 1px solid var(--ss-line-strong); }
@media (min-width: 640px) { .ss-website-sitemap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ss-website-sitemap__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ss-website-sitemap__title { margin-bottom: 14px; font-size: var(--ss-size-eyebrow); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
[lang="ar"] .ss-website-sitemap__title { letter-spacing: 0; text-transform: none; font-size: var(--ss-size-small); }
.ss-website-sitemap__group ul { display: grid; gap: 10px; }
.ss-website-sitemap__sub > span { display: block; margin: 6px 0 8px; font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-2); }
.ss-website-sitemap__sub ul { padding-inline-start: 12px; border-inline-start: 1px solid var(--ss-line); }
.ss-website-sitemap__link { color: var(--ss-text-1); text-decoration: none; }
.ss-website-sitemap__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 404 ---------- */
.ss-website-notfound { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: center; min-height: min(100svh, 860px); padding-top: calc(var(--ss-header-h) + 48px); text-align: center; }
.ss-website-notfound__inner { position: relative; display: grid; justify-items: center; gap: var(--ss-space-5); }
.ss-website-notfound__code { position: absolute; inset-inline: 0; top: 50%; z-index: -1; transform: translateY(-58%); font-size: clamp(9rem, 6rem + 18vw, 22rem); font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: rgba(255, 255, 255, 0.05); pointer-events: none; user-select: none; }
.ss-website-notfound .ss-website-title { max-width: 16ch; }
.ss-website-notfound .ss-website-lead { max-width: 48ch; }
.ss-website-notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: var(--ss-space-4); }
.ss-website-notfound__links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.ss-website-notfound__links a:hover { color: #FFFFFF; }
.ss-website-notfound__links .ss-website-icon { width: 16px; height: 16px; }
/* Phones: link lists get a 44px tap height without changing their visual rhythm. */
@media (max-width: 767px) { .ss-website-notfound__links a, .ss-website-sitemap__link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; } }
.ss-website-footer__sitemap { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ss-website-notfound .ss-website-button--primary { --ss-btn-bg: #F4F5F7; --ss-btn-fg: #02040F; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

/* ==== ss-website-newsroom.css ==== */
/* ==========================================================================
   Newsroom: editorial listing + article. Content first, restrained chrome.
   ========================================================================== */
.ss-website-news-hero { padding-top: calc(var(--ss-header-h) + clamp(48px, 2rem + 4vw, 104px)); overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #061237 0%, var(--ss-color-night, #02040F) 70%); }
.ss-website-news-hero__inner { display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; }
.ss-website-news-hero__inner .ss-website-title { max-width: 16ch; }
.ss-website-news-hero__inner .ss-website-lead { max-width: 58ch; margin-inline: auto; }

/* Filters: one compact row (search grows), wraps on phones. */
.ss-website-news-filters { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ss-website-news-filters { grid-template-columns: minmax(0, 1fr) 200px 180px auto; align-items: center; } }
.ss-website-news-filters__search, .ss-website-news-filters__select { position: relative; display: flex; align-items: center; }
.ss-website-news-filters__search .ss-website-icon { position: absolute; inset-inline-start: 16px; width: 18px; height: 18px; color: var(--ss-text-3); pointer-events: none; }
.ss-website-news-filters input, .ss-website-news-filters select { width: 100%; min-height: 48px; border: 1px solid var(--ss-line-strong); border-radius: 14px; background: #FFFFFF; font: inherit; font-size: var(--ss-size-small); color: var(--ss-text-1); }
.ss-website-news-filters input { padding-inline: 46px 16px; }
.ss-website-news-filters input::-webkit-search-cancel-button { cursor: pointer; }
.ss-website-news-filters select { appearance: none; -webkit-appearance: none; padding-inline: 16px 42px; cursor: pointer; }
.ss-website-news-filters__select .ss-website-icon { position: absolute; inset-inline-end: 14px; width: 16px; height: 16px; color: var(--ss-text-2); pointer-events: none; }
.ss-website-news-filters :is(input, select):focus-visible { outline: 2px solid #0071CE; outline-offset: 2px; }
.ss-website-news-filters__clear { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: 14px; font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-2); }
.ss-website-news-filters__clear[hidden] { display: none; }
.ss-website-news-filters__clear:hover { color: var(--ss-text-1); background: var(--ss-color-mist, #F1F3F6); }
.ss-website-news-filters__clear .ss-website-icon { width: 16px; height: 16px; }
.ss-website-news-count { margin: 18px 0 22px; font-size: var(--ss-size-small); color: var(--ss-text-3); }

/* Grid + card */
.ss-website-news-grid { display: grid; gap: clamp(20px, 1rem + 1vw, 32px); }
@media (min-width: 640px) { .ss-website-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ss-website-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ss-website-news-card[hidden] { display: none; }
.ss-website-news-card__link { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border-radius: var(--ss-radius-card); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ss-line), 0 10px 30px rgba(11, 13, 18, 0.05); color: inherit; text-decoration: none; transition: transform var(--ss-motion-ui) var(--ss-ease-out), box-shadow var(--ss-motion-ui) var(--ss-ease-out); }
.ss-website-news-card__link:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ss-line-strong), 0 20px 44px rgba(11, 13, 18, 0.1); }
.ss-website-news-card__link:focus-visible { outline: 2px solid #0071CE; outline-offset: 3px; }
.ss-website-news-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, #EEF3FA, #DDE7F3); }
.ss-website-news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ss-ease-out); }
.ss-website-news-card__link:hover .ss-website-news-card__media img { transform: scale(1.03); }
.ss-website-news-card__placeholder { display: grid; place-items: center; height: 100%; }
.ss-website-news-card__placeholder img { width: 30%; height: auto; object-fit: contain; opacity: 0.6; }
.ss-website-news-card__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: clamp(18px, 1rem + 0.6vw, 24px); }
.ss-website-news-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ss-website-news-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--ss-radius-pill); font-size: var(--ss-size-micro); font-weight: 600; color: #0B4A8A; background: #EAF3FC; }
.ss-website-news-card__title { font-size: var(--ss-size-h5, 1.2rem); font-weight: 700; line-height: 1.3; color: var(--ss-text-1); }
.ss-website-news-card__excerpt { font-size: var(--ss-size-small); line-height: 1.6; color: var(--ss-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; align-self: start; }
.ss-website-news-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--ss-line); }
.ss-website-news-card__more { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-1); }
.ss-website-news-card__more .ss-website-icon { width: 15px; height: 15px; transition: transform var(--ss-motion-ui) var(--ss-ease-out); }
[dir="rtl"] .ss-website-news-card__more .ss-website-icon { transform: scaleX(-1); }
.ss-website-news-card__link:hover .ss-website-news-card__more .ss-website-icon { transform: translateX(3px); }
[dir="rtl"] .ss-website-news-card__link:hover .ss-website-news-card__more .ss-website-icon { transform: scaleX(-1) translateX(3px); }
.ss-website-news-card--compact .ss-website-news-card__more { display: none; }

/* SkyStruct author */
.ss-website-news-author { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
.ss-website-news-author__mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ss-line), 0 2px 6px rgba(0, 31, 84, 0.08); }
.ss-website-news-author__mark img { width: 22px; height: auto; }
.ss-website-news-author__text { display: grid; line-height: 1.3; min-width: 0; }
.ss-website-news-author__text b { font-size: var(--ss-size-small); font-weight: 700; color: var(--ss-text-1); }
.ss-website-news-author__text small { font-size: var(--ss-size-micro); color: var(--ss-text-3); }
.ss-website-news-author__text small time, .ss-website-news-author__read { white-space: nowrap; }
/* A thin rule, not a middle dot: in Arabic a dot between digits reads as ٠. */
.ss-website-news-author__sep { display: inline-block; width: 1px; height: 0.85em; margin-inline: 7px; vertical-align: -0.08em; background: currentColor; opacity: 0.45; }

/* Empty state */
.ss-website-news-empty { display: grid; justify-items: center; gap: 8px; padding: clamp(40px, 2rem + 3vw, 80px) 20px; border-radius: var(--ss-radius-card); text-align: center; background: var(--ss-color-mist, #F5F7FA); color: var(--ss-text-2); }
.ss-website-news-empty[hidden] { display: none; }
.ss-website-news-empty__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #FFFFFF; color: var(--ss-text-2); box-shadow: inset 0 0 0 1px var(--ss-line); }
.ss-website-news-empty__title { font-size: var(--ss-size-h5, 1.2rem); font-weight: 700; color: var(--ss-text-1); }
.ss-website-news-empty .ss-website-button { margin-top: 10px; }
.ss-website-news-none { padding: 40px 0; text-align: center; color: var(--ss-text-2); }
.ss-website-news-pages { margin-top: 32px; text-align: center; }

/* ---------- Article ---------- */
.ss-website-news-article__progress { position: fixed; inset-inline: 0; top: 0; z-index: 60; height: 3px; background: transparent; pointer-events: none; }
.ss-website-news-article__progress span { display: block; height: 100%; background: linear-gradient(90deg, #0071CE, #4DA3EE); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .ss-website-news-article__progress span { transform-origin: 100% 50%; background: linear-gradient(270deg, #0071CE, #4DA3EE); }
.ss-website-news-article { position: relative; z-index: 2; isolation: isolate; padding-top: calc(var(--ss-header-h) + clamp(32px, 1.5rem + 3vw, 72px)); background: #FFFFFF; }
.ss-website-news-article__head { display: grid; gap: 16px; max-width: 820px; }
.ss-website-news-article__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-block: -10px; justify-self: start; font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-2); text-decoration: none; }
.ss-website-news-article__back .ss-website-icon { width: 16px; height: 16px; transform: scaleX(-1); }
[dir="rtl"] .ss-website-news-article__back .ss-website-icon { transform: none; }
.ss-website-news-article__back:hover { color: var(--ss-text-1); }
.ss-website-news-article__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--ss-text-1); text-wrap: balance; }
[dir="rtl"] .ss-website-news-article__title { letter-spacing: 0; line-height: 1.3; }
.ss-website-news-article__excerpt { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.6; color: var(--ss-text-2); }
.ss-website-news-article__head .ss-website-news-author { margin-top: 6px; }
.ss-website-news-article__figure { margin-top: clamp(28px, 1.5rem + 2vw, 48px); }
.ss-website-news-article__figure img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: var(--ss-radius-card); }
.ss-website-news-article__layout { display: grid; gap: 28px; padding-block: clamp(32px, 1.5rem + 3vw, 64px) var(--ss-section-y); }
@media (min-width: 1024px) {
  .ss-website-news-article__layout { grid-template-columns: 180px minmax(0, 720px); justify-content: center; column-gap: clamp(40px, 5vw, 96px); }
  .ss-website-news-article__aside { position: sticky; top: calc(var(--ss-header-h) + 32px); align-self: start; }
  .ss-website-share { flex-direction: column; align-items: flex-start; }
}
.ss-website-news-article__body { max-width: 720px; }
.ss-website-news-article__body h2 { margin-top: 1.2em; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem); font-weight: 700; line-height: 1.25; color: var(--ss-text-1); }
.ss-website-news-article__body h3 { margin-top: 0.8em; font-size: 1.25rem; font-weight: 700; color: var(--ss-text-1); }
.ss-website-news-article__body p, .ss-website-news-article__body li { font-size: 1.0625rem; line-height: 1.8; color: #2B303A; }
.ss-website-news-article__body ul, .ss-website-news-article__body ol { display: grid; gap: 8px; padding-inline-start: 1.3em; }
.ss-website-news-article__body ul { list-style: disc; }
.ss-website-news-article__body ol { list-style: decimal; }
.ss-website-news-article__body blockquote { margin: 0.6em 0; padding: 4px 0; padding-inline-start: 22px; border-inline-start: 3px solid #0071CE; }
.ss-website-news-article__body blockquote p { font-size: 1.25rem; line-height: 1.6; font-weight: 600; color: var(--ss-text-1); }
.ss-website-news-article__body a { color: #0071CE; text-decoration: underline; text-underline-offset: 3px; }
.ss-website-news-article__body img { max-width: 100%; height: auto; border-radius: 14px; }
.ss-website-news-article__body table { width: 100%; border-collapse: collapse; font-size: var(--ss-size-small); }
.ss-website-news-article__body :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--ss-line); text-align: start; }
.ss-website-news-article__body > :first-child { margin-top: 0; }

/* Share */
.ss-website-share { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ss-website-share__label { flex-basis: 100%; margin-bottom: 4px; font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
[dir="rtl"] .ss-website-share__label { letter-spacing: 0; }
@media (min-width: 1024px) { .ss-website-share { display: grid; grid-template-columns: repeat(5, 40px); } .ss-website-share__label { grid-column: 1 / -1; } }
.ss-website-share__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ss-text-1); background: var(--ss-color-mist, #F1F3F6); transition: background-color var(--ss-motion-fast), color var(--ss-motion-fast), transform var(--ss-motion-fast); }
.ss-website-share__btn:hover { color: #FFFFFF; background: #0B0D12; }
.ss-website-share__btn:active { transform: scale(0.95); }
.ss-website-share__btn :is(.ss-website-icon, .ss-website-brand-icon) { width: 16px; height: 16px; }
.ss-website-share__toast { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; padding: 6px 10px; border-radius: 8px; font-size: var(--ss-size-micro); font-weight: 600; color: #FFFFFF; background: #0B0D12; opacity: 0; transition: opacity var(--ss-motion-fast); pointer-events: none; white-space: nowrap; }
.ss-website-share.is-copied .ss-website-share__toast { opacity: 1; }

/* Related */
.ss-website-news-related .ss-website-title { margin-bottom: clamp(20px, 1rem + 1vw, 32px); }
.ss-website-news-grid--related .ss-website-news-card__title { font-size: 1.05rem; }

/* ==== ss-website-palette-v2.css ==== */
/* ==========================================================================
   PALETTE V2 — HOMEPAGE COLOUR PROTOTYPE (2026-10-12)
   Scoped to .ss-website-palette-v2 (set on <body> of the homepage only, Source + Shopify).
   Nothing here affects other pages. If approved, promote the tokens to tokens.css and drop
   the scope.

   Philosophy: neutrals form the canvas · SkyStruct Blue is a signature · a small expressive
   palette carries personality through information (people, data, AI, categories) — not fills.
   ========================================================================== */
:root {
  /* Promoted site-wide (2026-10-13): the palette tokens are global; the remaps below stay home-only. */
  /* Core neutrals */
  --ss-home-neutral-ink: #0B0D12;      /* text, primary buttons on light */
  --ss-home-neutral-offblack: #17191F; /* dark surfaces, hover */
  --ss-home-neutral-700: #3B4049;      /* secondary text-strength icons */
  --ss-home-neutral-500: #6B7280;      /* quiet icons, captions (4.8:1 on white) */
  --ss-home-neutral-300: #D4D8DF;      /* borders */
  --ss-home-neutral-150: #ECEEF2;      /* soft surfaces */
  --ss-home-neutral-50: #F6F7F9;       /* off-white */

  /* Signature (official SkyStruct blues — used deliberately) */
  --ss-home-signature-blue: #0071CE;
  --ss-home-signature-navy: #001F54;
  --ss-home-signature-gradient: linear-gradient(120deg, #001F54 0%, #0A4A9A 55%, #0071CE 100%);

  /* Atmosphere (clouds, environment, globe) — environmental, never brand blue */
  --ss-home-atmosphere-light: #EEF2F6;
  --ss-home-atmosphere-blue: #D6E0EA;
  --ss-home-atmosphere-slate: #8A99AC;
  --ss-home-atmosphere-dark: #141B26;
  --ss-home-cloud-highlight: #FFFFFF;

  /* Expressive accents: base (fills, marks, data) · tint (soft surfaces) · glow (on dark) · ink (text/icons on light, ≥ 4.5:1) */
  --ss-home-coral: #FF6A55;   --ss-home-coral-tint: #FFEDEA;   --ss-home-coral-glow: #FF9A8A;   --ss-home-coral-ink: #C2381F;
  --ss-home-sun: #FFC233;     --ss-home-sun-tint: #FFF6DC;     --ss-home-sun-glow: #FFD566;     --ss-home-sun-ink: #875A00;
  --ss-home-green: #12B886;   --ss-home-green-tint: #E3F7F0;   --ss-home-green-glow: #5ED6AE;   --ss-home-green-ink: #0A7655;
  --ss-home-violet: #7B61FF;  --ss-home-violet-tint: #EFECFF;  --ss-home-violet-glow: #A897FF;  --ss-home-violet-ink: #5B3FE0;
  --ss-home-magenta: #E5448F; --ss-home-magenta-tint: #FDE8F1; --ss-home-magenta-glow: #F48BBB; --ss-home-magenta-ink: #B0296A;
  /* AI: aqua — intelligence reads as a clear, cool signal distinct from the brand blue */
  --ss-home-ai: #13B5CB;      --ss-home-ai-tint: #E0F7FA;      --ss-home-ai-glow: #5FD7E6;      --ss-home-ai-ink: #0A7380;

  /* Data series (only as many as the data needs): baseline · progress · projection · comparison */
  --ss-home-data-1: #3B4049; --ss-home-data-2: #12B886; --ss-home-data-3: #FF6A55; --ss-home-data-4: #7B61FF;

}
.ss-website-palette-v2 {
  /* ---- Remap: blue stops being the automatic answer inside the homepage ---- */
  --ss-color-blue: var(--ss-home-neutral-ink);
  --ss-color-blue-strong: #2A2E36;
  --ss-color-blue-bright: rgba(255, 255, 255, 0.92);
  --ss-color-blue-mist: var(--ss-home-neutral-50);
  --ss-color-blue-tint: var(--ss-home-neutral-150);
  --ss-color-blue-tint-strong: var(--ss-home-neutral-300);
  --ss-color-blue-08: rgba(11, 13, 18, 0.05); --ss-color-blue-12: rgba(11, 13, 18, 0.08);
  --ss-color-blue-20: rgba(11, 13, 18, 0.14); --ss-color-blue-40: rgba(11, 13, 18, 0.3);
  --ss-accent: var(--ss-home-neutral-ink); --ss-accent-ink: var(--ss-home-neutral-ink); --ss-accent-bright: #FFFFFF;
  --ss-accent-soft: var(--ss-home-neutral-50); --ss-accent-tint: var(--ss-home-neutral-50); --ss-accent-surface: var(--ss-home-neutral-150);
  --ss-glass-border-active: rgba(11, 13, 18, 0.28);
  /* AI cue tokens → aqua */
  --ss-ai-from: var(--ss-home-ai); --ss-ai-to: var(--ss-home-ai-ink); --ss-ai-tint: var(--ss-home-ai-tint); --ss-ai-bright: var(--ss-home-ai-glow);
  /* C.L.I.C. proposal: part of the expressive palette (Construction coral · Labour violet ·
     Inventory green · Cost magenta). Sun and aqua stay outside C.L.I.C. (emphasis, AI). */
  --ss-clic-construction: var(--ss-home-coral);  --ss-clic-construction-ink: var(--ss-home-coral-ink);  --ss-clic-construction-soft: var(--ss-home-coral-tint);  --ss-clic-construction-surface: #FFD9D2; --ss-clic-construction-bright: var(--ss-home-coral-glow);
  --ss-clic-labour: var(--ss-home-violet);       --ss-clic-labour-ink: var(--ss-home-violet-ink);       --ss-clic-labour-soft: var(--ss-home-violet-tint);       --ss-clic-labour-surface: #DDD6FF;       --ss-clic-labour-bright: var(--ss-home-violet-glow);
  --ss-clic-inventory: var(--ss-home-green);      --ss-clic-inventory-ink: var(--ss-home-green-ink);      --ss-clic-inventory-soft: var(--ss-home-green-tint);      --ss-clic-inventory-surface: #C6EFE1;    --ss-clic-inventory-bright: var(--ss-home-green-glow);
  --ss-clic-cost: var(--ss-home-magenta);        --ss-clic-cost-ink: var(--ss-home-magenta-ink);        --ss-clic-cost-soft: var(--ss-home-magenta-tint);        --ss-clic-cost-surface: #FBD3E5;         --ss-clic-cost-bright: var(--ss-home-magenta-glow);
  --ss-clic-construction-border: rgba(255, 106, 85, 0.32); --ss-clic-labour-border: rgba(123, 97, 255, 0.3);
  --ss-clic-inventory-border: rgba(18, 184, 134, 0.32); --ss-clic-cost-border: rgba(229, 68, 143, 0.3);
  /* Cloud horizons: neutral atmospheric tiles */
  --ss-horizon-light: var(--ss-horizon-light-v2);
  --ss-text-1: var(--ss-home-neutral-ink);
}

/* ---------- Buttons: neutral by default ---------- */
/* Light surfaces: near-black primary, quiet neutral secondary. */
.ss-website-palette-v2 .ss-website-button--primary { --ss-btn-bg: var(--ss-home-neutral-ink); --ss-btn-fg: #FFFFFF; box-shadow: 0 8px 20px rgba(11, 13, 18, 0.16); }
.ss-website-palette-v2 .ss-website-button--primary:hover { --ss-btn-bg: #24272E; }
.ss-website-palette-v2 .ss-website-button--secondary { --ss-btn-bg: rgba(255, 255, 255, 0.85); --ss-btn-fg: var(--ss-home-neutral-ink); --ss-btn-border: var(--ss-home-neutral-300); }
.ss-website-palette-v2 .ss-website-button--secondary:hover { --ss-btn-bg: #FFFFFF; --ss-btn-fg: var(--ss-home-neutral-ink); --ss-btn-border: var(--ss-home-neutral-ink); }
/* Dark surfaces: off-white primary with dark text; transparent secondary with a light hairline. */
.ss-website-palette-v2 :is(.ss-website-section--dark, .ss-website-immersive, .ss-website-prefooter, .ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-header__bar) .ss-website-button--primary { --ss-btn-bg: #F4F5F7; --ss-btn-fg: var(--ss-home-neutral-ink); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.ss-website-palette-v2 :is(.ss-website-section--dark, .ss-website-immersive, .ss-website-prefooter, .ss-website-header.is-tone-dark:not(.is-menu-open) .ss-website-header__bar) .ss-website-button--primary:hover { --ss-btn-bg: #FFFFFF; }
.ss-website-palette-v2 .ss-website-button--on-dark { --ss-btn-bg: rgba(255, 255, 255, 0.04); --ss-btn-fg: #FFFFFF; --ss-btn-border: rgba(255, 255, 255, 0.24); }

/* ---------- Eyebrows: neutral text, a signature-blue light travelling round the outline ---------- */
@property --ss-eyebrow-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ss-website-palette-v2 .ss-website-eyebrow {
  color: var(--ss-home-neutral-ink);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ss-eyebrow-fill, rgba(255, 255, 255, 0.86)), var(--ss-eyebrow-fill, rgba(255, 255, 255, 0.86))) padding-box,
    conic-gradient(from var(--ss-eyebrow-angle), rgba(0, 31, 84, 0.28) 0deg, rgba(0, 31, 84, 0.28) 220deg, #001F54 270deg, #0071CE 320deg, #7DB4E6 338deg, rgba(0, 31, 84, 0.28) 360deg) border-box;
  box-shadow: none;
  animation: ss-eyebrow-orbit 7s linear infinite;
}
.ss-website-palette-v2 .ss-website-eyebrow .ss-website-icon { color: var(--ss-home-signature-blue); }
.ss-website-palette-v2 :is(.ss-website-section--dark, .ss-website-immersive, .ss-website-prefooter, .ss-website-inset) .ss-website-eyebrow { --ss-eyebrow-fill: rgba(17, 20, 27, 0.9); color: #F4F5F7; background:
    linear-gradient(var(--ss-eyebrow-fill), var(--ss-eyebrow-fill)) padding-box,
    conic-gradient(from var(--ss-eyebrow-angle), rgba(125, 180, 230, 0.22) 0deg, rgba(125, 180, 230, 0.22) 220deg, #0071CE 290deg, #7DB4E6 330deg, rgba(125, 180, 230, 0.22) 360deg) border-box; }
.ss-website-palette-v2 :is(.ss-website-section--dark, .ss-website-immersive, .ss-website-prefooter) .ss-website-eyebrow .ss-website-icon { color: #7DB4E6; }
@keyframes ss-eyebrow-orbit { to { --ss-eyebrow-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ss-website-palette-v2 .ss-website-eyebrow { animation: none; --ss-eyebrow-angle: 300deg; } }

/* ---------- Links and icons: neutral, interaction shown by motion ---------- */
.ss-website-palette-v2 .ss-website-text-link { color: var(--ss-home-neutral-ink); text-decoration: underline; text-decoration-color: var(--ss-home-neutral-300); text-underline-offset: 4px; transition: text-decoration-color var(--ss-dur-fast); }
.ss-website-palette-v2 .ss-website-text-link:hover { text-decoration-color: currentColor; }
.ss-website-palette-v2 :is(.ss-website-section--dark, .ss-website-immersive) .ss-website-text-link { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.3); }
.ss-website-palette-v2 .ss-website-icon-tile { color: var(--ss-home-neutral-700); background: var(--ss-home-neutral-50); border-color: var(--ss-home-neutral-150); }
.ss-website-palette-v2 [data-ss-clic] .ss-website-icon-tile { color: var(--ss-accent-ink); background: var(--ss-accent-soft); }

/* ---------- Atmosphere: page clouds, backdrops, environment light ---------- */
.ss-website-palette-v2 .ss-website-environment { --ss-cloud-top: rgba(225, 231, 238, 0.95); --ss-cloud-bottom: rgba(244, 246, 249, 0); --ss-cloud-edge: rgba(107, 122, 144, 0.26); }
.ss-website-palette-v2 .ss-website-environment__light--one, .ss-website-palette-v2 .ss-website-environment__light--four { background: radial-gradient(closest-side, rgba(138, 153, 172, 0.12), transparent); }
.ss-website-palette-v2 .ss-website-environment__light--two { background: radial-gradient(closest-side, rgba(214, 224, 234, 0.4), transparent); }
.ss-website-palette-v2 .ss-website-backdrop { --ss-aurora-a: rgba(138, 153, 172, 0.26); --ss-aurora-b: rgba(20, 27, 38, 0.95); --ss-aurora-c: rgba(214, 224, 234, 0.1); --ss-cloud-top: rgba(214, 224, 234, 0.14); --ss-cloud-edge: rgba(255, 255, 255, 0.42); --ss-structure-color: rgba(138, 153, 172, 0.45); }
.ss-website-palette-v2 .ss-website-backdrop--light { --ss-aurora-a: rgba(138, 153, 172, 0.14); --ss-aurora-b: rgba(20, 27, 38, 0.05); --ss-aurora-c: rgba(214, 224, 234, 0.3); --ss-cloud-top: rgba(255, 255, 255, 0.95); --ss-cloud-bottom: rgba(225, 231, 238, 0.55); --ss-cloud-edge: rgba(107, 122, 144, 0.16); --ss-structure-color: rgba(107, 122, 144, 0.2); }

/* ---------- Hero: the night-blue field stays; one signature light behind the product ---------- */
.ss-website-palette-v2 .ss-website-home-hero__stage::before { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 113, 206, 0.42), rgba(0, 31, 84, 0.2) 45%, transparent 72%); }

/* ---------- Lite / Pro: one family, neutral surfaces ---------- */
.ss-website-palette-v2 .ss-website-duo-intro__light { background: radial-gradient(closest-side, rgba(214, 224, 234, 0.6), transparent); }
.ss-website-palette-v2 .ss-website-tier-mark { background: var(--ss-home-neutral-ink); border-color: var(--ss-home-neutral-ink); }
.ss-website-palette-v2 .ss-website-tier-mark--lite { background: transparent; border-color: var(--ss-home-neutral-500); }

/* ---------- Immersive chapter (dark): night-blue environment kept; expressive colour through the product ---------- */
/* Product-UI compositions carry their own product colours (product-ui.css); marketing accents
   stay outside the product frames. AI story labels: aqua. */
.ss-website-palette-v2 .ss-website-ai-story__label, .ss-website-palette-v2 .ss-website-ai-story__label .ss-website-icon { color: var(--ss-home-ai-glow); }
.ss-website-palette-v2 .ss-website-ai-story__visual::before { background: radial-gradient(closest-side, rgba(19, 181, 203, 0.24), transparent); }

/* ---------- Built for the region: restrained ---------- */
.ss-website-palette-v2 .ss-website-globe--light .ss-website-globe__body { background: radial-gradient(circle at 36% 28%, #FFFFFF, #F1F4F7 48%, #DCE3EB 82%, #C9D3DE); box-shadow: inset -24px -34px 70px rgba(20, 27, 38, 0.1), inset 10px 14px 40px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(11, 13, 18, 0.06), 0 40px 90px rgba(11, 13, 18, 0.12); }
.ss-website-palette-v2 .ss-website-region-light__visual::before { background: radial-gradient(closest-side, rgba(138, 153, 172, 0.2), transparent); }
.ss-website-palette-v2 .ss-website-region-light__facts .ss-website-icon { color: var(--ss-home-neutral-700); }

/* ---------- Pre-footer: the shared night-blue scrim (it blends into the footer); signature send ---------- */
.ss-website-palette-v2 .ss-website-prefooter__glow { background: radial-gradient(closest-side, rgba(0, 113, 206, 0.2), rgba(0, 31, 84, 0.08) 60%, transparent); }
.ss-website-palette-v2 .ss-website-composer__send { background: var(--ss-home-signature-blue); box-shadow: 0 6px 16px rgba(0, 113, 206, 0.5); }
.ss-website-palette-v2 .ss-website-composer__send:hover { background: #0A84EA; }
.ss-website-palette-v2 .ss-website-composer:focus-within { border-color: rgba(125, 180, 230, 0.8); box-shadow: 0 0 0 4px rgba(0, 113, 206, 0.28), 0 24px 60px rgba(0, 0, 0, 0.35); }

/* ---------- Header and footer on the homepage: neutral chrome ---------- */
.ss-website-palette-v2 .ss-website-footer__action .ss-website-icon { color: rgba(255, 255, 255, 0.8); }
.ss-website-palette-v2 .ss-website-footer__group a { background-image: linear-gradient(#FFFFFF, #FFFFFF); }

/* ---------- Hero eyebrow: keep the orbiting outline alongside the hero entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ss-website-js .ss-website-palette-v2 .ss-website-home-hero__copy > .ss-website-eyebrow {
    animation: ss-hero-rise 1000ms var(--ss-ease-out) both, ss-eyebrow-orbit 7s linear infinite;
    animation-delay: calc(var(--ss-entry, 0ms) + 80ms), 0s;
  }
}

/* ---------- C.L.I.C. explorer: the four areas are neutral (black and white); each capability
   carries its own colour as a solid app-style tile with a white glyph. ---------- */
.ss-website-palette-v2 .ss-website-clic,
.ss-website-palette-v2 .ss-website-clic [data-ss-clic] {
  --ss-accent: var(--ss-home-neutral-ink); --ss-accent-ink: var(--ss-home-neutral-ink); --ss-accent-bright: #FFFFFF;
  --ss-accent-soft: var(--ss-home-neutral-50); --ss-accent-tint: var(--ss-home-neutral-50); --ss-accent-surface: var(--ss-home-neutral-150);
  --ss-accent-border: var(--ss-home-neutral-300);
}
.ss-website-palette-v2 .ss-website-clic__tabs .ss-website-segmented__option { --ss-tab-accent: var(--ss-home-neutral-ink); }
.ss-website-palette-v2 .ss-website-clic__tabs .ss-website-segmented__puck { box-shadow: 0 0 0 1px var(--ss-home-neutral-300), 0 6px 18px rgba(11, 13, 18, 0.08); }
.ss-website-palette-v2 .ss-website-clic__eyebrow .ss-website-icon-tile { color: #FFFFFF; background: var(--ss-home-neutral-ink); border-color: var(--ss-home-neutral-ink); }
.ss-website-palette-v2 .ss-website-clic__panel::before { background: radial-gradient(closest-side, rgba(138, 153, 172, 0.14), transparent); }
/* Capability colours (decorative tiles; the name beside each tile carries the meaning). */
.ss-website-palette-v2 .ss-website-clic__cap--field     { --ss-cap: #FF6A33; }
.ss-website-palette-v2 .ss-website-clic__cap--document  { --ss-cap: #4C5BF5; }
.ss-website-palette-v2 .ss-website-clic__cap--portfolio { --ss-cap: #7B61FF; }
.ss-website-palette-v2 .ss-website-clic__cap--bim       { --ss-cap: #0E9F8C; }
.ss-website-palette-v2 .ss-website-clic__cap--labour    { --ss-cap: #FFB020; --ss-cap-fg: var(--ss-home-neutral-ink); }
.ss-website-palette-v2 .ss-website-clic__cap--quality   { --ss-cap: #E5448F; }
.ss-website-palette-v2 .ss-website-clic__cap--inventory { --ss-cap: #22A55B; }
.ss-website-palette-v2 .ss-website-clic__cap--cost      { --ss-cap: #A23FB8; }
.ss-website-palette-v2 .ss-website-clic__cap--risk      { --ss-cap: #F04452; }
.ss-website-palette-v2 .ss-website-clic__cap-icon {
  color: var(--ss-cap-fg, #FFFFFF);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ss-cap) 82%, #FFFFFF), var(--ss-cap) 60%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 4px 10px color-mix(in srgb, var(--ss-cap) 26%, transparent);
  transition: transform var(--ss-dur-base) var(--ss-ease-out);
}
.ss-website-palette-v2 .ss-website-clic__cap:hover .ss-website-clic__cap-icon { transform: scale(1.06) rotate(-3deg); }
.ss-website-palette-v2 .ss-website-clic__cap:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-cap) 40%, transparent), 0 14px 30px rgba(11, 13, 18, 0.08); }
.ss-website-palette-v2 .ss-website-clic__cap-arrow { color: var(--ss-home-neutral-500); }
.ss-website-palette-v2 .ss-website-clic__cap:hover .ss-website-clic__cap-arrow { color: var(--ss-home-neutral-ink); }
@media (prefers-reduced-motion: reduce) { .ss-website-palette-v2 .ss-website-clic__cap:hover .ss-website-clic__cap-icon { transform: none; } }

/* ==== ss-website-engage.css ==== */
/* Engaged-visitor prompt: a compact glass card, bottom-inline-start (clear of the quick-access
   dock at bottom-inline-end). Phones: a short card above the dock and the browser chrome. */
.ss-website-engage {
  position: fixed; z-index: calc(var(--ss-z-header) + 4);
  inset-inline-start: max(24px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 48px)); padding: 20px 20px 20px;
  border-radius: 20px; color: var(--ss-text-1, #0B0D12);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(246, 248, 251, 0.86));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(2, 4, 15, 0.06), 0 24px 60px rgba(2, 4, 15, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  opacity: 0; transform: translateY(16px) scale(0.98); transform-origin: bottom left;
  transition: opacity 320ms var(--ss-ease-out), transform 420ms var(--ss-ease-out);
}
[dir="rtl"] .ss-website-engage { transform-origin: bottom right; }
.ss-website-engage[hidden] { display: none; }
.ss-website-engage.is-in { opacity: 1; transform: none; }
.ss-website-engage::before { content: ""; position: absolute; inset-inline-start: 20px; top: 0; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ss-color-blue); }
.ss-website-engage__close { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4B5563; cursor: pointer; }
.ss-website-engage__close:hover { background: rgba(2, 4, 15, 0.06); color: #0B0D12; }
.ss-website-engage__close:focus-visible { outline: 2px solid var(--ss-color-blue); outline-offset: 2px; }
.ss-website-engage__close .ss-website-icon { width: 18px; height: 18px; }
.ss-website-engage__mark { display: block; width: 44px; margin-bottom: 12px; }
.ss-website-engage__mark img { display: block; width: 100%; height: auto; }
.ss-website-engage__title { margin: 0 32px 8px 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
[dir="rtl"] .ss-website-engage__title { margin: 0 0 8px 32px; }
.ss-website-engage__body { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #4B5563; }
.ss-website-engage__cta { --ss-btn-bg: #0B0D12; --ss-btn-fg: #FFFFFF; width: 100%; justify-content: center; }
.ss-website-engage__cta:hover { --ss-btn-bg: #2A2E36; }
@media (max-width: 639px) {
  .ss-website-engage { inset-inline: 12px; width: auto; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 68px); padding: 16px 16px 16px; border-radius: 18px; }
  .ss-website-engage__mark { display: none; }
  .ss-website-engage__title { font-size: 16px; }
  .ss-website-engage__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .ss-website-engage { transform: none; } }



/* ==== ss-website-profile.css ==== */
/* Company Profile 2026 — landscape motion presentation.
   Every scene is composed on a fixed 1600×900 artboard (.ss-website-pf-art), scaled to the screen
   by the controller (--pf-s); scene backgrounds stay full-bleed. --pf-b enlarges small text on
   small screens (phone landscape) so copy stays readable.
   Motion language:
   - 5 transition families (how a scene ARRIVES, [data-ss-txnow] on the player):
     line  — a SkyStruct-blue architectural line sweeps across and reveals the next scene
     cloud — white cloud architecture rises and uncovers the next light scene
     glass — a frosted glass plane slides across; the next scene is revealed behind it
     zoom  — the camera pushes into the product; the next scene resolves from depth
     dark  — a deep-blue field expands from the centre into an immersive dark scene
   - Inside a scene, [data-a] names the move and --d its start (seconds): masks, line drawing,
     product UI in perspective, data counting, portraits revealed through masks. Motion builds in
     the first ~5 s, then holds still for reading. Reduced motion: final states at once. */

.ss-website-body--standalone { overflow: hidden; background: #050B1C; overscroll-behavior: none; }
.ss-website-main--standalone { background: #050B1C; }

.ss-website-pf {
  --pf-s: 1; --pf-b: 1; --pf-tempo: 0.42; /* delays in the markup are authored long; the tempo compresses them */
  --pf-navy: #0E1A3A; --pf-text: #3B475E; --pf-muted: #66728A; --pf-blue: #0071CE;
  --pf-ease: cubic-bezier(0.22, 1, 0.36, 1); --pf-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  position: fixed; inset: 0; height: 100vh; height: 100dvh; overflow: hidden;
  font-family: "Open Sans", "Noto Sans Arabic", system-ui, sans-serif; color: var(--pf-navy);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}

/* ---------- Stage, scenes, artboard ---------- */
.ss-website-pf__stage { position: absolute; inset: 0; z-index: 1; touch-action: pan-y pinch-zoom; }
.ss-website-pf-scene { position: absolute; inset: 0; overflow: hidden; }
.ss-website-pf-scene[hidden] { display: none; }
.ss-website-pf-scene--light { background: radial-gradient(900px 620px at 80% 18%, #E2ECFA 0%, rgba(226, 236, 250, 0) 62%), radial-gradient(700px 500px at 8% 100%, #E9F0FA 0%, rgba(233, 240, 250, 0) 70%), linear-gradient(180deg, #F8FAFE 0%, #EEF3FA 100%); }
.ss-website-pf-scene--dark { --pf-navy: #FFFFFF; --pf-text: rgba(255, 255, 255, 0.78); --pf-muted: rgba(255, 255, 255, 0.6); --pf-blue: #4DA3FF;
  background: radial-gradient(1000px 700px at 78% 12%, #1B4593 0%, rgba(27, 69, 147, 0) 60%), radial-gradient(800px 600px at 0% 100%, #0B2A63 0%, rgba(11, 42, 99, 0) 70%), linear-gradient(160deg, #0A2059 0%, #04112E 62%, #030A1C 100%); color: #FFFFFF; }
.ss-website-pf-art { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform: translate(-50%, calc(-50% + var(--pf-shift, 0px))) scale(var(--pf-s)); transform-origin: 50% 50%; }
.ss-website-pf-art > * { position: absolute; }

/* ---------- Type ---------- */
.ss-website-pf-h1, .ss-website-pf-h2 { margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--pf-navy); text-wrap: balance; }
.ss-website-pf-h1 { font-size: 60px; line-height: 1.12; }
.ss-website-pf-h2 { font-size: 50px; line-height: 1.12; }
.ss-website-pf-h2--lg { font-size: 58px; line-height: 1.1; }
.ss-website-pf-h2--xl { font-size: 76px; line-height: 1.04; }
.ss-website-pf-acc { color: var(--pf-blue); }
.ss-website-pf-w { display: inline; }
.ss-website-pf-eyebrow { margin: 0 0 18px; font-size: calc(14px * var(--pf-b)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pf-blue); }
.ss-website-pf-body { margin: 26px 0 0; max-width: 620px; font-size: calc(20px * var(--pf-b)); line-height: 1.55; color: var(--pf-text); }
.ss-website-pf-sub { margin: 14px 0 0; font-size: calc(18px * var(--pf-b)); color: var(--pf-text); }
.ss-website-pf-pill { display: inline-block; margin: 30px 0 0; padding: 10px 20px; border-radius: 999px; font-size: calc(13px * var(--pf-b)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pf-navy); background: rgba(255, 255, 255, 0.86); box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.06), 0 10px 30px rgba(14, 40, 100, 0.1); }
[lang="ar"] .ss-website-pf-eyebrow, [lang="ar"] .ss-website-pf-pill { letter-spacing: 0; }
[lang="ar"] :is(.ss-website-pf-h1, .ss-website-pf-h2) { letter-spacing: 0; line-height: 1.3; }

/* ---------- Shared surfaces ---------- */
.ss-website-pf-glass { background: linear-gradient(150deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.6)); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(14, 26, 58, 0.04), 0 24px 60px rgba(14, 40, 100, 0.12); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-radius: 24px; }
.ss-website-pf-scene--dark .ss-website-pf-glass { background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 70px rgba(0, 0, 0, 0.35); }
.ss-website-pf-glass--screen { padding: 10px; border-radius: 24px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45)); box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(14, 26, 58, 0.05), 0 50px 100px rgba(14, 40, 100, 0.2); }
.ss-website-pf-glass--screen > .ss-website-pui__scaled { border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.08); }
.ss-website-pf-scene--dark .ss-website-pf-glass--screen { background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 50px 110px rgba(0, 0, 0, 0.5); }
.ss-website-pf-tile { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; color: var(--pf-blue); background: rgba(0, 113, 206, 0.1); }
.ss-website-pf-tile .ss-website-icon { width: 22px; height: 22px; }
.ss-website-pf-scene--dark .ss-website-pf-tile { color: #7FC0FF; background: rgba(77, 163, 255, 0.14); }
.ss-website-pf-chip { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 16px; font-size: calc(17px * var(--pf-b)); font-weight: 600; line-height: 1.3; color: var(--pf-navy); background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.05), 0 14px 34px rgba(14, 40, 100, 0.1); }
.ss-website-pf-chip--card { min-height: 70px; }
.ss-website-pf-chip--warn .ss-website-pf-tile { color: #D9473A; background: rgba(217, 71, 58, 0.09); }
.ss-website-pf-callout { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; color: #FFFFFF; background: linear-gradient(150deg, #10295E, #081A42); box-shadow: 0 0 0 1px rgba(77, 163, 255, 0.2), 0 20px 44px rgba(8, 26, 66, 0.35); }
.ss-website-pf-callout > .ss-website-icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: #7FC0FF; background: rgba(77, 163, 255, 0.16); }
.ss-website-pf-callout span { display: grid; gap: 2px; }
.ss-website-pf-callout b { font-size: calc(13px * var(--pf-b)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ss-website-pf-callout small { font-size: calc(14px * var(--pf-b)); color: rgba(255, 255, 255, 0.72); }
.ss-website-pf-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: calc(15px * var(--pf-b)); font-weight: 600; color: var(--pf-navy); text-decoration: none; cursor: pointer; }
.ss-website-pf-link .ss-website-icon { width: 18px; height: 18px; color: var(--pf-blue); }
.ss-website-pf-link:hover { color: var(--pf-blue); }
.ss-website-pf-link:focus-visible { outline: 2px solid var(--pf-blue); outline-offset: 2px; }

/* Device frames (from the PDF artwork) holding the website's coded product UI */
.ss-website-pf-laptop { position: relative; width: 100%; }
.ss-website-pf-laptop__frame { position: relative; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; }
.ss-website-pf-laptop__screen { position: absolute; left: 9.9%; top: 4.2%; width: 80%; height: 82%; z-index: 0; overflow: hidden; background: #FFFFFF; border-radius: 6px; }
.ss-website-pf-phone { position: relative; }
.ss-website-pf-phone__frame { position: relative; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; }
.ss-website-pf-phone__screen { position: absolute; left: 6%; top: 3%; right: 6%; bottom: 3%; z-index: 0; display: grid; align-content: center; overflow: hidden; padding: 10%; border-radius: 22px; background: linear-gradient(180deg, #F3F7FD, #E6EEF9); }
.ss-website-pf .ss-website-pf-phone__screen .ss-website-pui__card, .ss-website-pf [class*="__card"] > .ss-website-pui__card { position: relative; inset: auto; width: 100%; margin: 0; }
.ss-website-pf .ss-website-pui__scaled { width: 100%; }
.ss-website-pf .ss-website-display::before { display: none; }

/* ---------- Choreography ([data-a] + --d) ---------- */
.ss-website-pf-scene [data-a] { animation-duration: 540ms; animation-timing-function: var(--pf-ease); animation-fill-mode: both; animation-delay: calc(var(--d, 0s) * var(--pf-tempo)); animation-play-state: paused; }
.ss-website-pf-scene.is-active [data-a] { animation-play-state: running; }
[data-a="rise"] { animation-name: pf-rise; }
[data-a="mask"] { animation-name: pf-mask; animation-duration: 600ms; }
[data-a="fade"] { animation-name: pf-fade; animation-duration: 720ms; }
[data-a="pop"] { animation-name: pf-pop; animation-duration: 360ms; }
[data-a="enter-l"] { animation-name: pf-enter-l; }
[data-a="enter-r"] { animation-name: pf-enter-r; }
[data-a="logo"] { animation-name: pf-logo; animation-duration: 720ms; }
[data-a="drift-in"] { animation-name: pf-drift-in, pf-drift; animation-duration: 1200ms, 14s; animation-timing-function: var(--pf-ease), linear; animation-delay: calc(var(--d, 0s) * var(--pf-tempo)), calc(var(--d, 0s) * var(--pf-tempo) + 1.2s); }
[data-a="tilt-in"] { animation-name: pf-tilt-in; animation-duration: 900ms; }
[data-a="deep-in"] { animation-name: pf-deep-in; animation-duration: 960ms; }
[data-a="cloud-in"] { animation-name: pf-cloud-in; animation-duration: 1320ms; }
[data-a="window"] { animation-name: pf-window; animation-duration: 900ms; animation-timing-function: var(--pf-ease-io); }
[data-a="draw"] { animation-name: pf-draw; animation-duration: 600ms; animation-timing-function: var(--pf-ease-io); }
[data-a="draw-slow"] { animation-name: pf-draw; animation-duration: 1080ms; animation-timing-function: var(--pf-ease-io); }
[data-a="travel"] { animation-name: pf-draw; animation-duration: 1800ms; animation-timing-function: linear; }
[data-a="draw-broken"] { animation-name: pf-broken; animation-duration: 660ms; }
[data-a="scatter"] { animation-name: pf-scatter; animation-duration: 780ms; }
[data-a="pile"] { animation-name: pf-pile; animation-duration: 660ms; }
[data-a="scrap"] { animation-name: pf-scrap; animation-duration: 840ms; }
[data-a="callout"] { animation-name: pf-callout; animation-duration: 420ms; }
[data-a="bar"] { animation-name: pf-bar; animation-duration: 660ms; animation-timing-function: var(--pf-ease-io); }
[data-a="pillar"] { animation-name: pf-pillar; animation-duration: 600ms; }
[data-a="hub"] { animation-name: pf-hub; animation-duration: 600ms; }
[data-a="node"] { animation-name: pf-node; animation-duration: 480ms; }
[data-a="rise-big"] { animation-name: pf-rise-big; animation-duration: 840ms; }
[data-a="screen-on"] { animation-name: pf-screen; animation-duration: 540ms; }
[data-a="phone-in"] { animation-name: pf-phone; animation-duration: 660ms; }
[data-a="panel-in"] { animation-name: pf-enter-l; animation-duration: 660ms; }
[data-a="immerse"] { animation-name: pf-immerse; animation-duration: 840ms; animation-timing-function: var(--pf-ease-io); }
[data-a="ui-in"] { animation-name: pf-ui; animation-duration: 660ms; }
[data-a="glass-in"] { animation-name: pf-glass-in; animation-duration: 1080ms; }
[data-a="laptop-in"] { animation-name: pf-laptop; animation-duration: 900ms; }
[data-a="pop-card"] { animation-name: pf-pop-card; animation-duration: 540ms; }
[data-a="activate"] { animation-name: pf-activate; animation-duration: 300ms; }
[data-a="band"] { animation-name: pf-band; animation-duration: 360ms; }
[data-a="globe-in"] { animation-name: pf-globe; animation-duration: 1320ms; }
[data-a="card-up"] { animation-name: pf-card-up; animation-duration: 600ms; }
[data-a="portrait"] { animation-name: pf-portrait; animation-duration: 780ms; animation-timing-function: var(--pf-ease-io); }
[data-a="push"] { animation-name: pf-fade, pf-push; animation-duration: 840ms, 11s; animation-timing-function: ease, linear; }
[data-a="beam"] { animation-name: pf-beam; animation-duration: 1920ms; animation-timing-function: var(--pf-ease-io); }
[data-a="tick"] { animation-name: pf-pop; animation-duration: 300ms; }

@keyframes pf-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pf-mask { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(36px); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(-12% -6% -25% -6%); transform: none; } }
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes pf-enter-l { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes pf-enter-r { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes pf-logo { from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(20px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes pf-drift-in { from { opacity: 0; transform: translateX(80px) scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes pf-drift { from { transform: none; } to { transform: translateX(-26px) scale(1.015); } }
@keyframes pf-tilt-in { from { opacity: 0; transform: translateX(260px) var(--tf) rotateY(-12deg); } to { opacity: 1; transform: var(--tf); } }
@keyframes pf-deep-in { from { opacity: 0; transform: translateX(200px) var(--tf) translateZ(-260px); } to { opacity: 1; transform: var(--tf); } }
@keyframes pf-cloud-in { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }
@keyframes pf-window { from { clip-path: inset(0 0 0 100% round 90px 0 0 90px); } to { clip-path: inset(0 0 0 0 round 90px 0 0 90px); } }
@keyframes pf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pf-broken { from { opacity: 0; stroke-dashoffset: 0.4; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes pf-scatter { from { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); } to { opacity: 1; transform: rotate(calc(var(--sr) * 0.22)); } }
@keyframes pf-pile { from { opacity: 0; transform: translateY(-50px) rotate(-7deg) scale(0.8); } 70% { transform: rotate(1.5deg) scale(1.01); } to { opacity: 1; transform: none; } }
@keyframes pf-scrap { from { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.4); } 30% { opacity: 1; } to { opacity: 0.92; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--tr)); } }
@keyframes pf-callout { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes pf-bar { from { opacity: 0; clip-path: inset(0 50% 0 50% round 24px); } 20% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0 round 24px); } }
@keyframes pf-pillar { from { opacity: 0; clip-path: inset(100% 0 0 0 round 28px); transform: translateY(30px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 28px); transform: none; } }
@keyframes pf-hub { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes pf-node { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pf-rise-big { from { opacity: 0; transform: translateY(90px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes pf-screen { from { opacity: 0; filter: brightness(1.8); } to { opacity: 1; filter: none; } }
@keyframes pf-phone { from { opacity: 0; transform: translate(70px, 50px) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes pf-immerse { from { clip-path: circle(0% at 0% 50%); } to { clip-path: circle(150% at 0% 50%); } }
@keyframes pf-ui { from { opacity: 0; transform: translateY(34px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pf-glass-in { from { opacity: 0; transform: translateX(120px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes pf-laptop { from { opacity: 0; transform: translateX(160px) perspective(1800px) rotateY(-14deg); } to { opacity: 1; transform: none; } }
@keyframes pf-pop-card { from { opacity: 0; transform: translateY(36px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes pf-activate { from { background: rgba(255, 255, 255, 0.9); color: #8A97AE; box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.06), 0 14px 34px rgba(14, 40, 100, 0.08); } to { background: var(--pf-blue); color: #FFFFFF; box-shadow: 0 0 0 8px rgba(0, 113, 206, 0.12), 0 18px 40px rgba(0, 113, 206, 0.3); } }
@keyframes pf-band { from { background: transparent; color: var(--pf-muted); } to { background: rgba(0, 113, 206, 0.1); color: var(--pf-blue); } }
@keyframes pf-globe { from { opacity: 0; transform: scale(1.12) translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes pf-card-up { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes pf-portrait { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pf-push { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes pf-beam { from { opacity: 0; transform: translateX(-30%) rotate(-12deg); } 40% { opacity: 1; } to { opacity: 0.55; transform: translateX(10%) rotate(-12deg); } }
@keyframes pf-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* SVG strokes that draw */
.ss-website-pf-art svg { overflow: visible; }
.ss-website-pf-art svg path[pathLength] { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------- Transitions ---------- */
.ss-website-pf-scene.is-active { z-index: 2; }
.ss-website-pf-scene.is-leaving { z-index: 1; pointer-events: none; }
.ss-website-pf.is-tx .ss-website-pf-scene.is-active, .ss-website-pf.is-tx .ss-website-pf-scene.is-leaving { animation-duration: 650ms; animation-timing-function: var(--pf-ease-io); animation-fill-mode: both; }
/* line */
.ss-website-pf.is-tx[data-ss-txnow="line"] .ss-website-pf-scene.is-active { animation-name: pf-in-line; }
.ss-website-pf.is-tx[data-ss-txnow="line"][data-ss-dir="back"] .ss-website-pf-scene.is-active { animation-name: pf-in-line-back; }
.ss-website-pf.is-tx[data-ss-txnow="line"] .ss-website-pf-scene.is-leaving { animation-name: pf-out-drift; }
@keyframes pf-in-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pf-in-line-back { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes pf-out-drift { to { transform: translateX(-4%); filter: brightness(0.96); } }
/* cloud */
.ss-website-pf.is-tx[data-ss-txnow="cloud"] .ss-website-pf-scene.is-active { animation-name: pf-in-cloud; animation-duration: 800ms; }
.ss-website-pf.is-tx[data-ss-txnow="cloud"] .ss-website-pf-scene.is-leaving { animation-name: pf-out-up; animation-duration: 800ms; }
@keyframes pf-in-cloud { 0%, 30% { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pf-out-up { to { transform: translateY(-6%) scale(1.02); opacity: 0.6; } }
/* glass */
.ss-website-pf.is-tx[data-ss-txnow="glass"] .ss-website-pf-scene.is-active { animation-name: pf-in-glass; animation-duration: 700ms; }
.ss-website-pf.is-tx[data-ss-txnow="glass"][data-ss-dir="back"] .ss-website-pf-scene.is-active { animation-name: pf-in-line; }
.ss-website-pf.is-tx[data-ss-txnow="glass"] .ss-website-pf-scene.is-leaving { animation-name: pf-out-blur; animation-duration: 700ms; }
@keyframes pf-in-glass { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes pf-out-blur { to { filter: blur(10px); transform: scale(0.98); } }
/* zoom */
.ss-website-pf.is-tx[data-ss-txnow="zoom"] .ss-website-pf-scene.is-active { animation-name: pf-in-zoom; animation-duration: 650ms; }
.ss-website-pf.is-tx[data-ss-txnow="zoom"] .ss-website-pf-scene.is-leaving { animation-name: pf-out-zoom; animation-duration: 450ms; }
@keyframes pf-in-zoom { from { opacity: 0; transform: scale(0.92); filter: blur(8px); } 40% { opacity: 0; } to { opacity: 1; transform: none; filter: none; } }
@keyframes pf-out-zoom { to { opacity: 0; transform: scale(1.18); filter: blur(10px); } }
/* dark */
.ss-website-pf.is-tx[data-ss-txnow="dark"] .ss-website-pf-scene.is-active { animation-name: pf-in-dark; animation-duration: 850ms; }
@keyframes pf-in-dark { 0%, 45% { opacity: 0; } to { opacity: 1; } }

.ss-website-pf-tx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.ss-website-pf-tx > span { position: absolute; opacity: 0; }
.ss-website-pf-tx__line { top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(180deg, rgba(47, 140, 240, 0), #2F8CF0 20%, #0071CE 80%, rgba(0, 113, 206, 0)); box-shadow: -60px 0 80px rgba(47, 140, 240, 0.12); }
.ss-website-pf.is-tx[data-ss-txnow="line"] .ss-website-pf-tx__line { animation: pf-tx-line 650ms var(--pf-ease-io) both; }
.ss-website-pf.is-tx[data-ss-txnow="line"][data-ss-dir="back"] .ss-website-pf-tx__line { animation-name: pf-tx-line-back; }
@keyframes pf-tx-line { 0% { opacity: 1; transform: translateX(-10px); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(100vw); } }
@keyframes pf-tx-line-back { 0% { opacity: 1; transform: translateX(100vw); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(-10px); } }
.ss-website-pf-tx__glass { top: -5%; bottom: -5%; left: 100%; width: 34vw; border-radius: 40px; background: linear-gradient(120deg, rgba(255, 255, 255, 0.55), rgba(220, 234, 252, 0.3)); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: inset 1px 0 0 #FFFFFF, -40px 0 120px rgba(14, 40, 100, 0.12); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
.ss-website-pf.is-tx[data-ss-txnow="glass"] .ss-website-pf-tx__glass { animation: pf-tx-glass 700ms var(--pf-ease-io) both; }
@keyframes pf-tx-glass { 0% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(-100vw - 40vw)); } }
.ss-website-pf-tx__cloud { left: -10%; right: -10%; top: 100%; height: 80vh; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 22%, #F4F8FD 100%); }
.ss-website-pf-tx__cloud img { position: absolute; left: 0; top: -16vh; width: 100%; height: auto; }
.ss-website-pf.is-tx[data-ss-txnow="cloud"] .ss-website-pf-tx__cloud { animation: pf-tx-cloud 800ms var(--pf-ease-io) both; }
@keyframes pf-tx-cloud { 0% { opacity: 1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-105vh); } 100% { opacity: 0; transform: translateY(-200vh); } }
.ss-website-pf-tx__dark { left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, #0A2059, #04112E); }
.ss-website-pf.is-tx[data-ss-txnow="dark"] .ss-website-pf-tx__dark { animation: pf-tx-dark 850ms var(--pf-ease-io) both; }
@keyframes pf-tx-dark { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(380); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(380); } }

/* ---------- Frame: logo + folio (as on every PDF page) ---------- */
.ss-website-pf-frame { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: opacity 500ms; }
.ss-website-pf-frame__art { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform: translate(-50%, calc(-50% + var(--pf-shift, 0px))) scale(var(--pf-s)); }
.ss-website-pf-frame__logo { position: absolute; left: 70px; top: 44px; width: 120px; height: auto; transition: opacity 500ms; }
.ss-website-pf-frame__logo--dark, .ss-website-pf[data-ss-tone-now="dark"] .ss-website-pf-frame__logo--light { opacity: 0; }
.ss-website-pf[data-ss-tone-now="dark"] .ss-website-pf-frame__logo--dark { opacity: 1; }
.ss-website-pf-frame__folio { position: absolute; left: 70px; bottom: 40px; margin: 0; font-size: calc(12px * var(--pf-b)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8C98AE; }
.ss-website-pf-frame__folio b { color: #0071CE; }
.ss-website-pf-frame__folio span { margin: 0 14px; opacity: 0.6; }
.ss-website-pf[data-ss-tone-now="dark"] .ss-website-pf-frame__folio { color: rgba(255, 255, 255, 0.5); }
.ss-website-pf[data-ss-tone-now="dark"] .ss-website-pf-frame__folio b { color: #4DA3FF; }
.ss-website-pf.is-noframe .ss-website-pf-frame { opacity: 0; }
[dir="rtl"] .ss-website-pf-frame__logo { left: auto; right: 70px; }
[dir="rtl"] .ss-website-pf-frame__folio { left: auto; right: 70px; }

/* ================= Scenes ================= */
/* 01 Cover */
.ss-website-pf-s01__arch { right: -80px; bottom: 30px; width: 1260px; height: auto; opacity: 0.95; }
.ss-website-pf-s01__panel { left: 790px; top: 110px; width: 720px; --tf: perspective(1800px) rotateY(-20deg) rotateX(5deg); transform: var(--tf); transform-origin: 0 50%; }
.ss-website-pf-s01__panel2 { left: 1080px; top: 420px; width: 430px; --tf: perspective(1800px) rotateY(-20deg) rotateX(5deg); transform: var(--tf); transform-origin: 0 50%; }
.ss-website-pf-s01__clouds { left: -40px; bottom: -150px; width: 1680px; height: auto; }
.ss-website-pf-s01__copy { left: 110px; top: 230px; width: 600px; }
.ss-website-pf-s01__logo { display: block; width: 240px; height: auto; margin-bottom: 44px; }

/* 02 Connected decisions */
.ss-website-pf-s02__crane { right: 0; top: 0; bottom: 0; width: 520px; margin: 0; overflow: hidden; border-radius: 90px 0 0 90px; }
.ss-website-pf-s02__crane img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.ss-website-pf-scene.is-active .ss-website-pf-s02__crane img { animation: pf-push 9s linear both; }
.ss-website-pf-s02__crane::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(248, 250, 254, 0.85) 0%, rgba(248, 250, 254, 0) 34%), linear-gradient(0deg, rgba(238, 243, 250, 0.6), rgba(238, 243, 250, 0) 30%); }
.ss-website-pf-s02__copy { left: 110px; top: 220px; width: 620px; }
.ss-website-pf-s02__line2 { margin-top: 6px; }
.ss-website-pf-s02__spine { left: 836px; top: 196px; width: 20px; height: 520px; }
.ss-website-pf-s02__spine path { stroke: rgba(0, 113, 206, 0.35); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ss-website-pf-s02__cats { left: 880px; top: 200px; width: 300px; margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.ss-website-pf-s02__cats .ss-website-pf-chip { position: relative; }
.ss-website-pf-s02__tick { position: absolute; left: -40px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--pf-blue); box-shadow: 0 0 0 5px rgba(0, 113, 206, 0.14); }
[dir="rtl"] .ss-website-pf-s02__tick { left: auto; right: -40px; }

/* 03 About */
.ss-website-pf-s03__arch { right: -60px; top: 10px; width: 1180px; height: auto; }
.ss-website-pf-s03__copy { left: 110px; top: 150px; width: 760px; }
.ss-website-pf-s03__facts { left: 110px; right: 110px; bottom: 110px; height: 132px; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 12px; border-radius: 26px; }
.ss-website-pf-s03__fact { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-content: center; padding: 0 26px; }
.ss-website-pf-s03__fact + .ss-website-pf-s03__fact { border-inline-start: 1px solid rgba(14, 26, 58, 0.08); }
.ss-website-pf-s03__fact .ss-website-pf-tile { grid-row: span 2; }
.ss-website-pf-s03__fact dt { font-size: calc(14px * var(--pf-b)); font-weight: 600; color: var(--pf-blue); }
.ss-website-pf-s03__fact dd { margin: 2px 0 0; font-size: calc(17px * var(--pf-b)); font-weight: 600; color: var(--pf-navy); }

/* 04 Challenge */
.ss-website-pf-s04__head { left: 0; right: 0; top: 110px; text-align: center; }
.ss-website-pf-s04__links { inset: 0; width: 1600px; height: 900px; }
.ss-website-pf-s04__broken { stroke: rgba(14, 26, 58, 0.28); stroke-width: 2; }
.ss-website-pf-art svg path.ss-website-pf-s04__broken { stroke-dasharray: 0.03 0.025; }
.ss-website-pf-s04__broken--out { stroke: rgba(217, 71, 58, 0.4); }
.ss-website-pf-s04__records, .ss-website-pf-s04__effects { top: 317px; width: 260px; margin: 0; padding: 0; list-style: none; display: grid; gap: 30px; }
.ss-website-pf-s04__records { left: 260px; }
.ss-website-pf-s04__effects { left: 1080px; }
.ss-website-pf-s04__pile { left: 690px; top: 380px; width: 220px; height: 240px; margin: 0; display: grid; justify-items: center; align-content: center; }
.ss-website-pf-s04__pile img { position: relative; z-index: 1; width: 220px; height: auto; filter: drop-shadow(0 18px 24px rgba(14, 26, 58, 0.18)); }
.ss-website-pf-s04__pile figcaption { position: relative; z-index: 1; margin-top: 8px; font-size: calc(17px * var(--pf-b)); font-weight: 700; text-align: center; color: var(--pf-navy); }
.ss-website-pf-s04__scrap { position: absolute; left: 50%; top: 40%; width: 28px; height: 36px; border-radius: 3px; background: linear-gradient(180deg, #FFFFFF, #EEF2F8); box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.1), 0 6px 14px rgba(14, 26, 58, 0.12); }
.ss-website-pf-s04__scrap::before { content: ""; position: absolute; inset: 7px 5px; background: repeating-linear-gradient(180deg, rgba(14, 26, 58, 0.18) 0 2px, transparent 2px 6px); }

/* 05 Approach */
.ss-website-pf-s05__copy { left: 110px; top: 200px; width: 580px; }
.ss-website-pf-s05__note { display: flex; align-items: center; gap: 16px; margin: 46px 0 0; padding: 18px 22px; max-width: 520px; border-radius: 18px; font-size: calc(17px * var(--pf-b)); font-weight: 600; line-height: 1.45; color: var(--pf-navy); }
.ss-website-pf-s05__device { left: 760px; top: 190px; width: 760px; --tf: perspective(2200px) rotateY(-18deg) rotateX(6deg) rotateZ(1deg); transform: var(--tf); transform-origin: 30% 50%; }
.ss-website-pf-s05__device .ss-website-pui { padding: 0; }
.ss-website-pf-s05__links { inset: 0; width: 1600px; height: 900px; z-index: 2; }
.ss-website-pf-mask-path { stroke: #FFFFFF; stroke-width: 10; }
.ss-website-pf-dotted { fill: none; stroke: #0E1A3A; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0.1 7; }
.ss-website-pf-s05__links circle { fill: #FFFFFF; stroke: #0E1A3A; stroke-width: 2.2; transform-box: fill-box; transform-origin: center; }
.ss-website-pf-callout { z-index: 3; }
.ss-website-pf-s05__c0 { left: 880px; top: 104px; } .ss-website-pf-s05__c1 { left: 1280px; top: 130px; }
.ss-website-pf-s05__c2 { left: 830px; top: 690px; } .ss-website-pf-s05__c3 { left: 1190px; top: 770px; }

/* 06 Connected environment */
.ss-website-pf-s06__beam { inset: -20% -10%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(178, 208, 250, 0.45) 46%, rgba(255, 255, 255, 0) 60%); }
.ss-website-pf-s06__copy { left: 110px; top: 270px; width: 560px; }
.ss-website-pf-s06__stack { left: 680px; top: 90px; width: 900px; height: 760px; }
.ss-website-pf-s06__back { position: absolute; left: 110px; top: 10px; width: 760px; --tf: perspective(2200px) rotateY(-22deg) rotateX(6deg); transform: var(--tf); transform-origin: 0 50%; }
.ss-website-pf-s06__front { position: absolute; left: 360px; top: 300px; width: 520px; --tf: perspective(2200px) rotateY(-22deg) rotateX(6deg) translateZ(90px); transform: var(--tf); transform-origin: 0 50%; }
.ss-website-pf-s06__card { position: absolute; left: 30px; top: 470px; width: 320px; }

/* 07 C.L.I.C. */
.ss-website-pf-s07__head { left: 0; right: 0; top: 96px; text-align: center; }
.ss-website-pf-s07__line { left: 0; top: 560px; width: 1600px; height: 20px; }
.ss-website-pf-s07__line path { stroke: rgba(0, 113, 206, 0.45); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ss-website-pf-s07__pillars { left: 150px; right: 150px; top: 270px; bottom: 110px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.ss-website-pf-s07__pillar { position: relative; display: grid; align-content: start; justify-items: center; gap: 10px; padding: 34px 26px; border-radius: 28px; text-align: center; overflow: hidden; }
.ss-website-pf-s07__pillar b { font-size: calc(26px * var(--pf-b)); font-weight: 700; color: var(--pf-navy); }
.ss-website-pf-s07__pillar > span:first-of-type { font-size: calc(15px * var(--pf-b)); line-height: 1.5; color: var(--pf-text); }
.ss-website-pf-s07__letter { position: absolute; left: 0; right: 0; top: 196px; font-style: normal; font-size: 64px; font-weight: 300; line-height: 1; color: var(--ss-accent, var(--pf-blue)); opacity: 0.85; }
.ss-website-pf-s07__node { position: absolute; left: 50%; top: 282px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px var(--ss-accent, var(--pf-blue)); }
.ss-website-pf-s07__pillar::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--ss-accent, var(--pf-blue)); }
.ss-website-pf-s07__icon { position: absolute; left: 50%; bottom: 46px; translate: -50% 0; color: var(--ss-accent, var(--pf-blue)); opacity: 0.35; }
.ss-website-pf-s07__icon .ss-website-icon { width: 92px; height: 92px; }

/* 08 Platform capabilities (dark) */
.ss-website-pf-s08__head { left: 0; right: 0; top: 96px; text-align: center; }
.ss-website-pf-s08__paths { inset: 0; width: 1600px; height: 900px; }
.ss-website-pf-s08__paths path { stroke: rgba(77, 163, 255, 0.65); stroke-width: 2; stroke-linejoin: round; }
.ss-website-pf-s08__hub { left: 690px; top: 440px; width: 220px; height: 200px; display: grid; place-items: center; border-radius: 30px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 14px rgba(77, 163, 255, 0.06), 0 40px 90px rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ss-website-pf-s08__hub img { width: 150px; height: auto; }
.ss-website-pf-s08__nodes { inset: 0; margin: 0; padding: 0; list-style: none; }
.ss-website-pf-s08__node { position: absolute; display: flex; align-items: center; gap: 14px; width: 300px; height: 100px; padding: 0 18px; border-radius: 20px; }
.ss-website-pf-s08__node span { display: grid; gap: 4px; }
.ss-website-pf-s08__node b { font-size: calc(16px * var(--pf-b)); font-weight: 700; color: #FFFFFF; line-height: 1.25; }
.ss-website-pf-s08__node small { font-size: calc(13px * var(--pf-b)); line-height: 1.4; color: rgba(255, 255, 255, 0.66); }
.ss-website-pf-s08__node--0 { left: 170px; top: 300px; } .ss-website-pf-s08__node--1 { left: 130px; top: 490px; } .ss-website-pf-s08__node--2 { left: 170px; top: 680px; }
.ss-website-pf-s08__node--3 { left: 1130px; top: 300px; } .ss-website-pf-s08__node--4 { left: 1170px; top: 490px; } .ss-website-pf-s08__node--5 { left: 1130px; top: 680px; }
.ss-website-pf-s08__note { left: 0; right: 0; bottom: 104px; margin: 0; text-align: center; font-size: calc(13px * var(--pf-b)); color: rgba(255, 255, 255, 0.5); }

/* 09 Digital capabilities */
.ss-website-pf-s09__head { left: 0; right: 0; top: 96px; text-align: center; }
.ss-website-pf-s09__devices { left: 540px; top: 300px; width: 520px; }
.ss-website-pf-s09__devices .ss-website-pf-phone { position: absolute; right: -40px; bottom: -70px; width: 130px; }
.ss-website-pf-s09__links { inset: 0; width: 1600px; height: 900px; }
.ss-website-pf-s09__links path { stroke: rgba(0, 113, 206, 0.45); stroke-width: 2; }
.ss-website-pf-s09__caps { inset: 0; margin: 0; padding: 0; list-style: none; }
.ss-website-pf-s09__cap { position: absolute; display: flex; align-items: center; gap: 14px; width: 330px; height: 100px; padding: 0 18px; border-radius: 20px; }
.ss-website-pf-s09__cap span { display: grid; gap: 4px; }
.ss-website-pf-s09__cap b { font-size: calc(16px * var(--pf-b)); font-weight: 700; color: var(--pf-blue); }
.ss-website-pf-s09__cap small { font-size: calc(13.5px * var(--pf-b)); line-height: 1.4; color: var(--pf-text); }
.ss-website-pf-s09__cap--0 { left: 120px; top: 350px; } .ss-website-pf-s09__cap--1 { left: 120px; top: 520px; } .ss-website-pf-s09__cap--2 { left: 120px; top: 690px; }
.ss-website-pf-s09__cap--3 { left: 1150px; top: 350px; } .ss-website-pf-s09__cap--4 { left: 1150px; top: 520px; } .ss-website-pf-s09__cap--5 { left: 1150px; top: 690px; }

/* 10 Lite + Pro */
.ss-website-pf-s10__title { left: 110px; top: 120px; width: 1100px; }
.ss-website-pf-s10__panel { top: 260px; width: 660px; height: 520px; margin: 0; padding: 40px 40px 0; border-radius: 30px; overflow: hidden; }
.ss-website-pf-s10__panel--lite { left: 110px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 254, 0.8)); box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(14, 26, 58, 0.05), 0 40px 90px rgba(14, 40, 100, 0.14); }
.ss-website-pf-s10__panel--pro { left: 830px; color: #FFFFFF; background: radial-gradient(500px 400px at 85% 0%, #1E4DA0 0%, rgba(30, 77, 160, 0) 70%), linear-gradient(160deg, #0B2563 0%, #061536 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 40px 90px rgba(4, 17, 46, 0.4); }
.ss-website-pf-s10__name { position: relative; z-index: 1; margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -0.02em; color: #0E1A3A; }
.ss-website-pf-s10__panel--pro .ss-website-pf-s10__name { color: #FFFFFF; }
.ss-website-pf-s10__panel--pro .ss-website-pf-acc { color: #4DA3FF; }
.ss-website-pf-s10__tag { position: relative; z-index: 1; margin: 8px 0 0; font-size: calc(13px * var(--pf-b)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0071CE; }
.ss-website-pf-s10__panel--pro .ss-website-pf-s10__tag { color: #7FC0FF; }
.ss-website-pf-s10__body { position: relative; z-index: 1; width: 270px; margin: 22px 0 0; font-size: calc(16px * var(--pf-b)); line-height: 1.55; color: #3B475E; }
.ss-website-pf-s10__panel--pro .ss-website-pf-s10__body { color: rgba(255, 255, 255, 0.76); }
.ss-website-pf-s10__ui { position: absolute; right: 30px; top: 40px; width: 300px; }
.ss-website-pf-s10__traits { position: absolute; left: 30px; right: 30px; bottom: 30px; height: 76px; margin: 0; padding: 0 10px; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border-radius: 18px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.05); }
.ss-website-pf-s10__panel--pro .ss-website-pf-s10__traits { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.ss-website-pf-s10__traits li { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: calc(14px * var(--pf-b)); font-weight: 600; }
.ss-website-pf-s10__traits .ss-website-icon { width: 18px; height: 18px; color: #0071CE; }
.ss-website-pf-s10__panel--pro .ss-website-pf-s10__traits .ss-website-icon { color: #7FC0FF; }
.ss-website-pf-s10__link { inset: 0; width: 1600px; height: 900px; z-index: 1; }
.ss-website-pf-s10__link path { stroke: #0071CE; stroke-width: 2; }
.ss-website-pf-s10__hub { left: 744px; top: 464px; z-index: 2; width: 112px; height: 112px; display: grid; place-items: center; border-radius: 28px; background: linear-gradient(150deg, #FFFFFF, #EEF4FC); box-shadow: 0 0 0 10px rgba(0, 113, 206, 0.08), 0 24px 50px rgba(14, 40, 100, 0.22); }
.ss-website-pf-s10__hub img { width: 76px; height: auto; }

/* 11 / 12 Tiers */
.ss-website-pf-tier__glass { right: 60px; top: 70px; width: 760px; height: auto; }
.ss-website-pf-tier__glow { inset: 0; background: radial-gradient(700px 500px at 75% 45%, rgba(47, 140, 240, 0.28), rgba(47, 140, 240, 0) 70%); }
.ss-website-pf-tier__copy { left: 110px; top: 130px; width: 620px; }
.ss-website-pf-tier__fit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; }
.ss-website-pf-tier__fit span { margin-inline-end: 6px; font-size: calc(14px * var(--pf-b)); font-weight: 600; color: var(--pf-muted); }
.ss-website-pf-tier__fit i { padding: 6px 13px; border-radius: 999px; font-style: normal; font-size: calc(13px * var(--pf-b)); font-weight: 600; color: var(--pf-blue); background: rgba(0, 113, 206, 0.08); box-shadow: inset 0 0 0 1px rgba(0, 113, 206, 0.18); }
.ss-website-pf-scene--dark .ss-website-pf-tier__fit i { color: #CFE5FF; background: rgba(77, 163, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(77, 163, 255, 0.3); }
.ss-website-pf-tier__copy .ss-website-pf-body { font-size: calc(18px * var(--pf-b)); margin-top: 20px; }
.ss-website-pf-tier__list { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.ss-website-pf-tier__list li { display: flex; align-items: center; gap: 16px; }
.ss-website-pf-tier__list li span { display: grid; gap: 2px; }
.ss-website-pf-tier__list b { font-size: calc(17px * var(--pf-b)); font-weight: 700; color: var(--pf-navy); }
.ss-website-pf-tier__list small { font-size: calc(14px * var(--pf-b)); line-height: 1.4; color: var(--pf-text); }
.ss-website-pf-tier__device { left: 760px; top: 170px; width: 800px; }
.ss-website-pf-tier__card { position: absolute; left: -40px; bottom: -70px; width: 290px; }
.ss-website-pf-s12 .ss-website-pf-tier__card { left: auto; right: -10px; bottom: -40px; width: 320px; }

/* 13 Lifecycle */
.ss-website-pf-s13__copy { left: 110px; top: 120px; width: 960px; }
.ss-website-pf-s13__copy .ss-website-pf-body { max-width: 800px; margin-top: 18px; }
.ss-website-pf-s13__label { right: 120px; top: 330px; margin: 0; font-size: calc(13px * var(--pf-b)); font-weight: 600; color: var(--pf-muted); }
.ss-website-pf-s13__track { left: 110px; right: 110px; top: 360px; height: 280px; border-radius: 34px; opacity: 0.8; }
.ss-website-pf-s13__line { left: 0; top: 440px; width: 1600px; height: 20px; }
.ss-website-pf-s13__line path { stroke: #0071CE; stroke-width: 3; stroke-linecap: round; }
.ss-website-pf-s13__line .ss-website-pf-s13__rail { fill: none; stroke: rgba(14, 26, 58, 0.1); }
.ss-website-pf-s13__stages { left: 160px; right: 160px; top: 395px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.ss-website-pf-s13__stage { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ss-website-pf-s13__disc { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; color: #8A97AE; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.06), 0 14px 34px rgba(14, 40, 100, 0.08); }
.ss-website-pf-s13__disc .ss-website-icon { width: 36px; height: 36px; }
.ss-website-pf-s13__stage b { margin-top: 10px; font-size: calc(20px * var(--pf-b)); font-weight: 700; color: var(--pf-navy); }
.ss-website-pf-s13__stage b i { font-style: normal; color: var(--pf-blue); }
.ss-website-pf-s13__stage small { max-width: 200px; font-size: calc(14px * var(--pf-b)); line-height: 1.4; color: var(--pf-text); }
.ss-website-pf-s13__roles { left: 110px; right: 110px; top: 690px; height: 70px; margin: 0; padding: 8px 50px; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; border-radius: 20px; }
.ss-website-pf-s13__role { display: grid; place-items: center; border-radius: 14px; font-size: calc(14px * var(--pf-b)); font-weight: 600; text-align: center; color: var(--pf-muted); }
.ss-website-pf-s13__role--0 { grid-column: 1; } .ss-website-pf-s13__role--1 { grid-column: 2 / span 2; } .ss-website-pf-s13__role--2 { grid-column: 4; } .ss-website-pf-s13__role--3 { grid-column: 5; }

/* 14 Implementation */
.ss-website-pf-s14__arch { right: -80px; top: 30px; width: 1060px; height: auto; }
.ss-website-pf-s14__copy { left: 110px; top: 130px; width: 780px; }
.ss-website-pf-s14__steps { margin: 34px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; }
.ss-website-pf-s14__steps li { display: flex; align-items: flex-start; gap: 16px; }
.ss-website-pf-s14__steps li span { display: grid; gap: 4px; }
.ss-website-pf-s14__steps b { font-size: calc(18px * var(--pf-b)); font-weight: 700; color: var(--pf-blue); }
.ss-website-pf-s14__steps small { font-size: calc(14.5px * var(--pf-b)); line-height: 1.5; color: var(--pf-text); }
.ss-website-pf-s14__statement { margin: 30px 0 0; font-size: calc(17px * var(--pf-b)); font-weight: 600; color: var(--pf-navy); }
.ss-website-pf-s14__outcomes { left: 110px; right: 110px; bottom: 110px; height: 100px; margin: 0; padding: 0 16px; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; border-radius: 24px; }
.ss-website-pf-s14__outcomes li { display: flex; align-items: center; gap: 14px; padding: 0 16px; font-size: calc(16px * var(--pf-b)); font-weight: 700; color: var(--pf-navy); }
.ss-website-pf-s14__outcomes li + li { border-inline-start: 1px solid rgba(14, 26, 58, 0.08); }

/* 15 Region (dark, website globe) */
.ss-website-pf-s15__globe { right: -200px; top: 40px; width: 1040px; height: 1040px; }
.ss-website-pf .ss-website-pf-s15__g { width: 100%; max-width: none; }
.ss-website-pf-s15__copy { left: 110px; top: 160px; width: 640px; }
.ss-website-pf-s15__facts { margin: 34px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; width: 560px; }
.ss-website-pf-s15__facts li { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 18px; font-size: calc(16px * var(--pf-b)); font-weight: 600; line-height: 1.4; color: #FFFFFF; }
.ss-website-pf-s15__facts .ss-website-pf-acc { color: #7FC0FF; }

/* 16 Leadership */
.ss-website-pf-s16__head { left: 110px; top: 120px; width: 900px; }
.ss-website-pf-s16__team { right: 110px; top: 120px; width: 440px; display: flex; align-items: center; gap: 16px; margin: 0; padding: 18px 22px; border-radius: 20px; font-size: calc(16px * var(--pf-b)); line-height: 1.5; color: var(--pf-text); }
.ss-website-pf-s16__team .ss-website-pf-acc { font-weight: 700; }
.ss-website-pf-s16__people { left: 110px; right: 110px; top: 300px; height: 350px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ss-website-pf-s16__card { position: relative; display: grid; grid-template-columns: 0.95fr 1fr; overflow: hidden; border-radius: 28px; }
.ss-website-pf-s16__photo { position: relative; display: block; overflow: hidden; background: linear-gradient(180deg, #F1F5FB, #E3EBF6); }
.ss-website-pf-s16__photo img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; translate: -50% 0; }
.ss-website-pf-scene.is-active .ss-website-pf-s16__photo img { animation: pf-parallax 9s linear both; }
@keyframes pf-parallax { from { transform: translateY(26px) scale(1.06); } to { transform: none; } }
.ss-website-pf-s16__text { display: grid; align-content: center; gap: 8px; padding: 22px; }
.ss-website-pf-s16__text b { font-size: calc(22px * var(--pf-b)); line-height: 1.2; color: var(--pf-navy); }
.ss-website-pf-s16__text i { font-style: normal; font-size: calc(12px * var(--pf-b)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pf-blue); }
.ss-website-pf-s16__text small { margin-top: 6px; font-size: calc(14.5px * var(--pf-b)); line-height: 1.5; color: var(--pf-text); }
.ss-website-pf-s16__support { left: 110px; right: 110px; top: 690px; height: 92px; display: flex; align-items: center; gap: 30px; padding: 0 36px; border-radius: 22px; }
.ss-website-pf-s16__support p { margin: 0; font-size: calc(15px * var(--pf-b)); font-weight: 600; color: var(--pf-muted); white-space: nowrap; }
.ss-website-pf-s16__support ul { display: flex; flex: 1; align-items: center; justify-content: space-around; margin: 0; padding: 0; list-style: none; }
.ss-website-pf-s16__logo img { display: block; width: auto; }
.ss-website-pf-s16__logo--dar-ventures img, .ss-website-pf-s16__logo--orbit img { filter: brightness(0); opacity: 0.82; }

/* 17 Momentum (dark) */
.ss-website-pf-s17__head { left: 110px; top: 110px; width: 1300px; }
.ss-website-pf-s17__metrics { left: 110px; right: 110px; top: 250px; bottom: 140px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 22px; }
.ss-website-pf-s17__m { position: relative; display: grid; align-content: end; gap: 8px; padding: 30px 32px; overflow: hidden; border-radius: 28px; }
.ss-website-pf-s17__m--0 { grid-row: 1 / span 2; }
.ss-website-pf-s17__m--3 { grid-column: 2 / span 2; }
.ss-website-pf-s17__waves { position: absolute; right: -40px; top: 0; width: 520px; height: 300px; }
.ss-website-pf-s17__waves path { stroke: rgba(127, 192, 255, 0.28); stroke-width: 1.2; }
.ss-website-pf-s17__art { position: absolute; right: 26px; top: 24px; width: 220px; opacity: 0.95; }
.ss-website-pf-s17__art .ss-website-stat-art { width: 100%; height: auto; }
.ss-website-pf-s17__value { position: relative; font-size: 84px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.ss-website-pf-s17__m--0 .ss-website-pf-s17__value { font-size: 150px; }
.ss-website-pf-s17__label { position: relative; font-size: calc(17px * var(--pf-b)); line-height: 1.45; color: rgba(255, 255, 255, 0.76); max-width: 460px; }
.ss-website-pf-s17__note { position: relative; font-size: calc(14px * var(--pf-b)); font-weight: 600; letter-spacing: 0.06em; color: #7FC0FF; }
.ss-website-pf-s17__asof { right: 110px; bottom: 100px; margin: 0; font-size: calc(13px * var(--pf-b)); color: rgba(255, 255, 255, 0.5); }

/* 18 See SkyStruct in action (dark) */
.ss-website-pf-s18__bg { inset: 0; overflow: hidden; }
.ss-website-pf-s18__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.ss-website-pf-s18__light { position: absolute; inset: -20%; background: linear-gradient(105deg, rgba(47, 140, 240, 0) 40%, rgba(80, 160, 255, 0.22) 50%, rgba(47, 140, 240, 0) 60%); mix-blend-mode: screen; transform: translateX(-60%); }
.ss-website-pf-scene.is-active .ss-website-pf-s18__light { animation: pf-light 4s var(--pf-ease-io) 0.4s both; }
@keyframes pf-light { from { transform: translateX(-60%); } to { transform: translateX(40%); } }
.ss-website-pf-s18__copy { left: 120px; top: 120px; width: 640px; }
.ss-website-pf-s18__logo { display: block; width: 170px; height: auto; margin-bottom: 70px; }
.ss-website-pf-s18 .ss-website-pf-acc { color: #3D9BFF; }
.ss-website-pf-s18__contact { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ss-website-pf-s18__contact li { display: flex; align-items: center; gap: 14px; font-size: calc(16px * var(--pf-b)); color: rgba(255, 255, 255, 0.8); }
.ss-website-pf-s18__contact li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3D9BFF; }
.ss-website-pf-s18__contact a { color: #FFFFFF; text-decoration: none; }
.ss-website-pf-s18__contact a:hover { color: #7FC0FF; }
.ss-website-pf-s18__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.ss-website-pf-s18__more { display: flex; gap: 22px; margin-top: 20px; }
.ss-website-pf-s18 .ss-website-pf-link { color: #FFFFFF; }
.ss-website-pf-s18 .ss-website-pf-link .ss-website-icon { color: #7FC0FF; }

/* Buttons: neutral CTAs — ink on light, white on dark */
.ss-website-pf .ss-website-button--primary { --ss-btn-bg: #0B0D12; --ss-btn-fg: #FFFFFF; }
.ss-website-pf .ss-website-button--primary:hover { --ss-btn-bg: #2A2E36; }
.ss-website-pf-entry .ss-website-button--primary, .ss-website-pf-scene--dark .ss-website-button--primary { --ss-btn-bg: #F4F5F7; --ss-btn-fg: #0B0D12; }
.ss-website-pf-entry .ss-website-button--primary:hover, .ss-website-pf-scene--dark .ss-website-button--primary:hover { --ss-btn-bg: #FFFFFF; }
.ss-website-pf-entry .ss-website-button--secondary { --ss-btn-bg: rgba(255, 255, 255, 0.06); --ss-btn-fg: #FFFFFF; --ss-btn-border: rgba(255, 255, 255, 0.28); }
.ss-website-pf-entry .ss-website-button--secondary:hover { --ss-btn-border: #FFFFFF; --ss-btn-fg: #FFFFFF; }

/* ================= Chrome (recedes behind the slide) ================= */
.ss-website-pf__top { position: absolute; inset-inline: 0; top: 0; z-index: 6; height: 0; pointer-events: none; transition: opacity 500ms; }
.ss-website-pf-rail { position: absolute; inset-inline: 0; top: 0; display: flex; gap: 3px; height: 3px; }
.ss-website-pf-rail__seg { position: relative; flex: 1; overflow: hidden; background: rgba(14, 26, 58, 0.08); }
.ss-website-pf[data-ss-tone-now="dark"] .ss-website-pf-rail__seg { background: rgba(255, 255, 255, 0.12); }
.ss-website-pf-rail__seg > span { position: absolute; inset: 0; background: #0071CE; transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .ss-website-pf-rail__seg > span { transform-origin: right; }
.ss-website-pf-rail__seg.is-done > span { transform: scaleX(1); }
.ss-website-pf__chapter { position: absolute; top: 18px; inset-inline-end: 24px; display: flex; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: rgba(14, 26, 58, 0.45); }
.ss-website-pf__chapter i { font-style: normal; color: #0071CE; font-variant-numeric: tabular-nums; }
.ss-website-pf[data-ss-tone-now="dark"] .ss-website-pf__chapter { color: rgba(255, 255, 255, 0.5); }
.ss-website-pf[data-ss-tone-now="dark"] .ss-website-pf__chapter i { color: #4DA3FF; }

.ss-website-pf__controls {
  position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 7; translate: -50% 0;
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; color: #0E1A3A;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5)); border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(14, 26, 58, 0.05), 0 14px 36px rgba(14, 40, 100, 0.14);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  transition: opacity 500ms var(--pf-ease), transform 500ms var(--pf-ease), color 600ms;
}
.ss-website-pf[data-ss-tone-now="dark"] .ss-website-pf__controls { color: #FFFFFF; background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 36px rgba(0, 0, 0, 0.3); }
.ss-website-pf-ctrl { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; text-decoration: none; transition: background-color 160ms; }
.ss-website-pf-ctrl[hidden] { display: none; }
.ss-website-pf-ctrl .ss-website-icon { width: 18px; height: 18px; }
.ss-website-pf-ctrl:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.ss-website-pf-ctrl:focus-visible, .ss-website-pf-chapter:focus-visible { outline: 2px solid #0071CE; outline-offset: 2px; }
.ss-website-pf-ctrl:disabled { opacity: 0.3; cursor: default; background: transparent; }
.ss-website-pf-ctrl--play { width: 44px; height: 44px; color: #FFFFFF; background: #0071CE; }
.ss-website-pf-ctrl--play:hover { background: #005BA6; }
.ss-website-pf-ctrl__ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); rotate: -90deg; pointer-events: none; }
.ss-website-pf-ctrl__ring circle { fill: none; stroke: rgba(0, 113, 206, 0.18); stroke-width: 2.4; }
.ss-website-pf-ctrl__ring .ss-website-pf-ctrl__ring-fill { stroke: #0071CE; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.ss-website-pf-ctrl__play, .ss-website-pf-ctrl__on, .ss-website-pf-ctrl__max { display: none; }
.ss-website-pf:not(.is-playing) .ss-website-pf-ctrl__pause { display: none; }
.ss-website-pf:not(.is-playing) .ss-website-pf-ctrl__play { display: block; }
.ss-website-pf:not(.is-muted) .ss-website-pf-ctrl__on { display: block; }
.ss-website-pf:not(.is-muted) .ss-website-pf-ctrl__off { display: none; }
.ss-website-pf:not(.is-fullscreen) .ss-website-pf-ctrl__max { display: block; }
.ss-website-pf:not(.is-fullscreen) .ss-website-pf-ctrl__min { display: none; }
.ss-website-pf__count { min-width: 58px; margin: 0 4px; font-size: 13px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; opacity: 0.6; }
.ss-website-pf__sep { width: 1px; height: 22px; margin-inline: 3px; background: currentColor; opacity: 0.14; }
.ss-website-pf.is-idle .ss-website-pf__controls { opacity: 0.12; transform: translateY(8px); }
.ss-website-pf.is-idle .ss-website-pf__top { opacity: 0.35; }
.ss-website-pf.is-idle { cursor: none; }

/* Contents */
.ss-website-pf-contents { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 24px; background: rgba(2, 4, 15, 0.56); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 280ms var(--pf-ease); }
.ss-website-pf-contents[hidden] { display: none; }
.ss-website-pf-contents.is-open { opacity: 1; }
.ss-website-pf-contents__panel { width: min(1120px, 100%); max-height: calc(100dvh - 48px); overflow: auto; padding: 24px; border-radius: 26px; color: #0B0D12; background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 251, 0.94)); box-shadow: inset 0 1px 0 #FFFFFF, 0 40px 100px rgba(2, 4, 15, 0.4); transform: translateY(14px) scale(0.985); transition: transform 380ms var(--pf-ease); }
.ss-website-pf-contents.is-open .ss-website-pf-contents__panel { transform: none; }
.ss-website-pf-contents__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ss-website-pf-contents__head p { margin: 4px 0 0; font-size: 14px; color: #4B5563; }
.ss-website-pf-contents__title { margin: 0; font-size: 22px; font-weight: 600; }
.ss-website-pf-contents__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ss-website-pf-chapter { position: relative; display: grid; align-content: space-between; gap: 16px; width: 100%; min-height: 96px; padding: 12px; overflow: hidden; border: 1px solid rgba(2, 4, 15, 0.08); border-radius: 14px; background: #FFFFFF; font: inherit; text-align: start; color: #0B0D12; cursor: pointer; transition: border-color 160ms, transform 160ms; }
.ss-website-pf-chapter:hover { border-color: #0071CE; transform: translateY(-2px); }
.ss-website-pf-chapter i { font-style: normal; font-size: 12px; font-weight: 700; color: #0071CE; font-variant-numeric: tabular-nums; }
.ss-website-pf-chapter b { font-size: 13.5px; line-height: 1.3; }
.ss-website-pf-chapter__bar { position: absolute; inset-inline: 0; bottom: 0; height: 5px; background: #E3EEFA; }
.ss-website-pf-chapter--dark .ss-website-pf-chapter__bar { background: #0B2563; }
.ss-website-pf-chapter[aria-current] { border-color: #0071CE; box-shadow: 0 0 0 1px #0071CE; }
.ss-website-pf-ctrl--close { color: #0B0D12; flex: none; }
.ss-website-pf-ctrl--home { color: inherit; }

/* Entry screen */
.ss-website-pf-entry { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; color: #FFFFFF; background: radial-gradient(80% 70% at 70% 10%, #16306A 0%, rgba(22, 48, 106, 0) 60%), radial-gradient(60% 60% at 15% 100%, #0B2A63 0%, rgba(11, 42, 99, 0) 70%), #030A1C; }
.ss-website-pf-entry[hidden] { display: none; }
.ss-website-pf.is-entered .ss-website-pf-entry { pointer-events: none; animation: pf-entry-out 900ms var(--pf-ease-io) forwards; }
@keyframes pf-entry-out { to { opacity: 0; transform: scale(1.03); } }
.ss-website-pf-entry__inner { display: grid; justify-items: center; text-align: center; }
.ss-website-pf-entry__logo { width: clamp(150px, 20vw, 260px); height: auto; animation: pf-rise 1000ms var(--pf-ease) 200ms both; }
.ss-website-pf-entry__line { display: block; width: clamp(120px, 14vw, 200px); height: 2px; margin: clamp(16px, 4vh, 30px) 0 clamp(14px, 3.5vh, 26px); border-radius: 2px; background: #0071CE; animation: pf-line 1300ms var(--pf-ease-io) 600ms both; }
.ss-website-pf-entry__title { margin: 0; font-size: clamp(24px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.02em; animation: pf-rise 900ms var(--pf-ease) 700ms both; }
.ss-website-pf-entry__meta { display: flex; gap: 10px; margin: 10px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.66); animation: pf-rise 900ms var(--pf-ease) 820ms both; }
.ss-website-pf-entry__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(18px, 5vh, 34px); animation: pf-rise 900ms var(--pf-ease) 950ms both; }
.ss-website-pf-entry__home { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding: 0 8px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.78); text-decoration: none; animation: pf-fade 900ms var(--pf-ease) 1100ms both; }
.ss-website-pf-entry__home:hover { color: #FFFFFF; }
.ss-website-pf-entry__home .ss-website-icon, .ss-website-pf-entry__sound .ss-website-icon { width: 16px; height: 16px; }
.ss-website-pf-entry__sound { display: inline-flex; align-items: center; gap: 8px; margin: clamp(8px, 3vh, 22px) 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.5); animation: pf-fade 900ms var(--pf-ease) 1200ms both; }

/* Rotate-your-device gate (phones and small tablets held upright) */

/* Portrait screens: 900×1600 artboard. Copy on top (the visual group is placed below it by the
   controller); the chrome becomes a compact dock. */
.ss-website-pf-vis { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.ss-website-pf-vis > * { position: absolute; }
.ss-website-pf.is-tall :is(.ss-website-pf-art, .ss-website-pf-frame__art) { width: 900px; height: 1600px; }
.ss-website-pf.is-tall .ss-website-pf-art > :is([class*="__copy"], [class*="__head"], .ss-website-pf-h2) { left: 64px !important; right: auto !important; top: calc(150px + var(--pf-tall-shift, 0px)) !important; width: 772px !important; max-width: none; }
.ss-website-pf.is-tall .ss-website-pf-body { max-width: none; }
.ss-website-pf.is-tall .ss-website-pf-art > [class*="__head"] .ss-website-pf-h2 { white-space: normal; }
@media (max-width: 600px) {
  .ss-website-pf-ctrl { width: 36px; height: 36px; }
  .ss-website-pf-ctrl .ss-website-icon { width: 17px; height: 17px; }
  .ss-website-pf-ctrl--play { width: 40px; height: 40px; }
  .ss-website-pf__controls { gap: 2px; bottom: max(10px, env(safe-area-inset-bottom)); padding: 3px; }
  .ss-website-pf__sep { display: none; }
  .ss-website-pf__count { min-width: 46px; font-size: 12px; }
  .ss-website-pf-contents__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone landscape: compact chrome */
@media (max-height: 520px) {
  .ss-website-pf-ctrl { width: 30px; height: 30px; }
  .ss-website-pf-ctrl .ss-website-icon { width: 16px; height: 16px; }
  .ss-website-pf-ctrl--play { width: 32px; height: 32px; }
  .ss-website-pf__controls { bottom: max(3px, env(safe-area-inset-bottom)); padding: 2px; }
  .ss-website-pf__sep { display: none; }
  .ss-website-pf__count { min-width: 48px; font-size: 12px; }
  .ss-website-pf__chapter { top: 10px; font-size: 11px; }
  .ss-website-pf-chapter { min-height: 64px; gap: 6px; padding: 8px; }
  .ss-website-pf-chapter b { font-size: 11.5px; }
}
@media (max-width: 900px) and (min-height: 521px) { .ss-website-pf-contents__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* No JavaScript: a readable page */
html:not(.ss-website-js) .ss-website-body--standalone { overflow: auto; }
html:not(.ss-website-js) .ss-website-pf { position: static; height: auto; overflow: visible; }
html:not(.ss-website-js) .ss-website-pf__stage { position: static; }
html:not(.ss-website-js) .ss-website-pf-scene[hidden] { display: block; position: relative; height: 56.25vw; }
html:not(.ss-website-js) :is(.ss-website-pf-entry, .ss-website-pf__controls, .ss-website-pf-rail, .ss-website-pf-frame) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ss-website-pf [data-a], .ss-website-pf-scene, .ss-website-pf-tx > span, .ss-website-pf-entry * { animation-delay: 0ms !important; }
  .ss-website-pf.is-tx .ss-website-pf-tx > span { display: none; }
  .ss-website-pf-scene.is-leaving { display: none; }
}
.ss-website-pf-s01__title { width: 640px; font-size: 50px; }
.ss-website-pf-s02__line1 { color: var(--pf-navy); }
/* Refinements after PDF side-by-side review */
.ss-website-pf-s09__devices { left: 520px; top: 280px; width: 560px; }
.ss-website-pf-s09__devices .ss-website-pf-phone { right: -50px; bottom: -80px; width: 140px; }
.ss-website-pf-phone__screen { padding: 0; }
.ss-website-pf-phone__screen > .ss-website-pui__card { zoom: 0.48; }
.ss-website-pf-s12 .ss-website-pf-tier__card { right: 40px; bottom: -70px; width: 330px; }
.ss-website-pf-s17__head { top: 128px; }
.ss-website-pf-s17__head .ss-website-pf-h2 { font-size: 44px; white-space: nowrap; }
.ss-website-pf-s17__metrics { top: 270px; }
.ss-website-pf-s18__bg { inset: -240px -700px -240px -900px; }
.ss-website-pf-s18__bg img { object-position: 78% 50%; }
.ss-website-pf.is-tx[data-ss-txnow="dark"] .ss-website-pf-scene.is-leaving { animation-name: pf-out-dark; animation-duration: 850ms; }
@keyframes pf-out-dark { 0%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pf-tx-dark { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(380); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(380); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(380); } }
/* Arabic / RTL: the whole composition mirrors (right-to-left reading order); text, product UI and
   the globe are flipped back so they read normally. Lines and artwork mirror with the layout. */
[dir="rtl"] .ss-website-pf-art { transform: translate(-50%, calc(-50% + var(--pf-shift, 0px))) scale(calc(-1 * var(--pf-s)), var(--pf-s)); }
[dir="rtl"] .ss-website-pf-art > :not(svg):not(img):not(.ss-website-pf-s06__beam):not(.ss-website-pf-tier__glow):not(.ss-website-pf-vis),
[dir="rtl"] .ss-website-pf-vis > :not(svg):not(img):not(.ss-website-pf-s06__beam):not(.ss-website-pf-tier__glow) { scale: -1 1; }
[dir="rtl"] .ss-website-pf-s10__ui { right: auto; left: 30px; }
[lang="ar"] .ss-website-pf-h2--lg { font-size: 48px; }
[lang="ar"] .ss-website-pf-h2--xl { font-size: 64px; }
[lang="ar"] .ss-website-pf-s10__name { font-size: 30px; }
[lang="ar"] .ss-website-pf-s10__ui { width: 230px; }
[lang="ar"] .ss-website-pf-s05__copy { width: 540px; }
[dir="rtl"] .ss-website-pf-s05__device { left: 830px; width: 700px; }

/* ===== Polish pass: layering, full-bleed architecture, readable product scale ===== */
/* Product layers: device frame → screen (clipped to the display) → overlay card (may break out). */
.ss-website-pf-laptop__screen { z-index: 0; } .ss-website-pf-laptop__frame { z-index: 1; }
.ss-website-pf-tier__card, .ss-website-pf-s06__card { z-index: 3; }
.ss-website-pf-tier__card { left: -70px; bottom: -96px; width: 300px; }
.ss-website-pf-s12 .ss-website-pf-tier__card { left: auto; right: 10px; bottom: -110px; width: 330px; }
.ss-website-pf-tier__card .ss-website-pui__card { box-shadow: 0 0 0 1px rgba(14, 26, 58, 0.06), 0 30px 70px rgba(14, 40, 100, 0.28); }

/* Full-bleed architecture: one artwork, art-directed per scene, faded into the page (no image box). */
.ss-website-pf-s01__arch, .ss-website-pf-s03__arch, .ss-website-pf-s14__arch { left: -260px; right: auto; bottom: auto; top: -140px; width: calc(100% + 520px); height: calc(100% + 280px); max-width: none; object-fit: cover; opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 52%), linear-gradient(0deg, transparent 4%, #000 26%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 18%, #000 52%), linear-gradient(0deg, transparent 4%, #000 26%); mask-composite: intersect; }
.ss-website-pf-s01__arch { object-position: 70% 100%; -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 58%); mask-image: linear-gradient(90deg, transparent 22%, #000 58%); }
.ss-website-pf-s03__arch { object-position: 92% 0%; }
.ss-website-pf-s14__arch { object-position: 62% 30%; transform-origin: 100% 40%; }
.ss-website-pf-s01__panel2 { left: 1170px; top: 470px; width: 360px; }

/* 09: laptop midground, phone foreground, lines behind both. */
.ss-website-pf-s09__links { z-index: 0; }
.ss-website-pf-s09__devices { z-index: 1; left: 560px; top: 290px; width: 480px; }
.ss-website-pf-s09__devices .ss-website-pf-phone { right: -64px; bottom: -40px; width: 150px; z-index: 2; filter: drop-shadow(0 24px 40px rgba(14, 40, 100, 0.25)); }
.ss-website-pf-phone__screen { display: grid; place-items: center; padding: 0; background: linear-gradient(180deg, #F3F7FD, #E6EEF9); }
.ss-website-pf-phone__screen > .ss-website-pui__card { zoom: 0.5; width: 236px !important; }
.ss-website-pf-s09__caps { z-index: 2; }

/* 10: Lite + Pro — product UI at a readable scale (cropped to the meaningful region). */
.ss-website-pf-s10__title { top: 112px; }
.ss-website-pf-s10__panel { top: 200px; height: 640px; padding: 34px 36px 0; }
.ss-website-pf-s10__ui { position: relative; right: auto; top: auto; width: 100%; margin-top: 20px; }
.ss-website-pf-s10__ui .ss-website-pui__scaled { --ss-view-w: 700; --ss-view-h: 360; }
.ss-website-pf-s10__body { width: auto; margin-top: 18px; font-size: calc(15px * var(--pf-b)); }
.ss-website-pf-s10__traits { height: 66px; bottom: 28px; }
[lang="ar"] .ss-website-pf-s10__ui { width: 100%; left: auto; }

/* 15: the Home globe on a light page */
.ss-website-pf-s15__globe { right: -120px; top: 30px; width: 900px; height: 900px; }
.ss-website-pf-s15__facts li { color: var(--pf-navy); }
.ss-website-pf-s15__facts .ss-website-pf-acc { color: var(--pf-blue); }

/* 17: momentum graphics in SkyStruct blue/white on the dark cards */
.ss-website-pf-s17__art { --ss-stat: #4DA3FF; --ss-stat-soft: rgba(127, 192, 255, 0.28); }
.ss-website-pf-s17__art .ss-website-stat-art__base { stroke: rgba(255, 255, 255, 0.18); }
.ss-website-pf-s17__art .ss-website-stat-art__head line { stroke: #FFFFFF; }
.ss-website-pf-s17__art .ss-website-stat-art__head circle, .ss-website-pf-s17__art .ss-website-stat-art__hub { fill: #FFFFFF; }
.ss-website-pf-s17__art .ss-website-stat-art__halo { fill: #4DA3FF; opacity: 0.3; }
.ss-website-pf-s11 .ss-website-pf-tier__card { left: 20px; bottom: -104px; }
.ss-website-pf.is-tall .ss-website-pf-art > .ss-website-pf-s18__copy { zoom: 1.3; width: 594px !important; }  /* closing CTA: readable buttons on phones */

/* ================= Portrait compositions (900 × 1600 artboard) =================
   One layout per scene type, all derived from the desktop / PDF composition: copy on top, the
   scene's visual large below it; dense scenes reveal their content in two states over the
   10-second scene instead of shrinking everything at once. Safe zone: y 140 – 1390. */
.ss-website-pf.is-tall .ss-website-pf-scene:not(.ss-website-pf-s01) .ss-website-pf-vis { width: 900px; height: 1600px; }
.ss-website-pf.is-tall .ss-website-pf-h2 { font-size: 56px; }
.ss-website-pf.is-tall .ss-website-pf-h2--lg { font-size: 62px; }
.ss-website-pf.is-tall .ss-website-pf-h2--xl { font-size: 74px; }
[lang="ar"] .ss-website-pf.is-tall :is(.ss-website-pf-h2, .ss-website-pf-h2--lg) { font-size: 52px; }
.ss-website-pf.is-tall .ss-website-pf-art > :is([class*="__head"]) { text-align: center; }
.ss-website-pf.is-tall .ss-website-pf-s15__copy, .ss-website-pf.is-tall .ss-website-pf-s16__head, .ss-website-pf.is-tall .ss-website-pf-s17__head { text-align: start; }
@keyframes pf-tall-out { to { opacity: 0; transform: translateY(-18px); visibility: hidden; } }

/* 02 Editorial + image: statement, then the categories over the crane window. */
.ss-website-pf.is-tall .ss-website-pf-s02__crane { left: 300px; right: 0; top: 640px; bottom: auto; width: auto; height: 760px; border-radius: 70px 0 0 70px; }
.ss-website-pf.is-tall .ss-website-pf-s02__spine { left: 76px; top: 700px; height: 640px; }
.ss-website-pf.is-tall .ss-website-pf-s02__cats { left: 120px; top: 700px; width: 470px; gap: 26px; }
.ss-website-pf.is-tall .ss-website-pf-s02__cats .ss-website-pf-chip { padding: 16px 22px 16px 14px; box-shadow: 0 14px 34px rgba(14, 40, 100, 0.12); }

/* 03 Editorial over architecture: readable facts as a 2 × 2 glass panel. */
.ss-website-pf.is-tall .ss-website-pf-s03__arch { right: -420px; top: 560px; width: 1500px; opacity: 0.9; }
.ss-website-pf.is-tall .ss-website-pf-s03__facts { left: 60px; right: 60px; top: auto; bottom: 230px; height: auto; grid-template-columns: 1fr 1fr; padding: 16px; gap: 0; }
.ss-website-pf.is-tall .ss-website-pf-s03__fact { padding: 26px 20px; }
.ss-website-pf.is-tall .ss-website-pf-s03__fact + .ss-website-pf-s03__fact { border-inline-start: 0; }
.ss-website-pf.is-tall .ss-website-pf-s03__fact:nth-child(even) { border-inline-start: 1px solid rgba(14, 26, 58, 0.08); }
.ss-website-pf.is-tall .ss-website-pf-s03__fact:nth-child(n + 3) { border-top: 1px solid rgba(14, 26, 58, 0.08); }
.ss-website-pf.is-tall .ss-website-pf-s03__fact dt { font-size: calc(16px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s03__fact dd { font-size: calc(20px * var(--pf-b)); }

/* 04 Diagram: sources (2 × 2) → fragmented history → consequences (2 × 2), top to bottom. */
.ss-website-pf.is-tall .ss-website-pf-s04__links { display: none; }
.ss-website-pf.is-tall :is(.ss-website-pf-s04__records, .ss-website-pf-s04__effects) { left: 50px; right: 50px; width: auto; grid-template-columns: 1fr 1fr; gap: 18px; }
.ss-website-pf.is-tall .ss-website-pf-s04__records { top: 420px; }
.ss-website-pf.is-tall .ss-website-pf-s04__effects { top: 1060px; }
.ss-website-pf.is-tall .ss-website-pf-s04__pile { left: 290px; top: 700px; width: 320px; height: 330px; }
.ss-website-pf.is-tall .ss-website-pf-s04__pile img { width: 300px; }
.ss-website-pf.is-tall :is(.ss-website-pf-s04__records, .ss-website-pf-s04__effects) .ss-website-pf-chip { min-height: 96px; }

/* 05 Product with callouts: the register large, two callouts above and two below it. */
.ss-website-pf.is-tall .ss-website-pf-s05__links { display: none; }
.ss-website-pf.is-tall .ss-website-pf-s05__note { display: none; }
.ss-website-pf.is-tall .ss-website-pf-s05__device { left: 50px; top: 800px; width: 800px; --tf: perspective(2200px) rotateY(-8deg) rotateX(4deg); }
.ss-website-pf.is-tall .ss-website-pf-s05__c0 { left: 50px; top: 640px; } .ss-website-pf.is-tall .ss-website-pf-s05__c1 { left: 470px; top: 640px; }
.ss-website-pf.is-tall .ss-website-pf-s05__c2 { left: 50px; top: 1250px; } .ss-website-pf.is-tall .ss-website-pf-s05__c3 { left: 470px; top: 1250px; }
.ss-website-pf.is-tall .ss-website-pf-callout { width: 380px; }

/* 06 Layered product: large stack under the copy. */
.ss-website-pf.is-tall .ss-website-pf-s06__stack { left: 0; top: 700px; width: 900px; height: 700px; }
.ss-website-pf.is-tall .ss-website-pf-s06__back { left: 50px; top: 0; width: 760px; --tf: perspective(2200px) rotateY(-10deg) rotateX(4deg); }
.ss-website-pf.is-tall .ss-website-pf-s06__front { left: 300px; top: 300px; width: 560px; --tf: perspective(2200px) rotateY(-10deg) rotateX(4deg) translateZ(60px); }
.ss-website-pf.is-tall .ss-website-pf-s06__card { left: 40px; top: 360px; width: 340px; }

/* 07 Categories: C.L.I.C. as a 2 × 2 of tall glass panels (colour identities kept; no giant letters). */
.ss-website-pf.is-tall :is(.ss-website-pf-s07__line, .ss-website-pf-s07__letter, .ss-website-pf-s07__node) { display: none; }
.ss-website-pf.is-tall .ss-website-pf-s07__pillars { left: 50px; right: 50px; top: 420px; bottom: 210px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; }
.ss-website-pf.is-tall .ss-website-pf-s07__pillar { padding: 40px 28px; gap: 16px; }
.ss-website-pf.is-tall .ss-website-pf-s07__pillar > span:first-of-type { font-size: calc(16px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s07__icon { bottom: 34px; }
.ss-website-pf.is-tall .ss-website-pf-s07__icon .ss-website-icon { width: 72px; height: 72px; }

/* 08 Hub: SkyStruct hub on top, groups 1–3, then 4–6 in the same places. */
.ss-website-pf.is-tall .ss-website-pf-s08__paths { display: none; }
.ss-website-pf.is-tall .ss-website-pf-s08__hub { left: 330px; top: 440px; width: 240px; height: 210px; }
.ss-website-pf.is-tall .ss-website-pf-s08__hub::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 70px; background: linear-gradient(rgba(77, 163, 255, 0.7), rgba(77, 163, 255, 0)); }
.ss-website-pf.is-tall .ss-website-pf-s08__node { left: 70px !important; width: 760px; height: 150px; padding: 0 30px; gap: 22px; }
.ss-website-pf.is-tall :is(.ss-website-pf-s08__node--0, .ss-website-pf-s08__node--3) { top: 740px; }
.ss-website-pf.is-tall :is(.ss-website-pf-s08__node--1, .ss-website-pf-s08__node--4) { top: 920px; }
.ss-website-pf.is-tall :is(.ss-website-pf-s08__node--2, .ss-website-pf-s08__node--5) { top: 1100px; }
.ss-website-pf.is-tall .ss-website-pf-s08__node b { font-size: calc(19px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s08__node small { font-size: calc(15px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s08__note { bottom: 200px; padding-inline: 60px; }

/* 09 Product + capabilities: devices large, capabilities 1–3, then 4–6. */
.ss-website-pf.is-tall .ss-website-pf-s09__links { display: none; }
.ss-website-pf.is-tall .ss-website-pf-s09__devices { left: 110px; top: 380px; width: 620px; }
.ss-website-pf.is-tall .ss-website-pf-s09__devices .ss-website-pf-phone { right: -70px; bottom: -60px; width: 170px; }
.ss-website-pf.is-tall .ss-website-pf-s09__cap { left: 70px !important; width: 760px; height: 140px; padding: 0 30px; gap: 22px; }
.ss-website-pf.is-tall :is(.ss-website-pf-s09__cap--0, .ss-website-pf-s09__cap--3) { top: 870px; }
.ss-website-pf.is-tall :is(.ss-website-pf-s09__cap--1, .ss-website-pf-s09__cap--4) { top: 1035px; }
.ss-website-pf.is-tall :is(.ss-website-pf-s09__cap--2, .ss-website-pf-s09__cap--5) { top: 1200px; }
.ss-website-pf.is-tall .ss-website-pf-s09__cap b { font-size: calc(19px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s09__cap small { font-size: calc(15px * var(--pf-b)); }

/* Two-state sequence for 08 + 09 (groups of three; ~5.4 s each). */
.ss-website-pf.is-tall :is(.ss-website-pf-s08__node--0, .ss-website-pf-s08__node--1, .ss-website-pf-s08__node--2, .ss-website-pf-s09__cap--0, .ss-website-pf-s09__cap--1, .ss-website-pf-s09__cap--2) {
  animation-name: pf-node, pf-tall-out; animation-duration: 480ms, 420ms; animation-delay: calc(var(--d, 0s) * var(--pf-tempo)), 5.3s; animation-fill-mode: both, forwards;
}
.ss-website-pf.is-tall :is(.ss-website-pf-s09__cap--0, .ss-website-pf-s09__cap--1, .ss-website-pf-s09__cap--2) { animation-name: pf-enter-l, pf-tall-out; }
.ss-website-pf.is-tall :is(.ss-website-pf-s08__node--3, .ss-website-pf-s09__cap--3) { --d: 13.6s !important; }
.ss-website-pf.is-tall :is(.ss-website-pf-s08__node--4, .ss-website-pf-s09__cap--4) { --d: 14.3s !important; }
.ss-website-pf.is-tall :is(.ss-website-pf-s08__node--5, .ss-website-pf-s09__cap--5) { --d: 15s !important; }

/* 10 Comparison: Lite above Pro, both large, joined through the SkyStruct mark. */
.ss-website-pf.is-tall .ss-website-pf-s10__link { display: none; }
.ss-website-pf.is-tall .ss-website-pf-s10__panel { left: 50px; width: 800px; height: 520px; padding: 36px 36px 0; }
.ss-website-pf.is-tall .ss-website-pf-s10__panel--lite { top: 300px; }
.ss-website-pf.is-tall .ss-website-pf-s10__panel--pro { top: 870px; }
.ss-website-pf.is-tall .ss-website-pf-s10__hub { left: 394px; top: 784px; }
.ss-website-pf.is-tall .ss-website-pf-s10__ui { right: 26px; top: 36px; width: 400px; }
.ss-website-pf.is-tall .ss-website-pf-s10__body { width: 300px; font-size: calc(15px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s10__name { font-size: 48px; }

/* 11 / 12 Product scene: copy, then the laptop + overlay as the hero of the lower half. */
.ss-website-pf.is-tall .ss-website-pf-tier__list small { display: none; }
.ss-website-pf.is-tall .ss-website-pf-tier__list { gap: 12px; margin-top: 22px; }
.ss-website-pf.is-tall .ss-website-pf-tier__copy .ss-website-pf-body { font-size: calc(16px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-tier__device { left: 40px; top: 850px; width: 820px; }
.ss-website-pf.is-tall .ss-website-pf-tier__card { left: -10px; bottom: -50px; width: 330px; }
.ss-website-pf.is-tall .ss-website-pf-s12 .ss-website-pf-tier__card { left: auto; right: -10px; bottom: -40px; width: 340px; }
.ss-website-pf.is-tall .ss-website-pf-tier__glass { right: -200px; top: 760px; width: 900px; }

/* 13 Timeline: the five stages as a vertical path spanning the screen; stakeholders below. */
.ss-website-pf.is-tall .ss-website-pf-s13__line, .ss-website-pf.is-tall .ss-website-pf-s13__label { display: none; }
.ss-website-pf.is-tall .ss-website-pf-s13__track { left: 40px; right: 40px; top: 470px; height: 780px; }
.ss-website-pf.is-tall .ss-website-pf-s13__stages { left: 80px; right: 80px; top: 500px; grid-template-columns: 1fr; grid-auto-rows: 144px; }
.ss-website-pf.is-tall .ss-website-pf-s13__stages::before { content: ""; position: absolute; left: 47px; top: 48px; bottom: 96px; width: 3px; border-radius: 2px; background: linear-gradient(#0071CE, rgba(0, 113, 206, 0.25)); }
.ss-website-pf.is-tall .ss-website-pf-s13__stage { position: relative; grid-template-columns: 96px 1fr; justify-items: start; align-content: center; column-gap: 28px; row-gap: 4px; text-align: start; }
.ss-website-pf.is-tall .ss-website-pf-s13__disc { grid-row: span 2; width: 96px; height: 96px; }
.ss-website-pf.is-tall .ss-website-pf-s13__stage b { margin: 0; align-self: end; font-size: calc(21px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s13__stage small { align-self: start; max-width: none; font-size: calc(15px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s13__roles { left: 40px; right: 40px; top: 1270px; height: auto; padding: 12px; grid-template-columns: 1fr 1fr; }
.ss-website-pf.is-tall .ss-website-pf-s13__role { grid-column: auto !important; min-height: 52px; padding: 6px 10px; }

/* 14 Implementation: steps 2 × 2 under the title, architecture as the lower stage, outcomes 2 × 2. */
.ss-website-pf.is-tall .ss-website-pf-s14__arch { right: -300px; top: 700px; width: 1300px; opacity: 0.85; }
.ss-website-pf.is-tall .ss-website-pf-s14__steps { gap: 30px 30px; }
.ss-website-pf.is-tall .ss-website-pf-s14__steps li { flex-direction: column; gap: 12px; }
.ss-website-pf.is-tall .ss-website-pf-s14__steps small { font-size: calc(15px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s14__outcomes { left: 50px; right: 50px; bottom: 210px; height: auto; padding: 14px; grid-template-columns: 1fr 1fr; row-gap: 6px; }
.ss-website-pf.is-tall .ss-website-pf-s14__outcomes li { min-height: 80px; }
.ss-website-pf.is-tall .ss-website-pf-s14__outcomes li + li { border-inline-start: 0; }
.ss-website-pf.is-tall .ss-website-pf-s14__outcomes li:nth-child(even) { border-inline-start: 1px solid rgba(14, 26, 58, 0.08); }

/* 15 Regional: copy and facts over the globe rising from the bottom. */
.ss-website-pf.is-tall .ss-website-pf-s15__globe { left: -60px; right: auto; top: 900px; width: 1020px; height: 1020px; }
.ss-website-pf.is-tall .ss-website-pf-s15__facts { width: auto; }

/* 16 People: the three leaders as large equal cards; supporters below. */
.ss-website-pf.is-tall .ss-website-pf-s16__team { left: 50px; right: 50px; top: 330px; width: auto; }
.ss-website-pf.is-tall .ss-website-pf-s16__people { left: 50px; right: 50px; top: 470px; height: 780px; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); gap: 20px; }
.ss-website-pf.is-tall .ss-website-pf-s16__card { grid-template-columns: 230px 1fr; }
.ss-website-pf.is-tall .ss-website-pf-s16__text { padding: 20px 26px; gap: 6px; }
.ss-website-pf.is-tall .ss-website-pf-s16__text small { margin-top: 2px; }
.ss-website-pf.is-tall .ss-website-pf-s16__support { left: 50px; right: 50px; top: 1270px; height: auto; flex-wrap: wrap; gap: 12px 24px; padding: 18px 26px; }
.ss-website-pf.is-tall .ss-website-pf-s16__support p { flex-basis: 100%; }
.ss-website-pf.is-tall .ss-website-pf-s16__support ul { flex-wrap: wrap; gap: 14px 22px; justify-content: space-between; }

/* 17 Stats: $345K as the anchor across the top, the other figures below. */
.ss-website-pf.is-tall .ss-website-pf-s17__metrics { left: 50px; right: 50px; top: 400px; bottom: 230px; grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr 1fr 1fr; gap: 20px; }
.ss-website-pf.is-tall .ss-website-pf-s17__m--0 { grid-column: 1 / -1; grid-row: auto; }
.ss-website-pf.is-tall .ss-website-pf-s17__m--3 { grid-column: 1 / -1; }
.ss-website-pf.is-tall .ss-website-pf-s17__m--0 .ss-website-pf-s17__value { font-size: 140px; }
.ss-website-pf.is-tall .ss-website-pf-s17__value { font-size: 96px; }
.ss-website-pf.is-tall .ss-website-pf-s17__art { width: 160px; }
.ss-website-pf.is-tall .ss-website-pf-s17__asof { right: 50px; bottom: 190px; }

/* 18 Full-bleed CTA: same direction; type and buttons sized for phones. */
.ss-website-pf.is-tall .ss-website-pf-s18__bg img { object-position: 64% 50%; }
/* Portrait refinements */
.ss-website-pf.is-tall .ss-website-pf-s10__panel { height: 545px; }
.ss-website-pf.is-tall .ss-website-pf-s10__panel--lite { top: 285px; }
.ss-website-pf.is-tall .ss-website-pf-s10__panel--pro { top: 850px; }
.ss-website-pf.is-tall .ss-website-pf-s10__hub { left: 394px; top: 776px; }
.ss-website-pf.is-tall .ss-website-pf-s10__ui { width: 380px; }
.ss-website-pf.is-tall .ss-website-pf-s10__body { width: 320px; margin-top: 16px; font-size: calc(13.5px * var(--pf-b)); line-height: 1.45; }
.ss-website-pf.is-tall .ss-website-pf-s10__traits { left: 24px; right: 24px; bottom: 24px; height: 70px; }
.ss-website-pf.is-tall .ss-website-pf-s13__track { top: 560px; height: 690px; }
.ss-website-pf.is-tall .ss-website-pf-s13__stages { top: 580px; grid-auto-rows: 130px; }
.ss-website-pf.is-tall .ss-website-pf-s13__disc { width: 88px; height: 88px; }
.ss-website-pf.is-tall .ss-website-pf-s13__stages::before { left: 43px; }
.ss-website-pf.is-tall .ss-website-pf-s13__roles { top: 1268px; }
.ss-website-pf.is-tall .ss-website-pf-s14__steps b { font-size: calc(20px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s14__steps small { font-size: calc(16px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s14__statement { font-size: calc(18px * var(--pf-b)); }
.ss-website-pf.is-tall .ss-website-pf-s16__team { top: 400px; }
.ss-website-pf.is-tall .ss-website-pf-s16__people { top: 530px; height: 720px; }
@media (prefers-reduced-motion: reduce) {
  /* No sequencing: all six groups as one compact list. */
  .ss-website-pf.is-tall :is(.ss-website-pf-s08__node, .ss-website-pf-s09__cap) { animation: none !important; opacity: 1 !important; visibility: visible !important; height: 104px; }
  .ss-website-pf.is-tall :is(.ss-website-pf-s08__node--0, .ss-website-pf-s09__cap--0) { top: 720px; } .ss-website-pf.is-tall :is(.ss-website-pf-s08__node--1, .ss-website-pf-s09__cap--1) { top: 832px; }
  .ss-website-pf.is-tall :is(.ss-website-pf-s08__node--2, .ss-website-pf-s09__cap--2) { top: 944px; } .ss-website-pf.is-tall :is(.ss-website-pf-s08__node--3, .ss-website-pf-s09__cap--3) { top: 1056px; }
  .ss-website-pf.is-tall :is(.ss-website-pf-s08__node--4, .ss-website-pf-s09__cap--4) { top: 1168px; } .ss-website-pf.is-tall :is(.ss-website-pf-s08__node--5, .ss-website-pf-s09__cap--5) { top: 1280px; }
  .ss-website-pf.is-tall .ss-website-pf-s09__devices { top: 340px; width: 520px; left: 160px; }
  .ss-website-pf.is-tall .ss-website-pf-s08__note { display: none; }
}
.ss-website-pf.is-tall .ss-website-pf-s10__traits { display: none; }
.ss-website-pf.is-tall .ss-website-pf-s10__body { width: 330px; font-size: calc(14.5px * var(--pf-b)); line-height: 1.5; }
.ss-website-pf.is-tall .ss-website-pf-s10__ui { top: 50px; width: 390px; }
.ss-website-pf.is-tall .ss-website-pf-s10__ui { position: absolute; left: auto; right: 26px; }
.ss-website-pf.is-tall .ss-website-pf-s10__ui { left: 36px; right: auto; top: 262px; width: 728px; }
.ss-website-pf.is-tall .ss-website-pf-s10__body { width: auto; max-width: 700px; }

/* ==== ss-website-newsroom.css ==== */
/* ==========================================================================
   Newsroom: editorial listing + article. Content first, restrained chrome.
   ========================================================================== */
.ss-website-news-hero { padding-top: calc(var(--ss-header-h) + clamp(48px, 2rem + 4vw, 104px)); overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #061237 0%, var(--ss-color-night, #02040F) 70%); }
.ss-website-news-hero__inner { display: grid; justify-items: center; gap: var(--ss-space-5); text-align: center; }
.ss-website-news-hero__inner .ss-website-title { max-width: 16ch; }
.ss-website-news-hero__inner .ss-website-lead { max-width: 58ch; margin-inline: auto; }

/* Filters: one compact row (search grows), wraps on phones. */
.ss-website-news-filters { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ss-website-news-filters { grid-template-columns: minmax(0, 1fr) 200px 180px auto; align-items: center; } }
.ss-website-news-filters__search, .ss-website-news-filters__select { position: relative; display: flex; align-items: center; }
.ss-website-news-filters__search .ss-website-icon { position: absolute; inset-inline-start: 16px; width: 18px; height: 18px; color: var(--ss-text-3); pointer-events: none; }
.ss-website-news-filters input, .ss-website-news-filters select { width: 100%; min-height: 48px; border: 1px solid var(--ss-line-strong); border-radius: 14px; background: #FFFFFF; font: inherit; font-size: var(--ss-size-small); color: var(--ss-text-1); }
.ss-website-news-filters input { padding-inline: 46px 16px; }
.ss-website-news-filters input::-webkit-search-cancel-button { cursor: pointer; }
.ss-website-news-filters select { appearance: none; -webkit-appearance: none; padding-inline: 16px 42px; cursor: pointer; }
.ss-website-news-filters__select .ss-website-icon { position: absolute; inset-inline-end: 14px; width: 16px; height: 16px; color: var(--ss-text-2); pointer-events: none; }
.ss-website-news-filters :is(input, select):focus-visible { outline: 2px solid #0071CE; outline-offset: 2px; }
.ss-website-news-filters__clear { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: 14px; font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-2); }
.ss-website-news-filters__clear[hidden] { display: none; }
.ss-website-news-filters__clear:hover { color: var(--ss-text-1); background: var(--ss-color-mist, #F1F3F6); }
.ss-website-news-filters__clear .ss-website-icon { width: 16px; height: 16px; }
.ss-website-news-count { margin: 18px 0 22px; font-size: var(--ss-size-small); color: var(--ss-text-3); }

/* Grid + card */
.ss-website-news-grid { display: grid; gap: clamp(20px, 1rem + 1vw, 32px); }
@media (min-width: 640px) { .ss-website-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ss-website-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ss-website-news-card[hidden] { display: none; }
.ss-website-news-card__link { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border-radius: var(--ss-radius-card); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ss-line), 0 10px 30px rgba(11, 13, 18, 0.05); color: inherit; text-decoration: none; transition: transform var(--ss-motion-ui) var(--ss-ease-out), box-shadow var(--ss-motion-ui) var(--ss-ease-out); }
.ss-website-news-card__link:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ss-line-strong), 0 20px 44px rgba(11, 13, 18, 0.1); }
.ss-website-news-card__link:focus-visible { outline: 2px solid #0071CE; outline-offset: 3px; }
.ss-website-news-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, #EEF3FA, #DDE7F3); }
.ss-website-news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ss-ease-out); }
.ss-website-news-card__link:hover .ss-website-news-card__media img { transform: scale(1.03); }
.ss-website-news-card__placeholder { display: grid; place-items: center; height: 100%; }
.ss-website-news-card__placeholder img { width: 30%; height: auto; object-fit: contain; opacity: 0.6; }
.ss-website-news-card__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: clamp(18px, 1rem + 0.6vw, 24px); }
.ss-website-news-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ss-website-news-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--ss-radius-pill); font-size: var(--ss-size-micro); font-weight: 600; color: #0B4A8A; background: #EAF3FC; }
.ss-website-news-card__title { font-size: var(--ss-size-h5, 1.2rem); font-weight: 700; line-height: 1.3; color: var(--ss-text-1); }
.ss-website-news-card__excerpt { font-size: var(--ss-size-small); line-height: 1.6; color: var(--ss-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; align-self: start; }
.ss-website-news-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--ss-line); }
.ss-website-news-card__more { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-1); }
.ss-website-news-card__more .ss-website-icon { width: 15px; height: 15px; transition: transform var(--ss-motion-ui) var(--ss-ease-out); }
[dir="rtl"] .ss-website-news-card__more .ss-website-icon { transform: scaleX(-1); }
.ss-website-news-card__link:hover .ss-website-news-card__more .ss-website-icon { transform: translateX(3px); }
[dir="rtl"] .ss-website-news-card__link:hover .ss-website-news-card__more .ss-website-icon { transform: scaleX(-1) translateX(3px); }
.ss-website-news-card--compact .ss-website-news-card__more { display: none; }

/* SkyStruct author */
.ss-website-news-author { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
.ss-website-news-author__mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ss-line), 0 2px 6px rgba(0, 31, 84, 0.08); }
.ss-website-news-author__mark img { width: 22px; height: auto; }
.ss-website-news-author__text { display: grid; line-height: 1.3; min-width: 0; }
.ss-website-news-author__text b { font-size: var(--ss-size-small); font-weight: 700; color: var(--ss-text-1); }
.ss-website-news-author__text small { font-size: var(--ss-size-micro); color: var(--ss-text-3); }
.ss-website-news-author__text small time, .ss-website-news-author__read { white-space: nowrap; }
/* A thin rule, not a middle dot: in Arabic a dot between digits reads as ٠. */
.ss-website-news-author__sep { display: inline-block; width: 1px; height: 0.85em; margin-inline: 7px; vertical-align: -0.08em; background: currentColor; opacity: 0.45; }

/* Empty state */
.ss-website-news-empty { display: grid; justify-items: center; gap: 8px; padding: clamp(40px, 2rem + 3vw, 80px) 20px; border-radius: var(--ss-radius-card); text-align: center; background: var(--ss-color-mist, #F5F7FA); color: var(--ss-text-2); }
.ss-website-news-empty[hidden] { display: none; }
.ss-website-news-empty__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #FFFFFF; color: var(--ss-text-2); box-shadow: inset 0 0 0 1px var(--ss-line); }
.ss-website-news-empty__title { font-size: var(--ss-size-h5, 1.2rem); font-weight: 700; color: var(--ss-text-1); }
.ss-website-news-empty .ss-website-button { margin-top: 10px; }
.ss-website-news-none { padding: 40px 0; text-align: center; color: var(--ss-text-2); }
.ss-website-news-pages { margin-top: 32px; text-align: center; }

/* ---------- Article ---------- */
.ss-website-news-article__progress { position: fixed; inset-inline: 0; top: 0; z-index: 60; height: 3px; background: transparent; pointer-events: none; }
.ss-website-news-article__progress span { display: block; height: 100%; background: linear-gradient(90deg, #0071CE, #4DA3EE); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .ss-website-news-article__progress span { transform-origin: 100% 50%; background: linear-gradient(270deg, #0071CE, #4DA3EE); }
.ss-website-news-article { position: relative; z-index: 2; isolation: isolate; padding-top: calc(var(--ss-header-h) + clamp(32px, 1.5rem + 3vw, 72px)); background: #FFFFFF; }
.ss-website-news-article__head { display: grid; gap: 16px; max-width: 820px; }
.ss-website-news-article__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-block: -10px; justify-self: start; font-size: var(--ss-size-small); font-weight: 600; color: var(--ss-text-2); text-decoration: none; }
.ss-website-news-article__back .ss-website-icon { width: 16px; height: 16px; transform: scaleX(-1); }
[dir="rtl"] .ss-website-news-article__back .ss-website-icon { transform: none; }
.ss-website-news-article__back:hover { color: var(--ss-text-1); }
.ss-website-news-article__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--ss-text-1); text-wrap: balance; }
[dir="rtl"] .ss-website-news-article__title { letter-spacing: 0; line-height: 1.3; }
.ss-website-news-article__excerpt { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.6; color: var(--ss-text-2); }
.ss-website-news-article__head .ss-website-news-author { margin-top: 6px; }
.ss-website-news-article__figure { margin-top: clamp(28px, 1.5rem + 2vw, 48px); }
.ss-website-news-article__figure img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: var(--ss-radius-card); }
.ss-website-news-article__layout { display: grid; gap: 28px; padding-block: clamp(32px, 1.5rem + 3vw, 64px) var(--ss-section-y); }
@media (min-width: 1024px) {
  .ss-website-news-article__layout { grid-template-columns: 180px minmax(0, 720px); justify-content: center; column-gap: clamp(40px, 5vw, 96px); }
  .ss-website-news-article__aside { position: sticky; top: calc(var(--ss-header-h) + 32px); align-self: start; }
  .ss-website-share { flex-direction: column; align-items: flex-start; }
}
.ss-website-news-article__body { max-width: 720px; }
.ss-website-news-article__body h2 { margin-top: 1.2em; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem); font-weight: 700; line-height: 1.25; color: var(--ss-text-1); }
.ss-website-news-article__body h3 { margin-top: 0.8em; font-size: 1.25rem; font-weight: 700; color: var(--ss-text-1); }
.ss-website-news-article__body p, .ss-website-news-article__body li { font-size: 1.0625rem; line-height: 1.8; color: #2B303A; }
.ss-website-news-article__body ul, .ss-website-news-article__body ol { display: grid; gap: 8px; padding-inline-start: 1.3em; }
.ss-website-news-article__body ul { list-style: disc; }
.ss-website-news-article__body ol { list-style: decimal; }
.ss-website-news-article__body blockquote { margin: 0.6em 0; padding: 4px 0; padding-inline-start: 22px; border-inline-start: 3px solid #0071CE; }
.ss-website-news-article__body blockquote p { font-size: 1.25rem; line-height: 1.6; font-weight: 600; color: var(--ss-text-1); }
.ss-website-news-article__body a { color: #0071CE; text-decoration: underline; text-underline-offset: 3px; }
.ss-website-news-article__body img { max-width: 100%; height: auto; border-radius: 14px; }
.ss-website-news-article__body table { width: 100%; border-collapse: collapse; font-size: var(--ss-size-small); }
.ss-website-news-article__body :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--ss-line); text-align: start; }
.ss-website-news-article__body > :first-child { margin-top: 0; }

/* Share */
.ss-website-share { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ss-website-share__label { flex-basis: 100%; margin-bottom: 4px; font-size: var(--ss-size-micro); font-weight: 700; letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase; color: var(--ss-text-3); }
[dir="rtl"] .ss-website-share__label { letter-spacing: 0; }
@media (min-width: 1024px) { .ss-website-share { display: grid; grid-template-columns: repeat(5, 40px); } .ss-website-share__label { grid-column: 1 / -1; } }
.ss-website-share__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ss-text-1); background: var(--ss-color-mist, #F1F3F6); transition: background-color var(--ss-motion-fast), color var(--ss-motion-fast), transform var(--ss-motion-fast); }
.ss-website-share__btn:hover { color: #FFFFFF; background: #0B0D12; }
.ss-website-share__btn:active { transform: scale(0.95); }
.ss-website-share__btn :is(.ss-website-icon, .ss-website-brand-icon) { width: 16px; height: 16px; }
.ss-website-share__toast { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; padding: 6px 10px; border-radius: 8px; font-size: var(--ss-size-micro); font-weight: 600; color: #FFFFFF; background: #0B0D12; opacity: 0; transition: opacity var(--ss-motion-fast); pointer-events: none; white-space: nowrap; }
.ss-website-share.is-copied .ss-website-share__toast { opacity: 1; }

/* Related */
.ss-website-news-related .ss-website-title { margin-bottom: clamp(20px, 1rem + 1vw, 32px); }
.ss-website-news-grid--related .ss-website-news-card__title { font-size: 1.05rem; }