:root {
  --ink: #0b1930;
  --ink-soft: #34435b;
  --muted: #66738b;
  --line: #dce5ee;
  --paper: #ffffff;
  --soft: #f4f8fb;
  --soft-blue: #edf5ff;
  --navy: #071629;
  --navy-2: #0d2341;
  --blue: #2678ff;
  --blue-2: #4b90ff;
  --teal: #19bcb5;
  --gold: #e9b75a;
  --radius: 24px;
  --shell: 1180px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; overflow-x: hidden; }
html[dir="rtl"] body { font-family: Tahoma, Arial, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(38,120,255,.45); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: -70px; left: 18px; z-index: 10000; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,.2); }
.skip-link:focus { top: 12px; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin: 0 auto; }
.section { padding: 120px 0; }

/* Header */
.site-header { position: absolute; inset: 0 0 auto; z-index: 50; color: #fff; transition: .25s ease; }
.site-header.is-scrolled { position: fixed; color: var(--ink); background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(11,25,48,.08); backdrop-filter: blur(16px); box-shadow: 0 8px 28px rgba(9,21,40,.07); }
.header-inner { min-height: 86px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; width: 176px; }
.brand-logo-wrap { display: block; background: rgba(255,255,255,.96); padding: 5px 10px; border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.brand img { width: 150px; height: auto; }
.site-nav { display: flex; justify-content: center; gap: 26px; font-size: 14px; font-weight: 650; }
.site-nav a { opacity: .91; transition: opacity .18s, color .18s; }
.site-nav a:hover { opacity: 1; color: var(--blue-2); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.language-picker { position: relative; }
.language-button { min-width: 62px; height: 38px; border: 1px solid rgba(255,255,255,.22); color: inherit; background: rgba(7,22,41,.16); border-radius: 10px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font-size: 13px; font-weight: 750; }
.site-header.is-scrolled .language-button { border-color: #d8e0eb; background: #fff; }
.language-globe { font-size: 17px; line-height: 1; }
.language-menu { position: absolute; top: calc(100% + 9px); right: 0; min-width: 132px; padding: 6px; display: none; flex-direction: column; background: #fff; border: 1px solid #e0e7ef; border-radius: 12px; box-shadow: 0 16px 38px rgba(8,23,42,.16); }
.language-picker.open .language-menu { display: flex; }
.language-menu button { text-align: start; background: transparent; border: 0; border-radius: 8px; color: var(--ink); padding: 8px 9px; cursor: pointer; font-size: 13px; }
.language-menu button:hover { background: var(--soft-blue); }
.nav-toggle { display: none; }

/* Buttons and type */
.button { border: 1px solid transparent; border-radius: 13px; min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-weight: 760; font-size: 14px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(135deg, var(--blue), #1c62d9); box-shadow: 0 9px 23px rgba(38,120,255,.28); }
.button-primary:hover { box-shadow: 0 12px 28px rgba(38,120,255,.38); }
.button-secondary { background: #eff6ff; color: #1763dc; border-color: #cee2ff; }
.button-light { background: #fff; color: #0f2a52; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.button-small { min-height: 38px; padding: 0 13px; font-size: 13px; }
.button-large { min-height: 52px; padding: 0 20px; font-size: 15px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #2c6fe5; font-size: 11px; text-transform: uppercase; letter-spacing: .085em; font-weight: 800; }
html[dir="rtl"] .eyebrow { letter-spacing: 0; }
.eyebrow-dot { display: inline-block; width: 8px; height: 8px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 5px rgba(25,188,181,.12); }
.eyebrow-light { color: rgba(255,255,255,.76); }
h1,h2,h3,p { margin-top: 0; }
h1 { max-width: 740px; margin-bottom: 24px; color: #fff; font-size: clamp(43px, 5.2vw, 76px); letter-spacing: -.052em; line-height: .98; }
h2 { margin-bottom: 20px; font-size: clamp(35px, 4vw, 58px); letter-spacing: -.048em; line-height: 1.03; }
h1 em, h2 em { color: #5da0ff; font-style: normal; }
.section-lead { max-width: 620px; color: var(--muted); font-size: 18px; line-height: 1.67; }

/* Hero */
.hero { position: relative; min-height: 720px; display: flex; align-items: center; isolation: isolate; overflow: hidden; background: var(--navy); }
.hero-slides { position: absolute; inset: 0; z-index: -5; overflow: hidden; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; opacity: 0; transform: scale(1.025); transition: opacity 850ms ease, transform 7200ms ease; }
.hero-image.is-active { opacity: 1; transform: scale(1); }
.hero-image[data-hero-slide="1"] { object-position: 72% top; }
.hero-shade { position: absolute; inset: 0; z-index: -4; background: linear-gradient(90deg, rgba(5,17,34,.99) 0%, rgba(5,17,34,.93) 34%, rgba(5,17,34,.66) 62%, rgba(5,17,34,.31) 100%), linear-gradient(0deg, rgba(4,16,32,.46), transparent 38%); }
.hero-ambient { position: absolute; z-index: -3; border-radius: 50%; filter: blur(10px); opacity: .8; pointer-events: none; }
.hero-ambient-one { width: 440px; height: 440px; left: -180px; bottom: -180px; background: radial-gradient(circle, rgba(38,120,255,.25), transparent 70%); }
.hero-ambient-two { width: 360px; height: 360px; right: 8%; top: 1%; background: radial-gradient(circle, rgba(25,188,181,.16), transparent 72%); }
.hero-content { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: center; gap: 50px; padding: 136px 0 92px; }
.hero-copy { max-width: 750px; }
.hero-copy > p { max-width: 620px; margin-bottom: 30px; color: rgba(255,255,255,.79); font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.text-button { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 750; transition: opacity .2s; }
.text-button:hover { opacity: .74; }
.hero-points { margin-top: 30px; display: grid; gap: 10px; color: rgba(255,255,255,.83); font-size: 13px; }
.hero-points span { display: flex; align-items: flex-start; gap: 9px; }
.hero-points i { flex: 0 0 19px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: rgba(46,149,255,.2); border: 1px solid rgba(83,166,255,.38); color: #83bcff; font-size: 12px; font-style: normal; }
.hero-points b { font-weight: 570; }
.hero-carousel-controls { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.hero-carousel-dots { display: inline-flex; align-items: center; gap: 7px; padding: 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(5,18,37,.34); backdrop-filter: blur(8px); }
.hero-carousel-dots button { width: 24px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.32); cursor: pointer; transition: width .24s ease, background .24s ease; }
.hero-carousel-dots button.is-active { width: 40px; background: linear-gradient(90deg, #60a5ff, #2fd0c6); }
.hero-carousel-counter { color: rgba(255,255,255,.66); font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.hero-card { align-self: center; padding: 28px 26px 24px; border: 1px solid rgba(255,255,255,.18); border-radius: 21px; color: #fff; background: linear-gradient(145deg, rgba(18,48,89,.74), rgba(7,19,37,.55)); box-shadow: 0 22px 65px rgba(0,0,0,.26); backdrop-filter: blur(14px); }
.hero-card-icon { width: 42px; height: 42px; margin-bottom: 34px; display: grid; place-items: center; border-radius: 13px; background: rgba(58,143,255,.17); color: #85baff; font-size: 20px; }
.hero-card-label { display: block; color: rgba(255,255,255,.57); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 750; }
.hero-card strong { display: block; margin: 7px 0 10px; font-size: 21px; line-height: 1.17; letter-spacing: -.025em; }
.hero-card p { margin-bottom: 24px; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.5; }
.hero-card-line { display: grid; grid-template-columns: 1.55fr .8fr 1.1fr; gap: 6px; }
.hero-card-line span { height: 4px; border-radius: 9px; background: rgba(255,255,255,.17); }
.hero-card-line span:first-child { background: #2f85ff; }
.hero-card-line span:nth-child(2) { background: #27b9af; }
.hero-bottom-note { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: rgba(255,255,255,.52); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 11px; }
.pulse-dot { width: 7px; height: 7px; background: #53d2c8; border-radius: 50%; box-shadow: 0 0 0 5px rgba(83,210,200,.13); }

/* Trust */
.trust-strip { background: #fff; border-bottom: 1px solid #e9eef4; }
.trust-grid { min-height: 80px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.trust-grid span { min-height: 38px; padding: 0 20px; display: flex; align-items: center; justify-content: center; text-align: center; border-left: 1px solid #e8eef4; color: #5b6a7f; font-size: 13px; font-weight: 700; }
.trust-grid span:first-child { border-left: 0; }
html[dir="rtl"] .trust-grid span { border-left: 0; border-right: 1px solid #e8eef4; }
html[dir="rtl"] .trust-grid span:first-child { border-right: 0; }

/* Product film */
.film-section { position: relative; overflow: hidden; background: linear-gradient(180deg, #f7fbff 0%, #fff 100%); }
.film-section::before { content: ""; position: absolute; top: -220px; right: -170px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(48,139,255,.13), transparent 68%); pointer-events: none; }
.film-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); gap: clamp(46px, 7vw, 94px); align-items: center; }
.film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 27px; background: #071629; box-shadow: 0 28px 74px rgba(16,45,83,.19); isolation: isolate; }
.product-film { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; background: #071629; }
.film-frame-shade { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,18,37,.4), transparent 38%, rgba(5,18,37,.62)); transition: opacity .22s ease; }
.film-frame.is-playing .film-frame-shade { opacity: 0; }
.film-badge { position: absolute; z-index: 3; top: 17px; left: 17px; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid rgba(255,255,255,.19); border-radius: 99px; color: rgba(255,255,255,.94); background: rgba(7,24,49,.58); box-shadow: 0 8px 20px rgba(0,0,0,.16); backdrop-filter: blur(9px); font-size: 11px; font-weight: 780; }
.film-play { position: absolute; z-index: 4; top: 50%; left: 50%; width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.46); border-radius: 50%; transform: translate(-50%, -50%); color: #fff; background: rgba(37,118,235,.86); box-shadow: 0 13px 35px rgba(0,0,0,.28), 0 0 0 10px rgba(255,255,255,.12); cursor: pointer; font-size: 28px; line-height: 1; transition: transform .2s ease, opacity .2s ease, background .2s ease; }
.film-play:hover { background: #2d82ff; transform: translate(-50%, -50%) scale(1.06); }
.film-frame.is-playing .film-play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.86); }
.film-meta { position: absolute; z-index: 3; left: 17px; bottom: 17px; display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.film-meta span { min-height: 27px; display: inline-flex; align-items: center; padding: 0 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(7,24,49,.58); backdrop-filter: blur(8px); }
.film-copy { max-width: 570px; }
.film-notes { margin: 27px 0 28px; display: grid; gap: 10px; }
.film-notes span { display: flex; align-items: flex-start; gap: 9px; color: #53647d; font-size: 13px; line-height: 1.45; }
.film-notes i { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: #2577ef; background: #e8f2ff; font-size: 12px; font-style: normal; }
html[dir="rtl"] .film-badge { right: 17px; left: auto; direction: rtl; }
html[dir="rtl"] .film-meta { right: 17px; left: auto; direction: rtl; }
html[dir="rtl"] .film-notes span { direction: rtl; }

/* Intro / workflow */
.intro-section { background: #fff; }
.split-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(50px, 8vw, 112px); align-items: center; }
.image-panel { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; border-radius: 28px; background: #edf5f6; box-shadow: 0 26px 70px rgba(14,42,78,.12); }
.image-panel img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: 50% center; }
.image-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,22,41,.38), transparent 42%); }
.image-note { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.55); border-radius: 15px; background: rgba(255,255,255,.9); box-shadow: 0 13px 25px rgba(0,0,0,.13); backdrop-filter: blur(8px); }
.image-note .mini-symbol { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #e7f0ff; color: #2477f5; font-size: 12px; font-weight: 850; }
.image-note strong, .image-note small { display: block; }
.image-note strong { color: var(--ink); font-size: 13px; }
.image-note small { color: #68758a; font-size: 11px; }
.steps-list { padding: 0; margin: 35px 0 0; display: grid; gap: 24px; list-style: none; }
.steps-list li { display: grid; grid-template-columns: 36px 1fr; gap: 15px; align-items: flex-start; }
.steps-list > li > span { width: 34px; height: 34px; display: grid; place-items: center; background: #ecf4ff; border-radius: 11px; color: #2678ff; font-size: 13px; font-weight: 850; }
.steps-list h3 { margin-bottom: 5px; font-size: 17px; letter-spacing: -.018em; }
.steps-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.58; }

/* Platform */
.platform-section { background: linear-gradient(180deg, #f4f9ff 0%, #eef6fd 100%); overflow: hidden; }
.platform-copy { max-width: 560px; }
.check-list { padding: 0; margin: 32px 0 30px; display: grid; gap: 12px; list-style: none; }
.check-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: flex-start; }
.check-list span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #08756d; background: #cceeea; font-size: 12px; font-weight: 900; }
.check-list p { margin: 0; color: #43536c; font-size: 14px; }
.dashboard-frame { position: relative; padding: 20px; border: 1px solid #d6e6f7; border-radius: 29px; background: rgba(255,255,255,.7); box-shadow: 0 30px 60px rgba(15,60,111,.14); }
.dashboard-frame img { position: relative; border-radius: 19px; box-shadow: 0 14px 32px rgba(8,29,58,.11); }
.dashboard-halo { position: absolute; width: 220px; height: 220px; top: -75px; right: -75px; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(32,130,255,.24), transparent 68%); }
.dashboard-caption { position: absolute; left: 45px; bottom: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(9,28,53,.78); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 650; backdrop-filter: blur(10px); }
.caption-dot { width: 7px; height: 7px; border-radius: 50%; background: #52d5c8; }

/* For you */
.for-you-section { background: #fff; }
.for-you-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(45px, 8vw, 110px); align-items: center; }
.for-you-heading { max-width: 470px; }
.for-you-list { margin-top: 28px; display: grid; gap: 9px; }
.for-you-list span { position: relative; padding-left: 22px; color: #4e5f77; font-size: 14px; font-weight: 650; }
.for-you-list span::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border: 2px solid #2c82ff; border-radius: 50%; }
html[dir="rtl"] .for-you-list span { padding-left: 0; padding-right: 22px; }
html[dir="rtl"] .for-you-list span::before { left: auto; right: 0; }
.profiles-panel { padding: 12px; border: 1px solid #e2eaf1; border-radius: 27px; background: #f9fbfd; box-shadow: 0 21px 50px rgba(18,47,83,.08); }
.profiles-panel img { border-radius: 18px; }

/* Letter and categories */
.start-section { background: #f8fafc; }
.letter-visual { position: relative; overflow: hidden; min-height: 494px; border-radius: 27px; background: #e9e1d5; box-shadow: 0 24px 60px rgba(33,41,54,.12); }
.letter-visual img { width: 100%; height: 100%; min-height: 494px; object-fit: cover; object-position: center; }
.letter-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,21,38,.56), transparent 48%); }
.letter-visual-label { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 22px; padding: 16px; display: flex; align-items: flex-start; gap: 10px; border-radius: 15px; background: rgba(255,255,255,.92); color: #21334e; box-shadow: 0 14px 25px rgba(0,0,0,.12); }
.letter-visual-label span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 25px; color: #2678ff; background: #e8f2ff; border-radius: 8px; }
.letter-visual-label strong { font-size: 13px; line-height: 1.4; }
.category-grid { margin-top: 31px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.category-grid article { padding: 15px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #dde6ef; background: #fff; border-radius: 15px; }
.category-grid h3 { margin: 1px 0 4px; font-size: 13px; line-height: 1.25; }
.category-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.category-icon { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font-size: 15px; font-weight: 800; }
.icon-blue { color: #2678ff; background: #e6f0ff; }
.icon-gold { color: #ae7111; background: #fff1d7; }
.icon-mint { color: #0a8076; background: #d9f3ee; }
.icon-violet { color: #744dca; background: #eee6ff; }


/* Documents archive */
.archive-section { position: relative; overflow: hidden; background: linear-gradient(135deg, #f6faff 0%, #ffffff 52%, #f8fbff 100%); }
.archive-section::before { content: ""; position: absolute; width: 520px; height: 520px; top: -285px; left: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(37,121,255,.13), transparent 70%); pointer-events: none; }
.archive-layout { position: relative; display: grid; grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); gap: clamp(54px,8vw,118px); align-items: center; }
.archive-visual { position: relative; min-height: 610px; isolation: isolate; }
.archive-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(2px); }
.archive-glow-one { width: 330px; height: 330px; left: 3%; top: 3%; background: radial-gradient(circle, rgba(39,128,255,.23), transparent 70%); }
.archive-glow-two { width: 300px; height: 300px; right: 0; bottom: 2%; background: radial-gradient(circle, rgba(45,206,192,.16), transparent 70%); }
.archive-shot { position: absolute; margin: 0; overflow: hidden; border: 7px solid #102340; border-radius: 26px; background: #0a1527; box-shadow: 0 30px 58px rgba(10,37,75,.26); }
.archive-shot img, .archive-language-shot img { width: 100%; display: block; }
.archive-shot-primary { z-index: 1; width: min(49%, 276px); top: 18px; left: 0; transform: rotate(-2.4deg); }
.archive-shot-secondary { z-index: 2; width: min(48%, 269px); top: 116px; right: 8px; transform: rotate(2deg); }
.archive-language-shot { position: absolute; z-index: 3; width: min(34%, 188px); right: 13%; bottom: 0; margin: 0; overflow: hidden; border: 6px solid #162844; border-radius: 21px; background: #101d34; box-shadow: 0 22px 46px rgba(6,29,63,.3); }
.archive-language-shot figcaption { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 8px; color: #eff7ff; font-size: 9px; font-weight: 750; text-align: center; }
.archive-copy { max-width: 650px; }
.archive-list { margin: 30px 0 0; padding: 0; display: grid; gap: 15px; list-style: none; }
.archive-list li { display: grid; grid-template-columns: 35px 1fr; gap: 14px; align-items: start; }
.archive-list li > span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #bfd8ff; border-radius: 10px; color: #287bfa; background: #eef6ff; font-size: 10px; font-weight: 850; }
.archive-list strong { display: block; margin: 1px 0 4px; color: #162b48; font-size: 15px; line-height: 1.35; }
.archive-list p { max-width: 510px; margin: 0; color: #5c6d83; font-size: 13px; line-height: 1.58; }

/* Prepared replies and forms */
.action-section { position: relative; overflow: hidden; background: #fff; }
.action-section::after { content: ""; position: absolute; width: 540px; height: 540px; right: -310px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(35,127,255,.1), transparent 70%); pointer-events: none; }
.action-heading { max-width: 770px; margin: 0 auto; text-align: center; }
.action-heading .eyebrow { justify-content: center; }
.action-heading .section-lead { margin-left: auto; margin-right: auto; }
.action-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 46px; }
.action-card { min-height: 365px; padding: 28px; display: flex; flex-direction: column; border: 1px solid #dce8f4; border-radius: 23px; background: linear-gradient(165deg, #fbfdff, #f4f8fc); box-shadow: 0 18px 39px rgba(23,53,91,.08); }
.action-card-featured { border-color: #aee5dd; background: linear-gradient(160deg, #f4fffc, #e9f8f5); box-shadow: 0 22px 47px rgba(12,119,110,.13); transform: translateY(-10px); }
.action-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.action-number { color: #8da2bb; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.action-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 19px; font-weight: 780; }
.action-icon-blue { color: #2e7efe; background: #e8f2ff; border: 1px solid #c1dbff; }
.action-icon-mint { color: #0d877b; background: #dff5f0; border: 1px solid #b7e7dd; }
.action-icon-gold { color: #a57011; background: #fff2d9; border: 1px solid #f4d49e; }
.action-card h3 { margin: 0 0 12px; color: #142945; font-size: 21px; line-height: 1.17; letter-spacing: -.03em; }
.action-card > p { margin: 0; color: #5c6d83; font-size: 14px; line-height: 1.62; }
.action-card ul { margin: auto 0 0; padding: 21px 0 0; display: grid; gap: 8px; border-top: 1px solid rgba(44,87,133,.12); list-style: none; }
.action-card li { position: relative; padding-left: 19px; color: #344963; font-size: 12px; line-height: 1.42; font-weight: 670; }
.action-card li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #168d7d; font-weight: 850; }
.action-rule { position: relative; margin: 38px auto 0; max-width: 940px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; border: 1px solid #c9e7e1; border-radius: 16px; color: #24465d; background: #f1fbf9; text-align: center; }
.action-rule-icon { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 9px; color: #0b8d7f; background: #d9f4ef; font-size: 13px; font-weight: 900; }
.action-rule p { margin: 0; font-size: 13px; line-height: 1.55; font-weight: 650; }

/* Security */
.security-section { position: relative; min-height: clamp(700px, 48vw, 780px); display: flex; align-items: center; overflow: hidden; color: #fff; background: var(--navy); isolation: isolate; }
.security-bg { position: absolute; inset: 0; z-index: -3; }
.security-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 40%; }
.security-overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(3,15,29,.96) 0%, rgba(3,15,29,.91) 42%, rgba(3,15,29,.57) 100%); }
.security-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 80px; align-items: center; padding: 100px 0; }
.security-copy { max-width: 690px; }
.security-copy h2 { color: #fff; }
.security-copy h2 em { color: #61a4ff; }
.security-copy > p { margin-bottom: 0; max-width: 635px; color: rgba(255,255,255,.75); font-size: 17px; line-height: 1.72; }
.privacy-card { margin: 0; padding: 10px; list-style: none; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: rgba(18,45,80,.66); box-shadow: 0 24px 60px rgba(0,0,0,.26); backdrop-filter: blur(12px); }
.privacy-card li { min-height: 80px; display: flex; align-items: center; gap: 12px; padding: 13px; border-bottom: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; }
.privacy-card li:last-child { border-bottom: 0; }
.privacy-card i { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #9feee7; background: rgba(46,201,188,.16); border: 1px solid rgba(79,217,204,.25); font-style: normal; }

/* Germany card */
.germany-section { padding-top: 112px; padding-bottom: 112px; background: #fff; }
.germany-card { position: relative; min-height: 468px; display: flex; align-items: center; overflow: hidden; border-radius: 30px; color: #fff; box-shadow: 0 28px 68px rgba(14,37,66,.16); }
.germany-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.germany-card-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,22,40,.92), rgba(7,22,40,.66) 54%, rgba(7,22,40,.21)); }
.germany-card-copy { max-width: 650px; padding: 55px; }
.germany-card h2 { color: #fff; margin-bottom: 20px; }
.germany-card h2 em { color: #8dc0ff; }
.germany-card p { max-width: 575px; margin: 0; color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.65; }

/* FAQ */
.faq-section { background: #f8fafc; }
.faq-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(48px,8vw,106px); align-items: start; }
.faq-heading { max-width: 480px; }
.workspace-thumb { width: 100%; max-width: 390px; margin-top: 27px; border-radius: 18px; box-shadow: 0 20px 45px rgba(13,32,59,.14); }
.faq-list { display: grid; gap: 11px; }
.faq-list details { border: 1px solid #dce6ef; border-radius: 15px; background: #fff; overflow: hidden; }
.faq-list summary { padding: 19px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; color: #16263f; font-size: 15px; font-weight: 760; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary b { color: #2776eb; font-size: 21px; font-weight: 450; transition: transform .2s; }
.faq-list details[open] summary b { transform: rotate(45deg); }
.faq-list details p { max-width: 92%; margin: -2px 0 0; padding: 0 20px 20px; color: #5e6e84; font-size: 14px; line-height: 1.65; }

/* CTA */
.final-cta { position: relative; overflow: hidden; color: #fff; background: linear-gradient(115deg, #0a1c35, #0d3265 60%, #0b5f9e); }
.final-cta::before { content: ""; position: absolute; width: 570px; height: 570px; right: -180px; top: -270px; border-radius: 50%; background: radial-gradient(circle, rgba(76,164,255,.38), transparent 68%); }
.final-cta::after { content: ""; position: absolute; left: 4%; bottom: -150px; width: 370px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(39,195,185,.17), transparent 70%); }
.final-cta-inner { position: relative; z-index: 1; min-height: 350px; display: grid; grid-template-columns: 160px minmax(0,1fr) auto; gap: 45px; align-items: center; padding: 62px 0; }
.cta-logo { width: 150px; padding: 7px; border-radius: 12px; background: #fff; }
.final-cta h2 { margin-bottom: 14px; color: #fff; font-size: clamp(34px,3.6vw,52px); }
.final-cta h2 em { color: #79b4ff; }
.final-cta p { max-width: 570px; margin: 0; color: rgba(255,255,255,.72); font-size: 16px; }

/* Footer */
.site-footer { color: #b3c2d6; background: #071426; }
.footer-inner { min-height: 175px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand links" "note note"; gap: 30px; align-items: center; padding: 31px 0 20px; }
.footer-inner > div:first-child { grid-area: brand; }
.footer-inner > small { grid-area: note; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.09); color: #8495aa; font-size: 11px; }
.footer-logo { width: 130px; padding: 5px; background: #fff; border-radius: 8px; }
.footer-inner p { margin: 9px 0 0; font-size: 12px; }
.footer-links { grid-area: links; display: flex; gap: 23px; color: #d9e5f1; font-size: 13px; font-weight: 680; }
.footer-links a:hover { color: #69a8ff; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(2,11,22,.67); backdrop-filter: blur(5px); }
.modal-backdrop.show { display: flex; }
.preview-modal { position: relative; width: min(100%, 465px); padding: 43px 36px 34px; border-radius: 23px; background: #fff; color: var(--ink); box-shadow: 0 28px 75px rgba(0,0,0,.38); text-align: center; animation: modal-enter .2s ease both; }
.modal-close { position: absolute; top: 12px; right: 13px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #7a8799; cursor: pointer; font-size: 25px; }
.modal-close:hover { background: #eff4fa; color: var(--ink); }
.modal-icon { width: 44px; height: 44px; margin: 0 auto 17px; display: grid; place-items: center; border-radius: 14px; color: #2179ff; background: #e9f2ff; font-size: 22px; }
.modal-eyebrow { color: #2678ff; text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 850; }
.preview-modal h2 { margin: 8px auto 12px; font-size: 27px; line-height: 1.08; letter-spacing: -.035em; }
.preview-modal p { margin: 0 auto 24px; color: #66748a; font-size: 14px; line-height: 1.6; }
body.modal-open { overflow: hidden; }

/* Reveal — works as a progressive enhancement: content stays visible if JavaScript is unavailable. */
.reveal { opacity: 1; transform: none; }
html.js-enabled .reveal { opacity: 0; transform: translateY(18px); transition: opacity .62s ease, transform .62s ease; }
html.js-enabled .reveal.reveal-visible { opacity: 1; transform: none; }
html.js-enabled .reveal-delay { transition-delay: .14s; }
@keyframes modal-enter { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* RTL */
html[dir="rtl"] .site-nav, html[dir="rtl"] .header-actions { direction: rtl; }
html[dir="rtl"] .language-menu { right: auto; left: 0; }
html[dir="rtl"] .hero-shade, html[dir="rtl"] .security-overlay, html[dir="rtl"] .germany-card-shade { transform: scaleX(-1); }
html[dir="rtl"] .hero-copy, html[dir="rtl"] .section-copy, html[dir="rtl"] .for-you-heading, html[dir="rtl"] .faq-heading, html[dir="rtl"] .security-copy, html[dir="rtl"] .germany-card-copy { text-align: right; }
html[dir="rtl"] .hero-card { direction: rtl; }
html[dir="rtl"] .image-note, html[dir="rtl"] .letter-visual-label, html[dir="rtl"] .dashboard-caption, html[dir="rtl"] .hero-points span { direction: rtl; }
html[dir="rtl"] .image-note { left: 24px; right: 24px; }
html[dir="rtl"] .dashboard-caption { left: auto; right: 45px; }
html[dir="rtl"] .modal-close { right: auto; left: 13px; }
html[dir="rtl"] .faq-list summary { text-align: right; }
html[dir="rtl"] .final-cta-inner { direction: rtl; }


html[dir="rtl"] .archive-list li { grid-template-columns: 1fr 35px; }
html[dir="rtl"] .archive-list li > span { grid-column: 2; }
html[dir="rtl"] .archive-list li > div { grid-column: 1; grid-row: 1; }
html[dir="rtl"] .action-card li { padding-left: 0; padding-right: 19px; }
html[dir="rtl"] .action-card li::before { left: auto; right: 0; }

/* Responsive */
@media (max-width: 1050px) {
  .hero { min-height: 690px; }
  .hero-image { object-position: 68% top; }
  .security-section { min-height: 690px; }
  .security-bg img { object-position: 50% 42%; }
  .hero-content { grid-template-columns: minmax(0,1fr) 260px; gap: 26px; }
  .hero-card { padding: 23px 21px; }
  .hero-card-icon { margin-bottom: 24px; }
  .final-cta-inner { grid-template-columns: 130px minmax(0,1fr); }
  .final-cta-inner .button { grid-column: 2; justify-self: start; }
  html[dir="rtl"] .final-cta-inner .button { justify-self: end; }
}

@media (max-width: 860px) {
  .shell { width: min(calc(100% - 32px), var(--shell)); }
  .site-header { background: rgba(5,17,34,.3); backdrop-filter: blur(7px); }
  .site-header.is-scrolled { background: rgba(255,255,255,.96); }
  .header-inner { min-height: 72px; grid-template-columns: auto 1fr auto; gap: 14px; }
  .brand { width: 146px; }
  .brand img { width: 120px; }
  .brand-logo-wrap { padding: 4px 8px; border-radius: 10px; }
  .nav-toggle { grid-column: 2; justify-self: end; width: 38px; height: 36px; display: grid; gap: 4px; align-content: center; border: 0; color: inherit; background: transparent; cursor: pointer; }
  .nav-toggle > span:not(.sr-only) { width: 21px; height: 2px; justify-self: end; background: currentColor; border-radius: 5px; }
  .site-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; padding: 16px; display: none; justify-content: flex-start; flex-direction: column; gap: 4px; color: var(--ink); background: #fff; border-bottom: 1px solid #e0e8f1; box-shadow: 0 16px 30px rgba(7,22,41,.12); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 10px 12px; border-radius: 9px; }
  .site-nav a:hover { background: var(--soft-blue); }
  .header-actions { gap: 8px; }
  .header-actions .button-small { display: none; }
  .language-button { min-width: 52px; height: 35px; padding: 0 8px; }
  .hero { min-height: 700px; }
  .hero-image { object-position: 67% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(5,17,34,.95), rgba(5,17,34,.84) 50%, rgba(5,17,34,.49)), linear-gradient(0deg, rgba(4,16,32,.6), transparent 42%); }
  .hero-content { display: block; padding: 132px 0 82px; }
  .hero-card { display: none; }
  .hero-copy > p { font-size: 17px; }
  .hero-bottom-note { width: calc(100% - 32px); justify-content: center; text-align: center; white-space: normal; }
  .trust-grid { grid-template-columns: repeat(2,1fr); padding: 8px 0; }
  .trust-grid span:nth-child(3) { border-left: 0; }
  html[dir="rtl"] .trust-grid span:nth-child(3) { border-right: 0; }
  .section { padding: 82px 0; }
  .split-layout, .film-layout, .for-you-grid, .faq-layout, .archive-layout { grid-template-columns: 1fr; gap: 38px; }
  .archive-visual { width: min(100%, 640px); min-height: 590px; }
  .action-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; }
  .action-card { min-height: 390px; padding: 23px; }
  .action-card h3 { font-size: 19px; }
  .action-card-featured { transform: none; }
  .film-copy { max-width: 620px; }
  .film-frame { max-width: 760px; }
  .split-layout-platform .platform-copy { order: 2; }
  .split-layout-platform .dashboard-frame { order: 1; }
  .image-panel, .image-panel img { min-height: 400px; }
  .for-you-heading { max-width: 600px; }
  .profiles-panel { max-width: 680px; }
  .letter-visual, .letter-visual img { min-height: 390px; }
  .security-grid { grid-template-columns: 1fr; gap: 32px; padding: 82px 0; }
  .security-section { min-height: 0; }
  .privacy-card { max-width: 550px; }
  .germany-section { padding: 82px 0; }
  .germany-card { min-height: 410px; }
  .germany-card-copy { padding: 42px; }
  .final-cta-inner { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 62px 0; }
  .cta-logo { width: 145px; }
  .final-cta-inner .button, html[dir="rtl"] .final-cta-inner .button { grid-column: auto; justify-self: start; }
  html[dir="rtl"] .final-cta-inner .button { justify-self: end; }
}

@media (max-width: 580px) {
  .shell { width: min(calc(100% - 28px), var(--shell)); }
  h1 { font-size: clamp(40px, 12vw, 56px); letter-spacing: -.055em; }
  h2 { font-size: clamp(32px, 10vw, 43px); }
  .hero { min-height: 660px; }
  .hero-copy > p { margin-bottom: 24px; font-size: 16px; }
  .hero-actions { gap: 15px; }
  .hero-points { margin-top: 24px; gap: 8px; font-size: 12px; }
  .trust-grid span { min-height: 45px; padding: 0 9px; font-size: 11px; }
  .section { padding: 68px 0; }
  .section-lead { font-size: 16px; }
  .image-panel, .image-panel img { min-height: 350px; }
  .archive-visual { min-height: 515px; }
  .archive-shot { border-width: 5px; border-radius: 18px; }
  .archive-shot-primary { width: 47%; top: 13px; }
  .archive-shot-secondary { width: 46%; top: 85px; right: 2px; }
  .archive-language-shot { width: 33%; right: 10%; border-width: 4px; border-radius: 15px; }
  .archive-language-shot figcaption { min-height: 31px; padding: 5px; font-size: 7px; }
  .archive-list { margin-top: 24px; gap: 13px; }
  .archive-list li { gap: 10px; grid-template-columns: 31px 1fr; }
  .archive-list li > span { width: 28px; height: 28px; font-size: 9px; }
  .archive-list strong { font-size: 14px; }
  .archive-list p { font-size: 12px; }
  .action-heading { text-align: start; }
  .action-heading .eyebrow { justify-content: flex-start; }
  .action-heading .section-lead { margin-left: 0; margin-right: 0; }
  .action-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .action-card { min-height: 0; padding: 23px; }
  .action-card h3 { font-size: 20px; }
  .action-card ul { margin-top: 22px; }
  .action-rule { align-items: flex-start; justify-content: flex-start; margin-top: 25px; text-align: start; }
  html[dir="rtl"] .action-heading { text-align: right; }
  html[dir="rtl"] .action-heading .eyebrow { justify-content: flex-start; }
  html[dir="rtl"] .action-rule { text-align: right; }
  .film-frame { border-radius: 20px; }
  .film-play { width: 64px; height: 64px; font-size: 24px; }
  .film-badge { top: 13px; left: 13px; }
  .film-meta { left: 13px; bottom: 13px; }
  html[dir="rtl"] .film-badge { right: 13px; left: auto; }
  html[dir="rtl"] .film-meta { right: 13px; left: auto; }
  .image-note { left: 14px; right: 14px; bottom: 14px; }
  html[dir="rtl"] .image-note { left: 14px; right: 14px; }
  .category-grid { grid-template-columns: 1fr; }
  .dashboard-frame { padding: 12px; border-radius: 20px; }
  .dashboard-caption { left: 25px; bottom: 23px; font-size: 10px; }
  html[dir="rtl"] .dashboard-caption { left: auto; right: 25px; }
  .letter-visual, .letter-visual img { min-height: 350px; }
  .security-copy > p { font-size: 16px; }
  .germany-card { min-height: 460px; }
  .germany-card-copy { padding: 33px 25px; }
  .germany-card-shade { background: linear-gradient(0deg, rgba(7,22,40,.92), rgba(7,22,40,.43) 76%); }
  .workspace-thumb { max-width: 100%; }
  .footer-inner { min-height: 0; grid-template-columns: 1fr; grid-template-areas: "brand" "links" "note"; gap: 21px; padding: 30px 0 19px; }
  .footer-links { flex-wrap: wrap; gap: 16px; }
  .preview-modal { padding: 39px 23px 27px; }
  .preview-modal h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* Interactive public preview */
.preview-workspace { width: min(1240px, calc(100vw - 40px)); max-width: none; max-height: calc(100vh - 40px); min-height: min(760px, calc(100vh - 40px)); padding: 0; overflow: auto; border: 1px solid rgba(150,190,238,.25); border-radius: 28px; color: #f7fbff; background: #081426; box-shadow: 0 34px 95px rgba(0,0,0,.55); text-align: start; }
.preview-workspace .modal-close { z-index: 20; top: 14px; right: 16px; width: 38px; height: 38px; color: #c4d6eb; background: rgba(18,36,62,.84); border: 1px solid rgba(175,206,241,.18); font-size: 25px; }
.preview-workspace .modal-close:hover { color: #fff; background: #203b63; }
.demo-app { min-height: min(760px, calc(100vh - 40px)); display: flex; flex-direction: column; background: radial-gradient(circle at 84% -22%, rgba(43,121,255,.2), transparent 28%), #081426; }
.demo-app-topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 70px 14px 23px; border-bottom: 1px solid rgba(162,199,241,.13); background: rgba(9,22,40,.94); }
.demo-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 830; letter-spacing: -.02em; }
.demo-brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #b8ecff; background: linear-gradient(135deg, #1f75ff, #16b4bb); box-shadow: 0 8px 20px rgba(36,120,255,.25); }
.demo-top-meta { display: inline-flex; align-items: center; gap: 9px; color: #b7c7dd; font-size: 12px; font-weight: 650; }
.demo-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #37d5bd; box-shadow: 0 0 0 4px rgba(55,213,189,.12); }
.demo-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px minmax(0,1fr); }
.demo-sidebar { padding: 28px 20px; border-right: 1px solid rgba(162,199,241,.13); background: linear-gradient(180deg, rgba(17,38,68,.88), rgba(9,24,44,.94)); }
.demo-sidebar-kicker { display: block; margin: 0 0 10px; color: #62abff; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.demo-sidebar h2 { margin: 0 0 19px; color: #fff; font-size: 23px; line-height: 1.12; letter-spacing: -.035em; }
.demo-scenario-list { display: grid; gap: 8px; }
.demo-scenario { width: 100%; padding: 13px 12px; display: grid; grid-template-columns: 32px 1fr 16px; gap: 10px; align-items: center; border: 1px solid transparent; border-radius: 13px; color: #b9cae0; background: transparent; text-align: start; cursor: pointer; transition: .18s ease; }
.demo-scenario:hover { color: #fff; background: rgba(33,65,108,.55); }
.demo-scenario.is-active { border-color: rgba(78,150,255,.55); color: #fff; background: linear-gradient(135deg, rgba(38,109,221,.52), rgba(22,69,126,.58)); box-shadow: 0 10px 22px rgba(0,0,0,.14); }
.demo-scenario-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(148,193,248,.26); border-radius: 10px; color: #83c8ff; background: rgba(20,50,90,.72); font-size: 15px; }
.demo-scenario.is-active .demo-scenario-icon { color: #e6f8ff; border-color: rgba(166,225,255,.42); background: rgba(77,155,255,.34); }
.demo-scenario-copy strong { display: block; font-size: 13px; line-height: 1.25; }
.demo-scenario-copy small { display: block; margin-top: 3px; color: inherit; opacity: .73; font-size: 10px; line-height: 1.35; }
.demo-scenario-arrow { font-size: 17px; opacity: .65; }
.demo-sidebar-note { margin: 22px 2px 0; padding: 13px; border: 1px solid rgba(126,178,239,.19); border-radius: 13px; color: #a8bbd2; background: rgba(7,20,38,.35); font-size: 11px; line-height: 1.52; }
.demo-sidebar-note i { margin-right: 6px; color: #54d8ca; font-style: normal; }
.demo-workspace { min-width: 0; padding: clamp(21px,3vw,38px); background: linear-gradient(180deg, rgba(10,23,43,.72), #0a1527 72%); }
.demo-workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.demo-breadcrumb { display: inline-flex; flex-wrap: wrap; gap: 8px; color: #8fa6c3; font-size: 11px; font-weight: 650; }
.demo-breadcrumb b { color: #dceaff; font-weight: 750; }
.demo-workspace-title { margin: 8px 0 0; color: #fff; font-size: clamp(24px,3vw,35px); line-height: 1.06; letter-spacing: -.047em; }
.demo-badge { flex: 0 0 auto; margin-top: 3px; padding: 7px 10px; border: 1px solid rgba(82,208,190,.32); border-radius: 999px; color: #91eee1; background: rgba(25,139,125,.14); font-size: 10px; font-weight: 780; }
.demo-stage { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(245px,.75fr); gap: 16px; }
.demo-panel { min-width: 0; border: 1px solid rgba(145,184,229,.18); border-radius: 18px; background: linear-gradient(155deg, rgba(28,49,81,.92), rgba(15,33,59,.96)); box-shadow: 0 18px 37px rgba(0,0,0,.13); }
.demo-panel-main { padding: 20px; }
.demo-panel-side { padding: 17px; }
.demo-file-head { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(145,184,229,.16); border-radius: 13px; background: rgba(8,21,40,.56); }
.demo-file-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 39px; border: 1px solid rgba(87,153,255,.45); border-radius: 12px; color: #96c7ff; background: rgba(40,103,204,.2); font-size: 18px; }
.demo-file-copy { min-width: 0; }
.demo-file-copy strong { display: block; overflow: hidden; color: #f1f6ff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.demo-file-copy small { display: block; margin-top: 4px; color: #9fb2cb; font-size: 11px; }
.demo-file-status { margin-left: auto; padding: 6px 8px; border-radius: 8px; color: #7de7d5; background: rgba(27,157,136,.17); font-size: 9px; font-weight: 800; white-space: nowrap; }
.demo-content-list { margin-top: 15px; display: grid; gap: 9px; }
.demo-insight { padding: 13px; border: 1px solid rgba(144,183,228,.13); border-radius: 13px; background: rgba(11,27,49,.46); }
.demo-insight-label { display: flex; align-items: center; gap: 7px; color: #9ec0e4; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .065em; }
.demo-insight-label i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; color: #7db9ff; background: rgba(40,107,217,.2); font-style: normal; }
.demo-insight p { margin: 8px 0 0; color: #edf4ff; font-size: 13px; line-height: 1.55; }
.demo-insight.urgent { border-color: rgba(255,177,92,.35); background: rgba(124,69,19,.15); }
.demo-insight.urgent .demo-insight-label { color: #ffd09a; }
.demo-insight.urgent .demo-insight-label i { color: #ffd095; background: rgba(229,137,28,.2); }
.demo-side-label { margin: 2px 0 12px; color: #a9bfd9; font-size: 10px; font-weight: 850; letter-spacing: .085em; text-transform: uppercase; }
.demo-progress { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; }
.demo-progress li { display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: center; color: #9db3cc; font-size: 12px; line-height: 1.35; }
.demo-progress li span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; color: #92b4d9; background: rgba(44,74,110,.56); font-size: 10px; font-weight: 800; }
.demo-progress li.is-done { color: #dcf9f3; }
.demo-progress li.is-done span { color: #072a2d; background: #66dbc9; }
.demo-progress li.is-current { color: #fff; font-weight: 760; }
.demo-progress li.is-current span { color: #fff; background: #367ef0; box-shadow: 0 0 0 4px rgba(54,126,240,.14); }
.demo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.demo-button { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(112,169,246,.35); border-radius: 11px; color: #eaf5ff; background: rgba(19,58,104,.58); font: inherit; font-size: 12px; font-weight: 780; cursor: pointer; transition: .18s ease; }
.demo-button:hover { transform: translateY(-1px); border-color: rgba(143,197,255,.68); background: rgba(39,104,190,.72); }
.demo-button.primary { border-color: transparent; color: #fff; background: linear-gradient(135deg, #287cff, #1e62ce); box-shadow: 0 10px 18px rgba(21,99,220,.24); }
.demo-button.mint { border-color: rgba(78,224,199,.34); color: #cafff6; background: rgba(18,139,121,.24); }
.demo-reply-draft { margin-top: 15px; padding: 16px; border: 1px solid rgba(105,191,174,.28); border-radius: 14px; background: linear-gradient(160deg, rgba(21,93,84,.25), rgba(10,35,52,.35)); }
.demo-reply-draft-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #a5f2e6; font-size: 11px; font-weight: 780; }
.demo-reply-draft p { margin: 12px 0 0; color: #ebfffb; font-size: 13px; line-height: 1.6; }
.demo-review-note { margin-top: 11px; padding: 10px 11px; border-left: 3px solid #5ad5c4; color: #b7d8d5; background: rgba(14,80,71,.24); font-size: 11px; line-height: 1.5; }
.demo-form-list { margin-top: 15px; display: grid; gap: 8px; }
.demo-form-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid rgba(145,184,229,.14); border-radius: 12px; background: rgba(8,21,40,.55); }
.demo-form-field strong { color: #ebf5ff; font-size: 12px; }
.demo-form-field span { color: #9eb3ce; font-size: 11px; }
.demo-field-status { padding: 4px 7px; border-radius: 7px; color: #9ce9db; background: rgba(32,151,131,.16); font-size: 10px; font-weight: 760; white-space: nowrap; }
.demo-form-field.needs-review { border-color: rgba(255,185,95,.34); }
.demo-form-field.needs-review .demo-field-status { color: #ffd69c; background: rgba(195,119,20,.17); }
.demo-archive-grid { margin-top: 15px; display: grid; gap: 9px; }
.demo-archive-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid rgba(145,184,229,.14); border-radius: 12px; background: rgba(9,22,41,.54); }
.demo-archive-item i { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: #a2ceff; background: rgba(40,105,205,.18); font-style: normal; }
.demo-archive-item strong { display: block; overflow: hidden; color: #edf5ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.demo-archive-item small { display: block; margin-top: 3px; color: #9cafc8; font-size: 10px; }
.demo-archive-type { padding: 5px 7px; border-radius: 7px; color: #bdeee8; background: rgba(31,138,123,.18); font-size: 9px; font-weight: 800; }
.demo-empty-notice { display: flex; gap: 9px; margin-top: 15px; padding: 12px; border: 1px dashed rgba(151,190,235,.3); border-radius: 12px; color: #a9bfd7; background: rgba(10,27,49,.36); font-size: 11px; line-height: 1.5; }
.demo-empty-notice i { color: #69b2ff; font-style: normal; }
.demo-helper { margin-top: 15px; color: #96aec9; font-size: 11px; line-height: 1.52; }
html[dir="rtl"] .preview-workspace { text-align: right; }
html[dir="rtl"] .preview-workspace .modal-close { right: auto; left: 16px; }
html[dir="rtl"] .demo-sidebar { border-right: 0; border-left: 1px solid rgba(162,199,241,.13); }
html[dir="rtl"] .demo-scenario, html[dir="rtl"] .demo-file-head, html[dir="rtl"] .demo-actions, html[dir="rtl"] .demo-workspace-head { direction: rtl; }
html[dir="rtl"] .demo-file-status { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .demo-sidebar-note i { margin-right: 0; margin-left: 6px; }

@media (max-width: 800px) {
  .preview-workspace { width: min(100vw - 16px, 660px); max-height: calc(100vh - 16px); min-height: calc(100vh - 16px); border-radius: 20px; }
  .demo-app { min-height: calc(100vh - 16px); }
  .demo-app-topbar { min-height: 62px; padding: 12px 62px 12px 16px; }
  .demo-top-meta { display: none; }
  .demo-shell { grid-template-columns: 1fr; }
  .demo-sidebar { padding: 17px 14px 14px; border-right: 0; border-bottom: 1px solid rgba(162,199,241,.13); }
  html[dir="rtl"] .demo-sidebar { border-left: 0; }
  .demo-sidebar h2 { margin-bottom: 13px; font-size: 19px; }
  .demo-scenario-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .demo-scenario { min-height: 68px; grid-template-columns: 28px 1fr; padding: 9px; gap: 8px; }
  .demo-scenario-arrow { display: none; }
  .demo-scenario-icon { width: 28px; height: 28px; font-size: 13px; }
  .demo-scenario-copy strong { font-size: 11px; }
  .demo-scenario-copy small { font-size: 9px; }
  .demo-sidebar-note { display: none; }
  .demo-workspace { padding: 20px 14px 22px; }
  .demo-workspace-head { margin-bottom: 16px; }
  .demo-workspace-title { font-size: 26px; }
  .demo-badge { padding: 5px 8px; font-size: 9px; }
  .demo-stage { grid-template-columns: 1fr; gap: 12px; }
  .demo-panel-main, .demo-panel-side { padding: 14px; }
  .demo-file-head { padding: 11px; }
  .demo-content-list { gap: 8px; }
  .demo-insight { padding: 11px; }
  .demo-insight p { font-size: 12px; }
  .demo-progress { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
  .demo-progress li { grid-template-columns: 1fr; gap: 5px; text-align: center; font-size: 10px; }
  .demo-progress li span { margin: 0 auto; }
  .demo-actions { margin-top: 13px; }
  .demo-button { flex: 1 1 150px; min-height: 39px; padding: 0 11px; font-size: 11px; }
  .demo-reply-draft { padding: 13px; }
  .demo-form-field { padding: 10px; }
  .demo-archive-item { grid-template-columns: 31px minmax(0,1fr); }
  .demo-archive-type { justify-self: start; grid-column: 2; }
  html[dir="rtl"] .demo-archive-type { justify-self: end; }
}


/* Pilot start options */
.start-access-section { position: relative; overflow: hidden; background: linear-gradient(180deg, #f6f9fd 0%, #ffffff 100%); }
.start-access-section::before { content: ""; position: absolute; width: 500px; height: 500px; top: -280px; right: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(58,136,255,.16), transparent 68%); pointer-events: none; }
.start-access-layout { position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; gap: clamp(38px, 7vw, 96px); }
.start-access-copy { max-width: 510px; }
.start-access-copy h2 { margin-bottom: 19px; }
.start-access-copy h2 em { color: #2d7df6; }
.start-access-copy > p { max-width: 500px; margin-bottom: 25px; color: #53657c; font-size: 17px; line-height: 1.72; }
.start-access-safety { display: flex; align-items: flex-start; gap: 11px; padding: 15px 16px; border: 1px solid #d9e7f6; border-radius: 16px; background: rgba(255,255,255,.82); box-shadow: 0 14px 34px rgba(15,52,99,.06); color: #53657c; font-size: 13px; line-height: 1.55; }
.start-access-safety > i { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #178a81; background: #dcf4f0; font-style: normal; font-weight: 800; }
.start-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.start-option { min-height: 385px; display: flex; flex-direction: column; padding: 25px; border: 1px solid #dbe6f3; border-radius: 23px; background: rgba(255,255,255,.94); box-shadow: 0 18px 44px rgba(19,54,99,.08); }
.start-option.is-featured { border-color: rgba(41,126,245,.52); color: #fff; background: linear-gradient(145deg, #102a53, #17447e 64%, #0f6a96); box-shadow: 0 23px 48px rgba(13,64,136,.23); }
.start-option-top { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 21px; }
.start-option-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; color: #297cf4; background: #e8f2ff; font-size: 24px; font-weight: 800; }
.start-option.is-featured .start-option-icon { color: #bff6ef; background: rgba(60,208,194,.14); border: 1px solid rgba(155,243,233,.22); }
.start-option-badge { padding: 7px 10px; border-radius: 999px; color: #327dec; background: #edf5ff; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.start-option.is-featured .start-option-badge { color: #d9f4ff; background: rgba(255,255,255,.11); }
.start-option h3 { margin: 0 0 10px; color: #152842; font-size: 23px; line-height: 1.12; letter-spacing: -.035em; }
.start-option.is-featured h3 { color: #fff; }
.start-option > p { min-height: 78px; margin: 0 0 17px; color: #5e6e83; font-size: 14px; line-height: 1.64; }
.start-option.is-featured > p { color: rgba(255,255,255,.78); }
.start-option-list { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.start-option-list li { position: relative; padding-left: 22px; color: #41546f; font-size: 13px; line-height: 1.45; font-weight: 650; }
.start-option-list li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: #1a9b8e; font-weight: 900; }
.start-option.is-featured .start-option-list li { color: rgba(255,255,255,.88); }
.start-option.is-featured .start-option-list li::before { color: #6ce5d7; }
.start-option .button { width: 100%; margin-top: auto; justify-content: center; }
.start-option .button-secondary { color: #246fd5; border-color: #9fc3f4; background: #fff; }
.start-option .button-secondary:hover { color: #fff; background: #246fd5; }
.start-option .button-light { color: #143960; background: #fff; box-shadow: none; }
.start-option .button-light:hover { background: #e7f4ff; }
.start-access-bottom { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-top: 1px solid #e2eaf3; color: #61728a; font-size: 13px; line-height: 1.55; }
.start-access-bottom i { color: #2d82f3; font-style: normal; }
html[dir="rtl"] .start-access-copy, html[dir="rtl"] .start-option, html[dir="rtl"] .start-modal-inner { text-align: right; }
html[dir="rtl"] .start-access-bottom, html[dir="rtl"] .start-access-safety, html[dir="rtl"] .start-modal-info { direction: rtl; }
html[dir="rtl"] .start-option-list li { padding-left: 0; padding-right: 22px; }
html[dir="rtl"] .start-option-list li::before { left: auto; right: 0; }

/* Start choice dialog: does not collect data or create an account. */
.start-modal-backdrop { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(2,11,22,.7); backdrop-filter: blur(6px); }
.start-modal-backdrop.show { display: flex; }
.start-modal { position: relative; width: min(100%, 550px); overflow: hidden; border: 1px solid rgba(199,222,249,.22); border-radius: 25px; color: #fff; background: linear-gradient(145deg, #0e2443, #173c6d 68%, #0f5e90); box-shadow: 0 30px 86px rgba(0,0,0,.42); animation: modal-enter .22s ease both; }
.start-modal::before { content: ""; position: absolute; width: 390px; height: 390px; top: -260px; right: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(97,175,255,.48), transparent 66%); pointer-events: none; }
.start-modal-inner { position: relative; z-index: 1; padding: 42px 37px 33px; }
.start-modal-close { position: absolute; z-index: 2; top: 13px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(212,232,254,.18); border-radius: 11px; color: #d2e4f8; background: rgba(4,18,37,.42); cursor: pointer; font-size: 24px; }
.start-modal-close:hover { color: #fff; background: rgba(255,255,255,.14); }
.start-modal-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px; color: #9febe2; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.start-modal-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #50d5c7; box-shadow: 0 0 0 5px rgba(80,213,199,.13); }
.start-modal-inner h2 { max-width: 410px; margin: 0 0 12px; color: #fff; font-size: clamp(29px, 5vw, 39px); line-height: 1.04; letter-spacing: -.04em; }
.start-modal-inner > p { max-width: 470px; margin: 0 0 22px; color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.65; }
.start-modal-info { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 26px; padding: 14px; border: 1px solid rgba(188,219,255,.18); border-radius: 14px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.5; }
.start-modal-info i { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #cdfbf5; background: rgba(51,202,189,.15); font-style: normal; }
.start-modal-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.start-modal-actions .button { min-height: 44px; }
.start-modal-actions .button-light { color: #143960; background: #fff; }
.start-modal-actions .button-ghost { border: 1px solid rgba(218,235,254,.29); color: #e0efff; background: transparent; }
.start-modal-actions .button-ghost:hover { background: rgba(255,255,255,.1); }
html[dir="rtl"] .start-modal-close { right: auto; left: 14px; }

@media (max-width: 860px) {
  .start-access-layout { grid-template-columns: 1fr; gap: 32px; }
  .start-access-copy { max-width: 620px; }
  .start-options { max-width: 690px; }
}

@media (max-width: 580px) {
  .start-options { grid-template-columns: 1fr; }
  .start-option { min-height: 0; padding: 22px; }
  .start-option > p { min-height: 0; }
  .start-access-bottom { align-items: flex-start; padding: 14px 0 0; border-top: 0; }
  .start-modal-inner { padding: 40px 23px 25px; }
  .start-modal-actions { display: grid; grid-template-columns: 1fr; }
  .start-modal-actions .button { width: 100%; justify-content: center; }
}

/* Part 9 — standalone information pages. These pages intentionally remain separate
   from the customer app and the interactive preview. */
.subpage-header { position: relative; z-index: 50; color: var(--ink); background: rgba(255,255,255,.96); border-bottom: 1px solid #e2eaf2; box-shadow: 0 8px 24px rgba(16,38,68,.055); }
.subpage-header-inner { min-height: 84px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; }
.subpage-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 21px; font-size: 13px; font-weight: 720; }
.subpage-nav a { color: #52637a; transition: color .18s ease; }
.subpage-nav a:hover, .subpage-nav a[aria-current] { color: #176ae5; }
.subpage-actions { display: flex; align-items: center; gap: 11px; }
.subpage-header .language-button { border-color: #d7e2ee; background: #fff; }
.subpage-nav-toggle { display: none; }
.legal-page-main { min-height: 650px; background: #fff; }
.legal-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(125deg, #071629 0%, #0b2f62 57%, #166cb4 115%); }
.legal-hero::before { content: ""; position: absolute; width: 700px; height: 700px; right: -280px; top: -450px; border-radius: 50%; background: radial-gradient(circle, rgba(85,171,255,.47), transparent 69%); }
.legal-hero::after { content: ""; position: absolute; width: 480px; height: 480px; left: -250px; bottom: -290px; border-radius: 50%; background: radial-gradient(circle, rgba(41,201,187,.26), transparent 70%); }
.legal-hero-copy { position: relative; z-index: 1; max-width: 790px; padding: 112px 0 93px; }
.legal-hero .eyebrow { color: rgba(255,255,255,.76); }
.legal-hero h1 { margin-bottom: 22px; max-width: 820px; }
.legal-hero h1 em { color: #8ec4ff; }
.legal-hero p { max-width: 720px; margin: 0; color: rgba(255,255,255,.8); font-size: 18px; line-height: 1.7; }
.legal-preview-banner { width: fit-content; max-width: 100%; margin-top: 27px; padding: 10px 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; color: rgba(255,255,255,.78); background: rgba(4,17,34,.3); font-size: 12px; font-weight: 670; backdrop-filter: blur(8px); }
.legal-preview-banner i { color: #58d0c6; font-size: 10px; font-style: normal; }
.legal-section { padding: 92px 0; }
.legal-section-soft { background: #f6f9fd; border-top: 1px solid #edf2f7; border-bottom: 1px solid #edf2f7; }
.legal-section-heading { max-width: 760px; margin-bottom: 34px; }
.legal-section-heading h2, .legal-two-column h2 { max-width: 720px; margin-bottom: 18px; font-size: clamp(30px, 3.5vw, 48px); }
.legal-card-grid { display: grid; gap: 17px; }
.legal-card-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.legal-card-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legal-info-card { min-height: 228px; padding: 26px 25px; border: 1px solid #dce7f1; border-radius: 20px; background: #fff; box-shadow: 0 13px 31px rgba(17,51,91,.06); }
.legal-info-icon { width: 37px; height: 37px; margin-bottom: 21px; display: grid; place-items: center; border-radius: 12px; color: #176eea; background: #e9f3ff; font-size: 17px; font-weight: 800; }
.legal-info-card:nth-child(2n) .legal-info-icon { color: #087c73; background: #e0f6f1; }
.legal-info-card h3 { margin-bottom: 9px; color: #172942; font-size: 18px; line-height: 1.24; letter-spacing: -.018em; }
.legal-info-card p, .legal-note-card p, .legal-body-copy { margin: 0; color: #64758c; font-size: 15px; line-height: 1.68; }
.legal-two-column { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: clamp(40px, 8vw, 110px); align-items: start; }
.legal-note-card { padding: 30px; border: 1px solid #d8e7fa; border-radius: 22px; background: linear-gradient(150deg, #edf6ff, #fff); box-shadow: 0 18px 42px rgba(16,54,94,.08); }
.legal-note-card-navy { color: #fff; border-color: rgba(128,190,255,.26); background: linear-gradient(150deg, #0a274b, #0c4f8e); box-shadow: 0 19px 48px rgba(8,36,72,.23); }
.legal-note-card-navy h3, .legal-note-card-navy p { color: #fff; }
.legal-note-card-navy p { color: rgba(255,255,255,.78); }
.legal-note-mark { width: 42px; height: 42px; margin-bottom: 20px; display: grid; place-items: center; border-radius: 13px; color: #166fe9; background: #fff; box-shadow: 0 9px 20px rgba(17,65,113,.1); font-size: 19px; font-weight: 800; }
.legal-note-card h3 { margin-bottom: 11px; color: #172b49; font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.legal-note-card .button { margin-top: 23px; }
.legal-list { margin: 25px 0 0; padding: 0; display: grid; gap: 13px; list-style: none; }
.legal-list li { display: grid; grid-template-columns: 23px 1fr; gap: 10px; align-items: start; }
.legal-list li > span { width: 20px; height: 20px; margin-top: 2px; display: grid; place-items: center; border-radius: 50%; color: #0e806f; background: #dff4ef; font-size: 12px; font-weight: 850; }
.legal-list p { margin: 0; color: #50627c; font-size: 15px; line-height: 1.58; font-weight: 620; }
.legal-list-ordered { counter-reset: legal-list; }
.legal-list-ordered li > span { color: #176eea; background: #e6f1ff; }
.legal-alert-card { padding: 19px 20px; display: flex; gap: 13px; align-items: flex-start; border: 1px solid #ffdca4; border-radius: 17px; background: #fff9ed; color: #6f562a; }
.legal-alert-card i { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #9d6504; background: #fff0ce; font-style: normal; font-weight: 850; }
.legal-alert-card p { margin: 1px 0 0; font-size: 14px; line-height: 1.55; font-weight: 650; }
.legal-faq-layout { grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); }
.legal-faq-list { display: grid; gap: 11px; }
.legal-faq-list details { overflow: hidden; border: 1px solid #dae5ef; border-radius: 16px; background: #fff; }
.legal-faq-list summary { min-height: 64px; padding: 18px 21px; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: #172941; cursor: pointer; font-size: 16px; font-weight: 760; list-style: none; }
.legal-faq-list summary::-webkit-details-marker { display: none; }
.legal-faq-list summary b { color: #1b70e9; font-size: 22px; font-weight: 450; transition: transform .2s ease; }
.legal-faq-list details[open] summary b { transform: rotate(45deg); }
.legal-faq-list details p { max-width: 92%; margin: -1px 0 0; padding: 0 21px 21px; color: #607289; font-size: 15px; line-height: 1.65; }
.subpage-footer .footer-inner { min-height: 200px; }
html[dir="rtl"] .subpage-header-inner, html[dir="rtl"] .subpage-nav, html[dir="rtl"] .subpage-actions, html[dir="rtl"] .legal-two-column, html[dir="rtl"] .legal-card-grid, html[dir="rtl"] .legal-faq-list, html[dir="rtl"] .legal-list, html[dir="rtl"] .legal-preview-banner { direction: rtl; }
html[dir="rtl"] .legal-hero-copy, html[dir="rtl"] .legal-section-heading, html[dir="rtl"] .legal-two-column, html[dir="rtl"] .legal-info-card, html[dir="rtl"] .legal-note-card, html[dir="rtl"] .legal-faq-list summary, html[dir="rtl"] .legal-faq-list details p { text-align: right; }
html[dir="rtl"] .legal-list li { grid-template-columns: 1fr 23px; }
html[dir="rtl"] .legal-list li > span { grid-column: 2; }
html[dir="rtl"] .legal-list li > p { grid-column: 1; grid-row: 1; }
html[dir="rtl"] .legal-alert-card { direction: rtl; }
html[dir="rtl"] .legal-alert-card i { order: 2; }

@media (max-width: 1030px) {
  .subpage-header-inner { gap: 18px; }
  .subpage-nav { gap: 16px; font-size: 12px; }
  .legal-card-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .subpage-header-inner { min-height: 72px; grid-template-columns: auto 1fr auto; gap: 13px; }
  .subpage-header .brand { width: 146px; }
  .subpage-nav-toggle { grid-column: 2; justify-self: end; width: 38px; height: 36px; display: grid; gap: 4px; align-content: center; border: 0; color: var(--ink); background: transparent; cursor: pointer; }
  .subpage-nav-toggle > span:not(.sr-only) { width: 21px; height: 2px; justify-self: end; border-radius: 5px; background: currentColor; }
  .subpage-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; padding: 15px 16px; display: none; align-items: stretch; justify-content: flex-start; flex-direction: column; gap: 4px; background: #fff; border-bottom: 1px solid #dce6ef; box-shadow: 0 16px 30px rgba(7,22,41,.12); }
  .subpage-nav.open { display: flex; }
  .subpage-nav a { padding: 10px 12px; border-radius: 9px; font-size: 14px; }
  .subpage-nav a:hover, .subpage-nav a[aria-current] { background: #eef6ff; }
  .subpage-actions .button { display: none; }
  .subpage-header .language-button { min-width: 52px; height: 35px; padding: 0 8px; }
  .legal-hero-copy { padding: 86px 0 73px; }
  .legal-hero p { font-size: 17px; }
  .legal-section { padding: 72px 0; }
  .legal-card-grid-three, .legal-card-grid-two { grid-template-columns: 1fr; }
  .legal-info-card { min-height: 0; }
  .legal-two-column, .legal-faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .legal-note-card { max-width: 650px; }
}

@media (max-width: 580px) {
  .legal-hero-copy { padding: 76px 0 63px; }
  .legal-hero h1 { font-size: clamp(39px, 11vw, 53px); }
  .legal-hero p { font-size: 16px; }
  .legal-preview-banner { align-items: flex-start; font-size: 11px; line-height: 1.45; }
  .legal-section { padding: 61px 0; }
  .legal-info-card, .legal-note-card { padding: 23px 21px; border-radius: 18px; }
  .legal-info-card h3 { font-size: 17px; }
  .legal-faq-list summary { min-height: 58px; padding: 16px 17px; font-size: 15px; }
  .legal-faq-list details p { max-width: 100%; padding: 0 17px 18px; font-size: 14px; }
  .legal-alert-card { padding: 16px; }
}

/* B-Desk all-in-one story and optional partner network */
.all-in-one-section { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #061426 0%, #09254a 52%, #082041 100%); isolation: isolate; }
.ecosystem-grid-pattern { position: absolute; inset: 0; z-index: -3; background-image: linear-gradient(rgba(145,196,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(145,196,255,.055) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); opacity: .42; pointer-events: none; }
.ecosystem-glow { position: absolute; z-index: -2; border-radius: 50%; pointer-events: none; filter: blur(4px); }
.ecosystem-glow-one { width: 680px; height: 680px; top: -400px; left: -280px; background: radial-gradient(circle, rgba(44,133,255,.34), transparent 68%); }
.ecosystem-glow-two { width: 580px; height: 580px; right: -290px; bottom: -380px; background: radial-gradient(circle, rgba(29,206,192,.20), transparent 69%); }
.all-in-one-heading { max-width: 850px; margin: 0 auto 45px; text-align: center; }
.all-in-one-heading .eyebrow { justify-content: center; }
.all-in-one-heading h2 { color: #fff; }
.all-in-one-heading h2 em, .partner-network-heading h3 em { color: #7ab8ff; }
.all-in-one-heading .section-lead { max-width: 745px; margin: 0 auto; color: rgba(237,246,255,.77); }
.partial-tools-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.partial-tool-card { min-height: 214px; padding: 24px; border: 1px solid rgba(167,207,255,.16); border-radius: 21px; background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.partial-tool-top { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; color: rgba(214,232,251,.58); font-size: 10px; font-weight: 830; letter-spacing: .085em; text-transform: uppercase; }
.partial-tool-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(190,215,244,.18); border-radius: 10px; color: #c5d7e9; background: rgba(255,255,255,.055); font-size: 15px; letter-spacing: 0; }
.partial-tool-card h3 { margin: 0 0 9px; color: #f5f9ff; font-size: 19px; letter-spacing: -.025em; }
.partial-tool-card p { margin: 0; color: rgba(220,235,250,.65); font-size: 13px; line-height: 1.6; }
.whole-case-panel { position: relative; margin-top: 24px; overflow: hidden; border: 1px solid rgba(105,183,255,.31); border-radius: 26px; background: linear-gradient(128deg, rgba(24,108,228,.47), rgba(9,60,132,.39) 54%, rgba(9,124,139,.31)); box-shadow: 0 28px 66px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.12); }
.whole-case-panel::before { content: ""; position: absolute; width: 430px; height: 430px; top: -250px; right: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(155,212,255,.25), transparent 68%); pointer-events: none; }
.whole-case-panel-head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,.8fr); gap: 38px; align-items: end; padding: 35px 36px 31px; border-bottom: 1px solid rgba(192,225,255,.16); }
.whole-case-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px; color: #c9e4ff; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.whole-case-kicker i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; color: #b5d8ff; background: rgba(255,255,255,.12); font-style: normal; letter-spacing: 0; }
.whole-case-panel h3 { margin: 0; color: #fff; font-size: clamp(27px, 3.1vw, 42px); line-height: 1.05; letter-spacing: -.043em; }
.whole-case-panel-head > p { max-width: 430px; margin: 0; color: rgba(229,243,255,.78); font-size: 14px; line-height: 1.65; }
.whole-case-flow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5,1fr); }
.whole-case-flow article { min-height: 186px; padding: 25px 20px 22px; border-right: 1px solid rgba(192,225,255,.14); }
.whole-case-flow article:last-child { border-right: 0; }
.whole-case-flow article > span { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 9px; color: #d4ecff; background: rgba(255,255,255,.11); font-size: 10px; font-weight: 850; }
.whole-case-flow strong { display: block; margin-bottom: 7px; color: #fff; font-size: 14px; line-height: 1.34; }
.whole-case-flow p { margin: 0; color: rgba(224,240,255,.68); font-size: 12px; line-height: 1.58; }
.whole-case-control { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0 21px 21px; padding: 14px 16px; border: 1px solid rgba(171,234,226,.25); border-radius: 15px; color: #dcfcf6; background: rgba(3,53,70,.28); }
.whole-case-control > span { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 8px; color: #a5eee5; background: rgba(48,207,191,.17); font-weight: 900; }
.whole-case-control p { margin: 0; font-size: 12px; line-height: 1.5; font-weight: 650; }
.partner-network { display: grid; grid-template-columns: .82fr 1fr 1fr; gap: 18px; align-items: stretch; margin-top: 64px; }
.partner-network-heading { padding: 18px 18px 18px 0; }
.partner-network-heading h3 { margin: 0 0 17px; color: #fff; font-size: clamp(30px,3.2vw,44px); line-height: 1.06; letter-spacing: -.045em; }
.partner-network-heading p { max-width: 355px; margin: 0; color: rgba(230,243,255,.73); font-size: 14px; line-height: 1.67; }
.partner-card { min-height: 392px; padding: 26px; display: flex; flex-direction: column; border: 1px solid rgba(165,208,255,.18); border-radius: 22px; }
.partner-card-connected { background: linear-gradient(150deg, rgba(12,113,131,.54), rgba(20,85,156,.52)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.partner-card-law { background: rgba(255,255,255,.055); }
.partner-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 29px; }
.partner-card-top-connected { margin-bottom: 24px; }
.connected-mobile-logo { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 5px 7px 5px 5px; border: 1px solid rgba(213,241,255,.22); border-radius: 11px; color: #fff; background: rgba(255,255,255,.095); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); text-decoration: none; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.connected-mobile-logo:hover { transform: translateY(-1px); border-color: rgba(209,244,255,.44); background: rgba(255,255,255,.15); }
.connected-mobile-logo-icon { width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; flex: 0 0 28px; border-radius: 8px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.connected-mobile-logo-icon img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.connected-mobile-logo.is-icon-unavailable .connected-mobile-logo-icon::after { content: "CM"; color: #143f73; font-size: 9px; font-weight: 900; letter-spacing: -.04em; }
.connected-mobile-logo.is-icon-unavailable .connected-mobile-logo-icon img { display: none; }
.connected-mobile-logo-wordmark { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; font-size: 13px; letter-spacing: -.035em; line-height: 1; }
.connected-mobile-logo-wordmark strong { font-weight: 830; }
.connected-mobile-logo-wordmark b { color: #99e8e0; font-weight: 780; }
.connected-mobile-logo-link { color: #a8d8ff; font-size: 13px; line-height: 1; }
html[dir="rtl"] .connected-mobile-logo { margin-left: 0; margin-right: auto; flex-direction: row-reverse; }
.partner-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid rgba(165,232,224,.3); border-radius: 99px; color: #b9f4ea; background: rgba(25,171,160,.13); font-size: 10px; font-weight: 840; letter-spacing: .055em; text-transform: uppercase; }
.partner-badge-planned { color: #c8ddf8; border-color: rgba(170,208,252,.24); background: rgba(116,170,239,.12); }
.partner-symbol { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: #d3ebff; background: rgba(255,255,255,.1); font-size: 18px; font-weight: 760; }
.partner-card h4 { margin: 0 0 11px; color: #fff; font-size: 21px; line-height: 1.18; letter-spacing: -.027em; }
.partner-card > p { margin: 0; color: rgba(230,244,255,.75); font-size: 13px; line-height: 1.62; }
.contract-service-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 20px 0 2px; border-top: 1px solid rgba(190,226,251,.14); border-bottom: 1px solid rgba(190,226,251,.14); }
.contract-service-steps > span { min-height: 74px; padding: 12px 9px; display: flex; align-items: flex-start; gap: 7px; border-right: 1px solid rgba(190,226,251,.12); }
.contract-service-steps > span:last-child { border-right: 0; }
.contract-service-steps b { width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center; border-radius: 6px; color: #dff6ff; background: rgba(132,207,255,.18); font-size: 10px; font-weight: 850; }
.contract-service-steps i { color: rgba(233,248,255,.85); font-size: 10px; font-style: normal; font-weight: 700; line-height: 1.43; }
.partner-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: auto; padding-top: 21px; }
.partner-consent span { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; margin-top: 1px; border-radius: 7px; color: #9ce7df; background: rgba(42,203,187,.15); font-size: 12px; font-weight: 900; }
.partner-consent p { margin: 0; color: rgba(223,250,247,.85); font-size: 12px; line-height: 1.52; font-weight: 650; }
.partner-card small { margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(197,224,250,.14); color: rgba(222,236,250,.57); font-size: 10px; line-height: 1.56; }
.partner-footer-note { max-width: 770px; margin: 23px auto 0; color: rgba(214,232,250,.56); font-size: 11px; line-height: 1.58; text-align: center; }
html[dir="rtl"] .partner-network-heading { padding-left: 18px; padding-right: 0; }
html[dir="rtl"] .whole-case-flow article { border-right: 0; border-left: 1px solid rgba(192,225,255,.14); }
html[dir="rtl"] .whole-case-flow article:last-child { border-left: 0; }

@media (max-width: 1060px) {
  .partner-network { grid-template-columns: 1fr 1fr; }
  .partner-network-heading { grid-column: 1 / -1; padding: 0; }
  .partner-network-heading p { max-width: 650px; }
  .whole-case-flow { grid-template-columns: repeat(3,1fr); }
  .whole-case-flow article:nth-child(3) { border-right: 0; }
  .whole-case-flow article:nth-child(-n+3) { border-bottom: 1px solid rgba(192,225,255,.14); }
  html[dir="rtl"] .whole-case-flow article { border-left: 1px solid rgba(192,225,255,.14); }
  html[dir="rtl"] .whole-case-flow article:nth-child(3) { border-left: 0; }
}

@media (max-width: 860px) {
  .all-in-one-heading { margin-bottom: 32px; }
  .partial-tools-grid { grid-template-columns: 1fr; }
  .partial-tool-card { min-height: 0; }
  .whole-case-panel-head { grid-template-columns: 1fr; gap: 18px; padding: 29px 25px 24px; }
  .whole-case-flow { grid-template-columns: repeat(2,1fr); }
  .whole-case-flow article:nth-child(3) { border-right: 1px solid rgba(192,225,255,.14); }
  .whole-case-flow article:nth-child(2), .whole-case-flow article:nth-child(4) { border-right: 0; }
  .whole-case-flow article:nth-child(-n+4) { border-bottom: 1px solid rgba(192,225,255,.14); }
  html[dir="rtl"] .whole-case-flow article { border-right: 0; border-left: 1px solid rgba(192,225,255,.14); }
  html[dir="rtl"] .whole-case-flow article:nth-child(3) { border-left: 1px solid rgba(192,225,255,.14); }
  html[dir="rtl"] .whole-case-flow article:nth-child(2), html[dir="rtl"] .whole-case-flow article:nth-child(4) { border-left: 0; }
  .partner-network { grid-template-columns: 1fr; margin-top: 51px; }
  .partner-network-heading { grid-column: auto; }
}

@media (max-width: 580px) {
  .all-in-one-section { padding-top: 71px; padding-bottom: 71px; }
  .partial-tool-card { padding: 21px; border-radius: 18px; }
  .partial-tool-top { margin-bottom: 19px; }
  .whole-case-panel { margin-top: 18px; border-radius: 20px; }
  .whole-case-panel-head { padding: 25px 20px 21px; }
  .whole-case-panel h3 { font-size: 29px; }
  .whole-case-flow { grid-template-columns: 1fr; }
  .whole-case-flow article, .whole-case-flow article:nth-child(3) { min-height: 0; padding: 20px; border-right: 0; border-bottom: 1px solid rgba(192,225,255,.14); }
  .whole-case-flow article:last-child { border-bottom: 0; }
  html[dir="rtl"] .whole-case-flow article, html[dir="rtl"] .whole-case-flow article:nth-child(3) { border-left: 0; }
  .whole-case-control { align-items: flex-start; margin: 14px; padding: 13px; }
  .partner-card { min-height: 0; padding: 23px 21px; border-radius: 19px; }
  .partner-card-top-connected { gap: 10px; }
  .connected-mobile-logo { min-height: 36px; gap: 6px; padding: 4px 6px 4px 4px; }
  .connected-mobile-logo-icon { width: 27px; height: 27px; flex-basis: 27px; }
  .connected-mobile-logo-wordmark { font-size: 12px; }
  .partner-network-heading h3 { font-size: 31px; }
  .contract-service-steps { grid-template-columns: 1fr; margin-top: 18px; }
  .contract-service-steps > span { min-height: 0; padding: 10px 0; border-right: 0; border-bottom: 1px solid rgba(190,226,251,.12); }
  .contract-service-steps > span:last-child { border-bottom: 0; }
}



.partner-card-connected { cursor: pointer; }
.partner-card-actions { margin-top: 18px; display: flex; }
.contract-service-button { width: 100%; justify-content: center; }
.connected-mobile-logo { border: 0; cursor: pointer; }
.connected-mobile-logo-icon { width: 132px; height: 38px; flex: 0 0 132px; border-radius: 10px; background: rgba(255,255,255,.98); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.connected-mobile-logo-icon img { width: 100%; height: 100%; object-fit: contain; padding: 0; }
.connected-mobile-logo-wordmark { display: none; }
.connected-mobile-logo-link { color: #dff6ff; font-size: 14px; }

.contract-modal-backdrop { position: fixed; inset: 0; z-index: 120; display: none; background: rgba(3,10,22,.72); backdrop-filter: blur(7px); padding: 18px; }
.contract-modal-backdrop.show { display: block; }
.contract-modal { position: relative; width: min(1120px, 100%); height: min(760px, calc(100vh - 36px)); margin: 0 auto; background: linear-gradient(180deg, #04102a 0%, #05132e 100%); border: 1px solid rgba(96,144,255,.22); border-radius: 28px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.contract-modal-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 50%; font-size: 24px; cursor: pointer; }
html[dir="rtl"] .contract-modal-close { right: auto; left: 18px; }
#contract-modal-root { height: 100%; overflow: auto; }
.contract-modal-inner { min-height: 100%; padding: 26px 28px 28px; color: #e9f2ff; }
.contract-modal-head { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.contract-modal-head h2 { margin: 0; font-size: clamp(1.9rem, 2vw, 2.35rem); color: #fff; }
.contract-modal-back { display: inline-flex; align-items: center; gap: 10px; padding: 0; color: #fff; background: none; border: 0; font: inherit; font-weight: 800; cursor: pointer; }
.contract-modal-back span:first-child { font-size: 24px; line-height: 1; }
html[dir="rtl"] .contract-modal-back span:first-child { transform: scaleX(-1); }
.contract-modal-intro { display: flex; align-items: flex-start; gap: 16px; padding: 18px; border: 1px solid rgba(120,164,255,.22); border-radius: 22px; background: rgba(39,59,102,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.contract-intro-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 16px; background: rgba(55,104,226,.28); color: #70a6ff; font-weight: 900; }
.contract-intro-badge { display: block; margin-bottom: 3px; color: rgba(224,236,255,.82); font-size: .92rem; font-weight: 800; }
.contract-modal-intro h3 { margin: 0 0 8px; font-size: clamp(1.25rem, 1.8vw, 1.9rem); color: #fff; }
.contract-modal-intro p { margin: 0; color: rgba(225,236,255,.82); }
.contract-modal-question { margin: 26px 0 14px; font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 850; color: #fff; }
.contract-choices { display: grid; gap: 14px; }
.contract-choice-card { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 18px; background: linear-gradient(180deg, rgba(15,28,61,.98), rgba(16,32,69,.98)); border: 1px solid rgba(104,148,255,.24); border-radius: 22px; color: #fff; cursor: pointer; text-align: start; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.contract-choice-card:hover { transform: translateY(-1px); border-color: rgba(126,180,255,.48); background: linear-gradient(180deg, rgba(18,36,78,.98), rgba(19,39,84,.98)); }
.contract-choice-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 16px; font-size: 20px; font-weight: 900; border: 1px solid rgba(255,255,255,.12); }
.contract-choice-icon.is-gold { background: rgba(197,146,28,.18); color: #ffca57; }
.contract-choice-icon.is-rose { background: rgba(180,76,108,.18); color: #ff8da6; }
.contract-choice-icon.is-blue { background: rgba(44,120,217,.18); color: #73b4ff; }
.contract-choice-icon.is-mint { background: rgba(28,167,145,.18); color: #57e2c3; }
.contract-choice-label { flex: 1; font-size: 1.18rem; font-weight: 820; }
.contract-choice-arrow { color: rgba(215,229,255,.7); font-size: 28px; line-height: 1; }
html[dir="rtl"] .contract-choice-arrow { transform: scaleX(-1); }
.contract-modal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(117,159,255,.14); }
.contract-modal-foot p { margin: 0; max-width: 760px; color: rgba(225,236,255,.78); }
.contract-website-link { white-space: nowrap; }
html[dir="rtl"] .contract-modal-head { flex-direction: row-reverse; justify-content: flex-end; }
html[dir="rtl"] .contract-modal-intro,
html[dir="rtl"] .contract-choice-card,
html[dir="rtl"] .contract-modal-foot { direction: rtl; }

@media (max-width: 760px) {
  .connected-mobile-logo-icon { width: 114px; height: 34px; flex-basis: 114px; }
  .contract-modal-backdrop { padding: 0; }
  .contract-modal { width: 100%; height: 100vh; border-radius: 0; border-left: 0; border-right: 0; }
  .contract-modal-inner { padding: 18px 16px 24px; }
  .contract-modal-head { gap: 12px; margin-bottom: 18px; }
  .contract-modal-head h2 { font-size: 1.45rem; }
  .contract-modal-intro { padding: 16px; border-radius: 18px; }
  .contract-modal-question { margin-top: 22px; font-size: 1.08rem; }
  .contract-choice-card { padding: 15px 15px; border-radius: 18px; }
  .contract-choice-label { font-size: 1.02rem; }
  .contract-modal-foot { align-items: stretch; }
  .contract-website-link { width: 100%; justify-content: center; }
}


/* Part 15 — interactive contract questions */
.contract-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 22px; border: 1px solid rgba(107,153,255,.18); border-radius: 16px; overflow: hidden; background: rgba(7,21,48,.46); }
.contract-progress-step { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; color: rgba(209,225,255,.48); border-right: 1px solid rgba(107,153,255,.14); font-size: 12px; text-align: center; }
.contract-progress-step:last-child { border-right: 0; }
.contract-progress-step span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; border-radius: 50%; color: #b8c9e4; background: rgba(178,198,230,.11); font-size: 11px; font-weight: 850; }
.contract-progress-step b { font-weight: 760; }
.contract-progress-step.is-done, .contract-progress-step.is-active { color: #eaf4ff; background: rgba(31,81,159,.18); }
.contract-progress-step.is-done span, .contract-progress-step.is-active span { color: #e7fbff; background: #2b83ff; box-shadow: 0 0 0 4px rgba(47,132,255,.12); }
.contract-progress-step.is-active { box-shadow: inset 0 -2px 0 #55d8cd; }
html[dir="rtl"] .contract-progress-step { border-right: 0; border-left: 1px solid rgba(107,153,255,.14); }
html[dir="rtl"] .contract-progress-step:last-child { border-left: 0; }

.contract-flow-service { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 18px; padding: 16px; border: 1px solid rgba(111,164,255,.2); border-radius: 19px; background: linear-gradient(120deg, rgba(26,55,105,.75), rgba(17,42,82,.56)); }
.contract-flow-service .contract-choice-icon { margin-top: 1px; }
.contract-flow-service b { display: block; margin-bottom: 4px; color: #91b9ff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.contract-flow-service strong { display: block; color: #fff; font-size: 18px; }
.contract-flow-service p { margin: 5px 0 0; color: rgba(226,238,255,.78); font-size: 13px; line-height: 1.55; }
.contract-question-form { display: grid; gap: 15px; }
.contract-form-field { margin: 0; padding: 17px; border: 1px solid rgba(115,161,255,.18); border-radius: 19px; background: rgba(13,29,62,.58); }
.contract-form-field legend { padding: 0 5px; color: #fff; font-size: 15px; font-weight: 820; }
.contract-field-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.contract-field-option { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 11px 12px; color: rgba(230,239,255,.83); border: 1px solid rgba(118,163,255,.18); border-radius: 13px; background: rgba(22,43,85,.58); cursor: pointer; font-size: 13px; font-weight: 650; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.contract-field-option:hover { border-color: rgba(112,181,255,.5); background: rgba(31,63,121,.66); transform: translateY(-1px); }
.contract-field-option.is-selected { color: #f3fbff; border-color: rgba(74,218,203,.65); background: linear-gradient(135deg, rgba(19,126,135,.36), rgba(29,78,149,.4)); }
.contract-field-option input { width: 17px; height: 17px; margin: 0; accent-color: #39cdbd; }
.contract-text-input { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 0 14px; border: 1px solid rgba(118,163,255,.28); border-radius: 13px; background: rgba(22,43,85,.64); }
.contract-text-input:focus-within { border-color: rgba(89,204,194,.7); box-shadow: 0 0 0 3px rgba(58,198,184,.1); }
.contract-text-input input { width: 100%; min-height: 48px; padding: 0; border: 0; outline: 0; color: #fff; background: transparent; font: inherit; }
.contract-text-input input::placeholder { color: rgba(196,215,244,.52); }
.contract-text-input span { color: #78b6ff; font-size: 17px; }
.contract-field-error { display: block; min-height: 15px; margin: 6px 2px 0; color: #ff9eae; font-size: 11px; font-weight: 650; }
.contract-preview-note, .contract-review-notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid rgba(73,213,198,.24); border-radius: 15px; background: rgba(13,129,118,.13); }
.contract-preview-note > span, .contract-review-notice > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; border-radius: 7px; color: #c8fffa; background: rgba(74,217,203,.2); font-size: 12px; font-weight: 900; }
.contract-preview-note p, .contract-review-notice p { margin: 1px 0 0; color: rgba(220,255,251,.88); font-size: 12px; font-weight: 650; line-height: 1.5; }
.contract-form-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 2px; }
.contract-form-actions .button { min-width: 184px; justify-content: center; }

.contract-review-hero { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border: 1px solid rgba(80,219,203,.32); border-radius: 21px; background: linear-gradient(135deg, rgba(15,125,118,.24), rgba(30,77,145,.34)); }
.contract-review-check { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 46px; border-radius: 16px; color: #d2fffa; background: rgba(72,218,201,.2); border: 1px solid rgba(110,235,219,.35); font-size: 22px; font-weight: 900; }
.contract-review-hero b { display: block; margin-bottom: 5px; color: #a9e9ff; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.contract-review-hero h3 { margin: 0 0 7px; color: #fff; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.12; }
.contract-review-hero p { margin: 0; color: rgba(228,243,255,.8); font-size: 13px; line-height: 1.6; }
.contract-review-card { margin: 16px 0; border: 1px solid rgba(109,158,255,.2); border-radius: 21px; overflow: hidden; background: rgba(13,29,62,.6); }
.contract-review-service { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 16px 18px; border-bottom: 1px solid rgba(109,158,255,.15); }
.contract-review-service > span { color: rgba(202,221,249,.63); font-size: 12px; font-weight: 720; }
.contract-review-service strong { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 15px; }
.contract-review-service .contract-choice-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 10px; font-size: 14px; font-style: normal; }
.contract-review-answers { padding: 13px 18px 5px; }
.contract-review-answers h4 { margin: 0 0 11px; color: #eaf4ff; font-size: 13px; }
.contract-review-answers > div { display: flex; justify-content: space-between; gap: 22px; padding: 11px 0; border-top: 1px solid rgba(109,158,255,.12); }
.contract-review-answers span { color: rgba(202,221,249,.62); font-size: 12px; }
.contract-review-answers b { max-width: 55%; color: #fff; font-size: 13px; text-align: right; }
html[dir="rtl"] .contract-review-answers b { text-align: left; }

@media (max-width: 760px) {
  .contract-progress-step { min-height: 56px; gap: 5px; padding: 8px 5px; font-size: 10px; }
  .contract-progress-step span { width: 19px; height: 19px; flex-basis: 19px; font-size: 10px; }
  .contract-flow-service { padding: 14px; }
  .contract-field-options { grid-template-columns: 1fr; }
  .contract-form-field { padding: 14px; }
  .contract-form-actions { align-items: stretch; }
  .contract-form-actions .button { width: 100%; }
  .contract-review-hero { padding: 16px; }
  .contract-review-service { align-items: flex-start; flex-direction: column; }
  .contract-review-answers > div { flex-direction: column; gap: 4px; }
  .contract-review-answers b { max-width: 100%; text-align: left; }
  html[dir="rtl"] .contract-review-answers b { text-align: right; }
}

/* Visual B-Desk story — product images supplied for the website. */
.visual-story-section { position: relative; overflow: hidden; color: #f5f9ff; background: linear-gradient(145deg, #071a36 0%, #06142d 52%, #071a34 100%); isolation: isolate; }
.visual-story-section::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .46; background-image: linear-gradient(rgba(92,164,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(92,164,255,.055) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, black, transparent 86%); }
.visual-story-ambient { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(24px); }
.visual-story-ambient-one { width: 620px; height: 620px; top: -360px; right: -230px; background: radial-gradient(circle, rgba(35,196,187,.22), transparent 68%); }
.visual-story-ambient-two { width: 500px; height: 500px; bottom: -310px; left: -230px; background: radial-gradient(circle, rgba(48,115,255,.18), transparent 70%); }
.visual-story-heading { max-width: 760px; margin-bottom: 34px; }
.visual-story-heading h2 { color: #fff; }
.visual-story-heading .section-lead { color: rgba(226,236,250,.78); }
.visual-story-shell { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: stretch; }
.visual-story-stage { min-width: 0; padding: 12px; border: 1px solid rgba(139,181,255,.24); border-radius: 24px; background: linear-gradient(180deg, rgba(16,38,77,.92), rgba(8,22,49,.96)); box-shadow: 0 25px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055); }
.visual-story-image-button { position: relative; width: 100%; display: block; padding: 0; overflow: hidden; border: 0; border-radius: 17px; background: #021126; cursor: zoom-in; }
.visual-story-image-button img { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: contain; transition: transform .35s ease; }
.visual-story-image-button:hover img { transform: scale(1.012); }
.visual-story-expand { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: rgba(3,17,39,.68); border: 1px solid rgba(255,255,255,.16); font-size: 20px; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.visual-story-image-button:hover .visual-story-expand, .visual-story-image-button:focus-visible .visual-story-expand { opacity: 1; transform: translateY(-1px); }
.visual-story-stage-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 6px 3px; }
.visual-story-stage-meta > div:first-child { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.visual-story-stage-meta strong { overflow: hidden; color: #fff; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.visual-story-index { color: #60ddda; font-size: 12px; font-weight: 850; letter-spacing: .12em; white-space: nowrap; }
.visual-story-arrows { display: flex; gap: 8px; }
.visual-story-arrows button { width: 38px; height: 36px; display: grid; place-items: center; color: #eaf4ff; border: 1px solid rgba(155,190,255,.22); border-radius: 10px; background: rgba(255,255,255,.06); cursor: pointer; font-size: 18px; transition: background .2s ease, border-color .2s ease; }
.visual-story-arrows button:hover { background: rgba(55,125,244,.2); border-color: rgba(122,182,255,.45); }
.visual-story-caution { display: flex; align-items: flex-start; gap: 9px; margin: 12px 6px 4px; color: rgba(230,240,255,.74); font-size: 12px; line-height: 1.5; }
.visual-story-caution span { width: 17px; height: 17px; display: grid; place-items: center; flex: 0 0 17px; border-radius: 50%; color: #092448; background: #66dfd5; font-weight: 900; font-size: 11px; }
.visual-story-sidebar { min-width: 0; display: flex; flex-direction: column; padding: 16px 12px 12px; border: 1px solid rgba(139,181,255,.18); border-radius: 24px; background: rgba(4,18,44,.64); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.visual-story-hint { margin: 0 8px 10px; color: rgba(218,232,251,.66); font-size: 12px; line-height: 1.45; }
.visual-story-thumbnails { display: grid; gap: 7px; max-height: 474px; padding: 0 4px 4px; overflow: auto; scrollbar-color: rgba(71,188,188,.55) transparent; }
.visual-story-thumb { display: grid; grid-template-columns: 26px 78px minmax(0, 1fr); gap: 9px; align-items: center; width: 100%; padding: 7px; color: rgba(229,239,255,.76); text-align: left; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.visual-story-thumb:hover { background: rgba(50,102,187,.16); color: #fff; }
.visual-story-thumb.is-active { color: #fff; border-color: rgba(42,207,195,.42); background: linear-gradient(110deg, rgba(24,188,179,.17), rgba(51,111,218,.16)); }
.visual-story-thumb-number { color: #61dfd6; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.visual-story-thumb img { width: 78px; height: 44px; display: block; object-fit: cover; border-radius: 7px; background: #021126; }
.visual-story-thumb > span:last-child { display: -webkit-box; overflow: hidden; font-size: 12px; font-weight: 760; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.visual-story-note { display: flex; align-items: center; gap: 8px; margin: 15px 0 0; color: rgba(216,231,250,.64); font-size: 12px; }
.visual-story-note span { color: #56dcd2; }

.story-lightbox-backdrop { position: fixed; inset: 0; z-index: 125; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(1,7,18,.86); backdrop-filter: blur(8px); }
.story-lightbox-backdrop.show { display: flex; }
.story-lightbox { position: relative; width: min(1460px, 100%); max-height: calc(100vh - 40px); padding: 20px; overflow: auto; border: 1px solid rgba(142,186,255,.22); border-radius: 24px; background: linear-gradient(180deg, #071a37, #041129); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.story-lightbox-close { position: absolute; right: 18px; top: 16px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; cursor: pointer; font-size: 24px; }
.story-lightbox-toolbar { display: flex; align-items: center; gap: 12px; margin: 0 54px 15px 2px; color: #fff; }
.story-lightbox-toolbar span { color: #61dfd6; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.story-lightbox-toolbar strong { font-size: 16px; }
.story-lightbox-image-wrap { display: grid; place-items: center; border-radius: 16px; overflow: hidden; background: #020d20; }
.story-lightbox-image-wrap img { width: 100%; max-height: calc(100vh - 205px); display: block; object-fit: contain; }
.story-lightbox-controls { display: flex; justify-content: space-between; gap: 12px; margin-top: 15px; }
.story-lightbox-controls button { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 14px; color: #eff7ff; background: rgba(255,255,255,.06); border: 1px solid rgba(147,190,255,.23); border-radius: 12px; font: inherit; font-size: 13px; font-weight: 780; cursor: pointer; }
.story-lightbox-controls button:hover { background: rgba(44,120,234,.18); }
html[dir="rtl"] .visual-story-stage-meta, html[dir="rtl"] .visual-story-sidebar, html[dir="rtl"] .visual-story-note, html[dir="rtl"] .story-lightbox-toolbar, html[dir="rtl"] .story-lightbox-controls { direction: rtl; }
html[dir="rtl"] .visual-story-thumb { text-align: right; }
html[dir="rtl"] .visual-story-expand { right: auto; left: 14px; }
html[dir="rtl"] .story-lightbox-close { right: auto; left: 18px; }
html[dir="rtl"] .story-lightbox-toolbar { margin: 0 2px 15px 54px; }
html[dir="rtl"] .visual-story-arrows button:first-child, html[dir="rtl"] .visual-story-arrows button:last-child, html[dir="rtl"] .story-lightbox-controls button span[aria-hidden="true"] { transform: scaleX(-1); }

@media (max-width: 1050px) {
  .visual-story-shell { grid-template-columns: 1fr; }
  .visual-story-sidebar { padding: 14px 0 7px; }
  .visual-story-hint { margin: 0 15px 10px; }
  .visual-story-thumbnails { grid-auto-flow: column; grid-auto-columns: 184px; grid-template-columns: none; max-height: none; padding: 0 15px 8px; overflow-x: auto; overflow-y: hidden; }
  .visual-story-thumb { grid-template-columns: 24px 70px minmax(0, 1fr); }
  .visual-story-thumb img { width: 70px; height: 40px; }
}

@media (max-width: 580px) {
  .visual-story-heading { margin-bottom: 25px; }
  .visual-story-stage { padding: 8px; border-radius: 18px; }
  .visual-story-image-button { border-radius: 12px; }
  .visual-story-expand { opacity: 1; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 10px; font-size: 16px; }
  .visual-story-stage-meta { gap: 10px; padding: 12px 4px 2px; }
  .visual-story-stage-meta strong { font-size: 13px; }
  .visual-story-index { font-size: 10px; }
  .visual-story-arrows { gap: 5px; }
  .visual-story-arrows button { width: 32px; height: 31px; border-radius: 9px; font-size: 15px; }
  .visual-story-sidebar { border-radius: 18px; }
  .visual-story-thumbnails { grid-auto-columns: 168px; }
  .visual-story-thumb { grid-template-columns: 20px 60px minmax(0, 1fr); gap: 7px; padding: 6px; }
  .visual-story-thumb img { width: 60px; height: 34px; }
  .visual-story-thumb > span:last-child { font-size: 10px; }
  .visual-story-note { align-items: flex-start; font-size: 11px; }
  .story-lightbox-backdrop { padding: 0; }
  .story-lightbox { width: 100%; height: 100vh; max-height: none; padding: 14px; border-radius: 0; border-left: 0; border-right: 0; }
  .story-lightbox-toolbar { margin: 0 48px 12px 1px; }
  .story-lightbox-toolbar strong { font-size: 13px; }
  .story-lightbox-image-wrap { min-height: 0; }
  .story-lightbox-image-wrap img { max-height: calc(100vh - 175px); }
  .story-lightbox-controls button { min-height: 39px; padding: 0 11px; font-size: 12px; }
  html[dir="rtl"] .story-lightbox-toolbar { margin: 0 1px 12px 48px; }
}


@media (max-width: 1050px) {
  .hero-image { object-position: 69% center; }
  .hero-image[data-hero-slide="1"] { object-position: 70% top; }
}
@media (max-width: 680px) {
  .hero-image { object-position: 72% center; }
  .hero-image[data-hero-slide="1"] { object-position: 72% center; }
  .hero-carousel-controls { margin-top: 24px; }
  .hero-carousel-dots button { width: 20px; }
  .hero-carousel-dots button.is-active { width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image { transition: none; transform: none; }
  .hero-image.is-active { transform: none; }
}

/* Part 19 — Arabic hero image composition.
   The hero photos are composed for LTR: people on the right and open space on the left.
   For RTL, mirror the photos so people stay visible on the left, while Arabic copy uses the dark right side. */
html[dir="rtl"] .hero-image {
  transform: scaleX(-1) scale(1.025);
  transform-origin: center center;
}

html[dir="rtl"] .hero-image.is-active {
  transform: scaleX(-1) scale(1);
}

/* Keep the dark readability layer behind Arabic copy on the right,
   but lighten the image side so people and the calm/relief expression remain visible. */
html[dir="rtl"] .hero-shade {
  transform: none;
  background:
    linear-gradient(270deg,
      rgba(5,17,34,.99) 0%,
      rgba(5,17,34,.92) 34%,
      rgba(5,17,34,.55) 62%,
      rgba(5,17,34,.16) 100%),
    linear-gradient(0deg, rgba(4,16,32,.42), transparent 38%);
}

@media (prefers-reduced-motion: reduce) {
  html[dir="rtl"] .hero-image,
  html[dir="rtl"] .hero-image.is-active {
    transform: scaleX(-1);
  }
}

/* --------------------------------------------------------------------------
   Part 20 — Customer app-style interactive preview
   -------------------------------------------------------------------------- */
.preview-workspace { width: min(1180px, calc(100vw - 28px)); min-height: min(820px, calc(100vh - 28px)); max-height: calc(100vh - 28px); border-radius: 24px; background: #091225; }
.preview-workspace .modal-close { display: none; }
.customer-demo-app { min-height: min(820px, calc(100vh - 28px)); display: flex; flex-direction: column; color: #f6f9ff; background: radial-gradient(circle at 75% -20%, rgba(54,125,250,.18), transparent 32%), #080f20; }
.app-preview-topbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 15px 11px 19px; border-bottom: 1px solid rgba(143,184,244,.15); background: rgba(8,17,34,.92); }
.app-top-leading, .app-top-actions { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.app-top-leading strong { color: #f8fbff; font-size: 16px; letter-spacing: -.025em; }
.app-logo-dot { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; color: #d8fbff; background: linear-gradient(135deg, #367df7, #13b6c6); box-shadow: 0 8px 19px rgba(39,122,240,.25); }
.app-round-button { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border: 1px solid rgba(137,183,244,.22); border-radius: 11px; color: #c7d8ef; background: rgba(26,47,80,.72); font: inherit; font-size: 25px; line-height: 1; cursor: pointer; transition: .18s ease; }
.app-round-button:hover { color: #fff; border-color: rgba(114,181,255,.58); background: rgba(39,77,131,.78); }
.app-close-demo { font-size: 22px; }
.app-sample-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(80,218,198,.27); border-radius: 999px; color: #b8f6ed; background: rgba(16,126,110,.13); font-size: 10px; font-weight: 780; white-space: nowrap; }
.app-sample-badge i { width: 7px; height: 7px; border-radius: 50%; background: #42dcca; box-shadow: 0 0 0 4px rgba(66,220,202,.12); }
.app-preview-body { flex: 1; min-height: 0; overflow: auto; background: linear-gradient(180deg, rgba(12,27,53,.7), #0b1427 78%); }
.app-bottom-nav { position: sticky; bottom: 0; z-index: 6; min-height: 70px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); align-items: stretch; padding: 6px 10px 8px; border-top: 1px solid rgba(143,184,244,.14); background: rgba(7,15,30,.97); }
.app-nav-item { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 12px; color: #95a9c7; background: transparent; font: inherit; font-size: 10px; font-weight: 650; cursor: pointer; transition: .18s ease; }
.app-nav-item .app-icon { font-size: 21px; line-height: 1; }
.app-nav-item.is-active { color: #fff; background: linear-gradient(180deg, rgba(45,118,241,.87), rgba(28,83,175,.9)); box-shadow: 0 8px 20px rgba(22,83,174,.22); }
.app-screen, .app-home { width: min(880px, 100%); margin: 0 auto; padding: 22px clamp(15px, 3vw, 32px) 28px; }
.app-home { display: grid; gap: 18px; }
.app-welcome-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 18px 18px 20px; border: 1px solid rgba(99,155,239,.35); border-radius: 20px; background: linear-gradient(130deg, rgba(34,69,124,.83), rgba(24,44,80,.86)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 38px rgba(0,0,0,.14); }
.app-welcome-card span { display: block; color: #afc4e4; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.app-welcome-card h1 { margin: 5px 0 6px; color: #fff; font-size: clamp(20px, 3.5vw, 27px); line-height: 1.06; letter-spacing: -.04em; }
.app-welcome-card p { max-width: 560px; margin: 0; color: #c3d1e7; font-size: 13px; line-height: 1.5; }
.app-welcome-mark { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 46px; border: 1px solid rgba(112,181,255,.36); border-radius: 15px; color: #99c9ff; background: rgba(38,102,205,.24); font-size: 22px; }
.app-home-section > h2, .app-section-line h2, .app-category-group h2 { margin: 0; color: #f6f9ff; font-size: 15px; letter-spacing: -.02em; }
.app-section-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.app-section-line button { border: 0; color: #76b0ff; background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.app-badge-amber { padding: 4px 8px; border-radius: 999px; color: #ffdc9e; background: rgba(223,156,40,.18); font-size: 10px; font-weight: 800; }
.app-quick-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.app-action-card { min-height: 76px; display: grid; grid-template-columns: 37px minmax(0,1fr) 16px; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(139,179,232,.2); border-radius: 15px; color: #ecf4ff; background: linear-gradient(150deg, rgba(22,42,76,.97), rgba(14,30,57,.98)); text-align: start; cursor: pointer; transition: .18s ease; }
.app-action-card:hover { transform: translateY(-1px); border-color: rgba(118,183,255,.5); background: linear-gradient(150deg, rgba(28,58,103,.98), rgba(17,37,71,.99)); }
.app-action-card.app-action-wide { grid-column: 1 / -1; }
.app-action-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; color: #a8ceff; background: rgba(43,111,222,.2); border: 1px solid rgba(86,159,255,.3); font-size: 17px; }
.app-tone-mint .app-action-icon { color: #91eee0; background: rgba(23,151,131,.18); border-color: rgba(74,224,201,.27); }
.app-tone-gold .app-action-icon { color: #ffd38b; background: rgba(184,124,19,.18); border-color: rgba(255,189,78,.25); }
.app-tone-teal .app-action-icon { color: #8ff1e7; background: rgba(16,131,136,.18); border-color: rgba(69,222,215,.25); }
.app-action-card strong, .app-action-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-action-card strong { font-size: 13px; }
.app-action-card small { margin-top: 3px; color: #a9bad1; font-size: 10px; }
.app-action-card > i, .app-latest-item > i, .app-message-card > b, .app-file-row > b { color: #9fb8dc; font-size: 18px; font-style: normal; }
.app-attention-card { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; margin-top: 10px; padding: 14px; border: 1px solid rgba(232,171,75,.36); border-radius: 17px; color: #f4f8ff; background: linear-gradient(140deg, rgba(64,45,35,.55), rgba(20,37,66,.96)); text-align: start; cursor: pointer; }
.app-attention-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #ffd188; background: rgba(191,120,21,.2); border: 1px solid rgba(250,183,77,.3); }
.app-attention-card strong { display: block; font-size: 13px; }
.app-attention-card p { margin: 6px 0 8px; color: #cbd6e4; font-size: 11px; line-height: 1.45; }
.app-attention-card span { color: #fff1ce; font-size: 11px; font-weight: 750; }
.app-attention-card span i { margin-inline-start: 6px; font-style: normal; }
.app-deadline-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(121,160,212,.18); border-radius: 14px; background: rgba(12,27,51,.7); }
.app-deadline-mini { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #ffc25c; background: rgba(188,128,31,.16); }
.app-deadline-row b, .app-deadline-row small { display: block; }
.app-deadline-row b { color: #f8fbff; font-size: 11px; }
.app-deadline-row small { margin-top: 3px; color: #b6c5d8; font-size: 10px; }
.app-deadline-warning { margin-inline-start: auto; color: #ffbe5c; font-size: 10px; }
.app-latest-item, .app-connected-strip { width: 100%; display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 12px; border: 1px solid rgba(129,169,221,.16); border-radius: 14px; color: #eef5ff; background: rgba(14,29,55,.73); text-align: start; cursor: pointer; }
.app-latest-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 10px; color: #89c7ff; background: rgba(37,104,214,.16); }
.app-latest-item span:nth-child(2) { min-width: 0; flex: 1; }
.app-latest-item strong, .app-latest-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-latest-item strong { font-size: 12px; }
.app-latest-item small { margin-top: 3px; color: #9cb0cc; font-size: 10px; }
.app-connected-strip { justify-content: space-between; border-color: rgba(207,178,93,.24); color: #faeccd; background: linear-gradient(135deg, rgba(82,66,37,.64), rgba(14,29,55,.78)); }
.app-connected-strip span { font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.app-connected-strip small { margin-inline-end: auto; color: #d6c497; font-size: 10px; }
.app-privacy-foot { display: flex; gap: 7px; margin: 0; padding: 2px 4px; color: #8196b5; font-size: 10px; line-height: 1.45; }
.app-privacy-foot i { color: #41dbc8; font-style: normal; }
.app-screen { display: grid; gap: 16px; }
.app-screen-heading h1 { margin: 0; color: #fff; font-size: clamp(24px, 3.7vw, 32px); line-height: 1.06; letter-spacing: -.045em; }
.app-screen-heading p { max-width: 680px; margin: 7px 0 0; color: #aebed4; font-size: 13px; line-height: 1.55; }
.app-panel { padding: 16px; border: 1px solid rgba(140,181,235,.2); border-radius: 19px; background: linear-gradient(150deg, rgba(26,49,87,.94), rgba(12,26,49,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 38px rgba(0,0,0,.11); }
.app-upload-intro, .app-form-card-title, .app-linked-document, .app-case-chip { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid rgba(139,180,234,.18); border-radius: 14px; background: rgba(8,20,40,.48); }
.app-upload-hero-icon, .app-form-card-title > i, .app-linked-document > i, .app-case-chip > i { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border: 1px solid rgba(77,149,255,.35); border-radius: 12px; color: #9dccff; background: rgba(42,101,204,.19); font-style: normal; }
.app-upload-intro strong, .app-upload-intro small, .app-form-card-title strong, .app-form-card-title small, .app-linked-document strong, .app-linked-document small { display: block; }
.app-upload-intro strong, .app-form-card-title strong, .app-linked-document strong { color: #f5f9ff; font-size: 13px; }
.app-upload-intro small, .app-form-card-title small, .app-linked-document small { margin-top: 4px; color: #9bb0cc; font-size: 10px; line-height: 1.4; }
.app-stepper, .app-form-progress { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 15px 0; }
.app-stepper span, .app-form-progress span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(142,181,229,.22); border-radius: 9px; color: #a7bedb; background: rgba(25,50,83,.65); font-size: 10px; font-weight: 850; }
.app-stepper span.is-current, .app-form-progress span.is-current { color: #d7f8ff; border-color: rgba(87,188,255,.5); background: #246dd6; }
.app-form-progress span.is-done { color: #06282c; border-color: transparent; background: #69ddcd; }
.app-stepper i, .app-form-progress i { width: 30px; height: 1px; background: rgba(131,176,231,.3); }
.app-panel h3 { margin: 18px 0 9px; color: #eaf3ff; font-size: 13px; }
.app-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.app-choice-pill { min-height: 58px; display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid rgba(134,175,232,.18); border-radius: 13px; color: #c4d3e6; background: rgba(13,29,55,.66); text-align: start; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.app-choice-pill i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #8fc7ff; background: rgba(46,111,220,.18); font-style: normal; }
.app-choice-pill.is-selected { color: #fff; border-color: rgba(77,150,255,.55); background: linear-gradient(135deg, rgba(38,105,211,.62), rgba(22,70,136,.72)); }
.app-upload-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.app-upload-method { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(137,181,237,.2); border-radius: 10px; color: #c4d1e4; background: rgba(10,24,45,.66); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.app-upload-method i { font-style: normal; }
.app-upload-method.is-selected { color: #fff; border-color: rgba(72,146,255,.55); background: #286ee0; }
.app-demo-file { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 10px; border: 1px solid rgba(132,175,228,.16); border-radius: 12px; background: rgba(10,24,45,.72); }
.app-demo-file > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #8fc1ff; background: rgba(34,100,208,.2); font-style: normal; }
.app-demo-file span { min-width: 0; flex: 1; }
.app-demo-file strong, .app-demo-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-demo-file strong { color: #edf5ff; font-size: 11px; }
.app-demo-file small { margin-top: 3px; color: #9bb0cb; font-size: 10px; }
.app-demo-file button { border: 0; color: #b8c7da; background: transparent; font-size: 18px; cursor: pointer; }
.app-primary-action, .app-secondary-action, .app-form-link { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; font: inherit; font-size: 12px; font-weight: 790; cursor: pointer; }
.app-primary-action { width: 100%; margin-top: 16px; border: 0; color: #fff; background: linear-gradient(135deg, #2c80ff, #2565cf); box-shadow: 0 10px 22px rgba(26,99,218,.25); }
.app-secondary-action { min-width: 0; flex: 1; padding: 0 12px; border: 1px solid rgba(110,171,244,.38); color: #e7f4ff; background: rgba(17,53,98,.55); }
.app-form-link { width: 100%; margin-top: 10px; border: 1px solid rgba(83,217,193,.36); color: #ccfff7; background: rgba(15,122,105,.17); }
.app-primary-action span, .app-form-link span { font-size: 17px; }
.app-document-file { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 12px; border: 1px solid rgba(137,180,232,.18); border-radius: 14px; background: rgba(9,21,41,.55); }
.app-document-file-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #8ec9ff; background: rgba(37,105,211,.19); }
.app-document-file > div { min-width: 0; flex: 1; }
.app-document-file strong, .app-document-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-document-file strong { color: #eff6ff; font-size: 12px; }
.app-document-file small { margin-top: 4px; color: #9cafc9; font-size: 10px; }
.app-ready-dot { color: #8af2e1; font-size: 9px; font-weight: 800; }
.app-document-stack { display: grid; gap: 9px; margin-top: 12px; }
.app-document-insight { padding: 13px; border: 1px solid rgba(140,183,236,.16); border-radius: 14px; background: rgba(11,27,51,.58); }
.app-insight-label { display: flex; align-items: center; gap: 8px; color: #a8c5e9; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.app-insight-label i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 8px; color: #8cc8ff; background: rgba(37,105,214,.18); font-style: normal; }
.app-document-insight p { margin: 8px 0 0; color: #eaf2ff; font-size: 12px; line-height: 1.52; }
.app-document-insight.is-urgent { border-color: rgba(250,180,77,.4); background: rgba(102,63,18,.2); }
.app-document-insight.is-urgent .app-insight-label { color: #ffd294; }
.app-document-insight.is-urgent .app-insight-label i { color: #ffd28e; background: rgba(199,124,26,.18); }
.app-dual-actions { display: flex; gap: 9px; margin-top: 13px; }
.app-case-header { display: flex; align-items: flex-start; gap: 12px; }
.app-case-folder { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border: 1px solid rgba(73,225,202,.3); border-radius: 14px; color: #89eedf; background: rgba(15,130,118,.17); }
.app-case-header span { color: #99afc9; font-size: 10px; font-weight: 800; }
.app-case-header h1 { margin: 3px 0 5px; color: #fff; font-size: clamp(21px, 3vw, 28px); line-height: 1.12; letter-spacing: -.04em; }
.app-case-header p { margin: 0; color: #aabbd1; font-size: 12px; line-height: 1.5; }
.app-case-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 2px 0 0; padding: 5px; border: 1px solid rgba(137,181,235,.16); border-radius: 13px; background: rgba(10,22,42,.65); }
.app-case-tabs button { min-height: 33px; border: 0; border-radius: 9px; color: #9db3cd; background: transparent; font: inherit; font-size: 10px; font-weight: 760; cursor: pointer; }
.app-case-tabs button.is-active { color: #fff; background: #245fba; box-shadow: 0 6px 13px rgba(12,57,136,.25); }
.app-case-next { display: flex; gap: 10px; padding: 12px; border: 1px solid rgba(246,180,75,.34); border-radius: 14px; background: rgba(92,59,20,.16); }
.app-case-next > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border-radius: 10px; color: #ffce7a; background: rgba(195,126,29,.18); }
.app-case-next b { color: #fff2d8; font-size: 12px; }
.app-case-next p { margin: 5px 0 0; color: #cfc5af; font-size: 11px; line-height: 1.45; }
.app-case-card-list, .app-case-docs { display: grid; gap: 9px; margin-top: 12px; }
.app-case-card-list button, .app-case-docs button { display: grid; grid-template-columns: 31px minmax(0,1fr) 12px; gap: 10px; align-items: center; padding: 11px; border: 1px solid rgba(137,181,235,.15); border-radius: 12px; color: #eef5ff; background: rgba(9,23,43,.53); text-align: start; cursor: pointer; }
.app-case-card-list i, .app-case-docs i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #9fc7ff; background: rgba(38,106,210,.18); font-style: normal; }
.app-case-card-list strong, .app-case-card-list small, .app-case-docs strong, .app-case-docs small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-case-card-list strong, .app-case-docs strong { font-size: 11px; }
.app-case-card-list small, .app-case-docs small { margin-top: 3px; color: #9bafc9; font-size: 9px; }
.app-case-card-list b, .app-case-docs b { color: #aac1db; font-size: 16px; }
.app-case-docs h3, .app-case-activity h3 { margin: 0 0 10px; }
.app-note-box { padding: 12px; border: 1px dashed rgba(137,181,235,.25); border-radius: 12px; color: #aabbd1; background: rgba(8,20,40,.45); font-size: 11px; line-height: 1.48; }
.app-timeline { display: grid; gap: 8px; margin-top: 13px; padding: 2px 4px; color: #c3d3e8; font-size: 11px; }
.app-timeline span::first-letter { color: #57d9c7; }
.app-draft-card { margin-top: 13px; padding: 14px; border: 1px solid rgba(86,222,198,.27); border-radius: 15px; background: linear-gradient(145deg, rgba(14,99,87,.25), rgba(12,32,55,.62)); }
.app-draft-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-draft-head strong { color: #d6fff7; font-size: 12px; }
.app-draft-card > p { margin: 12px 0; color: #f0fffb; font-size: 12px; line-height: 1.58; }
.app-status { display: inline-flex; padding: 5px 7px; border-radius: 7px; font-size: 9px; font-weight: 810; white-space: nowrap; }
.app-status-mint { color: #a5faec; background: rgba(39,164,143,.18); }
.app-status-amber { color: #ffdaa3; background: rgba(188,121,21,.18); }
.app-review-box { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border-radius: 11px; color: #bce9e1; background: rgba(21,107,94,.21); }
.app-review-box > i { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; border-radius: 7px; color: #073530; background: #70e1d0; font-style: normal; font-weight: 900; }
.app-review-box strong, .app-review-box small { display: block; }
.app-review-box strong { color: #e2fff9; font-size: 10px; }
.app-review-box small { margin-top: 3px; color: #b4d8d2; font-size: 9px; line-height: 1.4; }
.app-form-fields { display: grid; gap: 9px; margin-top: 14px; }
.app-form-field { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; border: 1px solid rgba(133,179,232,.16); border-radius: 12px; color: #edf5ff; background: rgba(9,23,43,.56); text-align: start; cursor: pointer; }
.app-form-field strong, .app-form-field small { display: block; }
.app-form-field strong { font-size: 11px; }
.app-form-field small { margin-top: 3px; color: #91e6d9; font-size: 9px; }
.app-form-field i { color: #a5bdd8; font-size: 18px; font-style: normal; }
.app-form-field.needs-review { border-color: rgba(248,181,77,.35); }
.app-form-field.needs-review small { color: #ffd091; }
.app-files-group h3 { margin: 0 0 10px; }
.app-file-row { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto 14px; gap: 9px; align-items: center; margin-top: 8px; padding: 11px; border: 1px solid rgba(133,177,231,.16); border-radius: 12px; color: #ebf4ff; background: rgba(9,22,42,.55); text-align: start; cursor: pointer; }
.app-file-row > i { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: #9ccaff; background: rgba(38,104,213,.18); font-style: normal; }
.app-file-row span { min-width: 0; }
.app-file-row strong, .app-file-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-file-row strong { font-size: 11px; }
.app-file-row small { margin-top: 3px; color: #9bb0ca; font-size: 9px; }
.app-files-help { display: flex; gap: 9px; margin-top: 14px; padding: 11px; border: 1px solid rgba(81,217,197,.21); border-radius: 12px; color: #a5d7d0; background: rgba(16,109,95,.13); font-size: 10px; line-height: 1.45; }
.app-files-help i { color: #7ce6d5; font-style: normal; }
.app-message-card, .app-profile-setting { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) 14px; gap: 10px; align-items: center; margin-bottom: 10px; padding: 12px; border: 1px solid rgba(133,178,231,.16); border-radius: 13px; color: #ebf5ff; background: rgba(9,23,43,.55); text-align: start; cursor: pointer; }
.app-message-card > i, .app-profile-setting > i { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: #8fcbff; background: rgba(38,104,213,.18); font-style: normal; }
.app-message-card strong, .app-message-card small, .app-profile-setting strong, .app-profile-setting small { display: block; }
.app-message-card strong, .app-profile-setting strong { font-size: 11px; }
.app-message-card small, .app-profile-setting small { margin-top: 3px; color: #9db1cc; font-size: 9px; line-height: 1.35; }
.app-message-card > b, .app-profile-setting > b { color: #adc2dc; font-size: 18px; }
.app-category-screen { padding-bottom: 40px; }
.app-category-intro { padding: 0; overflow: hidden; }
.app-empty-add { display: flex; gap: 12px; padding: 14px; }
.app-empty-add > i { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border: 1px solid rgba(85,152,255,.35); border-radius: 12px; color: #9acbff; background: rgba(34,101,207,.2); font-style: normal; }
.app-empty-add strong { display: block; color: #f2f7ff; font-size: 12px; }
.app-empty-add p { margin: 4px 0 8px; color: #a9bbd0; font-size: 10px; line-height: 1.45; }
.app-empty-add button { min-height: 32px; padding: 0 10px; border: 1px solid rgba(108,172,245,.34); border-radius: 10px; color: #ecf7ff; background: rgba(25,70,133,.52); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.app-category-group { margin-top: 20px; }
.app-category-group > p { margin: 5px 0 10px; color: #9aafc9; font-size: 10px; }
.app-category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.app-category-card { min-height: 130px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto 1fr auto; align-items: start; gap: 6px 8px; padding: 12px; border: 1px solid rgba(130,176,231,.23); border-radius: 16px; color: #edf5ff; background: rgba(19,37,68,.95); text-align: start; cursor: pointer; }
.app-category-card > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #9dccff; background: rgba(37,104,211,.18); border: 1px solid rgba(77,149,255,.3); font-style: normal; }
.app-category-card .app-count { width: 27px; height: 27px; display: grid; place-items: center; justify-self: end; border: 1px solid rgba(96,164,235,.3); border-radius: 10px; color: #9cc8ff; background: rgba(38,97,198,.17); font-size: 10px; }
.app-category-card strong { grid-column: 1 / -1; align-self: end; color: #f2f7ff; font-size: 12px; line-height: 1.25; }
.app-category-card small { grid-column: 1 / -1; color: #a9bbd1; font-size: 10px; }
.app-category-card b { grid-column: 1 / -1; justify-self: end; margin-top: 4px; padding: 5px 8px; border: 1px solid rgba(97,175,246,.42); border-radius: 999px; color: #82c4ff; font-size: 9px; }
.app-category-card.app-tone-mint > i { color: #82eddc; border-color: rgba(71,222,199,.26); background: rgba(20,139,120,.16); }
.app-category-card.app-tone-mint .app-count { color: #84efdf; border-color: rgba(75,223,204,.26); background: rgba(19,135,119,.16); }
.app-category-card.app-tone-mint b { color: #82efdf; border-color: rgba(73,223,200,.43); }
.app-category-card.app-tone-gold > i { color: #ffcf77; border-color: rgba(255,187,75,.3); background: rgba(180,121,18,.17); }
.app-category-card.app-tone-gold .app-count, .app-category-card.app-tone-gold b { color: #ffd27e; border-color: rgba(255,188,78,.42); background: rgba(180,120,18,.12); }
.app-category-card.app-tone-purple > i { color: #c1a2ff; border-color: rgba(160,121,255,.34); background: rgba(105,68,189,.16); }
.app-category-card.app-tone-purple .app-count, .app-category-card.app-tone-purple b { color: #c5a9ff; border-color: rgba(159,122,255,.43); background: rgba(101,65,182,.12); }
.app-category-card.app-tone-cyan > i { color: #88dfff; border-color: rgba(72,194,246,.32); background: rgba(31,130,179,.16); }
.app-category-card.app-tone-cyan .app-count, .app-category-card.app-tone-cyan b { color: #8ce0ff; border-color: rgba(70,192,246,.42); background: rgba(31,129,177,.12); }
.app-category-card.app-tone-rose > i { color: #ff9db6; border-color: rgba(241,104,146,.35); background: rgba(170,59,91,.16); }
.app-category-card.app-tone-rose .app-count, .app-category-card.app-tone-rose b { color: #ff9fb8; border-color: rgba(239,104,145,.42); background: rgba(168,55,89,.12); }
.app-category-card.app-tone-grey > i { color: #c7d0df; border-color: rgba(165,180,203,.3); background: rgba(109,124,146,.16); }
.app-category-card.app-tone-grey .app-count, .app-category-card.app-tone-grey b { color: #cbd4e1; border-color: rgba(166,181,204,.4); background: rgba(107,121,143,.12); }
.app-language-sheet { position: absolute; z-index: 30; left: 50%; bottom: 0; width: min(630px, 100%); max-height: 83%; overflow: auto; transform: translateX(-50%); padding: 14px 16px 18px; border: 1px solid rgba(130,177,236,.28); border-bottom: 0; border-radius: 26px 26px 0 0; background: #172844; box-shadow: 0 -22px 55px rgba(0,0,0,.4); }
.customer-demo-app { position: relative; }
.app-sheet-grab { width: 44px; height: 4px; margin: 0 auto 17px; border-radius: 999px; background: #5a7ba8; }
.app-language-sheet h2 { margin: 0 0 14px; color: #f7fbff; font-size: 20px; text-align: center; letter-spacing: -.035em; }
.app-language-list { display: grid; gap: 8px; }
.app-language-list button { min-height: 48px; display: grid; grid-template-columns: 28px minmax(0,1fr) 24px; align-items: center; gap: 10px; padding: 0 13px; border: 0; border-radius: 13px; color: #e8f2ff; background: #1d3152; font: inherit; font-size: 13px; font-weight: 720; text-align: start; cursor: pointer; }
.app-language-list button i { color: #b7c9df; font-style: normal; font-size: 18px; }
.app-language-list button b { color: #c8f5ee; }
.app-language-list button.is-selected { background: #275aa4; }
html[dir="rtl"] .customer-demo-app, html[dir="rtl"] .app-preview-topbar, html[dir="rtl"] .app-action-card, html[dir="rtl"] .app-attention-card, html[dir="rtl"] .app-latest-item, html[dir="rtl"] .app-empty-add, html[dir="rtl"] .app-message-card, html[dir="rtl"] .app-profile-setting, html[dir="rtl"] .app-file-row { direction: rtl; text-align: right; }
html[dir="rtl"] .app-top-leading, html[dir="rtl"] .app-top-actions { flex-direction: row-reverse; }
html[dir="rtl"] .app-sample-badge { direction: rtl; }
html[dir="rtl"] .app-chevron, html[dir="rtl"] .app-action-card > i, html[dir="rtl"] .app-latest-item > i, html[dir="rtl"] .app-message-card > b, html[dir="rtl"] .app-profile-setting > b, html[dir="rtl"] .app-file-row > b, html[dir="rtl"] .app-form-field i { transform: scaleX(-1); }
html[dir="rtl"] .app-language-list button { text-align: right; direction: rtl; }

@media (max-width: 760px) {
  .preview-workspace { width: 100vw; min-height: 100vh; max-height: 100vh; border: 0; border-radius: 0; }
  .customer-demo-app { min-height: 100vh; }
  .app-preview-topbar { min-height: 60px; padding: 9px 12px; }
  .app-sample-badge { max-width: 145px; overflow: hidden; text-overflow: ellipsis; }
  .app-screen, .app-home { padding: 17px 14px 24px; }
  .app-welcome-card { padding: 15px; border-radius: 17px; }
  .app-welcome-card h1 { font-size: 22px; }
  .app-welcome-card p { font-size: 11px; }
  .app-welcome-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .app-quick-grid { gap: 8px; }
  .app-action-card { min-height: 70px; padding: 10px; }
  .app-action-card small { white-space: normal; line-height: 1.25; }
  .app-panel { padding: 13px; border-radius: 16px; }
  .app-screen-heading h1 { font-size: 24px; }
  .app-screen-heading p { font-size: 11px; }
  .app-category-grid { gap: 8px; }
  .app-category-card { min-height: 122px; padding: 10px; border-radius: 14px; }
  .app-category-card strong { font-size: 11px; }
  .app-category-card small { font-size: 9px; }
  .app-bottom-nav { min-height: 65px; padding: 5px 6px 7px; }
  .app-nav-item { font-size: 9px; }
  .app-language-sheet { width: 100%; max-height: 81%; border-radius: 24px 24px 0 0; }
}
.app-demo-toast { position: absolute; z-index: 45; left: 50%; bottom: 84px; display: inline-flex; align-items: center; gap: 8px; max-width: min(420px, calc(100% - 32px)); padding: 10px 13px; transform: translate(-50%, 12px); border: 1px solid rgba(91,230,205,.38); border-radius: 13px; color: #d7fff7; background: rgba(9,57,54,.96); box-shadow: 0 16px 32px rgba(0,0,0,.32); font-size: 11px; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.app-demo-toast.show { opacity: 1; transform: translate(-50%, 0); }
.app-demo-toast i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; color: #063a32; background: #70e2d1; font-style: normal; font-weight: 900; }


/* Part 22 — B-Desk logo system */
.brand-logo-wrap { padding: 0; background: transparent; border-radius: 14px; overflow: hidden; box-shadow: 0 9px 24px rgba(0,0,0,.18); }
.brand img { width: 156px; height: auto; }
.cta-logo { width: 168px; padding: 0; background: transparent; border-radius: 18px; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.footer-logo { width: 145px; padding: 0; background: transparent; border-radius: 14px; box-shadow: 0 9px 23px rgba(0,0,0,.18); }
.demo-brand { min-height: 35px; }
.demo-brand-logo { display: block; width: 116px; height: auto; border-radius: 10px; box-shadow: 0 7px 17px rgba(0,0,0,.18); }
.demo-brand-mark { display: none; }
.app-logo-mark { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: 11px; overflow: hidden; background: #fff; box-shadow: 0 8px 19px rgba(39,122,240,.25); }
.app-logo-mark img { display: block; width: 100%; height: 100%; }
.app-logo-dot { display: none; }
@media (max-width: 860px) {
  .brand-logo-wrap { padding: 0; }
  .brand img { width: 130px; }
  .cta-logo { width: 150px; }
  .footer-logo { width: 132px; }
  .demo-brand-logo { width: 104px; }
}


/* Part 23 — direct project contact for the private B-Desk preview. */
.project-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.project-contact-card { min-height: 178px; padding: 25px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border: 1px solid #d8e6f3; border-radius: 20px; color: #172941; background: linear-gradient(150deg, #fff, #f6fbff); box-shadow: 0 13px 31px rgba(17,51,91,.06); }
.project-contact-icon { width: 39px; height: 39px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 13px; color: #166fe9; background: #e8f3ff; font-size: 17px; font-weight: 850; }
.project-contact-card:nth-child(2) .project-contact-icon { color: #087c73; background: #e0f6f1; }
.project-contact-card:nth-child(3) .project-contact-icon { color: #8e5b05; background: #fff2d5; }
.project-contact-label { color: #687990; font-size: 12px; font-weight: 780; letter-spacing: .035em; text-transform: uppercase; }
.project-contact-card strong, .project-contact-card a { color: #132d51; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.25; font-weight: 780; text-decoration: none; overflow-wrap: anywhere; }
.project-contact-card a:hover { color: #176eea; text-decoration: underline; text-underline-offset: 4px; }
html[dir="rtl"] .project-contact-grid, html[dir="rtl"] .project-contact-card { direction: rtl; }
html[dir="rtl"] .project-contact-card { text-align: right; align-items: flex-start; }
html[dir="rtl"] .project-contact-label { letter-spacing: 0; }
@media (max-width: 860px) { .project-contact-grid { grid-template-columns: 1fr; } .project-contact-card { min-height: 0; } }